@font-face{font-family:'Bricolage';src:url(../../fonts/concepts/bricolage.woff2) format('woff2');font-weight:700;font-display:swap}
.defs{position:absolute}
.st-coffee{--br:'Bricolage',var(--body);--bean:var(--cf-green);--cf-crease:var(--cf-cream);background:var(--cf-cream);color:var(--cf-ink)}
.st-coffee h1,.st-coffee h2{font-family:var(--br);font-weight:700;letter-spacing:-.035em}
.cf-hero{position:relative;min-height:calc(100vh - 2.8rem);min-height:calc(100svh - 2.8rem);display:flex;flex-direction:column;overflow:hidden}
.st-coffee .st-nav{position:relative;z-index:2}
.st-coffee .st-nav b{font:700 1.2rem/1 var(--br);letter-spacing:-.02em;text-transform:none}
.cf-field{position:absolute;inset:0;color:var(--bean)}
.cf-field svg{position:absolute;display:block;overflow:visible}
.cf-field i{position:absolute;display:block;transform:rotate(var(--r))}
html.motion .roasting .cf-field i:nth-child(3n){animation:cf-shake .16s linear infinite alternate}
@keyframes cf-shake{from{transform:rotate(var(--r)) translate(-1px,0)}to{transform:rotate(var(--r)) translate(1px,1px)}}
.cf-copy{position:relative;z-index:2;margin:auto 0;padding:1rem var(--st-pad) 2rem;max-width:max(42rem,58vw);box-sizing:content-box}
.st-coffee h1{font-size:clamp(3.8rem,11vw,28vh);line-height:.9;margin:0 0 .22em}
.cf-hold{position:relative;font:700 1.15rem/1 var(--br);letter-spacing:-.01em;padding:1.05em 1.5em;border:0;background:var(--cf-ink);color:var(--cf-cream);cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;transition:transform .25s var(--spring)}
.cf-hold:active{transform:scale(.96)}
.cf-note{display:block;margin:.9rem 0 0;font-weight:600;min-height:1.3em}
.cf-curve{position:absolute;z-index:2;right:var(--st-pad);bottom:clamp(1.4rem,3vw,4rem);width:min(34vw,32rem);height:min(22vh,14rem);margin:0;padding:.8rem .8rem 1.6rem;background:var(--cf-cream);box-sizing:border-box}
.cf-curve svg{display:block;width:100%;height:100%;overflow:visible}
.cf-curve .ax{fill:none;stroke:var(--cf-ink);stroke-width:1;vector-effect:non-scaling-stroke}
.cf-curve .mk{fill:none;stroke:var(--cf-rule);stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.cf-curve .cr{fill:none;stroke:var(--cf-heat);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:var(--o,1)}
.cf-curve figcaption{position:absolute;left:.8rem;right:.8rem;bottom:.4rem;height:1rem;font:500 max(11px,.62rem)/1 var(--body);color:var(--cf-ink-2)}
.cf-curve figcaption span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.cf-sub{background:var(--cf-ink);color:var(--cf-cream)}
.st-coffee h2{font-size:clamp(2.6rem,6vw,15vh);line-height:.95;margin:0 0 .4em}
.cf-yours{font-size:1.1rem;margin:0 0 1.4rem;max-width:44ch}
.cf-sub .st-chip[aria-pressed=true]{background:var(--cf-cream);color:var(--cf-ink)}
.cf-price{font:700 clamp(2rem,4vw,8rem)/1 var(--br);margin:0 0 1rem}
.cf-sub .st-btn{background:var(--cf-cream);color:var(--cf-ink)}
@media (max-width:760px){.cf-curve{position:relative;right:auto;bottom:auto;width:auto;margin:0 var(--st-pad) 1.4rem;height:9rem}.st-coffee h1{font-size:19vw}}