@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(cfl-font-anton.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Dela Gothic One';font-style:normal;font-weight:400;font-display:swap;src:url(cfl-font-dela-gothic-one.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Faster One';font-style:normal;font-weight:400;font-display:swap;src:url(cfl-font-faster-one.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url(cfl-font-instrument-sans.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Luckiest Guy';font-style:normal;font-weight:400;font-display:swap;src:url(cfl-font-luckiest-guy.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Permanent Marker';font-style:normal;font-weight:400;font-display:swap;src:url(cfl-font-permanent-marker.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;src:url(cfl-font-space-grotesk.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Brother of Mine. Flat brand colour, hard edges, real product. Scroll moves the bag through the scenes.
   Layers: section fills (auto) < hero pin (1) < saw edges (2) < the travelling bag (5) < scene UI (8) < blend panels (10) < top bar (60) < overlays (100+). */
:root{
  color-scheme:light;
  --navy:#111A37; --pink:#FF69AE; --cream:#F0F0EA; --purple:#C888F8; --white:#ffffff;
  --sky:#8CCDE3; --orange:#F27B20;
  --w:#8CCDE3; --w-ink:#111A37; --w-ghost:rgba(17,26,55,.09); --w-edge:#111A37;
  --f-d:'Dela Gothic One','Arial Black',Impact,sans-serif;
  --f-c:'Anton','Arial Narrow',Impact,sans-serif;
  --f-b:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1); --snap:cubic-bezier(.77,0,.18,1); --pop:cubic-bezier(.3,1.5,.4,1);
  --gut:clamp(16px,4vw,56px);
  --saw:polygon(0 100%,0 56%,6.25% 0,12.5% 56%,18.75% 0,25% 56%,31.25% 0,37.5% 56%,43.75% 0,50% 56%,56.25% 0,62.5% 56%,68.75% 0,75% 56%,81.25% 0,87.5% 56%,93.75% 0,100% 56%,100% 100%);
  --sawh:clamp(26px,5vw,74px);
  --top:calc(env(safe-area-inset-top,0px) + 98px);
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{background:var(--cream);scroll-behavior:auto}
body{margin:0;background:var(--cream);color:var(--navy);font-family:var(--f-b);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.lock{overflow:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
input{font:inherit;color:inherit}
p,h1,h2,h3,h4,figure,blockquote,dl,dd{margin:0}
::selection{background:var(--pink);color:var(--navy)}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:1480px;margin-inline:auto;padding-inline:var(--gut)}
.d{font-family:var(--f-d);font-weight:400;text-transform:uppercase;line-height:.92;letter-spacing:-.015em}
.h2{font-family:var(--f-d);font-weight:400;text-transform:uppercase;font-size:clamp(40px,7vw,124px);line-height:.9;letter-spacing:-.02em;text-wrap:balance}
.lead{font-size:clamp(17px,1.45vw,22px);line-height:1.5;max-width:52ch}
.aside{font-size:clamp(15px,1.2vw,18px);font-weight:500}
.hl{display:inline-block;background:var(--pink);color:var(--navy);padding:.08em .13em .04em;line-height:.84;font-weight:inherit}


/* saw-tooth edge: the pennant's zigzag, used wherever one colour field meets the next */
.saw{position:relative}
.saw::before{content:'';position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:var(--sawh);background:inherit;clip-path:var(--saw);z-index:11;pointer-events:none}

/* ---------- buttons: hard shadow, press into it ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 24px;border:3px solid var(--navy);background:var(--pink);color:var(--navy);font-weight:700;font-size:15px;letter-spacing:.01em;white-space:nowrap;box-shadow:6px 6px 0 var(--bs,var(--purple));translate:var(--tx,0px) var(--ty,0px);transition:translate .16s var(--ease),box-shadow .16s var(--ease),background .2s,color .2s}
.btn:active{translate:6px 6px;box-shadow:0 0 0 var(--bs,var(--purple))}
.btn-white{background:var(--white)}
.btn-navy{background:var(--navy);color:var(--cream);--bs:var(--pink)}
.btn-cream{background:var(--cream)}
.btn-sm{min-height:44px;padding:0 16px;font-size:14px;box-shadow:4px 4px 0 var(--bs,var(--purple))}
.btn-sm:active{translate:4px 4px}
.btn[disabled]{opacity:.5;pointer-events:none}
@media(hover:hover){.btn:hover{translate:calc(var(--tx,0px) - 2px) calc(var(--ty,0px) - 2px);box-shadow:8px 8px 0 var(--bs,var(--purple))}.btn:active{translate:6px 6px;box-shadow:0 0 0 var(--bs,var(--purple))}}
.sq{display:grid;place-items:center;width:54px;height:54px;border:3px solid var(--navy);background:var(--white);color:var(--navy);box-shadow:5px 5px 0 var(--navy);transition:translate .16s var(--ease),box-shadow .16s var(--ease),background .2s}
.sq:active{translate:5px 5px;box-shadow:0 0 0 var(--navy)}
@media(hover:hover){.sq:hover{background:var(--pink);translate:-2px -2px;box-shadow:7px 7px 0 var(--navy)}.sq:active{translate:5px 5px;box-shadow:0 0 0 var(--navy)}}

/* ---------- cursor: the normal arrow, with a tag pinned to it when there is something to do ---------- */
.cursor{position:fixed;left:0;top:0;z-index:300;pointer-events:none;will-change:transform}
.c-tag{position:absolute;left:14px;top:18px;padding:5px 9px 4px;border:2px solid var(--navy);background:var(--pink);color:var(--navy);box-shadow:3px 3px 0 var(--navy);font-size:12px;font-weight:700;line-height:1;white-space:nowrap;rotate:-4deg;transform-origin:0 0;scale:0;opacity:0;transition:scale .18s var(--pop,cubic-bezier(.3,1.5,.5,1)),opacity .12s}
.cursor.lab .c-tag{scale:1;opacity:1}
.cursor.down .c-tag{scale:.9}

/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:200;transition:translate 1s var(--snap),visibility 0s 1s}
.loader::after{content:'';position:absolute;left:0;right:0;top:calc(100% - 1px);height:var(--sawh);background:inherit;clip-path:var(--saw);rotate:180deg}
.loader.out{translate:0 calc(-100% - var(--sawh));visibility:hidden}
.ld{display:flex;flex-direction:column;align-items:center;gap:18px}
.ld img{width:min(260px,60vw)}
.ld-num{font-family:var(--f-d);font-size:clamp(70px,16vw,210px);line-height:.9;font-variant-numeric:tabular-nums}
.ld p{color:var(--cream);font-weight:500}

/* ---------- top: bar + nav ---------- */
.top{position:fixed;left:0;right:0;top:0;z-index:60;pointer-events:none}
.top>*{pointer-events:auto}
.bar{display:flex;overflow:hidden;background:var(--navy);color:var(--cream);font-size:13px;font-weight:600;padding:calc(env(safe-area-inset-top,0px) + 7px) 0 7px;user-select:none}
.bar-t{display:flex;flex-shrink:0;align-items:center;gap:26px;padding-right:26px;animation:bar 26s linear infinite}
.bar-t i{width:9px;height:9px;background:var(--pink);rotate:45deg}
@keyframes bar{to{transform:translateX(-100%)}}
.nav{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px var(--gut)}
.logo{display:block;position:relative;width:150px;height:57px}
.logo::before,.logo::after{content:"";position:absolute;inset:0;transition:background .35s}
.logo::before{background:var(--plate,var(--white));-webkit-mask:url(cfl-logo-solid.webp) left center/contain no-repeat;mask:url(cfl-logo-solid.webp) left center/contain no-repeat}
.logo::after{background:var(--logo,var(--navy));-webkit-mask:url(cfl-logo-ink.webp) left center/contain no-repeat;mask:url(cfl-logo-ink.webp) left center/contain no-repeat}
.nav.dark{--logo:var(--cream);--plate:var(--navy)}
.nav-r{display:flex;align-items:center;gap:10px}
.nb{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 15px;border:2px solid var(--navy);background:var(--white);color:var(--navy);font-size:14px;font-weight:700;white-space:nowrap;box-shadow:4px 4px 0 var(--navy);translate:var(--tx,0px) var(--ty,0px);transition:translate .16s var(--ease),box-shadow .16s var(--ease),background .2s}
.nb:active{translate:4px 4px;box-shadow:0 0 0 var(--navy)}
@media(hover:hover){.nb:hover{background:var(--pink);translate:calc(var(--tx,0px) - 2px) calc(var(--ty,0px) - 2px);box-shadow:6px 6px 0 var(--navy)}.nb:active{translate:4px 4px;box-shadow:0 0 0 var(--navy)}}
.nav.dark .nb{box-shadow:4px 4px 0 var(--pink)}
.nb b{display:grid;place-items:center;min-width:22px;height:22px;padding:0 5px;background:var(--navy);color:var(--cream);font-size:12px}
.nb b.bump{animation:bump .5s var(--pop)}
@keyframes bump{40%{scale:1.7;rotate:-12deg}}
.nb[aria-pressed="true"]{background:var(--pink)}
.eq{display:flex;align-items:flex-end;gap:2px;height:14px}
.eq i{width:3px;height:14px;background:currentColor;transform:scaleY(.29);transform-origin:50% 100%}
.sound-on .eq i{animation:eq .9s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:-.3s}.eq i:nth-child(3){animation-delay:-.6s}
@keyframes eq{0%,100%{transform:scaleY(.29)}50%{transform:scaleY(1)}}
.nudge{position:absolute;right:calc(var(--gut) + 60px);top:calc(100% + 4px);padding:8px 12px;background:var(--navy);color:var(--cream);font-size:13px;font-weight:600;rotate:-3deg;opacity:0;translate:0 -8px;transition:opacity .4s,translate .5s var(--pop);pointer-events:none}
.nudge.on{opacity:1;translate:0}
.nudge::before{content:'';position:absolute;right:70px;bottom:100%;border:8px solid transparent;border-bottom-color:var(--navy)}
@media(max-width:700px){.logo{width:108px;height:41px}.nb{padding:0 11px;min-height:40px;font-size:13px}.nb .lbl{display:none}.nav-r{gap:7px}.nb.hide-s{display:none}:root{--top:calc(env(safe-area-inset-top,0px) + 88px)}}

/* ---------- hero: big type, then a colour world wipes up with the bag ---------- */
.hero{position:relative;height:300vh}
.hero-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;z-index:1;background:var(--cream)}
.h-type{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:var(--top);font-family:var(--f-d);color:var(--navy);line-height:.84;text-transform:uppercase;font-size:min(11.4vw,27vh);will-change:transform}
.h-l{display:flex;align-items:center;justify-content:center;gap:.22em;white-space:nowrap;translate:0 110%;transition:translate 1.1s var(--ease)}
.ready .h-l{translate:0}
.ready .h-l.l2{transition-delay:.09s}.ready .h-l.l3{transition-delay:.18s}
.h-line{display:block;overflow:hidden;padding:.05em 0}
.h-l small{font-family:var(--f-b);font-size:max(13px,.07em);font-weight:600;letter-spacing:0;text-transform:none;line-height:1.25;width:9em;white-space:normal}
.h-gap{display:block;flex:none;width:min(calc(min(46vh,460px) * .6775),22vw)}
.h-foot{display:none;position:absolute;right:var(--gut);bottom:16px;max-width:15ch;text-align:right;font-size:13px;font-weight:600;line-height:1.25;opacity:calc(1 - var(--cue,0))}
.h-l small:first-child{text-align:right}
.spark{position:absolute;width:22px;height:22px;background:var(--navy);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation:spark 5s ease-in-out infinite}
.spark.p{background:var(--pink)}
@keyframes spark{0%,100%{scale:.4;rotate:0deg;opacity:.3}50%{scale:1;rotate:90deg;opacity:1}}
.world{position:absolute;inset:0;background:var(--w);translate:0 var(--rise,105%);will-change:translate}
.world::before{content:'';position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:var(--sawh);background:inherit;clip-path:var(--saw)}
.world-wipe{position:absolute;inset:0;background:var(--w2,transparent);clip-path:circle(0% at 50% 88%)}
.world-wipe.go{clip-path:circle(150% at 50% 88%);transition:clip-path .85s var(--snap)}
.w-ghost{position:absolute;left:0;top:calc(var(--top) + 1vh);display:flex;white-space:nowrap;font-family:var(--f-d);font-size:clamp(90px,21vw,400px);line-height:.9;text-transform:uppercase;color:var(--w-ghost);will-change:transform;user-select:none}
.w-ghost span{padding-right:.35em}
.w-art,.w-taste{position:absolute;margin:0;will-change:transform}
.w-art{left:clamp(-40px,3vw,60px);top:calc(var(--top) + 9vh);width:min(40vh,30vw);rotate:-7deg}
.w-art img{width:100%;aspect-ratio:1;object-fit:cover;border:3px solid var(--w-edge);box-shadow:12px 12px 0 var(--w-edge)}
.w-taste{right:clamp(-30px,4vw,70px);bottom:15vh;width:min(30vh,22vw);rotate:6deg}
.w-taste img{width:100%;aspect-ratio:1;object-fit:cover;border:10px solid var(--white);outline:3px solid var(--w-edge);box-shadow:10px 10px 0 var(--w-edge)}
.w-stk{position:absolute;will-change:transform;pointer-events:none}
.w-stk.s1{right:7vw;top:calc(var(--top) + 3vh);width:min(19vh,14vw);rotate:10deg}
.w-stk.s2{left:27vw;bottom:9vh;width:min(18vh,13vw);rotate:-12deg}
.w-stk.s3{right:27vw;top:calc(var(--top) + 15vh);width:min(13vh,10vw);rotate:-8deg}
.swap{transition:opacity .25s,scale .45s var(--pop)}
.swap.off{opacity:0;scale:.7}
.hero-ui{position:sticky;top:0;height:100vh;height:100svh;margin-top:-100vh;margin-top:-100svh;z-index:8;pointer-events:none;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:12px;padding:0 var(--gut) calc(var(--sawh) + 14px);opacity:var(--ui,0);translate:0 calc((1 - var(--ui,0)) * 40px)}
.hero-ui>*{pointer-events:auto}
.switch{display:flex;align-items:stretch;gap:10px}
.sw-name{display:grid;place-items:center;width:min(350px,58vw);padding:0 14px;border:3px solid var(--navy);background:var(--white);color:var(--navy);font-family:var(--f-d);font-size:clamp(14px,1.4vw,19px);text-transform:uppercase;text-align:center;line-height:1.05;box-shadow:5px 5px 0 var(--w-edge)}
.switch .sq{box-shadow:5px 5px 0 var(--w-edge)}
.switch .sq:active{box-shadow:0 0 0 var(--w-edge)}
.sw-line{max-width:44ch;padding:5px 12px;border:2px solid var(--navy);background:var(--white);color:var(--navy);text-align:center;font-size:15px;font-weight:600;text-wrap:balance;rotate:-1deg}
.scrollcue{position:absolute;left:var(--gut);bottom:18px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;font-size:13px;font-weight:600;color:var(--navy);opacity:calc(1 - var(--cue,0))}
.scrollcue i{width:3px;height:34px;background:var(--navy);transform-origin:top;animation:cue 1.6s var(--snap) infinite}
@keyframes cue{0%{scale:1 0}50%{scale:1 1}100%{scale:1 1;opacity:0}}

@media(max-width:700px),(max-aspect-ratio:1/1){
  .h-type{justify-content:flex-start;padding-top:calc(var(--top) + 1.5vh);font-size:min(17.4vw,13.5vh)}
  .h-l.l2{flex-direction:column;gap:0}
  .h-line{padding:0}
  .h-gap,.h-l small{display:none}
  .h-foot{display:block}
  .w-art{left:-9vw;top:calc(var(--top) + 3vh);width:min(40vw,26vh)}
  .w-taste{right:-7vw;bottom:auto;top:calc(var(--top) + 30vh);width:min(34vw,22vh)}
  .w-taste img{border-width:6px}
  .w-stk.s1{right:3vw;top:calc(var(--top) + 1vh);width:min(24vw,15vh)}
  .w-stk.s2{left:2vw;bottom:auto;top:calc(var(--top) + 34vh);width:min(22vw,13vh)}
  .w-stk.s3{display:none}
  .w-ghost{font-size:30vw}
}
/* the travelling bag */
.actor{position:fixed;left:0;top:0;z-index:5;height:min(64vh,640px);aspect-ratio:813/1200;margin:0;pointer-events:none;will-change:transform;visibility:hidden;perspective:1400px}
.tilt3{position:absolute;inset:0;transform-style:preserve-3d}
.actor.on{visibility:visible}
.flip{position:absolute;inset:0;transition:transform .7s var(--snap);transform-style:preserve-3d}
.flip img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;backface-visibility:hidden;-webkit-backface-visibility:hidden;filter:drop-shadow(0 26px 22px rgba(17,26,55,.28))}
.flip img.bk{transform:rotateY(180deg)}
.flip.back{transform:rotateY(180deg)}
.flip.spin{transition:transform .9s var(--snap)}

/* ---------- wheel: cards swing around the bag ---------- */
.wheel{position:relative;height:420vh;background:var(--cream)}
.wheel::before{z-index:2}
.wheel-pin{position:sticky;top:0;height:100vh;height:100svh;z-index:8;overflow:hidden;pointer-events:none}
.wheel-head{position:absolute;left:50%;top:calc(var(--top) + 3vh);width:min(1200px,92vw);margin-left:calc(min(1200px,92vw) / -2);text-align:center;transform-origin:50% 150vh;will-change:transform}
.wheel-head h2{font-family:var(--f-d);font-weight:400;text-transform:uppercase;font-size:clamp(34px,6.2vw,104px);line-height:.92;letter-spacing:-.02em}
.wheel-head p{margin-top:18px}
.wcard{position:absolute;left:50%;top:calc(var(--top) + 1vh);width:min(390px,78vw);margin-left:calc(min(390px,78vw) / -2);transform-origin:50% 150vh;will-change:transform;pointer-events:auto;background:var(--white);border:3px solid var(--navy);box-shadow:12px 12px 0 var(--cs,var(--purple))}
.wcard h3{padding:16px 18px;background:var(--navy);color:var(--cream);font-family:var(--f-d);font-weight:400;text-transform:uppercase;font-size:clamp(19px,1.9vw,27px);line-height:1}
.wcard p{padding:16px 18px 6px;font-size:17px;font-weight:500}
.wcard svg{display:block;width:44%;margin:6px auto 20px}
.wheel-dots{position:absolute;right:var(--gut);bottom:26px;display:flex;gap:8px}
.wheel-dots i{width:14px;height:14px;border:3px solid var(--navy);background:var(--white);transition:background .25s,rotate .4s var(--pop)}
.wheel-dots i.on{background:var(--pink);rotate:45deg}

/* ---------- blends: three colour panels that stack ---------- */
.stack{position:relative}
.panel{position:sticky;top:0;z-index:10;height:100vh;height:100svh;min-height:640px;background:var(--pc);color:var(--pi)}
.panel::before{content:'';position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:var(--sawh);background:inherit;clip-path:var(--saw);pointer-events:none}
.p-pe{--pc:var(--sky);--pi:var(--navy);--pg:rgba(17,26,55,.08);--ps:var(--navy)}
.p-nsb{--pc:var(--orange);--pi:var(--navy);--pg:rgba(17,26,55,.1);--ps:var(--navy)}
.p-hyd{--pc:var(--navy);--pi:var(--cream);--pg:rgba(200,136,248,.14);--ps:var(--purple)}
.panel-in{position:relative;height:100%;overflow:hidden;transform-origin:50% 0;will-change:transform}
.p-ghost{position:absolute;left:0;bottom:-2vh;display:flex;white-space:nowrap;font-family:var(--f-d);font-size:clamp(100px,24vw,460px);line-height:.8;text-transform:uppercase;color:var(--pg);will-change:transform;user-select:none}
.p-ghost span{padding-right:.3em}
.p-grid{position:relative;height:100%;display:grid;grid-template-columns:minmax(0,5.3fr) minmax(0,4fr) minmax(0,3.5fr);gap:clamp(14px,2.6vw,44px);align-items:center;padding:calc(var(--top) + 8px) var(--gut) calc(var(--sawh) * .6 + 16px)}
.p-copy{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(8px,1.6vh,16px);min-width:0}
.p-name{font-family:var(--f-d);font-weight:400;text-transform:uppercase;font-size:clamp(30px,3.9vw,74px);line-height:.9;letter-spacing:-.02em;text-wrap:balance}
.p-tag{font-family:var(--f-d);font-weight:400;text-transform:uppercase;font-size:clamp(14px,1.35vw,20px);line-height:1.1;padding:7px 10px;background:var(--pi);color:var(--pc)}
.p-desc{font-size:clamp(15px,1.15vw,18px);max-width:46ch;font-weight:500}
.p-meta{display:grid;grid-template-columns:auto minmax(0,1fr);width:100%;max-width:520px;border-top:3px solid currentColor;font-size:15px}
.p-meta dt,.p-meta dd{padding:8px 0;border-bottom:2px solid currentColor}
.p-meta dt{font-weight:700;padding-right:22px}
.p-meta dd{font-weight:500}
.meter{display:inline-flex;gap:4px;margin-right:10px;vertical-align:middle}
.meter i{width:18px;height:10px;border:2px solid currentColor}
.meter i.f{background:currentColor}
.p-bag{position:relative;height:100%;display:grid;place-items:center;min-height:0}
.p-art{display:none}
.bagflip{display:block;position:relative;height:min(62vh,600px);aspect-ratio:813/1200;perspective:1400px;z-index:1}
.bagflip .flip img{filter:drop-shadow(0 24px 20px rgba(0,0,0,.3))}
.flip-hint{position:absolute;left:50%;bottom:-6px;translate:-50% 0;z-index:2;padding:6px 10px;background:var(--white);color:var(--navy);border:2px solid var(--navy);font-size:13px;font-weight:700;white-space:nowrap;rotate:-3deg}
.p-buy{display:flex;flex-direction:column;gap:16px;min-width:0}
.buy{display:flex;flex-direction:column;gap:14px;padding:clamp(14px,1.5vw,22px);background:var(--white);color:var(--navy);border:3px solid var(--navy);box-shadow:10px 10px 0 var(--ps)}
.seg{position:relative;display:flex;border:2px solid var(--navy)}
.seg button{position:relative;z-index:1;flex:1;min-height:42px;padding:0 10px;font-size:13.5px;font-weight:700;color:var(--navy);transition:color .3s;white-space:nowrap}
.seg button[aria-pressed="true"]{color:var(--cream)}
.seg .thumb{position:absolute;top:0;bottom:0;left:0;width:50%;background:var(--navy);transition:left .4s var(--ease),width .4s var(--ease)}
.price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.price-n{display:block;overflow:hidden;font-family:var(--f-d);font-size:clamp(32px,3.1vw,48px);line-height:1.05;font-variant-numeric:tabular-nums}
.price-n span{display:block}
.price-n.fa span{animation:pf .4s var(--ease)}
.price-n.fb span{animation:pg .4s var(--ease)}
@keyframes pf{from{transform:translateY(100%)}}
@keyframes pg{from{transform:translateY(100%)}}
.price s{font-size:16px;opacity:.6}
.price small{font-size:13px;font-weight:500}
.buy .btn{width:100%}
.p-taste{align-self:flex-end;width:min(100%,230px);margin-right:8px;rotate:5deg;border:9px solid var(--white);outline:3px solid var(--navy);box-shadow:8px 8px 0 var(--ps)}
.p-taste img{width:100%;aspect-ratio:1;object-fit:cover}
@media(max-height:760px) and (min-width:981px){.p-taste{display:none}.p-desc{display:none}}
@media(max-width:980px){
  .panel{position:relative;height:auto;min-height:0}
  .panel-in{overflow:hidden;transform:none !important}
  .p-grid{grid-template-columns:minmax(0,1fr);height:auto;padding:clamp(60px,10vh,90px) var(--gut) 60px;gap:26px}
  .p-bag{height:auto;padding:20px 0}
  .bagflip{height:min(52vh,440px)}
  .p-art{width:min(70vw,360px)}
  .p-taste{display:none}
}

/* ---------- sections ---------- */
.sec{padding:clamp(80px,13vh,160px) 0 clamp(80px,13vh,160px)}
.navy{background:var(--navy);color:var(--cream)}
.creamy{background:var(--cream);color:var(--navy)}
.pinky{background:var(--pink);color:var(--navy)}
.purply{background:var(--purple);color:var(--navy)}
/* blocks land like a stamp */
.js [data-rv]{opacity:0;transform:scale(1.14) rotate(5deg);transition:opacity .18s,transform .55s var(--pop)}
.js [data-rv].in{opacity:1;transform:none}
.js .split .sw{display:inline-block;overflow:hidden;vertical-align:top;padding:.1em .04em .12em;margin:-.1em -.04em -.12em}
.js .split .sw>span{display:inline-block;transform:translateY(112%);transition:transform .9s var(--ease);transition-delay:calc(var(--i) * 60ms)}
.js .split.in .sw>span{transform:none}

/* betty */
.betty-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,6vw,110px);align-items:center}
.frame{position:relative;margin:0;perspective:1000px}
.frame-in{position:relative;display:block;width:100%;overflow:hidden;border:3px solid var(--fb,var(--navy));box-shadow:var(--fo,14px) var(--fo,14px) 0 var(--fs,var(--pink));rotate:x var(--rx,0deg);transform:rotateY(var(--ry,0deg));transition:rotate .5s var(--ease),transform .5s var(--ease)}
.frame.live .frame-in{transition:none}
.frame img{width:100%}
.betty .frame{width:100%;max-width:calc(74vh * .667);justify-self:center;rotate:-3deg;--fs:var(--navy);--fo:16px}
.betty-copy{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.count{width:100%;padding:20px 0;border-block:3px solid var(--navy)}
.count-n{font-family:var(--f-d);font-size:clamp(30px,4.7vw,78px);line-height:1;font-variant-numeric:tabular-nums}
.count p{margin-top:6px;font-weight:500}
@media(max-width:820px){.betty-grid{grid-template-columns:minmax(0,1fr)}.betty .frame{max-width:380px;justify-self:start}}

/* warehouse wall */
.wall{padding:0}
.wall-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:clamp(16px,3vh,34px);padding-block:calc(var(--top) + 14px) 30px}
.wall-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 40px}
.wall-head .h2{font-size:clamp(34px,5.6vw,96px)}
.track{display:flex;gap:clamp(18px,2.4vw,40px);padding:6px var(--gut) 22px;width:max-content;will-change:transform;touch-action:pan-y}
.poster{position:relative;flex:0 0 auto;margin:0;display:flex;flex-direction:column;gap:14px}
.poster:nth-child(odd){rotate:-1.6deg}.poster:nth-child(even){rotate:1.4deg;translate:0 14px}
.poster .frame{height:min(58vh,600px);--fs:var(--navy);--fo:10px}
.poster .frame-in{height:100%}
.poster img{height:100%;width:auto;max-width:none;-webkit-user-drag:none;user-select:none}
.poster figcaption{font-family:var(--f-d);font-size:14px;text-transform:uppercase}
@media(max-width:860px),(pointer:coarse){
  .wall{height:auto !important}
  .wall-pin{position:relative;height:auto;padding-block:80px 60px}
  .wall-scroll{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .wall-scroll::-webkit-scrollbar{display:none}
  .track{transform:none !important}
  .poster .frame{height:min(54vh,460px)}
}

/* subscribe */
.sub{overflow:hidden}
.sub-grid{display:grid;grid-template-columns:minmax(0,7.6fr) minmax(0,4.4fr);gap:clamp(20px,4vw,70px);align-items:center}
.sub .h2{font-size:clamp(40px,6.3vw,116px)}
.fan{position:relative;height:clamp(300px,58vh,580px);--o:0}
.fan-card{position:absolute;left:50%;top:50%;height:86%;aspect-ratio:813/1200;translate:-50% -50%;transform:translate(calc(var(--x) * var(--o)),calc(var(--y) * var(--o) + var(--l,0px))) rotate(calc(var(--r) * var(--o)));transition:transform .5s var(--ease);will-change:transform}
.fan-card img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 22px 18px rgba(17,26,55,.35))}
.fan-card.f0{--x:-58%;--y:5%;--r:-14deg}
.fan-card.f1{--x:0%;--y:-4%;--r:0deg}
.fan-card.f2{--x:58%;--y:5%;--r:14deg}
@media(hover:hover){.fan-card:hover{--l:-26px;z-index:3}}
.fan-card:focus-visible{--l:-26px;z-index:3}
.sub-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) auto;gap:clamp(20px,4vw,70px);align-items:end;margin-top:clamp(26px,5vh,60px)}
.deals{border-top:3px solid var(--navy)}
.deal{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:3px solid var(--navy);font-weight:700}
.deal b{font-family:var(--f-d);font-weight:400;font-size:clamp(26px,2.8vw,40px)}
.deal s{font-family:var(--f-b);font-size:16px;font-weight:500;margin-right:10px;opacity:.7}
.mq{display:flex;overflow:hidden;margin-top:clamp(40px,8vh,90px);padding:16px 0;border-block:3px solid var(--navy);user-select:none}
.mq-t{display:flex;flex-shrink:0;align-items:center;gap:clamp(18px,2.4vw,40px);padding-right:clamp(18px,2.4vw,40px);font-family:var(--f-d);font-size:clamp(22px,3.2vw,50px);line-height:1;text-transform:uppercase;white-space:nowrap;will-change:transform}
.mq-t i{width:.5em;height:.5em;background:var(--navy);rotate:45deg}
.sub.sec{padding-bottom:clamp(50px,8vh,100px)}
@media(max-width:820px){.sub-grid,.sub-row{grid-template-columns:minmax(0,1fr)}.sub-row{align-items:start}.fan{height:clamp(260px,42vh,360px)}.fan-card.f0{--x:-50%}.fan-card.f2{--x:50%}}

/* reviews: a deck to flick through */
.revs .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px);align-items:center}
.rev-side{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.rev-side .h2{font-size:clamp(32px,3.5vw,64px)}
.rev-nav{display:flex;align-items:center;gap:12px;font-family:var(--f-d);font-size:15px}
.rev-nav .sq{box-shadow:5px 5px 0 var(--pink);border-color:var(--cream)}
.deck{position:relative;height:clamp(340px,52vh,470px);touch-action:pan-y}
.rcard{position:absolute;inset:0 6% 0 0;display:flex;flex-direction:column;justify-content:space-between;gap:16px;padding:clamp(20px,2.6vw,38px);border:3px solid var(--navy);box-shadow:10px 10px 0 var(--pink);color:var(--navy);background:var(--rc,var(--cream));transform:translate(calc(var(--d) * 18px + var(--dx,0px)),calc(var(--d) * 14px)) rotate(calc(var(--d) * 2.2deg + var(--dr,0deg)));transition:transform .5s var(--pop),opacity .3s;will-change:transform;user-select:none;-webkit-user-select:none}
.rcard.drag{transition:none}
.rcard.gone{transition:transform .5s var(--ease),opacity .4s;opacity:0}
.rcard q{quotes:none;font-weight:600;font-size:clamp(19px,2.1vw,32px);line-height:1.2;text-wrap:pretty}
.rcard.big q{font-family:var(--f-d);font-weight:400;text-transform:uppercase;font-size:clamp(26px,3.6vw,56px);line-height:.98}
.rcard footer{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:14px;font-weight:700}
.rate{display:flex;gap:3px}
.rate i{width:18px;height:18px;background:var(--navy);clip-path:polygon(50% 0,63% 36%,100% 38%,71% 61%,81% 98%,50% 76%,19% 98%,29% 61%,0 38%,37% 36%)}
@media(max-width:820px){.revs .wrap{grid-template-columns:minmax(0,1fr)}.rcard{inset:0 16px 0 0}}

/* wholesale door */
.biz-card{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);border:3px solid var(--navy);background:var(--white);box-shadow:16px 16px 0 var(--purple)}
.biz-copy{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:clamp(24px,4.2vw,68px)}
.biz-copy .h2{font-size:clamp(34px,4.8vw,84px)}
.biz-pic{position:relative;min-height:340px;overflow:hidden;border-left:3px solid var(--navy)}
.biz-pic img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;will-change:transform}
.acts{display:flex;flex-wrap:wrap;gap:14px 16px}
.stats{display:flex;flex-wrap:wrap;gap:10px 34px;width:100%;padding-top:20px;border-top:3px solid var(--navy)}
.stat b{display:block;font-family:var(--f-d);font-weight:400;font-size:clamp(26px,2.8vw,44px);line-height:1.05}
.stat span{font-size:14px;font-weight:600}
@media(max-width:860px){.biz-card{grid-template-columns:minmax(0,1fr)}.biz-pic{min-height:230px;order:-1;border-left:0;border-bottom:3px solid var(--navy)}}

/* footer: stickers to throw */
.foot{padding:0 0 30px;overflow:hidden}
.play{position:relative;height:clamp(420px,78vh,760px);overflow:hidden;touch-action:pan-y}
.play-type{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-family:var(--f-d);text-transform:uppercase;font-size:clamp(40px,10.4vw,190px);line-height:.86;color:var(--cream);pointer-events:none;padding-top:var(--sawh)}
.play-type em{font-style:normal;color:var(--pink)}
.play-note{position:absolute;right:var(--gut);top:calc(var(--sawh) + 14px);font-weight:600;font-size:14px;white-space:nowrap;pointer-events:none}
.tk{position:absolute;left:0;top:0;width:var(--s,150px);touch-action:none;will-change:transform;cursor:grab;user-select:none;-webkit-user-drag:none}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:34px 28px;padding-block:clamp(36px,6vh,70px);border-top:3px solid var(--cream)}
.foot-col{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.foot-col h3{font-family:var(--f-d);font-weight:400;font-size:15px;text-transform:uppercase;margin-bottom:10px;color:var(--pink)}
.foot-col a{display:inline-flex;align-items:center;min-height:36px;font-weight:500;transition:translate .3s var(--ease),color .2s}
@media(hover:hover){.foot-col a:hover{color:var(--pink);translate:6px 0}}
.foot-brand{grid-column:span 2;min-width:0;max-width:440px;gap:16px}
.news{display:flex;width:100%;border:3px solid var(--cream);background:var(--navy)}
.news input{flex:1;min-width:0;height:52px;padding:0 14px;background:none;border:0;outline:0;color:var(--cream)}
.news input::placeholder{color:rgba(240,240,234,.6)}
.news button{padding:0 16px;background:var(--pink);color:var(--navy);font-weight:700;border-left:3px solid var(--cream)}
.news-ok{flex:1;margin:0;padding:14px 16px;font-weight:700;color:var(--cream)}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-block:18px 60px;border-top:3px solid var(--cream);font-size:13px}
@media(max-width:640px){.foot-brand{grid-column:1/-1}}
.deckbtn{position:fixed;right:var(--gut);bottom:calc(env(safe-area-inset-bottom,0px) + 16px);z-index:55;display:flex;align-items:center;gap:10px;min-height:46px;padding:4px 14px 4px 4px;border:2px solid var(--navy);background:var(--white);color:var(--navy);font-size:13px;font-weight:700;box-shadow:4px 4px 0 var(--navy);translate:var(--tx,0px) var(--ty,0px);transition:translate .16s var(--ease),box-shadow .16s var(--ease),opacity .4s}
.deckbtn:active{translate:4px 4px;box-shadow:0 0 0 var(--navy)}
.vinyl{position:relative;width:36px;height:36px;border-radius:50%;background:var(--navy);animation:spinr 2.2s linear infinite;animation-play-state:paused}
.vinyl::before{content:'';position:absolute;inset:5px;border-radius:50%;border:1px solid var(--purple)}
.vinyl::after{content:'';position:absolute;inset:12px;background:var(--pink)}
.deckbtn.playing .vinyl{animation-play-state:running}
@keyframes spinr{to{rotate:360deg}}
@media(max-width:700px){.deckbtn .lbl{display:none}.deckbtn{padding-right:4px}}

/* ---------- overlays ---------- */
.room{position:fixed;inset:0;z-index:110;background:var(--cream);color:var(--navy);overflow-y:auto;overscroll-behavior:contain;translate:0 calc(100% + var(--sawh));visibility:hidden;transition:translate .8s var(--snap),visibility 0s .8s}
.room.open{translate:0;visibility:visible;transition:translate .8s var(--snap)}
.room-bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:calc(env(safe-area-inset-top,0px) + 14px) var(--gut) 14px;background:var(--cream);border-bottom:3px solid var(--navy)}
.room-bar .logo{--logo:var(--navy);--plate:transparent}
.room-hero{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,5vw,90px);align-items:center;padding-block:clamp(30px,6vh,70px) clamp(50px,9vh,100px)}
.room-hero .h2{font-size:clamp(38px,5.6vw,96px)}
.room-intro{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.ticks{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;font-weight:700}
.ticks li{display:flex;align-items:center;gap:12px}
.ticks li::before{content:'';width:12px;height:12px;background:var(--pink);border:2px solid var(--navy);rotate:45deg}
.form{display:flex;flex-direction:column;gap:16px;padding:clamp(20px,2.8vw,38px);border:3px solid var(--navy);background:var(--white);box-shadow:12px 12px 0 var(--purple)}
.form form{display:flex;flex-direction:column;gap:16px}
.form h3{font-family:var(--f-d);font-weight:400;text-transform:uppercase;font-size:clamp(20px,2vw,28px);line-height:1}
.f2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:14px}
.field{display:flex;flex-direction:column;gap:4px}
.field label,.legend{font-size:14px;font-weight:700}
.field input{height:48px;padding:0 12px;background:var(--cream);border:2px solid var(--navy);outline:0;transition:background .2s,box-shadow .2s}
.field input:focus{background:var(--white);box-shadow:4px 4px 0 var(--pink)}
.fine{font-size:13.5px;font-weight:500}
.sent{display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-height:340px;justify-content:center}
.room-sec{padding-block:clamp(40px,8vh,90px);border-top:3px solid var(--navy)}
.room-sec .h3{font-family:var(--f-d);font-weight:400;text-transform:uppercase;font-size:clamp(28px,3.8vw,60px);line-height:.94;letter-spacing:-.02em;text-wrap:balance}
.room-sec>.aside{margin-top:14px}
.rows{display:flex;flex-direction:column;margin-top:clamp(22px,4vh,44px);border-top:3px solid var(--navy)}
.row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr);gap:8px 30px;align-items:baseline;padding:20px 0;border-bottom:3px solid var(--navy);transition:padding .4s var(--ease),background .25s}
@media(hover:hover){.row:hover{padding-inline:18px;background:var(--pink)}}
.row b{font-family:var(--f-d);font-weight:400;text-transform:uppercase;font-size:clamp(17px,1.7vw,24px);line-height:1.08}
.row span{font-weight:500}
.calc{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,5vw,80px);align-items:center;margin-top:clamp(22px,4vh,44px)}
.calc-n{font-family:var(--f-d);font-size:clamp(64px,9vw,150px);line-height:.9;font-variant-numeric:tabular-nums}
.range{-webkit-appearance:none;appearance:none;width:100%;height:44px;margin:14px 0 6px;background:transparent;touch-action:pan-y}
.range::-webkit-slider-runnable-track{height:6px;background:var(--navy)}
.range::-moz-range-track{height:6px;background:var(--navy)}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-12px;background:var(--pink);border:3px solid var(--navy);box-shadow:4px 4px 0 var(--navy)}
.range::-moz-range-thumb{width:26px;height:26px;border:3px solid var(--navy);border-radius:0;background:var(--pink);box-shadow:4px 4px 0 var(--navy)}
.outs{display:flex;flex-direction:column;border-top:3px solid var(--navy)}
.out{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:3px solid var(--navy)}
.out div{min-width:0}
.out b{display:block;font-weight:700}
.out small{font-size:14px;font-weight:500}
.out strong{font-family:var(--f-d);font-weight:400;font-size:clamp(24px,3vw,46px);white-space:nowrap;font-variant-numeric:tabular-nums}
.guar{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,4vw,60px);align-items:center}
.guar-n{display:grid;place-items:center;width:clamp(130px,17vw,250px);aspect-ratio:1;background:var(--pink);border:3px solid var(--navy);box-shadow:10px 10px 0 var(--navy);font-family:var(--f-d);font-size:clamp(64px,9vw,140px);line-height:1;rotate:-5deg}
.guar-copy{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:18px;margin-top:clamp(22px,4vh,44px)}
.way{display:flex;flex-direction:column;gap:16px;justify-content:space-between;min-height:150px;padding:18px;border:3px solid var(--navy);background:var(--white);box-shadow:8px 8px 0 var(--navy)}
.way h4{font-family:var(--f-d);font-weight:400;text-transform:uppercase;font-size:22px}
.way p{font-weight:700;overflow-wrap:anywhere;user-select:all}
.way .btn{align-self:flex-start}
.faq{margin-top:clamp(22px,4vh,44px);border-top:3px solid var(--navy)}
.faq-i{border-bottom:3px solid var(--navy)}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;min-height:70px;padding:14px 0;text-align:left;font-family:var(--f-d);text-transform:uppercase;font-size:clamp(15px,1.5vw,21px);line-height:1.15;transition:padding .35s var(--ease)}
@media(hover:hover){.faq-q:hover{padding-left:12px}}
.faq-x{position:relative;flex-shrink:0;width:34px;height:34px;border:2px solid var(--navy);background:var(--white);transition:rotate .45s var(--ease),background .25s}
.faq-x::before,.faq-x::after{content:'';position:absolute;left:7px;right:7px;top:14px;height:3px;background:var(--navy)}
.faq-x::after{rotate:90deg;transition:rotate .45s var(--ease)}
.faq-i.open .faq-x{rotate:180deg;background:var(--pink)}
.faq-i.open .faq-x::after{rotate:0deg}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.faq-i.open .faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
.faq-a p{max-width:70ch;padding-bottom:20px;font-weight:500}
.room-end{padding-block:clamp(40px,8vh,90px) 110px;border-top:3px solid var(--navy)}
@media(max-width:860px){.room-hero,.calc,.guar{grid-template-columns:minmax(0,1fr)}.row{grid-template-columns:minmax(0,1fr)}}

/* Signal keeps its own product look inside the room */
.sg{--sgbg:#0c0913;--sgs:#191321;--sgr:#221b30;--sgl:#372d45;--sgm:#b1a6c0;--sgi:#faf6ff;--tone:#bb85ff;font-family:'Space Grotesk',var(--f-b);margin-top:clamp(22px,4vh,44px);padding:clamp(20px,3vw,44px);border-radius:28px;background:var(--sgbg);border:1px solid var(--sgl);color:var(--sgi);display:flex;flex-direction:column;gap:clamp(18px,3vh,30px);box-shadow:14px 14px 0 var(--navy)}
.sg-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sg-logo{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:27px;letter-spacing:-.02em}
.sg-logo svg{color:#bb85ff}
.sg-pill{padding:8px 14px;border-radius:999px;border:1px solid var(--sgl);background:var(--sgs);font-size:13px;font-weight:500;color:var(--sgm)}
.sg-body{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(20px,4vw,60px);align-items:center}
.sg-h{font-weight:700;font-size:clamp(30px,4.4vw,68px);line-height:1;letter-spacing:-.035em;text-wrap:balance}
.sg-sub{margin-top:14px;color:var(--sgm);font-size:clamp(16px,1.4vw,20px);max-width:46ch;font-family:var(--f-b)}
.sg-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:clamp(18px,3vh,30px)}
.sg-tile{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-height:84px;padding:14px 16px;border-radius:16px;border:1px solid var(--sgl);background:var(--sgs);color:var(--sgi);text-align:left;transition:border-color .3s,background .3s,translate .4s var(--ease)}
.sg-tile b{font-size:30px;font-weight:700;line-height:1;color:var(--tone)}
.sg-tile span{font-size:14px;font-weight:500;color:var(--sgi)}
.sg-tile.on{border-color:var(--tone);background:var(--sgr);translate:0 -3px}
@media(hover:hover){.sg-tile:hover{border-color:var(--tone)}}
.sg-phone{position:relative;justify-self:center;width:min(100%,350px);padding:14px 16px 18px;border-radius:34px;border:1px solid var(--sgl);background:#100d19;rotate:2deg}
.sg-bar{display:flex;justify-content:space-between;font-size:12px;font-weight:500;color:var(--sgm);padding:2px 6px 12px}
.sg-card{display:flex;flex-direction:column;gap:12px;min-height:290px;transition:opacity .25s,translate .4s var(--ease)}
.sg-card.swap{opacity:0;translate:0 12px}
.sg-agent{display:flex;align-items:center;gap:10px}
.sg-agent i{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--tone);transition:background .5s}
.sg-agent b{display:block;font-size:16px;font-weight:700;line-height:1.15}
.sg-agent small{font-size:12px;color:var(--sgm)}
.sg-ai{margin-left:auto;font-size:11px;font-weight:700;color:var(--sgm);border:1px solid var(--sgl);border-radius:999px;padding:4px 8px;white-space:nowrap}
.sg-q{align-self:flex-end;max-width:88%;padding:10px 14px;border-radius:16px 16px 4px 16px;background:var(--sgr);font-size:14px;font-weight:500}
.sg-a{padding:12px 14px;border-radius:16px 16px 16px 4px;border:1px solid var(--sgl);font-size:14px;line-height:1.45;font-family:var(--f-b)}
.sg-num{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:auto;padding:12px 14px;border-radius:16px;background:var(--sgs)}
.sg-num small{font-size:12px;color:var(--sgm)}
.sg-num strong{font-size:34px;font-weight:700;letter-spacing:-.03em;color:var(--tone);transition:color .5s}
.sg-fine{font-size:13px;color:var(--sgm);font-family:var(--f-b);max-width:84ch}
.sg-link{align-self:flex-start;display:inline-flex;gap:8px;align-items:center;min-height:48px;padding:0 22px;border-radius:999px;background:#bb85ff;color:#0c0913;font-weight:700;font-size:15px;transition:scale .2s,background .3s}
.sg-link:active{scale:.95}
@media(hover:hover){.sg-link:hover{background:#faf6ff}}
@media(max-width:860px){.sg-body{grid-template-columns:minmax(0,1fr)}.sg-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.sg-phone{rotate:0deg}}

/* cart drawer, lightbox, toast */
.scrim{position:fixed;inset:0;z-index:118;background:rgba(17,26,55,.55);opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}
.scrim.open{opacity:1;visibility:visible;transition:opacity .4s}
.cart{position:fixed;right:0;top:0;bottom:0;z-index:120;width:min(460px,100%);display:flex;flex-direction:column;background:var(--cream);color:var(--navy);border-left:3px solid var(--navy);translate:104% 0;visibility:hidden;transition:translate .6s var(--snap),visibility 0s .6s}
.cart.open{translate:0;visibility:visible;transition:translate .6s var(--snap)}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top,0px) + 18px) 20px 18px;border-bottom:3px solid var(--navy);background:var(--pink)}
.cart-head h2{font-family:var(--f-d);font-weight:400;text-transform:uppercase;font-size:24px}
.cart-list{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:6px 20px}
/* 8 Oct (Jos): a short screen scrolls the whole drawer, so everything under Checkout can be reached */
.cart{overflow-y:auto;overscroll-behavior:contain}
.cart-list{flex:1 1 auto;min-height:min(30vh,200px)}
.cart-head,.cart-foot{flex:none}
.pvbar .cart-foot{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 84px)}
.cart-empty{padding:40px 0;font-weight:500}
.ci{display:grid;grid-template-columns:70px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 0;border-bottom:3px solid var(--navy);animation:ci .5s var(--pop)}
@keyframes ci{from{opacity:0;translate:30px 0}}
.ci img{width:70px;height:96px;object-fit:contain}
.ci b{display:block;font-weight:700;line-height:1.2}
.ci small{font-size:13px;font-weight:500}
.qty{display:inline-flex;align-items:center;margin-top:8px;border:2px solid var(--navy);background:var(--white)}
.qty button{width:32px;height:32px;font-weight:700}
@media(hover:hover){.qty button:hover{background:var(--pink)}}
.qty span{min-width:28px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.ci-p{font-family:var(--f-d);font-size:19px;font-variant-numeric:tabular-nums}
.cart-foot{display:flex;flex-direction:column;gap:14px;padding:18px 20px calc(env(safe-area-inset-bottom,0px) + 24px);border-top:3px solid var(--navy)}
.cart-sum{display:flex;justify-content:space-between;align-items:baseline;font-weight:700}
.cart-sum b{font-family:var(--f-d);font-weight:400;font-size:34px;font-variant-numeric:tabular-nums}
.box{position:fixed;inset:0;z-index:130;display:grid;place-items:center;padding:24px;background:rgba(17,26,55,.94);opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}
.box.open{opacity:1;visibility:visible;transition:opacity .4s}
.box img{max-height:calc(100vh - 130px);max-width:100%;width:auto;border:3px solid var(--cream);box-shadow:14px 14px 0 var(--pink);scale:.9;rotate:-2deg;transition:scale .6s var(--pop),rotate .6s var(--pop)}
.box.open img{scale:1;rotate:0deg}
.box .sq{position:absolute;right:20px;top:calc(env(safe-area-inset-top,0px) + 20px)}
.box p{position:absolute;left:0;right:0;bottom:22px;text-align:center;font-family:var(--f-d);text-transform:uppercase;font-size:14px;color:var(--cream)}
.toast{position:fixed;left:50%;top:calc(var(--top) + 6px);z-index:140;translate:-50% -30px;padding:11px 18px;background:var(--navy);color:var(--cream);border:2px solid var(--cream);box-shadow:5px 5px 0 var(--pink);font-size:14px;font-weight:700;opacity:0;pointer-events:none;transition:opacity .3s,translate .45s var(--pop);white-space:nowrap;max-width:calc(100vw - 32px);overflow:hidden;text-overflow:ellipsis}
.toast.show{opacity:1;translate:-50% 0}
.flyer{position:fixed;z-index:150;width:84px;pointer-events:none;left:0;top:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important}
}

/* reduced motion: the wheel becomes a plain grid of cards and nothing tumbles */
.rm .wheel{height:auto;padding:calc(var(--top) + 30px) var(--gut) 90px}
.rm .wheel-pin{position:relative;height:auto;overflow:visible;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr));gap:30px;pointer-events:auto}
.rm .wheel-head,.rm .wcard{position:static;width:auto;margin:0;transform:none}
.rm .wheel-head{grid-column:1/-1;text-align:left;margin-bottom:10px}
.rm .wheel-dots{display:none}
.rm .hero{height:220vh}

/* ================= scenes: every coffee gets its own world ================= */
html,body{overflow-x:clip}
.scene,.front{position:absolute;inset:0;display:none;pointer-events:none}
.scene{overflow:hidden}
.scene.on,.front.on{display:block}
.el{position:absolute;translate:calc(var(--px,0) * var(--d,10) * 1px) calc(var(--py,0) * var(--d,10) * 1px)}
.el-in{transform:scale(0) rotate(-14deg);transition:transform .2s ease-in}
.pop .el-in{transform:none;transition:transform .6s var(--pop) var(--dl,0s)}
.el img,.fly img{display:block;width:100%;height:auto;filter:drop-shadow(5px 6px 0 rgba(17,26,55,.2))}
.fly{position:absolute;left:0;animation:flyx var(--t,18s) linear var(--w,0s) infinite;will-change:transform}
@keyframes flyx{0%{transform:translateX(var(--from,-40vw))}62%,100%{transform:translateX(var(--to,112vw))}}
@keyframes drift{from{transform:translateX(-24vw)}to{transform:translateX(112vw)}}
@keyframes floaty{0%,100%{transform:translateY(-8px) rotate(-2.5deg)}50%{transform:translateY(8px) rotate(2.5deg)}}
@keyframes sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3.5deg)}}
@keyframes swing{0%,100%{transform:rotate(8deg)}50%{transform:rotate(-8deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes thump{0%,100%{transform:scale(1)}9%{transform:scale(1.05)}32%{transform:scale(1)}}
@keyframes bobb{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-9px) rotate(-3deg)}}
@keyframes tumble{0%,100%{transform:rotate(-14deg) translateY(-10px)}50%{transform:rotate(16deg) translateY(14px)}}
@keyframes wavex{to{transform:translateX(-20vw)}}
@keyframes twinkle{0%,100%{scale:.3;opacity:.35}50%{scale:1;opacity:1}}
@keyframes zap{0%{transform:translateX(-70vw)}9%,100%{transform:translateX(170vw)}}
@keyframes diag{0%{transform:translate(-32vw,96vh)}42%,100%{transform:translate(126vw,-12vh)}}
@keyframes rise{0%{transform:translateY(112vh)}46%,100%{transform:translateY(-80vh)}}
@keyframes hit{from{transform:scale(1.3) rotate(-4deg)}}
.cloud{position:absolute;left:0;width:15vw;fill:#fff;stroke:var(--navy);stroke-width:3;animation:drift 80s linear infinite;overflow:visible}
.cloud.c1{top:calc(var(--top) + 5vh);animation-delay:-22s}
.cloud.c2{top:calc(var(--top) + 23vh);width:10vw;animation-duration:110s;animation-delay:-70s}
.cloud.c3{top:calc(var(--top) + 40vh);width:12vw;animation-duration:95s;animation-delay:-48s}

/* People Everyday: the beach */
.pe-sun{right:5vw;top:calc(var(--top) + 1vh);width:min(25vh,17vw);--d:6}
.pe-sun img{animation:swing 9s ease-in-out infinite}
.pe-gull-a{top:calc(var(--top) + 8vh);width:min(17vh,13vw);--t:21s;--w:-5s}
.pe-gull-b{top:calc(var(--top) + 27vh);width:min(10vh,8vw);--t:31s;--w:-19s}
.pe-gull-a img,.pe-gull-b img,.pp-gull img{animation:bobb 1.3s ease-in-out infinite}
.pe-palm-l{left:-5vw;bottom:3vh;width:min(46vh,30vw);--d:14}
.pe-palm-r{right:-6vw;bottom:9vh;width:min(33vh,22vw);--d:9}
.pe-palm-l img,.pe-palm-r img{transform-origin:50% 100%;animation:sway 6s ease-in-out infinite}
.pe-palm-r .el-in{scale:-1 1}
.pe-palm-r img{animation-duration:7.5s}
.sea{position:absolute;left:0;right:0;bottom:0;height:23vh}
.wave{position:absolute;left:0;bottom:0;width:240vw;height:100%;stroke:var(--navy);stroke-width:3;will-change:transform}
.wave path{vector-effect:non-scaling-stroke}
.wave.w-back{fill:#2FA6C2;animation:wavex 8s linear infinite}
.wave.w-front{fill:#73D2E4;height:62%;animation:wavex 5s linear infinite reverse}
.pe-surf{bottom:7vh;width:min(25vh,18vw);--t:27s;--w:-8s;--from:-30vw;--to:115vw}
.pe-surf img{animation:bobb 2.2s ease-in-out infinite}

/* No Sleep Till Brooklyn: the street */
.wire{position:absolute;left:-2vw;right:-2vw;top:calc(var(--top) + 3vh);height:3px;background:var(--navy);rotate:-1.6deg}
.nsb-sneak{right:21vw;top:calc(var(--top) + 1.6vh);width:min(13vh,9vw);--d:8}
.nsb-sneak img,.pp-sneak img{transform-origin:50% 0;animation:swing 3.4s ease-in-out infinite}
.nsb-sign{left:2.5vw;top:calc(var(--top) + 7vh);width:min(25vh,17vw);--d:7}
.nsb-sign img{transform-origin:50% 100%;animation:sway 8s ease-in-out infinite}
.nsb-bridge{left:50%;bottom:10vh;width:min(60vw,112vh);margin-left:calc(min(60vw,112vh) / -2);--d:3}
.nsb-train{bottom:27vh;width:min(60vw,96vh);--t:15s;--w:-4s;--from:-70vw;--to:112vw}
.nsb-box{left:3.5vw;bottom:9vh;width:min(40vh,27vw);--d:13}
.nsb-box img{animation:thump .698s ease-out infinite}
.nsb-bboy{right:7vw;bottom:8vh;width:min(27vh,18vw);--d:12}
.nsb-bboy img{animation:bobb .698s ease-in-out infinite}
.nsb-vinyl-a{left:24vw;top:calc(var(--top) + 10vh);width:min(13vh,9vw);--d:16}
.nsb-vinyl-b{right:25vw;top:calc(var(--top) + 27vh);width:min(9vh,6vw);--d:20}
.nsb-vinyl-a img{animation:spin 3.2s linear infinite}
.nsb-vinyl-b img{animation:spin 2.4s linear infinite reverse}
.nsb-cab{bottom:1.5vh;width:min(27vh,19vw);--t:19s;--w:-11s}
.nsb-cab img,.pp-cab img,.pp-kombi img,.biz-vanfly img{animation:bobb .5s ease-in-out infinite}

/* Hyperdrive: deep space */
.stars{position:absolute;inset:0}
.stars i{position:absolute;width:var(--s,10px);height:var(--s,10px);background:var(--c,#F0F0EA);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation:twinkle var(--t,4s) ease-in-out var(--w,0s) infinite}
.laser{position:absolute;left:0;width:30vw;height:6px;background:#A6F53B;outline:2px solid var(--navy);rotate:-22deg;transform-origin:0 50%;animation:zap 6s linear infinite}
.laser.l1{top:78vh}
.laser.l2{top:104vh;animation-delay:-2.3s;background:var(--pink)}
.laser.l3{top:56vh;animation-delay:-4.1s;width:18vw}
.hyd-planet{left:-3vw;top:calc(var(--top) + 1vh);width:min(52vh,34vw);--d:5}
.hyd-planet img{animation:floaty 11s ease-in-out infinite}
.hyd-moon{right:4vw;bottom:13vh;width:min(22vh,15vw);--d:8}
.hyd-moon img{animation:floaty 9s ease-in-out infinite}
.hyd-sat{right:27vw;top:calc(var(--top) + 3vh);width:min(15vh,10vw);--d:18}
.hyd-sat img,.pp-sat img{animation:tumble 15s ease-in-out infinite}
.hyd-ufo{left:9vw;bottom:9vh;width:min(26vh,17vw);--d:12}
.hyd-ufo img{animation:floaty 5s ease-in-out infinite}
.hyd-astro{right:8vw;top:calc(var(--top) + 11vh);width:min(34vh,22vw);--d:14}
.hyd-astro img{animation:tumble 17s ease-in-out infinite}
.hyd-ship{top:0;width:min(30vh,20vw);animation:diag 10s linear -3s infinite}
.hyd-rocket{left:81vw;top:0;width:min(9vh,6vw);animation:rise 15s linear -6s infinite}
.hyd-comet{top:calc(var(--top) + 31vh);width:min(22vh,16vw);rotate:14deg;--t:23s;--w:-13s}

/* flavour stickers float in front of the bag */
.hero-front{position:sticky;top:0;height:100vh;height:100svh;margin-top:-100vh;margin-top:-100svh;z-index:7;pointer-events:none;overflow:hidden}
.front .el img{animation:floaty 6s ease-in-out infinite}
.front .fl-a{left:26vw;top:54vh;width:min(20vh,15vw);rotate:-10deg;--d:26}
.front .fl-b{left:62.5vw;top:22vh;width:min(18vh,13vw);rotate:9deg;--d:30}
.front .fl-c{left:27.5vw;top:20vh;width:min(14vh,10vw);rotate:-6deg;--d:22}
.front .fl-b img{animation-duration:7.5s}
.front .fl-c img{animation-duration:5s}
.front.sc-pe .fl-b{width:min(10vh,7.5vw);left:63.5vw;top:19vh}
.front.sc-nsb .fl-b{width:min(11vh,8vw);left:63.5vw;top:19vh}
.switch{position:relative}
.perch{position:absolute;right:64px;bottom:calc(100% - 8px);width:clamp(60px,9vh,84px);pointer-events:none}
.perch img{display:none;width:100%;filter:drop-shadow(3px 4px 0 rgba(17,26,55,.25))}
[data-blend="0"] .perch .pc0,[data-blend="1"] .perch .pc1,[data-blend="2"] .perch .pc2{display:block;animation:hit .45s var(--pop)}

/* a strip of each scene inside its blend panel */
.p-scene{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.p-scene .cloud.c1{top:15vh}.p-scene .cloud.c2{top:34vh}
.pp-gull{top:17vh;width:min(12vh,9vw);--t:26s;--w:-9s}
.pp-wave{left:-3vw;bottom:-3vh;width:min(30vh,20vw);--d:0}
.pp-wave img{animation:floaty 7s ease-in-out infinite}
.pp-kombi{bottom:.6vh;width:min(24vh,17vw);--t:27s;--w:-4s}
.pp-husky{bottom:1vh;width:min(13vh,9vw);--t:21s;--w:-15s}
.p-scene .wire{top:calc(var(--top) + 1vh)}
.pp-sneak{left:44vw;top:calc(var(--top) + .4vh);width:min(11vh,8vw);--d:0}
.pp-hydrant{left:.5vw;bottom:0;width:min(17vh,11vw);--d:0}
.pp-cab{bottom:.8vh;width:min(24vh,17vw);--t:20s;--w:-6s}
.pp-train{display:none}
.pp-sat{left:36vw;top:calc(var(--top) + 1vh);width:min(11vh,8vw);--d:0}
.pp-moon{left:1vw;bottom:2vh;width:min(15vh,10vw);--d:0}
.pp-moon img{animation:floaty 9s ease-in-out infinite}
.pp-ship{top:0;width:min(22vh,15vw);animation:diag 13s linear -5s infinite}
.pp-comet{top:22vh;width:min(18vh,13vw);rotate:14deg;--t:25s;--w:-2s}
.p-scene .laser.l1{top:70vh}.p-scene .laser.l2{top:96vh}
.p-bag .pf{z-index:2;--d:0}
.pf img{animation:floaty 6.5s ease-in-out infinite}
.pf-a{left:-2%;bottom:7%;width:34%;rotate:-12deg}
.pf-b{right:0;top:9%;width:30%;rotate:10deg}
.pf-c{right:3%;bottom:3%;width:27%;rotate:8deg}
.p-pe .pf-b,.p-nsb .pf-b{width:17%}
.pf-b img{animation-duration:8s}
.buy{position:relative}
.buy-perch{position:absolute;right:16px;bottom:calc(100% - 9px);width:clamp(58px,8.5vh,80px);filter:drop-shadow(3px 4px 0 rgba(17,26,55,.25));animation:bobb 2.6s ease-in-out infinite;transform-origin:50% 100%}

/* characters for the other rooms */
.deco{position:absolute;pointer-events:none;filter:drop-shadow(5px 6px 0 rgba(17,26,55,.22))}
.d-beans{right:3vw;bottom:5vh;width:min(22vh,16vw);rotate:8deg;animation:floaty 7s ease-in-out infinite}
.sub,.biz,.foot{overflow:visible;clip-path:inset(calc(var(--sawh) * -1 - 2px) 0 0 0)}
.sub-parcel{top:13vh;width:min(19vh,14vw);--t:22s;--w:-3s}
.sub-parcel img{animation:bobb 1.1s ease-in-out infinite}
.biz-vanfly{top:2.5vh;width:min(20vh,15vw);--t:24s;--w:-2s}
.biz-card{position:relative}
.d-barista{left:clamp(-46px,-2.4vw,-14px);top:clamp(-120px,-11vh,-60px);width:clamp(84px,13vh,128px);rotate:-6deg;z-index:2}
.d-machine{right:clamp(-34px,-2vw,-10px);bottom:clamp(-52px,-4vh,-20px);width:min(250px,26%);rotate:4deg;z-index:2}
.biz .wrap{padding-top:clamp(40px,7vh,80px)}

/* ================= loader: the catchphrases, then the sound choice ================= */
.loader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(18px,4vh,40px);padding:var(--gut);background:var(--lb,var(--navy));color:var(--lf,var(--pink));text-align:center}
.ld-word{font-family:var(--f-d);text-transform:uppercase;font-size:min(13.5vw,25vh);line-height:.88;letter-spacing:-.02em;max-width:11ch;text-wrap:balance}
.ld-word.hit{animation:hit .32s var(--pop)}
.ld-enter{display:flex;flex-wrap:wrap;gap:14px 18px;justify-content:center;align-items:center;animation:hit .4s var(--pop)}
.ld-enter p{flex-basis:100%;margin-top:6px;color:var(--cream);font-weight:500;font-size:15px}
.ld-foot{position:absolute;left:var(--gut);right:var(--gut);bottom:calc(env(safe-area-inset-bottom,0px) + 18px);display:flex;align-items:flex-end;justify-content:space-between}
.ld-foot .logo{--logo:currentColor;--plate:transparent}.ld-foot .logo::after{transition:none}
.ld-foot .ld-num{font-size:clamp(30px,5vw,64px);line-height:1}

/* ================= the music player ================= */
.player{position:fixed;right:var(--gut);bottom:calc(env(safe-area-inset-bottom,0px) + 16px);z-index:55;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.pl-mini{display:flex;align-items:center;gap:10px;min-height:48px;padding:4px 14px 4px 4px;border:2px solid var(--navy);background:var(--white);color:var(--navy);box-shadow:4px 4px 0 var(--navy);text-align:left;translate:var(--tx,0px) var(--ty,0px);transition:translate .16s var(--ease),box-shadow .16s var(--ease),background .2s}
.pl-mini:active{translate:4px 4px;box-shadow:0 0 0 var(--navy)}
@media(hover:hover){.pl-mini:hover{background:var(--pink)}}
.pl-mini-t{display:flex;flex-direction:column;line-height:1.15;max-width:170px}
.pl-mini-t b{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-mini-t small{font-size:11.5px;font-weight:500}
.pl-eq{display:none;align-items:flex-end;gap:2px;height:16px}
.pl-eq i{width:4px;height:14px;background:var(--navy);transform:scaleY(.29);transform-origin:50% 100%}
.player.playing .pl-eq{display:flex}
.player.playing .pl-eq i{animation:eq .7s ease-in-out infinite}
.pl-eq i:nth-child(2){animation-delay:-.2s}.pl-eq i:nth-child(3){animation-delay:-.45s}.pl-eq i:nth-child(4){animation-delay:-.1s}
.player.playing .vinyl{animation-play-state:running}
.pl-card{width:min(320px,calc(100vw - 2 * var(--gut)));padding:14px;border:3px solid var(--navy);background:var(--white);color:var(--navy);box-shadow:8px 8px 0 var(--pink);order:-1;transform-origin:100% 100%;animation:hit .3s var(--pop)}
.pl-top{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;font-weight:700}
.pl-x{display:grid;place-items:center;width:30px;height:30px;border:2px solid var(--navy);background:var(--cream)}
@media(hover:hover){.pl-x:hover{background:var(--pink)}}
.pl-title{font-family:var(--f-d);text-transform:uppercase;font-size:19px;line-height:1.05;margin:8px 0 12px}
.pl-bar{position:relative;height:16px;border:2px solid var(--navy);background:var(--cream);cursor:pointer;touch-action:none}
.pl-bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--pink);border-right:2px solid var(--navy)}
.pl-time{display:flex;justify-content:space-between;font-size:12px;font-weight:600;margin-top:5px;font-variant-numeric:tabular-nums}
.pl-ctl{display:flex;justify-content:center;gap:12px;margin:10px 0 14px}
.pl-ctl .sq{width:46px;height:46px;box-shadow:4px 4px 0 var(--navy)}
.pl-ctl .sq:active{translate:4px 4px;box-shadow:0 0 0 var(--navy)}
.pl-ctl .pl-play{width:60px;background:var(--pink)}
.pl-play .i-pause{display:none}
.player.playing .pl-play .i-play{display:none}
.player.playing .pl-play .i-pause{display:block}
.pl-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--navy);max-height:min(222px,30vh);overflow-y:auto;overscroll-behavior:contain}
.pl-list button{display:flex;align-items:baseline;gap:10px;width:100%;min-height:37px;padding:7px 6px;border-bottom:1px solid rgba(17,26,55,.22);text-align:left;font-size:14px;font-weight:600;color:var(--navy)}
.pl-list button span:first-child{width:1.3em;font-variant-numeric:tabular-nums;opacity:.6}
.pl-list button span:last-child{margin-left:auto;font-size:12px;font-weight:500;font-variant-numeric:tabular-nums}
.pl-list button[aria-current="true"]{background:var(--pink)}
@media(hover:hover){.pl-list button:hover{background:var(--cream)}.pl-list button[aria-current="true"]:hover{background:var(--pink)}}
@media(max-width:700px){.pl-mini-t{display:none}.pl-mini{padding-right:4px}.player.playing .pl-mini{padding-right:10px}}

/* a pop of confetti when a button is pressed */
.bit{position:fixed;left:0;top:0;z-index:160;width:11px;height:11px;pointer-events:none;border:2px solid var(--navy);background:var(--pink)}

/* scenes on phones and tall tablets: fewer pieces, pushed to the corners */
@media(max-width:700px),(max-aspect-ratio:1/1){
  .cloud{width:26vw}.cloud.c2{width:18vw}.cloud.c3{display:none}
  .pe-sun{right:2vw;top:calc(var(--top) - 1vh);width:25vw}
  .pe-palm-l{left:-17vw;bottom:15vh;width:54vw}
  .pe-palm-r{display:none}
  .pe-gull-a{width:22vw}.pe-gull-b{width:13vw}
  .sea{height:17vh}
  .pe-surf{width:30vw;bottom:5vh}
  .nsb-sign{left:-5vw;top:calc(var(--top) + 1vh);width:27vw}
  .nsb-sneak{right:9vw;width:15vw}
  .nsb-bridge{width:130vw;margin-left:-65vw;bottom:19vh}
  .nsb-train{width:110vw;bottom:33vh;--from:-120vw}
  .nsb-box{left:-13vw;bottom:auto;top:calc(var(--top) + 34vh);width:40vw}
  .nsb-bboy{right:-8vw;bottom:auto;top:calc(var(--top) + 27vh);width:30vw}
  .nsb-vinyl-a{left:auto;right:30vw;top:calc(var(--top) + 1vh);width:15vw}
  .nsb-vinyl-b{display:none}
  .nsb-cab{width:32vw}
  .hyd-planet{left:-17vw;top:calc(var(--top) - 2vh);width:62vw}
  .hyd-moon{right:-7vw;bottom:25vh;width:27vw}
  .hyd-sat{display:none}
  .hyd-ufo{left:-7vw;bottom:23vh;width:31vw}
  .hyd-astro{right:-9vw;top:calc(var(--top) + 6vh);width:42vw}
  .hyd-ship{width:32vw}.hyd-rocket{width:9vw}.hyd-comet{width:26vw}
  .front .fl-a{left:-3vw;top:52vh;width:27vw}
  .front .fl-b,.front.sc-pe .fl-b,.front.sc-nsb .fl-b{left:auto;right:-2vw;top:calc(var(--top) + 30vh);width:24vw}
  .front.sc-pe .fl-b,.front.sc-nsb .fl-b{width:15vw;right:1vw}
  .front .fl-c{display:none}
  .pp-gull{width:20vw}.pp-wave{width:38vw}.pp-kombi{width:34vw}.pp-husky{width:19vw}
  .pp-sneak{left:60vw;width:15vw;top:1vh}.p-scene .wire{top:2vh}
  .pp-hydrant{width:19vw}.pp-cab{width:34vw}
  .pp-sat{left:62vw;top:3vh;width:17vw}.pp-moon{width:22vw}.pp-ship{width:30vw}.pp-comet{width:26vw}
  .d-beans{width:26vw;bottom:2vh}
  .sub-parcel{width:26vw;top:3vh}.biz-vanfly{width:30vw;top:1.5vh}
  .d-machine{width:38%}
}
@media(max-width:980px){.p-scene .cloud{top:8vh}.pf-a{width:30%}.buy-perch{right:10px}}
.rm .fly,.rm .laser,.rm .cloud{animation:none;display:none}
.rm .el img,.rm .front .el img,.rm .pf img,.rm .buy-perch,.rm .deco{animation:none}

.front.sc-nsb .fl-c{left:29vw;top:36vh}
.ld-word .hl{margin-top:.08em}
.hyd-sat{right:23vw;top:auto;bottom:29vh;width:min(13vh,9vw)}

.d-beans{right:9vw;bottom:9vh}
.wheel-pin .el{--d:0}
.wh-a{left:5vw;bottom:8vh;width:min(24vh,16vw);rotate:-10deg}
.wh-b{right:11vw;bottom:13vh;width:min(22vh,15vw);rotate:8deg}
.wh-c{left:20vw;bottom:30vh;width:min(11vh,7vw);rotate:12deg}
.wheel-pin .el img{animation:floaty 7s ease-in-out infinite}
.wh-b img{animation-duration:8.5s}
@media(max-width:700px),(max-aspect-ratio:1/1){.wh-a{left:-6vw;bottom:3vh;width:30vw}.wh-b{right:-4vw;bottom:14vh;width:28vw}.wh-c{display:none}}
.rm .wheel-pin .el{display:none}

.d-barista{left:auto;right:calc(45.5% - 34px);top:auto;bottom:calc(100% - 44px);rotate:4deg}
@media(max-width:860px){.d-barista{right:10px;bottom:calc(100% - 30px);width:84px}}

@media(max-width:700px),(max-aspect-ratio:1/1){
  .h-foot{left:84px;right:84px;max-width:none;text-align:center}
  .nudge{display:none}
}
@media(max-width:980px){
  .p-scene .cloud.c2{display:none}
  .p-grid{padding-top:calc(var(--sawh) + 56px)}
}

.room-intro{position:relative}
.room-machine{right:0;bottom:-18px;width:min(250px,38%);rotate:-4deg}
.room{overflow-x:hidden}
.room-van{top:calc(env(safe-area-inset-top,0px) + 86px);width:min(150px,26vw);z-index:4;animation:none;transform:translateX(-40vw)}
.room.open .room-van{animation:flyx 9s linear .5s 1 both}
@media(max-width:860px){.room-machine{position:static;width:min(220px,60%);margin-top:6px}}
.seg button{flex:1 1 auto}
@media(max-width:1240px) and (min-width:981px){.buy [data-seg="plan"] button{font-size:12px;padding:0 7px}.buy{padding:12px}}
.play{height:clamp(480px,92vh,880px)}
.play-type{justify-content:flex-start;padding-top:calc(var(--sawh) + 8vh)}
@media(max-width:700px){.play{height:clamp(520px,80vh,700px)}.play-type{padding-top:calc(var(--sawh) + 9vh)}}

/* ================= v5: full illustrated worlds, a looser system, more play ================= */
:root{--lime:#D2F55C}
/* the world is cut with the zigzag itself, so the illustration rises as one piece */
.world{inset:calc(var(--sawh) * -1) 0 0 0;translate:0 var(--rise,96%);clip-path:polygon(0 100%,0% calc(var(--sawh) * .56),6.25% 0,12.5% calc(var(--sawh) * .56),18.75% 0,25% calc(var(--sawh) * .56),31.25% 0,37.5% calc(var(--sawh) * .56),43.75% 0,50% calc(var(--sawh) * .56),56.25% 0,62.5% calc(var(--sawh) * .56),68.75% 0,75% calc(var(--sawh) * .56),81.25% 0,87.5% calc(var(--sawh) * .56),93.75% 0,100% calc(var(--sawh) * .56),100% 100%)}
.world::before{display:none}
.scene{inset:var(--sawh) 0 0 0;overflow:visible}
.plate{position:absolute;left:0;top:calc(var(--sawh) * -1);width:100%;height:calc(100% + var(--sawh));object-fit:cover;object-position:50% 58%;max-width:none}
.world-wipe{z-index:4}
.world-wipe.out{opacity:0;transition:opacity .45s}
.w-ghost{display:none}
.lay{position:absolute;pointer-events:none;transform:translateY(112%);transition:transform .25s ease-in}
.pop .lay{transform:none;transition:transform .95s var(--ease) var(--dl,0s)}
.lay img{display:block;width:100%;height:auto;max-width:none}
.lay.ground,.lay.surf{--w:max(var(--min,110vw),calc(var(--t) / (var(--r) * var(--b))));left:50%;width:var(--w);margin-left:calc(var(--w) / -2);bottom:calc(-1 * max(0px,var(--w) * var(--r) * var(--b) - var(--t)))}
.sc-pe .ground{--r:.3065;--b:.55;--t:29vh}
.sc-pe .surf{--r:.341;--b:1;--t:51vh;--min:112vw}
.sc-pe .surf img{animation:surfslide 8s ease-in-out infinite alternate}
@keyframes surfslide{from{transform:translate(-3.5vw,6px)}50%{transform:translate(0,-8px)}to{transform:translate(3.5vw,6px)}}
.sc-nsb .ground{--r:.4265;--b:.55;--t:25vh}
.sc-hyd .ground{--r:.428;--b:.38;--t:26vh}
.lay.corner-l{left:-3vw;bottom:6vh;height:88vh;transform:translateX(-112%)}
.lay.corner-r{right:-3vw;bottom:6vh;height:88vh;transform:translateX(112%)}
.lay.corner-l img,.lay.corner-r img{height:100%;width:auto}
/* scene pieces re-seated on the new worlds */
.pe-surf{bottom:35vh;width:min(24vh,17vw)}
.pe-palm-l{bottom:6vh}
.pe-palm-r{bottom:13vh}
.pe-pel{right:19vw;bottom:15vh;width:min(17vh,11vw);--d:16}
.pe-pel img{transform-origin:50% 100%;animation:sway 5s ease-in-out infinite}
.nsb-sign{left:21vw;top:auto;bottom:17vh;width:min(22vh,14vw)}
.nsb-box{left:5vw;bottom:8vh;width:min(36vh,24vw)}
.nsb-bboy{right:9vw;bottom:7vh}
.nsb-train{bottom:21vh;width:min(58vw,92vh)}
.nsb-vinyl-a{left:31vw;top:calc(var(--top) + 6vh)}
.sc-nsb .wire{top:calc(var(--top) + 5vh)}
.nsb-sneak{top:calc(var(--top) + 3.6vh);right:27vw}
.hyd-planet{top:calc(var(--top) + 20vh);left:-7vw;width:min(44vh,29vw)}
.hyd-moon{right:15vw;bottom:19vh;width:min(17vh,11vw)}
.hyd-ufo{left:13vw;bottom:15vh}
.hyd-astro{right:6vw;top:calc(var(--top) + 9vh)}
.hyd-sat{right:25vw;bottom:42vh}
/* a headline for each world, in its own lettering */
.shout{position:absolute;left:var(--gut);top:calc(var(--top) + 2.5vh);z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:.14em;margin:0;font-size:clamp(24px,3.4vw,56px);line-height:1;text-transform:uppercase}
.shout span{display:block;padding:.16em .3em .08em;border:3px solid var(--navy);background:var(--white);color:var(--navy);box-shadow:5px 5px 0 var(--navy);transform:scale(0) rotate(-14deg);transform-origin:0 60%;transition:transform .2s ease-in}
.pop .shout span{transform:rotate(-3deg);transition:transform .55s var(--pop) .2s}
.pop .shout span:nth-child(2){transform:rotate(1.5deg) translateX(.45em);transition-delay:.32s}
.sh-pe{font-family:'Luckiest Guy',var(--f-d);letter-spacing:.02em}
.sh-pe span{padding-top:.24em;background:var(--lime)}
.sh-pe span:nth-child(2){background:var(--white)}
.sh-nsb{font-family:'Permanent Marker',var(--f-d)}
.sh-nsb span{background:var(--navy);color:var(--cream);border-color:var(--cream);box-shadow:5px 5px 0 var(--pink)}
.sh-nsb span:nth-child(2){background:var(--pink);color:var(--navy);border-color:var(--navy);box-shadow:5px 5px 0 var(--navy)}
.sh-hyd{font-family:'Faster One',var(--f-d);text-transform:none;font-size:clamp(26px,3.8vw,62px)}
.sh-hyd span{background:var(--navy);color:var(--lime);border-color:var(--lime);box-shadow:5px 5px 0 var(--purple)}
/* poke a character, slap a sticker */
.tap{pointer-events:auto;cursor:pointer}
.poked{animation:poke .6s var(--ease) !important}
@keyframes poke{30%{transform:translateY(-30px) rotate(-10deg) scale(1.1)}62%{transform:translateY(0) rotate(6deg)}100%{transform:none}}
.perch{pointer-events:none}
.slaps{position:absolute;inset:var(--sawh) 0 0 0;z-index:3;overflow:hidden;pointer-events:none}
.slaps img{position:absolute;width:var(--s,120px);height:auto;translate:-50% -50%;rotate:var(--r,0deg);filter:drop-shadow(4px 5px 0 rgba(17,26,55,.28));animation:slapin .34s var(--pop);transition:opacity .4s,scale .4s}
.slaps img.bye{opacity:0;scale:.5}
@keyframes slapin{from{transform:scale(2.6);opacity:0}}
/* handwriting and doodles that draw themselves */
.note{font-family:'Permanent Marker',cursive;font-weight:400;font-size:clamp(15px,1.35vw,21px);line-height:1.1}
.doodle{flex:none;overflow:visible;fill:none;stroke:currentColor;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}
.doodle path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .7s var(--ease) .25s}
.doodle path+path{transition-delay:.9s;transition-duration:.3s}
[data-draw].in .doodle path{stroke-dashoffset:0}
[data-draw] .note{opacity:0;transition:opacity .3s 1.1s}
[data-draw].in .note{opacity:1}
.sw-note{position:absolute;left:calc(100% + 10px);bottom:30px;display:flex;align-items:flex-end;gap:2px;white-space:nowrap;rotate:-5deg;pointer-events:none;color:var(--white);filter:drop-shadow(2px 2px 0 var(--navy))}
.sw-note .note{padding:3px 9px;border:2px solid var(--navy);background:var(--white);color:var(--navy);filter:none;margin-bottom:22px}
.slap-hint{position:absolute;left:var(--gut);bottom:calc(var(--sawh) + 20px);margin:0;padding:5px 11px;border:2px solid var(--navy);background:var(--lime);color:var(--navy);font-size:15px;rotate:-3deg;pointer-events:none}
.betty-copy{position:relative}
.b-note{position:absolute;left:-118px;top:-58px;display:flex;align-items:flex-start;gap:2px;rotate:-6deg}
.b-note .note{margin-top:-14px}
.deck-wrap{position:relative}
.r-note{position:absolute;right:9%;bottom:calc(100% + 2px);display:flex;align-items:flex-start;gap:6px;color:var(--cream);rotate:3deg}
/* strips, tilt and tape */
.strip{display:inline-block;padding:.07em .16em .03em;line-height:.86;rotate:-2deg;background:var(--sc,var(--navy));color:var(--st,var(--cream))}
.st-pink{--sc:var(--pink);--st:var(--navy)}.st-lime{--sc:var(--lime);--st:var(--navy)}.st-cream{--sc:var(--cream);--st:var(--navy)}
.stack-strips{display:flex;flex-direction:column;align-items:flex-start;gap:.12em}
.stack-strips .strip:nth-child(2){rotate:1.6deg;margin-left:.45em}
.stack-strips .strip:nth-child(3){rotate:-1deg;margin-left:.1em}
.hl{rotate:-1.5deg}
.taped::after{content:'';position:absolute;left:50%;top:-16px;z-index:3;width:104px;height:30px;margin-left:-52px;background:var(--tape,rgba(210,245,92,.92));border-inline:2px dashed rgba(17,26,55,.3);rotate:-4deg;pointer-events:none}
.biz-card.taped::after{left:22%;--tape:rgba(255,105,174,.9)}
.betty .frame.taped::after{--tape:rgba(240,240,234,.9);top:-18px}
.wcard:nth-of-type(even).taped::after{rotate:5deg;left:60%}
/* blend panels: the ground of each world along the bottom */
.p-ghost{display:none}
/* each panel stands on a low strip of its own ground: whole objects, sitting on the floor, never cut off half way */
.panel{--pw:min(52vw,max(34vw,60vh))}
.p-strip{position:absolute;left:0;bottom:0;display:flex;width:max-content;transform:translateY(60%);transition:transform .25s ease-in}
.pop .p-strip{transform:none;transition:transform .9s var(--ease) .1s}
.p-strip img{display:block;flex:none;width:var(--pw);height:auto;max-width:none}
.p-strip img:nth-child(2){scale:-1 1}
.p-scene{z-index:0}.p-grid{z-index:2}
@media(min-width:981px) and (min-height:701px){.p-grid{padding-bottom:calc(var(--sawh) * .6 + 16px + 7vh)}}
@media(min-width:981px) and (max-height:700px){.p-strip{display:none}}
@media(max-width:980px){.panel{--pw:74vw}.p-grid{padding-bottom:calc(var(--sawh) + 22vw)}}
.rm .p-strip{transform:none}
.pp-kombi,.pp-husky,.pp-cab,.pp-bigfoot,.pp-rover{bottom:calc(var(--sawh) * .5)}
.pp-wave,.pp-hydrant,.pp-moon{display:none}
/* Betty is cooking */
.betty{--fh:clamp(150px,19vw,320px)}
.flames{position:absolute;left:0;right:0;bottom:0;height:var(--fh);overflow:hidden;pointer-events:none}
.fl-row{position:absolute;left:0;bottom:-7%;height:84%;display:flex;width:max-content}
.fl-row.fl-back{left:calc(var(--fh) * -1);height:97%;bottom:-9%;filter:saturate(.9) brightness(.86)}
.fl-row img{display:block;flex:none;height:100%;width:auto;max-width:none;transform-origin:50% 100%;animation:flick .9s ease-in-out infinite alternate}
.fl-row img:nth-child(even){scale:-1 1;animation-duration:.7s;animation-delay:-.35s}
.fl-back img{animation-duration:1.15s}
@keyframes flick{from{transform:scaleY(.9) skewX(-2.5deg)}to{transform:scaleY(1.04) skewX(2.5deg)}}
.betty .wrap{position:relative;z-index:1}
.betty .d-beans{z-index:2}
.betty.sec{padding-bottom:calc(var(--fh) * .8)}
/* subscribe: a spinning badge, the postie, and paint that drips into the next room */
.badge{position:absolute;left:-8%;bottom:-2%;z-index:4;display:grid;place-items:center;width:clamp(96px,11vw,150px);aspect-ratio:1;rotate:-10deg;pointer-events:none}
.badge i{position:absolute;inset:0;background:var(--lime);clip-path:polygon(50.0% 0.0%,59.1% 10.0%,71.7% 5.0%,75.6% 17.9%,89.1% 18.8%,86.9% 32.2%,98.7% 38.9%,91.0% 50.0%,98.7% 61.1%,86.9% 67.8%,89.1% 81.2%,75.6% 82.1%,71.7% 95.0%,59.1% 90.0%,50.0% 100.0%,40.9% 90.0%,28.3% 95.0%,24.4% 82.1%,10.9% 81.2%,13.1% 67.8%,1.3% 61.1%,9.0% 50.0%,1.3% 38.9%,13.1% 32.2%,10.9% 18.8%,24.4% 17.9%,28.3% 5.0%,40.9% 10.0%);animation:spin 16s linear infinite}
.badge b{position:relative;font-family:var(--f-d);font-weight:400;font-size:clamp(15px,1.75vw,25px);line-height:.95;text-align:center;text-transform:uppercase;color:var(--navy)}
.sub-rider{bottom:calc(clamp(50px,8vh,100px) + clamp(22px,3.2vw,50px) + 28px);width:min(16.5vh,13vw);--t:16s;--w:-9s}
.sub-rider img{animation:bobb .45s ease-in-out infinite}
.sub{z-index:1;clip-path:inset(calc(var(--sawh) * -1 - 2px) 0 -92px 0)}
.sub::after{content:'';position:absolute;left:0;right:0;top:calc(100% - 1px);height:84px;background:var(--pink);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='84' viewBox='0 0 420 84'%3E%3Cpath d='M0 0H420V20C410 20 404 26 404 36V58a12 12 0 0 1-24 0V34C380 24 372 20 362 20H330C320 20 316 26 316 34V44a9 9 0 0 1-18 0V32C298 24 292 20 284 20H236C226 20 220 26 220 36V70a13 13 0 0 1-26 0V34C194 24 186 20 176 20H128C120 20 116 25 116 32V40a8 8 0 0 1-16 0V30C100 24 95 20 88 20H60C50 20 46 26 46 34V52a11 11 0 0 1-22 0V32C24 24 16 20 8 20H0Z'/%3E%3C/svg%3E") 0 0/420px 84px repeat-x;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='84' viewBox='0 0 420 84'%3E%3Cpath d='M0 0H420V20C410 20 404 26 404 36V58a12 12 0 0 1-24 0V34C380 24 372 20 362 20H330C320 20 316 26 316 34V44a9 9 0 0 1-18 0V32C298 24 292 20 284 20H236C226 20 220 26 220 36V70a13 13 0 0 1-26 0V34C194 24 186 20 176 20H128C120 20 116 25 116 32V40a8 8 0 0 1-16 0V30C100 24 95 20 88 20H60C50 20 46 26 46 34V52a11 11 0 0 1-22 0V32C24 24 16 20 8 20H0Z'/%3E%3C/svg%3E") 0 0/420px 84px repeat-x;pointer-events:none}
.revs::before{display:none}
.revs.sec{padding-top:calc(clamp(80px,13vh,160px) + 70px)}
.shout{font-size:clamp(22px,3.1vw,52px)}
.sh-hyd{font-size:clamp(24px,3.5vw,58px)}
.pe-pel{right:5vw;bottom:12vh}
.sub .mq{margin-top:clamp(90px,15vh,150px)}
/* second round of scene pieces */
.pe-dolphin{position:absolute;left:71vw;top:33vh;width:min(15vh,11vw);pointer-events:none;opacity:0;animation:dolph 9s linear -2s infinite;will-change:transform,opacity}
.pe-dolphin img{display:block;width:100%;height:auto}
@keyframes dolph{0%{transform:translate(-9vw,20vh) rotate(-58deg);opacity:0;animation-timing-function:cubic-bezier(.2,.7,.4,1)}2.5%{opacity:1}13%{transform:translate(0,0) rotate(0deg);opacity:1;animation-timing-function:cubic-bezier(.6,0,.8,.3)}23.5%{opacity:1}26%,100%{transform:translate(9vw,21vh) rotate(62deg);opacity:0}}
.pe-crab{bottom:2.5vh;width:min(12vh,9vw);--t:40s;--w:-16s}
.pe-crab img{animation:scuttle .32s steps(2,jump-none) infinite}
@keyframes scuttle{0%{transform:translateY(0) rotate(-2deg)}100%{transform:translateY(-4px) rotate(2deg)}}
.nsb-cart{left:1.8vw;bottom:6vh;width:min(33vh,20vw);--d:14}
.nsb-cart img{transform-origin:50% 100%}
.nsb-box{left:21vw;bottom:4.5vh;width:min(20vh,12.5vw)}
.nsb-bigfoot{bottom:4vh;width:min(25vh,17vw);--t:13s;--w:-2s}
.nsb-bigfoot img,.pp-bigfoot img{animation:bobb .9s ease-in-out infinite}
.hyd-rover{bottom:5vh;width:min(27vh,19vw);--t:23s;--w:-9s}
.hyd-rover img,.pp-rover img{animation:scuttle .22s steps(2,jump-none) infinite}
.pp-bigfoot{bottom:3vh;width:min(20vh,14vw);--t:17s;--w:-10s}
.pp-rover{bottom:3vh;width:min(22vh,15vw);--t:25s;--w:-13s}
/* subscribe: the street the postie rides */
.sub .mq{margin-top:max(286px,calc(28.6vw + 26px))}
.sub-street{position:absolute;left:0;right:0;bottom:calc(clamp(50px,8vh,100px) + clamp(22px,3.2vw,50px) + 36px);z-index:1;overflow:hidden;pointer-events:none}
.sub-street img{display:block;width:max(100%,900px);max-width:none;height:auto}
.sub-rider{z-index:2}
/* reviews: the regulars turn up */
.revs{overflow:hidden}
.revs.sec{padding-bottom:calc(max(29.65vw,326px) * .95)}
.crowd{position:absolute;left:0;right:0;bottom:0;overflow:hidden;pointer-events:none}
.crowd img{display:block;width:max(100%,1100px);max-width:none;height:auto}
.crowd.hop{animation:hop .5s var(--pop,cubic-bezier(.3,1.5,.5,1))}
@keyframes hop{0%{translate:0 0}35%{translate:0 -26px}100%{translate:0 0}}
/* wholesale: the street we deliver to */
.biz.sec{padding-bottom:calc(min(100vw,1560px) * .28 * .92 + var(--sawh))}
.biz-street{position:absolute;left:50%;bottom:calc(var(--sawh) * .4);width:min(100%,1560px);translate:-50% 0;overflow:hidden;pointer-events:none}
.biz-street img{display:block;width:max(100%,780px);max-width:none;height:auto}
.biz-vanfly{top:auto;bottom:calc(var(--sawh) * .4 - 4px);width:min(22vh,16vw);z-index:2}
/* the footer is a half court: pull a sticker back, let it fly, hit the hoop */
.play{--hw:clamp(170px,min(27vw,46vh),400px);--bw:clamp(140px,min(17vw,30vh),250px)}
.hoop{position:absolute;right:0;top:55%;width:var(--hw);aspect-ratio:736/760;translate:0 -51.9%;z-index:1;pointer-events:none}
.hoop-art{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none}
/* the ring's back half and the board sit behind the stickers, the front of the ring and the net in front of them */
.hoop-back{clip-path:polygon(0 0,100% 0,100% 100%,46% 100%,46% 51.9%,0 51.9%)}
.hoop-front{z-index:5}
.hoop-front .hoop-art{clip-path:inset(51.9% 54% 0 0);transform-origin:23% 51.9%}
.hoop-front.swish .hoop-art{animation:netswish .65s var(--ease)}
@keyframes netswish{0%{transform:none}22%{transform:scaleY(1.3) scaleX(.86)}50%{transform:scaleY(.86) scaleX(1.07)}74%{transform:scaleY(1.06)}100%{transform:none}}
.hoop.clang .hoop-back{animation:rimclang .3s linear}
@keyframes rimclang{0%,100%{translate:0 0}25%{translate:0 4px}60%{translate:0 -2px}}
.hoop-rim{position:absolute;left:4.5%;top:51.9%;width:44%;height:2px;visibility:hidden}
.hoop-board{position:absolute;left:53%;top:1%;width:10%;height:81%;visibility:hidden}
.hoop-fire{position:absolute;left:-4%;bottom:46%;width:58%;height:46%;overflow:hidden;opacity:0;transition:opacity .4s;-webkit-mask:linear-gradient(#000 70%,transparent);mask:linear-gradient(#000 70%,transparent)}
.hoop-fire img{position:absolute;left:-40%;bottom:-8%;width:180%;max-width:none;height:auto;transform-origin:50% 100%;animation:flick .5s ease-in-out infinite alternate}
.hoop.fire .hoop-fire{opacity:1}
.hoop-pop{position:absolute;left:6%;top:30%;font-family:var(--f-d);font-weight:400;font-size:clamp(34px,4.6vw,70px);line-height:1;color:var(--lime);-webkit-text-stroke:2px var(--navy);paint-order:stroke fill;opacity:0;pointer-events:none;white-space:nowrap;z-index:2}
.hoop.swish .hoop-pop{animation:ptpop 1s var(--ease)}
@keyframes ptpop{0%{opacity:0;translate:0 20px;scale:.4}18%{opacity:1;translate:0 -30px;scale:1.15}70%{opacity:1;translate:0 -70px;scale:1}100%{opacity:0;translate:0 -110px;scale:.9}}
/* the scoreboard hangs off the ceiling on its chains */
.court-board{position:absolute;right:var(--gut);top:calc(var(--sawh) - 2px);width:var(--bw);aspect-ratio:640/408;z-index:1;pointer-events:none;transform-origin:50% 0}
.court-board>img{position:absolute;inset:0;width:100%;height:100%;display:block}
.court-board.bump{animation:boardswing .9s ease-out}
@keyframes boardswing{0%{rotate:0deg;filter:brightness(1.6)}15%{rotate:-3.5deg}40%{rotate:2.4deg;filter:brightness(1)}65%{rotate:-1.2deg}100%{rotate:0deg}}
.cb-in{position:absolute;left:10.6%;top:44.2%;width:78.8%;height:34.2%;display:flex;align-items:stretch;justify-content:center;gap:9%}
.cb-read{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5%;min-width:0}
.cb-read span{font-family:'Space Grotesk',var(--f-b);font-weight:700;font-size:clamp(6px,calc(var(--bw) * .034),9px);line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--cream);opacity:.85;white-space:nowrap}
.led{display:block;height:68%;width:auto;overflow:visible}
.led polygon{fill:rgba(255,120,40,.13)}
.led polygon.on{fill:#FF7A1A;filter:drop-shadow(0 0 2.5px #FF5A00)}
.led-run polygon{fill:rgba(210,245,92,.12)}
.led-run polygon.on{fill:var(--lime);filter:drop-shadow(0 0 2.5px #9EDB1F)}
.sling{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible;opacity:0;transition:opacity .15s}
.sling.on{opacity:1}
.sling .band{stroke:var(--pink);stroke-width:7;stroke-linecap:round}
.sling .band.b2{stroke:var(--cream);stroke-width:2.5;stroke-dasharray:2 9}
.sling .pin{fill:var(--cream);stroke:var(--pink);stroke-width:4}
.sling .dot{fill:var(--lime)}
.tk{z-index:3;transform-origin:50% 50%}
.play-type{align-items:flex-start;text-align:left;padding-left:var(--gut);font-size:clamp(40px,9.6vw,176px)}
.play-note{right:auto;left:var(--gut);top:calc(var(--sawh) + 14px)}
@media(max-width:700px),(max-aspect-ratio:1/1){
  .play{--hw:56vw;--bw:40vw}
  .hoop{top:56%}
  .court-board{right:8px;top:calc(var(--sawh) + 2px)}
  .cb-run,.cb-read span{display:none}
  .led{height:78%}
  .play-type{font-size:clamp(34px,9.4vw,60px)}
  .pe-dolphin{left:60vw;top:calc(var(--top) + 22vh);width:20vw}
  .pe-crab{width:17vw}
  .nsb-cart{left:-9vw;bottom:19vh;width:40vw}
  .nsb-box{display:none}
  .nsb-bigfoot{width:34vw}.hyd-rover{width:36vw}
  .pp-bigfoot{width:30vw}.pp-rover{width:32vw}
  .biz-vanfly{top:auto;width:30vw}
  .biz.sec{padding-bottom:calc(218px * .92 + var(--sawh))}
  .crowd img,.biz-street img,.sub-street img,.rm-crowd img,.rm-street img{animation:pan 28s ease-in-out infinite alternate}
  .shout{font-size:clamp(20px,6.4vw,34px);top:calc(var(--top) + .5vh);left:12px}
  .sh-hyd{font-size:clamp(21px,6.8vw,36px)}
  .shout span{border-width:2px;box-shadow:3px 3px 0 var(--navy)}
  .sw-note,.slap-hint,.b-note{display:none}
  .lay.corner-l{left:-40vw;height:62vh;bottom:14vh}
  .lay.corner-r{right:-36vw;height:62vh;bottom:14vh}
  .pe-surf{bottom:33vh;width:30vw}
  .pe-palm-l{bottom:17vh}
  .pe-pel{right:4vw;bottom:22vh;width:22vw}
  .nsb-sign{left:2vw;bottom:auto;top:calc(var(--top) + 15vh);width:22vw}
  .nsb-box{left:-13vw;top:auto;bottom:22vh;width:42vw}
  .nsb-bboy{right:-7vw;top:auto;bottom:21vh;width:30vw}
  .nsb-train{bottom:30vh}
  .nsb-vinyl-a{left:auto;right:6vw;top:calc(var(--top) + 9vh)}
  .nsb-sneak{right:34vw}
  .hyd-planet{left:-22vw;top:calc(var(--top) + 13vh);width:56vw}
  .hyd-moon{right:-4vw;bottom:27vh;width:24vw}
  .hyd-ufo{left:-6vw;bottom:22vh}
  .hyd-astro{top:calc(var(--top) + 12vh)}
  .badge{left:auto;right:2%;bottom:auto;top:-10%}
  .sub .mq{margin-top:286px}
  .sub-rider{width:30vw}
  .r-note{right:4%}
}
.rm .lay{transform:none}
.rm .shout span{transform:rotate(-3deg)}
.rm .flames img,.rm .sc-pe .surf img{animation:none}
.rm .doodle path{stroke-dashoffset:0;transition:none}
.rm [data-draw] .note{opacity:1}
.pop .lay.corner-l,.pop .lay.corner-r{transform:none}
.scene .nsb-sign{display:none}
.front .fl-c{left:29.5vw;top:37vh}
.front.sc-nsb .fl-c{left:29.5vw;top:36vh}
/* the logo is its own die-cut sticker: a solid plate under the ink, so it reads on any world */
.nav .logo{filter:drop-shadow(3px 4px 0 rgba(17,26,55,.22))}

/* scene pieces have no sticker edge and no sticker shadow: they belong to the painting */
.el img[src^="i/sc-"],.fly img[src^="i/sc-"]{filter:none}
.perch img[src^="i/sc-"]{filter:none}
.buy-perch,.deco{filter:none}
@keyframes pan{to{transform:translateX(calc(100vw - 100%))}}
.rm .pe-dolphin{display:none}
.rm .crowd img,.rm .biz-street img,.rm .sub-street img,.rm .rm-crowd img,.rm .rm-street img{animation:none}
.rm .hoop,.rm .sling,.rm .court-board{display:none}
.rm .play-note{display:none}
/* BOM Radio: the dock in the corner and its control card */
.pl-dock{display:flex;align-items:stretch;border:2px solid var(--navy);background:var(--white);color:var(--navy);box-shadow:5px 5px 0 var(--navy)}
.pl-mini{min-height:52px;padding:4px 12px 4px 5px;border:0;box-shadow:none;background:transparent;translate:none}
.pl-mini:active{translate:none;box-shadow:none}
.pl-mini .vinyl{width:40px;height:40px}
.pl-mini-t{max-width:190px}
.pl-mini-t b{font-family:var(--f-d);font-weight:400;font-size:15px;text-transform:uppercase;letter-spacing:-.01em;line-height:1.1}
.pl-mini-t small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.pl-quick{display:grid;place-items:center;flex:none;width:46px;margin:5px 6px 5px 0;border:2px solid var(--navy);background:var(--pink);color:var(--navy);box-shadow:3px 3px 0 var(--navy);transition:translate .12s var(--ease),box-shadow .12s var(--ease)}
.pl-quick:active{translate:3px 3px;box-shadow:0 0 0 var(--navy)}
.pl-quick .i-pause,.player.playing .pl-quick .i-play{display:none}
.player.playing .pl-quick .i-pause{display:block}
.pl-side{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:4px 12px 4px 10px;border-left:2px solid var(--navy);min-width:112px}
.pl-side small{font-size:11.5px;font-weight:600;white-space:nowrap}
.pl-mute{align-self:flex-start;padding:0;font-size:12.5px;font-weight:700;color:var(--navy);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
@media(hover:hover){.pl-mini:hover{background:var(--cream)}.pl-mute:hover{color:#c2185b}.pl-quick:hover{translate:-1px -1px;box-shadow:4px 4px 0 var(--navy)}}
.pl-card{width:min(340px,calc(100vw - 2 * var(--gut)));max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px);overflow-y:auto;overscroll-behavior:contain}
.pl-top{padding-bottom:10px;border-bottom:3px solid var(--navy)}
.pl-brand{font-family:var(--f-d);font-weight:400;font-size:26px;line-height:1;text-transform:uppercase;letter-spacing:-.01em}
.pl-state{margin:12px 0 0;font-size:12.5px;font-weight:700}
.pl-title{margin:4px 0 12px}
.pl-list{max-height:min(150px,22vh)}
.pl-set{display:flex;flex-direction:column;gap:9px;margin-top:12px;padding-top:12px;border-top:3px solid var(--navy)}
.pl-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;font-weight:700}
.pl-row label{display:flex;flex-direction:column;line-height:1.2;cursor:pointer}
.pl-row small{font-size:12px;font-weight:500}
.pl-range{-webkit-appearance:none;appearance:none;display:block;width:100%;height:24px;margin:0 0 4px;background:transparent;cursor:pointer}
.pl-range::-webkit-slider-runnable-track{height:10px;border:2px solid var(--navy);background:linear-gradient(var(--pink),var(--pink)) 0 0/var(--v,50%) 100% no-repeat var(--cream)}
.pl-range::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:24px;margin-top:-9px;border:2px solid var(--navy);background:var(--navy)}
.pl-range::-moz-range-track{height:6px;border:2px solid var(--navy);background:var(--cream)}
.pl-range::-moz-range-progress{height:6px;background:var(--pink)}
.pl-range::-moz-range-thumb{width:12px;height:20px;border:2px solid var(--navy);border-radius:0;background:var(--navy)}
.pl-sw{-webkit-appearance:none;appearance:none;flex:none;position:relative;width:50px;height:28px;margin:0;border:2px solid var(--navy);background:var(--cream);cursor:pointer;transition:background .15s}
.pl-sw::after{content:'';position:absolute;left:2px;top:2px;width:20px;height:20px;background:var(--navy);transition:translate .15s var(--ease)}
.pl-sw:checked{background:var(--pink)}
.pl-sw:checked::after{translate:22px 0}
.pl-note{margin:2px 0 0;font-size:13px;font-weight:600}
.pl-note button{padding:0;font-weight:700;color:var(--navy);text-decoration:underline;text-underline-offset:3px}
@media(max-width:700px){.pl-side{display:none}.pl-mini{padding-right:6px}.pl-mini .vinyl{width:36px;height:36px}.pl-quick{width:42px}}
/* a burst behind each bag instead of a square */
.p-burst{position:absolute;left:50%;top:50%;width:min(62vh,35.5vw);aspect-ratio:1;translate:-50% -52%;background:var(--burst,var(--cream));clip-path:polygon(50% 0,54.9% 12.6%,62.9% 1.7%,64.4% 15.2%,75% 6.7%,73.1% 20.1%,85.4% 14.6%,79.9% 26.9%,93.3% 25%,84.8% 35.6%,98.3% 37.1%,87.4% 45.1%,100% 50%,87.4% 54.9%,98.3% 62.9%,84.8% 64.4%,93.3% 75%,79.9% 73.1%,85.4% 85.4%,73.1% 79.9%,75% 93.3%,64.4% 84.8%,62.9% 98.3%,54.9% 87.4%,50% 100%,45.1% 87.4%,37.1% 98.3%,35.6% 84.8%,25% 93.3%,26.9% 79.9%,14.6% 85.4%,20.1% 73.1%,6.7% 75%,15.2% 64.4%,1.7% 62.9%,12.6% 54.9%,0 50%,12.6% 45.1%,1.7% 37.1%,15.2% 35.6%,6.7% 25%,20.1% 26.9%,14.6% 14.6%,26.9% 20.1%,25% 6.7%,35.6% 15.2%,37.1% 1.7%,45.1% 12.6%);animation:spinr 70s linear infinite;scale:.2;opacity:0;transition:scale .7s var(--pop,cubic-bezier(.3,1.5,.5,1)) .1s,opacity .3s .1s}
.pop .p-burst{scale:1;opacity:1}
.p-pe{--burst:#F5F2C4}.p-nsb{--burst:#FFB13D}.p-hyd{--burst:#3A2A7A}
.rm .p-burst{animation:none;scale:1;opacity:1}
@media(max-width:980px){.p-burst{width:min(96vw,460px)}}
.p-copy,.buy,.p-taste{position:relative;z-index:2}
/* the way in: one big button, one quiet one */
.ld-enter{flex-direction:column;gap:16px}
.ld-enter .ld-go{min-height:clamp(64px,9vh,84px);padding:0 clamp(26px,3vw,44px) 0 clamp(20px,2.4vw,34px);gap:14px;border-width:4px;border-color:var(--cream);background:var(--lime);color:var(--navy);font-family:var(--f-d);font-weight:400;font-size:clamp(18px,2.1vw,30px);text-transform:uppercase;letter-spacing:-.01em;--bs:var(--pink);box-shadow:9px 9px 0 var(--pink);rotate:-2deg}
.ld-enter .ld-go svg{flex:none;width:1.25em;height:1.25em}
.ld-enter .ld-go .wave{transform-origin:0 50%;animation:wave 1s ease-in-out infinite alternate}
.ld-enter .ld-go .wave+.wave{animation-delay:-.5s}
@keyframes wave{from{opacity:.25}to{opacity:1}}
.ld-enter .ld-soft{padding:6px 4px;color:var(--cream);font-weight:700;font-size:16px;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.ld-enter p{flex-basis:auto;margin:0;font-size:14px;opacity:.85}
.ld-enter :focus:not(:focus-visible){outline:0}
@media(hover:hover){.ld-enter .ld-go:hover{background:var(--pink);box-shadow:12px 12px 0 var(--lime);rotate:1deg}.ld-enter .ld-soft:hover{color:var(--lime)}}
.rm .ld-enter .ld-go .wave{animation:none}
.pl-mute-card{display:none;align-self:flex-start}
@media(max-width:700px){.pl-mute-card{display:block}}
/* ---------- borrowed from the other build: a condensed second voice, tags, cards with a character bursting out ---------- */
.tagline{display:inline-block;align-self:flex-start;margin:0 0 4px;padding:7px 14px 6px;background:var(--pink);color:var(--navy);font-weight:600;font-size:clamp(14px,1.15vw,18px);line-height:1.2;rotate:-2deg}
.betty .tagline{background:var(--navy);color:var(--cream);margin-bottom:14px}
/* pick a coffee */
.pick{position:relative;z-index:10;background:var(--sky);color:var(--navy);padding:calc(var(--top) + clamp(40px,8vh,90px)) 0 calc(var(--sawh) + clamp(46px,8vh,90px))}
.pick-h{margin:0 0 clamp(54px,9vh,100px);font-family:var(--f-c);font-weight:400;font-size:clamp(46px,7.4vw,128px);line-height:.9;text-transform:uppercase;rotate:-2deg;transform-origin:0 50%}
.pick-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,34px)}
.pick-card{position:relative;display:flex;flex-direction:column;justify-content:center;gap:8px;min-height:clamp(150px,15vw,230px);padding:20px 42% 20px clamp(16px,2vw,34px);border:3px solid var(--navy);background:var(--pk,var(--cream));color:var(--navy);box-shadow:10px 10px 0 var(--navy);text-align:left;transition:translate .2s var(--ease),box-shadow .2s var(--ease)}
.pk-nsb{--pk:#F6B58A}.pk-hyd{--pk:var(--purple)}
.pick-n{font-family:var(--f-c);font-weight:400;font-size:clamp(26px,3.1vw,54px);line-height:.95;text-transform:uppercase}
.pick-r{font-weight:600;font-size:clamp(13px,1.05vw,16px)}
.pick-card img{position:absolute;right:3%;bottom:8%;height:128%;width:auto;max-width:44%;object-fit:contain;object-position:50% 100%;transform-origin:50% 100%;transition:rotate .3s var(--pop,cubic-bezier(.3,1.5,.5,1)),scale .3s var(--pop,cubic-bezier(.3,1.5,.5,1));pointer-events:none}
.pick-go{position:absolute;right:12px;bottom:10px}
.pick-card:active{translate:10px 10px;box-shadow:0 0 0 var(--navy)}
@media(hover:hover){.pick-card:hover{translate:-3px -3px;box-shadow:13px 13px 0 var(--navy)}.pick-card:hover img{rotate:-5deg;scale:1.08}}
@media(max-width:860px){.pick-row{grid-template-columns:minmax(0,1fr);gap:46px}.pick-card{min-height:130px}.pick-card img{height:140%}.pick-h{margin-bottom:60px}}
/* wholesale */
.biz.sec{padding-top:clamp(60px,9vh,110px)}
.bz-mq{margin:0 -3vw clamp(40px,7vh,90px);padding:12px 0;rotate:-2deg;background:var(--lime);border-block:3px solid var(--navy)}
.bz-mq .mq-t{font-family:var(--f-c);font-size:clamp(26px,3.6vw,58px);letter-spacing:.01em}
.biz .wrap.bz-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,5vw,90px);align-items:center;padding-top:0}
.bz-art{position:relative;padding:0 30% 0 2%}
.bz-poster{position:relative;display:flex;flex-direction:column;gap:clamp(10px,1.3vw,18px);padding:clamp(16px,2vw,30px);background:var(--pink);border:3px solid var(--navy);box-shadow:14px 14px 0 var(--navy);rotate:-4deg}
.bz-poster .logo{width:clamp(96px,10vw,160px);height:auto;aspect-ratio:150/57;--logo:var(--navy);--plate:var(--white)}
.bz-poster-h{margin:0;font-family:var(--f-c);font-size:clamp(32px,4.1vw,70px);line-height:.94;text-transform:uppercase}
.bz-poster .biz-pic{min-height:0;aspect-ratio:4/3;border:3px solid var(--navy)}
.bz-poster-f{margin:0;text-align:center;padding-top:10px;border-top:3px solid var(--navy);font-weight:600;font-size:clamp(12px,1vw,15px)}
.bz-poster.taped::after{--tape:rgba(240,240,234,.85)}
.bz-barista{position:absolute;right:-5%;bottom:-7%;width:46%;height:auto;z-index:2;rotate:3deg;transform-origin:50% 100%;animation:sway 6s ease-in-out infinite}
.bz-machine{position:absolute;left:-11%;bottom:-9%;width:27%;height:auto;z-index:2;rotate:-6deg}
.bz-copy{padding:0}
.bz-copy .h2{font-size:clamp(38px,5.4vw,96px)}
@media(max-width:860px){.biz .wrap.bz-grid{grid-template-columns:minmax(0,1fr);gap:60px}.bz-art{padding:0 30% 0 4%}.bz-barista{width:44%;right:-2%}}
/* the sign-off */
.wild{position:relative;overflow:hidden;background:var(--lime);color:var(--navy);text-align:center;padding:clamp(80px,13vh,150px) 0 clamp(90px,14vh,170px);clip-path:inset(calc(var(--sawh) * -1 - 2px) 0 0 0)}
.wild-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:clamp(16px,2.6vh,30px)}
.wild-k,.wild-f{margin:0;font-weight:500;font-size:clamp(15px,1.3vw,20px);line-height:1.45}
.wild-h{margin:0;font-family:var(--f-c);font-weight:400;font-size:clamp(70px,14.2vw,250px);line-height:.84;text-transform:uppercase;rotate:-3deg}
.wild .btn{rotate:-3deg;min-height:62px;padding:0 30px;font-size:17px;--bs:var(--navy)}
.wild-c{position:absolute;bottom:clamp(30px,6vh,70px);z-index:2;height:auto;pointer-events:none;animation:bobb 2.4s ease-in-out infinite}
.wild-l{left:-3vw;width:min(24vw,46vh)}
.wild-r{right:-3vw;width:min(25vw,48vh);animation-duration:.5s}
@media(max-width:860px){.wild{padding-bottom:calc(46vw + 40px)}.wild-c{bottom:26px}.wild-l{width:50vw;left:-6vw}.wild-r{width:48vw;right:-5vw}}
.rm .wild-c,.rm .bz-barista{animation:none}
@media(max-width:700px){.play-note{max-width:50vw;white-space:normal;line-height:1.25}}
/* the shot call: what the crowd shouts when one drops */
.shot-call{position:absolute;left:0;top:0;z-index:6;display:flex;flex-direction:column;align-items:flex-end;gap:6px;translate:-100% -100%;pointer-events:none;opacity:0;white-space:nowrap}
.shot-call b{display:block;padding:.12em .3em .02em;border:3px solid var(--navy);background:var(--lime);color:var(--navy);box-shadow:6px 6px 0 var(--pink);font-family:'Luckiest Guy',var(--f-d);font-weight:400;font-size:clamp(26px,4.4vw,74px);line-height:1;letter-spacing:.01em;rotate:-6deg}
.shot-call i{font-style:normal;font-family:var(--f-d);font-size:clamp(24px,3.4vw,56px);line-height:1;color:var(--cream);-webkit-text-stroke:2px var(--navy);paint-order:stroke fill;rotate:4deg;margin-right:.3em}
.shot-call.three b{background:var(--pink);box-shadow:6px 6px 0 var(--lime)}
.shot-call.three i{color:var(--lime)}
.shot-call.go{animation:callpop 1.7s var(--ease) both}
@keyframes callpop{0%{opacity:0;scale:.3;rotate:-14deg}9%{opacity:1;scale:1.14;rotate:3deg}16%{scale:1;rotate:0deg}78%{opacity:1;scale:1;translate:-100% -100%}100%{opacity:0;scale:.92;translate:-100% -170%}}
.shot-call.three.go{animation-duration:2.3s}
.rm .shot-call{display:none}
:root{--burstp:polygon(50% 0,54.9% 12.6%,62.9% 1.7%,64.4% 15.2%,75% 6.7%,73.1% 20.1%,85.4% 14.6%,79.9% 26.9%,93.3% 25%,84.8% 35.6%,98.3% 37.1%,87.4% 45.1%,100% 50%,87.4% 54.9%,98.3% 62.9%,84.8% 64.4%,93.3% 75%,79.9% 73.1%,85.4% 85.4%,73.1% 79.9%,75% 93.3%,64.4% 84.8%,62.9% 98.3%,54.9% 87.4%,50% 100%,45.1% 87.4%,37.1% 98.3%,35.6% 84.8%,25% 93.3%,26.9% 79.9%,14.6% 85.4%,20.1% 73.1%,6.7% 75%,15.2% 64.4%,1.7% 62.9%,12.6% 54.9%,0 50%,12.6% 45.1%,1.7% 37.1%,15.2% 35.6%,6.7% 25%,20.1% 26.9%,14.6% 14.6%,26.9% 20.1%,25% 6.7%,35.6% 15.2%,37.1% 1.7%,45.1% 12.6%)}
/* ---------- the stepper ---------- */
.rail{position:fixed;right:max(3px,calc((var(--gut) - 42px) / 2));top:50%;translate:0 -50%;z-index:54;display:flex;flex-direction:column;align-items:center;gap:6px}
.rail-b{display:grid;place-items:center;width:42px;height:42px;border:2px solid var(--navy);background:var(--white);color:var(--navy);box-shadow:3px 3px 0 var(--navy);transition:translate .12s var(--ease),box-shadow .12s var(--ease),background .15s,opacity .2s}
.rail-b:active{translate:3px 3px;box-shadow:0 0 0 var(--navy)}
.rail-b:disabled{opacity:.3;pointer-events:none}
.rail-n{width:42px;padding:3px 0 2px;border:2px solid var(--navy);background:var(--navy);color:var(--cream);font-size:11px;font-weight:700;line-height:1.2;text-align:center;font-variant-numeric:tabular-nums}
@media(hover:hover){.rail-b:hover{background:var(--pink)}}
body.lock .rail{display:none}
@media(max-width:1100px){.rail{right:auto;left:12px;top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);translate:none;flex-direction:row}.rail-n{display:none}}
/* ---------- the record on the radio ---------- */
.pl-rec{flex:none;align-self:center;width:66px;height:66px;margin:-14px -6px -14px -16px;border-radius:50%;filter:drop-shadow(3px 4px 0 rgba(17,26,55,.4));transition:scale .15s var(--ease)}
.pl-rec img{display:block;width:100%;height:100%;animation:spinr 2.4s linear infinite;animation-play-state:paused;user-select:none;-webkit-user-drag:none}
.player.playing .pl-rec img{animation-play-state:running}
.pl-rec.scr{animation:scratch .5s ease-in-out}
@keyframes scratch{0%{rotate:0deg}18%{rotate:-52deg}36%{rotate:30deg}54%{rotate:-38deg}72%{rotate:20deg}100%{rotate:0deg}}
.pl-rec:active{scale:.93}
.pl-mini{padding-left:12px}
@media(max-width:700px){.pl-rec{width:56px;height:56px;margin:-10px -4px -10px -12px}.pl-mini-t{display:flex;max-width:none}.pl-mini-t small{display:none}.pl-mini-t b{font-size:13px}.pl-mini{padding:4px 8px 4px 10px}}
/* the phone's dock shows the song, not "BOM Radio" (8 Oct, Jos: "you should be able to see the track playing but the player
   should be small still"); up to two short lines in the space the name took */
.pl-mini-t i{display:none}
@media(max-width:700px){.pl-mini-t b{display:none}.pl-mini-t i{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-width:96px;overflow:hidden;font-family:var(--f-d);font-style:normal;font-weight:400;font-size:12px;line-height:1.12;text-transform:uppercase;letter-spacing:-.01em;text-wrap:balance}}
/* ---------- Betty: the workshop badge and the woman it is all named after ---------- */
.betty-art{position:relative;justify-self:center;width:100%;max-width:calc(74vh * .9);padding:0 25% 15% 0}
.betty .frame.bw{max-width:none}
.bw .frame-in{background:#FBF5DF}
.bw img{display:block;width:100%;height:auto}
.nan{position:absolute;right:0;bottom:0;z-index:2;width:39%;margin:0;padding:8px 8px 4px;background:var(--white);border:3px solid var(--navy);box-shadow:8px 8px 0 var(--navy);rotate:5deg}
.nan img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border:2px solid var(--navy)}
.nan figcaption{padding:6px 0 2px;text-align:center;font-size:clamp(14px,1.35vw,21px);color:var(--navy)}
.nan.taped::after{--tape:rgba(255,105,174,.9);top:-16px}
@media(max-width:820px){.betty-art{justify-self:start;max-width:420px}}
/* ---------- the wholesale room, dressed like the rest of the site ---------- */
.rm-mq{display:flex;overflow:hidden;padding:9px 0 7px;background:var(--lime);border-bottom:3px solid var(--navy);user-select:none}
.rm-mq-t{display:flex;flex:none;align-items:center;gap:clamp(16px,2vw,34px);padding-right:clamp(16px,2vw,34px);font-family:var(--f-c);font-size:clamp(22px,2.6vw,42px);line-height:1;text-transform:uppercase;white-space:nowrap;animation:rmmq 30s linear infinite}
.rm-mq-t i{width:.42em;height:.42em;background:var(--navy);rotate:45deg}
@keyframes rmmq{to{transform:translateX(-100%)}}
.room .wrap{position:relative;z-index:0}
.room-hero,.room-sec,.room-end{position:relative;border-top:0}
.room-hero::before,.room-sec::before,.room-end::before{content:'';position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;translate:-50% 0;background:var(--rb,var(--cream))}
.room-sec::after{content:'';position:absolute;z-index:-1;left:50%;width:100vw;translate:-50% 0;bottom:calc(100% - 1px);height:var(--sawh);background:var(--rb,var(--cream));clip-path:var(--saw);pointer-events:none}
.room-sec{padding-block:clamp(44px,8vh,90px) calc(clamp(40px,7vh,80px) + var(--sawh))}
.room-sec:nth-of-type(2){--rb:var(--pink)}
.room-sec:nth-of-type(3){--rb:var(--navy);color:var(--cream)}
.room-sec:nth-of-type(4){--rb:var(--lime)}
.room-sec:nth-of-type(6),.room-end{--rb:var(--purple)}
.room-sec:nth-of-type(6){padding-bottom:clamp(30px,5vh,50px)}
/* hero */
.room-hero{--rb:var(--sky);padding-block:clamp(34px,6vh,70px) calc(max(27vw,222px) + var(--sawh) * .5)}
.room-hero .tagline{margin:0}
.rm-street{position:absolute;z-index:-1;left:50%;bottom:calc(var(--sawh) * .35);width:100vw;translate:-50% 0;overflow:hidden;pointer-events:none}
.rm-street img{display:block;width:max(100%,820px);max-width:none;height:auto}
.room .room-van{position:absolute;top:auto;left:calc(50% - 50vw);bottom:calc(var(--sawh) * .35 - 4px);width:min(170px,24vw);z-index:0;transform:none;--t:17s;--w:-4s}
.room.open .room-van{animation:flyx var(--t) linear var(--w) infinite}
.room .room-van img{animation:bobb .5s ease-in-out infinite}
.room .room-machine{right:-1%;bottom:-46px;width:min(190px,29%);rotate:3deg;transform-origin:50% 100%;animation:sway 6s ease-in-out infinite}
.form.taped{position:relative;rotate:1.2deg}
.form.taped::after{--tape:rgba(240,240,234,.9)}
/* what you get: six tiles */
.room .rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.2vw,34px);margin-top:clamp(30px,5vh,56px);border-top:0}
.room .rows .row{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:clamp(18px,1.9vw,28px);border:3px solid var(--navy);background:var(--rc,var(--white));box-shadow:8px 8px 0 var(--navy);rotate:var(--rr,0deg);transition:rotate .25s var(--ease),translate .25s var(--ease),box-shadow .25s var(--ease)}
.room .rows .row b{font-family:var(--f-c);font-size:clamp(26px,2.5vw,42px);line-height:.98;letter-spacing:.005em}
.room .rows .row:nth-child(1){--rc:var(--pink);--rr:-1.5deg}
.room .rows .row:nth-child(2){--rc:var(--lime);--rr:1deg}
.room .rows .row:nth-child(3){--rc:var(--purple);--rr:-1deg}
.room .rows .row:nth-child(4){--rc:var(--sky);--rr:1.4deg}
.room .rows .row:nth-child(5){--rc:#F6B58A;--rr:-1.2deg}
.room .rows .row:nth-child(6){--rr:1deg}
@media(hover:hover){.room .rows .row:hover{padding:clamp(18px,1.9vw,28px);background:var(--rc,var(--white));rotate:0deg;translate:-3px -3px;box-shadow:11px 11px 0 var(--navy)}}
@media(max-width:1000px){.room .rows{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.room .rows{grid-template-columns:minmax(0,1fr)}}
.rm-machine{position:absolute;right:0;top:clamp(6px,2vh,30px);width:min(200px,22vw);rotate:6deg;pointer-events:none}
@media(max-width:700px){.rm-machine{display:none}}
/* the calculator */
.room .outs{gap:14px;border-top:0}
.room .out{align-items:center;padding:16px 18px;border:3px solid var(--navy);background:var(--white);box-shadow:6px 6px 0 var(--navy)}
.room .range::-webkit-slider-thumb{background:var(--lime)}
.room .range::-moz-range-thumb{background:var(--lime)}
/* signal sits on navy */
.room-sec:nth-of-type(3) .sg{box-shadow:14px 14px 0 var(--purple)}
/* the guarantee */
.room .guar-n{position:relative;isolation:isolate;width:clamp(150px,19vw,280px);border:0;background:none;box-shadow:none;rotate:-6deg}
.room .guar-n::before{content:'';position:absolute;inset:-7%;z-index:-1;background:var(--pink);clip-path:var(--burstp);animation:spinr 40s linear infinite}
.rm-rider{left:calc(50% - 50vw);bottom:calc(var(--sawh) * .55);width:min(150px,22vw);z-index:0;--t:14s;--w:-5s}
.rm-rider img{animation:bobb .45s ease-in-out infinite}
.room-sec:nth-of-type(4){padding-bottom:calc(clamp(110px,16vh,170px) + var(--sawh))}
/* the ways in, and the regulars to see you off */
.room .way:nth-child(odd){rotate:-1.2deg}.room .way:nth-child(even){rotate:1deg}
.room-end{display:flex;flex-direction:column;align-items:center;gap:clamp(20px,3vh,34px);padding-block:clamp(24px,5vh,60px) calc(max(29.65vw,326px) * .93 + 24px);text-align:center}
.rm-sign{margin:0;font-family:var(--f-c);font-size:clamp(46px,8.6vw,154px);line-height:.9;text-transform:uppercase;rotate:-2deg}
.rm-crowd{position:absolute;z-index:-1;left:50%;bottom:0;width:100vw;translate:-50% 0;overflow:hidden;pointer-events:none}
.rm-crowd img{display:block;width:max(100%,1100px);max-width:none;height:auto}
@media(max-width:860px){.room .room-machine{position:absolute;right:0;bottom:-30px;width:min(130px,32%);margin:0}.room-intro{padding-bottom:20px}}
.rm .rm-mq-t,.rm .room .room-machine,.rm .room .guar-n::before{animation:none}
.pl-skip{width:40px;margin-left:-1px;background:var(--white)}
@media(max-width:700px){.pl-skip{width:36px}}
.room-intro .lead,.room-intro .ticks{max-width:calc(100% - min(190px,29%) - 6px)}
.room .guar{padding-left:clamp(10px,2vw,30px)}
@media(max-width:860px){.room-intro .lead,.room-intro .ticks{max-width:calc(100% - min(130px,32%) - 4px)}}
@media(max-width:1100px){.hero-ui{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 84px)}}
/* ---------- hints that have to be seen, on a phone as much as anywhere ---------- */
.play-note{z-index:2;margin:0;padding:8px 13px 7px;border:2px solid var(--navy);background:var(--lime);color:var(--navy);box-shadow:4px 4px 0 var(--pink);font-size:15px;font-weight:600;line-height:1.25;rotate:-2deg;transform-origin:0 50%;animation:nudge 2.4s ease-in-out infinite}
.play-note b{font-weight:700}
.play-note.done{animation:none;opacity:.0;transition:opacity .6s}
@keyframes nudge{0%,100%{translate:0 0}50%{translate:0 -5px}}
.play-note{right:auto;left:var(--gut);top:calc(var(--sawh) + 8vh + clamp(40px,9.6vw,176px) * 2.72 + 26px)}
.touch-hint{display:none}
@media(max-width:700px),(max-aspect-ratio:1/1){
  .play{--pt:calc(var(--sawh) + 9vh)}
  .play-note{top:calc(var(--pt) + clamp(34px,9.4vw,60px) * 2.78 + 22px);left:var(--gut);max-width:54vw;white-space:normal;font-size:14px}
  .touch-hint{display:block;order:9;margin:0;padding:6px 11px 5px;border:2px solid var(--navy);background:var(--lime);color:var(--navy);font-size:12.5px;font-weight:600;line-height:1.25;text-align:center;rotate:-1.5deg;pointer-events:none}
}
@media(pointer:coarse) and (min-width:701px){.touch-hint{display:block;margin:0;padding:6px 11px 5px;border:2px solid var(--navy);background:var(--lime);color:var(--navy);font-size:13px;font-weight:600;rotate:-1.5deg;pointer-events:none}}
.rm .play-note{animation:none}
/* ---------- artwork is for looking at ---------- */
.poster img,.box img,.frame img,.nan img,.bz-poster img,.p-taste img{pointer-events:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.poster,.box,.frame,.nan{-webkit-touch-callout:none}
/* ---------- the court on any screen ---------- */
.court-board{top:calc(var(--top) - 16px)}
@media(max-width:700px),(max-aspect-ratio:1/1){.court-board{top:calc(var(--top) + 4px)}}
/* ---------- lighter on a phone ---------- */
.off,.off *,.off *::before,.off *::after{animation-play-state:paused !important}
@media(max-width:700px){.fl-back{display:none}.fl-row{height:92%}}
/* "that's her" points at nan */
.nan .b-note{position:absolute;left:auto;right:-4%;top:auto;bottom:calc(100% + 2px);display:flex;flex-direction:column;align-items:flex-end;gap:0;rotate:-9deg;color:var(--navy);white-space:nowrap}
.nan .b-note .note{margin:0 0 -4px;font-size:clamp(16px,1.5vw,23px)}
@media(max-width:700px),(max-aspect-ratio:1/1){.nan .b-note{display:flex}.play{--bw:34vw}}
/* the wholesale van is on the road the moment you arrive */
@keyframes flyx2{0%{transform:translateX(var(--from,-40vw))}88%,100%{transform:translateX(var(--to,112vw))}}
.biz-vanfly{animation-name:flyx2;--t:11s;--w:-1.3s}
/* ---------- shop is easy to find ---------- */
.nb-shop{background:var(--pink)}
.lbl-s{display:none}
@media(max-width:700px){.lbl-l{display:none}.lbl-s{display:inline}.logo{width:92px;height:35px}}
@media(max-width:400px){.nb{padding:0 8px;font-size:12.5px}.nav-r{gap:6px}}
.pick-card{min-height:clamp(170px,16vw,250px)}
.pick-hit{position:absolute;inset:0;z-index:1}
.pick-buy{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:6px}
.pick-price{font-family:var(--f-d);font-weight:400;font-size:clamp(18px,1.7vw,26px);line-height:1}
.pick-size{font-size:12.5px;font-weight:600}
.pick-buy .btn{flex:none;min-height:40px;padding:0 14px;font-size:13.5px;--bs:var(--navy)}
.pick-card:active{translate:none;box-shadow:10px 10px 0 var(--navy)}
.pick-card .pick-go{z-index:0}
.pick-quiz{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:clamp(44px,7vh,80px)}
.pick-quiz img{width:clamp(56px,5.6vw,88px);height:auto;rotate:-10deg;animation:bobb 2.4s ease-in-out infinite}
.pick-quiz p{margin:0;font-family:var(--f-c);font-size:clamp(26px,3vw,46px);line-height:1;text-transform:uppercase}
.btn-quiz{min-height:60px;padding:0 26px;background:var(--lime);font-size:17px;rotate:-2deg;--bs:var(--navy)}
.wild-acts{justify-content:center}
.wild-acts .btn-white{rotate:2deg}
@media(max-width:860px){.pick-card{padding-right:40%}.pick-buy .btn{min-height:44px}}
/* ---------- strength, on a strip like the headline stickers ---------- */
.bn{display:inline-block;flex:none;width:.5em;height:.68em;border-radius:50%;border:2px solid currentColor;rotate:24deg}
.bn.f{background:currentColor}
.str{position:absolute;z-index:3;display:flex;flex-direction:column;align-items:flex-start;gap:.16em;margin:0;font-size:var(--fs,clamp(17px,1.75vw,28px));line-height:1;text-transform:uppercase;white-space:nowrap;pointer-events:none}
.str span{display:flex;align-items:center;gap:.26em;padding:.2em .36em .1em;border:3px solid var(--navy);background:var(--white);color:var(--navy);box-shadow:4px 4px 0 var(--navy);rotate:-4deg}
.str span+span{font-size:.74em;rotate:2deg;translate:.6em 0;padding:.3em .5em .22em}
.str-pe{font-family:'Luckiest Guy',var(--f-d);letter-spacing:.02em}
.str-pe span:first-child{padding-top:.28em;background:var(--lime)}
.str-nsb{font-family:'Permanent Marker',var(--f-d)}
.str-nsb span:first-child{background:var(--navy);color:var(--cream);border-color:var(--cream);box-shadow:4px 4px 0 var(--pink)}
.str-nsb span+span{background:var(--pink)}
.str-hyd{font-family:'Faster One',var(--f-d);text-transform:none}
.str-hyd span{background:var(--navy);color:var(--lime);border-color:var(--lime);box-shadow:4px 4px 0 var(--purple)}
.p-bag .str{left:-5%;top:8%}
.pick-card .str{left:14px;top:-26px;--fs:clamp(13px,1.15vw,17px)}
.pick-card .str span{border-width:2px;box-shadow:3px 3px 0 var(--navy)}
@media(max-width:980px){.p-bag .str{left:0;top:2%;--fs:18px}}
/* ---------- tabs to the other two blends ---------- */
.p-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(0px,.8vh,8px)}
.p-tabs button{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:3px 12px 3px 7px;border:2px solid var(--pi);background:transparent;color:var(--pi);font-size:13px;font-weight:700;white-space:nowrap;transition:background .15s,color .15s}
.p-tabs img{flex:none;height:30px;width:auto}
.p-tabs button[aria-current="true"]{background:var(--pi);color:var(--pc)}
@media(hover:hover){.p-tabs button:hover{background:var(--pi);color:var(--pc)}}
@media(min-width:981px) and (max-height:720px){.p-tabs img{display:none}.p-tabs button{min-height:32px;padding:2px 10px}}
/* ---------- the quiz ---------- */
.quiz{position:fixed;inset:0;z-index:120;overflow-y:auto;overscroll-behavior:contain;background:var(--qb,var(--pink));color:var(--qi,var(--navy));translate:0 calc(100% + var(--sawh));visibility:hidden;transition:translate .7s var(--snap),visibility 0s .7s,background .45s}
.quiz.open{translate:0;visibility:visible;transition:translate .7s var(--snap),background .45s}
.quiz[data-step="1"]{--qb:var(--lime)}.quiz[data-step="2"]{--qb:var(--sky)}.quiz[data-step="3"]{--qb:var(--purple)}
.quiz[data-step="r0"]{--qb:var(--sky)}.quiz[data-step="r1"]{--qb:var(--orange)}.quiz[data-step="r2"]{--qb:var(--navy);--qi:var(--cream)}
.quiz-x{position:absolute;right:20px;top:calc(env(safe-area-inset-top,0px) + 20px);z-index:2}
.quiz-in{min-height:100%;display:grid;place-items:center;padding:calc(env(safe-area-inset-top,0px) + 90px) var(--gut) 60px}
.quiz-ask{width:min(1120px,100%);display:flex;flex-direction:column;gap:clamp(18px,3.6vh,38px)}
.quiz-ask[hidden],.quiz-res[hidden]{display:none}
.quiz-k{display:flex;align-items:center;gap:16px;margin:0;font-size:15px;font-weight:700}
.quiz-bar{flex:1;max-width:260px;height:12px;border:2px solid var(--navy);background:rgba(255,255,255,.45)}
.quiz-bar i{display:block;width:0;height:100%;background:var(--navy);transition:width .4s var(--ease)}
.quiz-q{margin:0;font-family:var(--f-c);font-weight:400;font-size:clamp(46px,8.4vw,136px);line-height:.92;text-transform:uppercase;rotate:-2deg;transform-origin:0 50%}
.quiz-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2.2vw,34px);margin-top:clamp(10px,3vh,40px)}
.quiz-o{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:8px;min-height:clamp(150px,27vh,280px);padding:clamp(16px,2vw,28px);border:3px solid var(--navy);background:var(--white);color:var(--navy);box-shadow:9px 9px 0 var(--navy);text-align:left;rotate:calc((var(--i) - 1) * 1.6deg);transition:translate .16s var(--ease),box-shadow .16s var(--ease),background .15s,color .15s}
.quiz-o b{font-family:var(--f-c);font-weight:400;font-size:clamp(26px,3.1vw,50px);line-height:.98;text-transform:uppercase}
.quiz-o small{font-size:15px;font-weight:600}
.quiz-o img{position:absolute;right:5%;top:-16%;height:66%;width:auto;max-width:58%;object-fit:contain;pointer-events:none;transition:rotate .3s var(--pop),scale .3s var(--pop)}
.quiz-beans{display:flex;gap:7px;font-size:clamp(30px,3.4vw,50px);margin-bottom:auto}
.quiz-o:active,.quiz-o.picked{translate:9px 9px;box-shadow:0 0 0 var(--navy)}
.quiz-o.picked{background:var(--navy);color:var(--cream)}
@media(hover:hover){.quiz-o:hover{translate:-3px -3px;box-shadow:12px 12px 0 var(--navy);background:var(--cream)}.quiz-o:hover img{rotate:-6deg;scale:1.08}.quiz-o.picked:hover{translate:9px 9px;box-shadow:0 0 0 var(--navy);background:var(--navy)}}
.quiz-ask.in .quiz-q{animation:hit .34s var(--pop)}
.quiz-ask.in .quiz-o{animation:qin .42s var(--pop) both;animation-delay:calc(var(--i) * 70ms + 90ms)}
@keyframes qin{from{opacity:0;transform:translateY(46px) rotate(7deg)}to{opacity:1;transform:none}}
.quiz-res{width:min(1120px,100%);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,5vw,80px);align-items:center}
.quiz-bag{position:relative;display:grid;place-items:center;min-height:min(64vh,580px)}
.quiz-bag>img{position:relative;height:min(58vh,520px);width:auto;rotate:-5deg;filter:drop-shadow(0 26px 22px rgba(17,26,55,.32))}
.quiz-bag .p-burst{width:min(66vh,104%);scale:1;opacity:1;--burst:var(--cream)}
.quiz[data-step="r2"] .quiz-bag .p-burst{--burst:#3A2A7A}
.quiz-bag .str{left:0;top:5%;--fs:clamp(18px,2vw,30px)}
.quiz-copy{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.quiz-copy .tagline{margin:0}
.quiz-name{margin:0;font-family:var(--f-d);font-weight:400;font-size:clamp(38px,5.8vw,100px);line-height:.9;letter-spacing:-.02em;text-transform:uppercase}
.quiz-price{display:flex;align-items:baseline;gap:10px;margin:0}
.quiz-price .pick-price{font-size:clamp(28px,3.4vw,50px)}
.quiz-price .pick-size{font-size:15px}
.quiz-again{padding:6px 2px;color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.quiz-res.in .quiz-bag>img{animation:hit .5s var(--pop)}
.quiz-res.in .quiz-copy>*{animation:qin .42s var(--pop) both}
.quiz-res.in .quiz-copy>*:nth-child(2){animation-delay:.08s}.quiz-res.in .quiz-copy>*:nth-child(3){animation-delay:.16s}.quiz-res.in .quiz-copy>*:nth-child(n+4){animation-delay:.24s}
@media(max-width:760px){
  .quiz-opts{grid-template-columns:minmax(0,1fr);gap:16px}
  .quiz-o{min-height:104px;justify-content:center;padding-right:38%;rotate:calc((var(--i) - 1) * .8deg)}
  .quiz-o img{top:6%;right:4%;height:88%;max-width:34%}
  .quiz-beans{position:absolute;right:16px;top:50%;translate:0 -50%;font-size:26px;gap:4px;margin:0}
  .quiz-res{grid-template-columns:minmax(0,1fr);gap:10px}
  .quiz-bag{min-height:300px}.quiz-bag>img{height:270px}.quiz-bag .p-burst{width:300px}
}
.rm .quiz-ask.in .quiz-o,.rm .quiz-res.in .quiz-copy>*,.rm .quiz-res.in .quiz-bag>img{animation:none}
.pick-card{padding-top:40px;padding-bottom:22px}
.pick-card .str{top:-30px}
/* ---------- wholesale: a proper menu bar, and what it all adds up to ---------- */
.room-bar{gap:clamp(10px,2vw,28px);padding-block:calc(env(safe-area-inset-top,0px) + 12px) 12px;background:var(--navy);color:var(--cream);border-bottom:0}
.room-bar .logo{flex:none;--logo:var(--cream);--plate:transparent}
.room-nav{display:flex;align-items:center;gap:clamp(4px,1vw,14px);margin-right:auto}
.room-nav button{min-height:40px;padding:0 10px;color:var(--cream);font-size:14px;font-weight:700;white-space:nowrap;border-bottom:3px solid transparent;transition:color .15s,border-color .15s}
.room-nav button[aria-current="true"]{color:var(--lime);border-color:var(--lime)}
@media(hover:hover){.room-nav button:hover{color:var(--pink);border-color:var(--pink)}}
.room-bar-r{display:flex;align-items:center;gap:12px;margin-left:auto}
.room-bar .btn{--bs:var(--pink);border-color:var(--cream)}
.room-bar .btn:not(.btn-white){--bs:var(--lime)}
.room-bar .lbl-s{display:none}
@media(max-width:1060px){.room-nav{display:none}}
@media(max-width:700px){.room-bar .lbl-l{display:none}.room-bar .lbl-s{display:inline}.room-bar .btn{min-height:40px;padding:0 13px}}
.calc-total{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px clamp(16px,3vw,40px);margin-top:clamp(6px,2vh,20px);padding:clamp(18px,2.4vw,32px) clamp(18px,2.6vw,36px);border:3px solid var(--navy);background:var(--navy);color:var(--cream);box-shadow:10px 10px 0 var(--lime);rotate:-1deg}
.calc-total-l{grid-row:1/3;font-family:var(--f-c);font-size:clamp(30px,3.8vw,62px);line-height:.92;text-transform:uppercase;max-width:5.2em}
.calc-total strong{font-family:var(--f-d);font-weight:400;font-size:clamp(40px,6.4vw,104px);line-height:.95;color:var(--lime);font-variant-numeric:tabular-nums}
.calc-total small{font-size:14px;font-weight:500;line-height:1.4}
@media(max-width:700px){.calc-total{grid-template-columns:minmax(0,1fr)}.calc-total-l{grid-row:auto;max-width:none}}
.p-tabs button{background:var(--pc)}
/* phones: a bar of the three blends that stays under the menu while you are among them */
.blend-bar{display:none}
@media(max-width:980px){
  .p-tabs{display:none}
  .blend-bar{position:fixed;left:0;right:0;top:var(--top);z-index:58;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--navy);border-block:2px solid var(--navy);gap:2px;translate:0 -110%;visibility:hidden;transition:translate .28s var(--ease),visibility 0s .28s}
  .blend-bar.on{translate:0;visibility:visible;transition:translate .28s var(--ease)}
  .blend-bar button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:46px;padding:2px 4px;background:var(--cream);color:var(--navy);font-size:13px;font-weight:700;white-space:nowrap}
  .blend-bar img{flex:none;height:32px;width:auto}
  .blend-bar button[aria-current="true"]{background:var(--pink)}
  body.lock .blend-bar{display:none}
}
@media(max-width:980px){.p-grid{padding-top:calc(var(--top) + 66px)}}
/* the sneakers can be pushed */
.shoe{pointer-events:auto;cursor:grab;touch-action:pan-y}
.shoe:active{cursor:grabbing}
.shoe img{-webkit-user-drag:none;user-select:none}
.p-grid{pointer-events:none}.p-grid>*{pointer-events:auto}
.p-grid>.p-bag{pointer-events:none}.p-bag>*{pointer-events:auto}.p-bag>.p-burst,.p-bag>.str{pointer-events:none}
.panel-in>.pp-sneak{z-index:3;left:40.3vw}
@media(max-width:980px){.panel-in>.pp-sneak,.p-nsb .p-scene .wire{display:none}}
.panel-in>.pp-sneak{left:38.4vw}
@media(min-width:981px){.p-nsb .p-bag .str{left:14%;top:0}}
/* ================= wholesale, round two ================= */
.room .room-van{width:min(310px,40vw)}
.room-sec:nth-of-type(7){--rb:var(--sky)}
/* ---- flip cards ---- */
.flips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,36px);margin-top:clamp(26px,4.5vh,50px);perspective:1600px}
.flipc{display:block;text-align:left;color:var(--navy);rotate:calc((var(--i) - 2.5) * .5deg);transition:rotate .25s var(--ease),translate .25s var(--ease)}
.fc-in{display:grid;transform-style:preserve-3d;transition:transform .85s cubic-bezier(.3,1.35,.45,1)}
.flipc[aria-pressed="true"] .fc-in{transform:rotateY(-540deg)}
.fc-f,.fc-b{grid-area:1/1;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:clamp(250px,24vw,340px);padding:clamp(18px,2vw,30px);border:3px solid var(--navy);box-shadow:9px 9px 0 var(--navy);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.fc-f{background:var(--fc,var(--white))}
.fc-b{background:var(--navy);color:var(--cream);transform:rotateY(180deg);box-shadow:9px 9px 0 var(--fc,var(--pink))}
.flipc:nth-child(1){--fc:var(--pink)}.flipc:nth-child(2){--fc:var(--lime)}.flipc:nth-child(3){--fc:var(--purple)}.flipc:nth-child(4){--fc:var(--sky)}.flipc:nth-child(5){--fc:#F6B58A}.flipc:nth-child(6){--fc:var(--white)}
.fc-f img{align-self:center;height:clamp(110px,11vw,170px);width:auto;max-width:86%;object-fit:contain;margin:-34px 0 2px;rotate:-3deg;transition:rotate .3s var(--pop),scale .3s var(--pop);pointer-events:none}
.fc-f b,.fc-b b{font-family:var(--f-c);font-weight:400;font-size:clamp(26px,2.5vw,42px);line-height:.98;text-transform:uppercase;letter-spacing:.005em}
.fc-b b{color:var(--fc,var(--pink));font-size:clamp(20px,1.8vw,28px);margin-bottom:4px}
.flipc:nth-child(6) .fc-b b{color:var(--lime)}
.fc-f em{font-style:normal;font-weight:600;font-size:16px;line-height:1.3}
.fc-li{position:relative;display:block;padding-left:22px;font-weight:500;font-size:clamp(15px,1.2vw,17.5px);line-height:1.35}
.fc-li::before{content:'';position:absolute;left:2px;top:.42em;width:9px;height:9px;background:var(--fc,var(--pink));rotate:45deg}
.flipc:nth-child(6) .fc-li::before{background:var(--lime)}
.fc-go{margin-top:auto;padding:5px 10px 4px;border:2px solid currentColor;font-style:normal;font-size:12.5px;font-weight:700;line-height:1}
@media(hover:hover){.flipc:hover{rotate:0deg;translate:0 -4px}.flipc:hover .fc-f img{rotate:4deg;scale:1.07}}
.flipc:focus-visible{outline-offset:8px}
@media(max-width:1000px){.flips{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:46px}}
@media(max-width:620px){.flips{grid-template-columns:minmax(0,1fr)}.fc-f,.fc-b{min-height:230px}.fc-f img{height:120px}}
.rm .fc-in{transition:none}.rm .flipc[aria-pressed="true"] .fc-in{transform:rotateY(180deg)}
/* ---- signal, as the phone shows it ---- */
.sg{padding:clamp(22px,3.4vw,56px);background:radial-gradient(120% 90% at 85% 10%,#2a1740 0%,#150d22 45%,#0c0913 100%)}
.sg-body{grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:center}
.sg-left{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(14px,2.2vh,22px);min-width:0}
.sg-top{width:100%;justify-content:flex-start;gap:16px}
.sg-sub{margin-top:0}
.sg-card{width:100%;max-width:480px;min-height:0;padding:16px;border-radius:22px;border:1px solid var(--sgl);background:rgba(25,19,33,.72)}
.sg-device{display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0}
.sg-phone{width:min(100%,372px);padding:0;border-radius:50px;border:0;background:#17121f;rotate:1.5deg;box-shadow:0 0 0 2px #5b5266,0 0 0 9px #1c1724,0 0 0 11px #4a4254,0 30px 60px rgba(0,0,0,.55);overflow:hidden}
.sg-status{display:flex;align-items:center;justify-content:space-between;padding:16px 26px 6px;font-size:13px;font-weight:700;color:var(--sgi)}
.sg-island{width:92px;height:26px;border-radius:999px;background:#07050b}
.sg-batt{width:22px;height:11px;border-radius:3px;border:1.5px solid var(--sgi);background:linear-gradient(90deg,var(--sgi) 62%,transparent 62%)}
.sg-app-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 20px 14px;border-bottom:1px solid var(--sgl)}
.sg-logo.sm{font-size:23px;gap:8px}
.sg-chip{padding:7px 12px;border-radius:10px;border:1px solid var(--sgl);font-size:12.5px;font-weight:500;color:var(--sgm)}
.sg-app{padding:14px 16px 16px}
.sg-venue{margin:0;font-size:12.5px;color:var(--sgm);font-family:var(--f-b)}
.sg-app-h{margin:6px 0 0;font-weight:700;font-size:23px;letter-spacing:-.03em;line-height:1.1}
.sg-app-sub{margin:4px 0 0;font-size:13.5px;color:var(--sgm);font-family:var(--f-b)}
.sg-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:12px;padding:4px;border-radius:14px;border:1px solid var(--sgl);background:#17121f}
.sg-seg button{min-height:38px;border-radius:10px;color:var(--sgm);font-size:13.5px;font-weight:500;transition:background .2s,color .2s}
.sg-seg button[aria-pressed="true"]{background:var(--sgr);color:var(--sgi)}
.sg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:11px}
.sg-tile{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:0;padding:12px 13px 12px;border-radius:18px;border:1px solid var(--sgl);background:#1b1525;color:var(--sgi);text-align:left;transition:border-color .25s,background .25s,translate .25s var(--ease)}
.sg-tile.on{background:linear-gradient(135deg,#7c4fd8 0%,#9a55dd 55%,#b85bd6 100%);border-color:#c79bff;translate:0 -2px}
.sg-tl{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;color:var(--sgi)}
.sg-tl i{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:color-mix(in srgb,var(--tone) 22%,#1b1525);color:var(--tone);font-style:normal;font-size:12px;font-weight:700}
.sg-tile.on .sg-tl i{background:rgba(255,255,255,.22);color:#fff}
.sg-tile b.sg-v{font-size:25px;font-weight:700;letter-spacing:-.04em;line-height:1.15;color:var(--sgi)}
.sg-d{font-style:normal;font-size:13.5px;font-weight:700;color:#8fe07a}
.sg-d.bad{color:#ffb86b}
.sg-tile.on .sg-d{color:#fff}
.sg-tile small{font-size:11.5px;color:var(--sgm);font-family:var(--f-b)}
.sg-tile.on small{color:rgba(255,255,255,.82)}
.sg-prog{display:block;width:100%;height:4px;margin:3px 0 2px;border-radius:4px;background:#2c2438;overflow:hidden}
.sg-prog i{display:block;height:100%;border-radius:4px;background:#8fe07a}
.sg-tabbar{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:8px 12px 20px;border-top:1px solid var(--sgl);background:#1a1522}
.sg-tabbar span{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 0 6px;border-radius:12px;font-size:11.5px;font-weight:500;color:var(--sgm)}
.sg-tabbar span.on{background:var(--sgr);color:#bb85ff}
.sg-tap{margin:0;font-size:13px;color:var(--sgm);font-family:var(--f-b)}
@media(max-width:860px){.sg-body{grid-template-columns:minmax(0,1fr)}.sg-device{order:-1}.sg-phone{rotate:0deg}}
/* ---- more art ---- */
.rm-art{position:absolute;z-index:0;height:auto;pointer-events:none}
.rm-beans{right:1%;top:clamp(10px,3vh,40px);width:min(170px,17vw);rotate:10deg;animation:floaty 7s ease-in-out infinite}
.rm-pigeon{right:2%;top:clamp(0px,2vh,30px);width:min(130px,15vw);transform-origin:50% 100%;animation:sway 5s ease-in-out infinite}
.rm-cart{right:0;top:clamp(-30px,-2vh,0px);width:min(190px,19vw);rotate:3deg}
@media(max-width:860px){.rm-beans,.rm-cart{display:none}.rm-pigeon{width:84px;top:6px}}
/* ---- reading ---- */
.reads{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,26px);margin-top:clamp(24px,4vh,44px)}
.read{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:190px;padding:clamp(16px,1.8vw,24px);border:3px solid var(--navy);background:var(--white);color:var(--navy);box-shadow:8px 8px 0 var(--navy);transition:translate .2s var(--ease),box-shadow .2s var(--ease),background .15s}
.read b{font-family:var(--f-c);font-weight:400;font-size:clamp(28px,2.6vw,44px);line-height:.98;text-transform:uppercase}
.read span{font-weight:500;line-height:1.35}
.read i{margin-top:auto;font-style:normal;font-weight:700;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.rd-365{background:var(--navy);color:var(--cream);box-shadow:8px 8px 0 var(--orange)}
.rd-365 b{font-size:clamp(46px,5vw,84px);color:var(--orange)}
.read:active{translate:8px 8px;box-shadow:0 0 0 var(--navy)}
@media(hover:hover){.read:hover{translate:-3px -3px;box-shadow:11px 11px 0 var(--navy);background:var(--lime)}.rd-365:hover{background:var(--navy);box-shadow:11px 11px 0 var(--orange)}}
@media(max-width:1000px){.reads{grid-template-columns:repeat(2,minmax(0,1fr))}.reads .rd-365{grid-column:1/-1}}
@media(max-width:560px){.reads{grid-template-columns:minmax(0,1fr)}.read{min-height:150px}}
/* ---- footer ---- */
.room-foot{position:relative;color:var(--cream);padding-top:6px}
.room-foot::before{content:'';position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;translate:-50% 0;background:var(--navy)}
.room-foot .foot-grid{border-top:0;padding-top:clamp(40px,7vh,80px)}
.room-foot .foot-col button{min-height:36px;font-weight:500;color:var(--cream);text-align:left;transition:translate .3s var(--ease),color .2s}
.room-foot .foot-col a{line-height:1.3;padding-block:6px;min-height:0}
.rf-contact{display:flex;flex-direction:column;gap:2px;margin:0}
.rf-contact a{font-family:var(--f-d);font-size:clamp(15px,1.5vw,20px);overflow-wrap:anywhere}
@media(hover:hover){.room-foot .foot-col button:hover{color:var(--pink);translate:6px 0}}
.room-end .btn{--bs:var(--navy)}
/* the sign-off has its own way in */
.end-card{position:relative;z-index:1;width:min(1040px,100%);padding:clamp(18px,2.4vw,32px);border:3px solid var(--navy);background:var(--white);color:var(--navy);box-shadow:12px 12px 0 var(--navy);text-align:left;rotate:-.8deg}
.end-card.taped::after{--tape:rgba(210,245,92,.95)}
.end-form,.end-sent{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.end-form[hidden],.end-sent[hidden]{display:none}
.end-h{margin:0;font-family:var(--f-d);font-weight:400;font-size:clamp(18px,2vw,28px);line-height:1.05;text-transform:uppercase}
.end-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:12px 14px;align-items:end;width:100%}
.end-fields .btn{min-height:48px;--bs:var(--purple)}
.end-card .fine{margin:0}.end-card .fine a{font-weight:700;text-decoration:underline;text-underline-offset:3px}
@media(max-width:860px){.end-fields{grid-template-columns:minmax(0,1fr)}.end-fields .btn{width:100%}}
/* ================= the 25 second game ================= */
.play-ui{position:absolute;z-index:4;left:var(--gut);top:calc(var(--sawh) + 8vh + clamp(40px,9.6vw,176px) * 2.72 + 26px);display:flex;flex-direction:column;align-items:flex-start;gap:12px;max-width:min(520px,60vw);pointer-events:none}
.play-ui>*{pointer-events:auto}
.play-ui .play-note{position:static;pointer-events:none}
.play-ui .play-note.done{display:none}
.play-btns{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.btn-game{min-height:52px;padding:0 20px;background:var(--pink);border-color:var(--cream);font-size:15px;rotate:-1.5deg;--bs:var(--lime)}
.btn-game:disabled{background:var(--lime);opacity:1;cursor:default;rotate:0deg}
.play-link{padding:6px 2px;color:var(--cream);font-weight:700;font-size:14.5px;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.play-goal{margin:0;color:var(--cream);font-size:14px;font-weight:500;max-width:34ch}
.cb-run .led polygon{fill:rgba(210,245,92,.12)}
.led-run.hot polygon.on{fill:#FF3B3B;filter:drop-shadow(0 0 3px #FF0000)}
.play.game .court-board{animation:boardswing 1.2s ease-out}
.count5{position:absolute;left:50%;top:44%;z-index:6;translate:-50% -50%;font-family:var(--f-d);font-weight:400;font-size:clamp(120px,24vw,360px);line-height:1;color:var(--lime);-webkit-text-stroke:4px var(--navy);paint-order:stroke fill;opacity:0;pointer-events:none}
.count5.go{animation:count5 .9s var(--ease) both}
@keyframes count5{0%{opacity:0;scale:.4}14%{opacity:.9;scale:1.1}30%{scale:1}100%{opacity:0;scale:1.25}}
@media(max-width:700px),(max-aspect-ratio:1/1){
  .play-ui{top:calc(var(--pt) + clamp(34px,9.4vw,60px) * 2.78 + 18px);max-width:56vw;gap:9px}
  .play-ui .play-note{max-width:none}
  .btn-game{min-height:46px;padding:8px 13px;font-size:13.5px;white-space:normal;text-align:left;line-height:1.2}
  .play-goal{font-size:12.5px}
  .cb-run{display:flex}
  .cb-in{gap:5%}
}
.rm .play-btns,.rm .play-goal,.rm .count5{display:none}
/* full time */
.gm{position:fixed;inset:0;z-index:125;display:grid;place-items:center;padding:calc(env(safe-area-inset-top,0px) + 18px) 16px 18px;overflow-y:auto;overscroll-behavior:contain;background:rgba(17,26,55,.93);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.gm.open{opacity:1;visibility:visible;transition:opacity .3s}
.gm-card{position:relative;width:min(980px,100%);display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);border:3px solid var(--navy);background:var(--cream);color:var(--navy);box-shadow:14px 14px 0 var(--pink);scale:.92;rotate:-1.5deg;transition:scale .5s var(--pop),rotate .5s var(--pop)}
.gm.open .gm-card{scale:1;rotate:0deg}
.gm-x{position:absolute;right:-14px;top:-14px;z-index:2;width:46px;height:46px}
.gm-res{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:clamp(20px,3vw,40px)}
.gm-k{margin:0;font-family:var(--f-c);font-size:clamp(46px,6vw,86px);line-height:.9;text-transform:uppercase;rotate:-2deg}
.gm-score{display:flex;align-items:baseline;gap:12px;margin:0}
.gm-score[hidden],.gm-form[hidden],.gm-done[hidden],.gm-form .field[hidden]{display:none}
.gm-score b{font-family:var(--f-d);font-weight:400;font-size:clamp(70px,10vw,140px);line-height:.9;color:var(--pink);-webkit-text-stroke:3px var(--navy);paint-order:stroke fill;font-variant-numeric:tabular-nums}
.gm-score span{font-family:var(--f-d);font-size:clamp(18px,2vw,28px);text-transform:uppercase}
.gm-line{margin:0;font-size:clamp(16px,1.3vw,19px);font-weight:500;line-height:1.4;max-width:40ch}
.gm-form{display:flex;flex-direction:column;gap:12px;width:100%;max-width:400px}
.gm-form .field input{background:var(--white)}
.gm-done{margin:0;padding:12px 14px;border:2px solid var(--navy);background:var(--lime);font-weight:600;line-height:1.4;max-width:42ch}
.gm-board{display:flex;flex-direction:column;gap:12px;padding:clamp(20px,3vw,40px);background:var(--navy);color:var(--cream)}
.gm-bh{margin:0;font-family:var(--f-d);font-size:clamp(20px,2.2vw,30px);text-transform:uppercase;color:var(--lime)}
.gm-board ol{list-style:none;margin:0;padding:0;counter-reset:rank;border-top:2px solid var(--cream)}
.gm-board li{counter-increment:rank;display:flex;align-items:center;gap:12px;min-height:44px;padding:6px 4px;border-bottom:1px solid rgba(240,240,234,.35);font-weight:600}
.gm-board li::before{content:counter(rank);flex:none;width:1.6em;font-family:var(--f-d);font-size:15px;color:var(--pink)}
.gm-board li span{flex:1;min-width:0;display:flex;align-items:center;gap:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gm-board li i{flex:none;padding:2px 6px 1px;border:1px solid currentColor;font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.gm-board li b{font-family:var(--f-d);font-weight:400;font-size:20px;font-variant-numeric:tabular-nums}
.gm-board li.me{background:var(--pink);color:var(--navy);padding-inline:10px}
.gm-board li.me::before{color:var(--navy)}
.gm-board .fine{margin:0;opacity:.75}
@media(max-width:760px){.gm{place-items:start center}.gm-card{grid-template-columns:minmax(0,1fr);margin-top:20px}.gm-x{right:-6px;top:-14px}}
.gm:not(.open),.quiz:not(.open),.box:not(.open){pointer-events:none}
@media(max-width:700px),(max-aspect-ratio:1/1){.play-goal{max-width:41vw}.play-ui{max-width:52vw}}
/* ---- the real people who pick up ---- */
.faces{display:inline-flex;align-items:center;flex:none}
.faces img{display:block;width:clamp(88px,9.5vw,136px);aspect-ratio:1;border-radius:50%;border:4px solid var(--navy);background:var(--navy);box-shadow:5px 5px 0 var(--navy);pointer-events:none;-webkit-touch-callout:none;user-select:none}
.faces img:first-child{position:relative;z-index:1;rotate:-5deg}
.faces img+img{margin-left:-20px;rotate:6deg}
.team{position:relative;display:flex;align-items:center;gap:clamp(16px,2.4vw,34px);margin-top:clamp(20px,3.4vh,36px);max-width:860px}
.team-t{margin:0;font-size:clamp(16px,1.35vw,20px);line-height:1.45;font-weight:500}
.team-t b{display:block;font-family:var(--f-c);font-weight:400;font-size:clamp(28px,2.8vw,46px);line-height:1;text-transform:uppercase;margin-bottom:6px}
.team-note{position:absolute;left:clamp(40px,5vw,76px);top:calc(100% - 4px);rotate:-5deg;font-size:clamp(15px,1.3vw,20px)}
.team+.ways{margin-top:clamp(44px,6vh,64px)}
.fc-people{padding-top:clamp(52px,5vw,72px)}
.fc-faces{position:absolute;left:clamp(14px,1.8vw,26px);top:-30px}
.fc-faces img{width:clamp(70px,6.6vw,92px);border-color:var(--cream);box-shadow:4px 4px 0 var(--lime)}
@media(max-width:620px){.team{flex-direction:column;align-items:flex-start}.team-note{left:210px;top:44px}}
/* ================= the court, round three: it has to play in every browser and at every window height ================= */
/* the floor stops short of the bottom edge: the music dock and the stepper sit in that strip, never on the balls */
.play{--apron:80px;--pf:clamp(40px,min(9.6vw,30.9vh - 146px),176px)}
.play-apron{position:absolute;left:0;right:0;bottom:0;height:var(--apron);background:repeating-linear-gradient(-45deg,rgba(240,240,234,.07) 0 2px,transparent 2px 13px);pointer-events:none}
.play::after{content:'';position:absolute;left:var(--gut);right:var(--gut);bottom:calc(var(--apron) - 3px);height:3px;background:var(--cream);pointer-events:none}
.foot>.wrap>.foot-grid{border-top:0}
.play-type{font-size:var(--pf)}
.play-ui{top:calc(var(--sawh) + 8vh + var(--pf) * 2.72 + 26px);max-width:min(760px,62vw)}
/* only the buttons take a press: a ball that rolls under the words can still be picked up */
.play-ui>*{pointer-events:none}
.play-ui button{pointer-events:auto}
.play-goal{flex:1 1 200px;max-width:30ch}
.tk{-webkit-user-select:none;-webkit-touch-callout:none}
.tk[hidden]{display:none}
/* the shot clock is lit the whole game, and turns red for the last five */
.cb-run .led polygon.on{fill:var(--lime);filter:drop-shadow(0 0 2.5px #9EDB1F)}
.cb-run .led.hot polygon.on{fill:#FF3B3B;filter:drop-shadow(0 0 3px #FF0000)}
@media(max-width:1100px){.play{--apron:calc(env(safe-area-inset-bottom,0px) + 86px)}}
@media(max-width:700px),(max-aspect-ratio:1/1){
  .play{height:clamp(560px,88vh,760px);--pf:clamp(30px,min(9.4vw,6.4vh),60px)}
  .play-ui{top:calc(var(--pt) + var(--pf) * 2.78 + 18px);max-width:56vw}
  .play-goal{flex-basis:100%;display:none}
  .play.game .play-goal{display:block}   /* the button already says it: the line only shows once a game is on */
}
/* ================= icons on the backs of the wholesale cards: one for each line ================= */
.fc-has{padding-top:clamp(50px,4.8vw,70px)}
.fc-ics{position:absolute;left:clamp(12px,1.6vw,24px);right:clamp(12px,1.6vw,24px);top:0;translate:0 -44%;display:flex;align-items:flex-end;gap:clamp(8px,1.1vw,16px);pointer-events:none}
.fc-ics img{flex:0 1 auto;min-width:0;height:clamp(66px,6.4vw,96px);width:auto;max-width:none;object-fit:contain;object-position:50% 100%;rotate:calc((var(--k) - 1) * 5deg);filter:drop-shadow(0 6px 5px rgba(0,0,0,.35))}
.flipc[aria-pressed="true"] .fc-ics img{animation:icpop .5s var(--pop) both;animation-delay:calc(.42s + var(--k) * 90ms)}
@keyframes icpop{from{opacity:0;translate:0 26px;scale:.5}}
.rm .flipc[aria-pressed="true"] .fc-ics img{animation:none}
@media(max-width:620px){.fc-ics img{height:68px}.fc-has{padding-top:52px}}
/* ================= the game pop up gets its own art ================= */
.gm-res{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;justify-items:start}
.gm-res>*{grid-column:1/-1}
.gm-res>.gm-score,.gm-res>.gm-line{grid-column:1}
.gm-res>.gm-art{grid-column:2;grid-row:2/span 2;align-self:center;width:clamp(120px,15vw,200px);height:auto;margin:-26px -14px -12px 0;rotate:6deg;pointer-events:none;filter:drop-shadow(0 12px 10px rgba(17,26,55,.25))}
.gm-art.win{rotate:-5deg}
.gm.open .gm-art{animation:hit .5s var(--pop) .18s both}
.gm-score{flex-wrap:wrap;row-gap:0}
.rm .gm.open .gm-art{animation:none}
@media(max-width:760px){.gm-res>.gm-art{width:clamp(96px,28vw,130px);margin:-12px -6px -8px 0}}
/* ================= the quiz, round two: the art is the answer ================= */
.quiz-q{font-size:clamp(44px,min(7.6vw,13vh),124px)}
.quiz-opts{margin-top:clamp(64px,13vh,150px)}
.quiz-o{min-height:clamp(170px,30vh,300px);padding-top:clamp(84px,15vh,150px)}
.quiz-o img{left:50%;right:auto;top:0;translate:-50% -46%;height:clamp(150px,27vh,270px);max-width:94%;filter:drop-shadow(0 12px 10px rgba(17,26,55,.28))}
.quiz-ask.in .quiz-o img{animation:qart .5s var(--pop) both;animation-delay:calc(var(--i) * 70ms + 220ms)}
@keyframes qart{from{opacity:0;translate:-50% -20%;scale:.6}}
.quiz-beans{font-size:clamp(20px,2vw,30px);margin:0}
@media(hover:hover){.quiz-o:hover img{rotate:-5deg;scale:1.07}}
.quiz[data-step="s"]{--qb:var(--cream)}
.quiz-res.spin .quiz-copy,.quiz-res.spin .quiz-bag .str{visibility:hidden}
.quiz-res.spin .quiz-bag>img{animation:bagspin .21s linear infinite}
@keyframes bagspin{0%{translate:0 -22px;scale:.93}50%{translate:0 0;scale:1}100%{translate:0 22px;scale:.93}}
.quiz-match{width:100%;max-width:470px;display:flex;flex-direction:column;gap:4px;margin-top:4px}
.quiz-mh{margin:0 0 2px;font-size:13px;font-weight:700}
.quiz-mr{display:grid;grid-template-columns:minmax(0,11.5em) minmax(0,1fr) 3.3em;align-items:center;gap:10px;min-height:36px;color:inherit;text-align:left;font-size:14.5px;font-weight:600}
.quiz-mr>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:transparent;transition:text-decoration-color .2s}
.quiz-mr>i{display:block;height:15px;border:2px solid currentColor;background:rgba(255,255,255,.4)}
.quiz-mr>i>i{display:block;height:100%;width:var(--w);background:currentColor;transform-origin:0 50%}
.quiz-mr.win>i>i{background:var(--pink);border-right:2px solid var(--navy)}
.quiz-res.in .quiz-mr>i>i{animation:mgrow .7s var(--ease) both;animation-delay:calc(.5s + var(--n) * .13s)}
@keyframes mgrow{from{transform:scaleX(0)}}
.quiz-mr>b{font-family:var(--f-d);font-weight:400;font-size:15px;text-align:right;font-variant-numeric:tabular-nums}
@media(hover:hover){.quiz-mr:hover>span{text-decoration-color:currentColor}}
.quiz[data-step="r2"] .quiz-mr>i{background:rgba(255,255,255,.12)}
@media(max-width:760px){
  .quiz-opts{margin-top:14px;gap:22px}
  .quiz-o{min-height:128px;padding:16px 42% 16px 16px}
  .quiz-o img{left:auto;right:1%;top:50%;translate:0 -50%;height:128%;max-width:42%}
  .quiz-ask.in .quiz-o img{animation-name:qartm}
  .quiz-beans{position:static;translate:none;font-size:20px;gap:4px}
  .quiz-mr{grid-template-columns:minmax(0,11.4em) minmax(0,1fr) 2.9em;gap:8px;font-size:13px}
}
@keyframes qartm{from{opacity:0;translate:30% -50%;scale:.6}}
.rm .quiz-ask.in .quiz-o img,.rm .quiz-res.in .quiz-mr>i>i{animation:none}
.fc-ics img{height:clamp(72px,7.2vw,108px)}
.fc-has{padding-top:clamp(54px,5.2vw,76px)}
@media(max-width:620px){.fc-ics img{height:74px}.fc-has{padding-top:56px}}
/* the pop up centres when there is room and scrolls from the top when there is not */
.gm{place-items:start center}
.gm-card{margin-block:auto}
.gm-res>.gm-art{width:clamp(120px,16vw,220px)}
@media(max-width:760px){.gm-card{margin-top:20px}.gm-res>.gm-art{width:clamp(96px,28vw,130px)}}
/* the floor came up, so the hoop is a touch smaller: the net clears the balls and the board stays off the shot clock */
.play{--hw:clamp(170px,min(27vw,42vh),400px)}
@media(max-width:700px),(max-aspect-ratio:1/1){.play{--hw:56vw}}
/* ================= round fifteen ================= */
/* ---- nothing we love gets cut off by the next section's zigzag ---- */
.p-scene{inset:0 0 calc(var(--sawh) * .82) 0}
.pp-kombi,.pp-husky,.pp-cab,.pp-bigfoot,.pp-rover{bottom:.8vh}
.wall-pin{padding-bottom:calc(var(--sawh) + 30px)}
@media(max-width:980px){.wall-pin{padding-bottom:calc(var(--sawh) + 40px)}}
/* ---- the street: three blocks end to end, rolling past, edge to edge ---- */
.st-roll{display:flex;align-items:flex-end;width:max-content;animation:stroll 90s linear infinite;will-change:transform}
.st-roll img,.rm-street .st-roll img,.biz-street .st-roll img{display:block;flex:none;width:var(--sw);max-width:none;height:auto;margin-right:calc(var(--sw) * -.007);animation:none}
@keyframes stroll{to{transform:translateX(-50%)}}
.rm .st-roll{animation:none}
.biz-street{left:0;width:100%;translate:none;bottom:calc(var(--sawh) * .85);--sw:clamp(780px,100vw,1560px)}
.biz.sec{padding-bottom:calc(clamp(780px,100vw,1560px) * .3 + var(--sawh) * 1.4)}
.rm-street{bottom:calc(var(--sawh) * .85);--sw:max(100vw,820px)}
.room-hero{padding-bottom:calc(max(30vw,246px) + var(--sawh) * 1.1)}
.room .room-van{bottom:calc(var(--sawh) * .85 - 4px)}
/* ---- the ticker: what you get, on a loop that never breaks ---- */
.rm-mq{padding:10px 0 8px}
.rm-mq-t{animation-duration:58s;gap:clamp(16px,1.8vw,30px);padding-right:clamp(16px,1.8vw,30px)}
.rm-mq-t .k{padding:.14em .38em .06em;background:var(--navy);color:var(--lime);rotate:-1.5deg}
.rm-mq-t i{width:.66em;height:.66em;background:var(--pink);clip-path:var(--burstp);rotate:0deg;animation:spinr 9s linear infinite}
@media(hover:hover){.rm-mq:hover .rm-mq-t{animation-play-state:paused}}
.rm .rm-mq-t i{animation:none}
/* ---- the problem, straight after the hero: dockets on the pass ---- */
.room-prob{position:relative;--rb:var(--navy);color:var(--cream);padding-block:clamp(44px,8vh,90px) calc(clamp(40px,7vh,80px) + var(--sawh))}
.room-prob::before{content:'';position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;translate:-50% 0;background:var(--rb)}
.room-prob::after{content:'';position:absolute;z-index:-1;left:50%;width:100vw;translate:-50% 0;bottom:calc(100% - 1px);height:var(--sawh);background:var(--rb);clip-path:var(--saw);pointer-events:none}
.prob-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(18px,4vw,70px);align-items:end}
.room-prob .h3{margin:0;font-family:var(--f-d);font-weight:400;text-transform:uppercase;font-size:clamp(30px,4.7vw,78px);line-height:.94;letter-spacing:-.02em}
.room-prob .h3 .hl{margin-top:.1em}
.room-prob .lead{margin:0}
.pass{position:relative;margin-top:clamp(36px,6vh,70px)}
.pass-rail{position:absolute;left:50%;width:100vw;translate:-50% 0;top:0;height:18px;background:linear-gradient(#E4E4DC,#A3A8B4 55%,#6C7284);border-block:3px solid #080C1E;box-shadow:0 7px 0 rgba(0,0,0,.28)}
.pass-row{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(8px,1.1vw,18px);align-items:start;padding-top:9px;filter:drop-shadow(5px 8px 0 rgba(0,0,0,.34))}
.dkt{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:9px;min-height:clamp(230px,19vw,290px);padding:30px clamp(11px,1.1vw,16px) 34px;background:#FBF9F1;color:var(--navy);text-align:left;transform-origin:50% 0;rotate:calc((var(--i) - 2.5) * .8deg);clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),95% 100%,90% calc(100% - 9px),85% 100%,80% calc(100% - 9px),75% 100%,70% calc(100% - 9px),65% 100%,60% calc(100% - 9px),55% 100%,50% calc(100% - 9px),45% 100%,40% calc(100% - 9px),35% 100%,30% calc(100% - 9px),25% 100%,20% calc(100% - 9px),15% 100%,10% calc(100% - 9px),5% 100%,0 calc(100% - 9px));transition:rotate .3s var(--pop),translate .2s var(--ease),background .25s}
.dkt::before{content:'';position:absolute;left:50%;top:0;width:42px;height:13px;margin-left:-21px;background:#080C1E}
.dk-t{width:100%;padding-bottom:7px;border-bottom:2px dashed rgba(17,26,55,.45);font-family:'Space Grotesk',var(--f-b);font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.dkt b{font-family:var(--f-c);font-weight:400;font-size:clamp(22px,2vw,31px);line-height:.98;text-transform:uppercase;text-decoration:line-through transparent 3px;transition:text-decoration-color .25s}
.dk-p{font-family:'Permanent Marker',cursive;font-size:clamp(14px,1.15vw,16.5px);line-height:1.2;transition:opacity .25s}
.dk-fix{display:none;flex-direction:column;align-items:flex-start;gap:8px;font-weight:700;font-size:clamp(14.5px,1.15vw,16.5px);line-height:1.25}
.dk-fix i{padding:.22em .5em .1em;border:3px solid var(--pink);color:var(--pink);font-family:var(--f-c);font-style:normal;font-size:clamp(20px,1.9vw,28px);line-height:1;text-transform:uppercase;letter-spacing:.04em;rotate:-7deg}
.dkt[aria-pressed="true"]{background:var(--lime)}
.dkt[aria-pressed="true"] b{text-decoration-color:var(--navy)}
.dkt[aria-pressed="true"] .dk-p{display:none}
.dkt[aria-pressed="true"] .dk-fix{display:flex}
.dkt[aria-pressed="true"] .dk-fix i{animation:hit .34s var(--pop)}
@media(hover:hover){.dkt:hover{rotate:calc((var(--i) - 2.5) * -1.1deg);translate:0 5px}}
.dkt:focus-visible{outline:3px solid var(--pink);outline-offset:-6px}
.prob-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin:clamp(24px,4vh,44px) 0 0}
.prob-foot .aside{margin:0}
@media(max-width:1100px){
  .prob-head{grid-template-columns:minmax(0,1fr)}
  .pass-row{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;margin-inline:calc(var(--gut) * -1);padding:9px var(--gut) 18px;scrollbar-width:none}
  .pass-row::-webkit-scrollbar{display:none}
  .dkt{flex:0 0 min(62vw,236px);scroll-snap-align:center;min-height:236px}
}
.rm .dkt{transition:none}
/* ---- the guarantee: a ticket, a timeline, and the sticker ---- */
#rGuar{padding-bottom:calc(clamp(150px,19vw,280px) + var(--sawh))}
.gt{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);background:var(--cream);color:var(--navy);border:3px solid var(--navy);box-shadow:12px 12px 0 var(--navy);rotate:-.5deg}
.gt-stub{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,2vw,26px);padding:clamp(22px,3vw,46px) clamp(22px,3.4vw,54px);background:var(--navy);color:var(--cream);border-right:4px dashed var(--cream);text-align:center}
.gt-stub::before,.gt-stub::after{content:'';position:absolute;right:-17px;width:30px;height:30px;border-radius:50%;background:var(--lime);border:3px solid var(--navy)}
.gt-stub::before{top:-18px;clip-path:inset(50% 0 0 0)}
.gt-stub::after{bottom:-18px;clip-path:inset(0 0 50% 0)}
.gt-stub b{font-family:var(--f-c);font-weight:400;font-size:clamp(17px,1.7vw,27px);line-height:1.02;text-transform:uppercase;letter-spacing:.01em}
.room .gt .guar-n{width:clamp(120px,15vw,230px);font-size:clamp(56px,7.6vw,118px);color:var(--navy)}
.gt-body{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:clamp(22px,3.4vw,52px)}
.gt-body .h3,.gt-body .lead{margin:0}
.gt-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;margin:14px 0 0;padding:0;border-top:3px solid var(--navy)}
.gt-steps li{position:relative;display:flex;flex-direction:column;gap:5px;padding:22px 18px 0 0}
.gt-steps li::before{content:'';position:absolute;left:1px;top:-11px;width:17px;height:17px;background:var(--pink);border:3px solid var(--navy);rotate:45deg}
.gt-steps li:last-child::before{background:var(--lime)}
.gt-steps b{font-family:var(--f-d);font-weight:400;font-size:clamp(16px,1.6vw,25px);line-height:1;text-transform:uppercase}
.gt-steps span{font-size:15px;font-weight:500;line-height:1.35;max-width:24ch}
.gt-fine{margin:0;font-size:14px;font-weight:600}
.gt-stk{position:absolute;right:clamp(-22px,-1.2vw,-8px);top:clamp(64px,8.6vw,138px);z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:.16em;margin:0;font-family:'Luckiest Guy',var(--f-d);font-size:clamp(17px,2vw,33px);line-height:1;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;rotate:6deg;pointer-events:none}
.gt-stk span{display:block;padding:.32em .42em .08em;border:3px solid var(--navy);background:var(--pink);color:var(--navy);box-shadow:5px 5px 0 var(--navy);rotate:-3deg}
.gt-stk span+span{background:var(--white);rotate:1.5deg;translate:.55em 0}
.gt-body .lead{max-width:min(52ch,calc(100% - clamp(190px,25vw,400px)))}
.rm-rider{width:min(300px,38vw);--t:15s}
@media(max-width:1100px){
  .gt-stk{position:static;rotate:-2deg;margin:4px 0 6px;font-size:clamp(17px,4.6vw,26px)}
  .gt-body .lead{max-width:52ch}
}
@media(max-width:760px){
  .gt{grid-template-columns:minmax(0,1fr)}
  .gt-stub{flex-direction:row;justify-content:flex-start;border-right:0;border-bottom:4px dashed var(--cream);text-align:left}
  .gt-stub::before,.gt-stub::after{right:auto;top:auto;bottom:-17px;clip-path:inset(0 50% 0 0)}
  .gt-stub::before{left:-18px;clip-path:inset(0 0 0 50%)}
  .gt-stub::after{right:-18px}
  .room .gt .guar-n{width:104px;font-size:48px}
  .gt-steps{grid-template-columns:minmax(0,1fr);border-top:0;border-left:3px solid var(--navy);margin-left:8px;width:auto}
  .gt-steps li{padding:0 0 18px 22px}
  .gt-steps li::before{left:-12px;top:2px}
  .gt-steps li:last-child{padding-bottom:0}
}
/* ---- the bike is bigger when he comes past ---- */
.sub-rider{width:min(25vh,19vw)}
@media(max-width:700px){.sub-rider{width:38vw}}
/* ---- names under the two of us ---- */
.faces .face{position:relative;display:block;flex:none}
.faces .face:first-child{z-index:1;rotate:-5deg}
.faces .face+.face{margin-left:-20px;rotate:6deg}
.faces .face img{position:static;rotate:0deg;margin:0}
.faces .face b{position:absolute;left:50%;top:calc(100% - 13px);z-index:2;translate:-50% 0;padding:4px 10px 2px;border:2px solid var(--navy);background:var(--white);color:var(--navy);box-shadow:3px 3px 0 var(--navy);font-family:var(--f-d);font-weight:400;font-size:13px;line-height:1.1;text-transform:uppercase;white-space:nowrap}
.faces .face+.face b{background:var(--lime)}
.team .faces.named{margin-bottom:16px}
.fc-faces .face b{top:calc(100% - 10px);padding:3px 7px 1px;font-size:10.5px;box-shadow:2px 2px 0 var(--navy)}
.fc-people{padding-top:clamp(66px,6.2vw,90px)}
/* ---- nan's photo opens in the viewer, like the posters ---- */
.nan-in{display:block;width:100%;cursor:zoom-in}
.bw .frame-in{cursor:zoom-in}
@media(hover:hover){.nan-in img{transition:scale .3s var(--pop)}.nan-in:hover img{scale:1.04}}
/* ---- the facts about each coffee, on its scene ---- */
.h-info{position:absolute;left:var(--gut);top:calc(var(--top) + 2.5vh + clamp(22px,3.1vw,52px) * 3.3 + 24px);width:clamp(240px,20.5vw,340px);margin:0;padding:14px 16px 12px;border:3px solid var(--navy);background:var(--white);color:var(--navy);box-shadow:7px 7px 0 var(--w-edge);rotate:-1.2deg;text-align:left;pointer-events:none}
.h-info.hit{animation:hit .4s var(--pop)}
.hi-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 9px}
.hi-top b{font-family:var(--f-d);font-weight:400;font-size:clamp(15px,1.25vw,20px);line-height:1;text-transform:uppercase}
.hi-str{display:inline-flex;gap:4px;font-size:22px}
.hi-dl{display:grid;grid-template-columns:auto minmax(0,1fr);margin:0;border-top:3px solid var(--navy);font-size:clamp(13.5px,1vw,15.5px);line-height:1.3}
.hi-dl dt,.hi-dl dd{margin:0;padding:6px 0;border-bottom:2px solid rgba(17,26,55,.18)}
.hi-dl dt{font-weight:700;padding-right:14px;white-space:nowrap}
.hi-dl dd{font-weight:500}
.hi-price{display:flex;align-items:baseline;gap:9px;margin:9px 0 0;font-size:12.5px;font-weight:600;line-height:1.25}
.hi-price b{font-family:var(--f-d);font-weight:400;font-size:clamp(20px,1.7vw,27px);line-height:1}
@media(max-width:1100px),(max-height:640px),(max-aspect-ratio:1/1){
  .h-info{position:static;order:1;width:auto;max-width:min(92vw,440px);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:3px 12px;padding:6px 10px 5px;border-width:2px;box-shadow:3px 3px 0 var(--w-edge);rotate:.8deg}
  .hero-ui>.btn{order:2}
  .hi-top{margin:0;gap:8px}.hi-top b{font-size:13px}.hi-str{font-size:15px;gap:3px}
  .hi-dl{display:block;border:0;font-size:12.5px}
  .hi-dl dt,.hi-dl dd{display:none;border:0;padding:0}
  .hi-dl dt:nth-of-type(3),.hi-dl dd:nth-of-type(3){display:inline}
  .hi-dl dt:nth-of-type(3){padding-right:5px}
  .hi-price{display:none}
}
.rm .h-info.hit{animation:none}
/* ================= round sixteen: no gaps, and steps that land properly ================= */
/* the street is one drawn strip now, with a road under the footpath: the zigzag bites the road, never the shops, and never leaves sky showing */
.biz{--sw:clamp(780px,100vw,1560px)}
.room-hero{--sw:max(100vw,820px)}
.st-roll img,.rm-street .st-roll img,.biz-street .st-roll img{margin-right:-1px}
.biz-street{bottom:calc(var(--sawh) * .4)}
.biz.sec{padding-bottom:calc(var(--sw) * .335 + var(--sawh))}
.biz-vanfly{bottom:calc(var(--sawh) * .4 + var(--sw) * .02)}
.rm-street{bottom:calc(var(--sawh) * .4)}
.room-hero{padding-bottom:calc(var(--sw) * .335 + var(--sawh) * .6)}
.room .room-van{bottom:calc(var(--sawh) * .4 + var(--sw) * .02)}
/* blend scenery: the ground runs down behind the zigzag so there is no strip of bare colour under it; the vans and dogs stay clear */
.p-scene{inset:0 0 calc(var(--sawh) * .36) 0}
.pp-kombi,.pp-husky,.pp-cab,.pp-bigfoot,.pp-rover{bottom:calc(var(--sawh) * .68)}

/* ---------- round seventeen: the buy box asks what the store asks, and the footer covers the rest of the shop ---------- */
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.buy.once .opts{grid-template-columns:1fr}
.buy.once .opt-every{display:none}
.opt{position:relative;display:block;min-width:0;border:2px solid var(--navy);background:var(--white)}
.opt span{position:absolute;top:-9px;left:7px;padding:0 5px;background:var(--white);font-size:11px;font-weight:700;line-height:15px;white-space:nowrap;pointer-events:none}
.opt select{-webkit-appearance:none;appearance:none;display:block;width:100%;min-height:42px;padding:5px 30px 0 11px;border:0;border-radius:0;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111A37' stroke-width='3.4'%3E%3Cpath d='M4 8l8 8 8-8'/%3E%3C/svg%3E") no-repeat right 10px center/13px;font:inherit;font-size:13.5px;font-weight:700;color:var(--navy);text-overflow:ellipsis;cursor:pointer}
.opt select:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
@media(pointer:coarse){.opt select{font-size:16px;min-height:46px}}
@media(max-width:1240px) and (min-width:981px){.opt select{font-size:12.5px;padding-left:8px;padding-right:22px;background-position:right 6px center;background-size:11px}.opt span{font-size:10.5px;left:4px;padding:0 3px}.opts{gap:8px}}
.legal-l{display:flex;flex-wrap:wrap;gap:4px 18px}
.legal-l a{text-decoration:underline;text-underline-offset:3px}
@media(hover:hover){.legal-l a:hover{color:var(--pink)}}
.live .concept-only{display:none}
.ci small{display:block;margin-top:3px;line-height:1.35}
.ci .qty{display:flex;width:max-content}
@media(max-width:1080px) and (min-width:981px){.opt select{font-size:12px;padding-right:18px;background-position:right 5px center;background-size:10px}}
.box img{height:auto}
/* the main footer: five lists and the sign-up, laid out on purpose at each width instead of wrapping where they fall */
.foot>.wrap>.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.foot>.wrap>.foot-grid .foot-brand{grid-column:1/-1}
@media(min-width:641px){.foot>.wrap>.foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:900px){.foot>.wrap>.foot-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(min-width:1180px){.foot>.wrap>.foot-grid{grid-template-columns:minmax(280px,1.9fr) repeat(5,minmax(0,1fr))}.foot>.wrap>.foot-grid .foot-brand{grid-column:auto}}
.foot-col a{text-wrap:balance}
.foot-col .foot-lab{--fl:var(--lime);margin:10px 0 4px;padding:3px 8px 1px;border:2px solid var(--fl);color:var(--fl);font-family:'Permanent Marker',cursive;font-weight:400;font-size:13.5px;line-height:1.1;letter-spacing:.02em;rotate:1.5deg}
.foot-col .foot-lab.fl-biz{--fl:var(--sky)}

/* ---------- round eighteen: an arrow either side of the bag, each with the coffee it leads to peeking out behind it ---------- */
.p-arrow{position:absolute;top:50%;z-index:3;width:56px;height:56px;margin-top:-28px;color:var(--navy);opacity:0;scale:.5;transition:opacity .3s,scale .5s var(--pop)}
.pop .p-arrow,.rm .p-arrow{opacity:1;scale:1}
.pop .p-arrow{transition-delay:.45s}
.pa-prev{left:-24px}.pa-next{right:-24px}
.pa-sq{position:relative;z-index:1;display:grid;place-items:center;width:56px;height:56px;border:3px solid var(--navy);background:var(--white);box-shadow:5px 5px 0 var(--ps);transition:translate .16s var(--ease),box-shadow .16s var(--ease),background .2s}
.pa-bag{position:absolute;z-index:0;bottom:calc(100% - 22px);height:78px;width:auto;max-width:none;filter:drop-shadow(3px 4px 0 rgba(17,26,55,.28));transition:translate .3s var(--pop),rotate .3s var(--pop);pointer-events:none}
.pa-prev .pa-bag{left:-14px;rotate:-12deg;transform-origin:70% 100%}
.pa-next .pa-bag{right:-14px;rotate:12deg;transform-origin:30% 100%}
.pa-name{position:absolute;z-index:2;top:calc(100% + 9px);padding:3px 7px;border:2px solid var(--navy);background:var(--white);font-size:12px;font-weight:700;line-height:1.2;white-space:nowrap}
.pa-prev .pa-name{left:0;rotate:-3deg}.pa-next .pa-name{right:0;rotate:3deg}
.p-arrow:active .pa-sq{translate:5px 5px;box-shadow:0 0 0 var(--ps)}
@media(hover:hover){
  .p-arrow:hover .pa-sq{background:var(--pink)}
  .pa-prev:hover .pa-sq{translate:-4px -2px;box-shadow:9px 7px 0 var(--ps)}
  .pa-next:hover .pa-sq{translate:2px -2px;box-shadow:5px 7px 0 var(--ps)}
  .pa-prev:hover .pa-bag{translate:-6px -8px;rotate:-18deg}
  .pa-next:hover .pa-bag{translate:6px -8px;rotate:18deg}
  .p-arrow:active .pa-sq{translate:5px 5px;box-shadow:0 0 0 var(--ps)}
}
@media(max-width:980px){.pa-prev{left:-6px}.pa-next{right:-6px}.p-arrow,.pa-sq{width:52px;height:52px}.p-arrow{margin-top:-26px}.pa-bag{height:66px}}
@media(min-width:981px) and (max-height:720px){.pa-bag{height:60px}.p-arrow,.pa-sq{width:48px;height:48px}.p-arrow{margin-top:-24px}.pa-name{font-size:11px;top:calc(100% + 7px)}}
/* what a passing van, cab, bike or rover just said, riding along above it for a second */
.toot{position:absolute;left:50%;bottom:calc(100% + 2px);z-index:3;padding:3px 9px 4px;border:2px solid var(--navy);background:var(--white);color:var(--navy);font-family:'Permanent Marker',cursive;font-weight:400;font-size:clamp(14px,1.2vw,19px);line-height:1.1;white-space:nowrap;translate:-50% 0;rotate:-6deg;pointer-events:none;animation:toot 1.5s var(--ease) both}
@keyframes toot{0%{opacity:0;scale:.4}9%{opacity:1;scale:1.12}16%{scale:1}22%{scale:1.1}30%,78%{opacity:1;scale:1}100%{opacity:0;scale:.9;translate:-50% -10px}}
/* ---------- the first scroll: a hand-drawn arrow, a note and a button you cannot miss ---------- */
.scrollcue{left:var(--gut);bottom:22px;display:block;width:260px;height:132px;gap:0;font-size:inherit;opacity:calc(1 - var(--cue,0));z-index:3;color:var(--navy)}
.scrollcue.gone{visibility:hidden}
.cue-btn{position:absolute;left:0;bottom:0;width:62px;height:62px;background:var(--pink);animation:cuebob 1.5s var(--ease) infinite}
.cue-btn svg{animation:cuearrow 1.5s var(--ease) infinite}
@keyframes cuebob{0%,100%{translate:0 0}50%{translate:0 8px}}
@keyframes cuearrow{0%,100%{translate:0 -2px}50%{translate:0 3px}}
@media(hover:hover){.cue-btn:hover{background:var(--lime);animation-play-state:paused}}
.cue-d1{position:absolute;left:74px;bottom:4px}
.cue-d2{display:none}
.scrollcue .note{position:absolute;left:112px;bottom:72px;font-size:clamp(22px,2vw,30px);white-space:nowrap;rotate:-5deg}
.rm .cue-btn,.rm .cue-btn svg{animation:none}
/* on the first screen the stepper's own down arrow joins in */
.rail.first #railDown{background:var(--pink);animation:cuebob 1.5s var(--ease) infinite}
.rm .rail.first #railDown{animation:none}
@media(max-width:1100px){
  /* the stepper sits bottom left here, so the note and arrow point at its down button instead of bringing their own */
  .scrollcue{left:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 66px);width:200px;height:104px}
  .cue-btn,.cue-d1{display:none}
  .cue-d2{display:block;position:absolute;left:34px;bottom:0}
  .scrollcue .note{left:0;bottom:70px;font-size:23px;rotate:-6deg}
}
/* ---------- the blend pages stack like cards at every size: each holds with its bottom edge on the bottom of the screen while the next slides over ---------- */
.panel{top:min(0px,calc(100vh - var(--ph,100vh)));top:min(0px,calc(100dvh - var(--ph,100dvh)))}
@media(max-width:980px){.panel{position:sticky}}
/* phones and narrow windows: the scroll note sits over the bag, so it gets a pale edge to stay readable */
@media(max-width:1100px){
  .scrollcue{z-index:7;pointer-events:none}
  .scrollcue .note{text-shadow:2px 0 var(--cream),-2px 0 var(--cream),0 2px var(--cream),0 -2px var(--cream),2px 2px var(--cream),-2px -2px var(--cream),2px -2px var(--cream),-2px 2px var(--cream)}
  .cue-d2{filter:drop-shadow(1.5px 0 0 var(--cream)) drop-shadow(-1.5px 0 0 var(--cream)) drop-shadow(0 1.5px 0 var(--cream)) drop-shadow(0 -1.5px 0 var(--cream))}
}
@media(max-width:700px){.scrollcue .note span{display:none}.scrollcue .note{font-size:25px}}

/* ---------- round nineteen: the shot clock. A brew timer that runs our own recipes: pick the coffee and the method, press
   start, and it calls each step. The page takes the colour of the coffee; the clock and the scale are lit like the scoreboard ---------- */
.tm{position:fixed;inset:0;z-index:122;overflow:hidden;background:var(--tb);color:var(--ti);translate:0 calc(100% + var(--sawh));visibility:hidden;transition:translate .7s var(--snap),visibility 0s .7s,background .45s;
  --tb:var(--sky);--ti:var(--navy);--tsh:var(--navy);--tburst:rgba(255,255,255,.36);--led:#FF69AE;--glow:#FF2E8B}
.tm.open{translate:0;visibility:visible;transition:translate .7s var(--snap),background .45s}
.tm[data-c="nsb"]{--tb:var(--orange);--tburst:rgba(255,255,255,.26)}
.tm[data-c="hyd"]{--tb:var(--navy);--ti:var(--cream);--tsh:var(--purple);--tburst:#2A2466}
.tm[data-c="peru"]{--tb:var(--purple);--tburst:rgba(255,255,255,.3)}
.tm[data-c="colombia"]{--tb:var(--pink);--tburst:rgba(255,255,255,.3)}
.tm[data-c="brazil"]{--tb:var(--lime);--tburst:rgba(255,255,255,.5)}
.tm[data-c="decaf"]{--tb:#1B2452;--ti:var(--cream);--tsh:#F6E65A;--tburst:#28347A}
.tm-in{height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;display:flex;flex-direction:column;gap:clamp(10px,1.8vh,20px);padding:calc(env(safe-area-inset-top,0px) + 16px) var(--gut) calc(env(safe-area-inset-bottom,0px) + 20px)}
.tm-top{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;max-width:1760px;margin-inline:auto}
.tm-title{display:flex;align-items:center;flex-wrap:wrap;gap:6px 16px;min-width:0}
.tm-title h2{margin:0;font-family:var(--f-d);font-weight:400;font-size:clamp(24px,3vw,44px);line-height:.92;letter-spacing:-.02em;text-transform:uppercase}
.tm-title p{padding:5px 11px 4px;background:var(--ti);color:var(--tb);font-weight:700;font-size:clamp(12.5px,1vw,15px);line-height:1.2;rotate:-2deg;white-space:nowrap}
.tm-tools{display:flex;align-items:center;gap:10px;flex:none}
.tm-tgl{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 14px;border:3px solid var(--navy);background:var(--white);color:var(--navy);font-weight:700;font-size:14px;white-space:nowrap;box-shadow:4px 4px 0 var(--tsh);transition:translate .16s var(--ease),box-shadow .16s var(--ease),background .2s}
.tm-tgl:active{translate:4px 4px;box-shadow:0 0 0 var(--tsh)}
.tm-tgl[aria-pressed="true"]{background:var(--lime)}
.tm-ls{display:none}
.tm-x{box-shadow:5px 5px 0 var(--tsh)}
.tm-x:active{box-shadow:0 0 0 var(--tsh)}
.tm-body{flex:1;display:grid;grid-template-columns:minmax(0,clamp(300px,23vw,400px)) minmax(0,1fr) minmax(0,clamp(340px,25vw,440px));gap:clamp(16px,2.2vw,36px);align-items:start;width:100%;max-width:1760px;margin-inline:auto}
.tm-col{display:flex;flex-direction:column;gap:14px;min-width:0}
.tm-k{margin:0 0 6px;font-size:13.5px;font-weight:700;line-height:1.2}
.tm-picks .tm-k+*{margin-bottom:12px}

/* picking the coffee and the method */
.tm-coffee{display:flex;flex-direction:column;gap:8px}
.tm-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tm-chips-so{grid-template-columns:repeat(4,minmax(0,1fr))}
.tm-chip{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;min-width:0;padding:8px 4px 7px;border:3px solid var(--navy);background:var(--white);color:var(--navy);font-weight:700;font-size:13px;line-height:1.1;text-align:center;box-shadow:4px 4px 0 var(--tsh);transition:translate .16s var(--ease),box-shadow .16s var(--ease),background .2s,color .2s}
.tm-chip img{height:50px;width:auto;transition:rotate .3s var(--pop),scale .3s var(--pop)}
.tm-chips-so .tm-chip{font-size:12px;padding:6px 2px}
.tm-chips-so .tm-chip img{height:40px}
.tm-chip[aria-pressed="true"]{background:var(--navy);color:var(--cream);translate:4px 4px;box-shadow:0 0 0 var(--tsh)}
.tm-chip[aria-pressed="true"] img{rotate:-6deg;scale:1.08}
@media(hover:hover){.tm-chip:not([aria-pressed="true"]):hover{background:var(--cream)}.tm-chip:hover img{rotate:-6deg;scale:1.08}}
.tm-meths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tm-meth{display:flex;align-items:center;gap:8px;min-height:60px;padding:4px 10px 4px 6px;border:3px solid var(--navy);background:var(--white);color:var(--navy);font-weight:700;font-size:14.5px;line-height:1.1;text-align:left;box-shadow:4px 4px 0 var(--tsh);transition:translate .16s var(--ease),box-shadow .16s var(--ease),background .2s,color .2s}
.tm-meth img{flex:none;height:46px;width:40px;object-fit:contain}
.tm-meth[aria-pressed="true"]{background:var(--navy);color:var(--cream);translate:4px 4px;box-shadow:0 0 0 var(--tsh)}
@media(hover:hover){.tm-meth:not([aria-pressed="true"]):hover{background:var(--cream)}}
.tm[data-c="hyd"] .tm-chip[aria-pressed="true"],.tm[data-c="hyd"] .tm-meth[aria-pressed="true"],.tm[data-c="decaf"] .tm-chip[aria-pressed="true"],.tm[data-c="decaf"] .tm-meth[aria-pressed="true"]{background:var(--tsh);color:var(--navy);border-color:var(--cream)}
.tm-picks button[aria-disabled="true"],.tm-recipe button[aria-disabled="true"]{opacity:.55;cursor:default}

/* the recipe, and the three numbers you can nudge */
.tm-card{padding:14px 16px 16px;background:var(--white);color:var(--navy);border:3px solid var(--navy);box-shadow:6px 6px 0 var(--tsh)}
.tm-card-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 8px}
.tm-card-h b{font-family:var(--f-d);font-weight:400;font-size:17px;line-height:1;text-transform:uppercase;white-space:nowrap}
.tm-card-h span{font-size:13px;font-weight:600;text-align:right;line-height:1.2}
.tm-adj{margin:0}
.tm-adj>div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;border-top:2px solid rgba(17,26,55,.14)}
.tm-adj dt{font-size:14px;font-weight:700}
.tm-adj dd{display:flex;align-items:center;border:2px solid var(--navy)}
.tm-adj dd button{width:34px;height:34px;font-weight:700;font-size:17px;background:var(--cream)}
.tm-adj dd button:active{background:var(--pink)}
.tm-adj dd b{min-width:74px;padding:0 6px;text-align:center;font-family:var(--f-d);font-weight:400;font-size:16px;font-variant-numeric:tabular-nums;line-height:1}
.tm-fixed{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:8px 0 0;border:2px solid var(--navy)}
.tm-fixed>div{display:flex;flex-direction:column-reverse;align-items:center;justify-content:flex-end;gap:2px;padding:8px 4px 7px;text-align:center}
.tm-fixed>div+div{border-left:2px solid var(--navy)}
.tm-fixed dt{font-size:12px;font-weight:600}
.tm-fixed dd{font-family:var(--f-d);font-size:15px;line-height:1.05}
.tm-cups{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;font-size:14px;font-weight:700}
.tm-cups .qty{margin:0}
.tm-cups .qty button{width:34px;height:34px}
.tm-back{margin-top:10px;font-size:13.5px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.tm-so{margin-top:10px;padding:8px 10px;background:var(--lime);border:2px solid var(--navy);font-size:13px;font-weight:600;line-height:1.3}
.tm-prep{margin-top:14px}
.tm-prep ol{margin:0;padding:0;list-style:none;counter-reset:prep}
.tm-prep li{position:relative;padding:6px 0 6px 30px;border-top:2px solid rgba(17,26,55,.14);font-size:14.5px;line-height:1.35;counter-increment:prep}
.tm-prep li::before{content:counter(prep);position:absolute;left:0;top:6px;width:21px;height:21px;display:grid;place-items:center;background:var(--pink);border:2px solid var(--navy);font-size:12px;font-weight:700;line-height:1}
.tm-prep li em,.tm-plays li em{font-style:normal;font-weight:700;background:linear-gradient(transparent 58%,var(--lime) 58%)}

/* the bench: the brewer on its scale, the kettle that swings in when it's time to pour, the bag, and what it tastes like */
.tm-stage{position:relative;width:min(100%,calc(min(62vh,720px) * 4 / 3));aspect-ratio:4/3;margin-inline:auto;--bh:70%;--ar:497/820;--tx:45%;--ty:38%}
.tm[data-m="esp"] .tm-stage{--bh:80%;--ar:655/820}
.tm[data-m="v60"] .tm-stage{--bh:70%;--ar:529/820;--tx:48.5%;--ty:22%}
.tm[data-m="aero"] .tm-stage{--bh:52%;--ar:348/820;--tx:50%;--ty:37%}
.tm-burst{position:absolute;left:50%;top:50%;width:92%;aspect-ratio:1;translate:-50% -50%;background:var(--tburst);clip-path:polygon(50% 0,54.9% 12.6%,62.9% 1.7%,64.4% 15.2%,75% 6.7%,73.1% 20.1%,85.4% 14.6%,79.9% 26.9%,93.3% 25%,84.8% 35.6%,98.3% 37.1%,87.4% 45.1%,100% 50%,87.4% 54.9%,98.3% 62.9%,84.8% 64.4%,93.3% 75%,79.9% 73.1%,85.4% 85.4%,73.1% 79.9%,75% 93.3%,64.4% 84.8%,62.9% 98.3%,54.9% 87.4%,50% 100%,45.1% 87.4%,37.1% 98.3%,35.6% 84.8%,25% 93.3%,26.9% 79.9%,14.6% 85.4%,20.1% 73.1%,6.7% 75%,15.2% 64.4%,1.7% 62.9%,12.6% 54.9%,0 50%,12.6% 45.1%,1.7% 37.1%,15.2% 35.6%,6.7% 25%,20.1% 26.9%,14.6% 14.6%,26.9% 20.1%,25% 6.7%,35.6% 15.2%,37.1% 1.7%,45.1% 12.6%);animation:tmspin 80s linear infinite}
@keyframes tmspin{to{rotate:360deg}}
.tm-bag{position:absolute;left:1%;bottom:3%;height:43%;width:auto;rotate:-7deg;z-index:2;filter:drop-shadow(0 12px 10px rgba(17,26,55,.28))}
.tm-notes{position:absolute;right:0;top:4%;bottom:14%;width:24%;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:space-around}
.tm-notes{transition:opacity .35s}
.tm[data-state="run"]:not([data-m="esp"]) .tm-notes,.tm[data-state="paused"]:not([data-m="esp"]) .tm-notes{opacity:0}
.tm-note{position:relative;width:78%;height:31%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;animation:tmbob 4.2s ease-in-out infinite;animation-delay:calc(var(--i) * -1.3s)}
.tm-note:nth-child(2){translate:-22% 0}
.tm-note img{flex:1 1 0;min-height:0;width:auto;max-width:100%;object-fit:contain;rotate:calc((var(--i) - 1) * 7deg)}
.tm-note span{margin-top:-6px;padding:2px 7px;background:var(--white);color:var(--navy);border:2px solid var(--navy);font-size:clamp(10px,.85vw,12.5px);font-weight:700;line-height:1.25;white-space:nowrap;rotate:-2deg}
@keyframes tmbob{50%{transform:translateY(-7px)}}
.tm-brewer{position:absolute;left:50%;bottom:13%;height:var(--bh);aspect-ratio:var(--ar);translate:-50% 0;z-index:4;transform-origin:50% 100%;transition:rotate .9s var(--pop),bottom .9s var(--pop),translate .6s var(--ease)}
.tm-brewer>img{display:block;width:100%;height:100%;filter:drop-shadow(0 10px 8px rgba(17,26,55,.25))}
.tm-mug{position:absolute;left:50%;bottom:13%;height:26%;width:auto;translate:-42% 0;z-index:3;opacity:0;transition:opacity .3s,translate .6s var(--pop)}
.tm-kettle{position:absolute;left:1%;top:16%;width:27%;height:auto;rotate:-7deg;z-index:6;transform-origin:50% 50%;filter:drop-shadow(0 10px 8px rgba(17,26,55,.25));transition:left .7s var(--ease),top .7s var(--ease),rotate .7s var(--pop),opacity .3s}
.tm[data-m="esp"] .tm-kettle{opacity:0;left:-30%}
.tm-water{position:absolute;left:var(--tx);top:calc(var(--ty) - 13.2%);width:max(6px,1.5%);height:16%;translate:-50% 0;z-index:3;border:2px solid var(--navy);border-top:0;border-radius:0 0 6px 6px;background:repeating-linear-gradient(180deg,#D9F3FB 0 8px,#9FD9EC 8px 16px);background-size:100% 32px;transform-origin:50% 0;scale:1 0;opacity:0;transition:scale .25s ease-in .0s,opacity .1s}
.tm[data-m="v60"] .tm-water{z-index:5;height:13.6%}
.tm[data-act="pour"] .tm-kettle{left:calc(var(--tx) - 27.3%);top:calc(var(--ty) - 25.6%);rotate:28deg}
.tm[data-act="pour"] .tm-water{scale:1 1;opacity:1;transition:scale .3s ease-in .62s,opacity .1s .62s;animation:tmflow .35s linear infinite}
@keyframes tmflow{to{background-position:0 32px}}
/* the scale: a white slab with a lit readout */
.tm-scale{position:absolute;left:27%;right:27%;bottom:1.2%;height:11.4%;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 3% 0 3.4%;background:var(--white);color:var(--navy);border:3px solid var(--navy);box-shadow:5px 5px 0 var(--tsh)}
.tm-scale>span{font-size:clamp(9.5px,1.02vw,13.5px);font-weight:700;line-height:1.1}
.tm-scale-w{display:flex;align-items:flex-end;gap:5px;height:74%;padding:4% 7px 4% 9px;background:#060913}
.tm-scale-w b{font-family:'Space Grotesk',var(--f-b);font-weight:700;font-size:clamp(10px,1.1vw,15px);line-height:1;color:var(--lime)}
.tm-led{display:block;height:100%;width:auto;overflow:visible}
.tm-led polygon,.tm-led circle{fill:rgba(210,245,92,.13)}
.tm-led .on{fill:var(--lime);filter:drop-shadow(0 0 2.5px #9EDB1F)}
/* espresso: two streams off the spouts and the glass filling under them */
.tm-shot,.tm-jet,.tm-drip{position:absolute;display:none;pointer-events:none}
.tm[data-m="esp"] .tm-shot{display:block;left:29.5%;top:57%;width:28.5%;height:19.5%;clip-path:polygon(0 0,100% 0,81% 100%,21% 100%);mix-blend-mode:multiply}
.tm-shot::before{content:'';position:absolute;left:0;right:0;bottom:0;height:calc(var(--fill,0) * 78%);background:linear-gradient(180deg,#C98A3D 0 16%,#5A2E14 30%,#32170A 100%)}
.tm[data-m="esp"][data-state="run"] .tm-jet{display:block;top:49.6%;width:1.5%;height:calc(27% - var(--fill,0) * 15%);background:linear-gradient(180deg,#3B1D0D,#8A5324);border-inline:1.5px solid var(--navy);border-radius:0 0 3px 3px;animation:tmjet .22s linear infinite}
.tm-jet.j1{left:31.6%}.tm-jet.j2{left:52.8%}
@keyframes tmjet{50%{transform:scaleX(.72)}}
/* pour over: it drips while it brews */
.tm[data-m="v60"][data-state="run"] .tm-drip{display:block;left:45.4%;top:55.5%;width:2.4%;aspect-ratio:1/1.35;background:#3B1D0D;border:1.5px solid var(--navy);border-radius:50% 50% 50% 50%/62% 62% 38% 38%;animation:tmdrip .9s ease-in infinite}
.tm[data-m="v60"][data-act="wait"] .tm-drip{animation-duration:.55s}
@keyframes tmdrip{0%{transform:translateY(0) scale(.5);opacity:0}15%{opacity:1;transform:translateY(0) scale(1)}100%{transform:translateY(620%) scale(1);opacity:1}}
.tm-steam{position:absolute;left:14%;width:72%;bottom:92%;height:auto;fill:none;stroke-linecap:round;opacity:0;transition:opacity .5s;overflow:visible;pointer-events:none}
.tm-steam path{stroke:var(--white);stroke-width:6}
.tm-steam path.o{stroke:var(--navy);stroke-width:11}
.tm-steam g:nth-child(2) path:not(.o){stroke:var(--pink)}
.tm-steam g{animation:tmsteam 2.8s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
.tm-steam g:nth-child(2){animation-delay:-.95s}.tm-steam g:nth-child(3){animation-delay:-1.9s}
@keyframes tmsteam{0%{opacity:0;transform:translateY(16px) scale(.8,.5)}30%{opacity:1}100%{opacity:0;transform:translateY(-22px) scale(1.05,1.1)}}
.tm.steamy .tm-steam{opacity:1}
.tm[data-m="esp"] .tm-steam{left:24%;width:38%;bottom:43%}
.tm[data-m="aero"].flipped .tm-steam{left:-70%;width:150%;bottom:-36%;display:none}
/* what the brewer does on each call */
.tm[data-act="swirl"] .tm-brewer>img{animation:tmswirl 1.1s linear infinite}
@keyframes tmswirl{0%{transform:translate(2.2%,0)}25%{transform:translate(0,1.2%) rotate(1.2deg)}50%{transform:translate(-2.2%,0)}75%{transform:translate(0,-1.2%) rotate(-1.2deg)}100%{transform:translate(2.2%,0)}}
.tm[data-act="press"] .tm-brewer>img{transform-origin:50% 100%;animation:tmpress 1.5s ease-in-out infinite}
@keyframes tmpress{0%,100%{transform:scaleY(1)}55%{transform:scaleY(.955) scaleX(1.02)}}
.tm[data-act="lid"] .tm-brewer>img{animation:tmhop .5s var(--pop)}
@keyframes tmhop{40%{transform:translateY(-5%)}}
.tm[data-m="aero"] .tm-brewer{rotate:180deg;transform-origin:50% 50%}
.tm[data-m="aero"].flipped .tm-brewer{rotate:0deg;bottom:36.5%}
.tm[data-m="aero"].flipped .tm-mug{opacity:1}
.tm[data-m="plg"][data-act="serve"] .tm-brewer{rotate:-26deg;translate:-22% -6%;transform-origin:30% 100%}
.tm[data-m="plg"][data-act="serve"] .tm-mug,.tm[data-m="plg"][data-act="done"] .tm-mug{opacity:1;translate:-168% 0}
.tm[data-act="done"] .tm-brewer>img{animation:tmhop .6s var(--pop)}
/* the word on the bench */
.tm-shout{position:absolute;left:66%;top:44%;z-index:7;display:flex;flex-direction:column;align-items:flex-start;color:var(--ti);opacity:0;scale:.6;rotate:-6deg;transition:opacity .25s,scale .35s var(--pop);pointer-events:none}
.tm-shout.on{opacity:1;scale:1}
.tm-shout .doodle{width:clamp(44px,5vw,70px);height:auto;stroke-width:5}
.tm-shout.on .doodle path{stroke-dashoffset:0}
.tm-shout b{max-width:6.6em;font-family:'Permanent Marker',cursive;font-weight:400;font-size:clamp(17px,2vw,30px);line-height:1}
.tm[data-act="press"] .tm-shout .doodle,.tm[data-act="lid"] .tm-shout .doodle{animation:tmnudge 1.5s ease-in-out infinite}
@keyframes tmnudge{50%{transform:translateY(9px)}}
.tm[data-act="swirl"] .tm-shout .doodle{animation:tmspin 2.2s linear infinite}
.tm-conf{position:absolute;inset:0;z-index:8;pointer-events:none;overflow:visible}
.tm-conf i{position:absolute;left:50%;top:46%;width:11px;height:11px;background:var(--c);border:2px solid var(--navy);animation:tmconf 1.25s cubic-bezier(.12,.7,.3,1) both}
@keyframes tmconf{from{transform:translate(-50%,-50%) rotate(0);opacity:1}80%{opacity:1}to{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--r));opacity:0}}

/* the line: where you are in the brew, with a notch at every call */
.tm-line{position:relative;height:18px;margin-top:6px;border:3px solid var(--navy);background:var(--white);box-shadow:4px 4px 0 var(--tsh)}
.tm-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--pink)}
.tm-zone{position:absolute;top:0;bottom:0;background:var(--lime);display:none}
.tm[data-m="esp"] .tm-zone{display:block}
.tm-ticks i{position:absolute;top:-6px;bottom:-6px;width:3px;margin-left:-1.5px;background:var(--navy)}
.tm-ctl{display:flex;gap:12px;margin-top:4px}
.tm-go{flex:1;min-height:64px;font-size:19px;--bs:var(--tsh)}
.tm[data-c="hyd"] .tm-go,.tm[data-c="decaf"] .tm-go,.tm[data-c="hyd"] .tm-rs,.tm[data-c="decaf"] .tm-rs{border-color:var(--cream)}
.tm-rs{min-height:64px;--bs:var(--tsh)}
.tm[data-state="run"] .tm-go{background:var(--lime)}

/* the clock, lit like the scoreboard, with its ring of bulbs */
.tm-clock{position:relative;padding:15px;background:var(--navy);border:3px solid var(--navy);box-shadow:7px 7px 0 var(--tsh)}
.tm[data-c="hyd"] .tm-clock,.tm[data-c="decaf"] .tm-clock{border-color:var(--cream)}
.tm-clock::before{content:'';position:absolute;inset:2px;border:7px dotted #FFD84A;pointer-events:none}
.tm[data-state="run"] .tm-clock::before{animation:tmbulb .7s steps(1) infinite}
@keyframes tmbulb{50%{border-color:var(--pink)}}
.tm-screen{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 12px 9px;background:#060913}
.tm-led-t{height:clamp(62px,10.5vh,112px)}
.tm-led-t polygon,.tm-led-t circle{fill:color-mix(in srgb,var(--led) 14%,transparent)}
.tm-led-t .on{fill:var(--led);filter:drop-shadow(0 0 3px var(--glow))}
.tm-clock[data-zone="in"]{--led:#D2F55C;--glow:#9EDB1F}
.tm-clock[data-zone="over"]{--led:#FF7A1A;--glow:#FF5A00}
.tm-screen p{margin:0;font-family:'Space Grotesk',var(--f-b);font-weight:700;font-size:11.5px;line-height:1.2;letter-spacing:.12em;text-transform:uppercase;color:var(--cream);text-align:center}
/* the coach calls it */
.tm-call{display:grid;grid-template-columns:clamp(76px,7.4vw,118px) minmax(0,1fr);align-items:end;gap:12px}
.tm-coach{width:100%;height:auto;rotate:-4deg;transform-origin:50% 100%;filter:drop-shadow(0 8px 6px rgba(17,26,55,.25))}
.tm-coach.tm-hop{animation:tmtoot .5s var(--pop)}
@keyframes tmtoot{35%{transform:translateY(-9%) rotate(5deg) scale(1.05)}}
.tm-bub{position:relative;align-self:center;padding:13px 16px 13px;background:var(--white);color:var(--navy);border:3px solid var(--navy);box-shadow:6px 6px 0 var(--tsh)}
.tm-bub::before{content:'';position:absolute;right:calc(100% - 1px);bottom:22px;border:9px solid transparent;border-right-color:var(--navy)}
.tm-bub::after{content:'';position:absolute;right:calc(100% - 4px);bottom:25px;border:6px solid transparent;border-right-color:var(--white)}
.tm-now{font-family:var(--f-c);font-weight:400;font-size:clamp(26px,2.4vw,38px);line-height:1;text-transform:uppercase;text-wrap:balance}
.tm-now.in{animation:hit .3s var(--pop)}
.tm-sub{margin-top:5px;font-size:15px;font-weight:600;line-height:1.3}
.tm-next{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin-top:9px;padding-top:8px;border-top:2px solid rgba(17,26,55,.14);font-size:13.5px;font-weight:700;line-height:1.2}
.tm-next b{padding:2px 7px 1px;background:var(--lime);border:2px solid var(--navy);font-variant-numeric:tabular-nums}
.tm-next.soon b{background:var(--pink);animation:tmblink .5s steps(2) infinite}
@keyframes tmblink{50%{background:var(--white)}}
.tm-plays ol{margin:0;padding:0;list-style:none}
.tm-plays li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;margin-inline:-16px;padding:7px 16px;border-top:2px solid rgba(17,26,55,.14);font-size:14.5px;line-height:1.3;transition:background .25s,opacity .25s}
.tm-plays li>b{font-variant-numeric:tabular-nums;font-weight:700}
.tm-plays li small{display:block;font-size:13px;font-weight:500;opacity:.8}
.tm-plays li.on{background:var(--lime)}
.tm-plays li.past{color:#5A6074}
.tm-plays li.past small{opacity:1}
.tm-plays li.plain{grid-template-columns:24px minmax(0,1fr)}
.tm-tip{padding:11px 14px;border:3px solid var(--ti);font-size:14.5px;font-weight:600;line-height:1.4}
.tm-fix{font-size:13.5px;font-weight:500;line-height:1.4;opacity:.9}

/* full time */
.tm-done{position:absolute;inset:0;z-index:9;display:grid;place-items:center;padding:calc(env(safe-area-inset-top,0px) + 16px) 16px 16px;overflow-y:auto;background:rgba(17,26,55,.86);color:var(--navy);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.tm-done.on{opacity:1;visibility:visible;transition:opacity .3s}
.tm-done-card{position:relative;display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:clamp(16px,2.6vw,34px);align-items:center;width:min(820px,100%);padding:clamp(18px,2.6vw,34px);background:var(--white);border:3px solid var(--navy);box-shadow:10px 10px 0 var(--pink);scale:.9;rotate:-2deg;transition:scale .4s var(--pop),rotate .4s var(--pop)}
.tm-done.on .tm-done-card{scale:1;rotate:0deg}
.tm-done-art{width:100%;height:auto;rotate:-5deg}
.tm-done.on .tm-done-art{animation:hit .5s var(--pop) .18s both}
.tm-done-in{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0}
.tm-done-in .tagline{margin:0}
.tm-done-t{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px}
.tm-done-t b{font-family:var(--f-d);font-weight:400;font-size:clamp(44px,6vw,84px);line-height:.9;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tm-done-t span{font-size:clamp(16px,1.4vw,20px);font-weight:700;line-height:1.25}
.tm-taste{width:100%}
.tm-taste-o{display:flex;flex-wrap:wrap;gap:8px}
.tm-taste-o button{min-height:42px;padding:0 14px;border:3px solid var(--navy);background:var(--cream);font-weight:700;font-size:14.5px;box-shadow:3px 3px 0 var(--navy);transition:translate .16s var(--ease),box-shadow .16s var(--ease),background .2s}
.tm-taste-o button[aria-pressed="true"]{background:var(--navy);color:var(--cream);translate:3px 3px;box-shadow:0 0 0 var(--navy)}
.tm-taste-a{min-height:1.4em;margin-top:9px;font-size:16px;font-weight:700;line-height:1.35}
.tm-cup{width:100%}
.tm-cup-n{display:flex;flex-wrap:wrap;gap:8px 16px}
.tm-cup-n figure{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:700}
.tm-cup-n img{height:54px;width:auto}
.tm-done .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.tm-bench{font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:3px}

@media(max-width:1180px) and (min-width:821px){
  .tm-body{grid-template-columns:minmax(0,300px) minmax(0,1fr);grid-auto-flow:row}
  .tm-c,.tm-r{display:contents}
  .tm-l{grid-column:1;grid-row:1 / span 6}
  .tm-clock,.tm-stage,.tm-call,.tm-line,.tm-ctl,.tm-plays,.tm-tip,.tm-fix{grid-column:2}
  .tm-clock{grid-row:1}.tm-stage{grid-row:2}.tm-call{grid-row:3}.tm-line{grid-row:4}.tm-ctl{grid-row:5}.tm-plays{grid-row:6}
  .tm-body{gap:14px clamp(16px,2.2vw,30px)}
  .tm-stage{width:min(100%,calc(min(40vh,520px) * 4 / 3))}
  .tm-led-t{height:clamp(50px,7.4vh,86px)}
  .tm-clock{padding:12px}
  .tm-screen{padding:8px 12px 7px}
}
@media(max-width:820px){
  .tm-in{gap:10px;padding-inline:14px}
  .tm-title p{display:none}
  .tm-title h2{font-size:21px}
  .tm-ll{display:none}.tm-ls{display:inline}
  .tm-tools{gap:8px}
  .tm-body,.tm-col>*{min-width:0}
  .tm-picks .tm-k{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tm-chips,.tm-chips-so{flex:none}
  .tm-tgl{min-height:44px;padding:0 11px;font-size:13px}
  .tm-x{width:46px;height:46px}
  .tm-body{display:flex;flex-direction:column;align-items:stretch;gap:11px}
  .tm-col{display:contents}
  .tm-picks{order:1}.tm-clock{order:2}.tm-stage{order:3}.tm-call{order:4}.tm-line{order:5}.tm-ctl{order:6}.tm-recipe{order:7}.tm-plays{order:8}.tm-tip{order:9}.tm-fix{order:10}
  .tm-picks .tm-k{margin-bottom:5px}
  .tm-picks .tm-k+*{margin-bottom:9px}
  .tm-coffee{flex-direction:row;gap:8px;margin-inline:-14px;padding:0 14px 6px;overflow-x:auto;scrollbar-width:none}
  .tm-coffee::-webkit-scrollbar{display:none}
  .tm-chips,.tm-chips-so{display:flex;gap:8px}
  .tm-chip,.tm-chips-so .tm-chip{flex:none;flex-direction:row;gap:6px;padding:4px 11px 4px 6px;font-size:13px;box-shadow:3px 3px 0 var(--tsh)}
  .tm-chip img,.tm-chips-so .tm-chip img{height:36px}
  .tm-chip[aria-pressed="true"]{translate:3px 3px}
  .tm-meths{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .tm-meth{flex-direction:column;justify-content:center;gap:2px;min-height:0;padding:5px 2px 5px;font-size:12px;text-align:center;box-shadow:3px 3px 0 var(--tsh)}
  .tm-meth img{height:34px;width:auto}
  .tm-meth[aria-pressed="true"]{translate:3px 3px}
  .tm-clock{padding:12px}
  .tm-clock::before{border-width:5px}
  .tm-screen{flex-direction:row;justify-content:space-between;gap:10px;padding:8px 12px}
  .tm-led-t{height:54px}
  .tm-screen p{font-size:10px;text-align:right;max-width:9em}
  .tm-stage{width:min(100%,max(240px,calc((100vh - 612px) * 4 / 3)));width:min(100%,max(240px,calc((100dvh - 612px) * 4 / 3)))}
  .tm-scale{left:20%;right:20%}
  .tm-scale>span{font-size:10.5px}
  .tm-call{grid-template-columns:64px minmax(0,1fr);gap:10px}
  .tm-bub{padding:10px 12px}
  .tm-now{font-size:25px}
  .tm-sub{font-size:14px}
  .tm-ctl{position:sticky;bottom:0;z-index:8;margin:0 -14px;padding:8px 14px calc(env(safe-area-inset-bottom,0px) + 8px);background:var(--tb)}
  .tm-go,.tm-rs{min-height:56px}
  .tm-done-card{grid-template-columns:1fr;gap:10px}
  .tm-done-art{position:absolute;right:8px;top:-34px;width:104px}
  .tm-done-t b{font-size:52px}
}
.rm .tm-burst,.rm .tm-note,.rm .tm-steam g,.rm .tm[data-act] .tm-brewer>img,.rm .tm-shout .doodle,.rm .tm-clock::before,.rm .tm-next.soon b{animation:none}

/* ---------- the recipe card turns over: our numbers on the front, how to brew it on the back ---------- */
.tm-recipe.turning{animation:tmturn .36s ease-in-out}
@keyframes tmturn{0%{transform:perspective(900px) rotateY(0)}49.9%{transform:perspective(900px) rotateY(90deg)}50%{transform:perspective(900px) rotateY(-90deg)}100%{transform:perspective(900px) rotateY(0)}}
.tm-recipe[data-face="how"]{background:var(--cream)}
.tm-flip{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;margin:2px 0 14px;padding:0 12px;border:2px solid var(--navy);background:var(--lime);color:var(--navy);font-weight:700;font-size:14.5px;line-height:1.1;box-shadow:4px 4px 0 var(--navy);transition:translate .16s var(--ease),box-shadow .16s var(--ease)}
.tm-flip:active{translate:4px 4px;box-shadow:0 0 0 var(--navy)}
.tm-flip svg{flex:none}
.tm-face-b .tm-flip{background:var(--white)}
.tm-how-line{margin:0 0 10px;font-size:14.5px;font-weight:600;line-height:1.35}
.tm-need{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;padding:0;list-style:none}
.tm-need li{padding:3px 9px 2px;border:2px solid var(--navy);background:var(--white);font-size:12.5px;font-weight:700;line-height:1.3}
.tm-need li.g{background:var(--pink)}
.tm-face-b .tm-prep{margin-top:0}
.tm-face-b .tm-prep li b{font-weight:700}
.tm-how-fix{margin-top:12px;padding:9px 11px;border:2px solid var(--navy);background:var(--lime);font-size:13.5px;font-weight:600;line-height:1.38}
.tm-how-fix b{display:block;margin-bottom:3px;font-family:var(--f-d);font-weight:400;font-size:13px;line-height:1.1;text-transform:uppercase}
.tm-howlink{display:inline-block;margin-top:-2px;font-size:13.5px;font-weight:700;line-height:1.3;text-align:left;text-decoration:underline;text-underline-offset:3px;color:var(--ti)}
@media(max-width:820px){.tm-howlink{margin:0 0 2px;min-height:30px}.tm-picks .tm-meths{margin-bottom:6px}}
.rm .tm-recipe.turning{animation:none}
/* on a phone: start and pause stay pinned along the bottom while you read the card or the plays, reset only shows when there is
   something to reset, and the radio shrinks to its record and play button and sits in the same bar */
@media(max-width:820px){
  .tm-ctl{order:99;bottom:calc(-20px - env(safe-area-inset-bottom,0px));padding-right:136px}
  .tm-rs[disabled]{display:none}
  .tm-go{padding-inline:10px}
  .tm-stage{width:min(100%,max(210px,calc((100vh - 650px) * 4 / 3)));width:min(100%,max(210px,calc((100dvh - 650px) * 4 / 3)))}
  body[data-ov="brew"] .player.player{right:14px;bottom:calc(env(safe-area-inset-bottom,0px) + 16px)}
  body[data-ov="brew"] .pl-mini,body[data-ov="brew"] .pl-skip{display:none}
  body[data-ov="brew"] .pl-quick{margin-left:4px}
}

/* the ways in to the shot clock: the nav, each blend page, and its own stretch of the page */
.nb-brew{background:var(--lime)}
@media(max-width:1020px){.nb-brew{display:none}}
.p-brew{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;min-height:42px;margin-top:14px;padding:0 14px 0 11px;border:2px solid var(--navy);background:var(--lime);color:var(--navy);font-weight:700;font-size:14px;line-height:1.1;text-align:left;box-shadow:4px 4px 0 var(--ps,var(--navy));rotate:-1.5deg;transition:translate .16s var(--ease),box-shadow .16s var(--ease),rotate .2s var(--pop)}
.p-brew svg{flex:none}
.p-brew:active{translate:4px 4px;box-shadow:0 0 0 var(--ps,var(--navy))}
@media(hover:hover){.p-brew:hover{rotate:1deg}}
.brewit{position:relative;background:var(--lime);color:var(--navy)}
.brewit.sec{padding-top:max(clamp(80px,13vh,160px),calc(var(--top) + 22px))}
.brewit-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,5vw,80px);align-items:center}
.brewit-copy{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(14px,2.2vh,22px)}
.brewit .tagline{margin:0;background:var(--navy);color:var(--cream)}
.brewit .strip{--sc:var(--pink);--st:var(--navy)}
.brewit .btn svg{flex:none}
.brewit .btn{min-height:62px;padding:0 28px;font-size:17px;--bs:var(--pink)}
.brewit-art{position:relative;width:100%;max-width:640px;aspect-ratio:1/.86;justify-self:center}
.brewit-art .p-burst{width:100%;scale:1;opacity:1;translate:-50% -50%;--burst:rgba(255,255,255,.55);animation:tmspin 90s linear infinite}
.brewit-clock{--led:#FF69AE;--glow:#FF2E8B;position:absolute;left:23%;top:0;width:54%;padding:12px;background:var(--navy);border:3px solid var(--navy);box-shadow:7px 7px 0 var(--pink);rotate:-3deg;z-index:3}
.brewit-clock::before{content:'';position:absolute;inset:2px;border:6px dotted #FFD84A;pointer-events:none;animation:tmbulb .7s steps(1) infinite}
.brewit-clock .tm-screen{padding:10px 12px}
.brewit-clock .tm-led-t{height:clamp(44px,5.4vw,84px)}
.bi{position:absolute;height:auto;filter:drop-shadow(0 12px 10px rgba(17,26,55,.25))}
.bi-plg{left:2%;bottom:6%;width:25%;rotate:-7deg;z-index:1}
.bi-esp{left:23%;bottom:0;width:36%;z-index:2}
.bi-v60{right:8%;bottom:3%;width:28%;rotate:5deg;z-index:2}
.bi-aero{right:0;bottom:17%;width:12.5%;rotate:9deg;z-index:1}
.bi-kettle{left:0;top:24%;width:27%;rotate:-12deg;z-index:1;animation:bobb 2.6s ease-in-out infinite}
.bi-coach{right:1%;top:8%;width:27%;rotate:6deg;z-index:4;animation:bobb 2.2s ease-in-out infinite}
@media(max-width:980px){
  .brewit-grid{grid-template-columns:1fr}
  .brewit-art{max-width:460px;order:-1}
}
@media(max-width:700px){.brewit-art{max-width:320px}.brewit.sec{padding-top:clamp(56px,9vh,90px)}}
.rm .brewit-art .p-burst,.rm .brewit-clock::before,.rm .bi{animation:none}

/* =========== round twenty-one: shared by the site and the product pages =========== */
/* ---------- the three coffee cards: the outer stickers as big as the middle one, and no dead air underneath ---------- */
.pick{padding-bottom:clamp(20px,3.4vh,40px)}
.pick-card img{z-index:0}
.pk-pe img{right:-7%;bottom:-9%;height:auto;width:60%;max-width:none}
.pk-hyd img{right:-8%;bottom:-13%;height:auto;width:62%;max-width:none}
.pick-n,.pick-r{position:relative;z-index:1}
@media(max-width:860px){
  .pk-pe img{right:-2%;bottom:3%;width:43%}
  .pk-hyd img{right:-3%;bottom:-9%;width:46%}
}
/* ---------- the radio: in reach on every page, and two offers when you come in with the sound on ---------- */
.player{z-index:126}
body[data-ov] .pl-side{display:none}
body[data-ov="box"] .player{display:none}
body[data-ov="cart"] .player{right:calc(min(460px,100vw) + 22px)}
body[data-ov="audit"] .player{bottom:calc(env(safe-area-inset-bottom,0px) + 104px)}
body[data-ov="audit"]:has(.au[data-at="results"]) .player{bottom:calc(env(safe-area-inset-bottom,0px) + 16px)}
@media(max-width:900px){body[data-ov="cart"] .player{display:none}}
.pl-ask{position:relative;order:-2;width:min(336px,calc(100vw - 2 * var(--gut)));padding:13px 46px 14px 14px;border:3px solid var(--navy);background:var(--lime);color:var(--navy);box-shadow:6px 6px 0 var(--navy);rotate:-1deg;transform-origin:100% 100%;animation:hit .34s var(--pop)}
.pl-ask[hidden],.player:has(.pl-card:not([hidden])) .pl-ask{display:none}
.pl-ask::after{content:'';position:absolute;right:38px;top:calc(100% + 2px);width:18px;height:12px;background:var(--navy);clip-path:polygon(0 0,100% 0,50% 100%)}
.pl-ask p{margin:0;font-size:14.5px;font-weight:500;line-height:1.35}
.pl-ask p b{display:block;margin-bottom:3px;font-family:var(--f-d);font-weight:400;font-size:17px;line-height:1;text-transform:uppercase}
.pl-ask-b{display:flex;flex-wrap:wrap;gap:9px 10px;margin-top:11px}
.pl-ask .btn{--bs:var(--navy);min-height:40px;padding:0 12px;font-size:13.5px}
.pl-ask .pl-x{position:absolute;right:8px;top:8px;background:var(--white)}
.rm .pl-ask{animation:none}
/* ---------- the menu: the same one on a desktop and on a phone ---------- */
.nb-menu{background:var(--navy);color:var(--cream)}
.nav.dark .nb-menu{background:var(--cream);color:var(--navy)}
@media(max-width:700px){.nav #soundBtn{display:none}.nb-menu{padding:0 10px}}
@media(max-width:400px){.nav-r{gap:6px}.nav .nb{padding:0 9px;font-size:12.5px}}
.mn{position:fixed;inset:0;z-index:124;display:flex;flex-direction:column;background:var(--navy) radial-gradient(rgba(240,240,234,.07) 1.5px,transparent 1.7px) 0 0/22px 22px;color:var(--cream);overflow-y:auto;overscroll-behavior:contain;translate:0 -102%;visibility:hidden;transition:translate .6s var(--snap),visibility 0s .6s}
.mn.open{translate:0;visibility:visible;transition:translate .6s var(--snap)}
.mn-bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top,0px) + 14px) var(--gut) 12px;background:var(--navy);border-bottom:3px solid var(--cream)}
.mn-logo{margin-right:auto;--plate:var(--navy);--logo:var(--cream)}
.mn-sound,.mn .sq{box-shadow:4px 4px 0 var(--pink)}
.mn .sq{flex:none;width:46px;height:46px}
.mn-in{flex:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(26px,3vw,56px) clamp(18px,3vw,54px);align-content:start;padding:clamp(22px,5vh,58px) var(--gut) clamp(40px,7vh,80px)}
.mn-col{--mc:var(--pink);display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.mn-home{--mc:var(--lime)}.mn-biz{--mc:var(--sky)}.mn-us{--mc:var(--purple)}
.mn-col h2{margin:0 0 12px;padding:4px 10px 2px;background:var(--mc);color:var(--navy);font-family:'Permanent Marker',cursive;font-weight:400;font-size:clamp(16px,1.4vw,21px);line-height:1.1;rotate:-2deg}
.mn-col a,.mn-col button{display:inline-flex;align-items:center;gap:.35em;min-height:44px;padding:5px 0 3px;color:inherit;font-family:var(--f-c);font-weight:400;font-size:clamp(23px,2.5vw,40px);line-height:1;letter-spacing:.005em;text-align:left;text-transform:uppercase;transition:color .15s,translate .25s var(--ease)}
.mn-col img{flex:none;width:auto;height:1.45em;margin-block:-.3em;rotate:-6deg}
@media(hover:hover){.mn-col a:hover,.mn-col button:hover{color:var(--mc);translate:8px 0}}
.mn-mq{display:flex;flex:none;overflow:hidden;margin-top:auto;padding:9px 0 7px;background:var(--lime);color:var(--navy);user-select:none}
.mn-mq-t{display:flex;flex:none;align-items:center;gap:clamp(16px,2vw,34px);padding-right:clamp(16px,2vw,34px);font-family:var(--f-c);font-size:clamp(20px,2.2vw,34px);line-height:1;text-transform:uppercase;white-space:nowrap;animation:rmmq 30s linear infinite}
.mn-mq-t i{width:.42em;height:.42em;background:var(--navy);rotate:45deg}
body[data-ov="menu"] .player{bottom:calc(env(safe-area-inset-bottom,0px) + clamp(56px,7vw,70px))}
@media(max-width:900px){.mn-in{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.mn-col a,.mn-col button{font-size:21px}.mn-logo{width:108px;height:41px}}
.rm .mn-mq-t{animation:none}
/* ---------- the bar: Subscribe as its own item, search and account as icons; the menu gets a search box on top ---------- */
.nb-ic{justify-content:center;width:44px;padding:0}
@media(max-width:1240px){.nb-brew{display:none}}
@media(max-width:1060px){.nav .nb-sub,.nav .nb-ic{display:none}}
.mn-top{display:flex;flex-wrap:wrap;align-items:center;gap:14px clamp(14px,2vw,30px);padding:clamp(18px,3.6vh,36px) var(--gut) 0}
.mn-find{flex:1 1 300px;display:flex;max-width:560px;height:54px;border:3px solid var(--cream);background:var(--cream)}
.mn-find:focus-within{box-shadow:5px 5px 0 var(--pink)}
.mn-find input{flex:1;min-width:0;padding:0 14px;border:0;border-radius:0;background:transparent;color:var(--navy);font:inherit;font-size:16px;font-weight:600;outline:0;-webkit-appearance:none;appearance:none}
.mn-find input::placeholder{color:rgba(17,26,55,.6)}
.mn-find input::-webkit-search-cancel-button{-webkit-appearance:none}
.mn-find button{flex:none;display:grid;place-items:center;width:52px;background:var(--pink);color:var(--navy)}
.mn-quick{display:flex;flex-wrap:wrap;gap:10px 14px}
.mn-quick a,.mn-quick button{display:inline-flex;align-items:center;min-height:48px;padding:0 16px;background:var(--lime);color:var(--navy);font-size:15px;font-weight:700;box-shadow:4px 4px 0 var(--pink);transition:translate .14s var(--ease),box-shadow .14s var(--ease)}
.mn-quick a{background:var(--cream)}
.mn-quick a:active,.mn-quick button:active{translate:4px 4px;box-shadow:0 0 0 var(--pink)}
.mn-in{padding-top:clamp(22px,4vh,44px)}
/* when the links come from Shopify's Navigation: colours go round in the same order, third-level links sit smaller */
.mn-k1{--mc:var(--lime)}.mn-k2{--mc:var(--sky)}.mn-k3{--mc:var(--purple)}
.mn-col .mn-sub{min-height:36px;padding-left:.7em;font-size:clamp(17px,1.5vw,24px)}
.mn-col .mn-lab{margin:clamp(12px,1.8vh,20px) 0 5px;padding:3px 9px 1px;border:2px solid var(--mc);color:var(--mc);font-family:'Permanent Marker',cursive;font-weight:400;font-size:clamp(14px,1.15vw,18px);line-height:1.1;letter-spacing:.02em;rotate:1.5deg}
@media(min-width:901px) and (max-height:800px){.mn-in{padding-bottom:24px}.mn-col a,.mn-col button{min-height:40px}.mn-col .mn-lab{margin-top:10px}}
@media(max-width:900px){.mn-in{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 150px)}}


/* ================= product pages =================
   Everything above is the site's own stylesheet, so a blend's page here is the same world, the same buy box and the same
   buttons as on the site. What follows is only what a product page adds. */

/* the concept's page picker. Not part of the design: in the theme each of these pages has its own address */
.pv{display:flex;align-items:center;justify-content:center;gap:6px 14px;flex-wrap:wrap;padding:calc(env(safe-area-inset-top,0px) + 6px) 12px 6px;background:var(--lime);color:var(--navy);font-size:12.5px;font-weight:700;pointer-events:auto;border-bottom:2px solid var(--navy)}
.pv-b{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}
.pv-b button{min-height:28px;padding:2px 10px;border:2px solid var(--navy);background:var(--white);font-size:12.5px;font-weight:700;white-space:nowrap}
.pv-b button[aria-pressed="true"]{background:var(--navy);color:var(--cream)}
@media(hover:hover){.pv-b button:hover{background:var(--pink);color:var(--navy)}}
.pv+.bar{padding-top:7px}
.live .pv{display:none}
@media(max-width:700px){.pv-l{display:none}.pv{padding-inline:6px}.pv-b button{padding:2px 7px;font-size:12px}}
a.nb{text-decoration:none}

/* the opening screen is the blend's page from the site, standing on its own instead of stacking */
.pp .stack{position:relative}
.pp .panel{position:relative;top:auto;height:auto;min-height:max(660px,100svh);z-index:1}
.pp .panel .p-grid{height:auto;min-height:max(660px,100svh)}
@media(max-width:980px){.pp .panel,.pp .panel .p-grid{min-height:0}}
.pp .p-name{margin:0}
.pp .p-arrow{display:none}                      /* the tabs and the cards below do this job on a product page */
@media(max-width:980px){.pp .p-tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);width:calc(100% + var(--gut) * 2)}.pp .p-tabs::-webkit-scrollbar{display:none}.pp .p-tabs button{flex:none}.pp .p-grid{padding-top:calc(var(--top) + 18px)}}

/* buy box extras: how many, and the line that settles nerves */
.buy-row{display:flex;gap:10px;align-items:stretch}
.buy-row .btn{flex:1;width:auto;min-width:0}
.buy-qty{margin-top:0;flex:none;align-self:stretch;display:flex}
.buy-qty button{width:38px;height:auto;min-height:54px;font-size:18px}
.buy-qty span{display:grid;place-items:center;min-width:30px}
.buy-note{font-size:13px;font-weight:600;line-height:1.3;margin-top:-2px}
.buy-fixed{display:flex;align-items:baseline;gap:10px;padding:10px 12px;border:2px solid var(--navy);background:var(--navy);color:var(--cream);font-weight:700;font-size:14px}
.buy-fixed b{font-family:var(--f-d);font-weight:400;font-size:18px}
@media(max-width:1240px) and (min-width:981px){.buy-qty button{width:32px}.buy-row{gap:8px}}

/* ----- single origins and decaf: one page, the product fills it in ----- */
.p-so{--pc:var(--purple);--pi:var(--navy);--pg:rgba(17,26,55,.09);--ps:var(--navy);--burst:var(--cream);--f1:#D91023;--f2:#ffffff;--f3:#D91023}
.p-so[data-col="colombia"]{--pc:var(--pink);--f1:#FCD116;--f2:#003893;--f3:#CE1126}
.p-so[data-col="brazil"]{--pc:var(--lime);--burst:var(--white);--f1:#009C3B;--f2:#FFDF00;--f3:#002776}
.p-so[data-col="decaf"]{--pc:#1B2452;--pi:var(--cream);--pg:rgba(255,255,255,.06);--ps:#F6E65A;--burst:#2B3A7A;--f1:#FCD116;--f2:#003893;--f3:#CE1126}
.p-so .cloud{fill:var(--white);opacity:.9}
.str-so span:first-child{background:var(--lime);color:var(--navy)}
.str-so span:last-child{background:var(--white);color:var(--navy)}
.p-so .p-bag .str{left:-4%;top:6%}
.p-so .bagflip:disabled{cursor:default}
.p-so .pf-a{left:-6%;bottom:5%;width:36%;rotate:-10deg}
.p-so .pf-b{right:-2%;top:7%;width:30%;rotate:12deg}
.p-so .pf-c{right:0;bottom:2%;width:27%;rotate:8deg}
.pp-truck{bottom:calc(var(--sawh) * .68);width:min(26vh,18vw);--t:24s;--w:-7s}
.pp-truck img{animation:bobb .5s ease-in-out infinite}
.pp-plane{top:calc(var(--top) + 3vh);width:min(22vh,15vw);--t:31s;--w:-16s}
.pp-plane img{animation:bobb 1.6s ease-in-out infinite}
@media(max-width:980px){.pp-truck{width:36vw}.pp-plane{width:28vw;top:calc(var(--top) + 60px)}}
.p-so .p-tabs button{background:var(--pc)}
.p-so .p-tabs button[aria-current="true"]{background:var(--pi);color:var(--cream)}
@media(hover:hover){.p-so .p-tabs button:hover{background:var(--pi);color:var(--cream)}}
.str-so{font-family:'Luckiest Guy',var(--f-d);letter-spacing:.02em}.str-so span:first-child{padding-top:.28em}
.p-so .p-tabs img{height:30px}

/* ----- what's in the cup ----- */
.cup-grid{display:grid;grid-template-columns:minmax(0,6.2fr) minmax(0,5fr);gap:clamp(28px,5vw,90px);align-items:start}
.cup .h2{font-size:clamp(40px,6.4vw,112px)}
.cup-notes{display:flex;flex-wrap:wrap;gap:clamp(10px,2vw,30px);margin-top:clamp(26px,5vh,60px);align-items:flex-end}
.cup-n{display:flex;flex-direction:column;align-items:center;gap:8px;margin:0;rotate:calc((var(--i) - 1) * 4deg);scale:.86;transition:scale .6s var(--pop) calc(var(--i) * .09s)}
.cup-n img{height:clamp(104px,13vw,190px);width:auto;max-width:none;filter:drop-shadow(5px 6px 0 rgba(17,26,55,.2))}
.cup-n figcaption{padding:4px 10px;border:2px solid var(--navy);background:var(--white);font-weight:700;font-size:clamp(13px,1.15vw,16px);line-height:1.2;text-align:center;box-shadow:3px 3px 0 var(--navy)}
.cup-t{display:inline-block;padding:.34em .6em .26em;border:3px solid var(--navy);background:var(--pink);font-family:var(--f-d);text-transform:uppercase;font-size:clamp(20px,2.6vw,40px);line-height:1;box-shadow:6px 6px 0 var(--navy);rotate:calc((var(--i) - 1) * 3deg);scale:.86;transition:scale .6s var(--pop) calc(var(--i) * .09s)}
.cup-t:nth-child(2){background:var(--lime)}.cup-t:nth-child(3){background:var(--sky)}
.in .cup-n,.in .cup-t,.rm .cup-n,.rm .cup-t{scale:1}
.cup-shout{margin-top:clamp(22px,4vh,44px);font-size:clamp(22px,2.4vw,36px);rotate:-3deg;transform-origin:left}
.cup-r{display:flex;flex-direction:column;gap:clamp(18px,3vh,30px);padding-top:clamp(6px,1.5vw,22px)}
.scale{display:grid;grid-template-columns:6.2em minmax(0,1fr) 6.6em;align-items:center;gap:14px;font-weight:700;font-size:15px}
.scale span:last-child{text-align:right}
.scale i{position:relative;height:16px;border:3px solid var(--navy);background:var(--white)}
.scale b{position:absolute;top:50%;left:var(--p,50%);width:26px;height:38px;translate:-50% -50%;border:3px solid var(--navy);background:var(--pink);box-shadow:4px 4px 0 var(--navy);transition:left .9s var(--pop) .15s}
.cup:not(.in) .scale b{left:4%}
.rm .cup .scale b{left:var(--p,50%);transition:none}
.cup-meta{border-top:3px solid var(--navy);margin-top:6px}
.cup-desc{max-width:56ch}
.cup-desc:empty,.cup-shout:empty{display:none}
@media(max-width:860px){.cup-grid{grid-template-columns:minmax(0,1fr)}.scale{font-size:13.5px;gap:10px;grid-template-columns:5.6em minmax(0,1fr) 6em}}

/* ----- subscription ----- */
.psub{position:relative;overflow:hidden;padding-bottom:calc(clamp(80px,13vh,160px) + min(30vw,420px))}
.psub .h2{font-size:clamp(38px,5.4vw,94px)}
.psub-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,5vw,90px);align-items:start}
.psub-lead{margin-top:clamp(18px,3vh,30px)}
.psub-steps{list-style:none;margin:0;padding:0;counter-reset:st;display:grid;gap:14px}
.psub-steps li{counter-increment:st;position:relative;display:grid;gap:3px;padding:16px 18px 16px 74px;border:3px solid var(--navy);background:var(--cream);box-shadow:8px 8px 0 var(--navy)}
.psub-steps li:nth-child(2){rotate:.8deg;background:var(--white)}.psub-steps li:nth-child(3){rotate:-.6deg}
.psub-steps li::before{content:counter(st);position:absolute;left:14px;top:50%;translate:0 -50%;display:grid;place-items:center;width:44px;height:44px;background:var(--navy);color:var(--lime);font-family:var(--f-d);font-size:22px}
.psub-steps b{font-family:var(--f-d);font-weight:400;text-transform:uppercase;font-size:clamp(16px,1.5vw,21px);line-height:1.1}
.psub-steps span{font-weight:500;font-size:15.5px;line-height:1.4}
.psub-row{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,4vw,60px);align-items:end;max-width:760px;margin-top:clamp(26px,5vh,56px)}
.psub .sub-street{bottom:0}
.psub .sub-rider{bottom:10px}
.psub .sub-parcel{top:auto;bottom:min(27vw,380px)}
@media(max-width:860px){.psub-grid{grid-template-columns:minmax(0,1fr)}.psub-row{grid-template-columns:minmax(0,1fr)}.psub-row .btn{justify-self:start}.psub{padding-bottom:calc(70px + 46vw)}}

/* ----- brew smarter, not harder ----- */
.brew-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(20px,4vw,70px);align-items:end}
.brew .h2{font-size:clamp(38px,6.2vw,108px)}
.brew-head .lead b{color:var(--lime)}
.brew-seg{margin-top:clamp(26px,5vh,54px);max-width:720px;border-color:var(--cream);background:var(--navy)}
.brew-seg button{color:var(--cream);min-height:50px;font-size:15px}
.brew-seg button[aria-pressed="true"]{color:var(--navy)}
.brew-seg .thumb{background:var(--pink)}
.brew-grid{display:grid;grid-template-columns:minmax(0,3.6fr) minmax(0,4.6fr) minmax(0,3.8fr);gap:clamp(16px,2.4vw,36px);margin-top:clamp(20px,3.5vh,36px);align-items:start}
.brew-card{display:flex;flex-direction:column;gap:16px;padding:clamp(16px,1.8vw,26px);border:3px solid var(--cream);background:var(--cream);color:var(--navy);box-shadow:10px 10px 0 var(--pink)}
.brew-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;border:3px solid var(--navy)}
.brew-stats dt{grid-row:2;padding:0 6px 10px;text-align:center;font-size:12px;font-weight:700;border-right:2px solid var(--navy)}
.brew-stats dd{grid-row:1;min-width:0;padding:12px 4px 2px;text-align:center;font-family:var(--f-d);font-size:clamp(14px,1.3vw,20px);line-height:1.05;border-right:2px solid var(--navy)}
.brew-stats dt:nth-of-type(n+4){grid-row:4;border-top:0}.brew-stats dd:nth-of-type(n+4){grid-row:3;border-top:2px solid var(--navy)}
.brew-stats dt:nth-of-type(3n),.brew-stats dd:nth-of-type(3n){border-right:0}
.brew-cups{display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:700}
.brew-cups .qty{margin-top:0}
.brew-card .btn{--bs:var(--navy);align-self:flex-start;white-space:normal;text-align:left;line-height:1.2;padding-block:8px}
.brew-steps{list-style:none;margin:0;padding:0;counter-reset:bs;display:grid;gap:0;border-top:3px solid var(--cream)}
.brew-steps li{counter-increment:bs;position:relative;padding:14px 0 14px 50px;border-bottom:2px solid rgba(240,240,234,.35);font-weight:500;font-size:clamp(15.5px,1.25vw,18px);line-height:1.35}
.brew-steps li::before{content:counter(bs,decimal-leading-zero);position:absolute;left:0;top:14px;font-family:var(--f-d);font-size:17px;color:var(--pink)}
.brew-steps b{color:var(--lime);font-weight:700}
.brew-tip{margin-top:16px;padding:12px 14px;border:2px solid var(--sky);color:var(--sky);font-weight:600;font-size:15px;line-height:1.4}
.brew-fix{margin-top:10px;font-size:14px;font-weight:500;line-height:1.45;opacity:.85}
.brew-launch{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:clamp(16px,1.8vw,26px);border:3px solid var(--cream);background:var(--lime);color:var(--navy);box-shadow:10px 10px 0 var(--purple)}
.brew-launch .brewit-clock{position:relative;left:auto;top:auto;width:100%;margin-bottom:8px;rotate:-2deg;box-shadow:6px 6px 0 var(--pink)}
.brew-launch .tm-led-t{height:clamp(46px,4.6vw,72px)}
.bl-coach{position:absolute;right:-18px;top:-70px;z-index:4;width:clamp(84px,8vw,128px);height:auto;rotate:8deg;filter:drop-shadow(0 10px 8px rgba(17,26,55,.3));animation:bobb 2.2s ease-in-out infinite}
.bl-h{font-family:var(--f-d);font-weight:400;font-size:clamp(20px,1.9vw,28px);line-height:1;text-transform:uppercase}
.bl-p{font-size:15px;font-weight:600;line-height:1.4}
.brew-launch .btn{align-self:stretch;--bs:var(--navy)}
.brew-launch .btn svg{flex:none}
.rm .bl-coach{animation:none}
@media(max-width:1080px){.brew-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.brew-how{grid-column:1/-1;grid-row:2}}
@media(max-width:700px){.brew-head{grid-template-columns:minmax(0,1fr)}.brew-grid{grid-template-columns:minmax(0,1fr)}.brew-how{grid-row:auto}.brew-seg button{font-size:13.5px;padding:0 6px}}

/* ----- a pointer to the guides, where there is no recipe of our own to show ----- */
.guides{padding-block:clamp(60px,9vh,110px)}
.guides-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(18px,3vw,50px);align-items:center}
.h2-s{font-size:clamp(30px,4.2vw,68px)}
.guides .acts{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:980px){.guides-row{grid-template-columns:minmax(0,1fr)}}

/* ----- the people who drink it ----- */
.pword .h2{font-size:clamp(38px,6.2vw,108px)}
.pword .aside{margin-top:14px}
.prev{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,36px);margin-top:clamp(28px,5vh,60px);align-items:start}
.prev-c{display:flex;flex-direction:column;gap:14px;margin:0;padding:clamp(18px,2vw,30px);border:3px solid var(--navy);background:var(--white);box-shadow:10px 10px 0 var(--pink);rotate:calc((var(--i) - 1) * 1.2deg)}
.prev-c:nth-child(2){background:var(--sky);box-shadow:10px 10px 0 var(--navy);margin-top:clamp(0px,2vw,28px)}
.prev-c:nth-child(3){background:var(--lime);box-shadow:10px 10px 0 var(--purple)}
.prev-s{font-size:18px;letter-spacing:.14em}
.prev-c blockquote{margin:0;font-weight:600;font-size:clamp(16.5px,1.45vw,21px);line-height:1.32;text-wrap:pretty}
.prev-c figcaption{font-size:14px;font-weight:700;padding-top:12px;border-top:2px solid var(--navy)}
@media(max-width:900px){.prev{grid-template-columns:minmax(0,1fr)}.prev-c:nth-child(2){margin-top:0}}

/* ----- the other coffees ----- */
.others{background:var(--sky)}
.others .pick-row.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.others .pick-card{cursor:pointer}
.so-row{margin-top:clamp(34px,6vh,64px);display:grid;gap:14px}
.so-row-h{font-family:var(--f-c);text-transform:uppercase;font-size:clamp(24px,2.6vw,40px);line-height:1}
.so-chips{display:flex;flex-wrap:wrap;gap:12px}
.so-chip{display:flex;align-items:center;gap:10px;min-height:64px;padding:6px 16px 6px 8px;border:3px solid var(--navy);background:var(--cream);box-shadow:5px 5px 0 var(--navy);font-weight:700;transition:translate .16s var(--ease),box-shadow .16s var(--ease),background .2s}
.so-chip img{height:50px;width:auto}
.so-chip small{font-weight:600;opacity:.8}
.so-chip:active{translate:5px 5px;box-shadow:0 0 0 var(--navy)}
@media(hover:hover){.so-chip:hover{background:var(--pink);translate:-2px -2px;box-shadow:7px 7px 0 var(--navy)}}
@media(max-width:900px){.others .pick-row,.others .pick-row.two{grid-template-columns:minmax(0,1fr)}}

/* ----- good to know ----- */
.pfaq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(20px,5vw,90px);align-items:start}
.pfaq .faq{margin-top:0}
@media(max-width:860px){.pfaq-grid{grid-template-columns:minmax(0,1fr)}}

/* the footer has no court above it here */
.pp .foot{padding-top:clamp(30px,5vh,60px)}

/* ----- the bar that follows you down the page ----- */
.pp-bar{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);z-index:55;display:flex;align-items:center;gap:14px;width:min(680px,calc(100vw - 24px));padding:8px 12px 8px 8px;border:3px solid var(--navy);background:var(--white);color:var(--navy);box-shadow:8px 8px 0 var(--pink);translate:-50% calc(100% + 40px);visibility:hidden;transition:translate .45s var(--pop),visibility 0s .45s}
.pp-bar.on{translate:-50% 0;visibility:visible;transition:translate .45s var(--pop)}
.pp-bar img{flex:none;height:58px;width:auto}
.pp-bar-t{display:grid;min-width:0;flex:1;line-height:1.2}
.pp-bar-t b{font-family:var(--f-d);font-weight:400;text-transform:uppercase;font-size:clamp(13px,1.3vw,17px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-bar-t small{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-bar-p{font-family:var(--f-d);font-size:clamp(17px,1.8vw,24px);font-variant-numeric:tabular-nums}
.pp-bar .btn{--bs:var(--navy);flex:none}
body.lock .pp-bar{visibility:hidden}
@media(max-width:560px){.pp-bar{gap:10px;padding:7px 8px 7px 12px;box-shadow:5px 5px 0 var(--pink)}.pp-bar img{display:none}.pp-bar .btn{padding:0 12px}}
.bit{position:fixed;z-index:160;width:10px;height:10px;pointer-events:none}
@media(min-width:900px){.pp-bar{left:auto;right:var(--gut);width:min(540px,46vw);translate:0 calc(100% + 40px)}.pp-bar.on{translate:0 0}}
/* a narrow desktop window has three tight columns, so the words keep clear of the scenery along the bottom */
@media(min-width:981px) and (max-width:1240px){.pp .panel .p-grid{padding-bottom:calc(var(--pw) * .24 + var(--sawh))}}


/* ----- where it grows: each single origin wears its own country. The land along the bottom, what flies and drives across,
   the flag, a stamp with the region on it, and for the decaf a night sky ----- */
.so-flag{position:relative;display:inline-flex;flex:none;width:34px;height:23px;border:2px solid var(--navy);overflow:hidden;background:var(--f1)}
.so-flag b{flex:1;background:var(--f1)}
.so-flag b:nth-child(2){background:var(--f2)}.so-flag b:nth-child(3){background:var(--f3)}
.p-so[data-col="colombia"] .so-flag,.p-so[data-col="decaf"] .so-flag{flex-direction:column}
.p-so[data-col="colombia"] .so-flag b:first-child,.p-so[data-col="decaf"] .so-flag b:first-child{flex:2}
.p-so[data-col="brazil"] .so-flag b{display:none}
.p-so[data-col="brazil"] .so-flag::before{content:'';position:absolute;left:50%;top:50%;width:62%;aspect-ratio:1;translate:-50% -50%;rotate:45deg;scale:1 .62;background:var(--f2)}
.p-so[data-col="brazil"] .so-flag::after{content:'';position:absolute;left:50%;top:50%;width:26%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:var(--f3)}
.so-tag{display:inline-flex;align-items:center;gap:10px}
.so-tag .so-flag{border-color:currentColor;width:30px;height:20px}
.so-stamp{position:relative;align-self:flex-start;width:min(100%,286px);margin:22px 0 0 6px;padding:7px;rotate:3deg;color:var(--navy);background:radial-gradient(circle,transparent 0 3.6px,var(--cream) 4.1px) -6px -6px/12px 12px round;filter:drop-shadow(5px 5px 0 var(--ps))}
.so-stamp-in{display:flex;flex-direction:column;gap:2px;padding:12px 14px 0;background:var(--cream);border:2px solid var(--navy);overflow:hidden}
.so-stamp-k{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;line-height:1.2}
.so-stamp-c{margin-top:5px;font-family:var(--f-d);font-size:clamp(20px,1.85vw,28px);line-height:.95;letter-spacing:-.01em;text-transform:uppercase}
.so-stamp-r{font-family:'Permanent Marker',cursive;font-size:clamp(17px,1.5vw,22px);line-height:1.15}
.so-stamp-e{font-size:13px;font-weight:600;line-height:1.3}
.so-band{display:block;height:13px;margin:11px -14px 0;border-top:2px solid var(--navy);background:repeating-linear-gradient(90deg,#FF69AE 0 9px,#F27B20 9px 18px,#FFD84A 18px 27px,#19B5A5 27px 36px,#C888F8 36px 45px)}
.p-so[data-col="colombia"] .so-band{background:linear-gradient(135deg,var(--navy) 25%,transparent 25%) -6px 0/12px 12px,linear-gradient(225deg,var(--navy) 25%,transparent 25%) -6px 0/12px 12px,linear-gradient(315deg,var(--navy) 25%,transparent 25%) 0 0/12px 12px,linear-gradient(45deg,var(--navy) 25%,#FCD116 25%) 0 0/12px 12px}
.p-so[data-col="brazil"] .so-band{background:repeating-linear-gradient(45deg,#009C3B 0 8px,#FFDF00 8px 16px)}
.p-so[data-col="decaf"] .so-band{background:radial-gradient(circle,#F6E65A 0 1.7px,transparent 2.2px) 0 0/11px 11px,#1B2452}
.so-post{position:absolute;right:-34px;bottom:-34px;width:108px;height:108px;rotate:-16deg;fill:none;stroke:var(--navy);stroke-width:2.2;opacity:.9;pointer-events:none}
.so-post text{fill:var(--navy);stroke:none;font-family:'Space Grotesk',var(--f-b);font-weight:700;font-size:10.6px;letter-spacing:.9px}
.so-post path:last-child{stroke-width:2.6;stroke-linecap:round}
.p-so[data-col="decaf"] .so-post{stroke:var(--navy)}
/* what crosses the page */
.p-so[data-col="peru"] .pp-truck{width:min(17vh,11.5vw);bottom:calc(var(--sawh) * .5)}
.p-so[data-col="colombia"] .pp-truck,.p-so[data-col="decaf"] .pp-truck{width:min(22vh,15vw);bottom:calc(var(--sawh) * .5)}
.p-so[data-col="brazil"] .pp-truck{width:min(36vh,25vw);bottom:calc(var(--sawh) * .46);--t:30s}
.p-so[data-col="brazil"] .pp-truck img{animation-duration:.34s}
.p-so[data-col="peru"] .pp-truck img{animation-duration:.42s}
.p-so .pp-plane{width:min(20vh,13.5vw)}
.p-so .pp-plane img{animation-duration:.9s}
@media(max-width:980px){.p-so[data-col="peru"] .pp-truck{width:25vw}.p-so[data-col="colombia"] .pp-truck,.p-so[data-col="decaf"] .pp-truck{width:31vw}.p-so[data-col="brazil"] .pp-truck{width:48vw}.p-so .pp-plane{width:26vw}}
/* the decaf's night */
.so-sky{position:absolute;inset:0;display:none}
.p-so[data-col="decaf"] .so-sky{display:block}
.so-sky i{position:absolute;width:7px;height:7px;background:#F6E65A;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:sotwink 2.6s ease-in-out infinite}
.so-sky i:nth-child(1){left:6%;top:24%}.so-sky i:nth-child(2){left:19%;top:16%;scale:1.6;animation-delay:-.7s}.so-sky i:nth-child(3){left:31%;top:30%;animation-delay:-1.4s}
.so-sky i:nth-child(4){left:44%;top:18%;scale:1.3;animation-delay:-.3s}.so-sky i:nth-child(5){left:58%;top:13%;animation-delay:-1.9s}.so-sky i:nth-child(6){left:71%;top:22%;scale:1.8;animation-delay:-1.1s}
.so-sky i:nth-child(7){left:83%;top:15%;animation-delay:-.5s}.so-sky i:nth-child(8){left:93%;top:32%;scale:1.4;animation-delay:-1.6s}.so-sky i:nth-child(9){left:51%;top:38%;animation-delay:-2.2s}
@keyframes sotwink{50%{opacity:.25;transform:scale(.6)}}
.so-moon{position:absolute;left:32.2%;top:calc(var(--top) - 14px);width:min(14vh,8.6vw);height:auto;rotate:-8deg;filter:drop-shadow(0 0 26px rgba(246,230,90,.45));animation:bobb 5s ease-in-out infinite}
.so-moon:not([src]){display:none}
@media(max-width:980px){.so-moon{left:auto;right:3%;top:calc(var(--top) + 138px);width:min(22vw,150px)}}
.p-so[data-col="decaf"] .p-tabs button{background:var(--cream);color:var(--navy)}
.p-so[data-col="decaf"] .p-tabs button[aria-current="true"]{background:#F6E65A;color:var(--navy)}
@media(hover:hover){.p-so[data-col="decaf"] .p-tabs button:hover{background:#F6E65A;color:var(--navy)}}
.rm .so-sky i,.rm .so-moon{animation:none}
/* the same colour carries down the page */
[data-page="peru"] .cup .strip{--sc:var(--purple)}
[data-page="brazil"] .cup .strip{--sc:var(--lime)}
[data-page="decaf"] .cup .strip{--sc:#F6E65A}
[data-page="peru"] .cup .scale b{background:var(--purple)}[data-page="brazil"] .cup .scale b{background:var(--lime)}[data-page="decaf"] .cup .scale b{background:#F6E65A}
/* the land gets more room on these pages than a blend's scene does */
.p-so{--pw:min(70vw,max(46vw,82vh))}
@media(min-width:981px) and (min-height:701px){.pp .p-so .p-grid{padding-bottom:calc(var(--pw) * .19 + var(--sawh) * .5)}}
@media(max-width:980px){.p-so{--pw:124vw}.pp .p-so .p-grid{padding-bottom:calc(var(--sawh) + 33vw)}}

/* on the store the page picker goes: each page has its own address */
.live .pv{display:none}

/* ---------- the radio on a product page: music only (the scene controls live on the home page) ---------- */
.pl-ask,.pl-side,#plAmbVol,.pl-mute-card,.pl-note,#plScene{display:none !important}   /* 8 Oct: the scene and button switches show here too */
.pp-bar.on~.player{bottom:calc(env(safe-area-inset-bottom,0px) + 104px)}
@media(min-width:1400px){.pp-bar.on~.player{bottom:calc(env(safe-area-inset-bottom,0px) + 16px)}}


/* ---------- nothing in the game can be selected, and pictures and scenery never take a selection (it washed them pink).
   Words people might want to copy (numbers, addresses, the writing itself) still can be ---------- */
img,svg,picture,canvas,[aria-hidden="true"],[aria-hidden="true"] *{-webkit-user-select:none;user-select:none}
img::selection,svg::selection,[aria-hidden="true"]::selection,[aria-hidden="true"] *::selection{background:transparent;color:inherit}
img{-webkit-user-drag:none}
.play,.play *,.tm-stage,.tm-stage *,.p-scene,.p-scene *,.wall-scroll,.st-posters{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.play ::selection,.tm-stage ::selection,.p-scene ::selection{background:transparent;color:inherit}
.play input,.play textarea{-webkit-user-select:text;user-select:text}
/* on the store: the chat bubble from another app sits bottom right. The radio steps to the left of it (--chat is measured in the script) */
.live .player{right:max(var(--gut),var(--chat,0px))}
/* shipping: one plain line under each buy box */
.buy-ship{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;font-weight:700;line-height:1.3}
.buy-ship svg{flex:none}
/* the second picture shows on phones and tablets too, under the buy box */
@media(max-width:980px){.p-taste{display:block;align-self:center;width:min(76%,300px);margin:22px auto 6px;rotate:3deg}}

/* testimonials, 6 Oct: one card everywhere. Chunky stars, a quote mark sticker, who said it with the bag they drink */
:root{--star:#FFC93C}
.rv{--rb:var(--white);--rs:var(--pink);--rm:var(--pink);position:relative;display:flex;flex-direction:column;gap:clamp(12px,1.5vw,18px);margin:0;padding:clamp(18px,2.2vw,30px);border:3px solid var(--navy);background:var(--rb);color:var(--navy);box-shadow:10px 10px 0 var(--rs);text-align:left}
.rv-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;min-height:36px}
.rv-stars{display:inline-flex;gap:3px;flex:none}
.rv-stars svg{display:block;width:var(--sz,28px);height:var(--sz,28px);overflow:visible;filter:drop-shadow(2px 2px 0 var(--navy))}
.rv-stars svg:nth-child(odd){rotate:-7deg}.rv-stars svg:nth-child(even){rotate:6deg}
.rv-stars path{fill:var(--star);stroke:var(--navy);stroke-width:2;stroke-linejoin:round}
.rv-stars .off path{fill:var(--white)}
.rv-stars.big{--sz:clamp(26px,2.4vw,36px)}
.rv-mark{flex:none;width:clamp(48px,4.4vw,66px);height:auto;margin:-36px -6px 0 0;rotate:6deg;overflow:visible;filter:drop-shadow(4px 4px 0 var(--navy))}
.rv-mark path{fill:var(--rm);stroke:var(--navy);stroke-width:3;stroke-linejoin:round}
.rv blockquote,.rv>q{quotes:none;margin:0;font-weight:600;font-size:clamp(16.5px,1.42vw,20.5px);line-height:1.32;text-wrap:pretty}
.rv-who{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:14px;border-top:3px dashed var(--navy)}
.rv-av{flex:none;display:grid;place-items:center;width:44px;height:44px;border:3px solid var(--navy);background:var(--ra,var(--lime));font-family:var(--f-d);font-size:20px;line-height:1;color:var(--navy);rotate:-5deg;box-shadow:3px 3px 0 var(--navy)}
.rv-id{display:flex;flex-direction:column;gap:2px;min-width:0;line-height:1.2}
.rv-id b{font-family:var(--f-d);font-weight:400;font-size:17px;text-transform:uppercase;letter-spacing:.02em}
.rv-id small{font-size:13.5px;font-weight:600}
.rv-bag{flex:none;width:34px;height:auto;margin-left:auto;rotate:9deg;filter:drop-shadow(3px 3px 0 rgba(17,26,55,.35));pointer-events:none}
/* the headline numbers */
.rv-score{display:inline-flex;align-items:center;gap:14px;padding:12px 18px 12px 14px;border:3px solid var(--navy);background:var(--white);color:var(--navy);box-shadow:6px 6px 0 var(--navy);rotate:-1.5deg}
.rv-score>b{font-family:var(--f-d);font-weight:400;font-size:clamp(40px,4vw,58px);line-height:.9}
.rv-score>span{display:flex;flex-direction:column;gap:6px}
.rv-score small{font-size:13.5px;font-weight:700;line-height:1.25}
.rv-score.dark{border-color:var(--cream);box-shadow:6px 6px 0 var(--pink)}
.rv-g{gap:8px}
.rv-g svg{flex:none}
/* a card set beside the thing it talks about */
.rv.rv-solo{max-width:560px;rotate:-1.5deg}
.rv.rv-solo:nth-of-type(even){rotate:1.2deg}
.rv-wide{max-width:none}
.rv-sky{--rb:var(--sky);--rs:var(--navy);--rm:var(--lime)}
.rv-lime{--rb:var(--lime);--rs:var(--purple)}
.rv-cream{--rb:var(--cream)}
.rv-purple{--rb:var(--purple);--rs:var(--navy);--rm:var(--lime)}
@media(max-width:560px){.rv{box-shadow:7px 7px 0 var(--rs)}.rv-bag{width:28px}.rv-id small{font-size:13px}}
/* product pages: three cards, gently tipped, with the blend's own numbers */
.pword .wrap{position:relative}
.pword-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px}
.prev .rv{rotate:calc((var(--i) - 1) * 1.2deg)}
.prev.one{grid-template-columns:minmax(0,620px)}
@media(min-width:901px){.prev .rv:nth-child(2){margin-top:clamp(0px,2vw,28px)}}
/* the subscriber beside Subscribe */
@media(min-width:861px){.psub-row{max-width:none;grid-template-columns:minmax(0,5fr) auto minmax(0,6fr)}}
.psub-row .rv{rotate:1.5deg;--rs:var(--navy)}
.pword-g{margin-top:clamp(34px,5vh,56px)}
@media(max-width:700px){   /* phones: the tasting stickers round each bag a size down, so the bag stays the star */
  .pf-a{left:-4%;width:24%}.pf-b{width:22%}.p-pe .pf-b,.p-nsb .pf-b{width:13%}.pf-c{right:0;width:20%}
}

/* the shot clock on a phone, 6 Oct: two steps. First what and how, then the bench with your picks in a bar on top */
.tm-sum,.tm-lets,.tm-step-k{display:none}
@media(max-width:820px){
  .tm[data-step="pick"] .tm-col>*:not(.tm-picks){display:none}
  .tm[data-step="pick"] .tm-picks{display:flex;flex-direction:column}
  .tm[data-step="pick"] .tm-step-k{display:block;margin:2px 0 4px;font-size:14.5px;font-weight:600;line-height:1.35}
  .tm[data-step="pick"] .tm-picks .tm-k{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;margin:14px 0 10px;font-family:var(--f-d);font-weight:400;font-size:21px;line-height:1.05;text-transform:uppercase}
  .tm[data-step="pick"] .tm-coffee{display:flex;flex-direction:column;gap:10px;overflow:visible;margin:0;padding:0}
  .tm[data-step="pick"] .tm-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .tm[data-step="pick"] .tm-chips-so{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .tm[data-step="pick"] .tm-chip,.tm[data-step="pick"] .tm-chips-so .tm-chip{flex-direction:column;justify-content:center;gap:4px;min-width:0;padding:10px 4px 8px;font-size:13px;line-height:1.1;text-align:center;white-space:normal}
  .tm[data-step="pick"] .tm-chip img{height:66px}
  .tm[data-step="pick"] .tm-chips-so .tm-chip img{height:44px}
  .tm[data-step="pick"] .tm-chips-so .tm-chip{font-size:12px}
  .tm[data-step="pick"] .tm-meths{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:0}
  .tm[data-step="pick"] .tm-meth{flex-direction:row;justify-content:flex-start;gap:10px;min-height:66px;padding:8px 12px;font-size:15px;text-align:left}
  .tm[data-step="pick"] .tm-meth img{height:48px}
  .tm[data-step="pick"] .tm-howlink{display:none}
  .tm[data-step="pick"] .tm-lets{display:flex;align-items:center;justify-content:center;gap:10px;width:calc(100% - 122px);min-height:60px;margin-top:22px;font-size:18px}   /* the radio sits to its right, as it does beside Start */
  .tm[data-step="brew"] .tm-picks{display:none}
  .tm[data-step="brew"] .tm-sum{order:1;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 10px;border:3px solid var(--navy);background:var(--white);color:var(--navy);box-shadow:4px 4px 0 var(--tsh,var(--navy));text-align:left}
  .tm-sum img{flex:none;width:auto;height:46px}
  .tm-sum img+img{height:40px;margin-left:-6px}
  .tm-sum span{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
  .tm-sum b{font-family:var(--f-d);font-weight:400;font-size:15.5px;line-height:1.05;text-transform:uppercase}
  .tm-sum small{font-size:13px;font-weight:600;line-height:1.2}
  .tm-sum .btn{flex:none;min-height:42px;padding:0 13px;font-size:14px}
  .tm[data-step="brew"][data-state="run"] .tm-sum .btn{visibility:hidden}
  .tm[data-step="brew"] .tm-stage{width:min(100%,max(230px,calc((100vh - 470px) * 4 / 3)));width:min(100%,max(230px,calc((100dvh - 470px) * 4 / 3)))}
}

/* Jos's stickers, 6 Oct: die-cut stickers slapped where there is room. Decoration only: never in the way of a tap */
.stkr{position:absolute;z-index:3;width:var(--w,140px);height:auto;max-width:none;rotate:var(--r,6deg);filter:drop-shadow(5px 7px 0 rgba(17,26,55,.3));pointer-events:none;user-select:none;-webkit-user-drag:none}
.psub .deals{position:relative}
.stk-psub{right:6%;bottom:calc(100% + 12px);--w:clamp(104px,8.4vw,128px);--r:-8deg}
@media(max-width:860px){.stk-psub{display:none}}

/* our names, 6 Oct: written by hand with an arrow at each of us, instead of the small labels */
.faces .face .f-tag{position:absolute;left:50%;top:calc(100% - 2px);z-index:2;display:flex;flex-direction:column;align-items:center;gap:1px;color:var(--navy);white-space:nowrap;pointer-events:none}
.faces .face:first-child .f-tag{translate:-62% 0;rotate:5deg}
.faces .face+.face .f-tag{translate:-36% 0;rotate:-6deg}
.faces .f-tag .doodle{width:clamp(26px,2.3vw,32px);height:auto;stroke-width:4.5}
.faces .f-tag .note{font-size:clamp(23px,2.1vw,31px);line-height:1}
.faces .f-tag .doodle path{stroke-dashoffset:0;transition:none}
.faces .face .f-tag b.note,.fc-faces .f-both b.note{position:static;display:block;translate:none;padding:0;border:0;background:none;box-shadow:none;color:inherit;font-family:'Permanent Marker',cursive;font-weight:400;text-transform:none;letter-spacing:0;white-space:nowrap}
.team .faces.named{margin-bottom:clamp(62px,5.6vw,80px)}
.fc-faces .f-both{position:absolute;left:calc(100% + 8px);top:44%;display:flex;align-items:flex-end;gap:4px;color:var(--cream);white-space:nowrap;rotate:-4deg;pointer-events:none}
.fc-faces .f-both .doodle{width:46px;height:auto;stroke-width:4.5}
.fc-faces .f-both .doodle path{stroke-dashoffset:0;transition:none}
.fc-faces .f-both .note{margin-bottom:10px;font-size:clamp(20px,1.8vw,26px);line-height:1}

/* Help a brother out, 6 Oct: beside the Google review button */
.rv-help{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.rv-hb{gap:8px}
.rv-hb svg{flex:none}
.rev-side .rv-hb{--bs:var(--lime)}

/* subscription terms beside the buy button and in the cart (6 Oct) */
.buy-note a,.cart-subs a{font-weight:700;text-decoration:underline;text-underline-offset:3px;color:inherit}
.cart-subs{margin-top:6px}

/* the radio steps aside while the cart drawer is open (6 Oct) */
body:has(.cart.open) .player{opacity:0;visibility:hidden;pointer-events:none}

/* two sound switches in the bar (6 Oct): the scene sound, and the clicks */
.nb-fx svg{flex:none}
@media(max-width:700px){.nav #fxBtn{display:none}}
@media(min-width:701px) and (max-width:1500px){.nav #soundBtn .lbl,.nav #fxBtn .lbl{display:none}.nav #soundBtn,.nav #fxBtn{justify-content:center;min-width:44px;padding:0 12px}}
#mnFx{margin-left:10px}

/* the spinning record (6 Oct): on the No Sleep blend page now, not in the scene at the top */
.panel-in>.pp-vinyl{z-index:3;left:33.5vw;top:calc(var(--top) + 19vh);width:min(11.5vh,7.4vw);--d:0}
.pp-vinyl img{animation:spin 3.2s linear infinite}
@media(max-width:980px){.panel-in>.pp-vinyl{display:none}}

/* the shot clock in two steps on every screen (6 Oct, Jos): what and how first, then the bench */
@media(min-width:821px){
  .tm[data-step="pick"] .tm-c,.tm[data-step="pick"] .tm-r,.tm[data-step="pick"] .tm-card{display:none}
  .tm[data-step="pick"] .tm-body{display:flex;justify-content:center;align-items:flex-start}
  .tm[data-step="pick"] .tm-l{width:min(100%,940px);flex:none}
  .tm[data-step="pick"] .tm-step-k{display:block;margin:4px 0 2px;font-size:clamp(15px,1.3vw,18px);font-weight:600;line-height:1.35}
  .tm[data-step="pick"] .tm-picks .tm-k{margin:clamp(12px,2.4vh,24px) 0 10px;font-family:var(--f-d);font-weight:400;font-size:clamp(18px,1.8vw,26px);line-height:1.05;text-transform:uppercase}
  .tm[data-step="pick"] .tm-chips{gap:14px}
  .tm[data-step="pick"] .tm-chip{padding:12px 6px 10px;font-size:15px;gap:6px}
  .tm[data-step="pick"] .tm-chip img{height:clamp(60px,11vh,104px)}
  .tm[data-step="pick"] .tm-chips-so .tm-chip{font-size:13.5px}
  .tm[data-step="pick"] .tm-chips-so .tm-chip img{height:clamp(44px,7vh,66px)}
  .tm[data-step="pick"] .tm-meths{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .tm[data-step="pick"] .tm-meth{min-height:clamp(64px,9vh,84px);font-size:16px}
  .tm[data-step="pick"] .tm-meth img{height:clamp(46px,7vh,62px);width:auto}
  .tm[data-step="pick"] .tm-howlink{display:none}
  .tm[data-step="pick"] .tm-lets{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:64px;margin-top:clamp(16px,3vh,30px);font-size:20px}
  .tm[data-step="brew"] .tm-picks{display:none}
  .tm[data-step="brew"] .tm-sum{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 10px;border:3px solid var(--navy);background:var(--white);color:var(--navy);box-shadow:4px 4px 0 var(--tsh,var(--navy));text-align:left}
  .tm-sum img{flex:none;width:auto;height:46px}
  .tm-sum img+img{height:40px;margin-left:-6px}
  .tm-sum span{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
  .tm-sum b{font-family:var(--f-d);font-weight:400;font-size:15.5px;line-height:1.05;text-transform:uppercase}
  .tm-sum small{font-size:13px;font-weight:600;line-height:1.2}
  .tm-sum .btn{flex:none;min-height:42px;padding:0 13px;font-size:14px}
  .tm[data-step="brew"][data-state="run"] .tm-sum .btn{visibility:hidden}
}

/* the tasting stickers (7 Oct, Jos: "the flavour notes stickers should be same size representative of the screen size and
   flavours grouped and jaffa cakes for example under the sticker in a cool way so they know what they are"): one group under
   each bag, the stickers the same size as each other, each named on a strip of tape. Everything round the bag is sized off the
   bag (--bagh), and the bag off the screen: its height, its own column, and the room left under it for the stickers (down to
   just above the next page's teeth). On a wide screen the bag grows with the screen; on a narrow one it never spills out of
   its column; the stickers never sit on it */
.p-bag .bagflip{height:var(--bagh);flex:none}
.p-bag .p-burst{top:calc(50% - var(--lift));width:calc(var(--bagh) * .94)}
.p-bag .p-arrow{top:calc(50% - var(--lift))}
.p-bag .str{top:max(0px,calc(var(--btop) - var(--bagh) * .03))}
.p-bag .flip-hint{font-size:clamp(12px,calc(var(--bagh) * .027),20px)}
.tastes{z-index:2;display:flex;justify-content:center;align-items:flex-start;gap:calc(var(--s) * .16);flex:none;height:var(--tzh);margin:0;padding:0;list-style:none;pointer-events:none}
.tz{position:relative;flex:none;width:var(--s);height:100%}
.tz[hidden]{display:none}
.tz:nth-child(2){translate:0 calc(var(--s) * .08)}
.tz .el-in{display:block;width:100%;height:var(--s)}
.tz img{display:block;width:100%;height:100%;object-fit:contain;rotate:calc((var(--i) - 1) * 8deg);filter:drop-shadow(5px 6px 0 rgba(17,26,55,.2));animation:floaty 6.5s ease-in-out infinite}
.tz:nth-child(2) img{animation-duration:8s}
.tz:nth-child(3) img{animation-duration:7.2s}
.tz-n{position:absolute;left:50%;top:calc(var(--s) * .9);z-index:1;width:max-content;max-width:calc(var(--s) * 1.16 - 4px);translate:-50% 0;rotate:calc((var(--i) - 1) * -3deg - 1.5deg);filter:drop-shadow(3px 3px 0 var(--navy));opacity:0;scale:.5;transition:opacity .25s,scale .45s var(--pop)}
.tz-n span{display:block;padding:.32em .64em .26em;background:var(--white);color:var(--navy);font:400 clamp(11px,calc(var(--s) * .13),22px)/1.06 'Permanent Marker',var(--f-d);text-align:center;text-wrap:balance;clip-path:polygon(0 0,100% 0,calc(100% - .32em) 25%,100% 50%,calc(100% - .32em) 75%,100% 100%,0 100%,.32em 75%,0 50%,.32em 25%)}
.pop .tz-n,.rm .tz-n{opacity:1;scale:1;transition-delay:calc(var(--dl,0s) + .3s)}
.rm .tz img{animation:none}
@media(min-width:981px){
  /* the page's middle is a size container so the bag can be sized to the height it has (cqh); --tzx is how far under it the
     stickers may hang (into the street, short of the next page's teeth); the bag and its stickers sit centred in that, with
     room above the bag for the strength badge */
  .p-grid{container-type:size}
  .p-bag{container-type:inline-size;--tzx:calc(7vh + 8px - var(--sawh) * .4);--bagh:min(58vh,135cqw,calc((100cqh + var(--tzx)) / 1.392));--s:max(calc(var(--bagh) * .2),min(84px,29cqw));--tzg:calc(var(--bagh) * .04 + 10px);--tzh:calc(var(--s) * 1.34);--lift:calc((var(--tzg) + var(--tzh) - var(--tzx) - var(--bagh) * .09) / 2);--btop:calc(50% - var(--lift) - var(--bagh) / 2)}
  .p-bag .str{--fs:clamp(15px,calc(var(--bagh) * .05),40px)}
  .p-nsb .p-bag .str{top:max(0px,calc(var(--btop) - var(--bagh) * .1))}
  .tastes{position:absolute;left:50%;top:calc(50% - var(--lift) + var(--bagh) / 2 + var(--tzg));translate:-50% 0}
  .p-bag .bagflip{translate:0 calc(var(--lift) * -1)}   /* the bag sits centred in the room left by its badge and stickers */
}
@media(min-width:981px) and (max-height:700px){.p-bag{--tzx:calc(8px - var(--sawh) * .4)}}
@media(min-width:981px) and (max-height:800px){.p-bag{--tzx:4px}}   /* short laptop screens: clear of the radio in the corner */
@media(min-width:981px) and (max-width:1279px){.p-bag{--tzx:-14px}}   /* the radio sits along the bottom under the bag up to here */
@media(max-width:980px){
  .p-bag{container-type:inline-size;--bagh:min(52vh,440px,135cqw);--s:min(calc(var(--bagh) * .27),29cqw);--tzg:14px;--tzh:calc(var(--s) * 1.34);--lift:calc((var(--tzg) + var(--tzh)) / 2);--btop:calc(50% - var(--lift) - var(--bagh) / 2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--tzg)}
  .tastes{position:relative}
  .p-bag{padding-bottom:58px}   /* room for the bird perched on the buy box */
  .p-bag .p-burst{width:min(96vw,calc(var(--bagh) * .94))}
  .p-bag .str{--fs:18px}
}

/* 7 Oct 10:42am (Jos): "the turntable needs to fill lower space and the flavour strength thing covers the product need to be
   apparent though". The strength badge sits on the bag's right shoulder, never on the bag, and the bag leaves room for it; the
   No Sleep record sits low beside the facts, left of the bag (middle of the gap on wide screens), sized off the bag */
.panel .p-bag .str{left:calc(50% + var(--bagh) * .339);top:calc(var(--btop) - 2px);translate:-100% -100%}
@media(min-width:981px){
  .p-bag{--bagh:min(58vh,135cqw,calc((100cqh + var(--tzx) - 14px) / 1.447));--room:calc(var(--bagh) * .145 + 14px);--lift:calc((var(--tzg) + var(--tzh) - var(--tzx) - var(--room)) / 2);
    --gp:clamp(14px,2.6vw,44px);--c1:calc((100vw - 2 * var(--gut) - 2 * var(--gp)) * .4140625)}
  .p-bag>.pp-vinyl{z-index:2;width:calc(var(--bagh) * .3);top:calc(50% - var(--lift) + var(--bagh) * .12);--d:0;
    left:min(calc((min(var(--c1), 520px) - var(--c1) - var(--gp) + 50% - var(--bagh) * .339) / 2 - var(--bagh) * .15), calc(50% - var(--bagh) * .639 - 8px))}
}
/* product pages: the blend's page stands on its own and can grow past one screen, so its middle is not a size container; the
   bag is sized off the screen's height less the page's top and bottom padding instead */
@media(min-width:981px){
  .pp .panel .p-grid{container-type:normal}
  .pp .p-bag{--bagh:min(58vh,135cqw,calc((100svh - var(--top) - 24px - var(--sawh) * .6 - 7vh + var(--tzx) - 14px) / 1.447))}
}
@media(min-width:981px) and (max-width:1279px){.p-bag>.pp-vinyl{left:auto;right:calc(100% + 6px);top:calc(var(--btop) + var(--bagh) * .1);width:calc(var(--bagh) * .26)}}
@media(max-width:980px){
  .p-bag{--pt:82px;--pb:58px;padding:var(--pt) 0 var(--pb);--lift:calc((var(--tzg) + var(--tzh) + var(--pb) - var(--pt)) / 2)}
  .p-bag>.pp-vinyl{display:none}
  .panel .p-bag .str{top:calc(var(--btop) - 10px)}
}

/* 8 Oct: how far off free delivery the cart is; the skip link */
.cart-free{display:grid;gap:7px}
.cart-free[hidden]{display:none}
.cf-bar{display:block;height:10px;border:2px solid var(--navy);background:#fff;overflow:hidden}
.cf-bar i{display:block;height:100%;width:0;background:var(--lime);transition:width .35s ease}
.cart-free p{margin:0;font-weight:700;font-size:15px;line-height:1.3}
.skip{position:fixed;left:12px;top:-80px;z-index:2147483000;padding:10px 16px;background:var(--lime);color:var(--navy);border:3px solid var(--navy);font-weight:700;text-decoration:none}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 12px)}
.p-tabs .ts{display:none}
@media(max-width:700px){.p-tabs .tl{display:none}.p-tabs .ts{display:inline}}

/* 8 Oct (Jos): one small speaker button for the scene sound and the clicks; the music stays in the radio */
.nav #fxBtn{display:none}
.nav #soundBtn{justify-content:center;min-width:40px;padding:0 10px}
.nav #soundBtn .lbl,.nav #soundBtn .eq{display:none}
#soundBtn .spk{width:18px;height:18px;flex:none}
#soundBtn[aria-pressed="false"] .spk .sw,#soundBtn[aria-pressed="true"] .spk .sx{display:none}
#mnFx{display:none}
@media(max-width:700px){.p-tabs{gap:6px}.p-tabs button{gap:6px;padding:3px 10px 3px 5px}.p-tabs img{height:26px}}
@media(max-width:380px){.p-tabs img{display:none}.p-tabs button{padding:3px 11px}}
@media(max-width:340px){.p-tabs{gap:5px}.p-tabs button{padding:3px 8px;font-size:12px}}

/* 8 Oct (Jos): bundle and save, in the buy box (one-off 250g) and as a nudge in the cart */
.bnd{display:grid;gap:7px;margin-top:12px;padding-top:11px;border-top:3px dashed currentColor}
.bnd[hidden]{display:none}
.bnd-h{margin:0;font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.bnd-r{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.bnd-r>:only-child{grid-column:1/-1}
.bnd-b{display:grid;align-content:start;gap:2px;min-width:0;padding:8px 10px 9px;border:3px solid var(--navy);background:var(--white);color:var(--navy);box-shadow:3px 3px 0 var(--navy);text-align:left;font:inherit;cursor:pointer;transition:translate .15s,box-shadow .15s,background-color .15s}
.bnd-b b{font-size:13.5px;line-height:1.15}
.bnd-b span{font-size:12.5px;font-weight:600;line-height:1.3}
.bnd-b em{font-style:normal;font-weight:800;font-size:13.5px}
.bnd-b s{opacity:.55}
.bnd-b i{font-style:normal}
.bnd-b .bs{display:none}
@media(hover:hover){.bnd-b:hover{background:var(--lime);translate:-1px -1px;box-shadow:4px 4px 0 var(--navy)}}
.bnd-b:active{translate:2px 2px;box-shadow:1px 1px 0 var(--navy)}
.bnd-l{justify-self:start;font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:3px;color:inherit}
.buy.once:has(.bnd:not([hidden])) .buy-note{display:none}
@media(min-width:981px) and (max-height:800px){.bnd-h{display:none}.bnd{margin-top:7px;padding-top:0;border-top:0;gap:5px}.bnd-b{display:flex;align-items:baseline;justify-content:space-between;gap:2px 6px;flex-wrap:wrap;padding:5px 8px;line-height:1.1}.bnd-b .bl,.bnd-b s{display:none}.bnd-b .bs{display:inline}.bnd-b b,.bnd-b em{font-size:13px}.bnd-l{font-size:12px}}
.cart-nudge{display:grid;gap:10px;margin:16px 0 8px;padding:12px 14px;border:3px solid var(--navy);background:var(--lime);color:var(--navy);box-shadow:4px 4px 0 var(--navy)}
.cart-nudge.cn-ok{background:var(--white)}
.cart-nudge p{margin:0;font-size:14.5px;font-weight:600;line-height:1.35}
.cart-nudge .btn{justify-self:start}

/* 9 Oct 8:56am (Jos): wide screens. The tasting stickers sit beside "Brew it right", the bag and its arrows nearer the middle,
   the arrows bigger and clear of the buy box, and the scene's stickers back. The script marks html.tzw from 1500x801 up and
   moves the stickers into .p-foot; without it the page stays as it was. */
.pp-wide{display:none}
@media(min-width:1500px) and (min-height:801px){
  .tzw .p-bag{--tzg:0px;--tzh:0px;--lift:0px;--bagh:min(62vh,135cqw,calc((100cqh - 28px) / 1.3))}
  .tzw .pp .p-bag{--bagh:min(62vh,135cqw,calc((100svh - var(--top) - 24px - var(--sawh) * .6 - 7vh - 28px) / 1.3))}
  .tzw .p-foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 18px;width:100%;margin-top:14px}
  .tzw .p-foot .p-brew{flex:none;align-self:center;margin-top:0}
  .tzw .p-foot .tastes{position:static;translate:none;flex:none;margin-left:auto;--s:clamp(64px,4.8vw,100px);--tzh:calc(var(--s) * 1.34);height:var(--tzh);gap:calc(var(--s) * .14);justify-content:flex-end}
  .tzw .p-arrow,.tzw .pa-sq{width:64px;height:64px}
  .tzw .p-arrow{margin-top:-32px}
  .tzw .pa-bag{height:88px;bottom:calc(100% - 26px)}
  .tzw .pa-prev{left:-8px}.tzw .pa-next{right:-8px}
  .tzw .p-bag>.pp-vinyl{top:calc(50% - var(--lift) + var(--bagh) * .06)}   /* the record rides a little higher, clear of the stickers now at the foot of the words */
  .pp-wide{display:block}
  .pp-hydrant{display:block}
  .pp-moon{display:block;left:35vw;top:calc(var(--top) + 14vh);bottom:auto;width:min(10vh,6vw)}
  .pp-sun{left:33vw;top:var(--top);width:min(9vh,5.5vw);--d:0}
  .pp-sun img{animation:floaty 8s ease-in-out infinite}
  .pp-crab{left:31vw;bottom:calc(var(--sawh) * .55);width:min(9vh,6vw);--d:0}
  .pp-crab img{animation:bobb 2.6s ease-in-out infinite}
  .pp-boombox{left:30vw;bottom:calc(var(--sawh) * .55);width:min(10vh,7vw);--d:0}
  .pp-boombox img{animation:bobb 1.1s ease-in-out infinite}
  .pp-planet{left:30vw;top:calc(var(--top) + 2vh);width:min(8vh,5.5vw);--d:0}
  .pp-planet img{animation:floaty 11s ease-in-out infinite}
  .pp-ufo{right:11vw;left:auto;top:calc(var(--top) + 2vh);width:min(10vh,6vw);--d:0}
  .pp-ufo img{animation:floaty 5s ease-in-out infinite}
}
@media(min-width:1700px) and (min-height:801px){
  .tzw .p-grid{grid-template-columns:minmax(0,4.8fr) minmax(0,5fr) minmax(0,3.7fr);gap:clamp(44px,3.2vw,72px)}
  .tzw .p-bag{--gp:clamp(44px,3.2vw,72px);--c1:calc((100vw - 2 * var(--gut) - 2 * var(--gp)) * .355556)}
  .tzw .p-bag>.pp-vinyl{--vw:min(calc(var(--bagh) * .2),130px);width:var(--vw);left:calc(50% - var(--bagh) * .339 - var(--vw) - 8px);top:calc(50% + var(--bagh) * .5 - var(--vw))}   /* the record sits low in the gap between the stickers and the bag */
}

/* ================= 9 Oct (Jos, 10:32am): one look on every screen size =================
   "why can't the look of the website look the same regardless of the size of the screen it is? ... when you make the screen
   bigger, some of the icons remain the same size, they don't get proportionate, and they don't track in the same place."
   --bz is how much bigger than 1440 x 900 the screen is (the smaller of width over 1440 and height over 900, 1 to 2.4; 1 on
   phones, tablets, portrait screens and laptops, so nothing changes there). The landing page already grew by it; now the
   shell does too: the top bar, the menu, the cart drawer, the radio, the shot clock, the toast and the side arrows. The
   scenes fill the screen already, so they are left alone; the things inside them grow in their own style sheet's block. */
:root{--bz:1}
@media(min-width:1101px) and (min-height:641px){
  .top,.mn,.cart,.player,.toast,.rail,.pp-bar,.skip,.tm,.quiz,.gm,.au{zoom:var(--bz)}
}

/* ----- the blend pages (home page and product pages) and the product page's sections, on big screens (9 Oct, --bz) -----
   The scene and the bag already fill the screen; what sat at laptop size grows by the dial: the words and buttons on the left,
   the buy box and the picture under it, the arrows, the stickers under the bag, the strength badge. The bar is taller by the
   dial too (it is zoomed as a whole), so --top, the room left for it, grows with it; inside anything that is itself zoomed
   --top goes back to its plain value, or it would count twice. */
@media(min-width:1101px) and (min-height:641px){
  :root{--top:calc(env(safe-area-inset-top,0px) + 88px * var(--bz));--gut:calc(clamp(16px,4vw / var(--bz),56px) * var(--bz))}   /* the page's side gutter grows by the dial too (inside a zoomed block it is set back to its plain value by the patch) */
  .p-grid{gap:calc(clamp(14px,2.6vw / var(--bz),44px) * var(--bz))}
  .p-bag{--gp:calc(clamp(14px,2.6vw / var(--bz),44px) * var(--bz))}
  .top,.mn,.cart,.player,.toast,.tm,.quiz,.gm,.au,.pp-bar{--top:calc(env(safe-area-inset-top,0px) + 88px)}
  .p-copy,.p-buy,.p-bag>.tastes,.p-arrow{zoom:var(--bz)}
  .pp .cup>.wrap,.pp .psub>.wrap,.pp .brew>.wrap,.pp .pword>.wrap,.pp .others>.wrap,.pp .pfaq>.wrap,.foot>.wrap{zoom:var(--bz)}
}
/* This morning's wide-screen column change (words 4.8 / bag 5 / buy 3.7 from 1700px) was made for laptop-sized words with
   room to spare. With the words grown by the dial it only fits where the screen is much wider than it is tall (a
   3440 x 1440 ultrawide, a 1700 x 900 laptop); on a 1920 x 1080 or 2560 x 1440 the 1440 columns come back, scaled. */
@media(min-width:1700px) and (min-height:801px) and (max-aspect-ratio:1.84/1){
  .tzw .p-grid{grid-template-columns:minmax(0,5.3fr) minmax(0,4fr) minmax(0,3.5fr);gap:clamp(14px,2.6vw,44px)}
  .tzw .p-bag{--gp:clamp(14px,2.6vw,44px);--c1:calc((100vw - 2 * var(--gut) - 2 * var(--gp)) * .4140625)}
  .tzw .p-bag>.pp-vinyl{--vw:calc(var(--bagh) * .3);width:var(--vw);left:min(calc((min(var(--c1), 520px) - var(--c1) - var(--gp) + 50% - var(--bagh) * .339) / 2 - var(--bagh) * .15), calc(50% - var(--bagh) * .639 - 8px));top:calc(50% - var(--lift) + var(--bagh) * .06)}
}
@media(min-width:1101px) and (min-height:641px){
  /* the stickers beside "Brew it right" are sized against the real screen, then zoomed with the words: divide first */
  .tzw .p-foot .tastes{--s:clamp(64px,4.8vw / var(--bz),100px)}
}
@media(min-width:1101px) and (min-height:641px){
  /* a section's own breathing room, written against the screen, grows by the dial like the things inside it */
  .sec{padding-block:calc(clamp(80px,13vh / var(--bz),160px) * var(--bz))}
}

/* ----- generated by tools/dial_gen.py (product pages): screen-relative sizes inside the zoomed blocks, divided by the dial first; 123 rules, as CSS nesting ----- */
@media (min-width:1101px) and (min-height:641px){
:where(.pick>.wrap,.brewit>.wrap,.betty>.wrap,.sub>.wrap,.revs>.wrap,.biz>.wrap,.wild>.wrap,.foot>.wrap,.cup>.wrap,.psub>.wrap,.brew>.wrap,.pword>.wrap,.others>.wrap,.pfaq>.wrap,.p-copy,.p-buy,.p-bag>.tastes,.p-arrow,.room-bar,.rm-mq,.room .wrap>*>*:not(.rd),.room .rd.rm-art,.sub>.mq,.bz-mq,.top,.mn,.cart,.player,.toast,.tm,.quiz,.gm,.au,.rail,.pp-bar){
:is(.h2),&:is(.h2){font-size:clamp(40px,calc(7vw / var(--bz)),124px)}
:is(.lead),&:is(.lead){font-size:clamp(17px,calc(1.45vw / var(--bz)),22px)}
:is(.aside),&:is(.aside){font-size:clamp(15px,calc(1.2vw / var(--bz)),18px)}
:is(.p-copy),&:is(.p-copy){gap:clamp(8px,calc(1.6vh / var(--bz)),16px)}
:is(.p-name),&:is(.p-name){font-size:clamp(30px,calc(3.9vw / var(--bz)),74px)}
:is(.p-tag),&:is(.p-tag){font-size:clamp(14px,calc(1.35vw / var(--bz)),20px)}
:is(.p-desc),&:is(.p-desc){font-size:clamp(15px,calc(1.15vw / var(--bz)),18px)}
:is(.buy),&:is(.buy){padding:clamp(14px,calc(1.5vw / var(--bz)),22px)}
:is(.price-n),&:is(.price-n){font-size:clamp(32px,calc(3.1vw / var(--bz)),48px)}
:is(.wall-head .h2),&:is(.wall-head .h2){font-size:clamp(34px,calc(5.6vw / var(--bz)),96px)}
:is(.sub .h2),&:is(.sub .h2){font-size:clamp(40px,calc(6.3vw / var(--bz)),116px)}
:is(.deal b),&:is(.deal b){font-size:clamp(26px,calc(2.8vw / var(--bz)),40px)}
:is(.revs .wrap),&:is(.revs .wrap){gap:clamp(24px,calc(5vw / var(--bz)),80px)}
:is(.rev-side .h2),&:is(.rev-side .h2){font-size:clamp(32px,calc(3.5vw / var(--bz)),64px)}
:is(.biz-copy .h2),&:is(.biz-copy .h2){font-size:clamp(34px,calc(4.8vw / var(--bz)),84px)}
:is(.foot-grid),&:is(.foot-grid){padding-block:clamp(36px,calc(6vh / var(--bz)),70px)}
:is(.room-hero .h2),&:is(.room-hero .h2){font-size:clamp(38px,calc(5.6vw / var(--bz)),96px)}
:is(.faq),&:is(.faq){margin-top:clamp(22px,calc(4vh / var(--bz)),44px)}
:is(.cart-list),&:is(.cart-list){min-height:min(calc(30vh / var(--bz)),200px)}
:is(.toast),&:is(.toast){max-width:calc(calc(100vw / var(--bz)) - 32px)}
:is(.buy-perch),&:is(.buy-perch){width:clamp(58px,calc(8.5vh / var(--bz)),80px)}
:is(.biz .wrap),&:is(.biz .wrap){padding-top:clamp(40px,calc(7vh / var(--bz)),80px)}
:is(.pl-card),&:is(.pl-card){width:min(320px,calc(calc(100vw / var(--bz)) - 2 * var(--gut)))}
:is(.pl-list),&:is(.pl-list){max-height:min(222px,calc(30vh / var(--bz)))}
:is(.note),&:is(.note){font-size:clamp(15px,calc(1.35vw / var(--bz)),21px)}
:is(.pl-card),&:is(.pl-card){width:min(340px,calc(calc(100vw / var(--bz)) - 2 * var(--gut)));max-height:calc(calc(100vh / var(--bz)) - 150px);max-height:calc(calc(100dvh / var(--bz)) - 150px)}
:is(.pl-list),&:is(.pl-list){max-height:min(150px,calc(22vh / var(--bz)))}
:is(.tagline),&:is(.tagline){font-size:clamp(14px,calc(1.15vw / var(--bz)),18px)}
:is(.pick-h),&:is(.pick-h){margin:0 0 clamp(54px,calc(9vh / var(--bz)),100px);font-size:clamp(46px,calc(7.4vw / var(--bz)),128px)}
:is(.pick-row),&:is(.pick-row){gap:clamp(14px,calc(2vw / var(--bz)),34px)}
:is(.pick-card),&:is(.pick-card){min-height:clamp(150px,calc(15vw / var(--bz)),230px);padding:20px 42% 20px clamp(16px,calc(2vw / var(--bz)),34px)}
:is(.pick-n),&:is(.pick-n){font-size:clamp(26px,calc(3.1vw / var(--bz)),54px)}
:is(.pick-r),&:is(.pick-r){font-size:clamp(13px,calc(1.05vw / var(--bz)),16px)}
:is(.bz-poster .logo),&:is(.bz-poster .logo){width:clamp(96px,calc(10vw / var(--bz)),160px)}
:is(.bz-copy .h2),&:is(.bz-copy .h2){font-size:clamp(38px,calc(5.4vw / var(--bz)),96px)}
:is(.nan .b-note .note),&:is(.nan .b-note .note){font-size:clamp(16px,calc(1.5vw / var(--bz)),23px)}
:is(.pick-card),&:is(.pick-card){min-height:clamp(170px,calc(16vw / var(--bz)),250px)}
:is(.pick-price),&:is(.pick-price){font-size:clamp(18px,calc(1.7vw / var(--bz)),26px)}
:is(.pick-quiz),&:is(.pick-quiz){margin-top:clamp(44px,calc(7vh / var(--bz)),80px)}
:is(.pick-quiz img),&:is(.pick-quiz img){width:clamp(56px,calc(5.6vw / var(--bz)),88px)}
:is(.pick-quiz p),&:is(.pick-quiz p){font-size:clamp(26px,calc(3vw / var(--bz)),46px)}
:is(.str),&:is(.str){font-size:var(--fs,clamp(17px,calc(1.75vw / var(--bz)),28px))}
:is(.pick-card .str),&:is(.pick-card .str){--fs:clamp(13px,calc(1.15vw / var(--bz)),17px)}
:is(.p-tabs),&:is(.p-tabs){margin-bottom:clamp(0px,calc(.8vh / var(--bz)),8px)}
:is(.quiz-bag .str),&:is(.quiz-bag .str){--fs:clamp(18px,calc(2vw / var(--bz)),30px)}
:is(.quiz-price .pick-price),&:is(.quiz-price .pick-price){font-size:clamp(28px,calc(3.4vw / var(--bz)),50px)}
:is(.room-foot .foot-grid),&:is(.room-foot .foot-grid){padding-top:clamp(40px,calc(7vh / var(--bz)),80px)}
:is(.gt-body .lead),&:is(.gt-body .lead){max-width:min(52ch,calc(100% - clamp(190px,calc(25vw / var(--bz)),400px)))}
:is(.scrollcue .note),&:is(.scrollcue .note){font-size:clamp(22px,calc(2vw / var(--bz)),30px)}
:is(.tm-in),&:is(.tm-in){gap:clamp(10px,calc(1.8vh / var(--bz)),20px)}
:is(.tm-title h2),&:is(.tm-title h2){font-size:clamp(24px,calc(3vw / var(--bz)),44px)}
:is(.tm-title p),&:is(.tm-title p){font-size:clamp(12.5px,calc(1vw / var(--bz)),15px)}
:is(.tm-body),&:is(.tm-body){grid-template-columns:minmax(0,clamp(300px,calc(23vw / var(--bz)),400px)) minmax(0,1fr) minmax(0,clamp(340px,calc(25vw / var(--bz)),440px));gap:clamp(16px,calc(2.2vw / var(--bz)),36px)}
:is(.tm-stage),&:is(.tm-stage){width:min(100%,calc(min(calc(62vh / var(--bz)),720px) * 4 / 3))}
:is(.tm-scale>span),&:is(.tm-scale>span){font-size:clamp(9.5px,calc(1.02vw / var(--bz)),13.5px)}
:is(.tm-scale-w b),&:is(.tm-scale-w b){font-size:clamp(10px,calc(1.1vw / var(--bz)),15px)}
:is(.tm-shout .doodle),&:is(.tm-shout .doodle){width:clamp(44px,calc(5vw / var(--bz)),70px)}
:is(.tm-shout b),&:is(.tm-shout b){font-size:clamp(17px,calc(2vw / var(--bz)),30px)}
:is(.tm-led-t),&:is(.tm-led-t){height:clamp(62px,calc(10.5vh / var(--bz)),112px)}
:is(.tm-call),&:is(.tm-call){grid-template-columns:clamp(76px,calc(7.4vw / var(--bz)),118px) minmax(0,1fr)}
:is(.tm-now),&:is(.tm-now){font-size:clamp(26px,calc(2.4vw / var(--bz)),38px)}
:is(.tm-done-card),&:is(.tm-done-card){gap:clamp(16px,calc(2.6vw / var(--bz)),34px);padding:clamp(18px,calc(2.6vw / var(--bz)),34px)}
:is(.tm-done-t b),&:is(.tm-done-t b){font-size:clamp(44px,calc(6vw / var(--bz)),84px)}
:is(.tm-done-t span),&:is(.tm-done-t span){font-size:clamp(16px,calc(1.4vw / var(--bz)),20px)}
:is(.brewit-clock .tm-led-t),&:is(.brewit-clock .tm-led-t){height:clamp(44px,calc(5.4vw / var(--bz)),84px)}
:is(.pl-ask),&:is(.pl-ask){width:min(336px,calc(calc(100vw / var(--bz)) - 2 * var(--gut)))}
:is(.mn-in),&:is(.mn-in){gap:clamp(26px,calc(3vw / var(--bz)),56px) clamp(18px,calc(3vw / var(--bz)),54px);padding:clamp(22px,calc(5vh / var(--bz)),58px) var(--gut) clamp(40px,calc(7vh / var(--bz)),80px)}
:is(.mn-col h2),&:is(.mn-col h2){font-size:clamp(16px,calc(1.4vw / var(--bz)),21px)}
:is(.mn-col a,.mn-col button),&:is(.mn-col a,.mn-col button){font-size:clamp(23px,calc(2.5vw / var(--bz)),40px)}
:is(.mn-mq-t),&:is(.mn-mq-t){gap:clamp(16px,calc(2vw / var(--bz)),34px);padding-right:clamp(16px,calc(2vw / var(--bz)),34px);font-size:clamp(20px,calc(2.2vw / var(--bz)),34px)}
:is(.mn-top),&:is(.mn-top){gap:14px clamp(14px,calc(2vw / var(--bz)),30px);padding:clamp(18px,calc(3.6vh / var(--bz)),36px) var(--gut) 0}
:is(.mn-in),&:is(.mn-in){padding-top:clamp(22px,calc(4vh / var(--bz)),44px)}
:is(.mn-col .mn-lab),&:is(.mn-col .mn-lab){margin:clamp(12px,calc(1.8vh / var(--bz)),20px) 0 5px;font-size:clamp(14px,calc(1.15vw / var(--bz)),18px)}
:is(.cup-grid),&:is(.cup-grid){gap:clamp(28px,calc(5vw / var(--bz)),90px)}
:is(.cup .h2),&:is(.cup .h2){font-size:clamp(40px,calc(6.4vw / var(--bz)),112px)}
:is(.cup-notes),&:is(.cup-notes){gap:clamp(10px,calc(2vw / var(--bz)),30px);margin-top:clamp(26px,calc(5vh / var(--bz)),60px)}
:is(.cup-shout),&:is(.cup-shout){margin-top:clamp(22px,calc(4vh / var(--bz)),44px);font-size:clamp(22px,calc(2.4vw / var(--bz)),36px)}
:is(.cup-r),&:is(.cup-r){gap:clamp(18px,calc(3vh / var(--bz)),30px);padding-top:clamp(6px,calc(1.5vw / var(--bz)),22px)}
:is(.psub .h2),&:is(.psub .h2){font-size:clamp(38px,calc(5.4vw / var(--bz)),94px)}
:is(.psub-grid),&:is(.psub-grid){gap:clamp(24px,calc(5vw / var(--bz)),90px)}
:is(.psub-lead),&:is(.psub-lead){margin-top:clamp(18px,calc(3vh / var(--bz)),30px)}
:is(.psub-steps b),&:is(.psub-steps b){font-size:clamp(16px,calc(1.5vw / var(--bz)),21px)}
:is(.psub-row),&:is(.psub-row){gap:clamp(20px,calc(4vw / var(--bz)),60px);margin-top:clamp(26px,calc(5vh / var(--bz)),56px)}
:is(.brew-head),&:is(.brew-head){gap:clamp(20px,calc(4vw / var(--bz)),70px)}
:is(.brew .h2),&:is(.brew .h2){font-size:clamp(38px,calc(6.2vw / var(--bz)),108px)}
:is(.brew-seg),&:is(.brew-seg){margin-top:clamp(26px,calc(5vh / var(--bz)),54px)}
:is(.brew-grid),&:is(.brew-grid){gap:clamp(16px,calc(2.4vw / var(--bz)),36px);margin-top:clamp(20px,calc(3.5vh / var(--bz)),36px)}
:is(.brew-card),&:is(.brew-card){padding:clamp(16px,calc(1.8vw / var(--bz)),26px)}
:is(.brew-stats dd),&:is(.brew-stats dd){font-size:clamp(14px,calc(1.3vw / var(--bz)),20px)}
:is(.brew-steps li),&:is(.brew-steps li){font-size:clamp(15.5px,calc(1.25vw / var(--bz)),18px)}
:is(.brew-launch),&:is(.brew-launch){padding:clamp(16px,calc(1.8vw / var(--bz)),26px)}
:is(.brew-launch .tm-led-t),&:is(.brew-launch .tm-led-t){height:clamp(46px,calc(4.6vw / var(--bz)),72px)}
:is(.bl-coach),&:is(.bl-coach){width:clamp(84px,calc(8vw / var(--bz)),128px)}
:is(.bl-h),&:is(.bl-h){font-size:clamp(20px,calc(1.9vw / var(--bz)),28px)}
:is(.h2-s),&:is(.h2-s){font-size:clamp(30px,calc(4.2vw / var(--bz)),68px)}
:is(.pword .h2),&:is(.pword .h2){font-size:clamp(38px,calc(6.2vw / var(--bz)),108px)}
:is(.prev),&:is(.prev){gap:clamp(16px,calc(2.4vw / var(--bz)),36px);margin-top:clamp(28px,calc(5vh / var(--bz)),60px)}
:is(.so-row),&:is(.so-row){margin-top:clamp(34px,calc(6vh / var(--bz)),64px)}
:is(.so-row-h),&:is(.so-row-h){font-size:clamp(24px,calc(2.6vw / var(--bz)),40px)}
:is(.pfaq-grid),&:is(.pfaq-grid){gap:clamp(20px,calc(5vw / var(--bz)),90px)}
:is(.pp-bar),&:is(.pp-bar){width:min(680px,calc(calc(100vw / var(--bz)) - 24px))}
:is(.pp-bar-t b),&:is(.pp-bar-t b){font-size:clamp(13px,calc(1.3vw / var(--bz)),17px)}
:is(.pp-bar-p),&:is(.pp-bar-p){font-size:clamp(17px,calc(1.8vw / var(--bz)),24px)}
@media(min-width:900px){:is(.pp-bar),&:is(.pp-bar){width:min(540px,calc(46vw / var(--bz)))}}
:is(.so-stamp-c),&:is(.so-stamp-c){font-size:clamp(20px,calc(1.85vw / var(--bz)),28px)}
:is(.so-stamp-r),&:is(.so-stamp-r){font-size:clamp(17px,calc(1.5vw / var(--bz)),22px)}
:is(.rv),&:is(.rv){gap:clamp(12px,calc(1.5vw / var(--bz)),18px);padding:clamp(18px,calc(2.2vw / var(--bz)),30px)}
:is(.rv-mark),&:is(.rv-mark){width:clamp(48px,calc(4.4vw / var(--bz)),66px)}
:is(.rv blockquote,.rv>q),&:is(.rv blockquote,.rv>q){font-size:clamp(16.5px,calc(1.42vw / var(--bz)),20.5px)}
:is(.rv-score>b),&:is(.rv-score>b){font-size:clamp(40px,calc(4vw / var(--bz)),58px)}
@media(min-width:901px){:is(.prev .rv:nth-child(2)),&:is(.prev .rv:nth-child(2)){margin-top:clamp(0px,calc(2vw / var(--bz)),28px)}}
:is(.pword-g),&:is(.pword-g){margin-top:clamp(34px,calc(5vh / var(--bz)),56px)}
:is(.stk-psub),&:is(.stk-psub){--w:clamp(104px,calc(8.4vw / var(--bz)),128px)}
:is(.faces .f-tag .doodle),&:is(.faces .f-tag .doodle){width:clamp(26px,calc(2.3vw / var(--bz)),32px)}
:is(.faces .f-tag .note),&:is(.faces .f-tag .note){font-size:clamp(23px,calc(2.1vw / var(--bz)),31px)}
:is(.fc-faces .f-both .note),&:is(.fc-faces .f-both .note){font-size:clamp(20px,calc(1.8vw / var(--bz)),26px)}
@media(min-width:821px){:is(.tm[data-step="pick"] .tm-step-k),&:is(.tm[data-step="pick"] .tm-step-k){font-size:clamp(15px,calc(1.3vw / var(--bz)),18px)}}
@media(min-width:821px){:is(.tm[data-step="pick"] .tm-picks .tm-k),&:is(.tm[data-step="pick"] .tm-picks .tm-k){margin:clamp(12px,calc(2.4vh / var(--bz)),24px) 0 10px;font-size:clamp(18px,calc(1.8vw / var(--bz)),26px)}}
@media(min-width:821px){:is(.tm[data-step="pick"] .tm-chip img),&:is(.tm[data-step="pick"] .tm-chip img){height:clamp(60px,calc(11vh / var(--bz)),104px)}}
@media(min-width:821px){:is(.tm[data-step="pick"] .tm-chips-so .tm-chip img),&:is(.tm[data-step="pick"] .tm-chips-so .tm-chip img){height:clamp(44px,calc(7vh / var(--bz)),66px)}}
@media(min-width:821px){:is(.tm[data-step="pick"] .tm-meth img),&:is(.tm[data-step="pick"] .tm-meth img){height:clamp(46px,calc(7vh / var(--bz)),62px)}}
@media(min-width:821px){:is(.tm[data-step="pick"] .tm-lets),&:is(.tm[data-step="pick"] .tm-lets){margin-top:clamp(16px,calc(3vh / var(--bz)),30px)}}
@media(min-width:1500px) and (min-height:801px){:is(.tzw .p-foot .tastes),&:is(.tzw .p-foot .tastes){--s:clamp(64px,calc(4.8vw / var(--bz)),100px)}}
}}
@media (min-width:1101px) and (min-height:641px){:where(.pick>.wrap,.brewit>.wrap,.betty>.wrap,.sub>.wrap,.revs>.wrap,.biz>.wrap,.wild>.wrap,.foot>.wrap,.cup>.wrap,.psub>.wrap,.brew>.wrap,.pword>.wrap,.others>.wrap,.pfaq>.wrap,.p-copy,.p-buy,.p-bag>.tastes,.p-arrow,.room-bar,.rm-mq,.room .wrap>*>*:not(.rd),.room .rd.rm-art,.sub>.mq,.bz-mq,.top,.mn,.cart,.player,.toast,.tm,.quiz,.gm,.au,.rail,.pp-bar){--gut:clamp(16px,calc(4vw / var(--bz)),56px)}}

/* grinder pages (7 Oct): the Wholesale column gained a line; on short laptop screens the menu's links sit a little closer so
   the menu still fits one screen (measured at 1280x720) */
@media(min-width:901px) and (max-height:800px){.mn-col a,.mn-col button{min-height:36px;padding-block:2px 1px}.mn-in{padding-top:16px}}

/* menu, second go (7 Oct, Jos 1:02pm): each column's sub-list wears its colour; Partner login stands apart */
.mn-col a.mn-login{color:var(--mc);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}
@media(hover:hover){.mn-col a.mn-login:hover{color:var(--cream)}}
.mn-col a.mn-read{flex-wrap:wrap;column-gap:.42em;row-gap:0}
.mn-tag{display:inline-block;padding:3px 8px 1px;background:var(--lime);color:var(--navy);font-family:'Permanent Marker',cursive;font-weight:400;font-size:clamp(11px,.95vw,14px);line-height:1.15;letter-spacing:.02em;text-transform:none;rotate:-5deg;translate:0 -.3em}
.mn-tag-biz{background:var(--sky);rotate:4deg}
/* ================= the menu, 9 Oct (fourth go, Jos 07:45): the original look, one section at a time =================
   Added to cfl.css, cfl-pp.css and cfl-pages.css by tools/build_theme.py (menu_v3), after each sheet's own menu rules.
   Five marker labels down the left (Shop pink, Deals lime, Tools orange, Learn purple, Wholesale sky, as the old columns
   wore them), the open one filled, the rest outlined. The open section on the right: Anton links in cream with a line
   under each, marker sub-labels, one illustration from the site, no boxes. Radios (.mx-r) come first in the nav so plain
   ~ selectors switch the sections. Phones: the same five as an accordion. */
.mn .mx{position:relative;grid-template-columns:minmax(210px,.62fr) minmax(0,2.38fr);grid-template-rows:repeat(5,auto) 1fr;column-gap:clamp(32px,4.5vw,80px);row-gap:0;align-content:start;padding-bottom:clamp(16px,3vh,30px)}
.mx-r{position:absolute;top:0;left:0;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.mx-t1,.mx-p1{--tc:var(--pink)}
.mx-t2,.mx-p2{--tc:var(--lime)}
.mx-t3,.mx-p3{--tc:var(--orange)}
.mx-t4,.mx-p4{--tc:var(--purple)}
.mx-t5,.mx-p5{--tc:var(--sky)}
/* the five words: marker labels, the open one filled */
.mx-t{grid-column:1;display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:clamp(9px,1.7vh,15px) 0;border-bottom:2px dashed rgba(240,240,234,.14);cursor:pointer;user-select:none}
.mx-t1{grid-row:1}.mx-t2{grid-row:2}.mx-t3{grid-row:3}.mx-t4{grid-row:4}.mx-t5{grid-row:5}
.mx-t b{display:inline-block;margin-left:2px;padding:5px 12px 3px;border:2px solid var(--tc);color:var(--tc);font-family:'Permanent Marker',cursive;font-weight:400;font-size:clamp(19px,1.7vw,25px);line-height:1.1;letter-spacing:.01em;rotate:-2deg;transition:background .15s,color .15s,translate .2s var(--ease)}
.mx-t small{color:rgba(240,240,234,.72);font-size:14px;font-weight:600;line-height:1.3}
@media(hover:hover){.mx-t:hover b{translate:4px 0}.mx-t:hover small{color:var(--cream)}}
#mxShop:checked~.mx-t1 b,#mxDeals:checked~.mx-t2 b,#mxTools:checked~.mx-t3 b,#mxLearn:checked~.mx-t4 b,#mxBiz:checked~.mx-t5 b{background:var(--tc);color:var(--navy)}
#mxShop:checked~.mx-t1 small,#mxDeals:checked~.mx-t2 small,#mxTools:checked~.mx-t3 small,#mxLearn:checked~.mx-t4 small,#mxBiz:checked~.mx-t5 small{color:var(--cream)}
#mxShop:focus-visible~.mx-t1 b,#mxDeals:focus-visible~.mx-t2 b,#mxTools:focus-visible~.mx-t3 b,#mxLearn:focus-visible~.mx-t4 b,#mxBiz:focus-visible~.mx-t5 b{outline:3px solid var(--cream);outline-offset:4px}
/* the open section */
.mx-p{grid-column:2;grid-row:1/-1;display:none;grid-template-columns:fit-content(60ch) minmax(0,1fr);align-items:start;column-gap:clamp(28px,4vw,72px);min-width:0;padding-top:clamp(6px,1.4vh,14px);overflow-x:clip}
#mxShop:checked~.mx-p1,#mxDeals:checked~.mx-p2,#mxTools:checked~.mx-p3,#mxLearn:checked~.mx-p4,#mxBiz:checked~.mx-p5{display:grid}
.mx-body{display:flex;flex-direction:column;align-items:flex-start;align-self:start;min-width:0}
.mx .mn-lab{margin:clamp(8px,1.6vh,16px) 0 6px;padding:3px 9px 1px;border:2px solid var(--tc);color:var(--tc);font-family:'Permanent Marker',cursive;font-weight:400;font-size:clamp(14px,1.1vw,17px);line-height:1.1;letter-spacing:.02em;rotate:1.5deg}
.mx-body>.mn-lab:first-child{margin-top:0}
/* links: the name in Anton, a line under it in cream */
.mx .mx-l{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:0;max-width:100%;padding:clamp(5px,1vh,9px) 0;color:var(--cream);font:inherit;text-align:left;text-transform:none;letter-spacing:0;transition:translate .25s var(--ease)}
.mx .mx-l b{display:flex;flex-wrap:wrap;align-items:center;column-gap:.35em;row-gap:2px;font-family:var(--f-c);font-weight:400;font-size:clamp(23px,2.1vw,33px);line-height:1;letter-spacing:.005em;text-transform:uppercase;transition:color .15s}
.mx .mx-l small{max-width:54ch;color:rgba(240,240,234,.72);font-size:14px;font-weight:600;line-height:1.35}
.mx .mx-l.mx-s{padding:4px 0}
.mx .mx-l.mx-s b{font-size:clamp(19px,1.5vw,24px)}
.mx .mx-l.mx-s small{font-size:13px}
.mx .mx-l img{flex:none;width:auto;height:1.45em;margin-block:-.3em;rotate:-6deg}
.mx-tag{display:inline-block;padding:3px 8px 1px;background:var(--tc);color:var(--navy);font-family:'Permanent Marker',cursive;font-weight:400;font-size:clamp(11px,.9vw,13px);line-height:1.15;letter-spacing:.02em;text-transform:none;rotate:-5deg;translate:0 -.2em}
@media(hover:hover){.mx .mx-l:hover{translate:8px 0}.mx .mx-l:hover b{color:var(--tc)}.mx .mx-l:hover small{color:var(--cream)}}
.mx a.mx-login{display:inline-block;margin-top:clamp(10px,2vh,18px);color:var(--tc);font-weight:700;font-size:16px;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}
@media(hover:hover){.mx a.mx-login:hover{color:var(--cream)}}
/* the illustration: one per section, from the site, no box */
.mx-art{grid-column:2;justify-self:start;align-self:start;width:auto;max-width:min(28vw,360px,100%);height:clamp(200px,38vh,360px);margin-top:clamp(4px,2vh,22px);object-fit:contain;object-position:top;rotate:-3deg;pointer-events:none}
.mx-art-wide{height:auto;max-width:min(30vw,400px)}
.mx-art-in{grid-column:auto;align-self:flex-start;margin-top:clamp(10px,2vh,24px);max-width:100%;height:clamp(150px,22vh,220px);rotate:-4deg}
/* learn: training, guides and blogs side by side */
.mx-cols{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.3fr) minmax(0,.75fr);gap:clamp(20px,3vw,48px);min-width:0}
.mx-cols .mx-l b{font-size:clamp(21px,1.8vw,28px)}
/* us: one quiet strip with its marker */
.mx-us{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:auto;padding:12px max(var(--gut),330px) 12px var(--gut);border-top:2px dashed rgba(240,240,234,.2)}
.mx-us h2{margin:0 4px 0 0;padding:3px 9px 1px;background:var(--purple);color:var(--navy);font-family:'Permanent Marker',cursive;font-weight:400;font-size:15px;line-height:1.1;rotate:-2deg}
.mx-us a{color:rgba(240,240,234,.82);font-weight:600;font-size:14px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.mx-soc{display:flex;gap:8px}
.mx-us .mx-soc a{display:grid;place-items:center;width:36px;height:36px;border:2px solid rgba(240,240,234,.5);text-decoration:none}
@media(hover:hover){.mx-us a:hover{color:var(--purple)}.mx-us .mx-soc a:hover{border-color:var(--purple)}}
.mx-us+.mn-mq{margin-top:0}
/* wide screens: search, subscribe and your account ride in the menu's own bar, so the links get the room */
@media(min-width:901px){
  .mn-top{position:absolute;z-index:3;top:calc(env(safe-area-inset-top,0px) + 13px);left:calc(var(--gut) + clamp(150px,12vw,175px));right:calc(var(--gut) + clamp(190px,15vw,210px));flex-wrap:nowrap;justify-content:flex-end;gap:12px;padding:0}
  .mn-find{flex:1 1 auto;min-width:0;max-width:520px;height:46px}
  .mn-quick{flex-wrap:nowrap}
  .mn-quick a,.mn-quick button{min-height:46px;white-space:nowrap}
  .mn .mx{padding-top:clamp(18px,3.4vh,34px)}
}
@media(min-width:901px) and (max-width:1180px){
  .mn-quick a[href*="account"]{display:none}
  .mx-art{max-width:26vw;height:clamp(170px,32vh,300px)}
  .mx .mx-l small{max-width:46ch}
  .mx-p{grid-template-columns:fit-content(50ch) minmax(0,1fr)}
}
@media(min-width:901px) and (max-height:760px){
  .mx .mx-l{padding-block:4px}
  .mx .mn-lab{margin-top:8px}
  .mx-art{height:clamp(160px,30vh,260px)}
}
/* phones and tablets: the five labels as an accordion, the open section under its label */
@media(max-width:900px){
  .mn .mx{grid-template-columns:minmax(0,1fr);grid-template-rows:none;padding-top:10px;padding-bottom:22px}
  .mx-t,.mx-p{grid-column:1;grid-row:auto}
  .mx-t{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 14px;padding:12px 0}
  .mx-t b{font-size:21px}
  .mx-t small{flex:1 1 140px;font-size:13px}
  .mx-p{display:none;padding:8px 0 20px}
  #mxShop:checked~.mx-p1,#mxDeals:checked~.mx-p2,#mxTools:checked~.mx-p3,#mxLearn:checked~.mx-p4,#mxBiz:checked~.mx-p5{display:grid}
  #mxShop:checked~.mx-t1,#mxDeals:checked~.mx-t2,#mxTools:checked~.mx-t3,#mxLearn:checked~.mx-t4,#mxBiz:checked~.mx-t5{border-bottom-color:transparent}
  .mx .mx-l b{font-size:25px}
  .mx .mx-l.mx-s b{font-size:21px}
  .mx-art{max-width:34vw;height:clamp(120px,22vh,200px)}
  .mx-art-wide{max-width:40vw}
  .mx-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .mx-cols .mx-body:nth-child(2){grid-column:1/-1;grid-row:2}
  .mx-art-in{height:150px}
  .mx-us{padding-right:var(--gut);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 150px)}
}
@media(max-width:600px){
  .mx-p{grid-template-columns:minmax(0,1fr)}
  .mx-art{display:none}
  .mx-cols{grid-template-columns:minmax(0,1fr)}
  .mx-cols .mx-body:nth-child(2){grid-column:auto;grid-row:auto}
  .mx-t small{flex-basis:100%;margin-top:-2px}
}