/* =====================================================================
   THE DAILY BOOSTER — retro-space diner café, Paphos
   Design plan (palette use per section / type scale / intro storyboard)
   lives in comments through this file. Voice: warm, short, confident.

   BANDS:  navy header/hero  →  steel menu  →  cream delivery  →
           steel/navy about  →  navy contact  →  navy-deep footer
   (echoes the printed card: navy header band over a steel body.)

   TYPE:   Passion One (display, sticker words) · Baloo 2 (headings) ·
           Quicksand (body/UI, letterspaced caps for item names)

   COLOR RULES (enforced): red only on cream/white, never on steel.
           yellow only on navy. steel = calm large fills. red = sparing.
   ===================================================================== */

/* ---------- SELF-HOSTED FONTS ---------- */
@font-face{
  font-family:'Passion One';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/passion-one-700.woff2') format('woff2');
}
@font-face{
  font-family:'Passion One';font-style:normal;font-weight:900;font-display:swap;
  src:url('../fonts/passion-one-900.woff2') format('woff2');
}
@font-face{
  font-family:'Baloo 2';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('../fonts/baloo2-var.woff2') format('woff2');
}
@font-face{
  font-family:'Quicksand';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('../fonts/quicksand-var.woff2') format('woff2');
}

/* ---------- TOKENS ---------- */
:root{
  --navy:#004E6F; --steel:#68A0B1; --red:#DB1E3A; --cream:#FFF6E9;
  --white:#FFFFFF; --yellow:#F6D06F; --orange:#F5A963; --navy-deep:#003A54;
  --steel-deep:#4E8494; --cream-2:#FFF1DC; --ink:#0B2C3B;
  --muted:#3C6E7E;   /* AA-safe secondary text on cream/white cards (5.3:1 / 5.6:1) */

  --font-display:'Passion One', 'Arial Black', sans-serif;
  --font-head:'Baloo 2', 'Trebuchet MS', sans-serif;
  --font-body:'Quicksand', 'Segoe UI', sans-serif;

  --nav-h:calc(68px + env(safe-area-inset-top,0px));   /* folds notch inset into every offset that tracks the navbar */
  --wrap:1180px;
  --r-lg:24px; --r-md:18px; --r-sm:12px; --r-pill:999px;

  /* sticker offset shadows (hard, brand-colored) */
  --sh-navy:6px 6px 0 var(--navy);
  --sh-navy-sm:4px 4px 0 var(--navy);
  --sh-red:5px 5px 0 var(--red);
  --ease-settle:cubic-bezier(.34,1.56,.64,1);
}

/* ---------- RESET / BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 12px)}
/* no page scrollbar — it reserved a 15px gutter down the right edge on any OS
   set to "always show scroll bars".  Scrolling itself is untouched (wheel,
   trackpad, touch, keyboard, and the jump anchors all still work); this only
   hides the bar.  scrollbar-width covers Firefox + modern Chrome/Safari, the
   ::-webkit rule covers older WebKit/Blink, and both html and body are needed
   because body{overflow-x:hidden} makes it a scroll container too. */
html,body{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}
body{
  margin:0;font-family:var(--font-body);font-weight:500;color:var(--navy);
  background:var(--steel);line-height:1.6;font-size:clamp(15px,1vw+13px,17px);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
body.intro-lock{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--font-head);font-weight:700;line-height:1.05}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:6px}
.band--cream :focus-visible,.band--steel :focus-visible{outline-color:var(--navy)}
.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- SECTION / BAND SCAFFOLD ---------- */
.section{position:relative;padding:clamp(56px,8vw,110px) 0}
.band--navy{background:var(--navy);color:var(--cream)}
.band--steel{background:var(--steel);color:var(--navy)}
.band--cream{background:var(--cream);color:var(--navy)}
.band--navy-deep{background:var(--navy-deep);color:var(--cream)}

/* soft scallop/wave dividers (inline <svg class="divider">) */
.divider{display:block;width:100%;height:clamp(28px,4vw,56px);margin-bottom:-1px}
.divider--flip{transform:scaleY(-1);margin-top:-1px;margin-bottom:0}

/* ---------- STICKER LETTERING ---------- */
/* cream inner fill · red or navy outline · hard offset shadow — headline words only */
.sticker{
  font-family:var(--font-display);font-weight:900;color:var(--cream);
  letter-spacing:.02em;line-height:.92;text-transform:uppercase;
  -webkit-text-stroke:2px var(--red);paint-order:stroke fill;
  text-shadow:var(--sh-navy);
}
.sticker--navy{-webkit-text-stroke-color:var(--navy);text-shadow:5px 5px 0 var(--red)}
/* keep red offsets off the steel band (brand rule: red on cream/white only) */
.band--steel .sticker--navy{text-shadow:5px 5px 0 var(--navy-deep)}
.sticker--sm{-webkit-text-stroke-width:1.5px;text-shadow:var(--sh-navy-sm)}

/* eyebrow / small heading */
.eyebrow{
  font-family:var(--font-head);font-weight:700;text-transform:uppercase;
  letter-spacing:.18em;font-size:.82rem;color:var(--orange);
}
.band--navy .eyebrow,.band--navy-deep .eyebrow{color:var(--yellow)}
.band--steel .eyebrow{color:var(--ink)}       /* AA on steel (5.0:1) */
.band--cream .eyebrow{color:var(--navy-deep)}  /* AA on cream (11:1) */

/* ---------- BUTTONS (pill · sticker peel on hover) ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55em;font-family:var(--font-head);
  font-weight:700;font-size:1rem;letter-spacing:.01em;padding:.72em 1.5em;
  border-radius:var(--r-pill);border:3px solid transparent;
  transition:transform .18s var(--ease-settle),box-shadow .18s var(--ease-settle),background-color .18s;
  will-change:transform;text-align:center;
}
.btn svg{width:1.15em;height:1.15em;flex:none}
.btn--red{background:var(--red);color:var(--cream);box-shadow:var(--sh-navy-sm)}
.btn--red:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--navy)}
.btn--cream{background:transparent;color:var(--cream);border-color:var(--cream);box-shadow:4px 4px 0 rgba(0,58,84,.55)}
.btn--cream:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 rgba(0,58,84,.7);background:rgba(255,246,233,.08)}
.btn--navy{background:var(--navy);color:var(--cream);box-shadow:4px 4px 0 var(--orange)}
.btn--navy:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--orange)}
.btn:active{transform:translate(0,0)}

/* =====================================================================
   NAVBAR
   ===================================================================== */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;height:var(--nav-h);
  display:flex;align-items:center;
  transition:background-color .3s ease,box-shadow .3s ease;
}
.nav__inner{display:flex;align-items:center;gap:18px;width:min(100% - 32px,var(--wrap));margin-inline:auto;padding-top:env(safe-area-inset-top)}
.nav.is-stuck{background:var(--navy);box-shadow:0 4px 22px rgba(0,29,44,.28)}
.nav__brand{display:flex;align-items:center;gap:10px;color:var(--cream);font-family:var(--font-display);font-weight:400;font-size:1.32rem;letter-spacing:.04em}
.nav__brand svg{width:34px;height:44px;flex:none}
.nav__brand b{font-weight:400;color:var(--yellow)}
.nav__spacer{flex:1}
.nav__links{display:flex;align-items:center;gap:6px}
.nav__links a{
  font-family:var(--font-head);font-weight:600;color:var(--cream);
  padding:.42em .85em;border-radius:var(--r-pill);letter-spacing:.02em;
  position:relative;transition:color .2s,background-color .2s;
}
.nav__links a:hover{background:rgba(255,246,233,.12)}
.nav__links a::after{
  content:"";position:absolute;left:.85em;right:.85em;bottom:.24em;height:3px;
  background:var(--yellow);border-radius:3px;transform:scaleX(0);transform-origin:left;
  transition:transform .25s var(--ease-settle);
}
.nav__links a:hover::after,.nav__links a.is-active::after{transform:scaleX(1)}

/* OPEN / CLOSED indicator pill */
.status-pill{
  display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-head);
  font-weight:700;font-size:.82rem;padding:.4em .85em .4em .7em;border-radius:var(--r-pill);
  background:rgba(0,58,84,.55);color:var(--cream);white-space:nowrap;border:2px solid rgba(255,246,233,.14);
}
.status-pill__dot{width:10px;height:10px;border-radius:50%;flex:none;background:#8a8a8a;position:relative}
.status-pill.is-open .status-pill__dot{background:#37D67A;box-shadow:0 0 0 0 rgba(55,214,122,.65);animation:pulse-dot 2.2s infinite}
.status-pill.is-closed .status-pill__dot{background:var(--red)}
.status-pill small{opacity:.8;font-weight:600}
@keyframes pulse-dot{0%{box-shadow:0 0 0 0 rgba(55,214,122,.6)}70%{box-shadow:0 0 0 9px rgba(55,214,122,0)}100%{box-shadow:0 0 0 0 rgba(55,214,122,0)}}

/* navbar Directions button (right of the OPEN/CLOSED pill) */
.nav__dir{display:inline-flex;align-items:center;gap:.4em;font-family:var(--font-head);font-weight:700;
  font-size:.84rem;color:var(--cream);border:2px solid rgba(255,246,233,.45);
  padding:.42em .95em .42em .82em;border-radius:var(--r-pill);white-space:nowrap;
  transition:transform .18s var(--ease-settle),background-color .2s,border-color .2s}
.nav__dir svg{width:1.05em;height:1.05em;flex:none}
.nav__dir:hover{background:rgba(255,246,233,.12);border-color:var(--cream);transform:translateY(-1px)}

/* hamburger (hand-tuned three-lines → X) */
.nav__burger{display:none;width:46px;height:46px;border-radius:var(--r-sm);position:relative;flex:none}
.nav__burger span{position:absolute;left:11px;right:11px;height:3px;background:var(--cream);border-radius:3px;transition:transform .32s var(--ease-settle),opacity .2s}
.nav__burger span:nth-child(1){top:15px}
.nav__burger span:nth-child(2){top:22px}
.nav__burger span:nth-child(3){top:29px}
.nav.is-menu-open .nav__burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.is-menu-open .nav__burger span:nth-child(2){opacity:0}
.nav.is-menu-open .nav__burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* mobile slide-down panel */
.nav__panel{
  position:fixed;top:var(--nav-h);left:12px;right:12px;z-index:55;
  background:var(--navy);border:2px solid rgba(255,246,233,.14);
  border-radius:var(--r-lg);padding:14px;box-shadow:0 20px 40px rgba(0,29,44,.4);
  display:grid;gap:6px;transform:translateY(-14px);opacity:0;pointer-events:none;
  transition:transform .3s var(--ease-settle),opacity .25s;
  max-height:calc(100vh - var(--nav-h) - 20px);
  max-height:calc(100dvh - var(--nav-h) - 20px);   /* scroll internally on short/landscape screens */
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.nav.is-menu-open .nav__panel{transform:translateY(0);opacity:1;pointer-events:auto}
.nav__panel a{font-family:var(--font-head);font-weight:700;color:var(--cream);padding:.7em 1em;border-radius:var(--r-md);font-size:1.1rem}
.nav__panel a svg{width:1.05em;height:1.05em;vertical-align:-3px;margin-right:.35em}
.nav__panel a:hover{background:rgba(255,246,233,.1)}
.nav__panel .status-pill{margin-top:6px;align-self:flex-start}

/* =====================================================================
   1 — HERO  (navy band flowing out of the intro)
   ===================================================================== */
.hero{
  position:relative;background:var(--navy);color:var(--cream);overflow:hidden;
  padding-top:calc(var(--nav-h) + clamp(24px,5vw,60px));
  padding-bottom:clamp(40px,7vw,90px);min-height:clamp(560px,92vh,860px);min-height:clamp(560px,92svh,860px);
  display:flex;align-items:center;
}
/* NOTE: no `width` here — this element also carries .wrap, which sets the
   gutter width; a competing width:100% would override it and go full-bleed. */
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(20px,4vw,60px);align-items:center}
.hero__eyebrow{margin-bottom:14px}
.hero__title{font-size:clamp(3.1rem,9.5vw,7rem);margin:0 0 .18em}
.hero__title .l2{display:block}
.hero__sub{font-family:var(--font-head);font-weight:600;font-size:clamp(1.05rem,2vw,1.4rem);color:var(--cream);max-width:30ch;opacity:.94;margin:0 0 1.6em}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px}

/* hero rocket + starfield-lite */
.hero__art{position:relative;display:flex;justify-content:center;align-items:center;min-height:340px}
.hero__rocket{width:clamp(220px,34vw,400px);filter:drop-shadow(10px 14px 0 rgba(0,29,44,.35))}
.spark{position:absolute;border-radius:50%;opacity:.0;animation:spark-in .8s ease forwards}
.stars{position:absolute;inset:0;pointer-events:none}
.stars i{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--steel);opacity:.55}
.stars i:nth-child(1){top:12%;left:16%;background:var(--yellow);opacity:.5}
.stars i:nth-child(2){top:26%;right:12%;width:5px;height:5px}
.stars i:nth-child(3){bottom:20%;left:8%;width:8px;height:8px;background:var(--orange);opacity:.4}
.stars i:nth-child(4){bottom:12%;right:20%;background:var(--cream);opacity:.35}

/* =====================================================================
   IDLE ROCKET ANIMATION (shared by hero + delivery)
   slow hover-tilt · flame flicker · occasional puff
   ===================================================================== */
.rk{overflow:visible}   /* let exhaust puffs sit below the flame, not clipped */
.puff{transform-box:fill-box;transform-origin:center}   /* scale/translate per-puff */
.rk-idle{animation:rk-hover 6s ease-in-out infinite;transform-origin:50% 60%}
.rk-idle .rk-flame{transform-origin:50% 62%;animation:flame-flicker 220ms steps(2) infinite}
.rk-idle .rk-smoke .puff{opacity:0}
.rk-idle .rk-smoke .puff-1{animation:puff 5s ease-in-out infinite}
.rk-idle .rk-smoke .puff-2{animation:puff 5s ease-in-out .5s infinite}
.rk-idle .rk-smoke .puff-3{animation:puff 5s ease-in-out 1s infinite}
@keyframes rk-hover{0%,100%{transform:translateY(0) rotate(-3.5deg)}50%{transform:translateY(-14px) rotate(3.5deg)}}
@keyframes flame-flicker{0%{transform:scaleY(1) scaleX(1)}100%{transform:scaleY(.86) scaleX(1.06)}}
@keyframes puff{0%{opacity:0;transform:translate(0,0) scale(.5)}25%{opacity:.8}100%{opacity:0;transform:translate(0,24px) scale(1.2)}}
@keyframes spark-in{to{opacity:.6}}

/* =====================================================================
   2 — MENU  (steel band — the printed card)
   each category = cream card with a navy header pill (yellow title)
   ===================================================================== */
.menu__head{text-align:center;max-width:44ch;margin:0 auto clamp(22px,3vw,38px)}
.menu__head h2{font-size:clamp(2.2rem,5vw,3.4rem)}
.menu__head p{margin:.5em auto 0;max-width:40ch;color:var(--ink)}

/* ---------------------------------------------------------------------
   sticky quick-jump chip bar — two layouts, one set of .chip nodes
   ≥681px  paged strip: main.js §6 packs the chips into pages exactly one
           viewport wide, so a pill is NEVER sliced by the container edge;
           mandatory snap + arrows + dots step a whole page at a time.
   ≤680px  tap-to-open sheet (see RESPONSIVE): the strip would only fit 2
           chips per page on a phone, so the viewport becomes a drop-down
           grid of every category behind a one-line trigger instead.
   --------------------------------------------------------------------- */
/* solid bar + a separate fade BELOW it: the dots row would otherwise sit in the
   old gradient's transparent tail and collide with the cards scrolling under */
.chipbar{position:sticky;top:calc(var(--nav-h) - 2px);z-index:40;padding:10px 0;margin-bottom:14px;
  background:var(--steel)}
.chipbar::after{content:"";position:absolute;left:0;right:0;top:100%;height:16px;pointer-events:none;
  background:linear-gradient(var(--steel),rgba(104,160,177,0))}
.chipbar__row{display:flex;align-items:center;gap:8px}
.chipbar__viewport{flex:1 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  scroll-snap-type:x mandatory;overscroll-behavior-x:contain}
.chipbar__viewport::-webkit-scrollbar{display:none}
.chipbar__track{display:flex;width:100%}
/* one page = exactly the viewport width, so whatever sits in it is whole.
   padding-right leaves room for the last chip's 4px sticker shadow. */
/* the gap has to clear each pill's 4px sticker shadow, or the rows read as
   colliding rather than spaced */
.chipbar__page{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;
  display:flex;align-items:center;justify-content:center;gap:10px;padding:2px 8px 8px 2px}

.chip{flex:none;font-family:var(--font-head);font-weight:700;font-size:.9rem;
  color:var(--navy);background:var(--cream);padding:.5em 1.05em;border-radius:var(--r-pill);
  border:2px solid transparent;box-shadow:var(--sh-navy-sm);transition:transform .18s var(--ease-settle),background-color .2s,color .2s;
  min-height:44px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
.chip:hover{transform:translate(-1px,-1px)}
.chip.is-active{background:var(--navy);color:var(--yellow)}

/* page arrows + dots — only rendered once JS knows there is more than one page */
.chipbar__arrow{flex:none;width:40px;height:40px;border-radius:50%;background:var(--cream);color:var(--navy);
  display:none;place-items:center;box-shadow:3px 3px 0 var(--navy);
  transition:transform .18s var(--ease-settle),box-shadow .18s,opacity .18s}
.chipbar__arrow svg{width:18px;height:18px}
.chipbar__arrow:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--navy)}
.chipbar__arrow:disabled{opacity:.32;box-shadow:none;cursor:default}
.chipbar__dots{display:none;justify-content:center;gap:4px;padding-top:2px}
.chipbar__dot{width:24px;height:18px;display:grid;place-items:center;background:none}
.chipbar__dot::before{content:"";width:8px;height:8px;border-radius:var(--r-pill);
  background:var(--navy);opacity:.34;transition:width .22s var(--ease-settle),opacity .22s}
.chipbar__dot.is-on::before{width:18px;opacity:1}
.chipbar.has-pages .chipbar__arrow{display:grid}
.chipbar.has-pages .chipbar__dots{display:flex}


.menu__grid{columns:2;column-gap:clamp(18px,2.4vw,30px)}
.cat{break-inside:avoid;margin:0 0 clamp(18px,2.4vw,30px);background:var(--cream);
  border-radius:var(--r-lg);box-shadow:6px 6px 0 var(--navy-deep);overflow:hidden;
  /* html sets scroll-padding-top:(nav+12); this adds just the sticky chipbar clearance (they're
     additive). main.js measures the bar into --chipbar-h so the two layouts can't drift apart. */
  scroll-margin-top:var(--chipbar-h,56px)}
.cat__head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  background:var(--navy);color:var(--yellow);padding:.7em 1.1em}
.cat__head h3{font-family:var(--font-head);font-weight:800;font-size:1.5rem;letter-spacing:.01em;color:var(--yellow)}
.cat__note{font-family:var(--font-body);font-weight:600;font-size:.76rem;color:var(--muted);text-transform:none;letter-spacing:.02em}
.cat__unit{font-family:var(--font-head);font-weight:700;color:var(--orange);font-size:.95rem}
.cat__body{padding:.5em .95em .85em}

.item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;
  padding:.5em .35em;border-radius:var(--r-md);transition:background-color .2s}
.item + .item{border-top:1.5px dotted rgba(0,78,111,.22)}
.item:hover{background:linear-gradient(90deg,rgba(246,208,111,.22),rgba(246,208,111,0))}
.item--photo{cursor:pointer}
.item__thumb{width:54px;height:54px;border-radius:50%;flex:none;object-fit:cover;
  background:var(--steel);border:3px solid var(--cream);box-shadow:3px 3px 0 var(--navy);
  outline:2px solid var(--navy)}
.item__thumb--btn{padding:0;line-height:0;border-radius:50%}
.item__thumb--btn:hover{transform:translate(-1px,-1px)}
.item__main{min-width:0;grid-column:2}
.item__name{font-family:var(--font-body);font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  font-size:.92rem;color:var(--navy);display:inline}
.item__desc{display:block;font-weight:500;text-transform:none;letter-spacing:normal;font-size:.8rem;color:var(--muted);margin-top:1px}
.item__price{grid-column:3;font-family:var(--font-head);font-weight:800;font-size:1.02rem;color:var(--navy);white-space:nowrap}
.item__price.is-hot{color:var(--red)}
.item__price small{font-weight:700;font-size:.72em;opacity:.7;margin-left:2px}

/* no-photo rows keep alignment (span into thumb column) */
.item--nophoto .item__main{grid-column:1 / 3}

/* add-on / modifier line inside a category */
.addons{display:flex;flex-wrap:wrap;gap:6px 8px;padding:.55em .35em 0;margin-top:.4em;border-top:1.5px dotted rgba(0,78,111,.22)}
.addon{font-family:var(--font-body);font-weight:600;font-size:.8rem;background:var(--white);color:var(--navy);
  padding:.28em .7em;border-radius:var(--r-pill);border:1.5px solid rgba(0,78,111,.16)}
.addon b{color:var(--red);font-weight:800}
.addons__label{flex-basis:100%;font-family:var(--font-head);font-weight:700;color:var(--navy);font-size:.82rem;text-transform:uppercase;letter-spacing:.08em}

/* Booster-favorite sticker badge */
.fav{display:inline-flex;align-items:center;gap:.35em;font-family:var(--font-head);font-weight:800;
  font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;color:var(--cream);background:var(--red);
  padding:.2em .55em;border-radius:var(--r-pill);box-shadow:2px 2px 0 var(--navy);
  transform:rotate(-6deg);margin-left:.4em;vertical-align:middle;white-space:nowrap}
.fav svg{width:.85em;height:.85em}

/* =====================================================================
   3 — DELIVERY  (cream band)
   ===================================================================== */
.delivery__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,4vw,56px);align-items:center}
.delivery h2{font-size:clamp(2rem,4.6vw,3.1rem);color:var(--navy)}
.delivery h2 .sticker{font-size:1em}
.delivery p{max-width:34ch;color:var(--ink);opacity:.9}
.delivery__art{position:relative;display:flex;justify-content:center}
.delivery__rocket{width:clamp(190px,26vw,320px);filter:drop-shadow(9px 12px 0 rgba(0,78,111,.22))}
.platforms{display:grid;gap:14px}
.platform{display:flex;align-items:center;gap:14px;background:var(--white);border-radius:var(--r-lg);
  padding:1em 1.2em;box-shadow:5px 5px 0 var(--navy);border:2px solid var(--navy);
  transition:transform .18s var(--ease-settle),box-shadow .18s var(--ease-settle)}
.platform:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--navy)}
.platform__icon{width:44px;height:44px;border-radius:var(--r-sm);flex:none;display:grid;place-items:center;color:var(--cream)}
.platform__icon svg{width:24px;height:24px}
.platform__name{font-family:var(--font-display);font-weight:400;font-size:1.5rem;letter-spacing:.03em;color:var(--navy);line-height:1}
.platform__meta{font-family:var(--font-head);font-weight:600;font-size:.82rem;color:var(--muted)}
.platform__go{margin-left:auto;font-family:var(--font-head);font-weight:800;color:var(--red);display:flex;align-items:center;gap:.3em}
.platform.is-soon{opacity:.72}
.platform.is-soon .platform__go{color:var(--steel-deep)}
.platform--wolt .platform__icon{background:var(--navy)}
.platform--foody .platform__icon{background:var(--red)}
.platform--bolt .platform__icon{background:var(--steel-deep)}

/* =====================================================================
   4 — ABOUT  (steel band) — story + carousel
   ===================================================================== */
.about__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,56px);align-items:center}
.about__story h2{font-size:clamp(2rem,4.6vw,3.1rem);margin-bottom:.4em}
.about__story p{color:var(--ink);max-width:42ch}
.about__story p + p{margin-top:1em}
.about__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:1.4em}
.tag{font-family:var(--font-head);font-weight:700;font-size:.82rem;background:var(--navy);color:var(--cream);padding:.32em .9em;border-radius:var(--r-pill)}

/* min-width:0 — without it the grid item takes its min-content size from the
   non-shrinking slides and lays out ~2900px wide, dragging the document into
   horizontal overflow and making any % slide width resolve against the wrong box */
.carousel{position:relative;min-width:0}
.carousel__track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:14px 4px 20px;scrollbar-width:none}
.carousel__track::-webkit-scrollbar{display:none}
.slide{flex:0 0 clamp(210px,42vw,270px);scroll-snap-align:center;aspect-ratio:4/5;
  border-radius:var(--r-lg);overflow:hidden;background:var(--cream);
  border:5px solid var(--cream);box-shadow:7px 7px 0 var(--navy)}
.slide:nth-child(odd){transform:rotate(-2deg)}
.slide:nth-child(even){transform:rotate(2deg)}
.slide img,.slide svg{width:100%;height:100%;object-fit:cover;display:block;border-radius:calc(var(--r-lg) - 6px)}
.carousel__btns{display:flex;gap:10px;justify-content:flex-end;margin-top:6px}
.cbtn{width:48px;height:48px;border-radius:50%;background:var(--cream);color:var(--navy);
  display:grid;place-items:center;box-shadow:4px 4px 0 var(--navy);
  transition:transform .18s var(--ease-settle),box-shadow .18s}
.cbtn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--navy)}
.cbtn svg{width:22px;height:22px}

/* =====================================================================
   5 — CONTACT  (navy band → footer)
   ===================================================================== */
.contact__grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(26px,4vw,56px)}
.contact h2{font-size:clamp(2rem,4.6vw,3.1rem);margin-bottom:.5em}
.info{display:grid;gap:18px}
.info__row{display:flex;gap:14px;align-items:flex-start}
.info__ic{width:40px;height:40px;border-radius:var(--r-sm);flex:none;display:grid;place-items:center;
  background:rgba(255,246,233,.1);color:var(--yellow)}
.info__ic svg{width:22px;height:22px}
.info__row h3{font-family:var(--font-head);font-weight:700;font-size:1.02rem;color:var(--cream);margin-bottom:2px}
.info__row a:hover{color:var(--yellow)}
.info__row p,.info__row a{color:var(--cream);opacity:.9}
.hours-list{display:grid;gap:2px;margin-top:4px}
.hours-list li{display:flex;justify-content:space-between;gap:16px;max-width:260px;font-size:.92rem;opacity:.9}
.hours-list li.is-today{opacity:1;font-weight:700;color:var(--yellow)}
.hours-note{font-size:.8rem;color:var(--orange);margin-top:6px}
.socials{display:flex;gap:12px;margin-top:6px}
.social{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,246,233,.1);color:var(--cream);transition:transform .18s var(--ease-settle),background-color .2s,color .2s}
.social:hover{transform:translate(-2px,-2px);background:var(--yellow);color:var(--navy)}
.social svg{width:22px;height:22px}

.map-card{position:relative;border-radius:var(--r-lg);overflow:hidden;border:4px solid var(--cream);
  box-shadow:8px 8px 0 var(--navy-deep);min-height:340px;background:var(--navy-deep)}
.map-card iframe{width:100%;height:100%;min-height:340px;border:0;display:block;
  filter:grayscale(1) contrast(.92);transition:filter .4s ease}
.map-card::after{content:"";position:absolute;inset:0;background:var(--navy);mix-blend-mode:color;opacity:.55;
  pointer-events:none;transition:opacity .4s ease}
.map-card:hover iframe{filter:grayscale(0) contrast(1)}
.map-card:hover::after{opacity:0}
.map-card__btn{position:absolute;left:14px;bottom:14px;z-index:2}

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer{text-align:center;padding:clamp(40px,6vw,70px) 0 clamp(30px,4vw,46px)}
.footer__rocket{width:52px;margin:0 auto 14px;opacity:.95}
.footer__tag{font-family:var(--font-display);font-weight:400;font-size:1.5rem;color:var(--yellow);letter-spacing:.06em;text-transform:uppercase}
.footer__links{display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:center;margin:16px 0;font-family:var(--font-head);font-weight:600}
.footer__links a:hover{color:var(--yellow)}
.footer__legal{font-size:.85rem;color:var(--cream);opacity:.7;margin-top:10px}
.footer__legal a{color:var(--orange)}

/* =====================================================================
   LIGHTBOX
   ===================================================================== */
.lightbox{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px;
  background:rgba(0,29,44,.72);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .25s}
.lightbox.is-open{opacity:1;pointer-events:auto}
.lightbox__card{background:var(--cream);border-radius:var(--r-lg);border:5px solid var(--cream);
  box-shadow:10px 10px 0 var(--navy-deep);max-width:420px;width:100%;overflow:hidden;
  transform:scale(.9);transition:transform .3s var(--ease-settle)}
.lightbox.is-open .lightbox__card{transform:scale(1)}
.lightbox__img{aspect-ratio:1;width:100%;object-fit:cover;background:var(--steel)}
.lightbox__body{padding:16px 20px 22px;position:relative}
.lightbox__body h3{font-family:var(--font-head);font-weight:800;font-size:1.5rem;color:var(--navy)}
.lightbox__price{font-family:var(--font-head);font-weight:800;color:var(--red);font-size:1.2rem}
.lightbox__desc{color:var(--ink);margin-top:6px;font-size:.95rem}
.lightbox__close{position:absolute;top:-58px;right:0;width:44px;height:44px;border-radius:50%;
  background:var(--cream);color:var(--navy);display:grid;place-items:center;box-shadow:4px 4px 0 var(--navy-deep)}
.lightbox__close svg{width:22px;height:22px}

/* =====================================================================
   INTRO OVERLAY (showpiece)  — 6-beat storyboard:
   1 navy fills viewport · 2 rocket arcs in from bottom-left, banking,
   flame flicker, smoke puffs · 3 loops once round centre · 4 exits
   top-right as lockup words snap in (sticker settle) · 5 hold ~600ms ·
   6 navy wipes up and becomes the hero. Total ~3.1s.
   ===================================================================== */
.intro{position:fixed;inset:0;z-index:100;background:var(--navy);overflow:hidden;
  display:grid;place-items:center}
html:not(.js) .intro{display:none}   /* no-JS: never trap the page behind the overlay */
/* full-bleed decorative layer — must be absolute so it isn't a grid item that
   would offset the centred lockup */
.intro__stars{position:absolute;inset:0;pointer-events:none}
.intro__stars i{position:absolute;border-radius:50%;background:var(--steel);opacity:.4}
/* centred flight: rocket arcs in, loops once around the SCREEN CENTRE, then
   exits top-right. transform/vw-vh based so it stays centred & scales on any
   viewport (px-coordinate offset-path can't self-centre). */
.intro__rocket{position:absolute;left:50%;top:50%;width:clamp(150px,20vw,260px);
  transform:translate(-50%,-50%);will-change:transform,opacity;
  animation:rk-fly 2.6s linear forwards}
.intro__rocket .rk-flame{transform-origin:50% 62%;animation:flame-flicker 200ms steps(2) infinite}
/* SMOOTH centred loop around the screen centre — arc-length sampled for
   even speed, linear timing (no per-key stutter).
   Generated by build/flight_path.py — do not hand-edit. */
@keyframes rk-fly{
  0%{opacity:0;transform:translate(-50%,-50%) translate(-70.0vw,58.0vh) rotate(50.4deg)}
  2.08%{transform:translate(-50%,-50%) translate(-65.0vw,53.9vh) rotate(50.4deg)}
  4.17%{transform:translate(-50%,-50%) translate(-60.1vw,49.8vh) rotate(50.4deg)}
  5%{opacity:1}
  6.25%{transform:translate(-50%,-50%) translate(-55.1vw,45.7vh) rotate(50.4deg)}
  8.33%{transform:translate(-50%,-50%) translate(-50.2vw,41.6vh) rotate(50.4deg)}
  10.42%{transform:translate(-50%,-50%) translate(-45.2vw,37.5vh) rotate(50.4deg)}
  12.5%{transform:translate(-50%,-50%) translate(-40.3vw,33.4vh) rotate(50.4deg)}
  14.58%{transform:translate(-50%,-50%) translate(-35.3vw,29.3vh) rotate(50.4deg)}
  16.67%{transform:translate(-50%,-50%) translate(-30.4vw,25.2vh) rotate(50.4deg)}
  18.75%{transform:translate(-50%,-50%) translate(-25.4vw,21.1vh) rotate(50.4deg)}
  20.83%{transform:translate(-50%,-50%) translate(-20.5vw,17.0vh) rotate(50.4deg)}
  22.92%{transform:translate(-50%,-50%) translate(-15.5vw,12.9vh) rotate(50.4deg)}
  25%{transform:translate(-50%,-50%) translate(-10.6vw,8.8vh) rotate(50.4deg)}
  27.08%{transform:translate(-50%,-50%) translate(-5.6vw,4.7vh) rotate(50.4deg)}
  29.17%{transform:translate(-50%,-50%) translate(-0.7vw,0.6vh) rotate(66.6deg)}
  31.25%{transform:translate(-50%,-50%) translate(5.3vw,-0.0vh) rotate(110.2deg)}
  33.33%{transform:translate(-50%,-50%) translate(9.8vw,4.4vh) rotate(149.4deg)}
  35.42%{transform:translate(-50%,-50%) translate(11.5vw,10.5vh) rotate(175.6deg)}
  37.5%{transform:translate(-50%,-50%) translate(10.7vw,16.9vh) rotate(197.5deg)}
  39.58%{transform:translate(-50%,-50%) translate(7.7vw,22.5vh) rotate(218.1deg)}
  41.67%{transform:translate(-50%,-50%) translate(2.9vw,26.8vh) rotate(238.4deg)}
  43.75%{transform:translate(-50%,-50%) translate(-3.0vw,29.1vh) rotate(258.7deg)}
  45.83%{transform:translate(-50%,-50%) translate(-9.4vw,29.3vh) rotate(278.8deg)}
  47.92%{transform:translate(-50%,-50%) translate(-15.5vw,27.2vh) rotate(298.2deg)}
  50%{transform:translate(-50%,-50%) translate(-20.5vw,23.3vh) rotate(316.5deg)}
  52.08%{transform:translate(-50%,-50%) translate(-24.2vw,18.0vh) rotate(334.0deg)}
  54.17%{transform:translate(-50%,-50%) translate(-26.1vw,11.9vh) rotate(350.9deg)}
  56.25%{transform:translate(-50%,-50%) translate(-26.2vw,5.5vh) rotate(367.9deg)}
  58.33%{transform:translate(-50%,-50%) translate(-24.3vw,-0.6vh) rotate(386.0deg)}
  60.42%{transform:translate(-50%,-50%) translate(-20.6vw,-5.9vh) rotate(406.0deg)}
  62.5%{transform:translate(-50%,-50%) translate(-15.3vw,-9.4vh) rotate(429.2deg)}
  64.58%{transform:translate(-50%,-50%) translate(-9.0vw,-10.3vh) rotate(456.5deg)}
  66.67%{transform:translate(-50%,-50%) translate(-3.1vw,-8.0vh) rotate(489.4deg)}
  68.75%{transform:translate(-50%,-50%) translate(0.3vw,-2.7vh) rotate(493.2deg)}
  70.83%{transform:translate(-50%,-50%) translate(2.8vw,-2.4vh) rotate(423.0deg)}
  72.92%{transform:translate(-50%,-50%) translate(7.8vw,-6.5vh) rotate(410.2deg)}
  75%{transform:translate(-50%,-50%) translate(12.7vw,-10.6vh) rotate(410.2deg)}
  77.08%{transform:translate(-50%,-50%) translate(17.7vw,-14.7vh) rotate(410.2deg)}
  79.17%{transform:translate(-50%,-50%) translate(22.6vw,-18.8vh) rotate(410.2deg)}
  81.25%{transform:translate(-50%,-50%) translate(27.5vw,-23.0vh) rotate(410.2deg)}
  83.33%{transform:translate(-50%,-50%) translate(32.5vw,-27.1vh) rotate(410.2deg)}
  85.42%{transform:translate(-50%,-50%) translate(37.4vw,-31.2vh) rotate(410.2deg)}
  87.5%{transform:translate(-50%,-50%) translate(42.4vw,-35.3vh) rotate(410.2deg)}
  89.58%{transform:translate(-50%,-50%) translate(47.3vw,-39.4vh) rotate(410.2deg)}
  90%{opacity:1}
  91.67%{transform:translate(-50%,-50%) translate(52.2vw,-43.5vh) rotate(410.2deg)}
  93.75%{transform:translate(-50%,-50%) translate(57.2vw,-47.7vh) rotate(410.2deg)}
  95.83%{transform:translate(-50%,-50%) translate(62.1vw,-51.8vh) rotate(410.2deg)}
  97.92%{transform:translate(-50%,-50%) translate(67.1vw,-55.9vh) rotate(410.2deg)}
  100%{transform:translate(-50%,-50%) translate(72.0vw,-60.0vh) rotate(410.2deg);opacity:0}
}
/* intro smoke trail puffs popped along the way */
.intro__puff{position:absolute;border-radius:50%;background:var(--cream);opacity:0}
.intro__lock{position:relative;text-align:center;opacity:0}
.intro__lock.show{opacity:1}
.intro__lock .l{display:block;opacity:0;transform:translateY(18px) scale(.86)}
.intro__lock.show .l{animation:word-land .5s var(--ease-settle) forwards}
.intro__lock .l1{font-family:var(--font-display);font-weight:900;color:var(--cream);
  -webkit-text-stroke:2px var(--red);paint-order:stroke;text-shadow:var(--sh-navy-sm);
  font-size:clamp(1.6rem,5vw,3rem);letter-spacing:.06em;animation-delay:.02s}
.intro__lock .l2{font-family:var(--font-display);font-weight:900;color:var(--cream);
  -webkit-text-stroke:3px var(--red);paint-order:stroke;text-shadow:5px 5px 0 var(--navy-deep);
  font-size:clamp(2.5rem,12.5vw,8rem);letter-spacing:.02em;line-height:.9;animation-delay:.16s}
.intro__lock .l3{font-family:var(--font-head);font-weight:700;color:var(--yellow);
  font-size:clamp(.9rem,3vw,1.6rem);letter-spacing:.34em;margin-top:.3em;animation-delay:.34s}
@keyframes word-land{60%{opacity:1;transform:translateY(-3px) scale(1.03)}100%{opacity:1;transform:translateY(0) scale(1)}}

.intro__skip{position:absolute;bottom:calc(22px + env(safe-area-inset-bottom));right:calc(22px + env(safe-area-inset-right));font-family:var(--font-head);font-weight:700;
  color:var(--cream);opacity:0;background:rgba(255,246,233,.1);padding:.5em 1.1em;border-radius:var(--r-pill);
  border:2px solid rgba(255,246,233,.2);transition:opacity .4s,background-color .2s}
.intro__skip.show{opacity:.8}
.intro__skip:hover{opacity:1;background:rgba(255,246,233,.18)}

/* wipe-up exit — navy band lifts and becomes the page */
.intro.lift{animation:intro-lift .6s cubic-bezier(.7,0,.3,1) forwards}
@keyframes intro-lift{to{transform:translateY(-100%)}}
.intro.hide{display:none}

/* =====================================================================
   REVEAL / CHOREOGRAPHY (IntersectionObserver adds .in)
   different direction/character per section, same sticker family
   ===================================================================== */
/* hidden state only applies when JS is present (no-JS degrades to visible) */
.js [data-reveal]{opacity:0;transition:opacity .6s ease,transform .6s var(--ease-settle)}
.js [data-reveal="up"]{transform:translateY(34px)}
.js [data-reveal="left"]{transform:translateX(-40px)}
.js [data-reveal="right"]{transform:translateX(40px)}
.js [data-reveal="pop"]{transform:scale(.82)}
.js [data-reveal].in{opacity:1;transform:none}
[data-reveal-delay="1"]{transition-delay:.08s}
[data-reveal-delay="2"]{transition-delay:.16s}
[data-reveal-delay="3"]{transition-delay:.24s}

/* category heading underline draw-in */
.cat__head h3{position:relative}
.cat.in .cat__rule{transform:scaleX(1)}
.cat__rule{display:block;height:3px;background:var(--orange);border-radius:3px;margin:.3em .95em 0;
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-settle) .1s}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:960px){
  .hero__grid{grid-template-columns:1fr;text-align:center;gap:10px}
  .hero__sub{margin-inline:auto}
  .hero__cta{justify-content:center}
  .hero__art{order:-1;min-height:260px}
  .delivery__grid,.about__grid,.contact__grid{grid-template-columns:1fr}
  .delivery__art{order:-1}
  .map-card{min-height:300px}
}
/* short landscape phones — keep hero side-by-side so headline + CTAs fit the short height */
@media (orientation:landscape) and (max-height:520px){
  .hero{min-height:auto;padding-top:calc(var(--nav-h) + 14px);padding-bottom:22px}
  .hero__grid{grid-template-columns:1.1fr .9fr;text-align:left;gap:clamp(16px,3vw,40px)}
  .hero__sub{margin-inline:0}
  .hero__cta{justify-content:flex-start}
  .hero__art{order:0;min-height:0}
  .hero__rocket{width:clamp(120px,20vh,180px)}
}
/* below 1000px the full desktop cluster (links + status pill + Directions) no longer fits → hamburger */
@media (max-width:1000px){
  .nav__links,.nav .status-pill.desktop,.nav__dir.desktop{display:none}
  .nav__burger{display:block}
}
@media (min-width:1001px){
  .nav__panel{display:none}
}
@media (max-width:680px){
  .menu__grid{columns:1}
  .hero__title{font-size:clamp(2.8rem,13vw,4.4rem)}
  .item__thumb{width:48px;height:48px}
  .lightbox__close{top:auto;bottom:-58px;right:50%;transform:translateX(50%)}

  /* PHONE CHIP BAR — width-packing only fits ~2 pills per page at this size, so
     a page becomes a fixed 2x2 block of exactly 4 categories instead. main.js §6
     brings up whichever block holds the category you have scrolled to, and the
     arrows give way to the dots + swipe (there is no room for them here). */
  .chipbar{padding:8px 0}
  .chipbar.has-pages .chipbar__arrow{display:none}
  .chipbar__page{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:stretch;gap:13px 12px;padding:3px 10px 10px 3px}
  .chipbar__track .chip{width:100%;justify-content:flex-start;text-align:left;white-space:normal;
    font-size:.86rem;padding:.5em .85em;min-height:46px}
  .chipbar__track .chip:hover{transform:none}

  /* CAROUSEL — one photo, centred, at a time.
     flex-basis:100% makes a slide exactly the track's content box, so snapping
     it to CENTRE puts the first and last slides dead centre too (the maths
     cancels for any padding) — no edge case where slide 1 sits jammed left with
     the next one sliced in half. The side padding gives the 2deg tilt and the
     7px sticker shadow room, and the wider gap parks the neighbours fully
     off-screen instead of letting a tilted corner peek in.
     A full-width 4:5 slide would be 786px tall at the top of this range, so the
     height is set outright and the img (object-fit:cover) crops instead. */
  .carousel__track{gap:24px;padding:14px 14px 20px}
  .slide{flex:0 0 100%;aspect-ratio:auto;height:min(58vh,440px)}
  .carousel__btns{justify-content:center}
}
@media (max-width:400px){
  .nav__brand-text{display:none}   /* hide only the wordmark, keep the rocket mark */
  .item{gap:9px}
}
@media (max-width:380px){
  .hero__title{font-size:clamp(2.3rem,12vw,4.4rem)}   /* stop the sticker H1 clipping on 280–360px */
}
@media (max-width:360px){
  .item__thumb{width:44px;height:44px}
  .item{gap:8px}
  .item__name{letter-spacing:.03em;font-size:.88rem}
  /* stay 2x2 (stacking 4 would make the sticky bar ~210px tall) — shrink the
     type instead so the longest name still sits on one line in a ~131px cell */
  .chipbar__track .chip{font-size:.8rem;padding:.45em .7em;min-height:44px}
}
/* very wide screens — step the content column up so the bands aren't mostly empty colour */
@media (min-width:1600px){:root{--wrap:1320px}}
@media (min-width:2200px){:root{--wrap:1500px} .divider{height:clamp(56px,3.6vw,88px)}}

/* =====================================================================
   REDUCED MOTION — disable all non-essential motion globally
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .rk-idle,.rk-idle #flame,.rk-idle .puff{animation:none !important}
  [data-reveal]{opacity:1 !important;transform:none !important}
  .intro__rocket{display:none}
  .intro__lock,.intro__lock .l{opacity:1 !important;transform:none !important;animation:none !important}
}