/* =====================================================================
   Marszruta — arkusz motywu
   Konstrukcja: rama tożsamości (kolor marki) po lewej + tor treści (biel).
   Tokeny barw: tokeny.css. Skala i decyzje układowe: DESIGN.md.
   ===================================================================== */

/* ── Krój ──────────────────────────────────────────────────────────── */
@font-face {
	font-family: 'Schibsted Grotesk';
	src: url('../fonts/schibsted-grotesk.woff2') format('woff2-variations');
	font-weight: 400 900;
	font-style: normal;
	font-display: swap;
	/* Zapas metryczny: bez tego podmiana kroju przesuwa układ (CLS). */
	size-adjust: 100%;
	ascent-override: 96%;
	descent-override: 24%;
	line-gap-override: 0%;
}

/* ── Miary układu ──────────────────────────────────────────────────── */
:root {
	--rama-szer: clamp(19rem, 25vw, 23.5rem);
	--pasek-wys: 4rem;                  /* wysokość paska marki poniżej 1080 px */
	--tor-bok: clamp(1.1rem, 5vw, 5rem);
	--miara: 36rem;                     /* ok. 65 znaków przy 1,125 rem */
	--rytm: clamp(4.5rem, 8vw, 8rem);   /* odstęp między polami */
	--rytm-maly: clamp(2.25rem, 4vw, 3.5rem);

	/* Skok między stopniami jest celowo duży (ok. 1,4): przy skali 1,25 nagłówek
	   sekcji i nazwa pozycji różniły się na tyle mało, że strona czytała się
	   jak jedna płaska lista. */
	--t-xxl: clamp(2.6rem, 6vw, 4.6rem);
	--t-xl: clamp(2.05rem, 4vw, 3rem);
	--t-l: clamp(1.4rem, 2.4vw, 1.9rem);
	--t-lead: clamp(1.1875rem, 1.5vw, 1.3125rem);
	--t-m: 1.125rem;
	--t-s: 1rem;
	--t-xs: 0.875rem;

	--krzywa: cubic-bezier(0.16, 1, 0.3, 1);
	--czas: 320ms;
	--czas-szybki: 180ms;

	--z-tresc: 1;
	--z-rama: 60;
	--z-panel: 70;
	--z-pominiecie: 90;
}

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

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

body {
	margin: 0;
	background: var(--tlo);
	color: var(--atrament);
	font-family: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
	font-size: var(--t-m);
	font-weight: 400;
	line-height: 1.62;
	font-feature-settings: 'kern' 1, 'liga' 1;
	text-rendering: optimizeLegibility;
	overflow-wrap: break-word;
}

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

a {
	color: var(--marka);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color var(--czas-szybki) var(--krzywa);
}

a:hover {
	color: var(--marka-ciemna);
}

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

::selection {
	background: var(--marker);
	color: var(--atrament);
}

h1,
h2,
h3,
h4 {
	margin: 0 0 0.5em;
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

h1 { font-size: var(--t-xxl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-l); letter-spacing: -0.015em; line-height: 1.22; }
h4 { font-size: var(--t-m); letter-spacing: -0.01em; }

p {
	margin: 0 0 1.15em;
	text-wrap: pretty;
}

ul,
ol {
	margin: 0 0 1.15em;
	padding-left: 1.25em;
}

li {
	margin-bottom: 0.4em;
}

hr {
	border: 0;
	border-top: 1px solid var(--linia);
	margin: var(--rytm-maly) 0;
}

blockquote {
	margin: var(--rytm-maly) 0;
	padding: 0 0 0 1.5rem;
	border-left: 1px solid var(--linia-mocna);
	font-size: var(--t-lead);
	line-height: 1.45;
}

blockquote p:last-child {
	margin-bottom: 0;
}

code {
	font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
	font-size: 0.9em;
	background: var(--pole);
	padding: 0.1em 0.35em;
}

/* Pominięcie nawigacji — widoczne dopiero po skupieniu klawiatury. */
.pomin {
	position: absolute;
	left: -9999px;
	z-index: var(--z-pominiecie);
	padding: 0.75rem 1.25rem;
	background: var(--atrament);
	color: var(--tlo);
	text-decoration: none;
}

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

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

/* =====================================================================
   RAMA — tożsamość, nawigacja, wezwanie
   Od 1080 px: kolumna stała na całą wysokość okna.
   Poniżej: pasek u góry z panelem nawigacji.
   ===================================================================== */
.rama {
	position: relative;
	z-index: var(--z-rama);
	background: var(--marka);
	color: var(--na-marce);
}

/* Odnośniki w ramie mają barwę jawną, nie dziedziczoną: przy `inherit`
   o zerowej specyficzności wygrywała globalna reguła `a { color: var(--marka) }`
   i nazwa marki znikała, bo burgund lądował na burgundzie. */
.rama a {
	color: var(--na-marce);
}

.rama__pasek {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: var(--pasek-wys);
	padding: 0 var(--tor-bok);
}

.rama__znak {
	display: inline-flex;
	align-items: center;
	/* Powrót na stronę główną to odnośnik używany w biegu — pełny cel dotykowy
	   (SC 2.5.5), nie sama wysokość liter. */
	min-height: 44px;
	gap: 0.55rem;
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-decoration: none;
	line-height: 1;
}

/* Znak marki to ten sam kwadrat, który w rysunku oznacza punkt decyzyjny:
   pusty, dopóki decyzja nie zapadła, wypełniony po wskazaniu. */
.rama__znak-kropka {
	width: 0.55rem;
	height: 0.55rem;
	flex: none;
	border: 1.5px solid var(--na-marce);
	background: transparent;
	transition: background var(--czas) var(--krzywa), transform var(--czas) var(--krzywa);
}

.rama__znak:hover .rama__znak-kropka,
.rama__znak:focus-visible .rama__znak-kropka {
	background: var(--na-marce);
	transform: translateY(-0.15rem);
}

.rama__rola {
	display: block;
	margin-top: 0.6rem;
	max-width: 22ch;
	font-size: var(--t-s);
	line-height: 1.45;
	color: var(--na-marce-2);
}

/* Przycisk menu — tylko poniżej 1080 px. */
.rama__menu {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 44px;
	min-width: 44px;
	padding: 0 0.85rem;
	background: transparent;
	border: 1px solid var(--na-marce-linia);
	color: inherit;
	font: inherit;
	font-size: var(--t-s);
	cursor: pointer;
	transition: background var(--czas-szybki) var(--krzywa);
}

.rama__menu:hover {
	background: var(--na-marce-cien);
}

.rama__menu-kreski {
	display: grid;
	gap: 3px;
	width: 16px;
}

.rama__menu-kreski span {
	height: 1.5px;
	background: currentColor;
	transition: transform var(--czas) var(--krzywa), opacity var(--czas-szybki) linear;
}

.rama__menu[aria-expanded='true'] .rama__menu-kreski span:nth-child(1) {
	transform: translateY(4.5px) rotate(45deg);
}

.rama__menu[aria-expanded='true'] .rama__menu-kreski span:nth-child(2) {
	opacity: 0;
}

.rama__menu[aria-expanded='true'] .rama__menu-kreski span:nth-child(3) {
	transform: translateY(-4.5px) rotate(-45deg);
}

/* Panel nawigacji (mobile) — bez JS jest zwykłą, widoczną listą. */
.rama__panel {
	padding: 0 var(--tor-bok) 2rem;
}

.js .rama__panel {
	display: none;
}

.js .rama__panel.otwarty {
	display: block;
	animation: panel-wchodzi var(--czas) var(--krzywa) both;
}

@keyframes panel-wchodzi {
	from { opacity: 0; transform: translateY(-0.5rem); }
	to { opacity: 1; transform: none; }
}

.nawigacja ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nawigacja li {
	margin: 0;
	border-top: 1px solid var(--na-marce-linia);
}

.nawigacja a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 48px;
	padding: 0.65rem 0;
	font-size: 1.0625rem;
	text-decoration: none;
	color: var(--na-marce);
}

.nawigacja a::after {
	content: '';
	width: 2.25rem;
	height: 1px;
	background: var(--na-marce-linia);
	transform: scaleX(0.55);
	transform-origin: left center;
	transition: transform var(--czas) var(--krzywa), background var(--czas-szybki) linear;
}

.nawigacja a:hover::after,
.nawigacja a:focus-visible::after {
	transform: none;
	background: var(--na-marce);
}

.nawigacja .current-menu-item > a,
.nawigacja .current_page_item > a,
.nawigacja .current-menu-parent > a {
	font-weight: 700;
}

.nawigacja .current-menu-item > a::after,
.nawigacja .current_page_item > a::after {
	transform: none;
	background: var(--na-marce);
}

.rama__dol {
	margin-top: 1.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--na-marce-linia);
	font-size: var(--t-xs);
	color: var(--na-marce-2);
}

.rama__dol a {
	text-decoration-color: var(--na-marce-linia);
}

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

.rama__kontakt li {
	margin: 0;
}

.rama__kontakt a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

.rama__wezwanie {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-bottom: 1.25rem;
	padding: 0.5rem 1.15rem;
	background: var(--na-marce);
	color: var(--marka-ciemna);
	font-size: var(--t-s);
	font-weight: 600;
	text-decoration: none;
	transition: transform var(--czas) var(--krzywa), background var(--czas-szybki) linear;
}

.rama a.rama__wezwanie {
	color: var(--marka-ciemna);
}

.rama__wezwanie:hover {
	background: var(--marker);
	color: var(--marka-ciemna);
	transform: translateX(3px);
}

/* =====================================================================
   TOR — treść
   ===================================================================== */
.tor {
	position: relative;
	z-index: var(--z-tresc);
	padding: clamp(2.5rem, 5vw, 4.5rem) var(--tor-bok) 0;
}

.tor > * + *,
.tor > article > * + *,
.tresc-strony > * + * {
	margin-top: var(--rytm);
}

/* Wewnątrz pola sekcji odstęp jest mniejszy: to jedna myśl, nie nowa sekcja. */
.pole > * + *,
.pole-tekstu > * + * {
	margin-top: var(--rytm-maly);
}

/* Pole barwne wnosi własny margines wewnętrzny, więc po nim pełny rytm sekcji
   robi się dziurą. Rytm jest zmienny z założenia: ciasno tam, gdzie treść się
   trzyma razem, szeroko tam, gdzie zmienia się temat. */
.teza + *,
.pole--wyrozniony + *,
.pole--pole + *,
.otwarcie + * {
	margin-top: var(--rytm-maly);
}

.pole-tekstu {
	max-width: var(--miara);
}

/* Miara wiersza obowiązuje każdy tekst czytany w całości, nie tylko prozę wpisu:
   akapit w sekcji, punkt listy, opis pozycji. Bez tego wiersz na szerokim
   ekranie dochodzi do 85 znaków (próg 45–75, wzorzec W3). */
/* `:where()` zeruje specyficzność, więc reguła ustawia wartość domyślną
   i nie nadpisuje węższych miar komponentów (np. opisu pozycji). */
:where(.tresc-strony p, .tresc-strony li, .proza li, .pole > p, .pole__naglowek p) {
	max-width: 60ch;
}

.szerzej {
	max-width: 62rem;
}

/* ── Pole wejściowe strony ─────────────────────────────────────────── */
.wejscie {
	max-width: 54rem;
}

.wejscie h1 {
	margin-bottom: 0.35em;
}

/* Tytuł tekstu bywa dwa razy dłuższy niż nazwa strony, więc ma własną skalę:
   przy stopniu strony zajmował na telefonie cztery wiersze i cały pierwszy ekran. */
.tekst-pojedynczy .wejscie h1 {
	font-size: clamp(2rem, 5vw, 3.4rem);
	max-width: 22ch;
}

.wejscie__lead {
	max-width: 38rem;
	font-size: var(--t-lead);
	line-height: 1.5;
	color: var(--atrament-2);
}

.wejscie__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin-top: 1.5rem;
	font-size: var(--t-xs);
	letter-spacing: 0.01em;
	font-variant-numeric: tabular-nums;
	color: var(--atrament-2);
}

/* ── Pierwszy ekran strony głównej ─────────────────────────────────── */
.otwarcie {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
	padding-bottom: 0;
}

.otwarcie h1 {
	max-width: 19ch;
	margin-bottom: 0.45em;
	font-size: clamp(2.35rem, 4.4vw, 3.55rem);
}

.otwarcie__lead {
	max-width: 34rem;
	font-size: var(--t-lead);
	line-height: 1.5;
	color: var(--atrament-2);
}

.otwarcie__link {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	min-height: 44px;
	margin-top: 0.75rem;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 2px solid var(--marka);
	padding-bottom: 0.15rem;
}

.otwarcie__link .strzalka {
	flex: none;
	transition: transform var(--czas) var(--krzywa);
}

.otwarcie__link:hover .strzalka,
.otwarcie__link:focus-visible .strzalka {
	transform: translateX(0.4rem);
}

/* Układ przepływowy edytora bloków dokłada marginesy dzieciom; w siatkach
   i zestawieniach odstęp pochodzi z `gap` i `padding`, więc je zerujemy. */
.otwarcie > *,
.zestawienie > *,
.kroki > *,
.zapis > *,
.pole__naglowek > :last-child {
	margin-block: 0;
}

/* Rysunek marki: przejście układu rozproszonego w uporządkowany. */
.rysunek {
	width: 100%;
	max-width: 38rem;
	margin: 0;
	justify-self: stretch;
}

.rysunek svg {
	width: 100%;
	height: auto;
}

.rysunek__podpis {
	margin-top: 0.85rem;
	max-width: 32ch;
	font-size: var(--t-xs);
	line-height: 1.45;
	color: var(--atrament-2);
}

/* ── Pola treści ───────────────────────────────────────────────────── */
/* Wszystko, do czego prowadzi kotwica, musi zatrzymać się pod lepkim paskiem,
   nie za nim: dotyczy też nagłówków wpisu, na które kieruje spis treści. */
.pole,
.proza h2,
.proza h3,
[id] {
	scroll-margin-top: calc(var(--pasek-wys) + 1rem);
}

.pole__naglowek {
	max-width: 42rem;
	margin-bottom: var(--rytm-maly);
}

.pole__naglowek p {
	max-width: 36rem;
	color: var(--atrament-2);
	margin-bottom: 0;
}

/* Pola w kolorze marki przestawiają role barw zamiast nadpisywać każdą regułę
   z osobna: to, co na bieli jest atramentem, staje się jasnym atramentem, a to,
   co było kolorem marki, staje się barwą wyróżnienia. Powierzchnia idzie
   z osobnych tokenów (`--tlo-marki*`), więc nie goni za tym przestawieniem. */
.na-marce {
	--tlo: var(--tlo-marki);
	--atrament: var(--na-marce);
	--atrament-2: var(--na-marce-2);
	--marka: var(--na-marce);
	--marka-ciemna: var(--marker);
	--linia: var(--na-marce-linia);
	--linia-mocna: var(--na-marce-linia);
	--pole: var(--na-marce-cien);
	--pole-mocne: var(--na-marce-cien);
	color: var(--na-marce);
}

/* Pole wyróżnione stoi obok ramy w tym samym kolorze, więc bierze ciemniejszy
   wariant marki — inaczej granica między ramą a treścią znika. */
.pole--wyrozniony {
	margin-left: calc(var(--tor-bok) * -1);
	margin-right: calc(var(--tor-bok) * -1);
	padding: var(--rytm) var(--tor-bok);
	background: var(--tlo-marki-ciemne);
	color: var(--na-marce);
}

.pole--wyrozniony h2,
.pole--wyrozniony h3 {
	color: var(--na-marce);
}

.pole--wyrozniony p {
	color: var(--na-marce-2);
}

/* Odnośnik w polu marki dziedziczyłby burgund na burgundzie (1,26:1).
   Na ciemnym tle prowadzi go jasny atrament z podkreśleniem. */
.pole--wyrozniony a {
	color: var(--na-marce);
	text-decoration-color: var(--na-marce-linia);
}

.pole--wyrozniony a:hover {
	color: var(--marker);
	text-decoration-color: currentColor;
}

.pole--pole {
	margin-left: calc(var(--tor-bok) * -1);
	margin-right: calc(var(--tor-bok) * -1);
	padding: var(--rytm) var(--tor-bok);
	background: var(--pole);
}

/* ── Teza ──────────────────────────────────────────────────────────
   Jedno zdanie w kolorze marki, bez cudzysłowu i bez ozdobnika. Stoi między
   diagnozą a opisem pracy, bo tam czytelnik decyduje, czy czyta dalej. */
.teza {
	margin-left: calc(var(--tor-bok) * -1);
	margin-right: calc(var(--tor-bok) * -1);
	padding: clamp(2.75rem, 6vw, 5rem) var(--tor-bok);
	background: var(--tlo-marki);
	color: var(--na-marce);
}

.teza p {
	max-width: 24ch;
	margin: 0;
	font-size: clamp(1.75rem, 3.6vw, 2.75rem);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.025em;
	text-wrap: balance;
	color: var(--na-marce);
}

.teza p + p {
	margin-top: 1.25rem;
	max-width: 46ch;
	font-size: var(--t-m);
	font-weight: 400;
	line-height: 1.55;
	letter-spacing: 0;
	color: var(--na-marce-2);
}

/* ── Zestawienie (sytuacje, formy współpracy, zasady) ──────────────── */
/* Zestawienie składa się z bloków grupy (edytor) albo z listy (szablon PHP),
   więc reguły opisują dowolne dziecko, nie konkretny znacznik. */
.zestawienie {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--linia);
}

.zestawienie > * {
	margin: 0;
	border-bottom: 1px solid var(--linia);
}

.pozycja {
	display: grid;
	gap: 0.65rem 2.5rem;
	padding: clamp(1.6rem, 3vw, 2.4rem) 0;
	align-items: start;
}

.pozycja__nazwa {
	margin: 0;
	font-size: var(--t-l);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	text-wrap: balance;
}

.pozycja__opis {
	margin: 0;
	max-width: 46ch;
	color: var(--atrament-2);
}

/* Dane formy współpracy: lista „etykieta: wartość” z edytora bloków.
   Etykieta jest pogrubiona w treści, więc styl nie wymaga własnego znacznika. */
.pozycja__dane {
	list-style: none;
	display: grid;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	font-size: var(--t-s);
	color: var(--atrament-2);
}

.pozycja__dane li {
	margin: 0;
	max-width: 52ch;
	padding-top: 0.35rem;
	border-top: 1px solid var(--linia);
}

.pozycja__dane strong {
	color: var(--atrament);
	font-weight: 600;
}

/* Sekwencja pracy — numeracja niesie kolejność, więc jest widoczna. */
.kroki {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: krok;
	display: grid;
	gap: 0;
	border-top: 1px solid var(--linia);
}

.kroki > * {
	counter-increment: krok;
	display: grid;
	grid-template-columns: 3.25rem minmax(0, 1fr);
	gap: 0 1.5rem;
	margin: 0;
	padding: clamp(1.35rem, 2.5vw, 1.9rem) 0;
	border-bottom: 1px solid var(--linia);
}

/* Numer zajmuje pierwszą kolumnę pierwszego wiersza, cała treść drugą —
   bez tego akapity kroku trafiają do wąskiej kolumny numeru. */
.kroki > *::before {
	content: counter( krok, decimal-leading-zero );
	grid-column: 1;
	grid-row: 1;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.03em;
	color: var(--marka);
	padding-top: 0.15rem;
}

.kroki > * > * {
	grid-column: 2;
}

/* Kreska łącząca numery: sekwencja ma być widoczna jako ciąg, nie jako trzy
   osobne wiersze. Ostatni krok jej nie dostaje, bo nic po nim nie następuje. */
.kroki > * {
	position: relative;
}

.kroki > *:not(:last-child)::after {
	content: '';
	position: absolute;
	left: 1.05rem;
	top: 3.1rem;
	bottom: 0.35rem;
	width: 1px;
	background: var(--linia);
}

.kroki h3 {
	margin-bottom: 0.35rem;
}

.kroki p {
	margin: 0;
	max-width: 64ch;
	color: var(--atrament-2);
}

/* Na wąskim ekranie kolumna numeru zabierała tekstowi trzecią część szerokości
   (29 znaków w wierszu przy progu 45). Numer staje się wtedy etykietą nad
   nagłówkiem, a treść dostaje pełną szerokość. */
@media (max-width: 40rem) {
	.kroki > * {
		display: block;
	}

	.kroki > *::before {
		display: block;
		margin-bottom: 0.4rem;
		padding-top: 0;
	}

	.kroki > *:not(:last-child)::after {
		display: none;
	}
}

.kroki .kroki__czas {
	display: block;
	margin-top: 0.75rem;
	font-size: var(--t-xs);
	letter-spacing: 0.01em;
	color: var(--atrament-2);
}

/* ── Pytania i odpowiedzi (blok „Szczegóły”) ───────────────────────── */
.wp-block-details {
	max-width: 46rem;
	border-top: 1px solid var(--linia);
}

.wp-block-details:last-of-type {
	border-bottom: 1px solid var(--linia);
}

.wp-block-details summary {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: 56px;
	padding: 0.85rem 0;
	font-size: var(--t-l);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	cursor: pointer;
	list-style: none;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

/* Znak stanu: kreska pozioma plus pionowa, która znika po rozwinięciu. */
.wp-block-details summary::after {
	content: '';
	flex: none;
	width: 14px;
	height: 14px;
	margin-left: auto;
	background:
		linear-gradient(var(--marka), var(--marka)) center / 14px 1.5px no-repeat,
		linear-gradient(var(--marka), var(--marka)) center / 1.5px 14px no-repeat;
	transition: transform var(--czas) var(--krzywa);
}

.wp-block-details[open] summary::after {
	background: linear-gradient(var(--marka), var(--marka)) center / 14px 1.5px no-repeat;
	transform: rotate(180deg);
}

.wp-block-details summary:hover {
	color: var(--marka);
}

.wp-block-details > :not(summary) {
	max-width: 60ch;
	margin: 0 0 1rem;
	color: var(--atrament-2);
}

/* ── Lista tekstów ─────────────────────────────────────────────────── */
.teksty {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--linia);
}

.teksty > li {
	margin: 0;
	border-bottom: 1px solid var(--linia);
}

.zajawka {
	display: grid;
	gap: 0.5rem;
	padding: clamp(1.6rem, 3vw, 2.2rem) 0;
	position: relative;
}

.zajawka__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1rem;
	font-size: var(--t-xs);
	letter-spacing: 0.01em;
	font-variant-numeric: tabular-nums;
	color: var(--atrament-2);
}

.zajawka__tytul {
	margin: 0;
	font-size: var(--t-l);
	line-height: 1.24;
}

.zajawka__tytul a {
	text-decoration: none;
	color: var(--atrament);
}

/* Cały wiersz jest celem kliknięcia, ale kotwicą pozostaje tytuł. */
.zajawka__tytul a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.zajawka:hover .zajawka__tytul a,
.zajawka:focus-within .zajawka__tytul a {
	color: var(--marka);
}

/* Ten sam kwadrat co w znaku marki: pokazuje, że wiersz jest punktem wejścia.
   Element dekoracyjny, więc nie wchodzi do drzewa dostępności. */
.zajawka__tytul a::before {
	content: '';
	display: inline-block;
	width: 0.5rem;
	height: 0.5rem;
	margin-right: 0.55rem;
	vertical-align: 0.1em;
	border: 1.5px solid var(--marka);
	opacity: 0;
	transform: translateX(-0.3rem);
	transition: opacity var(--czas-szybki) var(--krzywa), transform var(--czas) var(--krzywa), background var(--czas) var(--krzywa);
}

.zajawka:hover .zajawka__tytul a::before,
.zajawka:focus-within .zajawka__tytul a::before {
	opacity: 1;
	transform: none;
	background: var(--marka);
}

.zajawka__opis {
	margin: 0;
	max-width: 52ch;
	color: var(--atrament-2);
}

.teksty--proste .zajawka__opis {
	display: none;
}

/* ── Newsletter ────────────────────────────────────────────────────── */
.zapis {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

.zapis__tresc h2 {
	max-width: 18ch;
}

.zapis__lista {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	display: grid;
	gap: 0.55rem;
	font-size: var(--t-s);
}

.zapis__lista li {
	display: flex;
	gap: 0.7rem;
	margin: 0;
}

.zapis__lista li::before {
	content: '';
	flex: none;
	width: 0.55rem;
	height: 0.55rem;
	margin-top: 0.55rem;
	border: 1px solid currentColor;
}

.formularz-zapisu {
	display: grid;
	gap: 0.75rem;
	max-width: 30rem;
}

.formularz-zapisu__rzad {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.formularz-zapisu__email {
	flex: 1 1 14rem;
}

.formularz-zapisu label:not(.zgoda),
.formularz .etykieta {
	display: block;
	margin-bottom: 0.35rem;
	font-size: var(--t-s);
	font-weight: 600;
}

input[type='email'],
input[type='text'],
input[type='search'],
input[type='tel'],
textarea,
select {
	width: 100%;
	min-height: 48px;
	padding: 0.7rem 0.9rem;
	background: var(--tlo);
	border: 1px solid var(--linia-mocna);
	color: var(--atrament);
	font: inherit;
	font-size: var(--t-s);
	border-radius: 0;
	transition: border-color var(--czas-szybki) var(--krzywa), box-shadow var(--czas-szybki) var(--krzywa);
}

textarea {
	min-height: 9rem;
	line-height: 1.55;
	resize: vertical;
}

input::placeholder,
textarea::placeholder {
	color: var(--atrament-2);
	opacity: 1;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: none;
	border-color: var(--marka);
	box-shadow: 0 0 0 2px var(--marka);
}

.pole--wyrozniony input[type='email'],
.pole--wyrozniony input[type='text'],
.pole--wyrozniony textarea {
	background: var(--na-marce-cien);
	border-color: var(--na-marce-linia);
	color: var(--na-marce);
}

.pole--wyrozniony input::placeholder,
.pole--wyrozniony textarea::placeholder {
	color: var(--na-marce-2);
}

.pole--wyrozniony input:focus-visible,
.pole--wyrozniony textarea:focus-visible {
	border-color: var(--na-marce);
	box-shadow: 0 0 0 2px var(--na-marce);
}

.przycisk {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 48px;
	padding: 0.65rem 1.5rem;
	background: var(--marka);
	color: var(--na-marce);
	border: 1px solid var(--marka);
	font: inherit;
	font-size: var(--t-s);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--czas-szybki) var(--krzywa), transform var(--czas-szybki) var(--krzywa);
}

.przycisk:hover {
	background: var(--marka-ciemna);
	border-color: var(--marka-ciemna);
	color: var(--na-marce);
}

.przycisk:active {
	transform: translateY(1px);
}

.przycisk[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
}

.pole--wyrozniony .przycisk {
	background: var(--na-marce);
	border-color: var(--na-marce);
	color: var(--marka-ciemna);
}

.pole--wyrozniony .przycisk:hover {
	background: var(--marker);
	border-color: var(--marker);
}

.formularz {
	display: grid;
	gap: 1.25rem;
	max-width: 46rem;
}

.formularz__pola {
	display: grid;
	gap: 1.25rem;
}

@media (min-width: 40rem) {
	.formularz__pola {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.formularz__wyslij {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
}

.formularz .formularz__uwaga {
	display: block;
	margin-top: 0.35rem;
}

.zgoda {
	display: flex;
	gap: 0.65rem;
	align-items: flex-start;
	font-size: var(--t-xs);
	font-weight: 400;
	line-height: 1.5;
	cursor: pointer;
}

.zgoda input[type='checkbox'] {
	flex: none;
	width: 24px;
	height: 24px;
	margin: 0;
	accent-color: var(--marka);
}

/* Odnośnik wewnątrz zgody dostaje pełną wysokość celu dotykowego —
   przy 14 px tekstu sam wiersz ma 18 px, poniżej progu SC 2.5.8. */
.zgoda a {
	display: inline-block;
	padding: 0.2rem 0;
	min-height: 24px;
}

.pole--wyrozniony .zgoda input[type='checkbox'] {
	accent-color: var(--na-marce);
}

.formularz__uwaga {
	font-size: var(--t-xs);
	color: var(--atrament-2);
	margin: 0;
}

.pole--wyrozniony .formularz__uwaga {
	color: var(--na-marce-2);
}

.komunikat {
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--linia-mocna);
	font-size: var(--t-s);
}

.komunikat--ok {
	border-color: var(--marka);
	background: var(--pole);
}

.komunikat--blad {
	border-color: var(--marka);
	background: var(--marker);
	color: var(--atrament);
}

.pole--wyrozniony .komunikat {
	border-color: var(--na-marce-linia);
	background: var(--na-marce-cien);
	color: var(--na-marce);
}

.pole-bledu {
	display: block;
	margin-top: 0.35rem;
	font-size: var(--t-xs);
	font-weight: 600;
	color: var(--marka);
}

.pole--wyrozniony .pole-bledu {
	color: var(--marker);
}

input[aria-invalid='true'],
textarea[aria-invalid='true'] {
	border-color: var(--marka);
	border-width: 2px;
}

.pulapka {
	position: absolute;
	left: -9999px;
}

/* ── Postęp czytania (tylko strona tekstu) ─────────────────────────── */
.postep {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	height: 2px;
	z-index: var(--z-rama);
	background: transparent;
	pointer-events: none;
}

.postep span {
	display: block;
	height: 100%;
	background: var(--marka);
	transform: scaleX(var(--postep, 0));
	transform-origin: left center;
}

@media (min-width: 67.5rem) {
	.postep {
		left: var(--rama-szer);
	}
}

/* ── Proza wpisu ───────────────────────────────────────────────────── */
.proza {
	max-width: var(--miara);
	font-size: 1.1875rem;
	line-height: 1.68;
}

.proza h2 {
	margin-top: 2.25em;
	font-size: clamp(1.5rem, 2.4vw, 1.9rem);
}

.proza h3 {
	margin-top: 1.8em;
	font-size: clamp(1.2rem, 1.8vw, 1.35rem);
}

.proza ul,
.proza ol {
	padding-left: 1.35em;
}

/* Znacznik listy to ten sam kwadrat co w znaku marki, nie domyślna kropka.
   Jeden kształt na całej stronie: znak, punkt rysunku, punkt listy. */
.tresc-strony ul:not(.pozycja__dane):not(.zapis__lista):not(.rama__kontakt),
.proza ul {
	list-style: none;
	padding-left: 1.25em;
}

.tresc-strony ul:not(.pozycja__dane):not(.zapis__lista):not(.rama__kontakt) > li,
.proza ul > li {
	position: relative;
}

.tresc-strony ul:not(.pozycja__dane):not(.zapis__lista):not(.rama__kontakt) > li::before,
.proza ul > li::before {
	content: '';
	position: absolute;
	left: -1.25em;
	top: 0.62em;
	width: 0.42em;
	height: 0.42em;
	border: 1.25px solid var(--marka);
}

.proza ol li::marker {
	color: var(--marka);
	font-weight: 600;
}

.proza figure {
	margin: 2rem 0;
}

.proza figcaption {
	margin-top: 0.6rem;
	font-size: var(--t-xs);
	color: var(--atrament-2);
}

/* Zaproszenie w środku tekstu: linia, nie ramka — ma nie przerywać czytania. */
.proza .w-tekscie {
	margin: 2.5rem 0;
	padding: 0.9rem 0;
	border-top: 1px solid var(--linia);
	border-bottom: 1px solid var(--linia);
	font-size: var(--t-s);
	color: var(--atrament-2);
}

.proza .wp-block-pullquote,
.proza .wyrozniony-akapit {
	margin: 2rem 0;
	padding: 1.5rem;
	background: var(--pole);
	font-size: var(--t-lead);
	line-height: 1.5;
}

.proza .wyrozniony-akapit p:last-child {
	margin-bottom: 0;
}

/* Spis treści wpisu — generowany z nagłówków H2. */
.spis {
	margin: 0 0 var(--rytm-maly);
	padding: 1.25rem 1.5rem;
	background: var(--pole);
	max-width: var(--miara);
}

.spis h2 {
	margin: 0 0 0.75rem;
	font-size: var(--t-s);
	font-weight: 700;
	letter-spacing: 0;
}

.spis ol {
	margin: 0;
	padding-left: 1.2em;
	font-size: var(--t-s);
}

.spis li {
	margin-bottom: 0.3em;
}

/* ── Stopka ────────────────────────────────────────────────────────── */
.stopka {
	margin-top: var(--rytm);
	padding: var(--rytm-maly) var(--tor-bok);
	border-top: 1px solid var(--linia);
	font-size: var(--t-s);
	color: var(--atrament-2);
}

.stopka__rzad {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 2rem;
	align-items: baseline;
	justify-content: space-between;
	max-width: 62rem;
}

.stopka__podpis {
	margin: 0;
	max-width: 44ch;
}

.stopka__nota {
	margin: 1.25rem 0 0;
	max-width: 62rem;
	font-size: var(--t-xs);
	color: var(--atrament-2);
	text-wrap: pretty;
}

.stopka ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.stopka li {
	margin: 0;
}

.stopka a {
	color: var(--atrament-2);
	text-decoration-color: var(--linia-mocna);
}

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

/* ── Nawigacja między wpisami, paginacja ───────────────────────────── */
.dalej {
	display: grid;
	gap: 1rem;
	max-width: 62rem;
	border-top: 1px solid var(--linia);
	padding-top: var(--rytm-maly);
}

.dalej__link {
	display: grid;
	gap: 0.25rem;
	text-decoration: none;
	color: var(--atrament);
}

.dalej__etykieta {
	font-size: var(--t-xs);
	color: var(--atrament-2);
}

.dalej__tytul {
	font-size: var(--t-l);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.015em;
}

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

.strony {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: var(--rytm-maly);
}

.strony .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.6rem;
	border: 1px solid var(--linia-mocna);
	text-decoration: none;
	font-size: var(--t-s);
}

.strony .page-numbers.current {
	background: var(--marka);
	border-color: var(--marka);
	color: var(--na-marce);
	font-weight: 700;
}

/* ── Wyszukiwanie ──────────────────────────────────────────────────── */
.szukaj {
	max-width: 34rem;
	margin-top: var(--rytm-maly);
}

.szukaj__etykieta {
	display: block;
	margin-bottom: 0.4rem;
	font-size: var(--t-s);
	font-weight: 600;
}

.szukaj__rzad {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.szukaj__pole {
	flex: 1 1 14rem;
}

/* Lista rozwijana: własna strzałka, żeby pole nie wyglądało obco
   między pozostałymi kontrolkami formularza. */
select {
	appearance: none;
	padding-right: 2.5rem;
	background-image: linear-gradient(45deg, transparent 50%, var(--atrament) 50%),
		linear-gradient(135deg, var(--atrament) 50%, transparent 50%);
	background-position: calc(100% - 1.15rem) 55%, calc(100% - 0.75rem) 55%;
	background-size: 0.4rem 0.4rem, 0.4rem 0.4rem;
	background-repeat: no-repeat;
}

/* ── Stan pusty ────────────────────────────────────────────────────── */
.pusto {
	max-width: 42rem;
	padding: var(--rytm-maly) 0;
}

.pusto h2 {
	font-size: var(--t-l);
}

/* ── Baner zgody na pomiar ─────────────────────────────────────────── */
.zgody {
	position: fixed;
	inset: auto 1rem 1rem;
	z-index: var(--z-panel);
	max-width: 34rem;
	margin-left: auto;
	padding: 1.25rem 1.4rem;
	background: var(--atrament);
	color: var(--tlo);
	font-size: var(--t-xs);
	line-height: 1.55;
	box-shadow: 0 18px 48px -28px rgb(0 0 0 / 0.9);
}

.zgody[hidden] {
	display: none;
}

.zgody p {
	margin: 0 0 0.9rem;
}

.zgody a {
	color: var(--tlo);
}

.zgody__przyciski {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.zgody__przyciski button {
	min-height: 44px;
	padding: 0.5rem 1.1rem;
	font: inherit;
	font-size: var(--t-xs);
	font-weight: 600;
	cursor: pointer;
	border: 1px solid var(--tlo);
	background: transparent;
	color: var(--tlo);
	transition: background var(--czas-szybki) var(--krzywa), color var(--czas-szybki) var(--krzywa);
}

.zgody__przyciski button[data-zgoda='tak'] {
	background: var(--tlo);
	color: var(--atrament);
}

.zgody__przyciski button:hover {
	background: var(--marker);
	color: var(--atrament);
	border-color: var(--marker);
}

/* =====================================================================
   UKŁAD SZEROKI — od 1080 px rama staje się stałą kolumną
   ===================================================================== */
@media (min-width: 67.5rem) {
	body {
		padding-left: var(--rama-szer);
	}

	.rama {
		position: fixed;
		inset: 0 auto 0 0;
		width: var(--rama-szer);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: clamp(2.25rem, 3vw, 3rem) clamp(1.75rem, 2.2vw, 2.5rem);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.rama__pasek {
		display: block;
		min-height: 0;
		padding: 0;
	}

	.rama__menu {
		display: none;
	}

	.js .rama__panel,
	.rama__panel {
		display: flex;
		flex-direction: column;
		flex: 1;
		padding: 2.75rem 0 0;
		animation: none;
	}

	/* Nawigacja trzyma się góry, dane kontaktowe dołu — pusta przestrzeń
	   zbiera się w jednym miejscu zamiast rozpychać całą kolumnę. */
	.rama__dol {
		margin-top: auto;
		padding-top: 2rem;
	}

	.tor {
		padding-top: clamp(3.5rem, 6vw, 6rem);
	}

	.otwarcie {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
		align-items: start;
		gap: clamp(2.5rem, 4vw, 4.5rem);
	}

	/* Nazwa pozycji dostaje szerszą kolumnę niż opis: przy proporcji 1:1,15
	   trzywyrazowe nagłówki łamały się na trzy wiersze, a opis kończył na dwóch. */
	.pozycja {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	}

	.pozycja--z-danymi {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.1fr) minmax(0, 0.85fr);
	}

	.pozycja--z-danymi .pozycja__nazwa {
		grid-row: 1;
	}

	.zapis {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
		gap: clamp(2.5rem, 5vw, 5rem);
	}

	.dalej {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2.5rem;
	}

	.dalej__link--nastepny {
		text-align: right;
	}
}

/* Jasny tekst na ciemnym polu czyta się jako lżejszy, więc dostaje więcej
   powietrza między wierszami (reguła +0,05 do interlinii). */
.na-marce,
.teza,
.pole--wyrozniony,
.rama {
	line-height: 1.68;
}

.na-marce h1,
.teza p,
.pole--wyrozniony h2,
.rama__znak {
	line-height: 1.14;
}

/* Poniżej 1080 px pasek trzyma się góry — nawigacja zawsze w zasięgu kciuka. */
@media (max-width: 67.4375rem) {
	.rama {
		position: sticky;
		top: 0;
	}

	/* Na telefonie rama kurczy się do paska i kolor marki znikał ze strony
	   (5% powierzchni zamiast deklarowanych 30–60%). Pierwszy ekran przejmuje
	   tę rolę: pasek i otwarcie tworzą jedno pole koloru, bez szwu między nimi.
	   Ta sama zasada obowiązuje na podstronach — burgund oznacza miejsce,
	   w którym mówi marka, biel miejsce, w którym mówi treść. Strona tekstu
	   jest wyjątkiem: tam czyta się długo i tło zostaje białe. */
	.strona-glowna .tor,
	.page:not(.strona-glowna) .tor {
		padding-top: 0;
	}

	.strona-glowna .otwarcie,
	.page:not(.strona-glowna) .wejscie {
		--tlo: var(--tlo-marki);
		--atrament: var(--na-marce);
		--atrament-2: var(--na-marce-2);
		--marka: var(--na-marce);
		--marka-ciemna: var(--marker);
		--linia: var(--na-marce-linia);
		--linia-mocna: var(--na-marce-2);
		--pole-mocne: var(--na-marce-cien);
		margin: 0 calc(var(--tor-bok) * -1);
		padding: clamp(2.25rem, 7vw, 3.25rem) var(--tor-bok) clamp(2.75rem, 9vw, 4rem);
		background: var(--tlo-marki);
		color: var(--na-marce);
	}

	/* Pole barwne ma własny margines wewnętrzny, więc treść po nim zaczyna się
	   bliżej — inaczej między kolorem a pierwszym akapitem zostaje biała dziura. */
	.page:not(.strona-glowna) .wejscie + .tresc-strony {
		margin-top: var(--rytm-maly);
	}

	.strona-glowna .otwarcie h1,
	.page:not(.strona-glowna) .wejscie h1 {
		color: var(--na-marce);
	}

	.strona-glowna .otwarcie .otwarcie__lead,
	.page:not(.strona-glowna) .wejscie .wejscie__lead,
	.page:not(.strona-glowna) .wejscie .wejscie__meta {
		color: var(--na-marce-2);
	}

	/* Selektor musi obejmować odnośnik W otwarciu, nie każdy o tej samej klasie:
	   ten sam styl linku wraca niżej na białym tle i zniknąłby na nim. */
	.strona-glowna .otwarcie .otwarcie__link {
		border-bottom-color: var(--na-marce);
		color: var(--na-marce);
	}

	.rama__rola {
		display: none;
	}

	/* Panel nawigacji nie może urosnąć poza ekran: przy pięciu pozycjach,
	   wezwaniu i danych kontaktowych na niskim telefonie ostatnia pozycja
	   wypadała poniżej krawędzi bez możliwości przewinięcia. */
	.rama__panel {
		border-top: 1px solid var(--na-marce-linia);
		padding-top: 0.5rem;
		max-height: calc(100dvh - var(--pasek-wys));
		overflow-y: auto;
		overscroll-behavior: contain;
		padding-bottom: max(2rem, env(safe-area-inset-bottom));
	}

	/* Wcięcia bezpiecznego obszaru (wycięcie w ekranie, pasek gestów). */
	.rama__pasek {
		padding-top: env(safe-area-inset-top);
		padding-left: max(var(--tor-bok), env(safe-area-inset-left));
		padding-right: max(var(--tor-bok), env(safe-area-inset-right));
	}

	.zgody {
		bottom: max(0.75rem, env(safe-area-inset-bottom));
	}

	.rama__wezwanie {
		display: flex;
		justify-content: center;
		width: 100%;
		margin-top: 1.25rem;
	}
}

@media (max-width: 40rem) {
	.zgody {
		inset: auto 0.75rem 0.75rem;
		padding: 1.1rem;
	}
}

/* Na wąskim telefonie 18 px daje 35 znaków w wierszu przy progu 45. Zejście do
   17 px podnosi miarę do ok. 40 znaków i zmniejsza liczbę łamań w połowie słowa,
   a wciąż stoi powyżej minimum 16 px dla tekstu czytanego w całości. */
@media (max-width: 26rem) {
	body {
		font-size: 1.0625rem;
	}

	.proza {
		font-size: 1.125rem;
	}
}

/* =====================================================================
   RUCH — wejście strony, rysowanie schematu, hover na wierszach
   Treść jest widoczna domyślnie; animacja wzbogaca stan widoczny.
   ===================================================================== */
/* Animacje wejścia poruszają wyłącznie `transform`. Wygaszanie przez `opacity`
   sprawia, że w pierwszej klatce treść jest niewidoczna — a wtedy audyt
   dostępności i pomiar kontrastu widzą pustą stronę, nie tylko efekt. */
@keyframes rama-wchodzi {
	from { transform: translateX(-16px); }
	to { transform: none; }
}

@keyframes wiersz-wchodzi {
	from { transform: translateY(10px); }
	to { transform: none; }
}

@keyframes linia-rysuje {
	to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: no-preference) {
	.rama {
		animation: rama-wchodzi 520ms var(--krzywa) both;
	}

	.otwarcie h1,
	.otwarcie__lead,
	.otwarcie__link {
		animation: wiersz-wchodzi 520ms var(--krzywa) both;
	}

	.otwarcie h1 { animation-delay: 90ms; }
	.otwarcie__lead { animation-delay: 180ms; }
	.otwarcie__link { animation-delay: 260ms; }

	/* Ścieżki mają pathLength="1", więc długość rysowania nie zależy od skali. */
	.rysunek [data-rysuj] {
		stroke-dasharray: 1;
		stroke-dashoffset: 1;
		animation: linia-rysuje 760ms var(--krzywa) forwards;
		animation-delay: calc(220ms + var(--opoznienie, 0ms));
	}

	.rysunek [data-punkt] {
		animation: wiersz-wchodzi 360ms var(--krzywa) both;
		animation-delay: calc(140ms + var(--opoznienie, 0ms));
	}

	.pozycja,
	.zajawka {
		transition: transform var(--czas) var(--krzywa);
	}

	.zestawienie > *:hover .pozycja,
	.zestawienie > *:hover.pozycja,
	.teksty > li:hover .zajawka {
		transform: translateX(4px);
	}

	/* Komunikat po wysłaniu formularza wchodzi, zamiast pojawiać się skokiem:
	   ruch mówi, że to nowa informacja, a nie element, który zawsze tu był. */
	.komunikat:not([hidden]) {
		animation: wiersz-wchodzi 260ms var(--krzywa) both;
	}

	/* Rozwijanie pytań. Wysokość „auto” daje się animować dopiero z
	   `interpolate-size`, więc reguła stoi za zapytaniem o wsparcie. */
	@supports (interpolate-size: allow-keywords) {
		html {
			interpolate-size: allow-keywords;
		}

		.wp-block-details::details-content {
			block-size: 0;
			overflow: clip;
			transition: block-size var(--czas) var(--krzywa), content-visibility var(--czas) allow-discrete;
		}

		.wp-block-details[open]::details-content {
			block-size: auto;
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.rysunek [data-rysuj] {
		stroke-dashoffset: 0;
	}
}

/* ── Druk ──────────────────────────────────────────────────────────── */
@media print {
	.rama,
	.zgody,
	.zapis {
		display: none !important;
	}

	body {
		padding-left: 0;
		color: #000;
	}
}