/* ==========================================================================
   Yaakay Bar & Canteen, RR Nagar — the influencer table-review page
   Layered on css/rsvp.css + css/rsvp-table.css (the CBD table review), in
   Yaakay's own "#2 is on the way" poster: royal blue, poster red, sunshine
   yellow and aged cream paper, cut into comic panels with starbursts. The
   lettering is chunky red with a blue drop, plus a red retro script.
   ========================================================================== */
body.yk{
  --night:#173A8C; --night-2:#12306F; --paper:#F3E6C6; --paper-2:#E7D3A4; --paper-3:#FBF4E2;
  --ink:#13285F; --muted:#4A5677; --red:#E2322A; --red-2:#B8231C; --mustard:#FFD21F;
  --green:#21804A; --line:rgba(19,40,95,.2);
  --yk-blue:#1D46A8; --yk-cream:#F6ECD3;
  --display:"Bungee", "Arial Black", Impact, sans-serif;
  --hand:"Lobster", "Brush Script MT", cursive;
  --type:"Archivo", "Inter", system-ui, sans-serif;
  background:
    repeating-conic-gradient(from 0deg at 50% 0%, rgba(255,210,31,.10) 0 4deg, transparent 4deg 12deg),
    radial-gradient(900px 640px at 85% 0%, rgba(226,50,42,.22), transparent 60%),
    radial-gradient(700px 520px at 0% 50%, rgba(255,210,31,.10), transparent 60%),
    var(--noise), var(--night);
  color:var(--paper-3)}
.yk .rv-bg{display:none}
.yk ::selection{background:var(--mustard);color:var(--ink)}

/* ------------------------------------------------- shared poster bits */
/* the poster's lettering: red, a cream keyline and a solid blue drop */
.yk-pop{color:var(--red);-webkit-text-stroke:0;
  text-shadow:2px 2px 0 var(--yk-cream), 4px 4px 0 var(--yk-blue), 5px 5px 0 var(--yk-blue), 6px 6px 0 var(--yk-blue), 7px 7px 0 var(--yk-blue)}
/* a comic panel: cream paper, a blue rule and a cream gutter */
.yk .rv-hero-copy,.yk .rv-deck,.yk .rv-pass,.yk .cbt-brief,.yk .cbt-faq details,.yk .cbt-steps li{
  background:var(--noise),radial-gradient(130% 100% at 50% 20%, var(--paper-3) 0%, var(--paper) 65%, var(--paper-2) 100%)}
.yk .rv-hero-copy{clip-path:none;border-radius:6px;box-shadow:0 0 0 6px var(--yk-cream), 0 0 0 9px var(--ink), 0 26px 44px -18px rgba(0,0,0,.7)}
.yk .rv-hero-copy::before{border:2px solid var(--red);inset:12px;border-radius:3px}
.yk .rv-deck{border-radius:6px;box-shadow:0 0 0 6px var(--yk-cream), 0 0 0 9px var(--ink), 0 26px 44px -18px rgba(0,0,0,.7)}

/* ---------------------------------------------------------- the sign */
.yk-sign{position:relative;z-index:3;max-width:760px;margin:22px auto 0;padding:0}
.yk-board{position:relative;display:flex;align-items:center;justify-content:center;gap:16px;padding:18px 20px 16px;border-radius:6px;
  background:var(--mustard);box-shadow:0 0 0 6px var(--yk-cream), 0 0 0 9px var(--ink), 0 22px 40px -18px rgba(0,0,0,.8);
  overflow:hidden}
/* starburst behind the word */
.yk-board::before{content:"";position:absolute;inset:-60%;z-index:0;
  background:repeating-conic-gradient(from 0deg at 50% 50%, rgba(226,50,42,.16) 0 7deg, transparent 7deg 18deg);
  animation:yk-spin 60s linear infinite}
.yk-board > *{position:relative;z-index:1}
.yk-mark{width:clamp(64px,16vw,96px);height:auto;border-radius:12px;box-shadow:0 0 0 3px var(--yk-cream), 0 0 0 5px var(--ink);transform:rotate(-4deg)}
.yk-word{margin:0;display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.yk-word span{font:400 clamp(2.6rem,12.5vw,5.2rem)/.9 var(--display);letter-spacing:.01em;text-transform:lowercase;
  color:var(--red);text-shadow:2px 2px 0 var(--yk-cream), 3px 3px 0 var(--yk-blue), 4px 4px 0 var(--yk-blue), 5px 5px 0 var(--yk-blue), 6px 6px 0 var(--yk-blue), 7px 7px 0 var(--yk-blue)}
.yk-word small{margin-top:10px;padding:5px 10px;border-radius:4px;background:var(--ink);color:var(--paper-3);
  font:800 clamp(.62rem,2.6vw,.82rem)/1 var(--sans);letter-spacing:.18em;text-transform:uppercase}
.yk-why{margin:18px 0 0;text-align:center;font:400 clamp(1.7rem,7.5vw,2.6rem)/1 var(--hand);color:var(--paper-3);
  text-shadow:2px 2px 0 var(--red), 3px 3px 0 var(--red-2), 0 6px 16px rgba(0,0,0,.4);transform:rotate(-3deg)}
.yk-why span{font-family:"Baloo Tamma 2", var(--hand);font-weight:800;color:var(--mustard);text-shadow:2px 2px 0 var(--red-2)}
/* filament bulbs on a wire, over the sign */
.yk-bulbs{position:absolute;left:6%;right:6%;top:-22px;height:40px;z-index:4;display:flex;justify-content:space-between;pointer-events:none}
.yk-bulbs::before{content:"";position:absolute;left:-4%;right:-4%;top:0;height:14px;border-bottom:2px solid rgba(19,40,95,.85);border-radius:0 0 50% 50%}
.yk-bulbs i{position:relative;top:10px;width:16px;height:22px;border-radius:50% 50% 45% 45%;background:radial-gradient(circle at 50% 40%,#FFF6C8 0 25%,#FFC93A 55%,#E59A12 100%);
  box-shadow:0 0 14px 4px rgba(255,201,58,.55);transform-origin:50% -10px;animation:yk-sway 3.6s ease-in-out infinite alternate}
.yk-bulbs i::before{content:"";position:absolute;left:4px;right:4px;top:-6px;height:7px;border-radius:2px;background:#3A3A3A}
.yk-bulbs i:nth-child(2){animation-delay:-1.1s}.yk-bulbs i:nth-child(3){animation-delay:-2.2s}
.yk-bulbs i:nth-child(4){animation-delay:-.6s}.yk-bulbs i:nth-child(5){animation-delay:-1.7s}
@keyframes yk-sway{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
@keyframes yk-spin{to{transform:rotate(360deg)}}
@keyframes yk-flicker{0%,92%,100%{opacity:1}94%{opacity:.55}96%{opacity:.9}}
.yk-bulbs i:nth-child(3){animation:yk-sway 3.6s ease-in-out -2.2s infinite alternate, yk-flicker 7s steps(1) infinite}

/* --------------------------------------------------------------- hero */
.yk .rv-hero{padding-top:30px}
.yk .rv-kicker{color:var(--ink)}
.yk .rv-kicker span+span{color:var(--red)}
.yk .rv-title{font-family:var(--display);line-height:.92;text-transform:uppercase}
.yk .rv-t1{color:var(--ink);font-size:clamp(2rem,11vw,5rem)}
.yk .rv-t2{color:var(--red);font-size:clamp(2.2rem,12vw,5.6rem);
  text-shadow:2px 2px 0 var(--yk-cream), 3px 3px 0 var(--yk-blue), 4px 4px 0 var(--yk-blue), 5px 5px 0 var(--yk-blue), 6px 6px 0 var(--yk-blue)}
.yk .rv-sub{font-family:var(--hand);color:var(--red);font-size:clamp(1.4rem,5.5vw,1.9rem)}
.yk .rv-lede b{color:var(--ink)}
.yk .cbt-facts li{background:var(--yk-blue);color:#fff;box-shadow:0 3px 0 var(--ink)}
.yk .rv-hosts{color:var(--muted)}

/* buttons: poster red with a blue drop */
.yk .rv-play,.yk .rv-btn{background:var(--red);color:#fff;border:2px solid var(--ink);
  box-shadow:0 4px 0 var(--ink), 0 12px 22px -10px rgba(19,40,95,.7)}
.yk .rv-play:active,.yk .rv-btn:active{box-shadow:0 1px 0 var(--ink)}
.yk .rv-btn--ghost{background:var(--paper-3);color:var(--ink)}

/* the canteen token (front) and the deal (back) */
.yk .cbt-front{border-color:var(--yk-cream);background:var(--noise),radial-gradient(120% 100% at 50% 20%, #FFF8E6 0%, var(--paper) 70%)}
.yk .cbt-front::before{border:3px solid var(--yk-blue)}
.yk .cbt-front::after{border-color:rgba(226,50,42,.45)}
.yk .cbt-front-k{color:var(--yk-blue)}
.yk-token-no{margin:6px 0 0;padding:4px 12px;border-radius:999px;background:var(--mustard);color:var(--ink);
  font:800 .74rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;box-shadow:0 2px 0 var(--ink)}
.yk .cbt-front-r{margin-top:10px;font-family:var(--display);color:var(--red);
  text-shadow:2px 2px 0 #fff, 4px 4px 0 var(--yk-blue)}
.yk .cbt-front-for{font-family:var(--hand);font-weight:400;color:var(--ink)}
.yk .cbt-front-for span{color:var(--red);border-bottom-color:var(--mustard)}
.yk-token-mark{width:84px;height:auto;margin:10px 0 4px;border-radius:10px;box-shadow:0 0 0 2px var(--ink)}
.yk .cbt-front-meta dd{font-family:var(--display);font-size:.78rem;color:var(--ink)}
.yk .rv-polaroid figcaption{font-family:var(--hand);color:var(--ink)}
.yk .rv-polaroid-back{background:var(--noise),var(--mustard)}
.yk .cbt-back-h{font-family:var(--display);color:var(--red);text-shadow:2px 2px 0 var(--yk-cream),3px 3px 0 var(--yk-blue)}
.yk .cbt-back li::before{content:"★";color:var(--red)}
.yk .rv-polaroid-back .rv-hand{color:var(--yk-blue);font-size:1.45rem}
.yk .rv-tape-strip{background:linear-gradient(90deg,rgba(255,210,31,.85),rgba(255,226,110,.9))}

/* --------------------------------------------------------- sections */
.yk .cbt-sec-h{color:var(--paper-3);text-shadow:3px 3px 0 var(--red), 5px 5px 0 rgba(0,0,0,.25)}
.yk .cbt-step-ico{background:var(--yk-blue);box-shadow:0 0 0 3px var(--mustard)}
.yk .cbt-steps li::after{color:rgba(226,50,42,.22);font-family:var(--display)}
.yk .cbt-steps b{font:400 1.05rem/1.2 var(--display);color:var(--ink)}
.yk .cbt-steps li{box-shadow:0 0 0 4px var(--yk-cream), 0 0 0 6px var(--ink), 0 18px 30px -18px rgba(0,0,0,.8)}

/* the place: three comic panels (the 80s, Sahakar Nagar → RR Nagar, where) */
.yk-story{max-width:1000px;margin:46px auto 0}
.yk-story-k{margin:0 0 8px;text-align:center;font:800 .72rem/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--mustard)}
.yk-story-grid{display:grid;gap:18px}
@media (min-width:820px){.yk-story-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
.yk-panel{position:relative;display:flex;flex-direction:column;gap:8px;padding:22px 18px 20px;border-radius:6px;overflow:hidden;color:var(--ink);
  box-shadow:0 0 0 5px var(--yk-cream), 0 0 0 8px var(--ink), 0 22px 36px -18px rgba(0,0,0,.8)}
.yk-panel::before{content:"";position:absolute;inset:-50%;z-index:0;pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 85% 10%, rgba(255,255,255,.14) 0 6deg, transparent 6deg 16deg)}
.yk-panel > *{position:relative;z-index:1}
.yk-panel--red{background:var(--noise),var(--red);color:#fff}
.yk-panel--yellow{background:var(--noise),var(--mustard)}
.yk-panel--blue{background:var(--noise),var(--paper-3)}
.yk-panel-ico{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:var(--ink);font-size:1.4rem;box-shadow:0 0 0 3px var(--yk-cream)}
.yk-panel h3{margin:4px 0 0;font:400 1.2rem/1.15 var(--display);text-transform:uppercase}
.yk-panel--red h3{text-shadow:2px 2px 0 var(--yk-blue)}
.yk-panel--yellow h3{color:var(--red);text-shadow:2px 2px 0 var(--yk-cream),3px 3px 0 var(--yk-blue)}
.yk-panel--blue h3{color:var(--yk-blue)}
.yk-panel p{margin:0;font-size:.96rem;line-height:1.55}
.yk-panel--red p{color:#FFF1EC}
.yk-panel .rv-btn{align-self:flex-start;margin-top:8px;min-height:46px;font-size:.92rem}
@media (max-width:760px){.yk .yk-story{order:2;margin-top:40px}}

/* the deal ticket: a yellow panel with a red stub */
.yk .rv-ticket-main{background:var(--noise),var(--mustard)}
.yk .rv-ticket-stub{background:var(--noise),var(--red);color:#fff;border-left-color:var(--ink)}
.yk .rv-ticket-main::after{box-shadow:inset 0 0 0 3px var(--mustard), inset 0 0 0 5px var(--ink)}
.yk .rv-stamp{border-color:var(--red);color:var(--red);background:var(--paper-3)}
.yk .rv-ticket dt{color:var(--yk-blue)}
.yk .cbt-small{color:var(--ink);opacity:.8}

/* what we ask: a red comic panel */
.yk .cbt-order{background:var(--noise),radial-gradient(120% 120% at 50% 0%, #EE4A3A, var(--red) 55%, var(--red-2));
  border:0;box-shadow:0 0 0 6px var(--yk-cream), 0 0 0 9px var(--ink), 0 26px 50px -24px rgba(0,0,0,.9);overflow:hidden}
.yk .cbt-order::before{inset:-40%;border:0;border-radius:0;
  background:repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,210,31,.18) 0 6deg, transparent 6deg 16deg)}
.yk .cbt-order > *{position:relative}
.yk .cbt-order-k{color:var(--mustard)}
.yk .cbt-order-h{font-family:var(--display);color:#fff;text-shadow:3px 3px 0 var(--yk-blue)}
.yk .cbt-order-list li{background:var(--paper-3);border:2px solid var(--ink);box-shadow:0 4px 0 var(--ink)}
.yk .cbt-order-list b{font:400 1.05rem/1.2 var(--display);color:var(--ink)}
.yk .cbt-order-list small{color:var(--muted)}
.yk .cbt-order-tag{border-color:var(--red);color:var(--red);background:#fff}
.yk .cbt-order-foot{font-family:var(--hand);color:#fff;font-weight:400;font-size:1.35rem}

/* the ticker: a yellow band with red stars */
.yk .rv-marquee{background:var(--mustard);border-block:3px solid var(--ink)}
.yk .rv-marquee span{font:400 .9rem/1 var(--display);color:var(--ink)}
.yk .rv-marquee span::after{color:var(--red)}

/* the pincode badge */
.yk-pinrow{transform:rotate(-3deg);opacity:1;filter:drop-shadow(0 16px 24px rgba(0,0,0,.45))}
.yk-pinrow:hover{opacity:1}

/* ------------------------------------------------------------- form */
.yk-form-k{margin:0 0 6px;text-align:center;font:800 .7rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--yk-blue)}
.yk .rv-h2{font-family:var(--display);color:var(--ink)}
.yk .rv-h2 em{color:var(--red);text-shadow:2px 2px 0 var(--yk-cream), 3px 3px 0 var(--yk-blue)}
.yk .rv-no{color:var(--red)}
.yk .rv-form legend{font-family:var(--display);font-size:1rem;color:var(--ink)}
.yk .rv-form input,.yk .rv-prefix{border-color:var(--ink)}
.yk .rv-tracks li{color:var(--muted)}
/* the cassette, in poster colours */
.yk .rv-cassette{background:linear-gradient(160deg,#2149AE,#122F75);box-shadow:inset 0 0 0 2px #0E255E, 0 14px 26px -14px rgba(0,0,0,.9)}
.yk .rv-cas-label{background:var(--mustard)}
.yk .rv-cas-side{background:var(--red);color:#fff}
.yk .rv-cas-title{font-family:var(--display);color:var(--ink)}
.yk .rv-cas-foot{background:#0E255E}
/* day cards and time chips */
.yk .cbt-dayb{border-color:var(--ink);background:#fff}
.yk .cbt-dayb b{font-family:var(--display);font-size:1.3rem}
.yk .cbt-dayb.is-weekend .cbt-dayb-w{color:var(--red)}
.yk .cbt-dayb.is-on{background:var(--red);border-color:var(--ink);box-shadow:0 4px 0 var(--ink)}
.yk .cbt-timeb{border-color:var(--ink);background:#fff;font-family:var(--sans);font-weight:700}
.yk .cbt-timeb.is-on{background:var(--yk-blue);color:#fff;box-shadow:0 3px 0 var(--ink)}
.yk .rv-choice input:checked + span{background:var(--yk-blue);color:#fff;border-color:var(--ink)}

/* --------------------------------------------------------- the pass */
.yk .rv-pass{box-shadow:0 0 0 6px var(--yk-cream), 0 0 0 9px var(--ink), 0 26px 44px -18px rgba(0,0,0,.8)}
.yk .rv-pass-kicker{color:var(--yk-blue)}
.yk .rv-pass-name{font-family:var(--display);color:var(--red);text-shadow:2px 2px 0 var(--yk-cream),3px 3px 0 var(--yk-blue)}
.yk .rv-pass-stamp{border-color:var(--red);color:var(--red)}
.yk .rv-done-note,.yk .rv-link{color:rgba(251,244,226,.85)}
.yk .cbt-brief-h{font-family:var(--display);color:var(--red)}
.yk .rv-gb-row.is-bullet::before{color:var(--red)}

/* -------------------------------------------------------- questions */
.yk .cbt-faq summary{font:700 1rem/1.3 var(--sans);color:var(--ink)}
.yk .cbt-faq summary::after{background:var(--yk-blue)}
.yk .cbt-faq details[open] summary::after{background:var(--red)}
.yk .cbt-faq details{box-shadow:0 0 0 3px var(--yk-cream), 0 0 0 5px var(--ink)}

/* ---------------------------------------------------------- footer */
.yk .rv-foot{color:rgba(251,244,226,.85)}
/* the logo in its own colours on the cream card (white on cream was invisible) */
.yk .rv-foot-logo{background:var(--paper-3);border:2px solid var(--ink);box-shadow:0 4px 0 var(--ink)}

/* ------------------------------------------------- the floating props */
.yk-prop{opacity:.6}
.yk-prop--ac,.yk-prop--fam{padding:6px 12px 5px;border-radius:4px;background:var(--paper-3);color:var(--yk-blue);border:2px solid var(--yk-blue);
  font:400 .95rem/1 var(--display);text-align:center;box-shadow:0 8px 18px -10px rgba(0,0,0,.8)}
.yk-prop--ac small,.yk-prop--fam small{display:block;margin-top:3px;font:800 .5rem/1 var(--sans);letter-spacing:.24em;color:var(--red)}
.yk-prop--ac{top:8%;left:-6px;--r:-8deg}
.yk-prop--fam{top:46%;right:-10px;--r:7deg;animation-delay:-4s}
.yk-prop--kn{top:30%;left:3%;font:800 2.6rem/1 "Baloo Tamma 2", var(--hand);color:var(--mustard);text-shadow:3px 3px 0 var(--red);--r:-10deg;animation-delay:-2s}
.yk-prop--glass{top:64%;left:2%;width:56px;--r:-12deg;animation-delay:-5s}
.yk-prop--tumbler{top:18%;right:4%;width:46px;--r:10deg;animation-delay:-3s}
.yk-prop--stamp{top:80%;right:3%;padding:8px 12px;border:2px dashed var(--mustard);border-radius:6px;color:var(--mustard);
  font:800 .62rem/1.3 var(--sans);letter-spacing:.14em;text-align:center;--r:-6deg;animation-delay:-7s}
.yk-prop--stamp b{display:block;font:400 1.2rem/1.1 var(--display);letter-spacing:.04em}
.yk-prop--stamp small{display:block;font-size:.5rem}
@media (max-width:640px){.yk-prop{opacity:.28}.yk-prop--kn{font-size:1.9rem}}

/* ======================= more to play with (2 Nov 2026, js/rsvp-yaakay.js) */

/* the countdown under the sign */
.yk-count{display:table;margin:14px auto 0;padding:8px 16px;border-radius:999px;background:var(--red);color:#fff;
  font:800 .9rem/1.2 var(--sans);letter-spacing:.02em;box-shadow:0 0 0 3px var(--yk-cream), 0 0 0 5px var(--ink), 0 10px 18px -8px rgba(0,0,0,.6);
  transform:rotate(-1.5deg)}
.yk-count b{color:var(--mustard);white-space:nowrap}
@media (max-width:400px){.yk-count{font-size:.82rem;padding:8px 13px}}
.yk-count.is-soon{animation:yk-pulse 1.6s ease-in-out infinite}
@keyframes yk-pulse{50%{transform:rotate(-1.5deg) scale(1.05)}}

/* creators we'd love: two big badges */
.yk-who{max-width:860px;margin:46px auto 0}
.yk-who-grid{display:grid;gap:18px}
@media (min-width:700px){.yk-who-grid{grid-template-columns:1fr 1fr}}
.yk-badge{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 18px 20px;border-radius:50% 50% 10px 10px / 18% 18% 10px 10px;
  text-align:center;color:var(--ink);box-shadow:0 0 0 5px var(--yk-cream), 0 0 0 8px var(--ink), 0 22px 36px -18px rgba(0,0,0,.8);
  transition:transform .25s ease}
.yk-badge:hover{transform:rotate(-1.5deg) translateY(-4px)}
.yk-badge--kn{background:var(--noise),var(--mustard)}
.yk-badge--near{background:var(--noise),var(--paper-3)}
.yk-badge--all{background:var(--noise),var(--yk-cream,var(--paper-2))}
@media (min-width:700px){.yk-badge--all{grid-column:1/-1;border-radius:24px}}
.yk-badge-big{font:800 2.6rem/1 "Baloo Tamma 2", var(--display);color:var(--red);text-shadow:2px 2px 0 var(--yk-cream),3px 3px 0 var(--yk-blue)}
.yk-badge b{font:400 1.15rem/1.15 var(--display);text-transform:uppercase}
.yk-badge small{font-size:.92rem;line-height:1.45;color:var(--muted)}

/* your table for 2: tap to serve */
.yk-tray-wrap{max-width:720px;margin:46px auto 0;text-align:center}
.yk-tray-hint{margin:-6px 0 16px;color:var(--paper-3);font-size:.98rem}
.yk-tray-hint b{color:var(--mustard)}
.yk-tray{position:relative;padding:20px 16px 16px;border-radius:999px/60px;background:radial-gradient(120% 120% at 50% 20%, #D9DEE3, #AEB5BC 70%, #8C949B);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.7), inset 0 -4px 0 rgba(0,0,0,.18), 0 0 0 5px var(--yk-cream), 0 0 0 8px var(--ink), 0 24px 40px -18px rgba(0,0,0,.85)}
.yk-tray-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:0 0 10px}
.yk-tray-lab{flex:0 0 100%;margin:0;font:800 .66rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink)}
@media (min-width:560px){.yk-tray-row{flex-wrap:nowrap}.yk-tray-lab{flex:0 0 96px;text-align:right;margin-right:6px}}
.yk-item{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;border:2px dashed rgba(19,40,95,.45);background:rgba(255,255,255,.35);
  font-size:1.7rem;line-height:1;cursor:pointer;filter:grayscale(1) opacity(.45);transition:transform .2s ease, filter .2s ease, background .2s ease}
.yk-item:hover{transform:translateY(-2px)}
.yk-item.is-served{filter:none;border:2px solid var(--ink);background:#fff;box-shadow:0 3px 0 var(--ink);animation:yk-serve .45s cubic-bezier(.2,1.6,.4,1)}
.yk-item:focus-visible{outline:3px solid var(--mustard);outline-offset:2px}
@keyframes yk-serve{0%{transform:translateY(-26px) scale(.6) rotate(-20deg)}100%{transform:none}}
.yk-tray-meter{height:10px;margin:8px auto 6px;max-width:320px;border-radius:999px;background:rgba(19,40,95,.18);overflow:hidden}
.yk-tray-meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--mustard),var(--red));transition:width .3s ease}
.yk-tray-count{margin:0;font:800 .85rem/1.2 var(--sans);color:var(--ink)}
.yk-cheers{position:relative;margin:18px auto 0;padding:16px 18px;max-width:440px;border-radius:12px;background:var(--noise),var(--mustard);color:var(--ink);
  box-shadow:0 0 0 4px var(--yk-cream), 0 0 0 6px var(--ink);animation:cbtPop .3s ease-out}
.yk-cheers p{margin:6px 0 0;font-weight:700}
.yk-cheers p b{font:800 1.4rem/1 "Baloo Tamma 2", var(--display);color:var(--red)}
.yk-cheers a{color:var(--red-2);font-weight:800}
.yk-mug{display:inline-block;font-size:2.6rem;line-height:1}
.yk-mug--l{animation:yk-clink-l .9s ease-out}
.yk-mug--r{animation:yk-clink-r .9s ease-out}
@keyframes yk-clink-l{0%{transform:translateX(-40px) rotate(-10deg)}55%{transform:translateX(6px) rotate(14deg)}100%{transform:rotate(6deg)}}
@keyframes yk-clink-r{0%{transform:translateX(40px) scaleX(-1) rotate(-10deg)}55%{transform:translateX(-6px) scaleX(-1) rotate(14deg)}100%{transform:scaleX(-1) rotate(6deg)}}

/* the offer: the reel's hook, in a starburst panel */
.yk-offer{position:relative;max-width:760px;margin:46px auto 0;padding:30px 20px 24px;border-radius:6px;overflow:hidden;text-align:center;color:var(--ink);
  background:var(--noise),var(--mustard);box-shadow:0 0 0 6px var(--yk-cream), 0 0 0 9px var(--ink), 0 26px 44px -18px rgba(0,0,0,.8)}
.yk-offer::before{content:"";position:absolute;inset:-60%;z-index:0;pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 50% 50%, rgba(226,50,42,.2) 0 7deg, transparent 7deg 18deg);animation:yk-spin 50s linear infinite}
.yk-offer > *{position:relative;z-index:1}
.yk-offer-burst{position:absolute!important;right:-6px;top:-6px;display:grid;place-items:center;align-content:center;width:112px;height:112px;
  background:var(--red);color:#fff;transform:rotate(12deg);
  clip-path:polygon(50% 0,61% 18%,82% 10%,80% 32%,100% 38%,86% 54%,98% 74%,76% 76%,70% 98%,52% 84%,34% 100%,28% 78%,6% 78%,16% 58%,0 40%,20% 32%,16% 10%,38% 18%)}
.yk-offer-burst b{font:400 1.45rem/1 var(--display)}
.yk-offer-burst span{font:800 .8rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase}
.yk-offer-k{margin:0 0 8px;font:800 .72rem/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--red-2)}
.yk-offer-h{margin:0 auto;max-width:560px;font:400 clamp(1.5rem,6.4vw,2.4rem)/1.08 var(--display);text-transform:uppercase;color:var(--ink)}
.yk-offer-h span{white-space:nowrap;color:var(--red);text-shadow:2px 2px 0 var(--yk-cream),3px 3px 0 var(--yk-blue)}
.yk-offer-cta{margin:14px 0 0;font:400 clamp(1.4rem,5.6vw,1.9rem)/1.1 var(--hand);color:var(--yk-blue)}
.yk-offer-note{margin:10px 0 0;font-size:.88rem;color:var(--ink);opacity:.8}
@media (max-width:560px){.yk-offer{padding-top:84px}.yk-offer-burst{right:50%;margin-right:-56px;top:-14px;transform:rotate(-8deg) scale(.82)}}
.yk-hook--offer{grid-column:1/-1;background:var(--red)}
.yk-hook--offer.is-en{background:var(--yk-blue)}
@media (max-width:760px){.yk .yk-offer{order:3;margin-top:40px}}

/* talk points, hooks and the collab handles */
.yk-talk{max-width:760px;margin:46px auto 0;padding:26px 18px 22px;border-radius:6px;color:var(--ink);
  background:var(--noise),radial-gradient(130% 100% at 50% 20%, var(--paper-3) 0%, var(--paper) 65%, var(--paper-2) 100%);
  box-shadow:0 0 0 6px var(--yk-cream), 0 0 0 9px var(--ink), 0 26px 44px -18px rgba(0,0,0,.7)}
.yk-talk .cbt-sec-h{color:var(--red);text-shadow:2px 2px 0 var(--yk-cream),4px 4px 0 var(--yk-blue)}
.yk-talk-sub{margin:-6px 0 16px;text-align:center;color:var(--muted);font-size:.95rem}
.yk-points{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px}
.yk-points li{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:start;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.55);
  border:1px dashed rgba(19,40,95,.3);font-size:.95rem;line-height:1.45}
.yk-points li span{grid-row:span 2;font-size:1.4rem}
.yk-points li b{color:var(--ink)}
.yk-hooks{display:grid;gap:10px;margin:0 0 20px}
@media (min-width:640px){.yk-hooks{grid-template-columns:1fr 1fr}}
.yk-hook{position:relative;min-height:84px;padding:14px 14px 22px;border:2px solid var(--ink);border-radius:14px;background:var(--yk-blue);color:#fff;
  font:700 1rem/1.35 var(--sans);text-align:left;cursor:pointer;box-shadow:0 4px 0 var(--ink);transition:transform .15s ease, background .2s ease}
.yk-hook::after{content:"Tap: English · copy";position:absolute;right:10px;bottom:6px;font:800 .58rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mustard)}
.yk-hook:hover{transform:translateY(-2px) rotate(-.5deg)}
.yk-hook.is-en{background:var(--red)}
.yk-hook.is-en::after{content:"Copied ✓ · tap again for Kannada"}
.yk-hook:focus-visible{outline:3px solid var(--mustard);outline-offset:3px}
.yk-collab{padding-top:16px;border-top:2px dashed rgba(19,40,95,.3);text-align:center}
.yk-collab-h{margin:0 0 10px;font:800 .72rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--red)}
.yk-collab-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.yk-handle{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:6px 16px 6px 6px;border:2px solid var(--ink);border-radius:999px;background:#fff;
  color:var(--ink);font:800 1rem/1 var(--sans);cursor:pointer;box-shadow:0 3px 0 var(--ink);transition:transform .15s ease}
.yk-handle:hover{transform:translateY(-2px)}
.yk-handle.is-copied{background:var(--mustard)}
.yk-handle-av{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 2px var(--ink)}
.yk-handle-av img{width:100%;height:100%}
.yk-handle-av--gv{background:var(--ink);color:#fff;font:400 .85rem/1 var(--display)}
.yk-handle-av--ap{background:var(--mustard);color:var(--ink);font:400 .85rem/1 var(--display)}
.yk-copyall{margin-top:14px}
.yk-collab-note{margin:10px 0 0;font-size:.88rem;color:var(--muted)}

/* confetti: stars and bottle caps, when a request goes in */
.yk-confetti{position:fixed;inset:0;z-index:50;pointer-events:none;overflow:hidden}
.yk-confetti i{position:absolute;top:-30px;font-style:normal;font-size:var(--s,22px);animation:yk-fall var(--t,2.4s) cubic-bezier(.3,.6,.4,1) forwards}
@keyframes yk-fall{to{transform:translate(var(--x,0),110vh) rotate(var(--r,360deg))}}

@media (max-width:760px){
  .yk .yk-who{order:2;margin-top:40px}
  .yk .yk-tray-wrap{order:2;margin-top:40px}
  .yk .yk-talk{order:3;margin-top:40px}
  .yk-item{width:48px;height:48px;font-size:1.5rem}
}
@media (prefers-reduced-motion:reduce){
  .yk-item.is-served,.yk-mug,.yk-count.is-soon{animation:none}
}

/* phones: the sign stays first, then the page runs as in rsvp-table.css */
@media (max-width:760px){
  .yk .yk-sign{order:-2;margin-top:26px}
  .yk-board{gap:12px;padding:16px 14px 14px}
  .yk-why{margin-top:14px}
}
@media (prefers-reduced-motion:reduce){
  .yk-board::before,.yk-bulbs i{animation:none}
}

/* ============== mobile first: the booking comes early, labels readable (2 Nov) */
/* Phones run the page as one column (main is a flex column in rsvp.css).
   With the new sections the form had sunk ~9 screens down; now it's:
   sign → invite → what you get → the form → the offer → everything else. */
@media (max-width:760px){
  .yk .yk-sign{order:-2}
  .yk .rv-hero-copy{order:1}
  .yk .rv-ticket{order:2;margin-top:24px}
  .yk .rv-deck,.yk .rv-done{order:3;margin-top:28px}
  .yk .yk-offer{order:4;margin-top:40px}
  .yk .yk-who{order:5}
  .yk .cbt-how{order:6}
  .yk .yk-tray-wrap{order:7}
  .yk .yk-story{order:8}
  .yk .cbt-order{order:9}
  .yk .yk-talk{order:10}
  .yk .rv-marquee{order:11}
  .yk .rv-pinrow{order:12}
  .yk .rv-polaroid{order:13}
  .yk .cbt-faq{order:14}
  .yk .rv-foot{order:15}
  /* the hero's own "Book my table" now lands a screen below, not nine */
  .yk .rv-hero-copy .rv-play{display:inline-flex}
  /* small caps labels: nothing under 11-12px on a phone */
  .yk-word small{font-size:.7rem;letter-spacing:.1em;white-space:nowrap}
  .yk-form-k{letter-spacing:.12em!important}
  .yk-board{gap:10px}
  .yk .cbt-front-k{font-size:.74rem}
  .yk .cbt-front-meta dt{font-size:.66rem}
  .yk-tray-lab{font-size:.74rem}
  .yk .rv-ticket dt{font-size:.74rem}
  .yk .rv-ticket-stub span{font-size:.78rem}
  .yk-story-k,.yk-offer-k,.yk-collab-h,.yk-form-k,.yk .cbt-order-k{font-size:.76rem}
  .yk .cbt-order-tag{font-size:.72rem}
  /* thumb room: the talk-point list and hooks a touch tighter */
  .yk-talk{padding:22px 14px 18px}
  .yk-points li{padding:9px 10px;font-size:.92rem}
  .yk-hook{min-height:72px;font-size:.96rem}
}


/* ------------------------------------- WhatsApp me (any question) */
/* WhatsApp green with dark text (white on #25D366 is too faint), in the poster's ink outline */
.yk-wa,.yk-wa-float{display:inline-flex;align-items:center;gap:8px;background:#25D366;color:#06301A;font-family:var(--type);font-weight:800;
  text-decoration:none;border:2px solid var(--ink);border-radius:999px;box-shadow:0 4px 0 var(--ink)}
.yk-wa{min-height:52px;padding:10px 22px;font-size:1rem}
.yk-wa:hover,.yk-wa-float:hover{background:#3BE07A}
.yk-wa:focus-visible,.yk-wa-float:focus-visible{outline:3px solid var(--mustard);outline-offset:3px}
.yk-wa-ask{margin-top:18px;text-align:center}
.yk-wa-ask p{margin:0 0 10px;color:var(--paper-3);font-weight:700}
.yk-wa-float{position:fixed;z-index:60;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));
  min-height:48px;padding:10px 18px 10px 14px;font-size:.95rem;box-shadow:0 4px 0 var(--ink),0 12px 26px -10px rgba(0,0,0,.6);
  transition:transform .25s ease,opacity .25s ease}
.yk-wa-float.is-away{opacity:0;transform:translateY(140%);pointer-events:none}
@media (prefers-reduced-motion:reduce){.yk-wa-float{transition:none}}
/* room under the footer so the floating button never covers its last line */
.yk .rv-foot{padding-bottom:80px}

/* ------------------------------ special day: 5 Nov, 3–6 PM only */
.yk .cbt-dayb{position:relative}
.yk .cbt-dayb.is-special{background:var(--mustard);box-shadow:0 3px 0 var(--ink)}
.yk .cbt-dayb.is-special.is-on{background:var(--red);box-shadow:0 4px 0 var(--ink)}
.yk .cbt-dayb-star{position:absolute;top:-9px;right:-7px;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;
  background:var(--red);color:var(--mustard);border:2px solid var(--ink);font-size:.72rem;line-height:1}
.yk .cbt-dayb.is-special.is-on .cbt-dayb-star{background:var(--mustard);color:var(--red)}
.yk .cbt-days{padding-top:10px}
.yk .cbt-timeb-special{grid-column:1/-1;background:var(--mustard)}
.yk .cbt-timeb-special.is-on{background:var(--red);color:#fff}
.yk-special-note{margin:0 0 12px;padding:10px 12px;border:2px dashed var(--ink);border-radius:10px;background:rgba(255,210,31,.35);
  color:var(--ink);font-size:.92rem;line-height:1.4}
.yk-special-note span{display:block;color:var(--muted)}
.yk .cbt-facts .yk-fact-special{background:var(--mustard);color:var(--ink)}
.yk-panel .yk-metro{margin:10px 0 14px;padding:8px 12px;border:2px solid var(--ink);border-radius:10px;background:var(--mustard);font-size:.92rem;line-height:1.4}
/* Santhoshakke: bottom-left, so it never sits on the WhatsApp button */
.yk .yk-music,.yk-music{right:auto;left:max(14px,env(safe-area-inset-left));border:2px solid var(--ink);background:var(--mustard);color:var(--ink);
  font-family:var(--type);font-weight:800;box-shadow:0 4px 0 var(--ink),0 12px 26px -10px rgba(0,0,0,.6);-webkit-backdrop-filter:none;backdrop-filter:none}
.yk-music .rv-music-eq i{background:var(--red)}
.yk-music.is-waiting{animation:yk-nudge 1.6s ease-in-out infinite}
@keyframes yk-nudge{0%,100%{transform:none}50%{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.yk-music.is-waiting{animation:none}}
/* how it works, four steps: 2 x 2, then one row on a wide screen */
@media (min-width:700px){.yk .cbt-steps.yk-steps4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.yk .cbt-steps.yk-steps4{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* send your reel for approval */
.yk-approve{position:relative;max-width:860px;margin:40px auto 0;padding:24px 20px 22px;display:grid;gap:14px;justify-items:start;
  background:var(--noise),var(--yk-cream);color:var(--ink);border:3px solid var(--ink);border-radius:18px;box-shadow:0 6px 0 var(--ink)}
.yk-approve-ico{position:absolute;top:-22px;right:18px;display:grid;place-items:center;width:48px;height:48px;font-size:1.5rem;
  background:var(--mustard);border:3px solid var(--ink);border-radius:50%;transform:rotate(8deg)}
.yk-approve-k{margin:0;color:var(--red);font:800 .74rem/1 var(--type);letter-spacing:.16em;text-transform:uppercase}
.yk-approve-h{margin:6px 0 8px;font:400 clamp(1.35rem,4.6vw,1.8rem)/1.1 var(--display);text-transform:uppercase}
.yk-approve-txt p:last-child{margin:0;color:var(--muted);line-height:1.5}
.yk-approve-btn{min-height:52px;padding:10px 22px;font-size:1rem}
.yk-approve-btn--brief{margin-top:14px}
@media (min-width:700px){.yk-approve{grid-template-columns:1fr auto;align-items:center;padding:26px 28px}}