/* ==========================================================================
   Ten Tydzień — baza layoutu, WSPÓLNA dla wszystkich miast.

   Kierunek (A-128, 06.09.2026): strona jest trzecim nośnikiem tego samego systemu
   wizualnego, co reklamy i grafiki postów — papier i tusz z sitodruku, kobalt jako
   druga powierzchnia, cynober jako jedyny akcent, panorama miasta w kresce.
   Człowiek klika reklamę z ratuszem i cynobrową pigułką „Zapisz się", więc na stronie
   ma zastać ratusz i tę samą pigułkę, a nie formularz urzędowy.

   Zero zapytań do obcych domen: krój (Archivo) leży w `assets/fonty/` na własnym
   serwerze (pochodzenie i licencja: `assets/fonty/ZRODLO.md`), więc strona nadal
   otwiera się bez połączenia z kimkolwiek i bez zgody na cookies. `e4f3cd09`
   w adresach niżej podstawia build — to JEDYNE miejsce z adresem pliku fontu, żeby nie
   dało się go rozjechać z drugim (przy `preload` się rozjechał i każdy plik leciał dwa razy).

   KOLORY SĄ W MOTYWIE MIASTA (public/assets/motyw-<slug>.css, generowany
   z content/miasta.config.js) i wczytują się PO tym pliku. Tutaj są wyłącznie
   awaryjne wartości neutralne — gdyby motyw nie doszedł, strona ma być czytelna,
   a nie czarna na czarnym. Nie dopisuj tu barw miasta.
   ========================================================================== */

/* Archivo (Omnibus-Type, SIL OFL 1.1) — po jednym pliku WARIABILNYM na podzbiór znaków,
   czyli wagi 400–800 z jednego pobrania. Polski tekst zawsze potrzebuje obu podzbiorów:
   „ą/ć/ę/ł/ń/ś/ź/ż" siedzą w latin-ext, reszta w latin. `swap` — tekst widać od pierwszej
   klatki w foncie systemowym, a krój docelowy wchodzi, gdy dojdzie. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonty/archivo-latin-ext.woff2?v=e4f3cd09") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonty/archivo-latin.woff2?v=e4f3cd09") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  /* --- awaryjna paleta neutralna (nadpisywana przez motyw miasta) --- */
  --papier: #eeebe5;
  --papier-glebszy: #e2ded6;
  --karta: #f8f6f1;
  --atrament: #16181a;
  --atrament-cichy: #4c5157;
  --linia: #cbc7bf;
  --linia-mocna: #83898f;
  --placeholder: #5d6369;
  --akcent: #2a2d31;
  --akcent-tekst: #2a2d31;
  --kontrapunkt: #6b2018;
  --kontrapunkt-tekst: #6b2018;
  --pole-przy-bledzie: #f6f1f0;
  --wzor-tla: none;
  --wzor-rozmiar: auto;
  --panorama-tla: none;

  /* Barwa kafelka na stronie wyboru miasta. Domyślnie farba bieżącego motywu;
     motyw roota (motyw-root.css) nadpisuje ją per miasto na `.kafelek--<slug>`,
     żeby każdy kafelek niósł barwę swojego wydania. */
  --kafelek-akcent: var(--akcent);
  --kafelek-akcent-tekst: var(--akcent-tekst);

  --rytm: 1rem;
  /* Dwa promienie, nie sześć: karta i pole mają 14 px, a wszystko, co jest wezwaniem
     do kliknięcia, jest pigułką — to cytat z kreacji, gdzie „Zapisz się" leży
     w cynobrowej pigułce. */
  --promien: 14px;
  --promien-pigulka: 999px;
  --kolumna: 76rem;

  /* Jedna rodzina, wagi robią różnicę (A-128). `--font-display` celowo wskazuje na
     `--font-tekst`: strona produktu podmienia tylko ten drugi i automatycznie dostaje
     swój krój także w nagłówkach, bez dopisywania czegokolwiek u siebie. */
  --font-tekst: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-tekst);
  --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Wysokość widocznego banera zgody (A-078) — domyślnie 0, `assets/zgoda-cookies.js`
     podbija ją na `<html>` tylko wtedy, gdy baner jest faktycznie pokazany. Deklaracja
     bazowa (nie per-motyw miasta), bo to element layoutu, nie farby marki. */
  --tt-zgoda-wysokosc: 0px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--papier);
  color: var(--atrament);
  font-family: var(--font-tekst);
  font-size: 1rem;
  line-height: 1.6;
  /* Rezerwa pod baner zgody (A-078), gdy jest widoczny — `--tt-zgoda-wysokosc`
     ustawia `assets/zgoda-cookies.js`, domyślnie `0px` (baner ukryty/nieskonfigurowany).
     Treść w normalnym przepływie (np. formularz zapisu) nie chowa się pod fixed banerem. */
  padding-bottom: var(--tt-zgoda-wysokosc, 0px);
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-wrap: balance;
}

p {
  margin: 0;
}

a {
  color: var(--atrament);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--akcent-tekst);
}

:focus-visible {
  outline: 3px solid var(--akcent);
  outline-offset: 3px;
  border-radius: 1px;
}

.pomin {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--atrament);
  color: var(--papier);
  padding: 0.75rem 1rem;
  z-index: 20;
}

.pomin:focus {
  left: 0.5rem;
  top: 0.5rem;
}

/* ------------------------------------------------------------------ szczyt */

.szczyt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 1.15rem;
  border-bottom: 1px solid var(--linia);
  background: var(--papier);
}

.marka {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 44px;
  text-decoration: none;
  color: var(--atrament);
}

/* Płytka ze znakiem: znak w czarnym zaokrąglonym kwadracie, jak w rogu reklamy. Kwadrat
   rysuje CSS, nie plik SVG, więc ten sam rysunek służy w stopce samym konturem. */
.marka__plytka {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--atrament);
  color: var(--papier);
}

.marka__plytka .maskotka {
  width: 38px;
}

/* Znak zastępczy dla miasta bez maskotki — kwadrat w farbie miasta. */
.marka__znak {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  background: var(--akcent);
  border-radius: 3px;
}

/* Na telefonie nazwa łamie się na dwa wiersze (obok stoi jeszcze pigułka zapisu),
   od 34em idzie jedną linią — tak jak w nagłówku kreacji. */
.marka__nazwa {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  max-width: 7em;
}

.marka:hover {
  color: var(--atrament);
}

/* Pigułka zapisu w nagłówku: ten sam kształt i ta sama farba, co „Zapisz się"
   na kreacji. Jedno wezwanie w nagłówku, kotwica do formularza na tej samej stronie. */
.szczyt__zapis {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.55rem 1.15rem;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--karta);
  background: var(--kontrapunkt-tekst);
  border-radius: var(--promien-pigulka);
  text-decoration: none;
  transition: background-color 0.12s ease;
}

.szczyt__zapis:hover,
.szczyt__zapis:focus-visible {
  color: var(--karta);
  background: var(--atrament);
}

/* ---------------------------------------------------------------- maskotka
   Rysunek miasta w nagłówku (dla Poznania: koziołki). Wstawiany inline przez build,
   więc dziedziczy kolor i daje się animować. Szerokość dobrana tak, żeby kreska
   była czytelna także na 360 px. */

.maskotka {
  width: 68px;
  height: auto;
  flex: 0 0 auto;
  color: currentColor;
  overflow: visible;
}

/* Bodnięcie: jednorazowa nagroda po udanym zapisie. Klasę `jest-bodniecie`
   dokłada assets/zapis.js. Używamy właściwości `translate`, a nie `transform`,
   bo `transform` na połówkach maskotki jest już zajęty przez lustrzane odbicie. */
.maskotka--bodanie.jest-bodniecie .maskotka__lewy {
  animation: bodnij-w-prawo 0.42s ease-in-out 2;
}

.maskotka--bodanie.jest-bodniecie .maskotka__prawy {
  animation: bodnij-w-lewo 0.42s ease-in-out 2;
}

@keyframes bodnij-w-prawo {
  0%,
  100% {
    translate: 0;
  }
  45% {
    translate: 7px;
  }
}

@keyframes bodnij-w-lewo {
  0%,
  100% {
    translate: 0;
  }
  45% {
    translate: -7px;
  }
}

/* ---------------------------------------------------------------- sygnatura
   Pasek siedmiu dni PN-ND usunięty w A-104 (wariant A z K-013): pomiar A-101
   pokazał dekorację bez informacji na najcenniejszym miejscu strony (nad `h1`),
   a na 768 px czytał się jak zepsuty pasek nawigacji. Zastąpił go jeden wiersz
   faktów pod leadem — `.hero__rytm` niżej. */

/* -------------------------------------------------------------------- hero */

.hero {
  padding: 1.5rem 1.15rem 2rem;
  max-width: var(--kolumna);
  margin: 0 auto;
}

/* NADLINIA — jeden styl na całą stronę miasta (A-104): mono, wersaliki, kobalt.
   Tutaj: fraza lokalna nad nagłówkiem, jedno z trzech miejsc na gwarę. */
.hero__nadtytul {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--akcent-tekst);
  margin-bottom: 0.6rem;
}

/* Nagłówek jak w papierowej karcie z reklamy: gruby, ciasny, wiersze blisko siebie. */
.hero__h1 {
  font-size: clamp(2.25rem, 9vw, 2.75rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin-bottom: 0.85rem;
}

.hero__lead {
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--atrament-cichy);
  max-width: 34rem;
  margin-bottom: 0.85rem;
}

/* Wiersz faktów: rytm wysyłki i okno tygodnia. */
.hero__rytm {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--atrament-cichy);
  margin-bottom: 1.25rem;
}

/* ---------------------------------------------------------------- panorama
   Element sygnaturowy (A-128): kreska miasta na całą szerokość okna, tuż pod hero.
   Kadr ma stałą wysokość, a `object-fit: cover` z pozycją po prawej przycina przy wąskim
   oknie PUSTY papier po lewej, nie zabudowę — na 390 px widać całą sylwetkę bez
   zmniejszania kreski i bez przewijania w poziomie. */

.panorama {
  background: var(--papier);
  overflow: hidden;
}

.panorama__rysunek {
  display: block;
  width: 100%;
  height: clamp(112px, 12.8vw, 200px);
  object-fit: cover;
  object-position: 100% 100%;
}

/* Jedno rysowanie od lewej do prawej, raz, po wejściu na stronę. Poza tym strona
   nie rusza się wcale — spec A-128: „Jedno wejście. Nic więcej". */
@media (prefers-reduced-motion: no-preference) {
  .panorama__rysunek {
    animation: panorama-rysuj 900ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }

  @keyframes panorama-rysuj {
    from {
      clip-path: inset(0 100% 0 0);
    }
    to {
      clip-path: inset(0 0 0 0);
    }
  }
}

/* ------------------------------------------------------------------ bilet */
/* Karta zapisu: jedyny obiekt na stronie z ciężką ramką tuszem — dokładnie tak jak
   papierowa karta z nagłówkiem na kreacji. Bez cienia: sitodruk nie ma cieni. */

.bilet {
  background: var(--karta);
  border: 2px solid var(--atrament);
  border-radius: var(--promien);
  padding: 1.25rem 1.15rem 1.35rem;
  max-width: 34rem;
  position: relative;
}

.bilet__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--akcent-tekst);
  font-weight: 700;
}

.bilet__perforacja {
  height: 1px;
  margin: 0.7rem -1.15rem 0.95rem;
  background: var(--linia);
}

.pole {
  margin-bottom: 1rem;
}

.pole__etykieta,
.segmenty__legenda {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
  margin-bottom: 0.45rem;
  padding: 0;
}

.pole__input {
  width: 100%;
  min-height: 54px;
  padding: 0.7rem 1rem;
  font-family: var(--font-tekst);
  font-size: 1rem;
  color: var(--atrament);
  background: var(--karta);
  border: 2px solid var(--atrament);
  border-radius: var(--promien);
}

.pole__input::placeholder {
  color: var(--placeholder);
}

.pole__input[aria-invalid="true"] {
  border-color: var(--kontrapunkt-tekst);
  background: var(--pole-przy-bledzie);
}

.pole__blad {
  margin-top: 0.4rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--kontrapunkt-tekst);
}

.pole__podpowiedz {
  margin-left: 0.35rem;
  font: inherit;
  color: var(--akcent-tekst);
  background: none;
  border: 0;
  padding: 0.25rem 0;
  min-height: 24px;
  text-decoration: underline;
  cursor: pointer;
}

/* ---------------------------------------------------------------- segmenty
   Trzy pigułki: niewybrana w obrysie tuszem, wybrana cynobrowa z białym tekstem. Farba
   koduje WYBÓR, nie profil — cynober ma na stronie jedno znaczenie: „to jest zapis". */

.segmenty {
  border: 0;
  margin: 0 0 1.1rem;
  padding: 0;
}

/* Do 34em pigułki stoją w kolumnie, jedna pod drugą, każda pełnej szerokości. Trzy
   obok siebie na 390 px zrobiłyby się kółkami (promień pigułki na prawie kwadratowym
   polu), a pigułka z kreacji jest szeroka i płaska — zmierzone w renderze na 390 px. */
.segmenty__lista {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

.segment {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.1rem 0.5rem;
  min-height: 52px;
  padding: 0.65rem 1.15rem;
  text-align: center;
  border: 2px solid var(--atrament);
  border-radius: var(--promien-pigulka);
  background: var(--karta);
  color: var(--atrament);
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.segment input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

/* Pasek koloru z poprzedniej wersji nie ma już roli — wybór niesie całe wypełnienie. */
.segment__pasek {
  display: none;
}

.segment__nazwa {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.15;
}

.segment__opis {
  font-size: 0.75rem;
  line-height: 1.25;
  color: var(--atrament-cichy);
}

.segment:has(input:checked),
.segment.jest-wybrany {
  background: var(--kontrapunkt-tekst);
  border-color: var(--kontrapunkt-tekst);
  color: var(--karta);
}

.segment:has(input:checked) .segment__opis,
.segment.jest-wybrany .segment__opis {
  color: var(--karta);
}

.segment:has(input:focus-visible) {
  outline: 3px solid var(--akcent);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------- zgoda */

.zgoda {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 0.35rem;
  align-items: start;
  margin: 0 0 0.9rem -0.6rem;
  cursor: pointer;
}

/* Pole 44x44 px (cel dotykowy z WCAG 2.2), a widoczny kwadrat rysujemy sami —
   inaczej albo checkbox jest mikroskopijny, albo brzydko rozdęty. */
.zgoda__box {
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 44px;
  margin: -0.55rem 0 0;
  padding: 0;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  cursor: pointer;
}

.zgoda__box::before {
  content: "";
  grid-area: 1 / 1;
  width: 24px;
  height: 24px;
  background: var(--karta);
  border: 2px solid var(--atrament);
  border-radius: 5px;
}

.zgoda__box:checked::before {
  background: var(--akcent);
  border-color: var(--akcent);
}

/* Ptaszek w kolorze karty — na kobalcie trzyma kontrast lepiej niż atrament. */
.zgoda__box:checked::after {
  content: "";
  grid-area: 1 / 1;
  width: 12px;
  height: 6px;
  margin-top: -3px;
  border-left: 3px solid var(--karta);
  border-bottom: 3px solid var(--karta);
  transform: rotate(-45deg);
}

.zgoda__tekst {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--atrament-cichy);
}

.zgoda--blad .zgoda__tekst {
  color: var(--kontrapunkt-tekst);
}

/* ------------------------------------------------------------------ pułapka */

.pulapka {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Przezroczystość nie dziedziczy się — bez tego same pola-pułapki nadal liczą się
   jako interaktywne elementy (audyt dostępności zgłaszał je jako cel dotykowy). */
.pulapka input,
.pulapka label {
  opacity: 0;
}

/* ---------------------------------------------------------------------- CTA
   Cynobrowa pigułka — ten sam kształt i ta sama farba, co „Zapisz się" na kreacji.
   Farba jest ciemniejszym wariantem cynobru (`--kontrapunkt-tekst`), bo biały tekst
   na jasnym cynobrze schodzi poniżej AA; dekoracyjny cynober zostaje w panoramie. */

.cta {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 0.9rem 1.25rem;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--karta);
  background: var(--kontrapunkt-tekst);
  border: 2px solid var(--kontrapunkt-tekst);
  border-radius: var(--promien-pigulka);
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.cta:hover {
  background: var(--atrament);
  border-color: var(--atrament);
}

.cta:active {
  background: var(--atrament);
  border-color: var(--atrament);
}

.cta[disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* ------------------------------------------------------------ mikrokopia */

.bilet__stan {
  margin-top: 0.85rem;
  padding: 0.7rem 0.8rem;
  font-size: 0.875rem;
  line-height: 1.45;
  font-weight: 600;
  border-left: 4px solid var(--kontrapunkt-tekst);
  background: var(--pole-przy-bledzie);
  color: var(--kontrapunkt-tekst);
}

.bilet__mikro {
  margin-top: 0.9rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--atrament-cichy);
}

.bilet__mikro--uwaga {
  border-left: 4px solid var(--akcent);
  padding-left: 0.65rem;
}

.rodo {
  margin-top: 0.8rem;
  border-top: 1px solid var(--linia);
  padding-top: 0.6rem;
}

.rodo__summary {
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--atrament-cichy);
  cursor: pointer;
  min-height: 44px;
  padding: 0.5rem 0;
}

.rodo__tresc {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--atrament-cichy);
}

/* ------------------------------------------------------------------- wynik */

.wynik {
  max-width: 34rem;
  background: var(--karta);
  border: 2px solid var(--atrament);
  border-radius: var(--promien);
  padding: 1.5rem 1.25rem 1.6rem;
}

.wynik__ikona {
  width: 34px;
  height: 34px;
  margin-bottom: 0.85rem;
  border-radius: 8px;
  background: var(--akcent);
}

.wynik--blad .wynik__ikona {
  background: var(--kontrapunkt-tekst);
}

.wynik__tytul {
  font-size: 1.5rem;
  margin-bottom: 0.55rem;
}

.wynik__tresc {
  font-size: 1rem;
  line-height: 1.55;
}

.wynik__stopka {
  margin-top: 0.7rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--atrament-cichy);
}

.wynik__poczta {
  display: inline-block;
  margin-top: 1rem;
  min-height: 48px;
  padding: 0.7rem 1.4rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--karta);
  background: var(--atrament);
  border: 2px solid var(--atrament);
  border-radius: var(--promien-pigulka);
  text-decoration: none;
}

.wynik__poczta[hidden] {
  display: none;
}

.wynik__ponow {
  margin-top: 1rem;
  min-height: 48px;
  padding: 0.7rem 1.4rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--karta);
  background: var(--atrament);
  border: 2px solid var(--atrament);
  border-radius: var(--promien-pigulka);
  cursor: pointer;
}

/* ----------------------------------------------------------------- sekcje */

.sekcja {
  padding: 2rem 1.15rem;
  max-width: var(--kolumna);
  margin: 0 auto;
  border-top: 1px solid var(--linia);
}

/* Wzór lokalny pod sekcją „Co dostajesz”. Krycie siedzi w samym pliku SVG
   (6% dla Poznania), więc tło nie rusza kontrastu tekstu. */
.sekcja--korzysci {
  background-image: var(--wzor-tla);
  background-size: var(--wzor-rozmiar);
  background-repeat: repeat;
}

/* Nagłówek sekcji na stronach PRODUKTÓW (`/wysoki-sezon`, `/zareklamuj-sie`).
   Strona miasta używa od A-104 pary `.sekcja__nadlinia` + `.sekcja__naglowek`
   niżej — tam ten styl był przyczyną nr 1 wrażenia bałaganu (tytuł sekcji pięć
   razy drobniejszy od tytułu karty w jej środku, pomiar A-101). */
.sekcja__tytul {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--akcent-tekst);
  margin-bottom: 1rem;
}

/* ------------------------------------------ A-104 + A-128: pasy strony miasta
   Układ zostaje z wariantu A (A-101/A-104); od A-128 tło niesie KLASA sekcji, a nie
   jej pozycja. Parzystość odpada, bo pas z numerami (kobalt) wstrzykuje dopiero krok 2
   builda i istnieje tylko w mieście z opublikowanymi numerami — przy liczeniu pozycją
   ta sama sekcja miałaby w Poznaniu inne tło niż w Szczecinie. */
.strona-landing .sekcja {
  max-width: none;
  border-top: 0;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  background-color: var(--papier);
}

.sekcja__owijka {
  max-width: var(--kolumna);
  margin: 0 auto;
}

.strona-landing .sekcja--faq,
.strona-landing .sekcja--waitlista,
.strona-landing .sekcja--krzyzowka {
  background-color: var(--karta);
}

.strona-landing .sekcja--zglos {
  background-color: var(--papier-glebszy);
}

.sekcja__nadlinia {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--akcent-tekst);
  margin-bottom: 0.5rem;
}

.sekcja__naglowek {
  font-size: 1.75rem;
  line-height: 1.05;
  margin-bottom: 1.5rem;
}

.sekcja__lead {
  font-size: 1.0625rem;
  line-height: 1.5;
  max-width: 40rem;
  margin-bottom: 1.6rem;
}

.korzysci {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.75rem;
}

/* A-104: karta bez własnej ramki. Ciężka ramka 2 px zostaje WYŁĄCZNIE przy
   formularzu zapisu (`.bilet`) — jeden główny obiekt, jedna ramka. */
.korzysc {
  padding-top: 0;
}

/* Ikona w kresce nad tytułem (A-128) — ten sam zestaw dla każdego miasta,
   ta sama grubość kreski co panorama. Nie emoji i nie ikona z biblioteki. */
.korzysc__ikona {
  display: block;
  width: 32px;
  height: 32px;
  margin-bottom: 0.7rem;
  color: var(--atrament);
}

.korzysc__tytul {
  font-size: 1.25rem;
  line-height: 1.15;
  margin-bottom: 0.35rem;
}

.korzysc__opis {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--atrament-cichy);
}

.pytania {
  display: grid;
  gap: 1.25rem;
  max-width: 44rem;
}

/* A-104: FAQ strony miasta idzie na całą kolumnę treści (i na dwie kolumny
   od 60em — patrz breakpointy). */
.strona-landing .pytania {
  max-width: none;
  gap: 1.5rem;
}

.pytanie__tytul {
  font-size: 1.0625rem;
  margin-bottom: 0.3rem;
}

.pytanie__odpowiedz {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--atrament-cichy);
}

.strona-landing .pytanie__odpowiedz {
  font-size: 1rem;
}

.sekcja__powrot {
  margin-top: 1.75rem;
}

/* Wezwanie jako link. DWA warianty, bo na stronie są dwa różne cele: cynobrowa
   pigułka prowadzi do zapisu (jedyny cel, który liczymy), obrysowa prowadzi
   wszędzie indziej. Do A-104 oba wyglądały tak samo. */
.link-powrotny {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0.75rem 1.6rem;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--karta);
  background: var(--kontrapunkt-tekst);
  border: 2px solid var(--kontrapunkt-tekst);
  border-radius: var(--promien-pigulka);
  text-decoration: none;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.link-powrotny:hover,
.link-powrotny:focus-visible {
  color: var(--karta);
  background: var(--atrament);
  border-color: var(--atrament);
}

/* Wariant obrysowy: sekcja dla organizatorów. Jeden akcent = jeden cel. */
.zglos__akcja .link-powrotny {
  color: var(--atrament);
  background: transparent;
  border-color: var(--atrament);
}

.zglos__akcja .link-powrotny:hover,
.zglos__akcja .link-powrotny:focus-visible {
  color: var(--karta);
  background: var(--atrament);
}

/* ------------------------------------------- sekcja zapisu dodatkowego */

/* Waitlista (A-021). Formularz jest tym samym komponentem co zapis na newsletter
   (`.bilet`, `.wynik`), więc sekcja dokłada wyłącznie oprawę tekstową i siatkę —
   kontrast, cele dotykowe i stany błędów są już przetestowane na tamtym. */
.sekcja--waitlista {
  scroll-margin-top: 1rem;
}

.waitlista {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}

.waitlista__tytul {
  font-size: 1.5rem;
  line-height: 1.2;
  margin-bottom: 0.8rem;
  max-width: 32rem;
}

.waitlista__opis {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.1rem;
  max-width: 38rem;
}

.waitlista__cena {
  font-size: 1.125rem;
  line-height: 1.5;
  margin-bottom: 0.7rem;
}

.waitlista__cena strong {
  color: var(--akcent-tekst);
}

/* Early bird wyróżniony tak samo jak zapowiedź w sekcji zgłoszeń — jeden znak
   na całej stronie dla „to jest warunek, przeczytaj". */
.waitlista__early {
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background: var(--papier-glebszy);
  border-left: 4px solid var(--akcent);
  max-width: 38rem;
}

/* Uczciwość sprzedażowa: dopisek, że usługa jeszcze nie działa, ma być widoczny
   przy cenie, a nie schowany drobnym drukiem pod przyciskiem. */
.waitlista__uwaga {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--atrament-cichy);
  max-width: 38rem;
}

/* ------------------------------------------------------ sekcja zgłoszeń */

/* A-104: ramka przerywana zdjęta (`.zglos__ramka` → `.zglos`). Była szóstym
   sposobem rysowania krawędzi na jednej stronie i jedynym miejscem z linią
   przerywaną; sekcja jest teraz zwykłym pasem w rytmie reszty strony. */
.sekcja--zglos {
  scroll-margin-top: 1rem;
}

.zglos {
  display: grid;
  gap: 1rem;
  align-items: start;
}

.zglos__tytul {
  font-size: 1.25rem;
  line-height: 1.25;
  margin-bottom: 0.5rem;
}

.zglos__akapit {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--atrament-cichy);
  margin-bottom: 0.7rem;
}

.zglos__wkrotce {
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 1rem 0 0.2rem;
  padding: 0.75rem 1rem;
  background: var(--papier-glebszy);
  border-left: 4px solid var(--akcent);
}

.zglos__akcje {
  display: grid;
  justify-items: start;
}

.zglos__akcja {
  margin-top: 0;
}

.zglos__adres {
  margin-top: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--atrament-cichy);
}

/* ------------------------------------------------------------------ stopka */
/* Baza (dokumenty, ekrany po zapisie, strona wyboru miasta): jasna stopka z kreską
   u góry, bez zmian względem A-104. Wariant kobaltowy niżej dostają WYŁĄCZNIE strony
   wydania miasta — tam, gdzie system wizualny kreacji ma domykać stronę. */

.stopka {
  padding: 1.75rem 1.15rem 2.5rem;
  max-width: var(--kolumna);
  margin: 0 auto;
  border-top: 2px solid var(--atrament);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--atrament-cichy);
}

.stopka__opis {
  color: var(--atrament);
  font-weight: 600;
  margin-bottom: 0.35rem;
}

/* Fraza lokalna w stopce — trzecie i ostatnie miejsce na gwarę. */
.stopka__sygnatura {
  color: var(--akcent-tekst);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.stopka__linki {
  margin-top: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.stopka__linki a {
  display: inline-block;
  padding: 0.6rem 0;
  min-height: 44px;
  line-height: 1.9;
}

.stopka__kropka {
  color: var(--linia-mocna);
}

.stopka__znak {
  display: none;
}

/* ---- wariant kobaltowy: strona wydania i strona numeru (A-128) ----
   Kobalt zamyka stronę tą samą powierzchnią, na której jadą grafiki postów, a znak stoi
   w niej białym konturem. Zakres wąski (dwie klasy `body`), żeby nie ruszyć stopki stron
   produktów — mają własną paletę i własny arkusz. */

.strona-landing .stopka,
.strona-archiwum-numer .stopka {
  max-width: none;
  border-top: 0;
  padding: 2.25rem 1.15rem 2.75rem;
  background: var(--akcent);
  color: var(--karta);
}

.strona-landing .stopka > *,
.strona-archiwum-numer .stopka > * {
  max-width: var(--kolumna);
  margin-left: auto;
  margin-right: auto;
}

.strona-landing .stopka__znak,
.strona-archiwum-numer .stopka__znak {
  display: block;
  color: var(--karta);
  margin-bottom: 0.9rem;
}

.strona-landing .stopka__znak .maskotka,
.strona-archiwum-numer .stopka__znak .maskotka {
  width: 76px;
}

.strona-landing .stopka__opis,
.strona-archiwum-numer .stopka__opis {
  color: var(--karta);
  font-size: 1rem;
  font-weight: 700;
}

.strona-landing .stopka__sygnatura,
.strona-archiwum-numer .stopka__sygnatura,
.strona-landing .stopka__dane,
.strona-archiwum-numer .stopka__dane,
.strona-landing .stopka__wypis,
.strona-archiwum-numer .stopka__wypis {
  color: var(--karta);
  opacity: 0.9;
}

.strona-landing .stopka a,
.strona-archiwum-numer .stopka a,
.strona-landing .stopka a:hover,
.strona-archiwum-numer .stopka a:hover {
  color: var(--karta);
}

.strona-landing .stopka__kropka,
.strona-archiwum-numer .stopka__kropka {
  color: var(--karta);
  opacity: 0.6;
}

/* Focus na kobalcie: obrys w farbie karty — kobaltowy obrys na kobalcie jest niewidoczny. */
.strona-landing .stopka :focus-visible,
.strona-archiwum-numer .stopka :focus-visible,
.sekcja--ostatnie-numery :focus-visible {
  outline-color: var(--karta);
}

/* ----------------------------------------------- strona główna: wybór miasta
   Root nie jest wydaniem miasta: tło i typografia są neutralne (motyw-root.css),
   a barwę wnosi dopiero kafelek konkretnego wydania. Siatka jest `auto-fit`,
   więc trzecie i czwarte miasto układa się samo — bez dopisywania breakpointów. */

.wybor {
  max-width: 62rem;
  margin: 0 auto;
  padding: 2rem 1.15rem 2.5rem;
}

.wybor__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--akcent-tekst);
  margin-bottom: 0.8rem;
}

.wybor__h1 {
  font-size: clamp(1.75rem, 7.4vw, 2.5rem);
  margin-bottom: 0.85rem;
}

.wybor__lead {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--atrament-cichy);
  max-width: 40rem;
  margin-bottom: 2rem;
}

.wybor__naglowek {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--atrament);
  padding-top: 1rem;
  border-top: 2px solid var(--atrament);
  margin-bottom: 1rem;
}

.wybor__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

/* ------------------------------------------------------------------ kafelek */

.kafelek {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  height: 100%;
  min-height: 11rem;
  padding: 1.1rem 1.15rem 1.2rem;
  background: var(--karta);
  border: 2px solid var(--atrament);
  border-radius: var(--promien);
  box-shadow: 6px 6px 0 var(--kafelek-akcent);
  color: var(--atrament);
  text-decoration: none;
  transition: box-shadow 0.12s ease, transform 0.12s ease;
}

.kafelek:hover {
  color: var(--atrament);
  box-shadow: 3px 3px 0 var(--kafelek-akcent);
  transform: translate(2px, 2px);
}

.kafelek:active {
  box-shadow: 0 0 0 var(--kafelek-akcent);
  transform: translate(5px, 5px);
}

/* Maskotka wydania: znak rozpoznawczy miasta, w jego własnej farbie. */
.kafelek__znak {
  width: 62px;
  height: auto;
  margin-bottom: 0.35rem;
  color: var(--kafelek-akcent-tekst);
  overflow: visible;
}

.kafelek__miasto {
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.kafelek__opis {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--atrament-cichy);
}

/* Wezwanie na dole kafelka — `margin-top: auto` wyrównuje je między kafelkami
   o różnej długości opisu. */
.kafelek__akcja {
  margin-top: auto;
  padding-top: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kafelek-akcent-tekst);
}

.kafelek:hover .kafelek__strzalka {
  translate: 3px;
}

.kafelek__strzalka {
  transition: translate 0.12s ease;
}

/* Wydanie bez otwartych zapisów: kafelek zostaje klikalny (strona miasta tłumaczy,
   co się dzieje), ale jest wyciszony i wyraźnie opisany etykietą. */
.kafelek--wkrotce {
  border-style: dashed;
  box-shadow: none;
}

.kafelek--wkrotce:hover,
.kafelek--wkrotce:active {
  box-shadow: none;
  transform: none;
}

.kafelek__etykieta {
  margin-top: auto;
  display: inline-block;
  padding: 0.3rem 0.6rem;
  background: var(--papier-glebszy);
  border: 1px solid var(--linia-mocna);
  border-radius: var(--promien);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--atrament);
}

.wybor__stopka {
  margin-top: 1.75rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  max-width: 40rem;
  color: var(--atrament-cichy);
  padding-left: 1rem;
  border-left: 4px solid var(--linia-mocna);
}

/* --------------------------------------------------- podstrony i dokumenty */

.prosta,
.dokument {
  max-width: 44rem;
  margin: 0 auto;
  padding: 2rem 1.15rem 2.5rem;
}

.prosta__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--akcent-tekst);
  font-weight: 700;
  margin-bottom: 0.8rem;
}

.prosta__h1 {
  font-size: clamp(1.75rem, 7.4vw, 2.25rem);
  margin-bottom: 1rem;
}

.prosta__akapit {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 0.8rem;
  max-width: 36rem;
}

.prosta__powrot,
.dokument__powrot {
  margin-top: 1.5rem;
}

.dokument__h1 {
  font-size: clamp(1.5rem, 6.2vw, 2rem);
  margin-bottom: 0.5rem;
}

.dokument__data {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--atrament-cichy);
  margin-bottom: 1.25rem;
}

.dokument__baner {
  padding: 0.8rem 1rem;
  margin-bottom: 1.75rem;
  background: var(--papier-glebszy);
  border-left: 4px solid var(--akcent);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.dokument__sekcja {
  margin-bottom: 1.5rem;
}

.dokument__naglowek {
  font-size: 1.0625rem;
  margin-bottom: 0.5rem;
}

.dokument__akapit {
  font-size: 0.9375rem;
  line-height: 1.65;
  margin-bottom: 0.6rem;
}

.dokument__lista {
  margin: 0;
  padding-left: 1.3rem;
  font-size: 0.9375rem;
  line-height: 1.65;
}

.dokument__lista li {
  margin-bottom: 0.45rem;
}

/* ---------------------------------------------------- strona produktu (STR) */

.strona-produkt .maskotka {
  width: 96px;
}

.wizualnie-ukryte {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

a.cta,
.cta--link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  text-decoration: none;
  color: var(--karta);
  padding: 0.7rem 1.15rem;
  box-sizing: border-box;
}

a.cta:hover,
.cta--link:hover {
  color: var(--karta);
}

.hero__cta .cta {
  width: auto;
  min-width: min(100%, 18rem);
}

.oferta__akapit {
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 40rem;
  margin-bottom: 0.85rem;
}

.oferta-punkty {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
  max-width: 40rem;
}

.oferta-punkt {
  border-left: 3px solid var(--akcent);
  padding-left: 0.85rem;
}

.oferta-punkt__tekst {
  font-size: 1.0625rem;
  line-height: 1.6;
}

.oferta-punkt__etykieta {
  color: var(--akcent-tekst);
}

.konkrety {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
  max-width: 40rem;
}

.konkret {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--atrament-cichy);
  padding-left: 0.9rem;
  position: relative;
}

.konkret::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.4rem;
  height: 0.4rem;
  background: var(--akcent);
}

.oferta-kroki {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
  max-width: 40rem;
}

.oferta-krok {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 0.75rem;
  align-items: start;
}

.oferta-krok__nr {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--karta);
  background: var(--atrament);
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
}

.oferta-krok__tekst {
  padding-top: 0.3rem;
}

.szczyty {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

.szczyt-pozycja {
  background: var(--karta);
  border: 1px solid var(--linia);
  border-left: 4px solid var(--akcent);
  padding: 0.9rem 1rem 1rem;
}

.szczyt-pozycja__data {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--akcent-tekst);
  margin-bottom: 0.35rem;
}

.szczyt-pozycja__tytul {
  font-size: 1.125rem;
  margin-bottom: 0.35rem;
}

.szczyt-pozycja__miejsce {
  font-size: 0.875rem;
  color: var(--atrament-cichy);
  margin-bottom: 0.45rem;
}

.szczyt-pozycja__dlaczego {
  font-size: 0.9375rem;
  line-height: 1.5;
}

.sekcja--cena .oferta__akapit strong {
  color: var(--akcent-tekst);
}

.krzyzowka {
  max-width: 40rem;
}

.krzyzowka__zdanie {
  margin-bottom: 0.7rem;
  font-size: 1.0625rem;
}

.krzyzowka__akcja {
  margin-top: 0.6rem;
}

/* ------------------------------------------------------------- breakpointy */

@media (min-width: 34em) {
  .hero,
  .sekcja,
  .stopka,
  .prosta,
  .dokument,
  .wybor {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .szczyt {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  /* Stopka wydania ma własne wypełnienie (pas na całą szerokość), więc marginesu
     bocznego z reguły wyżej by nie dostała — dopisujemy go z tą samą specyficznością. */
  .strona-landing .stopka,
  .strona-archiwum-numer .stopka {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .marka__nazwa {
    max-width: none;
    white-space: nowrap;
    font-size: 1.1875rem;
  }

  .marka__plytka {
    width: 56px;
    height: 56px;
  }

  .marka__plytka .maskotka {
    width: 42px;
  }

  .bilet {
    padding: 1.5rem 1.6rem 1.7rem;
  }

  .bilet__perforacja {
    margin-left: -1.6rem;
    margin-right: -1.6rem;
  }

  .segmenty__lista {
    grid-template-columns: repeat(3, 1fr);
  }

  .segment {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 64px;
    padding: 0.7rem 0.75rem;
  }

  .korzysci {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
  }

  .numery-lista {
    gap: 1.25rem;
  }

}

@media (min-width: 60em) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(24rem, 0.95fr);
    gap: 3rem;
    align-items: start;
    padding-top: 3rem;
    padding-bottom: 3.5rem;
  }

  .hero__h1 {
    font-size: clamp(3rem, 4.6vw, 4.5rem);
    margin-bottom: 1.1rem;
  }

  .hero__lead {
    font-size: 1.1875rem;
    margin-bottom: 1rem;
  }

  .hero__rytm {
    margin-bottom: 0;
  }

  .bilet,
  .wynik {
    max-width: none;
  }

  .sekcja {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  /* A-104: pasy sekcji strony miasta dostają powietrze wg makiety A (64 px),
     a tytuł sekcji rośnie do 2rem. Odstępy są uporządkowane, nie jednakowe:
     powietrze wewnątrz sekcji jest mniejsze niż powietrze między pasami. */
  .strona-landing .sekcja {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .sekcja__naglowek {
    font-size: 2.25rem;
    margin-bottom: 2rem;
  }

  .korzysc__ikona {
    width: 36px;
    height: 36px;
  }

  /* FAQ na dwie kolumny — koniec z 592 px pustki po prawej (pomiar A-101). */
  .strona-landing .pytania {
    grid-template-columns: 1fr 1fr;
    gap: 2rem 3rem;
  }

  /* Sekcja dla organizatorów: tekst po lewej, akcja po prawej — jeden pas
     zamiast bloku w przerywanej ramce zajmującego 44rem z 76rem. */
  .zglos {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2.5rem;
    align-items: center;
  }

  .sekcja__lead {
    font-size: 1.25rem;
  }

  .wybor {
    padding-top: 3.25rem;
    padding-bottom: 3.5rem;
  }

  .wybor__lead {
    font-size: 1.1875rem;
  }

  .kafelek {
    min-height: 13rem;
    padding: 1.35rem 1.5rem 1.5rem;
  }

  .korzysc__tytul {
    font-size: 1.25rem;
  }

  /* Waitlista: tekst po lewej, formularz po prawej — ten sam rytm co hero.
     Formularz i panel wyniku dzielą tę samą komórkę siatki, bo widoczny jest
     zawsze dokładnie jeden z nich (drugi ma atrybut `hidden`). */
  .waitlista {
    grid-template-columns: minmax(0, 1.05fr) minmax(22rem, 0.95fr);
    gap: 3rem;
  }

  .waitlista__tekst {
    grid-column: 1;
    grid-row: 1;
  }

  .waitlista .bilet,
  .waitlista .wynik {
    grid-column: 2;
    grid-row: 1;
  }

  .waitlista__tytul {
    font-size: 1.875rem;
  }

  .szczyty {
    grid-template-columns: 1fr 1fr;
  }

  .strona-produkt .hero--oferta,
  .strona-zareklamuj-sie .hero--oferta {
    grid-template-columns: 1fr;
    max-width: 46rem;
  }
}

/* ---------------------------------------------------- baner zgody (A-078) */
/* Pasek u dołu strony, WYŁĄCZNIE gdy pixel Meta jest skonfigurowany
   (`pixelSkonfigurowany()` w `scripts/build-site.js`) — bez pixela nie renderuje się
   w ogóle. Namierz `[hidden]`: sterowanie widocznością robi `assets/zgoda-cookies.js`
   przez atrybut `hidden`, więc `.baner-cookies` NIE MOŻE dostać własnej reguły
   `display` (nadpisałaby domyślne `[hidden] { display: none }` z tą samą
   specyficznością i baner zostałby widoczny na starcie). */
.baner-cookies {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 30;
  padding: 0.75rem;
  pointer-events: none;
}

.baner-cookies__karta {
  pointer-events: auto;
  max-width: 34rem;
  margin: 0 auto;
  background: var(--karta);
  border: 2px solid var(--atrament);
  border-radius: var(--promien);
  padding: 1rem;
}

.baner-cookies__tekst {
  margin: 0 0 0.85rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--atrament-cichy);
}

.baner-cookies__tekst a {
  color: var(--atrament);
}

/* Dwa RÓWNORZĘDNE przyciski (A-078, definicja ukończenia pkt 1): sam rozmiar,
   sam border-width, sama waga fontu — różni je wyłącznie wypełnienie, żeby odmowa
   nie była wizualnie "gorsza" ani schowana w linku. */
.baner-cookies__przyciski {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.baner-cookies__btn {
  min-height: 48px; /* cel dotykowy WCAG 2.2 (≥ 44px) */
  padding: 0.6rem 1.1rem;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  border: 2px solid var(--atrament);
  border-radius: var(--promien-pigulka);
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.baner-cookies__btn--tak {
  background: var(--atrament);
  color: var(--karta);
}

.baner-cookies__btn--nie {
  background: transparent;
  color: var(--atrament);
}

.baner-cookies__btn--nie:hover {
  background: var(--atrament);
  color: var(--karta);
}

.baner-cookies__btn--tak:hover {
  background: var(--akcent);
  border-color: var(--akcent);
}

@media (min-width: 34em) {
  .baner-cookies {
    padding: 1rem;
  }

  .baner-cookies__karta {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    max-width: 44rem;
  }

  .baner-cookies__tekst {
    margin: 0;
    flex: 1;
  }

  .baner-cookies__przyciski {
    flex: 0 0 auto;
    grid-auto-flow: column;
    grid-template-columns: none;
  }

  .baner-cookies__btn {
    min-width: 9rem;
  }
}

/* ------------------------------------------------------- archiwum numeru (A-036) */

/* Fragment treści numeru z jedynego generatora (repo wydarzenia-crawler, tryb
   `www`) — style inline w fragmencie odpowiadają za typografię pozycji, tutaj
   tylko ramka i odstęp od reszty strony. */
.archiwum-numer {
  max-width: 40rem;
  margin: 0 auto 2rem;
  padding: 0 1.15rem;
}

/* --- pas z numerami na kobalcie (A-128) ---
   Jedyne miejsce, w którym strona wprost „staje się" grafiką posta: kobalt, białe karty
   w obrysie, panorama w białej kresce na dole. */
.strona-landing .sekcja--ostatnie-numery {
  position: relative;
  overflow: hidden;
  background-color: var(--akcent);
  color: var(--karta);
}

/* Panorama w białej kresce w tle pasa; adres z motywu miasta (`--panorama-tla`), bo
   rysunek jest inny w każdym mieście. Pseudoelement, więc czytnik ekranu go nie widzi. */
.strona-landing .sekcja--ostatnie-numery::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 150px;
  background-image: var(--panorama-tla);
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: auto 100%;
  opacity: 0.3;
  pointer-events: none;
}

.strona-landing .sekcja--ostatnie-numery .sekcja__owijka {
  position: relative;
  z-index: 1;
  padding-bottom: 4.5rem;
}

.strona-landing .sekcja--ostatnie-numery .sekcja__nadlinia,
.strona-landing .sekcja--ostatnie-numery .sekcja__naglowek {
  color: var(--karta);
}

/* Sekcja „Ostatnie numery” na stronie miasta (def. ukończenia pkt 6) — te same
   klasy karty co `.korzysci`/`.korzysc`, żeby nie mnożyć wariantów siatki. */
.numery-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.numer-karta {
  background: transparent;
  border: 2px solid var(--karta);
  border-radius: var(--promien);
  padding: 1.15rem 1.25rem 1.25rem;
  color: var(--karta);
}

/* Data numeru to FAKT, nie etykieta — od A-104 nie udaje nadlinii (bez wersalików
   i bez trackingu), żeby jedyny styl nadlinii na stronie miasta niczego nie mylił. */
.numer-karta__data {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--karta);
  opacity: 0.85;
  margin-bottom: 0.35rem;
}

.numer-karta__link {
  /* Cel dotykowy: sam tekst ma ok. 23 px wysokosci, czyli ponizej twardego minimum
     WCAG 2.2 (24x24) i wyraznie ponizej zalecanych 44x44. Padding pionowy podnosi
     klikalny obszar bez zmiany wygladu karty (A-036, audyt mobile 05.09). */
  display: flex;
  align-items: center;
  /* `wrap`, bo tytulem karty bywa `temat` numeru, a nie krotkie "Wydanie 36" —
     bez tego dlugi tytul nie zawija sie na 390 px (review Grok Build 05.09). */
  flex-wrap: wrap;
  min-height: 44px;
  padding: 0.35rem 0;
  font-size: 1.25rem;
  line-height: 1.25;
  font-weight: 800;
  color: var(--karta);
  text-decoration: none;
  margin-bottom: 0.1rem;
}

.numer-karta__link:hover,
.numer-karta__link:focus-visible {
  color: var(--karta);
  text-decoration: underline;
}

.numer-karta__opis {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--karta);
  opacity: 0.9;
}

/* --- archiwum numerów i linki między numerami (A-320) ---
   Link „Wszystkie numery” pod kartami na kobalcie: ta sama pigułka co `.link-powrotny`,
   w wariancie obrysowym białą kreską (cynobrowa pigułka zostaje wyłącznie dla zapisu). */
.link-powrotny--na-akcencie {
  color: var(--karta);
  background: transparent;
  border-color: var(--karta);
}

.link-powrotny--na-akcencie:hover,
.link-powrotny--na-akcencie:focus-visible {
  color: var(--akcent-tekst);
  background: var(--karta);
  border-color: var(--karta);
}

/* Strona archiwum miasta: te same karty co na stronie miasta, ale lista jest długa
   (wszystkie numery), więc od tabletu idzie w dwóch kolumnach zamiast jednej wstęgi. */
@media (min-width: 48em) {
  .strona-archiwum .numery-lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Linki „poprzedni / następny” pod treścią numeru. Kolumna i wypełnienie jak
   `.archiwum-numer`, rama jak karta zapisu poniżej (`.bilet`): ten sam obrys,
   ten sam promień, to samo tło karty. */
.numer-nawigacja {
  max-width: 40rem;
  margin: 0 auto;
  padding: 0 1.15rem;
  display: grid;
  gap: 0.75rem;
}

.numer-nawigacja__link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
  min-height: 64px;
  padding: 0.8rem 1rem;
  color: var(--atrament);
  background: var(--karta);
  border: 2px solid var(--atrament);
  border-radius: var(--promien);
  text-decoration: none;
}

.numer-nawigacja__link:hover,
.numer-nawigacja__link:focus-visible {
  color: var(--karta);
  background: var(--atrament);
}

.numer-nawigacja__etykieta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--akcent-tekst);
}

.numer-nawigacja__link:hover .numer-nawigacja__etykieta,
.numer-nawigacja__link:focus-visible .numer-nawigacja__etykieta {
  color: var(--karta);
}

.numer-nawigacja__data {
  font-size: 1.0625rem;
  line-height: 1.25;
  font-weight: 800;
}

.numer-nawigacja__wszystkie {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-weight: 700;
  color: var(--akcent-tekst);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.numer-nawigacja__wszystkie:hover,
.numer-nawigacja__wszystkie:focus-visible {
  color: var(--atrament);
}

@media (min-width: 34em) {
  .numer-nawigacja {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Następny numer zawsze w prawej kolumnie, także gdy poprzedniego nie ma. */
  .numer-nawigacja__link--nastepny {
    grid-column: 2;
    text-align: right;
    align-items: flex-end;
  }

  .numer-nawigacja__wszystkie {
    grid-column: 1 / -1;
  }
}

/* Karta zapisu pod archiwalnym numerem (runda 2 A-128, uwaga Kamila „pole zapisu jest
   za wielkie"): ma trzymać kolumnę numeru, a nie całą szerokość okna. Formularz stoi
   w `<main>` bez owijki, więc bez tej reguły dziedziczył `max-width: none` z breakpointu
   60em — tam zdjęcie ograniczenia jest celowe, bo na landingu karta jest kolumną siatki
   hero. Szerokość liczona z karty numeru: `.archiwum-numer` ma 40rem i 1,15rem wypełnienia
   z każdej strony, czyli treść 37,7rem (ok. 600 px). Na telefonie zostaje pełna szerokość. */
.strona-archiwum-numer .bilet,
.strona-archiwum-numer .wynik {
  max-width: none;
  margin: 2.5rem 0 3rem;
}

@media (min-width: 34em) {
  .strona-archiwum-numer .bilet,
  .strona-archiwum-numer .wynik {
    max-width: 37.7rem;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Pasek sticky zapisu na stronie numeru (def. ukończenia pkt 8) — link do #zapis
   NA TEJ SAMEJ stronie, bo formularz (`htmlFormularzaNewslettera`) jest wklejony
   na dole strony numeru, nie na osobnej. Zero drugiej implementacji formularza.

   `bottom` czyta `--tt-zgoda-wysokosc` (A-078, kolizja 05.09 09:55): baner zgody
   (`.baner-cookies`, też `position: fixed; bottom: 0`) i ten pasek są NIEZALEŻNYMI
   elementami fixed na dole strony — bez tej zmiennej, gdy pixel jest aktywny i baner
   widoczny, baner (z-index 30) zasłania ten pasek (z-index 20) na 390 px. Zmienną
   ustawia `assets/zgoda-cookies.js` na `<html>`, domyślnie `0px` (baner ukryty albo
   pixel nieskonfigurowany — strony bez pixela w ogóle nie ładują tego skryptu, wtedy
   `var()` spada na fallback `0px`, zero zależności odwrotnej). */
.archiwum-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--tt-zgoda-wysokosc, 0px);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.15rem;
  padding-bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
  background: var(--atrament);
  border-top: 2px solid var(--akcent);
  box-shadow: 0 -4px 0 -2px rgb(0 0 0 / 0.08);
  transition: bottom 0.15s ease;
}

.archiwum-cta__tekst {
  color: var(--karta);
  font-size: 0.9375rem;
  line-height: 1.3;
  margin: 0;
}

.archiwum-cta__link {
  flex-shrink: 0;
  display: inline-block;
  min-height: 48px;
  padding: 0.7rem 1.2rem;
  font-weight: 800;
  color: var(--atrament);
  background: var(--karta);
  border: 2px solid var(--karta);
  border-radius: var(--promien);
  text-decoration: none;
}

/* Miejsce na sticky bar u dołu strony numeru, żeby nie zasłaniał ostatniej treści.
   Gdy baner zgody (A-078) jest też widoczny, `.archiwum-cta` podnosi się nad niego
   (patrz `bottom: var(--tt-zgoda-wysokosc, 0px)` wyżej) — rezerwa treści musi urosnąć
   o tyle samo, inaczej ostatni akapit chowa się pod podniesionym paskiem CTA. Specyficzność
   klasy (`.strona-archiwum-numer`) jest wyższa niż generyczna reguła na `body`, więc ta
   wygrywa i NIE dodaje się do niej — to jest pełna rezerwa dla tej strony, nie suma dwóch. */
.strona-archiwum-numer {
  padding-bottom: 0;
}

/* Miejsce na przyklejony pasek u dołu bierze na siebie STOPKA, a nie `body`: stopka strony
   numeru jest kobaltowa i idzie przez całą szerokość, więc papierowa rezerwa pod nią
   wyglądałaby jak dziura między kobaltem a paskiem. Wysokość rezerwy rośnie o baner zgody,
   gdy ten jest widoczny (`--tt-zgoda-wysokosc`, A-078) — pasek podnosi się wtedy nad niego. */
.strona-archiwum-numer .stopka {
  padding-bottom: calc(2.75rem + 5rem + var(--tt-zgoda-wysokosc, 0px));
}

@media (max-width: 30rem) {
  .archiwum-cta {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .cta:hover,
  .cta:active,
  .kafelek:hover,
  .kafelek:active {
    transform: none;
  }

  .kafelek:hover .kafelek__strzalka {
    translate: 0;
  }
}