/* Kite's Kitchen: painted kitchen roundup (snacks first). Phone first at 375px. */
:root{--chalk:"Caveat Brush","Fraunces",cursive;--wood:#C98A3E;--wood-dk:#8A5426;--enamel:#F4EFE6;--shade:rgba(58,40,84,.42);--glow:#FFD27A}
body:has(.kk){background:#E7B26A url(/assets/kitchen/counter-tile.webp) center top/900px auto repeat}
.kk{position:relative;overflow-x:clip;padding-bottom:110px}
.kk ::selection{background:var(--gold-soft)}

/* ---------- hero: the painted kitchen ---------- */
.kk-hero{position:relative;width:100%;aspect-ratio:4/5;margin:0 auto;container-type:inline-size;overflow:hidden;background:#F6D9A8}
.kk-scene,.kk-scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kk-light{position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 45% at 92% 18%,rgba(255,214,140,.55),transparent 70%),linear-gradient(115deg,transparent 40%,rgba(255,221,160,.22) 55%,transparent 70%);mix-blend-mode:soft-light;animation:kkBreathe 9s ease-in-out infinite}
@keyframes kkBreathe{0%,100%{opacity:.7}50%{opacity:1}}
.kk-motes{position:absolute;inset:0 0 30% 45%;pointer-events:none}
.kk-motes i{position:absolute;width:4px;height:4px;border-radius:50%;background:#FFF1C9;box-shadow:0 0 6px 2px rgba(255,228,160,.7);opacity:0;animation:kkMote 11s linear infinite}
.kk-motes i:nth-child(odd){width:3px;height:3px}
.kk-motes i:nth-child(1){left:12%;top:70%;animation-delay:-1s}.kk-motes i:nth-child(2){left:30%;top:80%;animation-delay:-3s}
.kk-motes i:nth-child(3){left:48%;top:60%;animation-delay:-5s}.kk-motes i:nth-child(4){left:66%;top:75%;animation-delay:-7s}
.kk-motes i:nth-child(5){left:80%;top:55%;animation-delay:-9s}.kk-motes i:nth-child(6){left:20%;top:45%;animation-delay:-2s}
.kk-motes i:nth-child(7){left:58%;top:40%;animation-delay:-4s}.kk-motes i:nth-child(8){left:88%;top:85%;animation-delay:-6s}
.kk-motes i:nth-child(9){left:38%;top:30%;animation-delay:-8s}.kk-motes i:nth-child(10){left:72%;top:22%;animation-delay:-10s}
.kk-motes i:nth-child(11){left:6%;top:35%;animation-delay:-2.5s}.kk-motes i:nth-child(12){left:52%;top:88%;animation-delay:-6.5s}
.kk-motes i:nth-child(13){left:92%;top:30%;animation-delay:-8.5s}.kk-motes i:nth-child(14){left:26%;top:15%;animation-delay:-4.5s}
@keyframes kkMote{0%{transform:translate(0,0);opacity:0}15%{opacity:.9}50%{transform:translate(-14px,-38px)}85%{opacity:.7}100%{transform:translate(8px,-80px);opacity:0}}

/* chalkboard text sits inside the painted board (phone painting: x 25-73%, y 16-39%) */
.kk-board{position:absolute;left:var(--bl,25.5%);width:var(--bw,47.5%);top:var(--bt,16.2%);height:var(--bh,22.8%);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:#F5F1E6;
  text-shadow:0 0 1px rgba(255,255,255,.5),0 0 8px rgba(255,255,255,.12);font-family:var(--chalk);transform:rotate(-1deg)}
.kk-kick{margin:0 0 .2em;font-size:max(16px,3.3cqw);letter-spacing:.02em;color:#F8D58A;opacity:.95}
.kk-board h1{font-family:var(--chalk);font-weight:400;font-size:max(16px,4.8cqw);line-height:1;letter-spacing:.01em;margin:0;display:grid;grid-template-columns:auto auto;align-items:center;column-gap:.25em;justify-content:center}
.kk-big{grid-row:span 2;font-size:max(16px,15cqw);line-height:.82;color:#fff;transform:rotate(-3deg)}
.kk-h1a{text-align:left}.kk-h1b{text-align:left;color:#F8D58A;font-size:max(16px,.82em)}
.kk-board::after{content:"";position:absolute;inset:-2%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='60' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");mix-blend-mode:multiply;opacity:.35;pointer-events:none}

/* Kite peeks over the counter edge (counter top at ~75%) */
.kk-host{position:absolute;right:3%;bottom:var(--hb,25.2%);width:34%;pointer-events:none}
.kk-peek{width:100%;height:auto;transform-origin:50% 100%;animation:kkPeek 1s cubic-bezier(.34,1.56,.64,1) .35s both,kkBob 4.2s ease-in-out 1.4s infinite}
@keyframes kkPeek{from{transform:translateY(70%) scaleY(.8)}to{transform:none}}
@keyframes kkBob{0%,100%{transform:translateY(0)}50%{transform:translateY(3%) scaleY(.985)}}
.kk-say{position:absolute;right:62%;bottom:78%;width:min(56vw,250px);margin:0;padding:10px 13px;background:#FFFBF3;color:var(--plum);border-radius:16px 16px 4px 16px;font:700 16px/1.3 var(--sans);
  box-shadow:0 8px 18px -6px var(--shade);pointer-events:auto;animation:kkPop .5s cubic-bezier(.34,1.56,.64,1) 1.1s both}
@keyframes kkPop{from{opacity:0;transform:scale(.6) translateY(10px)}to{opacity:1;transform:none}}
.kk-say.bump{animation:kkBump .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes kkBump{0%{transform:scale(.92)}60%{transform:scale(1.04)}100%{transform:none}}

/* ---------- the counter + the photo grid ---------- */
.kk-counter{position:relative;margin-top:var(--ov,-26vw);padding:0 12px 24px;z-index:2}
.kk-counter::before{content:"";position:absolute;inset:var(--ov,-26vw) 0 0;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(255,226,170,.28) 45%,transparent 60%);background-size:220% 100%;animation:kkSun 22s ease-in-out infinite alternate;mix-blend-mode:soft-light;-webkit-mask-image:linear-gradient(transparent,#000 160px,#000 calc(100% - 160px),transparent);mask-image:linear-gradient(transparent,#000 160px,#000 calc(100% - 160px),transparent)}
@keyframes kkSun{from{background-position:100% 0}to{background-position:0 0}}
.kk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px;max-width:1240px;margin:0 auto;position:relative}
.kk-card{position:relative;transform:rotate(var(--tilt,0deg));transition:opacity .35s,filter .35s;animation:kkSettle .5s cubic-bezier(.34,1.56,.64,1) both}
.kk-card:nth-child(1){animation-delay:.05s}.kk-card:nth-child(2){animation-delay:.1s}.kk-card:nth-child(3){animation-delay:.15s}.kk-card:nth-child(4){animation-delay:.2s}
@keyframes kkSettle{from{transform:translateY(-14px) rotate(var(--tilt,0deg)) scale(1.03);opacity:.4}to{transform:rotate(var(--tilt,0deg))}}
.kk-open{display:block;width:100%;padding:0;border:0;background:none;text-align:left;cursor:pointer;color:inherit;font:inherit;-webkit-tap-highlight-color:transparent}
.kk-ph{display:block;position:relative;border-radius:14px;overflow:hidden;aspect-ratio:var(--ar,4/5);background:#E9C690;
  box-shadow:0 14px 16px -10px rgba(60,36,70,.55),0 3px 4px rgba(60,36,70,.18);transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s}
.kk-ph img{width:100%;height:100%;object-fit:cover}
.kk-open:active .kk-ph{transform:scale(.97)}
@media (hover:hover){.kk-open:hover .kk-ph{transform:translateY(-3px) rotate(-.4deg);box-shadow:0 20px 22px -12px rgba(60,36,70,.55),0 3px 4px rgba(60,36,70,.18)}}
.kk-num{position:absolute;left:8px;top:8px;width:30px;height:30px;border-radius:50%;background:var(--plum);color:#FFF8EE;display:grid;place-items:center;font:800 16px var(--sans);box-shadow:0 2px 0 rgba(0,0,0,.18)}
.kk-tag{display:block;position:relative;margin:-16px 6px 0;padding:9px 10px 9px;background:#FFFBF3;border-radius:6px 6px 12px 12px;transform:rotate(calc(var(--tilt,0deg) * -1.6));
  box-shadow:0 6px 10px -6px rgba(60,36,70,.45);background-image:linear-gradient(transparent 92%,rgba(232,102,74,.08) 92%)}
.kk-tag b{display:block;font:650 16px/1.15 var(--serif);font-variation-settings:"SOFT" 50,"opsz" 40}
.kk-meta{display:block;margin-top:3px;font:600 16px/1.3 var(--sans);color:var(--plum-soft)}
.kk-status{display:block;font:800 16px/1.2 var(--sans);margin-top:5px;min-height:0}
.kk-status:empty{display:none}
.kk-keep{position:absolute;right:4px;top:4px;width:46px;height:46px;border:0;padding:3px;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .2s}
.kk-keep svg{width:100%;height:100%;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25));transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.kk-keep[aria-pressed="false"] svg{opacity:.9}
.kk-keep[aria-pressed="false"] svg circle{fill:#FFFBF3}
.kk-keep[aria-pressed="false"]::after{content:"+";position:absolute;left:0;right:0;top:9px;text-align:center;font:900 20px/1 var(--sans);color:var(--plum)}
.kk-keep[aria-pressed="true"]::after{content:"";position:absolute;left:16px;top:13px;width:12px;height:7px;border:3px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg)}
.kk-keep.snap svg{animation:kkSnap .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes kkSnap{0%{transform:scale(.6) translateY(-6px)}55%{transform:scale(1.18,.86)}100%{transform:none}}

/* pantry states */
.kk.has-have .kk-card.far{opacity:.42;filter:saturate(.55)}
.kk-card.can .kk-ph{box-shadow:0 0 0 3px var(--glow),0 0 22px 4px rgba(255,200,90,.65),0 14px 16px -10px rgba(60,36,70,.55)}
.kk-card.can .kk-status{color:#3F7A2E}
.kk-card.near .kk-status{color:var(--coral-dark)}
.kk-card.hop{animation:kkHop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes kkHop{0%{transform:rotate(var(--tilt)) translateY(0)}40%{transform:rotate(var(--tilt)) translateY(-10px) scale(1.03)}100%{transform:rotate(var(--tilt))}}
.kk-card.tagged-out{display:none}
.kk-note{max-width:640px;margin:22px auto 0;padding:10px 14px;background:rgba(255,251,243,.92);border-radius:12px;font-size:16px;text-align:center}
.kk-fold{max-width:640px;margin:12px auto 0;background:rgba(255,251,243,.94);border-radius:14px;padding:4px 16px}
.kk-fold summary{cursor:pointer;font-weight:800;padding:10px 0}
.kk-fold p{font-size:16px;margin:0 0 12px}
.kk .sunday{position:relative;z-index:2;margin-top:28px}

/* the ant that walks off the ants-on-a-log */
.kk-ant{position:absolute;left:58%;top:52%;width:22px;height:14px;pointer-events:none;z-index:3;animation:kkAnt 4.5s linear forwards}
@keyframes kkAnt{0%{transform:translate(0,0)}25%{transform:translate(-30px,18px)}60%{transform:translate(-70px,70px) rotate(25deg)}100%{transform:translate(-90px,170px) rotate(10deg);opacity:0}}
.kk-ant .lg{animation:kkLeg .18s linear infinite alternate;transform-origin:center}
@keyframes kkLeg{to{transform:scaleX(-1)}}

/* ---------- the tray: "What's in your kitchen?" ---------- */
.kk-tray{position:fixed;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));z-index:40;max-width:720px;margin:0 auto;border-radius:22px;
  background:linear-gradient(rgba(70,40,22,.18),rgba(70,40,22,.38)),url(/assets/kitchen/counter-tile.webp) center/600px auto;box-shadow:0 18px 30px -10px rgba(40,25,50,.6),inset 0 2px 0 rgba(255,236,200,.5);
  transform:translateY(130%);transition:transform .45s cubic-bezier(.34,1.3,.64,1)}
.kk-tray.in{transform:none}
.kk-tray-bar{display:flex;align-items:center;gap:6px;padding:7px}
.kk-tray-h{flex:1;min-width:0;min-height:50px;border:0;border-radius:16px;background:#FFFBF3;color:var(--plum);text-align:left;padding:6px 12px;cursor:pointer;box-shadow:0 3px 0 rgba(90,55,30,.35)}
.kk-tray-t{display:block;font:800 16px/1.15 var(--sans)}
.kk-tray-n{display:block;font:700 16px/1.2 var(--sans);color:var(--coral-dark)}
.kk-tray-n:empty::before{content:"Tap to open the pantry";color:var(--plum-soft)}
.kk-tray-h:active,.kk-pickbtn:active,.kk-fridgebtn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(90,55,30,.35)}
.kk-pickbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;width:74px;min-height:50px;border:0;border-radius:16px;background:var(--gold);color:var(--plum);cursor:pointer;padding:2px 4px;box-shadow:0 3px 0 rgba(120,70,20,.45)}
.kk-pickbtn img{width:30px;height:30px;object-fit:contain;margin-top:-10px;filter:drop-shadow(0 2px 1px rgba(0,0,0,.2))}
.kk-pickbtn span{font:800 16px/1.05 var(--sans);text-align:center}
.kk-fridgebtn{position:relative;width:54px;min-height:50px;border:0;border-radius:16px;background:var(--enamel);cursor:pointer;display:grid;place-items:center;box-shadow:0 3px 0 rgba(90,55,30,.35)}
.kk-fridgebtn svg{width:26px;height:32px}
.kk-count{position:absolute;right:-4px;top:-6px;min-width:22px;height:22px;padding:0 5px;border-radius:11px;background:var(--coral);color:#fff;font:800 16px/22px var(--sans);text-align:center;box-shadow:0 2px 0 rgba(0,0,0,.2)}
.kk-count.zero{background:var(--plum-soft)}
.kk-fridgebtn.bump{animation:kkBump .45s cubic-bezier(.34,1.56,.64,1)}
.kk-shelf{padding:2px 10px 12px;max-height:min(62vh,460px);overflow:auto;overscroll-behavior:contain}
.kk-shelf-p{margin:2px 4px 6px;color:#FFF3DC;font:700 16px/1.3 var(--sans);text-shadow:0 1px 2px rgba(0,0,0,.4)}
.kk-items{display:grid;grid-template-columns:repeat(4,1fr);gap:6px 0;padding:4px 2px 6px}
.kk-item{position:relative;border:0;background:none;padding:2px 0 6px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:1px;-webkit-tap-highlight-color:transparent}
.kk-item::before{content:"";position:absolute;left:0;right:0;top:60px;height:9px;background:linear-gradient(#B4783F,#7A4A24);box-shadow:0 4px 5px -2px rgba(30,15,5,.55),inset 0 1px 0 rgba(255,220,170,.5)}
.kk-item img{position:relative;width:62px;height:62px;object-fit:contain;filter:drop-shadow(0 5px 3px rgba(40,20,10,.45));transition:transform .3s cubic-bezier(.34,1.56,.64,1),filter .3s}
.kk-item span{margin-top:9px;font:800 16px/1.1 var(--sans);color:#FFF8EE;text-shadow:0 1px 2px rgba(0,0,0,.6);text-align:center}
.kk-item[aria-pressed="true"] img{transform:translateY(-6px) scale(1.08);filter:drop-shadow(0 0 10px rgba(255,214,120,.95)) drop-shadow(0 8px 4px rgba(40,20,10,.4))}
.kk-item[aria-pressed="true"]::after{content:"";position:absolute;right:10%;top:2px;width:20px;height:20px;border-radius:50%;background:#5E9E45 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 6.5' stroke='white' stroke-width='2.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100%;box-shadow:0 2px 0 rgba(0,0,0,.25)}
.kk-item:active img{transform:scale(.9)}
.kk-stk{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.kk-sticker{border:0;border-radius:999px;padding:9px 13px;background:#FFFBF3;color:var(--plum);font:800 16px var(--sans);cursor:pointer;transform:rotate(-2deg);box-shadow:0 3px 0 rgba(90,55,30,.35)}
.kk-sticker:nth-child(2){transform:rotate(1.5deg)}
.kk-sticker[aria-pressed="true"]{background:var(--coral);color:#fff}
.kk-reset{border:0;background:none;color:#FFF3DC;font:800 16px var(--sans);text-decoration:underline;cursor:pointer;padding:8px}
.kk-snd{margin-left:auto;width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,251,243,.9);color:var(--plum);display:grid;place-items:center;cursor:pointer}
.kk-snd svg{width:22px;height:20px}
.kk-snd[aria-pressed="false"] .kk-wave{opacity:.2}
.kk-snd[aria-pressed="false"]{background:rgba(255,251,243,.6)}

/* ---------- the fridge drawer ---------- */
.kk-fridge{position:fixed;inset:0 0 0 auto;width:min(430px,100vw);z-index:60;transform:translateX(105%);transition:transform .45s cubic-bezier(.3,1.2,.5,1);box-shadow:-20px 0 40px rgba(40,25,50,.45)}
.kk-fridge.open{transform:none}
.kk-fridge-door{position:absolute;inset:0;overflow:auto;padding:22px 18px 40px 30px;background:url(/assets/kitchen/fridge.webp) 60% 22%/cover;overscroll-behavior:contain}
.kk-fridge h2{font-size:30px;margin:6px 0 14px;color:var(--plum)}
.kk-x{position:absolute;right:12px;top:12px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,251,243,.92);font-size:28px;line-height:1;color:var(--plum);cursor:pointer;z-index:3}
.kk-mags{display:flex;flex-wrap:wrap;gap:12px 10px;min-height:10px}
.kk-mag{position:relative;width:76px;border:0;background:none;padding:0;cursor:pointer;transform:rotate(var(--r,0deg));animation:kkStick .5s cubic-bezier(.34,1.56,.64,1) both}
@keyframes kkStick{from{transform:translateY(-30px) scale(1.2) rotate(var(--r));opacity:0}to{transform:rotate(var(--r))}}
.kk-mag img{width:76px;height:76px;border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:0 6px 10px -4px rgba(40,25,50,.5)}
.kk-mag::before{content:"";position:absolute;left:50%;top:-6px;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:var(--mag,#E8664A);box-shadow:inset -3px -3px 0 rgba(0,0,0,.15),0 2px 2px rgba(0,0,0,.25);z-index:2}
.kk-mag span{display:block;font:800 16px/1.15 var(--sans);text-align:center;margin-top:4px;color:var(--plum)}
.kk-mag .kk-rm{position:absolute;right:-4px;top:4px;width:22px;height:22px;border-radius:50%;background:var(--plum);color:#fff;font:800 16px/22px var(--sans);text-align:center}
.kk-empty{margin:4px 0 0;padding:12px 14px;border-radius:12px;background:rgba(255,251,243,.85);font-weight:700;font-size:16px;transform:rotate(-1deg)}
.kk-pad{position:relative;margin:20px 0 0;padding:16px 16px 14px 44px;background:#FFFDF6;border-radius:4px;box-shadow:0 10px 18px -8px rgba(40,25,50,.5);transform:rotate(.6deg);
  background-image:linear-gradient(90deg,transparent 32px,rgba(232,102,74,.45) 32px,rgba(232,102,74,.45) 34px,transparent 34px),repeating-linear-gradient(transparent 0 29px,rgba(124,198,232,.45) 29px 30px)}
.kk-pad::before{content:"";position:absolute;left:50%;top:-12px;width:28px;height:28px;margin-left:-14px;border-radius:50%;background:var(--gold);box-shadow:inset -4px -4px 0 rgba(0,0,0,.15),0 3px 3px rgba(0,0,0,.25)}
.kk-pad h3{font-family:var(--chalk);font-weight:400;font-size:26px;margin:0 0 4px}
.kk-aisle{font:800 16px/30px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--plum-soft);margin:0}
.kk-li{display:flex;align-items:center;gap:10px;min-height:30px;font:600 16px/1.2 var(--sans);cursor:pointer}
.kk-li input{width:20px;height:20px;accent-color:var(--leaf);flex:none}
.kk-li.got span{text-decoration:line-through;text-decoration-color:var(--coral);text-decoration-thickness:2px;opacity:.55}
.kk-li small{color:var(--plum-soft);font-weight:600}
.kk-allset{font:700 16px var(--sans);color:#3F7A2E;margin:6px 0 0}
.kk-fridge-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.kk-act{border:0;border-radius:999px;padding:10px 14px;background:rgba(255,251,243,.95);color:var(--plum);font:800 16px var(--sans);cursor:pointer;box-shadow:0 3px 0 rgba(58,46,63,.18)}
.kk-letter{position:relative;margin-top:22px;padding:18px 16px 14px;background:#FFF8EE;border-radius:10px;box-shadow:0 12px 20px -10px rgba(40,25,50,.55);transform:rotate(-.8deg);
  background-image:repeating-linear-gradient(135deg,#E8664A 0 10px,#FFF8EE 10px 20px,#7CC6E8 20px 30px,#FFF8EE 30px 40px);background-size:100% 7px;background-repeat:no-repeat}
.kk-letter-k{margin:6px 0 2px;font:800 16px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--coral-dark)}
.kk-letter h3{font-size:21px;margin:0 0 10px}
.kk-letter .row{display:flex;flex-direction:column;gap:8px}
.kk-letter input[type=email]{width:100%;min-height:48px;border-radius:14px;border:2px solid var(--line);padding:0 14px;font:600 16px var(--sans)}
.kk-letter .btn{width:100%}
.kk-scrim{position:fixed;inset:0;z-index:55;background:rgba(40,25,50,.38);opacity:0;pointer-events:none;transition:opacity .3s}
.kk-scrim.on{opacity:1;pointer-events:auto}

/* ---------- the recipe sheet ---------- */
.kk-sheet{position:fixed;left:0;right:0;bottom:0;z-index:70;max-width:560px;margin:0 auto;max-height:88vh;overflow:auto;background:#FFFBF3;border-radius:26px 26px 0 0;box-shadow:0 -20px 40px rgba(40,25,50,.4);
  transform:translateY(105%);transition:transform .42s cubic-bezier(.3,1.2,.5,1);padding:0 0 calc(20px + env(safe-area-inset-bottom));overscroll-behavior:contain}
.kk-sheet.open{transform:none}
.kk-sheet-ph{position:relative;height:min(46vh,340px);overflow:hidden;border-radius:26px 26px 0 0}
.kk-sheet-ph img{width:100%;height:100%;object-fit:cover}
.kk-sheet-in{padding:16px 20px 6px}
.kk-sheet h3{font-size:28px;margin:0 0 4px}
.kk-sheet .kk-sm{font:700 16px var(--sans);color:var(--plum-soft);margin:0 0 12px}
.kk-need{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;padding:0;list-style:none}
.kk-need li{padding:6px 11px;border-radius:999px;font:700 16px var(--sans);background:#F3EADB}
.kk-need li.have{background:#E2F0D9;color:#2F5F22}
.kk-need li.have::before{content:"\2713  "}
.kk-need li.miss{background:var(--coral-wash);color:var(--coral-dark)}
.kk-need button{border:0;background:none;font:inherit;color:inherit;cursor:pointer;padding:0;text-decoration:underline dotted}
.kk-sheet p{font-size:18px;margin:0 0 10px}
.kk-sheet .kk-swap{background:var(--gold-wash);border-radius:12px;padding:10px 12px;font-size:16px}
.kk-sheet .kk-week{display:inline-block;font-weight:800;color:var(--coral-dark);margin:2px 0 10px}
.kk-sheet-acts{display:flex;gap:8px;padding:6px 20px 4px}
.kk-sheet-acts .btn{flex:1}
.kk-sheet .kk-x{top:12px;right:12px}

/* ---------- Kite's "just pick for me" ---------- */
.kk-pick{position:fixed;inset:0;z-index:80;background:radial-gradient(circle at 50% 40%,rgba(80,60,110,.82),rgba(36,26,51,.94));display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;color:#fff}
.kk-pick-stage{position:relative;width:min(300px,78vw);height:min(380px,52vh)}
.kk-fridge-big{position:absolute;left:12%;right:12%;top:4%;bottom:6%;border-radius:22px 22px 10px 10px;perspective:900px;filter:drop-shadow(0 20px 26px rgba(0,0,0,.5))}
.kk-inside{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(#EAF6FF,#BFDDF2 60%,#94BEDD);box-shadow:inset 0 0 30px rgba(255,255,255,.9);
  background-image:linear-gradient(transparent 31%,#fff 31%,#fff 33%,transparent 33%,transparent 62%,#fff 62%,#fff 64%,transparent 64%),linear-gradient(#EAF6FF,#BFDDF2 60%,#94BEDD)}
.kk-door{position:absolute;inset:0;border-radius:inherit;background:url(/assets/kitchen/fridge.webp) 30% 40%/240% auto;transform-origin:100% 50%;transition:transform .55s cubic-bezier(.5,1.6,.5,1);box-shadow:inset 0 0 0 3px rgba(255,255,255,.4)}
.kk-pick.opened .kk-door{transform:rotateY(-112deg)}
.kk-diver{position:absolute;left:20%;bottom:2%;width:60%;height:auto;opacity:0;transform:translateY(20px)}
.kk-pick.opened .kk-diver{opacity:1;transform:none;transition:.25s .2s;animation:kkWiggle .32s ease-in-out .45s infinite alternate}
@keyframes kkWiggle{from{transform:rotate(-4deg)}to{transform:rotate(5deg) translateY(-3px)}}
.kk-tada{position:absolute;left:14%;bottom:0;width:72%;height:auto;opacity:0;transform:scale(.6) translateY(30px)}
.kk-pick.ta .kk-tada{opacity:1;transform:none;transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .2s}
.kk-pick.ta .kk-diver,.kk-pick.ta .kk-fridge-big{opacity:0;transition:opacity .25s}
.kk-plate{position:absolute;left:29.5%;width:28%;aspect-ratio:1;border-radius:50%;bottom:56.5%;background:#fff center/cover;opacity:0;box-shadow:0 0 0 5px #fff,0 6px 12px rgba(0,0,0,.35)}
.kk-pick.ta .kk-plate{opacity:1;animation:kkPlate .6s cubic-bezier(.34,1.56,.64,1) .15s both}
@keyframes kkPlate{from{transform:scale(0) rotate(-40deg)}to{transform:none}}
.kk-fly{position:absolute;inset:0;pointer-events:none}
.kk-fly img{position:absolute;left:44%;top:46%;width:64px;height:64px;object-fit:contain;animation:kkToss 1.05s cubic-bezier(.2,.6,.4,1) forwards}
@keyframes kkToss{0%{transform:translate(0,0) rotate(0) scale(.5);opacity:0}12%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(1.1);opacity:0}}
.kk-pick-res{text-align:center;max-width:340px;margin-top:6px}
.kk-pick-res h3{font-family:var(--chalk);font-weight:400;font-size:38px;line-height:1;color:#FFE3A6;margin:0}
.kk-pick-meta{font:700 16px/1.35 var(--sans);opacity:.92;margin:6px 0 12px}
.kk-pick-acts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.kk-pick .btn-outline{color:#fff;background:transparent;border:2px solid rgba(255,255,255,.75)}
.kk-pick .kk-x{position:absolute;right:14px;top:14px}

/* confetti canvas + print */
.kk .confetti{position:fixed;inset:0;pointer-events:none;z-index:90;width:100%;height:100%}
.kk-print{display:none}
@media print{body *{visibility:hidden}.kk-print,.kk-print *{visibility:visible}.kk-print{display:block;position:absolute;left:0;top:0;width:100%}}
.kk-print .pm-top{display:flex;justify-content:space-between;align-items:center}.kk-print h1{font-size:40px}.kk-print .pm-top img{height:56px}
.kk-print .pm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:12px}.kk-print .pm-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px}
.kk-print b{display:block;text-align:center;font:800 16px var(--sans);margin-top:4px}.kk-print .pm-foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-size:16px}.kk-print .pm-foot img{height:60px}

/* ---------- bigger screens ---------- */
@media (min-width:600px){.kk-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 18px}.kk-counter{padding:0 20px 30px}}
@media (min-width:760px){
  .kk-hero{aspect-ratio:1800/1017;max-width:1240px}
  .kk-board{left:var(--bl2,13.6%);width:var(--bw2,36.4%);top:var(--bt2,11.5%);height:var(--bh2,41.5%)}
  .kk-kick{font-size:max(16px,2.1cqw)}.kk-board h1{font-size:max(16px,3.3cqw)}.kk-big{font-size:max(16px,10.5cqw)}
  .kk-host{right:6%;bottom:var(--hb2,24.8%);width:17%}
  .kk-say{right:85%;bottom:60%;width:250px;font-size:16px}
  .kk-counter{margin-top:calc(min(100vw,1240px) * var(--ov2,-.112))}
  .kk-counter::before{inset:calc(min(100vw,1240px) * var(--ov2,-.112)) 0 0}
  .kk-motes{inset:0 0 30% 55%}
}
@media (min-width:1000px){.kk-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 24px}.kk-tag b{font-size:18px}.kk-meta{font-size:16px}}

/* ---------- calm version ---------- */
@media (prefers-reduced-motion:reduce){
  .kk-light,.kk-motes i,.kk-counter::before,.kk-peek,.kk-card,.kk-say,.kk-mag{animation:none!important}
  .kk-motes{display:none}.kk-diver{animation:none!important}
  .kk-tray,.kk-fridge,.kk-sheet,.kk-door{transition-duration:.01s}
}

/* ---------- shared roundup extras (dinners and beyond) ---------- */
.kk-swapline{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:4px;font:italic 600 16px/1.3 var(--sans);color:#5E5263}
.kk-card.folded{display:none}
.kk-more{grid-column:1/-1;justify-self:center;margin:6px 0 2px;border:0;border-radius:999px;padding:12px 18px;background:rgba(255,251,243,.95);color:var(--plum);font:800 16px var(--sans);cursor:pointer;box-shadow:0 4px 0 rgba(90,55,30,.3)}
.kk-near-why{display:block;font:700 16px/1.25 var(--sans);color:var(--plum-soft);margin-top:2px}
.kk-sheet .kk-tip{background:var(--sky-wash);border-radius:12px;padding:10px 12px;font:700 16px/1.35 var(--sans);color:#2D5F86;margin:0 0 10px}
/* the dinner board is smaller on the stove-wall painting */
.kk-easy-dinners-for-picky-eaters .kk-kick{font-size:max(16px,2.9cqw)}
.kk-easy-dinners-for-picky-eaters .kk-board h1{font-size:max(16px,4.2cqw)}
.kk-easy-dinners-for-picky-eaters .kk-big{font-size:max(16px,11.5cqw)}
@media (min-width:760px){.kk-easy-dinners-for-picky-eaters .kk-kick{font-size:max(16px,1.8cqw)}.kk-easy-dinners-for-picky-eaters .kk-board h1{font-size:max(16px,2.9cqw)}.kk-easy-dinners-for-picky-eaters .kk-big{font-size:max(16px,8.6cqw)}}