/* FROZ-T inner pages — shared */
:root{--ink:#070a14;--ink2:#0b1020;--ice:#eef6ff;--cyan:#8a3dff;--purple:#8a3dff;--amber:#ffb454;--mute:#9db0c4;--glass:#070a1488}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ink);color:var(--ice);font-family:Inter,system-ui,sans-serif}
a{color:inherit}button{font:inherit}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.bg{position:fixed;inset:0;z-index:0;background:var(--ink);overflow:hidden}
.bg img,.bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.bg video{opacity:0;transition:opacity 1.2s}.bg video.on{opacity:1}
.bg:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#070a1466,#070a1480 45%,#070a14a3)}
@media(prefers-reduced-motion:reduce){.bg video{display:none}}
header{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px max(18px,env(safe-area-inset-right)) 14px max(18px,env(safe-area-inset-left));background:linear-gradient(180deg,#070a14e6,#070a1400)}
.logo{font:800 26px/1 Inter,system-ui,sans-serif;letter-spacing:.16em;text-decoration:none;color:#fff;position:relative;padding-bottom:10px}
.logo:after{content:'';position:absolute;left:0;bottom:0;width:60%;height:3px;background:var(--purple);border-radius:2px}
.logo small{display:none}
nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0}
nav a{display:block;padding:10px 12px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);text-decoration:none;border-radius:999px}
nav a[href="/frozteez/"]{text-transform:none}
nav a:hover,nav a[aria-current]{color:var(--ice);background:#ffffff10}
.book{display:inline-flex;align-items:center;gap:10px;background:transparent;backdrop-filter:blur(4px);color:#fff;font:600 14px Inter,system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;padding:14px 26px;border-radius:10px;border:2px solid var(--purple);cursor:pointer;text-decoration:none;box-shadow:0 0 22px #8a3dff55;white-space:nowrap}
.book:hover{filter:brightness(1.08)}.book.ghost{background:transparent;color:var(--ice);box-shadow:0 0 0 1px #ffffff44 inset}
@media(max-width:900px){nav ul{display:none}}
main{position:relative;z-index:5;max-width:1100px;margin:0 auto;padding:110px max(18px,env(safe-area-inset-left)) 120px}
.kicker.brand-kicker{text-transform:none}
.kicker{font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--cyan)}
h1{font-family:Anton,Impact,sans-serif;font-size:clamp(44px,8vw,96px);line-height:.92;margin:6px 0 12px;letter-spacing:.02em;text-transform:uppercase}
h1 span{color:var(--cyan)}
h2{font-family:Anton,Impact,sans-serif;font-size:clamp(26px,3.6vw,40px);margin:40px 0 10px;letter-spacing:.03em;text-transform:uppercase}
.sub{color:var(--mute);max-width:620px;font-size:16px;line-height:1.55;margin:0 0 20px}
.story-copy{max-width:740px;color:#e8e7ef;font-size:17px;line-height:1.7;margin:0 0 28px}
.story-copy p{margin:0 0 18px}
.dev{display:inline-block;font:700 10px/1 Inter;letter-spacing:.14em;color:#ffb454;border:1px dashed #ffb45488;padding:5px 8px;border-radius:6px;margin-bottom:10px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.tile{background:#0b1020a8;border:1px solid #ffffff30;border-radius:16px;padding:18px;min-height:150px;display:flex;flex-direction:column;justify-content:flex-end;backdrop-filter:blur(4px);position:relative;overflow:hidden}
.tile:before{content:"";position:absolute;inset:0;background:radial-gradient(400px 160px at 0 0,#8a3dff12,transparent)}
.tile b{font-size:16px} .tile small{color:#d8e1ee;font-size:12px}
.release-art{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;margin:0 0 14px}
#rel .tile{justify-content:center}
#rel .tile:has(.release-art){grid-column:span 2;display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr);grid-template-rows:auto auto 1fr;align-content:center;column-gap:22px}
#rel .tile:has(.release-art) .release-art{grid-column:1;grid-row:1 / span 3;margin:0}
#rel .tile:has(.release-art) .links{align-self:start}
@media(max-width:650px){#rel .tile:has(.release-art){grid-column:auto;display:flex}#rel .tile:has(.release-art) .release-art{margin:0 0 14px}}
.tile.poster{aspect-ratio:16/10;min-height:0;justify-content:center;align-items:center;text-align:center;background:#0b1020a8 repeating-linear-gradient(90deg,#ffffff06 0 2px,transparent 2px 28px);border:1px solid #ffffff22;box-shadow:0 20px 50px #000a,0 0 0 6px #070a14 inset}
.links a{display:inline-block;margin:6px 8px 0 0;font:700 12px Inter;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan);border:1px solid #8a3dff44;padding:8px 12px;border-radius:999px;text-decoration:none}
.links a:hover{background:#8a3dff1a}
.platform-links{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 34px}
.platform-links a{margin:0}
.section-heading{font:28px Anton,Impact,sans-serif;letter-spacing:.04em;text-transform:uppercase;margin:0 0 16px}
.video-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.video-card{padding:0;min-height:0;justify-content:flex-start}
.video-card iframe{display:block;width:100%;aspect-ratio:16/9;border:0;background:#070a14}
.video-card b{padding:14px 16px 0}
.video-card .links{padding:0 16px 16px}
.cta{margin-top:36px;padding:24px;border-radius:18px;background:#0b1020a8;border:1px solid #8a3dff55;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.cta b{font-family:Anton,Impact,sans-serif;font-size:24px;letter-spacing:.03em;text-transform:uppercase}
.pin{display:none;position:fixed;left:16px;right:16px;bottom:max(14px,env(safe-area-inset-bottom));z-index:25}
.pin .book{width:100%;justify-content:center;padding:16px}
@media(max-width:900px){.pin{display:block}header .book{display:none}}
footer{position:relative;z-index:5;color:var(--mute);font-size:13px;text-align:center;padding:0 18px 120px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Phone scenes need lighter glass over the tighter, darker crops. */
@media (max-width:650px){
  .bg:after{background:linear-gradient(180deg,#070a144d,#070a1460 45%,#070a1480)}
  .tile,.cta{background:#0b102070;backdrop-filter:blur(2px)}
  .tile small{color:#e0e8f4}
  body[data-scene="floodwall"] .bg:after{background:linear-gradient(180deg,#070a1466,#070a1480 45%,#070a14a3)}
}