body.cinematic-site {overflow-x:clip}
/* Home brand statement and compact mobile sign-off. */
.cinematic-site .hero + .wrap .intro {
 box-sizing:border-box;width:100vw;max-width:none;
 margin:0 calc(50% - 50vw) 36px;padding:26px 32px;
 border-top:1px solid #ebc47130;border-bottom:1px solid #ebc47130;
 color:#ebc471;background:#071520;
 font:400 clamp(32px,5.5vw,88px)/1.15 Poster,sans-serif;
 letter-spacing:.055em;text-align:center;text-transform:uppercase;
}
.cinematic-site .hero + .wrap .intro span {white-space:nowrap}
@media(max-width:700px){
 .cinematic-site .hero + .wrap .intro {
  margin-bottom:28px;padding:26px 10px;
  font:400 clamp(24px,7.8vw,55px)/1.2 Poster,sans-serif;
  letter-spacing:.03em;color:#ebc471;
 }
}

.cinematic-site .hero .opening-invitation{font:400 15px/1.6 Interface,Arial,sans-serif;letter-spacing:normal;color:#e5dfd3;margin:8px 0 0;text-align:center}
@media(max-width:700px){.cinematic-site .hero .opening-invitation{font-size:14px;margin-top:6px}}

/* Home supporting type: readable controls and footer at every screen size. */
.cinematic-site .home-play,.cinematic-site .ward-copy .action{font-size:14px}
.cinematic-site .footer{font-size:12px;line-height:1.6}
@media(max-width:700px){
 .cinematic-site .brand .kicker{font-size:10px;letter-spacing:1.4px}
 .cinematic-site .hero .eyebrow{font-size:10px;letter-spacing:1.8px}
}

/* The Home invitation belongs to Whisperworld as a whole. */
.cinematic-site .hero h1.beta-invitation{font:400 clamp(27px,3.87svh,37.8px)/1.12 Poster,Arial,sans-serif;letter-spacing:.035em;color:#ebc471;text-align:center}
.cinematic-site .hero .opening-invitation{font-size:18px;max-width:34ch;text-wrap:balance}
@media(max-width:700px){.cinematic-site .hero h1.beta-invitation{font-size:clamp(25.2px,6.66vw,32.4px)}.cinematic-site .hero .opening-invitation{font-size:16px;max-width:28ch}}

/* Hero statement: deliberate two-line brand typography and secondary About link. */
.cinematic-site .hero .opening-invitation{font:400 clamp(28px,2.7vw,40px)/1.15 Poster,Arial,sans-serif;letter-spacing:.025em;text-transform:uppercase;max-width:none;color:#f3efe4;margin:10px 0 8px;text-shadow:0 2px 12px #000b}
.cinematic-site .hero .opening-invitation span{display:block}
.cinematic-site .hero .home-discover{font:400 12px/1.3 Interface,Arial,sans-serif;letter-spacing:.09em;min-height:44px;padding:12px 20px;margin-top:6px;border-color:#ebc47180;background:#07152080;color:#e5dfd3}
.cinematic-site .hero .home-discover:hover,.cinematic-site .hero .home-discover:focus-visible{border-color:#ebc471;color:#fff;background:#071520d9}
@media(max-width:700px){.cinematic-site .hero .opening-invitation{font-size:clamp(26px,7vw,34px);margin:8px 0 6px;letter-spacing:.015em}.cinematic-site .hero .home-discover{font-size:11px;margin-top:4px}}

/* Home format introduction: cinematic artwork with a readable editorial panel. */
.home-format{position:relative;isolation:isolate;overflow:hidden;min-height:560px;margin:0 0 48px;border:1px solid #ebc47150;border-radius:10px;display:flex;align-items:center;background:#071520}
.home-format>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:65% center;z-index:-2}
.home-format:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#071520fa 0%,#071520ed 30%,#071520a6 51%,#07152000 78%);z-index:-1}
.home-format-copy{padding:clamp(28px,4vw,56px);max-width:600px;box-sizing:border-box}
.home-format-kicker{font:400 12px/1.4 Interface,Arial,sans-serif;letter-spacing:.15em;color:#ebc471;margin:0 0 18px}
.home-format h2{font:400 clamp(40px,4.5vw,64px)/1.05 Poster,Arial,sans-serif;letter-spacing:.015em;color:#ebc471;margin:0 0 24px}
.home-format-copy>p:not(.home-format-kicker){font:400 clamp(17px,1.45vw,20px)/1.6 Interface,Arial,sans-serif;color:#f3efe4;max-width:40ch;margin:0 0 18px;text-wrap:pretty}
.home-format .action{margin-top:8px;font:400 13px/1.4 Interface,Arial,sans-serif;letter-spacing:.07em;gap:16px}
@media(max-width:700px){
 .home-format{display:block;min-height:0;margin-bottom:28px}
 .home-format>img{position:relative;display:block;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:65% center;z-index:0}
 .home-format:before{display:none}
 .home-format-copy{padding:26px 24px 30px;max-width:none}
 .home-format h2{font-size:42px;margin-bottom:18px}
 .home-format-copy>p:not(.home-format-kicker){font-size:17px}
 .home-format-kicker{font-size:11px;margin-bottom:14px}
}

/* Whole format card is one accessible link, matching the Home gold hover. */
.home-format{cursor:pointer;transition:border-color .2s,box-shadow .2s}
.home-format:hover,.home-format:focus-visible{border-color:#ebc471;box-shadow:0 0 0 1px #ebc47155}
.home-format:focus-visible{outline:2px solid #ebc471;outline-offset:4px}
.home-format:hover .action,.home-format:focus-visible .action{border-color:#ebc471;color:#f3efe4}
@media(prefers-reduced-motion:reduce){.home-format{transition:none}}

/* Fine menu strokes, with a generous touch target. */
.cinematic-site .header .menu-toggle{min-width:44px;min-height:44px;display:grid;place-items:center}.cinematic-site .header .menu-toggle svg{display:block;width:24px;height:24px}

/* Place the invitation and PLAY together in the open sky beneath the header.
   Keep the artwork crop and hero height unchanged. Scale the offset down on short screens. */
.cinematic-site .hero .hero-inner{position:relative;top:clamp(16px,2.2svh,24px)}
@media(max-width:700px){.cinematic-site .hero .hero-inner{top:clamp(44px,7.5svh,62px)}}