@font-face{font-family:Barlow;src:url('../assets/fonts/barlow-condensed-900.woff2') format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:Barlow;src:url('../assets/fonts/barlow-condensed-800.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:Barlow;src:url('../assets/fonts/barlow-condensed-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:DM;src:url('../assets/fonts/dm-sans-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:DM;src:url('../assets/fonts/dm-sans-700.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --ink:#0a0a0a;
  --ink2:#141414;
  --ink3:#1f1f1f;
  --bone:#f2eee6;
  --bone2:#bdb8ae;
  --red:#e3161b;
  --red-deep:#8e0b0f;
  --line:#2c2c2c;
  --mono:'Space Mono',ui-monospace,Menlo,monospace;
  --display:Anton,Barlow,'Arial Narrow',Impact,sans-serif;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --gutter:clamp(16px,4vw,56px);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;min-width:320px;background:var(--ink);color:var(--bone);font:400 16px/1.5 'DM Sans',DM,system-ui,sans-serif;overflow-x:clip;font-synthesis:none;-webkit-font-smoothing:antialiased}
body.is-locked{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
em{font-style:normal;color:var(--red)}
h1,h2,h3,p{margin:0}
::selection{background:var(--red);color:var(--bone)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.label{color:var(--bone2);margin-bottom:14px}
.red{color:var(--red)}
.h2{font:900 clamp(64px,13vw,190px)/.82 var(--display);letter-spacing:-.02em}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;font:800 18px/1 var(--display);letter-spacing:.06em;border:2px solid var(--bone);transition:transform .2s var(--ease-out),background .2s,color .2s}
.btn:active{transform:scale(.97)}
.btn--red{background:var(--red);border-color:var(--red);color:var(--bone)}
.btn--red:hover{background:var(--bone);border-color:var(--bone);color:var(--ink)}
.btn--ghost:hover{background:var(--bone);color:var(--ink)}
.btn:disabled{opacity:.35;pointer-events:none}

/* ---------- grain + cursor ---------- */
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(0,0)}}
.cursor{position:fixed;left:0;top:0;z-index:100;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--red);pointer-events:none;mix-blend-mode:difference;display:grid;place-items:center;transition:width .25s var(--ease-out),height .25s var(--ease-out),margin .25s var(--ease-out),background .25s}
.cursor.is-label{width:84px;height:84px;margin:-42px 0 0 -42px;background:var(--bone);mix-blend-mode:normal}
.cursor__label{font:800 15px/1 var(--display);letter-spacing:.06em;color:var(--ink);opacity:0;transition:opacity .15s}
.cursor.is-label .cursor__label{opacity:1}
@media (pointer:coarse),(hover:none){.cursor{display:none}}
@media (pointer:fine){body.has-cursor,body.has-cursor a,body.has-cursor button{cursor:none}}

/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:200;background:var(--ink);display:grid;place-content:center;gap:22px;justify-items:center;transition:clip-path .8s var(--ease-out);clip-path:inset(0 0 0 0)}
.loader.is-done{clip-path:inset(0 0 100% 0);pointer-events:none}
.loader__logo{position:relative;width:min(260px,60vw)}
.loader__logo img{width:100%;filter:grayscale(1) brightness(.35)}
.loader__fill{position:absolute;inset:0;background:url('../assets/logo.png') center/100% no-repeat;clip-path:inset(0 0 calc(100% - var(--p,0%)) 0)}
.loader__txt{color:var(--bone2)}
.loader__txt b{color:var(--red)}

/* ---------- header ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px var(--gutter);mix-blend-mode:normal;background:linear-gradient(var(--ink),transparent)}
.top__logo img{height:38px;width:auto}
.top__nav{display:flex;gap:28px}
.top__nav a{position:relative;padding:6px 0;color:var(--bone2);transition:color .2s}
.top__nav a:hover{color:var(--bone)}
.top__nav a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-out)}
.top__nav a:hover::after{transform:scaleX(1)}
.stash-btn{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border:1.5px solid var(--bone);font-weight:700;transition:background .2s,color .2s}
.stash-btn:hover{background:var(--bone);color:var(--ink)}
.stash-btn__count{display:grid;place-items:center;min-width:24px;height:24px;padding:0 6px;background:var(--red);color:var(--bone);font-variant-numeric:tabular-nums}
.stash-btn.is-bump{animation:bump .5s var(--ease-out)}
@keyframes bump{30%{transform:scale(1.15) rotate(-3deg)}}
@media (max-width:720px){.top__nav{display:none}.top__logo img{height:30px}}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;padding:110px var(--gutter) 40px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate}
.hero__drip{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;filter:url(#goo)}
.hero__kicker{position:relative;z-index:3;color:var(--bone2)}
.hero__title{position:relative;z-index:1;margin:34px 0 18px;font:900 clamp(170px,44vw,720px)/.8 var(--display);letter-spacing:-.01em;color:var(--bone);user-select:none}
.hero__word{display:inline-block;transform-origin:50% 100%;animation:heroIn 1.2s var(--ease-out) both .9s}
.hero__i{display:inline-block;color:var(--red);animation:wobble 4s ease-in-out infinite}
@keyframes heroIn{from{transform:translateY(40%) scaleY(1.6);opacity:0;filter:blur(12px)}}
@keyframes wobble{0%,100%{transform:skewX(0)}50%{transform:skewX(-8deg) scaleY(1.04)}}
.hero__row{position:relative;z-index:3;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px}
.hero__sub{font:800 clamp(26px,3.4vw,46px)/1 var(--display);letter-spacing:.01em;text-transform:uppercase}
.hero__ctas{display:flex;flex-wrap:wrap;gap:12px}
.hero__hint{position:absolute;z-index:3;top:88px;right:var(--gutter);color:var(--bone2)}
.hero__side{position:absolute;z-index:3;right:calc(var(--gutter) - 8px);top:50%;writing-mode:vertical-rl;transform:translateY(-50%);color:#555;white-space:nowrap}
@media (max-width:720px){.hero__hint,.hero__side{display:none}.hero__title{font-size:56vw}}

/* ---------- ticker ---------- */
.ticker{overflow:hidden;background:var(--red);color:var(--bone);border-block:2px solid var(--ink);transform:rotate(-1.4deg) scale(1.03);margin:10px 0 30px}
.ticker__track{display:flex;width:max-content;padding:14px 0;font:800 22px/1 var(--display);letter-spacing:.08em;animation:tick 28s linear infinite}
.ticker__track span{padding:0 22px}
@keyframes tick{to{transform:translateX(-50%)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .hero__drip{display:none}
}
