/* =========================================================================
   Pod szkłem — arkusz stylów „Log akwarysty"
   Ciemny zbiornik w ciemnym pokoju. Papier milimetrowy, tabele pomiarowe,
   liczby monospace, bursztynowy akcent jak światło lampy nad taflą.
   Bez frameworków. Bez motywu jasnego — dziennik czyta się po ciemku.
   ========================================================================= */

/* ------------------------------- Kroje --------------------------------- */

@font-face {
  font-family: 'Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonty/plex-sans-400-latext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+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: 'Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonty/plex-sans-400-lat.woff2') 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;
}
@font-face {
  font-family: 'Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonty/plex-sans-600-latext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+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: 'Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonty/plex-sans-600-lat.woff2') 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;
}
@font-face {
  font-family: 'Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonty/plex-sans-700-latext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+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: 'Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonty/plex-sans-700-lat.woff2') 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;
}
@font-face {
  font-family: 'Plex Dane';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonty/plex-mono-400-latext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+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: 'Plex Dane';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonty/plex-mono-400-lat.woff2') 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;
}
@font-face {
  font-family: 'Plex Dane';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonty/plex-mono-500-latext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+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: 'Plex Dane';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonty/plex-mono-500-lat.woff2') 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;
}

/* ------------------------------ Zmienne -------------------------------- */

:root {
  /* Woda i osad — od najciemniejszego */
  --dno: #0a0f0e;
  --muł: #101715;
  --muł-plyciej: #16201d;
  --szlam: #1d2a26;
  --linia: #24332e;
  --linia-mocna: #33463f;

  /* Szkło — wszystko, co świeci */
  --szklo: #e4ebe7;
  --szklo-cien: #a6b5ae;
  --szklo-mgla: #6f8078;

  /* Zieleń butelkowa — roślina */
  --zielen: #3f9a72;
  --zielen-glab: #0e3729;
  --zielen-mgla: #12271f;

  /* Bursztyn — światło lampy, liczby, odnośniki */
  --bursztyn: #d99b34;
  --bursztyn-blask: #f2bb60;
  --bursztyn-cien: #2a2013;

  /* Odczyt poza normą */
  --alarm: #cf6046;
  --alarm-cien: #2c1a16;

  /* Kroje */
  --font-tekst: 'Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --font-dane: 'Plex Dane', 'Cascadia Mono', Consolas, monospace;

  /* Skala — mniejsza rozpiętość niż w typowym blogu, dziennik jest zwarty */
  --pt-mini: 0.72rem;
  --pt-mala: 0.82rem;
  --pt-drobna: 0.92rem;
  --pt-bazowa: clamp(1rem, 0.97rem + 0.15vw, 1.06rem);
  --pt-wieksza: clamp(1.12rem, 1.05rem + 0.3vw, 1.25rem);
  --pt-tytul3: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem);
  --pt-tytul2: clamp(1.4rem, 1.25rem + 0.7vw, 1.8rem);
  --pt-tytul1: clamp(1.85rem, 1.5rem + 1.8vw, 3rem);

  /* Odstępy — siatka 4 px, jak w rysunku technicznym */
  --o1: 4px;
  --o2: 8px;
  --o3: 12px;
  --o4: 16px;
  --o5: 24px;
  --o6: 32px;
  --o7: 48px;
  --o8: 72px;
  --o9: 104px;

  --szer-strony: 1180px;
  --szer-kolumny: 700px;
  --kant: 2px;
  --przejscie: 120ms linear;
}

/* --------------------------- Reset i baza ------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  color-scheme: dark;
}

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

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background-color: var(--dno);
  /* Papier milimetrowy: siatka 8 px, co piąta linia mocniejsza */
  background-image:
    linear-gradient(rgba(63, 154, 114, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63, 154, 114, 0.035) 1px, transparent 1px),
    linear-gradient(rgba(63, 154, 114, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63, 154, 114, 0.02) 1px, transparent 1px);
  background-size:
    40px 40px,
    40px 40px,
    8px 8px,
    8px 8px;
  background-attachment: fixed;
  color: var(--szklo);
  font-family: var(--font-tekst);
  font-size: var(--pt-bazowa);
  line-height: 1.65;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--o3);
  color: var(--szklo);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

h1 {
  font-size: var(--pt-tytul1);
  font-weight: 700;
  letter-spacing: -0.025em;
}
h2 {
  font-size: var(--pt-tytul2);
}
h3 {
  font-size: var(--pt-tytul3);
}
h4 {
  font-size: var(--pt-wieksza);
}

p {
  margin: 0 0 var(--o4);
}

a {
  color: var(--bursztyn);
  text-decoration: none;
  transition: color var(--przejscie);
}
a:hover {
  color: var(--bursztyn-blask);
}

strong {
  font-weight: 600;
  color: #f4f8f6;
}

img,
svg,
picture {
  display: block;
  max-width: 100%;
  height: auto;
}

ul,
ol {
  margin: 0 0 var(--o4);
  padding-left: 1.35em;
}
li {
  margin-bottom: var(--o2);
}
li::marker {
  color: var(--zielen);
}

code {
  font-family: var(--font-dane);
  font-size: 0.88em;
  background: var(--szlam);
  color: var(--bursztyn-blask);
  padding: 0.1em 0.35em;
  border-radius: var(--kant);
}

hr {
  border: 0;
  height: 1px;
  margin: var(--o7) 0;
  background: linear-gradient(
    90deg,
    var(--linia-mocna),
    var(--linia) 40%,
    transparent
  );
}

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

::selection {
  background: var(--bursztyn);
  color: var(--dno);
}

/* ------------------------------ Osnowa --------------------------------- */

.osnowa {
  width: 100%;
  max-width: var(--szer-strony);
  margin-inline: auto;
  padding-inline: var(--o5);
}

.osnowa--waska {
  max-width: 860px;
}

main {
  flex: 1 0 auto;
  padding-bottom: var(--o8);
}

.skok {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  background: var(--bursztyn);
  color: var(--dno);
  padding: var(--o2) var(--o4);
  font-family: var(--font-dane);
  font-size: var(--pt-mala);
}
.skok:focus {
  left: var(--o4);
  top: var(--o2);
}

.ukryte {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------- Pasek --------------------------------- */

.pasek {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(10, 15, 14, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linia);
}

.pasek__wnetrze {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--o5);
  min-height: 60px;
  flex-wrap: wrap;
}

.pasek__znak {
  display: flex;
  align-items: center;
  gap: var(--o3);
  color: var(--szklo);
  font-family: var(--font-dane);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pasek__znak:hover {
  color: var(--bursztyn-blask);
}
.pasek__znak svg {
  flex: none;
}

.pasek__nawigacja {
  display: flex;
  align-items: center;
  gap: var(--o1);
  flex-wrap: wrap;
}

.pasek__odnosnik {
  display: block;
  padding: var(--o1) var(--o3);
  font-family: var(--font-dane);
  font-size: var(--pt-mini);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--szklo-cien);
  border: 1px solid transparent;
  border-radius: var(--kant);
}
.pasek__odnosnik:hover {
  color: var(--szklo);
  border-color: var(--linia-mocna);
  background: var(--muł);
}
.pasek__odnosnik[aria-current='page'] {
  color: var(--bursztyn-blask);
  border-color: var(--bursztyn-cien);
  background: var(--bursztyn-cien);
}

/* Listwa statusu pod paskiem — mikro-dane o zbiornikach autora */
.listwa {
  border-bottom: 1px solid var(--linia);
  background: var(--muł);
}
.listwa__wnetrze {
  display: flex;
  gap: var(--o5);
  overflow-x: auto;
  padding-block: var(--o2);
  font-family: var(--font-dane);
  font-size: var(--pt-mini);
  color: var(--szklo-mgla);
  letter-spacing: 0.04em;
  white-space: nowrap;
  scrollbar-width: none;
}
.listwa__wnetrze::-webkit-scrollbar {
  display: none;
}
.listwa b {
  color: var(--zielen);
  font-weight: 500;
}

/* ------------------------------ Etykiety ------------------------------- */

.etykieta {
  display: inline-block;
  font-family: var(--font-dane);
  font-size: var(--pt-mini);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--zielen);
}

.etykieta--bursztyn {
  color: var(--bursztyn);
}

.znacznik {
  display: inline-block;
  font-family: var(--font-dane);
  font-size: var(--pt-mini);
  letter-spacing: 0.06em;
  padding: 2px var(--o2);
  color: var(--szklo-cien);
  background: var(--muł-plyciej);
  border: 1px solid var(--linia);
  border-radius: var(--kant);
}
a.znacznik:hover {
  color: var(--bursztyn-blask);
  border-color: var(--bursztyn-cien);
}

/* ------------------------------ Klawisze ------------------------------- */

.klawisz {
  display: inline-flex;
  align-items: center;
  gap: var(--o2);
  padding: var(--o3) var(--o5);
  font-family: var(--font-dane);
  font-size: var(--pt-mala);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dno);
  background: var(--bursztyn);
  border: 1px solid var(--bursztyn);
  border-radius: var(--kant);
  cursor: pointer;
  transition:
    background var(--przejscie),
    color var(--przejscie);
}
.klawisz:hover {
  background: var(--bursztyn-blask);
  border-color: var(--bursztyn-blask);
  color: var(--dno);
}

.klawisz--pusty {
  background: transparent;
  color: var(--szklo-cien);
  border-color: var(--linia-mocna);
}
.klawisz--pusty:hover {
  background: var(--muł-plyciej);
  color: var(--szklo);
  border-color: var(--zielen);
}

/* -------------------------- Strona główna ------------------------------ */

.wejscie {
  border-bottom: 1px solid var(--linia);
  padding-block: var(--o8) var(--o7);
}

.wejscie__uklad {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: var(--o7);
  align-items: start;
}

.wejscie__tytul {
  margin-block: var(--o4) var(--o4);
  max-width: 16ch;
}

.wejscie__lid {
  color: var(--szklo-cien);
  font-size: var(--pt-wieksza);
  max-width: 54ch;
  margin-bottom: var(--o5);
}

.wejscie__klawisze {
  display: flex;
  gap: var(--o3);
  flex-wrap: wrap;
}

/* Karta „ostatni odczyt" — sygnatura wizualna bloga */
.odczyt {
  background: var(--muł);
  border: 1px solid var(--linia);
  border-top: 2px solid var(--zielen);
  border-radius: var(--kant);
}

.odczyt__glowa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--o3);
  padding: var(--o3) var(--o4);
  border-bottom: 1px solid var(--linia);
  font-family: var(--font-dane);
  font-size: var(--pt-mini);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--szklo-mgla);
}
.odczyt__glowa b {
  color: var(--zielen);
  font-weight: 500;
}

.odczyt__siatka {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.parametr {
  padding: var(--o3) var(--o4);
  border-bottom: 1px solid var(--linia);
}
.parametr:nth-child(odd) {
  border-right: 1px solid var(--linia);
}
.parametr:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.parametr__nazwa {
  display: block;
  font-family: var(--font-dane);
  font-size: var(--pt-mini);
  letter-spacing: 0.06em;
  color: var(--szklo-mgla);
  margin-bottom: 2px;
}

.parametr__wartosc {
  font-family: var(--font-dane);
  font-weight: 500;
  font-size: 1.28rem;
  color: var(--bursztyn-blask);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.parametr__jednostka {
  font-size: var(--pt-mala);
  color: var(--szklo-mgla);
  margin-left: 3px;
  font-weight: 400;
}

.odczyt__nota {
  padding: var(--o3) var(--o4);
  border-top: 1px solid var(--linia);
  font-family: var(--font-dane);
  font-size: var(--pt-mini);
  color: var(--szklo-mgla);
  line-height: 1.5;
}

/* ------------------------------ Sekcje --------------------------------- */

.sekcja {
  padding-block: var(--o7);
}

.naglowek-sekcji {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--o4);
  padding-bottom: var(--o3);
  margin-bottom: var(--o5);
  border-bottom: 1px solid var(--linia);
  flex-wrap: wrap;
}
.naglowek-sekcji h2 {
  margin: 0;
  font-size: var(--pt-tytul3);
}
.naglowek-sekcji a {
  font-family: var(--font-dane);
  font-size: var(--pt-mini);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* --------------------------- Rejestr wpisów ---------------------------- */
/* Lista wpisów jako wiersze dziennika — nie kafelki. */

.rejestr {
  border-top: 1px solid var(--linia);
}

.rejestr__pozycja {
  display: grid;
  grid-template-columns: 108px 118px minmax(0, 1fr);
  gap: var(--o5);
  align-items: baseline;
  padding: var(--o4) var(--o3);
  margin-inline: calc(-1 * var(--o3));
  border-bottom: 1px solid var(--linia);
  color: inherit;
  transition: background var(--przejscie);
}
.rejestr__pozycja:hover {
  background: var(--muł);
  color: inherit;
}

.rejestr__data,
.rejestr__dzial {
  font-family: var(--font-dane);
  font-size: var(--pt-mini);
  letter-spacing: 0.06em;
  color: var(--szklo-mgla);
  font-variant-numeric: tabular-nums;
}
.rejestr__dzial {
  color: var(--zielen);
  text-transform: uppercase;
}

.rejestr__tytul {
  display: block;
  font-size: var(--pt-wieksza);
  font-weight: 600;
  color: var(--szklo);
  margin-bottom: var(--o1);
  line-height: 1.3;
}
.rejestr__pozycja:hover .rejestr__tytul {
  color: var(--bursztyn-blask);
}

.rejestr__opis {
  display: block;
  color: var(--szklo-cien);
  font-size: var(--pt-drobna);
  margin: 0;
  max-width: 68ch;
}

.dzial-kafel {
  display: block;
}

@media (max-width: 720px) {
  .rejestr__pozycja {
    grid-template-columns: 1fr;
    gap: var(--o2);
  }
  .rejestr__data {
    order: 1;
  }
}

/* ------------------------------ Regał ---------------------------------- */
/* Karty wpisów — używane na stronie działu i pod artykułem. */

.regal {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--o4);
}

.karta-wpisu {
  display: flex;
  flex-direction: column;
  background: var(--muł);
  border: 1px solid var(--linia);
  border-radius: var(--kant);
  overflow: hidden;
  transition:
    border-color var(--przejscie),
    transform var(--przejscie);
}
.karta-wpisu:hover {
  border-color: var(--linia-mocna);
  transform: translateY(-2px);
}

.karta-wpisu__okladka {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
  border-bottom: 1px solid var(--linia);
  background: var(--zielen-mgla);
}

.karta-wpisu__wnetrze {
  padding: var(--o4);
  display: flex;
  flex-direction: column;
  gap: var(--o2);
  flex: 1;
}

.karta-wpisu__meta {
  display: flex;
  gap: var(--o3);
  align-items: center;
  font-family: var(--font-dane);
  font-size: var(--pt-mini);
  letter-spacing: 0.06em;
  color: var(--szklo-mgla);
  text-transform: uppercase;
}
.karta-wpisu__meta b {
  color: var(--zielen);
  font-weight: 500;
}

.karta-wpisu__tytul {
  font-size: var(--pt-wieksza);
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}
.karta-wpisu__tytul a {
  color: var(--szklo);
}
.karta-wpisu:hover .karta-wpisu__tytul a {
  color: var(--bursztyn-blask);
}

.karta-wpisu__opis {
  margin: 0;
  color: var(--szklo-cien);
  font-size: var(--pt-drobna);
}

/* ---------------------------- Kafle działów ---------------------------- */

.dzialy {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--linia);
  border: 1px solid var(--linia);
  border-radius: var(--kant);
  overflow: hidden;
}

.dzial-kafel {
  background: var(--dno);
  padding: var(--o5) var(--o4);
  transition: background var(--przejscie);
}
.dzial-kafel:hover {
  background: var(--muł-plyciej);
}
.dzial-kafel__nazwa {
  display: block;
  font-family: var(--font-dane);
  font-size: var(--pt-mala);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bursztyn);
  margin-bottom: var(--o2);
}
.dzial-kafel__opis {
  margin: 0;
  font-size: var(--pt-mala);
  color: var(--szklo-mgla);
  line-height: 1.55;
}
.dzial-kafel__licznik {
  display: block;
  margin-top: var(--o3);
  font-family: var(--font-dane);
  font-size: var(--pt-mini);
  color: var(--szklo-mgla);
}

/* ------------------------------- Ślad ---------------------------------- */

.slad {
  display: flex;
  gap: var(--o2);
  align-items: center;
  padding-block: var(--o5) 0;
  font-family: var(--font-dane);
  font-size: var(--pt-mini);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--szklo-mgla);
}
.slad a {
  color: var(--szklo-mgla);
}
.slad a:hover {
  color: var(--bursztyn);
}

/* -------------------------------- Wpis --------------------------------- */

.wpis {
  padding-top: var(--o5);
}

.wpis-glowa {
  max-width: var(--szer-kolumny);
  padding-block: var(--o4) var(--o5);
}

.wpis-glowa h1 {
  margin-block: var(--o3) var(--o4);
}

.wpis-glowa__lid {
  font-size: var(--pt-wieksza);
  color: var(--szklo-cien);
  margin-bottom: var(--o5);
}

.wpis-glowa__podpis {
  display: flex;
  flex-wrap: wrap;
  gap: var(--o4);
  padding-top: var(--o3);
  border-top: 1px solid var(--linia);
  font-family: var(--font-dane);
  font-size: var(--pt-mini);
  letter-spacing: 0.06em;
  color: var(--szklo-mgla);
  text-transform: uppercase;
}
.wpis-glowa__podpis b {
  color: var(--szklo-cien);
  font-weight: 500;
}

.wpis__okladka {
  margin: 0 0 var(--o7);
  border: 1px solid var(--linia);
  border-radius: var(--kant);
  overflow: hidden;
}
.wpis__okladka img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Układ: treść + boczna tabliczka z metryką wpisu */
.wpis__uklad {
  display: grid;
  grid-template-columns: minmax(0, var(--szer-kolumny)) minmax(240px, 280px);
  gap: var(--o8);
  align-items: start;
}

@media (max-width: 980px) {
  .wpis__uklad {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--o6);
  }
}

/* Tabliczka metryki — „nalepka z parametrami" przy zbiorniku */
.tabliczka {
  position: sticky;
  top: 80px;
  background: var(--muł);
  border: 1px solid var(--linia);
  border-left: 2px solid var(--bursztyn);
  border-radius: var(--kant);
  font-family: var(--font-dane);
  font-size: var(--pt-mini);
}
@media (max-width: 980px) {
  .tabliczka {
    position: static;
    margin-bottom: var(--o6);
  }
}

.tabliczka__glowa {
  padding: var(--o3) var(--o4);
  border-bottom: 1px solid var(--linia);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bursztyn);
}

.tabliczka__lista {
  margin: 0;
  padding: var(--o3) var(--o4);
  display: grid;
  gap: var(--o3);
}
.tabliczka__lista > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--o3);
  align-items: baseline;
}
.tabliczka__lista dt {
  color: var(--szklo-mgla);
  letter-spacing: 0.04em;
}
.tabliczka__lista dd {
  margin: 0;
  color: var(--szklo);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tabliczka__spis {
  border-top: 1px solid var(--linia);
  padding: var(--o3) var(--o4) var(--o4);
}
.tabliczka__spis > span {
  display: block;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bursztyn);
  margin-bottom: var(--o3);
}
.tabliczka__spis ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: krok;
}
.tabliczka__spis li {
  margin-bottom: var(--o2);
  line-height: 1.45;
  counter-increment: krok;
}
.tabliczka__spis li::before {
  content: counter(krok, decimal-leading-zero) ' ';
  color: var(--szklo-mgla);
}
.tabliczka__spis a {
  color: var(--szklo-cien);
}
.tabliczka__spis a:hover {
  color: var(--bursztyn-blask);
}

/* ------------------------------- Treść --------------------------------- */

.tresc {
  max-width: var(--szer-kolumny);
  font-size: var(--pt-bazowa);
}

.tresc > h2 {
  margin-top: var(--o8);
  padding-top: var(--o3);
  border-top: 1px solid var(--linia);
  position: relative;
}
.tresc > h2::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 48px;
  height: 1px;
  background: var(--bursztyn);
}

.tresc > h3 {
  margin-top: var(--o6);
  color: var(--szklo);
}

.tresc a {
  text-decoration: underline;
  text-decoration-color: var(--bursztyn-cien);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.tresc a:hover {
  text-decoration-color: var(--bursztyn-blask);
}

.tresc figure {
  margin: var(--o6) 0;
}
.tresc figure img,
.tresc figure svg {
  width: 100%;
  border: 1px solid var(--linia);
  border-radius: var(--kant);
  background: var(--muł);
}
.tresc figcaption {
  margin-top: var(--o2);
  font-family: var(--font-dane);
  font-size: var(--pt-mini);
  color: var(--szklo-mgla);
  line-height: 1.5;
}

.tresc blockquote {
  margin: var(--o5) 0;
  padding: var(--o1) 0 var(--o1) var(--o4);
  border-left: 2px solid var(--zielen);
  color: var(--szklo-cien);
}
.tresc blockquote p:last-child {
  margin-bottom: 0;
}

/* ------------------------------ Tabele --------------------------------- */

.tresc table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--o6) 0;
  font-size: var(--pt-drobna);
  background: var(--muł);
  border: 1px solid var(--linia);
  border-radius: var(--kant);
  overflow: hidden;
}

.tresc thead th {
  padding: var(--o3) var(--o3);
  text-align: left;
  vertical-align: bottom;
  font-family: var(--font-dane);
  font-size: var(--pt-mini);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--bursztyn);
  background: var(--muł-plyciej);
  border-bottom: 1px solid var(--bursztyn-cien);
  white-space: nowrap;
}

.tresc tbody td {
  padding: var(--o3);
  border-bottom: 1px solid var(--linia);
  vertical-align: top;
  color: var(--szklo-cien);
}
.tresc tbody td:first-child {
  color: var(--szklo);
  font-weight: 600;
}
.tresc tbody tr:last-child td {
  border-bottom: 0;
}
.tresc tbody tr:nth-child(even) {
  background: rgba(29, 42, 38, 0.35);
}
.tresc tbody tr:hover {
  background: var(--zielen-mgla);
}

/* Kolumny liczbowe: monospace, wyrównane do prawej, tabelaryczne cyfry */
.tresc td:not(:first-child),
.tresc th:not(:first-child) {
  font-family: var(--font-dane);
  font-variant-numeric: tabular-nums;
}

/* Tabela z długim tekstem w kolumnach — bez monospace */
.tresc .tab-opisowa td:not(:first-child),
.tresc .tab-opisowa th:not(:first-child) {
  font-family: var(--font-tekst);
}

/* Poziome przewijanie na wąskich ekranach */
.przewin {
  overflow-x: auto;
  margin: var(--o6) 0;
  border-radius: var(--kant);
}
.przewin table {
  margin: 0;
  min-width: 520px;
}

/* ------------------------------- Notki --------------------------------- */

.notka {
  position: relative;
  margin: var(--o6) 0;
  padding: var(--o4) var(--o5);
  background: var(--zielen-mgla);
  border: 1px solid var(--zielen-glab);
  border-left: 3px solid var(--zielen);
  border-radius: var(--kant);
  font-size: var(--pt-drobna);
  line-height: 1.6;
}
.notka > *:last-child {
  margin-bottom: 0;
}
.notka::before {
  content: 'NOTKA';
  display: block;
  margin-bottom: var(--o2);
  font-family: var(--font-dane);
  font-size: var(--pt-mini);
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--zielen);
}

.notka--uwaga {
  background: var(--alarm-cien);
  border-color: #46251d;
  border-left-color: var(--alarm);
}
.notka--uwaga::before {
  content: 'UWAGA';
  color: var(--alarm);
}

.notka--arkusz {
  background: var(--bursztyn-cien);
  border-color: #3d2f18;
  border-left-color: var(--bursztyn);
}
.notka--arkusz::before {
  content: 'Z ARKUSZA';
  color: var(--bursztyn);
}

/* ------------------------------- Stopka wpisu -------------------------- */

.wpis__zaktualizowano {
  margin-top: var(--o6);
  font-family: var(--font-dane);
  font-size: var(--pt-mini);
  color: var(--szklo-mgla);
}

.wpis__znaczniki {
  display: flex;
  flex-wrap: wrap;
  gap: var(--o2);
  margin-top: var(--o4);
}

/* Wizytówka autora */
.wizytowka {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--o4);
  align-items: start;
  max-width: var(--szer-kolumny);
  margin-top: var(--o7);
  padding: var(--o5);
  background: var(--muł);
  border: 1px solid var(--linia);
  border-top: 2px solid var(--zielen);
  border-radius: var(--kant);
}

.wizytowka__znak {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: var(--zielen-glab);
  border: 1px solid var(--zielen);
  border-radius: var(--kant);
  font-family: var(--font-dane);
  font-weight: 500;
  color: var(--zielen);
  letter-spacing: 0.05em;
}

.wizytowka__imie {
  margin: 0;
  font-size: var(--pt-wieksza);
  font-weight: 600;
}
.wizytowka__funkcja {
  margin: 2px 0 var(--o3);
  font-family: var(--font-dane);
  font-size: var(--pt-mini);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bursztyn);
}
.wizytowka__nota {
  margin: 0;
  font-size: var(--pt-drobna);
  color: var(--szklo-cien);
}

/* ------------------------------- Stopka -------------------------------- */

.stopka {
  border-top: 1px solid var(--linia);
  background: var(--muł);
  padding-block: var(--o7) var(--o5);
  font-size: var(--pt-mala);
}

.stopka__uklad {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: var(--o6);
}
@media (max-width: 760px) {
  .stopka__uklad {
    grid-template-columns: 1fr;
    gap: var(--o5);
  }
}

.stopka__tytul {
  font-family: var(--font-dane);
  font-size: var(--pt-mini);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bursztyn);
  margin-bottom: var(--o3);
}

.stopka p {
  color: var(--szklo-mgla);
  line-height: 1.6;
  max-width: 46ch;
}

.stopka ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.stopka li {
  margin-bottom: var(--o2);
}
.stopka a {
  color: var(--szklo-cien);
}
.stopka a:hover {
  color: var(--bursztyn-blask);
}

.stopka__kreska {
  margin-top: var(--o6);
  padding-top: var(--o4);
  border-top: 1px solid var(--linia);
  display: flex;
  justify-content: space-between;
  gap: var(--o4);
  flex-wrap: wrap;
  font-family: var(--font-dane);
  font-size: var(--pt-mini);
  color: var(--szklo-mgla);
  letter-spacing: 0.04em;
}

/* ------------------------------- Błąd 404 ------------------------------ */

.awaria {
  padding-block: var(--o9);
  text-align: center;
}
.awaria__kod {
  font-family: var(--font-dane);
  font-size: clamp(3rem, 12vw, 6rem);
  font-weight: 500;
  color: var(--zielen-glab);
  line-height: 1;
  margin-bottom: var(--o4);
}
.awaria p {
  color: var(--szklo-cien);
  max-width: 46ch;
  margin-inline: auto;
}

/* ----------------------------- Wąskie ekrany --------------------------- */

@media (max-width: 900px) {
  .wejscie__uklad {
    grid-template-columns: 1fr;
    gap: var(--o6);
  }
  .wejscie {
    padding-block: var(--o6);
  }
  .wejscie__tytul {
    max-width: none;
  }
}

@media (max-width: 620px) {
  .osnowa {
    padding-inline: var(--o4);
  }
  .pasek__wnetrze {
    min-height: auto;
    padding-block: var(--o3);
    gap: var(--o3);
  }
  .pasek__nawigacja {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .pasek__nawigacja::-webkit-scrollbar {
    display: none;
  }
  .wpis__uklad {
    gap: var(--o5);
  }
}

/* -------------------------------- Druk --------------------------------- */

@media print {
  .pasek,
  .listwa,
  .tabliczka,
  .stopka,
  .wizytowka {
    display: none;
  }
  body {
    background: #fff;
    color: #000;
  }
  .tresc {
    max-width: none;
  }
}