/* MISREGISTER — tokens from the Paper file. Single theme on purpose: it's paper stock. */
:root{
  --paper:#F3ECDD; --ink:#1D1B1B; --red:#EF4135; --blue:#1F7FE6;
  --aqua:#4FBFC0; --mari:#F2A93B; --pink:#F6CFC6; --stock:#F8F2E4;
  --display:'Bebas Neue',Impact,'Arial Narrow',sans-serif;
  --mono:'Courier Prime','Courier New',monospace;
  --serif:'Instrument Serif',Georgia,serif;
  --spring:cubic-bezier(.2,.9,.25,1.12);
  --out:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--mono);overflow-x:clip;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--red);outline-offset:4px}
/* every section is one screen: its stage scales to fit width AND height; extra width spreads the layout */
.screen{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:clip}
.screen.short{min-height:0}
.wrap{width:var(--sw,1440px);flex-shrink:0;zoom:var(--s,1)}
.label{font:700 13px/16px var(--mono);letter-spacing:.18em}
.red{color:var(--red)} .blue{color:var(--blue)}
.mul{mix-blend-mode:multiply}
svg{overflow:visible}
svg *{transform-box:fill-box;transform-origin:center}

/* art is for touching, not selecting: no long-press selection, callout, or tap flash on phones */
.mark,.h-head,.h-art,.ticker,.sheet,.r-art,.names,.beasts,.corners,.item b,.v-art,.giant,svg{
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}

/* grain: one texture, three offsets at 8fps = three seeds */
.grain{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:5}
.grain::before{content:"";position:absolute;inset:-40px;background:url(assets/grain.png) 0 0/700px 700px;animation:seed .375s steps(1) infinite}
@keyframes seed{0%{transform:translate(0,0)}33%{transform:translate(-17px,23px)}66%{transform:translate(21px,-11px)}}

/* scroll reveal: animations sit paused on their first frame until the block is on screen */
html.js [data-rv]:not(.in), html.js [data-rv]:not(.in) *,
html.js [data-rv]:not(.in) *::before{animation-play-state:paused!important}

/* text prints in: ghost plates converge into register (text never hidden) */
.ghost{animation:ghost 1.3s var(--out) .1s both}
@keyframes ghost{from{text-shadow:-16px 0 rgba(239,65,53,.6),16px 0 rgba(31,127,230,.6)}to{text-shadow:0 0 transparent,0 0 transparent}}

/* plate drift: a live print never sits perfectly still */
.drift{animation:drift 6s ease-in-out infinite alternate}
.drift.slow{animation-duration:9s;animation-delay:-3s}
@keyframes drift{from{translate:-1.5px 1px}to{translate:2px -1.5px}}

/* ---------- NAV ---------- */
.nav{border-bottom:1.5px solid var(--ink)}
.nav-in{display:flex;align-items:center;justify-content:space-between;padding:28px 48px}
.mark{position:relative;display:block;width:220px;height:40px}
.mark span{position:absolute;font:40px/40px var(--display);letter-spacing:.02em;mix-blend-mode:multiply;transition:translate .5s var(--spring)}
.mark .r{color:var(--red);left:0;top:0;animation:markR 1s var(--spring) both}
.mark .b{color:var(--blue);left:3px;top:2px;animation:markB 1s var(--spring) both}
.mark:hover .b{translate:-3px -2px}
@keyframes markR{from{transform:translateX(-14px)}}
@keyframes markB{from{transform:translateX(18px)}}
.links{display:flex;gap:40px}
.links a{transition:color .2s,text-shadow .2s}
.links a:hover{color:var(--red);text-shadow:2px 1px 0 rgba(31,127,230,.55)}
.status{display:flex;align-items:center;gap:10px;font:13px/16px var(--mono);letter-spacing:.12em}
.status i{width:10px;height:10px;border-radius:50%;background:var(--red);animation:blink 1.8s infinite}
@keyframes blink{0%,55%{opacity:1;box-shadow:0 0 0 0 rgba(239,65,53,.5)}75%{opacity:.25;box-shadow:0 0 0 6px rgba(239,65,53,0)}100%{opacity:1}}
.menu{display:none}

/* ---------- HERO ---------- */
.hero{position:relative;height:880px;overflow:clip}
.h-head{position:absolute;left:40px;top:36px;width:760px;height:400px;margin:0;font-weight:400}
.h-head span{position:absolute;white-space:nowrap;font:232px/232px var(--display);letter-spacing:-.01em;mix-blend-mode:multiply}
.h-head .l1{left:0;top:0;color:var(--red);animation:inL 1.2s var(--spring) .1s both;translate:calc(var(--px,0)*-8px) 0}
.h-head .l2{left:12px;top:146px;color:var(--blue);animation:inR 1.2s var(--spring) .28s both;translate:calc(var(--px,0)*8px) 0}
@keyframes inL{from{transform:translateX(-115%)}70%{transform:translateX(6px)}to{transform:none}}
@keyframes inR{from{transform:translateX(115%)}70%{transform:translateX(-6px)}to{transform:none}}
.h-copy{position:absolute;left:48px;top:478px;width:600px;display:flex;flex-direction:column;gap:22px;z-index:6}
.lede{font:italic 48px/52px var(--serif);margin:0}
.body{font:17px/27px var(--mono);margin:0}
.ctas{display:flex;align-items:center;gap:28px;padding-top:6px}
.btn{display:inline-flex;background:var(--red);color:var(--paper);border:0;cursor:pointer;padding:16px 24px;font:700 14px/18px var(--mono);letter-spacing:.18em;box-shadow:5px 5px 0 var(--blue);transition:transform .18s var(--spring),box-shadow .18s var(--spring)}
.btn:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--blue)}
.btn:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--blue)}
.btn.blue-btn{background:var(--blue);box-shadow:5px 5px 0 var(--red)}
.btn.blue-btn:hover{box-shadow:3px 3px 0 var(--red)} .btn.blue-btn:active{box-shadow:0 0 0 var(--red)}
.ul{position:relative;border-bottom:2px solid var(--blue);padding-bottom:4px;font:700 14px/18px var(--mono);letter-spacing:.18em}
.ul::after{content:"";position:absolute;left:3px;right:-3px;bottom:-4px;height:2px;background:var(--red);mix-blend-mode:multiply;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--out)}
.ul:hover::after{transform:scaleX(1)}

.h-art{position:absolute;right:80px;top:0;width:840px;height:880px;touch-action:pan-y}
.pl{position:absolute;background:center/100% 100% no-repeat;mix-blend-mode:multiply}
.pl.block{left:260px;top:60px;width:480px;height:660px;opacity:.7;background-image:url(assets/block-blue.png);animation:wipeDown 1.2s var(--out) .35s both;translate:calc(var(--px,0)*4px) calc(var(--py,0)*3px)}
.pl.strip{left:100px;top:0;width:700px;height:80px;opacity:.9;background-image:url(assets/strip-red.png);animation:wipeLeft 1s var(--out) .55s both}
.pl.crop{left:720px;top:0;width:3px;height:780px;background:var(--red);transform-origin:top;animation:drawDown 1.4s var(--out) .7s both}
/* bust: flat red + blue silhouettes, overprint makes the burgundy third ink */
.bust{position:absolute;left:0;top:0;width:920px;height:880px;mix-blend-mode:multiply}
.bust.r{animation:riseR 1.4s var(--out) .45s both;translate:calc(var(--px,0)*-9px) calc(var(--py,0)*-5px)}
.bust.b{left:36px;top:-16px;opacity:.8;animation:driftB 1.9s var(--spring) .6s both;translate:calc(var(--px,0)*11px) calc(var(--py,0)*6px)}
@keyframes riseR{from{transform:translate(20px,140px)}}
@keyframes driftB{from{transform:translate(60px,140px)}60%{transform:translate(-4px,0)}}
.bust .hat{transform-box:view-box;transform-origin:540px 336px;animation:tip 7s ease-in-out 2.6s infinite;cursor:pointer;translate:0 var(--hl,0px);rotate:var(--hrot,0deg);transition:translate .5s var(--spring),rotate .5s var(--spring)}
/* hat: hover lifts it like a greeting, tap flips it through the air */
.h-art.lift{--hl:-38px;--hrot:-10deg}
.h-art.flip .bust .hat{animation:flip 1.2s var(--spring)}
@keyframes flip{0%{transform:none}35%{transform:translateY(-240px) rotate(-200deg)}72%{transform:translateY(-30px) rotate(-352deg)}100%{transform:rotate(-360deg)}}
@keyframes tip{0%,80%,100%{transform:none}86%{transform:translateY(-16px) rotate(-6deg)}93%{transform:translateY(-2px) rotate(1deg)}}
.bust .tie{transform-box:view-box;transform-origin:540px 646px;animation:tie 3.2s ease-in-out infinite alternate}
@keyframes tie{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
@keyframes wipeDown{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@keyframes wipeLeft{from{clip-path:inset(0 0 0 100%);transform:translateX(60px)}to{clip-path:inset(0);transform:none}}
@keyframes drawDown{from{transform:scaleY(0)}}

/* ---------- TICKER ---------- */
.ticker{background:var(--blue);height:72px;overflow:clip;display:flex;align-items:center}
.track{display:flex;gap:36px;padding-left:24px;white-space:nowrap;will-change:transform}
.track span{font:44px/44px var(--display);letter-spacing:.03em;color:var(--paper)}
.track .d{color:var(--red);display:inline-block;animation:pulse 1.4s ease-in-out infinite}
.track .d:nth-child(4n){animation-delay:-.7s}
@keyframes pulse{50%{transform:scale(.7)}}