/* Hot Dog Man: ketchup / mustard / relish theme */
:root{--k:#e2231a;--kd:#b5150e;--m:#ffd21f;--r:#2f9e3a;--rd:#1f7a2a;--bun:#f0b866;--ink:#1a1209;--paper:#fffaf0}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth}
body{background:var(--m);color:var(--ink);font:700 17px/1.6 Nunito,system-ui,sans-serif;background-image:radial-gradient(rgba(226,35,26,.13) 2px,transparent 2.5px),radial-gradient(rgba(47,158,58,.12) 2px,transparent 2.5px);background-size:34px 34px;background-position:0 0,17px 17px}
h1,h2,h3,.brand,.btn,summary,.kicker,.tag,.sbtn,.ftr-big,.nav a{font-family:'Lilita One',Impact,sans-serif;font-weight:400;letter-spacing:.5px}
a{color:var(--kd)}img,video{max-width:100%;display:block;height:auto}
/* header */
.hdr{position:sticky;top:0;z-index:50;background:var(--k);display:flex;align-items:center;justify-content:space-between;padding:8px 16px;flex-wrap:wrap;border-bottom:4px solid var(--ink)}
.drip{display:block;width:100%;height:34px;margin-top:-1px;pointer-events:none;filter:drop-shadow(0 4px 0 var(--ink))}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-size:1.6rem;text-shadow:3px 3px 0 var(--ink)}
.brand img{border-radius:50%;border:3px solid var(--m);background:#000;transition:transform .3s}.brand:hover img{transform:rotate(-15deg) scale(1.12)}
.brand b{color:var(--m);font-weight:400}
.burger{background:var(--m);border:3px solid var(--ink);border-radius:12px;padding:8px;cursor:pointer;display:flex;flex-direction:column;gap:5px}
.burger i{display:block;width:26px;height:4px;background:var(--ink);border-radius:4px}
.nav{display:none;width:100%;flex-direction:column;gap:6px;padding:10px 0}.nav.open{display:flex}
.nav a{color:var(--ink);background:var(--m);border:3px solid var(--ink);border-radius:30px;text-decoration:none;font-size:1.2rem;padding:6px 16px;box-shadow:3px 3px 0 var(--ink);transition:transform .2s;text-align:center}
.nav a.on{background:var(--r);color:#fff}.nav a:hover{transform:rotate(-4deg) scale(1.08)}
main{padding:0 16px;max-width:1150px;margin:0 auto}
/* hero */
.hero{display:grid;gap:26px;align-items:center;padding:18px 0 30px}
.kicker{display:inline-block;background:var(--r);color:#fff;border:3px solid var(--ink);padding:4px 14px;border-radius:30px;transform:rotate(-3deg);font-size:1rem;margin-bottom:14px;box-shadow:3px 3px 0 var(--ink)}
h1{font-size:clamp(3rem,12vw,6rem);line-height:.95;color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:6px 6px 0 var(--ink);margin-bottom:18px}
.k{color:var(--k)}.m{color:var(--m)}.g{color:var(--r)}
.lead{font-size:1.15rem;max-width:40em;margin-bottom:22px}
.hero-art{background:#000;border:5px solid var(--ink);border-radius:30px;padding:14px;transform:rotate(2deg);box-shadow:12px 12px 0 var(--k),12px 12px 0 5px var(--ink);max-width:520px;margin:0 auto}
.hero-art:hover{animation:wobble .7s}
/* buttons */
.btn{display:inline-block;background:var(--k);color:#fff;text-shadow:2px 2px 0 var(--ink);text-decoration:none;font-size:1.5rem;padding:16px 28px;border-radius:60px;border:4px solid var(--ink);box-shadow:0 7px 0 var(--ink);cursor:pointer;transition:transform .15s}
.btn:hover{animation:wobble .6s;background:var(--r)}.btn:active{transform:translateY(5px);box-shadow:0 2px 0 var(--ink)}
.bounce{animation:bounce 1.6s ease-in-out 1.5s infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}20%{transform:translateY(-12px) rotate(-2deg)}40%{transform:translateY(0)}55%{transform:translateY(-5px) rotate(1deg)}70%{transform:translateY(0)}}
@keyframes wobble{0%,100%{transform:rotate(0)}20%{transform:rotate(-4deg) scale(1.05)}40%{transform:rotate(3deg) scale(1.05)}60%{transform:rotate(-2deg)}80%{transform:rotate(1deg)}}
/* sections: sticker panels */
.sec{padding:30px 18px;margin:26px 0;background:var(--paper);border:5px solid var(--ink);border-radius:30px;box-shadow:10px 10px 0 var(--ink)}
.sec:nth-of-type(odd){background:var(--r);color:#fff}.sec:nth-of-type(odd) a{color:var(--m)}
h2{font-size:clamp(2rem,6.5vw,3rem);color:var(--m);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:4px 4px 0 var(--ink);margin-bottom:14px;line-height:1.1}
.sec:nth-of-type(even) h2{color:var(--k)}
.squig{display:block;width:170px;height:20px;margin-top:6px}.squig path{stroke:var(--k)}
.sec:nth-of-type(odd) .squig path{stroke:var(--m)}
.center{text-align:center}.sec>h2{text-align:center}.sec>h2 .squig{margin:6px auto 0}
.vid{max-width:820px;margin:18px auto 0;border:5px solid var(--ink);border-radius:22px;overflow:hidden;box-shadow:8px 8px 0 var(--k);background:#000}
.vid video{width:100%}
.vid-tall{max-width:320px;margin:14px auto 8px;box-shadow:6px 6px 0 var(--r)}
/* photo strip */
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:12px 6px 22px}
.snap{scroll-snap-align:start;background:#fff;color:var(--ink);border:4px solid var(--ink);border-radius:18px;overflow:hidden;box-shadow:6px 6px 0 var(--ink)}
.snap:nth-child(odd){transform:rotate(-2deg)}.snap:nth-child(even){transform:rotate(2deg)}
.snap:hover,.ph.wob:hover,.card:hover,.sbtn:hover{animation:wobble .6s}
.snap figcaption{padding:10px 14px;font-size:.95rem}.snap figcaption b{display:block;font-family:'Lilita One';font-weight:400;color:var(--k);font-size:1.25rem}
/* cards */
.cards{display:grid;gap:18px}.card{background:var(--m);border:4px solid var(--ink);border-radius:22px;padding:20px;text-align:center;box-shadow:6px 6px 0 var(--ink)}
.card:nth-child(2){background:#fff}.card:nth-child(3){background:var(--bun)}
.card span{font-size:2.8rem;display:block}.card h3{font-size:1.6rem;color:var(--k)}
/* CTA */
.cta{text-align:center;color:#fff;background:var(--k);border:5px solid var(--ink);outline:4px dashed var(--m);outline-offset:-16px;border-radius:30px;padding:44px 22px;margin:30px 0 50px;box-shadow:10px 10px 0 var(--ink)}
.cta h2{color:#fff}.cta p{margin-bottom:22px;font-size:1.1rem}.cta .btn{background:var(--m);color:var(--ink);text-shadow:none}.cta .btn:hover{background:#fff}
.pagehead{padding:28px 0 6px;text-align:center}.pagehead .lead{margin:0 auto}
.two{display:grid;gap:28px;align-items:start}.two p{margin-bottom:14px}
.ph{background:#fff;color:var(--ink);border:4px solid var(--ink);border-radius:22px;overflow:hidden;box-shadow:8px 8px 0 var(--k);transform:rotate(-1.5deg)}
.cap{padding:10px 14px;font-style:italic;margin:0!important}
/* FAQ */
.faq{max-width:820px;margin:26px auto}
.q{background:#fff;color:var(--ink);border:4px solid var(--ink);border-radius:20px;margin-bottom:14px;box-shadow:5px 5px 0 var(--ink);transition:transform .2s}
.q:nth-child(3n+2){background:var(--m)}.q:nth-child(3n){background:var(--paper)}
.q:hover{transform:rotate(-.8deg) scale(1.01)}
.q summary{cursor:pointer;padding:16px 50px 16px 18px;font-size:1.35rem;color:var(--kd);list-style:none;position:relative}
.q summary::-webkit-details-marker{display:none}
.q summary::after{content:'🌭';position:absolute;right:16px;top:12px;font-size:1.4rem;transition:transform .3s}.q[open] summary::after{transform:rotate(90deg)}
.tag{display:inline-block;font-style:normal;font-size:.8rem;background:var(--r);color:#fff;border:2px solid var(--ink);border-radius:20px;padding:0 8px;margin-left:6px;vertical-align:middle;transform:rotate(3deg)}
.q .ans{padding:0 18px 18px}.q .ans .cap{padding:6px 0 0;text-align:center}.q a{color:var(--rd)}
h1 .m{color:var(--r)}
/* booking */
.form{background:#fff;color:var(--ink);border:4px solid var(--ink);border-radius:24px;padding:22px;display:grid;gap:14px;box-shadow:8px 8px 0 var(--k)}
.form label{display:grid;gap:5px;font-weight:800}
.form input,.form select,.form textarea{font:inherit;padding:12px;border-radius:12px;border:3px solid var(--ink);background:var(--paper);color:var(--ink);width:100%}
.form input:focus,.form select:focus,.form textarea:focus{outline:4px solid var(--m)}
.form .btn{justify-self:start}.small{font-size:.85rem;opacity:.85}
.contact .big{font-size:1.25rem;word-break:break-word}.contact .big a{text-decoration:none}.contact .big a:hover{text-decoration:underline}
.contact .ph{margin-top:18px}.contact h3{margin-top:14px;font-size:1.4rem}
/* socials */
.soc{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:14px 0}
.sbtn{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--ink)!important;text-decoration:none;border:3px solid var(--ink);border-radius:40px;padding:8px 16px;font-size:1.05rem;box-shadow:3px 3px 0 var(--ink)}
.sbtn svg{width:22px;height:22px;fill:var(--k)}.sbtn:nth-child(even){background:var(--m)}
.contact .soc{justify-content:flex-start}
/* footer */
.ftr{border-top:5px solid var(--ink);background:var(--r);color:#fff;text-align:center;padding:30px 18px 40px;display:grid;gap:10px;justify-items:center}
.ftr a{color:var(--m)}.ftr .squig path{stroke:var(--m)}
.ftr-big{font-size:1.9rem;color:var(--m);-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill;text-shadow:3px 3px 0 var(--ink)}
.ftr-nav a{margin:0 8px;color:#fff}.ftr .small{max-width:640px}
@media(min-width:760px){.burger{display:none}.nav{display:flex;flex-direction:row;width:auto;gap:10px;padding:0}.hero{grid-template-columns:1.1fr .9fr;padding:40px 0}.strip{grid-auto-columns:38%}.cards{grid-template-columns:repeat(3,1fr)}.two{grid-template-columns:1fr 1fr}.sec{padding:40px 34px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}