/* ZISCH A - Stół obiektów. Kroje: Inter Tight (zmienny 400-800), Besley italic do haseł. */
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/inter-tight-lat.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/inter-tight-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Besley';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/besley-it-lat.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Besley';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/besley-it-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --stol:#EDEEF0;--ink:#0A0A0A;--biel:#F7F7F5;--plansza:#101114;
  --smak:#FFE11A;--smak-tekst:#0A0A0A;--smak-ciemny:#5A4C00;--zalew:#FFE11A;
  --nag:64px;--marg:clamp(18px,3vw,44px);
  --fd:'Inter Tight',system-ui,sans-serif;--fi:'Besley',Georgia,serif;
  --e:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box}
html{scroll-padding-top:var(--nag);overflow-x:clip;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--stol);color:var(--ink);font:400 16px/1.5 var(--fd);overflow-x:clip;font-feature-settings:"ss01","cv11"}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p,dl,dd,dt,ol,ul,figure{margin:0}
ol,ul{padding:0;list-style:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pomin{position:absolute;left:var(--marg);top:-60px;z-index:100;background:var(--ink);color:#fff;padding:8px 14px}
.pomin:focus{top:12px}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.krzyz{display:inline-block;width:.62em;height:.62em;background:url(img/krzyz.svg) center/contain no-repeat;vertical-align:.08em;margin-left:.28em;border-radius:1px}

/* ---------- nagłówek ---------- */
.naglowek{position:fixed;inset:0 0 auto 0;height:var(--nag);z-index:40;display:flex;align-items:center;gap:28px;padding:0 var(--marg);color:var(--ink);transition:color .4s}
html.w-hero .naglowek{color:var(--smak-tekst)}
.logo{font-weight:800;font-size:22px;letter-spacing:-.04em;text-decoration:none;display:inline-flex;align-items:center}
.naglowek__nav{display:flex;gap:22px;margin-left:auto;font-size:14px;font-weight:500}
.naglowek__nav a,.naglowek__kosz{text-decoration:none;position:relative}
.naglowek__nav a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--e)}
.naglowek__nav a:hover::after{transform:scaleX(1)}
.naglowek__kosz{font-size:14px;font-weight:500;border:1.5px solid currentColor;border-radius:999px;padding:7px 14px;display:inline-flex;gap:8px;align-items:center}
.naglowek__kosz b{font-weight:700}
.menu-przycisk{display:none;width:40px;height:40px;position:relative}
.menu-przycisk span{position:absolute;left:9px;right:9px;height:2px;background:currentColor;top:15px;transition:transform .3s}
.menu-przycisk span+span{top:23px}
html.menu-otwarte .menu-przycisk span{transform:translateY(4px) rotate(45deg)}
html.menu-otwarte .menu-przycisk span+span{transform:translateY(-4px) rotate(-45deg)}
.menu-tel{display:none}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:600px;background:var(--smak);color:var(--smak-tekst);overflow:clip;isolation:isolate}
.hero__zalew{position:absolute;inset:0;background:var(--zalew);clip-path:circle(0% at 50% 56%);z-index:0;pointer-events:none}
.hero__zalew.lej{transition:clip-path .9s cubic-bezier(.3,.6,.2,1);clip-path:circle(120% at 50% 56%)}
.hero__rog{position:absolute;top:calc(var(--nag) + 10px);z-index:2;display:flex;flex-direction:column;gap:2px;max-width:220px}
.hero__rog--lt{left:var(--marg)}
.hero__rog--rt{right:var(--marg);text-align:right;align-items:flex-end}
.hero__etyk{font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.65;margin-top:14px}
.hero__dana{font-size:15px;font-weight:600;letter-spacing:-.01em}
.hero__scena{position:absolute;inset:0;z-index:1;display:grid;place-items:center;cursor:grab}
.hero__scena.ciagnie{cursor:grabbing}
.hero__gl{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:3;touch-action:pan-y}
html.gl .hero__puszka,html.gl .hero__sasiad{visibility:hidden}
html.gl .hero__scena .hero__cien{visibility:visible}
.hero__puszka{position:relative;height:min(72svh,760px);aspect-ratio:3/4;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-y;z-index:2}
.hero__puszka.ciagnie{cursor:grabbing}
.hero__klatka{height:100%;width:100%;object-fit:contain;-webkit-user-drag:none;pointer-events:none;will-change:transform}
.hero__cien{position:absolute;left:14%;right:14%;bottom:1%;height:9%;background:radial-gradient(ellipse at center,rgba(0,0,0,.28) 0%,rgba(0,0,0,.14) 40%,rgba(0,0,0,0) 70%);z-index:-1;filter:blur(2px)}
.hero__sasiad{position:absolute;top:50%;height:min(34svh,330px);aspect-ratio:3/4;opacity:.5;transition:opacity .4s,transform .6s var(--e);transform:translateY(-50%) scale(.96)}
.hero__sasiad img{height:100%;width:100%;object-fit:contain}
.hero__sasiad:hover{opacity:.9;transform:translateY(-50%) scale(1)}
.hero__sasiad--l{left:6vw}.hero__sasiad--r{right:6vw}
.hero__dol{position:absolute;left:var(--marg);right:var(--marg);bottom:22px;z-index:3;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:16px}
.hero__haslo{font:italic 400 clamp(18px,1.6vw,24px)/1.2 var(--fi)}
.hero__nav{display:flex;align-items:center;gap:10px;justify-content:center;flex-wrap:wrap}
.hero__nav button{width:44px;height:44px;border:1.5px solid currentColor;border-radius:999px;font-size:18px;transition:background .25s,color .25s}
.hero__nav button:hover{background:var(--smak-tekst);color:var(--smak)}
.hero__licznik{font-size:14px;min-width:46px;text-align:center}
.hero__licznik b{font-weight:700}
.hero__hint{flex-basis:100%;text-align:center;font-size:11px;opacity:.6;letter-spacing:.02em}
.hero__karta{justify-self:end;text-decoration:none;font-weight:600;font-size:14px;border-bottom:1.5px solid currentColor;padding-bottom:2px}
html.intro .hero__rog,html.intro .hero__dol,html.intro .hero__sasiad{opacity:0}
/* ---------- manifest ---------- */
.manifest{padding:16vh var(--marg) 14vh;background:var(--stol)}
.manifest__zdanie{font-weight:800;font-size:clamp(34px,6.4vw,118px);line-height:1;letter-spacing:-.04em;max-width:16ch}
.manifest__zdanie img{display:inline-block;height:.92em;width:auto;vertical-align:-.1em;margin:0 .14em;border-radius:.1em;transition:transform .5s var(--e)}
.manifest__zdanie img:hover{transform:rotate(-8deg) scale(1.08)}
.manifest__zdanie b{font-weight:800;color:var(--smak-ciemny)}
.manifest__pod{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;max-width:900px;margin-top:9vh;font-size:clamp(16px,1.3vw,19px)}

/* ---------- schłodzenie ---------- */
.chlod{height:330svh;background:var(--biel);position:relative}
.chlod__scena{position:sticky;top:0;height:100svh;overflow:clip;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:var(--nag) var(--marg) 0}
.chlod__temp{font-weight:800;font-size:clamp(90px,17vw,300px);letter-spacing:-.06em;line-height:.9;font-variant-numeric:tabular-nums;display:flex;align-items:flex-start}
.chlod__temp span{font-size:.28em;margin-top:.25em;letter-spacing:0;font-weight:600}
.chlod__kadr{height:min(74svh,800px);aspect-ratio:3/4;display:flex;align-items:center;justify-content:center}
.chlod__puszka{height:100%;max-height:100%;width:auto;max-width:100%;object-fit:contain}
.chlod__skala{justify-self:end;position:relative;height:58svh;width:2px;background:var(--ink);margin-right:36px}
.chlod__skala i{position:absolute;left:16px;top:calc(var(--p) * 100%);transform:translateY(-50%);font-style:normal;font-size:13px;font-weight:600;white-space:nowrap}
.chlod__skala i::before{content:"";position:absolute;left:-22px;top:50%;width:10px;height:2px;background:var(--ink)}
.chlod__kreska{position:absolute;left:-7px;top:0;width:16px;height:16px;border-radius:50%;background:var(--smak);border:2px solid var(--ink);transform:translateY(-50%)}
.chlod__opis{position:absolute;left:var(--marg);bottom:28px;font-size:clamp(18px,1.9vw,28px);font-weight:600;letter-spacing:-.02em;max-width:22ch;line-height:1.15}
.chlod__opis small{display:block;font-size:13px;font-weight:400;opacity:.6;margin-top:8px}

/* ---------- tablica odjazdów ---------- */
.tablica{background:var(--plansza);color:#F2F2EE;padding:12vh var(--marg) 12vh}
.tablica__naglowek{display:grid;grid-template-columns:1fr minmax(0,38ch);gap:24px;align-items:end;margin-bottom:6vh}
.tablica h2{font-weight:800;font-size:clamp(40px,7vw,120px);letter-spacing:-.045em;line-height:.95}
.tablica__naglowek p{font-size:15px;opacity:.75;line-height:1.5}
.wiersz{display:grid;grid-template-columns:3.2em minmax(0,1fr) minmax(0,.6fr) auto 2.5em;align-items:center;gap:clamp(10px,2vw,32px);padding:clamp(12px,1.6vw,22px) 0;border-top:1px solid rgba(255,255,255,.16);cursor:pointer;transition:background .25s;color:inherit;text-decoration:none}
.wiersz:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
.wiersz:hover,.wiersz:focus-visible{background:rgba(255,255,255,.05)}
.wiersz__nr{font-variant-numeric:tabular-nums;font-size:14px;opacity:.6;letter-spacing:.06em}
.flap{display:flex;gap:3px;flex-wrap:nowrap;overflow:hidden}
.flap span{position:relative;display:grid;place-items:center;width:.82em;height:1.25em;background:#20232A;border-radius:.08em;font-weight:700;font-size:clamp(26px,4.2vw,70px);line-height:1;letter-spacing:0;text-transform:uppercase;overflow:hidden;transform-style:preserve-3d}
.flap span::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.6)}
.flap span.f{animation:flap 95ms linear}
@keyframes flap{0%{transform:scaleY(1)}50%{transform:scaleY(.05)}100%{transform:scaleY(1)}}
.wiersz__pl{font-size:clamp(13px,1.1vw,16px);opacity:.75;text-transform:lowercase}
.wiersz__peron{width:clamp(44px,5vw,84px);height:clamp(26px,2.6vw,42px);border-radius:4px;background:var(--c);display:grid;place-items:center;font-size:11px;font-weight:700;letter-spacing:.08em;color:#0A0A0A}
.wiersz__strz{font-size:22px;text-align:right;transition:transform .3s var(--e)}
.wiersz:hover .wiersz__strz{transform:translateX(6px)}

/* ---------- skład ---------- */
.sklad{padding:14vh var(--marg);background:var(--stol)}
.sklad h2{font-weight:800;font-size:clamp(40px,7vw,120px);letter-spacing:-.045em;line-height:.95;margin-bottom:6vh;max-width:12ch}
.sklad__wiersze div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:24px;align-items:baseline;padding:clamp(10px,1.4vw,18px) 0;border-top:1px solid var(--ink)}
.sklad__wiersze div:last-child{border-bottom:1px solid var(--ink)}
.sklad__wiersze dt{font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:500}
.sklad__wiersze dd{font-size:clamp(18px,2.4vw,40px);font-weight:600;letter-spacing:-.025em;text-align:right;line-height:1.1}
.sklad__uwaga{margin-top:22px;font-size:14px;opacity:.7}
.sklad__uwaga b{font-weight:600}

/* ---------- skrzynka ---------- */
.skrzynka{padding:14vh var(--marg) 10vh;background:var(--biel);position:relative}
.skrzynka__naglowek{display:grid;grid-template-columns:1fr minmax(0,40ch);gap:24px;align-items:end;margin-bottom:5vh}
.skrzynka h2{font-weight:800;font-size:clamp(40px,7vw,120px);letter-spacing:-.045em;line-height:.95}
.skrzynka__naglowek p{font-size:15px;opacity:.75}
.skrzynka__siatka{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.kafel{position:relative;background:var(--c);color:var(--t);aspect-ratio:4/5;padding:18px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;border-radius:6px}
.kafel img{position:absolute;left:50%;top:48%;height:68%;width:auto;transform:translate(-50%,-50%);transition:transform .6s var(--e)}
.kafel:hover img{transform:translate(-50%,-52%) rotate(-5deg) scale(1.04)}
.kafel__nazwa{font-weight:800;font-size:clamp(20px,2.2vw,34px);letter-spacing:-.03em;line-height:1;position:relative;z-index:1}
.kafel__nazwa small{display:block;font-weight:400;font-size:13px;letter-spacing:0;margin-top:4px;opacity:.8}
.kafel__cena{position:absolute;right:18px;top:18px;font-size:13px;font-weight:600}
.stepper{position:relative;z-index:1;display:inline-flex;align-items:center;gap:0;border:1.5px solid currentColor;border-radius:999px;align-self:flex-start}
.stepper button{width:40px;height:36px;font-size:18px;display:grid;place-items:center}
.stepper b{min-width:28px;text-align:center;font-size:15px;font-variant-numeric:tabular-nums}
.zam__pasek{position:sticky;bottom:16px;margin-top:28px;display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--ink);color:#fff;border-radius:999px;padding:10px 10px 10px 24px;transform:translateY(130%);opacity:0;transition:transform .5s var(--e),opacity .4s;z-index:5}
.zam__pasek.widac{transform:none;opacity:1}
.przycisk{background:var(--smak);color:var(--smak-tekst);font-weight:700;border-radius:999px;padding:12px 22px;font-size:15px;transition:transform .3s var(--e),background .4s}
.przycisk:hover{transform:scale(1.04)}
.zam__wynik{margin-top:18px;font-size:15px;background:#fff;padding:14px 18px;border-radius:8px}

/* ---------- stopka ---------- */
.stopka{background:var(--ink);color:#F2F2EE;padding:8vh var(--marg) 24px;overflow:clip}
.stopka__nazwa{font-weight:800;font-size:25vw;letter-spacing:-.07em;line-height:.78;text-align:center;margin-bottom:5vh;color:var(--smak);transition:color .6s}
.stopka__linia{display:flex;justify-content:space-between;gap:16px;font-size:13px;opacity:.85;flex-wrap:wrap}
.stopka__linia a{text-decoration:none;border-bottom:1px solid currentColor}
.stopka .krzyz{margin:0 .4em 0 0}

/* ---------- karta smaku ---------- */
.karta{position:fixed;inset:0;z-index:60;overflow:auto;background:var(--k,#FFE11A);color:var(--kt,#0A0A0A);overscroll-behavior:contain}
.karta[hidden]{display:none}
.karta__naglowek{position:sticky;top:0;height:var(--nag);display:flex;align-items:center;justify-content:space-between;padding:0 var(--marg);z-index:2}
.karta__zamknij{font-size:14px;font-weight:600;border:1.5px solid currentColor;border-radius:999px;padding:8px 16px}
.karta__tresc{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:5vw;padding:2vh var(--marg) 10vh;align-items:start}
.karta__nad{font-size:13px;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.karta__tytul{font-weight:800;font-size:clamp(64px,13vw,230px);letter-spacing:-.06em;line-height:.85;margin:12px 0 5vh;word-break:break-word}
.karta__wiersze div{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:16px;padding:12px 0;border-top:1px solid currentColor;align-items:baseline}
.karta__wiersze div:last-child{border-bottom:1px solid currentColor}
.karta__wiersze dt{font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:500}
.karta__wiersze dd{font-size:clamp(16px,1.6vw,24px);font-weight:600;letter-spacing:-.01em;text-align:right}
.karta__opis{margin-top:4vh;font:italic 400 clamp(20px,2vw,30px)/1.3 var(--fi);max-width:28ch}
.karta__akcje{display:flex;align-items:center;gap:16px;margin-top:4vh;flex-wrap:wrap}
.karta .przycisk{background:var(--kt);color:var(--k)}
.karta__strzalki button{width:44px;height:44px;border:1.5px solid currentColor;border-radius:999px;font-size:18px;margin-left:8px}
.karta__puszka{position:sticky;top:var(--nag);height:calc(100svh - var(--nag) - 4vh);display:grid;place-items:center}
.karta__puszka img{height:100%;width:auto;max-width:100%;object-fit:contain}

/* ---------- wejścia ---------- */
[data-wejscie]{opacity:0;transform:translateY(22px);transition:opacity .8s var(--e),transform .9s var(--e)}
[data-wejscie].widac{opacity:1;transform:none}
[data-slowa]{opacity:1;transform:none}
.sl{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.sl__t{display:inline-block;transform:translateY(112%);transition:transform .9s var(--e);transition-delay:calc(var(--i,0) * 55ms)}
.widac .sl__t{transform:none}
html[data-tier="0"] .sl__t,html[data-tier="0"] [data-wejscie]{transform:none;opacity:1;transition:none}
html[data-tier="0"] .flap span.f{animation:none}

/* ---------- telefon i wąskie ekrany ---------- */
@media (max-width:820px){
  :root{--nag:56px}
  .naglowek__nav,.naglowek__kosz{display:none}
  .menu-przycisk{display:block;margin-left:auto}
  .menu-tel{display:flex;flex-direction:column;position:fixed;top:var(--nag);left:0;right:0;z-index:39;background:var(--ink);color:#fff;padding:12px var(--marg) 20px;transform:translateY(-110%);transition:transform .4s var(--e)}
  .menu-tel a{text-decoration:none;font-size:28px;font-weight:700;letter-spacing:-.03em;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.15)}
  html.menu-otwarte .menu-tel{transform:none}
  .hero{min-height:560px}
  .hero__rog{max-width:46%}
  .hero__rog .hero__etyk:first-child{margin-top:0}
  .hero__etyk{margin-top:8px}
  .hero__dana{font-size:13px}
  .hero__puszka{height:min(54svh,520px)}
  .hero__sasiad{height:16svh;opacity:.45}
  .hero__sasiad--l{left:2vw}.hero__sasiad--r{right:2vw}
  .hero__dol{grid-template-columns:1fr;justify-items:center;gap:10px;bottom:16px}
  .hero__haslo{font-size:17px}
  .hero__hint{display:none}
  .hero__karta{justify-self:center}
  .manifest{padding:12vh var(--marg) 10vh}
  .manifest__zdanie{max-width:none;font-size:clamp(34px,10.5vw,70px)}
  .manifest__pod{grid-template-columns:1fr;gap:16px;margin-top:6vh}
  .chlod{height:280svh}
  .chlod__scena{grid-template-columns:1fr auto;grid-template-rows:auto 1fr;padding:calc(var(--nag) + 8px) var(--marg) 0;align-items:start}
  .chlod__temp{font-size:clamp(64px,20vw,120px);grid-column:1}
  .chlod__kadr{grid-column:1/3;grid-row:2;height:min(60svh,520px);justify-self:center;align-self:center}
  .chlod__skala{grid-column:2;grid-row:1;height:22svh;margin-right:28px;margin-top:10px}
  .chlod__opis{font-size:16px;bottom:18px;right:var(--marg)}
  .tablica__naglowek,.skrzynka__naglowek{grid-template-columns:1fr;gap:12px}
  .wiersz{grid-template-columns:2.2em minmax(0,1fr) auto;gap:10px}
  .wiersz__pl,.wiersz__strz{display:none}
  .flap span{width:.8em;font-size:clamp(20px,7.6vw,34px)}
  .sklad__wiersze div{grid-template-columns:1fr;gap:4px}
  .sklad__wiersze dd{text-align:left;font-size:20px}
  .skrzynka__siatka{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .kafel{padding:12px}
  .kafel__cena{right:12px;top:12px}
  .zam__pasek{bottom:10px;padding:8px 8px 8px 16px;font-size:14px}
  .karta__tresc{grid-template-columns:1fr;padding-bottom:6vh}
  .karta__puszka{position:relative;top:0;height:52svh;order:-1}
  .karta__tytul{font-size:clamp(56px,19vw,120px)}
  .karta__wiersze dd{text-align:right;font-size:15px}
  .stopka__nazwa{font-size:27vw}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}