/* Mały Marek / Little Marcus, wersja 2: wspólny arkusz dla / , /en/ i polityki prywatności. */

:root {
  --atrament: #22324A;
  --atrament-2: #3F4A5C;
  --kurz: #4F5654;
  --zloto: #7A5B2C;
  --zloto-jasne: #A8864F;
  --linia: rgba(34, 50, 74, 0.18);
  --karta: rgba(255, 252, 245, 0.55);
  --papier: #FBF6EC;
  --krem-tekst: #FBF6EC;
  --blad: #8A3B2E;

  --serif: "EB Garamond", "Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Jost", "Futura", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  --t-label: 0.8125rem;
  --t-small: 1.0625rem;
  --t-body: 1.25rem;
  --t-lead: clamp(1.3rem, 2vw, 1.55rem);
  --t-h3: clamp(1.5rem, 2.4vw, 1.85rem);
  --t-h2: clamp(2.1rem, 4.6vw, 3.4rem);
  --t-h1: clamp(2.5rem, 6.2vw, 5rem);

  --gutter: clamp(18px, 5vw, 64px);
  --odstep: clamp(24px, 4vw, 56px);
  --sekcja: clamp(64px, 9vw, 120px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #F6EEDC; }
body {
  margin: 0;
  background: #EFE6D8;
  color: var(--atrament);
  font-family: var(--serif);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: #E2C99C; color: var(--atrament); }
[hidden] { display: none !important; }

a { color: inherit; text-underline-offset: 4px; text-decoration-color: var(--zloto-jasne); }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--atrament); outline-offset: 3px; border-radius: 1px; }
.uczciwie :focus-visible { outline-color: var(--krem-tekst); }

h1, h2, h3, h4 { font-weight: 400; text-wrap: balance; margin: 0; }
p { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd { margin: 0; padding: 0; }
figure { margin: 0; }
button, input { font: inherit; color: inherit; }
img { max-width: 100%; }

.sr {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skok {
  position: absolute; left: 12px; top: -60px; z-index: 10;
  background: var(--atrament); color: var(--krem-tekst);
  font-family: var(--sans); font-size: 0.9375rem; padding: 10px 16px; text-decoration: none;
}
.skok:focus { top: 12px; }

.eyebrow, .etykieta {
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kurz);
  line-height: 1.5;
}
.eyebrow { display: flex; align-items: center; gap: 10px; }
.eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--zloto-jasne); flex: none;
}

/* ——— pasy: tło każdej sekcji.
       --od: kolor na górze pasa (dolna krawędź przegrody albo kolor poprzedniego pasa),
       --do: kolor na dole pasa (górna krawędź następnej przegrody albo kolor następnego pasa). ——— */
.pas {
  --do: var(--od);
  background: var(--od);
  background-image: linear-gradient(to bottom, var(--od) 0%, var(--od) 10%, var(--do) 90%, var(--do) 100%);
  padding-inline: var(--gutter);
}
.wnetrze { max-width: 74rem; margin-inline: auto; }

/* ——— przegrody: ilustracje na całą szerokość okna.
       --gora / --dol: zmierzone kolory krawędzi (img/obrazy.json),
       --pod: kolor pasa pod przegrodą; pas pod obrazem przechodzi z --dol w --pod. ——— */
.przegroda {
  display: block;
  width: 100%;
  line-height: 0;
  background: linear-gradient(to bottom, var(--gora) 0%, var(--gora) 50%, var(--dol) 50%, var(--dol) 100%);
}
.przegroda picture { display: block; }
.przegroda img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.przegroda::after {
  content: "";
  display: block;
  height: clamp(64px, 10vw, 150px);
  background: linear-gradient(to bottom, var(--dol), var(--pod, var(--dol)));
}

/* ——— nagłówek strony ——— */
.gora {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 28px;
  padding-block: 24px;
}
.znak {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--serif);
  font-size: 1.35rem;
  letter-spacing: 0.08em;
  font-variant-caps: small-caps;
  text-decoration: none;
}
.gora .znak { margin-right: auto; }
.znak::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--zloto-jasne); flex: none; transform: translateY(1px);
}
.gora nav ul { list-style: none; display: flex; gap: 6px 26px; flex-wrap: wrap; }
.gora nav a, .jezyk a {
  display: inline-block;
  text-decoration: none;
  font-family: var(--sans);
  font-size: 0.9375rem;
  letter-spacing: 0.03em;
  color: var(--atrament-2);
  padding-block: 8px;
}
.gora nav a:hover, .jezyk a:hover { text-decoration: underline; text-decoration-color: var(--zloto-jasne); }
.jezyk {
  display: flex; align-items: center; gap: 6px;
  padding-left: 20px; border-left: 1px solid var(--linia);
}
.jezyk span { font-family: var(--sans); font-size: 0.875rem; color: var(--kurz); }
.jezyk a { padding: 8px 4px; letter-spacing: 0.1em; }
.jezyk a[aria-current="page"] {
  color: var(--atrament); font-weight: 500;
  text-decoration: underline; text-decoration-color: var(--zloto-jasne); text-decoration-thickness: 2px;
}

/* ——— przyciski ——— */
.przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  color: var(--krem-tekst);
  background: var(--atrament);
  border: 1px solid var(--atrament);
  padding: 13px 24px;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color .25s, color .25s;
}
.przycisk:hover { background: transparent; color: var(--atrament); }
.przycisk.pusty { background: transparent; color: var(--atrament); }
.przycisk.pusty:hover { background: var(--atrament); color: var(--krem-tekst); }
.przycisk .meta { font-weight: 400; opacity: 0.85; }
.przycisk[disabled] { opacity: 0.6; cursor: progress; }
.wezwania { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.zdjecie-presji { font-size: var(--t-small); color: var(--kurz); line-height: 1.5; }

.link-dalej {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  color: var(--atrament);
  text-decoration: underline;
  text-decoration-color: var(--zloto-jasne);
}
.link-dalej::after { content: " \2192"; }

/* ——— szablon sekcji: eyebrow, H2, lead, moduł ——— */
.sekcja { padding-block: var(--sekcja); }
.glowa { display: flex; flex-direction: column; gap: 14px; max-width: 46rem; }
.glowa h2 { font-size: var(--t-h2); line-height: 1.1; letter-spacing: -0.005em; }
.glowa h2 em { font-style: italic; color: var(--atrament-2); }
.lead { font-size: var(--t-lead); line-height: 1.5; color: var(--atrament-2); max-width: 40rem; }
.modul { margin-top: clamp(36px, 5vw, 56px); }
.modul + .modul { margin-top: clamp(48px, 7vw, 88px); }
.tekst-waski { max-width: 40rem; display: flex; flex-direction: column; gap: 1em; }
.podglowa { display: flex; flex-direction: column; gap: 8px; max-width: 40rem; margin-bottom: 18px; }
.podglowa h3 { font-size: var(--t-h3); line-height: 1.2; font-style: italic; }
.podglowa p:not(.eyebrow) { font-size: var(--t-small); color: var(--atrament-2); line-height: 1.55; }

/* ——— hero ——— */
.hero { padding-block: clamp(32px, 7vw, 96px) clamp(40px, 6vw, 72px); }
.hero .glowa { max-width: 50rem; gap: 20px; }
.hero h1 { font-size: var(--t-h1); line-height: 1.04; letter-spacing: -0.012em; }
.hero h1 em { display: block; font-style: italic; color: var(--atrament-2); margin-top: 0.1em; }
.hero .lead { margin-top: 8px; max-width: 38rem; }
.hero .wezwania { margin-top: 22px; }

/* pasek faktów */
.fakty {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px var(--odstep);
  padding-block: 8px clamp(48px, 7vw, 88px);
}
.fakty li { border-top: 1px solid var(--linia); padding-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.fakty .wartosc { font-size: var(--t-small); line-height: 1.45; }

/* pary etykieta–wartość */
.pary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--odstep); }
.pary > div {
  display: grid;
  grid-template-columns: minmax(7.5rem, 11rem) minmax(0, 1fr);
  gap: 4px 18px;
  align-items: baseline;
  border-top: 1px solid var(--linia);
  padding-block: 14px;
}
.pary dt {
  font-family: var(--sans); font-size: var(--t-label); font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--kurz); line-height: 1.5;
}
.pary dd { font-size: var(--t-small); line-height: 1.45; }
.pary dd strong { font-weight: 500; font-size: 1.35rem; }
.pary.jedna { grid-template-columns: minmax(0, 1fr); }

/* ——— pierwsza historia ——— */
.historia-uklad {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.tytul-historii {
  font-size: clamp(3.2rem, 9vw, 6.5rem);
  line-height: 0.95;
  font-style: italic;
  letter-spacing: -0.02em;
}
.opis-historii { display: flex; flex-direction: column; gap: 16px; }
.opis-historii p { font-size: var(--t-body); }

.film-ramka {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 2px;
  background: #E9DCC6;
  box-shadow: 0 0 0 1px var(--linia);
}
.film-ramka img, .film-ramka iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.film-ramka img { object-fit: cover; object-position: 22% 50%; }
.film-zapowiedz {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 12px 18px;
  font-family: var(--sans); font-size: 0.9375rem; line-height: 1.45;
  color: var(--atrament);
  background: rgba(251, 246, 236, 0.93);
}
.film-start {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  box-shadow: 0 6px 30px rgba(34, 50, 74, 0.25);
}
.film-start .symbol {
  width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent currentColor;
}
.film-nota { margin-top: 10px; font-family: var(--sans); font-size: 0.875rem; color: var(--kurz); line-height: 1.5; }

.dla-kogo-kiedy {
  background: var(--karta);
  border: 1px solid var(--linia);
  border-radius: 2px;
  padding: clamp(20px, 3vw, 32px);
  display: flex; flex-direction: column; gap: 14px;
}
.dla-kogo-kiedy h3 { font-size: var(--t-h3); line-height: 1.2; font-style: italic; }
.dla-kogo-kiedy .pary > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }

.wiazanie {
  font-size: var(--t-h3);
  line-height: 1.3;
  font-style: italic;
  color: var(--zloto);
  max-width: 40rem;
}
.drogi {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px var(--odstep);
  margin-top: 22px;
}
.droga {
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px 22px;
  border: 1px solid var(--linia);
  border-radius: 2px;
  background: var(--karta);
  text-decoration: none;
  transition: border-color .25s, background-color .25s;
}
.droga:hover { border-color: var(--atrament); background: rgba(255, 252, 245, 0.8); }
.droga .co { font-size: var(--t-h3); line-height: 1.2; font-style: italic; }
.droga .dokad { font-family: var(--sans); font-size: 1rem; font-weight: 500; }
.droga .dokad::after { content: " \2192"; }

/* ——— piosenki i odtwarzacz ——— */
.nuta { width: 1.1em; height: 1.1em; flex: none; color: var(--zloto); }
.eyebrow.muzyka::before { display: none; }
.odnosnik-piosenki { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 16px 20px; border: 1px solid var(--linia); border-radius: 2px; background: var(--karta); max-width: 44rem; }
.odnosnik-piosenki p { font-size: var(--t-small); display: flex; align-items: center; gap: 10px; }

.odtwarzacz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.teraz-gra {
  display: flex; flex-direction: column; gap: 16px;
  padding: clamp(18px, 3vw, 28px);
  background: var(--atrament); color: var(--krem-tekst);
  border-radius: 4px;
  position: sticky; top: 16px;
}
.teraz-gra :focus-visible { outline-color: var(--krem-tekst); }
.teraz-naglowek { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; }
.okladka-duza { width: 96px; height: 96px; border-radius: 3px; object-fit: cover; display: block; }
.teraz-naglowek .etykieta { color: #E6D3AE; }
.teraz-tytul { font-size: clamp(1.6rem, 3vw, 2.1rem); font-style: italic; line-height: 1.15; }
.teraz-jezyk { font-family: var(--sans); font-size: 0.9375rem; color: #E6D3AE; }
.gracz-przyciski { display: flex; align-items: center; gap: 14px; }
.graj {
  width: 72px; height: 72px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--krem-tekst); color: var(--atrament);
  border: 0; cursor: pointer; flex: none;
  transition: transform .15s;
}
.graj:hover { transform: scale(1.04); }
.graj svg { width: 30px; height: 30px; }
.graj .ikona-pauza { display: none; }
.graj.gra .ikona-graj { display: none; }
.graj.gra .ikona-pauza { display: block; }
.przycisk-ikona {
  width: 48px; height: 48px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--krem-tekst);
  border: 1px solid rgba(251, 246, 236, 0.45); cursor: pointer; flex: none;
}
.przycisk-ikona:hover { background: rgba(251, 246, 236, 0.12); }
.przycisk-ikona svg { width: 20px; height: 20px; }
.os { display: flex; flex-direction: column; gap: 4px; }
.czasy { display: flex; justify-content: space-between; font-family: var(--sans); font-size: 0.875rem; font-variant-numeric: tabular-nums; color: #E6D3AE; }
.postep { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; background: transparent; cursor: pointer; margin: 0; --pct: 0%; }
.postep::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--krem-tekst) var(--pct), rgba(251, 246, 236, 0.3) var(--pct)); }
.postep::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(251, 246, 236, 0.3); }
.postep::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--krem-tekst); }
.postep::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--krem-tekst); margin-top: -7px; border: 0; }
.postep::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--krem-tekst); border: 0; }
.postep:focus-visible { outline: 3px solid var(--krem-tekst); outline-offset: 2px; }
.gracz-opcje { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; border-top: 1px solid rgba(251, 246, 236, 0.2); padding-top: 12px; }
.nagranie-wybor { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.nagranie-wybor .etykieta { color: #E6D3AE; }
.nagranie-wybor button, .petla {
  font-family: var(--sans); font-size: 0.9375rem; color: rgba(251, 246, 236, 0.8);
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  padding: 8px 2px; cursor: pointer;
}
.nagranie-wybor button:hover, .petla:hover { color: var(--krem-tekst); }
.nagranie-wybor button[aria-pressed="true"] { color: var(--krem-tekst); border-bottom-color: var(--krem-tekst); }
.petla { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(251, 246, 236, 0.45); border-radius: 999px; padding: 7px 14px; }
.petla svg { width: 16px; height: 16px; }
.petla[aria-pressed="true"] { background: var(--krem-tekst); color: var(--atrament); border-color: var(--krem-tekst); }
.stan { font-family: var(--sans); font-size: 0.875rem; color: #F2C9B8; }
.stan:empty { display: none; }

.utwory { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.utwory > li { border: 1px solid var(--linia); border-radius: 3px; background: var(--karta); }
.utwor {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 16px;
  width: 100%;
  padding: 14px;
  background: transparent; border: 0; text-align: left; cursor: pointer; border-radius: 3px;
}
.utwor .okladka { width: 72px; height: 72px; border-radius: 2px; object-fit: cover; display: block; grid-row: 1 / 3; }
.utwor .tytul { font-size: 1.5rem; font-style: italic; line-height: 1.2; color: var(--atrament); align-self: end; }
.utwor .opis { grid-column: 2 / 3; font-family: var(--sans); font-size: 0.875rem; color: var(--kurz); align-self: start; }
.utwor .czas { grid-column: 3 / 4; grid-row: 1 / 3; font-family: var(--sans); font-size: 0.9375rem; color: var(--kurz); font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 8px; }
.utwor .czas::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.biezacy > .utwor .czas::before { background: var(--zloto-jasne); }
.biezacy { border-color: var(--atrament) !important; }
.utwor:hover .tytul { text-decoration: underline; text-decoration-color: var(--zloto-jasne); text-underline-offset: 5px; }
.pod-utworem { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 18px; padding: 0 14px 10px 102px; }
.pobierz { font-family: var(--sans); font-size: 0.875rem; color: var(--kurz); display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; }
.pobierz a { color: var(--atrament-2); display: inline-block; padding-block: 6px; }
.tekst-piosenki summary {
  display: inline-block; font-family: var(--sans); font-size: 0.875rem; color: var(--atrament-2);
  cursor: pointer; list-style: none; padding: 6px 0;
  text-decoration: underline; text-decoration-color: var(--zloto-jasne); text-underline-offset: 5px;
}
.tekst-piosenki summary::-webkit-details-marker { display: none; }
.tekst-piosenki summary::before { content: "+ "; }
.tekst-piosenki[open] { flex-basis: 100%; order: 2; }
.tekst-piosenki[open] summary::before { content: "\2212 "; }
.slowa { margin-top: 12px; display: flex; flex-direction: column; gap: 18px; max-width: 30rem; }
.slowa .zwrotka { display: flex; flex-direction: column; gap: 8px; }
.slowa .zwrotka p:not(.etykieta) { font-size: var(--t-small); line-height: 1.55; }
.slowa .etykieta { font-size: 0.75rem; }
.w-aucie { margin-top: clamp(28px, 4vw, 44px); }

/* fragment historii */
.strona-ksiazki {
  max-width: 38rem;
  padding: clamp(26px, 5vw, 52px) clamp(22px, 5vw, 56px);
  background: var(--papier);
  box-shadow: 0 0 0 1px var(--linia);
  border-radius: 2px;
}
.strona-ksiazki .tekst p { font-size: clamp(1.125rem, 1.8vw, 1.25rem); line-height: 1.7; hyphens: auto; -webkit-hyphens: auto; }
.strona-ksiazki .tekst p + p { text-indent: 1.5em; }
.strona-ksiazki .tekst p:first-child::first-letter { float: left; font-size: 3.4em; line-height: 0.82; padding: 0.07em 0.1em 0 0; color: var(--zloto); }
.strona-ksiazki .dalej { margin-top: 18px; font-family: var(--sans); font-size: 0.875rem; color: var(--kurz); }

/* ——— scena ——— */
.scena { margin-top: clamp(40px, 6vw, 72px); font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.3; }
.scena p + p { margin-top: 0.18em; }
.scena .dziadek { color: var(--atrament-2); padding-left: 1.4em; }
.pauza { display: flex; gap: 1.1em; padding-block: 0.8em; padding-left: 0.35em; }
.pauza span { width: 6px; height: 6px; border-radius: 50%; background: var(--zloto-jasne); }
.scena .ruch { font-style: italic; padding-left: 3.2em; max-width: 32em; }
.scena figcaption { margin-top: 18px; font-family: var(--sans); font-size: 0.875rem; color: var(--kurz); }
.dwie-glebokosci { margin-top: clamp(36px, 5vw, 56px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px var(--odstep); max-width: 60rem; }
.dwie-glebokosci > div { border-top: 1px solid var(--linia); padding-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.dwie-glebokosci p:not(.etykieta) { font-size: var(--t-small); color: var(--atrament-2); line-height: 1.55; }

/* ——— książka ——— */
.rozkladowki {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
}
.rozkladowki li:first-child { grid-column: 1 / -1; }
.rozkladowki figure { display: flex; flex-direction: column; gap: 8px; }
.rozkladowki a { display: block; line-height: 0; border-radius: 2px; box-shadow: 0 1px 0 var(--linia), 0 10px 30px rgba(60, 40, 20, 0.14); }
.rozkladowki img { width: 100%; height: auto; border-radius: 2px; }
.rozkladowki figcaption { font-family: var(--sans); font-size: 0.875rem; color: var(--kurz); line-height: 1.45; }
.podpis-artefaktu { margin-top: 14px; font-size: var(--t-small); font-style: italic; color: var(--atrament-2); }

.ksiazka-uklad { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.uczciwie {
  background: var(--atrament);
  color: var(--krem-tekst);
  border-radius: 2px;
  padding: clamp(24px, 3.5vw, 40px);
  display: flex; flex-direction: column; gap: 14px;
}
.uczciwie .eyebrow { color: #E6D3AE; }
.uczciwie .eyebrow::before { background: #E6D3AE; }
.uczciwie h3 { font-size: var(--t-h3); line-height: 1.2; font-style: italic; }
.uczciwie ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.uczciwie li { font-size: var(--t-small); line-height: 1.5; padding-left: 18px; position: relative; }
.uczciwie li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 6px; height: 6px; border-radius: 50%; background: #E6D3AE; }

.film-ksiazka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px var(--odstep); }
.film-ksiazka > div { border-top: 2px solid var(--zloto-jasne); padding-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.film-ksiazka h4 { font-size: 1.45rem; font-style: italic; }
.film-ksiazka p { font-size: var(--t-small); color: var(--atrament-2); line-height: 1.5; }

.cta-ksiazka {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px;
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--atrament);
  border-radius: 2px;
}

/* ——— trzy historie ——— */
.katalog-obraz { max-width: 56rem; }
.katalog-obraz img { width: 100%; height: auto; border-radius: 2px; display: block; }
.katalog-obraz figcaption { margin-top: 8px; font-family: var(--sans); font-size: 0.875rem; color: var(--kurz); line-height: 1.45; }
.karty { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.karta {
  height: 100%;
  display: flex; flex-direction: column; gap: 12px;
  padding: clamp(20px, 2.6vw, 28px);
  background: var(--karta);
  border: 1px solid var(--linia);
  border-radius: 2px;
}
.karta h3 { font-size: clamp(1.9rem, 3vw, 2.3rem); font-style: italic; line-height: 1.1; }
.statusy { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.status {
  font-family: var(--sans); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.04em;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(122, 91, 44, 0.12); color: var(--zloto); border: 1px solid rgba(122, 91, 44, 0.35);
}
.status.pelny { background: var(--atrament); color: var(--krem-tekst); border-color: var(--atrament); }
.karta > p { font-size: var(--t-small); line-height: 1.55; color: var(--atrament-2); }
.karta .pary { margin-top: auto; grid-template-columns: minmax(0, 1fr); }
.karta .pary > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }

/* ——— świat ——— */
.postacie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px var(--odstep); }
.postacie > div { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--linia); padding-top: 14px; }
.postacie dt { font-size: 1.6rem; letter-spacing: 0.05em; font-variant-caps: small-caps; line-height: 1.2; }
.postacie dd { font-size: var(--t-small); color: var(--atrament-2); line-height: 1.55; }
.przypis { max-width: 44rem; font-size: var(--t-small); color: var(--kurz); line-height: 1.55; border-left: 2px solid var(--zloto-jasne); padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }

/* ——— jak powstaje ——— */
.list p { font-size: var(--t-body); line-height: 1.6; }
.list p em { font-style: italic; }
.kroki { list-style: none; counter-reset: krok; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px clamp(16px, 2.4vw, 28px); }
.kroki li { counter-increment: krok; border-top: 1px solid var(--atrament); padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.kroki li::before { content: counter(krok); font-family: var(--sans); font-size: 0.875rem; font-weight: 500; color: var(--zloto); }
.kroki h3 { font-size: 1.4rem; line-height: 1.2; font-style: italic; }
.kroki p { font-size: var(--t-small); line-height: 1.5; color: var(--atrament-2); }
.kroki .ai { font-family: var(--sans); font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--zloto); }
.podpis { font-size: 2rem; font-style: italic; line-height: 1.1; }
.podpis span { display: block; margin-top: 4px; font-family: var(--sans); font-style: normal; font-size: 0.9375rem; color: var(--kurz); }

/* ——— dla kogo ——— */
.dla-kogo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px var(--odstep); }
.dla-kogo > div { display: flex; flex-direction: column; gap: 12px; }
.dla-kogo h3 { font-size: var(--t-h3); font-style: italic; line-height: 1.2; }
.dla-kogo ul { list-style: none; display: flex; flex-direction: column; }
.dla-kogo li { border-top: 1px solid var(--linia); padding-block: 12px; font-size: var(--t-small); line-height: 1.5; }
.nie-obiecuje { max-width: 46rem; background: var(--karta); border-left: 3px solid var(--zloto-jasne); padding: clamp(20px, 3vw, 32px); display: flex; flex-direction: column; gap: 12px; }
.nie-obiecuje h3 { font-size: var(--t-h3); font-style: italic; line-height: 1.2; }
.nie-obiecuje p { font-size: var(--t-small); line-height: 1.55; color: var(--atrament-2); }

/* ——— lista pierwszeństwa ——— */
.lista-uklad { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.formularz { display: flex; flex-direction: column; gap: 18px; background: var(--karta); border: 1px solid var(--linia); border-radius: 2px; padding: clamp(20px, 3vw, 36px); }
.pole { display: flex; flex-direction: column; gap: 6px; }
.pole label { font-family: var(--sans); font-size: 1rem; font-weight: 500; }
.pole .podpowiedz { font-family: var(--sans); font-size: 0.875rem; color: var(--kurz); }
.pole input[type="email"] {
  width: 100%; min-height: 52px; padding: 10px 14px;
  font-family: var(--sans); font-size: 1.0625rem;
  background: #FFFDF8; border: 1px solid rgba(34, 50, 74, 0.45); border-radius: 2px;
}
.pole input[type="email"]:focus-visible { outline-offset: 1px; }
.pole input[aria-invalid="true"], .zgoda input[aria-invalid="true"] { border-color: var(--blad); outline: 2px solid var(--blad); outline-offset: 1px; }
.zgoda { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; }
.zgoda input { width: 22px; height: 22px; margin: 3px 0 0; accent-color: var(--atrament); }
.zgoda label { font-size: 1rem; line-height: 1.5; }
.pulapka { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.pod-przyciskiem { display: flex; flex-direction: column; gap: 0; }
.pod-przyciskiem .pary > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }

.komunikat {
  display: none;
  border-radius: 2px;
  padding: 14px 16px;
  font-size: var(--t-small);
  line-height: 1.5;
  border-left: 4px solid var(--atrament);
  background: #FFFDF8;
}
.komunikat:target, .komunikat.widoczny { display: block; }
.komunikat.ok { border-left-color: #3E6B4A; }
.komunikat.blad { border-left-color: var(--blad); }
.komunikat strong { font-weight: 500; }

/* ——— pytania ——— */
.faq { max-width: 50rem; border-top: 1px solid var(--linia); }
.faq details { border-bottom: 1px solid var(--linia); }
.faq summary {
  cursor: pointer; list-style: none;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: baseline;
  padding-block: 16px;
  font-size: 1.35rem; line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--sans); font-size: 1.3rem; color: var(--zloto); }
.faq details[open] summary::after { content: "\2212"; }
.faq .odpowiedz { padding-bottom: 18px; display: flex; flex-direction: column; gap: 10px; max-width: 42rem; }
.faq .odpowiedz p { font-size: var(--t-small); line-height: 1.55; color: var(--atrament-2); }
.faq summary h3 { font-size: inherit; line-height: inherit; }

/* ——— domknięcie i stopka ——— */
.koniec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding-block: clamp(56px, 8vw, 96px); }
.koniec .glowa h2 { font-size: var(--t-h2); }
.koniec img { width: 100%; height: auto; display: block; border-radius: 2px; max-height: 360px; object-fit: cover; }
.stopka {
  border-top: 1px solid var(--linia);
  padding-block: 28px 40px;
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 32px;
}
.stopka p { font-size: var(--t-small); color: var(--kurz); font-style: italic; }
.stopka ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 24px; }
.stopka a { font-family: var(--sans); font-size: 0.9375rem; color: var(--atrament-2); display: inline-block; padding-block: 6px; }

/* ——— polityka prywatności ——— */
.dokument { max-width: 46rem; padding-block: clamp(32px, 6vw, 72px) clamp(56px, 8vw, 96px); display: flex; flex-direction: column; gap: 16px; }
.dokument h1 { font-size: var(--t-h2); line-height: 1.1; }
.dokument h2 { font-size: var(--t-h3); line-height: 1.2; margin-top: 22px; }
.dokument p, .dokument li { font-size: var(--t-small); line-height: 1.6; }
.dokument ul { padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; }
.dokument .pary > div { grid-template-columns: minmax(7rem, 10rem) minmax(0, 1fr); }

/* ——— responsywność ——— */
@media (max-width: 1080px) {
  .kroki { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .karty { grid-template-columns: minmax(0, 1fr); }
  .karta .pary > div { grid-template-columns: minmax(7.5rem, 10rem) minmax(0, 1fr); }
}
@media (max-width: 880px) {
  .historia-uklad, .ksiazka-uklad, .lista-uklad, .koniec, .odtwarzacz { grid-template-columns: minmax(0, 1fr); }
  .teraz-gra { position: static; }
  .pary { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 759px) {
  .przegroda img { height: clamp(200px, 58vw, 360px); object-fit: cover; object-position: var(--x, 50%) 50%; }
}
@media (max-width: 640px) {
  .gora { gap: 4px 16px; padding-block: 16px 8px; }
  .gora nav { order: 3; flex-basis: 100%; }
  .gora nav ul { gap: 0 18px; }
  .jezyk { order: 2; }
  .fakty, .drogi, .dwie-glebokosci, .postacie, .film-ksiazka, .dla-kogo, .kroki { grid-template-columns: minmax(0, 1fr); }
  .rozkladowki { grid-template-columns: minmax(0, 1fr); }
  .pary > div, .karta .pary > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .scena .ruch { padding-left: 1.4em; }
  .film-ramka { aspect-ratio: auto; }
  .film-ramka img { position: static; display: block; aspect-ratio: 16 / 9; height: auto; }
  .film-zapowiedz { position: static; background: #FBF6EC; }
  .film-ramka.gra { aspect-ratio: 16 / 9; }
  .wezwania .przycisk { width: 100%; }
  .koniec img { max-height: 200px; }
  .utwor { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px; }
  .utwor .okladka { width: 56px; height: 56px; }
  .utwor .tytul { font-size: 1.3rem; }
  .pod-utworem { padding-left: 12px; }
  .teraz-naglowek { grid-template-columns: 72px minmax(0, 1fr); }
  .okladka-duza { width: 72px; height: 72px; }
}
/* ═══════════ Wersja 3: skanowalność (15.09.2026). Nadpisania na końcu pliku, żeby wygrywały kaskadą. ═══════════ */

/* typografia: lead wyraźnie większy od body, fakty nie mniejsze od fabuły */
:root {
  --t-small: 1.125rem;
  --t-lead: clamp(1.4rem, 2.2vw, 1.65rem);
  --t-h1: clamp(2.3rem, 5.6vw, 4.4rem);
}
body { overflow-x: clip; }
.opis-historii > p { font-size: var(--t-small); line-height: 1.55; }
.opis-historii .film-zapowiedz { font-size: 0.9375rem; }
.podglowa h3, .dla-kogo-kiedy h3, .uczciwie h3, .dla-kogo h3, .nie-obiecuje h3, .kroki h3, .kroki h4, .film-ksiazka h4 {
  font-style: normal; font-weight: 500; letter-spacing: -0.005em;
}
.kroki h4 { font-size: 1.3rem; line-height: 1.25; }
.pary dt { text-transform: none; letter-spacing: 0.01em; font-size: 0.9375rem; }
.podpis-artefaktu { font-style: normal; }
.l { font-family: var(--sans); font-weight: 500; font-variant-numeric: lining-nums; color: var(--atrament); white-space: nowrap; letter-spacing: 0; }

/* przyklejona nawigacja rozdziałów */
.rozdzialy {
  position: sticky; top: 0; z-index: 20;
  background: rgba(246, 238, 220, 0.95);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--linia);
  padding-inline: var(--gutter);
}
.rozdzialy ul {
  list-style: none; display: flex; align-items: center; gap: 0 26px;
  max-width: 74rem; margin-inline: auto;
  overflow-x: auto; scrollbar-width: none; white-space: nowrap;
}
.rozdzialy ul::-webkit-scrollbar { display: none; }
.rozdzialy li { flex: none; }
.rozdzialy a {
  display: inline-block; padding-block: 12px;
  font-family: var(--sans); font-size: 0.9375rem; letter-spacing: 0.03em;
  color: var(--atrament-2); text-decoration: none;
}
.rozdzialy a:hover { text-decoration: underline; text-decoration-color: var(--zloto-jasne); }
.rozdzialy a[aria-current="true"] {
  color: var(--atrament); text-decoration: underline;
  text-decoration-thickness: 2px; text-decoration-color: var(--zloto); text-underline-offset: 6px;
}
.rozdzialy .rozdzialy-lista { margin-left: auto; }
.rozdzialy .rozdzialy-lista a { padding: 5px 14px; margin-block: 6px; border: 1px solid var(--atrament); border-radius: 999px; color: var(--atrament); font-weight: 500; }
.rozdzialy .rozdzialy-lista a[aria-current="true"] { background: var(--atrament); color: var(--krem-tekst); text-decoration: none; }
section[id], #lista, #list, #jak-powstaje, #how-its-made { scroll-margin-top: 58px; }
.teraz-gra { top: 70px; }

/* hero i pasek „W skrócie” */
.hero { padding-block: clamp(24px, 4.5vw, 60px) clamp(36px, 4.5vw, 64px); }
.hero .glowa { max-width: 60rem; gap: 14px; }
.hero .lead { margin-top: 4px; }
.skrot {
  list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block: 1px solid var(--linia); margin-top: 26px;
}
.skrot li { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px 14px 0; }
.skrot li + li { border-left: 1px solid var(--linia); padding-left: 18px; }
.skrot > li > .l { font-size: clamp(1.35rem, 2.4vw, 1.85rem); line-height: 1.15; }
.skrot .opis { font-size: 1.0625rem; line-height: 1.35; color: var(--atrament-2); }
.hero .wezwania { margin-top: 24px; }
.przycisk { flex-wrap: wrap; column-gap: 6px; row-gap: 0; }
.przycisk .meta { white-space: nowrap; }

/* chipy z faktami */
.chipy { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chipy li {
  font-family: var(--sans); font-size: 0.9375rem; font-weight: 500; line-height: 1.2;
  padding: 7px 13px; border-radius: 999px;
  background: var(--karta); border: 1px solid var(--linia); color: var(--atrament);
}
.dla-kogo-kiedy { gap: 10px; }

/* pary jako kafelki */
.pary.kafle { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--odstep); max-width: 46rem; }
.pary.kafle > div, .pod-przyciskiem > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.pary.kafle > .szeroki { grid-column: 1 / -1; }
.plany { margin-top: 18px; max-width: 40rem; font-size: var(--t-small); line-height: 1.5; color: var(--atrament-2); border-left: 2px solid var(--zloto-jasne); padding-left: 16px; }

/* lista pod kolekcją: pole zaraz pod nagłówkiem, informacje pod przyciskiem */
.lista-blok { max-width: 46rem; }
.lista-blok .podglowa { margin-bottom: 14px; }
.pod-przyciskiem { margin-top: 20px; }

/* rozwinięcia (details) */
.rozwiniecia { border-block: 1px solid var(--linia); max-width: 50rem; }
.rozwiniecia > summary {
  cursor: pointer; list-style: none;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: baseline;
  padding-block: 14px;
}
.rozwiniecia > summary::-webkit-details-marker { display: none; }
.rozwiniecia > summary::after { content: "+"; font-family: var(--sans); font-size: 1.3rem; color: var(--zloto); }
.rozwiniecia[open] > summary::after { content: "\2212"; }
.rozwiniecia > summary h3, .rozwiniecia > summary h4 { font-size: 1.3rem; line-height: 1.3; font-weight: 500; font-style: normal; }
.rozwiniecia[open] > :not(summary) { margin-bottom: 18px; }
.list-zalozyciela { margin-top: 28px; }
.kroki + .list-zalozyciela { margin-top: 32px; }
.list-zalozyciela + .podpis { margin-top: 24px; }

/* w planach: książka */
.ksiazka-plan { max-width: 56rem; }
.wiecej-rozkladowek { margin-top: 12px; }
.wiecej-rozkladowek > summary {
  display: inline-block; cursor: pointer; list-style: none; padding-block: 8px;
  font-family: var(--sans); font-size: 1rem; font-weight: 500; color: var(--atrament);
  text-decoration: underline; text-decoration-color: var(--zloto-jasne); text-underline-offset: 5px;
}
.wiecej-rozkladowek > summary::-webkit-details-marker { display: none; }
.wiecej-rozkladowek > summary::before { content: "+ "; }
.wiecej-rozkladowek[open] > summary::before { content: "\2212 "; }
.wiecej-rozkladowek .rozkladowki { margin-top: 12px; }
.wiecej-rozkladowek .rozkladowki li:first-child { grid-column: auto; }

@media (max-width: 640px) {
  .gora { padding-block: 14px 10px; }
  .hero { padding-block: 18px 36px; }
  .hero .glowa { gap: 10px; }
  .skrot { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18px; }
  .skrot li { padding: 10px 10px 10px 0; gap: 2px; }
  .skrot li + li { padding-left: 12px; }
  .skrot li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .skrot li:nth-child(n+3) { border-top: 1px solid var(--linia); }
  .skrot .opis { font-size: 1rem; line-height: 1.3; }
  .hero .wezwania { margin-top: 18px; gap: 10px; }
  .rozdzialy ul { gap: 0 20px; }
  .pary.kafle { column-gap: 16px; }
  .przegroda::after { height: 40px; }
  .przegroda + .pas > .sekcja { padding-top: 44px; }
  .wiecej-rozkladowek .rozkladowki { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ═══════════ Wersja 3b: idea na górze, oferta w pierwszym ekranie, mini-odtwarzacz (15.09.2026) ═══════════ */

/* hero: tekst i oferta po lewej, ilustracja idei po prawej; na telefonie ilustracja jako pas nad tekstem */
.hero-uklad { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.hero h1 { font-size: clamp(2rem, 4vw, 3.3rem); line-height: 1.06; }
.hero .lead { font-size: clamp(1.125rem, 1.7vw, 1.4rem); }
.hero-obraz img { display: block; width: 100%; height: auto; border-radius: 2px; }
.hero-obraz figcaption { margin-top: 8px; font-family: var(--sans); font-size: 0.875rem; line-height: 1.45; color: var(--kurz); }

/* oferta w pierwszym ekranie: stan : co */
.oferta { list-style: none; margin-top: 18px; border-top: 1px solid var(--linia); max-width: 44rem; }
.oferta li { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 2px 14px; align-items: baseline; padding-block: 8px; border-bottom: 1px solid var(--linia); }
.oferta-stan { font-family: var(--sans); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--zloto); }
.oferta-co { font-size: 1.125rem; line-height: 1.35; }
.hero .wezwania { margin-top: 20px; }

/* fakty historyczne i artefakt „obok siebie” */
.skrot.fakty-historia { margin-top: 0; }
.obok { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px var(--odstep); max-width: 62rem; }
.obok figure { background: var(--karta); border: 1px solid var(--linia); border-radius: 2px; padding: clamp(20px, 3vw, 32px); display: flex; flex-direction: column; gap: 12px; }
.obok blockquote { margin: 0; font-size: clamp(1.45rem, 2.6vw, 2rem); line-height: 1.25; font-style: italic; }
.obok figcaption { font-size: var(--t-small); line-height: 1.5; color: var(--atrament-2); }
.obok .zrodlo { font-family: var(--sans); font-size: 0.875rem; color: var(--kurz); }
.rzym-chipy { margin-top: 22px; display: flex; flex-direction: column; gap: 8px; }
.rzym-chipy > p { font-family: var(--sans); font-size: 0.9375rem; color: var(--kurz); }
.kroki.trzy { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kroki.trzy h3 { font-size: 1.3rem; }
.sekcja-ciag { padding-top: 0; }

/* lista oczekujących na końcu */
.lista-koniec { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.lista-koniec .formularz { margin-top: 24px; }
.lista-koniec img { width: 100%; height: auto; display: block; border-radius: 2px; margin-top: 8px; }
.po-formularzu { margin-top: 18px; }

/* mini-odtwarzacz: przyklejony na dole, ten sam <audio> co pełny odtwarzacz */
.mini {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--atrament); color: var(--krem-tekst);
  padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 28px rgba(34, 50, 74, 0.28);
  animation: mini-wjazd .28s ease-out;
}
@keyframes mini-wjazd { from { transform: translateY(100%); } to { transform: none; } }
.mini :focus-visible { outline-color: var(--krem-tekst); }
.mini-wnetrze {
  max-width: 74rem; margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; grid-template-areas: "info przyciski jezyk zamknij" "postep postep postep postep";
  align-items: center; gap: 2px 10px;
}
.mini-info { grid-area: info; display: flex; align-items: center; gap: 10px; min-width: 0; background: transparent; border: 0; color: inherit; text-align: left; padding: 2px 0; cursor: pointer; text-decoration: none; }
.mini-okladka { width: 44px; height: 44px; border-radius: 3px; object-fit: cover; flex: none; }
.mini-tekst { display: flex; flex-direction: column; min-width: 0; }
.mini-tytul { font-size: 1.15rem; font-style: italic; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-jezyk { font-family: var(--sans); font-size: 0.8125rem; color: #E6D3AE; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-przyciski { grid-area: przyciski; display: flex; align-items: center; gap: 4px; }
.mini button.mini-ikona, .mini-nagranie, .mini-zamknij {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--krem-tekst); border: 0; cursor: pointer; padding: 0;
}
.mini button.mini-ikona:hover, .mini-nagranie:hover, .mini-zamknij:hover { background: rgba(251, 246, 236, 0.12); }
.mini-ikona svg, .mini-zamknij svg { width: 20px; height: 20px; }
.mini .mini-graj { background: var(--krem-tekst); color: var(--atrament); width: 44px; height: 44px; }
.mini .mini-graj:hover { background: #fff; }
.mini-graj .ikona-pauza { display: none; }
.mini-graj.gra .ikona-graj { display: none; }
.mini-graj.gra .ikona-pauza { display: block; }
.mini-nagranie { grid-area: jezyk; font-family: var(--sans); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.06em; border: 1px solid rgba(251, 246, 236, 0.45); border-radius: 999px; width: auto; min-width: 44px; height: 32px; padding: 0 10px; }
.mini-zamknij { grid-area: zamknij; }
.mini-postep { grid-area: postep; width: 100%; height: 20px; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; margin: 0; --pct: 0%; }
.mini-postep::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: linear-gradient(to right, var(--krem-tekst) var(--pct), rgba(251, 246, 236, 0.3) var(--pct)); }
.mini-postep::-moz-range-track { height: 3px; border-radius: 2px; background: rgba(251, 246, 236, 0.3); }
.mini-postep::-moz-range-progress { height: 3px; border-radius: 2px; background: var(--krem-tekst); }
.mini-postep::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--krem-tekst); margin-top: -5.5px; border: 0; }
.mini-postep::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--krem-tekst); border: 0; }
body.mini-widoczny { padding-bottom: calc(var(--mini-h, 84px) + 12px); }

@media (max-width: 880px) {
  .hero-uklad, .lista-koniec { grid-template-columns: minmax(0, 1fr); }
  .hero-obraz { order: -1; margin-inline: calc(-1 * var(--gutter)); }
  .hero-obraz img { aspect-ratio: 13 / 5; object-fit: cover; object-position: 50% 38%; border-radius: 0; }
  .hero-obraz figcaption { padding-inline: var(--gutter); }
  .lista-koniec img { max-height: 220px; object-fit: cover; }
}
@media (max-width: 640px) {
  .hero { padding-block: 0 32px; }
  .hero-uklad { gap: 0; }
  .hero .glowa { gap: 8px; padding-top: 16px; }
  .hero-obraz { position: relative; }
  .hero-obraz figcaption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 3px var(--gutter); font-size: 0.75rem; line-height: 1.35; color: var(--atrament); background: rgba(251, 246, 236, 0.86); }
  .hero .eyebrow { font-size: 0.75rem; }
  .hero h1 { font-size: 1.85rem; }
  .hero .lead { font-size: 1.0625rem; line-height: 1.45; }
  .oferta { margin-top: 12px; }
  .oferta li { grid-template-columns: 5.4rem minmax(0, 1fr); gap: 0 10px; padding-block: 6px; }
  .oferta-stan { font-size: 0.6875rem; letter-spacing: 0.05em; }
  .oferta-co { font-size: 0.96875rem; line-height: 1.3; }
  .hero .wezwania { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .hero .wezwania .przycisk { width: 100%; padding: 8px 10px; font-size: 0.9375rem; letter-spacing: 0.01em; }
  .obok, .kroki.trzy { grid-template-columns: minmax(0, 1fr); }
  .rozdzialy ul { gap: 0 16px; }
  .mini { padding-top: 6px; }
  .mini-wnetrze { gap: 0 4px; }
  .mini-okladka { width: 40px; height: 40px; }
  .mini-tytul { font-size: 1.05rem; }
  .mini button.mini-ikona, .mini-zamknij { width: 40px; height: 40px; }
  .mini .mini-graj { width: 44px; height: 44px; }
  .mini-przyciski { gap: 0; }
  .mini-nagranie { min-width: 40px; padding: 0 8px; }
}

/* 3b: pierwszy ekran na komputerze mieści ofertę i oba przyciski w 800 px wysokości */
@media (min-width: 641px) {
  .hero { padding-block: clamp(20px, 2.6vw, 34px) clamp(36px, 4.5vw, 64px); }
  .hero .glowa { gap: 10px; }
  .hero h1 { font-size: clamp(2rem, 3.7vw, 3rem); }
  .hero .lead { font-size: clamp(1.125rem, 1.6vw, 1.3rem); }
  .oferta { margin-top: 14px; }
  .oferta li { padding-block: 6px; }
  .hero .wezwania { margin-top: 16px; }
}

/* 3c: hero jako pokazanie: idea i trzy kafelki z obrazkiem (decyzja Michała 15.09.2026) */
.w-toku { font-family: var(--sans); font-size: 0.9375rem; line-height: 1.45; color: var(--kurz); }
.drogi-hero { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); margin-top: clamp(20px, 3vw, 32px); }
.droga-kafel { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--atrament); background: var(--karta); border: 1px solid var(--linia); border-radius: 3px; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.droga-kafel:hover { border-color: var(--atrament); box-shadow: 0 8px 24px rgba(34, 50, 74, 0.12); }
.droga-kafel:hover .droga-tytul { text-decoration: underline; text-decoration-color: var(--zloto-jasne); text-underline-offset: 5px; }
.droga-obraz { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #E9DCC6; }
.droga-obraz img { display: block; width: 100%; height: 100%; object-fit: cover; }
.droga-znak { position: absolute; left: 12px; bottom: 12px; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--atrament); color: var(--krem-tekst); box-shadow: 0 2px 10px rgba(34, 50, 74, 0.3); }
.droga-znak svg { width: 20px; height: 20px; }
.droga-tekst { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; }
.droga-tytul { font-size: clamp(1.2rem, 1.8vw, 1.4rem); line-height: 1.2; font-weight: 500; }
.droga-opis { font-family: var(--sans); font-size: 0.9375rem; line-height: 1.4; color: var(--kurz); }
@media (max-width: 640px) {
  .drogi-hero { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 14px; }
  .droga-kafel { flex-direction: row; align-items: stretch; }
  .droga-obraz { width: 92px; flex: none; aspect-ratio: auto; min-height: 80px; }
  .droga-znak { width: 32px; height: 32px; left: 8px; bottom: 8px; }
  .droga-znak svg { width: 16px; height: 16px; }
  .droga-tekst { justify-content: center; padding: 10px 12px; gap: 2px; }
  .droga-tytul { font-size: 1.15rem; }
  .droga-opis { font-size: 0.875rem; }
}

/* Telefon: w pasku rozdziałów zostają Pierwsza bajka, Piosenki i Lista oczekujących, żeby nic nie było ucięte */
@media (max-width: 559px) {
  .rozdzialy .rozdzial-szeroki { display: none; }
  .rozdzialy ul { gap: 0 14px; }
  .rozdzialy .rozdzialy-lista a { padding-inline: 12px; }
}

/* ═══════════ Wersja 4: wdrożenie audytu zewnętrznego (16.09.2026) ═══════════ */

/* Krótsze odstępy pionowe: audyt prosił o skrócenie wielkich pustych przestrzeni. */
:root { --sekcja: clamp(48px, 6.5vw, 88px); }
.przegroda::after { height: clamp(44px, 7vw, 104px); }
.modul { margin-top: clamp(28px, 4vw, 44px); }
.modul + .modul { margin-top: clamp(36px, 5.5vw, 64px); }

/* Kotwice: odstęp równy rzeczywistej wysokości przyklejonego menu (--nav-h ustawia strona.js). */
section[id], div[id], figure[id] { scroll-margin-top: calc(var(--nav-h, 58px) + 16px); }
.teraz-gra { top: calc(var(--nav-h, 58px) + 12px); }

/* Nic nie wychodzi poza szerokość okna, także przy 320 px. */
html { overflow-x: clip; }
.wnetrze, .sekcja, .modul, .glowa, .lead, .hero-uklad { min-width: 0; max-width: 100%; }
.glowa { max-width: min(46rem, 100%); }
.hero .glowa { max-width: min(38rem, 100%); }
.lead { max-width: min(40rem, 100%); }

/* ——— otwarcie: jedna obietnica, jedno główne działanie ——— */
.hero-uklad { align-items: center; }
.hero h1 { font-size: clamp(1.95rem, 3.6vw, 3.05rem); }
.hero-wezwania { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.pod-wezwaniem { margin-top: 12px; font-family: var(--sans); font-size: 0.9375rem; line-height: 1.5; color: var(--kurz); }
.hero .w-toku { margin-top: 14px; border-top: 1px solid var(--linia); padding-top: 12px; max-width: 30rem; }
.hero-obraz img { box-shadow: 0 1px 0 var(--linia), 0 14px 40px rgba(60, 40, 20, 0.16); }

/* ——— pierwsza historia: plakat, stan ładowania, tryb „tylko posłuchaj” ——— */
.film-ramka.gra iframe { z-index: 2; }
.film-ramka.gra .film-start, .film-ramka.gra .film-zapowiedz { display: none; }
.film-stan {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  margin: 0; padding: 12px 18px;
  font-family: var(--sans); font-size: 0.9375rem; line-height: 1.45;
  color: var(--atrament); background: rgba(251, 246, 236, 0.94);
  border-top: 3px solid var(--zloto-jasne);
}
.film-stan.blad { border-top-color: var(--blad); }

.sluchaj-blok { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
/* Skrót „Tylko posłuchaj”: uruchamia pierwszą pozycję odtwarzacza w sekcji piosenek. */
.sluchaj-start {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center; gap: 4px 16px;
  width: 100%; padding: 12px 16px;
  text-align: left; cursor: pointer;
  background: var(--karta); color: var(--atrament);
  border: 1px solid var(--atrament); border-radius: 3px;
  transition: background-color .2s;
}
.sluchaj-start:hover { background: rgba(255, 252, 245, 0.85); }
.sluchaj-start:hover .sluchaj-tytul { text-decoration: underline; text-decoration-color: var(--zloto-jasne); text-underline-offset: 5px; }
.sluchaj-okladka { width: 64px; height: 64px; border-radius: 2px; object-fit: cover; display: block; }
.sluchaj-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sluchaj-tytul { font-size: 1.35rem; line-height: 1.2; }
.sluchaj-opis { font-family: var(--sans); font-size: 0.875rem; color: var(--kurz); }
.sluchaj-czas { font-family: var(--sans); font-size: 0.9375rem; color: var(--kurz); font-variant-numeric: tabular-nums; }
.sluchaj-nota { font-family: var(--sans); font-size: 0.875rem; line-height: 1.5; color: var(--kurz); }
.uwaga-jezyk {
  margin-top: 6px; max-width: min(40rem, 100%);
  font-size: var(--t-small); line-height: 1.55; color: var(--atrament-2);
  border-left: 2px solid var(--zloto-jasne); padding-left: 16px;
}
.po-historii { margin-top: 6px; flex-direction: column; align-items: flex-start; gap: 12px; }
.po-historii .przycisk { width: 100%; }
.tylko-pl { font-family: var(--sans); font-size: 0.875rem; color: #E6D3AE; }

/* ——— co z tego macie ——— */
.znaczenie { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px clamp(16px, 2.4vw, 32px); }
.znaczenie li { border-top: 1px solid var(--atrament); padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.znaczenie h3 { font-size: 1.3rem; line-height: 1.25; font-weight: 500; }
.znaczenie p { font-size: var(--t-small); line-height: 1.5; color: var(--atrament-2); }

/* ——— kolekcja: jeden zwarty panel ——— */
.panel-oferty {
  background: var(--karta); border: 1px solid var(--linia); border-radius: 3px;
  padding: clamp(20px, 3vw, 34px); max-width: 52rem;
}
.panel-oferty .pary.kafle { margin: 0; max-width: none; }
.panel-oferty .pary.kafle > div:first-child, .panel-oferty .pary.kafle > div:nth-child(2) { border-top: 0; padding-top: 0; }
.nota-oferty { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linia); font-size: var(--t-small); line-height: 1.5; color: var(--atrament-2); }

/* ——— skąd się wziął, jak powstaje ——— */
.jak-powstaje { max-width: 40rem; border-left: 2px solid var(--zloto-jasne); padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.jak-powstaje h3 { font-size: 1.3rem; line-height: 1.25; font-weight: 500; }
.jak-powstaje p { font-size: var(--t-small); line-height: 1.55; color: var(--atrament-2); }
.o-nas-podpis { margin-top: 18px; }

/* ——— pytania: inspiracje i książka w rozwinięciach ——— */
.zrodla[open] .skrot { margin-top: 4px; }
.zrodla .obok { margin-top: 22px; }
.ksiazka-zapowiedz { max-width: 50rem; display: flex; flex-direction: column; gap: 10px; }
.ksiazka-zapowiedz > p { font-size: var(--t-small); line-height: 1.55; color: var(--atrament-2); }
.ksiazka-zapowiedz .rozwiniecia { border-top: 0; }
.rozkladowka-podglad { display: flex; flex-direction: column; gap: 8px; max-width: 44rem; }
.rozkladowka-podglad img { width: 100%; height: auto; border-radius: 2px; box-shadow: 0 1px 0 var(--linia), 0 10px 30px rgba(60, 40, 20, 0.14); }
.rozkladowka-podglad figcaption { font-family: var(--sans); font-size: 0.875rem; color: var(--kurz); line-height: 1.45; }

@media (max-width: 1080px) {
  .znaczenie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 880px) {
  .hero-obraz { order: 2; margin-inline: 0; }
  .hero-obraz img { aspect-ratio: 16 / 9; object-fit: cover; border-radius: 2px; }
  .po-historii .przycisk { width: auto; }
}
@media (max-width: 640px) {
  .hero { padding-block: 8px 30px; }
  .hero-uklad { gap: 18px; }
  .hero .glowa { padding-top: 6px; gap: 10px; }
  .hero h1 { font-size: 1.8rem; }
  .hero .wezwania, .hero-wezwania { display: flex; grid-template-columns: none; margin-top: 16px; gap: 10px 18px; }
  .hero-wezwania .przycisk { width: 100%; padding: 13px 18px; font-size: 1rem; }
  .znaczenie { grid-template-columns: minmax(0, 1fr); }
  .utwor-dodatkowy { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 12px; }
  .utwor-dodatkowy .okladka { width: 52px; height: 52px; }
  .utwor-dodatkowy .tytul { font-size: 1.2rem; }
  .panel-oferty { padding: 18px 16px; }
  .panel-oferty .pary.kafle > div:nth-child(2) { border-top: 1px solid var(--linia); padding-top: 14px; }
}
/* Bardzo wąskie ekrany: pasek rozdziałów ma się zmieścić bez ucinania pigułki „Daj mi znać”. */
@media (max-width: 400px) {
  .rozdzialy .rozdzial-sredni { display: none; }
  .rozdzialy ul { gap: 0 12px; }
  .rozdzialy a { font-size: 0.875rem; }
  .rozdzialy .rozdzialy-lista a { padding-inline: 10px; }
}
@media (max-width: 380px) {
  .utwor, .utwor-dodatkowy { grid-template-columns: 48px minmax(0, 1fr); }
  .utwor .okladka, .utwor-dodatkowy .okladka { width: 48px; height: 48px; }
  .utwor .czas, .utwor-dodatkowy .czas { grid-column: 2 / 3; grid-row: auto; }
  .utwor .okladka { grid-row: 1 / 4; }
  .pod-utworem { padding-left: 12px; }
}

/* ═══════════ Wersja 5: warstwa wizualna według strategia/inspiracje-wizualne-2026-09-16.md ═══════════
   Zasady: artefakt zamiast opisu, tekst na własnym polu koloru (nigdy nakładka na ilustracji),
   zero ruchu przy przewijaniu, zero presji i promocji. Makiety są makietami i tak są podpisane. */

/* ——— hero wariant A: tekst po lewej, makieta telefonu po prawej ——— */
.hero-uklad { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
.hero-makieta-obraz { display: flex; justify-content: center; }

/* ——— makieta telefonu: pokazuje tylko to, co produkt naprawdę ma robić ——— */
.telefon { --szer: 292px; width: var(--szer); margin-inline: auto; position: relative; }
.telefon::after {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: -24px; height: 32px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(34, 50, 74, 0.24), rgba(34, 50, 74, 0) 70%);
}
.telefon-ramka {
  position: relative; border-radius: calc(var(--szer) / 7.5); padding: 10px;
  background: linear-gradient(150deg, #2B3B54, #16212F 55%, #2B3B54);
  box-shadow: 0 1px 0 rgba(255, 252, 245, 0.22) inset, 0 18px 44px rgba(34, 50, 74, 0.26);
}
.telefon-ekran {
  position: relative; border-radius: calc(var(--szer) / 9.5); overflow: hidden;
  background: var(--papier); aspect-ratio: 9 / 19.5; display: flex; flex-direction: column;
}
.telefon-wysepka {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 28%; height: 9px; border-radius: 999px; background: #16212F; z-index: 3;
}
.ekran-gora { padding: 24px 14px 10px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ekran-znak { font-family: var(--serif); font-size: 0.95rem; font-variant-caps: small-caps; letter-spacing: 0.04em; white-space: nowrap; flex: none; }
.ekran-licznik { font-family: var(--sans); font-size: 0.5625rem; line-height: 1.3; letter-spacing: 0.06em; text-transform: uppercase; color: var(--kurz); text-align: right; min-width: 0; }
.ekran-lista { list-style: none; padding: 4px 12px 8px; margin: 0; display: flex; flex-direction: column; gap: 7px; overflow: hidden; flex: 1; }
.ekran-poz {
  display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; align-items: center;
  padding: 7px; border-radius: 5px; background: rgba(255, 252, 245, 0.75); border: 1px solid var(--linia);
}
.ekran-poz img { width: 42px; height: 42px; border-radius: 3px; object-fit: cover; display: block; }
.ekran-poz .t { font-size: 0.86rem; line-height: 1.2; display: block; }
.ekran-poz .m { font-family: var(--sans); font-size: 0.625rem; letter-spacing: 0.04em; color: var(--kurz); display: block; margin-top: 2px; }
.ekran-poz.wkrotce { opacity: 0.58; }
.zaslepka { width: 42px; height: 42px; border-radius: 3px; background: rgba(34, 50, 74, 0.1); display: block; }
.ekran-gracz { margin-top: auto; background: var(--atrament); color: var(--krem-tekst); padding: 9px 12px 16px; display: flex; flex-direction: column; gap: 7px; }
.gracz-wiersz { display: grid; grid-template-columns: 34px minmax(0, 1fr) 24px; gap: 9px; align-items: center; }
.gracz-wiersz img { width: 34px; height: 34px; border-radius: 3px; object-fit: cover; display: block; }
.gracz-t { font-size: 0.82rem; line-height: 1.15; display: block; }
.gracz-m { font-family: var(--sans); font-size: 0.6rem; color: #E6D3AE; letter-spacing: 0.05em; display: block; }
.gracz-play { width: 24px; height: 24px; border-radius: 50%; background: var(--krem-tekst); color: var(--atrament); display: flex; align-items: center; justify-content: center; }
.gracz-play svg { width: 11px; height: 11px; }
.gracz-os { height: 3px; border-radius: 2px; background: rgba(251, 246, 236, 0.28); overflow: hidden; }
.gracz-os span { display: block; height: 100%; width: 38%; background: var(--krem-tekst); }
.gracz-czasy { display: flex; justify-content: space-between; font-family: var(--sans); font-size: 0.58rem; color: #E6D3AE; font-variant-numeric: tabular-nums; }
.telefon-podpis { margin-top: 32px; font-family: var(--sans); font-size: 0.875rem; line-height: 1.45; color: var(--kurz); text-align: center; max-width: 24rem; margin-inline: auto; }

/* ——— kadr bajki: pasek sterowania na dole obrazu, przyciemnienie tylko pod paskiem ——— */
.kadr-pasek {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  padding: 16px 16px 14px;
  background: linear-gradient(to top, rgba(20, 30, 45, 0.86), rgba(20, 30, 45, 0.5) 62%, rgba(20, 30, 45, 0));
  color: var(--krem-tekst);
}
.kadr-pasek .film-start {
  position: static; transform: none; box-shadow: none;
  width: 44px; height: 44px; min-height: 0; padding: 0; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--krem-tekst); color: var(--atrament); border: 0; cursor: pointer;
}
.kadr-pasek .film-start:hover { background: #fff; }
.kadr-pasek .film-start svg { width: 16px; height: 16px; }
.kadr-pasek :focus-visible { outline-color: var(--krem-tekst); }
.kadr-etykieta { font-family: var(--sans); font-size: 0.9375rem; font-weight: 500; white-space: nowrap; }
.fala { flex: 1; display: flex; align-items: center; gap: 2px; height: 26px; min-width: 0; overflow: hidden; }
.fala i { display: block; width: 3px; border-radius: 2px; background: rgba(251, 246, 236, 0.42); flex: none; }
.fala i.gra { background: var(--krem-tekst); }
.kadr-czas { font-family: var(--sans); font-size: 0.8125rem; font-variant-numeric: tabular-nums; color: #E6D3AE; flex: none; }
.film-ramka.gra .kadr-pasek { display: none; }

.cytat { margin-top: 20px; border-left: 2px solid var(--zloto-jasne); padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.cytat p { font-size: var(--t-h3); font-style: italic; line-height: 1.35; }
.cytat footer { font-family: var(--sans); font-size: 0.875rem; color: var(--kurz); }

/* ——— co z tego macie: lista i ilustracja z bohaterami obok ——— */
.znaczenie-uklad { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(24px, 4vw, 48px); align-items: center; }
.znaczenie-uklad .znaczenie { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.znaczenie-obraz img { display: block; width: 100%; height: auto; border-radius: 2px; box-shadow: 0 1px 0 var(--linia), 0 12px 32px rgba(60, 40, 20, 0.14); }

/* ——— kolekcja: dziesięć kart ze stanem pracy przy każdej pozycji ——— */
.odcinki { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; list-style: none; padding: 0; }
.odc { display: flex; flex-direction: column; gap: 9px; padding: 11px; border: 1px solid var(--linia); border-radius: 3px; background: var(--karta); }
.odc-okl { position: relative; aspect-ratio: 1; border-radius: 2px; overflow: hidden; background: rgba(34, 50, 74, 0.07); display: block; }
.odc-okl img { width: 100%; height: 100%; object-fit: cover; display: block; }
.odc-play { position: absolute; right: 7px; bottom: 7px; width: 26px; height: 26px; border-radius: 50%; background: rgba(251, 246, 236, 0.94); color: var(--atrament); display: flex; align-items: center; justify-content: center; }
.odc-play svg { width: 10px; height: 10px; }
.odc-t { font-size: 1.1rem; line-height: 1.2; }
.odc-s { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.07em; text-transform: uppercase; display: flex; align-items: center; gap: 6px; color: var(--kurz); margin-top: auto; }
.odc-s::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--kurz); flex: none; }
.odc-s.gotowe { color: var(--zloto); }
.odc-s.gotowe::before { background: var(--zloto-jasne); }
.odc-s.powstaje::before { background: transparent; box-shadow: 0 0 0 1px var(--kurz) inset; }
.odc.pusty .odc-t { color: var(--kurz); }
.odc.pusty .odc-okl { display: flex; align-items: center; justify-content: center; }
.odc.pusty .odc-okl::after { content: ""; width: 34px; height: 34px; border-radius: 50%; border: 1px dashed rgba(34, 50, 74, 0.34); }

/* ——— książka jako przedmiot, z oznaczeniem, że to zapowiedź ——— */
.ksiazka-scena { perspective: 1600px; padding-block: 20px 34px; display: flex; justify-content: center; }
.ksiazka { position: relative; width: min(100%, 44rem); transform: rotateX(6deg) rotateY(-9deg); transform-style: preserve-3d; }
.ksiazka::after {
  content: ""; position: absolute; left: 4%; right: 4%; bottom: -28px; height: 38px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(34, 50, 74, 0.28), rgba(34, 50, 74, 0) 70%); transform: translateZ(-30px);
}
.ksiazka img { display: block; width: 100%; border-radius: 2px; box-shadow: 0 22px 50px rgba(34, 50, 74, 0.28); }
.ksiazka .grzbiet {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 56px; transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(to right, rgba(34, 50, 74, 0), rgba(34, 50, 74, 0.26) 44%, rgba(34, 50, 74, 0.3) 50%, rgba(255, 252, 245, 0.24) 56%, rgba(34, 50, 74, 0));
}
.ksiazka .blask { position: absolute; inset: 0; pointer-events: none; border-radius: 2px; background: linear-gradient(105deg, rgba(255, 252, 245, 0.24), rgba(255, 252, 245, 0) 38%); }
.ksiazka-znacznik {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font-family: var(--sans); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--atrament); background: rgba(251, 246, 236, 0.92); border: 1px solid var(--linia); border-radius: 2px; padding: 6px 11px;
}
.podpis-artefaktu { font-family: var(--sans); font-size: 0.875rem; color: var(--kurz); text-align: center; margin-top: 30px; }

@media (max-width: 1080px) {
  .znaczenie-uklad { grid-template-columns: minmax(0, 1fr); }
  .znaczenie-uklad .znaczenie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .odcinki { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 880px) {
  .odcinki { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-uklad { grid-template-columns: minmax(0, 1fr); }
  .hero-makieta-obraz { order: 2; }
  .telefon { --szer: 252px; }
  .ksiazka { transform: none; }
}
@media (max-width: 640px) {
  .znaczenie-uklad .znaczenie { grid-template-columns: minmax(0, 1fr); }
  .odcinki { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .odc { padding: 9px; gap: 7px; }
  .odc-t { font-size: 1rem; }
  .kadr-pasek { gap: 10px; padding: 14px 12px 12px; }
  .kadr-etykieta { display: none; }
  .kadr-pasek .film-start { width: 40px; height: 40px; }
  .cytat p { font-size: 1.3rem; }
  .telefon-podpis { margin-top: 28px; }
}

/* ═══════════ Wersja 6: jeden klocek odtwarzacza, kadr bez wideo (decyzje Michała, 16.09.2026) ═══════════ */

/* Odtwarzacz i lista w jednej ramce, jeden rytm, jedna krawędź. */
.odtwarzacz {
  display: block;
  border: 1px solid var(--linia);
  border-radius: 4px;
  background: var(--karta);
  overflow: hidden;
  max-width: 52rem;
}
.odtwarzacz .teraz-gra { position: static; border-radius: 0; gap: 14px; }
.filtr-utworow {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 14px clamp(14px, 2.4vw, 22px) 0;
}
.filtr-utworow button {
  font-family: var(--sans); font-size: 0.875rem; line-height: 1.2;
  color: var(--atrament-2); background: transparent;
  border: 1px solid var(--linia); border-radius: 999px;
  padding: 7px 14px; cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}
.filtr-utworow button:hover { border-color: var(--atrament); }
.filtr-utworow button[aria-pressed="true"] { background: var(--atrament); border-color: var(--atrament); color: var(--krem-tekst); }
.odtwarzacz .utwory { gap: 0; padding: 10px clamp(14px, 2.4vw, 22px) clamp(14px, 2.4vw, 20px); }
.odtwarzacz .utwory > li { border: 0; border-radius: 0; background: transparent; }
.odtwarzacz .utwory > li + li { border-top: 1px solid var(--linia); }
.odtwarzacz .utwory > li.biezacy { border-color: var(--linia) !important; background: rgba(255, 252, 245, 0.75); border-radius: 3px; }
.odtwarzacz .utwory > li.biezacy + li { border-top-color: transparent; }
.odtwarzacz .utwor { padding: 12px 10px; }
.odtwarzacz .pod-utworem { padding: 0 10px 10px 98px; }

/* Kadr opowiadania: ilustracja plus pasek, który uruchamia pozycję 1 odtwarzacza. */
.kadr { position: relative; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px var(--linia), 0 14px 34px rgba(34, 50, 74, 0.16); }
.kadr > img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.kadr .kadr-pasek { position: absolute; left: 0; right: 0; bottom: 0; }
.kadr-play {
  width: 44px; height: 44px; border-radius: 50%; flex: none; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--krem-tekst); color: var(--atrament); border: 0; cursor: pointer;
}
.kadr-play:hover { background: #fff; }
.kadr-play svg { width: 16px; height: 16px; }

/* Powstaje razem z pierwszą grupą */
.razem { max-width: 44rem; display: flex; flex-direction: column; gap: 10px; border-left: 2px solid var(--zloto-jasne); padding-left: 20px; }
.razem .podglowa { margin-bottom: 0; }
.razem p { font-size: var(--t-small); line-height: 1.55; color: var(--atrament-2); }

@media (max-width: 640px) {
  .odtwarzacz .pod-utworem { padding-left: 10px; }
  .filtr-utworow { padding-top: 12px; gap: 6px; }
  .filtr-utworow button { padding: 6px 12px; font-size: 0.8125rem; }
  .kadr-play { width: 40px; height: 40px; }
}

/* ═══════════ Wersja 7: jeden klocek bez ramek, przyciski ze stanem, EN wyłączone (16.09.2026) ═══════════ */

/* Lista ma to samo tło co karta odtwarzacza: żadnych osobnych ramek ani innego koloru. */
.odtwarzacz .utwory > li,
.odtwarzacz .utwory > li.biezacy { background: transparent; border: 0; border-radius: 0; }
.odtwarzacz .utwory > li + li { border-top: 1px solid var(--linia); }
.odtwarzacz .utwory > li.biezacy { border-color: var(--linia) !important; }
.odtwarzacz .utwory > li.biezacy + li { border-top-color: var(--linia); }
.odtwarzacz .utwory > li.biezacy .tytul { font-weight: 500; }

/* Mini-odtwarzacz bez przycisku języka: trzy kolumny zamiast czterech. */
.mini-wnetrze {
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "info przyciski zamknij" "postep postep postep";
}

/* Przycisk na kadrze: pigułka z ikoną i tekstem, które zmieniają się razem. */
.kadr-pasek .kadr-play {
  width: auto; height: 44px; border-radius: 999px;
  padding: 0 18px 0 8px; gap: 10px;
  display: inline-flex; align-items: center;
}
.kadr-ikony {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--atrament); color: var(--krem-tekst);
}
.kadr-play svg { width: 12px; height: 12px; }
.kadr-play .ikona-pauza { display: none; }
.kadr-play.gra .ikona-graj { display: none; }
.kadr-play.gra .ikona-pauza { display: block; }
.kadr-play-tekst { font-family: var(--sans); font-size: 0.9375rem; font-weight: 500; white-space: nowrap; }

@media (max-width: 640px) {
  .kadr-pasek .kadr-play { height: 40px; padding: 0 14px 0 6px; gap: 8px; }
  .kadr-ikony { width: 26px; height: 26px; }
  .kadr-play-tekst { font-size: 0.875rem; }
}

/* ═══════════ Wersja 9: strona jako opowieść (16.09.2026) ═══════════
   Rytm: pas ilustracji na pełną szerokość jako rozdział, pod nim krótki blok tekstu
   na własnym polu koloru. Tekst nigdy nie leży na obrazie, obrazów nie przyciemniamy.
   Kadry są panoramiczne 2:1 i pokazujemy je w całości, żeby nie ucinać twarzy. */

.rozdzial-obraz { display: block; margin: 0; line-height: 0; background: #E9DCC6; }
.rozdzial-obraz img { display: block; width: 100%; height: auto; }
.rozdzial { padding-block: clamp(40px, 6vw, 80px); }

/* motto z „Rozmyślań” */
.motto {
  margin-top: clamp(24px, 4vw, 40px); max-width: min(44rem, 100%);
  border-left: 3px solid var(--zloto-jasne); padding-left: 22px;
  display: flex; flex-direction: column; gap: 10px;
}
.motto blockquote { margin: 0; font-size: clamp(1.45rem, 2.6vw, 2rem); font-style: italic; line-height: 1.3; }
.motto figcaption { font-family: var(--sans); font-size: 0.875rem; line-height: 1.5; color: var(--kurz); }
.spinka { margin-top: 20px; max-width: min(42rem, 100%); font-size: var(--t-small); line-height: 1.55; color: var(--atrament-2); }

/* zdanie z historii jako scena */
.scena-cytat { margin-top: 14px; max-width: min(50rem, 100%); display: flex; flex-direction: column; gap: 12px; }
.scena-cytat blockquote { margin: 0; font-size: clamp(1.5rem, 3vw, 2.5rem); font-style: italic; line-height: 1.25; }
.scena-cytat figcaption { font-family: var(--sans); font-size: 0.9375rem; color: var(--kurz); }
.rozdzial .dwie-glebokosci { margin-top: clamp(28px, 4vw, 44px); }

/* kolekcja: fakty obok makiety telefonu */
.kolekcja-uklad { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(24px, 4vw, 52px); align-items: center; }
.kolekcja-uklad .panel-oferty { margin-top: 0; max-width: none; }
.kolekcja-uklad .telefon-podpis { margin-top: 28px; }

/* zapis na końcu opowieści */
.lista-blok { max-width: min(46rem, 100%); }
.lista-blok .formularz { margin-top: 0; }
.lista-blok .pod-przyciskiem { margin-top: 20px; }

@media (max-width: 880px) {
  .kolekcja-uklad { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .rozdzial { padding-block: clamp(28px, 7vw, 44px); }
  .motto { padding-left: 16px; }
  .scena-cytat blockquote { font-size: 1.45rem; }
}

/* ═══════════ Wersja 10: makieta w otwarciu, trzy opowiadania (16.09.2026) ═══════════ */

/* Otwarcie: tekst po lewej, makieta telefonu po prawej. Na telefonie tekst i przycisk
   są pierwsze, makieta pod nimi i nadal duża. */
.hero .hero-makieta-obraz { display: flex; justify-content: center; align-items: center; }
.hero .telefon { --szer: 300px; }
.hero .telefon-podpis { margin-top: 26px; }

/* Ekran makiety pokazuje trzy prawdziwe opowiadania, więc lista nie musi się już rozpychać. */
.ekran-lista { justify-content: flex-start; gap: 8px; }
.ekran-poz img { background: rgba(34, 50, 74, 0.06); }

/* Trzy kafelki opowiadań zamiast siatki zaślepek */
.odcinki.trzy { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 54rem; }
.odcinki.trzy .odc-t { font-size: 1.2rem; }
.odcinki.trzy .odc-s { text-transform: none; letter-spacing: 0.01em; font-size: 0.8125rem; }
.odcinki.trzy + .plany { margin-top: 18px; }

@media (max-width: 880px) {
  .hero .telefon { --szer: 286px; }
  .hero .hero-makieta-obraz { order: 2; margin-top: 6px; }
}
@media (max-width: 640px) {
  .odcinki.trzy { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .odcinki.trzy .odc { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 4px 14px; align-items: center; }
  .odcinki.trzy .odc-okl { grid-row: 1 / 3; }
  .odcinki.trzy .odc-s { margin-top: 0; }
  .hero .telefon { --szer: 268px; }
}

/* Ekran makiety ma teraz trzy pozycje, więc skracamy go, żeby nie zostawała pusta połowa. */
.hero .telefon-ekran { aspect-ratio: 9 / 16.2; }
.hero .ekran-lista { flex: 0 0 auto; padding-bottom: 14px; }

/* ═══════════ Wersja 11: ekran makiety jako trzy pełne kafle (16.09.2026) ═══════════
   Między górnym paskiem a paskiem odtwarzania są dokładnie trzy równe kafle.
   Obraz wypełnia cały kafel, a przyciemnienie jest tylko pod napisem, nie na całym obrazku. */

.hero .ekran-lista,
.ekran-lista {
  flex: 1; display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 8px; padding: 10px 12px 12px; margin: 0; list-style: none; overflow: hidden;
}
.ekran-poz {
  position: relative; display: block; overflow: hidden;
  border: 0; border-radius: 7px; padding: 0; background: #E9DCC6;
}
.ekran-poz img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; border-radius: 0;
}
.ekran-poz .opis {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; flex-direction: column; gap: 1px;
  padding: 20px 10px 8px;
  background: linear-gradient(to top, rgba(18, 27, 40, 0.88), rgba(18, 27, 40, 0.55) 45%, rgba(18, 27, 40, 0));
  color: var(--krem-tekst);
}
.ekran-poz .t { font-size: 0.84rem; line-height: 1.15; display: block; color: var(--krem-tekst); }
.ekran-poz .m { font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.03em; color: #E6D3AE; display: block; margin-top: 0; }

/* ═══════════ Wersja 13: odtwarzacz jako jeden ciemny klocek (16.09.2026) ═══════════
   Karta, lista i sterowanie na tym samym granacie, tekst kremowy. Spójne z mini-odtwarzaczem.
   Nic nie chowa się w trakcie grania: miejsce na komunikat i ikony jest zarezerwowane. */

.odtwarzacz {
  background: var(--atrament);
  border: 1px solid rgba(251, 246, 236, 0.14);
  color: var(--krem-tekst);
}
.odtwarzacz .teraz-gra { position: static; background: transparent; border-radius: 0; padding-bottom: 4px; }

/* komunikat ma zarezerwowane miejsce, żeby nic nie skakało po starcie */
.odtwarzacz .stan { min-height: 1.25em; }
.odtwarzacz .stan:empty { display: block; }

/* filtr na ciemnym tle */
.odtwarzacz .filtr-utworow button {
  color: rgba(251, 246, 236, 0.78);
  border-color: rgba(251, 246, 236, 0.32);
  background: transparent;
}
.odtwarzacz .filtr-utworow button:hover { color: var(--krem-tekst); border-color: var(--krem-tekst); }
.odtwarzacz .filtr-utworow button[aria-pressed="true"] {
  background: var(--krem-tekst); border-color: var(--krem-tekst); color: var(--atrament);
}

/* lista pozycji na tym samym granacie */
.odtwarzacz .utwory > li,
.odtwarzacz .utwory > li.biezacy { background: transparent; border: 0; }
.odtwarzacz .utwory > li + li { border-top: 1px solid rgba(251, 246, 236, 0.14); }
.odtwarzacz .utwor { border-radius: 4px; }
.odtwarzacz .utwor .tytul { color: rgba(251, 246, 236, 0.82); }
.odtwarzacz .utwor .opis,
.odtwarzacz .utwor .czas { color: rgba(230, 211, 174, 0.8); }
.odtwarzacz .utwor:hover .tytul { color: var(--krem-tekst); text-decoration-color: var(--zloto-jasne); }
.odtwarzacz .utwor .okladka { box-shadow: 0 0 0 1px rgba(251, 246, 236, 0.18); }

/* pozycja, która gra: jaśniejsze tło, złoty znacznik i pełny kontrast tytułu */
.odtwarzacz .utwory > li.biezacy {
  background: rgba(251, 246, 236, 0.09);
  border-radius: 5px;
  box-shadow: inset 3px 0 0 var(--zloto-jasne);
}
.odtwarzacz .utwory > li.biezacy + li { border-top-color: transparent; }
.odtwarzacz .utwory > li.biezacy .tytul { color: var(--krem-tekst); font-weight: 500; }
.odtwarzacz .utwory > li.biezacy .opis,
.odtwarzacz .utwory > li.biezacy .czas { color: #E6D3AE; }

/* pasek postępu: wyraźny uchwyt i wypełnienie */
.odtwarzacz .postep::-webkit-slider-runnable-track { height: 5px; background: linear-gradient(to right, var(--krem-tekst) var(--pct), rgba(251, 246, 236, 0.26) var(--pct)); }
.odtwarzacz .postep::-moz-range-track { height: 5px; background: rgba(251, 246, 236, 0.26); }
.odtwarzacz .postep::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -7.5px; background: var(--krem-tekst); box-shadow: 0 0 0 3px rgba(34, 50, 74, 0.9), 0 1px 4px rgba(0, 0, 0, 0.35); }
.odtwarzacz .postep::-moz-range-thumb { width: 20px; height: 20px; background: var(--krem-tekst); box-shadow: 0 0 0 3px rgba(34, 50, 74, 0.9); }
.odtwarzacz .czasy { color: #E6D3AE; }

/* focus i najechanie widoczne na granacie */
.odtwarzacz :focus-visible { outline: 3px solid var(--krem-tekst); outline-offset: 2px; }
.odtwarzacz .przycisk-ikona { border-color: rgba(251, 246, 236, 0.4); color: var(--krem-tekst); }
.odtwarzacz .przycisk-ikona:hover { background: rgba(251, 246, 236, 0.14); border-color: var(--krem-tekst); }

/* sekcja o muzyce: ciemny klocek jest świadomym kontrastem, więc ma trochę powietrza */
#muzyka .odtwarzacz { margin-top: clamp(24px, 3.5vw, 40px); }

/* ═══════════ Wersja 15: jedenaście miejsc w kolekcji (16.09.2026) ═══════════
   Trzy historie z obrazkiem i osiem bezimiennych miejsc, żeby było widać rytm i skalę:
   „Tabliczka” plus dziesięć opowiadań z kolekcji. Tytułów nie wymyślamy. */

.odcinki.jedenascie { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; max-width: 62rem; align-items: start; }
.odcinki.jedenascie .odc { padding: 9px; gap: 7px; }
.odcinki.jedenascie .odc-t { font-size: 1.05rem; }
.odcinki.jedenascie .odc-s { font-size: 0.75rem; text-transform: none; letter-spacing: 0.01em; }
.odcinki.jedenascie .odc.pusty { background: rgba(255, 252, 245, 0.35); border-style: dashed; }
.odcinki.jedenascie .odc.pusty .odc-okl { aspect-ratio: 16 / 9; }
.odcinki.jedenascie .odc.pusty .odc-okl::after { width: 26px; height: 26px; }

@media (max-width: 1080px) { .odcinki.jedenascie { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .odcinki.jedenascie { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) {
  .odcinki.jedenascie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .odcinki.jedenascie .odc { display: flex; flex-direction: column; }
  .odcinki.jedenascie .odc-okl { grid-row: auto; }
}

/* ═══════════ Wersja 16: odtwarzacz rozwijany w górę (16.09.2026) ═══════════
   To ten sam jeden odtwarzacz i ta sama lista. W widoku pełnym zmienia się tylko pozycjonowanie,
   więc element <audio> nie jest przenoszony w drzewie i granie nie urywa się ani na chwilę. */

.odtwarzacz-miejsce { position: relative; }
.mini-uchwyt {
  grid-area: uchwyt; width: 38px; height: 38px; flex: none; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--krem-tekst); border: 0; cursor: pointer; border-radius: 50%;
}
.mini-uchwyt:hover { background: rgba(251, 246, 236, 0.14); }
.mini-uchwyt svg { width: 20px; height: 20px; }
.mini-wnetrze {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "uchwyt info przyciski zamknij" "postep postep postep postep";
}

/* pasek na dole jest uchwytem: kursor i zapas miejsca pod gest */
.mini { touch-action: none; }
.mini-info { cursor: pointer; }

/* ——— widok pełny ——— */
.pelny-gora { display: flex; align-items: center; justify-content: center; position: relative; padding: 10px 0 2px; }
.pelny-chwyt { width: 44px; height: 4px; border-radius: 999px; background: rgba(251, 246, 236, 0.45); }
.pelny-zamknij {
  position: absolute; right: 4px; top: 4px; width: 40px; height: 40px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--krem-tekst); border: 0; cursor: pointer; border-radius: 50%;
}
.pelny-zamknij:hover { background: rgba(251, 246, 236, 0.14); }
.pelny-zamknij svg { width: 22px; height: 22px; }

.odtwarzacz.pelny {
  position: fixed; left: 0; right: 0; bottom: 0; top: 0; z-index: 60;
  margin: 0; max-width: none; border-radius: 0; border: 0;
  display: flex; flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-top: env(safe-area-inset-top, 0px);
  transform: translateY(0);
  transition: transform .28s ease;
  overscroll-behavior: contain;
}
.odtwarzacz.pelny .teraz-gra { padding-top: 6px; }
.odtwarzacz.pelny .okladka-duza { width: 132px; height: 132px; }
.odtwarzacz.pelny .teraz-naglowek { grid-template-columns: 132px minmax(0, 1fr); }
.odtwarzacz.pelny .utwory { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 24px; }
.odtwarzacz.pelny .filtr-utworow { position: sticky; top: 0; z-index: 1; background: var(--atrament); }
body.odtwarzacz-otwarty { overflow: hidden; }
body.odtwarzacz-otwarty .mini { display: none; }
body.odtwarzacz-otwarty .rozdzialy { z-index: 10; }

@media (min-width: 881px) {
  /* na komputerze panel wjeżdża od dołu, wysoki, ale nie na siłę pełnoekranowy */
  .odtwarzacz.pelny { top: auto; height: min(88vh, 860px); max-width: 42rem; left: auto; right: clamp(16px, 4vw, 56px); border-radius: 6px 6px 0 0; box-shadow: 0 -18px 60px rgba(34, 50, 74, 0.34); }
}
@media (prefers-reduced-motion: reduce) {
  .odtwarzacz.pelny { transition: none; }
}

/* Panel pełny: bez martwego pasa między pętlą a filtrem. */
.odtwarzacz.pelny .teraz-gra { gap: 12px; padding-bottom: 0; }
.odtwarzacz.pelny .stan { min-height: 0; }
.odtwarzacz.pelny .stan:empty { display: none; }
.odtwarzacz.pelny .filtr-utworow { padding-top: 10px; }

/* ——— ciemna stopka i obraz pod nią (zlewają się krawędzią) ——— */
.pas-ciemny { background: var(--atrament); color: var(--krem-tekst); }
.pas-ciemny .stopka { border-top-color: rgba(251, 246, 236, 0.16); }
.pas-ciemny .stopka .znak { color: var(--krem-tekst); }
.pas-ciemny .stopka p { color: rgba(251, 246, 236, 0.72); }
.pas-ciemny .stopka a { color: var(--zloto-jasne); }
.pas-ciemny .stopka a:hover { color: var(--krem-tekst); }
.rozdzial-obraz.pod-stopka { position: relative; margin: 0; }
.rozdzial-obraz.pod-stopka img { display: block; width: 100%; height: auto; }
.pas-ciemny { position: relative; padding-bottom: clamp(40px, 7vw, 90px); }
/* Przejście rysujemy w stopce, tuż nad obrazem. Obraz zostaje nietknięty. */
.pas-ciemny::after {
  content: ""; position: absolute; inset: auto 0 0 0; pointer-events: none;
  height: clamp(40px, 7vw, 90px);
  background: linear-gradient(to bottom, var(--atrament) 0%, #243650 100%);
}
.przycisk-lista { display: inline-block; text-align: center; }
.lista-wstep { font-size: var(--t-small); color: var(--kurz); margin-bottom: 14px; }

/* ——— zdjęcie autora ——— */
.foto-autora { margin: clamp(20px, 3vw, 32px) 0 0; max-width: 26rem; }
.foto-autora img { width: 100%; height: auto; display: block; border-radius: 2px; }
@media (min-width: 900px) {
  .foto-autora { float: right; margin-left: clamp(24px, 4vw, 48px); max-width: 22rem; }
}

/* ——— kolekcja: długość przy karcie i pudełko z płytami ——— */
.odc-czas { font-family: var(--sans); font-size: 0.78rem; color: var(--kurz); margin-top: -4px; font-variant-numeric: tabular-nums; }

.paczka {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(28px, 5vw, 64px); align-items: center;
  background: var(--atrament); color: var(--krem-tekst); border-radius: 4px; padding: clamp(24px, 4.5vw, 56px);
}
.paczka .eyebrow { color: #E6D3AE; }
.paczka h3 { font-size: var(--t-h3); line-height: 1.15; margin: 10px 0 18px; font-weight: 400; }

.paczka-scena { padding: 6% 4% 10%; }
.paczka-stos { position: relative; aspect-ratio: 1.15; }
.plyta {
  --krok: 5.2%;
  position: absolute; width: 50%; aspect-ratio: 1; left: calc(var(--i) * var(--krok)); top: calc((9 - var(--i)) * 2.2%);
  border-radius: 3px; overflow: visible; box-shadow: -6px 8px 18px rgba(0, 0, 0, 0.35);
  transform: rotate(calc((var(--i) - 4.5) * 0.6deg));
}
.plyta img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 3px; border: 1px solid rgba(251, 246, 236, 0.35); }
/* Płyta wysunięta z okładki: widać ją tylko przy ostatniej, najbliższej okładce. */
.plyta:last-of-type::before {
  content: ""; position: absolute; z-index: 0; width: 92%; aspect-ratio: 1; top: 4%; right: -34%; border-radius: 50%;
  background:
    radial-gradient(circle, #22324A 0 7%, rgba(251,246,236,0.9) 7.5% 9%, transparent 9.5%),
    conic-gradient(from 20deg, #d9d4ca, #f7f3ea, #bfb6a6, #efe8da, #cfc6b5, #f7f3ea, #d9d4ca);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}
.paczka-etykieta {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 2px; padding: 8px 10px;
  background: rgba(251, 246, 236, 0.94); color: var(--atrament); border-radius: 0 0 3px 3px;
}
.pe-marka { font-family: var(--serif); font-size: clamp(1.05rem, 1.8vw, 1.35rem); line-height: 1.1; }
.pe-seria { font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--zloto); }

.paczka-liczby { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 22px; }
.paczka-liczby div { border-top: 1px solid rgba(251, 246, 236, 0.22); padding-top: 10px; }
.paczka-liczby dt { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.07em; text-transform: uppercase; color: rgba(251, 246, 236, 0.66); order: 2; }
.paczka-liczby dd { margin: 0 0 2px; font-size: clamp(1.25rem, 2vw, 1.65rem); line-height: 1.1; color: #F3DFB6; white-space: nowrap; }
.paczka-liczby div { display: flex; flex-direction: column-reverse; }

.paczka-lista { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 24px; font-size: var(--t-small); }
.paczka-lista li { display: flex; gap: 10px; align-items: baseline; padding: 5px 0; border-bottom: 1px dotted rgba(251, 246, 236, 0.2); break-inside: avoid; }
.paczka-lista .nr { font-family: var(--sans); font-size: 0.72rem; color: rgba(251, 246, 236, 0.5); font-variant-numeric: tabular-nums; }
.paczka-lista .tt { flex: 1; min-width: 0; }
.paczka-lista .cz { font-family: var(--sans); font-size: 0.8rem; color: rgba(251, 246, 236, 0.7); font-variant-numeric: tabular-nums; }
.paczka-gratis { margin-top: 18px; font-size: var(--t-small); color: rgba(251, 246, 236, 0.78); }

@media (max-width: 880px) {
  .paczka { grid-template-columns: minmax(0, 1fr); }
  .paczka-scena { padding: 2% 14% 8% 2%; }
}
@media (max-width: 640px) {
  .paczka-lista { columns: 1; }
  .paczka-liczby { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .paczka-liczby div { flex-direction: row-reverse; justify-content: space-between; align-items: baseline; padding: 8px 0; }
  .paczka-liczby dd { font-size: 1.35rem; margin: 0; }
  .paczka-scena { padding: 2% 18% 8% 0; }
}

/* ═══════════ Wersja 7: start na górze i zapis na stronie (19.09.2026) ═══════════ */

/* Blok startu „Tabliczki” w otwarciu (/ i /manifest/): jeden dotyk, ten sam odtwarzacz. */
.start-historii {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px;
  width: 100%; max-width: 26rem; margin-top: 18px; padding: 10px 18px 12px 10px;
  text-align: left; cursor: pointer;
  color: var(--krem-tekst); background: var(--atrament);
  border: 1px solid var(--atrament); border-radius: 14px;
  box-shadow: 0 10px 28px rgba(34, 50, 74, 0.22);
  transition: background-color .2s, transform .2s;
}
.start-historii:hover { background: #2E4263; }
.start-historii:active { transform: scale(0.99); }
.start-historii:focus-visible { outline: 3px solid var(--zloto-jasne); outline-offset: 3px; }
.start-okladka { position: relative; width: 64px; height: 64px; flex: none; }
.start-okladka img { display: block; width: 64px; height: 64px; object-fit: cover; border-radius: 9px; }
.start-ikona {
  position: absolute; inset: 0; margin: auto; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(251, 246, 236, 0.94); color: var(--atrament);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.start-ikona svg { width: 18px; height: 18px; }
.start-historii .ikona-pauza, .pasek-sluchaj .ikona-pauza { display: none; }
.start-historii.gra .ikona-graj, .pasek-sluchaj.gra .ikona-graj { display: none; }
.start-historii.gra .ikona-pauza, .pasek-sluchaj.gra .ikona-pauza { display: block; }
.start-tekst { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.start-tytul { font-family: var(--serif); font-size: 1.4rem; line-height: 1.15; }
.start-meta { font-family: var(--sans); font-size: 0.875rem; letter-spacing: 0.02em; color: #E6D3AE; }
.start-postep { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(251, 246, 236, 0.18); --pct: 0%; }
.start-postep::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--pct); background: #E6D3AE; transition: width .3s linear; }
.hero .start-historii + .lead { margin-top: 14px; }
@media (max-width: 640px) {
  .start-historii { max-width: none; margin-top: 12px; }
  .start-tytul { font-size: 1.3rem; }
}

/* Formularz zapisu: po udanym zapisie zostaje tylko komunikat z książką. */
.formularz-pola { display: flex; flex-direction: column; gap: 18px; }
.formularz.zapisano .formularz-pola { display: none; }
.formularz .komunikaty:empty { display: none; }
.komunikat p + .przycisk, .komunikat .przycisk { margin-top: 12px; }
.komunikat .przycisk { color: var(--krem-tekst); }
.komunikat .przycisk:hover { color: var(--atrament); }
.formularz button[type="submit"] { align-self: flex-start; }
.formularz-kompakt { padding: 0; background: transparent; border: 0; gap: 12px; }
.formularz-kompakt .formularz-pola { gap: 12px; }
.formularz-kompakt .pole label { font-size: 0.9375rem; }
.formularz-kompakt .zgoda label { font-size: 0.875rem; line-height: 1.45; font-family: var(--sans); color: var(--atrament-2); }
.formularz-kompakt button[type="submit"] { align-self: stretch; }
.formularz-kompakt .komunikat { font-size: 1rem; }
@media (max-width: 640px) {
  .formularz button[type="submit"] { align-self: stretch; }
}

/* Karta zapisu: po historii, po pauzie, arkusz z paska. W odtwarzaczu albo przyklejona do dołu ekranu. */
.zapis-karta {
  position: relative; margin: 14px; padding: 18px 18px 16px;
  background: var(--papier); color: var(--atrament);
  border: 1px solid rgba(168, 134, 79, 0.45); border-radius: 14px;
  box-shadow: 0 10px 30px rgba(34, 50, 74, 0.14);
  font-family: var(--serif); text-align: left;
  animation: zapis-wjazd .3s ease-out;
}
.gr .zapis-karta { margin: 16px 0 0; }
.zapis-karta.plywajaca {
  position: fixed; z-index: 60; left: 12px; right: 12px; margin: 0; bottom: 12px;
  max-width: 30rem; margin-inline: auto;
  max-height: calc(100vh - 90px); max-height: calc(100dvh - 90px); overflow-y: auto; overscroll-behavior: contain;
  box-shadow: 0 18px 50px rgba(34, 50, 74, 0.28), 0 2px 6px rgba(34, 50, 74, 0.08);
}
@keyframes zapis-wjazd { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.zapis-karta-tytul { font-size: 1.35rem; line-height: 1.2; padding-right: 36px; }
.zapis-karta-tekst { margin-top: 6px; font-family: var(--sans); font-size: 0.9375rem; line-height: 1.45; color: var(--atrament-2); }
.zapis-karta-wezwania { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 14px; }
.zapis-karta-wezwania .przycisk { padding: 10px 22px; min-height: 44px; }
.zapis-nie-teraz { background: none; border: 0; padding: 8px 2px; cursor: pointer; }
.zapis-karta .formularz { margin-top: 14px; }
.zapis-karta-zamknij {
  position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; color: var(--atrament); cursor: pointer;
}
.zapis-karta-zamknij:hover { background: rgba(34, 50, 74, 0.07); }
.zapis-karta-zamknij svg { width: 20px; height: 20px; }

/* Pasek na dole ekranu telefonu: Słuchaj i Zapisz się. Tylko poniżej 760 px. */
.pasek-zapisu {
  position: fixed; z-index: 45; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: center;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(251, 246, 236, 0.97); border-top: 1px solid rgba(168, 134, 79, 0.45);
  box-shadow: 0 -8px 24px rgba(34, 50, 74, 0.14);
  font-family: var(--sans);
  animation: zapis-wjazd .3s ease-out;
}
.pasek-zapisu.nad-mini { padding-bottom: 10px; box-shadow: none; }
.pasek-zapisu button { font: inherit; font-size: 1rem; font-weight: 500; min-height: 46px; border-radius: 999px; cursor: pointer; }
.pasek-sluchaj { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: transparent; color: var(--atrament); border: 1px solid var(--atrament); }
.pasek-sluchaj svg { width: 16px; height: 16px; }
.pasek-zapisz { background: var(--atrament); color: var(--krem-tekst); border: 1px solid var(--atrament); }
.pasek-sluchaj[hidden] + .pasek-zapisz { grid-column: 1 / 3; }
.pasek-zamknij { width: 40px; min-height: 40px !important; height: 40px; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--atrament); }
.pasek-zamknij svg { width: 18px; height: 18px; }
body.pasek-zapisu-widoczny { padding-bottom: calc(var(--pasek-h, 68px) + 8px); }
body.mini-widoczny.pasek-zapisu-widoczny { padding-bottom: calc(var(--mini-h, 84px) + var(--pasek-h, 68px) + 12px); }
@media (min-width: 760px) { .pasek-zapisu { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .zapis-karta, .pasek-zapisu { animation: none; } }