/* Burger & Pickle — brand tokens straight from brand/palette.svg */
:root{
  --dill:#1F5C3A; --dill-deep:#133D26; --brine:#C8E64A; --brine-soft:#E6F4A6;
  --court:#2F6FB5; --court-deep:#1E4F86; --mustard:#F2B233; --ketchup:#E0492F;
  --bun:#E9A55B; --paper:#FFF7E8; --paper-2:#F6EAD2; --char:#1B1A17; --char-soft:#4A463E;
  --line:rgba(27,26,23,.14);
  --display:"Bagel Fat One","Arial Rounded MT Bold","Trebuchet MS",sans-serif;
  --sans:"Outfit","Avenir Next","Segoe UI",system-ui,sans-serif;
  --radius:22px; --gutter:clamp(18px,4vw,48px);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--char);font:400 17.5px/1.6 var(--sans);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--court);outline-offset:3px}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:var(--gutter)}
.display{font-family:var(--display);font-weight:400;line-height:.95;letter-spacing:.005em}
.eyebrow{font:700 13px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--court-deep)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:999px;border:0;font:700 16px/1 var(--sans);text-decoration:none;transition:transform .2s cubic-bezier(.3,1.6,.5,1),box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-3px) rotate(-1deg)}
.btn-lime{background:var(--brine);color:var(--char);box-shadow:0 5px 0 #8FAE1F}
.btn-lime:hover{box-shadow:0 8px 0 #8FAE1F}
.btn-dill{background:var(--dill);color:var(--paper);box-shadow:0 5px 0 var(--dill-deep)}
.btn-dill:hover{box-shadow:0 8px 0 var(--dill-deep)}
.btn-line{background:transparent;color:var(--char);box-shadow:inset 0 0 0 2.5px var(--char)}
.btn-line:hover{background:var(--char);color:var(--paper)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,247,232,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:26px;min-height:74px}
.nav .brand{display:block;width:230px;margin-right:auto}
.nav .links{display:flex;gap:24px}
.nav .links a{font-weight:700;font-size:15px;text-decoration:none;padding:6px 0;background:linear-gradient(var(--brine),var(--brine)) 0 88%/0 38% no-repeat;transition:background-size .25s}
.nav .links a:hover{background-size:100% 38%}
.nav .btn{padding:12px 18px;font-size:15px}
.nav-toggle{display:none;width:46px;height:46px;border-radius:14px;border:2px solid var(--char);background:transparent}
.nav-toggle svg{margin:auto}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding-block:clamp(40px,6vw,80px) clamp(70px,9vw,120px)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center;position:relative;z-index:2}
.hero h1{font-size:clamp(48px,5.4vw,84px);color:var(--dill);text-wrap:balance}
.hero h1 .amp{color:var(--mustard)}
.hero h1 .ball{display:inline-block;width:.78em;height:.78em;vertical-align:-.05em;margin-left:.04em}
.hero .lede{font-size:clamp(18px,1.6vw,22px);max-width:34ch;margin:24px 0 30px;color:var(--char-soft)}
.hero .lede b{color:var(--char)}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.coming{display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;padding:8px 14px 8px 8px;border-radius:999px;background:var(--char);color:var(--paper);font-weight:700;font-size:14px}
.coming i{width:26px;height:26px;border-radius:50%;background:var(--brine);display:grid;place-items:center;font-style:normal;color:var(--char);font-size:13px}
.hero-photo{position:relative;border-radius:34px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(27,26,23,.55);transform:rotate(1.5deg);background:var(--court)}
.hero-photo img{width:100%;aspect-ratio:4/3.4;object-fit:cover}
.hero-photo figcaption,.concept{position:absolute;left:14px;bottom:14px;padding:6px 11px;border-radius:999px;background:rgba(27,26,23,.72);color:#fff;font-size:12px;font-weight:600;letter-spacing:.02em}
.spin-badge{position:absolute;right:-30px;top:-34px;width:150px;height:150px;z-index:3;filter:drop-shadow(0 10px 18px rgba(0,0,0,.25))}
.motion-ok .spin-badge .ring{animation:spin 18s linear infinite;transform-origin:50% 50%}
@keyframes spin{to{transform:rotate(360deg)}}
#rally{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.serve-hint{margin-top:18px;font-size:14px;color:var(--char-soft);display:flex;align-items:center;gap:8px}
.serve-hint kbd{font:700 12px var(--sans);padding:3px 8px;border-radius:7px;background:var(--brine);color:var(--char)}

/* ---------- court-line divider ---------- */
.courtline{height:34px;background:var(--court);position:relative}
.courtline::before{content:"";position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;background:#fff;opacity:.9}
.courtline::after{content:"THE KITCHEN LINE";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:2px 12px;background:var(--court);color:#fff;font:700 11px/1 var(--sans);letter-spacing:.24em}

/* ---------- three ways ---------- */
.sec{padding-block:clamp(70px,9vw,120px)}
.sec-head{max-width:760px;margin-bottom:clamp(34px,5vw,56px)}
.sec-head h2{font-size:clamp(40px,5.4vw,76px);color:var(--dill);margin:12px 0 16px}
.sec-head p{font-size:19px;color:var(--char-soft)}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.way{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--char);color:var(--paper);min-height:460px;display:flex;flex-direction:column;justify-content:flex-end;text-decoration:none;transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.way img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;transition:transform .8s ease}
.way::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(27,26,23,0) 30%,rgba(27,26,23,.88) 100%)}
.way:hover{transform:translateY(-8px) rotate(-.6deg)}
.way:hover img{transform:scale(1.06)}
.way .txt{position:relative;z-index:1;padding:26px}
.way .tag{display:inline-block;padding:6px 12px;border-radius:999px;font:700 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}
.way:nth-child(1) .tag{background:var(--mustard);color:var(--char)}
.way:nth-child(2) .tag{background:var(--brine);color:var(--char)}
.way:nth-child(3) .tag{background:var(--court);color:#fff}
.way h3{font:400 38px/1 var(--display);margin-bottom:10px}
.way p{color:rgba(255,247,232,.88)}

/* ---------- the kitchen (menu) ---------- */
.kitchen{background:var(--dill);color:var(--paper);position:relative;overflow:hidden;overflow:clip}
.kitchen .sec-head h2{color:var(--brine)}
.kitchen .sec-head p,.kitchen .eyebrow{color:var(--brine-soft)}
.kitchen-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(30px,5vw,70px);align-items:start}
.stack-stage{position:sticky;top:110px;height:min(560px,70vh);display:grid;place-items:center}
.stack{position:relative;width:min(420px,90%);height:100%}
.layer{position:absolute;left:50%;transform:translate(-50%,-260px) rotate(var(--r,0deg));opacity:0;transition:transform .7s cubic-bezier(.3,1.5,.5,1),opacity .35s}
.layer.in{transform:translate(-50%,0) rotate(var(--r,0deg));opacity:1}
.stack-label{position:absolute;left:0;right:0;bottom:0;text-align:center;font:700 14px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--brine)}
.menu-list{display:grid;gap:14px}
.item{display:grid;grid-template-columns:1fr auto;gap:4px 18px;padding:20px 22px;border-radius:18px;background:rgba(255,247,232,.06);border:1px solid rgba(255,247,232,.12);transition:background .25s,transform .25s}
.item:hover{background:rgba(200,230,74,.12);transform:translateX(6px)}
.item h3{font:400 26px/1.05 var(--display);color:var(--paper)}
.item .price{font:700 20px var(--sans);color:var(--mustard)}
.item p{grid-column:1/-1;color:rgba(255,247,232,.8);font-size:16px}
.item .pun{grid-column:1/-1;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brine)}
.menu-sides{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.menu-sides span{padding:9px 14px;border-radius:999px;background:var(--paper);color:var(--dill);font-weight:700;font-size:15px}
.price-note{margin-top:18px;font-size:14px;color:var(--brine-soft)}

/* ---------- courts ---------- */
.courts{background:var(--court);color:#fff;position:relative;overflow:hidden}
.courts .sec-head h2{color:#fff}
.courts .sec-head p,.courts .eyebrow{color:#DCE8F7}
.court-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
.court-svg{width:100%;height:auto;filter:drop-shadow(0 24px 40px rgba(0,0,0,.3))}
.court-svg .kz{transition:fill .3s}
.court-svg:hover .kz{fill:rgba(200,230,74,.55)}
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:30px}
.plan{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:20px}
.plan b{display:block;font:400 24px/1.1 var(--display);margin-bottom:6px}
.plan span{display:block;font-size:15px;color:#DCE8F7}
.plan em{display:block;font-style:normal;font-weight:700;color:var(--brine);margin-top:8px}
.courts .photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:clamp(40px,6vw,70px)}
.shot{position:relative;border-radius:var(--radius);overflow:hidden}
.shot img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2}

/* ---------- yard: tappable mini-scenes ---------- */
.yard-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start}
@media (min-width:901px){.yard-grid>.shot{position:sticky;top:104px}}
.games{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:26px}
.game{position:relative;display:grid;align-content:start;gap:9px;padding:8px 8px 12px;border:0;border-radius:18px;background:var(--paper-2);color:var(--char);text-align:left;box-shadow:0 5px 0 rgba(27,26,23,.16);transition:translate .25s cubic-bezier(.3,1.6,.5,1),rotate .25s cubic-bezier(.3,1.6,.5,1),box-shadow .2s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.motion-ok .game.rv{transition:opacity .8s ease,transform .8s cubic-bezier(.2,.9,.3,1.2),translate .25s cubic-bezier(.3,1.6,.5,1),rotate .25s cubic-bezier(.3,1.6,.5,1),box-shadow .2s;transition-delay:var(--d,0s),var(--d,0s),0s,0s,0s}
.game:hover{translate:0 -4px;rotate:-1deg;box-shadow:0 9px 0 rgba(27,26,23,.16)}
.game:active{translate:0 3px;rotate:0deg;box-shadow:0 2px 0 rgba(27,26,23,.16)}
.game:focus-visible{outline:3px solid var(--court);outline-offset:3px}
.game-stage{position:relative;display:block;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:var(--bg,#FCE3B0)}
.game-stage svg{display:block;width:100%;height:100%;overflow:hidden}
.game-label{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 8px;padding-inline:6px}
.game-name{font-weight:700;font-size:16px;line-height:1.25}
.game-cta{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--court-deep)}
.game svg .fb{transform-box:fill-box;transform-origin:50% 50%}
.game svg .fb-b{transform-box:fill-box;transform-origin:50% 100%}
.g-pop{font:400 17px var(--display);fill:var(--char);stroke:#fff;stroke-width:4px;paint-order:stroke;stroke-linejoin:round;opacity:0;pointer-events:none}
.g-pop.dark{fill:var(--brine);stroke:var(--char)}
.motion-ok .g-flame{animation:g-flick 1.1s ease-in-out infinite alternate}
.motion-ok .g-flame.f2{animation-duration:.8s;animation-delay:-.3s}
.motion-ok .g-flame.f3{animation-duration:.65s;animation-delay:-.5s}
@keyframes g-flick{0%{transform:scale(1,1) skewX(0)}50%{transform:scale(.9,1.1) skewX(4deg)}100%{transform:scale(1.06,.9) skewX(-4deg)}}
.motion-ok .g-ember{animation:g-ember 2.4s linear infinite}
@keyframes g-ember{0%{transform:translate(0,0);opacity:0}15%{opacity:1}100%{transform:translate(var(--dx,4px),-44px);opacity:0}}
.motion-ok .g-sway{animation:g-sway 4.5s ease-in-out infinite}
@keyframes g-sway{25%{transform:rotate(.7deg)}75%{transform:rotate(-.7deg)}}
.motion-ok .g-bob{animation:g-bob 1.6s ease-in-out infinite}
@keyframes g-bob{50%{transform:translateY(-3px)}}
.motion-ok .g-bubble{animation:g-bubble 4.8s ease-in infinite}
@keyframes g-bubble{0%{transform:translate(0,0) scale(.4);opacity:0}15%{opacity:.95}100%{transform:translate(var(--dx,6px),-58px) scale(1);opacity:0}}
.motion-ok .g-star{animation:g-twinkle 2.2s ease-in-out infinite alternate}
@keyframes g-twinkle{to{opacity:.2}}
.motion-ok .g-ring{animation:g-ring 1.4s ease-in-out infinite}
@keyframes g-ring{50%{transform:scale(1.18);opacity:.55}}
.games.paused *{animation-play-state:paused!important}
.yard-tally{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:20px;font-weight:700}
.yard-tally b{display:inline-block;min-width:2.6ch;padding:6px 14px;border-radius:999px;background:var(--dill);color:var(--brine);font:400 22px/1 var(--display);text-align:center}
.yard-tally small{font-size:14px;font-weight:500;color:var(--char-soft)}

/* ---------- parties: pick a party, swap the scene ---------- */
.parties{background:var(--mustard)}
.parties .sec-head h2{color:var(--char)}
.party-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.party{position:relative;background:var(--paper);border-radius:var(--radius);padding:24px;box-shadow:0 6px 0 rgba(27,26,23,.18);cursor:pointer;transition:translate .3s cubic-bezier(.3,1.6,.5,1),rotate .3s cubic-bezier(.3,1.6,.5,1),background-color .3s,box-shadow .3s}
.motion-ok .party.rv{transition:opacity .8s ease,transform .8s cubic-bezier(.2,.9,.3,1.2),translate .3s cubic-bezier(.3,1.6,.5,1),rotate .3s cubic-bezier(.3,1.6,.5,1),background-color .3s,box-shadow .3s;transition-delay:var(--d,0s),var(--d,0s),0s,0s,0s,0s}
.party:hover{translate:0 -6px;rotate:1deg}
.party h3{font:400 28px/1 var(--display);color:var(--dill);margin:12px 0 8px;transition:color .3s}
.party p{font-size:16px;color:var(--char-soft);transition:color .3s}
.party .ico{width:52px;height:52px;transition:stroke .3s}
.party-btn{display:block;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.party-btn::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1}
.party-btn:focus-visible{outline:none}
.party:has(.party-btn:focus-visible){outline:3px solid var(--char);outline-offset:4px}
.party.on{background:var(--dill);box-shadow:0 6px 0 var(--dill-deep)}
.party.on h3{color:var(--brine)}
.party.on p{color:rgba(255,247,232,.92)}
.party.on .ico{stroke:var(--brine)}
.party::before{content:"";position:absolute;top:16px;right:16px;width:28px;height:28px;border-radius:50%;background:var(--brine) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%231B1A17' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat;opacity:0;transform:scale(.4);transition:opacity .25s,transform .35s cubic-bezier(.3,1.8,.5,1)}
.party.on::before{opacity:1;transform:none}
.party-photo{margin:30px auto 0;max-width:860px;border-radius:var(--radius);overflow:hidden;position:relative;box-shadow:0 8px 0 rgba(27,26,23,.18)}
.party-frame{position:relative;display:block;aspect-ratio:1600/1075;background:#C9B48A}
.party-still,.party-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .2s}
.motion-ok .party-still,.motion-ok .party-video{transition:opacity .6s ease}
.party-still.on,.party-video.on{opacity:1}
.party-video{pointer-events:none;background:transparent}
.party-photo .concept{z-index:2}

/* ---------- site plan ---------- */
.plan-map{position:relative;border-radius:30px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(27,26,23,.5)}
.plan-map img{width:100%}
.pin{position:absolute;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;border:3px solid #fff;background:var(--ketchup);color:#fff;font:700 15px var(--sans);display:grid;place-items:center;box-shadow:0 6px 16px rgba(0,0,0,.35)}
.motion-ok .pin::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:3px solid rgba(255,255,255,.8);animation:ping 2.2s ease-out infinite}
@keyframes ping{from{transform:scale(.6);opacity:1}to{transform:scale(1.6);opacity:0}}
.pin-card{position:absolute;min-width:220px;max-width:260px;padding:14px 16px;border-radius:14px;background:var(--paper);box-shadow:0 14px 30px rgba(0,0,0,.3);font-size:15px;opacity:0;pointer-events:none;transform:translateY(8px);transition:.2s;z-index:3}
.pin-card b{display:block;font:400 22px/1 var(--display);color:var(--dill);margin-bottom:4px}
.pin-card.show{opacity:1;transform:none}
.legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px}
.legend li{display:flex;gap:10px;align-items:flex-start;font-size:16px}
.legend li b{flex:none;width:28px;height:28px;border-radius:50%;background:var(--ketchup);color:#fff;display:grid;place-items:center;font-size:13px}

/* ---------- where / waitlist ---------- */
.where{background:var(--char);color:var(--paper);position:relative;overflow:hidden}
.where .sec-head h2{color:var(--brine)}
.where .sec-head p,.where .eyebrow{color:#D9D3C4}
.burger-court{position:relative;height:clamp(240px,26vw,340px);margin:clamp(4px,1vw,12px) 0 clamp(26px,4vw,48px)}
.burger-court:not(.on){display:none}
.burger-court canvas{position:absolute;inset:0;display:block;width:100%;height:100%;cursor:pointer;touch-action:manipulation}
.court-cap{position:absolute;left:0;top:0;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#9C968A;pointer-events:none}
html:not(.motion-ok) .court-cap{display:none}
.where-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,64px);align-items:start}
.vote{display:grid;gap:12px}
.town{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:16px 18px;border-radius:16px;border:2px solid rgba(255,247,232,.18);background:transparent;color:var(--paper);text-align:left;overflow:hidden;transition:border-color .2s,transform .2s}
.town:hover{border-color:var(--brine);transform:translateX(4px)}
.town .bar{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(200,230,74,.16);transition:width .8s cubic-bezier(.2,.8,.2,1)}
.town[aria-pressed="true"]{border-color:var(--brine)}
.town .dot{position:relative;width:22px;height:22px;border-radius:50%;border:2.5px solid var(--brine)}
.town[aria-pressed="true"] .dot{background:var(--brine)}
.town b{position:relative;font:400 24px/1 var(--display)}
.town small{position:relative;display:block;font-size:14px;color:#D9D3C4;margin-top:4px}
.town .pct{position:relative;font-weight:700;color:var(--brine)}
.vote-note{font-size:14px;color:#D9D3C4;margin-top:4px}
form.waitlist{background:var(--paper);color:var(--char);border-radius:26px;padding:clamp(24px,3vw,36px);box-shadow:0 10px 0 var(--brine)}
form.waitlist h3{font:400 36px/1 var(--display);color:var(--dill);margin-bottom:8px}
form.waitlist .sub{color:var(--char-soft);margin-bottom:20px}
.field{display:block;margin-bottom:14px}
.field span{display:block;font-weight:700;font-size:14px;margin-bottom:6px}
.field input,.field select{width:100%;font:500 17px var(--sans);padding:14px 16px;border-radius:14px;border:2px solid #D8CCB3;background:#fff;color:var(--char)}
.field input:focus,.field select:focus{outline:none;border-color:var(--dill);box-shadow:0 0 0 4px rgba(200,230,74,.5)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{position:relative;cursor:pointer}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips span{display:inline-block;padding:10px 14px;border-radius:999px;border:2px solid #D8CCB3;font-weight:700;font-size:14px;transition:.15s}
.chips input:checked+span{background:var(--dill);border-color:var(--dill);color:var(--paper)}
.chips input:focus-visible+span{outline:3px solid var(--court);outline-offset:2px}
.form-status{min-height:1.5em;margin-top:12px;font-weight:600}
.form-status.ok{color:var(--dill)}
.form-status.err{color:var(--ketchup)}

/* ---------- faq ---------- */
.faq{display:grid;gap:12px;max-width:860px}
.faq details{border-radius:18px;background:var(--paper-2);padding:4px 22px}
.faq summary{list-style:none;cursor:pointer;padding:18px 0;font:400 24px/1.1 var(--display);color:var(--dill);display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--sans);font-weight:700;font-size:28px;line-height:1;color:var(--court);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding-bottom:18px;color:var(--char-soft)}

/* ---------- footer ---------- */
footer{background:var(--dill-deep);color:var(--paper);padding-block:60px 36px}
.foot{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr));gap:36px;align-items:start}
.foot img{width:150px}
.foot h4{font:700 13px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--brine);margin-bottom:14px}
.foot li{margin-bottom:8px}
.foot a{color:var(--paper);text-decoration:none;opacity:.9}
.foot a:hover{opacity:1;text-decoration:underline}
.fine{margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,247,232,.15);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:14px;color:#CFE0C9}

/* ---------- reveals ---------- */
.motion-ok .rv{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.9,.3,1.2);transition-delay:var(--d,0s)}
.motion-ok .rv.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1060px){
  .party-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trio{grid-template-columns:1fr 1fr}
  .trio .way:nth-child(3){grid-column:1/-1;min-height:380px}
}
@media (max-width:900px){
  .nav-toggle{display:grid}
  .nav .links{display:none}
  .nav.open .links{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--paper);padding:18px var(--gutter) 24px;gap:16px;border-bottom:1px solid var(--line);box-shadow:0 18px 30px -18px rgba(0,0,0,.35)}
  .nav .btn{display:none}
  .hero .wrap,.kitchen-grid,.court-grid,.yard-grid,.where-grid{grid-template-columns:1fr}
  .spin-badge{right:-10px;top:-40px;width:118px;height:118px}
  .stack-stage{position:relative;top:0;height:420px}
  .legend{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr 1fr}
  .foot>div:first-child{grid-column:1/-1}
}
@media (max-width:600px){
  body{font-size:16.5px}
  .nav .brand{width:180px}
  .trio,.party-grid,.plans,.games,.courts .photo-pair{grid-template-columns:1fr}
  .trio .way:nth-child(3){grid-column:auto}
  .way{min-height:380px}
  .pin-card{min-width:180px}
  .foot{grid-template-columns:1fr}
  .courtline::after{letter-spacing:.14em}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.layer{transition:none}}

/* ---------- sides & sips: tap to fill the basket ---------- */
.sides{padding:22px;border-radius:22px;background:rgba(255,247,232,.06);border:1px solid rgba(255,247,232,.12)}
.sides-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;margin-bottom:16px}
.sides-head h3{font:400 32px/1 var(--display);color:var(--brine)}
.sides-head p{font-size:15px;color:var(--brine-soft)}
.side-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px}
.side{position:relative;display:grid;justify-items:center;align-content:start;gap:4px;padding:20px 10px 14px;border:0;border-radius:16px;background:var(--paper);color:var(--char);text-align:center;overflow:hidden;box-shadow:0 5px 0 rgba(0,0,0,.28);transition:transform .25s cubic-bezier(.3,1.6,.5,1),box-shadow .2s}
.side::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:repeating-conic-gradient(var(--ketchup) 0 25%,#fff 0 50%) 0 0/10px 10px}
.side:hover{transform:translateY(-5px) rotate(-2deg);box-shadow:0 10px 0 rgba(0,0,0,.28)}
.side:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.28)}
.side:focus-visible{outline:3px solid var(--brine);outline-offset:3px}
.side-art{display:block;width:66px;height:66px}
.side-art svg,.b-item svg{display:block;width:100%;height:100%}
.side b{font:400 18px/1.05 var(--display);color:var(--dill)}
.side small{font-size:13px;line-height:1.3;color:var(--char-soft)}
.motion-ok .side.pop .side-art{animation:side-pop .45s cubic-bezier(.3,1.8,.5,1)}
.motion-ok .side.wiggle .side-art{animation:side-wig .8s ease}
@keyframes side-pop{40%{transform:scale(1.28) rotate(-10deg)}}
@keyframes side-wig{25%{transform:rotate(-8deg) translateY(-3px)}75%{transform:rotate(7deg)}}
/* the basket scene: food lands in the basket, drinks on the picnic table */
.sides-row{margin-top:clamp(34px,5vw,60px)}
.table-col{position:sticky;top:104px;z-index:3}
.table-stage{position:relative;container-type:inline-size;aspect-ratio:100/82}
.table-stage::before{content:"";position:absolute;left:0;right:0;bottom:0;height:27%;border-radius:18px;background:repeating-linear-gradient(90deg,rgba(255,247,232,.1) 0 calc(20% - 3px),rgba(0,0,0,.18) calc(20% - 3px) 20%),#A8713F;box-shadow:inset 0 6px 0 rgba(255,255,255,.14),0 10px 0 rgba(0,0,0,.22)}
.tray-hint{position:absolute;left:0;right:0;top:3cqw;text-align:center;font:400 clamp(18px,4.6cqw,28px)/1.1 var(--display);color:var(--brine);transition:opacity .3s}
.tray-hint .m{display:none}
.table-stage.has-items .tray-hint{opacity:0}
.tray{position:absolute;left:3cqw;bottom:12cqw;width:64cqw;aspect-ratio:4/3}
.tray-back,.tray-front{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tray-front{pointer-events:none;z-index:2}
.tray-pile{position:absolute;z-index:1;left:10%;right:10%;top:0;bottom:30%}
.drinks{position:absolute;left:68cqw;right:1cqw;bottom:11.5cqw;height:34cqw}
.b-item{position:absolute;display:block;translate:-50% 0;width:38%;aspect-ratio:1}
.b-item.b-drink{width:60%}
.b-item svg{filter:drop-shadow(0 3px 0 rgba(0,0,0,.18))}
.basket-foot{display:flex;flex-wrap:wrap;gap:8px 14px;justify-content:space-between;align-items:center;margin-top:12px;font-weight:600;color:var(--brine-soft)}
.basket-foot button{border:2px solid var(--brine);background:transparent;color:var(--brine);border-radius:999px;padding:6px 14px;font:700 14px var(--sans)}
.basket-foot button:hover{background:var(--brine);color:var(--char)}
.combo{margin-top:14px;font-size:15px;color:rgba(255,247,232,.85)}
.combo b{color:var(--mustard)}
@media (max-width:900px){
  .sides-row{gap:14px}
  .table-col{top:74px;margin-inline:calc(var(--gutter) * -1);padding:6px var(--gutter) 10px;background:var(--dill);box-shadow:0 14px 18px -16px rgba(0,0,0,.6)}
  .table-stage{width:min(100%,260px);margin-inline:auto;aspect-ratio:100/66}
  .table-stage::before{height:24%}
  .tray{bottom:8cqw;width:58cqw}
  .drinks{left:63cqw;bottom:7.5cqw;height:30cqw}
  .tray-hint{top:1cqw}
  .tray-hint .d{display:none}
  .tray-hint .m{display:inline}
  .basket-foot{margin-top:6px;font-size:15px}
}
@media (max-width:600px){.side-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- yard + parties on phones (after the shared 1-column rule) ---------- */
@media (max-width:600px){
  .games{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .game{padding:6px 6px 10px;gap:7px}
  .game-name{font-size:14.5px}
  .game-cta{font-size:11px;letter-spacing:.05em}
  .game-label{flex-direction:column;align-items:flex-start;gap:1px;padding-inline:4px}
  .parties .party-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .party{padding:16px 14px}
  .party h3{font-size:21px;margin:8px 0 6px}
  .party p{font-size:14.5px;line-height:1.45}
  .party .ico{width:38px;height:38px}
  .party::before{top:10px;right:10px;width:22px;height:22px;background-size:12px}
  .party-photo{margin-top:18px}
}
@media (max-width:340px){.games,.parties .party-grid{grid-template-columns:1fr}}