/*!
Theme Name: technowinka
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: technowinka
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

technowinka is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Design Tokens (zmienne CSS — źródło prawdy dla UI)
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Design Tokens
--------------------------------------------------------------*/

:root {
	/* ---- COLORS · LIGHT (default) ---- */
	--tw-bg: #F5F4EF;
	--tw-bg-elev: #FFFFFF;
	--tw-bg-band: #0A0A0A;
	--tw-bg-band-text: #F5F4EF;
	--tw-fg: #0A0A0A;
	--tw-fg-muted: #6B6B66;
	--tw-fg-faint: #9C9C95;
	--tw-rule: #1A1A1A;
	--tw-rule-faint: rgba(10, 10, 10, 0.12);
	--tw-hover: rgba(10, 10, 10, 0.04);

	/* ---- ACCENT (default: orange — nadpisywany z Customizera) ---- */
	--tw-accent: #FF7A00;
	--tw-accent-on: #FFFFFF;

	/* Predefiniowane warianty akcentów (do wyboru / referencji) */
	--tw-accent-orange: #FF7A00;
	--tw-accent-red: #E63946;
	--tw-accent-blue: #0066FF;
	--tw-accent-green: #C2F542;
	--tw-accent-mono: #0A0A0A;

	/* ---- TYPOGRAPHY ---- */
	--tw-font-display: "Space Grotesk", system-ui, -apple-system, sans-serif;
	--tw-font-body: "Space Grotesk", system-ui, -apple-system, sans-serif;
	--tw-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
	--tw-font-serif: "Source Serif 4", Georgia, serif;

	--tw-fs-h1: clamp(32px, 4.5vw, 56px);
	--tw-fs-h1-lead: clamp(28px, 3.5vw, 52px);
	--tw-fs-h2: clamp(22px, 2.4vw, 30px);
	--tw-fs-h3: 18px;
	--tw-fs-dek: clamp(18px, 1.6vw, 22px);
	--tw-fs-body: 19px;
	--tw-fs-body-sm: 17px;
	--tw-fs-meta: 11px;
	--tw-fs-eyebrow: 11px;
	--tw-fs-nav: 12px;

	--tw-lh-tight: 1.05;
	--tw-lh-snug: 1.2;
	--tw-lh-body: 1.5;
	--tw-lh-reading: 1.65;

	--tw-ls-tight: -0.025em;
	--tw-ls-snug: -0.02em;
	--tw-ls-normal: 0;
	--tw-ls-wide: 0.05em;
	--tw-ls-wider: 0.1em;
	--tw-ls-widest: 0.15em;

	/* ---- SPACING ---- */
	--tw-gut: 24px;
	--tw-gut-dense: 16px;
	--tw-pad-x: clamp(16px, 4vw, 64px);
	--tw-max-w: 1440px;
	--tw-reading-w: 720px;

	/* ---- BORDER ---- */
	--tw-border-w: 1px;
	--tw-border-w-strong: 2px;
	--tw-border-w-accent: 3px;
	--tw-radius: 0;

	/* ---- LOGO (nadpisywane z Customizera) ---- */
	--tw-logo-w: 160px;

	/* ---- ANIMATIONS ---- */
	--tw-easing: ease-out;
	--tw-dur-fast: 0.15s;
	--tw-dur: 0.2s;
	--tw-dur-slow: 0.25s;

	/* ---- Z-INDEX ---- */
	--tw-z-header: 50;
	--tw-z-cat-bar: 40;
	--tw-z-share: 30;
	--tw-z-drawer: 100;
}

/* ---- COLORS · DARK ---- */
:root[data-theme="dark"],
:root.dark {
	--tw-bg: #0B0B0B;
	--tw-bg-elev: #141413;
	--tw-bg-band: #F1EFE8;
	--tw-bg-band-text: #0A0A0A;
	--tw-fg: #F1EFE8;
	--tw-fg-muted: #A0A097;
	--tw-fg-faint: #5C5C55;
	--tw-rule: #F1EFE8;
	--tw-rule-faint: rgba(241, 239, 232, 0.14);
	--tw-hover: rgba(241, 239, 232, 0.06);
}

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

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

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links — kolory ustawiane per kontekst przez design tokens (--tw-fg / --tw-accent).
   Bazowy reset jest w sekcji "Technowinka — Base resets na tokenach". */

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

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

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/*--------------------------------------------------------------
# Technowinka — Base resets na tokenach
--------------------------------------------------------------*/

html, body {
	background: var(--tw-bg);
	color: var(--tw-fg);
}

body {
	font-family: var(--tw-font-body);
	font-size: 16px;
	line-height: var(--tw-lh-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

button {
	background: none;
	border: none;
	cursor: pointer;
	color: inherit;
	font: inherit;
	padding: 0;
}

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

/* Skip link — readable focus */
.skip-link.screen-reader-text:focus {
	background: var(--tw-fg);
	color: var(--tw-bg);
	padding: 12px 16px;
	font: 600 12px/1 var(--tw-font-mono);
	letter-spacing: var(--tw-ls-wider);
	text-transform: uppercase;
	z-index: 200;
}

/* Logo light/dark switching — domyślnie light, w dark mode invert. */
.logo-img-dark { display: none; }
:root[data-theme="dark"] .logo-img-light { display: none; }
:root[data-theme="dark"] .logo-img-dark { display: block; }

/*--------------------------------------------------------------
# Date Strip
--------------------------------------------------------------*/

.date-strip {
	background: var(--tw-bg-band);
	color: var(--tw-bg-band-text);
	font-family: var(--tw-font-mono);
	font-size: var(--tw-fs-meta);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.strip-inner {
	max-width: var(--tw-max-w);
	margin: 0 auto;
	padding: 8px var(--tw-pad-x);
	display: flex;
	align-items: center;
	height: 32px;
}

.ticker {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	flex: 1;
}

.ticker-label {
	background: var(--tw-accent);
	color: var(--tw-accent-on);
	padding: 3px 8px;
	font-weight: 700;
	letter-spacing: var(--tw-ls-wider);
	flex-shrink: 0;
	position: relative;
	z-index: 1;
}

.ticker-viewport {
	flex: 1;
	min-width: 0;
	overflow: hidden;
}

.ticker-track {
	display: inline-flex;
	gap: 32px;
	animation: tw-ticker 60s linear infinite;
	white-space: nowrap;
	will-change: transform;
}

.ticker-viewport:hover .ticker-track,
.ticker-viewport:focus-within .ticker-track {
	animation-play-state: paused;
}

.ticker-item {
	opacity: 0.85;
	transition: opacity var(--tw-dur-fast) var(--tw-easing);
}
.ticker-item:hover { opacity: 1; color: var(--tw-accent); }
.ticker-item::before {
	content: "▮ ";
	color: var(--tw-accent);
	margin-right: 6px;
}

@keyframes tw-ticker {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.ticker-track { animation: none; }
}

/*--------------------------------------------------------------
# Site Header (sticky)
--------------------------------------------------------------*/

.site-header {
	background: var(--tw-bg);
	border-bottom: var(--tw-border-w) solid var(--tw-rule);
	position: sticky;
	top: 0;
	z-index: var(--tw-z-header);
	transition: box-shadow var(--tw-dur) var(--tw-easing);
}

.site-header.is-scrolled {
	box-shadow: 0 1px 0 var(--tw-rule-faint), 0 8px 20px rgba(0, 0, 0, 0.04);
}

.header-inner {
	max-width: var(--tw-max-w);
	margin: 0 auto;
	padding: 18px var(--tw-pad-x);
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 32px;
}

.hamburger {
	display: none;
	width: 36px;
	height: 36px;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	padding: 0 6px;
}
.hamburger span {
	display: block;
	height: 2px;
	background: var(--tw-fg);
	width: 100%;
}

.logo-link { display: block; line-height: 0; }
.logo-img,
.custom-logo {
	height: 32px;
	width: auto;
	max-width: var(--tw-logo-w);
	object-fit: contain;
}

/* wp_nav_menu wrapuje w <ul class="primary-nav-list"> */
.primary-nav-list {
	display: flex;
	gap: 28px;
	justify-content: center;
	font-family: var(--tw-font-mono);
	font-size: var(--tw-fs-nav);
	letter-spacing: var(--tw-ls-wider);
	text-transform: uppercase;
	font-weight: 500;
	list-style: none;
	margin: 0;
	padding: 0;
}
.primary-nav-list li { position: relative; }
.primary-nav-list a {
	display: inline-flex;
	align-items: center;
	padding: 6px 0;
	transition: color var(--tw-dur-fast) var(--tw-easing);
	position: relative;
}
.primary-nav-list a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -19px;
	height: 2px;
	background: var(--tw-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--tw-dur) var(--tw-easing);
}
.primary-nav-list a:hover,
.primary-nav-list a:focus-visible,
.primary-nav-list .current-menu-item > a {
	color: var(--tw-accent);
}
.primary-nav-list a:hover::after,
.primary-nav-list a:focus-visible::after,
.primary-nav-list .current-menu-item > a::after {
	transform: scaleX(1);
}

.header-right {
	display: flex;
	gap: 12px;
	align-items: center;
}

.icon-btn {
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: var(--tw-border-w) solid var(--tw-rule);
	background: transparent;
	color: var(--tw-fg);
	transition: background var(--tw-dur-fast) var(--tw-easing), color var(--tw-dur-fast) var(--tw-easing);
}
.icon-btn:hover,
.icon-btn:focus-visible {
	background: var(--tw-fg);
	color: var(--tw-bg);
}

/* Theme toggle: pokazuje tylko jedną ikonę zależnie od trybu */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

.header-socials {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0 0 0 4px;
	border-left: 1px solid var(--tw-rule-faint);
}
.header-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--tw-fg-muted);
	text-decoration: none;
	transition: color var(--tw-dur-fast) var(--tw-easing);
}
.header-social-link:hover,
.header-social-link:focus-visible {
	color: var(--tw-accent);
}
.header-social-link svg {
	width: 16px;
	height: 16px;
}

/*--------------------------------------------------------------
# Reading progress (tylko single)
--------------------------------------------------------------*/

.reading-progress {
	position: absolute;
	bottom: -1px;
	left: 0;
	height: 2px;
	width: 0;
	background: var(--tw-accent);
	transition: width 0.1s linear;
	pointer-events: none;
}

/*--------------------------------------------------------------
# Mobile cat bar
--------------------------------------------------------------*/

.cat-bar { display: none; }

/*--------------------------------------------------------------
# Mobile drawer
--------------------------------------------------------------*/

.drawer {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: var(--tw-z-drawer);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--tw-dur) var(--tw-easing);
}
.drawer[hidden] { display: none; }
.drawer.is-open {
	opacity: 1;
	pointer-events: auto;
}

.drawer-panel {
	position: absolute;
	inset: 0 20% 0 0;
	background: var(--tw-bg);
	color: var(--tw-fg);
	display: flex;
	flex-direction: column;
	transform: translateX(-100%);
	transition: transform var(--tw-dur-slow) var(--tw-easing);
	max-width: 380px;
}
.drawer.is-open .drawer-panel { transform: translateX(0); }

.drawer-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 24px;
	border-bottom: var(--tw-border-w) solid var(--tw-rule);
}
.drawer-logo-link { line-height: 0; }
.drawer-logo {
	height: 24px;
	width: auto;
	max-width: 200px;
	object-fit: contain;
}
.drawer-close {
	font-size: 32px;
	width: 36px; height: 36px;
	display: flex; align-items: center; justify-content: center;
	line-height: 1;
	color: var(--tw-fg);
}
.drawer-close:hover { color: var(--tw-accent); }

.drawer-nav {
	display: flex;
	flex-direction: column;
	padding: 12px 0;
	flex: 1;
	overflow-y: auto;
}
.drawer-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.drawer-nav-list a,
.drawer-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 24px;
	font-family: var(--tw-font-display);
	font-size: 22px;
	font-weight: 600;
	letter-spacing: var(--tw-ls-snug);
	border-bottom: var(--tw-border-w) solid var(--tw-rule-faint);
	color: var(--tw-fg);
	transition: background var(--tw-dur-fast) var(--tw-easing), color var(--tw-dur-fast) var(--tw-easing);
}
.drawer-nav-list a:hover,
.drawer-link:hover,
.drawer-nav-list a:focus-visible,
.drawer-link:focus-visible {
	background: var(--tw-hover);
	color: var(--tw-accent);
}
.drawer-arrow { color: var(--tw-fg-faint); }
.drawer-nav-list a:hover .drawer-arrow,
.drawer-link:hover .drawer-arrow { color: var(--tw-accent); }

.drawer-foot { padding: 24px; border-top: var(--tw-border-w) solid var(--tw-rule); }

.drawer-theme {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 14px 16px;
	margin-bottom: 16px;
	border: var(--tw-border-w) solid var(--tw-rule);
	font-family: var(--tw-font-mono);
	font-size: var(--tw-fs-meta);
	letter-spacing: var(--tw-ls-widest);
	text-transform: uppercase;
	font-weight: 600;
	color: var(--tw-fg);
}

.drawer-theme-switch {
	display: inline-block;
	width: 36px;
	height: 20px;
	background: var(--tw-rule-faint);
	position: relative;
	border: var(--tw-border-w) solid var(--tw-rule);
}
.drawer-theme-knob {
	position: absolute;
	top: 1px;
	left: 1px;
	width: 16px;
	height: 16px;
	background: var(--tw-fg);
	transition: transform var(--tw-dur) var(--tw-easing), background var(--tw-dur) var(--tw-easing);
}
:root[data-theme="dark"] .drawer-theme-knob {
	transform: translateX(16px);
	background: var(--tw-accent);
}

.drawer-cta {
	display: block;
	text-align: center;
	background: var(--tw-fg);
	color: var(--tw-bg);
	padding: 14px;
	font-family: var(--tw-font-mono);
	font-size: var(--tw-fs-meta);
	letter-spacing: var(--tw-ls-widest);
	text-transform: uppercase;
	font-weight: 600;
	margin-bottom: 16px;
	transition: background var(--tw-dur-fast) var(--tw-easing), color var(--tw-dur-fast) var(--tw-easing);
}
.drawer-cta:hover,
.drawer-cta:focus-visible {
	background: var(--tw-accent);
	color: var(--tw-accent-on);
}

.drawer-meta {
	display: flex;
	gap: 18px;
	font-family: var(--tw-font-mono);
	font-size: var(--tw-fs-meta);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tw-fg-muted);
}
.drawer-meta a:hover { color: var(--tw-accent); }

/* Body scroll lock przy otwartym drawerze */
body.drawer-open-lock { overflow: hidden; }

/*--------------------------------------------------------------
# Main / kontener
--------------------------------------------------------------*/

.site-main.main {
	max-width: var(--tw-max-w);
	margin: 0 auto;
	padding: 40px var(--tw-pad-x) 80px;
}

/*--------------------------------------------------------------
# Eyebrow (kategoria + opcjonalny kicker)
--------------------------------------------------------------*/

.eyebrow {
	font-family: var(--tw-font-mono);
	font-size: var(--tw-fs-eyebrow);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tw-accent);
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}
.eyebrow-cat { font-weight: 700; color: inherit; }
.eyebrow-cat:hover { text-decoration: underline; text-underline-offset: 3px; }
.eyebrow-dot {
	display: inline-block;
	width: 4px;
	height: 4px;
	background: currentColor;
	flex-shrink: 0;
}
.eyebrow-kicker { color: var(--tw-fg-muted); font-weight: 500; }

/*--------------------------------------------------------------
# Meta (autor · data · czas)
--------------------------------------------------------------*/

.meta {
	font-family: var(--tw-font-mono);
	font-size: var(--tw-fs-meta);
	letter-spacing: var(--tw-ls-wide);
	color: var(--tw-fg-muted);
	margin-top: 12px;
	text-transform: uppercase;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 6px;
}
.meta-sep { opacity: 0.5; }

/*--------------------------------------------------------------
# Placeholder (gdy brak miniatury)
--------------------------------------------------------------*/

.placeholder {
	position: relative;
	width: 100%;
	background: var(--tw-bg-elev);
	border: var(--tw-border-w) solid var(--tw-rule-faint);
	color: var(--tw-fg);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin: 0;
}
.placeholder svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.placeholder-label {
	position: relative;
	font-family: var(--tw-font-mono);
	font-size: 10px;
	letter-spacing: var(--tw-ls-widest);
	color: var(--tw-fg-muted);
	background: var(--tw-bg-elev);
	padding: 4px 10px;
	border: var(--tw-border-w) solid var(--tw-rule-faint);
	text-transform: uppercase;
}
.placeholder-has-image {
	background: var(--tw-bg-elev);
}
.placeholder-has-image .card-thumb,
.placeholder-has-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/*--------------------------------------------------------------
# Hero — Wariant A (Grid)
--------------------------------------------------------------*/

.hero {
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.hero-top {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: var(--tw-gut);
	border-bottom: var(--tw-border-w) solid var(--tw-rule);
	padding-bottom: 48px;
}

.hero-side {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.hero-bottom {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--tw-gut);
}

/*--------------------------------------------------------------
# Card — Lead
--------------------------------------------------------------*/

.lead-card {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.lead-link {
	display: block;
	overflow: hidden;
}
.lead-link .placeholder { transition: transform var(--tw-dur-slow) var(--tw-easing); }
.lead-link:hover .placeholder { transform: scale(1.015); }

.lead-body { display: flex; flex-direction: column; }

.lead-title {
	font-family: var(--tw-font-display);
	font-size: var(--tw-fs-h1-lead);
	font-weight: 700;
	line-height: var(--tw-lh-tight);
	letter-spacing: var(--tw-ls-snug);
	text-wrap: balance;
	margin: 0 0 16px;
}
.lead-title a {
	color: var(--tw-fg);
	transition: color var(--tw-dur-fast) var(--tw-easing);
}
.lead-card:hover .lead-title a,
.lead-title a:focus-visible { color: var(--tw-accent); }

.lead-excerpt {
	font-size: var(--tw-fs-body-sm);
	line-height: 1.45;
	color: var(--tw-fg-muted);
	text-wrap: pretty;
	max-width: 60ch;
	margin: 0;
}

/*--------------------------------------------------------------
# Card — Medium
--------------------------------------------------------------*/

.med-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.med-link { display: block; overflow: hidden; }
.med-link .placeholder { transition: transform var(--tw-dur-slow) var(--tw-easing); }
.med-link:hover .placeholder { transform: scale(1.015); }
.med-card .placeholder { margin-bottom: 4px; }

.med-title {
	font-family: var(--tw-font-display);
	font-size: clamp(18px, 1.6vw, 22px);
	font-weight: 600;
	line-height: var(--tw-lh-snug);
	letter-spacing: var(--tw-ls-snug);
	text-wrap: balance;
	margin: 0;
}
.med-title a { color: var(--tw-fg); transition: color var(--tw-dur-fast) var(--tw-easing); }
.med-card:hover .med-title a,
.med-title a:focus-visible { color: var(--tw-accent); }

/*--------------------------------------------------------------
# Card — List (numerowana lista pod hero)
--------------------------------------------------------------*/

.list-card {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 16px;
	padding-top: 24px;
	border-top: var(--tw-border-w) solid var(--tw-rule-faint);
}
.list-card.no-num { grid-template-columns: 1fr; }

.list-num {
	font-family: var(--tw-font-mono);
	font-size: 32px;
	font-weight: 300;
	color: var(--tw-fg-faint);
	line-height: 1;
}

.list-body { display: flex; flex-direction: column; }

.list-title {
	font-family: var(--tw-font-display);
	font-size: var(--tw-fs-h3);
	font-weight: 600;
	line-height: var(--tw-lh-snug);
	letter-spacing: var(--tw-ls-snug);
	text-wrap: balance;
	margin: 0;
}
.list-title a { color: var(--tw-fg); transition: color var(--tw-dur-fast) var(--tw-easing); }
.list-card:hover .list-title a,
.list-title a:focus-visible { color: var(--tw-accent); }

/*--------------------------------------------------------------
# Category Roundup — sekcja 2 strony głównej
--------------------------------------------------------------*/

.cat-roundup {
	display: flex;
	flex-direction: column;
	gap: 56px;
	margin-top: 64px;
	padding-top: 56px;
	border-top: var(--tw-border-w) solid var(--tw-rule);
}

.cat-row {
	display: grid;
	gap: var(--tw-gut);
}
.cat-row-2 { grid-template-columns: repeat(2, 1fr); }
.cat-row-3 { grid-template-columns: repeat(3, 1fr); }
.cat-row-4 { grid-template-columns: repeat(4, 1fr); }

.cat-block {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.cat-block-head .eyebrow {
	margin-bottom: 0;
}

.cat-lead-link {
	display: block;
	overflow: hidden;
}
.cat-lead-link .placeholder { transition: transform var(--tw-dur-slow) var(--tw-easing); }
.cat-lead-link:hover .placeholder { transform: scale(1.015); }

.cat-lead-title {
	font-family: var(--tw-font-display);
	font-size: clamp(17px, 1.4vw, 20px);
	font-weight: 600;
	line-height: var(--tw-lh-snug);
	letter-spacing: var(--tw-ls-snug);
	text-wrap: balance;
	margin: 0;
}
.cat-lead-title a {
	color: var(--tw-fg);
	transition: color var(--tw-dur-fast) var(--tw-easing);
}
.cat-lead-title a:hover,
.cat-lead-title a:focus-visible { color: var(--tw-accent); }

.cat-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.cat-list-item {
	border-top: var(--tw-border-w) solid var(--tw-rule-faint);
	padding-top: 14px;
	margin-top: 14px;
}
.cat-list-link {
	font-family: var(--tw-font-display);
	font-size: 16px;
	font-weight: 600;
	line-height: var(--tw-lh-snug);
	letter-spacing: var(--tw-ls-snug);
	color: var(--tw-fg);
	display: block;
	transition: color var(--tw-dur-fast) var(--tw-easing);
	text-wrap: balance;
}
.cat-list-link:hover,
.cat-list-link:focus-visible { color: var(--tw-accent); }

.cat-more-link {
	margin-top: 6px;
	font-family: var(--tw-font-mono);
	font-size: var(--tw-fs-meta);
	letter-spacing: var(--tw-ls-wider);
	text-transform: uppercase;
	font-weight: 600;
	color: var(--tw-fg-muted);
	border-top: var(--tw-border-w-strong) solid var(--tw-fg);
	padding-top: 12px;
	transition: color var(--tw-dur-fast) var(--tw-easing);
}
.cat-more-link:hover,
.cat-more-link:focus-visible { color: var(--tw-accent); }

/*--------------------------------------------------------------
# Section header (label + link "wszystkie")
--------------------------------------------------------------*/

.section-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	border-bottom: var(--tw-border-w-strong) solid var(--tw-fg);
	padding-bottom: 10px;
	margin-bottom: 8px;
}
.section-label {
	font-family: var(--tw-font-mono);
	font-size: var(--tw-fs-eyebrow);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--tw-fg);
}
.section-link {
	font-family: var(--tw-font-mono);
	font-size: var(--tw-fs-meta);
	letter-spacing: var(--tw-ls-wide);
	text-transform: uppercase;
	font-weight: 500;
	color: var(--tw-fg-muted);
	transition: color var(--tw-dur-fast) var(--tw-easing);
}
.section-link:hover,
.section-link:focus-visible { color: var(--tw-accent); }

/*--------------------------------------------------------------
# Popular — sekcja "Popularne"
--------------------------------------------------------------*/

.popular-section {
	margin-top: 64px;
	padding-top: 56px;
	border-top: var(--tw-border-w) solid var(--tw-rule);
}

.popular-list {
	display: flex;
	flex-direction: column;
}

/* Reuse karty list-card, ale w pełnej szerokości robimy ją większą i bardziej czytelną. */
.popular-list .list-card {
	grid-template-columns: 80px 1fr;
	gap: 28px;
	padding-top: 28px;
	padding-bottom: 4px;
	align-items: start;
}
.popular-list .list-card:first-child { padding-top: 18px; }
.popular-list .list-num {
	font-size: 56px;
	line-height: 0.95;
	color: var(--tw-fg-faint);
}
.popular-list .list-title {
	font-size: clamp(20px, 2vw, 26px);
	line-height: var(--tw-lh-snug);
	letter-spacing: var(--tw-ls-snug);
}

/*--------------------------------------------------------------
# Newsletter inline
--------------------------------------------------------------*/

.newsletter-inline {
	position: relative;
	overflow: hidden;
	background: #0A0A0A;
	color: #F5F4EF;
	margin-top: 64px;
	padding: 64px var(--tw-pad-x);
	/* Wyrównanie do krawędzi viewportu mimo że main ma padding. */
	margin-left: calc(var(--tw-pad-x) * -1);
	margin-right: calc(var(--tw-pad-x) * -1);
}

.nl-accent {
	position: absolute;
	top: 0;
	right: 0;
	width: 220px;
	height: 100%;
	background: var(--tw-accent);
	clip-path: polygon(40% 0, 100% 0, 100% 100%, 0% 100%);
	pointer-events: none;
}

.nl-inner {
	position: relative;
	max-width: 720px;
	z-index: 1;
}

.nl-eyebrow {
	font-family: var(--tw-font-mono);
	font-size: var(--tw-fs-eyebrow);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--tw-accent);
	margin-bottom: 16px;
}

.nl-title {
	font-family: var(--tw-font-display);
	font-size: clamp(28px, 3.5vw, 44px);
	font-weight: 700;
	line-height: var(--tw-lh-tight);
	letter-spacing: var(--tw-ls-snug);
	text-wrap: balance;
	margin: 0 0 16px;
	color: inherit;
}

.nl-lead {
	font-size: var(--tw-fs-body-sm);
	line-height: var(--tw-lh-body);
	color: rgba(245, 244, 239, 0.75);
	max-width: 56ch;
	margin: 0 0 28px;
}

.nl-form {
	display: flex;
	gap: 0;
	max-width: 520px;
	border: var(--tw-border-w) solid #F5F4EF;
}

.nl-field { flex: 1; display: block; }
.nl-field input[type="email"] {
	width: 100%;
	height: 100%;
	padding: 16px 18px;
	background: transparent;
	border: 0;
	color: #F5F4EF;
	font-family: var(--tw-font-mono);
	font-size: 14px;
	letter-spacing: var(--tw-ls-wide);
	outline: none;
}
.nl-field input::placeholder {
	color: rgba(245, 244, 239, 0.5);
	text-transform: lowercase;
}
.nl-field input:focus-visible {
	background: rgba(245, 244, 239, 0.06);
}

.nl-submit {
	flex-shrink: 0;
	padding: 16px 22px;
	background: #F5F4EF;
	color: #0A0A0A;
	font-family: var(--tw-font-mono);
	font-size: var(--tw-fs-meta);
	letter-spacing: var(--tw-ls-wider);
	text-transform: uppercase;
	font-weight: 700;
	border: 0;
	cursor: pointer;
	transition: background var(--tw-dur-fast) var(--tw-easing), color var(--tw-dur-fast) var(--tw-easing);
	white-space: nowrap;
}
.nl-submit:hover,
.nl-submit:focus-visible {
	background: var(--tw-accent);
	color: var(--tw-accent-on);
}

/* Honeypot — niewidoczny dla ludzi, dostępny dla botów */
.nl-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.nl-message {
	margin-top: 18px;
	padding: 12px 16px;
	font-family: var(--tw-font-mono);
	font-size: 12px;
	letter-spacing: var(--tw-ls-wide);
	border: var(--tw-border-w) solid currentColor;
	max-width: 520px;
}
.nl-message-success { color: var(--tw-accent); }
.nl-message-info    { color: rgba(245, 244, 239, 0.85); }
.nl-message-error   { color: #FF6B6B; }

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/

.site-footer {
	background: #0A0A0A;
	color: #F5F4EF;
	margin-top: 80px;
	padding: 64px var(--tw-pad-x) 0;
}

.site-footer a { color: inherit; transition: color var(--tw-dur-fast) var(--tw-easing); }
.site-footer a:hover,
.site-footer a:focus-visible { color: var(--tw-accent); }

.footer-top {
	max-width: var(--tw-max-w);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(220px, 1fr) 2fr;
	gap: 64px;
	padding-bottom: 48px;
	border-bottom: var(--tw-border-w) solid rgba(245, 244, 239, 0.12);
}

.footer-brand { display: flex; flex-direction: column; gap: 16px; }
.footer-logo-link { display: inline-block; line-height: 0; }
.footer-logo {
	height: auto;
	max-width: var(--tw-logo-w);
	width: auto;
	filter: invert(0); /* logo-white.png — już jasne */
}
.footer-tagline {
	font-size: 14px;
	line-height: 1.5;
	color: rgba(245, 244, 239, 0.6);
	max-width: 32ch;
	margin: 0;
}

.footer-cols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}
.footer-col { display: flex; flex-direction: column; gap: 16px; }
.footer-col-title {
	font-family: var(--tw-font-mono);
	font-size: var(--tw-fs-eyebrow);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--tw-accent);
	margin: 0;
	padding-bottom: 12px;
	border-bottom: var(--tw-border-w-strong) solid rgba(245, 244, 239, 0.2);
}
.footer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.footer-menu a {
	font-family: var(--tw-font-display);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	color: rgba(245, 244, 239, 0.9);
}

/*--- Social row ---*/

.footer-social {
	max-width: var(--tw-max-w);
	margin: 0 auto;
	padding: 28px 0;
	border-bottom: var(--tw-border-w) solid rgba(245, 244, 239, 0.12);
	display: flex;
	align-items: center;
	gap: 20px;
}
.footer-social-label {
	font-family: var(--tw-font-mono);
	font-size: var(--tw-fs-meta);
	letter-spacing: var(--tw-ls-wider);
	text-transform: uppercase;
	font-weight: 600;
	color: rgba(245, 244, 239, 0.7);
}
.footer-social-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 8px;
}
.footer-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: var(--tw-border-w) solid rgba(245, 244, 239, 0.25);
	color: #F5F4EF;
	transition: background var(--tw-dur-fast) var(--tw-easing), color var(--tw-dur-fast) var(--tw-easing), border-color var(--tw-dur-fast) var(--tw-easing);
}
.footer-social-link:hover,
.footer-social-link:focus-visible {
	background: var(--tw-accent);
	color: var(--tw-accent-on);
	border-color: var(--tw-accent);
}

/*--- Bottom strip ---*/

.footer-bottom {
	max-width: var(--tw-max-w);
	margin: 0 auto;
	padding: 22px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	font-family: var(--tw-font-mono);
	font-size: var(--tw-fs-meta);
	letter-spacing: var(--tw-ls-wide);
	text-transform: uppercase;
	color: rgba(245, 244, 239, 0.5);
}
.footer-copy { margin: 0; }
.footer-back-top { font-weight: 600; }

/* Floating back-to-top button */
.back-to-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--tw-fg);
	color: var(--tw-bg);
	border: 0;
	cursor: pointer;
	z-index: var(--tw-z-share);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity var(--tw-dur) var(--tw-easing), transform var(--tw-dur) var(--tw-easing), background var(--tw-dur-fast) var(--tw-easing), color var(--tw-dur-fast) var(--tw-easing);
}
.back-to-top[hidden] {
	display: none;
}
.back-to-top.is-visible {
	opacity: 1;
	transform: translateY(0);
}
.back-to-top:hover {
	background: var(--tw-accent);
	color: var(--tw-accent-on);
}
.back-to-top:focus-visible {
	outline: 2px solid var(--tw-accent);
	outline-offset: 2px;
}

@media (max-width: 720px) {
	.back-to-top {
		right: 16px;
		bottom: 16px;
		width: 44px;
		height: 44px;
	}
}

/*--------------------------------------------------------------
# Responsive — tablet/mobile
--------------------------------------------------------------*/

@media (max-width: 1024px) {
	.primary-nav-list { gap: 18px; }

	.hero-top { grid-template-columns: 1fr; gap: 40px; }
	.hero-side { flex-direction: row; gap: 24px; }
	.hero-side > * { flex: 1; }

	.cat-row-3,
	.cat-row-4 { grid-template-columns: repeat(2, 1fr); }
	.cat-row-2 { grid-template-columns: repeat(2, 1fr); }

	.footer-top { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 720px) {
	.strip-inner { padding: 8px 16px; }
	/* Skracamy gap żeby label "Nowości" + ticker zmieściły się na wąskich ekranach */
	.ticker { gap: 8px; }
	.ticker-label { padding: 3px 6px; font-size: 10px; }

	.header-inner {
		grid-template-columns: auto 1fr auto;
		gap: 16px;
		padding: 14px 16px;
	}
	.hamburger { display: flex; }
	.primary-nav { display: none; }
	.header-right .header-socials { display: none; }
	.logo-img,
	.custom-logo { height: 24px; }

	.cat-bar {
		display: block;
		background: var(--tw-bg);
		border-bottom: var(--tw-border-w) solid var(--tw-rule-faint);
		position: sticky;
		top: 65px;
		z-index: var(--tw-z-cat-bar);
	}
	.cat-bar-inner {
		display: flex;
		gap: 0;
		overflow-x: auto;
		scrollbar-width: none;
		padding: 0 16px;
	}
	.cat-bar-inner::-webkit-scrollbar { display: none; }
	.cat-chip {
		flex-shrink: 0;
		padding: 14px 16px;
		font-family: var(--tw-font-mono);
		font-size: var(--tw-fs-meta);
		letter-spacing: 0.08em;
		text-transform: uppercase;
		font-weight: 500;
		color: var(--tw-fg-muted);
		border-bottom: 2px solid transparent;
		white-space: nowrap;
	}
	.cat-chip-active {
		color: var(--tw-fg);
		border-bottom-color: var(--tw-accent);
	}

	/* Hero — linearyzacja na mobile */
	.site-main.main { padding: 24px 16px 64px; }
	.hero { gap: 32px; }
	.hero-top { padding-bottom: 32px; gap: 32px; }
	.hero-side { flex-direction: column; gap: 24px; }
	.hero-bottom { grid-template-columns: 1fr; gap: 0; }

	.lead-title { font-size: clamp(26px, 7vw, 36px); }
	.med-title { font-size: 20px; }
	.lead-excerpt { font-size: 15px; }

	.cat-roundup { gap: 40px; margin-top: 40px; padding-top: 40px; }
	.cat-row-2,
	.cat-row-3,
	.cat-row-4 { grid-template-columns: 1fr; gap: 32px; }

	.popular-section { margin-top: 40px; padding-top: 40px; }
	.popular-list .list-card {
		grid-template-columns: 56px 1fr;
		gap: 16px;
		padding-top: 22px;
	}
	.popular-list .list-num { font-size: 36px; }
	.popular-list .list-title { font-size: 18px; }

	.newsletter-inline {
		margin-top: 40px;
		padding: 40px 16px;
		margin-left: -16px;
		margin-right: -16px;
	}
	.nl-accent { width: 90px; }
	.nl-form { flex-direction: column; }
	.nl-submit { padding: 14px 18px; }

	.site-footer { margin-top: 56px; padding: 40px 16px 0; }
	.footer-top { gap: 32px; padding-bottom: 32px; }
	.footer-cols { grid-template-columns: 1fr; gap: 28px; }
	.footer-social { flex-direction: column; align-items: flex-start; padding: 22px 0; gap: 12px; }
	.footer-bottom { flex-direction: column; align-items: flex-start; padding: 18px 0; gap: 8px; }
}

/*--------------------------------------------------------------
# Article (single.php) — Faza 4
--------------------------------------------------------------*/

.article-page {
	min-height: 100vh;
}

.article-main {
	max-width: var(--tw-max-w);
	margin: 0 auto;
	padding: 32px var(--tw-pad-x) 80px;
}

.article-wrap {
	max-width: calc(var(--tw-reading-w) + 200px);
	margin: 0 auto;
}

/* ----- Breadcrumb ----- */
.breadcrumb {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
	font-family: var(--tw-font-mono);
	font-size: var(--tw-fs-meta);
	text-transform: uppercase;
	letter-spacing: var(--tw-ls-wide);
	color: var(--tw-fg-muted);
	margin-bottom: 32px;
}
.breadcrumb a {
	color: var(--tw-fg-muted);
	text-decoration: none;
	transition: color var(--tw-dur-fast) var(--tw-easing);
}
.breadcrumb a:hover {
	color: var(--tw-accent);
}
.breadcrumb span[aria-hidden] {
	opacity: 0.5;
}
.breadcrumb-current {
	color: var(--tw-fg);
}

/* ----- Article head ----- */
.article-head {
	margin-bottom: 40px;
}
.article-head .eyebrow-lg {
	font-size: 12px;
	margin-bottom: 20px;
}
.article-title {
	font-family: var(--tw-font-display);
	font-size: var(--tw-fs-h1);
	font-weight: 700;
	line-height: var(--tw-lh-tight);
	letter-spacing: var(--tw-ls-tight);
	text-wrap: balance;
	margin: 0 0 24px;
	color: var(--tw-fg);
}
.article-dek {
	font-size: var(--tw-fs-dek);
	line-height: 1.4;
	color: var(--tw-fg-muted);
	text-wrap: pretty;
	margin: 0 0 32px;
	font-weight: 400;
}

.article-meta {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 32px;
	align-items: start;
	padding: 20px 0;
	border-top: 1px solid var(--tw-rule);
	border-bottom: 1px solid var(--tw-rule);
}
.article-meta .meta-author {
	display: flex;
	align-items: center;
	gap: 14px;
}
.article-meta .avatar {
	width: 44px;
	height: 44px;
	background: var(--tw-accent);
	color: var(--tw-accent-on);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--tw-font-mono);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.02em;
	flex-shrink: 0;
}
.article-meta .avatar-img {
	background: transparent;
	display: block;
	object-fit: cover;
}
.article-meta .meta-author-name {
	font-weight: 600;
	font-size: 15px;
	color: var(--tw-fg);
}
.article-meta .meta-author-name a {
	color: inherit;
	text-decoration: none;
}
.article-meta .meta-author-name a:hover {
	color: var(--tw-accent);
}
.article-meta .meta-author-role {
	font-family: var(--tw-font-mono);
	font-size: var(--tw-fs-meta);
	text-transform: uppercase;
	letter-spacing: var(--tw-ls-wide);
	color: var(--tw-fg-muted);
	margin-top: 2px;
}
.article-meta .meta-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-family: var(--tw-font-mono);
	font-size: var(--tw-fs-meta);
	text-transform: uppercase;
	letter-spacing: var(--tw-ls-wide);
	color: var(--tw-fg-muted);
	text-align: right;
}
.article-meta .meta-row {
	display: flex;
	gap: 12px;
	justify-content: flex-end;
}
.article-meta .meta-label {
	color: var(--tw-fg-faint);
	min-width: 90px;
	text-align: right;
}

/* ----- Hero image ----- */
.article-hero {
	margin: 0 0 48px;
}
.article-hero .article-hero-img,
.article-hero .placeholder {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
.article-caption {
	font-family: var(--tw-font-mono);
	font-size: var(--tw-fs-meta);
	letter-spacing: var(--tw-ls-wide);
	color: var(--tw-fg-muted);
	text-transform: uppercase;
	margin: 12px 0 0;
	padding-left: 16px;
	border-left: 2px solid var(--tw-accent);
}

/* ----- Article grid (share + body) ----- */
.article-grid {
	display: grid;
	grid-template-columns: 56px minmax(0, var(--tw-reading-w)) 56px;
	justify-content: center;
	gap: 32px;
	margin-bottom: 64px;
}
.article-content {
	grid-column: 2;
	font-size: var(--tw-fs-body);
	line-height: var(--tw-lh-reading);
	color: var(--tw-fg);
}

/* ----- Share bar ----- */
.share-bar {
	position: sticky;
	top: 100px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 16px 0;
	align-self: start;
	height: -moz-fit-content;
	height: fit-content;
}
.share-label {
	font-family: var(--tw-font-mono);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--tw-fg-muted);
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	margin-bottom: 8px;
}
.share-btn {
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--tw-rule);
	background: transparent;
	color: var(--tw-fg);
	cursor: pointer;
	text-decoration: none;
	transition: background var(--tw-dur-fast) var(--tw-easing), color var(--tw-dur-fast) var(--tw-easing);
	position: relative;
}
.share-btn:hover {
	background: var(--tw-fg);
	color: var(--tw-bg);
}
.share-btn:focus-visible {
	outline: 2px solid var(--tw-accent);
	outline-offset: 2px;
}
.share-copy .share-icon-done {
	display: none;
}
.share-copy.is-copied .share-icon-default {
	display: none;
}
.share-copy.is-copied .share-icon-done {
	display: inline-block;
}
.share-copy.is-copied {
	background: var(--tw-accent);
	color: var(--tw-accent-on);
	border-color: var(--tw-accent);
}
.share-copy-feedback {
	position: absolute;
	left: calc(100% + 10px);
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--tw-font-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tw-accent);
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--tw-dur-fast) var(--tw-easing);
}
.share-copy.is-copied .share-copy-feedback {
	opacity: 1;
}

/* ----- Article body typography ----- */
.article-body > * + * {
	margin-top: 1.4em;
}
.article-body p {
	text-wrap: pretty;
	margin: 0;
}
.article-body a {
	color: var(--tw-accent);
	border-bottom: 1px solid var(--tw-accent);
	text-decoration: none;
	transition: background var(--tw-dur-fast) var(--tw-easing), color var(--tw-dur-fast) var(--tw-easing);
}
.article-body a:hover {
	background: var(--tw-accent);
	color: var(--tw-accent-on);
	padding: 0 2px;
	margin: 0 -2px;
}
.article-body strong {
	font-weight: 700;
}
.article-body em {
	font-style: italic;
}

/* Drop cap dla pierwszego paragrafu (lub jawnego .lede). */
.article-body > p:first-of-type,
.article-body .lede {
	font-size: 1.15em;
	line-height: 1.5;
}
.article-body > p:first-of-type::first-letter,
.article-body .lede::first-letter {
	font-family: var(--tw-font-display);
	font-size: 4.5em;
	line-height: 0.85;
	font-weight: 700;
	float: left;
	margin: 0.05em 0.12em 0 0;
	color: var(--tw-accent);
}

.article-body h2 {
	font-family: var(--tw-font-display);
	font-size: var(--tw-fs-h2);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: var(--tw-ls-snug);
	margin-top: 2em;
	margin-bottom: 0.6em;
	text-wrap: balance;
}
.article-body h2::before {
	content: "";
	display: inline-block;
	width: 0.5em;
	height: 1.15em;
	margin-right: 0.3em;
	vertical-align: top;
	background-color: var(--tw-accent);
	-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 1 7 7 1 13'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 1 7 7 1 13'/%3E%3C/svg%3E") center / contain no-repeat;
}
.article-body h3 {
	font-family: var(--tw-font-display);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: var(--tw-ls-snug);
	margin-top: 1.6em;
	margin-bottom: 0.5em;
}

.article-body ul,
.article-body ol {
	padding-left: 0;
	margin: 1.4em 0 0;
}
.article-body ol {
	list-style: none;
	counter-reset: tw-item;
}
.article-body ol > li {
	display: flex;
	align-items: baseline;
	gap: 12px;
	counter-increment: tw-item;
	margin-bottom: 1em;
}
.article-body ol > li::before {
	content: counter(tw-item, decimal-leading-zero);
	flex-shrink: 0;
	min-width: 36px;
	font-family: var(--tw-font-mono);
	font-size: 0.65em;
	font-weight: 700;
	color: var(--tw-accent);
	letter-spacing: 0.05em;
}
.article-body ul {
	list-style: none;
}
.article-body ul > li {
	position: relative;
	padding-left: 28px;
	margin-bottom: 0.8em;
}
.article-body ul > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 12px;
	height: 1px;
	background: var(--tw-accent);
}

.article-body figure,
.article-body .wp-block-image {
	margin: 2.5em 0;
}
.article-body figure img,
.article-body .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}
.article-body figcaption {
	font-family: var(--tw-font-mono);
	font-size: 12px;
	line-height: 1.5;
	color: var(--tw-fg-muted);
	margin-top: 12px;
	padding-left: 12px;
	border-left: 2px solid var(--tw-rule);
}

.article-body blockquote,
.article-body .pullquote,
.article-body .wp-block-quote {
	margin: 2.5em 0;
	padding: 32px 0;
	border-top: 2px solid var(--tw-fg);
	border-bottom: 2px solid var(--tw-fg);
	font-family: var(--tw-font-display);
	font-size: clamp(22px, 2.6vw, 32px);
	line-height: 1.25;
	font-weight: 600;
	letter-spacing: var(--tw-ls-snug);
	text-wrap: balance;
}
.article-body blockquote p {
	margin: 0;
}
.article-body blockquote cite {
	display: block;
	margin-top: 16px;
	font-family: var(--tw-font-mono);
	font-size: var(--tw-fs-meta);
	font-weight: 500;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--tw-fg-muted);
}

.article-body .article-callout,
.article-body .wp-block-pullquote {
	background: var(--tw-bg-elev);
	border-left: 3px solid var(--tw-accent);
	padding: 24px 28px;
	margin: 2.5em 0;
	font-size: 0.95em;
	border-top: 0;
	border-bottom: 0;
	font-family: inherit;
	font-weight: 400;
	letter-spacing: 0;
}
.article-body .article-callout .callout-label {
	font-family: var(--tw-font-mono);
	font-size: var(--tw-fs-meta);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tw-accent);
	margin-bottom: 8px;
}
.article-body .article-callout p:last-child {
	margin-bottom: 0;
}

/* ----- Related ----- */
.related {
	margin-top: 64px;
}
.related-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	border-bottom: 2px solid var(--tw-fg);
	padding-bottom: 12px;
	margin-bottom: 32px;
	gap: 16px;
}
.related-eyebrow {
	font-family: var(--tw-font-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	margin: 0;
	color: var(--tw-fg);
}
.related-link {
	font-family: var(--tw-font-mono);
	font-size: var(--tw-fs-meta);
	letter-spacing: var(--tw-ls-wide);
	text-transform: uppercase;
	color: var(--tw-fg-muted);
	text-decoration: none;
	transition: color var(--tw-dur-fast) var(--tw-easing);
	white-space: nowrap;
}
.related-link:hover {
	color: var(--tw-accent);
}
.related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--tw-gut);
}
.related-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.related-card .placeholder {
	margin-bottom: 4px;
}
.related-thumb-link {
	display: block;
	text-decoration: none;
}
.related-title {
	font-family: var(--tw-font-display);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-wrap: balance;
	margin: 0;
}
.related-title a {
	color: inherit;
	text-decoration: none;
}
.related-card:hover .related-title a {
	color: var(--tw-accent);
}
.related-card .meta {
	font-family: var(--tw-font-mono);
	font-size: var(--tw-fs-meta);
	color: var(--tw-fg-muted);
	letter-spacing: var(--tw-ls-wide);
	text-transform: uppercase;
}

/* ----- Newsletter inline w artykule ----- */
.article-page .newsletter-inline {
	margin: 64px 0;
}

/* ----- Comments (redesign) ----- */
.tw-comments {
	margin-top: 64px;
	padding-top: 48px;
	border-top: 2px solid var(--tw-fg);
}
.tw-comments-head {
	margin-bottom: 32px;
}
.tw-comments-title {
	font-family: var(--tw-font-display);
	font-size: clamp(20px, 2vw, 26px);
	font-weight: 700;
	letter-spacing: var(--tw-ls-snug);
	margin: 0;
}
.tw-comment-list {
	list-style: none;
	padding: 0;
	margin: 0 0 40px;
}
.tw-comment-list .children {
	list-style: none;
	margin: 16px 0 0 32px;
	padding-left: 24px;
	border-left: 2px solid var(--tw-rule-faint);
}
.tw-comment {
	padding: 24px 0;
	border-top: 1px solid var(--tw-rule-faint);
}
.tw-comment:first-child {
	border-top: 0;
	padding-top: 0;
}
.tw-comment-body {
	margin: 0;
}
.tw-comment-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}
.tw-comment-avatar {
	width: 36px;
	height: 36px;
	display: block;
	flex-shrink: 0;
}
.tw-comment-avatar-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--tw-fg);
	color: var(--tw-bg);
	font-family: var(--tw-font-mono);
	font-weight: 700;
	font-size: 12px;
}
.tw-comment-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.tw-comment-author {
	font-weight: 600;
	font-size: 14px;
	color: var(--tw-fg);
}
.tw-comment-author a {
	color: inherit;
	text-decoration: none;
}
.tw-comment-author a:hover {
	color: var(--tw-accent);
}
.tw-comment-date {
	font-family: var(--tw-font-mono);
	font-size: 11px;
	letter-spacing: var(--tw-ls-wide);
	text-transform: uppercase;
	color: var(--tw-fg-muted);
}
.tw-comment-date a {
	color: inherit;
	text-decoration: none;
}
.tw-comment-date a:hover {
	color: var(--tw-accent);
}
.tw-comment-content {
	font-size: 16px;
	line-height: 1.6;
	color: var(--tw-fg);
}
.tw-comment-content p {
	margin: 0 0 0.6em;
}
.tw-comment-pending {
	font-family: var(--tw-font-mono);
	font-size: 11px;
	letter-spacing: var(--tw-ls-wide);
	text-transform: uppercase;
	color: var(--tw-fg-muted);
	margin-bottom: 8px;
}
.tw-comment-foot {
	margin-top: 12px;
	display: flex;
	gap: 16px;
}
.tw-comment-foot .comment-reply-link,
.tw-comment-edit a {
	font-family: var(--tw-font-mono);
	font-size: 11px;
	letter-spacing: var(--tw-ls-wide);
	text-transform: uppercase;
	color: var(--tw-fg-muted);
	text-decoration: none;
}
.tw-comment-foot .comment-reply-link:hover,
.tw-comment-edit a:hover {
	color: var(--tw-accent);
}
.tw-comments-closed {
	font-family: var(--tw-font-mono);
	font-size: 12px;
	letter-spacing: var(--tw-ls-wide);
	text-transform: uppercase;
	color: var(--tw-fg-muted);
	padding: 16px 0;
}

/* Comment form */
.tw-comment-form,
#commentform {
	display: grid;
	gap: 16px;
	max-width: 100%;
	padding-top: 24px;
	border-top: 1px solid var(--tw-rule-faint);
}
.tw-comment-form-title,
#reply-title {
	font-family: var(--tw-font-display);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: var(--tw-ls-snug);
	margin: 0;
}
.tw-comment-notes {
	font-family: var(--tw-font-mono);
	font-size: 11px;
	letter-spacing: var(--tw-ls-wide);
	text-transform: uppercase;
	color: var(--tw-fg-muted);
	margin: 0;
}
.tw-comment-form .comment-form-author,
.tw-comment-form .comment-form-email,
.tw-comment-form .comment-form-url,
.tw-comment-form .comment-form-comment,
.tw-comment-form .comment-form-cookies-consent {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.tw-comment-form label {
	font-family: var(--tw-font-mono);
	font-size: 11px;
	letter-spacing: var(--tw-ls-wide);
	text-transform: uppercase;
	color: var(--tw-fg-muted);
}
.tw-comment-form input[type="text"],
.tw-comment-form input[type="email"],
.tw-comment-form input[type="url"],
.tw-comment-form textarea {
	background: transparent;
	border: 1px solid var(--tw-rule);
	padding: 12px 14px;
	color: var(--tw-fg);
	font-family: var(--tw-font-body);
	font-size: 15px;
	width: 100%;
	border-radius: 0;
	outline: none;
	transition: border-color var(--tw-dur-fast) var(--tw-easing);
}
.tw-comment-form input:focus,
.tw-comment-form textarea:focus {
	border-color: var(--tw-accent);
}
.tw-comment-form textarea {
	min-height: 140px;
	resize: vertical;
	font-family: var(--tw-font-body);
}
.tw-comment-form .comment-form-cookies-consent {
	flex-direction: row;
	align-items: center;
	gap: 10px;
}
.tw-comment-form .comment-form-cookies-consent label {
	text-transform: none;
	letter-spacing: 0;
	font-family: var(--tw-font-body);
	font-size: 13px;
	color: var(--tw-fg-muted);
}
.tw-comment-submit-wrap {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.tw-comment-submit,
#commentform .submit,
button.tw-comment-submit {
	background: var(--tw-fg);
	color: var(--tw-bg);
	border: 0;
	padding: 14px 24px;
	font-family: var(--tw-font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--tw-dur-fast) var(--tw-easing), color var(--tw-dur-fast) var(--tw-easing);
}
.tw-comment-submit:hover {
	background: var(--tw-accent);
	color: var(--tw-accent-on);
}
#cancel-comment-reply-link {
	font-family: var(--tw-font-mono);
	font-size: 11px;
	letter-spacing: var(--tw-ls-wide);
	text-transform: uppercase;
	color: var(--tw-fg-muted);
	text-decoration: none;
}
#cancel-comment-reply-link:hover {
	color: var(--tw-accent);
}

/* ============================================================
   Article — responsive
   ============================================================ */

@media (max-width: 1024px) {
	.article-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.article-content {
		grid-column: 1;
	}
	.share-bar {
		flex-direction: row;
		position: sticky;
		top: 60px;
		background: var(--tw-bg);
		padding: 8px 0;
		border-bottom: 1px solid var(--tw-rule-faint);
		z-index: var(--tw-z-share);
		justify-content: flex-start;
	}
	.share-label {
		writing-mode: horizontal-tb;
		transform: none;
		margin: 0 8px 0 0;
	}
	.share-copy-feedback {
		left: auto;
		right: calc(100% + 10px);
	}
	.related-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 720px) {
	.article-main {
		padding: 16px var(--tw-pad-x) 48px;
	}
	.article-meta {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.article-meta .meta-info {
		text-align: left;
	}
	.article-meta .meta-row {
		justify-content: flex-start;
	}
	.article-meta .meta-label {
		text-align: left;
		min-width: 80px;
	}
	.related-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.article-body blockquote,
	.article-body .pullquote {
		padding: 24px 0;
	}
	.article-body h2 {
		margin-top: 1.6em;
	}
	.article-body > p:first-of-type::first-letter,
	.article-body .lede::first-letter {
		font-size: 3.5em;
	}
	.tw-comment-list .children {
		margin-left: 16px;
		padding-left: 14px;
	}
}

/*--------------------------------------------------------------
# Archive (archive.php) — Faza 5
--------------------------------------------------------------*/

.archive-page {
	min-height: 100vh;
	max-width: var(--tw-max-w);
	margin: 0 auto;
	padding: 40px var(--tw-pad-x) 80px;
}

.archive-wrap {
	/* semantyczny wrapper — szerokość dziedziczy po .archive-page */
}

/* ----- Header (kategoria / tag / default) ----- */
.archive-head {
	margin-bottom: 48px;
	padding-bottom: 24px;
	border-bottom: 2px solid var(--tw-fg);
}
.archive-eyebrow {
	font-family: var(--tw-font-mono);
	font-size: var(--tw-fs-eyebrow);
	font-weight: 700;
	letter-spacing: var(--tw-ls-widest);
	text-transform: uppercase;
	color: var(--tw-accent);
	margin-bottom: 12px;
}
.archive-title {
	font-family: var(--tw-font-display);
	font-size: var(--tw-fs-h1);
	font-weight: 700;
	line-height: var(--tw-lh-tight);
	letter-spacing: var(--tw-ls-tight);
	text-wrap: balance;
	margin: 0;
	color: var(--tw-fg);
}
.archive-description {
	font-size: var(--tw-fs-dek);
	line-height: 1.4;
	color: var(--tw-fg-muted);
	text-wrap: pretty;
	max-width: 60ch;
	margin: 16px 0 0;
}
.archive-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-top: 20px;
	font-family: var(--tw-font-mono);
	font-size: var(--tw-fs-meta);
	letter-spacing: var(--tw-ls-wide);
	text-transform: uppercase;
	color: var(--tw-fg-muted);
}
.archive-meta-sep {
	opacity: 0.5;
}
.archive-author-link {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	transition: color var(--tw-dur-fast) var(--tw-easing);
}
.archive-author-link:hover {
	color: var(--tw-accent);
	border-bottom-color: var(--tw-accent);
}

/* ----- Header — autor ----- */
.archive-head-author {
	display: grid;
	grid-template-columns: 88px 1fr;
	gap: 32px;
	align-items: start;
}
.archive-author-avatar {
	width: 88px;
	height: 88px;
	overflow: hidden;
}
.archive-author-avatar .avatar-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: transparent;
}
.archive-author-body {
	min-width: 0;
}

/* ----- Lead row (1 lead + 2 medium) ----- */
.archive-lead-row {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: var(--tw-gut);
	margin-bottom: 56px;
	padding-bottom: 48px;
	border-bottom: 1px solid var(--tw-rule);
}
.archive-lead-side {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

/* ----- Grid 3-kol ----- */
.archive-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 48px var(--tw-gut);
	margin-bottom: 64px;
}

/* ----- Pagination ----- */
.archive-pagination {
	margin-top: 64px;
	padding-top: 32px;
	border-top: 2px solid var(--tw-fg);
}
.archive-pagination-list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	list-style: none;
	padding: 0;
	margin: 0;
	justify-content: center;
}
.archive-pagination-item {
	margin: 0;
}
.archive-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	font-family: var(--tw-font-mono);
	font-size: 12px;
	letter-spacing: var(--tw-ls-wide);
	text-transform: uppercase;
	color: var(--tw-fg);
	border: 1px solid var(--tw-rule-faint);
	text-decoration: none;
	transition: background var(--tw-dur-fast) var(--tw-easing), color var(--tw-dur-fast) var(--tw-easing), border-color var(--tw-dur-fast) var(--tw-easing);
}
.archive-pagination .page-numbers:hover {
	background: var(--tw-fg);
	color: var(--tw-bg);
	border-color: var(--tw-fg);
}
.archive-pagination .page-numbers.current {
	background: var(--tw-accent);
	color: var(--tw-accent-on);
	border-color: var(--tw-accent);
}
.archive-pagination .page-numbers.dots {
	border: 0;
	background: transparent;
}
.archive-pagination .page-numbers.dots:hover {
	background: transparent;
	color: var(--tw-fg-muted);
}
.archive-pagination .prev,
.archive-pagination .next {
	font-weight: 700;
}

/* ----- Empty state ----- */
.archive-empty {
	padding: 64px 0;
	text-align: center;
}
.archive-empty-text {
	font-family: var(--tw-font-display);
	font-size: clamp(20px, 2vw, 26px);
	color: var(--tw-fg-muted);
	margin: 0 0 24px;
}
.archive-empty-link {
	font-family: var(--tw-font-mono);
	font-size: 12px;
	letter-spacing: var(--tw-ls-wide);
	text-transform: uppercase;
	color: var(--tw-fg);
	text-decoration: none;
	border-bottom: 2px solid var(--tw-accent);
	padding-bottom: 2px;
}
.archive-empty-link:hover {
	color: var(--tw-accent);
}

/* ============================================================
   Archive — responsive
   ============================================================ */

@media (max-width: 1024px) {
	.archive-lead-row {
		grid-template-columns: 1fr;
		gap: 32px;
		padding-bottom: 32px;
		margin-bottom: 32px;
	}
	.archive-lead-side {
		flex-direction: row;
		gap: 24px;
	}
	.archive-lead-side > * {
		flex: 1;
	}
	.archive-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 40px var(--tw-gut);
	}
}

@media (max-width: 720px) {
	.archive-page {
		padding: 24px 16px 64px;
	}
	.archive-head {
		margin-bottom: 32px;
	}
	.archive-head-author {
		grid-template-columns: 64px 1fr;
		gap: 20px;
	}
	.archive-author-avatar {
		width: 64px;
		height: 64px;
	}
	.archive-lead-side {
		flex-direction: column;
		gap: 32px;
	}
	.archive-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.archive-pagination .page-numbers {
		min-width: 36px;
		height: 36px;
		padding: 0 10px;
	}
}

/*--------------------------------------------------------------
# Search form (używany przez get_search_form)
--------------------------------------------------------------*/

.tw-searchform {
	width: 100%;
}
.tw-searchform-wrap {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--tw-rule);
	background: var(--tw-bg);
	transition: border-color var(--tw-dur-fast) var(--tw-easing);
}
.tw-searchform-wrap:focus-within {
	border-color: var(--tw-accent);
}
.tw-searchform-input {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: 0;
	padding: 14px 16px;
	color: var(--tw-fg);
	font-family: var(--tw-font-body);
	font-size: 15px;
	outline: none;
}
.tw-searchform-input::placeholder {
	color: var(--tw-fg-faint);
}
.tw-searchform-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 56px;
	background: var(--tw-fg);
	color: var(--tw-bg);
	border: 0;
	cursor: pointer;
	transition: background var(--tw-dur-fast) var(--tw-easing), color var(--tw-dur-fast) var(--tw-easing);
}
.tw-searchform-submit:hover {
	background: var(--tw-accent);
	color: var(--tw-accent-on);
}

/*--------------------------------------------------------------
# Header search bar (rozwijalny overlay z lupy)
--------------------------------------------------------------*/

.header-search {
	border-top: 1px solid var(--tw-rule-faint);
	background: var(--tw-bg);
}
.header-search[hidden] {
	display: none;
}
.header-search-inner {
	max-width: var(--tw-max-w);
	margin: 0 auto;
	padding: 16px var(--tw-pad-x);
	display: flex;
	align-items: center;
	gap: 12px;
}
.header-search-inner .tw-searchform {
	flex: 1;
	min-width: 0;
}
.header-search-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: transparent;
	border: 0;
	color: var(--tw-fg-muted);
	cursor: pointer;
	flex-shrink: 0;
	transition: color var(--tw-dur-fast) var(--tw-easing);
}
.header-search-close:hover {
	color: var(--tw-fg);
}
.search-toggle[aria-expanded="true"] {
	color: var(--tw-accent);
}

@media (max-width: 720px) {
	.header-search-inner {
		padding: 12px 16px;
		gap: 8px;
	}
}

/*--------------------------------------------------------------
# Search page (search.php)
--------------------------------------------------------------*/

.search-query {
	color: var(--tw-accent);
	font-style: normal;
}
.search-head-form {
	margin-top: 24px;
	max-width: 560px;
}
.search-empty {
	max-width: 560px;
	margin: 0 auto;
}
.search-empty-hint {
	font-size: var(--tw-fs-body-sm);
	color: var(--tw-fg-muted);
	margin: 0 0 32px;
}
.search-empty-form {
	margin: 0 0 32px;
	text-align: left;
}

/*--------------------------------------------------------------
# Worth reading section (template-parts/home/worth-reading.php)
--------------------------------------------------------------*/

.worth-reading {
	margin-top: 64px;
	padding-top: 56px;
	border-top: var(--tw-border-w) solid var(--tw-rule);
}

.worth-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 48px var(--tw-gut);
	margin-top: 32px;
}

@media (max-width: 1024px) {
	.worth-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 40px var(--tw-gut);
	}
}

@media (max-width: 720px) {
	.worth-reading {
		margin-top: 40px;
		padding-top: 40px;
	}
	.worth-grid {
		grid-template-columns: 1fr;
		gap: 32px;
		margin-top: 24px;
	}
}

/*--------------------------------------------------------------
# About section (template-parts/home/about.php)
--------------------------------------------------------------*/

.about-section {
	position: relative;
	margin-top: 64px;
	padding: 64px 56px 56px;
	/* Hardcoded — zawsze czarna sekcja, niezależnie od trybu (analogicznie do newslettera) */
	background: #0A0A0A;
	color: #F5F4EF;
	overflow: hidden;
}

/* Dekoracyjny "stempel redakcyjny" — duży // w lewym górnym, low opacity */
.about-stamp {
	position: absolute;
	top: 16px;
	left: 28px;
	font-family: var(--tw-font-mono);
	font-size: clamp(56px, 8vw, 96px);
	line-height: 0.9;
	font-weight: 700;
	color: var(--tw-accent);
	pointer-events: none;
	user-select: none;
}

.about-inner {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 64px;
	align-items: start;
	margin-top: 64px;
}

.about-eyebrow {
	font-family: var(--tw-font-mono);
	font-size: var(--tw-fs-eyebrow);
	font-weight: 700;
	letter-spacing: var(--tw-ls-widest);
	text-transform: uppercase;
	color: var(--tw-accent);
	margin-bottom: 16px;
}

.about-title {
	position: relative;
	font-family: var(--tw-font-display);
	font-size: clamp(28px, 3.2vw, 44px);
	font-weight: 700;
	line-height: var(--tw-lh-snug);
	letter-spacing: var(--tw-ls-snug);
	text-wrap: balance;
	color: #F5F4EF;
	margin: 0 0 28px;
	padding-bottom: 20px;
}
/* Krótka pomarańczowa kreska pod tytułem (akcent typograficzny) */
.about-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56px;
	height: 3px;
	background: var(--tw-accent);
}

.about-text {
	font-size: var(--tw-fs-body-sm);
	line-height: 1.65;
	color: rgba(245, 244, 239, 0.78);
	max-width: 60ch;
}
.about-text > p {
	margin: 0 0 1em;
}
.about-text > p:last-child {
	margin-bottom: 0;
}

/* Prawa kolumna — linki */
.about-links {
	padding-left: 32px;
	border-left: 1px solid rgba(245, 244, 239, 0.18);
}
.about-links-label {
	font-family: var(--tw-font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(245, 244, 239, 0.5);
	margin-bottom: 16px;
}
.about-links-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.about-links-list > li {
	border-top: 1px solid rgba(245, 244, 239, 0.14);
}
.about-links-list > li:last-child {
	border-bottom: 1px solid rgba(245, 244, 239, 0.14);
}
.about-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 0;
	font-family: var(--tw-font-mono);
	font-size: 13px;
	letter-spacing: var(--tw-ls-wide);
	text-transform: uppercase;
	color: #F5F4EF;
	text-decoration: none;
	transition: color var(--tw-dur-fast) var(--tw-easing), padding var(--tw-dur-fast) var(--tw-easing);
}
.about-link-arrow {
	color: var(--tw-accent);
	font-weight: 700;
	transition: transform var(--tw-dur-fast) var(--tw-easing);
}
.about-link:hover {
	color: var(--tw-accent);
	padding-left: 8px;
}
.about-link:hover .about-link-arrow {
	transform: translateX(4px);
}

@media (max-width: 1024px) {
	.about-section {
		padding: 56px 40px 40px;
	}
	.about-stamp {
		font-size: clamp(48px, 10vw, 72px);
		top: 12px;
		left: 24px;
	}
	.about-inner {
		grid-template-columns: 1fr;
		gap: 40px;
		margin-top: 48px;
	}
	.about-links {
		padding-left: 0;
		padding-top: 32px;
		border-left: 0;
		border-top: 1px solid rgba(245, 244, 239, 0.18);
	}
	/* na mobile pierwszy <li> nie potrzebuje swojego top-bordera bo ma już border z .about-links */
	.about-links-list > li:first-child {
		border-top: 0;
	}
}

@media (max-width: 720px) {
	.about-section {
		margin-top: 40px;
		padding: 48px 20px 32px;
	}
	.about-title {
		margin-bottom: 20px;
		padding-bottom: 16px;
	}
}

/*--------------------------------------------------------------
# Page (page.php) — zwykłe podstrony statyczne
--------------------------------------------------------------*/

.page-page {
	min-height: 100vh;
	max-width: var(--tw-max-w);
	margin: 0 auto;
	padding: 32px var(--tw-pad-x) 80px;
}

.page-wrap {
	max-width: calc(var(--tw-reading-w) + 200px);
	margin: 0 auto;
}

.page-head {
	margin-bottom: 40px;
}

.page-title {
	font-family: var(--tw-font-display);
	font-size: var(--tw-fs-h1);
	font-weight: 700;
	line-height: var(--tw-lh-tight);
	letter-spacing: var(--tw-ls-tight);
	text-wrap: balance;
	margin: 0 0 24px;
	color: var(--tw-fg);
}

.page-dek {
	font-size: var(--tw-fs-dek);
	line-height: 1.4;
	color: var(--tw-fg-muted);
	text-wrap: pretty;
	margin: 0;
}

.page-hero {
	margin: 0 0 48px;
}
.page-hero .page-hero-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.page-content-wrap {
	max-width: var(--tw-reading-w);
	margin: 0 auto;
	font-size: var(--tw-fs-body);
	line-height: var(--tw-lh-reading);
	color: var(--tw-fg);
}

@media (max-width: 720px) {
	.page-page {
		padding: 16px 16px 56px;
	}
	.page-head {
		margin-bottom: 32px;
	}
}

/*--------------------------------------------------------------
# 404 page
--------------------------------------------------------------*/

.error-404-page {
	min-height: 100vh;
	max-width: var(--tw-max-w);
	margin: 0 auto;
	padding: 64px var(--tw-pad-x) 80px;
}

.error-404-wrap {
	max-width: 720px;
	margin: 0 auto;
}

.error-404-head {
	margin-bottom: 40px;
}

.error-404-display {
	font-family: var(--tw-font-mono);
	font-size: clamp(96px, 18vw, 220px);
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: -0.05em;
	color: var(--tw-accent);
	margin-bottom: 24px;
	user-select: none;
}

.error-404-eyebrow {
	font-family: var(--tw-font-mono);
	font-size: var(--tw-fs-eyebrow);
	font-weight: 700;
	letter-spacing: var(--tw-ls-widest);
	text-transform: uppercase;
	color: var(--tw-fg-muted);
	margin-bottom: 12px;
}

.error-404-title {
	font-family: var(--tw-font-display);
	font-size: var(--tw-fs-h1);
	font-weight: 700;
	line-height: var(--tw-lh-tight);
	letter-spacing: var(--tw-ls-tight);
	text-wrap: balance;
	margin: 0 0 20px;
}

.error-404-dek {
	font-size: var(--tw-fs-dek);
	line-height: 1.4;
	color: var(--tw-fg-muted);
	text-wrap: pretty;
	max-width: 60ch;
	margin: 0;
}

.error-404-actions {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-bottom: 64px;
	padding: 32px 0;
	border-top: 1px solid var(--tw-rule);
	border-bottom: 1px solid var(--tw-rule);
}

.error-404-form {
	max-width: 560px;
}

.error-404-home-link {
	font-family: var(--tw-font-mono);
	font-size: 12px;
	letter-spacing: var(--tw-ls-wide);
	text-transform: uppercase;
	color: var(--tw-fg);
	text-decoration: none;
	border-bottom: 2px solid var(--tw-accent);
	padding-bottom: 2px;
	align-self: flex-start;
	transition: color var(--tw-dur-fast) var(--tw-easing);
}
.error-404-home-link:hover {
	color: var(--tw-accent);
}

.error-404-related {
	/* Reuse stylów .related-* z artykułu (style są w sekcji # Article).
	   Zwężamy grid bo wrap jest 720px szeroki, więc 2-kol działa lepiej niż 3-kol. */
}
.error-404-related .related-grid {
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 720px) {
	.error-404-page {
		padding: 40px 16px 56px;
	}
	.error-404-display {
		font-size: clamp(80px, 28vw, 140px);
		margin-bottom: 16px;
	}
	.error-404-actions {
		padding: 24px 0;
	}
	.error-404-related .related-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}