/* LAIKA coming-soon page. Rules are the ones the 2026-11-10 handoff page
   (laika-live-en-clean.html) actually renders, values unchanged.
   Additions: the Anton fallback face (only for systems without Impact),
   the CMYK swatch colours moved out of inline styles (CSP), the grain
   noise moved to grain.svg, and the 404 block at the end. */

/* Anton (OFL-1.1), Latin subset. Scaled so a line of caps is as wide as Impact. */
@font-face{
  font-family:'Laika Disp';
  src:url(anton-latin.woff2) format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
  size-adjust:108.7%; ascent-override:92.8%; descent-override:19.4%; line-gap-override:0%;
  unicode-range:U+0020-007E;
}

:root{
  --ink:#0d0d10;
  --panel:#15151c;
  --panel2:#1b1b24;
  --line:rgba(255,255,255,.14);
  --yellow:#ffd21f;
  --yellow2:#ffe98a;
  --red:#e62e3d;
  --magenta:#ff2e8b;
  --purple:#8b2ff7;
  --blue:#4a3ae8;
  --lime:#a6e22e;
  --cyan:#35d0e8;
  --paper:#fff6d8;
  --white:#fff;
  --disp: Impact, 'Haettenschweiler', 'Laika Disp', 'Arial Narrow Bold', 'Arial Black', 'Franklin Gothic Heavy', sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; overflow-x:clip;}
body{
  background-color:var(--ink);
  background-image:radial-gradient(rgba(255,255,255,.05) 1.2px, transparent 1.3px);
  background-size:16px 16px;
  color:#e9e9f0;
  font:15px/1.6 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'PingFang SC', Arial, sans-serif;
  overflow-x:hidden;
  overflow-x:clip;
}
svg{display:block;}
a{color:inherit; text-decoration:none;}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer;}
::selection{background:var(--yellow); color:var(--ink);}
.wrap{max-width:1360px; margin:0 auto; padding:0 28px;}
.btn{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 22px; font-family:var(--disp); text-transform:uppercase; letter-spacing:.06em;
  font-size:15px; line-height:1; color:var(--ink); background:var(--yellow);
  border:3px solid var(--ink); transform:skewX(-8deg);
  box-shadow:0 0 0 2px rgba(255,255,255,.92), 6px 6px 0 2px rgba(0,0,0,.78);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;}
.btn>*{display:inline-block; transform:skewX(8deg);}
.btn:hover{transform:skewX(-8deg) translateY(-2px);
  box-shadow:0 0 0 2px #fff, 8px 9px 0 2px rgba(0,0,0,.82);}
.btn:active{transform:skewX(-8deg) translateY(1px);}
.site-head{position:relative; z-index:60; background:rgba(13,13,16,.96);}
.head-in{height:78px; display:flex; align-items:center; gap:30px; max-width:none; margin:0;}
.logo-wrap{display:flex; align-items:center; gap:11px; flex:none;}
.logo{display:flex; align-items:center; flex:none; text-decoration:none;
  cursor:default; user-select:none; pointer-events:none;}
.logo-name{font-family:var(--disp); font-size:27px; letter-spacing:.04em; color:#fff; line-height:1;}
.logo-live{display:inline-block; background:var(--red); color:#fff; font-family:var(--disp);
  font-size:12px; letter-spacing:.08em; padding:3px 7px 2px; border:2px solid var(--ink);
  transform:rotate(-4deg) translateY(-8px);
  box-shadow:0 0 0 1.5px #fff;}
.logo-wrap .logo-live{cursor:default; user-select:none; pointer-events:none;}
.head-cta{margin-left:auto; display:flex; align-items:center; gap:28px;}
.head-cta .btn.btn--rect{min-width:168px; padding:13px 22px; font-size:15px; font-weight:800;
  letter-spacing:.06em; transform:none; text-shadow:none;}
.head-cta .btn.btn--rect>*{transform:none;}
.head-cta .btn.btn--rect.is-soon{font-size:16px; padding:12.5px 22px; background:var(--panel2); color:#cfcfdb;
  border-color:rgba(255,255,255,.3); cursor:not-allowed; opacity:1;
  box-shadow:0 0 0 2px rgba(255,255,255,.16), 6px 6px 0 2px rgba(0,0,0,.78);}
.head-cta .btn.btn--rect.is-soon:hover,
.head-cta .btn.btn--rect.is-soon:active{transform:none;
  box-shadow:0 0 0 2px rgba(255,255,255,.16), 6px 6px 0 2px rgba(0,0,0,.78);}
@media (max-width:1120px){
  .head-cta .btn,
  .head-cta .btn.btn--rect{min-width:0;}
}
@media (max-width:660px){
  .head-in{height:66px; gap:16px;}
  .hero{--heroH:calc(100svh - 66px); --podW:calc(var(--heroH) * 0.5625);}
  .hero-words{display:none;}
  .logo-name{font-size:22px;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
}
.hero{position:relative; overflow:hidden; isolation:isolate;
  height:calc(100vh - 78px); height:calc(100svh - 78px); min-height:420px;
  background:#000;}
.hero-halftone{position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:radial-gradient(#fff 2.7px, transparent 3px);
  background-size:12px 12px; opacity:.08;
  -webkit-mask-image:linear-gradient(to top, #000 0%, rgba(0,0,0,.72) 32%, rgba(0,0,0,.16) 70%, transparent 100%);
  mask-image:linear-gradient(to top, #000 0%, rgba(0,0,0,.72) 32%, rgba(0,0,0,.16) 70%, transparent 100%);}
.hero-halftone::after{content:''; position:absolute; left:-6%; top:4%; width:52%; height:70%;
  background-image:radial-gradient(rgba(255,210,31,.9) 5px, transparent 5.6px);
  background-size:34px 34px; opacity:.18;
  -webkit-mask-image:radial-gradient(circle at 22% 26%, #000 0%, rgba(0,0,0,.5) 42%, transparent 70%);
  mask-image:radial-gradient(circle at 22% 26%, #000 0%, rgba(0,0,0,.5) 42%, transparent 70%);}
.hero-vidwrap{position:absolute; left:50%; bottom:0; z-index:3; height:100%;
  aspect-ratio:1080/1920; transform:translateX(-50%); pointer-events:none;
}
.hero-vid{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  pointer-events:none; display:block;
  clip-path:inset(0 18.5% 0 18.5%);
  -webkit-mask-image:linear-gradient(90deg, transparent 18.5%, #000 23%, #000 77%, transparent 81.5%);
  mask-image:linear-gradient(90deg, transparent 18.5%, #000 23%, #000 77%, transparent 81.5%);}
.hero-words{position:absolute; inset:0; z-index:2; pointer-events:none;}
.hw-block{position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  font-family:var(--disp); font-weight:800; text-transform:uppercase;
  font-size:min(17.1vw, calc((100vw - 56px) / 5.62)); line-height:1;
  letter-spacing:.012em; word-spacing:-.04em; white-space:nowrap;}
.hw-block .hw{display:block; font:inherit; letter-spacing:inherit; word-spacing:inherit;}
.hw-block .hw-reg{position:relative; z-index:2; opacity:.94;
  background-image:linear-gradient(180deg,#fff 0%,#fff 58%,#f4ecf3 82%,#ded1dd 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;}
.hw-block .hw-mis{position:absolute; left:6px; top:6px; z-index:1; opacity:.85;
  background-image:linear-gradient(180deg,#ff3b9a 0%,#f02a88 58%,#c41b6d 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  mix-blend-mode:screen;}
.hw-block{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 91%,rgba(0,0,0,.6) 97%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 91%,rgba(0,0,0,.6) 97%,transparent 100%);}
.hero-botfade{position:absolute; left:0; right:0; bottom:0; height:118px; z-index:5;
  pointer-events:none; background:linear-gradient(0deg, #000 0%, rgba(0,0,0,.78) 34%, rgba(0,0,0,.30) 68%, rgba(0,0,0,0) 100%);}
.hero-topfade{position:absolute; left:0; right:0; top:0; height:52px; z-index:4;
  pointer-events:none; background:linear-gradient(180deg, #000 0%, rgba(0,0,0,.62) 42%, rgba(0,0,0,0) 100%);}
.hero-glow{position:absolute; inset:0; z-index:1; pointer-events:none; mix-blend-mode:screen;
  background:radial-gradient(ellipse 38% 56% at 50% 52%, rgba(124,58,237,.05), rgba(124,58,237,0) 74%);}
.hero-barcode{position:absolute; right:118px; bottom:46px; z-index:7; width:104px; height:30px;
  background:repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 5px,#fff 5px 6px,transparent 6px 9px,#fff 9px 12px,transparent 12px 14px);
  opacity:.55;}
.hero-cmyk{position:absolute; right:28px; bottom:46px; z-index:7; display:flex; gap:6px; opacity:.75;}
.hero-cmyk i{display:block; width:14px; height:14px; border:1px solid rgba(255,255,255,.5);}
.hero-cmyk i:nth-child(1){background:#35d0e8;}
.hero-cmyk i:nth-child(2){background:#ff2e8b;}
.hero-cmyk i:nth-child(3){background:#ffd21f;}
.hero-cmyk i:nth-child(4){background:#fff;}
.hero-grain{position:absolute; inset:0; z-index:6; pointer-events:none;
  opacity:.05; mix-blend-mode:screen;
  background-image:url(grain.svg);}
@media (max-width:1120px){
  .hero{height:calc(100vh - 78px); height:calc(100svh - 78px); min-height:380px;}
}
@media (max-width:660px){
  .hero{height:calc(100vh - 66px); height:calc(100svh - 66px); min-height:300px;}
  .hero-cmyk{display:none;}
  .hero-barcode{right:16px; left:auto; bottom:32px; width:80px; height:24px;}
  /* Phones: the pod fills the width, so the title sits in front of it, low, like a poster title. */
  .hero-words{display:block; z-index:6;}
  .hw-block{top:auto; bottom:calc(66px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%);
    font-size:calc((100vw - 32px) / 5.62);}
  .hw-block .hw-mis{left:4px; top:4px;}
  .hero-botfade{height:min(42%, 300px);
    background:linear-gradient(0deg, #000 0%, rgba(0,0,0,.86) 30%, rgba(0,0,0,.45) 62%, rgba(0,0,0,0) 100%);}
}