/*
Theme Name: Portal Produkcyjny
Template: generatepress
Author: Agencja Wrocławska
Description: Motyw potomny — kierunek A „Warsztat". Przemysłowa marka techniczna: stal, żółć bezpieczeństwa, grafit.
Version: 1.0
*/

/* ==========================================================================
 * 1. Tokeny i baza
 * ======================================================================== */
:root{
  /* Kierunek A „Warsztat" (decyzja Karola 3.09.2026). Nazwy tokenów zostały
     z pierwszego portalu sieci — to gniazda ról, nie nazwy barw: --teal jest
     głównym akcentem marki, --peach akcentem drugim, --sun barwą sygnałową. */
  --paper:#F5F6F4; --white:#FFFFFF; --mist:#ECEFF1; --mint:#DCE6EE;
  --ink:#1B1F24; --ink-2:#4B5560; --hair:#DDE1E4;
  --teal:#1F4E79; --teal-d:#153858; --teal-l:#5A87B4; --sage:#93A7BA;
  /* --peach i --peach-d stoją w kodzie jako KOLOR TEKSTU (numer w rankingu,
     etykiety, odnośniki do źródeł), więc muszą przejść próg 4,5:1 na białym.
     Żółć ciemna z planu (#B88400) daje tam 3,31:1 i odpada. Zmierzone
     4.09.2026: #8A6208 = 5,48:1, #6E4E06 = 7,84:1. Sama żółć bezpieczeństwa
     #F2B705 zostaje w --sun i pojawia się wyłącznie pod ciemnym tekstem. */
  --peach:#8A6208; --peach-d:#6E4E06; --peach-l:#F2DCA6; --sun:#F2B705;
  --sky:#CBDCEA;
  --disp:'Sora',system-ui,sans-serif; --body:'Source Sans 3',system-ui,sans-serif;
  --sh:0 18px 40px -22px rgba(21,56,88,.45);
  --sh-s:0 10px 26px -18px rgba(21,56,88,.4);

  /* Kolory, które w regułach stały wprost — wyniesione tutaj 4.09.2026,
     żeby cała paleta portalu mieściła się w jednym bloku. */
  --teal-m:#3C6E9E;
  --teal-xd:#0F2B44;
  /* Jaśniejszy stopień gradientu na stronie głównej. #2E6BA0 dawał zajawce
     4,45:1 przy wymaganych 4,5:1 (zmierzone 4.09.2026), stąd ciemniejszy ton. */
  --hero-1:#27608F;
  --grad-b-1:#D8A21E;
  --grad-b-2:#8A5A17;
  --grad-c-1:#4E86B8;
  --ink-3:#6B7683;
  --ink-lead:#2A323A;
  --ink-answer:#262E36;
  --panel-d-1:#1F4E79;
  --panel-d-2:#10293F;
  --panel-tx:#EAF0F5;
  --panel-tx-2:#C2D3E2;
  --panel-tx-3:#C7D7E5;
  --panel-tx-4:#CBDAE7;
  --on-sun:#2A1F00;
  --warn-bg:#FDF3D9;
  --warn-line:#EFD9A2;
  --note-bg:#F2F3F1;
  --note-line:#E0E3DE;
  --note-ic:#6B7683;
  --note-tx:#4B5560;
  /* Kafle działów w kolejności z marka.php: maszyny, transport, serwis,
     przepisy, zakup. Biały tekst na każdym trzyma co najmniej 5,9:1. */
  --k1:#1F4E79;
  --k2:#153858;
  --k3:#3C6E47;
  --k4:#7A3E1D;
  --k5:#5B5F66;
  --k6:#F2B705;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:18px;line-height:1.62;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
/* Szerokość portalu (6.08). Było 1240 px, a artykuł osobno 1200 px — czyli treść
   siedziała w węższej ramce niż nagłówek i stopka. Zmierzone na komputerze 1440 px:
   nasza kolumna tekstu 720 px, Medonet 940 px, Poradnik Zdrowie 932 px; boczna
   kolumna u nich 300 px, u nas 320 px. Jeden numer dla całego portalu — nagłówek,
   strona główna, listy i artykuł trzymają tę samą krawędź.
   RUNDA 2 (decyzja Karola: „dokładnie jak Medonet"): 1300 → 1312 px = 1260 px
   zawartości + 2×26 px marginesu wewnętrznego. Przy ekranie 1440 px tekst zaczyna
   się w 90 px — dokładnie tam, gdzie u Medonetu. */
.wrap{max-width:1312px;margin:0 auto;padding:0 26px}
h1,h2,h3,h4{font-family:var(--disp);font-weight:700;line-height:1.15;
  letter-spacing:-.02em;text-wrap:balance;margin:0}
p{text-wrap:pretty}
.eyebrow{font-family:var(--disp);font-weight:700;font-size:13px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--teal)}
.nowrap{white-space:nowrap}
.sr-only,.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ==========================================================================
 * 2. Nagłówek (sticky + hamburger na telefonie)
 * ======================================================================== */
header.nav{position:sticky;top:0;z-index:20;background:rgba(243,248,245,.9);
  backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--hair)}
/* 07.08.2026 — uwaga Karola: „logo i guzik wyszukiwarki wystają poza marginesy".
   Zmierzone: zawartość belki stała na 64…1376, a cała treść strony na 90…1350,
   czyli belka wystawała o 26 px z każdej strony.
   Przyczyna: było tu `padding:15px 0`, a ten zapis ustawia WSZYSTKIE CZTERY
   strony — więc zerował boczne odstępy 26 px dziedziczone z `.wrap`. Teraz
   ustawiamy tylko górę i dół, a boczne zostają takie jak w treści. Dzięki temu
   belka wyrówna się sama także na telefonie, gdzie `.wrap` ma 18 px. */
.nav-in{display:flex;align-items:center;gap:24px;padding-top:15px;padding-bottom:15px}
.brand{display:flex;align-items:center}
/* Znak marki zawiera kafelek RAZEM z nazwą (rysunek 320×64 od Karola, 07.08).
   Sterujemy tylko wysokością — szerokość dolicza się sama z proporcji. Do 07.08
   było tu `width:38px;height:38px`, bo znak był kwadratowy i napis stał obok
   jako osobny tekst. Klasy `.brand-name` już nie ma w żadnym szablonie. */
.brand-mark{height:38px;width:auto;flex:0 0 auto;display:block}
/* Nazwa obok znaku — tylko gdy znak jej nie zawiera (klucz `nazwa_w_znaku`). */
.brand-name{font-family:var(--disp);font-weight:700;font-size:19px;line-height:1.1;
  letter-spacing:-.01em;color:var(--ink);margin-left:10px;white-space:nowrap}
.brand-name span{color:var(--teal)}
/* Stopka stoi na jasnym tle (--paper), więc nazwa marki bierze te same barwy co
   w nagłówku: --ink i --teal. Do 4.09.2026 było tu białe pismo z żółtym drugim
   słowem — zaszłość z czasów, gdy nazwę niósł rysunek znaku i tej klasy w stopce
   nie było wcale. Na Portalu Produkcyjnym znak nazwy nie zawiera, napis wyszedł
   i okazał się niewidoczny: kontrast 1,08:1 przy wymaganych 4,5:1. */
footer.site .brand-name{font-size:17px}
/* Menu działów (przerobione 07.08 po uwadze Karola „słabo wygląda przy logo").
   Trzy rzeczy naraz:
   1. POŁOŻENIE — `margin:0 auto` stawia menu na środku wolnego pola między
      znakiem a przyciskami. Wcześniej menu przyklejało się do znaku (14 px),
      a do przycisków miało 386 px: środek listy leżał 146 px na lewo od środka
      paska i pasek wyglądał na przechylony w lewo.
   2. WIELKOŚĆ — 16,5 px zamiast 15 px. Napis w znaku ma teraz ~17 px wysokości
      wersalika, więc menu w 15 px czytało się jak podpis, a nie jak nawigacja.
   3. GDZIE JESTEM — pozycja bieżącego działu jest ciemna i podkreślona kreską
      2 px. Do 07.08 wszystkie pozycje wyglądały identycznie i po wejściu w dział
      nic tego nie pokazywało. Kreska rysowana cieniem, nie ramką, żeby nie
      zmieniała wysokości pozycji przy przechodzeniu myszą. */
nav.links{display:flex;gap:30px;margin:0 auto}
nav.links a{font-family:var(--disp);font-weight:600;font-size:16.5px;color:var(--ink-2);
  padding:6px 0;position:relative;white-space:nowrap}
nav.links a:hover{color:var(--teal)}
nav.links a[aria-current]{color:var(--ink);font-weight:700;box-shadow:inset 0 -2px 0 var(--teal)}
/* Bez `margin-left:auto` — inaczej wolne miejsce w pasku dzieli się na TRZY
   części (lewa i prawa strona menu plus lewa strona przycisków) i menu ląduje
   za blisko znaku. Przyciski i tak są dopychane do prawej przez marginesy menu.
   Na telefonie menu wypada z rzędu (rozwija się pod paskiem), więc tam auto
   wraca — patrz sekcja telefonu niżej. */
.nav-tools{display:flex;align-items:center;gap:10px}
.pill{display:inline-flex;align-items:center;gap:8px;border-radius:999px;
  font-family:var(--disp);font-weight:700;font-size:14px;padding:10px 18px}
.pill-ghost{border:1.5px solid var(--hair);color:var(--ink-2);background:var(--white)}
.pill-solid{background:var(--teal);color:#fff}
.burger,.iconbtn{width:44px;height:44px;border-radius:12px;border:1.5px solid var(--hair);
  background:var(--white);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto}
.burger svg,.iconbtn svg{width:21px;height:21px;color:var(--ink)}
.burger{display:none}
.iconbtn:hover{border-color:var(--teal)}
.iconbtn:hover svg{color:var(--teal)}
.navtog,.srchtog{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.srchtog:focus-visible ~ .nav .iconbtn{border-color:var(--teal);box-shadow:0 0 0 3px var(--mint)}
.navtog:focus-visible ~ .nav .burger{border-color:var(--teal);box-shadow:0 0 0 3px var(--mint)}

/* rozwijane pole szukania pod nagłówkiem (wzorzec portali redakcyjnych) */
.navsearch{display:none;border-top:1px solid var(--hair);background:var(--white)}
.srchtog:checked ~ .nav .navsearch{display:block}
.srchtog:checked ~ .nav .iconbtn{background:var(--teal);border-color:var(--teal)}
.srchtog:checked ~ .nav .iconbtn svg{color:#fff}
.navsearch .wrap{padding-top:14px;padding-bottom:14px}
.navsearch form.search{max-width:620px;margin:0 auto}

/* ==========================================================================
 * 3. Formularz szukania (boczna kolumna list + strona wyników)
 *    UWAGA: selektor musi być form.search — WordPress dodaje klasę „search"
 *    także do <body> na stronie wyników.
 * ======================================================================== */
form.search{display:flex;gap:8px;background:var(--white);border:1.5px solid var(--hair);
  border-radius:999px;padding:8px 8px 8px 20px;box-shadow:var(--sh-s);max-width:440px}
form.search input{border:0;outline:0;flex:1;min-width:0;font-family:var(--body);font-size:16px;
  background:transparent;color:var(--ink)}
form.search input::placeholder{color:var(--ink-3)}
form.search button{border:0;background:var(--teal);color:#fff;font-family:var(--disp);
  font-weight:700;font-size:15px;border-radius:999px;padding:11px 22px;cursor:pointer}
.side-mod form.search{padding:4px 4px 4px 14px;box-shadow:none}
.side-mod form.search button{padding:9px 16px;font-size:14px}

/* ==========================================================================
 * 4. Boczna kolumna (sidebar) — serce układu redakcyjnego
 * ======================================================================== */
.side-mod{background:var(--white);border:1px solid var(--hair);border-radius:16px;
  padding:18px 18px 20px;margin-bottom:18px;box-shadow:var(--sh-s)}
.side-mod > h3{font-family:var(--disp);font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--teal-d);margin:0 0 14px;display:flex;align-items:center;gap:8px}
.side-mod > h3 svg{width:16px;height:16px;color:var(--teal);flex:0 0 auto}
.side-list{display:flex;flex-direction:column;gap:14px}
.side-item{display:flex;gap:12px;align-items:flex-start}
.side-item .th{width:64px;height:50px;border-radius:9px;flex:0 0 auto;overflow:hidden}
.side-item .th img{width:100%;height:100%;object-fit:cover}
.side-item:nth-child(3n+1) .th{background:linear-gradient(150deg,var(--teal-m),var(--teal-d))}
.side-item:nth-child(3n+2) .th{background:linear-gradient(150deg,var(--grad-b-1),var(--grad-b-2))}
.side-item:nth-child(3n) .th{background:linear-gradient(150deg,var(--grad-c-1),var(--teal))}
.side-item > span:last-child{display:flex;flex-direction:column;min-width:0}
.side-item .cl{display:block;font-family:var(--disp);font-weight:700;font-size:10.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--teal)}
.side-item .tt{display:block;font-family:var(--disp);font-weight:600;font-size:14.5px;line-height:1.3;margin:2px 0 0;
  color:var(--ink)}
.side-item:hover .tt{color:var(--teal-d)}
.side-rank{counter-reset:r}
.side-rank .side-item{counter-increment:r;align-items:center}
.side-rank .side-item:before{content:counter(r);font-family:var(--disp);font-weight:800;font-size:20px;
  color:var(--mint);width:26px;flex:0 0 auto;text-align:center}
.side-rank .side-item.on:before{color:var(--peach)}

/* karta CTA (uczciwa — bez atrapy formularza) */
.side-cta{background:linear-gradient(160deg,var(--panel-d-1),var(--panel-d-2));color:var(--panel-tx);border:0}
.side-cta h3{color:#fff}
.side-cta p{font-size:14px;color:var(--panel-tx-2);margin:0 0 14px;line-height:1.5}
.side-cta .btn{display:inline-flex;align-items:center;gap:8px;background:var(--sun);color:var(--on-sun);
  font-family:var(--disp);font-weight:700;font-size:14px;border-radius:999px;padding:11px 18px}

/* tagi */
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags a{font-family:var(--disp);font-weight:600;font-size:13px;color:var(--teal-d);background:var(--mint);
  border-radius:999px;padding:6px 12px}
.tags a:hover{background:var(--teal);color:#fff}

/* ==========================================================================
 * 5. Karty artykułów (home, listy, „Powiązane")
 * ======================================================================== */
.card{background:var(--white);border-radius:18px;overflow:hidden;box-shadow:var(--sh-s);color:inherit;display:block}
.card .pic{height:150px;position:relative}
.card:nth-child(3n+1) .pic{background:linear-gradient(150deg,var(--teal-m),var(--teal-d))}
.card:nth-child(3n+2) .pic{background:linear-gradient(150deg,var(--grad-b-1),var(--grad-b-2))}
.card:nth-child(3n) .pic{background:linear-gradient(150deg,var(--grad-c-1),var(--teal))}
.card .pic svg,.card .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card .b{padding:16px 18px 18px}
.card .cl{font-family:var(--disp);font-weight:700;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--teal)}
.card h3{font-size:18px;margin:7px 0 0;letter-spacing:-.01em;line-height:1.25}
.card:hover h3{color:var(--teal-d)}
/* 6.08: reguły `.card .meta` skasowane razem z podpisem i czasem czytania
   na kartach. `.av` (kółko „PZ") zostaje — używa go byline i notka redakcji
   na stronie artykułu. */
.av{width:38px;height:38px;border-radius:50%;background:var(--teal);color:#fff;
  font-family:var(--disp);font-weight:700;font-size:14px;display:flex;
  align-items:center;justify-content:center;flex:0 0 auto}

/* karta pozioma (miniatura z lewej) */
.row-card{display:flex;gap:16px;background:var(--white);border-radius:16px;overflow:hidden;
  box-shadow:var(--sh-s);color:inherit}
.row-card .pic{width:180px;flex:0 0 auto;position:relative;background:linear-gradient(150deg,var(--teal-m),var(--teal-d))}
.row-card:nth-child(2n) .pic{background:linear-gradient(150deg,var(--grad-b-1),var(--grad-b-2))}
.row-card .pic svg,.row-card .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.row-card .b{padding:16px 18px 16px 4px;min-width:0}
.row-card .cl{font-family:var(--disp);font-weight:700;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--teal)}
.row-card h3,.row-card h2{font-size:20px;margin:6px 0 0;line-height:1.25}
.row-card:hover h3,.row-card:hover h2{color:var(--teal-d)}
.row-card p{font-size:14.5px;color:var(--ink-2);margin:8px 0 0;line-height:1.5}

/* nagłówek sekcji z linkiem „zobacz wszystkie" */
.sec-bar{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;
  margin:0 0 20px;border-bottom:2px solid var(--hair);padding-bottom:12px}
.sec-bar h2{font-size:clamp(22px,2.6vw,28px);min-width:0}
.sec-bar .more{font-family:var(--disp);font-weight:700;font-size:14px;color:var(--teal);white-space:nowrap}
.sec-bar .more:hover{color:var(--teal-d)}
.cat-accent{width:9px;height:9px;border-radius:50%;background:var(--peach);display:inline-block;margin-right:9px;vertical-align:middle}

.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid1{display:grid;grid-template-columns:1fr;gap:20px}

/* ==========================================================================
 * 6. Strona główna — układ „Magazyn"
 * ======================================================================== */
.hero-mag{display:grid;grid-template-columns:1.55fr 1fr;gap:30px;padding:30px 0 10px;align-items:stretch}
.hero-mag.solo{grid-template-columns:1fr}
.lead-story{position:relative;border-radius:22px;overflow:hidden;min-height:420px;display:flex;
  align-items:flex-end;box-shadow:var(--sh);
  background:radial-gradient(120% 120% at 25% 15%,var(--teal-m) 0%,var(--teal) 55%,var(--teal-xd) 100%)}
.lead-story svg.bg{position:absolute;inset:0;width:100%;height:100%}
.lead-story .bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* Ciemna powłoka na CAŁYM kadrze — gęsta u dołu, znika u góry. Wcześniej
   przyciemnienie siedziało na .body (tylko dół), przez co na styku widać było
   ostrą poziomą linię. Wiele przystanków = płynne przejście bez pasów. */
.lead-story::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,
    rgba(15,42,34,.92) 0%, rgba(15,42,34,.88) 10%, rgba(15,42,34,.78) 22%,
    rgba(15,42,34,.62) 36%, rgba(15,42,34,.44) 50%, rgba(15,42,34,.27) 64%,
    rgba(15,42,34,.14) 78%, rgba(15,42,34,.05) 90%, rgba(15,42,34,0) 100%)}
.lead-story .body{position:relative;z-index:2;padding:34px 32px 30px;color:#fff;width:100%}
.lead-story .tag{display:inline-block;background:var(--sun);color:var(--on-sun);font-family:var(--disp);
  font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:5px 12px}
.lead-story h2{color:#fff;font-size:clamp(26px,3.2vw,36px);margin:14px 0 0;letter-spacing:-.02em}
/* Zajawka „Tematu tygodnia" (6.08): 46 → 60 znaków w wierszu. Przy 46 znakach
   tekst zajmował 366 px w polu szerokim na 740 px — mniej niż połowę — i wyglądał
   jak wciśnięty w lewy róg zdjęcia. Nie na całą szerokość, bo biały tekst na
   zdjęciu czyta się gorzej niż na papierze. */
.lead-story p{color:var(--mint);font-size:16px;margin:12px 0 0;max-width:60ch}
/* Lista „Najnowsze" obok Tematu tygodnia (27.07, wersja A wybrana przez Karola):
   miniaturka 86×64, cztery pozycje, wysokość równa wysokości dużego materiału. */
.tl{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--hair);
  border-radius:18px;box-shadow:var(--sh-s);padding:16px 18px;min-height:420px}
.tl .sh-head{font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--teal-d);display:flex;align-items:center;gap:8px;margin:0 0 8px}
.tl .sh-head .cat-accent{margin:0}
/* 07.08.2026 — uwaga Karola: „za duże przerwy między artykułami, za małe zdjęcia".
   Zmierzone przed poprawką: zdjęcie 86×64, a przerwa między zdjęciami 52 px —
   odstęp był prawie tak duży jak samo zdjęcie.
   Przyczyna: pole musi mieć tę samą wysokość co baner obok (420 px), a wolne
   miejsce szło w CAŁOŚCI w przerwy (`space-between`). Teraz wolne miejsce
   zabierają ZDJĘCIA: każdy wiersz dostaje równą część wysokości (`flex:1`),
   a zdjęcie rozciąga się na całą wysokość swojego wiersza. Przerwy są stałe
   i wąskie (10 px). Dzięki temu przy trzech poradnikach zdjęcia są duże, a przy
   czterech same się zmniejszą — bez dziur i bez ręcznego dobierania wartości. */
.tl ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;flex:1;gap:10px}
.tl li{flex:1;min-height:0}
.tl li a{display:flex;gap:14px;align-items:center;height:100%}
.tl .th{width:124px;align-self:stretch;min-height:64px;border-radius:12px;flex:0 0 auto;overflow:hidden;
  background:linear-gradient(150deg,var(--teal-m),var(--teal-d))}
.tl .th img{width:100%;height:100%;object-fit:cover}
.tl .tx{display:flex;flex-direction:column;min-width:0}
.tl .cl{font-family:var(--disp);font-weight:700;font-size:10.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--teal);margin-bottom:2px}
.tl .ti{font-family:var(--disp);font-weight:600;font-size:15.5px;line-height:1.28;color:var(--ink)}
.tl li a:hover .ti{color:var(--teal)}
/* Odnośnik „Zobacz wszystkie poradniki" na dole pola (07.08). Odkreślony górną
   kreską włosową, żeby czytał się jako stopka pola, a nie kolejna pozycja listy.
   14 px, nie mniej — poniżej 13 px odnośnik przestaje wyglądać na klikalny. */
.tl-more{display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--hair);
  font-family:var(--disp);font-weight:700;font-size:14px;color:var(--teal-d)}
.tl-more:hover{color:var(--teal)}

.side-stack{display:flex;flex-direction:column;gap:14px}
.side-stack .sh-head{font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--teal-d);display:flex;align-items:center;gap:8px;margin:0 0 2px}
.side-stack .sh-head .cat-accent{margin:0}
.mini{display:flex;gap:13px;align-items:center;background:var(--white);border:1px solid var(--hair);
  border-radius:14px;padding:10px 12px;box-shadow:var(--sh-s)}
.mini .th{width:74px;height:62px;border-radius:10px;flex:0 0 auto;overflow:hidden;
  background:linear-gradient(150deg,var(--teal-m),var(--teal-d))}
.mini .th img{width:100%;height:100%;object-fit:cover}
.mini > span:last-child{display:flex;flex-direction:column;min-width:0}
.mini .cl{display:block;font-family:var(--disp);font-weight:700;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--teal)}
.mini .tt{display:block;font-family:var(--disp);font-weight:600;font-size:15px;line-height:1.3;margin-top:3px}
.mini small{display:block;color:var(--ink-2);font-size:12px;margin-top:3px}
.mini:hover .tt{color:var(--teal-d)}

/* pasek kategorii (kompaktowy) — kolorowy: każda sekcja swój kolor (Wariant 1) */
.cat-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:30px 0 6px;scroll-margin-top:84px}
/* Kierunek B (wybór Karola 27.07): kafel o połowę niższy, ikona wyjęta
   z półprzezroczystego pudełka i powiększona, nazwa obok niej w jednym rzędzie. */
.cat-chip{display:flex;align-items:center;gap:13px;border:none;border-radius:14px;
  padding:16px;min-height:74px;box-shadow:var(--sh-s);transition:transform .16s,box-shadow .16s;color:#fff}
.cat-chip:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.cat-chip > svg{width:30px;height:30px;flex:0 0 auto;opacity:.95}
/* nazwa tematu na kaflu — do 28.07 był tu <h3>, czyli nagłówek użyty do
   stylowania paska nawigacji; te same własności, tylko bez nagłówka */
.cat-chip .nm{font-family:var(--disp);font-weight:700;font-size:15px;color:#fff;
  line-height:1.2;letter-spacing:-.02em;text-wrap:balance;margin:0}
.cat-chip.k1{background:var(--k1)}
.cat-chip.k2{background:var(--k2)}
.cat-chip.k3{background:var(--k3)}
.cat-chip.k4{background:var(--k4)}
.cat-chip.k5{background:var(--k5)}
.cat-chip.k6{background:var(--k6);color:var(--ink)}
.cat-chip.k6 .nm{color:var(--ink)}

/* główny obszar home: sekcje + boczna kolumna */
.home-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:44px;align-items:start;padding:34px 0 10px}
.home-side{position:sticky;top:84px}
.cat-sec{margin-bottom:40px}
.cat-sec:last-child{margin-bottom:10px}
/* „Najnowsze artykuły" — serce strony (pełna szerokość, pod paskiem tematów) */
.home-latest{margin-top:34px}

/* wąski pas popularnych tematów — pełna szerokość, zamiast bocznej kolumny */
.tagstrip-sec{padding:6px 0 4px}
.tagstrip{background:var(--white);border:1px solid var(--hair);border-radius:16px;box-shadow:var(--sh-s);
  padding:16px 22px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.tagstrip .ts-label{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:700;
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-d)}
.tagstrip .ts-label svg{width:16px;height:16px;color:var(--teal);flex:0 0 auto}
.tagstrip .tags{gap:8px}

/* pas zaufania */
.tband-sec{padding:10px 0 50px}
.trustband{background:linear-gradient(160deg,var(--panel-d-1),var(--panel-d-2));color:var(--panel-tx);border-radius:26px;
  padding:44px 40px;display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:center}
.trustband .eyebrow{color:var(--sun)}
.trustband h2{color:#fff;font-size:clamp(24px,3vw,32px);margin-top:12px}
.trustband .tlead{color:var(--panel-tx-2);font-size:17px;margin:14px 0 22px;max-width:42ch}
.trustband .tcta{background:var(--sun);color:var(--on-sun);font-family:var(--disp);font-weight:700;
  border-radius:999px;padding:13px 24px;display:inline-flex;gap:9px;align-items:center;font-size:15px}
.tmetrics{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tmetrics .cell{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:18px}
.tmetrics .cell b{font-family:var(--disp);font-size:16px;color:#fff;display:block}
.tmetrics .cell p{font-size:13.5px;color:var(--panel-tx-3);margin:5px 0 0}

/* ==========================================================================
 * 7. Strony list (kategoria / wyniki / archiwa)
 * ======================================================================== */
.lhead{padding:26px 26px 4px}
/* Ścieżka nawigacji na listach (30.07). Artykuł miał ją od początku, listy nie —
   czytelnik wchodzący z wyszukiwarki nie wiedział, gdzie na portalu jest.
   Ten sam wygląd co ścieżka w artykule (.pzart .crumbs), żeby nie budować
   drugiego stylu na to samo. */
.lhead .crumbs{font-size:13.5px;color:var(--ink-2);font-family:var(--disp);font-weight:500;margin:0 0 6px}
.lhead .crumbs a{color:var(--ink-2)}
.lhead .crumbs a:hover{text-decoration:underline}
.lhead .crumbs span{color:var(--teal);font-weight:600}
.lhead h1{font-size:clamp(28px,3.6vw,40px);letter-spacing:-.03em;margin-top:10px}
/* Opis działu (6.08): 62 → 78 znaków w wierszu. Przy 62 zajmował 524 px pod
   nagłówkiem szerokim na 1300 px i łamał się na dwa krótkie wiersze. */
.lhead .ldesc{color:var(--ink-2);font-size:17px;margin:12px 0 0;max-width:78ch}
.lhead .lcount{font-family:var(--disp);font-weight:600;font-size:13.5px;color:var(--ink-2);margin:12px 0 0}
/* Odstęp główna↔boczna zrównany z artykułem (6.08): 44 → 20 px, jak u Medonetu.
   Listy i artykuł mają teraz tę samą siatkę. */
.list-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start;padding-top:22px;padding-bottom:44px}
.list-side{position:sticky;top:84px}
.list-flow{display:flex;flex-direction:column;gap:18px;min-width:0}
.notfound{background:var(--white);border:1px solid var(--hair);border-radius:16px;padding:26px 28px;box-shadow:var(--sh-s)}
.notfound h2{font-size:22px}
.notfound p{color:var(--ink-2);font-size:16px;margin:10px 0 18px}
.pager{margin-top:14px}
.pager .nav-links{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pager .page-numbers{font-family:var(--disp);font-weight:700;font-size:14px;border-radius:999px;
  padding:9px 16px;background:var(--white);border:1px solid var(--hair);color:var(--ink-2)}
.pager .page-numbers.current{background:var(--teal);color:#fff;border-color:var(--teal)}
.pager a.page-numbers:hover{color:var(--teal);border-color:var(--teal)}
.pager .page-numbers.dots{border:0;background:transparent}

/* ==========================================================================
 * 8. Artykuł (single.php) — układ „Portal": treść + prawa kolumna
 *    Zakres .pzart, by nie kolidować z resztą strony.
 * ======================================================================== */
/* Szerokość czytania (6.08). Strony bez bocznej kolumny (O portalu, Polityka,
   Kalkulator BMI) miały 760 px ramki = 708 px tekstu. Teraz 992 px ramki = 940 px
   tekstu, czyli tyle samo, ile w artykule — jedna szerokość czytania w portalu. */
.pzart{max-width:992px;margin:0 auto;padding:0 26px}
/* Artykuł: ramka równa reszcie portalu (1312 px), boczna kolumna 320 → 300 px
   i odstęp 52 → 20 px — dokładnie proporcje Medonetu (zmierzone: boczna 300 px,
   odstęp 20 px, kolumna tekstu 940 px). Efekt: 720 → 940 px, o 31 % więcej treści.
   Rachunek: 1312 − 2×26 marginesu − 300 bocznej − 20 odstępu = 940. */
.pzart.art-shell{max-width:1312px;display:grid;grid-template-columns:minmax(0,1fr) 300px;
  gap:20px;align-items:start;padding:0 26px 10px}
.art-main{min-width:0}
/* Bez własnego ograniczenia szerokości czytania — kolumna bierze tyle, ile zostaje
   z ramki po bocznej kolumnie. Wcześniej sztywne 720 px zostawiało 56 px pustych
   wewnątrz własnej kolumny. */
.art-side{position:sticky;top:84px;min-width:0}
.pzart h1,.pzart h2,.pzart h3,.pzart h4{line-height:1.18}
.pzart .crumbs{font-size:13.5px;color:var(--ink-2);padding:26px 0 0;font-family:var(--disp);font-weight:500}
.pzart .crumbs a{color:var(--ink-2)}.pzart .crumbs span{color:var(--teal);font-weight:600}
.pzart .cat-lab{font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--teal);margin-top:22px}
.pzart h1.title{font-size:clamp(30px,4.2vw,42px);letter-spacing:-.03em;margin-top:10px;line-height:1.12}
.pzart .byline{display:flex;flex-wrap:wrap;align-items:center;gap:13px;margin:20px 0 0;padding:16px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.pzart .av{width:46px;height:46px;border-radius:50%;background:var(--teal);color:#fff;font-family:var(--disp);font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.pzart .who b{font-family:var(--disp);font-size:15px}.pzart .who small{display:block;color:var(--ink-2);font-size:13px}
.pzart .rev{display:inline-flex;align-items:center;gap:7px;background:var(--mint);color:var(--teal-d);border-radius:999px;padding:7px 13px;font-family:var(--disp);font-weight:700;font-size:12.5px;white-space:nowrap}
.pzart .rev svg{width:14px;height:14px}
.pzart .dates{width:100%;font-size:12.5px;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:6px 18px}
.pzart .dates b{color:var(--ink);font-weight:600}
.pzart .hero-img{height:340px;border-radius:20px;margin:24px 0;position:relative;overflow:hidden;
  background:radial-gradient(120% 120% at 30% 20%,var(--hero-1) 0%,var(--teal) 60%,var(--teal-d) 100%)}
.pzart .hero-img svg,.pzart .hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pzart .keyfacts{background:var(--white);border:1px solid var(--hair);border-left:4px solid var(--teal);border-radius:14px;padding:22px 24px;margin:26px 0;box-shadow:var(--sh-s)}
.pzart .keyfacts h2{font-size:15px;font-family:var(--disp);letter-spacing:.02em;color:var(--teal-d);display:flex;align-items:center;gap:9px}
.pzart .keyfacts h2 svg{width:18px;height:18px;color:var(--teal)}
.pzart .keyfacts ul{margin:14px 0 0;padding:0 0 0 4px;list-style:none}
.pzart .keyfacts li{position:relative;padding:6px 0 6px 26px;font-size:16.5px}
.pzart .keyfacts li:before{content:"";position:absolute;left:2px;top:14px;width:8px;height:8px;border-radius:50%;background:var(--peach)}
.pzart .toc{background:var(--mist);border-radius:14px;padding:18px 22px;margin:24px 0}
.pzart .toc b{font-family:var(--disp);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.pzart .toc ol{margin:10px 0 0;padding-left:20px;columns:2;column-gap:26px;font-size:15px}
.pzart .toc a{color:var(--teal-d)}
.pzart .lead{font-size:21px;line-height:1.55;color:var(--ink-lead);margin:24px 0;text-wrap:pretty}
.pzart article h2{font-size:clamp(23px,3vw,29px);margin:38px 0 8px;scroll-margin-top:88px}
.pzart article h3{font-size:20px;margin:26px 0 6px}
/* Rytm tekstu (30.07). Było 12 px przerwy między akapitami przy wierszu
   wysokim na 30 px — czyli przerwa MNIEJSZA niż jedna trzecia wiersza.
   Akapity zlewały się w jeden blok („treść jest ściśnięta"). Zmierzone,
   nie oszacowane. Teraz przerwa to ok. 3/4 wysokości wiersza — akapit widać
   jako osobną myśl, a tekst nie robi się rozstrzelony. */
.pzart article p{margin:22px 0;line-height:1.68}
.pzart article ul,.pzart article ol{margin:22px 0;padding-left:22px;line-height:1.6}
.pzart article li{margin:6px 0}
.pzart article a{color:var(--teal-d);text-decoration:underline}
.pzart article strong,.pzart article b{font-weight:700}
.pzart .answer{font-size:19px;color:var(--ink-answer);font-weight:500}
.pzart .stat{background:var(--white);border:1px solid var(--hair);border-radius:12px;padding:16px 20px;margin:20px 0;display:flex;gap:15px;align-items:flex-start}
.pzart .stat .big{font-family:var(--disp);font-weight:800;font-size:30px;color:var(--teal);line-height:1;flex:0 0 auto}
.pzart .stat p{margin:0;font-size:15px;color:var(--ink-2)}
.pzart .stat sup a{color:var(--peach-d);font-weight:700;text-decoration:none;font-size:12px}
.pzart .callout{border-radius:12px;padding:16px 20px;margin:20px 0;font-size:16px;display:flex;gap:13px}
.pzart .callout svg{width:22px;height:22px;flex:0 0 auto;margin-top:2px}
.pzart .callout.info{background:var(--mist);border:1px solid var(--mint)}
.pzart .callout.info svg{color:var(--teal)}
.pzart .callout.warn{background:var(--warn-bg);border:1px solid var(--warn-line)}
.pzart .callout.warn svg{color:var(--peach-d)}
.pzart .callout b{font-family:var(--disp)}
.pzart blockquote.expert{margin:26px 0;padding:22px 24px;background:linear-gradient(155deg,var(--panel-d-1),var(--panel-d-2));color:var(--panel-tx);border-radius:16px}
.pzart blockquote.expert p{font-size:19px;line-height:1.5;margin:0;font-style:italic}
.pzart blockquote.expert .cite{display:flex;align-items:center;gap:11px;margin-top:16px;font-style:normal}
.pzart blockquote.expert .cite .av{background:rgba(255,255,255,.16)}
.pzart blockquote.expert .cite b{font-family:var(--disp);font-size:14.5px;color:#fff}
.pzart blockquote.expert .cite small{color:var(--panel-tx-4);font-size:12.5px;display:block}
.pzart .readalso{background:var(--white);border:1px dashed var(--peach-l);border-radius:14px;
  padding:16px 20px;margin:28px 0}
.pzart .readalso b{font-family:var(--disp);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--peach-d)}
.pzart .readalso ul{margin:10px 0 0;padding:0;list-style:none}
.pzart .readalso li{margin:7px 0;padding-left:20px;position:relative}
.pzart .readalso li:before{content:"→";position:absolute;left:0;color:var(--peach-d);font-weight:700}
.pzart .readalso a{font-family:var(--disp);font-weight:600;font-size:15.5px;color:var(--teal-d);text-decoration:none}
.pzart .readalso a:hover{text-decoration:underline}
.pzart .faq{margin:20px 0}
.pzart .faq details{background:var(--white);border:1px solid var(--hair);border-radius:12px;padding:4px 20px;margin:10px 0}
.pzart .faq summary{font-family:var(--disp);font-weight:700;font-size:17px;padding:14px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center}
.pzart .faq summary::-webkit-details-marker{display:none}
.pzart .faq summary:after{content:"+";color:var(--teal);font-size:22px;font-weight:400}
.pzart .faq details[open] summary:after{content:"–"}
.pzart .faq details[open] summary{border-bottom:1px solid var(--hair)}
.pzart .faq p{margin:12px 0 16px;font-size:16.5px}
.pzart .disclaimer{display:flex;gap:12px;background:var(--note-bg);border:1px solid var(--note-line);border-radius:12px;padding:16px 20px;margin:30px 0;font-size:14.5px;color:var(--note-tx)}
.pzart .disclaimer svg{width:20px;height:20px;flex:0 0 auto;color:var(--note-ic);margin-top:2px}
.pzart .sources h2{font-size:19px;display:flex;align-items:center;gap:10px}
.pzart .sources .count{font-family:var(--disp);font-size:13px;background:var(--mint);color:var(--teal-d);border-radius:999px;padding:3px 11px;font-weight:700}
.pzart .sources ol{font-size:14.5px;color:var(--ink-2);line-height:1.5;padding-left:22px;margin:14px 0}
.pzart .sources li{margin:8px 0}.pzart .sources a{color:var(--teal-d)}
.pzart .review-how{margin:16px 0 0}
.pzart .review-how summary{font-family:var(--disp);font-weight:700;color:var(--teal-d);cursor:pointer;font-size:15px}
.pzart .review-how p{font-size:14.5px;color:var(--ink-2);margin:10px 0 0}
.pzart .authorbox{display:flex;gap:18px;background:var(--white);border:1px solid var(--hair);border-radius:16px;padding:22px;margin:30px 0;box-shadow:var(--sh-s)}
.pzart .authorbox .av{width:64px;height:64px;font-size:22px}
.pzart .authorbox h4,.pzart .authorbox h3{font-family:var(--disp);font-size:17px;margin:0}
.pzart .authorbox .role{color:var(--teal);font-weight:600;font-size:13.5px;font-family:var(--disp)}
.pzart .authorbox p{font-size:14.5px;color:var(--ink-2);margin:8px 0 0}

/* strony zaufania (page.php) — sama kolumna czytania, bez bocznej kolumny.
   Klasa własna .pzpage, NIE goła .page — WordPress dodaje „page" do <body>. */
.pzart.pzpage{padding-bottom:56px}
/* na stronie treść siedzi w <article>, więc nagłówek ramki „W skrócie" łapałby
   odstęp 38 px od reguły .pzart article h2 — ramka ma własny padding. */
.pzart .keyfacts h2{margin:0}
.pzart .pagemeta{display:flex;flex-wrap:wrap;gap:6px 18px;margin:20px 0 0;padding:14px 0;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  font-family:var(--disp);font-size:12.5px;color:var(--ink-2)}
.pzart .pagemeta b{color:var(--ink);font-weight:600}

/* „Powiązane artykuły" pod artykułem */
.pzrel{padding:20px 0 34px}

/* ==========================================================================
 * 9. Stopka
 * ======================================================================== */
footer.site{padding:48px 0 28px;color:var(--ink-2);font-size:14.5px;background:var(--paper);border-top:1px solid var(--hair)}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px;
  padding-bottom:26px;border-bottom:1px solid var(--hair)}
/* Znak w stopce (07.08) — do tej pory stała tu sama nazwa tekstem, bez znaku.
   Odrobinę niższy niż w nagłówku: stopka jest strefą pomocniczą i znak nie ma
   z niej krzyczeć. */
footer.site .brand-mark{height:34px}
footer.site .ftag{margin-top:12px;max-width:32ch;line-height:1.5}
footer.site h4,footer.site h2{font-family:var(--disp);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--teal-d);margin:0 0 13px;font-weight:700}
footer.site ul{margin:0;padding:0}footer.site li{list-style:none;margin:0 0 9px}
footer.site a:hover{color:var(--teal)}
.foot-bot{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  padding-top:18px;font-size:12.5px}
.disc{max-width:60ch;line-height:1.55}
}

/* ==========================================================================
 * 10. Media queries
 * ======================================================================== */
@media(max-width:980px){
  .pzart.art-shell{grid-template-columns:1fr;gap:6px}
  .art-side{position:static;margin-top:20px}
  .hero-mag{grid-template-columns:1fr;gap:20px}
  .tl{min-height:0}
  .grid4{grid-template-columns:repeat(3,1fr)}
  .cat-strip{grid-template-columns:repeat(3,1fr)}
  .home-body{grid-template-columns:1fr;gap:10px}
  .home-side{position:static;margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
  .grid3{grid-template-columns:1fr 1fr}
  .list-body{grid-template-columns:1fr}
  .list-side{position:static;margin-top:26px}
}
@media(max-width:900px){
  .nav-cta{display:none}
  .burger{display:inline-flex}
  .navsearch form.search{max-width:none}
  /* Menu wypada z rzędu (rozwija się pod paskiem), więc to przyciski muszą
     dopchnąć się do prawej same. Na szerokim ekranie robią to marginesy menu. */
  .nav-tools{margin-left:auto}
  nav.links{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;
    gap:0;margin:0;background:var(--white);border-bottom:1px solid var(--hair);
    box-shadow:var(--sh-s);padding:6px 26px 14px}
  .navtog:checked ~ .nav nav.links{display:flex}
  nav.links a{padding:13px 2px;font-size:16px;border-bottom:1px solid var(--hair)}
  nav.links a:last-child{border-bottom:0}
  /* Na rozwijanej liście kreska pod pozycją zderzałaby się z kreską dzielącą
     wiersze — bieżący dział pokazujemy samym kolorem i grubszym pismem. */
  nav.links a[aria-current]{box-shadow:none;color:var(--teal-d)}
  .foot-top{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  .trustband{grid-template-columns:1fr;gap:26px;padding:34px 26px}
  .grid4{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .cat-strip{grid-template-columns:1fr 1fr}
  .grid4,.grid3,.grid2{grid-template-columns:1fr}
  .home-side{grid-template-columns:1fr}
  .row-card .pic{width:110px}
  .row-card h3,.row-card h2{font-size:17px}
  .pzart .hero-img{height:220px}
  .lead-story{min-height:340px}
}
@media(max-width:560px){
  body{font-size:17px}.wrap{padding:0 18px}
  /* Pasek górny na wąskim telefonie (6.08). Przy ekranie 360 px logo i dwa
     guziki nie mieściły się w wierszu i wypychały CAŁĄ stronę o 14 px w bok
     (przewijanie poziome na każdej podstronie). Zmierzone, nie oszacowane:
     do dyspozycji 324 px, potrzebne 338 px. Nazwa marki skaluje się teraz
     z szerokością ekranu, znak i odstępy są mniejsze. Guziki ZOSTAJĄ 44 px —
     to minimalny wygodny cel dotyku, nie wolno go zmniejszać dla układu. */
  /* 🔴 Odstęp góra-dół trzeba tu WPISAĆ PONOWNIE. Wiersz wyżej `.wrap{padding:0 18px}`
     to zapis skrócony — ustawia wszystkie cztery strony, więc zeruje odstęp
     pionowy belki, choć dotyczy tylko bocznych. Zmierzone 07.08: belka miała
     na telefonie 45 px wysokości, a znak dotykał górnej i dolnej krawędzi.
     11 px zamiast 15 px jak na komputerze — na telefonie belka ma zabierać
     mniej miejsca, bo ekran jest krótszy. */
  .nav-in{gap:12px;padding-top:11px;padding-bottom:11px}
  /* Znak z powiększonym napisem (07.08) jest szeroki: 1 px wysokości to 6,94 px
     szerokości. Przy stałej wysokości 32 px zająłby 222 px i na wąskim telefonie
     wszedłby na przyciski. Dlatego wysokość schodzi razem z szerokością ekranu.
     Współczynnik 8,11 wyliczony z NAJCIAŚNIEJSZEGO przypadku: na ekranie 320 px
     zostaje 188 px miejsca (resztę biorą szukajka i menu — po 44 px, czyli
     minimalny wygodny cel dotyku, którego nie wolno zmniejszać), więc znak może
     mieć tam najwyżej 26 px wysokości. Górna granica 32 px = jak było. */
  .brand-mark{height:clamp(22px,8.11vw,32px)}
  .brand-name{font-size:clamp(15px,4.6vw,17px);margin-left:8px}
  footer.site .brand-mark{height:clamp(22px,8.11vw,30px)}
  .nav-tools{gap:8px}
  .lhead{padding-left:18px;padding-right:18px}
  /* Artykuł na telefonie trzymał 26 px marginesu, bo reguła z dwiema klasami
     (.pzart.art-shell) była mocniejsza niż ta z jedną. Tekst artykułu był przez to
     o 16 px węższy niż tekst zwykłej strony. Zmierzone przy 390 px: artykuł 338 px,
     strona 354 px. Teraz obie mają 354 px. */
  .pzart,.pzart.art-shell{padding-left:18px;padding-right:18px}
  .foot-top{grid-template-columns:1fr}
  .pzart .toc ol{columns:1}
}
@media(max-width:460px){
  .tmetrics{grid-template-columns:1fr}
}
/* Najwęższe telefony (6.08). Przy 320 px dwa kafle tematów w rzędzie nie mieszczą
   nazwy „Choroby i dolegliwości" (spacja przed „dolegliwości" jest nierozdzielna,
   więc słowo nie może się złamać) — pasek wypychał stronę o 29 px w bok.
   Poniżej 380 px kafle idą jeden pod drugim. */
@media(max-width:380px){
  .cat-strip{grid-template-columns:1fr}
}