body:has(.invisible-page){overflow:hidden;background:#060606;color:#fffdf5}
body:has(.invisible-page):before,body:has(.invisible-page):after{display:none!important}
.invisible-page{height:100svh;isolation:isolate;background:#060606;touch-action:none}
.invisible-page>section{position:absolute;inset:0;overflow:hidden;background:#060606}
.invisible-page [hidden]{display:none!important}
.ic-hero>img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.invisible-page .er-intro{top:23vh;left:5vw;right:5vw;text-shadow:0 2px 5px #000b,0 3px 14px #0008}
.invisible-page .er-intro h1{max-width:58%}
.invisible-page .er-meta a{text-shadow:0 2px 5px #000c,0 3px 16px #0009}
.ic-introduction{display:grid;place-items:center}
.ic-introduction>div{width:min(760px,86vw);text-align:center;color:#fffdf5}
.ic-introduction p{margin:0;font-size:clamp(16px,1.7vw,22px);line-height:1.8}
.ic-introduction p+p{margin-top:.7em}
.ic-cities canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.ic-city-note{position:absolute;z-index:2;opacity:0;pointer-events:none;transition:opacity .3s;color:#fffdf5;text-shadow:0 2px 5px #000,0 4px 20px #000;background:radial-gradient(ellipse at center,#0007,transparent 74%);max-height:calc(100svh - 130px);overflow:hidden}
.ic-city-note.is-visible{opacity:1}
.ic-city-note strong{display:block;font-size:17px;font-weight:400;margin-bottom:8px}
.ic-city-note p{font-size:clamp(11px,.95vw,12px);line-height:1.6;margin:0}
.ic-film{display:grid;place-items:center}
.ic-player{position:relative}
.ic-player .er-youtube{width:min(86vw,calc((100svh - 180px)*1.7778));aspect-ratio:16/9;max-width:1200px}
.ic-player-gate{position:absolute;inset:0;z-index:2;width:100%;border:0;background:transparent;color:white;font:inherit;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding-bottom:18px;text-shadow:0 1px 8px #000}
.ic-player-release{position:absolute;right:0;bottom:-38px;background:none;border:0;padding:8px 0;color:#fffdf5;font:inherit;font-size:13px;cursor:pointer}
@media(max-width:650px){.invisible-page .er-intro{top:18vh}.invisible-page .er-intro h1{max-width:100%}.ic-introduction p{font-size:15px;line-height:1.6}.ic-player .er-youtube{width:90vw}.ic-city-note p{font-size:12px}.ic-city-note strong{font-size:17px}}
@media(prefers-reduced-motion:reduce){.ic-city-note{transition:none}}

/* Dare hero information metrics, with Invisible City's own media treatment. */
.invisible-page .er-intro{position:absolute;top:23vh;left:5vw;right:5vw;min-height:0;padding:0;display:block;text-shadow:0 2px 5px #000e,0 4px 16px #000b}
.invisible-page .er-intro h1{max-width:none;margin:0 0 28px;transform:translateY(-32px)}
.invisible-page .er-meta{max-width:none;display:flex;flex-direction:row;flex-wrap:wrap;gap:16px;color:#fffdf5;width:450px;margin-top:-12px}
.invisible-page .er-meta a{flex-basis:100%;width:fit-content;margin-top:18px;pointer-events:auto;color:#fffdf5;text-underline-offset:5px}
.ic-hero>img{filter:blur(5px) brightness(.40);transform:scale(1.035)}
.ic-introduction:before{content:"";position:absolute;inset:-18px;background:url("assets/invisible/hero-original.jpg") center / cover no-repeat;filter:blur(11px) brightness(.26);pointer-events:none}
.ic-introduction>div{position:relative;z-index:1;text-shadow:0 2px 5px #000c,0 4px 16px #0009}
.ic-city-note{transition:opacity .4s}
.ic-city-note strong{font-size:20px;margin-bottom:9px}
.ic-city-note p{font-size:14px;line-height:1.65}
@media(max-width:650px){.invisible-page .er-intro{top:18vh}.invisible-page .er-intro h1{transform:translateY(-20px);font-size:clamp(48px,12vw,76px);max-width:80%}.invisible-page .er-meta{width:100%;gap:10px}.invisible-page .er-meta a{margin-top:12px}.ic-city-note strong{font-size:18px}.ic-city-note p{font-size:13px}}