/* =====================================================================
   Arkusz stylów. Kolory zebrane na górze, żeby dało się je zmienić
   w jednym miejscu bez szukania po całym pliku.
   ===================================================================== */

:root{
  --papier:#F7F6F3;
  --papier-blok:#EFEDE7;
  --tekst:#17171A;
  --tekst-2:#4A4842;
  --tekst-3:#8A8880;
  --linia:#DEDCD6;
  --akcent:#8A6A0F;
  --akcent-tlo:#F2ECDB;

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --grotesk:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --kolumna:38rem;
}

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

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

body{
  margin:0;
  background:var(--papier);
  color:var(--tekst);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

@media (min-width:40rem){
  body{font-size:18px}
}

/* --- jedna wspólna kolumna dla całej strony --------------------------
   Wszystko, co ma tekst, siedzi w .kolumna. Dzięki temu każda linia
   zaczyna się i kończy w tym samym miejscu, na telefonie i na komputerze.
   -------------------------------------------------------------------- */
.kolumna{
  max-width:var(--kolumna);
  margin-left:auto;
  margin-right:auto;
  padding-left:1.25rem;
  padding-right:1.25rem;
}

/* --- nagłówki -------------------------------------------------------- */
h1,h2,h3{
  font-family:var(--grotesk);
  font-weight:600;
  letter-spacing:-0.04em;
  line-height:1.05;
  color:var(--tekst);
  margin:0 0 0.6em;
  text-wrap:balance;
}
h1{font-size:clamp(1.95rem,7.5vw,2.9rem)}
h2{font-size:clamp(1.3rem,4.5vw,1.6rem);letter-spacing:-0.03em;margin-top:2.2em}
h3{font-size:1.12rem;letter-spacing:-0.02em;margin-top:1.8em}

p{margin:0 0 1.1em}

a{color:var(--tekst);text-decoration:underline;text-decoration-color:var(--linia);text-underline-offset:3px}
a:hover{text-decoration-color:var(--akcent)}

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

.pomin{position:absolute;left:-9999px}
.pomin:focus{position:static;display:block;padding:0.5rem 1.25rem;background:var(--akcent-tlo)}

/* --- winieta i pasek liczników --------------------------------------- */
.winieta{padding-top:1.5rem;margin-bottom:2.5rem}

.winieta-gora{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem 1.25rem;
  align-items:baseline;
  justify-content:space-between;
}

.winieta-nazwa{
  font-family:var(--grotesk);
  font-weight:600;
  font-size:1.05rem;
  letter-spacing:-0.03em;
  text-decoration:none;
}

.menu{display:flex;gap:1.1rem;font-family:var(--grotesk);font-size:0.86rem}
.menu a{text-decoration:none;color:var(--tekst-2)}
.menu a:hover{color:var(--akcent)}

.licznik{
  display:flex;
  flex-wrap:wrap;
  gap:0.35rem 1.4rem;
  margin:0.9rem 0 0;
  padding:0.65rem 0;
  border-top:1px solid var(--linia);
  border-bottom:1px solid var(--linia);
  font-family:var(--mono);
  font-size:0.72rem;
  color:var(--tekst-3);
}
.licznik b{font-weight:500;color:var(--akcent)}

/* --- treść ----------------------------------------------------------- */
.proza{padding-bottom:1rem}
.proza li{margin-bottom:0.4em}
.proza ul,.proza ol{padding-left:1.15rem}
.proza blockquote{
  margin:1.6em 0;
  padding-left:1rem;
  border-left:2px solid var(--akcent);
  color:var(--tekst-2);
  font-style:italic;
}
.proza hr{border:0;border-top:1px solid var(--linia);margin:2.5em 0}
.proza img{max-width:100%;height:auto;display:block}
.proza code{font-family:var(--mono);font-size:0.85em;background:var(--papier-blok);padding:0.1em 0.3em}

.data{font-family:var(--mono);font-size:0.75rem;color:var(--tekst-3);margin-bottom:0.9rem}

.lead{font-size:1.1em;color:var(--tekst-2);margin-bottom:1.6em}

/* --- strona główna: nagłówek otwierający ------------------------------ */
.otwarcie h1{margin-bottom:0.5em}
.otwarcie p{color:var(--tekst-2)}

.dla-kogo{
  margin:2.5rem 0;
  padding:1.4rem 0;
  border-top:1px solid var(--linia);
  border-bottom:1px solid var(--linia);
}
.dla-kogo p:last-child{margin-bottom:0}

/* --- lista wpisów i wydań -------------------------------------------- */
.lista{list-style:none;margin:2rem 0 0;padding:0}
.lista li{padding:1.4rem 0;border-top:1px solid var(--linia)}
.lista li:last-child{border-bottom:1px solid var(--linia)}
.lista h2{
  font-size:1.18rem;
  margin:0.35rem 0 0.4rem;
  letter-spacing:-0.03em;
  line-height:1.2;
}
.lista h2 a{text-decoration:none}
.lista h2 a:hover{color:var(--akcent)}
.lista p{margin:0;color:var(--tekst-2);font-size:0.95em}
.lista .data{margin:0}

/* --- pozycja oferty wewnątrz wydania ---------------------------------- */
.oferta{
  margin:2.6rem 0;
  padding-top:1.3rem;
  border-top:1px solid var(--linia);
}
.oferta-numer{
  font-family:var(--mono);
  font-size:0.75rem;
  color:var(--akcent);
  margin:0 0 0.35rem;
}
.oferta h3{margin:0 0 0.9rem;font-size:1.15rem}

/* liczby z etykietami: etykieta nad wartością, żeby było wiadomo,
   co znaczy każda liczba */
.oferta-liczby{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));
  gap:0.9rem 1.6rem;
  margin:0 0 1.3rem;
  padding:0.9rem 0;
  border-top:1px solid var(--linia);
  border-bottom:1px solid var(--linia);
}
.oferta-liczby span{display:block}
.oferta-liczby b{
  display:block;
  font-family:var(--grotesk);
  font-weight:400;
  font-size:0.72rem;
  line-height:1.3;
  color:var(--tekst-3);
  margin-bottom:0.15rem;
}
.oferta-liczby i{
  font-style:normal;
  font-family:var(--mono);
  font-size:0.95rem;
  color:var(--akcent);
}

/* --- karta weryfikacji ------------------------------------------------ */
.weryfikacja{margin:1.4rem 0}
.weryfikacja dl{margin:0}
.weryfikacja dt{
  font-family:var(--grotesk);
  font-size:0.78rem;
  color:var(--tekst-3);
  padding-top:0.7rem;
  border-top:1px solid var(--linia);
}
.weryfikacja dd{
  margin:0.1rem 0 0.7rem;
  font-size:0.95em;
  color:var(--tekst-2);
}
.weryfikacja dd em{color:var(--tekst-3)}

@media (min-width:34rem){
  .weryfikacja dl{
    display:grid;
    grid-template-columns:11rem 1fr;
    column-gap:1.5rem;
  }
  .weryfikacja dt{grid-column:1;padding-bottom:0.7rem}
  .weryfikacja dd{
    grid-column:2;
    margin:0;
    padding:0.7rem 0;
    border-top:1px solid var(--linia);
  }
}

/* --- tabela wszystkich ofert ------------------------------------------ */
.tabela-ofert{
  margin:2rem -1.25rem;
  padding:0 1.25rem;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.tabela-ofert table{
  border-collapse:collapse;
  width:100%;
  min-width:34rem;
  font-size:0.85rem;
}
.tabela-ofert th,
.tabela-ofert td{
  text-align:left;
  padding:0.6rem 0.9rem 0.6rem 0;
  border-bottom:1px solid var(--linia);
  vertical-align:top;
  white-space:nowrap;
}
.tabela-ofert th{
  font-family:var(--grotesk);
  font-weight:500;
  font-size:0.74rem;
  color:var(--tekst-3);
  border-bottom:1px solid var(--tekst-3);
}
.tabela-ofert td:nth-child(2),
.tabela-ofert td:nth-child(3),
.tabela-ofert td:nth-child(4){
  font-family:var(--mono);
  font-size:0.8rem;
  color:var(--akcent);
}
.tabela-ofert td:last-child,
.tabela-ofert th:last-child{white-space:normal;min-width:11rem;padding-right:0}
.tabela-ofert td:first-child{font-weight:500}

.legenda{
  font-size:0.78rem;
  color:var(--tekst-3);
  margin-top:-1rem;
}

/* --- blok zapisu ------------------------------------------------------ */
.zapis{
  margin:3rem 0 2rem;
  padding:1.6rem 1.4rem 1.4rem;
  background:var(--akcent-tlo);
}
.zapis h2{margin-top:0;font-size:1.25rem}
.zapis p{color:var(--tekst-2)}
.formularz{margin:1.2rem 0}
.klauzula{
  font-size:0.78rem;
  line-height:1.55;
  color:var(--tekst-3);
  margin-bottom:0;
}

/* --- stopka ----------------------------------------------------------- */
.stopka{
  margin-top:4rem;
  padding:1.6rem 0 3rem;
  border-top:1px solid var(--linia);
  font-family:var(--grotesk);
  font-size:0.83rem;
  color:var(--tekst-3);
}
.stopka p{margin:0 0 0.4em}
.stopka-autor{color:var(--tekst);font-weight:500}
.stopka-nota{margin-top:1rem;line-height:1.55;max-width:34rem}
.stopka-linki{margin-top:1rem;display:flex;gap:1.2rem}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}