/* Whimsy: dirty white, modowy kontrast serifa z neutralnym sans.
   Ekran 1: logo na środku. Karty nut zostawiają ślad za kursorem i znikają.
   Ekran 2: quiz w układzie jak na inspiracji MALLOW ARCHIVE. Wszystkie odległości w cqw (proporcje zachowane na każdej szerokości). */
:root{
  --bg:#F6F4EF;
  --paper:#FFFFFF;
  --ink:#1C1B19;
  --muted:#7A766D;
  --accent:#8C3B2A;
  color-scheme:light;
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
}
a{color:inherit}

/* Nawigacja */
.top{
  position:fixed;
  top:env(safe-area-inset-top,0px);
  left:0; right:0;
  display:flex;
  justify-content:flex-end;
  gap:24px;
  padding-block:18px 0;
  padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px));
  z-index:5;
  font-size:12px;
  font-weight:600;
  letter-spacing:.22em;
}
.top a{text-decoration:none}
.top a:hover{color:var(--accent)}

/* Logo: na środku na starcie, po dojściu do quizu w lewy górny róg */
.logo{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  margin:0;
  font-family:'Bodoni Moda','Didot','Bodoni 72',serif;
  font-weight:500;
  font-style:italic;
  font-size:clamp(56px,17vw,220px);
  letter-spacing:-.01em;
  line-height:1;
  white-space:nowrap;
  z-index:4;
  pointer-events:none;
  transition:left .9s cubic-bezier(.7,0,.2,1), top .9s cubic-bezier(.7,0,.2,1), transform .9s cubic-bezier(.7,0,.2,1), font-size .9s cubic-bezier(.7,0,.2,1), letter-spacing .9s cubic-bezier(.7,0,.2,1);
}
.logo span{
  display:inline-block;
  opacity:0;
  transform:translateY(.22em);
  animation:letter .7s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay:calc(var(--i) * .16s + .25s);
}
@keyframes letter{to{opacity:1;transform:none}}
body.scrolled .logo{
  left:max(16px,env(safe-area-inset-left,0px));
  top:calc(env(safe-area-inset-top,0px) + 14px);
  transform:none;
  font-size:24px;
  letter-spacing:0;
}

/* Ekran 1: intro ze śladem kart */
.intro{
  position:relative;
  height:100vh;
  height:100svh;
  overflow:hidden;
  touch-action:pan-y;
}
/* Karta w śladzie kursora: pojawia się, po chwili gaśnie */
.trail{
  position:absolute;
  width:var(--w);
  aspect-ratio:3/4;
  translate:-50% -50%;
  padding:5px 5px 26px;
  background:var(--paper);
  box-shadow:0 14px 30px rgba(28,27,25,.16);
  opacity:0;
  transform:scale(.6) rotate(var(--r));
  transition:opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
  z-index:2;
}
.trail.on{
  opacity:1;
  transform:scale(1) rotate(var(--r));
}
.trail.out{
  opacity:0;
  transform:scale(.92) rotate(var(--r)) translateY(-10px);
  transition:opacity 1s ease, transform 1s ease;
}
.trail .img{
  position:absolute;
  inset:5px 5px 26px;
  background:linear-gradient(160deg,var(--c1),var(--c2));
}
.trail .img::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(120% 90% at 20% 10%,rgba(255,255,255,.28),transparent 60%);
}
.trail span{
  position:absolute;
  left:7px; right:7px; bottom:7px;
  font-size:9px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.slogan{
  position:absolute;
  left:0; right:0;
  bottom:12svh;
  margin:0;
  text-align:center;
  font-family:'Bodoni Moda','Didot',serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(17px,2.8vw,26px);
  letter-spacing:.01em;
  opacity:0;
  animation:fade 1s 1.9s forwards;
  pointer-events:none;
}
@keyframes fade{to{opacity:1}}

/* Ekran 2: quiz */
.quiz{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:center;
  padding-block:120px;
  padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px));
}
.quiz-index{
  position:absolute;
  top:88px;
  right:max(16px,env(safe-area-inset-right,0px));
  margin:0;
  text-align:right;
  font-size:12px;
  font-weight:600;
  line-height:1.5;
  letter-spacing:.2em;
  text-transform:uppercase;
  z-index:3;
}
.quiz-index .num{display:block;font-size:13px;letter-spacing:.08em}

/* Plansza: wszystko w cqw, czyli procentach szerokości planszy */
.quiz-board{
  position:relative;
  width:100%;
  max-width:1180px;
  margin-inline:auto;
  container-type:inline-size;
  aspect-ratio:1 / .62;
}
@media (max-width:600px){
  .quiz-board{aspect-ratio:1 / .95}
}

.quiz-title{
  position:absolute;
  z-index:3;
  left:15cqw;
  top:3cqw;
  margin:0;
  font-family:'Bodoni Moda','Didot',serif;
  font-weight:500;
  font-size:9cqw;
  line-height:1.05;
  letter-spacing:-.01em;
  white-space:nowrap;
}
.quiz-title em{font-style:italic}

.quiz-text{
  position:absolute;
  z-index:2;
  left:8.8cqw;
  top:36.5cqw;
  width:36.5cqw;
  margin:0;
  font-family:'Bodoni Moda','Didot',serif;
  font-size:max(11px,1.3cqw);
  line-height:1.5;
}

.photo{
  position:absolute;
  z-index:2;
  left:47.1cqw;
  top:2.3cqw;
  width:39.9cqw;
  height:39.4cqw;
  margin:0;
  padding:1.8cqw;
  background:#FFFFFF;
  box-shadow:0 18px 40px rgba(28,27,25,.18);
}
.photo .img{
  position:absolute;
  inset:1.8cqw;
  background:
    radial-gradient(70% 60% at 82% 12%, #F2A24A 0%, transparent 62%),
    radial-gradient(90% 80% at 40% 50%, #F1EADB 0%, #D5CAB0 72%),
    #CFC5AC;
  box-shadow:none;
}
/* ziarno filmu */
.photo .img::after{
  content:"";
  position:absolute;
  inset:0;
  background-image: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='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.35'/></svg>");
  mix-blend-mode:multiply;
  opacity:.5;
  pointer-events:none;
}
.cta{
  position:absolute;
  left:50%;
  top:50%;
  translate:-50% -50%;
  z-index:2;
  white-space:nowrap;
  background:var(--paper);
  color:var(--ink);
  border:0;
  box-shadow:none;
  font:600 12px/1 'Manrope',system-ui,sans-serif;
  letter-spacing:.2em;
  text-transform:uppercase;
  padding:16px 22px;
  text-decoration:none;
}
.cta:hover{background:var(--accent);color:var(--paper)}
.cta:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

@media (max-width:600px){
  .cta{font-size:10px;padding:12px 14px;letter-spacing:.14em}
  .top{gap:16px;letter-spacing:.16em;font-size:11px}
}

@media (prefers-reduced-motion:reduce){
  .logo{transition:none}
  .logo span,.slogan{animation:none;opacity:1;transform:none}
  .trail{display:none}
}

/* ---------------------------------------------------------------------
   Dodane w wersji produkcyjnej (poza prototypem): stopka.
   Leży w pustym dolnym marginesie sekcji quizu (padding 120 px), więc nie wydłuża strony:
   długość przewijania i ostatni widok są takie jak w prototypie (plansza nie wjeżdża pod logo).
   --------------------------------------------------------------------- */
body{position:relative}
.site-foot{
  position:absolute;
  left:0; right:0; bottom:0;
  padding-block:24px calc(24px + env(safe-area-inset-bottom,0px));
  padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px));
  --line:#E4E0D7;
}

/* ---------------------------------------------------------------------
   Dodane 21.10.2026: sekcja „/03 Baza” pod quizem. Wejście do bazy przez przewinięcie
   albo link „BAZA” w nawigacji. Karty jak w śladzie kursora (biała ramka, lekki obrót).
   Dolny margines sekcji mieści stopkę (jak wcześniej w sekcji quizu).
   --------------------------------------------------------------------- */
.bz{
  position:relative;
  padding-block:120px 180px;
  padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px));
}
.bz-index{top:40px}
.bz-inner{max-width:1180px;margin-inline:auto;display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
@media (min-width:860px){.bz-inner{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px}}
.bz-text{display:flex;flex-direction:column;align-items:flex-start;gap:20px;min-width:0}
.bz-title{margin:0;font-family:'Bodoni Moda','Didot',serif;font-weight:500;font-size:clamp(52px,7.4vw,104px);line-height:1.05;letter-spacing:-.01em}
.bz-title em{font-style:italic}
.bz-lede{margin:0;max-width:26em;font-family:'Bodoni Moda','Didot',serif;font-size:clamp(15px,1.4vw,18px);line-height:1.5}
/* Ten sam przycisk co „Zacznij teraz” (biały, ciemny tekst, rdzawy po najechaniu); delikatny cień, bo leży na tle strony, nie na zdjęciu */
.cta.bz-cta{position:static;translate:none;box-shadow:0 10px 24px rgba(28,27,25,.10)}
.bz-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px}
@media (min-width:600px){.bz-cards{grid-template-columns:repeat(4,minmax(0,1fr))}.bz-cards li:nth-child(even){margin-top:56px}}
.bz-cards li{transform:rotate(var(--r));transition:transform .5s cubic-bezier(.23,1,.32,1)}
.bz-cards li:hover{transform:rotate(0) translateY(-6px)}
.bz-card{position:relative;display:block;aspect-ratio:3/4;background:var(--paper);box-shadow:0 14px 30px rgba(28,27,25,.16);text-decoration:none;color:var(--ink)}
.bz-card .img{position:absolute;inset:5px 5px 44px;background:linear-gradient(160deg,var(--c1),var(--c2));overflow:hidden}
.bz-card .img::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 20% 10%,rgba(255,255,255,.28),transparent 60%)}
.bz-card .lab{position:absolute;left:8px;right:8px;bottom:7px;display:flex;flex-direction:column;font-size:10px;line-height:1.35;color:var(--muted);white-space:nowrap}
.bz-card .lab b{font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);overflow:hidden;text-overflow:ellipsis}
.bz-card:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media (prefers-reduced-motion:reduce){.bz-cards li,.bz-cards li:hover{transition:none}}
/* Po przewinięciu pod logo i nawigacją pojawia się pasek w kolorze tła, żeby treść sekcji
   (np. „/03 Baza” na telefonie) nie przewijała się pod napisami. Na pierwszych dwóch ekranach niewidoczny. */
body::before{
  content:"";position:fixed;left:0;right:0;top:0;
  height:calc(env(safe-area-inset-top,0px) + 56px);
  background:var(--bg);z-index:3;opacity:0;transition:opacity .3s;pointer-events:none;
}
body.scrolled::before{opacity:1}

/* Zdjęcie w ramce (21.10.2026): bez przyciemniającego ziarna, żeby tytuł nachodzący na zdjęcie był czytelny */
.photo .img:has(.slot-img)::after{opacity:.18}