/* Hot Star Kinetic — shared styles for v1 + v2.
   Ported from the Claude Design export (design-export/). Tokens live in tokens.css.
   Mobile layout (<720px) follows "Hot Star Mobile Preview". */

html{scroll-behavior:smooth;scroll-padding-top:64px}
body{margin:0;background:var(--hs-navy);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:var(--hs-yellow)}a:hover{color:var(--hs-yellow-600)}
button{font:inherit}
.page{font-family:var(--font-body);color:var(--hs-ink);overflow-x:clip}
.wrap{max-width:1280px;width:100%;margin:0 auto;padding-left:clamp(20px,4vw,48px);padding-right:clamp(20px,4vw,48px);box-sizing:border-box}
.logo{height:clamp(60px,10vh,90px);width:auto;display:block}
.label{font-family:var(--font-ui);font-weight:800;font-size:var(--fs-xs);letter-spacing:var(--ls-label);text-transform:uppercase}
.h2{margin:0;font-family:var(--font-headline);font-weight:900;text-transform:uppercase;letter-spacing:-.02em}
.h2-big{font-size:clamp(3rem,8vw,7rem);line-height:.86;color:var(--hs-navy)}
.h2-big span{color:var(--hs-blue)}
:focus-visible{outline:3px solid var(--hs-sky);outline-offset:3px}

/* ---- Button (DS) ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;box-sizing:border-box;font-family:var(--font-ui);font-weight:800;font-size:.95rem;letter-spacing:var(--ls-label);text-transform:uppercase;line-height:1;padding:15px 28px;color:var(--hs-navy);background:var(--hs-yellow);border:var(--border-w-bold) solid transparent;border-radius:var(--radius-pill);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background var(--dur) var(--ease-out),transform var(--dur-fast) var(--ease-out);-webkit-tap-highlight-color:transparent}
.btn:hover{background:var(--hs-yellow-600);color:var(--hs-navy)}
.btn:active{transform:translateY(1px) scale(.98)}
.btn--lg{gap:12px;font-size:1.0625rem;padding:19px 40px}
.btn--block{display:flex;width:100%}

/* ---- Fixed nav + progress ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:55;background:var(--hs-blue);box-shadow:var(--shadow-md);transform:translateY(-110%);pointer-events:none;transition:transform 340ms var(--ease-out)}
.nav.is-on{transform:none;pointer-events:auto}
.nav-in{max-width:1280px;margin:0 auto;padding:10px clamp(20px,4vw,48px);display:flex;align-items:center;gap:clamp(16px,3vw,36px);box-sizing:border-box}
.nav-in>a:first-child{display:inline-flex;margin-right:auto}
.nav-links{display:flex;gap:clamp(16px,3vw,32px);align-items:center}
.nav-links a{font-family:var(--font-ui);font-weight:700;text-transform:uppercase;letter-spacing:var(--ls-label);font-size:.875rem;color:var(--hs-white);text-decoration:none}
.progress{position:fixed;top:0;left:0;right:0;height:5px;background:var(--hs-yellow);transform-origin:0 50%;transform:scaleX(0);z-index:60}

/* ---- Hero ---- */
.hero-wrap{background:var(--hs-yellow);height:100svh;min-height:420px;display:flex;flex-direction:column}
.hero{--head:clamp(2.6rem,min(7.6vw,11vh),9rem);position:relative;background:var(--hs-blue);overflow:hidden;flex:1;min-height:0;display:flex;flex-direction:column;box-sizing:border-box;padding-bottom:calc(var(--zig-size) + 8px)}
.hero-top{position:relative;z-index:5;padding-top:20px;display:flex;align-items:center;justify-content:flex-start}
.hero-top a{display:inline-flex}
.streaks{position:absolute;inset:0;pointer-events:none;z-index:1}
.streaks i{position:absolute;left:0}
.hero-grid{position:relative;z-index:2;flex:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));align-items:center;gap:24px;min-height:0}
.hero-copy{display:flex;flex-direction:column;gap:clamp(12px,2.4vh,22px)}
.hero-serif{font-family:var(--font-hero);font-weight:700;font-size:clamp(1.8rem,min(3.8vw,6vh),3.4rem);line-height:1;color:var(--hs-white);text-wrap:balance;margin:0}
.hero-head{display:flex;flex-direction:column;margin:0;font-weight:inherit}
.hero-head>span{display:block;font-family:var(--font-headline);font-weight:900;text-transform:uppercase;font-size:var(--head);line-height:.84;letter-spacing:-.02em;color:var(--hs-white)}
.hero-head>.hl{color:var(--hs-yellow);text-shadow:0 0 38px rgba(251,206,58,.45)}
.lead{margin:0;max-width:30em;color:var(--hs-white);font-size:var(--fs-lead);line-height:var(--lh-normal);text-wrap:pretty}
/* ponytail: design flips this row to a centred column via ResizeObserver when it wraps; wrap only happens <~330px, flex-wrap covers it */
.cta-row{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.link-caps{color:var(--hs-white);font-family:var(--font-ui);font-weight:800;text-transform:uppercase;letter-spacing:var(--ls-label);font-size:var(--fs-sm);text-underline-offset:6px;text-decoration-thickness:2px}
.link-caps:hover{color:var(--hs-yellow)}
.hero-art{position:relative;display:flex;justify-content:center}
.hero-art-in{position:relative;height:clamp(200px,calc(100svh - 300px),600px);aspect-ratio:800/1270}
.hero-art img{display:block;height:100%;width:100%;object-fit:cover;border-radius:var(--radius-lg);transform:rotate(-6deg)}
.sticker-pos{position:absolute;top:8%;left:-6%}
.sticker{width:clamp(118px,11vw,150px);aspect-ratio:1;border-radius:50%;background:var(--hs-navy);color:var(--hs-yellow);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:var(--shadow-sticker);border:3px solid var(--hs-yellow);transform:rotate(-10deg);padding:10px;box-sizing:border-box}
.sticker small{font-family:var(--font-ui);font-weight:700;font-size:10px;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--hs-white)}
.sticker b{font-family:var(--font-headline);font-weight:900;font-size:clamp(14px,1.3vw,18px);line-height:1;text-transform:uppercase}

/* ---- Ticker ---- */
.ticker{background:var(--hs-yellow);overflow:hidden;flex:none;padding:clamp(12px,2vh,22px) 0 clamp(14px,2.4vh,26px)}
.marquee{display:inline-flex;white-space:nowrap;align-items:center}
.tick{display:inline-flex;align-items:center;gap:clamp(18px,2.4vw,36px);padding-right:clamp(18px,2.4vw,36px)}
.tick span{font-family:var(--font-headline);font-weight:900;text-transform:uppercase;font-size:clamp(2rem,4.4vw,3.8rem);line-height:1;color:var(--hs-navy);letter-spacing:-.01em}
.tick i{width:.5em;height:.5em;min-width:14px;min-height:14px;border-radius:50%;background:var(--hs-blue)}

/* ---- Menu: pinned horizontal scroll (desktop) / swipe deck (mobile) ---- */
.menu{position:relative;height:820vh;background:var(--hs-blue)}
.menu-pin{position:sticky;top:0;height:100vh;box-sizing:border-box;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,3vh,36px)}
.menu-head{display:flex;flex-direction:column;gap:6px}
.menu-head .label{color:var(--hs-yellow)}
.menu-head .h2{font-size:clamp(2.6rem,6vw,5.5rem);line-height:.88;color:var(--hs-white)}
.deck{position:relative;width:100%}
.deck-btn{display:none;position:absolute;top:50%;transform:translateY(-50%);z-index:30;width:44px;height:44px;border-radius:999px;border:3px solid var(--hs-navy);background:var(--hs-yellow);color:var(--hs-navy);align-items:center;justify-content:center;padding:0;cursor:pointer;box-shadow:var(--shadow-sticker)}
.deck-btn:active{transform:translateY(-50%) scale(.94)}
.deck-btn--prev{left:6px}.deck-btn--next{right:6px}
.trackwrap{position:relative;width:100%;overflow:hidden}
.track{position:relative;display:flex;width:max-content;padding:24px calc((100vw - min(76vw,380px)) / 2);box-sizing:border-box;gap:clamp(16px,2.4vw,32px);will-change:transform}
.card{flex:none;grid-area:1/1;justify-self:center;width:min(76vw,380px);height:min(58vh,520px);border-radius:var(--radius-md);position:relative;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;padding:22px;box-sizing:border-box;box-shadow:var(--shadow-sm);background-size:cover;background-position:center;will-change:transform;container-type:inline-size;user-select:none;-webkit-user-select:none}
.card.is-chosen{box-shadow:0 0 0 4px var(--hs-yellow),var(--shadow-md)}
.card--photo{background-image:linear-gradient(180deg,rgba(8,55,126,0) 35%,rgba(5,42,99,.92) 100%),url(../assets/hero-chicken.webp);text-shadow:0 2px 12px rgba(5,42,99,.6)}
.card-body{position:relative;display:flex;flex-direction:column;gap:12px}
.card-word{font-family:var(--font-headline);font-weight:900;text-transform:uppercase;font-size:min(clamp(3.2rem,6.4vw,5.6rem),17cqi);line-height:.84;letter-spacing:-.03em;overflow-wrap:break-word}
.card-name{font-family:var(--font-ui);font-weight:800;text-transform:uppercase;font-size:1.0625rem;letter-spacing:var(--ls-caps)}
.card-desc{font-size:var(--fs-sm);line-height:1.4}
.badge{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--hs-navy);color:#fff;font-family:var(--font-ui);font-weight:900;font-size:16px;line-height:1;text-shadow:none}
.price{display:inline-flex;align-items:baseline;gap:1px;background:var(--hs-yellow);color:var(--hs-navy);font-family:var(--font-ui);font-weight:800;font-size:1.375rem;line-height:1;padding:7px 16px;border-radius:var(--radius-sm);letter-spacing:-.01em;text-shadow:none}
.price span{font-size:.7em;font-weight:700;align-self:flex-start;margin-top:.15em}
.deck-meta{display:none;justify-content:center;align-items:center;gap:10px;margin-top:-18px;font-family:var(--font-ui);font-weight:800;text-transform:uppercase;letter-spacing:var(--ls-caps);font-size:var(--fs-xs);color:var(--hs-white)}
.deck-meta b{background:var(--hs-yellow);color:var(--hs-navy);border-radius:999px;padding:4px 10px}
.dots{display:flex;gap:6px}
.dots i{height:4px;border-radius:4px;flex:1 1 0;background:rgba(255,255,255,.3);transition:flex 340ms var(--ease-bounce),background 200ms}
.dots i.done{background:var(--hs-yellow)}
.dots i.cur{flex:4 1 0}

/* ---- Stores / order ---- */
.order{background:var(--hs-cream);padding:clamp(64px,9vw,120px) 0}
.order-in{display:flex;flex-direction:column;gap:clamp(28px,4vw,48px)}
.split-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:3px solid var(--hs-navy);background:transparent;color:var(--hs-navy);border-radius:var(--radius-pill);padding:10px 20px;font-family:var(--font-ui);font-weight:800;text-transform:uppercase;letter-spacing:var(--ls-label);font-size:var(--fs-sm);cursor:pointer;transition:background 200ms,transform 200ms var(--ease-bounce)}
.chip:active{transform:translateY(1px) scale(.97)}
.chip[aria-pressed="true"]{background:var(--hs-navy);color:var(--hs-yellow)}
.order-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:clamp(20px,3vw,40px);align-items:start}
.stores{display:flex;flex-direction:column;gap:10px}
.store{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;border-radius:var(--radius-md);background:var(--hs-white);color:var(--hs-navy);border:3px solid var(--hs-line);padding:18px 22px;transition:transform 340ms var(--ease-bounce),background 200ms,box-shadow 200ms}
.store:hover{border-color:var(--hs-navy)}
.store:focus-visible{outline:3px solid var(--hs-blue);outline-offset:2px}
.store.is-on{background:var(--hs-yellow);border-color:var(--hs-navy);transform:translateX(10px);box-shadow:var(--shadow-sticker)}
.store-num{font-family:var(--font-headline);font-weight:900;font-size:1.75rem;line-height:1;color:var(--hs-blue);font-variant-numeric:tabular-nums}
.store-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.store-name{font-family:var(--font-ui);font-weight:800;text-transform:uppercase;font-size:1.125rem;line-height:1.1}
.store-addr,.panel-addr{font-size:var(--fs-sm);color:var(--hs-graphite)}
.status{display:flex;align-items:center;gap:7px;font-family:var(--font-ui);font-weight:800;font-size:var(--fs-xs);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--hs-navy)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--hs-coral);border:1.5px solid var(--hs-navy);flex:none}
.dot.open{background:var(--hs-lime)}
.panel{position:sticky;top:24px;background:var(--hs-white);border-radius:var(--radius-lg);border:3px solid var(--hs-navy);box-shadow:var(--shadow-sticker);overflow:hidden;display:flex;flex-direction:column}
.panel-media{height:200px;background-size:cover;background-position:center}
.panel-media.noimg{background:var(--hs-blue);display:flex;align-items:flex-end;padding:20px;box-sizing:border-box;overflow:hidden}
.panel-media span{font-family:var(--font-headline);font-weight:900;text-transform:uppercase;font-size:clamp(3rem,6vw,4.6rem);line-height:.82;color:var(--hs-yellow);letter-spacing:-.02em}
.panel-body{padding:clamp(20px,2.6vw,28px);display:flex;flex-direction:column;gap:22px}
.panel-info{display:flex;flex-direction:column;gap:6px}
.panel-info .label{color:var(--hs-blue)}
.panel-name{margin:0;font-family:var(--font-headline);font-weight:900;text-transform:uppercase;font-size:1.75rem;line-height:1;color:var(--hs-navy)}
.status-chip{display:inline-flex;align-self:flex-start;gap:8px;margin:6px 0 2px;padding:6px 12px;border-radius:var(--radius-pill);background:var(--hs-white);border:2px solid var(--hs-navy)}
.status-chip.open{background:var(--hs-cream)}
.hours{display:flex;flex-wrap:wrap;gap:6px 14px}
.hours span{font-family:var(--font-ui);font-weight:700;font-size:var(--fs-sm);color:var(--hs-navy)}
.panel-cta{display:flex;flex-direction:column;gap:10px}
.fine{font-size:var(--fs-xs);color:var(--hs-graphite);text-align:center}

/* ---- Delivery ---- */
.delivery{background:var(--hs-yellow);padding:clamp(64px,9vw,120px) 0}
.delivery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(32px,5vw,72px);align-items:center}
.delivery-grid>*{min-width:0}
.apps{display:flex;flex-direction:column;gap:14px}
.app{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;padding:clamp(20px,2.6vw,30px);border-radius:var(--radius-lg);border:3px solid var(--hs-navy);box-shadow:var(--shadow-sticker);transition:transform 260ms var(--ease-bounce),box-shadow 200ms}
.app:hover{transform:translate(-2px,-3px);box-shadow:9px 9px 0 var(--hs-navy)}
.app:active{transform:translateY(1px) scale(.98)}
.app:focus-visible{outline:3px solid var(--hs-blue);outline-offset:3px}
.app--uber{background:var(--hs-navy);color:var(--hs-white)}.app--uber .label{color:var(--hs-blue-100)}
.app--panda{background:var(--hs-white);color:var(--hs-navy)}.app--panda .label{color:var(--hs-graphite)}
.app-txt{display:flex;flex-direction:column;gap:8px;min-width:0}
.app-name{font-family:var(--font-headline);font-weight:900;text-transform:uppercase;font-size:clamp(1.6rem,3.2vw,2.8rem);line-height:.9;letter-spacing:-.02em;overflow-wrap:anywhere;min-width:0}
.app-go{width:56px;height:56px;border-radius:50%;background:var(--hs-yellow);border:3px solid var(--hs-navy);display:flex;align-items:center;justify-content:center;flex:none;color:var(--hs-navy)}
.launch{font-family:var(--font-ui);font-weight:700;font-size:var(--fs-sm);color:var(--hs-navy);min-height:1.4em}

/* ---- Final CTA + footer ---- */
.final{position:relative;background:var(--hs-blue);overflow:hidden}
.final-top{position:relative;display:flex;flex-direction:column;align-items:center;gap:clamp(18px,3vw,32px);padding:clamp(80px,12vw,160px) clamp(20px,4vw,48px) clamp(32px,5vw,64px);text-align:center}
.cut{font-family:var(--font-headline);font-weight:900;text-transform:uppercase;font-size:clamp(5rem,19vw,17rem);line-height:.8;letter-spacing:-.04em;color:var(--hs-yellow);text-shadow:0 0 60px rgba(251,206,58,.35)}
.cut.alt{color:var(--hs-white)}
.final-top h2{margin:0;font-family:var(--font-hero);font-weight:700;font-size:var(--fs-h2);color:var(--hs-white);text-wrap:balance}
.final-bot{position:relative}
.outline-bg{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;pointer-events:none;overflow:hidden}
.big-marquee{font-family:var(--font-headline);font-weight:900;text-transform:uppercase;font-size:clamp(7rem,19vw,20rem);line-height:.86}
.big-marquee span{padding-right:.3em}
.big-marquee.stroke{color:transparent;-webkit-text-stroke:2px var(--hs-sky)}
.big-marquee.fill{color:var(--hs-blue-700)}
.foot{position:relative;z-index:1;padding:clamp(56px,9vw,120px) 0}
.footer{background:var(--hs-blue);color:#fff}
.footer-grid{max-width:var(--container);margin:0 auto;padding:clamp(48px,7vw,88px) 28px;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:40px;align-items:start}
.foot-h{font-family:var(--font-ui);font-weight:800;text-transform:uppercase;letter-spacing:var(--ls-label);font-size:.9375rem;color:var(--hs-yellow);margin-bottom:16px}
.footer-grid a{font-family:var(--font-body);font-size:.9375rem;color:#fff;text-decoration:none;opacity:.92;display:block;margin-bottom:10px}
.footer-grid a:hover{opacity:1;text-decoration:underline}
.footer-grid .foot-mail{display:inline;opacity:1;text-decoration:underline;text-underline-offset:3px}
.foot-logo{display:flex;justify-content:flex-end;align-items:flex-start}
.foot-logo img{height:96px;width:auto}
.copy{position:relative;z-index:1;padding:0 28px 20px;text-align:center;font-family:var(--font-body);font-size:.8125rem;color:var(--hs-white)}

/* ---- v2 hero (Kaushan script + Anton, photo background) ---- */
.v2 .hero{background:#0159C3;padding-bottom:calc(var(--zig-size) + 48px)}
.hero-photo{position:absolute;inset:0;z-index:0;container-type:size}
.hero-photo .teeth{position:absolute;left:0;right:0;bottom:0;height:3.2cqh;background:url(../assets/teeth.svg) repeat-x;background-size:8.96cqh 100%;background-position:calc(100cqw - 249.36cqh + 1.74cqh) 0}
.hero-photo .bg{position:absolute;inset:0;background:url(../assets/hero-bg-wide.webp) right bottom/min(249.36cqh,143.1cqw) auto no-repeat}
.hero-photo-m{display:none;position:relative;z-index:1;width:100%;height:auto;margin-top:8px}
.script-row{display:flex}
.script{position:relative;display:inline-block;font-family:'Kaushan Script',cursive;font-weight:400;font-size:clamp(2.6rem,min(5.8vw,8.5vh),5.2rem);line-height:1.05;color:var(--hs-white);transform:rotate(-5deg);transform-origin:left bottom;padding-right:.9em;margin-bottom:-.12em}
.script svg{position:absolute;right:0;top:-.1em;width:.85em;height:auto;overflow:visible}
.v2 .hero-head{align-items:flex-start}
.v2 .hero-head>span{font-family:'Anton',var(--font-headline);font-weight:400;font-size:calc(var(--head) * 1.12);line-height:.92;letter-spacing:.005em;text-shadow:0 4px 0 rgba(8,55,126,.35)}
.v2 .hero-head>.hl{position:relative;padding-right:.35em}
.hl svg{position:absolute;right:-.05em;top:-.28em;width:.42em;height:auto;overflow:visible}
.swoosh{display:block;width:min(78%,480px);height:clamp(10px,1.6vh,16px);margin-top:.35em}
.v2 .ticker{padding-top:clamp(4px,.8vh,10px)}

/* ---- Mobile (matches "Hot Star Mobile Preview", 360–390px) ---- */
@media (max-width:719px){
  .nav-links{display:none}
  .hero-wrap{height:auto}
  .hero{--head:15.5vw}
  .hero-top{justify-content:center}
  .hero-grid{gap:40px;padding-bottom:28px}
  .hero-art-in{height:min(340px,86vw)}
  .menu{height:auto}
  .menu-pin{position:relative;height:auto;padding:72px 0 56px}
  .trackwrap{touch-action:pan-y}
  .track{display:grid;width:100%;padding:28px 0 52px}
  .deck-btn,.deck-meta{display:flex}
  .store{padding:14px 16px;gap:12px}
  .store.is-on{transform:none}
  .panel{position:relative;top:auto}
  .v2 .hero{padding-bottom:0}
  .v2 .hero-grid{padding-bottom:8px}
  .hero-photo,.hero-spacer{display:none}
  .hero-photo-m{display:block}
}