@font-face{font-family:"Clash";src:url(assets/fonts/clash-display-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Clash";src:url(assets/fonts/clash-display-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Geist";src:url(assets/fonts/geist-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--red:#FF5A36;--yel:#FFD23F;--blue:#2E2BBF;--cream:#F7EFE3;--ink:#1B1B1B;--pink:#F59AC6;--disp:"Clash","Arial Black",sans-serif;--sans:"Geist",system-ui,sans-serif;--pad:clamp(16px,4vw,64px)}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font:17px/1.55 var(--sans);overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.18;mix-blend-mode:multiply;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='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}
a{color:inherit}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--cream);padding:8px 14px;z-index:99}.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
h1,h2,h3{font-family:var(--disp);font-weight:700;letter-spacing:-.03em;line-height:.92}
.mono{font-family:var(--disp)}
.fine{font-size:13px;opacity:.7;margin-top:24px}
.btn{display:inline-block;background:var(--ink);color:var(--cream);font:600 18px var(--disp);text-decoration:none;padding:16px 30px;border-radius:99px;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--red);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--red)}
.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--red)}

.nav{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:14px var(--pad);background:var(--cream);border-bottom:3px solid var(--ink)}
.nav nav{display:flex;gap:8px}
.nav nav a{font:600 16px var(--disp);text-decoration:none;padding:8px 16px;border-radius:99px;border:2px solid transparent}
.nav nav a:hover{border-color:var(--ink);background:var(--yel)}
.bag-btn{font:600 16px var(--disp);background:var(--yel);border:3px solid var(--ink);border-radius:99px;padding:8px 18px;cursor:pointer}
.bag-btn span{display:inline-grid;place-items:center;min-width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--yel);font-size:13px;margin-left:6px}
.bag-btn.pop{animation:pop .4s}
@keyframes pop{40%{transform:scale(1.15) rotate(-4deg)}}

.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:30px;align-items:center;padding:60px var(--pad) 80px;min-height:calc(100vh - 70px)}
.hero h1{font-size:clamp(64px,9.5vw,170px)}
.w{display:inline-block;animation:rise .9s cubic-bezier(.2,1.4,.4,1) both}
.w1{color:var(--red);animation-delay:.05s}.w2{animation-delay:.12s}.w3{animation-delay:.19s}.w4{color:var(--blue);animation-delay:.26s;font-style:italic}.w5{animation-delay:.33s}
@keyframes rise{from{transform:translateY(60%) rotate(6deg);opacity:0}}
.hero p{max-width:40ch;margin:28px 0 34px;font-size:19px}
.hero-bags{position:relative;height:min(620px,80vw)}
.bag{position:absolute;width:42%;aspect-ratio:3/4.2;border:3px solid var(--ink);border-radius:14px 14px 22px 22px;display:grid;place-items:center;box-shadow:8px 8px 0 var(--ink);transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.bag::before{content:"";position:absolute;top:-3px;left:-3px;right:-3px;height:18%;border:3px solid var(--ink);border-radius:14px 14px 0 0;background:repeating-linear-gradient(90deg,transparent 0 10px,rgba(0,0,0,.15) 10px 12px)}
.bag span{font:600 18px/1.1 var(--disp);text-align:center;background:var(--cream);border:3px solid var(--ink);border-radius:50%;width:62%;aspect-ratio:1;display:grid;place-content:center}
.bag b{font-size:28px}
.b-red{background:var(--red);left:2%;top:14%;transform:rotate(-9deg)}
.b-blue{background:var(--blue);left:30%;top:4%;transform:rotate(4deg);z-index:2}
.b-yellow{background:var(--yel);left:56%;top:22%;transform:rotate(12deg)}
.hero-bags:hover .b-red{transform:rotate(-16deg) translateX(-12px)}
.hero-bags:hover .b-yellow{transform:rotate(18deg) translateX(12px)}
.badge{position:absolute;width:30%;right:2%;bottom:0;z-index:3;animation:spin 14s linear infinite;font:700 15px var(--disp);letter-spacing:2px}
.badge text{fill:var(--ink)}
.badge circle{fill:var(--red);stroke:var(--ink);stroke-width:3}
@keyframes spin{to{transform:rotate(360deg)}}
.bean{position:absolute;width:38px;height:26px;background:#5A3420;border-radius:50%;border:2px solid var(--ink);animation:bob 4s ease-in-out infinite}
.bean::after{content:"";position:absolute;left:10%;right:10%;top:45%;height:3px;border-radius:3px;background:var(--ink);transform:rotate(-8deg)}
.bn1{left:6%;bottom:12%;animation-delay:-1s}.bn2{left:44%;bottom:6%;transform:rotate(30deg)}.bn3{right:4%;top:4%;animation-delay:-2s}.bn4{left:20%;top:0;animation-delay:-3s}
@keyframes bob{50%{translate:0 -14px;rotate:20deg}}

.ticker{background:var(--ink);color:var(--yel);overflow:hidden;border-block:3px solid var(--ink);transform:rotate(-1.5deg) scaleX(1.02)}
.ticker div{display:flex;gap:30px;width:max-content;padding:16px 0;animation:tick 22s linear infinite;font:700 34px var(--disp)}
@keyframes tick{to{transform:translateX(-50%)}}

.beans{padding:110px var(--pad)}
.beans h2,.brew h2,.club h2{font-size:clamp(52px,7vw,120px);margin-bottom:28px}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:40px}
.filters button,.methods button,.freq button{font:600 17px var(--disp);padding:10px 22px;border:3px solid var(--ink);background:var(--cream);border-radius:99px;cursor:pointer;transition:background .2s,transform .2s}
.filters button:hover,.methods button:hover,.freq button:hover{transform:rotate(-3deg)}
.filters button[aria-pressed=true],.methods button[aria-checked=true],.freq button[aria-checked=true]{background:var(--ink);color:var(--cream)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.prod{background:#fff;border:3px solid var(--ink);border-radius:26px;padding:18px;box-shadow:6px 6px 0 var(--ink);transition:transform .35s cubic-bezier(.3,1.6,.5,1),opacity .3s}
.prod:hover{transform:rotate(-1.5deg) translateY(-6px)}
.prod.hide{display:none}
.pbag{background:var(--bg);aspect-ratio:4/3;border-radius:16px;border:3px solid var(--ink);display:grid;place-items:center;margin-bottom:16px;background-image:radial-gradient(rgba(0,0,0,.14) 2px,transparent 2.5px);background-size:18px 18px}
.pbag b{font:700 clamp(30px,3vw,46px) var(--disp);background:var(--cream);border:3px solid var(--ink);padding:6px 18px;border-radius:99px;transform:rotate(-5deg)}
.prod h3{font-size:34px}
.prod p{margin:6px 0 16px}
.row{display:flex;justify-content:space-between;align-items:center}
.roast{font-size:13px;font-weight:600;border:2px dashed var(--ink);padding:4px 12px;border-radius:99px}
.add{font:600 16px var(--disp);background:var(--yel);border:3px solid var(--ink);border-radius:99px;padding:8px 20px;cursor:pointer}
.add:active{transform:scale(.94)}

.brew{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:110px var(--pad);background:var(--blue);color:var(--cream);border-block:3px solid var(--ink)}
.methods{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0}
.methods button{background:transparent;color:var(--cream);border-color:var(--cream)}
.methods button[aria-checked=true]{background:var(--yel);color:var(--ink);border-color:var(--ink)}
.cups{display:grid;gap:10px;font:600 20px var(--disp);max-width:420px}
.cups input{accent-color:var(--yel)}
.recipe{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.dial{aspect-ratio:1;border-radius:50%;background:var(--yel);color:var(--ink);border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink);display:grid;place-content:center;text-align:center}
.dial.alt{background:var(--red)}
.dial span{font-size:clamp(48px,6vw,90px);font-weight:700;line-height:1}
.dial small{font:600 16px var(--disp)}
.recipe p{grid-column:span 2;font-size:18px}

.club{padding:110px var(--pad) 130px;text-align:center;background:var(--pink);border-bottom:3px solid var(--ink)}
.club>p{max-width:44ch;margin:0 auto 30px;font-size:19px}
.freq{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.freq-out{margin-top:24px;font-weight:600}

.foot{padding:50px var(--pad) 80px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.foot p{font-size:14px;max-width:52ch}
.tarzi-ribbon{position:fixed;right:12px;bottom:12px;z-index:70;font:600 12px/1 var(--disp);text-decoration:none;background:var(--yel);color:var(--ink);border:2px solid var(--ink);padding:7px 12px;border-radius:99px;transform:rotate(-3deg)}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,140%);background:var(--ink);color:var(--cream);font:600 16px var(--disp);padding:12px 22px;border-radius:99px;z-index:70;transition:transform .4s cubic-bezier(.3,1.6,.5,1);white-space:nowrap}
.toast.show{transform:translate(-50%,0)}

@media (max-width:900px){
  .nav nav{display:none}
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:40px}
  .hero-bags{height:110vw;max-height:560px}
  .grid{grid-template-columns:1fr 1fr}
  .brew{grid-template-columns:1fr}
}
@media (max-width:560px){.grid{grid-template-columns:1fr}.ticker div{font-size:24px}.recipe{gap:12px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
/* imagery */
.ph,.ph img{display:block;width:100%;height:100%}
.ph img{object-fit:cover}
figure{margin:0}
.shots{display:grid;grid-template-columns:3fr 1fr 1fr;gap:20px;padding:90px var(--pad) 0}
.shots figure{border:3px solid var(--ink);border-radius:26px;overflow:hidden;box-shadow:6px 6px 0 var(--ink);position:relative;transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.shots figure:hover{transform:rotate(-1.5deg)}
.s-big{aspect-ratio:16/10}
.s-tall,.s-sq{aspect-ratio:auto}
.s-sq figcaption{position:absolute;left:12px;bottom:12px;background:var(--yel);border:2px solid var(--ink);border-radius:99px;padding:4px 12px;font:600 14px var(--disp)}
.brew{grid-template-columns:1fr 1fr;grid-template-areas:"copy img" "copy rec"}
.brew-copy{grid-area:copy}.brew-img{grid-area:img}.recipe{grid-area:rec}
.brew-img{border:3px solid var(--ink);border-radius:26px;overflow:hidden;aspect-ratio:16/10;box-shadow:8px 8px 0 var(--ink)}
.recipe .dial{max-width:220px;width:100%;justify-self:center}
.club-img{max-width:900px;margin:40px auto 0;border:3px solid var(--ink);border-radius:26px;overflow:hidden;aspect-ratio:16/10;box-shadow:8px 8px 0 var(--ink)}
@media (max-width:900px){.shots{grid-template-columns:1fr 1fr}.s-big{grid-column:span 2}.s-tall{aspect-ratio:3/4}.s-sq{aspect-ratio:3/4}.brew{grid-template-areas:"copy" "img" "rec";grid-template-columns:1fr}}