/**
 * VMaster — arkusz główny (v4).
 *
 * KIERUNEK: magazyn technologiczny — obraz prowadzi, karty organizują, kolor
 * oznacza produkt. Kierunek z v3 zostaje; zmienia się wykonanie.
 *
 * CZEGO TU NIE MA — I DLACZEGO
 *   · Niebieskiego #2563eb z gradientem. To domyślny blue-600 z Tailwinda,
 *     najczęstszy kolor generowanych stron. Sygnałem jest cynober na ciepłej
 *     szarości — paleta drukarska, nie framework.
 *   · Okrągłych poświat radialnych w hero. Zamiast nich siatka włoskowatych
 *     linii i ziarno — chwyt z druku, nie z generatora.
 *   · Gradientu na tekście (background-clip: text). Wyróżnienie robi krój
 *     i wielkość, nie tęcza.
 *   · Pastylkowych etykiet i rzędu wielkich liczników.
 *   · Jednolitego rytmu „wszystko 12 px + miękki cień + podniesienie przy
 *     hoverze”. Geometria jest mieszana celowo: kadr obrazu bez zaokrągleń,
 *     karta z 4 px, znacznik kwadratowy.
 *   · Jednego kroju na wszystkim. Są trzy głosy: ciężki grotesk na tytuły,
 *     szeryf na wprowadzenia (standfirst), mono na dane i kod.
 *
 * ZASADY
 *   1. Tło nie jest białe — ciepła szarość „newsprint”, karty białe.
 *   2. Hierarchia przez skalę i wagę, nie przez kolor.
 *   3. Siatka jest asymetryczna: pierwsza karta w rzędzie jest inna.
 *   4. Hover zmienia treść (nasycenie obrazu, podkreślenie), nie geometrię.
 *   5. Kolor produktu żyje w nadtytule i kwadratowym znaczniku, nie jako
 *      dekoracyjny pasek na każdym elemencie.
 *
 * SPIS TREŚCI
 *   1. Tokeny            8. Karty i okładka      15. Komentarze
 *   2. Reset             9. Kafle i listy        16. Panel boczny
 *   3. Nadtytuły         10. Hero                17. Stopka
 *   4. Siatka            11. Okruszki            18. Globalne
 *   5. Nagłówek i nav    12. Artykuł             19. Dostępność, druk
 *   6. Szukanie, języki  13. Treść
 *   7. Przyciski         14. FAQ, autor
 */

/* ==========================================================================
   1. TOKENY
   ========================================================================== */

:root {
	/* --- Kroje ---
	 * Trzy role, trzy głosy. Wszystkie stosy mają fallback systemowy, więc
	 * motyw działa bez pobierania czegokolwiek; opcjonalne pliki w
	 * assets/fonts/ tylko podmieniają pierwszą pozycję.
	 *
	 * display — tytuły. Wąski, ciężki grotesk. Kolejność stosu celowo szuka
	 *           najpierw krojów zwężonych, bo one dają „prasowy” nagłówek.
	 * text    — interfejs i treść.
	 * dek     — standfirst i lead. Szeryf w tej jednej roli to podpis
	 *           redakcyjny; użyty wszędzie byłby manierą, użyty nigdzie —
	 *           brakiem charakteru.
	 * mono    — dane liczbowe, wersje, kod.
	 */
	--vm-font-display:
		"VMaster Display", "Archivo Narrow", "Roboto Condensed",
		"Helvetica Neue Condensed", "Arial Narrow", "Inter var", "Inter",
		-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--vm-font:
		"Inter var", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
		"Roboto", "Helvetica Neue", Arial, sans-serif;
	--vm-font-dek:
		"Charter", "Bitstream Charter", "Sitka Text", "Source Serif 4",
		Cambria, Georgia, serif;
	--vm-font-mono:
		"JetBrains Mono var", "JetBrains Mono", ui-monospace, SFMono-Regular,
		"SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

	/* --- Skala ---
	 * Duży rozstrzał między tytułem okładki a resztą. Płaska skala jest
	 * głównym powodem, dla którego układ czyta się jak szablon.
	 */
	--vm-t-display: clamp(2.5rem, 1.5rem + 4.4vw, 4.75rem);
	--vm-t-cover:   clamp(1.75rem, 1.15rem + 2.6vw, 3rem);
	--vm-t-h1:      clamp(2rem, 1.35rem + 2.6vw, 3.25rem);
	--vm-t-h2:      clamp(1.4375rem, 1.2rem + 1vw, 1.875rem);
	--vm-t-h3:      clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
	--vm-t-card:    clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem);
	--vm-t-card-lg: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
	--vm-t-dek:     clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
	--vm-t-body:    1.0625rem;
	--vm-t-ui:      0.9375rem;
	--vm-t-small:   0.875rem;
	--vm-t-meta:    0.8125rem;
	--vm-t-label:   0.6875rem;

	/* Tytuły są ciasne: 0.96–1.02 interlinii i ujemne światło. */
	--vm-lh-display: 0.96;
	--vm-lh-title: 1.04;
	--vm-lh-head: 1.16;
	--vm-lh-body: 1.65;

	--vm-ls-display: -0.045em;
	--vm-ls-title: -0.03em;
	--vm-ls-tight: -0.015em;
	--vm-ls-label: 0.1em;

	--vm-measure: 40rem;

	--vm-s1: 0.25rem;
	--vm-s2: 0.5rem;
	--vm-s3: 0.75rem;
	--vm-s4: 1rem;
	--vm-s5: 1.5rem;
	--vm-s6: 2.25rem;
	--vm-s7: 3.5rem;
	--vm-s8: 5rem;
	--vm-s9: 7rem;

	/* Geometria mieszana: obraz bez zaokrągleń, karta minimalnie, znacznik
	   kwadratowy. Jednolite 12 px na wszystkim to „komponentowy” rytm. */
	--vm-r-0: 0;
	--vm-r-sm: 2px;
	--vm-r: 4px;
	--vm-r-lg: 6px;

	--vm-container: 82rem;
	--vm-sidebar: 19rem;
	--vm-gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
	--vm-header-h: 4rem;

	--vm-z-drop: 100;
	--vm-z-head: 200;
	--vm-z-search: 300;
	--vm-z-skip: 900;

	--vm-tr: 140ms cubic-bezier(0.2, 0, 0.2, 1);
	--vm-tr-2: 300ms cubic-bezier(0.2, 0, 0.2, 1);

	/* --- Kolory: ciepła szarość „newsprint” + cynober ---
	 * Kontrasty: ink/paper 15.1:1 · ink-2/paper 7.4:1 · ink-3/paper 4.6:1
	 *            signal/paper 5.0:1 · paper/ink 15.1:1
	 */
	--vm-paper: #f2f0ec;
	--vm-paper-2: #e9e6e0;
	--vm-paper-3: #ded9d1;
	--vm-surface: #ffffff;
	--vm-surface-2: #f7f5f2;
	--vm-ink: #171614;
	--vm-ink-2: #55534c;
	--vm-ink-3: #78756c;
	--vm-rule: #d9d5cd;
	--vm-rule-2: #bdb8ad;

	/* Ciemny pas hero i stopki — ciepła czerń, nie granat. */
	--vm-dark: #171614;
	--vm-dark-2: #211f1c;
	--vm-dark-ink: #f4f2ee;
	--vm-dark-ink-2: #a8a49a;
	--vm-dark-rule: #33302b;

	/* Sygnał: cynober. Jeden kolor na całą warstwę interakcji. */
	--vm-signal: #cf3b12;
	--vm-signal-2: #a52d0a;
	--vm-signal-wash: #f8e6df;

	/* Kolor produktu — nadpisywany inline na kartach (--vm-cat). */
	--vm-cat: #1b4a8f;

	--vm-ok: #146b5a;
	--vm-ok-bg: #e4efeb;
	--vm-warn: #8a5a00;
	--vm-warn-bg: #f7efdd;
	--vm-danger: #a52216;
	--vm-danger-bg: #f8e7e4;
	--vm-info: #1b4a8f;
	--vm-info-bg: #e6ecf4;

	--vm-code-bg: #171614;
	--vm-code-fg: #eceae4;
	--vm-code-rule: #33302b;
	--vm-code-label: #98938a;

	/* Cienie krótkie i twarde — bliżej offsetu z druku niż rozmycia z UI kitu. */
	--vm-sh-1: 0 1px 0 rgba(23, 22, 20, 0.06);
	--vm-sh-2: 0 1px 0 rgba(23, 22, 20, 0.08), 0 6px 14px -10px rgba(23, 22, 20, 0.3);
	--vm-sh-3: 0 1px 0 rgba(23, 22, 20, 0.1), 0 18px 34px -18px rgba(23, 22, 20, 0.42);

	/* Ziarno na ciemnym pasie. */
	--vm-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23g)'/></svg>");

	color-scheme: light;
}

:root[data-theme="dark"] {
	--vm-paper: #121210;
	--vm-paper-2: #191816;
	--vm-paper-3: #22201d;
	--vm-surface: #1a1917;
	--vm-surface-2: #221f1c;
	--vm-ink: #f0eee8;
	--vm-ink-2: #aaa69c;
	--vm-ink-3: #8a857a;
	--vm-rule: #2c2a26;
	--vm-rule-2: #403d37;

	--vm-dark: #0d0c0b;
	--vm-dark-2: #171614;
	--vm-dark-ink: #f4f2ee;
	--vm-dark-ink-2: #a8a49a;
	--vm-dark-rule: #2c2a26;

	--vm-signal: #f2653a;
	--vm-signal-2: #ff8a63;
	--vm-signal-wash: #2c1610;

	--vm-cat: #7ba3d8;

	--vm-ok: #5fbfa2;
	--vm-ok-bg: #10241f;
	--vm-warn: #d8a544;
	--vm-warn-bg: #241d0f;
	--vm-danger: #ea8377;
	--vm-danger-bg: #2a1512;
	--vm-info: #7ba3d8;
	--vm-info-bg: #131b26;

	--vm-code-bg: #0b0a09;
	--vm-code-fg: #eceae4;
	--vm-code-rule: #262420;

	--vm-sh-1: 0 1px 0 rgba(0, 0, 0, 0.5);
	--vm-sh-2: 0 1px 0 rgba(0, 0, 0, 0.6), 0 6px 14px -10px rgba(0, 0, 0, 0.9);
	--vm-sh-3: 0 1px 0 rgba(0, 0, 0, 0.7), 0 18px 34px -18px rgba(0, 0, 0, 1);

	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) {
		--vm-paper: #121210;
		--vm-paper-2: #191816;
		--vm-paper-3: #22201d;
		--vm-surface: #1a1917;
		--vm-surface-2: #221f1c;
		--vm-ink: #f0eee8;
		--vm-ink-2: #aaa69c;
		--vm-ink-3: #8a857a;
		--vm-rule: #2c2a26;
		--vm-rule-2: #403d37;
		--vm-dark: #0d0c0b;
		--vm-dark-rule: #2c2a26;
		--vm-signal: #f2653a;
		--vm-signal-2: #ff8a63;
		--vm-signal-wash: #2c1610;
		--vm-cat: #7ba3d8;
		--vm-ok: #5fbfa2;
		--vm-ok-bg: #10241f;
		--vm-warn: #d8a544;
		--vm-warn-bg: #241d0f;
		--vm-danger: #ea8377;
		--vm-danger-bg: #2a1512;
		--vm-info: #7ba3d8;
		--vm-info-bg: #131b26;
		--vm-code-bg: #0b0a09;
		--vm-code-rule: #262420;
		color-scheme: dark;
	}
}

/* ==========================================================================
   2. RESET
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--vm-header-h) + var(--vm-s4));
	tab-size: 4;
}

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: var(--vm-paper);
	color: var(--vm-ink);
	font-family: var(--vm-font);
	font-size: var(--vm-t-body);
	line-height: var(--vm-lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-synthesis-weight: none;
	overflow-wrap: break-word;
}

body.vm-nav-open { overflow: hidden; }

h1, h2, h3, h4, h5, h6 { margin: 0; line-height: var(--vm-lh-head); }

/* Tytuły idą krojem display: ciężko, ciasno, z ujemnym światłem. */
.vm-cover__title,
.vm-card__title,
.vm-card--lead .vm-card__title,
.vm-article__title,
.vm-hero__title,
.vm-archive-header__title,
.vm-section__title,
.vm-empty__title,
.vm-404__title,
.vm-faq__title,
.vm-comments__title,
.vm-prose h2,
.vm-prose h3 {
	font-family: var(--vm-font-display);
	font-weight: 800;
	letter-spacing: var(--vm-ls-title);
	text-wrap: balance;
}

p, ul, ol, dl, dd, figure, blockquote, pre, table { margin: 0; }

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

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }

:focus-visible {
	outline: 2px solid var(--vm-signal);
	outline-offset: 2px;
	border-radius: 0;
}

::selection { background-color: var(--vm-ink); color: var(--vm-paper); }

hr { border: 0; border-top: 1px solid var(--vm-rule); margin: var(--vm-s6) 0; }

/* ==========================================================================
   3. NADTYTUŁY I NAGŁÓWKI SEKCJI
   ========================================================================== */

/* Nadtytuł: kwadratowy znacznik w barwie produktu + nazwa kapitalikami.
   To tu żyje kolor kategorii — nie jako pasek na krawędzi karty. */
.vm-kicker {
	display: inline-flex;
	align-items: center;
	gap: var(--vm-s2);
	font-size: var(--vm-t-label);
	font-weight: 800;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-label);
	color: var(--vm-cat);
}

.vm-kicker::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	background: var(--vm-cat);
	flex: none;
}

.vm-label {
	font-size: var(--vm-t-label);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-label);
	color: var(--vm-ink-3);
}

/* Nagłówek sekcji: numer, tytuł, linia biegnąca do końca wiersza, licznik.
   Linia dociągana flexem — układ z żywej paginy, nie z siatki komponentów. */
.vm-section { margin-block-start: var(--vm-s7); }
.vm-section:first-child { margin-block-start: 0; }

.vm-section__head {
	display: flex;
	align-items: center;
	gap: var(--vm-s4);
	margin-block-end: var(--vm-s5);
	padding-block-end: var(--vm-s2);
	border-block-end: 2px solid var(--vm-ink);
}

.vm-section__title {
	font-size: var(--vm-t-h2);
	margin: 0;
	flex: none;
}

/* Numer sekcji — mono, wyciszony, przed tytułem. */
.vm-section__num {
	font-family: var(--vm-font-mono);
	font-size: var(--vm-t-label);
	font-weight: 500;
	color: var(--vm-ink-3);
	font-variant-numeric: tabular-nums;
	flex: none;
	padding-block-start: 0.35em;
}

.vm-section__link {
	display: inline-flex;
	align-items: center;
	gap: var(--vm-s1);
	margin-inline-start: auto;
	flex: none;
	font-size: var(--vm-t-label);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-label);
	color: var(--vm-ink-2);
	border-block-end: 2px solid transparent;
	transition: color var(--vm-tr), border-color var(--vm-tr);
}

.vm-section__link:hover { color: var(--vm-signal); border-color: var(--vm-signal); }

/* Zgodność ze starszymi nazwami klas. */
.vm-section-title {
	font-size: var(--vm-t-h2);
	margin-block-end: var(--vm-s5);
	padding-block-end: var(--vm-s2);
	border-block-end: 2px solid var(--vm-ink);
}

.vm-section-head {
	display: flex;
	align-items: center;
	gap: var(--vm-s4);
	margin-block-end: var(--vm-s5);
	padding-block-end: var(--vm-s2);
	border-block-end: 2px solid var(--vm-ink);
}

.vm-section-head .vm-section-title { margin: 0; padding: 0; border: 0; }

.vm-section-link {
	margin-inline-start: auto;
	font-size: var(--vm-t-label);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-label);
	color: var(--vm-ink-2);
}

/* ==========================================================================
   4. SIATKA
   ========================================================================== */

.vm-page { display: flex; flex-direction: column; flex: 1; }
.vm-main { flex: 1; padding-block: var(--vm-s6) var(--vm-s8); }

.vm-container {
	width: 100%;
	max-width: var(--vm-container);
	margin-inline: auto;
	padding-inline: var(--vm-gutter);
}

.vm-layout { display: grid; gap: var(--vm-s7); align-items: start; }

@media (min-width: 64rem) {
	.vm-layout--sidebar { grid-template-columns: minmax(0, 1fr) var(--vm-sidebar); }
}

.vm-layout__content { min-width: 0; }

/* Siatka kart. Odstęp poziomy mniejszy niż pionowy — rzędy oddzielają się
   same, a karty w rzędzie czytają się jako grupa. */
.vm-cards { display: grid; gap: var(--vm-s6) var(--vm-s5); }

@media (min-width: 34rem) {
	.vm-cards--2, .vm-cards--3, .vm-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 62rem) {
	.vm-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.vm-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

	/* ASYMETRIA: pierwsza karta w siatce zajmuje całą szerokość i układa się
	   poziomo. Jeden wyłamany element odbiera siatce wygląd wygenerowanej. */
	.vm-cards--feature > *:first-child { grid-column: 1 / -1; }
}

/* Zgodność: .vm-grid / .vm-index / .vm-list. */
.vm-grid, .vm-index, .vm-list {
	display: grid;
	gap: var(--vm-s6) var(--vm-s5);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 34rem) {
	.vm-grid--2, .vm-grid--3, .vm-index, .vm-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 62rem) {
	.vm-grid--3, .vm-index, .vm-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   5. NAGŁÓWEK I NAWIGACJA
   ========================================================================== */

.vm-header {
	position: relative;
	z-index: var(--vm-z-head);
	background-color: var(--vm-paper);
	border-block-end: 1px solid var(--vm-ink);
}

/* Bez backdrop-filter: pełne tło jest czytelniejsze i tańsze, a rozmycie
   pod przyklejonym paskiem to kolejny znak rozpoznawczy generatorów. */
.has-sticky-header .vm-header { position: sticky; inset-block-start: 0; }

.vm-header__inner {
	display: flex;
	align-items: center;
	gap: var(--vm-s4);
	min-height: var(--vm-header-h);
}

.vm-header__brand {
	display: flex;
	align-items: baseline;
	gap: var(--vm-s3);
	margin-inline-end: auto;
	min-width: 0;
}

.vm-header__actions { display: flex; align-items: center; gap: var(--vm-s1); flex: none; }

.vm-logo img, .custom-logo { max-height: 1.875rem; width: auto; }

/* Nazwa serwisu krojem display, bardzo ciasno. Znakiem firmowym jest
   typografia i kwadrat w cynobrze — nie ikona w zaokrąglonym kwadracie. */
.vm-sitetitle {
	margin: 0;
	font-family: var(--vm-font-display);
	font-size: 1.375rem;
	font-weight: 800;
	letter-spacing: -0.05em;
	line-height: 1;
	text-transform: uppercase;
}

.vm-sitetitle__link { color: var(--vm-ink); display: inline-flex; align-items: center; gap: var(--vm-s2); }

.vm-sitetitle__mark {
	display: block;
	width: 0.625rem;
	height: 0.625rem;
	background: var(--vm-signal);
	flex: none;
}

.vm-sitetitle__mark .vm-icon { display: none; }

.vm-tagline {
	display: none;
	margin: 0;
	font-size: var(--vm-t-label);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-label);
	color: var(--vm-ink-3);
	padding-inline-start: var(--vm-s3);
	border-inline-start: 1px solid var(--vm-rule-2);
}

@media (min-width: 60rem) { .vm-tagline { display: block; } }

/* --- Menu --- */
.vm-menu { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; }
.vm-menu__item { position: relative; }

.vm-menu__link {
	display: flex;
	align-items: center;
	gap: var(--vm-s2);
	padding: var(--vm-s2) var(--vm-s3);
	font-size: var(--vm-t-label);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-label);
	color: var(--vm-ink-2);
	white-space: nowrap;
	border-block-end: 2px solid transparent;
	transition: color var(--vm-tr), border-color var(--vm-tr);
}

.vm-menu__link:hover { color: var(--vm-ink); border-color: var(--vm-rule-2); }
.vm-menu__link[aria-current] { color: var(--vm-ink); border-color: var(--vm-signal); }

.vm-menu__toggle { display: none; }

.vm-menu__desc {
	display: block;
	font-family: var(--vm-font-dek);
	font-size: var(--vm-t-meta);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: var(--vm-ink-3);
	white-space: normal;
	line-height: 1.4;
	margin-block-start: 2px;
}

@media (min-width: 64rem) {
	.vm-menu__item--has-children > .vm-menu__toggle {
		display: inline-grid;
		place-items: center;
		position: absolute;
		inset-inline-end: 0;
		inset-block-start: 50%;
		transform: translateY(-50%);
		width: 1rem;
		height: 1rem;
		color: var(--vm-ink-3);
	}

	.vm-menu__item--has-children > .vm-menu__link { padding-inline-end: var(--vm-s5); }

	.vm-menu__submenu {
		position: absolute;
		inset-inline-start: 0;
		inset-block-start: 100%;
		min-width: 16rem;
		max-width: 24rem;
		padding: var(--vm-s2) 0;
		margin: 0;
		list-style: none;
		background-color: var(--vm-surface);
		border: 1px solid var(--vm-ink);
		box-shadow: var(--vm-sh-3);
		z-index: var(--vm-z-drop);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--vm-tr), visibility var(--vm-tr);
	}

	.vm-menu__item--has-children:hover > .vm-menu__submenu,
	.vm-menu__item--has-children:focus-within > .vm-menu__submenu,
	.vm-menu__item.is-open > .vm-menu__submenu { opacity: 1; visibility: visible; }

	.vm-menu__submenu .vm-menu__link {
		white-space: normal;
		width: 100%;
		border-block-end: 0;
		border-inline-start: 2px solid transparent;
		padding-inline: var(--vm-s4);
	}

	.vm-menu__submenu .vm-menu__link:hover {
		border-inline-start-color: var(--vm-signal);
		background-color: var(--vm-surface-2);
	}

	.vm-menu__submenu .vm-menu__submenu { inset-block-start: calc(-1 * var(--vm-s2)); inset-inline-start: 100%; }
	.vm-menu__caret { transition: transform var(--vm-tr); }
	.vm-menu__item.is-open > .vm-menu__toggle .vm-menu__caret { transform: rotate(180deg); }
}

@media (max-width: 63.99rem) {
	.vm-nav {
		position: fixed;
		inset: var(--vm-header-h) 0 0 0;
		background-color: var(--vm-paper);
		padding: var(--vm-s5) var(--vm-gutter) var(--vm-s8);
		overflow-y: auto;
		overscroll-behavior: contain;
		z-index: var(--vm-z-head);
		visibility: hidden;
		opacity: 0;
		transition: opacity var(--vm-tr-2), visibility var(--vm-tr-2);
	}

	.vm-nav.is-open { visibility: visible; opacity: 1; }

	html:not(.js) .vm-nav {
		position: static;
		inset: auto;
		visibility: visible;
		opacity: 1;
		padding: var(--vm-s4) 0;
		border-block-start: 1px solid var(--vm-rule);
	}

	.vm-menu { flex-direction: column; align-items: stretch; }
	.vm-menu__item { border-block-end: 1px solid var(--vm-rule); }

	.vm-menu__link {
		min-height: 2.75rem;
		padding: var(--vm-s3) 0;
		font-size: var(--vm-t-meta);
		border-block-end: 0;
		border-inline-start: 3px solid transparent;
		padding-inline-start: var(--vm-s3);
	}

	.vm-menu__link[aria-current] { border-inline-start-color: var(--vm-signal); }

	.vm-menu__item--has-children { display: grid; grid-template-columns: 1fr auto; align-items: center; }
	.vm-menu__toggle { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; color: var(--vm-ink-3); }

	.vm-menu__submenu {
		grid-column: 1 / -1;
		list-style: none;
		margin: 0 0 var(--vm-s3);
		padding-inline-start: var(--vm-s4);
		border-inline-start: 1px solid var(--vm-rule);
		display: none;
	}

	.vm-menu__item.is-open > .vm-menu__submenu, html:not(.js) .vm-menu__submenu { display: block; }
	.vm-menu__submenu .vm-menu__item { border-block-end: 0; }
	.vm-menu__item.is-open > .vm-menu__toggle .vm-menu__caret { transform: rotate(180deg); }
}

.vm-icon-btn {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	color: var(--vm-ink-2);
	transition: color var(--vm-tr), background-color var(--vm-tr);
}

.vm-icon-btn:hover { color: var(--vm-ink); background-color: var(--vm-paper-2); }

/* Reguła MUSI stać po .vm-icon-btn — ta sama specyficzność, rozstrzyga
   kolejność w pliku. Selektor zawężony do dwóch klas jako zabezpieczenie. */
@media (min-width: 64rem) {
	.vm-burger.vm-icon-btn { display: none; }
}

.vm-burger__close, .vm-burger[aria-expanded="true"] .vm-burger__open { display: none; }
.vm-burger[aria-expanded="true"] .vm-burger__close { display: block; }

.vm-theme-toggle__moon, :root[data-theme="dark"] .vm-theme-toggle__sun { display: none; }
:root[data-theme="dark"] .vm-theme-toggle__moon { display: block; }

/* ==========================================================================
   6. SZUKANIE, JĘZYKI
   ========================================================================== */

.vm-search-panel {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 100%;
	background-color: var(--vm-surface);
	border-block-end: 2px solid var(--vm-ink);
	box-shadow: var(--vm-sh-3);
	z-index: var(--vm-z-search);
	padding-block: var(--vm-s5);
}

.vm-search-panel[hidden] { display: none; }
.vm-search-panel__inner { position: relative; display: grid; gap: var(--vm-s4); }
.vm-search-panel__close { position: absolute; inset-inline-end: var(--vm-gutter); inset-block-start: 0; }
.vm-search-panel__quick { display: flex; align-items: center; gap: var(--vm-s3); flex-wrap: wrap; }

.vm-search-panel__quick-label {
	font-size: var(--vm-t-label);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-label);
	color: var(--vm-ink-3);
}

.vm-searchform__label {
	display: block;
	font-size: var(--vm-t-label);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-label);
	color: var(--vm-ink-3);
	margin-block-end: var(--vm-s2);
}

/* Pole z twardą ramką 1 px, bez zaokrągleń i bez poświaty przy fokusie. */
.vm-searchform__field {
	display: flex;
	align-items: stretch;
	gap: 0;
	max-width: 44rem;
	background-color: var(--vm-surface);
	border: 1px solid var(--vm-ink);
	transition: box-shadow var(--vm-tr);
}

.vm-searchform__field:focus-within { box-shadow: 3px 3px 0 var(--vm-signal); }

.vm-searchform__icon {
	display: grid;
	place-items: center;
	padding-inline: var(--vm-s3);
	color: var(--vm-ink-3);
	flex: none;
}

.vm-searchform__input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	padding: var(--vm-s3) 0;
	/* 16 px minimum — poniżej iOS zoomuje stronę przy fokusie. */
	font-size: max(1rem, var(--vm-t-ui));
	appearance: none;
}

.vm-searchform__input:focus { outline: none; }
.vm-searchform__input::placeholder { color: var(--vm-ink-3); }
.vm-searchform__input::-webkit-search-cancel-button { appearance: none; }

.vm-searchform__field .vm-searchform__submit {
	flex: none;
	min-height: 0;
	border: 0;
	border-inline-start: 1px solid var(--vm-ink);
	background-color: var(--vm-ink);
	color: var(--vm-paper);
	padding-inline: var(--vm-s4);
}

.vm-searchform__field .vm-searchform__submit:hover { background-color: var(--vm-signal); color: #fff; }

/* --- Języki --- */
.vm-langs { position: relative; }

.vm-langs__toggle {
	display: flex;
	align-items: center;
	gap: var(--vm-s1);
	height: 2.25rem;
	padding-inline: var(--vm-s2);
	font-size: var(--vm-t-label);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-label);
	color: var(--vm-ink-2);
	transition: color var(--vm-tr), background-color var(--vm-tr);
}

.vm-langs__toggle:hover { color: var(--vm-ink); background-color: var(--vm-paper-2); }
.vm-langs__caret { transition: transform var(--vm-tr); }
.vm-langs__toggle[aria-expanded="true"] .vm-langs__caret { transform: rotate(180deg); }

.vm-langs__list { list-style: none; margin: 0; padding: 0; }

.vm-langs--dropdown .vm-langs__list {
	position: absolute;
	inset-inline-end: 0;
	inset-block-start: 100%;
	min-width: 10rem;
	padding-block: var(--vm-s1);
	background-color: var(--vm-surface);
	border: 1px solid var(--vm-ink);
	box-shadow: var(--vm-sh-3);
	z-index: var(--vm-z-drop);
}

.vm-langs--dropdown .vm-langs__list[hidden] { display: none; }

.vm-langs__item a {
	display: flex;
	align-items: center;
	gap: var(--vm-s2);
	min-height: 2.25rem;
	padding: var(--vm-s2) var(--vm-s4);
	font-size: var(--vm-t-label);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-label);
	color: var(--vm-ink-2);
	border-inline-start: 2px solid transparent;
}

.vm-langs__item a:hover { color: var(--vm-ink); background-color: var(--vm-surface-2); }
.vm-langs__item.is-current a { color: var(--vm-ink); border-inline-start-color: var(--vm-signal); }
.vm-langs__flag { flex: none; }

.vm-langs--inline .vm-langs__list { display: flex; flex-wrap: wrap; gap: var(--vm-s3); }
.vm-langs--inline .vm-langs__item a { min-height: 0; padding: 0; border: 0; }
.vm-langs--inline .vm-langs__item.is-current a { border-block-end: 2px solid var(--vm-signal); }

/* ==========================================================================
   7. PRZYCISKI I ZNACZNIKI
   ========================================================================== */

/* Przyciski płaskie, prostokątne, bez gradientu i bez podnoszenia.
   Reakcja: przesunięty cień w cynobrze — chwyt typograficzny, nie „unoszenie”. */
.vm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--vm-s2);
	min-height: 2.75rem;
	padding: var(--vm-s2) var(--vm-s5);
	font-size: var(--vm-t-label);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-label);
	border: 1px solid var(--vm-ink);
	transition: background-color var(--vm-tr), color var(--vm-tr), box-shadow var(--vm-tr);
}

.vm-btn--primary { background-color: var(--vm-ink); color: var(--vm-paper); }
.vm-btn--primary:hover { background-color: var(--vm-signal); border-color: var(--vm-signal); color: #fff; }

.vm-btn--secondary { background-color: transparent; color: var(--vm-ink); }
.vm-btn--secondary:hover { box-shadow: 4px 4px 0 var(--vm-signal); }

.vm-hero .vm-btn--secondary { border-color: rgba(255, 255, 255, 0.42); color: #fff; }
.vm-hero .vm-btn--secondary:hover { box-shadow: 4px 4px 0 var(--vm-signal); border-color: #fff; }

.vm-btn--lg { min-height: 3rem; padding-inline: var(--vm-s6); font-size: var(--vm-t-meta); }

/* Etykieta produktu — prostokąt, zero zaokrągleń. */
.vm-cat {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem var(--vm-s2);
	background: var(--vm-cat);
	color: #fff;
	font-size: var(--vm-t-label);
	font-weight: 800;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-label);
	white-space: nowrap;
}

.vm-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--vm-s1);
	padding: 0.125rem var(--vm-s2);
	font-size: var(--vm-t-label);
	font-weight: 800;
	line-height: 1.5;
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-label);
	border: 1px solid currentColor;
	color: var(--vm-ink-2);
	white-space: nowrap;
}

.vm-badge--beginner { color: var(--vm-ok); }
.vm-badge--intermediate { color: var(--vm-warn); }
.vm-badge--advanced { color: var(--vm-danger); }
.vm-badge--author, .vm-badge--cert { color: var(--vm-signal); }

.vm-chips { display: flex; flex-wrap: wrap; gap: var(--vm-s2); list-style: none; margin: 0; padding: 0; }

.vm-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--vm-s1);
	padding: 0.25rem var(--vm-s3);
	background-color: transparent;
	border: 1px solid var(--vm-rule-2);
	color: var(--vm-ink-2);
	font-size: var(--vm-t-label);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-label);
	transition: border-color var(--vm-tr), color var(--vm-tr);
}

.vm-chip:hover { border-color: var(--vm-ink); color: var(--vm-ink); }
.vm-chip__count { color: var(--vm-ink-3); font-variant-numeric: tabular-nums; }

/* --- Metadane: mono, bo to dane --- */
.vm-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vm-s2) var(--vm-s4);
	font-family: var(--vm-font-mono);
	font-size: var(--vm-t-meta);
	color: var(--vm-ink-3);
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
}

.vm-meta__item { display: inline-flex; align-items: center; gap: var(--vm-s1); }
.vm-meta__item .vm-icon { display: none; }
.vm-meta__item a { color: var(--vm-ink-2); }
.vm-meta__item a:hover { color: var(--vm-signal); }
.vm-meta__item--updated { color: var(--vm-ok); }
.vm-meta .vm-badge { font-family: var(--vm-font); }

/* ==========================================================================
   8. KARTY I OKŁADKA
   ========================================================================== */

/* Karta: biała, twarda ramka 1 px, minimalne zaokrąglenie, cień jak offset.
   Kadr obrazu bez zaokrągleń — mieszana geometria czyta się jako decyzja. */
.vm-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: var(--vm-surface);
	border: 1px solid var(--vm-rule);
	border-radius: var(--vm-r);
	overflow: hidden;
	transition: border-color var(--vm-tr), box-shadow var(--vm-tr);
}

.vm-card:hover { border-color: var(--vm-ink); box-shadow: var(--vm-sh-2); }

.vm-card__media {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	background-color: var(--vm-paper-2);
	overflow: hidden;
	border-radius: 0;
}

/* Obraz startuje lekko przygaszony i nasyca się przy hoverze — reakcja
   dotyczy treści, nie geometrii karty. */
.vm-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.82) contrast(1.03);
	transition: filter var(--vm-tr-2);
}

.vm-card:hover .vm-card__media img { filter: saturate(1) contrast(1.03); }

/* Zastępnik obrazka: płaskie pole w barwie produktu z nazwą krojem display.
   Bez gradientów — wygląda jak celowa plansza, nie jak brak zdjęcia. */
.vm-card__media--empty {
	display: grid;
	place-items: center;
	background-color: var(--vm-cat);
	background-image: repeating-linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.06) 0 2px,
		transparent 2px 8px
	);
}

.vm-card__media-text {
	font-family: var(--vm-font-display);
	font-size: clamp(1.5rem, 1rem + 2.4vw, 2.25rem);
	font-weight: 800;
	letter-spacing: var(--vm-ls-display);
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.94);
	text-align: center;
	padding: var(--vm-s4);
}

/* Etykieta produktu wpuszczona w narożnik obrazu, bez odstępu — kadr
   „przycięty” do krawędzi jak w druku. */
.vm-card__cat {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	z-index: 2;
}

.vm-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--vm-s3);
	padding: var(--vm-s4);
	flex: 1;
}

.vm-card__title { font-size: var(--vm-t-card); line-height: var(--vm-lh-title); }

.vm-card__title a { color: var(--vm-ink); }

.vm-card:hover .vm-card__title a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.12em;
	text-decoration-color: var(--vm-signal);
}

/* Lead karty szeryfem — podpis redakcyjny. */
.vm-card__dek, .vm-card__excerpt {
	font-family: var(--vm-font-dek);
	font-size: var(--vm-t-small);
	line-height: 1.55;
	color: var(--vm-ink-2);
	margin: 0;
	flex: 1;
}

.vm-card__foot, .vm-card__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vm-s2) var(--vm-s3);
	padding-block-start: var(--vm-s3);
	border-block-start: 1px solid var(--vm-rule);
	font-family: var(--vm-font-mono);
	font-size: var(--vm-t-label);
	color: var(--vm-ink-3);
	font-variant-numeric: tabular-nums;
}

.vm-card__foot .vm-badge, .vm-card__footer .vm-badge {
	margin-inline-start: auto;
	font-family: var(--vm-font);
}

.vm-card__thumb {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	background-color: var(--vm-paper-2);
	overflow: hidden;
}

.vm-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.vm-card.sticky { border-color: var(--vm-ink); }

/* --- Karta pierwsza w siatce: układ poziomy, większy tytuł --- */
@media (min-width: 62rem) {
	.vm-cards--feature > *:first-child {
		flex-direction: row;
	}

	.vm-cards--feature > *:first-child .vm-card__media,
	.vm-cards--feature > *:first-child .vm-card__thumb {
		width: 52%;
		flex: none;
		aspect-ratio: 16 / 10;
	}

	.vm-cards--feature > *:first-child .vm-card__body {
		padding: var(--vm-s6);
		justify-content: center;
		gap: var(--vm-s4);
	}

	.vm-cards--feature > *:first-child .vm-card__title { font-size: var(--vm-t-card-lg); }

	.vm-cards--feature > *:first-child .vm-card__dek,
	.vm-cards--feature > *:first-child .vm-card__excerpt {
		font-size: var(--vm-t-dek);
		flex: none;
	}
}

/* --- Okładka: obraz pełnowymiarowy, tekst na przyciemnieniu --- */
.vm-cover {
	position: relative;
	display: block;
	overflow: hidden;
	min-height: 24rem;
	background-color: var(--vm-dark);
	isolation: isolate;
	border: 1px solid var(--vm-ink);
}

@media (min-width: 48rem) { .vm-cover { min-height: 30rem; } }

.vm-cover__media { position: absolute; inset: 0; z-index: 0; }

.vm-cover__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.86) contrast(1.05);
	transition: filter var(--vm-tr-2);
}

.vm-cover:hover .vm-cover__media img { filter: saturate(1) contrast(1.05); }

.vm-cover__media--empty {
	background-color: var(--vm-cat);
	background-image: repeating-linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.05) 0 3px,
		transparent 3px 10px
	);
}

/* Przyciemnienie w czterech przystankach — jeden liniowy gradient zostawia
   widoczną krawędź w połowie kadru. */
.vm-cover__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to top,
		rgba(12, 11, 10, 0.94) 0%,
		rgba(12, 11, 10, 0.78) 26%,
		rgba(12, 11, 10, 0.34) 56%,
		rgba(12, 11, 10, 0.06) 100%
	);
}

.vm-cover__body {
	position: relative;
	z-index: 2;
	display: grid;
	gap: var(--vm-s3);
	align-content: end;
	height: 100%;
	min-height: inherit;
	padding: var(--vm-s6) var(--vm-s5) var(--vm-s5);
}

@media (min-width: 48rem) {
	.vm-cover__body { padding: var(--vm-s7) var(--vm-s6) var(--vm-s6); max-width: 44rem; }
}

.vm-cover__title {
	font-size: var(--vm-t-cover);
	line-height: var(--vm-lh-display);
	letter-spacing: var(--vm-ls-display);
	color: #fff;
}

.vm-cover__title a { color: #fff; }

.vm-cover:hover .vm-cover__title a {
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-underline-offset: 0.1em;
	text-decoration-color: var(--vm-signal);
}

.vm-cover__dek {
	font-family: var(--vm-font-dek);
	font-size: var(--vm-t-dek);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.84);
	margin: 0;
	max-width: 46ch;
}

.vm-cover__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vm-s2) var(--vm-s4);
	font-family: var(--vm-font-mono);
	font-size: var(--vm-t-label);
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-label);
	color: rgba(255, 255, 255, 0.68);
	font-variant-numeric: tabular-nums;
}

.vm-cover__meta .vm-badge { color: rgba(255, 255, 255, 0.86); font-family: var(--vm-font); }

/* Nadtytuł na okładce jest jasny, bo tło jest ciemne. */
.vm-cover .vm-kicker { color: #fff; }
.vm-cover .vm-kicker::before { background: var(--vm-signal); }

/* --- Karta pozioma w kolumnie pobocznej --- */
.vm-mini {
	position: relative;
	display: grid;
	grid-template-columns: 5rem minmax(0, 1fr);
	gap: var(--vm-s3);
	padding-block-end: var(--vm-s3);
	border-block-end: 1px solid var(--vm-rule);
}

.vm-mini:last-child { border-block-end: 0; padding-block-end: 0; }

.vm-mini__media { overflow: hidden; aspect-ratio: 1 / 1; background-color: var(--vm-paper-2); }

.vm-mini__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.82);
	transition: filter var(--vm-tr-2);
}

.vm-mini:hover .vm-mini__media img { filter: saturate(1); }

.vm-mini__media--empty {
	background-color: var(--vm-cat);
	background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.07) 0 2px, transparent 2px 7px);
}

.vm-mini__body { display: grid; gap: var(--vm-s1); align-content: center; min-width: 0; }

.vm-mini__title {
	font-family: var(--vm-font-display);
	font-size: var(--vm-t-small);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: var(--vm-ls-tight);
}

.vm-mini__title a { color: var(--vm-ink); }

.vm-mini:hover .vm-mini__title a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.1em;
	text-decoration-color: var(--vm-signal);
}

.vm-mini__meta {
	font-size: var(--vm-t-label);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-label);
	color: var(--vm-cat);
}

/* ==========================================================================
   9. KAFLE I LISTY
   ========================================================================== */

/* Kafel technologii: płaski, z grubą kreską w barwie produktu u góry.
   Bez poświaty w narożniku, bez podnoszenia. */
.vm-tiles, .vm-topics {
	display: grid;
	gap: var(--vm-s4);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 34rem) { .vm-tiles, .vm-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 52rem) { .vm-tiles, .vm-topics { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.vm-tile, .vm-topic {
	display: grid;
	gap: var(--vm-s2);
	align-content: start;
	height: 100%;
	padding: var(--vm-s4);
	background-color: var(--vm-surface);
	border: 1px solid var(--vm-rule);
	border-block-start: 4px solid var(--vm-cat);
	color: var(--vm-ink);
	transition: border-color var(--vm-tr), background-color var(--vm-tr);
}

.vm-tile:hover, .vm-topic:hover {
	border-color: var(--vm-ink);
	border-block-start-color: var(--vm-cat);
	background-color: var(--vm-surface-2);
}

.vm-tile__name, .vm-topic__name {
	font-family: var(--vm-font-display);
	font-size: var(--vm-t-h3);
	font-weight: 800;
	letter-spacing: var(--vm-ls-tight);
	text-transform: uppercase;
}

.vm-tile__count, .vm-topic__count {
	font-family: var(--vm-font-mono);
	font-size: var(--vm-t-label);
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-label);
	color: var(--vm-ink-3);
	font-variant-numeric: tabular-nums;
}

.vm-tile__desc {
	font-family: var(--vm-font-dek);
	font-size: var(--vm-t-small);
	color: var(--vm-ink-2);
	margin: 0;
}

.vm-topic__icon, .vm-topic__arrow { display: none; }
.vm-topic__body { display: grid; gap: var(--vm-s1); min-width: 0; }

/* --- Lista aktualizacji: wiersze z hairline, numer po lewej --- */
.vm-updates {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: vm-upd;
	border-block-start: 1px solid var(--vm-ink);
}

.vm-updates__item { counter-increment: vm-upd; border-block-end: 1px solid var(--vm-rule); }

.vm-updates__link {
	display: grid;
	grid-template-columns: 2rem minmax(0, 1fr) auto;
	align-items: baseline;
	gap: var(--vm-s3);
	padding-block: var(--vm-s3);
	min-height: 2.75rem;
	color: var(--vm-ink);
	transition: color var(--vm-tr);
}

.vm-updates__link::before {
	content: counter(vm-upd, decimal-leading-zero);
	font-family: var(--vm-font-mono);
	font-size: var(--vm-t-label);
	color: var(--vm-ink-3);
	font-variant-numeric: tabular-nums;
}

.vm-updates__link:hover { color: var(--vm-signal); }
.vm-updates__dot { display: none; }

.vm-updates__title {
	font-family: var(--vm-font-display);
	font-size: var(--vm-t-ui);
	font-weight: 700;
	letter-spacing: var(--vm-ls-tight);
}

.vm-updates__date {
	font-family: var(--vm-font-mono);
	font-size: var(--vm-t-label);
	color: var(--vm-ink-3);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   10. HERO
   ========================================================================== */

/* Ciemny pas: ciepła czerń, siatka włoskowatych linii i ziarno.
   Zero poświat radialnych, zero gradientu na tekście. */
.vm-hero {
	position: relative;
	background-color: var(--vm-dark);
	color: var(--vm-dark-ink);
	overflow: hidden;
	padding-block: var(--vm-s7) var(--vm-s7);
	border-block-end: 1px solid var(--vm-ink);
}

/* Siatka pionowych linii — odniesienie do łamu gazetowego. */
.vm-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: repeating-linear-gradient(
		to right,
		rgba(255, 255, 255, 0.055) 0 1px,
		transparent 1px 7.5rem
	);
}

/* Ziarno — druk offsetowy, nie płaski wektor. */
.vm-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: var(--vm-grain);
	opacity: 0.16;
	mix-blend-mode: overlay;
}

.vm-hero__inner { position: relative; z-index: 1; display: grid; gap: var(--vm-s4); }

/* Nadtytuł hero: kapitaliki nad kreską, nie pastylka. */
.vm-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: var(--vm-s3);
	margin: 0;
	font-size: var(--vm-t-label);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-label);
	color: rgba(255, 255, 255, 0.62);
}

.vm-hero__eyebrow::after {
	content: "";
	flex: 1;
	height: 1px;
	background: rgba(255, 255, 255, 0.18);
}

.vm-hero__title {
	font-size: var(--vm-t-display);
	line-height: var(--vm-lh-display);
	letter-spacing: var(--vm-ls-display);
	color: #fff;
	max-width: 22ch;
	text-transform: uppercase;
}

/* Wyróżnienie fragmentu tytułu: kolor sygnałowy, bez gradientu. */
.vm-hero__title em { font-style: normal; color: var(--vm-signal-2); }

.vm-hero__subtitle {
	font-family: var(--vm-font-dek);
	font-size: var(--vm-t-dek);
	line-height: 1.6;
	color: var(--vm-dark-ink-2);
	max-width: 52ch;
	margin: 0;
}

.vm-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vm-s4);
	margin-block-start: var(--vm-s2);
}

.vm-hero__search { flex: 1 1 18rem; max-width: 30rem; }
.vm-hero__search .vm-searchform__label { color: rgba(255, 255, 255, 0.55); }

.vm-hero__search .vm-searchform__field {
	background-color: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.42);
}

.vm-hero__search .vm-searchform__field:focus-within { box-shadow: 3px 3px 0 var(--vm-signal); }
.vm-hero__search .vm-searchform__input { color: #fff; }
.vm-hero__search .vm-searchform__input::placeholder { color: rgba(255, 255, 255, 0.45); }
.vm-hero__search .vm-searchform__icon { color: rgba(255, 255, 255, 0.55); }

.vm-hero__search .vm-searchform__field .vm-searchform__submit {
	background-color: #fff;
	color: var(--vm-ink);
	border-inline-start-color: rgba(255, 255, 255, 0.42);
}

.vm-hero__search .vm-searchform__field .vm-searchform__submit:hover {
	background-color: var(--vm-signal);
	color: #fff;
}

/* Wiersz danych wydania zamiast rzędu wielkich liczników. */
.vm-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vm-s2) var(--vm-s5);
	margin-block-start: var(--vm-s5);
	padding-block-start: var(--vm-s3);
	border-block-start: 1px solid rgba(255, 255, 255, 0.16);
	font-family: var(--vm-font-mono);
	font-size: var(--vm-t-label);
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-label);
	color: rgba(255, 255, 255, 0.5);
	font-variant-numeric: tabular-nums;
}

.vm-home { position: relative; }
.vm-home > * + * { margin-block-start: var(--vm-s7); }

/* --- Układ strony głównej --- */
.vm-featured { display: grid; gap: var(--vm-s5); }

@media (min-width: 64rem) {
	.vm-featured { grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); align-items: start; }

	.vm-featured__aside {
		display: grid;
		gap: var(--vm-s3);
		align-content: start;
		padding: var(--vm-s4);
		background-color: var(--vm-surface);
		border: 1px solid var(--vm-rule);
	}
}

/* ==========================================================================
   11. OKRUSZKI, ARCHIWA, PAGINACJA
   ========================================================================== */

.vm-breadcrumbs-wrap { padding-block-start: var(--vm-s4); }

.vm-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vm-s2);
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--vm-font-mono);
	font-size: var(--vm-t-label);
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-label);
	color: var(--vm-ink-3);
}

.vm-breadcrumbs__item { display: inline-flex; align-items: center; gap: var(--vm-s2); min-width: 0; }
.vm-breadcrumbs__item a { color: var(--vm-ink-3); }
.vm-breadcrumbs__item a:hover { color: var(--vm-signal); }

.vm-breadcrumbs__item [aria-current] {
	color: var(--vm-ink-2);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 24ch;
}

@media (min-width: 48rem) { .vm-breadcrumbs__item [aria-current] { max-width: 52ch; } }

.vm-breadcrumbs__sep { color: var(--vm-rule-2); }
.vm-breadcrumbs__sep .vm-icon { display: none; }
.vm-breadcrumbs__sep::after { content: "/"; }

/* Nagłówek archiwum: gruba kreska w barwie produktu, bez panelu z poświatą. */
.vm-archive-header {
	display: grid;
	gap: var(--vm-s3);
	padding-block: var(--vm-s5);
	margin-block-end: var(--vm-s6);
	border-block-start: 6px solid var(--vm-cat);
	border-block-end: 1px solid var(--vm-ink);
}

.vm-archive-header__eyebrow {
	font-size: var(--vm-t-label);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-label);
	color: var(--vm-cat);
}

.vm-archive-header__title {
	font-size: var(--vm-t-h1);
	line-height: var(--vm-lh-title);
	letter-spacing: var(--vm-ls-display);
	text-transform: uppercase;
}

.vm-archive-header__query { color: var(--vm-signal); }

.vm-archive-header__count {
	font-family: var(--vm-font-mono);
	font-size: var(--vm-t-label);
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-label);
	color: var(--vm-ink-3);
	margin: 0;
	font-variant-numeric: tabular-nums;
}

.vm-archive-header__desc {
	font-family: var(--vm-font-dek);
	font-size: var(--vm-t-dek);
	color: var(--vm-ink-2);
	max-width: 62ch;
}

.vm-archive-header__search { width: 100%; max-width: 32rem; }

.vm-empty, .vm-404 {
	display: grid;
	gap: var(--vm-s4);
	justify-items: start;
	padding-block: var(--vm-s7);
	border-block: 1px solid var(--vm-ink);
}

.vm-empty__icon { display: none; }

.vm-empty__title, .vm-404__title {
	font-size: var(--vm-t-h1);
	letter-spacing: var(--vm-ls-display);
	text-transform: uppercase;
}

.vm-empty__text, .vm-404__text {
	font-family: var(--vm-font-dek);
	font-size: var(--vm-t-dek);
	color: var(--vm-ink-2);
	margin: 0;
	max-width: 58ch;
}

.vm-empty__form, .vm-404__search { width: 100%; max-width: 32rem; }

.vm-404__code {
	font-family: var(--vm-font-mono);
	font-size: var(--vm-t-label);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-label);
	color: var(--vm-signal);
	margin: 0;
}

.vm-404__section { width: 100%; margin-block-start: var(--vm-s5); }

.vm-pagination { margin-block-start: var(--vm-s7); padding-block-start: var(--vm-s4); border-block-start: 1px solid var(--vm-ink); }

.vm-pagination__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vm-s2);
	list-style: none;
	margin: 0;
	padding: 0;
	justify-content: center;
}

.vm-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 2.5rem;
	min-height: 2.5rem;
	padding-inline: var(--vm-s3);
	border: 1px solid var(--vm-rule-2);
	font-family: var(--vm-font-mono);
	font-size: var(--vm-t-meta);
	color: var(--vm-ink-2);
	font-variant-numeric: tabular-nums;
	transition: border-color var(--vm-tr), color var(--vm-tr), background-color var(--vm-tr);
}

.vm-pagination .page-numbers:hover { border-color: var(--vm-ink); color: var(--vm-ink); }

.vm-pagination .page-numbers.current {
	background-color: var(--vm-ink);
	border-color: var(--vm-ink);
	color: var(--vm-paper);
}

.vm-pagination .page-numbers.dots { border-color: transparent; }
.vm-pagination .prev, .vm-pagination .next { display: inline-flex; align-items: center; gap: var(--vm-s1); }

/* ==========================================================================
   12. ARTYKUŁ
   ========================================================================== */

.vm-article { background: none; border: 0; padding: 0; }

.vm-article__header {
	display: grid;
	gap: var(--vm-s4);
	margin-block-end: var(--vm-s5);
	padding-block-end: var(--vm-s4);
	border-block-end: 2px solid var(--vm-ink);
}

.vm-article__title {
	font-size: var(--vm-t-h1);
	line-height: var(--vm-lh-display);
	letter-spacing: var(--vm-ls-display);
	max-width: 30ch;
}

/* Standfirst szeryfem, większy od treści. */
.vm-article__lead {
	font-family: var(--vm-font-dek);
	font-size: clamp(1.125rem, 1.05rem + 0.5vw, 1.375rem);
	line-height: 1.5;
	color: var(--vm-ink-2);
	max-width: 58ch;
	margin: 0;
}

.vm-article__figure { margin: 0 0 var(--vm-s5); background-color: var(--vm-paper-2); }

.vm-article__image { width: 100%; display: block; filter: saturate(0.9); }

.vm-article__caption {
	display: flex;
	gap: var(--vm-s2);
	font-family: var(--vm-font-mono);
	font-size: var(--vm-t-label);
	color: var(--vm-ink-3);
	padding-block-start: var(--vm-s2);
	margin: 0;
}

.vm-article__caption::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	background: var(--vm-cat);
	flex: none;
	margin-block-start: 0.35em;
}

.vm-article__footer {
	margin-block-start: var(--vm-s6);
	padding-block-start: var(--vm-s4);
	border-block-start: 1px solid var(--vm-ink);
	display: grid;
	gap: var(--vm-s5);
}

.vm-article__tags-title {
	font-size: var(--vm-t-label);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-label);
	color: var(--vm-ink-3);
	margin-block-end: var(--vm-s3);
}

.vm-article__tags-title .vm-icon { display: none; }

/* --- Spis treści --- */
.vm-toc { border: 1px solid var(--vm-rule); background-color: var(--vm-surface); margin-block-end: var(--vm-s5); }

.vm-toc__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vm-s3);
	padding: var(--vm-s3) var(--vm-s4);
	min-height: 2.75rem;
	cursor: pointer;
	list-style: none;
	border-block-end: 1px solid var(--vm-rule);
}

.vm-toc__summary::-webkit-details-marker { display: none; }

.vm-toc__title {
	display: inline-flex;
	align-items: center;
	gap: var(--vm-s2);
	font-size: var(--vm-t-label);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-label);
	color: var(--vm-ink-2);
}

.vm-toc__title .vm-icon { display: none; }
.vm-toc__caret { color: var(--vm-ink-3); transition: transform var(--vm-tr); }
.vm-toc__details[open] .vm-toc__caret { transform: rotate(180deg); }

.vm-toc__list { list-style: none; margin: 0; padding: var(--vm-s2) 0; counter-reset: vm-toc-h2; }
.vm-toc__item--h2 { counter-increment: vm-toc-h2; }
.vm-toc__item--h3 { padding-inline-start: var(--vm-s5); }

.vm-toc__link {
	display: grid;
	grid-template-columns: 1.5rem minmax(0, 1fr);
	gap: var(--vm-s2);
	padding: var(--vm-s2) var(--vm-s4);
	font-size: var(--vm-t-small);
	line-height: 1.45;
	color: var(--vm-ink-2);
	border-inline-start: 2px solid transparent;
	transition: color var(--vm-tr), border-color var(--vm-tr), background-color var(--vm-tr);
}

.vm-toc__item--h2 > .vm-toc__link::before {
	content: counter(vm-toc-h2, decimal-leading-zero);
	font-family: var(--vm-font-mono);
	font-size: var(--vm-t-label);
	color: var(--vm-ink-3);
	font-variant-numeric: tabular-nums;
}

.vm-toc__item--h3 > .vm-toc__link { grid-template-columns: minmax(0, 1fr); font-size: var(--vm-t-meta); color: var(--vm-ink-3); }
.vm-toc__link:hover { color: var(--vm-ink); background-color: var(--vm-surface-2); }

.vm-toc__link.is-active {
	color: var(--vm-ink);
	border-inline-start-color: var(--vm-signal);
	font-weight: 700;
}

.vm-toc__item--h2 > .vm-toc__link.is-active::before { color: var(--vm-signal); }

@media (min-width: 64rem) {
	.vm-toc__summary { cursor: default; pointer-events: none; }
	.vm-toc__caret { display: none; }
}

/* --- Panel „Zanim zaczniesz” --- */
.vm-lab {
	margin-block-end: var(--vm-s5);
	background-color: var(--vm-surface-2);
	border: 1px solid var(--vm-rule);
	border-block-start: 4px solid var(--vm-cat);
}

.vm-lab__title {
	font-size: var(--vm-t-label);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-label);
	color: var(--vm-cat);
	padding: var(--vm-s3) var(--vm-s5);
	border-block-end: 1px solid var(--vm-rule);
	margin: 0;
}

.vm-lab__title .vm-icon { display: none; }

.vm-lab__facts { display: grid; gap: var(--vm-s4); padding: var(--vm-s4) var(--vm-s5); margin: 0; }

@media (min-width: 40rem) { .vm-lab__facts { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); } }

.vm-lab__fact dt {
	font-size: var(--vm-t-label);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-label);
	color: var(--vm-ink-3);
	margin-block-end: 2px;
}

.vm-lab__fact dd {
	margin: 0;
	font-family: var(--vm-font-mono);
	font-size: var(--vm-t-small);
	color: var(--vm-ink);
	font-variant-numeric: tabular-nums;
}

.vm-lab__requirements { padding: var(--vm-s4) var(--vm-s5); border-block-start: 1px solid var(--vm-rule); }

.vm-lab__subtitle {
	font-size: var(--vm-t-label);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-label);
	color: var(--vm-ink-3);
	margin-block-end: var(--vm-s3);
}

.vm-lab__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--vm-s2); }

.vm-lab__list li {
	display: grid;
	grid-template-columns: 1rem minmax(0, 1fr);
	gap: var(--vm-s2);
	font-size: var(--vm-t-small);
	color: var(--vm-ink-2);
}

.vm-lab__check { display: none; }

.vm-lab__list li::before {
	content: "";
	width: 0.375rem;
	height: 0.375rem;
	background: var(--vm-ink-3);
	margin-block-start: 0.6em;
}

/* ==========================================================================
   13. TREŚĆ
   ========================================================================== */

.vm-prose { max-width: var(--vm-measure); font-size: var(--vm-t-body); line-height: var(--vm-lh-body); }

.vm-prose > .alignwide { max-width: min(64rem, 100%); }
.vm-prose > .alignfull { max-width: none; }
.vm-prose > * + * { margin-block-start: var(--vm-s4); }
.vm-prose > p { margin: 0; }

.vm-prose h2 {
	font-size: var(--vm-t-h2);
	line-height: var(--vm-lh-title);
	margin-block: var(--vm-s6) var(--vm-s3);
	padding-block-start: var(--vm-s3);
	border-block-start: 1px solid var(--vm-rule);
	text-transform: uppercase;
}

.vm-prose h3 { font-size: var(--vm-t-h3); margin-block: var(--vm-s5) var(--vm-s3); }

.vm-prose h4 {
	font-size: var(--vm-t-label);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-label);
	color: var(--vm-ink-2);
	margin-block: var(--vm-s4) var(--vm-s2);
}

.vm-prose h2:first-child, .vm-prose h3:first-child { margin-block-start: 0; border-block-start: 0; padding-block-start: 0; }

.vm-heading-anchor {
	color: var(--vm-rule-2);
	font-weight: 400;
	opacity: 0;
	margin-inline-start: 0.4em;
	transition: opacity var(--vm-tr), color var(--vm-tr);
}

.vm-heading:hover .vm-heading-anchor, .vm-heading-anchor:focus-visible { opacity: 1; color: var(--vm-signal); }

/* Linki w treści: kolor atramentu z podkreśleniem w cynobrze. */
.vm-prose a {
	color: var(--vm-ink);
	text-decoration: underline;
	text-decoration-color: var(--vm-signal);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.16em;
	transition: color var(--vm-tr), text-decoration-thickness var(--vm-tr);
}

.vm-prose a:hover { color: var(--vm-signal); text-decoration-thickness: 2px; }

.vm-prose ul, .vm-prose ol { padding-inline-start: 1.4em; }
.vm-prose li + li { margin-block-start: var(--vm-s2); }
.vm-prose li > ul, .vm-prose li > ol { margin-block-start: var(--vm-s2); }
.vm-prose ::marker { color: var(--vm-signal); }
.vm-prose strong { font-weight: 700; }

.vm-prose figure { margin-block: var(--vm-s5); }
.vm-prose img { filter: saturate(0.9); }

.vm-prose figcaption {
	display: flex;
	gap: var(--vm-s2);
	font-family: var(--vm-font-mono);
	font-size: var(--vm-t-label);
	line-height: 1.5;
	color: var(--vm-ink-3);
	margin-block-start: var(--vm-s2);
}

.vm-prose figcaption::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	background: var(--vm-cat);
	flex: none;
	margin-block-start: 0.35em;
}

.vm-prose .is-style-vm-screenshot img { border: 1px solid var(--vm-rule-2); }

/* --- Kod --- */
.vm-prose :not(pre) > code {
	font-family: var(--vm-font-mono);
	font-size: 0.875em;
	padding: 0.1em 0.3em;
	background-color: var(--vm-paper-2);
	border: 1px solid var(--vm-rule);
	color: var(--vm-ink);
	overflow-wrap: break-word;
}

.vm-code {
	margin-block: var(--vm-s5);
	background-color: var(--vm-code-bg);
	border: 1px solid var(--vm-ink);
	overflow: hidden;
}

.vm-code__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vm-s3);
	padding: var(--vm-s2) var(--vm-s4);
	border-block-end: 1px solid var(--vm-code-rule);
	min-height: 2.25rem;
}

.vm-code__lang {
	font-family: var(--vm-font-mono);
	font-size: var(--vm-t-label);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-label);
	color: var(--vm-code-label);
}

.vm-code__copy {
	display: inline-flex;
	align-items: center;
	gap: var(--vm-s1);
	margin-inline-start: auto;
	padding: 0.25rem var(--vm-s2);
	border: 1px solid var(--vm-code-rule);
	font-family: var(--vm-font-mono);
	font-size: var(--vm-t-label);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-label);
	color: var(--vm-code-label);
	min-height: 1.75rem;
	transition: color var(--vm-tr), border-color var(--vm-tr);
}

.vm-code__copy .vm-icon { display: none; }
.vm-code__copy:hover { color: #fff; border-color: #fff; }
.vm-code__copy.is-copied { color: var(--vm-ok); border-color: var(--vm-ok); }

.vm-code pre, .vm-prose pre {
	margin: 0;
	padding: var(--vm-s4);
	overflow-x: auto;
	background-color: var(--vm-code-bg);
	color: var(--vm-code-fg);
	font-family: var(--vm-font-mono);
	font-size: 0.875rem;
	line-height: 1.7;
	/* Kod się nie zawija — złamana linia polecenia PowerCLI jest błędna. */
	white-space: pre;
	tab-size: 4;
	-webkit-overflow-scrolling: touch;
}

.vm-code pre code, .vm-prose pre code { background: none; border: 0; padding: 0; font-size: inherit; color: inherit; }

.vm-prose > pre, .vm-prose .wp-block-code {
	margin-block: var(--vm-s5);
	background-color: var(--vm-code-bg);
	color: var(--vm-code-fg);
	border: 1px solid var(--vm-ink);
	overflow: hidden;
}

.vm-prose .wp-block-code > pre { border: 0; }

/* --- Tabele: podwójna kreska u góry, jak w tabelach drukowanych --- */
.vm-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-block: var(--vm-s5);
	border-block-start: 3px double var(--vm-ink);
	border-block-end: 1px solid var(--vm-ink);
}

.vm-table-wrap:focus-visible { outline: 2px solid var(--vm-signal); outline-offset: 0; }

.vm-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--vm-t-small);
	min-width: 30rem;
	font-variant-numeric: tabular-nums;
}

.vm-prose th, .vm-prose td {
	padding: var(--vm-s3) var(--vm-s4);
	text-align: start;
	border-block-end: 1px solid var(--vm-rule);
	vertical-align: top;
}

.vm-prose th:first-child, .vm-prose td:first-child { padding-inline-start: 0; }

.vm-prose thead th {
	font-size: var(--vm-t-label);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-label);
	color: var(--vm-ink-3);
	background: none;
	border-block-end: 1px solid var(--vm-ink);
	position: sticky;
	inset-block-start: 0;
}

.vm-prose tbody tr:last-child th, .vm-prose tbody tr:last-child td { border-block-end: 0; }

.vm-prose .is-style-vm-compact th, .vm-prose .is-style-vm-compact td {
	padding: var(--vm-s2) var(--vm-s3);
	font-family: var(--vm-font-mono);
	font-size: var(--vm-t-meta);
}

.vm-prose .wp-block-table { margin-block: 0; overflow: visible; }

/* --- Cytat: wielki znak cudzysłowu, bez tła --- */
.vm-prose blockquote {
	position: relative;
	margin-block: var(--vm-s6);
	padding-inline-start: var(--vm-s6);
	font-family: var(--vm-font-dek);
	font-size: clamp(1.125rem, 1.05rem + 0.5vw, 1.375rem);
	line-height: 1.5;
	color: var(--vm-ink);
}

.vm-prose blockquote::before {
	content: "\201D";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: -0.1em;
	font-family: var(--vm-font-dek);
	font-size: 3.5em;
	line-height: 1;
	color: var(--vm-signal);
}

.vm-prose blockquote cite {
	display: block;
	margin-block-start: var(--vm-s3);
	font-family: var(--vm-font);
	font-size: var(--vm-t-label);
	font-style: normal;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-label);
	color: var(--vm-ink-3);
}

.vm-prose .is-style-vm-callout {
	padding: var(--vm-s5);
	background-color: var(--vm-surface);
	border: 1px solid var(--vm-rule);
	border-inline-start: 4px solid var(--vm-signal);
}

.vm-prose .is-style-vm-callout::before { display: none; }

/* --- Ramki informacyjne --- */
.vm-prose .is-style-vm-note,
.vm-prose .is-style-vm-tip,
.vm-prose .is-style-vm-warning,
.vm-prose .is-style-vm-danger {
	margin-block: var(--vm-s5);
	padding: var(--vm-s4) var(--vm-s5);
	border: 1px solid;
	border-inline-start-width: 4px;
	font-size: var(--vm-t-small);
	line-height: 1.6;
}

.vm-prose .is-style-vm-note > *:first-child,
.vm-prose .is-style-vm-tip > *:first-child,
.vm-prose .is-style-vm-warning > *:first-child,
.vm-prose .is-style-vm-danger > *:first-child { margin-block-start: 0; }

/* Etykieta z pierwszego <strong> — zostaje tłumaczalna, inaczej niż tekst
   wstawiony przez CSS `content`. */
.vm-prose .is-style-vm-note strong:first-child,
.vm-prose .is-style-vm-tip strong:first-child,
.vm-prose .is-style-vm-warning strong:first-child,
.vm-prose .is-style-vm-danger strong:first-child {
	display: block;
	font-size: var(--vm-t-label);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-label);
	margin-block-end: var(--vm-s1);
}

.vm-prose .is-style-vm-note { background-color: var(--vm-info-bg); border-color: var(--vm-rule); border-inline-start-color: var(--vm-info); }
.vm-prose .is-style-vm-note strong:first-child { color: var(--vm-info); }
.vm-prose .is-style-vm-tip { background-color: var(--vm-ok-bg); border-color: var(--vm-rule); border-inline-start-color: var(--vm-ok); }
.vm-prose .is-style-vm-tip strong:first-child { color: var(--vm-ok); }
.vm-prose .is-style-vm-warning { background-color: var(--vm-warn-bg); border-color: var(--vm-rule); border-inline-start-color: var(--vm-warn); }
.vm-prose .is-style-vm-warning strong:first-child { color: var(--vm-warn); }
.vm-prose .is-style-vm-danger { background-color: var(--vm-danger-bg); border-color: var(--vm-rule); border-inline-start-color: var(--vm-danger); }
.vm-prose .is-style-vm-danger strong:first-child { color: var(--vm-danger); }

/* --- Listy specjalne --- */
.vm-prose .is-style-vm-checklist { list-style: none; padding-inline-start: 0; }
.vm-prose .is-style-vm-checklist li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); }

.vm-prose .is-style-vm-checklist li::before {
	content: "";
	width: 0.75rem;
	height: 0.4rem;
	margin-block-start: 0.5em;
	border-inline-start: 2px solid var(--vm-ok);
	border-block-end: 2px solid var(--vm-ok);
	transform: rotate(-45deg);
}

.vm-prose .is-style-vm-steps { list-style: none; counter-reset: vm-step; padding-inline-start: 0; }

.vm-prose .is-style-vm-steps > li {
	counter-increment: vm-step;
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr);
	gap: var(--vm-s3);
}

/* Numer kroku: prostokąt w cynobrze, nie kółko. */
.vm-prose .is-style-vm-steps > li::before {
	content: counter(vm-step, decimal-leading-zero);
	display: grid;
	place-items: center;
	width: 2rem;
	height: 1.5rem;
	background: var(--vm-signal);
	color: #fff;
	font-family: var(--vm-font-mono);
	font-size: var(--vm-t-label);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	margin-block-start: 0.2em;
}

.vm-prose details {
	margin-block: var(--vm-s4);
	padding: var(--vm-s3) var(--vm-s4);
	background-color: var(--vm-surface);
	border: 1px solid var(--vm-rule);
}

.vm-prose summary {
	cursor: pointer;
	font-size: var(--vm-t-label);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-label);
	color: var(--vm-ink-2);
}

.vm-prose iframe { max-width: 100%; border: 1px solid var(--vm-rule); }

.vm-page-links {
	display: flex;
	align-items: center;
	gap: var(--vm-s2);
	flex-wrap: wrap;
	margin-block-start: var(--vm-s5);
	font-family: var(--vm-font-mono);
	font-size: var(--vm-t-label);
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-label);
}

.vm-page-links__label { color: var(--vm-ink-3); }

.vm-page-links a, .vm-page-links__item {
	display: inline-grid;
	place-items: center;
	min-width: 2rem;
	min-height: 2rem;
	padding-inline: var(--vm-s2);
	border: 1px solid var(--vm-rule-2);
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   14. FAQ, AUTOR, UDOSTĘPNIANIE, NAWIGACJA
   ========================================================================== */

.vm-faq { margin-block-start: var(--vm-s6); }

.vm-faq__title {
	font-size: var(--vm-t-h2);
	text-transform: uppercase;
	padding-block-end: var(--vm-s2);
	margin-block-end: 0;
	border-block-end: 2px solid var(--vm-ink);
}

.vm-faq__list { display: block; }
.vm-faq__item { border: 0; border-block-end: 1px solid var(--vm-rule); background: none; }

.vm-faq__question {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--vm-s3);
	padding-block: var(--vm-s3);
	min-height: 2.75rem;
	cursor: pointer;
	list-style: none;
	font-family: var(--vm-font-display);
	font-size: var(--vm-t-ui);
	font-weight: 700;
	letter-spacing: var(--vm-ls-tight);
}

.vm-faq__question::-webkit-details-marker { display: none; }
.vm-faq__caret { color: var(--vm-ink-3); transition: transform var(--vm-tr); flex: none; }
.vm-faq__item[open] .vm-faq__caret { transform: rotate(180deg); }

.vm-faq__answer {
	padding-block-end: var(--vm-s4);
	font-family: var(--vm-font-dek);
	font-size: var(--vm-t-small);
	color: var(--vm-ink-2);
	max-width: 66ch;
}

/* --- Autor --- */
.vm-author {
	display: grid;
	gap: var(--vm-s4);
	margin-block-start: var(--vm-s6);
	padding-block: var(--vm-s5);
	border-block: 1px solid var(--vm-ink);
	background: none;
}

@media (min-width: 40rem) { .vm-author { grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: var(--vm-s5); } }

/* Avatar kwadratowy — okrągły w otoczeniu prostokątów byłby obcy. */
.vm-author__avatar img { width: 3.5rem; height: 3.5rem; border-radius: 0; filter: saturate(0.85); }

.vm-author__body { display: grid; gap: var(--vm-s1); min-width: 0; }

.vm-author__name {
	font-family: var(--vm-font-display);
	font-size: var(--vm-t-ui);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-tight);
	margin: 0;
}

.vm-author__name a { color: var(--vm-ink); }
.vm-author__name a:hover { color: var(--vm-signal); }

.vm-author__job {
	margin: 0;
	font-size: var(--vm-t-label);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-label);
	color: var(--vm-signal);
}

.vm-author__bio {
	font-family: var(--vm-font-dek);
	font-size: var(--vm-t-small);
	color: var(--vm-ink-2);
	margin-block-start: var(--vm-s2);
	max-width: 66ch;
}

.vm-author__certs { display: flex; flex-wrap: wrap; gap: var(--vm-s2); margin-block-start: var(--vm-s2); }

.vm-author__socials { display: flex; flex-wrap: wrap; gap: var(--vm-s3); list-style: none; margin: var(--vm-s3) 0 0; padding: 0; }

.vm-author__socials a {
	display: inline-flex;
	align-items: center;
	gap: var(--vm-s1);
	font-size: var(--vm-t-label);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-label);
	color: var(--vm-ink-2);
	border-block-end: 2px solid var(--vm-rule-2);
	transition: color var(--vm-tr), border-color var(--vm-tr);
}

.vm-author__socials a:hover { color: var(--vm-signal); border-color: var(--vm-signal); }
.vm-author__socials .vm-icon { display: none; }

/* --- Udostępnianie --- */
.vm-share__title {
	font-size: var(--vm-t-label);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-label);
	color: var(--vm-ink-3);
	margin-block-end: var(--vm-s3);
}

.vm-share__list { display: flex; flex-wrap: wrap; gap: var(--vm-s2); list-style: none; margin: 0; padding: 0; }

.vm-share__link {
	display: inline-flex;
	align-items: center;
	gap: var(--vm-s2);
	padding: var(--vm-s2) var(--vm-s4);
	min-height: 2.5rem;
	background: none;
	border: 1px solid var(--vm-rule-2);
	font-size: var(--vm-t-label);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-label);
	color: var(--vm-ink-2);
	transition: border-color var(--vm-tr), color var(--vm-tr), box-shadow var(--vm-tr);
}

.vm-share__link .vm-icon { display: none; }
.vm-share__link:hover { border-color: var(--vm-ink); color: var(--vm-ink); box-shadow: 3px 3px 0 var(--vm-signal); }
.vm-share__link.is-copied { border-color: var(--vm-ok); color: var(--vm-ok); box-shadow: none; }

/* --- Nawigacja wpisów --- */
.vm-post-nav { display: grid; gap: 0; margin-block-start: var(--vm-s6); border-block-start: 1px solid var(--vm-ink); }

@media (min-width: 44rem) { .vm-post-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--vm-s5); } }

.vm-post-nav__link {
	display: grid;
	gap: var(--vm-s1);
	padding-block: var(--vm-s4);
	border: 0;
	border-block-end: 1px solid var(--vm-rule);
	background: none;
	color: var(--vm-ink);
	transition: color var(--vm-tr);
}

.vm-post-nav__link:hover { color: var(--vm-signal); }
.vm-post-nav__link--next { text-align: end; }

.vm-post-nav__label {
	display: inline-flex;
	align-items: center;
	gap: var(--vm-s1);
	font-size: var(--vm-t-label);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-label);
	color: var(--vm-ink-3);
}

.vm-post-nav__link--next .vm-post-nav__label { justify-content: flex-end; }
.vm-post-nav__icon { display: none; }

.vm-post-nav__title {
	font-family: var(--vm-font-display);
	font-size: var(--vm-t-small);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: var(--vm-ls-tight);
}

.vm-related { margin-block-start: var(--vm-s7); }
.vm-after-post { margin-block-start: var(--vm-s6); padding-block: var(--vm-s5); border-block: 1px solid var(--vm-rule); }

/* ==========================================================================
   15. KOMENTARZE
   ========================================================================== */

.vm-comments { margin-block-start: var(--vm-s7); padding-block-start: var(--vm-s4); border-block-start: 2px solid var(--vm-ink); }

.vm-comments__title { font-size: var(--vm-t-h2); text-transform: uppercase; margin-block-end: var(--vm-s5); }

.vm-comments__list, .vm-comments__list .children { list-style: none; margin: 0; padding: 0; }

.vm-comments__list .children {
	margin-block-start: var(--vm-s4);
	padding-inline-start: var(--vm-s4);
	border-inline-start: 1px solid var(--vm-rule);
}

.vm-comment { margin-block-end: var(--vm-s4); }
.vm-comment__body { padding-block-end: var(--vm-s4); border-block-end: 1px solid var(--vm-rule); background: none; }
.vm-comment__header { display: flex; align-items: center; gap: var(--vm-s3); margin-block-end: var(--vm-s2); flex-wrap: wrap; }
.vm-comment__avatar img { width: 2rem; height: 2rem; border-radius: 0; filter: saturate(0.85); }
.vm-comment__identity { display: flex; align-items: center; gap: var(--vm-s2); flex-wrap: wrap; min-width: 0; }

.vm-comment__author {
	font-size: var(--vm-t-label);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-label);
}

.vm-comment__author a { color: var(--vm-ink); }

.vm-comment__date {
	font-family: var(--vm-font-mono);
	font-size: var(--vm-t-label);
	color: var(--vm-ink-3);
	font-variant-numeric: tabular-nums;
}

.vm-comment__date:hover { color: var(--vm-signal); }

.vm-comment__moderation {
	font-size: var(--vm-t-label);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-label);
	color: var(--vm-warn);
	background-color: var(--vm-warn-bg);
	padding: var(--vm-s2) var(--vm-s3);
	margin-block-end: var(--vm-s3);
}

.vm-comment__content { font-size: var(--vm-t-small); line-height: 1.65; max-width: 66ch; }
.vm-comment__content > * + * { margin-block-start: var(--vm-s3); }

.vm-comment__content pre {
	background-color: var(--vm-code-bg);
	color: var(--vm-code-fg);
	padding: var(--vm-s3);
	overflow-x: auto;
	font-family: var(--vm-font-mono);
	font-size: 0.8125rem;
}

.vm-comment__content code {
	font-family: var(--vm-font-mono);
	font-size: 0.875em;
	background-color: var(--vm-paper-2);
	border: 1px solid var(--vm-rule);
	padding: 0.1em 0.3em;
}

.vm-comment__actions {
	display: flex;
	gap: var(--vm-s4);
	margin-block-start: var(--vm-s3);
	font-size: var(--vm-t-label);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-label);
}

.vm-comment__actions a { color: var(--vm-ink-2); border-block-end: 2px solid var(--vm-rule-2); }
.vm-comment__actions a:hover { color: var(--vm-signal); border-color: var(--vm-signal); }

.vm-comments__closed { font-size: var(--vm-t-small); color: var(--vm-ink-3); padding-block: var(--vm-s4); }

.comment-respond { margin-block-start: var(--vm-s5); padding-block-start: var(--vm-s4); border-block-start: 1px solid var(--vm-ink); background: none; }

.comment-reply-title {
	font-family: var(--vm-font-display);
	font-size: var(--vm-t-h3);
	font-weight: 800;
	text-transform: uppercase;
	margin-block-end: var(--vm-s3);
}

.comment-reply-title small { font-size: var(--vm-t-label); font-weight: 400; margin-inline-start: var(--vm-s2); text-transform: none; }

.comment-notes, .comment-form-cookies-consent label, .vm-form__hint {
	font-family: var(--vm-font-dek);
	font-size: var(--vm-t-small);
	color: var(--vm-ink-3);
	line-height: 1.5;
}

.vm-form__hint { display: block; margin-block-start: var(--vm-s1); }
.comment-form p { margin-block-end: var(--vm-s4); }

.comment-form label {
	display: block;
	font-size: var(--vm-t-label);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-label);
	color: var(--vm-ink-3);
	margin-block-end: var(--vm-s2);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: var(--vm-s3);
	/* 16 px minimum — poniżej iOS zoomuje. */
	font-size: max(1rem, var(--vm-t-small));
	background-color: var(--vm-surface);
	border: 1px solid var(--vm-rule-2);
	transition: border-color var(--vm-tr), box-shadow var(--vm-tr);
}

.comment-form input:focus, .comment-form textarea:focus {
	outline: none;
	border-color: var(--vm-ink);
	box-shadow: 3px 3px 0 var(--vm-signal);
}

.comment-form textarea { resize: vertical; min-height: 8rem; line-height: 1.6; }
.comment-form-cookies-consent { display: flex; align-items: flex-start; gap: var(--vm-s2); }
.comment-form-cookies-consent input { margin-block-start: 0.25rem; accent-color: var(--vm-signal); }
.comment-form-cookies-consent label { margin: 0; font-weight: 400; text-transform: none; letter-spacing: 0; }

.vm-required { color: var(--vm-signal); }
.vm-honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
   16. PANEL BOCZNY I WIDGETY
   ========================================================================== */

.vm-sidebar { display: grid; gap: var(--vm-s5); }

@media (min-width: 64rem) {
	.vm-sidebar__sticky {
		position: sticky;
		inset-block-start: calc(var(--vm-header-h) + var(--vm-s4));
		display: grid;
		gap: var(--vm-s5);
		max-height: calc(100vh - var(--vm-header-h) - var(--vm-s6));
		overflow-y: auto;
		scrollbar-width: thin;
	}
}

.widget { padding: 0; background: none; border: 0; font-size: var(--vm-t-small); }

.widget__title {
	font-size: var(--vm-t-label);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-label);
	color: var(--vm-ink);
	margin-block-end: 0;
	padding-block-end: var(--vm-s2);
	border-block-end: 2px solid var(--vm-ink);
}

.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li { border-block-end: 1px solid var(--vm-rule); }
.widget li:last-child { border-block-end: 0; }

.widget li a {
	display: block;
	padding-block: var(--vm-s2);
	min-height: 2.25rem;
	color: var(--vm-ink-2);
	transition: color var(--vm-tr);
}

.widget li a:hover { color: var(--vm-signal); }
.widget .children, .widget .sub-menu { padding-inline-start: var(--vm-s3); border-inline-start: 1px solid var(--vm-rule); }

.widget_tag_cloud .tagcloud { display: flex; flex-wrap: wrap; gap: var(--vm-s2); padding-block-start: var(--vm-s3); }

.widget_tag_cloud a {
	display: inline-flex;
	padding: 0.1875rem var(--vm-s2);
	border: 1px solid var(--vm-rule-2);
	color: var(--vm-ink-2);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-label);
	/* WordPress ustawia rozmiar inline — normalizujemy dla spójności skali. */
	font-size: var(--vm-t-label) !important;
}

.widget_tag_cloud a:hover { border-color: var(--vm-ink); color: var(--vm-ink); }

.widget select {
	width: 100%;
	margin-block-start: var(--vm-s3);
	padding: var(--vm-s2);
	font-size: var(--vm-t-small);
	background-color: var(--vm-surface);
	border: 1px solid var(--vm-rule-2);
}

/* ==========================================================================
   17. STOPKA
   ========================================================================== */

.vm-footer {
	position: relative;
	margin-block-start: auto;
	background-color: var(--vm-dark);
	color: var(--vm-dark-ink-2);
	padding-block: var(--vm-s7) var(--vm-s6);
	font-size: var(--vm-t-small);
	overflow: hidden;
}

.vm-footer::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: var(--vm-grain);
	opacity: 0.12;
	mix-blend-mode: overlay;
}

.vm-footer > * { position: relative; z-index: 1; }

.vm-footer__widgets {
	display: grid;
	gap: var(--vm-s6);
	padding-block-end: var(--vm-s6);
	margin-block-end: var(--vm-s5);
	border-block-end: 1px solid var(--vm-dark-rule);
}

@media (min-width: 44rem) { .vm-footer__widgets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 66rem) { .vm-footer__widgets { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.vm-footer .widget__title { color: #fff; border-color: var(--vm-dark-rule); }
.vm-footer .widget li { border-color: var(--vm-dark-rule); }
.vm-footer .widget li a { color: var(--vm-dark-ink-2); }
.vm-footer .widget li a:hover { color: #fff; }

.vm-footer__bottom { display: grid; gap: var(--vm-s5); }

@media (min-width: 64rem) {
	.vm-footer__bottom { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: var(--vm-s7); align-items: start; }
}

.vm-footer__meta { display: grid; gap: var(--vm-s2); max-width: 56ch; }

.vm-footer__copy {
	margin: 0;
	font-family: var(--vm-font-display);
	font-size: var(--vm-t-ui);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-tight);
	color: #fff;
}

.vm-footer__text { margin: 0; font-family: var(--vm-font-dek); color: var(--vm-dark-ink-2); }

.vm-footer__disclaimer { margin: 0; font-size: var(--vm-t-meta); line-height: 1.6; color: #7f7a71; }

.vm-footer__nav { display: grid; gap: var(--vm-s3); justify-items: start; }
@media (min-width: 64rem) { .vm-footer__nav { justify-items: end; } }

.vm-footer-menu__list, .vm-legal-menu__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vm-s2) var(--vm-s4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.vm-footer-menu__list a, .vm-legal-menu__list a {
	font-size: var(--vm-t-label);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-label);
	color: var(--vm-dark-ink-2);
	transition: color var(--vm-tr);
}

.vm-legal-menu__list a { color: #7f7a71; }
.vm-footer-menu__list a:hover, .vm-legal-menu__list a:hover { color: #fff; }

.vm-footer__extras { display: flex; align-items: center; gap: var(--vm-s4); flex-wrap: wrap; }
.vm-footer .vm-langs__item a { color: var(--vm-dark-ink-2); }
.vm-footer .vm-langs__item a:hover { color: #fff; background: none; }
.vm-footer .vm-langs__item.is-current a { color: #fff; }

.vm-footer__rss {
	display: inline-flex;
	align-items: center;
	gap: var(--vm-s1);
	font-size: var(--vm-t-label);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-label);
	color: #7f7a71;
	transition: color var(--vm-tr);
}

.vm-footer__rss .vm-icon { display: none; }
.vm-footer__rss:hover { color: #fff; }

/* ==========================================================================
   18. GLOBALNE
   ========================================================================== */

.vm-progress {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	height: 3px;
	z-index: calc(var(--vm-z-head) + 1);
	pointer-events: none;
}

.vm-progress__bar { height: 100%; width: 0; background: var(--vm-signal); transition: width 70ms linear; }

.vm-to-top {
	position: fixed;
	inset-block-end: var(--vm-s5);
	inset-inline-end: var(--vm-s5);
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	background-color: var(--vm-ink);
	border: 1px solid var(--vm-ink);
	color: var(--vm-paper);
	z-index: var(--vm-z-drop);
	transition: background-color var(--vm-tr), color var(--vm-tr);
}

.vm-to-top[hidden] { display: none; }
.vm-to-top:hover { background-color: var(--vm-signal); border-color: var(--vm-signal); color: #fff; }

/* ==========================================================================
   19. DOSTĘPNOŚĆ, DRUK, RUCH
   ========================================================================== */

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

.screen-reader-text:focus {
	background-color: var(--vm-ink);
	color: var(--vm-paper);
	clip-path: none;
	display: block;
	font-size: var(--vm-t-label);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: var(--vm-ls-label);
	height: auto;
	inset-inline-start: var(--vm-s3);
	inset-block-start: var(--vm-s3);
	line-height: normal;
	padding: var(--vm-s3) var(--vm-s5);
	width: auto;
	z-index: var(--vm-z-skip);
}

[hidden] { display: none !important; }

@media (forced-colors: active) {
	.vm-card, .vm-tile, .vm-btn, .vm-code, .vm-cover { border: 1px solid CanvasText; }
	.vm-progress__bar { background: Highlight; }
	.vm-cover__scrim { background: Canvas; opacity: 0.85; }
	.vm-hero::before, .vm-hero::after, .vm-footer::after { display: none; }
}

@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;
		scroll-behavior: auto !important;
	}
}

@media print {
	:root {
		--vm-paper: #fff;
		--vm-surface: #fff;
		--vm-surface-2: #f7f7f7;
		--vm-ink: #000;
		--vm-ink-2: #333;
		--vm-ink-3: #555;
		--vm-rule: #ccc;
		--vm-rule-2: #999;
		--vm-signal: #000;
	}

	.vm-header, .vm-footer, .vm-sidebar, .vm-share, .vm-post-nav, .vm-related,
	.vm-comments, .vm-to-top, .vm-progress, .vm-breadcrumbs-wrap, .vm-code__copy,
	.vm-toc, .vm-hero { display: none !important; }

	body { font-size: 10.5pt; line-height: 1.5; background: #fff; }
	.vm-layout--sidebar { display: block; }
	.vm-prose { max-width: none; }
	.vm-prose img, .vm-article__image { filter: none; }

	.vm-prose pre, .vm-code {
		background: #f6f6f6 !important;
		color: #000 !important;
		border: 1px solid #ccc;
		white-space: pre-wrap;
		word-break: break-word;
		page-break-inside: avoid;
	}

	.vm-prose h2, .vm-prose h3 { page-break-after: avoid; }
	.vm-prose img, .vm-prose table, .vm-lab { page-break-inside: avoid; }

	.vm-prose a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-family: var(--vm-font-mono);
		font-size: 8pt;
		color: #555;
		word-break: break-all;
	}
}