/** Shopify CDN: Minification failed

Line 2485:0 Unexpected "}"

**/
@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:230vh}
.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}
.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-card{position:relative;display:block;margin:0;max-width:100%;scale:.9;rotate:-2deg;transition:scale .6s var(--pop),rotate .6s var(--pop)}
.box.open .box-card{scale:1;rotate:0deg}
.box img{display:block;max-height:calc(100vh - 130px);max-width:100%;width:auto;border:3px solid var(--cream);box-shadow:14px 14px 0 var(--pink)}
.box-note{display:none}
/* our nan's photo comes out as the Polaroid it is on the page: white card, thick bottom edge, her name in marker, a strip of tape */
.box.polaroid .box-card{padding:clamp(12px,2.4vmin,24px) clamp(12px,2.4vmin,24px) 0;background:var(--white);border:3px solid var(--navy);box-shadow:14px 14px 0 var(--pink)}
.box.polaroid.open .box-card{rotate:-3deg}
.box.polaroid .box-card::after{content:'';position:absolute;left:50%;top:-19px;z-index:1;width:clamp(96px,18vmin,150px);height:clamp(28px,5vmin,38px);translate:-50% 0;background:rgba(255,105,174,.92);border-inline:2px dashed rgba(17,26,55,.3);rotate:-4deg}
.box.polaroid img{max-height:calc(100vh - 250px);max-height:calc(100dvh - 250px);border:2px solid var(--navy);box-shadow:none}
.box.polaroid .box-note{display:block;padding:clamp(10px,2vmin,18px) 0 clamp(12px,2.6vmin,24px);text-align:center;font-size:clamp(22px,4.6vmin,44px);line-height:1.1;color:var(--navy)}
.box.polaroid>p{display:none}
.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:180vh}

/* ================= 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}}
/* ---------- 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) + 96px)}}

/* =========== round twenty: more on the wholesale page, and the profit audit rebuilt in the site's own clothes =========== */
:root{--tear: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));--paper:#FBF9F1;--tickp:polygon(14% 50%,0 66%,38% 100%,100% 24%,85% 9%,36% 68%)}

/* ---------- eight dockets on the rail ---------- */
@media(min-width:1101px){
  .pass-row{grid-template-columns:repeat(8,minmax(0,1fr));gap:clamp(6px,.8vw,14px)}
  .pass-row .dkt{rotate:calc((var(--i) - 3.5) * .7deg);padding-inline:clamp(8px,.85vw,14px)}
  .pass-row .dkt b{font-size:clamp(19px,1.62vw,27px)}
  .pass-row .dk-p{font-size:clamp(13px,1vw,15.5px)}
  .pass-row .dk-fix{font-size:clamp(13px,1vw,15.5px)}
  .pass-row .dk-fix i{font-size:clamp(18px,1.55vw,25px)}
}
@media(min-width:1101px) and (hover:hover){.pass-row .dkt:hover{rotate:calc((var(--i) - 3.5) * -1deg)}}

/* ---------- grow: three more problems, each with something to play with ---------- */
#rGrow{--rb:var(--orange);padding-top:clamp(96px,15vh,150px)}
.gw-mq{position:absolute;left:50%;top:clamp(14px,3vh,32px);width:106vw;translate:-50% 0;rotate:-1.4deg;display:flex;overflow:hidden;padding:9px 0 7px;background:var(--navy);color:var(--cream);user-select:none;pointer-events:none;box-shadow:0 6px 0 rgba(17,26,55,.22)}
.gw-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.5vw,40px);line-height:1;text-transform:uppercase;white-space:nowrap;animation:rmmq 24s linear infinite}
.gw-mq-t span:nth-of-type(3n+1){color:var(--lime)}
.gw-mq-t span:nth-of-type(3n+2){color:var(--pink)}
.gw-mq-t span:nth-of-type(3n){color:var(--sky)}
.gw-mq-t i{width:.42em;height:.42em;background:var(--cream);rotate:45deg}
.gw{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,38px);align-items:start;margin-top:clamp(74px,10vh,112px)}
.gw-c{position:relative;display:flex;flex-direction:column;gap:12px;padding:clamp(16px,1.7vw,26px);border:3px solid var(--navy);background:var(--gc,var(--white));box-shadow:9px 9px 0 var(--navy);rotate:var(--gr,0deg)}
.gw-sales{--gc:var(--cream);--gr:-.8deg}
.gw-dollars{--gc:var(--lime);--gr:.7deg;margin-top:clamp(0px,2.4vw,34px)}
.gw-ai{--gc:var(--sky);--gr:-.5deg}
.gw-art{position:absolute;right:clamp(4px,.8vw,14px);top:0;translate:0 -52%;width:auto;height:clamp(128px,12.4vw,188px);rotate:5deg;pointer-events:none;filter:drop-shadow(4px 5px 0 rgba(17,26,55,.25));animation:floaty 6s ease-in-out infinite}
.gw-dollars .gw-art{animation-delay:-2s;rotate:-4deg}
.gw-ai .gw-art{animation-delay:-4s}
.gw-prob{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-height:clamp(78px,7vw,100px);padding-right:clamp(104px,10vw,158px);font-family:'Permanent Marker',cursive;font-size:clamp(16px,1.3vw,19px);line-height:1.2}
.gw-prob b{padding:3px 8px 2px;background:var(--navy);color:var(--cream);font-family:'Space Grotesk',var(--f-b);font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.gw-c h4{font-family:var(--f-d);font-weight:400;text-transform:uppercase;font-size:clamp(28px,2.9vw,46px);line-height:.94;letter-spacing:-.02em}
.gw-p{font-size:clamp(15px,1.12vw,17px);line-height:1.45;font-weight:500}
.gw-toy{display:flex;flex-direction:column;gap:10px;margin-top:6px;padding:clamp(14px,1.4vw,20px);background:var(--navy);color:var(--cream);box-shadow:5px 5px 0 var(--pink)}
.gw-q{font-size:14px;font-weight:700}
.gw-chips{display:flex;flex-wrap:wrap;gap:8px}
.gw-chips button{min-height:40px;padding:0 12px;border:2px solid var(--cream);color:var(--cream);font-size:14px;font-weight:700;transition:background .15s,color .15s,box-shadow .15s}
.gw-chips button[aria-pressed="true"]{background:var(--lime);border-color:var(--lime);color:var(--navy);box-shadow:3px 3px 0 var(--pink)}
@media(hover:hover){.gw-chips button:not([aria-pressed="true"]):hover{background:rgba(240,240,234,.16)}}
.gw-cups{display:flex;align-items:baseline;gap:.4em;margin-top:2px}
.gw-cups b{font-family:var(--f-d);font-weight:400;font-size:1.7em;line-height:1;color:var(--lime);font-variant-numeric:tabular-nums}
.gw-toy .range{height:34px;margin:0}
.gw-toy .range::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--lime) var(--v,33%),rgba(240,240,234,.35) var(--v,33%))}
.gw-toy .range::-moz-range-track{background:rgba(240,240,234,.35)}
.gw-toy .range::-moz-range-progress{height:6px;background:var(--lime)}
.gw-toy .range::-webkit-slider-thumb{box-shadow:4px 4px 0 var(--pink)}
.gw-toy .range::-moz-range-thumb{box-shadow:4px 4px 0 var(--pink)}
.gw-bars{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:end;gap:4px;height:clamp(60px,5.6vw,88px);margin-top:4px;border-bottom:3px solid var(--cream)}
.gw-bars i{height:calc(var(--h,.08) * 100%);min-height:3px;background:var(--lime);transition:height .5s var(--pop) calc(var(--k,0) * 24ms)}
.gw-bars i:last-child{background:var(--pink)}
.gw-out{display:flex;flex-direction:column;gap:2px}
.gw-out b{font-family:var(--f-d);font-weight:400;font-size:clamp(32px,3.3vw,54px);line-height:1;color:var(--lime);font-variant-numeric:tabular-nums}
.gw-out span,.gw-fine{font-size:13.5px;font-weight:500;line-height:1.35}
/* the leak */
.gw-leak{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);align-items:center;gap:10px 14px}
.gw-leak .btn,.gw-leak .gw-fine{grid-column:1/-1}
.gw-leak .btn{--bs:var(--lime);justify-self:start}
.gw-tap{position:relative;max-width:150px;justify-self:center}
.gw-tap>img{display:block;width:100%;height:auto}
.gw-drip{position:absolute;left:53%;top:27%;width:13%;height:33%}
.gw-drip img{position:absolute;left:0;top:0;width:100%;height:auto;opacity:0;animation:gwdrip 1.8s cubic-bezier(.5,0,.9,.6) infinite}
.gw-drip img:nth-child(2){animation-delay:.6s}
.gw-drip img:nth-child(3){animation-delay:1.2s}
@keyframes gwdrip{0%{opacity:0;transform:translateY(-10%) scale(.5)}12%{opacity:1;transform:translateY(0) scale(1)}85%{opacity:1}100%{opacity:0;transform:translateY(520%) rotate(200deg) scale(1)}}
.gw-dial{position:relative;display:flex;flex-direction:column;align-items:center}
.gw-dial svg{display:block;width:100%;max-width:230px;height:auto;overflow:visible}
.gd-track,.gd-fill{fill:none;stroke-width:13}
.gd-track{stroke:rgba(240,240,234,.2)}
.gd-fill{stroke:var(--pink);stroke-dasharray:100;stroke-dashoffset:60;animation:gwseek 3.4s ease-in-out infinite alternate}
@keyframes gwseek{from{stroke-dashoffset:82}to{stroke-dashoffset:24}}
.gw-leak.has .gd-fill{animation:none;stroke:var(--lime);transition:stroke-dashoffset 1.1s var(--ease)}
.gw-dial b{margin-top:-1.05em;font-family:var(--f-d);font-weight:400;font-size:clamp(34px,3.4vw,54px);line-height:1;font-variant-numeric:tabular-nums}
.gw-dial span{font-size:12.5px;font-weight:700;text-align:center}
/* the chat */
.gw-thread{display:flex;flex-direction:column;gap:9px;min-height:clamp(190px,16vw,230px)}
.gw-me{align-self:flex-end;max-width:88%;padding:9px 12px 8px;background:var(--pink);color:var(--navy);font-size:14.5px;font-weight:700;line-height:1.3}
.gw-me:empty{display:none}
.gw-bot{align-self:flex-start;max-width:94%;padding:10px 12px 9px;background:var(--cream);color:var(--navy);font-size:14.5px;font-weight:500;line-height:1.4}
.gw-bot b{display:block;margin-bottom:3px;font-family:'Space Grotesk',var(--f-b);font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.gw-caret{display:inline-block;width:.5em;height:1em;margin-left:2px;background:var(--navy);vertical-align:-.15em;animation:gwblink .9s steps(2) infinite}
.gw-chat.done .gw-caret{display:none}
@keyframes gwblink{50%{opacity:0}}
@media(max-width:1100px){
  .gw{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(70px,9vh,96px) clamp(18px,2.6vw,28px)}
  .gw-dollars{margin-top:0}
  .gw-art{height:clamp(120px,15vw,170px)}
  .gw-prob{padding-right:clamp(100px,14vw,160px)}
  .gw-ai{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto 1fr;column-gap:clamp(18px,2.6vw,28px)}
  .gw-ai>*{grid-column:1}
  .gw-ai>.gw-toy{grid-column:2;grid-row:1/span 3;margin-top:clamp(56px,8vw,84px)}
  .gw-ai .gw-prob{padding-right:0}
  .gw-thread{min-height:0}
}
@media(max-width:760px){
  .gw{grid-template-columns:minmax(0,1fr)}
  .gw-art{height:clamp(120px,24vw,170px)}
  .gw-prob,.gw-ai .gw-prob{padding-right:clamp(110px,24vw,170px)}
  .gw-ai{display:flex;grid-template-rows:none}
  .gw-ai>.gw-toy{margin-top:6px}
}
}

/* ---------- the stack: one docket, everything on it included ---------- */
#rStack{--rb:var(--sky)}
.stk{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,5vw,80px);align-items:start}
.stk-copy{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(14px,2.4vh,24px);padding-top:clamp(6px,3vh,40px)}
.stk-copy .lead{margin:0}
.stk-art{width:clamp(120px,14vw,210px);height:auto;margin:clamp(6px,2vh,22px) 0 0 clamp(0px,6vw,90px);transform-origin:50% 100%;animation:sway 6s ease-in-out infinite;pointer-events:none}
.stk-roll{position:relative;overflow:hidden;padding:22px 20px 30px 10px}
.stk-roll::before{content:'';position:absolute;z-index:1;left:0;right:8px;top:0;height:26px;background:linear-gradient(#3A4675,#0A0F25 70%);border:3px solid #070A19;box-shadow:0 6px 0 rgba(0,0,0,.28)}
.stk-roll::after{content:'';position:absolute;z-index:2;left:14px;right:22px;top:11px;height:4px;background:#04060F}
.stk-paper{position:relative;margin-inline:8px;padding:30px clamp(16px,1.8vw,26px) clamp(84px,7.6vw,108px);background:var(--paper);color:var(--navy);filter:drop-shadow(8px 9px 0 rgba(17,26,55,.3));translate:0 -104%;transition:translate 2.3s steps(20)}
.stk-paper::after{content:'';position:absolute;left:0;right:0;top:calc(100% - 1px);height:10px;background:var(--paper);clip-path:polygon(0 0,100% 0,100% 10%,95% 100%,90% 10%,85% 100%,80% 10%,75% 100%,70% 10%,65% 100%,60% 10%,55% 100%,50% 10%,45% 100%,40% 10%,35% 100%,30% 10%,25% 100%,20% 10%,15% 100%,10% 10%,5% 100%,0 10%)}
.stk-roll.on .stk-paper{translate:0 0}
.stk-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;padding-bottom:12px;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}
.stk-top b{font-family:var(--f-c);font-weight:400;font-size:clamp(24px,2.2vw,32px);line-height:1;letter-spacing:.01em}
.stk-lines,.au-lines,.au-ticks,.au-stack ul{margin:0;padding:0;list-style:none}
.stk-lines li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:12px;padding:11px 0 10px;border-bottom:2px dashed rgba(17,26,55,.28)}
.stk-lines span{font-weight:700;font-size:clamp(15px,1.15vw,17px);line-height:1.25}
.stk-lines small{display:block;margin-top:2px;font-family:'Permanent Marker',cursive;font-size:14px;font-weight:400;line-height:1.2}
.stk-lines b,.au-stack li b{padding:3px 7px 2px;background:var(--lime);font-family:'Space Grotesk',var(--f-b);font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.stk-total{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-top:14px;padding:8px 0 4px;border-block:3px solid var(--navy)}
.stk-total span{font-family:var(--f-c);font-size:clamp(24px,2.2vw,32px);text-transform:uppercase}
.stk-total b{font-family:var(--f-d);font-weight:400;font-size:clamp(44px,4.6vw,72px);line-height:1}
.stk-foot{max-width:46%;margin-top:16px;font-family:'Permanent Marker',cursive;font-size:16px;line-height:1.25}
.stk-stamp{position:absolute;right:clamp(14px,2vw,30px);bottom:clamp(16px,1.6vw,24px);padding:.3em .55em .16em;border:4px solid #E0358A;color:#E0358A;font-family:var(--f-c);font-size:clamp(22px,2.1vw,30px);line-height:.95;text-align:center;text-transform:uppercase;letter-spacing:.04em;rotate:-10deg;opacity:0;scale:2.4}
.stk-roll.on .stk-stamp{opacity:1;scale:1;transition:opacity .06s 2.5s,scale .32s var(--pop) 2.5s}
@media(max-width:900px){
  .stk{grid-template-columns:minmax(0,1fr)}
  .stk-art{position:absolute;right:0;top:-10px;width:clamp(84px,20vw,130px);margin:0}
  .stk-copy .h3{padding-right:clamp(90px,22vw,140px)}
  .stk-roll{max-width:520px}
}
.room .ways{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:860px){.room .ways{grid-template-columns:minmax(0,1fr)}}
#rStart{padding-bottom:calc(clamp(30px,5vh,50px) + var(--sawh) * .7)}
.room .ways .way:not(.way-audit) p{font-size:clamp(14px,1.45vw,16px)}
.room .way-audit{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:10px clamp(14px,2.4vw,34px);min-height:0;background:var(--lime);rotate:.5deg}
.room .way-audit p{flex:1 1 280px;font-size:clamp(15.5px,1.25vw,18px)}
.room .way-audit .btn{align-self:center}
.rm .gw-mq-t,.rm .gw-art,.rm .gw-drip img,.rm .gd-fill,.rm .gw-caret,.rm .stk-art{animation:none}
.rm .gw-drip img:first-child{opacity:1}
.rm .stk-paper,.rm .stk-roll.on .stk-stamp{transition:none}
.rm .gw-bars i{transition:none}

/* ---------- the audit ---------- */
.au{position:fixed;inset:0;z-index:123;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;background:var(--navy) radial-gradient(rgba(240,240,234,.07) 1.5px,transparent 1.7px) 0 0/22px 22px;color:var(--cream);translate:0 calc(100% + var(--sawh));visibility:hidden;transition:translate .7s var(--snap),visibility 0s .7s}
.au.open{translate:0;visibility:visible;transition:translate .7s var(--snap)}
.au::before{content:'';position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:var(--sawh);background:var(--navy);clip-path:var(--saw);pointer-events:none}
.au-bar{grid-row:1;display:flex;align-items:center;gap:clamp(10px,2vw,26px);padding:calc(env(safe-area-inset-top,0px) + 12px) clamp(14px,3vw,40px) 12px;background:var(--navy);border-bottom:3px solid var(--cream)}
.au-title{font-family:var(--f-c);font-size:clamp(21px,2vw,30px);line-height:1;text-transform:uppercase;white-space:nowrap;letter-spacing:.01em}
.au-title b{font-weight:400;color:var(--lime)}
.au-prog{flex:1;display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:5px;max-width:520px;height:12px;margin-inline:auto}
.au-prog i{border:2px solid var(--cream);transition:background .25s,border-color .25s}
.au-prog i.done{background:var(--lime);border-color:var(--lime)}
.au-prog i.on{background:var(--pink);border-color:var(--pink)}
.au-count{min-width:5.4em;font-family:'Space Grotesk',var(--f-b);font-size:13px;font-weight:700;letter-spacing:.06em;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.au-bar .sq{flex:none;width:46px;height:46px;box-shadow:4px 4px 0 var(--pink)}
.au-tape{grid-row:2;display:none}
.au-body{grid-row:3;display:grid;grid-template-columns:minmax(0,1fr) clamp(270px,26vw,370px);gap:clamp(20px,4vw,64px);align-items:start;padding:clamp(22px,5vh,54px) clamp(16px,5vw,80px) 44px;overflow-y:auto;overscroll-behavior:contain}
.au-stage{position:relative;display:flex;flex-direction:column;gap:clamp(14px,2.3vh,22px);width:100%;max-width:800px;margin-inline:auto}
.au-stage.in{animation:auin .5s var(--ease) both}
@keyframes auin{from{opacity:0;translate:28px 0}}
.au[data-at="results"] .au-stage{max-width:880px}
/* the docket that prints as you answer */
.au-side{position:sticky;top:0;padding:4px 14px 20px;filter:drop-shadow(7px 9px 0 rgba(0,0,0,.42))}
.au-slot{position:relative;z-index:1;height:26px;margin-inline:-14px;background:linear-gradient(#3A4675,#0A0F25 70%);border:3px solid #070A19}
.au-slot::after{content:'';position:absolute;left:12px;right:12px;top:8px;height:4px;background:#04060F}
.au-roll{max-height:min(64vh,660px);margin-top:-6px;overflow-y:auto;scrollbar-width:none;scroll-behavior:smooth}
.au-roll::-webkit-scrollbar{display:none}
.au-paper{padding:24px 18px 30px;background:var(--paper);color:var(--navy);font-family:'Space Grotesk',var(--f-b);clip-path:var(--tear)}
.au-ph{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 10px;padding-bottom:12px;border-bottom:2px dashed rgba(17,26,55,.45);font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.au-ph b{flex-basis:100%;font-family:var(--f-c);font-weight:400;font-size:26px;line-height:1;letter-spacing:.01em}
.au-lines li{display:grid;gap:1px;max-height:130px;padding:10px 0 9px;border-bottom:2px dashed rgba(17,26,55,.28);overflow:hidden;transition:max-height .5s var(--ease),padding .5s var(--ease),opacity .3s}
.au-lines li.new{max-height:0;padding-block:0;opacity:0}
.au-lines span{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;opacity:.72}
.au-lines b{font-size:16.5px;font-weight:700;line-height:1.2}
.au-lines small{font-family:'Permanent Marker',cursive;font-size:14px;line-height:1.2}
.au-wait{padding-top:14px;font-family:'Permanent Marker',cursive;font-size:15px;line-height:1.3}
.au-lines:not(:empty)+.au-wait{display:none}
/* the bar along the bottom */
.au-nav{grid-row:4;display:flex;align-items:center;gap:12px;padding:12px clamp(14px,5vw,80px) calc(env(safe-area-inset-bottom,0px) + 16px);background:var(--navy);border-top:3px solid var(--cream)}
.au-nav #auNext{--bs:var(--lime);min-width:min(210px,48vw);margin-left:auto}
/* a question */
.au-kick{align-self:flex-start;font-family:'Permanent Marker',cursive;font-size:clamp(16px,1.5vw,21px);color:var(--lime);rotate:-2deg}
.au-q{font-family:var(--f-d);font-weight:400;text-transform:uppercase;font-size:clamp(30px,4.3vw,64px);line-height:1;letter-spacing:-.02em;text-wrap:balance;outline:0}
.au-sub{max-width:54ch;font-size:clamp(16px,1.3vw,19px);line-height:1.45}
.au-ticks{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:15px;font-weight:700}
.au-ticks li{display:flex;align-items:center;gap:8px}
.au-ticks li::before{content:'';width:16px;height:16px;background:var(--lime);clip-path:var(--tickp)}
.au-f,.au-g{display:flex;flex-direction:column;gap:8px;min-width:0}
.au-l{font-size:15px;font-weight:700;line-height:1.3}
.au-text{width:100%;max-width:440px;height:54px;padding:0 14px;background:var(--cream);color:var(--navy);border:3px solid var(--cream);font:inherit;font-weight:600;outline:0;transition:box-shadow .15s,background .15s}
.au-text:focus{background:var(--white);box-shadow:5px 5px 0 var(--pink)}
.au-text::placeholder{color:rgba(17,26,55,.55)}
.au-chips{display:flex;flex-wrap:wrap;gap:11px 13px}
.au-chip{display:inline-flex;align-items:center;gap:9px;min-height:52px;padding:6px 18px;background:var(--cream);color:var(--navy);font-size:15.5px;font-weight:700;line-height:1.2;text-align:left;box-shadow:5px 5px 0 var(--purple);transition:translate .14s var(--ease),box-shadow .14s var(--ease),background .14s}
.au-chip[aria-pressed="true"]{background:var(--lime);box-shadow:5px 5px 0 var(--pink)}
.au-chip[aria-pressed="true"]::before{content:'';flex:none;width:14px;height:14px;background:var(--navy);clip-path:var(--tickp)}
.au-chip:active{translate:5px 5px;box-shadow:0 0 0 var(--purple)}
@media(hover:hover){.au-chip:hover{translate:-2px -2px;box-shadow:7px 7px 0 var(--purple)}.au-chip[aria-pressed="true"]:hover{box-shadow:7px 7px 0 var(--pink)}.au-chip:active{translate:5px 5px;box-shadow:0 0 0 var(--purple)}}
.au-chip small{font-size:12.5px;font-weight:500}
.au-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:620px}
.au-fine{display:none;flex-direction:column;gap:2px;max-width:620px;padding:16px 18px 14px;border:3px solid var(--cream)}
.au-fine.on{display:flex;animation:auin .4s var(--ease) both}
.au-read{font-family:var(--f-d);font-size:clamp(40px,5.4vw,78px);line-height:1;color:var(--lime);font-variant-numeric:tabular-nums}
.au-read small{font-family:var(--f-b);font-size:max(.25em,13px);font-weight:700;color:var(--cream)}
.au-read.off{color:rgba(240,240,234,.45)}
.au .range{margin:10px 0 2px}
.au .range::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--pink) var(--v,50%),rgba(240,240,234,.35) var(--v,50%))}
.au .range::-moz-range-track{background:rgba(240,240,234,.35)}
.au .range::-moz-range-progress{height:6px;background:var(--pink)}
.au .range::-webkit-slider-thumb{background:var(--lime);box-shadow:4px 4px 0 var(--pink)}
.au .range::-moz-range-thumb{background:var(--lime);box-shadow:4px 4px 0 var(--pink)}
.au .range:disabled{opacity:.35}
.au-hint,.au-ends{font-size:13.5px;font-weight:500}
.au-ends{display:flex;justify-content:space-between}
.au-ins{align-self:flex-start;max-width:56ch;padding:11px 14px 10px;background:var(--lime);color:var(--navy);font-size:clamp(15px,1.2vw,17px);font-weight:700;line-height:1.35;rotate:-.5deg;box-shadow:4px 4px 0 rgba(0,0,0,.4)}
.au-ins:empty{display:none}
.au-ins.sm{padding:0;background:none;color:var(--lime);font-size:14px;font-weight:600;rotate:0deg;box-shadow:none}
.au-ins.warn{background:var(--navy);color:var(--cream);box-shadow:4px 4px 0 var(--pink)}
.au-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px clamp(14px,2vw,26px);align-items:end;max-width:640px}
.au-step{display:grid;grid-template-columns:52px minmax(0,1fr) 52px;height:54px}
.au-step button{background:var(--purple);color:var(--navy);font-size:26px;font-weight:700;line-height:1}
.au-step button:active{background:var(--pink)}
.au-step input,.au-cash input{width:100%;height:100%;min-width:0;padding:0 8px;background:var(--cream);color:var(--navy);border:0;border-radius:0;font-family:var(--f-d);font-size:21px;text-align:center;outline:0;-moz-appearance:textfield;appearance:textfield}
.au-step input::-webkit-outer-spin-button,.au-step input::-webkit-inner-spin-button,.au-cash input::-webkit-outer-spin-button,.au-cash input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.au-cash{display:grid;grid-template-columns:46px minmax(0,1fr);height:54px}
.au-cash span{display:grid;place-items:center;background:var(--purple);color:var(--navy);font-family:var(--f-d);font-size:20px}
.au-step:focus-within,.au-cash:focus-within{box-shadow:5px 5px 0 var(--pink)}
.au-deep{display:flex;flex-direction:column;gap:14px;padding-top:4px}
.au-art{position:absolute;right:clamp(-34px,-2vw,0px);bottom:-18px;width:auto;height:clamp(170px,30vh,300px);rotate:4deg;transform-origin:50% 100%;pointer-events:none;animation:sway 6s ease-in-out infinite}
/* the results */
.au-res{--bc:var(--lime);display:flex;flex-direction:column;gap:clamp(22px,3.6vh,36px)}
.au-res.b-good{--bc:var(--sky)}.au-res.b-mid{--bc:var(--orange)}.au-res.b-low{--bc:var(--pink)}
.au-top{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.au-venue{font-family:'Permanent Marker',cursive;font-size:clamp(18px,1.8vw,26px);rotate:-2deg}
.au-gauge{position:relative;width:min(100%,420px)}
.au-gauge svg{display:block;width:100%;height:auto;overflow:visible}
.g-track,.g-fill{fill:none;stroke-width:22}
.g-track{stroke:rgba(240,240,234,.16)}
.g-fill{stroke:var(--bc);stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.3s var(--ease)}
.au-score{position:absolute;left:0;right:0;bottom:-4px;display:flex;flex-direction:column;align-items:center;outline:0}
.au-score b{font-family:var(--f-d);font-weight:400;font-size:clamp(64px,9vw,118px);line-height:.9;font-variant-numeric:tabular-nums}
.au-score span{font-size:14px;font-weight:700}
.au-stamp{margin:16px 0 12px;padding:.22em .5em .1em;border:4px solid var(--bc);color:var(--bc);font-family:var(--f-c);font-size:clamp(26px,3.2vw,46px);line-height:1;text-transform:uppercase;letter-spacing:.03em;rotate:-5deg;opacity:0;scale:2.4;transition:opacity .08s,scale .32s var(--pop)}
.au-stamp.on{opacity:1;scale:1}
.au-verdict{max-width:46ch;margin-top:4px;font-size:clamp(17px,1.5vw,21px);font-weight:600;line-height:1.4}
.au-k{font-family:'Space Grotesk',var(--f-b);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.au-found{display:grid;gap:4px;padding:clamp(18px,2.4vw,30px);background:var(--lime);color:var(--navy);box-shadow:8px 8px 0 var(--pink);rotate:-.6deg}
.au-found-n{font-family:var(--f-d);font-size:clamp(40px,6vw,84px);line-height:1;font-variant-numeric:tabular-nums}
.au-found-n small,.au-leak-n small,.au-mn small{font-family:var(--f-b);font-size:max(.3em,13px);font-weight:700}
.au-found p:last-child{max-width:56ch;font-weight:600;line-height:1.4}
.au-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;font-family:var(--f-c);font-weight:400;font-size:clamp(26px,2.8vw,40px);line-height:1;text-transform:uppercase}
.au-h small{font-family:var(--f-b);font-size:14px;font-weight:600;text-transform:none}
.au-areas{display:flex;flex-direction:column;margin-top:-12px;border-top:3px solid var(--cream)}
.au-row{border-bottom:3px solid var(--cream)}
.au-row button{display:grid;grid-template-columns:minmax(118px,1.1fr) minmax(0,2.4fr) 4.2em 16px;align-items:center;gap:14px;width:100%;min-height:58px;padding:8px 4px;color:inherit;text-align:left}
.au-row button::after{content:'';width:10px;height:10px;border-right:3px solid;border-bottom:3px solid;rotate:45deg;translate:0 -3px;transition:rotate .2s,translate .2s}
.au-row button[aria-expanded="true"]::after{rotate:225deg;translate:0 3px}
.au-rn{font-size:clamp(15px,1.3vw,18px);font-weight:700}
.au-bar2{height:16px;background:rgba(240,240,234,.16);overflow:hidden}
.au-bar2 i{display:block;width:var(--w);height:100%;background:var(--c,var(--lime));transform:scaleX(0);transform-origin:0 50%;transition:transform .9s var(--ease) calc(var(--i) * 70ms + 200ms)}
.au-row.on .au-bar2 i{transform:scaleX(1)}
.c-good{--c:var(--sky)}.c-mid{--c:var(--orange)}.c-low{--c:var(--pink)}
.c-none .au-bar2 i{background:repeating-linear-gradient(-45deg,rgba(240,240,234,.55) 0 6px,transparent 6px 12px)}
.au-rs{font-family:var(--f-d);font-size:clamp(18px,1.7vw,24px);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.au-rs small{font-family:var(--f-b);font-size:.6em;font-weight:700}
.au-rd{display:none;max-width:64ch;padding:0 4px 16px;font-size:15.5px;line-height:1.5}
.au-row button[aria-expanded="true"]+.au-rd{display:block}
.au-leak{position:relative;display:flow-root;padding:clamp(18px,2.4vw,30px);background:var(--cream);color:var(--navy);border-top:10px solid var(--pink);box-shadow:8px 8px 0 var(--purple)}
.au-leak>img{float:right;width:auto;height:clamp(110px,13vw,170px);margin:-38px -4px 6px 16px;rotate:5deg}
.au-leak h3,.au-unlock h3,.au-next h3,.au-cta h3,.au-stack h3{margin:6px 0 10px;font-family:var(--f-d);font-weight:400;text-transform:uppercase;font-size:clamp(24px,2.8vw,40px);line-height:1;letter-spacing:-.02em;text-wrap:balance}
.au-leak p,.au-cta p,.au-time p,.au-next p,.au-unlock p,.au-stack>p{max-width:62ch;line-height:1.5}
.au-leak-n{margin-top:12px;font-family:var(--f-d);font-size:clamp(30px,4.2vw,56px);line-height:1.05;font-variant-numeric:tabular-nums}
.au-leak-n small:not(:first-child){display:block;margin-top:6px;font-size:15px;font-weight:600}
.au-leak-n.blur{filter:blur(11px);user-select:none;pointer-events:none}
.au-lock{margin-top:6px;font-family:'Permanent Marker',cursive;font-size:17px;rotate:-1.5deg}
.au-unlock{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:clamp(18px,2.4vw,30px);background:var(--purple);color:var(--navy);box-shadow:8px 8px 0 var(--lime)}
.au-unlock h3{margin:0}
.au-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;margin-block:6px}
.au-unlock .au-text{max-width:none;background:var(--white);border-color:var(--navy)}
.au-unlock .au-text:focus{box-shadow:5px 5px 0 var(--navy)}
.au-unlock .btn{--bs:var(--navy);background:var(--lime)}
.au-gated{display:flex;flex-direction:column;gap:clamp(22px,3.6vh,36px)}
.au-gated>.au-h{margin-bottom:-12px}
.au-money{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.au-m{display:flex;flex-direction:column;gap:4px;padding:clamp(16px,2vw,24px);background:var(--cream);color:var(--navy);box-shadow:6px 6px 0 var(--purple)}
.au-m.pink{background:var(--pink);box-shadow:6px 6px 0 var(--lime)}
.au-m.lime{background:var(--lime);box-shadow:6px 6px 0 var(--pink)}
.au-m.wide{grid-column:1/-1}
.au-mn{font-family:var(--f-d);font-size:clamp(28px,3.6vw,50px);line-height:1;font-variant-numeric:tabular-nums}
.au-ml{font-size:16px;font-weight:700}
.au-ms{max-width:70ch;font-size:14.5px;line-height:1.45}
.au-next{--bn:var(--lime);padding:clamp(16px,2vw,26px);border:3px solid var(--bn);border-left-width:14px}
.au-next.b-good{--bn:var(--sky)}.au-next.b-mid{--bn:var(--orange)}.au-next.b-low{--bn:var(--pink)}
.au-next h3{margin:0 0 8px}
.au-time{display:flex;flex-direction:column;gap:8px;padding:clamp(18px,2.4vw,30px);border:3px solid var(--cream)}
.au-time .au-mn{color:var(--lime)}
.au-sig{padding:10px 12px;background:var(--cream);color:var(--navy);font-weight:700}
.au-stack{padding:clamp(20px,2.6vw,34px);background:var(--paper);color:var(--navy);box-shadow:8px 8px 0 var(--pink)}
.au-stack h3{margin-top:0}
.au-stack ul{margin-top:14px;border-top:2px dashed rgba(17,26,55,.45)}
.au-stack li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:14px;padding:10px 0;border-bottom:2px dashed rgba(17,26,55,.28);font-size:15px;font-weight:600;line-height:1.35}
.au-stack-t{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;margin-top:14px;padding-block:12px 9px;border-block:3px solid var(--navy);font-weight:700}
.au-stack-t b{font-family:var(--f-c);font-weight:400;font-size:clamp(22px,2.4vw,32px);line-height:1;text-transform:uppercase}
.au-guar{margin-top:12px;font-size:14px;font-weight:600;line-height:1.45}
.au-bridge{display:flex;flex-direction:column;align-items:center;gap:8px;padding-block:clamp(8px,3vh,28px);text-align:center}
.au-bridge p{font-family:'Permanent Marker',cursive;font-size:clamp(17px,1.6vw,22px)}
.au-bridge h3{max-width:17ch;font-family:var(--f-d);font-weight:400;text-transform:uppercase;font-size:clamp(28px,4vw,58px);line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
.au-cta{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:clamp(20px,2.6vw,34px);background:var(--pink);color:var(--navy);box-shadow:8px 8px 0 var(--lime)}
.au-cta h3{margin:0}
.au-cta .btn{--bs:var(--navy);min-height:58px;padding-block:8px;background:var(--lime);white-space:normal;text-align:center}
.au .btn.done{opacity:1;background:var(--white);box-shadow:none;translate:0 0}
.au-mail{font-weight:700;text-decoration:underline;text-underline-offset:3px}
.au-ops{font-size:15px;line-height:1.6}
.au-link{color:var(--lime);font-weight:700;text-align:left;text-decoration:underline;text-underline-offset:3px}
.au-link:disabled{color:var(--cream);text-decoration:none}
.au-acts{display:flex;flex-wrap:wrap;gap:12px 14px}
.au-concept,.au-conf{font-family:'Permanent Marker',cursive;font-size:15px}
.au-ops .au-conf{display:block;margin-top:4px}
@media(max-width:960px){
  .au-body{grid-template-columns:minmax(0,1fr)}
  .au-side{display:none}
  .au-tape{display:block;padding:7px 16px 6px;background:var(--paper);color:var(--navy);font-family:'Space Grotesk',var(--f-b);font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .au-tape:empty{display:none}
  .au-tape span{margin-right:6px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.72}
}
@media(max-width:700px){
  .au-bar{flex-wrap:wrap;gap:8px 10px}
  .au-title{margin-right:auto}
  .au-count{min-width:0}
  .au-prog{order:5;flex:0 0 100%;max-width:none;gap:4px;height:9px}
  .au-prog:empty{display:none}
  .au-body{padding-top:20px}
  .au-col,.au-fields,.au-money{grid-template-columns:minmax(0,1fr)}
  .au-grid{gap:14px 12px}
  .au-grid .au-f:has(.au-chips){grid-column:1/-1;grid-row:2}
  .au-art{position:static;align-self:flex-end;height:150px;margin:-6px 0 -10px}
  .au-row button{grid-template-columns:minmax(0,1fr) 4.2em 16px;gap:6px 12px}
  .au-rn{grid-column:1}.au-rs{grid-column:2;grid-row:1}.au-row button::after{grid-column:3;grid-row:1}
  .au-bar2{grid-column:1/-1;grid-row:2}
  .au-leak>img{height:96px;margin-top:-30px}
  .au-nav .btn{flex:1}
  .au-nav #auNext{flex:2}
}
.rm .au-stage.in,.rm .au-fine.on,.rm .au-art{animation:none}
.rm .au-stamp,.rm .g-fill,.rm .au-bar2 i,.rm .au-lines li{transition:none}
/* saving the results: print the audit and nothing else */
@page{margin:14mm}
@media print{
  .au.open .au-h small{display:none}
  :has(>#audit.open)>:not(#audit),body:has(#audit.open)>:not(:has(#audit)):not(#audit){display:none !important}
  html:has(#audit.open),html:has(#audit.open) body{height:auto !important;overflow:visible !important;background:#fff !important}
  .au.open{position:static;display:block;translate:none;background:#fff;color:var(--navy)}
  .au.open::before,.au.open .au-nav,.au.open .au-tape,.au.open .au-side,.au.open .au-prog,.au.open .au-count,.au.open .sq,.au.open .au-unlock,.au.open .au-acts,.au.open .au-cta .btn,.au.open .au-ops,.au.open .au-concept,.au.open .au-conf,.au.open .au-lock,.au.open .au-leak-n.blur{display:none !important}
  .au.open .au-bar{padding:0 0 10px;background:none;border-color:var(--navy)}
  .au.open .au-title b{color:inherit}
  .au.open .au-body{display:block;padding:18px 0 0;overflow:visible}
  .au.open .au-stage{max-width:none;animation:none}
  .au.open *{box-shadow:none !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .au.open .au-rd{display:block}
  .au.open .au-row button::after{display:none}
  .au.open .au-res{--bc:var(--navy)}
  .au.open .au-stamp{opacity:1;scale:1}
  .au.open .g-track,.au.open .au-bar2{stroke:#DADAD2;background:#E4E4DC}
  .au.open .au-areas,.au.open .au-row,.au.open .au-time{border-color:var(--navy)}
  .au.open .au-link,.au.open .au-time .au-mn{color:inherit}
  .au.open .au-found,.au.open .au-leak,.au.open .au-m,.au.open .au-next,.au.open .au-time,.au.open .au-stack,.au.open .au-cta{break-inside:avoid;rotate:0deg;border:2px solid var(--navy)}
}


/* ---------- 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}}
/* home: the deck keeps its flick, the cards take the new look */
.rcard.rv{position:absolute}
.rcard.rv>q{font-size:clamp(19px,1.95vw,30px);line-height:1.22}
.rcard.rv.big>q{font-size:clamp(28px,3.4vw,54px);line-height:.98}
.rcard .rv-who{border-top-style:dashed}
.rev-side .rv-score{margin-top:4px}
.rev-side .rv-g{--bs:var(--pink)}
@media(max-width:820px){.deck{height:clamp(400px,64vh,480px)}.rcard.rv{padding:20px 18px}.rcard.rv.big>q{font-size:clamp(28px,8.4vw,40px)}}
/* the subscriber beside Subscribe */
.sub-say{display:flex;flex-direction:column;gap:clamp(22px,3.4vh,36px)}
.sub-say .rv{max-width:540px;rotate:-1.5deg;--rs:var(--navy)}
/* the cafe beside the 30 day guarantee */
#rGuar .rv{max-width:820px;margin-top:clamp(28px,4.4vh,48px);rotate:-1deg}

/* phones, 6 Oct: the scene frames the bag instead of covering it. Stickers are smaller and kept to the edges; the space
   station and the boombox are back; the bag sits under the headline and opens up close when tapped */
@media(max-width:700px){
  .pe-sun{right:1vw;left:auto;top:calc(var(--top) + 1vh);width:19vw}
  .pe-palm-l{left:-13vw;bottom:15vh;width:31vw}
  .pe-pel{width:15vw}
  .pe-gull-a{width:15vw}.pe-gull-b{width:9vw}
  .pe-surf{width:21vw}
  .pe-crab{width:13vw}
  .front.sc-pe .fl-a,.front .fl-a{left:-3vw;top:calc(var(--top) + 30vh);width:19vw}
  .front.sc-pe .fl-b,.front.sc-nsb .fl-b,.front .fl-b{left:auto;right:1vw;top:calc(var(--top) + 21vh);width:12vw}
  .front.sc-hyd .fl-b{width:17vw}
  .nsb-sneak{left:auto;right:24vw;top:calc(var(--top) + .5vh);width:10vw}
  .nsb-vinyl-a{left:auto;right:3vw;top:calc(var(--top) + 1vh);width:15vw}
  .nsb-box{display:block;left:-4vw;right:auto;top:calc(var(--top) + 17vh);bottom:auto;width:27vw}
  .nsb-bboy{right:-6vw;left:auto;top:auto;bottom:21vh;width:21vw}
  .nsb-cart{left:-7vw;width:27vw}
  .nsb-train{width:70vw}
  .nsb-bigfoot{width:24vw}
  .front.sc-nsb .fl-a{top:calc(var(--top) + 38vh);width:18vw}
  .hyd-sat{display:block;left:auto;right:2vw;top:calc(var(--top) + .5vh);bottom:auto;width:20vw}
  .hyd-planet{left:-13vw;top:calc(var(--top) + 15vh);width:36vw}
  .hyd-astro{left:auto;right:-6vw;top:calc(var(--top) + 26vh);width:24vw}
  .hyd-ufo{left:-6vw;bottom:24vh;width:20vw}
  .hyd-moon{right:-4vw;bottom:24vh;width:16vw}
  .hyd-ship{width:24vw}.hyd-comet{width:20vw}
  .hyd-rover{width:24vw}
  .front.sc-hyd .fl-a{top:calc(var(--top) + 36vh);width:19vw}
  .touch-hint{font-size:12px;padding:5px 10px 4px}
}
@media(max-width:700px) and (max-height:700px){.touch-hint,#hInfo{display:none}}   /* short phone screens: the bag gets the room (the taste line stays) */
/* the bag, when it stands in the scene, can be tapped to see it up close */
.actor.tapme{pointer-events:auto;cursor:zoom-in}
.box.bagzoom .box-card{background:none;border:0;box-shadow:none;cursor:pointer}
.box.bagzoom img{max-height:calc(100vh - 210px);max-height:calc(100dvh - 210px);border:0;box-shadow:none;filter:drop-shadow(10px 14px 0 rgba(0,0,0,.28));transition:transform .32s var(--ease)}
.box.bagzoom img.turn{transform:scaleX(0)}
.box-acts{display:none}
.box.bagzoom .box-acts{display:flex;gap:14px;position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 22px);translate:-50% 0;z-index:2;white-space:nowrap}
.box.bagzoom>p{bottom:calc(env(safe-area-inset-bottom,0px) + 84px)}
@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}
.sub .deals{position:relative}
.stk-sub{left:9%;bottom:calc(100% + 16px);--w:clamp(112px,9.4vw,146px);--r:8deg}
@media(max-width:860px){.stk-sub{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)}

/* the wholesale page (/pages/wholesale), 6 Oct: the room is the page */
.roompage .loader,.roompage #nudge{display:none!important}
.cfl-back .loader{display:none!important}
.roompage .room{translate:0;visibility:visible;transition:none}   /* the room is the page from the first paint */
.roompage #main,.roompage .top{visibility:hidden}
.ws-fields{display:contents}
.ws-fields.ws-done{display:none}
.ws-ok h3{margin:0 0 8px}
.ws-err{margin:0;padding:8px 12px;border:2px solid var(--navy);background:var(--pink);font-weight:600}

.buy-note{font-size:13px;font-weight:600;line-height:1.35;margin:-2px 0 0}
/* 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 wholesale van (6 Oct): bigger, drives in when the street is on screen and parks */
.room .room-van{width:min(440px,46vw)}
.room.open .room-van{animation:none;transform:translateX(-75vw);transition:none}
.room.open .room-van.go{animation:vanIn 2.4s cubic-bezier(.2,.75,.25,1) both}
@keyframes vanIn{0%{transform:translateX(-75vw)}100%{transform:translateX(var(--park,5vw))}}
.rm .room.open .room-van{animation:none;transform:translateX(var(--park,5vw))}

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

/* ===== one screen each (6 Oct, Jos): nothing to scroll through before the next section ===== */

/* the poster wall: not pinned any more. One screen, it drifts by itself, drag or swipe it along */
.wall{height:auto!important}
.wall-pin{position:relative;top:auto;height:auto;overflow:hidden;justify-content:flex-start;padding-block:calc(var(--top) + 2vh) calc(var(--sawh) + 3vh)}
.wall-scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.wall-scroll::-webkit-scrollbar{display:none}
.track{transform:none!important;will-change:auto}
.wall-scroll.dragging{cursor:grabbing}
.wall-scroll.dragging .frame-in{pointer-events:none}
@media(min-width:861px){
  .wall-head .h2{font-size:clamp(34px,min(3.6vw,6.8vh),88px)}
  .poster .frame{height:min(51vh,600px)}
}

@media(min-width:981px) and (min-height:540px){
  /* subscribe: the heading, the prices and the button down the left, the bags on the right, the street underneath */
  .sub{--sth:clamp(140px,20vh,260px)}
  .sub .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);grid-template-rows:auto auto auto 1fr;column-gap:clamp(24px,4vw,70px);row-gap:clamp(10px,1.8vh,22px);align-items:start}
  .sub-grid,.sub-row,.sub-say{display:contents}
  .sub .h2{grid-column:1;grid-row:1;font-size:clamp(40px,min(4.2vw,6.8vh),112px)}
  .sub .deal{padding:8px 0}
  .sub .deal b{line-height:1.1}
  .sub-say .rv{display:none}
  .sub-say .lead{grid-column:1;grid-row:2;max-width:32em;margin:0}
  .sub .deals{grid-column:1;grid-row:3;width:min(100%,560px)}
  #subBtn{grid-column:1;grid-row:4;justify-self:start;align-self:start}
  .fan{grid-column:2;grid-row:1/-1;align-self:center;height:min(54vh,560px)}
  .stk-sub{left:calc(100% + 18px);right:auto;bottom:-6px;top:auto;--w:clamp(90px,min(7.4vw,13vh),134px)}
  .sub .mq{margin-top:calc(var(--sth) + 26px)}
  .sub-street{display:flex;justify-content:center}
  .sub-street img{width:auto;height:var(--sth);flex:none}
  .sub-rider{width:min(19vh,13vw)}
  .sub-parcel{top:calc(var(--top) + 3vh)}

  /* reviews: the crowd shows from the cups up, sized to the screen */
  .revs.sec{padding-top:clamp(108px,15vh,170px);padding-bottom:calc(min(29.65vw,30vh) * .92)}
  .rev-side{gap:clamp(12px,2vh,22px)}
  .rev-side .h2{font-size:clamp(30px,min(3.5vw,6.2vh),64px)}
  .crowd{height:min(29.65vw,30vh)}
  .deck{height:clamp(320px,50vh,470px)}

  /* wholesale: the shopfronts sized to the screen's height, the poster and the heading a touch smaller */
  .biz,.biz .biz-street{--sw:clamp(480px,64vh,1560px)}
  .biz.sec{padding-top:clamp(50px,7vh,100px);padding-bottom:calc(var(--sw) * .335 + var(--sawh))}
  .bz-mq{margin-bottom:clamp(18px,3.4vh,44px)}
  .bz-mq .mq-t{font-size:clamp(24px,min(3.4vw,5.8vh),58px)}
  .bz-art{padding:0 26% 0 2%}
  .bz-poster{max-width:min(100%,34vh);margin-inline:auto}
  .bz-poster-h{font-size:clamp(26px,min(3.4vw,5.4vh),64px)}
  .bz-copy{gap:clamp(12px,2vh,20px)}
  .bz-copy .h2{font-size:clamp(34px,min(4.6vw,7.2vh),96px)}
  .biz-vanfly{width:min(18vh,14vw)}
}
@media(max-width:980px){.sub-street .st-x{display: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 wheel (6 Oct): one screen, and it turns by itself; tap a card or a dot to turn it on */
.wheel{height:100vh;height:100svh}
.wheel-dots{pointer-events:auto}
.wheel-dots i{cursor:pointer}
.wcard{cursor:pointer}

/* 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}}

/* 6 Oct, 2:30pm round */
.wh-a{width:min(17vh,11vw);rotate:-8deg}
.wh-b{width:min(16vh,10.5vw);rotate:7deg}
@media(max-width:700px),(max-aspect-ratio:1/1){.wh-a{width:26vw}.wh-b{width:24vw}}
@media(max-height:1080px) and (min-width:981px){.p-taste{display:none}}
@media(min-width:981px) and (min-height:540px){
  .pick{padding-top:calc(var(--top) + clamp(14px,2.6vh,40px))}
  .pick-h{font-size:clamp(46px,min(5.6vw,10.5vh),128px);margin-bottom:clamp(46px,6.5vh,80px)}
  .pick-quiz{margin-top:clamp(28px,4.2vh,56px)}
  .pick-card{min-height:clamp(170px,min(15vw,27vh),250px)}
  .crowd{height:auto}
  .revs.sec{padding-bottom:calc(max(29.65vw,326px) * .9)}
}
.pick-quiz img{width:clamp(64px,5.2vw,92px);filter:drop-shadow(4px 6px 0 rgba(17,26,55,.25))}
/* the court: how to play, until the first shot */
.court-tip{position:absolute;left:50%;top:clamp(90px,16%,190px);z-index:6;display:grid;gap:6px;width:min(420px,84%);padding:18px 22px 20px;background:var(--navy);color:var(--cream);border:3px solid var(--navy);box-shadow:8px 8px 0 var(--pink);rotate:-2deg;translate:-50% 0;opacity:0;visibility:hidden;scale:.9;transition:opacity .35s ease,scale .45s var(--pop,cubic-bezier(.3,1.5,.5,1)),visibility 0s .35s;pointer-events:none}
.court-tip.on{opacity:1;visibility:visible;scale:1;transition:opacity .35s ease,scale .45s var(--pop,cubic-bezier(.3,1.5,.5,1))}
.court-tip b{font-family:var(--f-d);font-weight:400;font-size:clamp(20px,2vw,28px);line-height:1;text-transform:uppercase;color:var(--lime)}
.court-tip span{font-size:15px;font-weight:600;line-height:1.4}
.court-tip i{display:block;height:4px;margin-top:6px;background:var(--pink);transform-origin:0 50%}
.court-tip.on i{animation:tipRun 8s linear forwards}
@keyframes tipRun{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.rm .court-tip.on i{animation:none}
@media(min-width:981px){.court-tip{left:58%;top:36%}}

/* 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 wholesale page: two quick ways in for an office or a shop (6 Oct) */
.rm-quick{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 16px;font-size:14px;font-weight:700}
.rm-quick span{opacity:.8}
.rm-quick a{display:inline-flex;align-items:center;gap:6px;padding:7px 12px 6px;border:2px solid var(--navy);background:var(--white);color:var(--navy);box-shadow:3px 3px 0 var(--pink);text-decoration:none;line-height:1.15;transition:translate .16s var(--ease),box-shadow .16s var(--ease)}
.rm-quick a:nth-of-type(2){box-shadow:3px 3px 0 var(--lime)}
.rm-quick a:active{translate:3px 3px;box-shadow:0 0 0 var(--navy)}
@media(hover:hover){.rm-quick a:hover{translate:-2px -2px;box-shadow:5px 5px 0 var(--pink)}.rm-quick a:nth-of-type(2):hover{box-shadow:5px 5px 0 var(--lime)}}

/* the audit's carrier for the store's contact form: off screen, not display:none, so the store's spam check binds to it */
#auStore{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}

/* hyperspace (6 Oct): long jumps on the home page go through a quick warp instead of racing the page past */
.warp{position:fixed;inset:0;z-index:2147483000;pointer-events:none;opacity:0;visibility:hidden;background:#0B1026}
.warp.on{visibility:visible}
.warp canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* the hoops code on the store (6 Oct) */
.gm-code{display:inline-block;padding:2px 10px 0;border:3px solid var(--navy);background:var(--lime);color:var(--navy);font-family:var(--f-d);letter-spacing:.04em;rotate:-2deg}
.gm-done .gm-use{display:flex;width:max-content;margin-top:12px}
#gmStore{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}

/* phones (6 Oct, Jos's screenshots): the picker's art fits its own card; less sky above the heading; the radio and arrows
   step out of the way of a price or an Add to cart passing under them */
@media(max-width:860px){.pick-card img{height:auto;width:auto;max-height:calc(100% + 24px);max-width:42%;bottom:6px}}
@media(max-width:700px){
  .pick{padding-top:40px}
  .rail,.pl-dock{transition:translate .22s var(--ease),opacity .22s}
  html.bar-away .rail,html.bar-away .pl-dock{translate:0 160%;opacity:0;pointer-events:none}
}

/* the wheel and its bag in front of the next section's zigzag as the wheel moves on (6 Oct). The pin clips at its own
   bottom edge, so only the teeth are covered, never that section's content */
.wheel-pin{z-index:13}
.actor.over{z-index:12}

/* the blend cards say what the button adds (6 Oct) */
.pick-buy{gap:7px 12px}
.pick-deal{display:flex;flex-wrap:wrap;align-items:center;gap:4px 9px;width:100%}
.pick-was{font-size:13px;font-weight:700;opacity:.62}
.pick-save{display:inline-block;padding:4px 7px 3px;border:2px solid var(--navy);background:var(--lime);color:var(--navy);font-family:var(--f-c);font-style:normal;font-size:12px;line-height:1;letter-spacing:.06em;text-transform:uppercase;rotate:-2deg}
.pick-buy .pick-size{width:100%;line-height:1.35}
.pick-opts{position:relative;z-index:2;padding:4px 0;border:0;background:none;color:inherit;font:inherit;font-size:13.5px;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;cursor:pointer}
.pick-opts:hover{text-decoration-color:var(--pink)}
.quiz-price{flex-wrap:wrap}
.quiz-price .pick-size{width:100%}

/* "Find your coffee" at the top of the landing page (7 Oct) */
.h-find{position:fixed;right:var(--gut);bottom:calc(env(safe-area-inset-bottom,0px) + 104px);z-index:9;display:inline-flex;align-items:center;gap:10px;min-height:54px;padding:0 20px;border:3px solid var(--navy);background:var(--lime);color:var(--navy);box-shadow:5px 5px 0 var(--navy);font-family:var(--f-d);font-size:clamp(15px,1.2vw,18px);line-height:1;text-transform:uppercase;letter-spacing:.02em;rotate:-3deg;opacity:calc(1 - var(--cue,0));transition:translate .16s var(--ease),box-shadow .16s var(--ease)}
.h-find small{display:block;margin-top:4px;font-family:var(--f-b);font-size:11.5px;font-weight:700;letter-spacing:0;text-transform:none}
.h-find svg{flex:none}
.h-find:hover{translate:-2px -2px;box-shadow:7px 7px 0 var(--navy)}
.h-find:active{translate:3px 3px;box-shadow:2px 2px 0 var(--navy)}
.h-find.gone,.roompage .h-find,body[data-ov] .h-find,body.lock .h-find{visibility:hidden;pointer-events:none}
@media(max-width:700px){.h-find{right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 92px);min-height:48px;padding:0 14px;font-size:14px}}
.hero-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.hero-acts .btn-find{background:var(--lime);--bs:var(--navy)}
@media(max-width:1100px),(max-height:640px),(max-aspect-ratio:1/1){.hero-acts{order:2}}

/* 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)}
}

/* big screens (7 Oct, Jos: "when I go on a big screen, the first section doesn't look quite right"): the landing page keeps a
   laptop's proportions. --bz (set by the script) is how much bigger the screen is than 1440 x 900; 1 on anything smaller */
:root{--bz:1}
@media(min-width:1101px) and (min-height:641px) and (min-aspect-ratio:1/1){
  .actor{height:min(64vh,calc(640px * var(--bz)))}
  .h-gap{width:min(calc(min(46vh,calc(460px * var(--bz))) * .6775),22vw)}   /* the opener's bag stands in this gap */
  .shout{font-size:clamp(22px,3.1vw,calc(52px * var(--bz)))}
  .h-info{top:calc(var(--top) + 2.5vh + clamp(22px,3.1vw,calc(52px * var(--bz))) * 3.3 + 24px * var(--bz));scale:var(--bz);transform-origin:0 0}
  .hero-ui{gap:calc(12px * var(--bz));padding-bottom:calc((var(--sawh) + 14px) * var(--bz))}
  .hero-ui>.switch,.hero-ui>.sw-line,.hero-ui>.hero-acts,.slap-hint,.h-find{zoom:var(--bz)}
  /* the wheel after it ("Three blends. Nine years consistent."): heading and cards grow the same way. The cards turn round a
     point far below them, so a card itself is not scaled; it is made wider and its insides zoomed */
  .wheel-head{width:min(calc(1200px * var(--bz)),92vw);margin-left:calc(min(calc(1200px * var(--bz)),92vw) / -2)}
  .wheel-head h2{font-size:clamp(34px,6.2vw,calc(104px * var(--bz)))}
  .wheel-head p{zoom:var(--bz)}
  .wcard{width:min(calc(390px * var(--bz)),78vw);margin-left:calc(min(calc(390px * var(--bz)),78vw) / -2)}
  .wcard>*{zoom:var(--bz)}
}

/* top 10 cafe grinders (7 Oct): a 4th reading card. 365 takes the full row, the 3 guides sit under it; 2 by 2 on tablets */
.reads:has(>.read:nth-child(4)) .rd-365{grid-column:1/-1}
@media(max-width:1000px){.reads:has(>.read:nth-child(4)) .rd-365{grid-column:auto}}
/* the grinder buying guide (7 Oct): a 5th card. 365 runs the full row and the four guides sit in a row under it; 2 by 2 under
   365 on tablets; one column on phones */
.reads:has(>.read:nth-child(5)){grid-template-columns:repeat(4,minmax(0,1fr))}
.reads:has(>.read:nth-child(5)) .rd-365{grid-column:1/-1}
@media(max-width:1000px){.reads:has(>.read:nth-child(5)){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.reads:has(>.read:nth-child(5)){grid-template-columns:minmax(0,1fr)}}

/* 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}