/* film.css - Home film (engineer A / A2) */
.rs-film { position: relative; height: 401svh; background: #120d09; }
.rs-film__stage { position: sticky; top: 0; height: 100svh; width: 100%; overflow: hidden; background: #120d09; }
.rs-film__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rs-film__veil { position: absolute; inset: 0; background: #E9C9A0; opacity: 0; pointer-events: none; will-change: opacity; }
/* the full-width bottom shade is replaced by a local radial scrim behind each caption (A2) */
.rs-film__shade { display: none; }
/* caption safe area: >= 10 vh from the bottom, 6 vw from the sides */
.rs-film__captions { position: absolute; inset: 0; pointer-events: none; display: grid; place-items: end start;
  padding: 0 6vw max(12svh, 64px); }
.rs-film__cap { position: relative; isolation: isolate; grid-area: 1 / 1; margin: 0; max-width: min(16ch, 88vw); color: #FFF4E4;
  visibility: hidden; opacity: 0;
  font-family: 'Bodoni Moda', 'Bodoni Moda Fallback', Georgia, serif; font-style: normal; font-weight: 500; font-variation-settings: 'opsz' 28;
  font-size: clamp(34px, 5.4vw, 84px); line-height: 1.08; letter-spacing: -.01em; padding-right: .15em;
  text-shadow: 0 1px 3px rgba(10, 6, 3, .45), 0 1px 18px rgba(10, 6, 3, .55); will-change: opacity;
  transition: opacity .15s linear, visibility 0s linear .15s; }
/* R5: the caption is ONE block - a single 150 ms opacity transition in and out, no stagger, no translate, opaque at rest */
.rs-film__cap.is-on { visibility: visible; opacity: 1; transition: opacity .15s linear, visibility 0s; }
/* R5: per-shot position (caption.pos 'top-right', the coffee shot: off the pour) - 64 px from the right, 160 px from the top,
 * max 480 px wide, text left aligned inside the box */
.rs-film__cap--top-right { position: absolute; top: 160px; right: 120px; /* v1.4.0: 64 -> 120, the new coffee picture has the Burj Khalifa at the right edge */ max-width: min(480px, calc(100vw - 128px)); text-align: left; }
/* soft local radial scrim, fades with the caption. A11: 50 % core, 40 % across the text block (4.5:1 on the bright shots), wider fall-off */
.rs-film__cap::before { content: ''; position: absolute; z-index: -1; inset: -70% -34% -60% -28%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(14, 9, 5, .5), rgba(14, 9, 5, .47) 58%, rgba(14, 9, 5, .3) 80%, rgba(14, 9, 5, 0)); }
.rs-film__line { display: block; }
.rs-film__cap--crown { font-family: 'Bodoni Moda', 'Bodoni Moda Fallback', Georgia, serif; font-style: normal; font-weight: 500;
  letter-spacing: -.01em; font-size: clamp(30px, 3.6vw, 58px);
  margin-left: min(0px, calc(32px - 6vw)); } /* A11: right end ~6 vw further left (block -3.8 vw, narrower set) - clear of the tower ribs */
.rs-film__cap--crown .rs-film__line + .rs-film__line { font-family: 'Bodoni Moda', 'Bodoni Moda Fallback', Georgia, serif; font-style: normal;
  font-weight: 500; letter-spacing: 0; font-size: .62em; margin-top: .3em; }
.rs-film__cap--coffee, .rs-film__cap--terrace { max-width: min(19ch, 88vw); font-size: clamp(28px, 3.8vw, 58px); }
.rs-film__cap--coffee.rs-film__cap--top-right { max-width: min(480px, calc(100vw - 128px)); }
.rs-film__cap--rise { max-width: min(14ch, 88vw); }
.rs-film__stack { display: none; }
.rs-sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* reduced motion: posters + captions in normal flow, no scrub */
.rs-film.is-reduced { height: auto !important; }
.rs-film.is-reduced .rs-film__stage { display: none; }
.rs-film.is-reduced .rs-film__stack { display: grid; gap: 0; }
.rs-film__still { position: relative; margin: 0; }
.rs-film__still img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.rs-film__still figcaption { position: absolute; left: 6vw; right: 6vw; bottom: max(10%, 16px); color: #FFF4E4;
  font-family: 'Bodoni Moda', 'Bodoni Moda Fallback', Georgia, serif; font-style: normal; font-weight: 500; font-variation-settings: 'opsz' 28; font-size: clamp(22px, 4vw, 56px); line-height: 1.05;
  text-shadow: 0 2px 18px rgba(10, 6, 3, .6); }
.rs-film__still figcaption .rs-film__line { display: block; }
@media (prefers-reduced-motion: reduce) { .rs-film__veil { display: none; } }
/* CHECK-IN 2 r2: on phones the crown title sat on the bright facade - a firmer scrim + shadow (still a local radial, never a full band) */
@media (max-width: 480px) {
  .rs-film__cap::before { background: radial-gradient(closest-side, rgba(14, 9, 5, .62), rgba(14, 9, 5, .38) 55%, rgba(14, 9, 5, 0)); }
  .rs-film__cap { text-shadow: 0 1px 2px rgba(10, 6, 3, .55), 0 2px 22px rgba(10, 6, 3, .65); }
}

/* F0 fix round (Fable P2-10): hotel title card = one sentence-case name, roman 500, "Dubai" as the 12 px label above it */
.rs-film__cap--crown { display: flex; flex-direction: column-reverse; align-items: flex-start; max-width: none; margin-left: 0;
  font-size: clamp(88px, 11vw, 176px); font-weight: 500; font-variation-settings: 'opsz' 40; line-height: .9; letter-spacing: -.03em; text-transform: none; }
.rs-film__cap--crown .rs-film__line { white-space: nowrap; }
.rs-film__cap--crown .rs-film__line + .rs-film__line { margin: 0 0 18px .06em; font: 500 12px/1.4 'Host Grotesk', 'Host Grotesk Fallback', system-ui, sans-serif;
  letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 244, 228, .86); }
/* the header wordmark steps aside while the title card is on screen */
.rs-brand { transition: opacity .35s ease; }
body:has(.rs-film__cap--crown.is-on) .rs-header .rs-brand { opacity: 0; }
/* phones must only not break: the top-right caption keeps 24 px side gutters */
@media (max-width: 480px) { .rs-film__cap--top-right { top: 120px; right: 24px; max-width: calc(100vw - 48px); } }