/*
Theme Name: Retroplay
Description: Retro game catalog with a built-in EmulatorJS player: NES, Sega, SNES, Game Boy. A classic theme with no Gutenberg and no jQuery.
Version: 1.4.5
Requires at least: 7.0
Tested up to: 7.0
Requires PHP: 8.5
License: GPL-3.0-or-later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: retroplay
*/

@layer reset, base, layout, parts;

@view-transition {
	navigation: auto;
}

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

	body, h1, h2, h3, p, ul, ol, dl, dd, figure {
		margin: 0;
	}

	img {
		display: block;
		max-inline-size: 100%;
		block-size: auto;
	}

	/* Иначе любой display в стилях ниже показал бы скрытый элемент. */
	[hidden] {
		display: none !important;
	}
}

@layer base {
	:root {
		/* Светлая и тёмная схема по настройке устройства: первое значение — светлая. */
		color-scheme: light dark;

		--bg: light-dark(#fff, #0e0f13);
		--bg-alt: light-dark(#f4f5f8, #16181e);
		--surface: light-dark(#fff, #1b1d24);
		--tile: light-dark(#1c1d24, #22242c);
		--line: light-dark(#e3e5ec, #2a2d36);
		--text: light-dark(#14151a, #f2f3f7);
		--muted: light-dark(#5d6170, #a3a8b5);
		--faint: light-dark(#8a8f9c, #7d8290);
		--accent: #ff4d2e;
		--accent-text: light-dark(#e23a1c, #ff7358);
		--on-accent: #fff;
		--shade: light-dark(rgb(20 21 26 / 0.06), rgb(0 0 0 / 0.3));
		--shadow: 0 1px 2px var(--shade), 0 4px 16px var(--shade);
		--shadow-hover: 0 8px 28px light-dark(rgb(20 21 26 / 0.16), rgb(0 0 0 / 0.55));

		--radius: 16px;
		--radius-sm: 10px;
		--header: 68px;
		--edge: max(20px, (100vw - 1240px) / 2);
		--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
		--mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

		accent-color: var(--accent);
		scroll-padding-block-start: calc(var(--header) + 1rem);
		scrollbar-gutter: stable;
		text-size-adjust: none;
	}

	body {
		display: grid;
		/* Колонка не шире экрана, каким бы широким ни было содержимое. */
		grid-template: auto 1fr auto / minmax(0, 1fr);
		min-block-size: 100dvh;
		background: var(--bg);
		color: var(--text);
		font: 1.0625rem / 1.55 system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
	}

	/* Стили элементов не заходят внутрь запущенного эмулятора: у него своя вёрстка. */
	@scope (:root) to (.player > div) {
		h1, h2, h3 {
			font-weight: 700;
			line-height: 1.15;
			letter-spacing: -0.02em;
			text-wrap: balance;
		}

		h1 {
			font-size: clamp(2.2rem, 6vw, 4.75rem);
			letter-spacing: -0.035em;
		}

		h2 {
			font-size: clamp(1.5rem, 3vw, 2rem);
		}

		p {
			text-wrap: pretty;
		}

		a {
			color: var(--accent-text);
			text-decoration: none;
		}

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

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

		button {
			border: 0;
			background: none;
			cursor: pointer;
		}

		kbd {
			display: inline-block;
			min-inline-size: 1.9em;
			padding: 0.05rem 0.4rem;
			border: 1px solid var(--line);
			border-radius: 6px;
			background: var(--surface);
			font: 0.8rem var(--mono);
			text-align: center;
		}
	}
}

@layer layout {
	.top {
		position: sticky;
		inset-block-start: 0;
		z-index: 10;
		display: flex;
		align-items: center;
		gap: 0.75rem;
		block-size: var(--header);
		padding-inline: var(--edge);
		border-block-end: 1px solid var(--line);
		background: color-mix(in srgb, var(--bg) 86%, transparent);
		backdrop-filter: saturate(1.8) blur(16px);

		/* Панель администратора WordPress занимает верх экрана. */
		.admin-bar & {
			inset-block-start: var(--wp-admin--admin-bar--height, 0px);
		}

		ul {
			padding: 0;
			list-style: none;
		}

		nav a {
			display: block;
			padding: 0.45rem 0.85rem;
			border-radius: 99px;
			color: var(--text);
			font-size: 0.9rem;
			font-weight: 500;
			transition: background-color 0.2s;

			&:hover,
			&[aria-current] {
				background: var(--bg-alt);
			}
		}

		search {
			inline-size: min(100%, 15rem);
		}

		/* Широкий экран: меню в строке, вложенные пункты — выпадающим списком. */
		@media (width >= 56rem) {
			nav {
				/* Атрибут popover скрывает элемент, пока он не открыт; здесь меню видно всегда. */
				position: static;
				display: block;
				inline-size: auto;
				block-size: auto;
				margin: 0 0 0 auto;
				padding: 0;
				border: 0;
				overflow: visible;
				background: none;
				color: inherit;
			}

			nav > ul {
				display: flex;
				gap: 0.15rem;
			}

			li {
				position: relative;
			}

			li:has(> ul) > a::after {
				content: "";
				display: inline-block;
				inline-size: 0.4em;
				aspect-ratio: 1;
				margin-inline-start: 0.45em;
				border: solid currentColor;
				border-width: 0 1.5px 1.5px 0;
				rotate: 45deg;
				translate: 0 -0.2em;
			}

			li > ul {
				position: absolute;
				inset-block-start: 100%;
				inset-inline-start: 0;
				display: grid;
				min-inline-size: 13rem;
				padding: 0.4rem;
				border: 1px solid var(--line);
				border-radius: 12px;
				background: var(--surface);
				box-shadow: var(--shadow-hover);
				opacity: 0;
				visibility: hidden;
				translate: 0 6px;
				transition: opacity 0.2s, translate 0.2s var(--ease), visibility 0.2s;

				/* Длинный список — в две колонки. */
				&:has(> li:nth-child(9)) {
					grid-template-columns: repeat(2, minmax(10rem, 1fr));
				}

				a {
					border-radius: 8px;
				}
			}

			li:is(:hover, :focus-within) > ul {
				opacity: 1;
				visibility: visible;
				translate: 0;
			}
		}

		/* Узкий экран: меню открывается кнопкой на весь экран под шапкой. */
		@media (width < 56rem) {
			search {
				flex: 1;
				min-inline-size: 0;
			}

			.logo {
				flex: none;
			}

			nav:popover-open {
				position: fixed;
				inset: var(--header) 0 auto;
				inline-size: 100%;
				max-block-size: calc(100dvh - var(--header));
				margin: 0;
				padding: 0.75rem var(--edge) 1.5rem;
				border: 0;
				border-block-end: 1px solid var(--line);
				overflow-y: auto;
				background: var(--bg);
				color: var(--text);
				box-shadow: var(--shadow-hover);
			}

			li > ul {
				padding-inline-start: 1rem;
			}
		}
	}

	main {
		min-inline-size: 0;

		> * {
			padding-inline: var(--edge);
		}

		> section {
			display: grid;
			gap: 1.5rem;
			padding-block: clamp(2.5rem, 6vw, 4.5rem);

			/* Сетка не должна растягиваться шире экрана из-за длинного содержимого. */
			> * {
				min-inline-size: 0;
			}
		}

		> .alt {
			background: var(--bg-alt);
		}

		/* После шапки страницы свой отступ уже есть. */
		> .hero + section:not(.alt) {
			padding-block-start: 1.5rem;
		}

		/* Личные списки посетителя (недавние, избранное) — компактнее обычных секций. */
		> [data-list] {
			padding-block: 0 2.5rem;
		}
	}

	body > footer {
		display: grid;
		gap: 0.9rem;
		padding: 2.5rem var(--edge);
		border-block-start: 1px solid var(--line);
		background: var(--bg-alt);
		color: var(--muted);
		font-size: 0.875rem;

		b {
			color: var(--text);
			font-size: 1.05rem;
		}

		ul {
			display: flex;
			flex-wrap: wrap;
			gap: 0.25rem 1.25rem;
			padding: 0;
			list-style: none;
		}

		a {
			color: inherit;

			&:hover {
				color: var(--text);
			}
		}
	}
}

@layer parts {
	/* Встроенный значок-логотип; загруженный в настройках сайта логотип идёт классом .custom-logo. */
	.logo {
		flex: none;
		border-radius: 12px;

		svg {
			display: block;
			transition: scale 0.2s var(--ease);
		}

		&:hover svg {
			scale: 1.06;
		}
	}

	.custom-logo {
		inline-size: auto;
		block-size: 44px;
	}

	.burger {
		display: grid;
		place-items: center;
		inline-size: 2.5rem;
		aspect-ratio: 1;
		border-radius: 50%;

		&::before {
			content: "";
			inline-size: 18px;
			block-size: 2px;
			border-radius: 2px;
			background: currentColor;
			box-shadow: 0 6px currentColor, 0 -6px currentColor;
		}

		&:hover {
			background: var(--bg-alt);
		}

		/* Нужна только на узком экране, где меню спрятано. */
		@media (width >= 56rem) {
			display: none;
		}
	}

	/* Поле и кнопка поиска — одна «таблетка»; обводка фокуса рисуется вокруг всей формы. */
	search form {
		display: flex;
		border: 1px solid var(--line);
		border-radius: 99px;
		background: var(--bg-alt);

		&:focus-within {
			outline: 2px solid var(--accent);
			outline-offset: 2px;
		}

		input {
			flex: 1;
			min-inline-size: 0;
			padding: 0.5rem 0 0.5rem 1.1rem;
			border: 0;
			background: none;
			font-size: 0.9rem;
			outline: none;
		}

		button {
			display: grid;
			place-items: center;
			padding-inline: 0.9rem;
			color: var(--muted);

			&:hover {
				color: var(--accent-text);
			}
		}
	}

	.hero {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		gap: 1.25rem;
		padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(2rem, 5vw, 3.5rem);
		text-align: center;

		h1 {
			max-inline-size: 18ch;
		}

		/* Заголовки внутренних страниц меньше, чем на главной. */
		&:has(.crumbs) h1 {
			max-inline-size: 24ch;
			font-size: clamp(2rem, 5vw, 3.6rem);
		}

		search {
			inline-size: min(100%, 35rem);
			margin-block-start: 0.5rem;

			form {
				background: var(--surface);
				box-shadow: var(--shadow);
			}

			input {
				padding-block: 0.9rem;
				padding-inline-start: 1.4rem;
				font-size: 1rem;
			}

			button {
				padding-inline: 1.3rem;
			}
		}
	}

	.crumbs {
		color: var(--faint);
		font-size: 0.78rem;

		ol {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: 0.4rem;
			padding: 0;
			list-style: none;
		}

		li + li::before {
			content: "›";
			margin-inline-end: 0.4rem;
		}

		a {
			color: var(--muted);

			&:hover {
				color: var(--text);
			}
		}
	}

	.eyebrow {
		color: var(--accent-text);
		font-size: 0.78rem;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	.lead {
		max-inline-size: 38rem;
		color: var(--muted);
		font-size: clamp(1.05rem, 2vw, 1.2rem);
	}

	.stats {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 1rem clamp(1.5rem, 5vw, 3.5rem);
		margin-block-start: 0.5rem;

		p {
			display: grid;
		}

		b {
			font-size: clamp(1.8rem, 4vw, 2.6rem);
			font-weight: 800;
			line-height: 1.1;
			letter-spacing: -0.03em;
		}

		span {
			color: var(--faint);
			font-size: 0.68rem;
			font-weight: 700;
			letter-spacing: 0.08em;
			text-transform: uppercase;
		}
	}

	/* Основная кнопка: «Играть», призывы к действию. */
	.cta {
		display: inline-flex;
		align-items: center;
		gap: 0.55rem;
		padding: 0.8rem 1.6rem;
		border-radius: 99px;
		background: var(--accent);
		box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent);
		color: var(--on-accent);
		font-size: 0.95rem;
		font-weight: 700;
		transition: translate 0.2s var(--ease), box-shadow 0.2s;
	}

	:is(a, button):hover > .cta,
	.cta:hover {
		box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 45%, transparent);
		translate: 0 -2px;
	}

	/* Второстепенная кнопка. */
	.btn {
		padding: 0.45rem 1rem;
		border-radius: 99px;
		background: var(--bg-alt);
		font-size: 0.85rem;
		font-weight: 600;
		transition: background-color 0.2s, color 0.2s;

		&:hover {
			background: var(--line);
		}

		&[aria-pressed="true"] {
			background: color-mix(in srgb, var(--accent) 14%, var(--surface));
			color: var(--accent-text);
		}
	}

	.head {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: 0.5rem 1.5rem;
	}

	.more {
		font-size: 0.9rem;
		font-weight: 600;

		&::after {
			content: " →";
		}

		&:hover {
			text-decoration: underline;
			text-underline-offset: 0.2em;
		}
	}

	.note {
		color: var(--muted);
		font-size: 0.9rem;
	}

	.head + .note {
		margin-block-start: -1.1rem;
	}

	.tiles {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(11rem, 45%), 1fr));
		gap: 1.25rem 1rem;
	}

	.tile {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: baseline;
		gap: 0.5rem;
		color: var(--text);

		span {
			grid-column: 1 / -1;
			display: grid;
			place-items: center;
			aspect-ratio: 3 / 2;
			padding: 0.75rem;
			border-radius: var(--radius);
			background: var(--tile);
			box-shadow: var(--shadow);
			color: #fff;
			font-size: clamp(1.05rem, 2vw, 1.4rem);
			font-weight: 800;
			letter-spacing: -0.03em;
			text-align: center;
			transition: translate 0.25s var(--ease), box-shadow 0.25s;
		}

		b {
			padding-inline-start: 0.2rem;
			font-size: 0.9rem;
			font-weight: 600;
		}

		small {
			color: var(--faint);
			font-size: 0.75rem;
		}

		&:hover span {
			box-shadow: var(--shadow-hover);
			translate: 0 -3px;
		}
	}

	.grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(13.5rem, 45%), 1fr));
		gap: 1.5rem 1rem;

		&.lg {
			grid-template-columns: repeat(auto-fill, minmax(min(17rem, 45%), 1fr));
		}
	}

	.shot {
		position: relative;
		display: block;
		aspect-ratio: 4 / 3;
		overflow: hidden;
		border-radius: var(--radius);
		background: var(--bg-alt);
		box-shadow: var(--shadow);
		transition: translate 0.25s var(--ease), box-shadow 0.25s;

		> * {
			inline-size: 100%;
			block-size: 100%;
			object-fit: cover;
		}
	}

	.card {
		display: grid;
		align-content: start;
		color: var(--text);

		.shot {
			margin-block-end: 0.65rem;
		}

		b {
			padding-inline: 0.2rem;
			font-size: 0.95rem;
			font-weight: 600;
			line-height: 1.3;
		}

		small {
			padding-inline: 0.2rem;
			color: var(--faint);
			font-size: 0.8rem;
		}

		/* При наведении обложка затемняется и появляется кнопка «Играть». */
		@media (hover: hover) {
			.shot::before,
			.shot::after {
				position: absolute;
				opacity: 0;
				transition: opacity 0.2s, translate 0.25s var(--ease);
			}

			.shot::before {
				content: "";
				inset: 0;
				background: rgb(14 15 19 / 0.45);
			}

			.shot::after {
				content: "Play";
				inset-block-start: 50%;
				inset-inline-start: 50%;
				padding: 0.5rem 1.2rem;
				border-radius: 99px;
				background: var(--accent);
				color: var(--on-accent);
				font-size: 0.85rem;
				font-weight: 700;
				translate: -50% -30%;
			}

			&:hover .shot {
				box-shadow: var(--shadow-hover);
				translate: 0 -3px;

				&::before,
				&::after {
					opacity: 1;
				}

				&::after {
					translate: -50% -50%;
				}
			}
		}
	}

	/* Плитка вместо обложки: один из восьми оттенков по атрибуту data-h. */
	.ph {
		--h: 265;

		display: grid;
		place-items: center;
		background: light-dark(oklch(93% 0.04 var(--h)), oklch(31% 0.05 var(--h)));
		color: light-dark(oklch(52% 0.12 var(--h)), oklch(82% 0.08 var(--h)));
		font-size: 2.5rem;
		font-weight: 700;

		&[data-h="1"] { --h: 25; }
		&[data-h="2"] { --h: 70; }
		&[data-h="3"] { --h: 140; }
		&[data-h="4"] { --h: 185; }
		&[data-h="5"] { --h: 235; }
		&[data-h="6"] { --h: 320; }
		&[data-h="7"] { --h: 355; }
	}

	/* Переключатель сортировки. */
	.seg {
		display: flex;
		justify-self: start;
		max-inline-size: 100%;
		padding: 0.25rem;
		border-radius: 99px;
		background: var(--bg-alt);

		a {
			padding: 0.4rem 0.95rem;
			border-radius: 99px;
			color: var(--muted);
			font-size: 0.85rem;
			font-weight: 600;
			white-space: nowrap;

			&:hover {
				color: var(--text);
			}

			&[aria-current] {
				background: var(--surface);
				box-shadow: var(--shadow);
				color: var(--text);
			}
		}
	}

	.chips {
		display: flex;
		flex-wrap: wrap;
		gap: 0.4rem;
		margin-block-start: -0.75rem;

		:is(a, button) {
			padding: 0.3rem 0.85rem;
			border-radius: 99px;
			background: var(--bg-alt);
			color: var(--muted);
			font-size: 0.85rem;
			transition: background-color 0.2s, color 0.2s;

			&:hover {
				background: var(--line);
				color: var(--text);
			}

			&:is([aria-current], [aria-pressed="true"]) {
				background: var(--text);
				color: var(--bg);
			}
		}
	}

	/* Выбор версии игры (регион, язык) над плеером. */
	.versions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.5rem 1rem;
		font-size: 0.9rem;

		.chips {
			margin: 0;
		}
	}

	.pages {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.4rem;
		margin-block-start: 1rem;

		> * {
			min-inline-size: 2.6rem;
			padding: 0.45rem 0.8rem;
			border-radius: 99px;
			background: var(--surface);
			box-shadow: var(--shadow);
			color: var(--text);
			font-size: 0.9rem;
			font-weight: 600;
			text-align: center;
		}

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

		[aria-current] {
			background: var(--text);
			color: var(--bg);
		}

		.dots {
			background: none;
			box-shadow: none;
		}
	}

	/* Страница игры: плеер и карточки под ним. */
	main > .game {
		gap: 1rem;
		padding-block-start: 0;
	}

	.player {
		position: relative;
		aspect-ratio: 16 / 9;
		max-block-size: 78dvh;
		inline-size: 100%;
		overflow: hidden;
		border-radius: var(--radius);
		background: radial-gradient(120% 90% at 50% 0%, #1e2130, #0e0f13 70%);
		box-shadow: var(--shadow);

		@media (width < 48rem) {
			aspect-ratio: 4 / 3;
		}

		/* На телефоне экранные кнопки занимают нижнюю часть плеера, поэтому он выше. */
		@media (pointer: coarse) and (orientation: portrait) {
			aspect-ratio: 2 / 3;
			max-block-size: 82dvh;
		}

		> div {
			block-size: 100%;
		}

		> button {
			position: absolute;
			inset: 0;
			display: grid;
			place-content: center;
			justify-items: center;
			gap: clamp(1rem, 3vw, 1.75rem);
			inline-size: 100%;
			padding: 1rem;

			img,
			.ph {
				inline-size: min(20rem, 42vw);
				aspect-ratio: 4 / 3;
				border-radius: 12px;
				box-shadow: 0 20px 50px rgb(0 0 0 / 0.5);
				object-fit: cover;
			}

			/* Значок «воспроизвести». */
			.cta::before {
				content: "";
				inline-size: 0.7em;
				aspect-ratio: 1;
				background: currentColor;
				clip-path: polygon(0 0, 100% 50%, 0 100%);
			}
		}

		/* Сообщения поверх тёмной сцены: цвета не зависят от схемы. */
		> p {
			position: absolute;
			inset: 0;
			display: grid;
			place-content: center;
			justify-items: center;
			gap: 0.9rem;
			padding: 1rem;
			color: #c9cdd4;
			text-align: center;

			button {
				padding: 0.5rem 1.2rem;
				border-radius: 99px;
				background: #fff;
				color: #14151a;
				font-size: 0.9rem;
				font-weight: 600;
			}
		}
	}

	.panel {
		display: grid;
		gap: 1rem;
		padding: clamp(1rem, 2.5vw, 1.6rem);
		border-radius: var(--radius);
		background: var(--surface);
		box-shadow: var(--shadow);

		> * {
			min-inline-size: 0;
		}

		h2 {
			font-size: 1.15rem;
		}

		.head {
			align-items: center;
		}
	}

	.about {
		h2 {
			margin-block-end: 0.75rem;
			font-size: clamp(1.35rem, 3vw, 1.9rem);
		}

		> img {
			inline-size: 100%;
			border-radius: 12px;
		}

		@media (width >= 44rem) {
			&:has(> img) {
				grid-template-columns: 17rem minmax(0, 1fr);
				align-items: start;
				gap: 1.5rem;
			}
		}
	}

	.facts {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;

		> div {
			min-inline-size: 7.5rem;
			padding: 0.55rem 0.95rem;
			border-radius: var(--radius-sm);
			background: var(--bg-alt);
		}

		dt {
			color: var(--faint);
			font-size: 0.65rem;
			font-weight: 700;
			letter-spacing: 0.06em;
			text-transform: uppercase;
		}

		dd {
			font-size: 0.9rem;
			font-weight: 700;
		}

		/* Сокращения регионов и языков: расшифровка во всплывающей подсказке. */
		abbr {
			text-decoration: none;
			cursor: help;
		}

		a:hover {
			text-decoration: underline;
			text-underline-offset: 0.2em;
		}
	}

	/* Подсказки по управлению: карточки по две в ряд, на узком экране — одна под другой. */
	.controls {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr));
		gap: 1rem;

		.panel {
			align-content: start;
		}

		/* Плитки кнопок одной ширины во всех четырёх карточках: сетка делит ряд поровну. */
		.facts {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
		}

		.facts > div {
			min-inline-size: 0;
			padding-inline: 0.5rem;
			text-align: center;
		}

		dd {
			display: flex;
			justify-content: center;
			gap: 2px;
			margin-block-start: 0.15rem;
			white-space: nowrap;
		}

		/* Фиксированная высота: значки вроде ✕ и ○ иначе делают плитку выше соседних. */
		kbd {
			display: grid;
			place-items: center;
			min-inline-size: 1.4em;
			block-size: 1.5rem;
			padding: 0 0.25rem;
			line-height: 1;
		}
	}

	.controls + .note {
		padding-inline: 0.25rem;
	}

	.adjacent {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
		gap: 1rem;
		margin-block-start: 1.5rem;

		a {
			display: flex;
			align-items: center;
			gap: 0.9rem;
			padding: 0.6rem;
			border-radius: var(--radius);
			background: var(--surface);
			box-shadow: var(--shadow);
			color: var(--text);
			transition: box-shadow 0.25s;

			&:hover {
				box-shadow: var(--shadow-hover);
			}
		}

		[rel="next"] {
			flex-direction: row-reverse;
			text-align: end;
		}

		.shot {
			flex: none;
			inline-size: 5.5rem;
			border-radius: var(--radius-sm);
			box-shadow: none;
		}

		.ph {
			font-size: 1.4rem;
		}

		small {
			display: block;
			color: var(--faint);
			font-size: 0.65rem;
			font-weight: 700;
			letter-spacing: 0.06em;
			text-transform: uppercase;
		}

		b {
			font-size: 0.95rem;
		}
	}

	.prose {
		max-inline-size: 47.5rem;
		overflow-wrap: anywhere;

		/* Текстовый блок секции стоит по центру, как на главной. */
		main > section > & {
			inline-size: 100%;
			margin-inline: auto;
		}

		> * + * {
			margin-block-start: 1em;
		}

		h2 {
			margin-block-start: 1.8em;
			font-size: clamp(1.4rem, 3vw, 1.75rem);
		}

		h3 {
			margin-block-start: 1.6em;
			font-size: 1.2rem;
		}

		:is(ul, ol) {
			padding-inline-start: 1.3em;
		}

		a {
			text-decoration: underline;
			text-underline-offset: 0.2em;
		}

		img {
			border-radius: var(--radius-sm);
		}

		.aligncenter {
			margin-inline: auto;
		}

		.alignleft {
			float: inline-start;
			margin-inline-end: 1rem;
		}

		.alignright {
			float: inline-end;
			margin-inline-start: 1rem;
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}

	* {
		transition: none !important;
	}
}