/* ═══════════════════════════════════════════════════════════════════════════
   MYTH · Legendary Kitchen · mythkitchen.com · 6 Oct 2026
   The website in the language of the two-TV menu (version 2, R54): a warm night room, three
   lamps, thick glass with a molten edge, cream type, Bricolage for names and prices, Newsreader
   italic for taste words, Jost for labels, Sofia Sans for the Greek.
   One hot colour, used once per screen: the red-orange marks the one thing to press (BR-1).
   Phone first. Every animation stops for visitors who ask their device for less motion.
   ═══════════════════════════════════════════════════════════════════════════ */

/* letters that Jost and Newsreader lack (ā ī ō ū, ʻ) come from system faces, so Kīhei never breaks */
@font-face{font-family:'MythSansX';font-weight:400;unicode-range:U+0100-017F,U+02BB;src:local('Avenir Next Regular'),local('AvenirNext-Regular'),local('Segoe UI'),local('Roboto'),local('Helvetica Neue'),local('Arial')}
@font-face{font-family:'MythSansX';font-weight:500;unicode-range:U+0100-017F,U+02BB;src:local('Avenir Next Medium'),local('AvenirNext-Medium'),local('Segoe UI Semibold'),local('Roboto Medium'),local('Helvetica Neue Medium'),local('Arial')}
@font-face{font-family:'MythSerifX';font-style:normal;unicode-range:U+012A-012B,U+02BB;src:local('Times New Roman'),local('TimesNewRomanPSMT'),local('Georgia'),local('Noto Serif')}
@font-face{font-family:'MythSerifX';font-style:italic;unicode-range:U+012A-012B,U+02BB;src:local('Times New Roman Italic'),local('TimesNewRomanPS-ItalicMT'),local('Georgia Italic'),local('Noto Serif Italic')}

:root{
  color-scheme:dark;
  --ground:#0b0604; --room:#130906;
  --cream:#fff4e6; --c2:rgba(255,236,220,.84); --c3:rgba(255,236,220,.62); --c4:rgba(255,236,220,.42);
  --hair:rgba(255,236,220,.12);
  --amber:#ffb35c; --amber-pale:#ffd0a0; --glow:rgba(232,104,44,.5);
  --hot:#b8380e; --hot-lo:#962a08; --hot-hi:#d4511f;
  --aeg-l:#6cc8f5; --hib-l:#ff86b0;
  --flame:255,138,44; --flame-hi:255,206,152;
  --aeg:40,160,245; --aeg-hi:184,226,255;
  --hib:255,70,140; --hib-hi:255,190,220;
  --display:'Bricolage Grotesque','MythSansX','Helvetica Neue',Arial,sans-serif;
  --serif:'MythSerifX','Newsreader',Georgia,'Times New Roman',serif;
  --label:'MythSansX','Jost','Avenir Next','Helvetica Neue',Arial,sans-serif;
  --greek:'Sofia Sans Extra Condensed','Helvetica Neue',Arial,sans-serif;
  --gutter:clamp(16px,4.6vw,56px);
  --wrap:1240px;
  --r-xl:34px; --r-lg:28px; --r-md:20px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ground);-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{min-height:100vh;background:transparent;color:var(--cream);font-family:var(--display);font-size:17px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;font-synthesis:none}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--amber);outline-offset:4px;border-radius:12px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:calc(var(--wrap) + var(--gutter) * 2);margin:0 auto;padding-inline:var(--gutter)}
::selection{background:rgba(255,142,40,.38);color:#fff}

/* ── type voices ── */
.it{font-family:var(--serif);font-style:italic;font-weight:400}
.gk{font-family:var(--greek);font-weight:900;text-transform:uppercase;letter-spacing:.06em}
.kick{font-family:var(--label);font-weight:500;font-size:13px;line-height:1.3;letter-spacing:.28em;text-transform:uppercase;color:var(--amber)}
.nm{font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 78,'opsz' 96;line-height:.88;letter-spacing:-.02em;text-transform:uppercase;color:var(--cream)}
.num{font-variant-numeric:lining-nums tabular-nums}
.dot{opacity:.42;padding:0 .14em}
.i{white-space:nowrap}
.s-title{font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 80,'opsz' 96;font-size:clamp(44px,8.2vw,96px);line-height:.9;letter-spacing:-.025em;text-transform:uppercase;text-wrap:balance}
.s-title b{font-weight:inherit;color:var(--amber);text-shadow:0 0 34px var(--glow)}
.s-lede{font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.2vw,24px);line-height:1.4;color:var(--c2);max-width:36ch;text-wrap:pretty}
.s-head{display:grid;gap:18px;margin-bottom:clamp(28px,5vw,56px)}
.gloss{font-family:var(--label);font-weight:500;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--c3)}

/* ── the neon lockup: MYTH, with LEGENDARY KITCHEN at exactly its width (tv.js lockups) ── */
.lock{display:inline-flex;flex-direction:column;align-items:center;gap:.12em}
.lock .w{font-family:var(--label);font-weight:500;letter-spacing:.29em;margin-right:-.29em;line-height:.82;display:inline-block}
.lock .sub{font-family:var(--label);font-weight:500;line-height:1;color:var(--c2);display:flex;justify-content:space-between}
.lock .sub .ch{display:block}.lock .sub .sp{width:.5em;flex:none}
.neon{color:#fff0d6;text-shadow:0 0 1px #fff,0 0 5px #ffd79a,0 0 14px rgba(255,170,80,.95),0 0 34px rgba(255,140,50,.7),0 0 72px rgba(255,115,35,.42)}

/* ══ THE ROOM · night, three lamps, grain. Fixed behind everything. ══ */
.room{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;
  background:radial-gradient(120% 70% at 10% -10%,rgba(255,150,70,.10),transparent 60%),linear-gradient(170deg,#1a0d08 0%,#110805 40%,#0a0503 100%)}
.lamp{position:absolute;border-radius:50%;filter:blur(10px);will-change:transform;opacity:.95}
.lamp.f{width:90vmax;height:90vmax;left:-38vmax;top:-34vmax;background:radial-gradient(closest-side,rgba(255,138,40,.42),rgba(255,110,30,.14) 46%,transparent);animation:drift-a 26s var(--ease) infinite alternate}
.lamp.a{width:70vmax;height:70vmax;right:-34vmax;top:38vh;background:radial-gradient(closest-side,rgba(40,150,236,.20),transparent 70%);animation:drift-b 31s var(--ease) infinite alternate}
.lamp.h{width:60vmax;height:60vmax;left:-20vmax;bottom:-36vmax;background:radial-gradient(closest-side,rgba(255,58,128,.16),transparent 70%);animation:drift-a 34s var(--ease) infinite alternate-reverse}
@keyframes drift-a{to{transform:translate3d(6vmax,4vmax,0) scale(1.06)}}
@keyframes drift-b{to{transform:translate3d(-5vmax,-6vmax,0) scale(1.08)}}
.grain{position:fixed;inset:-50%;z-index:-1;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
/* the light that follows the visitor's pointer across the room (desktop) */
.torch{position:fixed;left:0;top:0;width:640px;height:640px;margin:-320px 0 0 -320px;z-index:-1;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,170,90,.10),transparent 70%);transform:translate3d(var(--tx,-999px),var(--ty,-999px),0);transition:opacity .6s}

/* ══ GLASS · the TV panels' material, thick with a molten edge ══ */
.glass{position:relative;isolation:isolate;border-radius:var(--r-lg);--rim:var(--flame);--hi:var(--flame-hi);--halo:.36;
  background:
    radial-gradient(120% 60% at 0% 0%,rgba(var(--rim),.13) 0%,transparent 58%),
    radial-gradient(90% 50% at 100% 100%,rgba(var(--rim),.07) 0%,transparent 62%),
    linear-gradient(180deg,rgba(24,12,8,.78) 0%,rgba(11,6,4,.86) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(var(--hi),.26),
    inset 0 0 0 9px rgba(var(--rim),.05),
    inset 0 0 26px 1px rgba(var(--rim),.26),
    inset 0 0 120px -36px rgba(var(--rim),.26),
    0 0 0 1px rgba(0,0,0,.55),
    0 0 30px -6px rgba(var(--rim),var(--halo)),
    0 0 110px 0 rgba(var(--rim),calc(var(--halo) * .36)),
    0 40px 70px -34px rgba(0,0,0,.9)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.6px;pointer-events:none;z-index:2;
  background:linear-gradient(156deg,rgba(var(--hi),1) 0%,rgba(var(--hi),.7) 9%,rgba(var(--rim),.5) 24%,rgba(var(--rim),.24) 46%,rgba(var(--rim),.26) 72%,rgba(var(--hi),.6) 93%,rgba(var(--hi),.82) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
/* the sheen: a highlight that follows the pointer over the glass (set by site.js as --mx/--my) */
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;opacity:var(--sheen,0);transition:opacity .5s var(--ease);
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(var(--hi),.10),transparent 60%)}
.glass:hover{--sheen:1}
.glass.aeg{--rim:var(--aeg);--hi:var(--aeg-hi);--halo:.42}
.glass.hib{--rim:var(--hib);--hi:var(--hib-hi);--halo:.42}
.glass > *{position:relative;z-index:3}

/* ══ PRICES AND BUTTONS ══ */
/* the calm pill: dark glass, a thin rim in the category's light, cream numerals (PILL-1, R51) */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:.3em;flex:none;border-radius:999px;
  font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 88,'opsz' 40;letter-spacing:-.02em;line-height:1;color:var(--cream);
  padding:.12em .46em .15em;min-width:1.9em;--pr:255,184,112;
  background:linear-gradient(180deg,rgba(48,26,15,.94),rgba(18,9,5,.97));
  box-shadow:inset 0 0 0 1.5px rgba(var(--pr),.58),inset 0 2px 0 rgba(255,244,230,.18),inset 0 0 16px rgba(var(--pr),.16),0 1px 3px rgba(0,0,0,.55)}
.pill .k{font-size:.56em;letter-spacing:.1em;text-transform:uppercase;opacity:.9}
.pill.aeg{--pr:140,206,255;background:linear-gradient(180deg,rgba(14,34,54,.94),rgba(6,14,24,.97))}
.pill.hib{--pr:255,160,200;background:linear-gradient(180deg,rgba(52,14,30,.94),rgba(22,6,12,.97))}
.pill.lit{box-shadow:inset 0 0 0 1.5px rgba(255,196,128,.9),inset 0 2px 0 rgba(255,244,230,.26),inset 0 0 22px rgba(255,150,60,.28),0 0 34px -4px rgba(232,104,44,.62)}

/* buttons. .btn-hot is the one red-orange thing on a screen: the order button (BR-1) */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:50px;padding:0 26px;border-radius:999px;
  font-family:var(--label);font-weight:500;font-size:14px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),background .35s var(--ease-out);will-change:transform}
.btn .ar{display:inline-block;transition:transform .35s var(--ease-out)}
.btn:hover .ar{transform:translateX(4px)}
.btn-hot{color:#fff6ec;text-shadow:0 1px 1px rgba(80,24,4,.35);
  background:
    linear-gradient(180deg,rgba(255,238,214,.30) 0%,rgba(255,206,160,.06) 30%,rgba(255,160,80,.04) 56%,rgba(255,132,54,.28) 100%),
    rgba(234,106,42,.30);
  -webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%);
  box-shadow:
    inset 0 1px .5px rgba(255,250,242,.70),
    inset 0 -1px .5px rgba(255,204,160,.26),
    inset 0 0 0 1px rgba(255,192,132,.58),
    inset 0 -12px 20px -12px rgba(255,146,64,.56),
    0 8px 26px -10px rgba(236,110,46,.62),
    0 1px 2px rgba(0,0,0,.22)}
.btn-hot:hover{background:
    linear-gradient(180deg,rgba(255,242,220,.36) 0%,rgba(255,210,166,.08) 30%,rgba(255,166,86,.06) 56%,rgba(255,140,60,.34) 100%),
    rgba(240,116,46,.38);
  box-shadow:
    inset 0 1px .5px rgba(255,250,242,.72),
    inset 0 -1px .5px rgba(255,200,156,.26),
    inset 0 0 0 1px rgba(255,190,128,.58),
    inset 0 -12px 22px -12px rgba(255,136,56,.52),
    0 10px 30px -10px rgba(232,104,44,.62),
    0 1px 2px rgba(0,0,0,.22)}
/* a slow, faint light passing over the glass */
.btn-hot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 34%,rgba(255,244,232,.16) 48%,transparent 62%) no-repeat;background-size:260% 100%;background-position:130% 0;animation:shine 7s var(--ease) infinite 2.5s}
@keyframes shine{0%,78%{background-position:130% 0}100%{background-position:-60% 0}}
.btn-glass{color:var(--cream);background:linear-gradient(180deg,rgba(255,240,220,.10),rgba(255,240,220,.03));
  -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
  box-shadow:inset 0 1px .5px rgba(255,248,238,.40),inset 0 0 0 1px rgba(255,206,152,.28),0 8px 24px -14px rgba(0,0,0,.7)}
.btn-glass:hover{background:linear-gradient(180deg,rgba(255,240,220,.14),rgba(255,240,220,.05))}
.btn:active{transform:scale(.97)}
.no-order [data-order]{display:none!important}

/* ══ NAV · a floating glass bar ══ */
.nav{position:fixed;top:12px;left:0;right:0;z-index:50;pointer-events:none}
.nav .bar{pointer-events:auto;display:flex;align-items:center;gap:12px;height:62px;padding:0 10px 0 22px;border-radius:999px;
  background:linear-gradient(180deg,rgba(30,15,9,.62),rgba(14,7,4,.70));-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
  box-shadow:inset 0 0 0 1px rgba(255,206,152,.18),inset 0 1px 0 rgba(255,244,230,.14),0 16px 40px -18px rgba(0,0,0,.8);
  transition:transform .5s var(--ease-out),background .5s}
.nav .brand .w{font-size:24px}
.nav .brand .sub{font-size:6.5px}
.nav .links{display:none;align-items:center;gap:6px;margin-left:auto}
.nav .links a{font-family:var(--label);font-weight:500;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--c2);padding:10px 14px;border-radius:999px;transition:color .3s,background .3s}
.nav .links a:hover,.nav .links a[aria-current="page"]{color:var(--cream);background:rgba(255,240,220,.07)}
.nav .btn{min-height:42px;padding:0 20px;font-size:12px;margin-left:auto}
.nav.hide .bar{transform:translateY(-120%)}
@media (min-width:860px){.nav .links{display:flex}.nav .bar{padding-left:26px}.nav .links + .btn{margin-left:8px}}
/* with Order online off, the pill would repeat the Menu link beside it on wide screens; phones keep it, their only menu link (11 Oct) */
@media (min-width:860px){.nav .nav-menu{display:none}}

/* ══ REVEAL ON SCROLL · only once JavaScript is running, so nothing is ever hidden without it ══ */
.js [data-reveal]{opacity:0;transform:translate3d(0,34px,0);filter:blur(6px);transition:opacity 1s var(--ease-out),transform 1.1s var(--ease-out),filter 1s var(--ease-out);transition-delay:calc(var(--d,0) * 90ms)}
.js [data-reveal].in{opacity:1;transform:none;filter:none}

/* ══ HERO ══ */
.hero{position:relative;min-height:100svh;display:grid;align-items:center;padding:112px 0 64px}
.hero .wrap{display:grid;gap:36px;align-items:center}
.hero .lede{display:grid;gap:22px;justify-items:start}
.hero .where{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.hero .lock .w{font-size:clamp(78px,17vw,184px)}
.hero .lock .sub{font-size:clamp(11px,2.3vw,25px)}
.hero h1{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(31px,4.6vw,58px);line-height:1.08;letter-spacing:-.005em;color:var(--cream);max-width:19ch;text-wrap:balance;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.hero .triad{font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 90,'opsz' 40;font-size:clamp(14px,1.5vw,18px);letter-spacing:.06em;text-transform:uppercase;color:var(--amber);text-shadow:0 0 18px var(--glow)}
.hero .triad .dot{color:var(--cream)}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.hero .meta{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;margin-top:4px;font-family:var(--label);font-weight:500;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--c2)}
.status{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.status i{width:9px;height:9px;border-radius:50%;background:#7a6a5c;box-shadow:0 0 0 3px rgba(255,255,255,.05)}
.status.open i{background:#5be08a;box-shadow:0 0 0 3px rgba(91,224,138,.16),0 0 14px rgba(91,224,138,.8);animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(91,224,138,.06),0 0 22px rgba(91,224,138,.9)}}
.stars{color:var(--amber);letter-spacing:.06em}
/* neon ignition on arrival: the tubes catch, flicker, then hold */
.js .ignite .w{animation:ignite 1.8s steps(1,end) .2s both}
@keyframes ignite{0%{opacity:.08;text-shadow:none}8%{opacity:.9}10%{opacity:.15}16%{opacity:1}18%{opacity:.4}24%{opacity:1}26%{opacity:.6}30%,100%{opacity:1}}
.js .ignite .sub{animation:fade-up 1.2s var(--ease-out) .9s both}
@keyframes fade-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* the statue: ΜΥΘΟΣ on his plinth under a spotlight, tilting with the visitor (site.js) */
.statue{position:relative;justify-self:center;width:min(86vw,520px);perspective:1100px}
.statue .spot{position:absolute;left:50%;top:-14%;width:min(120%,100vw);height:110%;transform:translateX(-50%);pointer-events:none;   /* never wider than the screen: at 120% it pushed phones 6 px sideways (11 Oct) */
  background:radial-gradient(48% 52% at 50% 40%,rgba(255,196,128,.34),rgba(255,160,80,.12) 46%,transparent 74%)}
.statue .paint-p,.statue .paint-b{position:absolute;width:56%;height:56%;border-radius:50%;filter:blur(20px);pointer-events:none}
.statue .paint-p{left:-6%;top:18%;background:radial-gradient(closest-side,rgba(255,58,128,.30),transparent)}
.statue .paint-b{right:-8%;top:44%;background:radial-gradient(closest-side,rgba(28,150,236,.28),transparent)}
.statue .bust{position:relative;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--py,0px));transition:transform .9s var(--ease-out)}
.statue .bust img{width:100%;height:auto;aspect-ratio:640/612;object-fit:cover;
  -webkit-mask-image:radial-gradient(ellipse 54% 60% at 52% 44%,#000 58%,transparent 100%),radial-gradient(ellipse 46% 30% at 50% 100%,#000 50%,transparent 100%);-webkit-mask-composite:source-over;
          mask-image:radial-gradient(ellipse 54% 60% at 52% 44%,#000 58%,transparent 100%),radial-gradient(ellipse 46% 30% at 50% 100%,#000 50%,transparent 100%);mask-composite:add;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
.plinth{position:relative;z-index:2;width:72%;margin:-6px auto 0;padding:16px 18px 14px;border-radius:10px 10px 5px 5px;text-align:center;
  background:linear-gradient(180deg,rgba(34,16,9,.96),rgba(14,7,4,.98));
  box-shadow:inset 0 2px 0 rgba(255,236,214,.16),inset 0 -3px 0 rgba(0,0,0,.6),0 -26px 40px -20px rgba(0,0,0,.75),0 24px 40px -18px rgba(0,0,0,.9)}
.plinth .gk{display:block;font-size:clamp(26px,3vw,36px);letter-spacing:.32em;margin-right:-.32em;line-height:1;color:var(--amber-pale);
  text-shadow:0 -1px 0 rgba(0,0,0,.9),0 1px 0 rgba(255,240,220,.18),0 0 18px rgba(255,160,70,.35)}
.plinth .gloss{display:block;margin-top:8px;font-size:10.5px}
@media (min-width:960px){
  .hero .wrap{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:40px}
  .statue{width:100%;max-width:520px}
}
.scroll-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:grid;justify-items:center;gap:8px;font-family:var(--label);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--c3)}
.scroll-cue span{width:1px;height:38px;background:linear-gradient(var(--amber),transparent);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-height:720px){.scroll-cue{display:none}}

/* ══ THE BAND · a slow ticker of the brand's words ══ */
.band{position:relative;overflow:hidden;padding:22px 0;border-block:1px solid var(--hair);background:linear-gradient(90deg,rgba(255,138,44,.06),rgba(255,138,44,.02),rgba(40,160,245,.04),rgba(255,70,140,.05))}
.band .track{display:flex;width:max-content;gap:0;animation:ticker 42s linear infinite}
.band .track > span{display:inline-flex;align-items:center;gap:28px;padding-right:28px;white-space:nowrap;font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 80,'opsz' 72;font-size:clamp(22px,3vw,34px);letter-spacing:.02em;text-transform:uppercase;color:var(--c2)}
.band .track b{font-weight:inherit;color:var(--amber);text-shadow:0 0 18px var(--glow)}
.band .track .gk{font-size:1.06em;letter-spacing:.14em;color:var(--amber-pale)}
.band .track .star{color:var(--amber);font-size:.7em}
@keyframes ticker{to{transform:translateX(-50%)}}

section{position:relative}
.sec{padding:clamp(72px,10vw,128px) 0}

/* ══ FIRST TIME? GET THIS. · the hero dish ══ */
.dish{overflow:hidden;padding:clamp(28px,5vw,64px);display:grid;gap:28px}
.dish .sweep{position:absolute;inset:-40% -10%;z-index:1;pointer-events:none;background:linear-gradient(100deg,transparent 35%,rgba(255,200,140,.07) 48%,transparent 60%);animation:sweep 9s var(--ease) infinite}
@keyframes sweep{0%,40%{transform:translateX(-60%)}100%{transform:translateX(60%)}}
.dish .cta-k{font-family:var(--label);font-weight:500;font-size:clamp(16px,2vw,24px);line-height:1.15;letter-spacing:.22em;text-transform:uppercase;color:var(--amber);text-shadow:0 0 22px var(--glow)}
.dish h2{font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 76,'opsz' 96;font-size:clamp(66px,13.5vw,176px);line-height:.84;letter-spacing:-.025em;text-transform:uppercase;text-shadow:0 4px 14px rgba(0,0,0,.5)}
.dish h2 b{display:block;font-weight:inherit;color:var(--amber);text-shadow:0 4px 14px rgba(0,0,0,.5),0 0 44px var(--glow)}
.dish h2 span{display:inline}
/* the hero's tagline, as on the food TV (.tag) */
.dish .tag{display:inline-block;margin-top:24px;padding:9px 16px 8px;border-radius:999px;white-space:nowrap;
  font-family:var(--label);font-weight:500;font-size:clamp(13px,1.6vw,18px);line-height:1;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);
  text-shadow:0 0 14px var(--glow);background:linear-gradient(180deg,rgba(255,170,90,.12),rgba(255,140,50,.04));
  box-shadow:inset 0 0 0 1.5px rgba(255,184,112,.72),inset 0 1px 0 rgba(255,240,224,.22),0 0 26px -4px rgba(255,140,50,.55)}
.dish .side{display:grid;gap:22px;align-content:end}
.dish .price{display:flex;align-items:center;gap:18px}
.dish .price .pill{font-size:clamp(64px,9vw,104px)}
.dish .price .eq{font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.35;color:var(--c3);max-width:16ch}
.dish .line{font-family:var(--serif);font-style:italic;font-size:clamp(21px,2.4vw,28px);line-height:1.34;color:var(--cream);max-width:30ch;text-wrap:pretty}
@media (min-width:960px){.dish{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:end;gap:48px}}

/* ══ BUILD YOUR OWN · tap through it, the price is the real one ══ */
.builder{padding:clamp(22px,4vw,48px);display:grid;gap:30px}
.builder .steps{display:grid;gap:34px}
.step-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:16px}
.step-h .kick{white-space:nowrap}
.step-h i{font-style:normal;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-family:var(--display);font-weight:800;font-size:18px;color:var(--cream);background:linear-gradient(180deg,rgba(60,30,16,.95),rgba(24,12,6,.98));box-shadow:inset 0 0 0 1.5px rgba(255,184,112,.6),0 0 16px rgba(232,104,44,.35)}
.step-h .kick{font-size:14px}
.step-h .opt{margin-left:auto;font-family:var(--serif);font-style:italic;font-size:16px;color:var(--c3)}
@media (max-width:560px){.step-h .opt{flex-basis:100%;margin-left:50px}}
.opts{display:grid;gap:12px}
.opts.c3{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.opts.c2{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.opt-tile{position:relative;display:grid;gap:8px;align-content:start;padding:18px 46px 18px 18px;border-radius:var(--r-md);cursor:pointer;
  background:linear-gradient(180deg,rgba(255,240,220,.06),rgba(255,240,220,.018));box-shadow:inset 0 0 0 1px rgba(255,236,220,.12),inset 0 1px 0 rgba(255,244,230,.08);
  transition:background .4s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease-out)}
.opt-tile:hover{transform:translateY(-2px);background:linear-gradient(180deg,rgba(255,240,220,.09),rgba(255,240,220,.03))}
.opt-tile input{position:absolute;opacity:0;pointer-events:none}
.opt-tile .t{display:flex;align-items:center;justify-content:space-between;gap:12px}
.opt-tile .nm{font-size:clamp(32px,4.4vw,48px)}
.opt-tile .pill{font-size:clamp(24px,2.8vw,30px)}
.opt-tile .ds{font-family:var(--serif);font-style:italic;font-size:16px;line-height:1.35;color:var(--c2)}
.opt-tile .note{display:block;color:var(--amber-pale)}
.opt-tile .wg{display:flex;align-items:baseline;gap:8px;font-family:var(--label);font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--c3)}
.opt-tile .wg .gk{font-size:17px;color:var(--amber);text-shadow:0 0 12px var(--glow)}
.opt-tile .tick{position:absolute;right:14px;top:14px;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(255,236,220,.28);transition:all .35s var(--ease-out)}
.opt-tile:has(input:checked){background:linear-gradient(180deg,rgba(255,170,80,.20),rgba(255,140,50,.06));box-shadow:inset 0 0 0 1.5px rgba(255,190,120,.75),inset 0 1px 0 rgba(255,244,230,.22),0 0 34px -8px rgba(255,140,50,.6)}
.opt-tile:has(input:checked) .tick{background:var(--amber);box-shadow:0 0 14px rgba(255,170,80,.8);transform:scale(1.05)}
.opt-tile:has(input:checked) .tick::after{content:"";position:absolute;left:7px;top:4px;width:6px;height:11px;border:solid #2a1206;border-width:0 2px 2px 0;transform:rotate(45deg)}
.opt-tile:has(input:disabled){opacity:.32;cursor:not-allowed;transform:none}
.opt-tile:has(input:focus-visible){outline:2px solid var(--amber);outline-offset:3px}
.opts.ways{grid-template-columns:1fr 1fr}
.opt-tile.none{grid-column:1/-1;display:flex;align-items:baseline;gap:14px;padding-block:14px}
@media (max-width:560px){.opts.ways{grid-template-columns:1fr}}
.opt-tile.none .nm{font-size:clamp(24px,3vw,30px);color:var(--c2)}
.order{display:grid;gap:16px;padding:clamp(22px,3vw,34px);border-radius:var(--r-lg);
  background:radial-gradient(120% 90% at 0% 0%,rgba(255,150,60,.16),transparent 60%),linear-gradient(180deg,rgba(34,17,9,.9),rgba(16,8,4,.95));
  box-shadow:inset 0 0 0 1.5px rgba(255,190,120,.5),inset 0 1px 0 rgba(255,244,230,.2),0 0 60px -20px rgba(255,140,50,.5)}
.order .kick{color:var(--c3)}
.order .row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.order .what{font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 78,'opsz' 96;font-size:clamp(36px,5vw,58px);line-height:.9;letter-spacing:-.02em;text-transform:uppercase}
.order .what b{font-weight:inherit;color:var(--amber);text-shadow:0 0 30px var(--glow)}
.order .total{font-size:clamp(46px,6vw,70px)}
.order .ings{font-family:var(--serif);font-style:italic;font-size:17px;line-height:1.4;color:var(--c2)}
.order .egg{display:inline-flex;align-items:center;gap:10px;font-family:var(--label);font-weight:500;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);
  opacity:0;transform:translateY(6px) scale(.98);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out),max-height .5s var(--ease-out),margin .5s var(--ease-out);
  max-height:0;margin-top:-16px;overflow:hidden}   /* folded shut until it's Papu's Lamb Gyro (no empty hole in the card once the order button went, R84) */
.order .egg.on{opacity:1;transform:none;max-height:6em;margin-top:0}
.order .egg::before{content:"✦";font-size:14px;text-shadow:0 0 12px var(--glow)}
.order .acts{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.order .small{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--c3)}
.sauce{font-family:var(--serif);font-style:italic;font-size:clamp(18px,2vw,22px);line-height:1.4;color:var(--cream);padding-top:20px;border-top:1px solid var(--hair)}
.sauce b{font-family:var(--display);font-style:normal;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--amber);text-shadow:0 0 16px var(--glow)}
@media (min-width:1040px){
  .builder{grid-template-columns:minmax(0,1.5fr) minmax(320px,.8fr);align-items:start;gap:40px}
  .builder .order{position:sticky;top:100px}
  .builder .sauce{grid-column:1/-1}
}
.bump{animation:bump .6s var(--ease-out)}
@keyframes bump{30%{transform:scale(1.12);filter:brightness(1.4)}100%{transform:none}}

/* ══ TO SHARE ══ */
.share{display:grid;gap:14px}
@media (min-width:760px){.share{grid-template-columns:1fr 1fr;gap:18px}}
.share .item{display:grid;gap:10px;padding:22px 24px;border-radius:var(--r-md)}
.share .item .t{display:flex;align-items:center;justify-content:space-between;gap:16px}
.share .item .nm{font-size:clamp(34px,4.6vw,52px)}
.share .item .pill{font-size:clamp(28px,3.4vw,38px)}
.share .item .ds{font-family:var(--serif);font-style:italic;font-size:17px;line-height:1.4;color:var(--c2)}
.share .item.feat .nm{color:var(--amber);text-shadow:0 0 30px var(--glow)}
.share .tag{font-family:var(--label);font-weight:500;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--amber)}

/* ══ FOR AFTER · gelato in aegean light, soda in hibiscus ══ */
.after{display:grid;gap:22px}
@media (min-width:1040px){.after{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:stretch}}
/* the dessert panels, on the home page and the menu page alike (11 Oct: on the menu page they had no padding or layout; Mary's catch) */
.panel{padding:clamp(24px,4vw,48px);display:grid;gap:22px;align-content:start}
.p-head{display:grid;gap:12px}
.p-title{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px}
.p-title .nm{font-size:clamp(48px,7vw,84px)}
.p-title .nm b{font-weight:inherit}
.gel .p-title .nm b{color:var(--aeg-l);text-shadow:0 0 30px rgba(56,150,230,.6)}
.soda .p-title .nm b{color:var(--hib-l);text-shadow:0 0 30px rgba(236,72,136,.6)}
.p-title .pill{font-size:clamp(34px,4.4vw,48px)}
/* the menu page names each panel in the section title right above it, so the panel doesn't repeat the name (kept for screen readers) */
.msec .panel .p-title .nm{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gel .kick{color:#bfe6ff}.soda .kick{color:#ffc4dc}
.gel .eyebrow{font-family:var(--label);font-weight:500;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--aeg-l)}
.flavours{display:grid;gap:18px 26px;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr))}
.soda .flavours{grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr))}
.fv{display:grid;gap:4px;--c:var(--aeg-l);--cg:56,150,230}
.soda .fv{--c:var(--hib-l);--cg:236,72,136}
.fv .f{font-family:var(--display);font-weight:600;font-variation-settings:'wdth' 86,'opsz' 32;font-size:clamp(22px,2.4vw,27px);line-height:1.08;letter-spacing:-.006em;color:var(--cream);
  animation:glow-turn 9.6s ease-in-out infinite;animation-delay:calc(var(--n) * .8s)}
.fv .d{font-family:var(--serif);font-style:italic;font-size:15.5px;line-height:1.3;color:var(--c3)}
.fv .df{display:inline-block;margin-left:10px;white-space:nowrap;font-family:var(--label);font-style:normal;font-weight:500;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:#bfe6ff;text-shadow:0 0 12px rgba(56,150,230,.75)}
/* the flavours glow in turn, one after another (the show TV's idea, kept on the web) */
@keyframes glow-turn{0%,10%,100%{color:var(--cream);text-shadow:none}5%{color:var(--c);text-shadow:0 0 22px rgba(var(--cg),.85)}}
.affogato{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 20px;padding:22px 24px;border-radius:24px;
  background:linear-gradient(100deg,rgba(31,126,192,.40) 0%,rgba(21,94,140,.30) 46%,rgba(8,22,36,.38) 100%);
  box-shadow:inset 0 0 0 1px rgba(150,212,255,.5),inset 0 1.5px 0 rgba(230,246,255,.28),inset 0 0 44px rgba(40,160,245,.24),0 0 40px -8px rgba(40,160,245,.55)}
.affogato .mk{display:grid;gap:6px}
.affogato .mk .kick{color:#bfe6ff;font-size:12px}
.affogato .mk .nm{font-size:clamp(46px,6.4vw,72px);color:var(--aeg-l);text-shadow:0 0 34px rgba(56,150,230,.7)}
.affogato .line{grid-column:1/-1;font-family:var(--serif);font-style:italic;font-size:clamp(18px,2vw,22px);line-height:1.35;color:var(--cream);text-wrap:balance}
.affogato .pill{grid-row:1;grid-column:2;font-size:clamp(34px,4.4vw,48px)}
/* the soda's Float: the same strip in the soda's pink (as on the dessert TV) */
.affogato.float{background:linear-gradient(100deg,rgba(214,52,120,.36) 0%,rgba(150,30,84,.28) 46%,rgba(36,8,20,.38) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,170,205,.5),inset 0 1.5px 0 rgba(255,236,244,.28),inset 0 0 44px rgba(255,70,140,.22),0 0 40px -8px rgba(255,70,140,.5)}
.affogato.float .mk .kick{color:#ffc4dc}
.affogato.float .mk .nm{color:var(--hib-l);text-shadow:0 0 34px rgba(236,72,136,.7)}

/* ══ THE STORY · Greek made easy ══ */
.story-grid{display:grid;gap:clamp(36px,6vw,80px);align-items:center}
@media (min-width:960px){.story-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.story .big{font-family:var(--serif);font-style:italic;font-size:clamp(36px,5.4vw,72px);line-height:1.06;letter-spacing:-.01em;text-wrap:balance}
.story .big em{font-style:inherit;color:var(--amber);text-shadow:0 0 30px var(--glow)}
.story .triad{margin-top:22px;display:grid;gap:6px;font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 90,'opsz' 40;font-size:clamp(16px,1.8vw,20px);letter-spacing:.06em;text-transform:uppercase;color:var(--amber)}
.words{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:700px){.words{grid-template-columns:repeat(auto-fit,minmax(178px,1fr))}}
.word.wide{grid-column:span 2}   /* ΚΑΛΗ ΟΡΕΞΗ: two cards wide, on one line, the same letter size as the rest (11 Oct) */
.word{position:relative;height:140px;perspective:900px;cursor:pointer;container-type:inline-size}
.word .in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .9s var(--ease-out)}
.word:hover .in,.word:focus-visible .in,.word.flip .in{transform:rotateY(180deg)}
.word .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:var(--r-md);display:grid;place-content:center;gap:8px;text-align:center;padding:16px;
  background:linear-gradient(180deg,rgba(255,240,220,.07),rgba(255,240,220,.02));box-shadow:inset 0 0 0 1px rgba(255,206,152,.22),inset 0 1px 0 rgba(255,244,230,.12)}
.word .front .gk{font-size:clamp(22px,calc((100cqi - 34px) / 4.7),38px);line-height:1;text-wrap:balance;letter-spacing:.08em;color:var(--amber-pale);text-shadow:0 0 22px rgba(255,160,70,.45)}   /* sized to the card, so the longest word (ΕΥΧΑΡΙΣΤΩ) always fits (11 Oct: words spilled on wide screens) */
.word.wide .front .gk{font-size:clamp(22px,calc((50cqi - 6px - 34px) / 4.7),38px)}
.word .front .tr{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--c3)}
.word .back{transform:rotateY(180deg);background:radial-gradient(120% 120% at 0% 0%,rgba(255,150,60,.22),transparent 60%),linear-gradient(180deg,rgba(40,20,10,.92),rgba(16,8,4,.96));box-shadow:inset 0 0 0 1.5px rgba(255,190,120,.55)}
.word .back .mean{font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 82,'opsz' 72;font-size:clamp(24px,2.6vw,30px);line-height:.95;text-transform:uppercase}
.word .back .tr{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--c3)}
.word .hint{position:absolute;right:12px;bottom:10px;font-family:var(--label);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--c4)}

/* ══ PROOF ══ */
.proof{display:grid;gap:16px}
@media (min-width:760px){.proof{grid-template-columns:1fr 1fr}}
.rate{display:flex;align-items:center;gap:22px;padding:26px 28px;border-radius:var(--r-lg)}
.rate .n{font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 88,'opsz' 96;font-size:clamp(64px,8vw,92px);line-height:.9;letter-spacing:-.03em}
.rate .st{color:var(--amber);font-size:clamp(28px,3vw,36px);text-shadow:0 0 16px var(--glow)}
.rate .k{display:grid;gap:4px;font-family:var(--label);font-weight:500;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--c2)}
.rate .k a{color:var(--amber);border-bottom:1px solid rgba(255,179,92,.4);width:max-content}
.rate .k a:hover{border-color:var(--amber)}
/* the review on the food TV (R81): lit stars, the guest's own words, the name and where */
.quote{grid-column:1/-1;display:grid;gap:18px;padding:clamp(28px,4.6vw,56px);border-radius:var(--r-lg)}
.quote .qs{font-family:system-ui,sans-serif;font-size:clamp(24px,2.8vw,32px);letter-spacing:.2em;line-height:1;color:var(--amber);
  text-shadow:0 0 14px rgba(255,176,90,.85),0 0 34px rgba(255,140,50,.5)}
.quote blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(26px,3.6vw,44px);line-height:1.16;color:var(--cream);max-width:30ch;text-wrap:pretty}
.quote figcaption{font-family:var(--label);font-weight:500;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--c2)}
.quote figcaption b{font-weight:500;color:var(--amber)}

/* ══ VISIT ══ */
.visit{display:grid;gap:22px}
@media (min-width:960px){.visit{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.visit .card{padding:clamp(24px,4vw,48px);display:grid;gap:22px;align-content:start}
.visit .now{font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 80,'opsz' 96;font-size:clamp(42px,6vw,72px);line-height:.92;letter-spacing:-.02em;text-transform:uppercase}
.visit .now .status{font-family:var(--label);font-weight:500;font-size:13px;letter-spacing:.2em;color:var(--c2);margin-bottom:14px}
.visit dl{display:grid;gap:16px}
.visit dt{font-family:var(--label);font-weight:500;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--amber)}
.visit dd{font-family:var(--display);font-weight:600;font-variation-settings:'wdth' 92,'opsz' 32;font-size:clamp(20px,2.2vw,24px);line-height:1.3;color:var(--cream)}
.visit dd .it{font-weight:400;font-size:.9em;color:var(--c2)}
.visit dd a{border-bottom:1px solid rgba(255,206,152,.35)}
.visit dd a:hover{border-color:var(--amber)}
.visit .acts{display:flex;flex-wrap:wrap;gap:12px}
.pin{position:relative;min-height:320px;overflow:hidden;display:grid;place-items:center;text-align:center;padding:40px 24px}
.pin .rings{position:absolute;left:50%;top:44%;width:16px;height:16px;transform:translate(-50%,-50%)}
.pin .rings i{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(255,170,80,.6);animation:ring 3.6s var(--ease) infinite}
.pin .rings i:nth-child(2){animation-delay:1.2s}.pin .rings i:nth-child(3){animation-delay:2.4s}
.pin .rings b{position:absolute;inset:2px;border-radius:50%;background:var(--amber);box-shadow:0 0 18px rgba(255,170,80,.9),0 0 50px rgba(255,140,50,.6)}
@keyframes ring{0%{transform:scale(1);opacity:.9}100%{transform:scale(18);opacity:0}}
.pin .lbl{position:relative;margin-top:120px;display:grid;gap:8px}
.pin .lbl .nm{font-size:clamp(34px,4vw,48px)}
.pin .lbl .it{font-size:18px;color:var(--c2)}
.pin .coast{position:absolute;inset:0;opacity:.5}

/* ══ FOOTER ══ */
.foot{padding:72px 0 140px;border-top:1px solid var(--hair);background:linear-gradient(180deg,transparent,rgba(0,0,0,.25))}
.foot .wrap{display:grid;gap:34px;justify-items:center;text-align:center}
.foot .lock .w{font-size:clamp(54px,8vw,84px)}
.foot .lock .sub{font-size:clamp(8px,1.1vw,11.5px)}
.foot .bless{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;justify-content:center}
.foot .bless .gk{font-size:24px;letter-spacing:.22em;color:var(--amber-pale)}
.foot .bless .it{font-size:24px;color:var(--c2)}
.foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;font-family:var(--label);font-weight:500;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--c2)}
.foot nav a:hover{color:var(--cream)}
.foot .small{font-family:var(--label);font-size:12px;letter-spacing:.08em;color:var(--c4);line-height:1.7}
@media (min-width:860px){.foot{padding-bottom:72px}}

/* ══ THE ORDER BAR · fixed at the thumb on phones ══ */
.dock{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:60;display:flex;align-items:center;gap:12px;padding:8px 8px 8px 18px;border-radius:999px;
  background:linear-gradient(180deg,rgba(30,15,9,.72),rgba(14,7,4,.82));-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
  box-shadow:inset 0 0 0 1px rgba(255,206,152,.2),0 18px 40px -16px rgba(0,0,0,.9);transform:translateY(160%);transition:transform .6s var(--ease-out)}
.dock.show{transform:none}
.dock .status{font-family:var(--label);font-weight:500;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--c2);min-width:0;overflow:hidden;text-overflow:ellipsis}
.dock .btn{margin-left:auto;min-height:44px;padding:0 20px;font-size:12px}
@media (min-width:860px){.dock{display:none}}

/* ══ THE MENU PAGE ══ */
.mhero{padding:150px 0 30px}
.mhero h1{font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 78,'opsz' 96;font-size:clamp(64px,12vw,150px);line-height:.86;letter-spacing:-.03em;text-transform:uppercase}
.mhero h1 b{font-weight:inherit;color:var(--amber);text-shadow:0 0 40px var(--glow)}
.mhero .s-lede{margin-top:20px}
.mhero .meta{margin-top:24px;display:flex;flex-wrap:wrap;gap:10px 20px;font-family:var(--label);font-weight:500;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--c2)}
.cats{position:sticky;top:84px;z-index:40;margin:10px 0 34px;padding:6px;border-radius:999px;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;
  background:linear-gradient(180deg,rgba(30,15,9,.66),rgba(14,7,4,.74));-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
  box-shadow:inset 0 0 0 1px rgba(255,206,152,.18),0 16px 40px -20px rgba(0,0,0,.8)}
.cats::-webkit-scrollbar{display:none}
.cats a{position:relative;z-index:1;flex:none;padding:12px 18px;border-radius:999px;font-family:var(--label);font-weight:500;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--c2);transition:color .4s}
.cats a.on{color:#2a1206}
.cats .ind{position:absolute;z-index:0;top:6px;bottom:6px;left:0;width:0;border-radius:999px;background:linear-gradient(180deg,#ffd9a8,#ffb35c);box-shadow:0 0 24px rgba(255,170,80,.6);transition:transform .5s var(--ease-out),width .5s var(--ease-out)}
.msec{padding:30px 0 70px;scroll-margin-top:150px}
.msec > .s-head{margin-bottom:28px}
.mgrid{display:grid;gap:14px}
@media (min-width:760px){.mgrid.c2{grid-template-columns:1fr 1fr;gap:18px}.mgrid.c3{grid-template-columns:repeat(3,1fr);gap:18px}}
.mitem{display:grid;gap:10px;padding:22px 24px;border-radius:var(--r-md)}
.mitem .t{display:flex;align-items:center;justify-content:space-between;gap:16px}
.mitem .nm{font-size:clamp(32px,4.2vw,48px)}
.mitem .pill{font-size:clamp(26px,3vw,34px)}
.mitem .ds{font-family:var(--serif);font-style:italic;font-size:17px;line-height:1.4;color:var(--c2)}
.mitem .ds .note{display:block;color:var(--amber-pale)}
.mitem .wg{display:flex;align-items:baseline;gap:8px;font-family:var(--label);font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--c3)}
.mitem .wg .gk{font-size:17px;color:var(--amber);text-shadow:0 0 12px var(--glow)}
.mitem.feat .nm{color:var(--amber);text-shadow:0 0 30px var(--glow)}

/* ══ 404 ══ */
.lost{min-height:100svh;display:grid;place-items:center;text-align:center;padding:120px var(--gutter)}
.lost h1{font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 78,'opsz' 96;font-size:clamp(64px,12vw,140px);line-height:.88;text-transform:uppercase}
.lost p{margin:18px auto 30px;max-width:30ch}

/* ══ SMALL PIECES ══ */
fieldset{border:0;min-width:0;padding:0;margin:0}
.order .what span{display:inline-block;margin-top:8px;font-size:.46em;line-height:1;letter-spacing:.04em;color:var(--amber);text-shadow:0 0 18px var(--glow)}
.pin .grid{position:absolute;inset:0;pointer-events:none;
  background:repeating-radial-gradient(circle at 50% 44%,rgba(255,206,152,.08) 0 1px,transparent 1px 44px),
             linear-gradient(90deg,transparent 49.9%,rgba(255,206,152,.06) 50%,transparent 50.1%),
             linear-gradient(0deg,transparent 55.9%,rgba(255,206,152,.06) 56%,transparent 56.1%);
  -webkit-mask-image:radial-gradient(circle at 50% 44%,#000 0,transparent 72%);mask-image:radial-gradient(circle at 50% 44%,#000 0,transparent 72%)}
.rate:hover .k span:last-child{text-shadow:0 0 16px var(--glow)}

/* ══ PAGE TRANSITIONS · pages fade into each other (browsers that support it) ══ */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .35s var(--ease) both}
::view-transition-new(root){animation:vt-in .55s var(--ease-out) both}
@keyframes vt-out{to{opacity:0;filter:blur(6px)}}
@keyframes vt-in{from{opacity:0;filter:blur(8px);transform:translateY(12px)}}

/* ══ SCREENSHOT MODE (?shot) · for previews: loops stop, every section shows ══ */
.shot .lamp,.shot .grain,.shot .band .track,.shot .btn-hot::after,.shot .dish .sweep,.shot .fv .f,.shot .status i,.shot .pin .rings i,.shot .scroll-cue span,.shot .ignite .w,.shot .ignite .sub{animation:none!important}
.shot .hero{min-height:900px}
.shot .room{position:absolute;height:100%}
.shot [data-reveal]{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}

/* ══ LESS MOTION · when the visitor's device asks for it, everything holds still ══ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js [data-reveal]{opacity:1;transform:none;filter:none}
  .torch{display:none}
}
/* R120 · MC-2: the step words above each step's heading (stepWords); MC-3: the small raised $ (priceSign 'small') */
.step-h.sw i{width:auto;height:auto;border-radius:0;background:none;box-shadow:none;display:block;flex-basis:100%;font-family:var(--label);font-weight:600;font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--amber)}
.step-h.sw .opt{margin-left:0}
@media (max-width:560px){.step-h.sw .opt{margin-left:0}}
.pv{white-space:nowrap}
.pv .cs{font-size:.58em;vertical-align:.52em;margin-right:.05em;font-weight:700;opacity:.92}
/* R122 · the steps as bubble C: the same lit bubble, wider, reading STEP 1 */
.step-h.c i{width:auto;padding:0 .62em 0 .7em;border-radius:999px;display:inline-flex;align-items:center;gap:.28em;line-height:1}
.step-h.c i .k{font-family:var(--label);font-weight:600;font-size:.6em;letter-spacing:.12em;text-transform:uppercase;opacity:.92}
@media (max-width:560px){.step-h.c .opt{margin-left:0}}