/* KOFFEE — "Una web que se bebe". Built on top of the koffee-*.css modules, which stay untouched.
   Layers: .kx-js (JS present), .kx-motion (JS present and motion allowed), .kx-intro (first pour on load). */

/* ---------- Colourway tokens: the five cups of the hero photograph ---------- */
.kv-page{--kx-bg:#ea5724;--kx-wm:#fbecd9;--kx-ink:#462211;--kx-cream:#fbecd9;--kx-esp:#462211;--kx-night:#122035;--kx-tan:#ea5724;--kx-sun:#fdd14b;--kx-sky:#85bee8;background:var(--kx-bg);color:var(--kx-ink)}
.kx-intro .kv-page{background:var(--kx-cream)}
.kv-page .site-header{position:absolute;top:0;left:0;right:0;z-index:40;background:transparent;color:var(--kx-ink);border-color:transparent}
.kv-page .site-header a{color:inherit}
.kv-page>footer{background:var(--kx-bg);color:var(--kx-ink)}
.kv-page>footer a,.kv-page>footer button{color:inherit;border-color:currentColor}

/* ---------- Hero ---------- */
/* The wordmark has its room before the file arrives, so nothing below it jumps. */
.kv-masthead h1 img,.kv-end-mark>img{display:block;width:100%;height:auto;aspect-ratio:1230/456}
.kv-opening{background:transparent;padding-bottom:0}
/* clip, not just hidden: a hidden box can still be scrolled by the browser when Tab lands on something it cuts off. */
.kx-stage{position:relative;overflow:hidden;overflow:clip;background:var(--kx-bg);padding-top:76px;padding-bottom:5.5vw}
.kx-intro .kx-stage{background:var(--kx-cream)}
.kx-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.kv-masthead{z-index:0}
.kv-project-line,.kv-hero-note,.kv-discover,.kv-signature,.kx-pour{color:var(--kx-ink)}
.kv-project-line{position:relative;z-index:2}
.kv-first-look{z-index:2}
.kv-signature{color:var(--kx-wm);z-index:2}
.kv-hero-photo,.kv-hero-note,.kv-hero-sticker,.kv-discover,.kx-pour{z-index:2}
.kx-js .kv-masthead h1{background:var(--kx-wm);-webkit-mask:url('/assets/koffee-v2/wordmark-cream.webp') center/100% 100% no-repeat;mask:url('/assets/koffee-v2/wordmark-cream.webp') center/100% 100% no-repeat}
.kx-js .kv-masthead h1 img{opacity:0}

.kx-pour{display:none}
.kx-js .kx-pour{position:absolute;display:inline-flex;align-items:center;gap:12px;min-height:50px;padding:0 20px 0 12px;border:1.5px solid currentColor;border-radius:60px;background:transparent;font:12px/1 KoffeeMono,monospace;letter-spacing:.02em;white-space:nowrap;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transition:transform .25s cubic-bezier(.2,1.6,.4,1)}
.kx-pour:hover{transform:translateY(-2px)}
.kx-pour[data-active]{transform:scale(.96)}
.kx-pour-dot{width:28px;height:28px;border-radius:50%;background:var(--kx-next,#122035);box-shadow:0 0 0 2px var(--kx-cream),0 0 0 3.5px currentColor}

/* The five cups: a clipped copy of the same photograph, so the real cup lifts out of the picture. */
.kx-cups{display:none}
.kx-js .kx-cups{display:block;position:absolute;inset:0}
.kx-cupw{position:absolute;inset:0;pointer-events:none;transition:transform .34s cubic-bezier(.2,1.7,.4,1),filter .2s}
.kx-cup{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:url('/assets/koffee-v2/hero.webp') center/100% 100% no-repeat;pointer-events:auto;cursor:pointer!important;touch-action:manipulation}
.kx-cupw-noche .kx-cup{clip-path:polygon(10.2% 38.6%,11.5% 33.6%,16% 32.5%,23% 32.6%,26.6% 33.8%,27.8% 38.6%,25.3% 71.6%,13.3% 71.6%)}
.kx-cupw-cielo .kx-cup{clip-path:polygon(26.7% 36%,28% 31%,33% 30%,39% 30.3%,41.7% 31.4%,41.9% 36%,39.7% 65%,29.8% 65%)}
.kx-cupw-mandarina .kx-cup{clip-path:polygon(40.6% 37.8%,42% 32.4%,48% 31.3%,55% 31.6%,57.8% 32.8%,58% 37.8%,55.4% 70.6%,43.4% 70.6%)}
.kx-cupw-espresso .kx-cup{clip-path:polygon(57% 36.6%,58.2% 31.6%,62% 30.4%,69% 30.6%,71.8% 31.8%,72% 36.6%,69.8% 65.6%,59% 65.6%)}
.kx-cupw-crema .kx-cup{clip-path:polygon(71.8% 39.4%,73.2% 34%,78% 33%,85% 33.2%,88.8% 34.6%,89.4% 39.4%,87% 71.6%,74.8% 71.6%)}
.kx-cupw-cielo{z-index:1}.kx-cupw-espresso{z-index:1}.kx-cupw-noche{z-index:2}.kx-cupw-mandarina{z-index:2}.kx-cupw-crema{z-index:2}
@media(hover:hover){.kx-cupw:hover{transform:translateY(-3.4%) scale(1.012);filter:drop-shadow(0 16px 10px #12203555)}.kx-cupw:hover+.kx-cup-label{opacity:1;transform:translate(-50%,0)}}
.kx-cupw:has(.kx-cup:focus-visible){transform:translateY(-3.4%) scale(1.012);filter:drop-shadow(3px 0 0 #fbecd9) drop-shadow(-3px 0 0 #fbecd9) drop-shadow(0 3px 0 #fbecd9) drop-shadow(0 -3px 0 #fbecd9) drop-shadow(0 0 1px #122035) drop-shadow(0 12px 8px #12203555)}
.kx-cupw:has(.kx-cup[aria-pressed=true]){filter:drop-shadow(0 6px 5px #12203540)}
.kx-cup:focus-visible{outline:none}
.kx-cup-label{position:absolute;z-index:3;top:24%;padding:6px 10px;border-radius:30px;background:var(--kx-cream);color:var(--kx-esp);font:11px/1 KoffeeMono,monospace;transform:translate(-50%,6px);opacity:0;pointer-events:none;transition:opacity .15s,transform .25s cubic-bezier(.2,1.6,.4,1)}
.kx-cup-label-noche{left:19%}.kx-cup-label-cielo{left:34.5%}.kx-cup-label-mandarina{left:49.3%}.kx-cup-label-espresso{left:64.5%}.kx-cup-label-crema{left:80.5%}
.kx-cup-label[data-show],.kx-cupw:has(.kx-cup:focus-visible)+.kx-cup-label{opacity:1;transform:translate(-50%,0)}
.kx-jug{position:absolute;left:0;top:0;width:clamp(84px,9vw,132px);z-index:3;pointer-events:none;opacity:0;transform-origin:50% 50%;color:var(--kx-jug,#122035)}
.kx-jug svg{display:block;width:100%;height:auto;overflow:visible}

@media(min-width:901px){
 .kx-js .kx-pour{left:5.5%;bottom:calc(1vw + 56px)}
 .kv-first-look{min-height:50vw}
}
@media(min-width:901px) and (min-height:560px){
 .kx-motion{--kx-wmw:min(88vw,1760px,calc((100svh - 340px)*2.7));--kx-phw:min(60vw,calc((100svh - 150px)*1.5))}
 .kx-motion .kv-opening{height:calc(100svh + 95vh)}
 .kx-motion .kx-stage{position:sticky;top:0;height:100svh;padding:0}
 /* The line and the layer below both span the stage: only what they actually show takes the pointer. */
 .kx-motion .kv-project-line{position:absolute;left:0;right:0;top:70px;padding-block:14px;z-index:3;pointer-events:none}
 .kx-motion .kv-project-line a{pointer-events:auto}
 .kx-motion .kv-masthead{position:absolute;left:calc(50% - var(--kx-wmw)/2);top:112px;width:var(--kx-wmw);max-width:none;margin:0;transform-origin:0 0;will-change:transform}
 .kx-motion .kv-signature{bottom:-26px}
 .kx-motion .kv-first-look{position:absolute;inset:0;margin:0;min-height:0;pointer-events:none}
 .kx-motion .kv-first-look>*{pointer-events:auto}
 .kx-motion .kv-hero-photo{position:absolute;right:4vw;bottom:32px;margin:0;width:var(--kx-phw);will-change:transform}
 .kx-motion .kv-hero-note{left:4vw;top:auto;bottom:158px;max-width:24vw}
 .kx-motion .kx-pour{left:4vw;bottom:92px}
 .kx-motion .kv-discover{left:4vw;bottom:32px}
 .kx-motion .kv-hero-sticker{left:calc(100vw - var(--kx-phw) - 13vw);top:auto;bottom:112px;width:clamp(110px,12vw,180px);will-change:transform}
}

/* ---------- Ribbon ---------- */
.kv-ribbon{margin-block:0;transform-origin:50% 50%}
.kv-ribbon>div{will-change:transform;display:inline-block}
.kv-ribbon span{display:inline-block;transition:transform .35s cubic-bezier(.2,1.7,.4,1)}
.kx-rush .kv-ribbon span{transform:scale(1.22) rotate(-3deg);color:var(--kx-tan)}

/* ---------- Feed ---------- */
.ks-phone-stage{--kx-stage:#ea5724;--kx-word:#fdd14b;background:var(--kx-stage)}
.ks-stage-word{color:var(--kx-word);transition:color .4s}
.kx-stagewash{position:absolute;inset:0;z-index:-2;pointer-events:none}
.ks-phone{transform-style:preserve-3d;will-change:transform}
.ks-grid-post{transition:transform .28s cubic-bezier(.2,1.5,.4,1)}
.ks-grid-post:hover{transform:scale(1.05) rotate(-1.5deg);z-index:2}
.ks-grid-post[aria-current=true]{z-index:1}

/* ---------- The universe ---------- */
.kv-scene-view{isolation:isolate;background:#122035}
.kv-scene-panel{background:#122035}
.kx-ghost,.kx-band{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:-2}
.kx-band{z-index:-1;display:block}
.kx-motion .kv-scene-panel[data-enter]{animation:none}
.kv-scene-counter{z-index:3}
@media(min-width:901px){.kv-scene-counter{top:0;right:0;bottom:auto}}
@media(min-width:901px){
 .kv-scene{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.8fr);gap:0 3vw;align-items:stretch}
 .kv-scene-panel{padding:0}
 .kv-scene-tabs{grid-column:1;grid-row:1;grid-template-columns:1fr;grid-auto-rows:1fr;border:0;border-top:1px solid #fbecd94d}
 .kv-scene-view{grid-column:2;grid-row:1}
 .kv-scene-tabs button,.kv-scene-tabs button:first-child{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:end;align-content:end;gap:8px 14px;padding:16px 4px 16px 10px;border:0;border-bottom:1px solid #fbecd94d;font-family:KoffeeDisplay,Arial,sans-serif;font-weight:800;font-size:clamp(24px,2.7vw,44px);line-height:.95;letter-spacing:-.05em;color:#fbecd9a8;background:transparent;overflow:hidden}
 .kv-scene-tabs button>span:first-child{align-self:start;font:10px/1 KoffeeMono,monospace;letter-spacing:.04em;opacity:.8;padding-top:6px}
 .kv-scene-tabs button>span:last-child{display:none}
 .kv-scene-tabs button:hover{color:#fbecd9;background:transparent}
 .kv-scene-tabs button[aria-selected=true]{background:transparent;color:var(--kx-sun)}
 .kv-scene-tabs button::after{content:'';position:absolute;left:0;bottom:-1px;height:3px;width:100%;background:var(--kx-sun);transform:scaleX(var(--kx-tab,0));transform-origin:0 50%}
 .kv-scene-tabs button[aria-selected=true]::after{--kx-tab:1}
 .kx-motion .kv-world::after{content:'';display:block;height:220svh}
 .kx-motion .kv-world{padding-bottom:0}
 .kx-motion .kv-scene{position:sticky;top:65px;height:calc(100svh - 65px);padding-block:22px}
 .kx-motion .kv-scene-view{aspect-ratio:auto;height:100%}
 .kv-world{padding-bottom:6vw}
}

/* ---------- Applications ---------- */
@media(min-width:901px){
 .ka-main-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:30px 24px;max-width:1320px}
 .ka-main-grid .ka-piece:nth-child(1){grid-column:1/6;grid-row:1/3;transform:rotate(-1.2deg)}
 .ka-main-grid .ka-piece:nth-child(2){grid-column:6/13;transform:rotate(.5deg)}
 .ka-main-grid .ka-piece:nth-child(3){grid-column:6/10;transform:rotate(.8deg)}
 .ka-main-grid .ka-piece:nth-child(4){grid-column:10/13;transform:rotate(-1deg);margin-top:26px}
 .ka-main-grid .ka-open img{max-height:none;object-fit:cover}
 .ka-object-grid{max-width:none}
 .ka-piece{transition:transform .36s cubic-bezier(.2,1.5,.4,1)}
 .ka-main-grid .ka-piece:hover{transform:rotate(0) translateY(-6px)}
}
.ka-open{box-shadow:0 12px 26px #46221118}
.kx-track{position:relative;height:66px;margin-top:6px}
.kx-track::before{content:'';position:absolute;left:0;right:0;bottom:12px;border-top:2px dashed #46221155}
.kx-trail{position:absolute;left:0;bottom:10px;height:6px;border-radius:6px;background:var(--kx-esp);width:calc(var(--kx-p,0)*(100% - 74px) + 20px)}
.kv-case img.kx-snail{position:absolute;left:0;bottom:9px;width:74px;height:auto;transform:translateX(calc(var(--kx-px,0px))) rotate(var(--kx-sr,0deg));transform-origin:50% 100%;pointer-events:none}
@media(min-width:901px){html:not(.kx-motion) .kx-track{display:none}}
/* Under 900px the ten objects become a native swipe rail, with or without JS. */
@media(max-width:900px){
 .ka-object-grid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;margin-inline:-5vw;padding:4px 5vw 10px;scrollbar-width:none;overscroll-behavior-x:contain}
 .ka-object-grid::-webkit-scrollbar{display:none}
 .ka-object-grid .ka-piece{flex:0 0 min(64vw,330px);scroll-snap-align:center}
 .ka-object-grid .ka-open img{max-height:none;aspect-ratio:4/5;object-fit:cover}
}
@media(min-width:901px) and (min-height:560px){
 .kx-motion .kx-run{--kx-w:min(43svh,29vw,calc((100svh - 350px)*.8));--kx-g:30px;--kx-travel:max(0px,calc(10*var(--kx-w) + 9*var(--kx-g) + 8vw - 100vw));height:calc(100svh + var(--kx-travel)*.8);margin-inline:-4vw}
 .kx-motion .kx-pin{position:sticky;top:65px;height:calc(100svh - 65px);overflow:clip;padding:20px 4vw 6px;display:flex;flex-direction:column}
 .kx-motion .ka-everywhere-heading{margin:0 0 16px;padding-top:14px;flex:none}
 .kx-motion .ka-object-grid{display:flex;gap:var(--kx-g);width:max-content;max-width:none;margin:0;flex:none;padding-top:10px;will-change:transform}
 .kx-motion .ka-object-grid .ka-piece{width:var(--kx-w);flex:none;transform-origin:50% 0}
 .kx-motion .ka-object-grid .ka-piece:nth-child(even){margin-top:14px}
 .kx-motion .ka-object-grid .ka-open img{max-height:none;aspect-ratio:4/5;object-fit:cover}
 .kx-motion .kx-track{margin-top:auto;flex:none}
 .kx-motion .ka-applications{padding-bottom:0}
}

/* ---------- Type & colour ---------- */
.ki-display-specimen>span{position:relative;display:inline-block}
.kx-dropbtn{position:absolute;left:50%;bottom:.04em;width:.5em;height:.5em;margin-left:-.25em;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer!important}
.kx-dropbtn:focus-visible{outline:3px solid var(--kx-esp)!important;outline-offset:2px!important}
.kx-drop{position:absolute;z-index:6;border-radius:50%;background:var(--kx-tan);pointer-events:none}
.kx-motion .ki-palette{position:relative;isolation:isolate;margin-top:18px;border-top:0}
.kx-palcanvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.kx-motion .ki-palette li{position:relative;background:transparent;border-right:0;min-height:clamp(320px,31vw,470px);justify-content:flex-end;cursor:pointer;touch-action:pan-y;overflow:hidden;user-select:none;-webkit-user-select:none}
.kx-motion .ki-palette-letter{position:absolute;left:50%;top:0;margin:0;will-change:transform}
@media(max-width:600px){
 .kx-motion .ki-palette{grid-template-columns:repeat(6,minmax(0,1fr))}
 .kx-motion .ki-palette li{min-height:280px;padding:8px 2px 12px;border:0}
 .kx-motion .ki-palette-letter{font-size:clamp(40px,14vw,70px)}
 .kx-motion .ki-palette-name{writing-mode:vertical-rl;transform:rotate(180deg);align-self:center;font-size:12px;line-height:1;letter-spacing:.02em}
}

@media(max-width:600px){.ki-palette .ki-palette-name{font-size:12px}}

/* ---------- Stickers ---------- */
.kx-shake{display:none}
.kx-js .kx-shake{display:flex}
.kv-sticker{transition:filter .2s}
.kl-sticker-art{transition:transform .22s cubic-bezier(.2,1.7,.4,1)}
.kv-sticker:hover .kl-sticker-art{transform:rotate(-4deg) scale(1.05)}
.kv-sticker.is-dragging .kl-sticker-art,.kv-sticker.kx-lifted .kl-sticker-art{transform:rotate(4deg) scale(1.12)}
.kx-touchhint{display:none;font:12px/1.4 KoffeeMono,monospace;margin:8px 0 0}
@media(pointer:coarse){
 .kx-js .kl-illustrations .kv-sticker{touch-action:pan-y;-webkit-touch-callout:none}
 .kx-js .kx-touchhint{display:block}
 .kv-sticker.is-dragging:not(.kx-lifted) .kl-sticker-art{transform:none}
}
.kl-illustrations .kv-play-directions{flex-wrap:wrap}

/* ---------- The last sip ---------- */
.kv-end{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:34px;min-height:100svh;padding:5vw 6vw 4vw;background:var(--kx-esp)}
.kv-end-mark{position:relative;width:100%;max-width:min(88vw,calc((100svh - 300px)*2.7));margin-inline:auto}
.kv-end-mark>img{max-width:none;width:100%}
.kx-endcanvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.kx-last{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap}
.kx-last p{font:800 clamp(40px,7.2vw,118px)/.9 KoffeeDisplay,Arial,sans-serif;letter-spacing:-.065em;color:var(--kx-sun)}
.kx-refill{display:none}
.kx-js .kx-refill{position:relative;z-index:3;display:inline-flex;align-items:center;gap:14px;min-height:52px;padding:0 22px;background:var(--kx-cream);color:var(--kx-esp);border:0;border-radius:60px;font:12px/1 KoffeeMono,monospace;transition:transform .25s cubic-bezier(.2,1.6,.4,1)}
.kx-refill:hover{transform:translateY(-3px) rotate(-1.5deg)}
.kx-refill span{font:20px/1 Arial,sans-serif}

/* ---------- The cup that goes with you ---------- */
.kx-sip{position:fixed;right:clamp(12px,1.8vw,26px);bottom:calc(clamp(12px,1.8vw,26px) + env(safe-area-inset-bottom,0px));z-index:50;width:clamp(62px,6.4vw,92px);padding:0;border:0;background:transparent;cursor:grab;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;opacity:0;transform:translateY(24px) scale(.8);pointer-events:none;transition:opacity .25s,transform .4s cubic-bezier(.2,1.6,.4,1);color:var(--kx-esp)}
.kx-sip[data-on],.kx-sip:focus-visible{opacity:1;transform:none;pointer-events:auto}
/* Tucks into the screen edge when it would sit on a control; 18px stays visible and tappable. */
.kx-sip[data-on][data-dodge]:not(:focus-visible){transform:translateX(calc(100% + clamp(12px,1.8vw,26px) - 18px)) rotate(10deg)}
.kx-sip svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 6px 5px #12203538)}
.kx-sip:hover svg{transform:rotate(-5deg)}
.kx-sip svg{transition:transform .25s cubic-bezier(.2,1.6,.4,1)}
.kx-sip[data-holding] svg{transform:rotate(-22deg) translateY(-6px)}
.kx-sip:focus-visible{outline:3px solid var(--kx-night);outline-offset:4px;border-radius:14px}
.kx-sip-tip{position:absolute;right:calc(100% + 8px);top:50%;padding:7px 11px;border-radius:30px;background:var(--kx-night);color:var(--kx-cream);font:11px/1.2 KoffeeMono,monospace;white-space:nowrap;transform:translateY(-50%) translateX(8px);opacity:0;pointer-events:none;transition:opacity .2s,transform .3s cubic-bezier(.2,1.6,.4,1)}
@media(hover:hover){.kx-sip:hover .kx-sip-tip{opacity:1;transform:translateY(-50%)}}
.kx-sip:focus-visible .kx-sip-tip,.kx-sip[data-tip] .kx-sip-tip{opacity:1;transform:translateY(-50%)}
.kx-sip[data-dodge]:not(:focus-visible) .kx-sip-tip{opacity:0}
.kx-back{position:fixed;right:clamp(70px,9vw,132px);bottom:clamp(16px,3vw,40px);z-index:49;width:clamp(100px,12vw,170px);pointer-events:none;opacity:0;height:auto}

/* POV: the cup comes up to your face. Same drawing as the snail's shell, seen from above. */
.kx-pov{position:fixed;inset:0;z-index:60;pointer-events:none;overflow:hidden;visibility:hidden}
.kx-pov[data-on]{visibility:visible}
.kx-pov-cup{position:absolute;left:50%;top:50%;width:100vmin;height:100vmin;margin:-50vmin 0 0 -50vmin}
.kx-pov-cup svg{display:block;width:100%;height:100%;overflow:visible}
.kx-hanger{position:absolute;left:78%;top:-4px;width:clamp(120px,27vmin,300px);margin-left:calc(clamp(120px,27vmin,300px)/-2);transform-origin:50% 0;height:auto;opacity:0;filter:drop-shadow(0 18px 14px #0005)}

/* NO RUSH: the snail asks you to slow down. */
.kx-norush{position:fixed;left:clamp(10px,2vw,28px);bottom:clamp(10px,2vw,28px);width:clamp(110px,13vw,190px);z-index:49;pointer-events:none;height:auto;transform:translateX(-130%);will-change:transform}

.kx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* ---------- Under 900px: hero in one screen, no pin ---------- */
@media(max-width:900px){
 .kx-stage{padding-top:70px;padding-bottom:0;min-height:100svh;display:flex;flex-direction:column}
 .kv-first-look{flex:1;display:flex;flex-direction:column;margin-top:74px;min-height:0;padding-bottom:22px}
 .kv-hero-note{position:absolute;top:-46px;max-width:none}
 .kv-hero-note br{display:inline}
 .kv-hero-photo{margin:0 0 0 5%;width:90%}
 .kx-js .kx-pour{position:relative;left:auto;bottom:auto;align-self:flex-start;margin:34px 0 0 5%}
 .kv-discover{position:relative;left:auto;bottom:auto;margin:18px 0 0 5%;align-self:flex-start}
 .kv-hero-sticker{left:auto;right:4%;top:auto;bottom:58px;width:clamp(96px,28vw,180px);max-width:none;transform:rotate(12deg)}
 .kv-end{padding:60px 6vw 40px}
 .kx-last p{font-size:clamp(46px,14vw,90px)}
}

/* ---------- Small print: nothing under 10px ---------- */
.kv-page .ks-stage-note,.kv-page .ks-post-total>span,.kv-page .ks-grid-label{font-size:10px}
.kv-page .kl-illustrations .kv-keyboard-hint{font-size:11px;max-width:none}
.kv-page .kl-sticker-label{font-size:clamp(10px,.7vw,11px)}
.kv-page .kv-scene-tabs button>span:first-child{font-size:10px}
.kv-page .ks-phone-hint,.kv-page .ks-feed-intro>p,.kv-page .ks-feed-hint,.kv-page .ks-cell-number,.kv-page .ki-type-heading>span,.kv-page .ks-profile-header p{font-size:10px}
@media(max-width:900px){
 .kv-page .kv-signature,.kv-page .kv-end-mark>span,.kv-page .kv-project-line,.kv-page .kv-project-line>*,.kv-page .kv-project-line>span:nth-child(2),.kv-page .kv-discover,.kv-page .kv-kicker,.kv-page .ki-heading>p,.kv-page .kl-count,.kv-page .kv-reset,.kv-page .ka-piece figcaption{font-size:10px}
 .kv-page .kv-scene-tabs button{font-size:11px}
}
@media(min-width:601px) and (max-width:900px){.kv-page .ki-palette .ki-palette-name{font-size:10px}}

/* ---------- Without JavaScript: all four scenes on show, each with its name; controls that need a script step aside ---------- */
html:not(.kx-js) .kv-scene-tabs,html:not(.kx-js) .kv-scene-view{display:contents}
html:not(.kx-js) .kv-scene{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.8fr);gap:22px 3vw;align-items:start}
html:not(.kx-js) .kv-scene-panel,html:not(.kx-js) .kv-scene-panel[hidden]{display:block;position:relative;inset:auto;grid-column:2;padding:0;background:none}
html:not(.kx-js) .kv-scene-panel img{height:auto;max-height:86vh;object-fit:contain;object-position:left center!important}
html:not(.kx-js) .kv-scene-tabs button{grid-column:1;pointer-events:none;cursor:default;background:none;color:#fbecd9;min-height:0;height:auto;border:0;border-top:1px solid #fbecd94d}
html:not(.kx-js) .kv-scene-tabs button>span:last-child,html:not(.kx-js) .kv-scene-tabs button::after,html:not(.kx-js) .kv-scene-counter{display:none}
@media(min-width:901px){
 html:not(.kx-js) #scene-panel-0,html:not(.kx-js) #scene-tab-0{grid-row:1}
 html:not(.kx-js) #scene-panel-1,html:not(.kx-js) #scene-tab-1{grid-row:2}
 html:not(.kx-js) #scene-panel-2,html:not(.kx-js) #scene-tab-2{grid-row:3}
 html:not(.kx-js) #scene-panel-3,html:not(.kx-js) #scene-tab-3{grid-row:4}
}
html:not(.kx-js) .ks-phone-controls,html:not(.kx-js) .ks-zoom,html:not(.kx-js) .ks-like,html:not(.kx-js) .ks-phone-hint,html:not(.kx-js) .ks-grid-label>span:last-child,html:not(.kx-js) [data-reset-stickers],html:not(.kx-js) [data-copy-email],html:not(.kx-js) .kv-keyboard-hint,html:not(.kx-js) #sticker-instructions,html:not(.kx-js) .ka-everywhere-heading>p{display:none}
html:not(.kx-js) .kv-sticker{pointer-events:none;cursor:default}
@media(max-width:900px){
 html:not(.kx-js) .kv-scene{grid-template-columns:minmax(0,1fr);gap:0}
 html:not(.kx-js) .kv-scene-panel,html:not(.kx-js) .kv-scene-panel[hidden]{grid-column:1;margin-bottom:18px}
 html:not(.kx-js) .kv-scene-tabs button{min-height:0;padding:12px 0;border:0}
 html:not(.kx-js) #scene-tab-0{order:0}html:not(.kx-js) #scene-panel-0{order:1}html:not(.kx-js) #scene-tab-1{order:2}html:not(.kx-js) #scene-panel-1{order:3}html:not(.kx-js) #scene-tab-2{order:4}html:not(.kx-js) #scene-panel-2{order:5}html:not(.kx-js) #scene-tab-3{order:6}html:not(.kx-js) #scene-panel-3{order:7}
}

/* ---------- Reduced motion: the whole design, nothing moving ---------- */
@media(prefers-reduced-motion:reduce){
 .kx-cupw,.kx-pour,.kx-sip,.kx-sip svg,.kx-refill,.kx-cup-label,.ka-piece,.ks-grid-post,.kl-sticker-art,.kv-ribbon span{transition:none!important}
 .kx-cupw:hover,.kx-cupw:has(.kx-cup:focus-visible){transform:none!important}
 .ks-grid-post:hover,.ka-main-grid .ka-piece:hover{transform:none}
}