/*
Theme Name: Mint3
Theme URI: https://delaysam.ru/
Description: Тема «мастерская/чертёж» для ДелайСам.ру. Графит по тёплой бумаге, миллиметровка, PT Serif / PT Sans / PT Mono. Тёмная тема, карточная сетка, адаптив без jQuery.
Author: ДелайСам.ру
Version: 1.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: mint3
*/

/* ==========================================================================
   1. Токены
   ========================================================================== */

:root {
	color-scheme: light;

	--paper: #f4f1e9;
	--surface: #fbf9f4;
	--surface-2: #ece7db;
	--ink: #1a1e19;
	--ink-2: #3d443c;
	--ink-3: #6c7268;
	--rule: #d8d2c4;
	--rule-strong: #b9b1a0;
	--accent: #a8431c;
	--accent-ink: #8a3616;
	--accent-wash: #f6e6de;
	--grid-line: rgba(26, 30, 25, 0.055);
	--grid-line-major: rgba(26, 30, 25, 0.1);
	--shadow-card: 0 1px 2px rgba(26, 30, 25, 0.04);
	--shadow-lift: 0 6px 20px -8px rgba(26, 30, 25, 0.22);
	--shadow-pop: 0 10px 34px -12px rgba(26, 30, 25, 0.3);

	--serif: 'PT Serif', Georgia, 'Times New Roman', serif;
	--sans: 'PT Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
	--mono: 'PT Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

	--wrap: 1280px;
	--measure: 74ch;
	--pad: clamp(16px, 3.2vw, 32px);
	--gap: clamp(18px, 2.2vw, 30px);
	--radius: 3px;
	--header-h: 60px;

	--step--1: clamp(13px, 0.35vw + 12px, 14px);
	--step-0: clamp(16.5px, 0.28vw + 15.6px, 18.5px);
	--step-1: clamp(19px, 0.5vw + 17.5px, 22px);
	--step-2: clamp(21px, 1vw + 18px, 27px);
	--step-3: clamp(24px, 1.7vw + 19px, 34px);
	--step-4: clamp(28px, 2.9vw + 20px, 46px);
}

:root[data-theme='dark'],
:root:not([data-theme='light']) {
	/* заполняется в блоке ниже; светлая тема остаётся значением по умолчанию */
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) {
		color-scheme: dark;
		--paper: #15171a;
		--surface: #1c1f23;
		--surface-2: #23262b;
		--ink: #e9e5da;
		--ink-2: #c6c2b6;
		--ink-3: #8e9288;
		--rule: #2e3238;
		--rule-strong: #434951;
		--accent: #e0703f;
		--accent-ink: #f2905f;
		--accent-wash: #2b1e17;
		--grid-line: rgba(233, 229, 218, 0.045);
		--grid-line-major: rgba(233, 229, 218, 0.085);
		--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
		--shadow-lift: 0 6px 22px -8px rgba(0, 0, 0, 0.7);
		--shadow-pop: 0 12px 36px -12px rgba(0, 0, 0, 0.75);
	}
}

:root[data-theme='dark'] {
	color-scheme: dark;
	--paper: #15171a;
	--surface: #1c1f23;
	--surface-2: #23262b;
	--ink: #e9e5da;
	--ink-2: #c6c2b6;
	--ink-3: #8e9288;
	--rule: #2e3238;
	--rule-strong: #434951;
	--accent: #e0703f;
	--accent-ink: #f2905f;
	--accent-wash: #2b1e17;
	--grid-line: rgba(233, 229, 218, 0.045);
	--grid-line-major: rgba(233, 229, 218, 0.085);
	--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
	--shadow-lift: 0 6px 22px -8px rgba(0, 0, 0, 0.7);
	--shadow-pop: 0 12px 36px -12px rgba(0, 0, 0, 0.75);
}

/* Акценты рубрик — тот же набор, что в base.css конвейера иллюстраций,
   чтобы обложки и сайт читались как одна система. */
[data-accent='rust'] { --accent: #a8431c; --accent-ink: #8a3616; --accent-wash: #f6e6de; }
[data-accent='moss'] { --accent: #4a6b32; --accent-ink: #3a5527; --accent-wash: #e7eede; }
[data-accent='amber'] { --accent: #9a6410; --accent-ink: #7d500b; --accent-wash: #f7ecd8; }
[data-accent='slate'] { --accent: #2f5c7b; --accent-ink: #244a64; --accent-wash: #e0ebf3; }
[data-accent='indigo'] { --accent: #46468c; --accent-ink: #383871; --accent-wash: #e6e6f4; }
[data-accent='teal'] { --accent: #1f6b6b; --accent-ink: #175353; --accent-wash: #ddefef; }
[data-accent='moor'] { --accent: #6b5a2f; --accent-ink: #554824; --accent-wash: #f0ead9; }
[data-accent='plum'] { --accent: #7a3355; --accent-ink: #632844; --accent-wash: #f4e3ec; }

:root[data-theme='dark'] [data-accent='rust'],
:root[data-theme='dark'][data-accent='rust'] { --accent: #e0703f; --accent-ink: #f2905f; --accent-wash: #2b1e17; }
:root[data-theme='dark'] [data-accent='moss'] { --accent: #8fbb63; --accent-ink: #a8ce80; --accent-wash: #1d2417; }
:root[data-theme='dark'] [data-accent='amber'] { --accent: #d8a33f; --accent-ink: #e8b95e; --accent-wash: #2a2214; }
:root[data-theme='dark'] [data-accent='slate'] { --accent: #6aa8d0; --accent-ink: #8bbde0; --accent-wash: #16222b; }
:root[data-theme='dark'] [data-accent='indigo'] { --accent: #8f8fd8; --accent-ink: #a8a8e6; --accent-wash: #1c1c2c; }
:root[data-theme='dark'] [data-accent='teal'] { --accent: #59b3b3; --accent-ink: #78c9c9; --accent-wash: #122424; }
:root[data-theme='dark'] [data-accent='moor'] { --accent: #c2ab6b; --accent-ink: #d6c288; --accent-wash: #242115; }
:root[data-theme='dark'] [data-accent='plum'] { --accent: #cc7ba1; --accent-ink: #dc9ab8; --accent-wash: #2a1721; }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) [data-accent='rust'] { --accent: #e0703f; --accent-ink: #f2905f; --accent-wash: #2b1e17; }
	:root:not([data-theme='light']) [data-accent='moss'] { --accent: #8fbb63; --accent-ink: #a8ce80; --accent-wash: #1d2417; }
	:root:not([data-theme='light']) [data-accent='amber'] { --accent: #d8a33f; --accent-ink: #e8b95e; --accent-wash: #2a2214; }
	:root:not([data-theme='light']) [data-accent='slate'] { --accent: #6aa8d0; --accent-ink: #8bbde0; --accent-wash: #16222b; }
	:root:not([data-theme='light']) [data-accent='indigo'] { --accent: #8f8fd8; --accent-ink: #a8a8e6; --accent-wash: #1c1c2c; }
	:root:not([data-theme='light']) [data-accent='teal'] { --accent: #59b3b3; --accent-ink: #78c9c9; --accent-wash: #122424; }
	:root:not([data-theme='light']) [data-accent='moor'] { --accent: #c2ab6b; --accent-ink: #d6c288; --accent-wash: #242115; }
	:root:not([data-theme='light']) [data-accent='plum'] { --accent: #cc7ba1; --accent-ink: #dc9ab8; --accent-wash: #2a1721; }
}

/* ==========================================================================
   2. Сброс и основа
   ========================================================================== */

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

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

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: var(--step-0);
	line-height: 1.62;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}

img,
picture,
video,
svg,
iframe { max-width: 100%; }

img,
video { height: auto; }

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-family: var(--serif);
	font-weight: 700;
	line-height: 1.18;
	color: var(--ink);
	/* pretty убирает висячие строки, но не жмёт текст в узкую колонку,
	   как это делает balance на многострочных заголовках карточек. */
	text-wrap: pretty;
}

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

a {
	color: var(--accent);
	text-decoration-color: color-mix(in srgb, var(--accent) 36%, transparent);
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
	transition: color 0.14s ease, text-decoration-color 0.14s ease;
}

a:hover { color: var(--accent-ink); text-decoration-color: currentColor; }

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

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

hr {
	height: 0;
	margin: 2.2rem 0;
	border: 0;
	border-top: 1px solid var(--rule);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 8px;
	z-index: 200;
	padding: 10px 16px;
	background: var(--accent);
	color: #fff;
	border-radius: var(--radius);
}

.skip-link:focus { top: 8px; color: #fff; }

/* ==========================================================================
   3. Утилиты
   ========================================================================== */

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--pad);
}

.wrap--narrow { max-width: 920px; }

/* Миллиметровка. Мажорная клетка 40px, минорная 8px — читается как чертёжный лист. */
.grid-paper {
	background-image:
		linear-gradient(var(--grid-line-major) 1px, transparent 1px),
		linear-gradient(90deg, var(--grid-line-major) 1px, transparent 1px),
		linear-gradient(var(--grid-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
	background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px;
	background-position: -1px -1px;
}

.label {
	font-family: var(--mono);
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.label--accent { color: var(--accent); }

/* Чертёжная «шапка блока»: подпись слева, линейка вправо до края. */
.rule-head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: var(--gap);
}

.rule-head::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--rule);
}

.rule-head > h2,
.rule-head > .rule-head__title {
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.rule-head--big > h2,
.rule-head--big > .rule-head__title {
	font-family: var(--serif);
	font-size: var(--step-2);
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink);
}

/* ==========================================================================
   4. Шапка
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--paper) 88%, transparent);
	border-bottom: 1px solid var(--rule);
	backdrop-filter: saturate(1.4) blur(10px);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
}

.site-header__bar {
	display: flex;
	align-items: center;
	gap: clamp(12px, 2vw, 26px);
	height: var(--header-h);
}

.site-logo {
	flex: none;
	font-family: var(--serif);
	font-size: clamp(20px, 2.1vw, 25px);
	font-weight: 700;
	line-height: 1;
	color: var(--ink);
	text-decoration: none;
	letter-spacing: -0.01em;
}

.site-logo:hover { color: var(--ink); }
.site-logo b { color: var(--accent); font-weight: 700; }

/* overflow:hidden обязателен: без него длинные названия рубрик
   выезжают под кнопки поиска и темы. */
.site-nav { flex: 1; min-width: 0; overflow: hidden; }

.site-nav__list {
	display: flex;
	flex-wrap: nowrap;
	gap: clamp(10px, 1.5vw, 22px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__list a {
	display: block;
	padding: 4px 0;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-2);
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 1px solid transparent;
}

.site-nav__list a:hover,
.site-nav__list a[aria-current='page'] {
	color: var(--accent);
	border-bottom-color: var(--accent);
}

.site-tools {
	display: flex;
	flex: none;
	align-items: center;
	gap: 4px;
	margin-left: auto;
}

.icon-btn {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	background: none;
	border: 1px solid transparent;
	border-radius: var(--radius);
	color: var(--ink-2);
	cursor: pointer;
	transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

.icon-btn:hover {
	background: var(--surface-2);
	border-color: var(--rule);
	color: var(--accent);
}

.icon-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.icon-btn__moon { display: none; }
:root[data-theme='dark'] .icon-btn__sun { display: none; }
:root[data-theme='dark'] .icon-btn__moon { display: block; }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) .icon-btn__sun { display: none; }
	:root:not([data-theme='light']) .icon-btn__moon { display: block; }
}

.nav-toggle { display: none; }

/* Выпадающая панель поиска */
.header-search {
	display: none;
	padding: 0 0 16px;
	border-top: 1px solid var(--rule);
}

.header-search[data-open='true'] { display: block; }

.search-form {
	display: flex;
	gap: 8px;
	margin-top: 16px;
}

.search-form__field {
	flex: 1;
	min-width: 0;
	padding: 11px 14px;
	background: var(--surface);
	border: 1px solid var(--rule-strong);
	border-radius: var(--radius);
	color: var(--ink);
}

.search-form__field::placeholder { color: var(--ink-3); }

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 20px;
	background: var(--accent);
	border: 1px solid var(--accent);
	border-radius: var(--radius);
	color: #fff;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.14s ease, border-color 0.14s ease;
}

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

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

.btn--ghost:hover { background: var(--surface-2); border-color: var(--accent); color: var(--accent); }

@media (max-width: 900px) {
	.nav-toggle { display: grid; order: -1; margin-left: calc(var(--pad) * -0.35); }

	.site-nav {
		display: none;
		position: absolute;
		top: var(--header-h);
		left: 0;
		right: 0;
		padding: 8px var(--pad) 20px;
		background: var(--paper);
		border-bottom: 1px solid var(--rule);
		box-shadow: var(--shadow-pop);
	}

	.site-nav[data-open='true'] { display: block; }

	.site-nav__list {
		flex-direction: column;
		gap: 0;
	}

	.site-nav__list li + li { border-top: 1px solid var(--rule); }

	.site-nav__list a {
		padding: 13px 0;
		font-size: 13px;
		border-bottom: 0;
	}
}

/* ==========================================================================
   5. Карточки и сетки
   ========================================================================== */

.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
	gap: var(--gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.card-grid--wide { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.card:hover {
	border-color: var(--rule-strong);
	box-shadow: var(--shadow-lift);
	transform: translateY(-2px);
}

/* Уголковые метки — чертёжные засечки на карточке */
.card::before,
.card::after {
	content: '';
	position: absolute;
	width: 9px;
	height: 9px;
	opacity: 0;
	transition: opacity 0.16s ease;
	pointer-events: none;
}

.card::before {
	top: -1px;
	left: -1px;
	border-top: 2px solid var(--accent);
	border-left: 2px solid var(--accent);
}

.card::after {
	right: -1px;
	bottom: -1px;
	border-right: 2px solid var(--accent);
	border-bottom: 2px solid var(--accent);
}

.card:hover::before,
.card:hover::after { opacity: 1; }

.card__media {
	position: relative;
	display: block;
	margin: 0;
	overflow: hidden;
	background: var(--surface-2);
	border-bottom: 1px solid var(--rule);
	border-radius: var(--radius) var(--radius) 0 0;
	aspect-ratio: 40 / 21;
}

.card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.card:hover .card__media img { transform: scale(1.028); }

.card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	padding: 14px 16px 16px;
}

.card__kicker {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent);
	text-decoration: none;
}

.card__kicker:hover { color: var(--accent-ink); }

.card__title {
	font-family: var(--serif);
	font-size: var(--step-1);
	font-weight: 700;
	line-height: 1.28;
	/* Заголовки в архивах бывают по 15 слов — без ограничения карточки
	   расходятся по высоте вчетверо. Текст остаётся в разметке целиком. */
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-wrap: normal;
}

.card__title a {
	color: var(--ink);
	text-decoration: none;
	background-image: linear-gradient(var(--accent), var(--accent));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size 0.24s ease, color 0.14s ease;
}

.card__title a:hover {
	color: var(--accent);
	background-size: 100% 1px;
}

.card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	margin-top: auto;
	padding-top: 8px;
	font-family: var(--mono);
	font-size: 11px;
	color: var(--ink-3);
}

.card__meta > * + *::before {
	content: '·';
	margin-right: 10px;
	color: var(--rule-strong);
}

/* Компактный список — «новое», «популярное» в сайдбаре */
.mini-list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: mini;
}

.mini-list li {
	display: flex;
	gap: 12px;
	padding: 11px 0;
	border-top: 1px solid var(--rule);
}

.mini-list li:first-child { border-top: 0; padding-top: 0; }

.mini-list--numbered li { counter-increment: mini; }

.mini-list--numbered li::before {
	content: counter(mini);
	flex: none;
	width: 22px;
	font-family: var(--mono);
	font-size: 13px;
	line-height: 1.5;
	color: var(--accent);
}

.mini-list a {
	font-size: 15.5px;
	line-height: 1.42;
	color: var(--ink-2);
	text-decoration: none;
}

.mini-list a:hover { color: var(--accent); }

/* ==========================================================================
   6. Главная
   ========================================================================== */

.home-hero {
	position: relative;
	border-bottom: 1px solid var(--rule);
	background-color: var(--surface);
	overflow: hidden;
}

.home-hero__inner {
	display: grid;
	gap: var(--gap);
	align-items: center;
	padding-block: clamp(26px, 4vw, 48px);
}

@media (min-width: 860px) {
	.home-hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); }
}

.home-hero__text { max-width: 44ch; }

.home-hero__title {
	margin-bottom: 14px;
	font-size: var(--step-4);
	line-height: 1.1;
}

.home-hero__lede {
	color: var(--ink-2);
	font-size: var(--step-1);
	line-height: 1.5;
}

.home-hero__accent {
	width: 64px;
	height: 3px;
	margin-bottom: 18px;
	background: var(--accent);
}

.home-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--rule);
}

.home-hero__stat b {
	display: block;
	font-family: var(--serif);
	font-size: var(--step-2);
	color: var(--ink);
}

.home-hero__stat span {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.home-hero__card {
	position: relative;
	display: block;
	border: 1px solid var(--rule-strong);
	border-radius: var(--radius);
	background: var(--paper);
	box-shadow: var(--shadow-lift);
	text-decoration: none;
	overflow: hidden;
}

.home-hero__card img {
	display: block;
	width: 100%;
	aspect-ratio: 40 / 21;
	object-fit: cover;
	border-bottom: 1px solid var(--rule);
}

.home-hero__card-body { padding: 16px 18px 18px; }

.home-hero__card-title {
	margin: 8px 0 10px;
	font-size: var(--step-2);
	line-height: 1.24;
	color: var(--ink);
}

.home-hero__card:hover .home-hero__card-title { color: var(--accent); }

.section { padding-block: clamp(34px, 5vw, 60px); }
.section + .section { padding-top: 0; }
.section--tint { background: var(--surface); border-block: 1px solid var(--rule); }
.section--tint + .section { padding-top: clamp(34px, 5vw, 60px); }

/* Плитки рубрик */
.cat-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cat-tile {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	background: var(--surface);
	border: 1px solid var(--rule);
	border-left: 3px solid var(--accent);
	border-radius: var(--radius);
	color: var(--ink);
	font-size: 15.5px;
	line-height: 1.34;
	text-decoration: none;
	transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}

.cat-tile:hover {
	background: var(--accent-wash);
	color: var(--ink);
	transform: translateX(2px);
}

.cat-tile__count {
	margin-left: auto;
	font-family: var(--mono);
	font-size: 11px;
	color: var(--ink-3);
}

/* ==========================================================================
   7. Контентные полосы и сайдбар
   ========================================================================== */

.layout {
	display: grid;
	gap: clamp(28px, 4vw, 54px);
	padding-block: clamp(24px, 3.4vw, 44px);
}

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

.sidebar { display: grid; gap: 22px; }

@media (min-width: 1060px) {
	.sidebar { position: sticky; top: calc(var(--header-h) + 20px); }
}

.widget {
	padding: 18px;
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
}

.widget__title {
	margin-bottom: 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--rule);
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-3);
}

/* Хлебные крошки */
.breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	margin-bottom: 16px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--ink-3);
}

.breadcrumbs a { color: var(--ink-3); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs__sep { color: var(--rule-strong); }
.breadcrumbs__current { color: var(--ink-2); }

/* ==========================================================================
   8. Статья
   ========================================================================== */

.entry-header { margin-bottom: clamp(20px, 2.6vw, 30px); }

.entry-kicker {
	display: inline-block;
	margin-bottom: 12px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent);
	text-decoration: none;
}

.entry-title {
	font-size: var(--step-4);
	line-height: 1.12;
	letter-spacing: -0.012em;
	text-wrap: balance;
}

.entry-accent {
	width: 58px;
	height: 3px;
	margin: 18px 0;
	background: var(--accent);
}

.byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	font-family: var(--mono);
	font-size: 11.5px;
	color: var(--ink-3);
}

.byline__avatar {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid var(--rule);
}

.byline__author { color: var(--ink-2); text-decoration: none; }
.byline__author:hover { color: var(--accent); }
.byline__sep { color: var(--rule-strong); }

.entry-cover {
	margin: 0 0 clamp(22px, 3vw, 32px);
}

.entry-cover img {
	display: block;
	width: 100%;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
}

.entry-cover figcaption,
.wp-caption-text,
.entry-content figcaption {
	margin-top: 8px;
	font-family: var(--mono);
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--ink-3);
	text-align: left;
}

/* Тело статьи */
.entry-content {
	max-width: var(--measure);
	font-size: var(--step-0);
	line-height: 1.68;
	color: var(--ink);
}

/* Единственный источник вертикального ритма в статье.
   Отдельного `.entry-content p { margin: 0 }` тут быть не должно —
   он специфичнее и гасит эти отступы. */
.entry-content > * + * { margin-top: 1.15em; }

.entry-content h2 {
	margin-top: 2.1em;
	padding-top: 0.7em;
	border-top: 1px solid var(--rule);
	font-size: var(--step-3);
	line-height: 1.2;
}

.entry-content h3 {
	margin-top: 1.7em;
	font-family: var(--sans);
	font-size: var(--step-1);
	font-weight: 700;
	line-height: 1.3;
}

.entry-content h4 {
	margin-top: 1.5em;
	font-family: var(--mono);
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-3);
}

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

.entry-content li + li { margin-top: 0.45em; }

.entry-content li::marker { color: var(--accent); }

.entry-content img {
	display: block;
	height: auto;
	border-radius: var(--radius);
}

.entry-content figure { margin: 1.7em 0; }

.entry-content figure img { border: 1px solid var(--rule); }

.entry-content .alignleft { float: left; margin: 0.3em 1.4em 1em 0; max-width: 46%; }
.entry-content .alignright { float: right; margin: 0.3em 0 1em 1.4em; max-width: 46%; }
.entry-content .aligncenter { margin-inline: auto; }

@media (max-width: 620px) {
	.entry-content .alignleft,
	.entry-content .alignright { float: none; margin-inline: 0; max-width: 100%; }
}

.entry-content blockquote {
	margin: 1.8em 0;
	padding: 4px 0 4px 22px;
	border-left: 3px solid var(--accent);
	color: var(--ink-2);
	font-style: italic;
}

.entry-content blockquote p + p { margin-top: 0.8em; }

.entry-content a {
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.entry-content code {
	padding: 2px 5px;
	background: var(--surface-2);
	border: 1px solid var(--rule);
	border-radius: 2px;
	font-family: var(--mono);
	font-size: 0.88em;
}

.entry-content pre {
	overflow-x: auto;
	padding: 16px 18px;
	background: var(--surface-2);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	font-family: var(--mono);
	font-size: 14px;
	line-height: 1.55;
}

.entry-content pre code { padding: 0; background: none; border: 0; }

/* Таблицы — часто это спецификации, их нельзя ломать на мобиле */
.entry-content .table-scroll {
	overflow-x: auto;
	margin: 1.7em 0;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	background: var(--surface);
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15.5px;
}

.entry-content th,
.entry-content td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--rule);
	text-align: left;
	vertical-align: top;
}

.entry-content thead th {
	background: var(--surface-2);
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-3);
	white-space: nowrap;
}

.entry-content tbody tr:last-child td { border-bottom: 0; }

.entry-content .video {
	position: relative;
	height: 0;
	margin: 1.8em 0;
	padding-bottom: 56.25%;
	overflow: hidden;
	border-radius: var(--radius);
}

.entry-content .video iframe,
.entry-content .video object,
.entry-content .video embed {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Оглавление (Kama_Contents) — оформлено как штамп чертежа */
.entry-content .kc__wrap,
.toc {
	max-width: var(--measure);
	margin: 0 0 2em;
	padding: 16px 20px 18px;
	background: var(--surface);
	border: 1px solid var(--rule);
	border-left: 3px solid var(--accent);
	border-radius: var(--radius);
}

.entry-content .kc__title,
.toc__title {
	display: block;
	margin-bottom: 10px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.entry-content ul.contents {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: toc;
}

.entry-content ul.contents li {
	margin: 0;
	padding: 3px 0;
	list-style: none;
}

.entry-content ul.contents li.top { counter-increment: toc; }

.entry-content ul.contents li.top > a::before {
	content: counter(toc) '.';
	display: inline-block;
	min-width: 1.6em;
	font-family: var(--mono);
	font-size: 0.86em;
	color: var(--ink-3);
}

.entry-content ul.contents li.sub { font-size: 0.94em; }

.entry-content ul.contents a {
	color: var(--ink-2);
	text-decoration: none;
}

.entry-content ul.contents a:hover { color: var(--accent); }

/* Теги */
.entry-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 2.4em;
	padding-top: 1.4em;
	border-top: 1px solid var(--rule);
}

.entry-tags a {
	padding: 5px 11px;
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: 100px;
	font-family: var(--mono);
	font-size: 11px;
	color: var(--ink-2);
	text-decoration: none;
}

.entry-tags a:hover { border-color: var(--accent); color: var(--accent); }

/* Карточка автора — сигнал экспертности */
.author-card {
	display: flex;
	gap: 16px;
	margin-top: 2.4em;
	padding: 18px 20px;
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
}

.author-card__avatar {
	flex: none;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	border: 1px solid var(--rule);
}

.author-card__name {
	margin-bottom: 4px;
	font-family: var(--serif);
	font-size: var(--step-1);
}

.author-card__name a { color: var(--ink); text-decoration: none; }
.author-card__name a:hover { color: var(--accent); }

.author-card__role {
	margin-bottom: 8px;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent);
}

.author-card__bio {
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--ink-2);
}

/* Соседние статьи */
.post-nav {
	display: grid;
	gap: 12px;
	margin-top: 2.4em;
}

@media (min-width: 700px) { .post-nav { grid-template-columns: 1fr 1fr; } }

.post-nav__item {
	display: block;
	padding: 14px 16px;
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	text-decoration: none;
}

.post-nav__item:hover { border-color: var(--accent); }

.post-nav__dir {
	display: block;
	margin-bottom: 6px;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.post-nav__title {
	font-family: var(--serif);
	font-size: 16.5px;
	line-height: 1.32;
	color: var(--ink);
}

.post-nav__item--next { text-align: right; }

/* Блок «Читайте также» от Contextual Related Posts */
.crp_related ul,
.related-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.crp_related h3 { display: none; }

.crp_related li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.crp_related a {
	display: block;
	font-family: var(--serif);
	font-size: 16px;
	line-height: 1.32;
	color: var(--ink);
	text-decoration: none;
}

.crp_related a:hover { color: var(--accent); }

.crp_related img {
	width: 100%;
	height: auto;
	margin-bottom: 8px;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	aspect-ratio: 40 / 21;
	object-fit: cover;
}

/* ==========================================================================
   9. Комментарии
   ========================================================================== */

.comments { margin-top: 2.8em; }

.comments-list {
	margin: 0 0 2em;
	padding: 0;
	list-style: none;
}

.comments-list ul,
.comments-list ol {
	margin: 14px 0 0 clamp(14px, 3vw, 34px);
	padding: 0;
	list-style: none;
	border-left: 1px solid var(--rule);
	padding-left: clamp(12px, 2vw, 20px);
}

.comments-list li { list-style: none; }

.comment-body {
	padding: 15px 0;
	border-top: 1px solid var(--rule);
}

.comment__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}

.comment__avatar { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--rule); }

.comment__author { font-weight: 700; font-size: 15px; }

.comment__date {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--ink-3);
}

.comment__reply {
	margin-left: auto;
	padding: 5px 12px;
	background: none;
	border: 1px solid var(--rule);
	border-radius: 100px;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-3);
	cursor: pointer;
}

.comment__reply:hover { border-color: var(--accent); color: var(--accent); }

.comment__text { font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.comment__text p + p { margin-top: 0.7em; }

.comment-form { display: grid; gap: 12px; max-width: 640px; }

.comment-form__row { display: grid; gap: 12px; }

@media (min-width: 560px) { .comment-form__row { grid-template-columns: 1fr 1fr; } }

.form__field {
	width: 100%;
	padding: 11px 14px;
	background: var(--surface);
	border: 1px solid var(--rule-strong);
	border-radius: var(--radius);
	color: var(--ink);
}

.form__field:focus { border-color: var(--accent); }

textarea.form__field { min-height: 130px; resize: vertical; }

.comment-form__button { justify-self: start; }

/* ==========================================================================
   10. Пагинация, архивы, 404
   ========================================================================== */

.archive-head {
	padding-block: clamp(22px, 3vw, 38px);
	border-bottom: 1px solid var(--rule);
	background: var(--surface);
}

.archive-title {
	font-size: var(--step-3);
	line-height: 1.16;
}

.archive-desc {
	max-width: 68ch;
	margin-top: 12px;
	color: var(--ink-2);
	font-size: 16.5px;
	line-height: 1.6;
}

.archive-desc p + p { margin-top: 0.7em; }

.archive-count {
	margin-top: 10px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.navigation.pagination { margin-top: clamp(28px, 4vw, 44px); }

.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}

.nav-links .page-numbers {
	display: grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	font-family: var(--mono);
	font-size: 13px;
	color: var(--ink-2);
	text-decoration: none;
}

.nav-links .page-numbers:hover { border-color: var(--accent); color: var(--accent); }

.nav-links .page-numbers.current {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}

.nav-links .page-numbers.dots { background: none; border-color: transparent; }

.error-404 {
	padding-block: clamp(50px, 9vw, 110px);
	text-align: center;
}

.error-404__code {
	font-family: var(--mono);
	font-size: clamp(58px, 13vw, 122px);
	line-height: 1;
	letter-spacing: 0.06em;
	color: var(--rule-strong);
}

.error-404 h1 { margin: 14px 0 12px; font-size: var(--step-3); }
.error-404 p { max-width: 52ch; margin-inline: auto; color: var(--ink-2); }
.error-404 .search-form { max-width: 460px; margin: 26px auto 0; }

/* ==========================================================================
   11. Подвал
   ========================================================================== */

.site-footer {
	margin-top: clamp(40px, 6vw, 76px);
	padding-block: clamp(34px, 4.6vw, 54px) 26px;
	background: var(--surface);
	border-top: 1px solid var(--rule);
}

.site-footer__cols {
	display: grid;
	gap: clamp(24px, 3.6vw, 46px);
}

@media (min-width: 760px) {
	.site-footer__cols { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) minmax(0, 0.9fr); }
}

.site-footer__title {
	margin-bottom: 12px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.site-footer__about {
	max-width: 40ch;
	color: var(--ink-2);
	font-size: 15.5px;
	line-height: 1.6;
}

.footer-cats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 4px 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-cats a {
	display: block;
	padding: 3px 0;
	font-size: 14.5px;
	color: var(--ink-2);
	text-decoration: none;
}

.footer-cats a:hover { color: var(--accent); }

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	align-items: center;
	margin-top: clamp(26px, 3.4vw, 40px);
	padding-top: 20px;
	border-top: 1px solid var(--rule);
	font-family: var(--mono);
	font-size: 11px;
	color: var(--ink-3);
}

.site-footer__bottom a { color: var(--ink-3); text-decoration: none; }
.site-footer__bottom a:hover { color: var(--accent); }
.site-footer__counters { margin-left: auto; }

/* ==========================================================================
   12. Рекламные слоты
   ========================================================================== */

.ad-slot {
	display: flex;
	justify-content: center;
	margin-block: clamp(20px, 3vw, 34px);
}

.ad-slot:empty { display: none; }

.ad-slot--top { margin-top: 0; padding-top: clamp(16px, 2.4vw, 26px); }

/* ==========================================================================
   13. Печать
   ========================================================================== */

@media print {
	.site-header,
	.site-footer,
	.sidebar,
	.ad-slot,
	.post-nav,
	.comments,
	.crp_related { display: none !important; }

	body { background: #fff; color: #000; font-size: 12pt; }
	.entry-content { max-width: none; }
	a { color: #000; text-decoration: underline; }
	.entry-content a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
}