/*
 * NAWW — main.css
 * Kierunek „Ekspozycja" (spec .scratch/redesign-ui/spec.md): szary papier
 * #EBECED z odbarwionym ziarnem, jeden krój (Switzer Variable), Swiss
 * Modernism 2.0 — siatka 12/64/32, odstępy krokiem 4 px, promień 4 px tylko
 * na elementach interaktywnych. Kolor edycji (--brand*) liczy PHP
 * (inc/color.php) i wstrzykuje w :root per kontekst edycji.
 * Bez build-stepu; wersjonowanie przez filemtime().
 */

/* =========================================================================
 * Font (self-hosted; ITF FFL v2.0 — subsetting zakazany, jeden pełny plik)
 * ===================================================================== */
@font-face {
	font-family: "Switzer";
	src: url("../fonts/Switzer-Variable.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* =========================================================================
 * Tokeny (spec §3)
 * ===================================================================== */
:root {
	/* Powierzchnie i neutrale (§3.1). */
	--bg: #ebeced;
	--surface: #e2e4e6;
	--surface-hi: #f4f5f5;
	--border: #d7d9db;         /* dekoracja: hairline, wiersz tabeli, kafel */
	--border-strong: #83878d;  /* każda kontrolka (3,05:1 na papierze) */
	--muted: #5b5f66;
	--text: #16151a;

	/* Kolor edycji — fallback; nadpisywany inline per kontekst (inc/color.php). */
	--brand: #1631da;
	--brand-hover: #0f06c1;
	--brand-tint: #d9e0fb;
	--brand-strong: #1631da;
	--brand-edge: #1631da;
	--halo: rgba(22, 49, 218, 0.4);
	--brand-ink: #ffffff;
	--brand-rgb: 22, 49, 218;
	--brand-focus: #1631da;

	/* Typografia (§3.3): jeden krój, skala 1,25 od 16. */
	--font-sans: "Switzer", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--fs-display-xl: clamp(2.4375rem, 1.55rem + 3.85vw, 4.75rem); /* 39 → 76 */
	--fs-display-l: clamp(1.9375rem, 1.5rem + 1.9vw, 3.0625rem);  /* 31 → 49 */
	--fs-display-m: clamp(1.9375rem, 1.75rem + 0.85vw, 2.4375rem); /* 31 → 39 */
	--fs-h2: 1.5625rem;        /* 25; ≥768: 31 */
	--fs-sub: 1.25rem;         /* 20; ≥768: 25 */
	--fs-lead: 1.125rem;       /* 18; ≥768: 20 */
	--fs-body: 1rem;
	--fs-meta: 0.875rem;
	--fs-label: 0.75rem;

	/* Siatka (§3.4) i odstępy (§3.5) — wartości mobile; progi niżej. */
	--gutter: 20px;
	--gap: 16px;
	--space-section: 48px;
	--space-close: 64px;
	--space-head: 32px;
	--space-block: 24px;
	--space-rows: 32px; /* rząd kart od rzędu w siatce wielorzędowej */

	/* Nagłówek jest sticky i zjada tyle wysokości pierwszego ekranu. */
	--header-h: 89px;

	/* Promień i ruch (§3.6). */
	--radius: 4px;      /* TYLKO elementy interaktywne */
	--radius-lg: 999px; /* znak edycji, kropki indeksu, portret w lockupie */
	--dur-1: 150ms;
	--dur-2: 240ms;
	--dur-3: 400ms;
	--ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

@media (min-width: 768px) {
	:root {
		--gutter: 40px;
		--gap: 24px;
		--space-section: 72px;
		--space-close: 96px;
		--space-head: 48px;
		--space-block: 32px;
		--space-rows: 48px;
		--fs-h2: 1.9375rem;  /* 31 */
		--fs-sub: 1.5625rem; /* 25 */
		--fs-lead: 1.25rem;  /* 20 */
	}
}

@media (min-width: 1280px) {
	:root {
		--gutter: 64px;
		--gap: 32px;
	}
}

/* =========================================================================
 * Reset / podstawy
 * ===================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 1.6;
	color: var(--text);
	background-color: var(--bg);
	background-image: url("../img/paper-grain.jpg");
	background-size: 320px 320px;
	background-repeat: repeat;
	background-blend-mode: multiply;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.5em;
	font-weight: 500;
	line-height: 1.15;
	text-wrap: balance;
}

h2 {
	font-size: var(--fs-h2);
	letter-spacing: -0.025em;
}

h3 {
	font-size: var(--fs-sub);
	letter-spacing: -0.02em;
	line-height: 1.25;
}

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

/* Switzer nie ma kursywy (italicAngle 0): <em>/<i> = waga 600 z jawnym
   font-style, żeby przeglądarka nie dokleiła syntetycznego pochyłu (§3.3). */
em,
i,
cite,
q,
address {
	font-style: normal;
	font-weight: 600;
}

strong,
b {
	font-weight: 600;
}

img {
	max-width: 100%;
	height: auto;
}

figure {
	margin: 0;
}

a {
	color: var(--text);
	text-decoration: none;
	transition: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), text-decoration-color var(--dur-1) var(--ease);
}

a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Focus: obrys 2 px --brand-strong odsunięty 3 px. Nigdy outline:none (§3.6). */
:focus-visible {
	outline: 2px solid var(--brand-focus);
	outline-offset: 3px;
}

::selection {
	background: var(--brand-tint);
}

hr {
	border: 0;
	border-top: 1px solid var(--border);
	margin: var(--space-block) 0;
}

table {
	border-collapse: collapse;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

/* =========================================================================
 * Pomocnicze
 * ===================================================================== */
.visually-hidden,
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.visually-hidden-focusable:not(:focus):not(:focus-within) {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 200;
	padding: 12px 20px;
	background: var(--text);
	color: var(--bg);
	font-weight: 600;
	border-radius: var(--radius);
}

/* Arkusz na pełną szerokość — miarą jest margines, nie max-width (§3.4). */
.container {
	padding-inline: var(--gutter);
}

.grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--gap);
}

/* Siatka systemowa 12 / 8 / 4 (§3.4). */
@media (min-width: 768px) and (max-width: 1279px) {
	.grid {
		grid-template-columns: repeat(8, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Etykieta otwarcia (§1.4): wyłącznie otwarcia sekcji, bloku, kolumny. */
.label {
	font-size: var(--fs-label);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--text);
}

.label--open {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}

.label--open svg {
	flex-shrink: 0;
	color: var(--brand-edge);
}

/* Metadana (§1.4): 14 px pismem zwykłym. */
.meta {
	font-size: var(--fs-meta);
	line-height: 1.45;
	color: var(--muted);
}

.num {
	font-variant-numeric: tabular-nums;
}

.lead {
	font-size: var(--fs-lead);
	line-height: 1.5;
}

/* Kolumna tekstu: maks. ~68 znaków (§3.3). */
.prose {
	max-width: 68ch;
}

.prose a {
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-color: var(--border-strong);
}

.prose a:hover {
	text-decoration-color: var(--text);
}

/* Hairline i kreska w tuszu. */
.rule {
	height: 1px;
	background: var(--border);
	border: 0;
	margin: 0;
}

.rule--ink {
	background: var(--text);
}

/* =========================================================================
 * Znaki i elementy własne (§5)
 * ===================================================================== */

/* Znak edycji — kropka pigmentu w pierścieniu rejestrowym (SVG w PHP). */
.edition-mark {
	display: inline-block;
	flex-shrink: 0;
	vertical-align: middle;
}

/*
 * Indeks edycji — rząd kropek (§5.3). <768 znika w całości.
 * `grid-auto-flow: column` zamiast `repeat(--edots-cols, …)`: liczba kolumn
 * wynika z liczby kropek, więc rząd nigdy się nie łamie. Poprzedni limit
 * czterech kolumn (canvas 2026-08-25) przy piątej edycji zrzucał ostatnią
 * kropkę do drugiego rzędu, i to zarówno w hero frontu, jak i na landingu.
 */
.edots {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 24px;
	gap: 8px;
	justify-content: end;
}

.edot {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
}

.edot i {
	display: block;
	width: 10px;
	height: 10px;
	border-radius: var(--radius-lg);
	background: var(--edot-color, var(--border-strong));
	box-shadow: inset 0 0 0 1px var(--edot-edge, var(--edot-color, var(--border-strong)));
}

.edot--now i {
	width: 18px;
	height: 18px;
	box-shadow: inset 0 0 0 1px var(--edot-edge, var(--edot-color)), 0 0 0 2px var(--bg), 0 0 0 3px var(--edot-halo, var(--halo));
}

.edot .tip {
	position: absolute;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--text);
	color: var(--bg);
	font-size: var(--fs-label);
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1;
	padding: 6px 8px;
	border-radius: var(--radius);
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--dur-1) var(--ease);
	z-index: 5;
}

.edot:hover .tip,
.edot:focus-visible .tip {
	opacity: 1;
}

/*
 * Przełącznik edycji w hero (ustalenie z canvasa 2026-08-25): rok nad
 * kropkami nazywa wybraną edycję, więc kropka nie potrzebuje pierścienia
 * ani poświaty.
 */
.hero__signature .edot--now i,
.edition-hero__signature .edot--now i {
	box-shadow: inset 0 0 0 1px var(--edot-edge, var(--edot-color));
}

/*
 * Tooltip w hero schodzi POD kropkę (korekta 2026-08-26). Nad nią stałby na
 * roku edycji — dlatego wcześniej był tu w ogóle wyłączony, a rząd kropek
 * czytał się jak ornament: nic nie mówiło, że każda kropka prowadzi do innej
 * edycji. Nazwa rocznika pod kursorem to załatwia, strzałka na nie-bieżących
 * kropkach mówi wprost, że to przejście.
 */
.hero__signature .edot .tip,
.edition-hero__signature .edot .tip {
	top: 30px;
	bottom: auto;
}

/*
 * Strzałka tylko na kropkach innych edycji — przy bieżącej nie ma dokąd iść.
 * Glif, nie tekst: nie idzie do tłumaczenia i nie trafia do czytnika ekranu
 * (ten dostaje pełną nazwę z .visually-hidden).
 */
.edot:not(.edot--now) .tip::after {
	content: " →";
}

/*
 * Ostatnia kropka stoi przy prawej krawędzi kontenera, więc jej tooltip
 * kotwiczy się prawym bokiem zamiast środkiem — wyśrodkowany wychodziłby
 * poza szerokość okna.
 */
.edot:last-child .tip {
	left: auto;
	right: 0;
	transform: none;
}

@media (max-width: 767px) {
	.edots {
		display: none;
	}
}

/* Widmo barw — pas 4 px, segmenty równe, krawędź 1 px w --brand-edge (§5.4). */
.spectrum {
	display: flex;
	height: 4px;
	margin-inline: var(--gutter);
}

.spectrum span {
	flex-grow: 1;
	background: var(--seg-color, var(--border-strong));
	box-shadow: inset 0 -1px 0 var(--seg-edge, var(--seg-color, var(--border-strong)));
}

/* Jednorazowe wyrysowanie widma (§8.3): scaleX 0→1 od lewej. */
.spectrum.is-armed {
	transform: scaleX(0);
	transform-origin: left;
}

.spectrum.is-drawn {
	transform: scaleX(1);
	transition: transform var(--dur-3) var(--ease);
}

/* Jednorazowe wyrysowanie indeksu: kropki chronologicznie, samo opacity. */
.edots.is-armed .edot {
	opacity: 0;
}

.edots.is-drawn .edot {
	opacity: 1;
	transition: opacity var(--dur-3) var(--ease);
	transition-delay: calc(var(--edot-i, 0) * 40ms);
}

/* Piktogram kategorii (§5.5) — kreska rysunku, kolor dziedziczony. */
.pictogram {
	flex-shrink: 0;
}

/* =========================================================================
 * Przyciski (§6.1)
 * ===================================================================== */
.btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height: 44px;
	padding: 0 18px;
	border-radius: var(--radius);
	font-size: var(--fs-body);
	font-weight: 600;
	letter-spacing: 0.005em;
	line-height: 1;
	border: 1px solid transparent;
	background: transparent;
	color: var(--text);
	cursor: pointer;
	text-decoration: none;
	transition: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}

.btn:hover {
	text-decoration: none;
}

.btn--sm {
	height: 40px;
	padding: 0 10px;
	font-size: var(--fs-meta);
	gap: 8px;
}

/* Akcent: jedna akcja na widok — zawsze „Zgłoś projekt". */
.btn--accent {
	background: var(--brand);
	color: var(--brand-ink);
	border-color: var(--brand-edge);
}

.btn--accent:hover {
	background: var(--brand-hover);
	border-color: var(--brand-hover);
	color: var(--brand-ink);
}

.btn--ink {
	background: var(--text);
	color: var(--bg);
	border-color: var(--text);
}

.btn--ink:hover {
	background: #000000;
	color: #ffffff;
}

.btn--ghost {
	background: transparent;
	color: var(--text);
	border-color: var(--border-strong);
}

.btn--ghost:hover {
	border-color: var(--text);
}

/* Wyłącz, nie ukrywaj (§1.8): krycie 40 %. */
.btn[aria-disabled="true"],
.btn:disabled {
	opacity: 0.4;
	pointer-events: none;
}

/* =========================================================================
 * Chipy (§6.2, §6.3)
 * ===================================================================== */
.chip {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 44px;
	padding: 0 16px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
	background: var(--surface-hi);
	font-size: var(--fs-meta);
	line-height: 1;
	color: var(--text);
	text-decoration: none;
	transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.chip:hover {
	text-decoration: none;
	border-color: var(--text);
}

.chip svg {
	flex-shrink: 0;
	color: var(--muted);
}

/* Kropka rocznika w chipie edycji. */
.chip .chip__dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: var(--radius-lg);
	background: var(--chip-dot, var(--border-strong));
	box-shadow: inset 0 0 0 1px var(--chip-dot-edge, var(--chip-dot, var(--border-strong)));
	flex-shrink: 0;
}

/* Stan aktywny: trzy sygnały naraz — tint + obrys + waga 600 (§6.2). */
.chip--active {
	background: var(--brand-tint);
	border-color: var(--brand-edge);
	font-weight: 600;
}

/* Kategoria nierozstrzygnięta (§6.3): kreska przerywana, tekst --muted. */
.chip--off {
	background: transparent;
	border-style: dashed;
	border-color: var(--border-strong);
	color: var(--muted);
}

.chip--off:hover {
	border-style: solid;
	border-color: var(--text);
	color: var(--text);
}

.chip--off svg {
	color: var(--border-strong);
}

.chip--off:hover svg {
	color: var(--text);
}

.chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* =========================================================================
 * Stemple (§6.5) — pięć ciężarów, promień 0, nigdy przezroczyste tło
 * ===================================================================== */
.stamp {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	height: 28px;
	padding: 0 10px;
	font-size: var(--fs-label);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1;
	border: 1px solid transparent;
}

.stamp--gp {
	background: var(--brand);
	color: var(--brand-ink);
	border-color: var(--brand-edge);
}

.stamp--laureat {
	background: var(--text);
	color: var(--bg);
	border-color: var(--text);
}

.stamp--outline {
	background: var(--bg);
	color: var(--text);
	border-color: var(--text);
}

.stamp--wyr {
	background: var(--bg);
	color: var(--text);
	border-color: var(--text);
}

.stamp--nom,
.stamp--quiet {
	background: var(--bg);
	color: var(--muted);
	border-color: var(--border-strong);
}

/* =========================================================================
 * Kadr i karta (§6.4, §6.6–6.8)
 * ===================================================================== */
.karta {
	display: block;
	color: var(--text);
}

.karta:hover {
	text-decoration: none;
}

.karta:hover .karta__title {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.kadr {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	background: var(--border);
	overflow: hidden;
}

.kadr img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-1) var(--ease);
}

/* Hover: akcent + zoom 2 %, bez cienia (§6.6). */
.karta:hover .kadr img {
	transform: scale(1.02);
}

.kadr--portrait {
	aspect-ratio: 4 / 5;
}

/* Poziom 2: piktogram kategorii 112 px w --brand-edge na --brand-tint. */
.kadr--picto {
	background: var(--brand-tint);
	color: var(--brand-edge);
}

/* Poziom 3: zastępnik typograficzny — Display, dosunięty do dołu (§6.4). */
.kadr--type {
	align-items: flex-end;
	justify-content: flex-start;
	padding: 20px 20px 44px;
	background: var(--brand-tint);
}

.kadr--type .kadr__type {
	margin: 0;
	font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9375rem); /* nigdy poniżej 24 px */
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: var(--brand-edge);
}

/* Inicjały (twórca / kapituła bez portretu). */
.kadr--initials {
	background: var(--brand-tint);
	color: var(--brand-edge);
}

.kadr__initials {
	font-size: var(--fs-display-m);
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1;
}

/* Portret kapituły: skala szarości, kolor na hover (§6.8). */
.kadr--gray img {
	filter: grayscale(1);
	transition: filter var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}

.karta:hover .kadr--gray img {
	filter: grayscale(0);
}

.kadr .stamp {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 2;
}

.kadr .stamp + .stamp {
	left: auto;
	margin-left: 8px;
}

/*
 * Stemple siedzą w górnym narożniku kadru, 8 px od krawędzi (ustalenie
 * z canvasa 2026-08-25). Wcześniej leżały na dolnej krawędzi na styk —
 * tam wchodziły w kolizję z kreską podpisu, która zaczyna się tuż pod
 * kadrem, i czytały się jak część podpisu, a nie jak znak na zdjęciu.
 */
.kadr__stamps {
	position: absolute;
	left: 8px;
	top: 8px;
	z-index: 2;
	display: flex;
	gap: 8px;
}

.kadr__stamps .stamp {
	position: static;
}

/* Podpis karty pod kreską w tuszu. */
.karta__body {
	border-top: 1px solid var(--text);
	margin-top: 16px;
	padding-top: 12px;
}

.karta__label {
	margin: 8px 0;
}

.karta__title {
	margin: 0;
	font-size: var(--fs-sub);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.25;
	text-wrap: pretty;
}

.karta__sub {
	margin: 8px 0 0;
}

/* Siatka kart: wiersz równa górę i kreskę pod kadrem. */
.cards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--space-rows) var(--gap);
	align-items: start;
}

@media (min-width: 1024px) {
	.cards-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.cards-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/*
 * Kapituła w siatce zwartej (ustalenie 2026-08-26, wiąże): sześć kolumn
 * zamiast czterech, czyli portret o ~40 % węższy (304 → 192 px przy 1440).
 * Skład dwunastu osób wchodzi wtedy w dwa rzędy zamiast trzech i daje się
 * ogarnąć jednym rzutem oka — a o to w tej sekcji chodzi: kto orzekał, nie
 * jak wygląda. Podpis schodzi do 16/13, bo tytuł 25 px w kolumnie 192 px
 * łamał nazwisko na cztery linijki i zjadał zysk z mniejszego kadru.
 * Kadr zostaje 4:5 i zostaje szary — to nadal ta sama karta (§6.8).
 */
.cards-grid--kapitula {
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: var(--space-block) var(--gap);
}

@media (min-width: 768px) {
	.cards-grid--kapitula {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/*
 * Sześć kolumn dopiero od 1280 px. W paśmie 1024–1279 karta schodziłaby do
 * ~137 px i nazwisko łamałoby się na trzy linijki — zysk z mniejszego kadru
 * zjadałby wtedy rozlany podpis.
 */
@media (min-width: 1024px) {
	.cards-grid--kapitula {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

@media (min-width: 1280px) {
	.cards-grid--kapitula {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

.cards-grid--kapitula .karta__body {
	margin-top: 12px;
	padding-top: 10px;
}

.cards-grid--kapitula .karta__title {
	font-size: var(--fs-body);
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.cards-grid--kapitula .karta__sub {
	margin-top: 6px;
	font-size: 0.8125rem; /* 13 — o stopień niżej niż metadana, pod węższą kolumnę */
	line-height: 1.4;
}

/* Inicjały skalują się z kadrem, inaczej rozpychają zaślepkę. */
.cards-grid--kapitula .kadr__initials {
	font-size: var(--fs-h2);
}

/* =========================================================================
 * Lockup nagłówka grupy (§6.10)
 * ===================================================================== */
.lockup {
	padding-top: var(--space-close);
}

.lockup__head {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-bottom: 20px;
}

.lockup__dot {
	display: block;
	width: 16px;
	height: 16px;
	border-radius: var(--radius-lg);
	background: var(--brand);
	box-shadow: inset 0 0 0 1px var(--brand-edge);
	flex-shrink: 0;
}

.lockup__head h2 {
	margin: 0;
	font-size: var(--fs-h2);
	font-weight: 500;
	letter-spacing: -0.025em;
	line-height: 1.15;
}

.lockup__rule {
	height: 1px;
	background: var(--text);
}

/* Sekcja wewnątrz grupy. */
.subsection {
	padding-top: var(--space-section);
}

.subsection--first {
	/* Kreska lockupu → treść: 32 px (§6.10, rola --space-block). */
	padding-top: var(--space-block);
}

/* =========================================================================
 * Wiersze list (§6.14, materiały, aktualności)
 * ===================================================================== */
/* Trzy kolumny (§6.14): tytuł z autorem, rodzaj, szewron. Mobile: rodzaj
 * schodzi pod tytuł — typ rekordu zostaje nazwany na każdej szerokości. */
.nomrow {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 24px;
	grid-template-areas:
		"main chevron"
		"kind chevron";
	gap: 0 var(--gap);
	align-items: center;
	padding: 20px 0;
	border-bottom: 1px solid var(--border);
	color: var(--text);
}

.nomrow__main {
	grid-area: main;
}

@media (min-width: 768px) {
	.nomrow {
		grid-template-columns: minmax(0, 1fr) 220px 24px;
		grid-template-areas: "main kind chevron";
	}
}

.nomrow:hover {
	text-decoration: none;
}

.nomrow:hover .nomrow__title {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.nomrow__title {
	display: block;
	font-size: var(--fs-lead);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.nomrow__author {
	display: block;
	margin-top: 4px;
}

.nomrow__kind {
	grid-area: kind;
	font-size: var(--fs-meta);
	color: var(--muted);
}

.nomrow__kind:empty {
	display: none;
}

@media (max-width: 767px) {
	.nomrow__kind {
		margin-top: 4px;
	}
}

@media (min-width: 768px) {
	.nomrow__kind {
		text-align: right;
	}
}

.nomrow > svg {
	grid-area: chevron;
	color: var(--border-strong);
	justify-self: end;
}

/* Wiersz pliku (materiały edycji). */
.docrow {
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr) 24px;
	gap: var(--space-block);
	align-items: center;
	padding: 18px 0;
	border-bottom: 1px solid var(--border);
	color: var(--text);
}

@media (min-width: 768px) {
	.docrow {
		grid-template-columns: 32px minmax(0, 1fr) 64px 96px 24px;
	}
}

.docrow--head {
	padding: 12px 0;
}

.docrow:hover {
	text-decoration: none;
}

.docrow:hover .docrow__name {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.docrow__name {
	font-size: var(--fs-lead);
	font-weight: 500;
	letter-spacing: -0.01em;
}

.docrow svg {
	color: var(--muted);
}

.docrow__dl {
	color: var(--text);
	justify-self: end;
}

@media (max-width: 767px) {
	.docrow__format,
	.docrow__size {
		display: none;
	}
}

/* Wiersz aktualności (front + /aktualnosci). */
.newsrow {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 24px;
	gap: var(--gap);
	align-items: center;
	padding: 24px 0;
	border-bottom: 1px solid var(--border);
	color: var(--text);
}

@media (min-width: 768px) {
	.newsrow {
		grid-template-columns: 144px minmax(0, 1fr) 24px;
	}
}

.newsrow:hover {
	text-decoration: none;
}

.newsrow:hover .newsrow__title {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.newsrow__date {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.newsrow__dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: var(--radius-lg);
	background: var(--newsdot, var(--border-strong));
	box-shadow: inset 0 0 0 1px var(--newsdot-edge, var(--newsdot, var(--border-strong)));
	flex-shrink: 0;
}

.newsrow__title {
	display: block;
	font-size: var(--fs-sub);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.3;
	text-wrap: pretty;
}

.newsrow__excerpt {
	display: block;
	margin-top: 6px;
	font-size: var(--fs-body);
	line-height: 1.5;
	color: var(--muted);
}

.newsrow > svg {
	color: var(--border-strong);
	justify-self: end;
}

@media (max-width: 767px) {
	.newsrow__date {
		order: 2;
	}
}

/* =========================================================================
 * Tabela faktów (§6.12) i wiersz roli
 * ===================================================================== */
.facts {
	margin: 0;
	border-top: 1px solid var(--text);
}

.factrow {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid var(--border);
	margin: 0;
}

.factrow dt {
	margin: 0;
}

.factrow dd {
	margin: 0;
	font-size: var(--fs-body);
}

/* Wiersz „Autorzy" łamie się na pion — etykieta nad wartością (§6.12). */
.factrow--stack {
	display: block;
}

.factrow--stack dt {
	margin-bottom: 8px;
}

.rolerow {
	display: grid;
	grid-template-columns: 128px minmax(0, 1fr);
	gap: 12px;
	padding: 6px 0;
}

/* =========================================================================
 * Blok uzasadnienia kapituły (§6.13)
 * ===================================================================== */
.verdict {
	border-top: 2px solid var(--brand-edge);
	padding-top: 20px;
}

.verdict__label {
	margin: 0 0 16px;
}

/* Etykieta typu w lewej kolumnie (§6.13) — w szerokiej szpalcie realizacji.
 * W wąskich szpaltach (aside GP, strona twórcy) etykieta zostaje nad tekstem. */
@media (min-width: 900px) {
	.verdict {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
		gap: 0 var(--gap);
	}

	.verdict__label {
		margin: 0;
	}

	.verdict__text,
	.verdict__more {
		grid-column: 2;
	}

	.gp-block__aside .verdict,
	.tworca-layout .verdict {
		display: block;
	}

	.gp-block__aside .verdict__label,
	.tworca-layout .verdict__label {
		margin: 0 0 16px;
	}
}

.verdict__text {
	max-width: 68ch;
}

.verdict__text p {
	margin: 0 0 20px;
	font-size: var(--fs-lead);
	line-height: 1.5;
}

.verdict__text p:last-child {
	margin-bottom: 0;
}

/* =========================================================================
 * Panel filtrów katalogu (§6.11, ustalenie 2026-08-26)
 * =====================================================================
 * Jeden panel dla trybu Lista i Mapa: kolumna po lewej stronie treści,
 * poniżej 1024 px szuflada. Kontrolki to natywne checkboxy w etykietach —
 * stan niesie `:checked`, nie `aria-pressed`, więc tryb Lista filtruje
 * także bez JS. Stempli i ramek chipów tu nie ma: kreska w barwie edycji
 * przy krawędzi, waga 600 i pełny atrament (kolor nigdy sam).
 */
.filter-panel {
	box-sizing: border-box;
	background: var(--surface-hi);
	border: 1px solid var(--border);
}

.filter-panel__body {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 20px;
}

.filter-panel__toggle {
	display: none;
	width: 100%;
}

/* Z JS wynik odświeża się sam — przycisk zostaje wyłącznie dla przeglądarki bez JS. */
.filter-panel[data-enhanced] .filter-panel__submit {
	display: none;
}

.filter-field {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.filter-field__legend {
	color: var(--muted);
}

.filter-field--actions {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

/* Checkbox nosi stan i bierze zdarzenia, ale nie ma własnego rysunku —
   widać etykietę, która go otacza. */
.opt-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Rząd kropek edycji — ta sama forma i barwa co pinezki na mapie, więc filtr
   jest zarazem legendą. Rok stoi pod kropką na stałe, bez tooltipa. */
.edfilter {
	display: grid;
	grid-auto-flow: column;
	justify-content: start;
	gap: 4px;
}

.edfilter__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	min-width: 44px;
	min-height: 44px;
	padding: 6px 2px;
	border-radius: var(--radius);
	cursor: pointer;
	color: var(--muted);
	transition: color var(--dur-1) var(--ease);
}

.edfilter__dot {
	width: 14px;
	height: 14px;
	border-radius: 999px;
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--pin-edge, var(--border-strong));
	transition: background-color var(--dur-1) var(--ease);
}

.edfilter__rok {
	font-size: var(--fs-label, 0.75rem);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}

/* Wybrana edycja — i stan wyjściowy, w którym widać wszystkie: pusty rząd
   kropek przy pełnym katalogu czytałby się jak sprzeczność. */
.edfilter__item:has(.opt-input:checked) .edfilter__dot,
.edfilter--all .edfilter__dot {
	background: var(--pin, var(--border-strong));
}

.edfilter__item:has(.opt-input:checked) {
	color: var(--text);
}

.edfilter__item:hover:not(:has(.opt-input:disabled)) {
	color: var(--text);
}

.edfilter__item:has(.opt-input:disabled) {
	opacity: 0.4;
	cursor: default;
}

.edfilter__item:has(.opt-input:focus-visible) {
	outline: 2px solid var(--brand-focus);
	outline-offset: 3px;
}

/* Kategorie i statusy: jedna gęsta lista wierszy, bez ramek i tła. Ramka chipa
   i stempel rozłaziły kolumnę na kilkanaście rzędów (2026-08-25). */
.optlist {
	display: flex;
	flex-direction: column;
}

.optlist__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 34px;
	padding: 4px 8px 4px 10px;
	border-left: 2px solid transparent;
	cursor: pointer;
	font-size: var(--fs-meta);
	line-height: 1.3;
	text-align: left;
	color: var(--muted);
	transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}

.optlist__item svg {
	flex-shrink: 0;
	color: currentColor;
}

.optlist__item:hover:not(:has(.opt-input:disabled)) {
	color: var(--text);
}

.optlist__item:has(.opt-input:checked) {
	border-left-color: var(--brand-edge);
	color: var(--text);
	font-weight: 600;
}

.optlist__item:has(.opt-input:disabled) {
	opacity: 0.4;
	cursor: default;
}

.optlist__item:has(.opt-input:focus-visible) {
	outline: 2px solid var(--brand-focus);
	outline-offset: -2px;
}

/* Na dotyku wiersz wraca do pełnego celu 44 px. */
@media (hover: none) {
	.optlist__item {
		min-height: 44px;
	}
}

.filter-search {
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	padding: 0 12px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
	background: var(--bg);
	color: var(--text);
	font: inherit;
	font-size: var(--fs-meta);
}

.filter-search:focus-visible {
	outline: 2px solid var(--brand-focus);
	outline-offset: 3px;
}

/* Akcja bez celu (nie ma czego czyścić) zostaje na miejscu, ale gaśnie —
   znikający przycisk przeskakiwałby układ przy każdym filtrze. */
.btn.is-disabled {
	opacity: 0.4;
	pointer-events: none;
}

/* Szuflada filtrów poniżej 1024 px — panel traci bryłę i staje się listą. */
@media (max-width: 1023px) {
	.filter-panel__toggle {
		display: inline-flex;
	}

	.filter-panel {
		border: 0;
		background: transparent;
	}

	.filter-panel__body {
		display: none;
		padding: 20px 0 0;
	}

	.filter-panel.is-open .filter-panel__body {
		display: flex;
	}
}

/* Paginacja: 44 px, bieżąca strona w tuszu (§6.11). */
.pagination {
	margin-top: var(--space-section);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pagination .page-numbers {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	background: var(--surface-hi);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
	font-size: var(--fs-meta);
	font-weight: 600;
	color: var(--text);
	text-decoration: none;
}

.pagination .page-numbers.current {
	background: var(--text);
	border-color: var(--text);
	color: var(--bg);
}

.pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

.pagination a.page-numbers:hover {
	border-color: var(--text);
	text-decoration: none;
}

/* Formularz wyszukiwania (katalog, stopka, 404). */
.search-form__row {
	display: flex;
	gap: 8px;
}

.search-form__input {
	box-sizing: border-box;
	flex-grow: 1;
	height: 48px;
	padding: 0 16px;
	background: var(--surface-hi);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
	font-size: var(--fs-body);
	min-width: 0;
}

/* =========================================================================
 * Okruszki (§4.1)
 * ===================================================================== */
.breadcrumbs {
	padding: 20px 0;
}

.breadcrumbs__list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-meta);
	color: var(--muted);
}

.breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.breadcrumbs__item + .breadcrumbs__item::before {
	content: "›";
	color: var(--border-strong);
}

.breadcrumbs a {
	color: var(--muted);
}

.breadcrumbs a:hover {
	color: var(--text);
}

/* =========================================================================
 * Nagłówek serwisu (E1) — sticky, wygląda identycznie na górze i dole (§8.1)
 * ===================================================================== */
/*
 * Pasek ma być JEDNYM, domkniętym przedmiotem (2026-08-26). Wcześniej dzielił
 * go od strony sam hairline `--border` (1,1:1 na papierze) — przy scrollu treść
 * wjeżdżała pod spód i była cięta w połowie linii, a dolna krawędź paska
 * rozpływała się. Domyka go samo odcięcie dołu, które zapala się dopiero po
 * odjechaniu od góry (`.is-stuck` z main.js): na samej górze strony pasek ma
 * czytać się jak część arkusza.
 *
 * Tło zostaje JEDNOLITE `--bg`, bez ziarna papieru (decyzja 2026-08-26).
 * Ziarno było próbowane tego samego dnia i wycofane — pasek ma być gładką
 * płaszczyzną, tak jak pas naboru i komórki stopki.
 */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--bg);
	border-bottom: 1px solid var(--border);
	transition: border-color var(--dur-1) var(--ease);
}

/* Sama kreska, bez cienia (decyzja 2026-08-26) — cień był próbowany i wycofany
   tego samego dnia; serwis nigdzie indziej nie odrywa płaszczyzn od arkusza. */
.site-header.is-stuck {
	border-bottom-color: var(--border-strong);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 88px;
	gap: var(--gap);
}

/* Logotyp i skrót NAWW w barwie BIEŻĄCEJ edycji — chrome nigdy nie schodzi
   na barwę historyczną (§1.6). --chrome-brand-strong ma barierę kontrastu
   liczoną w PHP, więc napis trzyma ≥4,5:1 na papierze także dla jasnych barw. */
.lockup-brand {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	color: var(--chrome-brand-strong, var(--brand-strong));
	flex-shrink: 0;
}

.lockup-brand:hover {
	text-decoration: none;
}

.lockup-brand__name {
	font-size: 25px;
	font-weight: 800;
	letter-spacing: -0.045em;
	line-height: 1;
}

.lockup-brand__mark {
	display: inline-flex;
}

.lockup-brand__mark--mobile {
	display: none;
}

/* Nagłówek mobilny: sam znak 64 px, bez skrótu NAWW (§4.1). */
@media (max-width: 1023px) {
	.lockup-brand__name,
	.lockup-brand__mark--desktop {
		display: none;
	}

	.lockup-brand__mark--mobile {
		display: inline-flex;
	}
}

.main-nav {
	display: flex;
	align-items: center;
}

.main-nav .menu {
	display: flex;
	align-items: center;
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-nav .menu a {
	font-size: var(--fs-body);
	font-weight: 700;
	color: var(--text);
}

.main-nav .menu-item.is-current > a,
.main-nav .menu a[aria-current="page"] {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 10px;
	text-decoration-color: var(--chrome-brand, var(--brand-edge));
}

/* CTA nagłówka: chrome w barwie bieżącej edycji. */
.menu-item--cta a,
a.btn--cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 44px;
	padding: 0 18px;
	border-radius: var(--radius);
	background: var(--chrome-brand, var(--brand));
	border: 1px solid var(--chrome-brand-edge, var(--brand-edge));
	color: var(--chrome-brand-ink, var(--brand-ink));
	font-weight: 600;
	line-height: 1;
}

.menu-item--cta a:hover,
a.btn--cta:hover {
	background: var(--chrome-brand-hover, var(--brand-hover));
	border-color: var(--chrome-brand-hover, var(--brand-hover));
	color: var(--chrome-brand-ink, var(--brand-ink));
	text-decoration: none;
}

.menu-item--cta a[aria-disabled="true"] {
	opacity: 0.4;
	pointer-events: none;
}

/*
 * `.main-nav .menu a` jest bardziej szczegółowe niż `.menu-item--cta a`,
 * więc CTA w nagłówku brało `--text` zamiast atramentu chrome i napis
 * wychodził ciemny na barwie edycji (kontrast ~1,9:1). Ta reguła oddaje
 * napis policzonemu w PHP `--chrome-brand-ink` — dla edycji 2026 biały
 * (ustalenie z canvasa 2026-08-25).
 */
.main-nav .menu .menu-item--cta a,
.main-nav .menu .menu-item--cta a:hover {
	color: var(--chrome-brand-ink, var(--brand-ink));
}

/*
 * Dropdown „Edycje" (desktop): opacity + 4 px w dół; zamykanie natychmiast.
 * Otwiera WYŁĄCZNIE kliknięcie (2026-08-26). Hover i `:focus-within` wypadły:
 * lista wyskakiwała przy samym przejechaniu kursorem, a klik dopiero ją
 * przypinał, więc jeden element odpowiadał na dwa gesty dwoma różnymi stanami.
 */
.menu-item--editions {
	position: relative;
}

/* „Edycje": link nawiguje na spis, caret rozwija skrót (§4.1). */
.editions-head {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/*
 * Pozycja "Edycje" nie ma szewrona (ustalenie z canvasa 2026-08-25):
 * przelacznikiem podmenu jest sam napis. Na spis edycji prowadzi
 * "Wszystkie edycje" na koncu rozwinietej listy.
 */
.editions-toggle {
	display: inline-flex;
	align-items: center;
	height: 44px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	font-family: inherit;
	font-size: var(--fs-body);
	font-weight: 700;
	line-height: 1;
	color: var(--text);
	cursor: pointer;
}

/*
 * Otwarta lista podkreśla „Edycje" tą samą kreską, co pozycja bieżąca
 * (2026-08-26) — pasek mówi wtedy, skąd wyszła rozwinięta lista.
 */
.menu-item--editions.is-open > .editions-head > .editions-toggle {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 10px;
	text-decoration-color: var(--chrome-brand, var(--brand-edge));
}

.editions-submenu {
	position: absolute;
	top: calc(100% + 16px);
	right: 0;
	z-index: 60;
	/* 240 px było wymierzone pod „Edycja VII, 2026"; od 2026-08-26 pozycja to
	   kropka i rok, więc lista schodzi do szerokości swojej treści. */
	min-width: 132px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: var(--surface-hi);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
	opacity: 0;
	transform: translateY(-4px);
	visibility: hidden;
	transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}

.menu-item--editions.is-open .editions-submenu {
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
}

.editions-submenu li {
	margin: 0;
}

.editions-submenu a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: var(--radius);
	font-size: var(--fs-meta);
	font-weight: 500;
	color: var(--text);
}

.editions-submenu a:hover {
	background: var(--surface);
	text-decoration: none;
}

/* Bieżąca edycja wyróżniona na liście (§4.1). */
.editions-submenu .is-now > a {
	font-weight: 600;
}

.editions-submenu .edition-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: var(--radius-lg);
	background: var(--edot-color, var(--border-strong));
	box-shadow: inset 0 0 0 1px var(--edot-edge, var(--edot-color, var(--border-strong)));
	flex-shrink: 0;
}

/* Przycisk Menu (mobile). */
.menu-toggle {
	display: none;
	align-items: center;
	gap: 10px;
	height: 44px;
	padding: 0 14px;
	background: transparent;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
	font-size: var(--fs-meta);
	font-weight: 600;
	cursor: pointer;
}

/* Nawigacja mobilna: pełnoekranowa, samo opacity (§8.4). */
@media (max-width: 1023px) {
	.menu-toggle {
		display: inline-flex;
	}

	/*
	 * `display: block` kasuje odziedziczone z desktopu `flex; align-items:
	 * center` (2026-08-26). Jako flex-kontener overlay zwężał listę do
	 * szerokości najdłuższej pozycji (148 z 350 px) i centrował ją w pionie:
	 * CTA było o połowę za wąskie, a wiersze menu wisiały w środku ekranu.
	 */
	.main-nav {
		display: block;
		position: fixed;
		inset: 89px 0 0 0;
		z-index: 90;
		background: var(--bg);
		background-image: url("../img/paper-grain.jpg");
		background-size: 320px 320px;
		background-blend-mode: multiply;
		padding: var(--space-head) var(--gutter);
		overflow-y: auto;
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
	}

	.main-nav.is-open {
		opacity: 1;
		visibility: visible;
		transition: opacity var(--dur-2) var(--ease);
	}

	.main-nav .menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.main-nav .menu > li {
		border-bottom: 1px solid var(--border);
	}

	.main-nav .menu > li > a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 20px 0;
		font-size: var(--fs-sub);
		font-weight: 500;
	}

	.main-nav .menu .editions-head {
		display: flex;
		align-items: center;
		width: 100%;
	}

	/*
	 * Przełącznik jest CAŁYM wierszem, nie kwadratem 44 px (2026-08-26).
	 * Kwadrat został po szewronie, którego już nie ma, i przycinał napis
	 * „Edycje" (potrzebuje 50 px) do 44 px, a do tego wyłamywał go z rytmu
	 * sąsiednich pozycji (16/700 zamiast 20/500).
	 */
	.main-nav .menu .editions-toggle {
		width: 100%;
		height: auto;
		padding: 20px 0;
		font-size: var(--fs-sub);
		font-weight: 500;
	}

	.main-nav .menu-item--cta {
		border-bottom: 0;
		padding-top: var(--space-block);
	}

	.main-nav .menu-item--cta a {
		width: 100%;
		height: 48px;
	}

	/* Akordeon „Edycje": grid-template-rows 0fr → 1fr (§8.4). */
	.editions-submenu {
		position: static;
		min-width: 0;
		border: 0;
		background: transparent;
		padding: 0;
		opacity: 1;
		transform: none;
		visibility: visible;
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows var(--dur-2) var(--ease);
	}

	.editions-submenu > li {
		overflow: hidden;
		min-height: 0;
	}

	.menu-item--editions.is-open .editions-submenu {
		grid-template-rows: 1fr;
	}

	/* Wewnątrz akordeonu lista rozwija się jako jeden track. */
	.editions-submenu {
		grid-auto-rows: 0;
	}

	.menu-item--editions.is-open .editions-submenu {
		grid-auto-rows: auto;
		padding-bottom: var(--space-block);
	}

	.editions-submenu a {
		font-size: var(--fs-body);
		padding: 12px 0;
	}

	.editions-submenu a:hover {
		background: transparent;
	}
}

/* =========================================================================
 * Stopka (E1) — tabelka rysunkowa, mapa serwisu (§4.5)
 * ===================================================================== */
/*
 * Stała duża stopka (ustalenie z canvasa 2026-08-25): jeden blok na płaskim
 * tle — widmo barw zamyka go od góry, pod nim pas katalogu, partnerzy
 * i tabelka rysunkowa z mapą serwisu. Bez ziarna papieru, bez kresek
 * dzielących te trzy części: mają czytać się jako jedna płaszczyzna.
 */
.site-footer {
	margin-top: var(--space-close);
	background: var(--bg);
}

.site-footer .spectrum {
	margin-inline: 0;
}

/*
 * Pas katalogu jest w stopce najważniejszy, więc dostaje własne pole —
 * jasny szary o ton wyżej niż papier (--surface-hi na --bg; ustalenie
 * z canvasa 2026-08-25, wcześniej ciemniejsze --surface). Zmiana odcienia
 * jest jednocześnie granicą między katalogiem a partnerami — osobna kreska
 * byłaby wtedy drugim, zbędnym sygnałem.
 */
.site-footer .catalog-band {
	background: var(--surface-hi);
	padding-top: 24px;
	padding-bottom: 64px;
}

.site-footer .partners {
	padding-top: 24px;
	padding-bottom: 64px;
	border-top: 0;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	background: var(--border);
	border-bottom: 1px solid var(--border);
}

@media (min-width: 900px) {
	.footer-grid {
		grid-template-columns: 4fr 3fr 2.5fr 2.5fr;
	}
}

.footer-grid__cell {
	background: var(--bg);
	padding: 32px;
}

.footer-grid__cell--brand {
	padding-left: var(--gutter);
}

.footer-brand {
	display: inline-flex;
	align-items: flex-start;
	gap: 20px;
	color: var(--text);
}

.footer-brand:hover {
	text-decoration: none;
}

.footer-brand__name {
	display: block;
	max-width: 280px;
	font-size: var(--fs-lead);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.3;
}

.footer-brand__rights {
	display: block;
	margin-top: 20px;
}

.footer-grid__cell .label {
	display: block;
	margin: 0 0 12px;
}

.footer-grid__cell p {
	margin: 0;
	font-size: var(--fs-meta);
	line-height: 1.6;
}

.footer-menu {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-meta);
	line-height: 2;
}

.footer-menu a {
	color: var(--text);
}

/* =========================================================================
 * Hero strony głównej (E3, §7.1)
 * ===================================================================== */
/*
 * Pierwszy ekran (ustalenie z canvasa 2026-08-25): hero razem z pasem naboru
 * wypełnia okno co do piksela — pas naboru siada na dolnej krawędzi ekranu,
 * a bryła rośnie i maleje razem z kadrem. Arkusze canvasa przypinają tę
 * wysokość na sztywno (zrzut 1440x1000), bo w iframe edytora `svh` znaczy
 * co innego niż w przeglądarce.
 */
.firstview {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--header-h));
	min-height: calc(100svh - var(--header-h));
}

.hero {
	position: relative;
	padding-top: var(--space-head);
	padding-bottom: var(--space-section);
	min-height: 400px;
}

.firstview > .hero {
	flex: 1 1 auto;
	min-height: 520px;
}

@media (min-width: 1024px) {
	/*
	 * Kadr hero jest węższy od reszty arkusza (ustalenie z canvasa
	 * 2026-08-25): margines lewy +132 px, prawy +32 px ponad --gutter.
	 * Bryła i tytuł schodzą przez to bliżej środka strony, a hero czyta
	 * się jak osobna kompozycja, nie jak pierwszy rząd siatki.
	 */
	.hero {
		min-height: 700px;
		padding-bottom: 0;
		padding-left: calc(var(--gutter) + 132px);
		padding-right: calc(var(--gutter) + 32px);
	}

	.firstview > .hero {
		min-height: 560px;
	}
}

/*
 * Bryła i tytuł to jedna kompozycja i mają na siebie wchodzić — lekko,
 * w okolicy środka arkusza (ustalenie z canvasa 2026-08-25). Typografia
 * z przodu (z-index 2), bryła za nią. Szerokość dobrana tak, żeby bryła
 * mieściła się w kadrze hero i nie wchodziła w pas naboru.
 */
.hero__model {
	position: absolute;
	top: -31px;
	left: 41%;
	height: calc(100% - 22px);
	width: auto;
	max-width: 48vw;
	/*
	 * Kadr poszerzony z 300/420 (ustalenie 2026-08-25): bryłę można obracać
	 * w dowolną stronę, a kadr liczy się z sfery otaczającej, więc wąski
	 * kontener spychał kamerę daleko i statuetka robiła się drobna. `left`
	 * cofnięte o 6%, żeby poszerzenie rozeszło się na obie strony i środek
	 * kompozycji został tam, gdzie był.
	 */
	aspect-ratio: 380 / 420;
	z-index: 1;
}

@media (max-width: 1023px) {
	.hero__model {
		position: absolute;
		top: 48px;
		right: 0;
		left: auto;
		/*
		 * Szerzej niż dawne 250 px: kadr liczy się z sfery otaczającej, więc
		 * przy wąskim kontenerze to poziomy FOV spycha kamerę daleko i bryła
		 * robi się drobna. Wysokość zostaje, bo pion jest tu tańszy niż poziom.
		 */
		width: min(84vw, 340px);
		/* Zdejmuje 48vw z reguły bazowej — na wąskim ekranie to ono rządziło. */
		max-width: none;
	}
}

.hero__model canvas,
.hero__model svg,
.hero__model .hero__fallback {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

/* Atrybut hidden wygrywa z powyższym display (fallback czeka na błąd WebGL). */
.hero__model [hidden] {
	display: none;
}

.hero__model canvas {
	opacity: 0;
	transition: opacity var(--dur-3) var(--ease);
}

/*
 * Bryłę można chwycić i pokręcić (hero.js). `pan-y` zostawia dotykowi
 * pionowe przewijanie strony — gest poziomy obraca, pionowy przewija.
 */
.hero__model.is-ready canvas {
	opacity: 1;
	cursor: grab;
	touch-action: pan-y;
}

.hero__model.is-grabbing canvas {
	cursor: grabbing;
}

/* Chwyt nie ma zaznaczać tytułu, który leży nad kadrem bryły. */
.hero:has(.hero__model.is-grabbing),
.edition-hero:has(.hero__model.is-grabbing) {
	user-select: none;
}

/*
 * Bryła na landingu edycji ROZSTRZYGNIĘTEJ (ustalenie 2026-08-26, wiąże —
 * odwraca „hero bez bryły" ze specu §7.2 i „render 3D tylko w hero frontu"
 * z §5.6). Ten sam eksponat i ta sama mechanika co na froncie (chwyt,
 * auto-obrót, fallback konturu), tylko w barwie TEJ edycji.
 *
 * Kompozycja przepisana z frontu: bryła wchodzi na prawy ogon zdania
 * wiodącego, typografia z przodu (z-index 2), bryła za nią. Lewa krawędź
 * kapowana na 560 px, bo zdanie ma `max-width: 620px` — bez tej klamry na
 * szerokim ekranie procent odsunąłby bryłę za koniec tekstu i kolizja,
 * o którą chodzi, by nie zaszła.
 *
 * Poniżej 1024 px bryły nie ma. Zdanie wiodące łamie się tam na trzy linijki
 * i zabiera całą szerokość, więc „lekkie wejście na ogon zdania" zmieniało się
 * w drut przez środek akapitu; zmniejszanie bryły do rozmiaru, przy którym się
 * mija z tekstem i z indeksem kropek, robiło z eksponatu winietę. `display: none`
 * znaczy też, że IntersectionObserver w hero.js nigdy nie zapali, więc na wąskim
 * ekranie nie powstaje kontekst WebGL.
 */
.hero__model--edition {
	display: none;
}

@media (min-width: 1024px) {
	.edition-hero--statuette .edition-hero__grid {
		position: relative;
		min-height: 388px;
	}

	.edition-hero--statuette .edition-hero__text,
	.edition-hero--statuette .edition-hero__signature {
		position: relative;
		z-index: 2;
	}

	/*
	 * `left` liczone od lewej krawędzi siatki, nie od sylwetki: rysunek zajmuje
	 * ~60 % szerokości kadru (kadr liczy się z sfery otaczającej, więc ma zapas
	 * na obrót w każdą stronę), więc sylwetka zaczyna się o ~85 px dalej, niż
	 * mówi pudełko. Klamra 480 px trzyma kolizję ze zdaniem (`max-width: 620px`)
	 * także na 1920 i szerzej, gdzie sam procent odsunąłby bryłę za tekst.
	 */
	.hero__model--edition {
		display: block;
		position: absolute;
		top: -32px;
		left: clamp(300px, 37%, 480px);
		height: 420px;
		width: auto;
		max-width: none;
		aspect-ratio: 380 / 420;
		z-index: 1;
	}
}

@media (min-width: 1280px) {
	.edition-hero--statuette .edition-hero__grid {
		min-height: 428px;
	}

	.hero__model--edition {
		height: 460px;
	}
}

/* Sygnatura edycji: prawy górny narożnik (§2). */
.hero__signature {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 20px;
	margin-left: auto;
	width: fit-content;
}

.hero__signature-row {
	display: flex;
	align-items: center;
	gap: 18px;
}

.hero__signature-text {
	text-align: right;
}

/*
 * Rok bieżącej edycji jest w hero jedynym nośnikiem sygnatury (etykieta
 * i znak 72 px zdjęte 2026-08-25), więc stoi o stopień wyżej niż Display M.
 * Świadome odstępstwo od skali 39/49/76 — rozmiar ustawiony na canvasie.
 */
.hero__signature-year {
	display: block;
	font-size: clamp(2.4375rem, 2rem + 1.9vw, 4rem);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1;
}

/* Nazwa nagrody: Display XL, wchodzi lewą krawędzią na bryłę. */
.hero__title {
	position: relative;
	z-index: 2;
	margin: 64px 0 0;
	max-width: 720px;
	font-size: var(--fs-display-xl);
	font-weight: 500;
	letter-spacing: -0.04em;
	line-height: 0.98;
	text-wrap: balance;
}

@media (min-width: 1024px) {
	/*
	 * Nazwa nagrody w wadze 500 (Medium) i z rozstrzeleniem +0,06em
	 * — mocniejsza kreska niż pierwotne 300 z canvasa, szerszy rytm
	 * liter niż w reszcie serwisu. Odsunięcie liczone od nowej
	 * krawędzi kadru hero.
	 */
	.hero__title {
		margin: 44px 0 0 54px;
		max-width: 700px;
		font-weight: 500;
		letter-spacing: 0.06em;
	}
}

/* =========================================================================
 * Pas naboru (§7.1) — kolumny z etykietami, nie jedna linia
 * ===================================================================== */
.nabor {
	background: var(--bg);
	border-top: 2px solid var(--brand-edge);
	border-bottom: 1px solid var(--border);
	padding-top: var(--space-block);
	padding-bottom: var(--space-block);
}

.nabor__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap);
}

/* Kolumny w stałych trackach — pusta kolumna gaśnie, sąsiedzi stoją (§6.9). */
.nabor__cols {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(128px, auto);
	gap: var(--space-head);
}

@media (max-width: 767px) {
	.nabor__cols {
		grid-auto-flow: row;
		grid-auto-columns: auto;
		gap: var(--space-block);
	}

	.nabor__col--empty {
		display: none;
	}
}

.nabor__col .label {
	display: block;
	margin: 0 0 6px;
	color: var(--muted);
}

.nabor__col-value {
	font-size: var(--fs-display-m);
	/* Display M = 39/600 (§3.3: stan naboru). */
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.1;
}

/* =========================================================================
 * Sekcje strony głównej
 * ===================================================================== */
.section {
	padding-top: var(--space-section);
}

.section--close {
	padding-top: var(--space-close);
}

.section--rule {
	border-top: 1px solid var(--border);
}

.section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--gap);
	margin-bottom: var(--space-block);
}

.section__more {
	font-size: var(--fs-meta);
	font-weight: 600;
}

/* Idea (front): zdanie + chipy kategorii + link. */
.idea__lead {
	margin: 0;
	font-size: var(--fs-sub);
	line-height: 1.5;
	letter-spacing: -0.015em;
	max-width: 62ch;
}

.idea__chips {
	margin-top: var(--space-block);
}

.idea .grid {
	align-items: end;
}

.idea__main {
	grid-column: 1 / -1;
}

.idea__aside {
	grid-column: 1 / -1;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
}

@media (min-width: 900px) {
	.idea__main {
		grid-column: span 8;
	}

	.idea__aside {
		grid-column: span 4;
		justify-content: flex-end;
	}
}

/* Na siatce 8-kolumnowej (768–1279) idea dzieli się 5 + 3. */
@media (min-width: 900px) and (max-width: 1279px) {
	.idea__main {
		grid-column: span 5;
	}

	.idea__aside {
		grid-column: span 3;
	}
}

/* Kadr w karcie: kotwica stempli. */
.kadr-wrap {
	position: relative;
	display: block;
}

.karta__label,
.karta__title,
.karta__sub {
	display: block;
}

.karta__role {
	color: var(--brand-strong);
	font-weight: 500;
}

/* Pas katalog + mapa: typograficzny, widmo jako divider nad pasem. */
.catalog-band {
	padding-top: var(--space-head);
	padding-bottom: var(--space-close);
}

.catalog-band__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--gap);
}

.catalog-band__title {
	margin: 16px 0 0;
	font-size: var(--fs-display-l);
	font-weight: 500;
	letter-spacing: -0.035em;
	line-height: 1.05;
}

.catalog-band__lead {
	margin: 16px 0 0;
	max-width: 52ch;
}

.catalog-band__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-bottom: 8px;
}

/* Partnerzy: poziomy jako kolumny z kreską. */
.partners {
	padding-bottom: var(--space-close);
}

.partners__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-rows) var(--gap);
	margin-top: 40px;
}

@media (min-width: 768px) {
	.partners__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.partners__level {
	border-top: 1px solid var(--text);
	padding-top: 20px;
}

/*
 * Patronat medialny to najliczniejszy i najniższy poziom — dostaje pełną
 * szerokość siatki, bo w kolumnie 1/3 sześć znaków łamie się na pięć rzędów.
 */
.partners__level--minor {
	border-top-color: var(--border);
}

@media (min-width: 768px) {
	.partners__level--minor {
		grid-column: 1 / -1;
	}
}

.partners__level .label {
	display: block;
	margin: 0 0 20px;
}

/*
 * Loga partnerów: same znaki na papierze, bez ramek-pudełek (§1 „zero
 * adnotacji arkusza"), w oryginalnych barwach (ustalenie 2026-08-25 —
 * wcześniejsza szarość z kolorem na hover została wycofana).
 *
 * Wysokość każdego znaku liczy PHP (`naww_partner_logo_height()`) i podaje
 * w `--logo-h`: wyrównanie po wspólnej wysokości rozdmuchuje znaki szerokie
 * i gubi kwadratowe, bo oko czyta pole znaku. `max-width` jest już tylko
 * bezpiecznikiem przy skrajnych proporcjach, stąd `object-fit`.
 */
.partners__logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 40px;
}

.logobox {
	--logo-h: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--logo-h);
}

/* Patronat medialny o stopień niżej w hierarchii niż organizatorzy. */
.partners__level--minor .logobox {
	--logo-h: 44px;
}

.logobox img {
	display: block;
	height: var(--logo-h);
	width: auto;
	max-width: 280px;
	object-fit: contain;
	transition: opacity var(--dur-1) var(--ease);
}

.partners__level--minor .logobox img {
	max-width: 240px;
}

a.logobox:hover,
a.logobox:focus-visible {
	text-decoration: none;
}

a.logobox:hover img,
a.logobox:focus-visible img {
	opacity: 0.72;
}

/* =========================================================================
 * Landing edycji (E4, §7.2)
 * ===================================================================== */
.edition-hero {
	padding-top: var(--space-head);
	padding-bottom: var(--space-section);
}

.edition-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--gap);
	align-items: start;
}

@media (min-width: 900px) {
	.edition-hero__grid {
		grid-template-columns: minmax(0, 1fr) 320px;
	}
}

.edition-hero__state {
	margin: 0 0 20px;
}

.edition-hero__year {
	margin: 0;
	font-size: var(--fs-display-xl);
	font-weight: 500;
	letter-spacing: -0.04em;
	line-height: 0.98;
}

.edition-hero__lead {
	margin: 28px 0 0;
	font-size: var(--fs-lead);
	line-height: 1.5;
	max-width: 620px;
}

/*
 * Sygnatura landingu to sam indeks kropek (2026-08-26): znak edycji 72 px
 * i powtórzona etykieta „Edycja N" zdjęte, tak jak w hero frontu
 * 2026-08-25 — rok niesie H1, a stan niesie etykieta nad nim.
 */
.edition-hero__signature {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 18px;
}

/* Pasek kategorii edycji: kreska 2 px w barwie edycji jako górna krawędź. */
.edition-cats {
	border-top: 2px solid var(--brand-edge);
	border-bottom: 1px solid var(--border);
	padding-top: var(--space-head);
	padding-bottom: var(--space-head);
}

.edition-cats__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gap);
}

@media (min-width: 900px) {
	.edition-cats__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	}
}

.edition-cats__note {
	margin: 16px 0 0;
	max-width: 320px;
}

/*
 * Listwa faktów edycji w toku — bliźniak pasa naboru z frontu (`.nabor`):
 * ta sama rola (terminy w kolumnach + akcja), więc od 2026-08-26 ten sam
 * rysunek. Tło zeszło z `--surface` na płaskie `--bg` (ustalenie z canvasa
 * 2026-08-25 dotyczyło pasa naboru, ale idiom jest jeden), a kolumny jadą
 * stałymi trackami — kolumna z pustą datą gaśnie, sąsiedzi stoją (§6.9),
 * zamiast przesuwać się w lewo jak we flexie.
 */
.edition-facts {
	background: var(--bg);
	border-top: 2px solid var(--brand-edge);
	border-bottom: 1px solid var(--border);
	padding-top: var(--space-block);
	padding-bottom: var(--space-block);
}

.edition-facts__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap);
}

.edition-facts__cols {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(128px, auto);
	gap: var(--space-head);
}

@media (max-width: 767px) {
	.edition-facts__cols {
		grid-auto-flow: row;
		grid-auto-columns: auto;
		gap: var(--space-block);
	}

	.edition-facts__col--empty {
		display: none;
	}
}

.edition-facts__col .label {
	display: block;
	margin: 0 0 6px;
	color: var(--muted);
}

.edition-facts__value {
	font-size: var(--fs-sub);
	font-weight: 500;
	letter-spacing: -0.02em;
}

.edition-facts__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/*
 * Blok Grand Prix (§7.2, korekta 2026-08-26): karta w geometrii siatki kart.
 * Ta sama szerokość kolumny i ten sam kadr 4:3 co pozostałe nagrodzone
 * projekty — wcześniej kadr szedł przez 8 kolumn (a bez uzasadnienia przez 12)
 * w proporcji 16:10 i przy 1440 px zjadał 820 px wysokości, czyli cały ekran
 * na jeden obiekt. Rangę nazywa nagłówek podsekcji (§1.13), więc karta nie
 * musi jej krzyczeć rozmiarem.
 *
 * Siatka jest kopią .cards-grid, żeby karta Grand Prix trafiała w ten sam
 * moduł co karty w „Nagrodach w kategoriach” dwie podsekcje niżej.
 */
.gp-block {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--space-rows) var(--gap);
	align-items: start;
}

/* Szpalta uzasadnienia pod kartą, dopóki rząd nie ma czterech kolumn. */
.gp-block__aside {
	grid-column: 1 / -1;
}

@media (min-width: 1024px) {
	.gp-block {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/*
	 * Dwie kolumny (640 px przy 1440) to dokładnie tyle, ile mieści 68ch
	 * tekstu uzasadnienia — kreska 2 px kończy się tam, gdzie kończy się
	 * akapit, zamiast biec przez pustą czwartą kolumnę.
	 */
	.gp-block__aside {
		grid-column: span 2;
	}
}

.verdict__more {
	margin: 24px 0 0;
}

.verdict__more a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	color: var(--brand-strong);
}

/* Materiały edycji: lewa szpalta + wiersze plików. */
.materials {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gap);
}

@media (min-width: 900px) {
	.materials {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	}
}

.materials__aside .label {
	display: block;
	margin: 0 0 8px;
}

.materials__aside-block {
	border-top: 1px solid var(--border);
	margin-top: 28px;
	padding-top: 20px;
	max-width: 320px;
}

.materials__list {
	border-top: 1px solid var(--text);
}

/* =========================================================================
 * Katalog (E5, §7.3) — siatka grupowana po edycji
 * ===================================================================== */
/*
 * Katalog jedzie ciaśniejszym rytmem niż reszta serwisu (ustalenie
 * z canvasa 2026-08-25): jeden krok --space-block między nagłówkiem,
 * lockupem grupy i grupami. To gęsta lista, nie strona narracyjna —
 * skok --space-close rwał ją na osobne ekrany.
 */
.catalog-head {
	padding-top: var(--space-block);
}

.catalog-head__title {
	margin: 16px 0 0;
	font-size: var(--fs-display-l);
	font-weight: 500;
	letter-spacing: -0.035em;
	line-height: 1.05;
}

/*
 * Panel filtrów w kolumnie po lewej — ten sam układ co w trybie Mapa, żeby
 * przełącznik Lista ↔ Mapa zmieniał tylko prawą stronę ekranu. Kolumna filtrów
 * ma tę samą szerokość co na mapie, inaczej podskakiwałaby przy przełączeniu.
 */
.catalog-layout {
	margin-top: var(--space-block);
	display: grid;
	gap: 24px;
}

.catalog-main {
	min-width: 0;
}

@media (min-width: 1024px) {
	.catalog-layout {
		grid-template-columns: 300px minmax(0, 1fr);
		align-items: start;
	}

	/*
	 * Panel jedzie z treścią, bo lista scrolluje tysiące pikseli — inaczej
	 * filtry uciekałyby za ekran po pierwszym rzędzie kart.
	 */
	.catalog-layout .filter-panel {
		position: sticky;
		top: calc(88px + 24px);
	}

	.catalog-layout .filter-panel__body {
		max-height: calc(100vh - 88px - 48px);
		overflow-y: auto;
	}

	/*
	 * Kolumna filtrów zabiera 324 px, więc cztery karty schodziłyby do ~230 px
	 * i kadr 4:3 robiłby się miniaturą. Trzy trzymają szerokość karty z układu
	 * pełnowymiarowego; czwarta wraca dopiero tam, gdzie jest na nią miejsce.
	 */
	.catalog-layout .cards-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1600px) {
	.catalog-layout .cards-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Wymiana wyniku bez przeładowania: treść przygasa, układ nie drga. */
.catalog-results {
	transition: opacity var(--dur-1) var(--ease);
}

.catalog-results.is-loading {
	opacity: 0.55;
}

.catalog-group {
	padding-top: var(--space-block);
}

.catalog-group:first-of-type {
	padding-top: 0;
}

/* Lockup w katalogu trzyma ten sam krok; poza katalogiem zostaje szeroki. */
.catalog-group .lockup {
	padding-top: var(--space-block);
}

.catalog-group__grid {
	/* Kreska lockupu → treść: 32 px (§6.10). */
	margin-top: var(--space-block);
}

/* Stan pusty (§7.4): listwa zostaje, komunikat nazywa powód. */
.catalog-empty {
	background: var(--surface);
	padding: var(--space-close) var(--space-block);
	text-align: center;
}

.catalog-empty p {
	margin: 0 0 var(--space-block);
	font-size: var(--fs-lead);
}

/* =========================================================================
 * Realizacja (E6, §7.5)
 * ===================================================================== */
.work-header {
	padding-top: var(--space-block);
}

.work-header .stamp {
	margin-bottom: 16px;
}

.work-header__title {
	margin: 0;
	font-size: var(--fs-display-l);
	font-weight: 500;
	letter-spacing: -0.035em;
	line-height: 1.05;
	max-width: 20ch;
}

.work-header__sub {
	margin: 12px 0 0;
	font-size: var(--fs-lead);
	color: var(--muted);
}

.work-header__chips {
	margin-top: var(--space-block);
}

.work-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--gap);
	padding-top: var(--space-section);
	align-items: start;
}

@media (min-width: 900px) {
	.work-layout {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	}

	/* Pasek boczny niesie teraz tabelę faktów i mini-mapę, więc przy niskim
	   oknie przerastał ekran — przyklejony blok wyższy od okna urywa dół
	   bez szansy na doscrollowanie. Własne przewijanie włącza się dopiero
	   wtedy (max-height + auto), na wysokim oknie paska nie widać. */
	.work-layout__aside {
		position: sticky;
		top: 112px;
		max-height: calc(100vh - 136px);
		overflow-y: auto;
	}
}

.work-gallery__main .kadr {
	aspect-ratio: 4 / 3;
}

.work-gallery__caption {
	margin: 8px 0 0;
}

.work-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	margin-top: 8px;
}

.work-gallery__thumbs a {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--border);
}

.work-gallery__thumbs img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.work-section {
	padding-top: var(--space-section);
}

.work-section .label {
	display: block;
	margin-bottom: 16px;
}

/* Mini-mapa lokalizacji siedzi w pasku bocznym pod tabelą faktów (2026-08-26):
   w kolumnie 1/3 kadr jest mniejszy, a wiersz „Lokalizacja" tuż nad mapą ją
   nazywa, więc nie ma ani osobnej etykiety, ani podpisu z miejscowością. */
.work-aside__map {
	margin-top: var(--space-block);
}

.mini-map {
	aspect-ratio: 4 / 3;
	background: var(--surface-hi);
	border: 1px solid var(--border);
}

.work-aside__maplink {
	margin: 8px 0 0;
}

/* =========================================================================
 * Młody Twórca (E6, §7.6)
 * ===================================================================== */
.tworca-header {
	padding-top: var(--space-block);
}

.tworca-header__name {
	margin: 0;
	font-size: var(--fs-display-xl);
	font-weight: 500;
	letter-spacing: -0.04em;
	line-height: 0.98;
	max-width: 16ch;
}

.tworca-header__sub {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 20px;
}

.tworca-header__chips {
	margin-top: var(--space-block);
}

.tworca-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--gap);
	padding-top: var(--space-section);
	align-items: start;
}

@media (min-width: 900px) {
	.tworca-layout {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	.tworca-layout__portrait {
		grid-column: span 5;
	}

	.tworca-layout__text {
		grid-column: 7 / span 6;
	}
}

.tworca-bio {
	padding-top: var(--space-section);
}

.tworca-bio__link {
	margin-top: var(--space-block);
}

.tworca-bio__link a {
	font-weight: 600;
	color: var(--brand-strong);
}

/* =========================================================================
 * Kapituła (E7, §7.8)
 * ===================================================================== */
.czlonek-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--gap);
	padding-top: var(--space-section);
	align-items: start;
}

@media (min-width: 900px) {
	.czlonek-layout {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	.czlonek-layout__portrait {
		grid-column: span 4;
	}

	.czlonek-layout__text {
		grid-column: 6 / span 7;
	}
}

.czlonek-layout__portrait .kadr img {
	filter: grayscale(1);
	transition: filter var(--dur-1) var(--ease);
}

.czlonek-layout__portrait:hover .kadr img {
	filter: grayscale(0);
}

.czlonek__role {
	margin: 0 0 12px;
	color: var(--brand-strong);
}

.czlonek__name {
	margin: 0;
	font-size: var(--fs-display-l);
	font-weight: 500;
	letter-spacing: -0.035em;
	line-height: 1.05;
}

.czlonek__chips {
	margin-top: var(--space-block);
}

.czlonek__bio {
	margin-top: var(--space-block);
}

/* =========================================================================
 * O nagrodzie (E7, §7.10)
 * ===================================================================== */
.about-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-head) var(--gap);
	padding-top: var(--space-head);
	align-items: start;
}

/* Idea po lewej, spis nagród po prawej; jedna kolumna siatki zostaje między
 * nimi pusta jako światło. Poniżej 1024 px kolumny się nie rozjeżdżają — idą
 * pod sobą. */
@media (min-width: 1024px) {
	.about-layout {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	.about-layout__text {
		grid-column: span 5;
	}

	.about-layout__cats {
		grid-column: 7 / span 6;
	}
}

/* Od 1440 px spis łamie się na dwie kolumny i podchodzi o kolumnę bliżej
 * tekstu — strona czyta się jako trzy kolumny: idea, spis, spis dalej.
 * Pusta kolumna światła jest wtedy zbędna, bo spis niesie własną kreskę
 * otwierającą, a jego wysokość spada o połowę i przestaje uciekać pod tekst.
 * Rzędy są jawne (połowa z dziesięciu wierszy), nie `columns` — inaczej
 * kreski obu kolumn rozjeżdżają się na wysokość i rytm siatki znika. */
@media (min-width: 1440px) {
	.about-layout__cats {
		grid-column: 6 / span 7;
	}

	.about-cats {
		display: grid;
		grid-template-rows: repeat(5, auto);
		grid-auto-flow: column;
		column-gap: var(--gap);
	}
}

.about-cats__note {
	margin: 12px 0 0;
	max-width: 62ch;
}

.about-cats {
	list-style: none;
	margin: var(--space-block) 0 0;
	padding: 0;
	border-top: 1px solid var(--text);
}

.about-cat {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid var(--border);
	align-items: start;
}

.about-cat .pictogram {
	position: relative;
	top: 4px;
}

.about-cat__body {
	display: block;
	min-width: 0;
}

.about-cat__name {
	display: block;
	font-weight: 500;
	font-size: var(--fs-lead);
	letter-spacing: -0.01em;
}

.about-cat__desc {
	display: block;
	margin-top: 4px;
}

.about-band {
	background: var(--surface);
	border-top: 2px solid var(--brand-edge);
	padding: var(--space-block) 0;
	margin-top: var(--space-close);
}

.about-band__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap);
}

.about-band__title {
	margin: 0;
	font-size: var(--fs-h2);
	font-weight: 500;
	letter-spacing: -0.025em;
}

/* =========================================================================
 * Aktualności — wpis (§7.9)
 * ===================================================================== */
.entry-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--gap);
	padding-top: var(--space-section);
	align-items: start;
}

@media (min-width: 900px) {
	.entry-layout {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	.entry-layout__aside {
		grid-column: span 3;
	}

	.entry-layout__main {
		grid-column: 4 / span 8;
	}
}

.entry__media {
	margin: var(--space-block) 0;
}

.entry__title {
	margin: 12px 0 0;
	font-size: var(--fs-display-l);
	font-weight: 500;
	letter-spacing: -0.035em;
	line-height: 1.05;
	max-width: 24ch;
}

.entry__meta-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

.entry__content {
	font-size: var(--fs-body);
	line-height: 1.6;
	max-width: 68ch;
}

.entry__content a {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.entry__content img {
	height: auto;
}

.entry-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gap);
	border-top: 1px solid var(--text);
	margin-top: var(--space-close);
	padding-top: var(--space-block);
}

.entry-nav a {
	font-weight: 500;
}

.entry-nav__next {
	text-align: right;
}

/* =========================================================================
 * Wyniki wyszukiwania i 404 (§7.11)
 * ===================================================================== */
.search-head {
	padding-top: var(--space-section);
	padding-bottom: var(--space-head);
}

.search-head__title {
	margin: 16px 0 0;
	font-size: var(--fs-display-l);
	font-weight: 500;
	letter-spacing: -0.035em;
	line-height: 1.05;
}

.search-head .search-form {
	max-width: 560px;
	margin-top: var(--space-block);
}

.searchrow {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 24px;
	gap: var(--gap);
	align-items: center;
	padding: 20px 0;
	border-bottom: 1px solid var(--border);
	color: var(--text);
}

@media (min-width: 768px) {
	.searchrow {
		grid-template-columns: 170px minmax(0, 1fr) 24px;
	}
}

.searchrow:hover {
	text-decoration: none;
}

.searchrow:hover .searchrow__title {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.searchrow__title {
	display: block;
	font-size: var(--fs-lead);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.searchrow__title mark {
	background: var(--brand-tint);
	color: inherit;
	box-shadow: inset 0 -1px 0 var(--brand-edge);
}

.searchrow > svg {
	color: var(--border-strong);
	justify-self: end;
}

.error-404 {
	position: relative;
	overflow: hidden;
	padding-top: var(--space-close);
	padding-bottom: var(--space-close);
	min-height: 480px;
}

.error-404__title {
	margin: 16px 0 0;
	font-size: var(--fs-display-xl);
	font-weight: 500;
	letter-spacing: -0.04em;
	line-height: 0.98;
	position: relative;
	z-index: 2;
}

.error-404__contour {
	position: absolute;
	top: var(--space-close);
	right: calc(-1 * var(--gutter));
	width: min(340px, 44vw);
	z-index: 1;
	color: var(--text);
	opacity: 0.75;
}

.error-404__rows {
	position: relative;
	z-index: 2;
	max-width: 560px;
	border-top: 1px solid var(--text);
	margin-top: var(--space-head);
}

.error-404__rows a {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 24px;
	gap: var(--gap);
	align-items: center;
	padding: 18px 0;
	border-bottom: 1px solid var(--border);
	font-size: var(--fs-lead);
	font-weight: 500;
}

.error-404__rows svg {
	color: var(--border-strong);
	justify-self: end;
}

.error-404 .search-form {
	position: relative;
	z-index: 2;
	max-width: 560px;
	margin-top: var(--space-head);
}

/* =========================================================================
 * Strona-arkusz (page.php generic)
 * ===================================================================== */
/*
 * Odstęp od okruszków taki sam jak w katalogu (2026-08-26): `--space-block`,
 * nie `--space-section`. Katalog i „O nagrodzie" zaczynały się na dwóch
 * różnych wysokościach (151 vs 191 px od góry okna), a to ten sam poziom
 * nawigacji. Wyrównanie w dół obejmuje wszystkie arkusze niosące `.page-head`
 * — aktualności, strony generyczne — bo różnica była tam tą samą różnicą.
 */
.page-head {
	padding-top: var(--space-block);
	padding-bottom: var(--space-head);
}

.page-head__title {
	margin: 16px 0 0;
	font-size: var(--fs-display-l);
	font-weight: 500;
	letter-spacing: -0.035em;
	line-height: 1.05;
}

/* =========================================================================
 * Ruch: prefers-reduced-motion (§8.7) — zerujemy transformy i wejścia,
 * zostają przejścia barwy/tła/obrysu/krycia na --dur-1.
 * ===================================================================== */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.spectrum.is-armed,
	.spectrum.is-drawn {
		transform: none;
		transition: none;
	}

	.edots.is-armed .edot,
	.edots.is-drawn .edot {
		opacity: 1;
		transition: none;
	}

	.karta:hover .kadr img {
		transform: none;
	}

	.hero__model canvas {
		transition: none;
	}

	.main-nav,
	.editions-submenu {
		transition: none;
	}

	.edot .tip {
		transition: none;
	}
}