/* Bruk Cafe — arkusz wspólny dla wersji PL i EN.
   Fonty: przed startem produkcyjnym trzeba je zhostować u siebie (/fonts),
   a nie ciągnąć z Google — inaczej mamy transfer IP użytkowników do Google
   i temat RODO na zgodach. Na czas podglądu zostaje CDN. */

:root{
  --tlo:#e7e5e1;
  --tlo-2:#dedbd5;
  --beton:#d2cfc9;
  --atrament:#131313;
  --cichy:#6f6b64;
  --linia:#131313;
  --wlos:rgba(19,19,19,.14);

  --pion:clamp(56px,9vw,132px);   /* rytm pionowy sekcji */
  --bok:clamp(20px,5vw,64px);     /* margines boczny */
  --max:1320px;

  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --grotesk:"Archivo","Helvetica Neue",Inter,system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* gdy działa JS, przewijanie do kotwic prowadzi skrypt własną krzywą,
   więc systemowe smooth musi ustąpić, żeby oba się nie biły */
html.js{scroll-behavior:auto}
body{
  background:var(--tlo);color:var(--atrament);font-family:var(--grotesk);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}

/* etykieta — mały mono wersalik, powtarza się w całym layoucie */
.etykieta{
  font:500 clamp(10px,1.1vw,11.5px)/1 var(--mono);
  letter-spacing:.18em;text-transform:uppercase;
}

.ramka{max-width:var(--max);margin-inline:auto;padding-inline:var(--bok)}

/* ── nawigacja ─────────────────────────────────────────── */
.nawigacja{
  position:sticky;top:0;z-index:50;background:rgba(231,229,225,.82);
  backdrop-filter:blur(14px) saturate(1.1);border-bottom:1px solid var(--wlos);
}
.nawigacja .rzad{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  height:clamp(56px,7vw,68px);overflow:hidden;
}
/* Lewy slot nawigacji zmienia zawartość w zależności od pozycji na stronie:
   dopóki widać duże BRUK w hero, stoi tam przycisk Menu; kiedy hero zjedzie
   z ekranu, przycisk przenika w znak marki, który wraca na górę.
   Klasę .po-hero dokłada skrypt; bez JS widać sam przycisk Menu. */
/* Znak dobrany tak, żeby jego masa optyczna odpowiadała przyciskowi Menu.
   Oba elementy dzielą ten sam środek, więc podmiana nie przesuwa niczego
   w bok ani w pionie. */
.marka img{height:clamp(26px,3.2vw,31px);width:auto}

.zmiennik{
  position:relative;display:grid;place-items:center;
  min-height:44px;
}
.zmiennik>*{grid-area:1/1}
.zmiennik .marka{display:inline-flex;align-items:center;justify-content:center}
/* Podmiana jako pionowe przesunięcie: jedno wyjeżdża w górę, drugie
   wjeżdża od dołu, oba wokół wspólnego środka. */
.js .zmiennik>*{
  transition:opacity .55s ease,transform .6s cubic-bezier(.22,.85,.25,1);
  will-change:opacity,transform;
}
.js .zmiennik .marka{opacity:0;transform:translateY(11px);pointer-events:none}
.js .po-hero .zmiennik .przycisk{opacity:0;transform:translateY(-11px);pointer-events:none}
.js .po-hero .zmiennik .marka{opacity:1;transform:translateY(0);pointer-events:auto}

/* bez JS znak marki nie jest potrzebny — przycisk Menu zostaje na stałe */
html:not(.js) .zmiennik .marka{display:none}

@media(prefers-reduced-motion:reduce){
  .js .zmiennik>*{transition:opacity .01s linear;transform:none!important}
}
.linki{display:flex;align-items:center;gap:clamp(16px,2.6vw,34px)}
.linki a{
  text-decoration:none;color:var(--cichy);position:relative;padding-block:6px;
  transition:color .25s ease;
}
.linki a::after{
  content:"";position:absolute;left:0;bottom:2px;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.linki a:hover{color:var(--atrament)}
.linki a:hover::after{transform:scaleX(1);transform-origin:left}
.jezyk{color:var(--atrament)!important;border:1px solid var(--wlos);padding:6px 10px}
.jezyk::after{display:none}

/* przycisk do karty — najważniejsza akcja, widoczna na każdej szerokości */
.przycisk{
  color:var(--tlo)!important;background:var(--atrament);border:1px solid var(--atrament);
  padding:8px 15px;transition:opacity .25s ease;text-decoration:none;
}
.przycisk::after{display:none}
.przycisk:hover{opacity:.82}
@media(max-width:640px){
  .linki .chowaj{display:none}
}

/* ── hero ──────────────────────────────────────────────── */
.hero{padding-block:clamp(44px,8vw,96px) clamp(34px,5vw,60px);position:relative;isolation:isolate}

/* Kostka brukowa w tle — wiązanie przesunięte co drugi rząd, jak na chodniku.
   Wzór jest w SVG (ostry na każdym ekranie), wygaszany maską ku brzegom,
   żeby nie wyglądał jak tapeta i nie odbierał czytelności znakowi. */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='84'%3E%3Cg fill='none' stroke='%23131313' stroke-width='1.1' opacity='0.5'%3E%3Crect x='1' y='1' width='62' height='40' rx='3'/%3E%3Crect x='65' y='1' width='62' height='40' rx='3'/%3E%3Crect x='-31' y='43' width='62' height='40' rx='3'/%3E%3Crect x='33' y='43' width='62' height='40' rx='3'/%3E%3Crect x='97' y='43' width='62' height='40' rx='3'/%3E%3C/g%3E%3C/svg%3E");
  background-size:clamp(86px,11vw,128px) auto;
  opacity:.15;
  /* Kilka nieregularnych plam zamiast jednolitego tła — bruk widać tylko
     miejscami, jakby resztę przykryto. Układ jest stały i skomponowany:
     losowanie przy każdym wejściu potrafiłoby zebrać plamy w jednym rogu
     albo wsadzić je w prześwity liter. */
  --plamy:
    radial-gradient(17% 22% at 9% 22%,  #000 0%, rgba(0,0,0,.55) 38%, transparent 68%),
    radial-gradient(13% 19% at 43% 84%, #000 0%, rgba(0,0,0,.5) 36%, transparent 66%),
    radial-gradient(11% 15% at 78% 15%, #000 0%, rgba(0,0,0,.45) 38%, transparent 70%),
    radial-gradient(9%  14% at 93% 58%, #000 0%, rgba(0,0,0,.4) 36%, transparent 68%);
  -webkit-mask-image:var(--plamy);
  mask-image:var(--plamy);
  -webkit-mask-composite:source-over;
  mask-composite:add;
}
/* nie przekraczamy 640 px — powyżej natywnej szerokości pliku logo się rozmywa */
.hero .znak{
  width:min(74%,640px);height:auto;
  animation:wejscie 1s cubic-bezier(.2,.8,.2,1) both;
}
.hero .podpis{
  margin-top:clamp(26px,4vw,44px);display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  color:var(--cichy);
}
.hero .podpis b{display:block;color:var(--atrament);margin-bottom:5px}

@keyframes wejscie{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ── pasek przewijany ──────────────────────────────────── */
/* pasek oferty — siedzi na samej górze, nad nawigacją, i wyjeżdża przy przewijaniu */
.tasma{
  border-bottom:1px solid var(--linia);overflow:hidden;background:var(--tlo-2);
  padding-block:13px;
}
.tasma .tor{display:flex;gap:44px;width:max-content;animation:jedzie 34s linear infinite}
.tasma span{white-space:nowrap;color:var(--atrament);opacity:.72}
@keyframes jedzie{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .tasma .tor{animation:none}
  .hero .znak{animation:none}
}

/* ── sekcje ────────────────────────────────────────────── */
.sekcja{padding-block:var(--pion);border-bottom:1px solid var(--wlos)}
/* kotwice nie mogą chować nagłówka pod przyklejonym paskiem nawigacji */
[id]{scroll-margin-top:clamp(72px,9vw,92px)}
.naglowek{
  display:flex;align-items:baseline;gap:16px;margin-bottom:clamp(26px,4vw,48px);
  color:var(--cichy);
}
.naglowek .nr{color:var(--atrament)}
.naglowek::after{content:"";flex:1;height:1px;background:var(--wlos)}

h2{
  font-size:clamp(30px,5.4vw,64px);line-height:1.02;letter-spacing:-.035em;
  font-weight:700;max-width:17ch;
}
.wiodacy{font-size:clamp(16px,1.7vw,19px);line-height:1.65;color:var(--cichy);max-width:52ch;margin-top:22px}

/* trzy fakty */
.fakty{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--wlos);
       border:1px solid var(--wlos)}
.fakty article{background:var(--tlo);padding:clamp(24px,3.4vw,38px)}
.fakty .duza{font-size:clamp(28px,3.6vw,42px);letter-spacing:-.03em;font-weight:700;
             margin-block:12px 10px;display:block}
.fakty p{color:var(--cichy);font-size:15px;line-height:1.6}
@media(max-width:760px){.fakty{grid-template-columns:1fr}}

/* blok o lokalu */
.opowiesc{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,72px);align-items:start}
@media(max-width:900px){.opowiesc{grid-template-columns:1fr}}

.plyta{
  background:var(--beton);aspect-ratio:4/5;position:relative;overflow:hidden;
  background-image:
    repeating-linear-gradient(115deg,rgba(0,0,0,.035) 0 1px,transparent 1px 9px),
    radial-gradient(circle at 28% 22%,rgba(0,0,0,.05) 0 2px,transparent 3px);
  background-size:auto,30px 30px;
}
.plyta figcaption{position:absolute;left:14px;bottom:12px;color:rgba(19,19,19,.45)}

/* Kolaż — ten sam obrys co pojedyncze zdjęcie, w środku siatka kadrów.
   Docelowo każdy .kafel dostaje <img>; teraz to puste pola do podmiany. */
.kolaz{
  display:grid;gap:6px;padding:6px;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);
  background-image:none;background:var(--beton);
}
.kolaz .kafel{
  background:rgba(19,19,19,.055);
  background-image:repeating-linear-gradient(115deg,rgba(0,0,0,.03) 0 1px,transparent 1px 9px);
}
.kolaz .kafel:nth-child(1){grid-column:1/3;grid-row:1/3}
.kolaz .kafel:nth-child(2){grid-column:3/4;grid-row:1/2}
.kolaz .kafel:nth-child(3){grid-column:3/4;grid-row:2/4}
.kolaz .kafel:nth-child(4){grid-column:1/2;grid-row:3/4}
.kolaz .kafel:nth-child(5){grid-column:2/3;grid-row:3/4}
.kolaz .kafel img{width:100%;height:100%;object-fit:cover}
.kolaz figcaption{left:16px;bottom:14px}

/* ── karta / menu ──────────────────────────────────────── */
.karta{columns:2;column-gap:clamp(34px,5vw,72px)}
@media(max-width:880px){.karta{columns:1}}
.grupa{break-inside:avoid;margin-bottom:clamp(34px,4vw,54px)}
.grupa h3{margin-bottom:18px;color:var(--cichy)}

.pozycja{padding-block:12px;border-bottom:1px solid var(--wlos)}
.pozycja .glowa{display:flex;align-items:baseline;gap:10px}
.pozycja .nazwa{font-size:clamp(16px,1.7vw,18px);letter-spacing:-.01em}
.pozycja .kropki{flex:1;border-bottom:1px dotted rgba(19,19,19,.3);transform:translateY(-4px);min-width:16px}
.pozycja .cena{font:500 11px/1 var(--mono);letter-spacing:.08em;color:var(--cichy);white-space:nowrap}
.pozycja .sklad{margin-top:6px;font-size:13.5px;line-height:1.55;color:var(--cichy);max-width:54ch}
.znacznik{
  font:500 9.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--wlos);padding:3px 5px;color:var(--cichy);transform:translateY(-1px);
}
.nota{margin-top:20px;color:var(--cichy);opacity:.75}

/* ── stopka ────────────────────────────────────────────── */
.stopka{padding-block:clamp(40px,6vw,72px) clamp(48px,7vw,84px)}
.stopka .siatka{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
                gap:clamp(24px,4vw,48px)}
.stopka b{display:block;margin-bottom:12px}
.stopka p,.stopka a{color:var(--cichy);font-size:15px;line-height:1.85;text-decoration:none}
.stopka a:hover{color:var(--atrament)}
.stopka .znak-stopka{margin-top:clamp(40px,6vw,72px);width:100%;height:auto;opacity:.1}

/* ── wejścia przy przewijaniu ──────────────────────────── */
/* klasa .js dokłada skrypt — bez JS treść jest po prostu widoczna od razu */
.js .zjawia{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.js .zjawia.widoczne{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .zjawia{opacity:1;transform:none;transition:none}}

/* ── dotyk / mobile ────────────────────────────────────── */
@media(hover:none){
  .linki a::after{display:none}
}

/* Telefon. Zasada: mniej linii, więcej powietrza, wolniejszy i miększy ruch.
   Wszystkie akcenty (mono-wersaliki, numery sekcji, kropki wiodące, taśma)
   zostają — zmienia się rytm, nie język wizualny. */
@media(max-width:620px){
  :root{
    --bok:24px;
    --pion:clamp(64px,17vw,88px);
  }

  /* ruch: dłuższy, delikatniejszy, z mniejszym przesunięciem */
  .js .zjawia{transform:translateY(12px);transition:opacity 1.05s ease,transform 1.05s cubic-bezier(.16,.84,.28,1)}
  .tasma .tor{animation-duration:52s}
  .hero .znak{animation-duration:1.25s}

  /* nawigacja: wyższa, spokojniejsza, z większym polem dotyku */
  .nawigacja .rzad{height:62px}
  .linki{gap:12px}
  .linki a{padding-block:11px}
  /* pola dotyku co najmniej 44 px — inaczej trafienie kciukiem jest loterią */
  .jezyk,.przycisk{
    display:inline-flex;align-items:center;justify-content:center;
    min-height:44px;padding-block:0;
  }
  .jezyk{padding-inline:14px}
  .przycisk{padding-inline:20px}

  /* hero: znak nieco mniejszy, żeby podpis wszedł na pierwszy ekran */
  .hero{padding-block:38px 30px}
  .hero .znak{width:min(78%,300px)}
  .hero .podpis{
    grid-template-columns:1fr;gap:0;margin-top:34px;
    border-top:1px solid var(--wlos);
  }
  .hero .podpis>div{
    padding-block:15px;border-bottom:1px solid var(--wlos);
    display:flex;justify-content:space-between;align-items:baseline;gap:14px;
    text-align:right;line-height:1.5;
  }
  /* etykieta trzyma się jednej linii, opis łamie się do prawej krawędzi */
  .hero .podpis b{margin:0;text-align:left;white-space:nowrap}

  /* fakty: bez ramki, same włoskowate linie — mniej pudełek, więcej spokoju */
  .fakty{border:0;background:none;gap:0}
  .fakty article{
    padding:26px 0;border-bottom:1px solid var(--wlos);background:none;
  }
  .fakty article:last-child{border-bottom:0}
  .fakty .duza{margin-block:10px 8px}

  /* nagłówki: nieco mniejsze i ciaśniejsze — bardziej wyciszone */
  h2{font-size:clamp(27px,7.6vw,34px);letter-spacing:-.028em;line-height:1.08}
  .wiodacy{font-size:16px;line-height:1.72;margin-top:18px}
  .naglowek{margin-bottom:30px}

  .plyta{aspect-ratio:3/4;margin-top:34px}

  /* karta: więcej oddechu między pozycjami, cena przy prawej krawędzi */
  .grupa{margin-bottom:42px}
  .grupa h3{margin-bottom:16px}
  .pozycja{padding-block:15px}
  .pozycja .glowa{flex-wrap:nowrap;gap:14px;align-items:baseline}
  .pozycja .kropki{display:none}
  .pozycja .cena{margin-left:auto}
  .pozycja .sklad{margin-top:7px;font-size:13px;line-height:1.6}

  .stopka .siatka{gap:30px}
  .stopka .znak-stopka{opacity:.08}
}

/* Nazwa zawija się w obrębie swojej kolumny, cena zostaje w tym samym wierszu
   przy prawej krawędzi. Bez flex:1 1 100% — to zrzucało do osobnej linii
   także krótkie pozycje i robiło z karty rozstrzeloną listę. */
@media(max-width:620px){
  .pozycja .nazwa{flex:1 1 auto;min-width:0}
}

/* przycisk nawigacji przy adresie — ten sam język wizualny co znaczniki
   wege/vegan w karcie, tylko klikalny */
/* .stopka a nadpisuje font-size ze .znacznik, stad wlasna, mocniejsza regula */
.stopka .prowadz{
  font:500 9.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
}
.prowadz{
  display:inline-flex;align-items:center;gap:5px;margin-top:12px;
  padding:3px 6px;text-decoration:none;color:var(--cichy);
  border-color:rgba(19,19,19,.26);
  transition:color .25s ease,border-color .25s ease,background .25s ease;
}
.prowadz::before{content:"↗";font-size:9px;line-height:1;transform:translateY(-.5px)}
.prowadz:hover{color:var(--tlo);background:var(--atrament);border-color:var(--atrament)}