@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,500;9..144,700;9..144,900&display=swap');

/* =============================================================================
   KOJIMA - oprawa autorska, wylacznie do jednego tekstu (24.08.2026, wersja 2)
   -----------------------------------------------------------------------------
   MYSL PRZEWODNIA. Bohater chcial robic filmy, a zrobil gry. Wiec caly material
   jest czarno-bialy jak fotos prasowy, ma otwarcie zbudowane jak plansza tytulowa
   filmu, a jedyny kolor to waska bursztynowa kreska. Odpowiada to zarowno kinu,
   ktore go uksztaltowalo, jak i wizualnemu jezykowi serii, ktora zrobil: wysoki
   kontrast, techniczny drobiazg, zero ozdobnikow.

   CZEGO TU NIE MA. Zadnych elementow udajacych interfejs gry, zadnych perforacji
   tasmy, zadnych gradientow. Kino i technika sa tu struktura, nie przebraniem.
   Po zdjeciu koloru uklad nadal ma sens, bo koloru prawie nie ma.

   WERSJA 2 NAPRAWIA. Plansza z cytatem miala 1152 px szerokosci i 1152 px samego
   marginesu wewnetrznego, wiec na tekst zostawalo zero i cytat lamal sie po jednym
   slowie w pionie. Przyczyna: element dostawal wciecie rowne marginesowi kolumny,
   nie wychodzac wczesniej na pelna szerokosc. Teraz kazdy element pelnej szerokosci
   najpierw wychodzi z kolumny ujemnym marginesem, a dopiero potem dostaje wciecie.

   ZALEZNOSCI. Arkusz wisi na klasie body dokladanej przez pw_pro_artykul.php.
   ============================================================================= */

body.pw-pro--kojima {
	--kj-tlo:      #0B0B0B; /* czern sali kinowej */
	--kj-plyta:    #151515;
	--kj-tekst:    #E8E6E1;
	--kj-jasny:    #FFFFFF;
	--kj-cichy:    #97948E;
	--kj-cichszy:  #6A6762;
	--kj-kreska:   #262626;
	--kj-akcent:   #C8A24A; /* jedyny kolor w calym materiale */
	--kj-serif:    "Fraunces", Georgia, "Times New Roman", serif;
	--kj-mono:     ui-monospace, "SFMono-Regular", "JetBrains Mono", Consolas, monospace;
	--kj-wciecie:  max(22px, calc(50vw - 384px));
	background: var(--kj-tlo);
}

/* ============================ OTWARCIE ====================================
   Naglowek i obraz wyrozniajacy to elementy szablonu, wiec nie budujemy ich od
   nowa (bylby drugi znacznik h1), tylko przestawiamy na wlasny uklad: po lewej
   tytul na czerni, po prawej pelnej wysokosci portret. Na waskim ekranie plansze
   ukladaja sie jedna pod druga.
   ========================================================================== */

/* Otwarcie ma isc szeroko, bo od tego zalezy, czy material czyta sie jak duzy
   tekst, czy jak kolejny wpis. Kolumna z trescia zostaje waska, bo od niej
   zalezy komfort czytania. To dwie rozne miary i celowo sie roznia. */
body.pw-pro--kojima .px-single-head {
	background: var(--kj-tlo);
	padding: clamp(36px, 4.5vw, 72px) clamp(22px, 5vw, 104px) 0;
	margin: 0;
	border-bottom: 0;
}
body.pw-pro--kojima .px-single-head .px-wrap-sm {
	max-width: none;
	width: auto;
	margin: 0;
	padding: 0;
}
body.pw-pro--kojima .px-single-head .px-kicker {
	font-family: var(--kj-mono) !important;
	font-size: 11px !important;
	letter-spacing: .24em !important;
	text-transform: uppercase;
	color: var(--kj-akcent) !important;
	border: 0 !important;
	background: none !important;
	padding: 0 !important;
}
body.pw-pro--kojima .px-single-head h1.px-single-title {
	font-family: var(--kj-serif) !important;
	font-weight: 900 !important;
	font-size: clamp(38px, 6.4vw, 108px) !important;
	line-height: .95 !important;
	letter-spacing: -.025em !important;
	color: var(--kj-jasny) !important;
	margin: 20px 0 0 !important;
	max-width: 17ch;
	text-wrap: balance;
}
body.pw-pro--kojima .px-single-head .px-single-dek,
body.pw-pro--kojima .px-single-head .px-single-dek + p,
body.pw-pro--kojima .px-single-head p {
	font-family: var(--kj-serif) !important;
	font-weight: 300 !important;
	font-size: clamp(17px, 1.5vw, 21px) !important;
	line-height: 1.5 !important;
	color: var(--kj-cichy) !important;
	max-width: 52ch;
	margin-top: 22px !important;
}
body.pw-pro--kojima .px-single-head .px-single-meta,
body.pw-pro--kojima .px-single-head .px-single-meta * {
	font-family: var(--kj-mono) !important;
	font-size: 11px !important;
	letter-spacing: .12em !important;
	text-transform: uppercase;
	color: var(--kj-cichszy) !important;
}
body.pw-pro--kojima .px-single-head .px-single-meta {
	margin-top: 30px !important;
	padding-top: 20px;
	border-top: 1px solid var(--kj-kreska);
}
body.pw-pro--kojima .px-single-head .pw-bm { display: none; }

/* Portret: pas na pelna szerokosc, monochromatyczny, kadrowany na twarz. */
body.pw-pro--kojima .px-single-hero {
	max-width: none !important;
	width: auto !important;
	margin: clamp(30px, 4vw, 54px) 0 0 !important;
	padding: 0 clamp(22px, 5vw, 104px) !important;
	background: var(--kj-tlo);
}
body.pw-pro--kojima .px-single-hero img {
	width: 100% !important;
	height: clamp(300px, 62vh, 680px) !important;
	object-fit: cover !important;
	object-position: 50% 26% !important;
	filter: grayscale(1) contrast(1.12) brightness(.98) !important;
	border-radius: 0 !important;
	border: 0 !important;
	display: block;
}

/* ============================ PLANSZA TRESCI ============================== */

body.pw-pro--kojima .px-single-body {
	margin-inline: calc(50% - 50vw);
	padding-inline: var(--kj-wciecie);
	padding-block: clamp(34px, 5vw, 68px);
	background: var(--kj-tlo);
	color: var(--kj-tekst);
	overflow-x: clip;
}

body.pw-pro--kojima .px-single-body p { color: var(--kj-tekst); margin: 0 0 1.35em; }
body.pw-pro--kojima .px-single-body a { color: var(--kj-akcent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
body.pw-pro--kojima .px-single-body a:hover { color: var(--kj-jasny); }
body.pw-pro--kojima .px-single-body strong { color: var(--kj-jasny); font-weight: 650; }

/* KLUCZOWE: element pelnej szerokosci najpierw wychodzi z kolumny, potem dostaje
   wlasne wciecie. Odwrotna kolejnosc byla przyczyna zlamanych plansz w wersji 1. */
.kj-pelna,
.kj-plansza {
	margin-inline: calc(-1 * var(--kj-wciecie));
	box-sizing: border-box;
}

/* ---------- wejscie ---------- */
.kj-wejscie {
	border-bottom: 1px solid var(--kj-kreska);
	padding-bottom: clamp(24px, 3.5vw, 40px);
	margin-bottom: clamp(28px, 4vw, 46px);
}
.kj-nadtytul {
	font-family: var(--kj-mono);
	font-size: 11px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--kj-akcent);
	margin: 0 0 18px;
}
.kj-wejscie p.kj-lid {
	font-family: var(--kj-serif);
	font-weight: 300;
	font-size: clamp(20px, 2.2vw, 26px);
	line-height: 1.44;
	color: var(--kj-jasny);
	margin: 0;
}

/* ---------- kadr ---------- */
.kj-kadr {
	margin: clamp(52px, 7vw, 88px) 0 clamp(20px, 2.4vw, 30px);
	padding-top: 24px;
	border-top: 1px solid var(--kj-kreska);
}
.kj-kadr .kj-nr {
	display: block;
	font-family: var(--kj-mono);
	font-size: 10.5px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--kj-akcent);
	margin-bottom: 12px;
}
.kj-kadr-tytul {
	font-family: var(--kj-serif);
	font-weight: 700;
	font-size: clamp(27px, 3.6vw, 42px);
	line-height: 1.08;
	letter-spacing: -.02em;
	color: var(--kj-jasny);
	margin: 0;
}

/* ---------- plansza tytulowa z cytatem ---------- */
.kj-plansza {
	margin-block: clamp(46px, 6vw, 78px);
	padding: clamp(48px, 7vw, 92px) clamp(24px, 6vw, 80px);
	background: var(--kj-plyta);
	border-block: 1px solid var(--kj-kreska);
	text-align: center;
}
.kj-plansza blockquote {
	margin: 0 auto;
	max-width: 18ch;
	font-family: var(--kj-serif);
	font-weight: 500;
	font-size: clamp(30px, 4.6vw, 60px);
	line-height: 1.1;
	letter-spacing: -.025em;
	color: var(--kj-jasny);
	text-wrap: balance;
}
.kj-plansza .kj-oryginal {
	display: block;
	margin: 24px auto 0;
	max-width: 54ch;
	font-family: var(--kj-serif);
	font-weight: 300;
	font-style: italic;
	font-size: clamp(14.5px, 1.3vw, 16.5px);
	line-height: 1.55;
	color: var(--kj-cichy);
}
.kj-plansza .kj-zrodlo {
	display: block;
	margin: 22px auto 0;
	max-width: 60ch;
	font-family: var(--kj-mono);
	font-size: 10.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--kj-cichszy);
	font-style: normal;
}
.kj-plansza .kj-zrodlo a { color: var(--kj-cichszy); }

/* ---------- dopisek na marginesie ---------- */
.kj-margines {
	border-left: 2px solid var(--kj-akcent);
	padding: 2px 0 2px 16px;
	margin: 26px 0;
	line-height: 1.58;
	color: var(--kj-cichy);
}
.kj-margines b {
	display: block;
	font-family: var(--kj-mono);
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--kj-akcent);
	margin-bottom: 8px;
	font-weight: 500;
}
@media (min-width: 1120px) {
	.kj-margines {
		float: right;
		width: 236px;
		margin: 6px calc(-1 * (var(--kj-wciecie) - 26px)) 24px 32px;
	}
}

/* ---------- karta faktu ---------- */
.kj-fakt {
	background: var(--kj-plyta);
	border: 1px solid var(--kj-kreska);
	border-left: 3px solid var(--kj-akcent);
	padding: 22px 24px;
	margin: 32px 0;
}
.kj-fakt h4 {
	font-family: var(--kj-mono);
	font-size: 10.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--kj-akcent);
	margin: 0 0 12px;
	font-weight: 500;
}
.kj-fakt p:last-child { margin-bottom: 0; }

/* ---------- zdjecia: wszystkie monochromatyczne ---------- */
.kj-foto { margin: clamp(34px, 4.6vw, 58px) 0; }
.kj-foto img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--kj-kreska);
	filter: grayscale(1) contrast(1.08);
}
.kj-foto--pion img {
	max-height: 74vh !important;
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	margin-inline: auto !important;
}
.kj-foto--pion figcaption { max-width: 64ch; margin-inline: auto; }
.kj-foto figcaption {
	margin-top: 12px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--kj-cichy);
}
.kj-foto figcaption .kj-kredyt {
	display: block;
	margin-top: 5px;
	font-family: var(--kj-mono);
	font-size: 10px;
	letter-spacing: .1em;
	color: var(--kj-cichszy);
}
.kj-foto figcaption .kj-kredyt a { color: var(--kj-cichszy); }

.kj-para {
	display: grid;
	gap: clamp(14px, 2vw, 26px);
	grid-template-columns: 1fr;
	margin: clamp(38px, 5vw, 64px) 0;
}
@media (min-width: 700px) { .kj-para { grid-template-columns: 1fr 1fr; } }
.kj-para .kj-foto { margin: 0; }
.kj-para img { aspect-ratio: 3 / 4; object-fit: cover; object-position: center 22%; }

/* ---------- os czasu ---------- */
.kj-os {
	margin: clamp(38px, 5vw, 62px) 0;
	border-top: 1px solid var(--kj-kreska);
}
.kj-os-poz {
	display: grid;
	grid-template-columns: 88px 1fr;
	gap: 20px;
	padding: 18px 0;
	border-bottom: 1px solid var(--kj-kreska);
	align-items: baseline;
}
.kj-os-rok {
	font-family: var(--kj-mono);
	font-size: 12.5px;
	letter-spacing: .06em;
	color: var(--kj-akcent);
	font-weight: 500;
	white-space: nowrap;
}
.kj-os-tresc { line-height: 1.6; color: var(--kj-tekst); }
.kj-os-tresc b { color: var(--kj-jasny); font-weight: 650; }
@media (max-width: 520px) {
	.kj-os-poz { grid-template-columns: 1fr; gap: 6px; }
}

/* ---------- rysunek techniczny ---------- */
.kj-rysunek {
	margin: clamp(38px, 5vw, 60px) 0;
	padding: clamp(22px, 3vw, 34px);
	background: var(--kj-plyta);
	border: 1px solid var(--kj-kreska);
}
.kj-rysunek svg { display: block; width: 100%; height: auto; }
.kj-rysunek figcaption {
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid var(--kj-kreska);
	font-size: 14px;
	line-height: 1.55;
	color: var(--kj-cichy);
}
.kj-rysunek figcaption b {
	font-family: var(--kj-mono);
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--kj-akcent);
	display: block;
	margin-bottom: 7px;
	font-weight: 500;
}

/* ---------- zrodla ---------- */
.kj-zrodla {
	margin-top: clamp(52px, 7vw, 84px);
	padding-top: 28px;
	border-top: 1px solid var(--kj-kreska);
}
.kj-zrodla h3 {
	font-family: var(--kj-mono);
	font-size: 10.5px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--kj-cichy);
	margin: 0 0 18px;
	font-weight: 500;
}
.kj-zrodla ol { margin: 0; padding-left: 22px; }
.kj-zrodla li { line-height: 1.6; color: var(--kj-cichy); margin-bottom: 9px; }
.kj-zrodla a { color: var(--kj-cichy); }
.kj-zrodla a:hover { color: var(--kj-akcent); }

/* =============================================================================
   PRZEBICIE SKORKI "TERMINAL"
   Skorka wstrzykuje style INLINE (laduja sie po tym arkuszu) i oznacza typografie
   oraz barwy jako !important:
     .pw-design-terminal .px-single-body h2, h3            -> font-family
     .pw-design-terminal .px-single-body :is(p,li,quote)   -> font-family, font-size, color
     .pw-design-terminal .px-single-body blockquote        -> font-family, font-size
   Sama specyficznosc tego nie przebije, wiec te same wlasciwosci sa tu powtorzone
   z ta sama moca, waskim zakresem, wylacznie na elementach tej oprawy.
   ============================================================================= */

body.pw-pro--kojima .px-single-body > p,
body.pw-pro--kojima .px-single-body li {
	font-size: clamp(17px, 1.15vw, 18.5px) !important;
	line-height: 1.72 !important;
	color: var(--kj-tekst) !important;
}
body.pw-pro--kojima .px-single-body .kj-lid {
	font-family: var(--kj-serif) !important;
	font-size: clamp(20px, 2.2vw, 26px) !important;
	line-height: 1.44 !important;
	color: var(--kj-jasny) !important;
}
body.pw-pro--kojima .px-single-body .kj-nadtytul {
	font-family: var(--kj-mono) !important;
	font-size: 11px !important;
	line-height: 1.4 !important;
	color: var(--kj-akcent) !important;
	letter-spacing: .22em !important;
}
body.pw-pro--kojima .px-single-body h2.kj-kadr-tytul {
	font-family: var(--kj-serif) !important;
	font-size: clamp(27px, 3.6vw, 42px) !important;
	line-height: 1.08 !important;
	color: var(--kj-jasny) !important;
}
body.pw-pro--kojima .px-single-body .kj-plansza blockquote {
	font-family: var(--kj-serif) !important;
	font-size: clamp(30px, 4.6vw, 60px) !important;
	line-height: 1.1 !important;
	border: 0 !important;
	padding: 0 !important;
	background: none !important;
	font-style: normal !important;
	color: var(--kj-jasny) !important;
}
body.pw-pro--kojima .px-single-body .kj-plansza .kj-oryginal {
	color: var(--kj-cichy) !important;
	font-style: italic !important;
}
body.pw-pro--kojima .px-single-body .kj-plansza .kj-zrodlo {
	color: var(--kj-cichszy) !important;
	font-family: var(--kj-mono) !important;
	font-size: 10.5px !important;
}
body.pw-pro--kojima .px-single-body .kj-fakt p,
body.pw-pro--kojima .px-single-body .kj-margines,
body.pw-pro--kojima .px-single-body .kj-os-tresc {
	font-size: 15.5px !important;
	line-height: 1.6 !important;
}
body.pw-pro--kojima .px-single-body .kj-margines { color: var(--kj-cichy) !important; }
body.pw-pro--kojima .px-single-body .kj-os-tresc { color: var(--kj-tekst) !important; }
body.pw-pro--kojima .px-single-body .kj-fakt p  { color: var(--kj-tekst) !important; }
body.pw-pro--kojima .px-single-body .kj-zrodla li {
	font-size: 14.5px !important;
	line-height: 1.6 !important;
	color: var(--kj-cichy) !important;
}
body.pw-pro--kojima .px-single-body .kj-foto figcaption { color: var(--kj-cichy) !important; }
body.pw-pro--kojima .px-single-body .kj-foto figcaption .kj-kredyt { color: var(--kj-cichszy) !important; }

@media (prefers-reduced-motion: reduce) {
	body.pw-pro--kojima * { animation: none !important; transition: none !important; }
}

/* =============================================================================
   POPRAWKI PO OGLEDZINACH NA ZYWO (24.08.2026, wieczor)
   -----------------------------------------------------------------------------
   Trzy usterki widoczne dopiero na docelowym ekranie, kazda z inna przyczyna.
   ============================================================================= */

/* 1. FIOLETOWA POSWIATA NA ZDJECIU.
      To nie byl filtr, tylko warstwa ::after motywu w kolorze rgb(167,139,250)
      polozona NA WIERZCHU fotografii. Konwersja na czern i biel dzialala od
      poczatku, tylko byla przykryta. Zdejmujemy warstwe zamiast walczyc z filtrem. */
body.pw-pro--kojima .px-single-hero::after,
body.pw-pro--kojima .px-single-hero::before {
	content: none !important;
	display: none !important;
	background: none !important;
	opacity: 0 !important;
}
body.pw-pro--kojima .px-single-hero {
	position: relative;
	isolation: isolate;
}

/* 2. NAGLOWEK WYSRODKOWANY.
      Motyw centruje caly blok otwarcia. Duzy material czyta sie lepiej z rowna
      krawedzia po lewej, bo oko ma gdzie wracac. Wyrownujemy konsekwentnie. */
body.pw-pro--kojima .px-single-head,
body.pw-pro--kojima .px-single-head .px-wrap-sm,
body.pw-pro--kojima .px-single-head h1,
body.pw-pro--kojima .px-single-head p,
body.pw-pro--kojima .px-single-head .px-kicker,
body.pw-pro--kojima .px-single-head .px-single-meta {
	text-align: left !important;
}
body.pw-pro--kojima .px-single-head h1,
body.pw-pro--kojima .px-single-head p {
	margin-left: 0 !important;
	margin-right: 0 !important;
}
body.pw-pro--kojima .px-single-head .px-single-meta {
	display: flex !important;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: flex-start !important;
}

/* 3. CYTAT O SZEROKOSCI ZERO.
      Ograniczenie szerokosci liczone w jednostce ch zapadalo sie przy tym kroju,
      przez co blok mial zero pikseli i tekst lamal sie po jednym slowie. Miara w
      em jest liczona wzgledem wlasnego stopnia pisma i zachowuje sie przewidywalnie.
      Do tego ukladamy plansze na osi pionowej, zeby srodkowanie nie zalezalo od
      marginesow automatycznych, ktore motyw potrafi nadpisac. */
body.pw-pro--kojima .px-single-body .kj-plansza {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center !important;
}
body.pw-pro--kojima .px-single-body .kj-plansza blockquote {
	width: 100% !important;
	max-width: 13em !important;
	margin: 0 !important;
	text-align: center !important;
	text-wrap: balance;
}
body.pw-pro--kojima .px-single-body .kj-plansza .kj-oryginal {
	max-width: 40em !important;
	margin: 26px 0 0 !important;
	text-align: center !important;
}
body.pw-pro--kojima .px-single-body .kj-plansza .kj-zrodlo {
	max-width: 48em !important;
	margin: 22px 0 0 !important;
	text-align: center !important;
}

/* 4. PRAWDZIWA PRZYCZYNA PUSTYCH CYTATOW.
      WordPress owija tresc cytatu w dodatkowy akapit przy zapisie wpisu, wiec
      w dokumencie stoi <blockquote><p>tekst</p></blockquote>. Styl 60 px siedzial
      na samym cytacie, a renderowal sie akapit w srodku, ktoremu skorka narzuca
      16 px. Stad wielka pusta plansza z malutkim napisem. Stopien pisma musi wiec
      trafic rowniez na akapit wewnetrzny. */
body.pw-pro--kojima .px-single-body .kj-plansza blockquote,
body.pw-pro--kojima .px-single-body .kj-plansza blockquote p {
	font-family: var(--kj-serif) !important;
	font-weight: 500 !important;
	font-size: clamp(30px, 4.6vw, 60px) !important;
	line-height: 1.1 !important;
	letter-spacing: -.025em !important;
	color: var(--kj-jasny) !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: center !important;
	font-style: normal !important;
}
/* Akapit, w ktory WordPress owija wersje oryginalna i przypis, nie moze dokladac
   wlasnego stopnia pisma ani odstepow. Spany w srodku maja swoje. */
body.pw-pro--kojima .px-single-body .kj-plansza > p {
	margin: 0 !important;
	font-size: inherit !important;
	line-height: inherit !important;
	text-align: center !important;
}

/* =============================================================================
   5. PRZEBUDOWA OTWARCIA NA DWIE KOLUMNY
   -----------------------------------------------------------------------------
   Co bylo zle: portret w proporcji 2:3 byl wpychany w poziomy pas 1713 na 670,
   wiec z kadru zostawala broda i kolnierzyk, a glowa wychodzila poza obraz.
   Do tego motyw podawal juz przyciety plik 1600x1080, wiec przyciecie nakladalo
   sie dwa razy. Filtr w pw_pro_artykul.php oddaje teraz pelny plik.

   Co jest teraz: tytul po lewej, portret po prawej w naturalnej proporcji, tak
   jak w otwarciach duzych materialow prasowych. Zdjecie niczego nie traci, tytul
   dostaje realna przeciwwage, a pusta prawa polowa ekranu znika.
   ============================================================================= */

@media (min-width: 1000px) {
	body.pw-pro--kojima article.px-single {
		display: grid;
		/* Kolumna ze zdjeciem ma stala, umiarkowana szerokosc, zeby portret zostal
		   portretem, a cale otwarcie miescilo sie na jednym ekranie. Przy szerokosci
		   ulamkowej na monitorze 2560 px zdjecie roslo do 1288 px wysokosci
		   i spychalo tytul pod dolna krawedz okna. */
		grid-template-columns: minmax(0, 1fr) clamp(250px, 19vw, 500px);
		align-items: end;
		column-gap: clamp(30px, 3.4vw, 64px);
		background: var(--kj-tlo);
		padding-inline: clamp(22px, 5vw, 104px);
	}
	body.pw-pro--kojima article.px-single > .px-single-head {
		grid-column: 1;
		padding-inline: 0 !important;
		padding-bottom: 8px;
	}
	body.pw-pro--kojima article.px-single > .px-single-hero {
		grid-column: 2;
		margin: 0 !important;
		padding: 0 !important;
	}
	body.pw-pro--kojima article.px-single > .px-wrap-sm {
		grid-column: 1 / -1;
	}
	body.pw-pro--kojima .px-single-head h1.px-single-title {
		max-width: none;
		font-size: clamp(40px, 4.4vw, 78px) !important;
	}
	body.pw-pro--kojima .px-single-head p { max-width: 46ch; }
	body.pw-pro--kojima .px-single-hero img {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 3 / 4;
		max-height: 78vh;
		object-fit: cover !important;
		object-position: 50% 14% !important;
	}
}

/* Na waskim ekranie plansze ida jedna pod druga, a portret nie jest juz
   letterboxem, tylko normalnym kadrem pionowym o ograniczonej wysokosci. */
@media (max-width: 999px) {
	body.pw-pro--kojima .px-single-hero img {
		height: auto !important;
		aspect-ratio: 4 / 5;
		object-position: 50% 16% !important;
	}
	body.pw-pro--kojima .px-single-hero { margin-top: 22px !important; }
}

/* 6. GRANATOWY PASEK.
      To nie byl osobny element, tylko tlo serwisu (#111726) przeswitujace przez
      odstep miedzy naglowkiem a zdjeciem. Domykamy plansze na calej wysokosci. */
body.pw-pro--kojima article.px-single,
body.pw-pro--kojima .px-single-head,
body.pw-pro--kojima .px-single-hero { background: var(--kj-tlo); }

/* 7. FIOLETOWE ELEMENTY MOTYWU W SRODKU MATERIALU.
      Licznik odslon, ramka ze skrotem i notka autorska biora kolor ze zmiennych
      serwisu. Zamiast tropic kazdy z osobna, podmieniamy same zmienne w obrebie
      tego materialu, wiec wszystko dostraja sie do monochromu. */
body.pw-pro--kojima .px-single-body,
body.pw-pro--kojima article.px-single {
	--pw-accent: var(--kj-akcent);
	--pw-warm: var(--kj-akcent);
}

/* =============================================================================
   8. ELEMENTY MOTYWU W FIOLECIE MARKI
   -----------------------------------------------------------------------------
   Licznik odslon, ramka ze skrotem, notka autorska i nawigacja biora kolor
   #8B5CF6 wprost, a nie ze zmiennej, wiec podmiana zmiennych ich nie dotknela.
   Trzeba je wskazac po nazwie. Kazdy dostaje bursztyn albo szarosc materialu,
   zeby nic nie wypadalo z monochromu.
   ============================================================================= */

body.pw-pro--kojima .pw-reads,
body.pw-pro--kojima .pw-reads-n,
body.pw-pro--kojima .px-author-bio-roles,
body.pw-pro--kojima .px-prev-next-label,
body.pw-pro--kojima .pw-nlc-kick,
body.pw-pro--kojima .pw-ws .hd {
	color: var(--kj-akcent) !important;
}
body.pw-pro--kojima .pw-reads {
	background: transparent !important;
	border: 1px solid var(--kj-kreska) !important;
	border-radius: 0 !important;
}
body.pw-pro--kojima .pw-ws {
	background: var(--kj-plyta) !important;
	border: 1px solid var(--kj-kreska) !important;
	border-left: 3px solid var(--kj-akcent) !important;
	border-radius: 0 !important;
	color: var(--kj-tekst) !important;
}
body.pw-pro--kojima .pw-ws li,
body.pw-pro--kojima .pw-ws p { color: var(--kj-tekst) !important; }
body.pw-pro--kojima .px-author-bio {
	background: var(--kj-plyta) !important;
	border: 1px solid var(--kj-kreska) !important;
}
body.pw-pro--kojima .px-author-bio-btn {
	background: transparent !important;
	border: 1px solid var(--kj-akcent) !important;
	color: var(--kj-akcent) !important;
	border-radius: 0 !important;
}

/* 9. MARTWA CZERN NAD TYTULEM.
      Tytul jest wyrownany do dolu razem ze zdjeciem, co jest zamierzone, ale przy
      wysokim portrecie zostawalo nad nim kilkaset pikseli pustki. Wezsza kolumna
      ze zdjeciem plus gorne wciecie w kolumnie tytulowej zamykaja te dziure. */
@media (min-width: 1000px) {
	body.pw-pro--kojima article.px-single > .px-single-head {
		padding-top: clamp(24px, 3vw, 48px) !important;
	}
	body.pw-pro--kojima .px-single-hero img { max-height: 66vh; }
}

/* =============================================================================
   10. KOMPOZYCJA OTWARCIA
   -----------------------------------------------------------------------------
   Dwa problemy zostaly po przejsciu na dwie kolumny. Tytul na monitorze 2560 px
   mial do dyspozycji 1786 px, wiec miescil sie w jednej linii i czytal sie jak
   pasek, a nie jak tytul materialu. Nad nim zostawalo okolo 250 px czystej czerni,
   bo kolumna z tekstem jest nizsza od zdjecia.

   Rozwiazanie jest jedno i zalatwia oba: kolumna tekstowa rozklada sie na calej
   wysokosci, nazwa dzialu ida na samą gore, a tytul, lid i podpis siadaja przy
   dolnej krawedzi, rowno ze stopka zdjecia. Pustka przestaje byc dziura i staje
   sie oddechem miedzy dwoma punktami zaczepienia.
   ============================================================================= */

@media (min-width: 1000px) {
	body.pw-pro--kojima article.px-single > .px-single-head {
		display: flex;
		align-self: stretch;
	}
	body.pw-pro--kojima article.px-single > .px-single-head > .px-wrap-sm {
		display: flex !important;
		flex-direction: column;
		justify-content: space-between;
		flex: 1;
		min-height: 100%;
	}
	body.pw-pro--kojima .px-single-head .px-kicker {
		display: block;
		margin-bottom: auto;
	}
	/* Tytul lamie sie na dwie linie zamiast rozciagac na cala szerokosc kolumny. */
	body.pw-pro--kojima .px-single-head h1.px-single-title {
		max-width: 19ch;
		margin-top: 0 !important;
	}
}