/* Restrike hero (film.css, loaded after site.css; runtime js/film.js). The hero is one screen, no pin: the copy, and
   under it the art slot (.rs-hero__art) that holds the ordered-dither scene (css/hero-dither.css, js/hero-dither.js).
   The old scroll-pinned line-art film, its HUD captions and its six stills are gone from the hero (16 Oct). */

/* ---------- shared: the art slot ---------- */
.rs-hero__art { position: relative; z-index: 0; pointer-events: none; }
/* the photo fades up once it has loaded (inline script in hero.html) */
@media (prefers-reduced-motion: no-preference) {
  .rs-hero__photo { transition: opacity 1s var(--rs-ease-out); }
  .rs-hero__photo.is-wait { opacity: 0; }
}

/* ---------- the three hero layouts (15 Oct, client: "look a bit different than SOOK"): ?hero=a|b|c, the inline
   script in hero.html sets .rs-hero--a|b|c before the first paint (a when there is no query). All three share one
   headline face (Host Grotesk, the site's one family), the container edge of every other section (--rs-edge), the
   water photo, the film and the line-art kit; the art box moves, the film's camera follows it (film.js rects()).
   a  The headline centred, the art centred under it.
   b  Ticket: the headline on the left; on the right a large option ticket (a perforated stub) over the vault.
   c  Spec: the headline in one line on top, the art centred, two big figures either side (the premium, the countdown).
   Phones stack the same pieces in reading order (the copy box is display: contents there). ---------- */
.rs-hero { --rs-h1: clamp(40px, 3.2vw + 18px, 64px); --rs-edge: max(var(--rs-gutter), (100% - var(--rs-max)) / 2); --rs-top: calc(env(safe-area-inset-top, 0px) + var(--rs-ht) + var(--rs-hh)); }
.rs-hero .rs-h1 { font: 500 var(--rs-h1)/1.06 var(--rs-display); letter-spacing: -0.015em; color: var(--rs-ink); text-wrap: balance; }
.rs-hero__cta { margin-top: clamp(28px, 4svh, 40px); }
.rs-hero:not(.is-wide) .rs-hero__cta { margin-top: 28px; }
.rs-hero .rs-lede { margin: clamp(14px, 2.2svh, 24px) 0 0; max-width: 30em; font: 400 18px/1.5 var(--rs-font); color: var(--rs-text); text-wrap: pretty; }
.rs-hero__head { position: relative; z-index: 1; }

/* ---------- wide screens ---------- */
.rs-hero.is-wide .rs-hero__copy { position: absolute; inset: 0; z-index: 1; padding: 0; pointer-events: none; }
.rs-hero.is-wide .rs-hero__copy > * { pointer-events: auto; }
.rs-hero.is-wide .rs-hero__art { position: absolute; }
/* a (the default, 15 Oct "clean hero"): one centred stack on the page axis: the headline (two lines), the lede 24 px
   under it, the one button 32 px under that; the copy's top sits at 22svh, the line-art group fills what is left
   below it (centred, >= 32 px clear of the button), so the whole hero is one screen. */
.rs-hero--a .rs-hero__head { text-align: center; }
.rs-hero--a .rs-lede { margin: calc(24px + var(--rs-h1) * 0.14) auto 0; max-width: 34em; } /* 24 px seen: the h1's line boxes overhang 0.14em */
.rs-hero--a .rs-hero__cta { margin-top: 32px; }
.rs-hero--a.is-wide .rs-hero__stage { display: flex; flex-direction: column; align-items: center; padding: 22svh 0 max(24px, 3.6svh); }
.rs-hero--a.is-wide .rs-hero__copy { position: relative; inset: auto; order: 1; width: min(880px, 100% - 2 * var(--rs-gutter)); padding: 0; }
.rs-hero--a.is-wide .rs-hero__art { position: relative; order: 2; flex: 1 1 0; min-height: 0; width: min(100% - 2 * var(--rs-edge), 1100px); margin-top: 32px; }
/* b */
.rs-hero--b.is-wide .rs-hero__head { position: absolute; left: var(--rs-edge); top: 50%; translate: 0 -54%; width: min(40%, calc(var(--rs-h1) * 8.4)); }
.rs-hero--b.is-wide .rs-hero__art { top: calc(var(--rs-top) + 2svh); bottom: 3svh; left: 40%; right: calc(var(--rs-edge) + min(13vw, 220px)); }
/* d (the default, SITE-V3-STYLE.md S4): the copy is one column on the left half (columns 1-6): the headline, the
   lede and the one button (Open the app), vertically centred with sky around it. The art fills columns 7-12 and
   holds no text: art and text never meet. */
.rs-hero--d.is-wide .rs-hero__copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: calc(var(--rs-top) + clamp(24px, 6svh, 64px)) var(--rs-edge) max(24px, 3.6svh); box-sizing: border-box; }
.rs-hero--d.is-wide .rs-hero__head { width: calc((100% - 24px) / 2); }  /* % of the copy's content box = the container */
.rs-hero--d.is-wide .rs-hero__art { top: calc(var(--rs-top) + 1svh); bottom: 2svh; left: calc(var(--rs-edge) + (100% - 2 * var(--rs-edge) - 24px) / 2 + 24px); right: var(--rs-edge); }
/* c */
.rs-hero--c.is-wide .rs-hero__head { position: absolute; left: var(--rs-edge); right: var(--rs-edge); top: calc(var(--rs-top) + 4svh); text-align: center; }
.rs-hero--c.is-wide .rs-h1 .rs-line { display: inline-block; }
.rs-hero--c.is-wide .rs-lede { margin-inline: auto; }
.rs-hero--c.is-wide .rs-hero__art { top: calc(var(--rs-top) + 4svh + var(--rs-h1) * 1.1 + 110px); bottom: 3svh; left: 50%; width: min(44vw, 72svh); translate: -50% 0; }

/* ---------- phones and narrow screens: one column in reading order ---------- */
.rs-hero:not(.is-wide) .rs-hero__stage { display: flex; flex-direction: column; }
.rs-hero:not(.is-wide) .rs-hero__copy { display: contents; }
.rs-hero:not(.is-wide) .rs-hero__head { order: 1; padding-inline: var(--rs-gutter); }
.rs-hero:not(.is-wide) .rs-hero__art { order: 4; align-self: center; width: min(100% - 2 * var(--rs-gutter), 64svh, 640px); aspect-ratio: 1.1; margin: clamp(16px, 3svh, 32px) 0 clamp(24px, 5svh, 56px); }
.rs-hero--c:not(.is-wide) .rs-hero__head { text-align: center; }
.rs-hero--c:not(.is-wide) .rs-lede { margin-inline: auto; }
/* a on phones: the same stack, the art below it, smaller; the hero is one screen */
.rs-hero--a:not(.is-wide) .rs-hero__stage { min-height: 100svh; padding-top: calc(env(safe-area-inset-top, 0px) + var(--rs-ht) + var(--rs-hh) + 9svh); }
.rs-hero--a:not(.is-wide) .rs-hero__head { align-self: center; box-sizing: border-box; width: min(880px, 100%); }
.rs-hero--a:not(.is-wide) .rs-hero__cta { margin-top: 32px; }
.rs-film .rs-hero.rs-hero--a:not(.is-wide) .rs-hero__art { margin-top: 24px; }
.rs-hero.rs-hero--a:not(.is-wide) .rs-hero__art { flex: 1 1 0; min-height: 180px; width: calc(100% - 2 * var(--rs-gutter)); max-width: 560px; aspect-ratio: auto; margin: 24px 0 24px; }
.rs-film .rs-hero.rs-hero--d:not(.is-wide) .rs-hero__art, .rs-hero.rs-hero--d:not(.is-wide) .rs-hero__art { margin-top: 44px; }

/* ---------- the closing band (footer.html): the art builds beside the title (js/film.js, art/line/src/cta.js) ----------
   wide: the title and button on the left, the art box on the right; phones: the title on top, the art box under it.
   Without the scene (no GPU, reduced motion) the poster cta.webp (its p = 1 frame) sits in the same box. */
.rs-cta { -webkit-mask-image: none; mask-image: none; pointer-events: none; }
.rs-cta__poster, .rs-cta__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rs-cta__poster { object-fit: contain; }
.rs-cta__canvas { opacity: 0; transition: opacity 0.3s var(--rs-ease-out); }
.rs-cta.is-live .rs-cta__canvas { opacity: 1; }
.rs-cta.is-live .rs-cta__poster { visibility: hidden; transition: visibility 0s linear 0.32s; }
.rs-close .rs-ca { margin-top: 20px; }
/* v4: no closing art; the CTA is centred on every screen (site.css .rs-close*) */

/* ---------- the hero ground (v4 LIGHT SKY): the client's sky photo as-is (no grade, no cover, no fade strip); its
   white bottom edge meets the white page. A faint white wash behind the copy keeps the lede >= 4.5:1 (measured). */
.rs-hero__bg { background: var(--rs-bg); }
.rs-hero__grade, .rs-hero__pink { display: none; }
/* a faint white wash on the copy side only (the darkest sky is top left on cloud-hero-right): lifts the lede past 4.5:1 */
.rs-hero__fog { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.16) 40%, rgba(255, 255, 255, 0) 62%); }
.rs-hero--a.is-wide .rs-hero__fog { background: linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0, rgba(255, 255, 255, 0) 14%), radial-gradient(60% 40% at 50% 32%, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.14) 60%, rgba(255, 255, 255, 0) 100%); }
.rs-hero.is-wide:not(.rs-hero--a) .rs-hero__fog { background: linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0, rgba(255, 255, 255, 0) 14%), radial-gradient(70% 70% at 18% 34%, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.12) 60%, rgba(255, 255, 255, 0) 100%); } /* + the header row (nav on the sky) */
/* the zoom keeps the bottom edge (the photo's white fade) on the stage's bottom edge */
.rs-hero__photo { transform-origin: 50% 100%; }

/* ---------- the closing band's backdrop (v4 LIGHT SKY): the sky "gateway" as-is; the centred title sits in its open
   centre (dark text, measured). No fog. ---------- */
.rs-close__fog { display: none; }
/* the title on the page grid (144 at 1440, 20 at 390), not inset by the frame */
.rs-footer .rs-close__body.rs-wrap { padding-inline: var(--rs-gutter); }