/* The live site's alternating plates stay; the opening and small scene strips are the new3 changes. */
.hero{align-items:start;padding-top:clamp(74px,9vh,110px);padding-bottom:76px}
.hero-copy{max-width:62rem}
.hero h1{width:min(100%,36rem);margin-top:12px}
.hero .downloads{margin-top:20px}
.hero .tagline{margin-top:24px}
.hero .intro{max-width:43em;font-size:1rem}
.hero .alpha-note{max-width:62em;margin-inline:auto;font-size:.85rem}
.hero .release{margin-top:10px}
.hero .badge{font-size:.72rem;padding-block:3px}
.hero::before{pointer-events:none;background:linear-gradient(180deg,rgb(4 10 10/.45),rgb(4 10 10/.14) 25%,rgb(4 10 10/.35) 65%,var(--night) 100%)}
.zoom-shot{display:block;position:relative;width:100%;margin:0;padding:0;border:0;background:transparent;text-align:inherit;cursor:zoom-in;border-radius:inherit;overflow:hidden}
.zoom-shot picture,.zoom-shot img{width:100%}
.zoom-shot.hero-art{position:absolute;inset:0;z-index:-2;height:100%}
.hero-art picture{height:100%}
.zoom-hint{position:absolute;right:10px;bottom:10px;padding:3px 8px;border:1px solid rgb(240 237 207/.28);border-radius:3px;background:rgb(4 10 10/.75);color:var(--parchment);font:600 .72rem/1.5 var(--sans);opacity:0;transition:opacity .15s}
.zoom-shot:hover .zoom-hint,.zoom-shot:focus-visible .zoom-hint{opacity:1}
.picture-open{overflow:hidden}
/* The viewer is the picture (Olof, 12 November): as large as the window lets a 16:9 picture be, centred, the count,
   close and arrows over it, no caption (the picture's words are its alt text). */
.lightbox{position:fixed;inset:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;padding:0;margin:0;border:0;background:#040a0a;color:var(--parchment);overflow:hidden}
.lightbox[open]{display:block}
.lightbox::backdrop{background:#040a0a}
.lightbox figure{position:absolute;inset:0;margin:0;display:flex;justify-content:center;align-items:center}
.lightbox figure img{display:block;width:min(100vw,calc(100dvh * 16 / 9));max-width:none;height:auto;max-height:none;aspect-ratio:16/9;object-fit:contain;border-radius:0;box-shadow:none;margin:0}
.lightbox figcaption{display:none}
.lightbox button{position:relative;z-index:2;border:1px solid rgb(232 220 190/.28);background:rgb(13 24 23/.55);color:var(--parchment);border-radius:4px;min-width:42px;min-height:42px;font-size:1.4rem;backdrop-filter:blur(3px);opacity:.78;transition:opacity .2s}
.lightbox button:hover,.lightbox button:focus-visible{opacity:1;background:rgb(13 24 23/.8)}
.lightbox .lightbox-prev,.lightbox .lightbox-next{position:absolute;top:50%;transform:translateY(-50%)}
.lightbox .lightbox-prev{left:16px}
.lightbox .lightbox-next{right:16px}
.lightbox-bar{position:absolute;z-index:2;top:12px;left:16px;right:16px;display:flex;align-items:center;justify-content:space-between;font:600 .9rem var(--sans);pointer-events:none;text-shadow:0 1px 3px rgb(0 0 0/.8)}
.lightbox-bar>*{pointer-events:auto}
@media(max-width:700px){.hero{padding-top:78px;min-height:100svh}.hero h1{max-width:29rem}.hero .platforms{gap:8px}.hero .downloads{margin-top:16px}.hero .intro{font-size:.94rem}.lightbox button{min-width:34px;min-height:40px}.lightbox .lightbox-prev{left:6px}.lightbox .lightbox-next{right:6px}}
@media(prefers-reduced-motion:reduce){.zoom-hint{transition:none}}

/* Preserve the live plates and overlapping pairs when a picture gains its viewer button. */
.bleed > .zoom-shot{position:absolute;inset:0;z-index:-2;height:100%}
.bleed > .zoom-shot picture{position:absolute;inset:0;height:100%}
.bleed::before{pointer-events:none}
.shot.pair > .zoom-shot{overflow:visible}
.shot.pair > .zoom-shot + .zoom-shot{width:52%;justify-self:end;margin:-18% -3% 0 0;position:relative}
@media(max-width:700px){.bleed > .zoom-shot{position:relative;aspect-ratio:16/10;height:auto}.shot.pair > .zoom-shot + .zoom-shot{margin-top:-14%}}

/* Small frames use existing picture corners and free text-column space, never another row. */
.shot.pair.corner-pair{display:block}
.shot.pair.corner-pair > .zoom-shot + .zoom-shot{position:absolute;right:-3%;bottom:-3%;width:44%;margin:0;z-index:1}
.has-side-photos{position:relative;align-self:stretch}
.side-photos{position:absolute;bottom:0;left:0;width:min(87%,450px);visibility:hidden}
.side-photos.fits{visibility:visible}
.side-photos picture{display:block;border-radius:6px;overflow:hidden;box-shadow:0 0 0 1px rgb(173 162 131/.35),0 0 0 6px rgb(27 43 40),0 0 0 7px rgb(128 120 91/.45),0 28px 70px rgb(0 0 0/.55)}
.side-photos .zoom-shot{overflow:visible}
.side-photos img{width:100%;aspect-ratio:16/9;object-fit:cover}