/* Zeila Fusion Food · stil A "street poster" · färger från brandbook 2026-09-21 */
:root{
  --petrol:#17363a; --petrol-2:#0f2629; --terra:#b65127; --sun:#f5cc24; --cream:#fdf2cf; --ink:#14282b;
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--petrol);color:var(--cream);font:400 1rem/1.6 Montserrat,system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
html{overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{width:min(100% - 32px,1200px);margin-inline:auto}
.grain{position:relative;isolation:isolate}
.grain::after{content:"";position:absolute;inset:0;background:var(--grain);opacity:.18;mix-blend-mode:overlay;pointer-events:none;z-index:-1}
.kicker{font:800 .78rem/1 Montserrat;letter-spacing:.32em;text-transform:uppercase}
.btn{display:inline-flex;align-items:center;gap:.6rem;min-height:52px;padding:.85rem 1.5rem;border-radius:999px;font:800 .9rem Montserrat;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border:2px solid currentColor;transition:transform .2s,background .2s,color .2s}
.btn:hover{transform:translateY(-2px) rotate(-1deg)}
.btn--sun{background:var(--sun);color:var(--petrol);border-color:var(--sun)}
.btn--ghost{color:var(--cream)}
.btn svg{width:20px;height:20px}

/* topbar */
.top{position:sticky;top:0;z-index:20;background:rgba(15,38,41,.85);backdrop-filter:blur(10px);border-bottom:1px solid rgba(245,204,36,.15)}
.top__in{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:1rem}
.top__logo img{height:30px}
.top__right{display:flex;gap:.5rem;align-items:center}
.lang{font:800 .75rem Montserrat;letter-spacing:.15em;padding:.45rem .7rem;border:1px solid rgba(253,242,207,.35);border-radius:999px}
.lang b{color:var(--sun)}
.top .btn{min-height:40px;padding:.5rem 1rem;font-size:.72rem}

/* hero */
.hero{min-height:calc(100svh - 64px);display:grid;place-items:center;text-align:center;padding:4rem 0 5rem;overflow:hidden;background:radial-gradient(120% 80% at 50% 110%,rgba(182,81,39,.55),transparent 60%),var(--petrol)}
.hero__sail{position:absolute;right:-8vw;bottom:-6vw;width:60vw;max-width:780px;opacity:.07;transform:rotate(-8deg);z-index:-1}
.hero__sticker{position:absolute;top:2.2rem;left:6%;background:var(--sun);color:var(--petrol);font:900 .8rem Montserrat;letter-spacing:.2em;padding:.7rem 1rem;border-radius:6px;transform:rotate(-8deg);box-shadow:4px 4px 0 var(--terra)}
.hero__badge{position:absolute;top:2rem;right:6%;width:110px;animation:spin 18s linear infinite;opacity:.9}
@keyframes spin{to{transform:rotate(360deg)}}
.hero .kicker{color:var(--sun);margin-bottom:1.5rem}
.hero__word{width:min(88vw,820px);margin:0 auto .5rem;filter:drop-shadow(0 10px 30px rgba(0,0,0,.35))}
.hero__sub{font:300 clamp(1.1rem,2.6vw,1.6rem)/1.3 Montserrat;letter-spacing:.06em;margin:0 0 2.5rem}
.hero__sub b{font-weight:800;color:var(--sun)}
.count{display:flex;gap:clamp(.5rem,2vw,1rem);justify-content:center;margin-bottom:1.25rem}
.count div{background:var(--cream);color:var(--petrol);border-radius:14px;min-width:clamp(70px,16vw,120px);padding:.9rem .5rem .7rem;box-shadow:6px 6px 0 var(--terra);transform:rotate(var(--r,0deg))}
.count b{display:block;font:900 clamp(2rem,6vw,3.6rem)/1 Montserrat;letter-spacing:-.02em}
.count span{font:800 .62rem Montserrat;letter-spacing:.25em;text-transform:uppercase;color:var(--terra)}
.hero__date{font:800 .85rem Montserrat;letter-spacing:.25em;text-transform:uppercase;margin:0 0 2.25rem}
.hero__date a{color:var(--sun)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}

/* marquee */
.marq{background:var(--terra);color:var(--cream);overflow:hidden;border-block:3px solid var(--petrol-2);transform:rotate(-1.5deg);margin:-1.2rem -2vw 0;position:relative;z-index:5}
.marq__t{display:flex;gap:2.5rem;width:max-content;padding:1rem 0;font:900 clamp(1.4rem,3.4vw,2.3rem)/1 Montserrat;letter-spacing:.06em;text-transform:uppercase;animation:mq 22s linear infinite}
.marq__t i{color:var(--sun);font-style:normal}
@keyframes mq{to{transform:translateX(-50%)}}

/* where */
.where{background:var(--cream);color:var(--petrol);padding:7rem 0 6rem}
.where__in{display:grid;gap:3rem;align-items:center}
@media(min-width:900px){.where__in{grid-template-columns:1.05fr 1fr}}
.where .kicker{color:var(--terra)}
.where h2{font:900 clamp(2.6rem,7vw,5.6rem)/.92 Montserrat;letter-spacing:-.03em;text-transform:uppercase;margin:1rem 0 1.25rem}
.where h2 span{display:block;color:var(--terra)}
.where p{font-size:1.1rem;max-width:30em}
.where__pills{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.5rem 0 2rem}
.pill{background:var(--petrol);color:var(--cream);font:800 .75rem Montserrat;letter-spacing:.15em;text-transform:uppercase;padding:.6rem 1rem;border-radius:999px}
.pill--sun{background:var(--sun);color:var(--petrol)}
.where .btn{color:var(--petrol)}
.where__img{position:relative}
.where__img img{border-radius:22px;transform:rotate(2deg);box-shadow:-14px 14px 0 var(--petrol)}
.where__img .tag{position:absolute;left:-14px;bottom:-18px;background:var(--sun);color:var(--petrol);font:900 .8rem Montserrat;letter-spacing:.18em;text-transform:uppercase;padding:.8rem 1.1rem;border-radius:8px;transform:rotate(-4deg)}

/* menu */
.menu{padding:7rem 0;background:var(--petrol)}
.head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:2.5rem}
.head h2{font:900 clamp(2.6rem,7vw,5.2rem)/.9 Montserrat;letter-spacing:-.03em;text-transform:uppercase;margin:.75rem 0 0}
.head p{max-width:24em;margin:0;opacity:.8}
.menu .kicker{color:var(--sun)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.1rem}
.card{background:var(--petrol-2);border:2px solid rgba(253,242,207,.12);border-radius:22px;overflow:hidden;transition:transform .25s,border-color .25s}
.card:hover{transform:translateY(-6px) rotate(-.6deg);border-color:var(--sun)}
.card__img{aspect-ratio:4/3;display:grid;place-items:center;background:repeating-linear-gradient(45deg,rgba(245,204,36,.08) 0 14px,transparent 14px 28px),var(--terra);position:relative}
.card__img span{font:800 .7rem Montserrat;letter-spacing:.2em;text-transform:uppercase;background:rgba(15,38,41,.75);padding:.5rem .8rem;border-radius:6px}
.card:nth-child(2) .card__img{background:repeating-linear-gradient(-45deg,rgba(23,54,58,.12) 0 14px,transparent 14px 28px),var(--sun);color:var(--petrol)}
.card:nth-child(2) .card__img span{color:var(--cream)}
.card:nth-child(3) .card__img{background:repeating-linear-gradient(45deg,rgba(245,204,36,.06) 0 14px,transparent 14px 28px),#24494e}
.card:nth-child(4) .card__img{background:repeating-linear-gradient(-45deg,rgba(182,81,39,.15) 0 14px,transparent 14px 28px),var(--cream)}
.card__b{padding:1.4rem 1.4rem 1.6rem}
.card h3{font:900 1.5rem Montserrat;text-transform:uppercase;letter-spacing:.02em;margin:0 0 .4rem;color:var(--sun)}
.card p{margin:0;opacity:.85;font-size:.95rem}

/* drop */
.drop{background:var(--terra);padding:7rem 0;overflow:hidden}
.drop__in{display:grid;gap:3rem;align-items:center}
@media(min-width:900px){.drop__in{grid-template-columns:1fr 1fr}}
.drop .kicker{color:var(--sun)}
.drop h2{font:900 clamp(3.2rem,10vw,7.5rem)/.85 Montserrat;letter-spacing:-.04em;text-transform:uppercase;margin:1rem 0 1.25rem}
.drop p{font-size:1.1rem;max-width:26em}
.drop__card{position:relative;aspect-ratio:4/5;border-radius:26px;overflow:hidden;background:var(--petrol);box-shadow:16px 16px 0 var(--petrol-2);cursor:pointer}
.drop__reveal{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:2rem;background:radial-gradient(circle at 50% 40%,rgba(245,204,36,.35),transparent 60%),var(--petrol)}
.drop__reveal h3{font:900 clamp(2rem,5vw,3.2rem)/1 Montserrat;text-transform:uppercase;color:var(--sun);margin:.5rem 0}
.js .drop__lid{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:1rem;background:var(--grain),repeating-linear-gradient(135deg,var(--sun) 0 22px,#e9bd12 22px 44px);color:var(--petrol);transition:transform 1s cubic-bezier(.7,0,.2,1);z-index:2}
.drop__lid b{font:900 clamp(4rem,12vw,7rem)/1 Montserrat}
.drop__lid span{font:900 .8rem Montserrat;letter-spacing:.3em;text-transform:uppercase;background:var(--petrol);color:var(--sun);padding:.7rem 1rem;border-radius:6px}
.js .drop__card.open .drop__lid{transform:translateY(-125%) rotate(-6deg)}

/* videos */
.vids{padding:7rem 0;background:var(--petrol-2)}
.vids .kicker{color:var(--sun)}
.phones{display:flex;gap:1.25rem;overflow-x:auto;padding:1rem 0 1.5rem;scroll-snap-type:x mandatory}
.phone{flex:0 0 clamp(200px,24vw,260px);aspect-ratio:9/16;border-radius:28px;border:3px solid rgba(253,242,207,.2);background:linear-gradient(160deg,#24494e,var(--petrol));display:grid;place-items:center;text-align:center;scroll-snap-align:start;position:relative;overflow:hidden}
.phone:nth-child(2n){transform:translateY(2rem)}
.phone span{font:800 .75rem Montserrat;letter-spacing:.2em;text-transform:uppercase;opacity:.75;padding:1rem}
.phone::before{content:"▶";position:absolute;top:50%;left:50%;translate:-50% -160%;font-size:2rem;color:var(--sun)}

/* about */
.about{background:var(--cream);color:var(--petrol);padding:8rem 0;text-align:center}
.about .kicker{color:var(--terra)}
.about h2{font:300 clamp(2.4rem,6vw,4.6rem)/1.05 Montserrat;letter-spacing:-.02em;margin:1.2rem auto 2rem;max-width:14ch}
.about h2 b{font-weight:900;color:var(--terra)}
.about p{max-width:36em;margin:0 auto 1rem;font-size:1.1rem}
.about__icon{width:90px;margin:0 auto 1rem}

/* footer */
.foot{background:var(--petrol);padding:4rem 0 6rem;text-align:center}
.foot img{width:160px;margin:0 auto 1.5rem}
.foot p{opacity:.75;margin:.3rem 0}

.js .reveal{opacity:0;transform:translateY(40px);transition:opacity .8s,transform .8s}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
@media(max-width:640px){.hero__badge{display:none}.hero{padding-top:3.5rem}.hero__sticker{top:1rem;font-size:.65rem}.top .btn span{display:none}}

/* Status: nedräkning, öppet, stängt */
.status{min-height:120px;display:grid;place-items:center;margin-bottom:1.25rem}
.status__fallback{font:900 clamp(1.4rem,4vw,2.2rem)/1.1 Montserrat;text-transform:uppercase;color:var(--sun);margin:0}
.status__live{display:inline-flex;align-items:center;gap:.8rem;background:var(--cream);color:var(--petrol);border-radius:999px;padding:.9rem 1.6rem;box-shadow:6px 6px 0 var(--terra);font:900 clamp(1.1rem,3vw,1.6rem) Montserrat;text-transform:uppercase}
.status__live i{width:14px;height:14px;border-radius:50%;background:#2fbf71;box-shadow:0 0 0 0 rgba(47,191,113,.7);animation:pulse 1.6s infinite}
.status__live--closed i{background:var(--terra);animation:none}
.status__live small{font:700 .8rem Montserrat;letter-spacing:.08em;text-transform:none;color:var(--terra)}
@keyframes pulse{70%{box-shadow:0 0 0 14px rgba(47,191,113,0)}100%{box-shadow:0 0 0 0 rgba(47,191,113,0)}}

/* Öppettider */
.hours{list-style:none;padding:0;margin:0 0 2rem;max-width:26rem;font-weight:500}
.hours li{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:2px dashed rgba(23,54,58,.2)}
.hours li b{font-weight:800}
.hours__note{font-size:.8rem;opacity:.7;margin:-1.25rem 0 2rem}

/* Språk, fokus, hoppa till innehåll */
.lang{text-decoration:none}
.lang a{text-decoration:none;opacity:.7}
.lang a:hover{opacity:1}
.skip{position:absolute;left:-9999px;top:0;background:var(--sun);color:var(--petrol);padding:.75rem 1rem;z-index:100;font-weight:800}
.skip:focus{left:12px;top:12px}
a:focus-visible,.btn:focus-visible,[role=button]:focus-visible{outline:3px solid var(--sun);outline-offset:4px}

/* Videoklipp */
.phone video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phone--soon::before{content:none}
.phone--soon span{opacity:.6}

/* Drop-bild när säsongens rätt är släppt */
.drop__reveal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;opacity:.55}
.drop__reveal{z-index:1}

/* Integritet */
.legal{background:var(--cream);color:var(--petrol);padding:5rem 0;min-height:70vh}
.legal .wrap{max-width:760px}
.legal h1{font:900 clamp(2.2rem,6vw,3.6rem)/1 Montserrat;text-transform:uppercase;margin:0 0 1.5rem}
.legal h2{font:800 1.2rem Montserrat;text-transform:uppercase;letter-spacing:.06em;margin:2rem 0 .5rem}
.legal a{color:var(--terra)}
.kicker--cream{color:var(--cream)}

@media(max-width:480px){.status__live{flex-wrap:wrap;justify-content:center;text-align:center;border-radius:22px;padding:.8rem 1.2rem}.status__live small{flex-basis:100%}}
.status__label{font:800 .8rem Montserrat;letter-spacing:.25em;text-transform:uppercase;color:var(--sun);margin:0 0 1rem;width:100%}
.status{grid-template-columns:1fr}
.drop__lid{display:none}
.js .drop__lid{display:grid;width:100%;border:0;font:inherit;cursor:pointer}
[data-drop-name]:focus{outline:none}