@import url("https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;600;800&family=Caveat:wght@600&display=swap");
:root{--cream:#efede4;--ink:#151515;--red:#a91f2d}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:Archivo,Arial;overflow-x:hidden}.scene{height:110vh;min-height:760px;position:relative;overflow:hidden;border-bottom:1px solid #1113}header{height:64px;position:fixed;z-index:20;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:0 28px 0 65px;background:linear-gradient(var(--cream),#efede400)}.rail{position:fixed;left:0;top:0;height:100vh;width:43px;border-right:1px solid #111;display:flex;flex-direction:column;align-items:center;padding-top:20px;background:#efede4e8}.rail span{width:14px;height:1px;background:#111;margin-top:7px}.logo{font:800 16px Archivo}.logo small{display:block;font:8px monospace;letter-spacing:.18em}.logo+button,header button{border:0;background:var(--red);color:#fff;padding:11px 20px;font:10px monospace}.copy{position:absolute;z-index:4}.copy i,.yearcopy i{font:600 18px Caveat;color:var(--red)}h1,h2{font-family:Anton,Impact,sans-serif;font-weight:400;letter-spacing:-.035em}.hero .copy{left:8%;top:18%}.hero h1{font-size:clamp(90px,15vw,190px);line-height:.78;color:var(--red);margin:20px 0}.hero p,.hero-note{font:10px monospace;letter-spacing:.08em}.hero-note{position:absolute;left:8%;bottom:14%;line-height:1.6}.reveal .left{left:8%;top:16%;width:280px}.reveal h2{font-size:58px;line-height:.82;margin:15px 0}.reveal p,.right p{font:11px/1.6 monospace;color:#555}.reveal strong{display:inline-block;background:#111;color:#fff;padding:13px 16px;font:10px monospace}.stats{position:absolute;right:7%;top:30%;width:220px;border:1px solid #111;padding:15px;display:grid;grid-template-columns:1fr 1fr;z-index:4}.stats b{font:35px Anton}.stats small{font:8px monospace;text-align:right;align-self:end}.stats hr{grid-column:1/-1;width:100%;border:0;border-top:1px solid #1114}.feel .big,.details .big{position:absolute;top:13%;left:-2%;font:clamp(120px,20vw,280px) Anton;line-height:.75;letter-spacing:-.05em;color:var(--red);white-space:nowrap}.bottom{bottom:13%}.left.bottom{left:8%}.left.bottom h2{font-size:48px;line-height:.8;margin:12px 0}.film{border:1px solid #111;padding:14px;width:170px;font:9px monospace}.right.bottom{right:8%;width:260px}.splash{position:absolute;padding:25px 28px;color:white;font:11px monospace;clip-path:polygon(5% 7%,93% 0,100% 67%,85% 95%,8% 100%,0 35%);z-index:5}.splash.red{right:9%;top:30%;background:var(--red)}.splash.black{right:22%;bottom:18%;background:#111}.details .big{color:#111}.detail{position:absolute;width:190px;border-top:1px solid #111;padding-top:9px;font-size:11px}.detail p{font:10px/1.5 monospace;color:#555}.a{left:8%;top:30%}.b{right:8%;top:43%}.c{left:18%;bottom:17%}.yearcopy{position:absolute;left:8%;top:15%;z-index:5}.yearcopy h2{font-size:clamp(90px,13vw,170px);line-height:.78;margin:15px 0}.formats{position:absolute;left:8%;right:8%;top:50%;display:grid;grid-template-columns:repeat(4,1fr);gap:3vw;z-index:5}.formats div{text-align:center;font:9px monospace}.formats img{width:100%;filter:drop-shadow(8px 12px 8px #0003)}.end{background:var(--red);color:#fff}.end h2{font-size:clamp(100px,16vw,220px);line-height:.75;margin:14vh 5%}.end small{margin-left:7%;font:9px monospace}.product{position:fixed;z-index:15;pointer-events:none;left:50%;top:51%;width:min(31vw,420px);transform:translate(-50%,-50%);filter:drop-shadow(22px 28px 17px #0005)}.product img{width:100%}.progress{position:fixed;z-index:30;right:12px;top:80px;width:2px;height:100px;background:#1112}.progress:after{content:"";display:block;width:2px;height:0;background:var(--red)}.fade{position:fixed;inset:0;background:var(--cream);z-index:25;pointer-events:none;opacity:0}@media(max-width:700px){.logo{font-size:11px}.logo small{font-size:7px}.hero .copy{left:8%;top:18%}.hero h1{font-size:23vw}.scene{min-height:800px}.product{width:67vw}.reveal h2{font-size:42px}.stats{right:5%;width:175px}.feel .big,.details .big{font-size:29vw}.right.bottom{right:7%;width:190px}.formats{grid-template-columns:repeat(2,1fr);top:47%}.yearcopy h2{font-size:24vw}.end h2{font-size:28vw}}
