/* FORNO Powiśle — v3 "poster collage"
   Identyfikacja przeniesiona 1:1 z ich grafik FB i logo:
   pistacja / pomidor / krem / bazylia + żółć i błękit jako akcenty kolażu.
   Typografia: Anton (plakat) + Whisper (odręczne, jak neon) + Figtree (tekst).
   Fonty self-hosted w css/fonts.css — demo działa bez internetu. */

:root{
  --pistacja:#cdd582;
  --pistacja-deep:#b8c464;
  --pomidor:#d8402e;
  --pomidor-dark:#b02f1f;
  --krem:#f7efdf;
  --krem-deep:#efe3c8;
  --zielen:#1e3d24;
  --bazylia:#3f7d3a;
  --zolty:#f2d33c;
  --blekit:#2f6fae;
  --wegiel:#20211c;
  --mgla:#635c4d;              /* tekst drugorzędny na kremie — AA na #f7efdf */
  --font-display:'Anton',sans-serif;
  --font-script:'Whisper',cursive;
  --font-body:'Figtree',sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out-expo:cubic-bezier(.16,1,.3,1);

  /* skala z-index — bez magicznych 999 */
  --z-grain:900;
  --z-nav:50;
  --z-sticky:30;

  /* Realna wysokość przyklejonej nawigacji — mierzona w js/site.js i zapisywana
     tutaj. Wartość poniżej to tylko fallback (bez JS). Wcześniej rail karty miał
     wpisane na sztywno 60px/96px: przy nav=72px (telefon) wjeżdżał 12px POD nav,
     a przy 1000px (nav=93px) zostawały 3px. Liczone, nie zgadywane. */
  --nav-h:72px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--wegiel);background:var(--krem);line-height:1.6;overflow-x:hidden}
a{color:inherit}
/* height:auto jest OBOWIĄZKOWE: atrybuty width/height w HTML (potrzebne, by
   przeglądarka rezerwowała miejsce i nie skakał layout) inaczej wymuszają
   wysokość w pikselach i rozjeżdżają proporcje wszędzie, gdzie CSS ustawia
   samą szerokość. Reguły z własną wysokością (.acc-img, .bento-item img,
   .inline-pill) mają wyższą specyficzność i wygrywają z tym auto. */
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
::selection{background:var(--pomidor);color:var(--krem)}
:focus-visible{outline:3px solid var(--pomidor);outline-offset:3px;border-radius:4px}

/* ziarno — cały serwis dostaje fakturę druku, jak ich plakaty.
   ⚠️ BEZ mix-blend-mode: na iOS Safari multiply nad warstwą kompozytową obrazu
   (pizza animowana GSAP-em + drop-shadow = własna warstwa GPU) liczył blend
   względem czarnego tła tej warstwy i malował CIEMNY PROSTOKĄT wielkości obrazu,
   który znikał dopiero po scrollu (rekompozycja fixed). Przyciemnianie jest
   teraz wpisane w KANAŁ ALFA tekstury (feColorMatrix → czarny z alfą=luminancja
   szumu), więc efekt ziarna zostaje, a blend — źródło buga — znika. */
.grain{position:fixed;inset:0;z-index:var(--z-grain);pointer-events:none;opacity:.42;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.33 0.33 0.33 0 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E")}

.display{font-family:var(--font-display);font-weight:400;text-transform:uppercase;letter-spacing:.02em;line-height:.92}
.script{font-family:var(--font-script);font-weight:400;line-height:1.1}

/* Wordmark FORNO: litery + dwa pełne koła (O) na wspólnej osi flex — zamiast
   niewidzialnej litery "O" z ::after (dziedziczyła line-height:1.6 z body,
   przez co koło centrowało się względem zbyt wysokiego boksu, nie liter). */
.wordmark{display:inline-flex;align-items:center;gap:.4em;line-height:1}
.wm-dot{width:.62em;height:.62em;flex:none;border-radius:50%;box-sizing:border-box;border:.08em solid var(--wegiel)}
.wm-dot--green{background:#1a7a3c}
.wm-dot--red{background:#c81f1f}
.footer-logo .wm-dot{border-color:var(--krem)}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:1rem 2.2rem;border-radius:999px;text-decoration:none;font-weight:700;letter-spacing:.09em;text-transform:uppercase;font-size:.82rem;border:2px solid var(--wegiel);background:transparent;color:var(--wegiel);transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s,color .2s;will-change:transform}
.btn:hover{transform:translateY(-3px) rotate(-1deg);box-shadow:4px 6px 0 var(--wegiel)}
.btn:active{transform:translateY(0) rotate(0);box-shadow:none}
.btn-red{background:var(--pomidor);border-color:var(--pomidor);color:var(--krem)}
.btn-red:hover{box-shadow:4px 6px 0 var(--wegiel)}
.btn-ghost{background:transparent}
.btn-ghost-light{border-color:var(--krem);color:var(--krem)}
.btn-ghost-light:hover{box-shadow:4px 6px 0 rgba(247,239,223,.35)}
@media(prefers-reduced-motion:reduce){.btn,.btn:hover{transform:none}}

/* ===== NAV ===== */
.nav{position:sticky;top:0;z-index:var(--z-nav);display:flex;align-items:center;gap:1.6rem;padding:.85rem 5vw;background:color-mix(in srgb,var(--krem) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid rgba(32,33,28,.14)}
.nav-logo{font-family:var(--font-body);font-weight:600;font-size:1.2rem;text-decoration:none;display:flex;align-items:baseline;gap:.55rem;text-transform:uppercase}
.nav-script{font-family:var(--font-script);letter-spacing:0;font-size:1.5rem;color:var(--bazylia);text-transform:none;transform:rotate(-4deg)}

/* status "otwarte teraz" — liczony z realnych godzin w js/site.js */
.nav-status{display:inline-flex;align-items:center;gap:.45rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.32rem .7rem .32rem .55rem;border-radius:999px;border:1.5px solid currentColor;white-space:nowrap}
.nav-status[hidden]{display:none}
.nav-status::before{content:'';width:.5rem;height:.5rem;border-radius:50%;background:currentColor;flex:none}
.nav-status--open{color:#1a7a3c}
.nav-status--open::before{animation:pulse 2s var(--ease) infinite}
.nav-status--closed{color:var(--pomidor-dark)}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.78)}}
@media(prefers-reduced-motion:reduce){.nav-status--open::before{animation:none}}

.nav-links{display:flex;gap:1.7rem;margin-left:auto}
.nav-links a{position:relative;text-decoration:none;font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:.8rem;padding:.35rem 0}
.nav-links a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:3px;background:var(--pomidor);transition:right .25s var(--ease)}
.nav-links a:hover::after,.nav-links a.active::after{right:0}
.nav-links a:hover{color:var(--pomidor)}
.nav-links a.active{color:var(--pomidor)}
.nav .btn{padding:.7rem 1.5rem;font-size:.75rem}

.nav-toggle-box{display:none}
.nav-toggle{display:none;margin-left:auto;width:44px;height:44px;cursor:pointer;flex-direction:column;justify-content:center;gap:6px;align-items:center}
.nav-toggle span,.nav-toggle::before,.nav-toggle::after{content:'';display:block;width:26px;height:3px;border-radius:2px;background:var(--wegiel);transition:transform .2s ease,opacity .2s ease}
@media(max-width:980px){
  .nav{gap:1rem}
  .nav-cta{display:none}
  .nav-toggle{display:flex}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--krem);border-bottom:2px solid var(--wegiel);padding:.5rem 0}
  .nav-links a{padding:.95rem 5vw;font-size:1rem}
  .nav-links a::after{display:none}
  .nav-toggle-box:checked ~ .nav-links{display:flex}
  .nav-toggle-box:checked ~ .nav-toggle::before{transform:translateY(9px) rotate(45deg)}
  .nav-toggle-box:checked ~ .nav-toggle span{opacity:0}
  .nav-toggle-box:checked ~ .nav-toggle::after{transform:translateY(-9px) rotate(-45deg)}
}
@media(max-width:520px){.nav-status{display:none}}

/* ===== HERO — kompozycja ich plakatu "PIZZA DAY / EVERY DAY" =====
   Tekst u góry, pizza w centrum, tekst na dole. Wysokość liter ograniczona
   też przez vh (min(11vw,14vh)), żeby cały plakat mieścił się w ekranie. */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:var(--pistacja);overflow:hidden;padding:clamp(1.5rem,4vh,3rem) 5vw clamp(2rem,5vh,3.5rem)}
.hero-kicker{position:relative;z-index:2;font-family:var(--font-script);font-size:clamp(1.8rem,min(4vw,5vh),3.2rem);color:var(--zielen);transform:rotate(-3deg)}
.hero-title{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;font-family:var(--font-display);text-transform:uppercase;font-size:clamp(2.8rem,min(11vw,14vh),9rem);line-height:.85;letter-spacing:.005em}
/* maska do odsłaniania linii — padding, bo Anton przy line-height .85
   wystaje poza box wiersza i overflow:hidden ścinałby górę liter */
.hero-mask{display:block;overflow:hidden;padding:.1em 0;margin:-.1em 0}
.hero-line{display:block}
.hero-line--red{color:var(--pomidor)}
.hero-mid{position:relative;display:block;margin:-.04em 0 -.05em}
.hero-pizza{width:clamp(170px,min(26vw,32vh),340px);height:auto;filter:drop-shadow(0 30px 44px rgba(32,33,28,.34))}
/* podpis "na Powiślu" jak sygnatura na pizzy — oszczędza pion i jest kolażowy */
.hero-sig{position:absolute;right:-6%;bottom:2%;font-family:var(--font-script);font-size:clamp(1.7rem,min(4vw,5vh),3rem);line-height:1;color:var(--zielen);transform:rotate(-8deg);text-transform:none;letter-spacing:0;white-space:nowrap}
.hero-sub{position:relative;z-index:2;max-width:46ch;margin:clamp(1rem,2.5vh,1.8rem) auto 0;font-size:clamp(.95rem,1.3vw,1.1rem)}
.hero-actions{position:relative;z-index:5;display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin-top:clamp(1.2rem,3vh,2rem)}

/* wycinanki kolażu po bokach — ręcznie malowane gwasze, cień tinted (nie szary),
   żeby wycinanka siadała na pistacji jak papier na papierze, a nie jak sticker */
.cut{position:absolute;height:auto;filter:drop-shadow(0 22px 30px rgba(46,58,26,.28))}
.cut-lemons{z-index:1;top:5%;left:-5%;width:clamp(120px,15vw,250px);rotate:-12deg}
.cut-aperol{z-index:1;bottom:-2%;right:-2%;width:clamp(96px,10.5vw,185px);rotate:8deg}
@media(max-width:820px){
  .cut-lemons{top:1%;left:-13%;width:38vw}
  .cut-aperol{bottom:-2%;right:-8%;width:22vw}
  .hero-sig{right:-2%}
}
/* Poniżej 700px hero jest za ciasne: przyciski rozkładają się na całą szerokość
   i nie zostaje wolny róg. Aperol wchodził wtedy na PRZEZROCZYSTY „Rezerwuj
   stolik” (zmierzone 23x36px przy 480px) — a przez ghost button widać tło.
   Czytelność CTA > trzecia wycinanka: na wąskich ekranach kolaż niesie cytryna. */
@media(max-width:700px){
  .cut-aperol{display:none}
}

/* ===== MARQUEE ===== */
.marquee{background:var(--pomidor);color:var(--krem);overflow:hidden;padding:.9rem 0;border-top:3px solid var(--wegiel);border-bottom:3px solid var(--wegiel)}
.marquee-track{display:flex;gap:3rem;width:max-content;animation:marquee 30s linear infinite;font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1rem,2vw,1.5rem);letter-spacing:.12em;white-space:nowrap}
.marquee-track span{display:flex;align-items:center;gap:3rem}
.marquee-mark{display:inline-block;width:.34em;height:.34em;flex:none;border-radius:50%;background:var(--zolty);box-shadow:-.58em 0 0 var(--pistacja),.58em 0 0 var(--pistacja)}
@keyframes marquee{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* ===== SEKCJE ===== */
.section{padding:clamp(3.75rem,7vw,6.5rem) 5vw;position:relative;overflow:hidden}
.section>:not(.section-art){position:relative;z-index:1}
.section-krem{background:var(--krem)}
.section-pistacja{background:var(--pistacja)}
.section-zielen{background:var(--zielen);color:var(--krem)}
.section-pomidor{background:var(--pomidor);color:var(--krem)}
.wrap{max-width:1200px;margin:0 auto}

.sec-script{font-family:var(--font-script);font-size:clamp(2.4rem,4.6vw,3.8rem);color:var(--pomidor);transform:rotate(-2deg);display:inline-block}
.section-zielen .sec-script,.section-pomidor .sec-script{color:var(--zolty)}
.sec-title{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(2.2rem,5.5vw,4.5rem);line-height:.95;margin:.3rem 0 1.4rem}

/* Imprezy: Anton ma wysokie glify, więc wielowierszowe nagłówki potrzebują
   większej interlinii niż jednowierszowe tytuły w pozostałych sekcjach. */
.events-page .sec-title{line-height:1.08;letter-spacing:.01em}
.events-page .duo-body .sec-title{max-width:15ch}
.events-invite{text-align:center}
.events-invite .sec-title{max-width:17ch;margin:.3rem auto 1.5rem}
.events-invite .menu-teaser-lead{max-width:72ch;margin:0 auto 1.75rem;font-size:1rem;line-height:1.65}
@media(max-width:700px){
  .events-page .sec-title{line-height:1.1}
  .events-page .duo-body .sec-title{max-width:16ch}
}

/* duo: łuk + tekst */
.duo{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.duo.rev .duo-media{order:2}
@media(max-width:860px){.duo{grid-template-columns:1fr}.duo.rev .duo-media{order:0}}
.duo-media{margin:0;position:relative}
.duo-media img,.duo-media video{width:100%;aspect-ratio:4/4.6;object-fit:cover;border-radius:50vw 50vw 12px 12px}
.duo-media.tilt{transform:rotate(-2deg)}
.duo-media.tilt-r{transform:rotate(2deg)}
.duo-media::after{content:'';position:absolute;inset:0;border-radius:50vw 50vw 12px 12px;border:3px solid var(--wegiel);translate:10px 12px;z-index:-1}
.section-zielen .duo-media::after{border-color:var(--zolty)}
.duo-body p{margin-bottom:1rem;max-width:56ch}
.duo-body .btn{margin-top:.8rem}

/* O nas — bardziej zwarty rytm bez podwójnych pustych pól */
.about-page .duo-media img,.about-page .duo-media video{aspect-ratio:4/4.2}
.about-process{padding-top:clamp(3.5rem,6vw,5.5rem)}
.about-intro{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);align-items:end;gap:clamp(2rem,6vw,6rem);margin-bottom:clamp(3.25rem,6vw,5.5rem);padding-bottom:clamp(2rem,3vw,2.75rem);border-bottom:2px solid rgba(32,33,28,.28)}
.about-intro .sec-title{max-width:16ch;margin:0;font-size:clamp(2.8rem,5.2vw,4.8rem);line-height:1}
.about-intro .menu-teaser-lead{max-width:62ch;margin:0;line-height:1.7;text-align:left}
@media(max-width:860px){
  .about-intro{grid-template-columns:1fr;align-items:start;gap:1.4rem;margin-bottom:3rem;padding-bottom:2rem}
  .about-intro .sec-title{max-width:14ch}
  .about-page .duo-media img,.about-page .duo-media video{aspect-ratio:4/4.35}
}

.sticker{position:absolute;z-index:2;background:var(--zolty);color:var(--wegiel);font-family:var(--font-script);font-size:clamp(1.6rem,2.4vw,2.2rem);padding:.35rem 1.4rem .65rem;border-radius:999px;transform:rotate(-8deg);box-shadow:0 8px 20px rgba(32,33,28,.2)}
.sticker-tr{top:4%;right:-4%}
.sticker-bl{bottom:6%;left:-5%}

/* ===== STATEMENT — manifest procesu jak plakat FORNO ===== */
.statement{background:var(--pomidor);color:var(--krem);text-align:left;padding-block:clamp(4.5rem,8vw,7.5rem)}
.statement-wrap{position:relative}
.statement-script{display:inline-block;margin:0 0 clamp(1.2rem,2.7vw,2.1rem);font-family:var(--font-script);font-size:clamp(2.8rem,5.5vw,4.8rem);line-height:.8;color:var(--zolty);transform:rotate(-3deg)}
.statement-text{max-width:1140px;margin:0;font-family:var(--font-display);font-size:clamp(2.65rem,5.35vw,5.45rem);line-height:1.04;letter-spacing:.006em;text-transform:uppercase;text-wrap:balance}
.statement-accent{color:var(--zolty)}
.inline-pill{display:inline-block;width:2.15em;height:.82em;margin:0 .09em;border:3px solid var(--krem);border-radius:999px;background:var(--pistacja);box-shadow:5px 6px 0 var(--wegiel);object-fit:cover;vertical-align:-.04em;transition:transform .35s var(--ease)}
.inline-pill--dough{transform:rotate(-3deg)}
.inline-pill--oven{transform:rotate(2deg)}
/* Pigułki to paski FOTOGRAFII (kadr przez cover) — celowo, bo gwasz wrzucony
   w zdanie łamie kontrakt DESIGN.md („ilustracje nigdy na treści”) i przy tych
   proporcjach zostawiał ~46% pustego tła. Ilustracje mają własny pas art-break. */
.inline-pill--napoli{transform:rotate(-2deg)}
.inline-pill:hover{transform:rotate(0) scale(1.055)}
.statement-footer{display:grid;grid-template-columns:minmax(0,1fr) clamp(180px,23vw,320px);align-items:end;gap:clamp(2rem,6vw,6rem);margin-top:clamp(2.6rem,5vw,4.5rem);padding-top:clamp(1.35rem,2vw,1.8rem);border-top:2px solid var(--krem)}
.statement-note{max-width:48ch;margin:0;color:var(--krem);font-size:clamp(1rem,1.25vw,1.16rem);line-height:1.65}
.statement-note::before{content:'Sekret ciasta';display:block;margin-bottom:.8rem;font-family:var(--font-display);font-size:.85rem;line-height:1;letter-spacing:.13em;text-transform:uppercase;color:var(--zolty)}
/* Ciasto zwiesza się lekko poza sekcję (bleed ~8%, nie 25% jak wcześniej —
   obcinało pół deski). Cień miękki i tinted w głęboką czerwień tła, nie
   płaski offset: gwasz ma własny światłocień i twardy duch go zabijał. */
.statement-art{width:100%;height:auto;margin-bottom:clamp(-1.7rem,-1.4vw,-.7rem);filter:drop-shadow(0 14px 20px rgba(74,14,8,.45));transform:rotate(7deg);transform-origin:center bottom}
@media(max-width:700px){
  .statement{padding-block:4rem 3rem}
  .statement-script{font-size:3rem;margin-bottom:1.35rem}
  .statement-text{font-size:clamp(2.25rem,10.5vw,3.2rem);line-height:1.06;text-wrap:wrap}
  .inline-pill{width:2em;height:.78em;border-width:2px;box-shadow:3px 4px 0 var(--wegiel)}
  .statement-footer{grid-template-columns:minmax(0,1fr) 132px;gap:1.25rem;margin-top:2.5rem;padding-top:1.25rem}
  .statement-note{font-size:.96rem;line-height:1.55}
  .statement-art{margin-bottom:-.7rem;filter:drop-shadow(0 8px 12px rgba(74,14,8,.4))}
}
@media(max-width:420px){
  .statement-text{font-size:clamp(2rem,10vw,2.65rem)}
  .statement-footer{grid-template-columns:1fr 104px;gap:.8rem}
}
@media(prefers-reduced-motion:reduce){.inline-pill:hover{transform:none}}

/* ===== HORIZONTAL ACCORDION — kategorie karty ===== */
.acc{display:flex;gap:.6rem;height:clamp(340px,52vh,520px);margin-top:2.5rem}
.acc-item{position:relative;flex:1;overflow:hidden;border-radius:18px;text-decoration:none;color:var(--krem);
  border:2px solid var(--wegiel);background:var(--zielen);
  transition:flex-grow .6s var(--ease-out-expo)}
.acc-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);transition:transform .8s var(--ease-out-expo),filter .5s ease;filter:brightness(.62) saturate(.9)}
.acc-item::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(20,22,18,.9) 0%,rgba(20,22,18,.25) 55%,transparent 100%)}
.acc-item:hover,.acc-item:focus-visible{flex-grow:2.8}
.acc-item:hover .acc-img,.acc-item:focus-visible .acc-img{transform:scale(1);filter:brightness(.78) saturate(1.05)}
.acc-inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:1.4rem;gap:.35rem}
.acc-label{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.2rem,1.9vw,1.9rem);line-height:1;letter-spacing:.04em}
.acc-price{font-family:var(--font-script);font-size:1.6rem;color:var(--zolty);line-height:1}
.acc-body{max-height:0;opacity:0;overflow:hidden;transition:max-height .6s var(--ease-out-expo),opacity .4s ease;font-size:.92rem}
.acc-item:hover .acc-body,.acc-item:focus-visible .acc-body{max-height:8rem;opacity:.95}
@media(max-width:860px){
  .acc{flex-direction:column;height:auto}
  .acc-item{min-height:180px}
  .acc-item:hover{flex-grow:1}
  .acc-body{max-height:8rem;opacity:.95}
  .acc-img{transform:scale(1);filter:brightness(.7)}
}
@media(prefers-reduced-motion:reduce){.acc-item,.acc-img,.acc-body{transition:none}}

/* ===== BENTO — 4 kolumny x 3 rzędy = 12 komórek, zero pustek ===== */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(0,1fr);grid-auto-flow:dense;gap:.9rem;aspect-ratio:16/11;margin-top:2.5rem}
.bento-item{position:relative;overflow:hidden;border-radius:16px;border:2px solid var(--wegiel);margin:0;background:var(--pistacja)}
.bento-item img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out-expo);will-change:transform}
.bento-item:hover img{transform:scale(1.07)}
.b-a{grid-column:span 2;grid-row:span 2}   /* 4 komórki */
.b-b{grid-column:span 2}                    /* 2 */
.b-g{grid-column:span 2}                    /* 2 */
/* c,d,e,f = 1x1 -> 4 komórki. Razem 4+2+2+4 = 12 = 4 kol x 3 rzedy */
.bento-cap{position:absolute;left:.8rem;bottom:.7rem;z-index:2;font-family:var(--font-script);font-size:1.5rem;color:var(--krem);text-shadow:0 2px 12px rgba(0,0,0,.75);line-height:1}
@media(max-width:860px){
  .bento{grid-template-columns:repeat(2,1fr);aspect-ratio:3/4}
  .b-a{grid-column:span 2;grid-row:span 2}
  .b-b,.b-g{grid-column:span 2;grid-row:span 1}
}
@media(prefers-reduced-motion:reduce){.bento-item:hover img{transform:none}}

/* ===== ART-BREAK — pas ilustracji jako osobny takt redakcyjny =====
   Kontrakt z DESIGN.md: siatka 12 kolumn wypełniona w całości (3+4+2+3),
   3–5 gwaszy o WYRAŹNIE różnej skali i rotacji, cienie miękkie i tinted,
   zero białych kart i badge'ów. Ilustracje nie leżą na zdjęciach ani na
   tekście — mają własną strefę. Poniżej 768px: dwie kolumny, duże elementy
   biorą obie, bez pozycjonowania poza ekranem. */
.art-break{background:var(--pistacja);border-top:3px solid var(--wegiel);border-bottom:3px solid var(--wegiel)}
/* wariant kremowy — gdy pas sąsiaduje z sekcją pistacjową i rytm koloru
   musi się przełamać (o-nas: wina=pistacja -> pas=krem -> CTA=pomidor) */
.art-break--krem{background:var(--krem)}
.art-break .sec-head{text-align:center;margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.art-break .sec-title{margin-bottom:0}
.art-break-grid{display:grid;grid-template-columns:repeat(12,1fr);align-items:end;gap:clamp(.8rem,2.2vw,2rem)}
.art-piece{margin:0;min-width:0}
.art-piece img{width:100%;height:auto;filter:drop-shadow(0 18px 26px rgba(46,58,26,.3))}
.art-piece figcaption{margin-top:.5rem;font-family:var(--font-script);font-size:clamp(1.4rem,2vw,1.9rem);line-height:1;color:var(--zielen);text-align:center}
/* rozkład 3+4+2+3 = 12; skala i rotacja różnicowane ręcznie, nie losowo */
.art-piece--oil{grid-column:span 3;rotate:-6deg;translate:0 -4%}
.art-piece--oven{grid-column:span 4;rotate:2deg}
.art-piece--moka{grid-column:span 2;rotate:-9deg;translate:0 -14%}
.art-piece--cheese{grid-column:span 3;rotate:7deg;translate:0 -2%}
/* wariant „Aperitivo” na o-nas: rozkład 4+5+3 = 12 */
.art-piece--wine{grid-column:span 4;rotate:-5deg;translate:0 -3%}
.art-piece--sardines{grid-column:span 5;rotate:3deg}
.art-piece--aperol{grid-column:span 3;rotate:-8deg;translate:0 -6%}
/* Telefon: 2 kolumny. Liczba sztuk MUSI wypełnić rzędy bez pustej komórki —
   4 sztuki przy piecu na całą szerokość dawały rząd „sery + dziura”.
   Układ 1-2-1: piec (2 kol), oliwa|moka, sery (2 kol). Pas Aperitivo ma
   3 sztuki: sardynki (2 kol), wino|aperol — też bez dziury. */
@media(max-width:768px){
  .art-break-grid{grid-template-columns:repeat(2,1fr);gap:1.4rem 1rem;align-items:center}
  .art-piece--oven,.art-piece--sardines{grid-column:span 2;order:-1}
  .art-piece--cheese{grid-column:span 2}
  .art-piece--oil,.art-piece--moka,
  .art-piece--wine,.art-piece--aperol{grid-column:span 1}
  .art-piece{translate:0 0}
  .art-piece--oven img,.art-piece--sardines img{max-width:min(78%,340px);margin:0 auto}
  .art-piece--cheese img{max-width:min(62%,260px);margin:0 auto}
}

/* ===== SZACHOWNICA ===== */
.check{height:44px;background:conic-gradient(var(--pomidor) 90deg,transparent 90deg 180deg,var(--pomidor) 180deg 270deg,transparent 270deg);background-size:44px 44px}

/* ===== PAGE HERO (podstrony) ===== */
.page-hero{background:var(--pistacja);padding:clamp(4rem,9vh,6.5rem) 5vw clamp(3rem,7vh,5rem);position:relative;overflow:hidden;isolation:isolate}
.page-hero::before{content:'';position:absolute;inset:0;z-index:-1;opacity:.52;background:linear-gradient(115deg,transparent 0 27%,rgba(247,239,223,.58) 27.2% 29%,transparent 29.3% 67%,rgba(47,111,174,.16) 67.3% 68.4%,transparent 68.7%),radial-gradient(circle at 50% 8%,rgba(242,211,60,.65) 0 3px,transparent 3.5px);background-size:auto,28px 28px}
.page-hero .wrap{position:relative;z-index:1}
.page-hero h1{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(3.4rem,11vw,9rem);line-height:.9}
.page-hero-script{font-family:var(--font-script);font-size:clamp(2.3rem,5vw,3.8rem);color:var(--zielen);transform:rotate(-3deg);display:inline-block;margin-top:.4rem}

/* ===== MENU PAGE — sticky rail + scroll-spy ===== */
.menu-page{background:var(--krem);padding:clamp(3rem,6vw,5rem) 5vw clamp(4rem,7vw,6rem);position:relative;overflow:clip}
.menu-page::after{display:none}
.menu-layout{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:210px 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start;position:relative;z-index:1}
.menu-rail{position:sticky;top:calc(var(--nav-h) + 1.4rem);z-index:var(--z-sticky);padding:1rem 0 1.1rem;border-top:1px solid rgba(32,33,28,.2);border-bottom:1px solid rgba(32,33,28,.2)}
.menu-rail nav{display:flex;flex-direction:column;gap:.15rem}
.menu-rail a{position:relative;display:block;text-decoration:none;font-weight:700;text-transform:uppercase;letter-spacing:.09em;font-size:.78rem;color:var(--mgla);padding:.48rem .35rem .48rem 1.3rem;white-space:nowrap;transition:color .25s ease,transform .35s var(--ease)}
.menu-rail a::before{content:'';position:absolute;left:.18rem;top:50%;width:7px;height:7px;border-radius:50%;background:var(--pomidor);opacity:0;transform:translateY(-50%) scale(.25);transition:opacity .25s ease,transform .35s var(--ease)}
.menu-rail a:hover{color:var(--wegiel)}
.menu-rail a.is-current{color:var(--pomidor);transform:translateX(.28rem)}
.menu-rail a.is-current::before{opacity:1;transform:translateY(-50%) scale(1)}
.menu-rail-title{font-family:var(--font-script);font-size:2rem;color:var(--pomidor);margin-bottom:.6rem;transform:rotate(-2deg)}
@media(max-width:860px){
  .menu-layout{grid-template-columns:1fr}
  /* pasek siada DOKŁADNIE pod nawigacją (nie pod nią) — stąd var, nie 60px */
  .menu-rail{position:sticky;top:var(--nav-h);overflow-x:auto;background:color-mix(in srgb,var(--krem) 96%,transparent);backdrop-filter:blur(8px);margin:0 -5vw;padding:.8rem 5vw;border-top:1px solid rgba(32,33,28,.12);border-bottom:1px solid rgba(32,33,28,.16);scrollbar-width:none}
  .menu-rail::-webkit-scrollbar{display:none}
  .menu-rail nav{width:max-content;flex-direction:row;gap:.8rem}
  .menu-rail-title{display:none}
  .menu-rail a{padding:.35rem .2rem .4rem;border-bottom:2px solid transparent;white-space:nowrap}
  .menu-rail a::before{display:none}
  .menu-rail a.is-current{border-color:var(--pomidor);transform:none}
}
@media(prefers-reduced-motion:reduce){.menu-rail a,.menu-rail a::before{transition:none}}
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem 4rem;align-items:start}
@media(max-width:1100px){.menu-grid{grid-template-columns:1fr}}
.menu-block{margin-bottom:2.4rem;scroll-margin-top:120px}
/* Nagłówek kategorii = nazwa + gwasz jako kotwica wizualna. Ilustracja stoi
   OBOK tekstu we własnej kolumnie flex — nigdy na nim (kontrakt DESIGN.md).
   Karta dań to ściana typografii; ten jeden obrazek robi z niej coś do skanowania. */
.menu-cat-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:1.2rem 0 1rem}
.menu-cat{font-family:var(--font-script);font-weight:400;color:var(--pomidor);font-size:clamp(2.2rem,3.4vw,2.9rem);margin:0;transform:rotate(-1.5deg)}
.menu-cat-art{flex:none;width:clamp(62px,8vw,98px);height:auto;filter:drop-shadow(0 10px 16px rgba(32,33,28,.22))}
.menu-block:nth-child(odd) .menu-cat-art{rotate:-7deg}
.menu-block:nth-child(even) .menu-cat-art{rotate:6deg}
@media(max-width:480px){.menu-cat-art{width:56px}}
.dish{margin-bottom:.95rem}
/* wypunktowanie kropkami — klasyczna typografia karty dań */
.dish-head{display:flex;align-items:baseline;gap:.5rem;font-weight:700;letter-spacing:.02em;font-size:1rem}
.dish-name{flex:none;max-width:calc(100% - 4.5rem)}
.dots{flex:1;border-bottom:2px dotted rgba(32,33,28,.28);translate:0 -.3em;min-width:1.2rem}
.dish-head b{flex:none;color:var(--pomidor);font-family:var(--font-display);font-weight:400;font-size:1.05rem;letter-spacing:.04em}
.dish p{font-size:.9rem;color:var(--mgla);max-width:52ch;margin-top:.15rem}
.menu-note{margin-top:2.5rem;font-size:.9rem;color:var(--mgla);font-style:italic;text-align:center}

/* ===== CTA STRIP ===== */
.cta-strip{background:var(--pomidor);color:var(--krem);text-align:center;padding:clamp(3rem,7vw,5rem) 5vw;display:flex;flex-direction:column;gap:1.4rem;align-items:center;position:relative;overflow:hidden;isolation:isolate}
/* line-height 1.1 zlewało linie: Anton ma wysokie wersaliki, a polskie ogonki
   (Ą/Ę) schodzą pod linię bazową i wchodziły w wersaliki linijki niżej —
   widoczne dopiero przy zawijaniu na 4 wiersze na telefonie. */
.cta-strip p{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.3rem,3vw,2.2rem);letter-spacing:.06em;line-height:1.24;max-width:26ch;text-wrap:balance}
.cta-strip a{color:inherit}
.cta-strip .btn-red{background:var(--krem);border-color:var(--krem);color:var(--pomidor)}
.cta-strip .btn-red:hover{box-shadow:4px 6px 0 rgba(32,33,28,.45)}

/* ===== KONTAKT ===== */
.contact{padding:clamp(4rem,8vw,7rem) 5vw;background:var(--zielen);color:var(--krem)}
.contact-card{max-width:1060px;margin:0 auto;background:var(--krem);color:var(--wegiel);border-radius:26px;padding:clamp(2rem,5vw,3.5rem);box-shadow:0 24px 60px rgba(0,0,0,.25);transform:rotate(-.5deg)}
.contact-logo{font-family:var(--font-body);font-weight:600;font-size:1.7rem;display:flex;align-items:baseline;justify-content:center;gap:.6rem;margin-bottom:2rem;text-transform:uppercase}
.contact-script{font-family:var(--font-script);letter-spacing:0;color:var(--bazylia);text-transform:none}
.contact-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem}
.contact-cols h3{font-family:var(--font-script);font-weight:400;color:var(--pomidor);font-size:2rem;margin-bottom:.5rem;transform:rotate(-1deg)}
.contact-cols p{margin-bottom:.7rem;font-size:.95rem}
.contact-cols .btn{margin-top:.4rem}
/* Podpis „A presto!” to PIECZĄTKA, nie przycisk. Był pomidorowy jak .btn-red,
   więc na telefonie (kolumny się układają pionowo) siadał tuż pod „Zadzwoń”
   i czytał się jak drugi CTA. Bazylia odcina go od akcji i zostaje w palecie. */
.contact-signoff{display:flex;align-items:center;justify-content:center;gap:1rem;width:max-content;max-width:100%;margin:3.25rem auto 0;padding:.45rem 1.35rem .7rem;background:var(--bazylia);color:var(--krem);border-radius:999px;box-shadow:4px 5px 0 var(--wegiel);transform:rotate(-2deg)}
.contact-signoff span{font-family:var(--font-script);font-size:clamp(2rem,4vw,2.7rem);line-height:1}
.signoff-dots{display:inline-flex;align-items:center;gap:.28rem}
.signoff-dots b{display:block;width:.45rem;height:.45rem;border-radius:50%;background:var(--pistacja)}
.signoff-dots b:nth-child(2){background:var(--zolty)}
.signoff-dots b:nth-child(3){background:var(--pistacja)}

.map-wrap{line-height:0;border-top:3px solid var(--wegiel)}
.map-wrap iframe{width:100%;height:min(420px,50vh);border:0;filter:saturate(.85)}

/* ===== FOOTER ===== */
.footer{background:var(--wegiel);color:var(--krem);text-align:center;padding:2rem 1.6rem 1.8rem;font-size:.85rem;letter-spacing:.05em}
.footer-logo{font-family:var(--font-body);font-weight:600;font-size:1.15rem;text-transform:uppercase;margin-bottom:.6rem;display:inline-flex;align-items:baseline;justify-content:center;gap:.5rem}
.footer-script{font-family:var(--font-script);letter-spacing:0;font-size:1.5rem;color:var(--pistacja);text-transform:none;display:inline-block;transform:rotate(-4deg)}
.footer a{color:inherit}
.footer-credit{opacity:.7}

/* ===== ANIMACJE =====
   Stany startowe TYLKO pod .js — bez JS treść jest normalnie widoczna.
   .anim-done = bezpiecznik: jeśli GSAP/JS padnie, wszystko wraca do widocznego. */
.js .rv{opacity:0;translate:0 26px;transition:opacity .7s var(--ease),translate .7s var(--ease)}
.js .rv.in{opacity:1;translate:0 0}
.js [data-hero-anim]{opacity:0}
.js.anim-done [data-hero-anim],.js.anim-done .rv{opacity:1;translate:0 0}
@media(prefers-reduced-motion:reduce){
  .js .rv,.js [data-hero-anim]{opacity:1;translate:0 0;transition:none}
}

/* płynne przejścia między podstronami (Chrome/Edge; reszta ignoruje) */
@view-transition{navigation:auto}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}}