/*
Theme Name: Cryptopunk 0.2
Theme URI: https://blog.cryptopunk.club
Author: Cryptopunk
Description: Тёмная тема-мастерская для блога Cryptopunk. Дочерняя тема Twenty Twenty-Five: тёмный фон, янтарь + холодный неон, моноширинные заголовки. Структура (палитра, fluid-шкала шрифтов, ширины) — в theme.json; этот файл добавляет то, что theme.json не умеет: адаптивную сетку, стеклянные эффекты с откатом, sticky-шапку, состояния доступности. 0.2.1: пилюли рубрик, «мачта» раздела, богатая мета single (время чтения), featured-обложка закреплённого поста — микро-приёмы, адаптированные из The7 под нашу палитру. 0.2.2: «Паспорт стенда» (cp-specs) — брат genpass для описания железа/стека, циановый акцент вместо янтарного и ромб-маркер раскрытия. 0.2.3: дочерний page.html (pillar-страницы больше не дублируют featured-обложку), cp-hero (крупный кадр-герой), cp-tagcloud (облако тегов сайдбара), cp-related (перелинковка «Читайте по теме»). 0.2.4: полировка сайдбара (единый зазор виджетов + размер шрифта latest-posts), облако тегов в стиле cp-tags (# янтарём на hover, градация размеров жива), «Читайте по теме» как карточка-виджет, блок «Путеводители» на главной над рубриками + виджет в сайдбаре, стилизована пагинация ленты (query-pagination). 0.2.5: «Обновлено» в мете поста (рендерится только если правка была), оглавление лонгрида (cp-toc) с автоякорями у <h2>.
Template: twentytwentyfive
Version: 0.2.5
Requires at least: 6.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cryptopunk
*/

/* ==========================================================================
   0. Токены. Один источник правды для цветов/радиусов/стекла.
   Дублируют палитру theme.json, чтобы CSS не зависел от порядка загрузки
   глобальных стилей и работал даже если preset-переменные ещё не готовы.
   ========================================================================== */
:root {
	--cp-base: #0b0f14;
	--cp-surface: #141a22;
	--cp-contrast: #e8e6e1;
	--cp-muted: #8a94a3;
	--cp-amber: #ffab40;
	--cp-cyan: #3dd7d0;
	--cp-hairline: #1e2733;
	--cp-radius: 12px;
	--cp-header-h: 4.25rem;
	--cp-glass-blur: 14px;
	--cp-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ==========================================================================
   1. Кросс-браузерная гигиена. Ни одно из этих правил не «украшает» —
   они гасят классические баги раскладки на мобильных и со длинным кодом.
   ========================================================================== */

/* Длинный код / URL / хэш не должен выдавливать горизонтальный скролл.
   overflow-wrap:anywhere ломает неразрывные токены только в тексте, не в <code>. */
.wp-block-post-content p,
.wp-block-post-excerpt,
.entry-content p,
.wp-block-group p,
li {
	overflow-wrap: anywhere;
}

/* Преформат/код — не ломаем по символам, а даём горизонтальный скролл внутри блока. */
pre,
.wp-block-code,
pre.wp-block-code {
	max-width: 100%;
	overflow-x: auto;
	overflow-wrap: normal;
}

/* Медиа никогда не шире контейнера. */
img,
svg,
video,
iframe {
	max-width: 100%;
	height: auto;
}

/* Флекс/грид-дети по умолчанию имеют min-width:auto и могут переполнять родителя.
   Обнуляем — это и есть главный предохранитель от «уехавшей» вёрстки. */
.wp-block-columns > .wp-block-column,
.wp-block-group,
.wp-block-post-template > li {
	min-width: 0;
}

/* Плавная прокрутка к якорям с поправкой на высоту sticky-шапки. */
html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--cp-header-h) + 1rem);
}

/* Уважаем запрос пользователя на меньше движения. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

/* Красивые переносы. Тихо игнорируются старыми браузерами — чистое улучшение. */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* ==========================================================================
   2. Доступность: видимый фокус для клавиатуры (WCAG).
   Раньше его не было вообще — навигация с клавиатуры была невидимой.
   ========================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.wp-block-navigation-item a:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--cp-cyan);
	outline-offset: 2px;
	border-radius: 3px;
}

/* ==========================================================================
   3. Sticky-шапка со стеклом.
   ПОРЯДОК КРИТИЧЕН: по умолчанию фон НЕПРОЗРАЧНЫЙ (иначе браузер без blur
   покажет полупрозрачную шапку поверх текста — нечитаемо). Прозрачность и
   размытие включаем ТОЛЬКО внутри @supports.
   ========================================================================== */
.cp-header {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--cp-base); /* непрозрачный фолбэк */
}

@supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) {
	.cp-header {
		background-color: color-mix(in srgb, var(--cp-base) 68%, transparent);
		-webkit-backdrop-filter: blur(var(--cp-glass-blur)) saturate(150%);
		backdrop-filter: blur(var(--cp-glass-blur)) saturate(150%);
	}

	/* Пользователь просил меньше прозрачности — возвращаем плотный фон. */
	@media (prefers-reduced-transparency: reduce) {
		.cp-header { background-color: var(--cp-base); }
	}
}

/* ==========================================================================
   4. Стеклянная плашка под заголовком героя.
   Функциональна: поднимает контраст текста над пёстрой картинкой. Картинка
   уже затемнена overlay-ом (dimRatio), поэтому без стекла тоже читаемо —
   плашка чистое улучшение и может жить только в @supports.
   ========================================================================== */
.cp-hero-plate {
	width: -moz-fit-content;
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
	border-radius: var(--cp-radius);
	padding: clamp(0.85rem, 2.2vw, 1.4rem) clamp(1.25rem, 4vw, 2.4rem);
}

@supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) {
	.cp-hero-plate {
		background-color: color-mix(in srgb, var(--cp-base) 34%, transparent);
		-webkit-backdrop-filter: blur(10px) saturate(130%);
		backdrop-filter: blur(10px) saturate(130%);
		border: 1px solid color-mix(in srgb, #ffffff 12%, transparent);
	}

	@media (prefers-reduced-transparency: reduce) {
		.cp-hero-plate { background-color: color-mix(in srgb, var(--cp-base) 82%, transparent); }
	}
}

/* Герой: fluid-высота через dvh. Если dvh не поддержан — весь clamp невалиден,
   свойство отбрасывается и остаётся инлайновый min-height:300px из блока. */
.wp-block-cover.cp-hero {
	min-height: clamp(260px, 40dvh, 440px) !important;
}

/* ==========================================================================
   5. Рубрики — сетка задаётся WP grid-layout (repeat(auto-fill, minmax()))
   прямо в разметке, здесь только стекло карточек и их поведение.
   Карточка в разметке несёт сплошной фон accent-5 => baseline читаем даже
   без CSS/без blur. Стекло накладываем поверх только в @supports.
   ========================================================================== */
.cp-card {
	border: 1px solid var(--cp-hairline);
	border-radius: var(--cp-radius);
	transition: transform 0.25s var(--cp-ease), border-color 0.25s var(--cp-ease);
}

.cp-card a { text-decoration: none; }

@supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) {
	.cp-card {
		background-color: color-mix(in srgb, var(--cp-surface) 55%, transparent) !important;
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
	}

	@media (prefers-reduced-transparency: reduce) {
		.cp-card { background-color: var(--cp-surface) !important; }
	}
}

/* Подъём при наведении — только на устройствах с настоящим ховером (не тач). */
@media (hover: hover) {
	.cp-card:hover {
		transform: translateY(-3px);
		border-color: color-mix(in srgb, var(--cp-amber) 45%, transparent);
	}
}

/* Рубрик ровно 4 → фиксируем 4→2→1, а не WP-шный auto-fill (тот на широкой
   полосе резервирует пустой 5-й трек справа → четвёрка прижимается влево и
   выглядит «съехавшей от центра»). Селектор специфичнее WP-грида (.wp-container-*). */
.wp-block-group.cp-rubrics {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
}
@media (max-width: 900px) {
	.wp-block-group.cp-rubrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
	.wp-block-group.cp-rubrics { grid-template-columns: 1fr; }
}

/* ==========================================================================
   6. Карточка поста — раскладка по ШИРИНЕ КОНТЕЙНЕРА, а не вьюпорта.
   .cp-postcard = контейнер запроса; .cp-postcard-grid = сама сетка (нельзя
   стилизовать элемент его же container-query, поэтому обёртка + внутренник).
   Фолбэк без @container: сетка остаётся в одну колонку (стопкой) — работает
   везде, включая старые браузеры.
   ========================================================================== */
.cp-postcard {
	container-type: inline-size;
	padding-block: var(--wp--preset--spacing--40, 1.5rem);
	border-bottom: 1px solid var(--cp-hairline);
}

.cp-postcard-grid {
	display: grid;
	gap: 1.25rem;
	align-items: center;
}

.cp-postcard-grid > .wp-block-post-featured-image {
	margin: 0;
}

/* Две колонки — ТОЛЬКО когда есть картинка. У постов без featured-image блок
   картинки не рендерится вовсе → единственный child иначе падал в узкий 34%-трек
   («текст уезжал влево»). Теперь без картинки карточка = одна колонка на всю
   ширину. :has() не поддержан на старье → безопасный откат в одну колонку. */
@container (min-width: 34rem) {
	.cp-postcard-grid:has(.wp-block-post-featured-image) {
		grid-template-columns: minmax(0, 34%) 1fr;
	}
}

/* ==========================================================================
   8. Правый сайдбар + виджеты.
   cp-content-wrap = WP-колонки (лента 66% + сайдбар 34%), стекают на мобильном
   (<782px) сами. Сайдбар «прилипает» при прокрутке ленты.
   ========================================================================== */
/* Sticky вешаем на САМУ колонку + align-self:start — иначе WP тянет колонку на
   всю высоту ленты (align-items:normal=stretch), и sticky на внутреннем блоке
   не срабатывает. align-self:start = колонка по высоте контента, «прилипает»
   относительно высокого флекс-контейнера cp-content-wrap. */
.cp-aside-col {
	min-width: 0;
	align-self: start;
	position: -webkit-sticky;
	position: sticky;
	top: calc(var(--cp-header-h) + 1rem);
}

/* Виджет-карточка — как рубрики, но без hover-подъёма. Фон accent-5 в разметке
   отсутствует → задаём здесь (solid) + стекло в @supports. */
.cp-widget {
	border: 1px solid var(--cp-hairline);
	border-radius: var(--cp-radius);
	background-color: var(--cp-surface);
}
.cp-widget > * { margin-block-start: 0; } /* зазор заголовок→контент задаём фикс. margin у h4, а не WP-блокгэпом (у него нулевая специфичность → рвался неровно между виджетами) */
.cp-widget > h4 { margin: 0 0 0.7rem; color: var(--cp-cyan); } /* неоновый акцент — вернул по просьбе автора */
.cp-widget-accent { border-color: color-mix(in srgb, var(--cp-amber) 40%, var(--cp-hairline)); }

@supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) {
	.cp-widget {
		background-color: color-mix(in srgb, var(--cp-surface) 55%, transparent);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
	}
	@media (prefers-reduced-transparency: reduce) {
		.cp-widget { background-color: var(--cp-surface); }
	}
}

/* Списки в виджетах (Рубрики / Ещё почитать). */
/* Оба списка-виджета (Рубрики + Ещё почитать) — единый шрифт/размер/отступ. */
.cp-widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	font-size: 0.95rem;
}
.cp-widget li { line-height: 1.35; }
/* Заголовки latest-posts ядро/TT5 сайзит своим классом → равняем на список рубрик (0.95rem). */
.cp-widget .wp-block-latest-posts__post-title { font-size: 0.95rem; }
.cp-widget ul a { text-decoration: none; }
.cp-widget ul a:hover { text-decoration: underline; }

/* Поиск под тёмную тему. */
.cp-widget .wp-block-search__inside-wrapper {
	border: 1px solid var(--cp-hairline);
	border-radius: 8px;
	background-color: var(--cp-base);
	overflow: hidden;
}
.cp-widget .wp-block-search__input {
	background: transparent;
	border: 0;
	color: var(--cp-contrast);
	padding: 0.5rem 0.7rem;
}
.cp-widget .wp-block-search__input::placeholder { color: var(--cp-muted); }
.cp-widget .wp-block-search__button {
	background-color: var(--cp-surface);
	color: var(--cp-amber);
	border: 0;
	margin: 0;
}

/* На узких экранах колонки стекают → sticky ни к чему. */
@media (max-width: 781px) {
	.cp-aside-col { position: static; }
}

/* Блок реакций (cryptopunk-reactions.php) уже отдаёт свои стили в этой же
   палитре (#1e2733 hairline, #141a22 surface) — отдельного согласования не
   требует. Оставлено как якорь на будущее. */

/* ==========================================================================
   9. «Паспорт генерации» — подпись под ИИ-обложками с параметрами генерации
   (модель / сид / шаги / guidance / промт). Фича радикальной прозрачности:
   честно показываем, чем и как сделана картинка. Сидит ПОД обложкой как
   figcaption-карточка. Baseline — сплошной surface-фон (читаемо без стекла);
   стекло только в @supports, как и везде в теме.
   ========================================================================== */
.cp-genpass {
	margin-block-start: 0.6rem; /* прижат к картинке сверху */
	padding: 0.75rem 0.95rem;
	border: 1px solid var(--cp-hairline);
	border-radius: var(--cp-radius);
	background-color: var(--cp-surface); /* непрозрачный фолбэк */
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--cp-contrast);
}

@supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) {
	.cp-genpass {
		background-color: color-mix(in srgb, var(--cp-surface) 60%, transparent);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
	}
	@media (prefers-reduced-transparency: reduce) {
		.cp-genpass { background-color: var(--cp-surface); }
	}
}

/* Заголовок-саммари паспорта — теперь сворачиваемый (как промт): неоновый
   циан + треугольник раскрытия ▸/▾. `.cp-genpass__label` оставлен алиасом
   на случай старой не-details разметки. */
.cp-genpass > summary,
.cp-genpass__label {
	color: var(--cp-cyan);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.cp-genpass > summary {
	cursor: pointer;
	list-style: none;
	margin: 0;
}
.cp-genpass > summary::-webkit-details-marker { display: none; }
.cp-genpass > summary::before { content: "\25B8  "; color: var(--cp-cyan); } /* ▸ */
.cp-genpass[open] > summary::before { content: "\25BE  "; }                  /* ▾ */
.cp-genpass[open] > summary { margin-bottom: 0.7rem; } /* отбить от метаданных при раскрытии */
.cp-genpass__label { margin: 0 0 0.5rem; }             /* статичный вариант — прежний отступ */

/* Метаданные — РОВНЫЕ 2 строки: фикс. 4 колонки (8 полей = 4+4), каждое
   поле в одну строку. min-width ключа УБРАН — из-за него значение
   раздвигало ячейку и переносилось; теперь значение прижато к ключу. */
.cp-genpass__meta {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.35rem 1.25rem;
	margin: 0;
}
.cp-genpass__item {
	margin: 0;
	overflow-wrap: anywhere;
}
/* Ключ (в <strong>) — приглушённый; значение (остальной текст) — контрастное. */
.cp-genpass__item strong {
	margin-right: 0.5rem;
	color: var(--cp-muted);
	font-weight: 400;
}
/* Ключевые поля (модель / сид) — значение янтарём. */
.cp-genpass__item--key { color: var(--cp-amber); }

/* Промт — ВЛОЖЕННЫЙ сворачиваемый <details> внутри паспорта. */
.cp-genpass__prompt {
	margin-block-start: 0.7rem;
	border-top: 1px dashed var(--cp-hairline);
	padding-top: 0.6rem;
}
.cp-genpass__prompt > summary {
	cursor: pointer;
	color: var(--cp-muted);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	list-style: none;
}
.cp-genpass__prompt > summary::-webkit-details-marker { display: none; }
.cp-genpass__prompt > summary::before { content: "\25B8  "; color: var(--cp-cyan); } /* ▸ */
.cp-genpass__prompt[open] > summary::before { content: "\25BE  "; }                   /* ▾ */
.cp-genpass__prompt p {
	margin: 0.5rem 0 0;
	color: var(--cp-muted);
	font-size: 0.78rem;
	line-height: 1.55;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

/* Планшет — 2 колонки (4 ряда); телефон — 1, ключ над значением. */
@media (max-width: 800px) {
	.cp-genpass__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 440px) {
	.cp-genpass__meta { grid-template-columns: 1fr; }
	.cp-genpass__item strong { display: block; margin-bottom: 0.1rem; }
}

/* ==========================================================================
   9b. «Паспорт стенда» (cp-specs) — смысловой брат genpass (секция 9), но про
   ЖЕЛЕЗО и стек, а не про генерацию картинки. Механика один-в-один
   (details+summary, сетка __meta, __item / --key), поэтому и стили — калька с 9.
   Различаем два паспорта, чтобы читатель не путал, ТРЕМЯ сигналами:
     • маркер раскрытия — ромб ◇/◆ (у genpass треугольник ▸/▾);
     • акцент --key — циан (у genpass янтарь). По цвет-коду блога циан =
       «как устроено правильно» (железо/стек), янтарь = «аномалия/приметное»
       (модель/сид генерации);
     • циановая «спина» — border-left на карточке.
   Сетка — 2 колонки (значения «железа» длиннее генерационных, напр.
   «Intel Core i5, 2 ядра, 1.4 ГГц»), в 1 колонку на мобиле. Baseline читаем
   без стекла; стекло только в @supports, как везде в теме.
   ========================================================================== */
.cp-specs {
	margin-block-start: 0.6rem; /* прижат к тексту сверху */
	padding: 0.75rem 0.95rem;
	border: 1px solid var(--cp-hairline);
	border-left: 2px solid color-mix(in srgb, var(--cp-cyan) 55%, var(--cp-hairline));
	border-radius: var(--cp-radius);
	background-color: var(--cp-surface); /* непрозрачный фолбэк */
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--cp-contrast);
}

@supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) {
	.cp-specs {
		background-color: color-mix(in srgb, var(--cp-surface) 60%, transparent);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
	}
	@media (prefers-reduced-transparency: reduce) {
		.cp-specs { background-color: var(--cp-surface); }
	}
}

/* Саммари стенда — циан-моно, ромб-маркер ◇(закрыт)/◆(раскрыт). Ромб (а не
   треугольник genpass) — второй сигнал «это другой паспорт». */
.cp-specs > summary {
	color: var(--cp-cyan);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	list-style: none;
	margin: 0;
}
.cp-specs > summary::-webkit-details-marker { display: none; }
.cp-specs > summary::before { content: "\25C7  "; color: var(--cp-cyan); } /* ◇ */
.cp-specs[open] > summary::before { content: "\25C6  "; }                  /* ◆ */
.cp-specs[open] > summary { margin-bottom: 0.7rem; } /* отбить от метаданных при раскрытии */

/* Метаданные — ДАТАЩИТ: строки «ключ | значение», выровненный столбец ключей.
   У genpass значения — короткие токены (сид/шаги) → там многоколоночная сетка;
   у стенда значения — целые фразы («Intel Core i5, 2 ядра, 1.4 ГГц», «arm64
   против x86_64 у сервера») → колоночная сетка их бы зажала в рваные ячейки.
   Одна колонка с фикс-шириной ключа читается ровно при любой длине значения. */
.cp-specs__meta {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin: 0;
}
.cp-specs__item {
	margin: 0;
	display: flex;
	gap: 0.7rem;
	overflow-wrap: anywhere;
}
/* Ключ (в <strong>) — приглушённый, выровнен в столбец (min-width); значение
   (текст после) заполняет остаток строки и переносится в своей колонке. */
.cp-specs__item strong {
	flex: 0 0 auto;
	min-width: 8.5rem;
	color: var(--cp-muted);
	font-weight: 400;
}
/* Ключевые поля стенда — значение циановое (контрапункт к янтарю genpass). */
.cp-specs__item--key { color: var(--cp-cyan); }

/* Телефон — ключ НАД значением (узкой строке фикс-столбец ключа тесен). */
@media (max-width: 600px) {
	.cp-specs__item { flex-direction: column; gap: 0.1rem; }
	.cp-specs__item strong { min-width: 0; }
}

/* ==========================================================================
   10. Логотип-лок-ап в шапке — живой глиф ©ρ (не картинка): циан © приподнят
   над амбер ρ (пропорции B). Векторно-чёткий, в цветах темы, масштабируется.
   Стоит перед site-title; выровнены по общей базовой линии.
   ========================================================================== */
.cp-brand { align-items: baseline !important; }
.cp-logo {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-weight: 600;
	font-size: 1.7rem;
	line-height: 1;
	white-space: nowrap;
	user-select: none;
}
.cp-logo .c {
	color: var(--cp-cyan);
	font-size: 0.788em;
	display: inline-block;
	transform: translateY(-0.42em);
	margin-right: -0.11em;
}
.cp-logo .p { color: var(--cp-amber); }

/* ==========================================================================
   11. 0.2.1 — микро-приёмы, адаптированные из The7 (ThemeForest) под нашу
   палитру. От самой темы The7 НИЧЕГО не подключается: это дословный перевод
   её блочных паттернов (single/index) на наши токены (--cp-*, моно-стек).
   Пилюли рубрик, «мачта» раздела, богатая мета single, featured-обложка.
   ========================================================================== */

/* 11.1 Категория-«пилюля». Вешается на post-terms.cp-cat-pill (лента, single,
   featured). separator:"" в разметке → чипы, а не текст «через запятую».
   Baseline читаем без стекла: сплошная рамка + полупрозрачная заливка. */
.cp-cat-pill {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	line-height: 1;
}
.cp-cat-pill a {
	display: inline-block;
	padding: 0.24em 0.7em;
	border: 1px solid color-mix(in srgb, var(--cp-amber) 45%, var(--cp-hairline));
	border-radius: 999px;
	background-color: color-mix(in srgb, var(--cp-amber) 12%, transparent);
	color: var(--cp-amber);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 0.2s var(--cp-ease), border-color 0.2s var(--cp-ease),
		background-color 0.2s var(--cp-ease);
}
.cp-cat-pill a:hover {
	color: var(--cp-cyan);
	border-color: var(--cp-cyan);
	background-color: color-mix(in srgb, var(--cp-cyan) 12%, transparent);
}

/* 11.2 «Мачта» раздела — full-bleed полоса-шапка над архивом/постом (как
   heading-band в The7, но в наших цветах). Живёт над <main>, встык под шапкой.
   Baseline: сплошной surface + hairline снизу — читаемо без стекла. */
.cp-masthead {
	background-color: var(--cp-surface);
	border-bottom: 1px solid var(--cp-hairline);
}
.cp-masthead__title {
	margin: 0;
}
/* Мета-строка мачты (счётчик архива) — приглушённый моно. */
.cp-masthead__meta {
	margin: 0.35rem 0 0;
	color: var(--cp-muted);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.8rem;
	letter-spacing: 0.03em;
}

/* 11.3 Богатая мета single — строка «дата · время чтения», моноширинная и
   приглушённая; блоки внутри наследуют цвет/шрифт от контейнера. */
.cp-single-meta {
	color: var(--cp-muted);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.82rem;
	letter-spacing: 0.02em;
	align-items: center;
}
.cp-single-meta .wp-block-post-date,
.cp-single-meta p {
	margin: 0;
	color: var(--cp-muted);
}
.cp-single-meta .cp-dot {
	color: var(--cp-muted);
	opacity: 0.55;
}

/* Теги внизу поста — те же чипы, но «холодные» (# циан), чтобы визуально
   не спорить с рубрикой-пилюлей. Рендерятся только если у поста есть теги. */
.cp-tags a {
	display: inline-block;
	margin: 0 0.35rem 0.35rem 0;
	padding: 0.2em 0.6em;
	border: 1px solid var(--cp-hairline);
	border-radius: 999px;
	color: var(--cp-muted);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.72rem;
	text-decoration: none;
	transition: color 0.2s var(--cp-ease), border-color 0.2s var(--cp-ease);
}
.cp-tags a::before {
	content: "#";
	color: var(--cp-cyan);
	opacity: 0.8;
	transition: color 0.2s var(--cp-ease), opacity 0.2s var(--cp-ease);
}
.cp-tags a:hover {
	color: var(--cp-cyan);
	border-color: color-mix(in srgb, var(--cp-cyan) 45%, var(--cp-hairline));
}
/* На hover решётка # уходит в янтарь (акцент рубрики) — контрапункт к циан-тексту. */
.cp-tags a:hover::before {
	color: var(--cp-amber);
	opacity: 1;
}

/* 11.4 Featured-обложка — «закреплённый» пост крупной картой с градиент-
   шторкой (мотив PSD the7 «blog-grid-dark-grad-overlay»). Картинка = фон,
   текст поверх снизу. Baseline читаем без стекла: сплошной вертикальный
   градиент из base → прозрачного гарантирует контраст текста над фото. */
.cp-featured {
	position: relative;
	border: 1px solid var(--cp-hairline);
	border-radius: var(--cp-radius);
	overflow: hidden;
}
.cp-featured .wp-block-post-featured-image {
	margin: 0;
}
.cp-featured .wp-block-post-featured-image img {
	display: block;
	width: 100%;
}
.cp-featured-body {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: clamp(1rem, 3vw, 2rem);
	background: linear-gradient(
		to top,
		var(--cp-base) 8%,
		color-mix(in srgb, var(--cp-base) 72%, transparent) 55%,
		transparent 100%
	);
}
.cp-featured-body .wp-block-post-title {
	margin: 0;
}
.cp-featured-body .wp-block-post-title a {
	color: var(--cp-contrast);
	text-decoration: none;
}
.cp-featured-body .wp-block-post-title a:hover {
	color: var(--cp-amber);
}
.cp-featured-body .wp-block-post-excerpt {
	margin: 0;
	color: var(--cp-muted);
}
.cp-featured-body .wp-block-post-excerpt__more-text {
	display: none; /* обложке лишняя ссылка «читать» не нужна — кликается весь заголовок/фото */
}
/* Метка «Закреплено» в углу карточки. */
.cp-featured__flag {
	position: absolute;
	top: 0.9rem;
	left: 0.9rem;
	z-index: 2;
	margin: 0;
	padding: 0.2em 0.6em;
	border-radius: 999px;
	background-color: color-mix(in srgb, var(--cp-base) 70%, transparent);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--cp-cyan);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.66rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
/* Без backdrop-filter — плашка остаётся читаемой на плотном фоне. */
@supports not ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) {
	.cp-featured__flag {
		background-color: var(--cp-base);
	}
}

/* ==========================================================================
   12. Pillar-страницы: герой-кадр + сайдбар-облако тегов + перелинковка
   ========================================================================== */

/* 12.1 cp-hero — крупный вводный кадр pillar-страницы (in-content, идёт в паре
   со своим «паспортом генерации» cp-genpass). Дочерний page.html больше НЕ
   рендерит featured-обложку сверху, поэтому этот кадр — единственный герой:
   даём рамку/скругление в общем ключе темы. Скоуп на .wp-block-image: класс
   cp-hero ЗАНЯТ cover-героем главной (.wp-block-cover.cp-hero), иначе его
   min-height!important протёк бы на figure и растянул кадр. */
.wp-block-image.cp-hero {
	margin-block: 0 1.2rem;
}
.wp-block-image.cp-hero img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--cp-hairline);
	border-radius: var(--cp-radius);
}

/* 12.2 cp-tagcloud — облако тегов в сайдбаре (core/tag-cloud). Стиль перенесён
   с post-тегов .cp-tags (пилюля + решётка # циан, на hover # → янтарь), НО без
   фиксированного font-size: WP задаёт размер каждой метки ИНЛАЙНОМ (градация
   частот), и мы его НЕ трогаем — облако продолжает «дышать» размером. */
.cp-tagcloud {
	margin: 0;
	line-height: 1.9;
}
.cp-tagcloud a.tag-cloud-link {
	display: inline-block;
	margin: 0 0.35rem 0.35rem 0;
	padding: 0.2em 0.6em;
	border: 1px solid var(--cp-hairline);
	border-radius: 999px;
	color: var(--cp-muted);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	text-decoration: none;
	transition: color 0.2s var(--cp-ease), border-color 0.2s var(--cp-ease);
}
.cp-tagcloud a.tag-cloud-link::before {
	content: "#";
	color: var(--cp-cyan);
	opacity: 0.8;
	transition: color 0.2s var(--cp-ease), opacity 0.2s var(--cp-ease);
}
.cp-tagcloud a.tag-cloud-link:hover,
.cp-tagcloud a.tag-cloud-link:focus-visible {
	color: var(--cp-cyan);
	border-color: color-mix(in srgb, var(--cp-cyan) 45%, var(--cp-hairline));
}
.cp-tagcloud a.tag-cloud-link:hover::before,
.cp-tagcloud a.tag-cloud-link:focus-visible::before {
	color: var(--cp-amber);
	opacity: 1;
}

/* 12.3 cp-related — блок «Читайте по теме» в конце поста (двусторонний силос
   перелинковки). Живёт в КОНТЕНТЕ поста (core separator+heading+list) — тема
   только оформляет. Циановые стрелки-маркеры, hover-подчёркивание. */
.cp-related {
	margin-block-start: 2.4rem;
	padding: 1.1rem;
	border: 1px solid color-mix(in srgb, var(--cp-amber) 40%, var(--cp-hairline)); /* та же окантовка, что у виджета «В Telegram» (.cp-widget-accent) */
	border-radius: var(--cp-radius);
	background-color: var(--cp-surface);
}
@supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) {
	.cp-related {
		background-color: color-mix(in srgb, var(--cp-surface) 55%, transparent);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
	}
	@media (prefers-reduced-transparency: reduce) {
		.cp-related { background-color: var(--cp-surface); }
	}
}
/* Внутри карточки core-разделитель лишний — рамка сама отделяет блок. */
.cp-related .wp-block-separator { display: none; }
.cp-related h3 {
	margin-block: 0 0.7rem;
	color: var(--cp-cyan); /* как заголовок виджета сайдбара */
}
.cp-related-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.cp-related-list li {
	margin: 0;
	padding-left: 1.3rem;
	position: relative;
}
.cp-related-list li::before {
	content: "\2192"; /* → */
	position: absolute;
	left: 0;
	color: var(--cp-cyan);
}
.cp-related-list li > a {
	color: var(--cp-contrast);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.cp-related-list li > a:hover,
.cp-related-list li > a:focus-visible {
	color: var(--cp-cyan);
	border-bottom-color: currentColor;
}

/* 12.4 cp-guides — «Путеводители» (pillar-страницы) сеткой на главной над
   рубриками. Ровно 3 карточки → фиксируем 3→1 (WP auto-fill резервировал бы
   пустой трек справа, как у .cp-rubrics). Карточки — те же .cp-card. */
.wp-block-group.cp-guides {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}
@media (max-width: 781px) {
	.wp-block-group.cp-guides { grid-template-columns: 1fr; }
}

/* ==========================================================================
   13. Пагинация ленты (query-pagination) — под тёмную тему: номера страниц
   чипами, текущая — циановой заливкой, «Пред./Следующая» моноширинно
   янтарь→циан. Без стилей рендерились голыми ссылками («1 2 Следующая»).
   ========================================================================== */
.wp-block-query-pagination {
	gap: 0.5rem 1rem;
	align-items: center;
	flex-wrap: wrap;
}
.wp-block-query-pagination-numbers {
	display: flex;
	gap: 0.35rem;
	align-items: center;
}
.wp-block-query-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	height: 2rem;
	padding: 0 0.5rem;
	border: 1px solid var(--cp-hairline);
	border-radius: 8px;
	color: var(--cp-muted);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.85rem;
	text-decoration: none;
	transition: color 0.15s var(--cp-ease), border-color 0.15s var(--cp-ease);
}
.wp-block-query-pagination a.page-numbers:hover {
	color: var(--cp-cyan);
	border-color: color-mix(in srgb, var(--cp-cyan) 45%, var(--cp-hairline));
}
.wp-block-query-pagination .page-numbers.current {
	color: var(--cp-base);
	background-color: var(--cp-cyan);
	border-color: var(--cp-cyan);
	font-weight: 600;
}
.wp-block-query-pagination .page-numbers.dots {
	min-width: auto;
	border-color: transparent;
	color: var(--cp-muted);
}
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.85rem;
	color: var(--cp-amber);
	text-decoration: none;
	transition: color 0.15s var(--cp-ease);
}
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
	color: var(--cp-cyan);
}

/* ==========================================================================
   14. Карточка персоны (.cp-person) — врезка о реальном человеке, упомянутом
   в тексте: имя, кто это, 2-3 фотографии и строка атрибуции. Фото берутся
   ТОЛЬКО из Wikimedia Commons под свободными лицензиями (pipeline/person_card.py),
   поэтому подпись с автором и лицензией — не украшение, а условие использования:
   она обязана быть видимой. Та же логика, что у «паспорта генерации» в секции 9 —
   показываем, откуда взялось изображение.
   ========================================================================== */
.cp-person {
	margin-block: 1.6rem;
	padding: 1rem 1.15rem 0.9rem;
	border: 1px solid var(--cp-hairline);
	border-left: 2px solid var(--cp-amber); /* врезка сбоку — не спорит с текстом статьи */
	border-radius: var(--cp-radius);
	background-color: var(--cp-surface);
}

@supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) {
	.cp-person {
		background-color: color-mix(in srgb, var(--cp-surface) 60%, transparent);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
	}
	@media (prefers-reduced-transparency: reduce) {
		.cp-person { background-color: var(--cp-surface); }
	}
}

/* Имя — как заголовок врезки, но тише h3 статьи: это справка, а не новый раздел. */
.cp-person__name {
	margin: 0 0 0.25rem;
	font-size: 1.05rem;
	line-height: 1.25;
	color: var(--cp-amber);
}

.cp-person__role {
	margin: 0 0 0.9rem;
	font-size: 0.9rem;
	line-height: 1.45;
	color: var(--cp-muted);
}

/* Галерея: ровный ряд, кадры одной высоты — лица не должны «прыгать» по строке.
   Клик открывает нативный лайтбокс WP, поэтому курсор-указатель осмыслен. */
.cp-person__gallery.wp-block-gallery {
	gap: 0.6rem;
	margin-block-end: 0.75rem;
}
.cp-person__gallery.wp-block-gallery .wp-block-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center 25%; /* лица обычно в верхней трети кадра */
	border-radius: calc(var(--cp-radius) / 1.5);
	border: 1px solid var(--cp-hairline);
	cursor: zoom-in;
}

/* Атрибуция — техническая строка, поэтому моноширинная и приглушённая,
   как параметры генерации. Мелкая, но не невидимая: это требование лицензии. */
.cp-person__credit {
	margin: 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.72rem;
	line-height: 1.55;
	color: var(--cp-muted);
	overflow-wrap: anywhere;
}
.cp-person__credit a {
	color: var(--cp-muted);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	transition: color 0.15s var(--cp-ease);
}
.cp-person__credit a:hover { color: var(--cp-cyan); }

/* На узком экране галерея схлопывается в два кадра в ряд — три превращаются
   в марки. Ниже 380px — один в ряд. */
@media (max-width: 640px) {
	.cp-person { padding: 0.85rem 0.9rem 0.75rem; }
	.cp-person__gallery.wp-block-gallery.columns-3 .wp-block-image { width: calc(50% - 0.3rem); }
}
@media (max-width: 380px) {
	.cp-person__gallery.wp-block-gallery.columns-3 .wp-block-image { width: 100%; }
}

/* Оглавление лонгрида (cp-toc). Врезается фильтром `the_content` в functions.php —
   только если в посте набралось три и больше <h2>; якоря заголовкам проставляются
   там же. Карточка держится в габаритах виджета сайдбара, но живёт в колонке текста,
   поэтому нумерация и моноширинный заголовок, а не h4-циан. */
.cp-toc {
	margin: 0 0 1.6rem;
	padding: 1rem 1.1rem;
	border: 1px solid var(--cp-hairline);
	border-left: 2px solid color-mix(in srgb, var(--cp-amber) 55%, var(--cp-hairline));
	border-radius: var(--cp-radius);
	background-color: var(--cp-surface);
}
@supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) {
	.cp-toc {
		background-color: color-mix(in srgb, var(--cp-surface) 55%, transparent);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
	}
}
.cp-toc__title {
	margin: 0 0 0.6rem;
	color: var(--cp-muted);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.cp-toc__list {
	margin: 0;
	padding-left: 1.15rem;
	font-size: 0.95rem;
	line-height: 1.5;
}
.cp-toc__list li { margin: 0 0 0.35rem; }
.cp-toc__list li::marker {
	color: var(--cp-cyan);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.85em;
}
.cp-toc__list a {
	color: var(--cp-contrast);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.2s var(--cp-ease), border-color 0.2s var(--cp-ease);
}
.cp-toc__list a:hover,
.cp-toc__list a:focus-visible {
	color: var(--cp-amber);
	border-bottom-color: color-mix(in srgb, var(--cp-amber) 45%, transparent);
}