/* Owls Cubed — owlscubed.com
   Палитра и типографика перенесены 1:1 из макета "Owls Cubed.dc.html".
   Цвета заданы в oklch с hex-фолбэком для старых движков.

   Тем две: тёмная (по умолчанию, :root) и светлая — html[data-theme='light'],
   перенесённая с палитры Sepia из bedrock-tools.dev. Атрибут ставит js/theme.js. */

:root {
	color-scheme: dark;
	--bg: #14161f;
	--bg-86: rgba(20, 22, 31, 0.86); /* полупрозрачная шапка */
	--panel: #1c1f2b;
	--panel-2: #20232f; /* между --panel и --panel-lift: иначе полосатая подложка плейсхолдеров сливается */
	--panel-lift: #242734;
	--line: #333a4d;
	--line-55: rgba(51, 58, 77, 0.55); /* нижняя граница шапки */
	--text: #f6f4ef;
	--muted: #a8adba;
	--muted-2: #969ca9;
	/* нижние три ступени рампы = один цвет: 4.5:1 на --bg. Ниже для текста не опускаться */
	--muted-3: #838a99;
	--muted-4: #838a99;
	--muted-5: #838a99;
	--gold: #f0b34b;
	--gold-hi: #ffca6b;
	--gold-40: rgba(240, 179, 75, 0.4); /* рамка чипа на флагманских карточках */
	--gold-45: rgba(240, 179, 75, 0.45); /* рамка кнопки Get on Marketplace */
	--blue: #62b4f0;
	--blue-hi: #8ccdff;
	--tools-bg: #171d2b;
	/* текст поверх заливки акцентом (золото/синий) — в тёмной теме это сам фон */
	--on-accent: var(--bg);

	--sans: 'Space Grotesk', system-ui, -apple-system, Segoe UI, sans-serif;
	--mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
	--wrap: 1340px;
	--gap-section: clamp(72px, 8vw, 120px);
	--gap-block: clamp(56px, 6vw, 80px);
	--pad: clamp(20px, 4vw, 40px);
}

@supports (color: oklch(0.5 0.1 200)) {
	:root {
		--bg: oklch(0.155 0.013 262);
		--bg-86: oklch(0.155 0.013 262 / 0.86);
		--panel: oklch(0.198 0.015 262);
		--panel-2: oklch(0.222 0.016 262);
		--panel-lift: oklch(0.245 0.016 262);
		--line: oklch(0.315 0.017 262);
		--line-55: oklch(0.315 0.017 262 / 0.55);
		--text: oklch(0.965 0.005 95);
		--muted: oklch(0.715 0.013 262);
		--muted-2: oklch(0.65 0.013 262);
		/* 0.58 даёт 4.56:1 на oklch-фоне — в упор; 0.60 = 4.95:1 с запасом */
		--muted-3: oklch(0.60 0.013 262);
		--muted-4: oklch(0.60 0.013 262);
		--muted-5: oklch(0.60 0.013 262);
		--gold: oklch(0.80 0.145 78);
		--gold-hi: oklch(0.88 0.145 78);
		--gold-40: oklch(0.80 0.145 78 / 0.4);
		--gold-45: oklch(0.80 0.145 78 / 0.45);
		--blue: oklch(0.80 0.145 208);
		--blue-hi: oklch(0.88 0.145 208);
		--tools-bg: oklch(0.178 0.018 240);
	}
}

/* ---------- светлая тема ----------
   Палитра Sepia с bedrock-tools.dev (тёплая бумага, мало синего). Токены
   переименованы под здешнюю схему: --panel = surface, --panel-lift = surface2,
   --panel-2 = checker, --muted = dim, --muted-2..5 = muted/faint,
   --gold = amber, --blue = cyan, --tools-bg = band.

   Четыре ступени взяты чуть темнее оригинала (в скобках — значение Sepia):
   --muted 0.455 (0.478), --muted-2..5 0.475 (0.513), --gold 0.499 (0.520),
   --blue 0.463 (0.495). Здесь на них держится мелкий mono-текст (10-11px
   лейблы, чипы, подписи), и на исходных значениях он давал 3.9-4.1:1 —
   то же, что --muted-3 в тёмной теме, поднятый до 4.5:1 строкой выше. */
html[data-theme='light'] {
	color-scheme: light;
	--bg: #e0d9cd;
	--bg-86: rgba(224, 217, 205, 0.86);
	--panel: #ebe5dc;
	--panel-2: #e4ded4;
	--panel-lift: #d6cec1;
	--line: #c1b9ac;
	--line-55: rgba(193, 185, 172, 0.9); /* светлым нужна граница плотнее: 0.55 растворяется */
	--text: #3f342c;
	--muted: #5e554e;
	--muted-2: #625b55;
	--muted-3: #625b55;
	--muted-4: #625b55;
	--muted-5: #625b55;
	--gold: #974b00;
	--gold-hi: #813700;
	--gold-40: rgba(151, 75, 0, 0.4);
	--gold-45: rgba(151, 75, 0, 0.45);
	--blue: #006772;
	--blue-hi: #00535e;
	--tools-bg: #e3d3c5;
	/* на светлом акценте текст не может быть фоном страницы — он почти той же светлоты */
	--on-accent: #f8f3eb;
}

@supports (color: oklch(0.5 0.1 200)) {
	html[data-theme='light'] {
		--bg: oklch(0.888 0.018 80);
		--bg-86: oklch(0.888 0.018 80 / 0.86);
		--panel: oklch(0.925 0.014 80);
		--panel-2: oklch(0.902 0.015 80);
		--panel-lift: oklch(0.855 0.020 80);
		--line: oklch(0.788 0.020 80);
		--line-55: oklch(0.788 0.020 80 / 0.9);
		--text: oklch(0.335 0.020 60);
		--muted: oklch(0.455 0.016 60);
		--muted-2: oklch(0.475 0.013 60);
		--muted-3: oklch(0.475 0.013 60);
		--muted-4: oklch(0.475 0.013 60);
		--muted-5: oklch(0.475 0.013 60);
		--gold: oklch(0.499 0.125 55);
		--gold-hi: oklch(0.430 0.125 55);
		--gold-40: oklch(0.499 0.125 55 / 0.4);
		--gold-45: oklch(0.499 0.125 55 / 0.45);
		--blue: oklch(0.463 0.095 205);
		--blue-hi: oklch(0.393 0.095 205);
		--tools-bg: oklch(0.876 0.026 62);
		--on-accent: oklch(0.965 0.012 80);
	}
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
	background: var(--bg);
	color: var(--text);
	font-family: var(--sans);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--gold); }
input, select, button, textarea { font: inherit; color: inherit; }
img { max-width: 100%; }
::selection { background: var(--gold); color: var(--on-accent); }
::placeholder { color: var(--muted-4); }

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

/* Цель skip-link'а фокусируется программно — рамка вокруг всей страницы не нужна */
#main:focus, #main:focus-visible { outline: none; }

/* Липкая шапка перекрывает якорь, на который прыгнули; высота шапки зависит от
   переносов внутри неё, поэтому отступ задаём по брейкпоинтам, а не константой */
:root { --anchor-offset: 96px; }
@media (max-width: 780px) { :root { --anchor-offset: 164px; } }
@media (max-width: 340px) { :root { --anchor-offset: 186px; } }
#main, section[id] { scroll-margin-top: var(--anchor-offset); }

.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	background: var(--gold); color: var(--on-accent); padding: 12px 18px;
	font: 500 14px/1 var(--sans);
}
.skip-link:focus { left: 0; color: var(--on-accent); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

/* ---------- header ---------- */

.topbar {
	position: sticky; top: 0; z-index: 50;
	background: var(--bg-86);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--line-55);
}
.topbar-in {
	min-height: 70px; display: flex; flex-wrap: wrap; align-items: center;
	gap: 14px 26px; padding-top: 12px; padding-bottom: 12px;
}
.brand { display: flex; align-items: center; gap: 13px; flex-shrink: 0; }
.brand img { height: 38px; width: auto; display: block; }
.brand span { font: 700 16px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; }

.nav { display: flex; align-items: center; gap: 28px; margin-left: auto; font: 500 13.5px/1 var(--sans); }
.nav a { color: var(--muted); }
.nav a:hover, .nav a[aria-current='page'] { color: var(--text); }

.btn-ghost-gold {
	flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px;
	height: 38px; padding: 0 18px; border: 1px solid var(--gold); color: var(--gold);
	font: 500 13px/1 var(--mono); letter-spacing: 0.04em;
	transition: background .18s, color .18s;
}
.btn-ghost-gold:hover { background: var(--gold); color: var(--on-accent); }
.btn-ghost-gold .arr { font-size: 11px; }

/* Marketplace и переключатель темы переносятся как одна группа. Поодиночке
   переключатель в полосе ~470-520px уезжал на собственную третью строку, и шапка
   становилась выше --anchor-offset — якорные переходы вставали под неё. */
.topbar-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

/* Переключатель темы: без JS переключать нечего, поэтому кнопка появляется
   только когда theme.js повесил html.js — иначе в шапке висел бы мёртвый контрол. */
.theme-toggle { display: none; }
html.js .theme-toggle {
	flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; padding: 0; border: 1px solid var(--line);
	background: transparent; color: var(--muted); cursor: pointer;
	transition: border-color .18s, color .18s;
}
.theme-toggle:hover { color: var(--text); border-color: var(--muted-4); }
.theme-toggle svg { display: block; }
/* Иконка показывает, куда переключит: в тёмной теме солнце, в светлой месяц. */
.theme-toggle .ic-moon { display: none; }
html[data-theme='light'] .theme-toggle .ic-sun { display: none; }
html[data-theme='light'] .theme-toggle .ic-moon { display: block; }

/* ---------- hero ---------- */

.hero { padding-top: var(--gap-section); display: flex; flex-wrap: wrap; gap: 52px 72px; align-items: flex-end; }
.hero-copy { flex: 1.55 1 400px; min-width: 0; }

.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 34px; }
.eyebrow .dot { width: 6px; height: 6px; background: var(--gold); animation: ocBlink 2.4s ease-in-out infinite; }
.eyebrow .txt, .kicker {
	font: 500 11px/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
}
@keyframes ocBlink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
	.eyebrow .dot { animation: none; }
	* { transition-duration: .01ms !important; animation-duration: .01ms !important; }
	html { scroll-behavior: auto; }
}

h1.display {
	font: 700 clamp(31px, 6vw, 80px)/0.98 var(--sans);
	letter-spacing: -0.04em; margin: 0 0 30px; max-width: 18ch; text-wrap: balance;
}
h1.display .gold { color: var(--gold); }

.lede { font: 400 19px/1.6 var(--sans); color: var(--muted); max-width: 56ch; margin: 0 0 40px; text-wrap: pretty; }

.cta-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-solid {
	display: inline-flex; align-items: center; gap: 12px; height: 54px; padding: 0 30px;
	background: var(--gold); color: var(--on-accent); font: 500 15px/1 var(--sans);
	transition: background .18s;
}
.btn-solid:hover { background: var(--gold-hi); color: var(--on-accent); }
.btn-solid .mono { font: 500 13px/1 var(--mono); }
.btn-outline {
	display: inline-flex; align-items: center; gap: 12px; height: 54px; padding: 0 30px;
	border: 1px solid var(--line); color: var(--text); font: 500 15px/1 var(--sans);
	transition: border-color .18s, color .18s;
}
.btn-outline:hover { border-color: var(--blue); color: var(--blue); }
.btn-outline .mono { font: 500 12px/1 var(--mono); }

.stats {
	flex: 1 1 300px; min-width: 0; display: grid; grid-template-columns: 1fr 1fr;
	border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.stat { padding: 26px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat b { display: block; font: 700 40px/1 var(--sans); letter-spacing: -0.03em; }
.stat b .gold { color: var(--gold); }
.stat b.blue { color: var(--blue); }
/* только прямой потомок: иначе правило ловит и <span class="gold"> внутри числа
   и разваливает «53K+» на три блочные строки разными шрифтами */
.stat > span {
	display: block; font: 400 11px/1.4 var(--mono); letter-spacing: 0.12em;
	text-transform: uppercase; color: var(--muted-3); margin-top: 10px;
}

/* ---------- section headers ---------- */

.section { padding-top: var(--gap-section); }
.section-head {
	display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
	padding-bottom: 24px; border-bottom: 1px solid var(--line); margin-bottom: 44px;
}
.section-head.tight { margin-bottom: 0; }
.section-head h2 { font: 700 clamp(25px, 3.2vw, 44px)/1 var(--sans); letter-spacing: -0.035em; margin: 0; }
.section-head .note { font: 400 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-3); }
.section-head .more { font: 500 13px/1 var(--mono); color: var(--gold); }

/* ---------- product cards ---------- */

/* Порог 340px держит три карточки в ряд на десктопе (контент максимум 1260px:
   (1260+28)/(340+28) = 3.5), поэтому шесть флагманов ложатся двумя ровными
   рядами по три, а не 4+2. Ниже ~1030px становится две колонки, на телефоне одна. */
.grid-featured { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 28px; }
.grid-products {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 288px), 1fr));
	gap: 24px; padding-bottom: 40px;
}

.card {
	display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line);
	transition: border-color .18s, transform .18s;
}
.card:hover { border-color: var(--gold); transform: translateY(-4px); }
/* Флагманы — сплошная подложка без внутреннего отступа, как в макете;
   карточки каталога — полосатая подложка и отступ 16px под текст-заглушку. */
.card-shot {
	position: relative; overflow: hidden; aspect-ratio: 16/9; background: var(--panel-lift);
	display: flex; align-items: center; justify-content: center;
}
.grid-products .card-shot {
	padding: 16px;
	background: repeating-linear-gradient(135deg, var(--panel-lift) 0 6px, var(--panel-2) 6px 12px);
}
.card-shot img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.card:hover .card-shot img { transform: scale(1.06); }
/* квадратные превью персон: показываем целиком, без кропа под 16:9;
   подложка сплошная — полоски вокруг квадрата читались бы как шум */
.grid-products .card-shot.square { background: var(--panel-lift); }
.card-shot.square img { object-fit: contain; }
.card-shot .ph {
	font: 400 10.5px/1.6 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--muted-4); text-align: center;
}
.card-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.grid-products .card-body { padding: 20px; }
.card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.grid-products .card-top { justify-content: space-between; }
.tag {
	font: 500 10px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--gold); border: 1px solid var(--gold-40); padding: 5px 8px;
}
.tag.plain { color: var(--muted-2); border-color: var(--line); }
.card-meta { font: 400 11.5px/1 var(--mono); color: var(--muted-3); white-space: nowrap; }
.card h3 { font: 700 23px/1.15 var(--sans); letter-spacing: -0.02em; margin: 0 0 12px; }
.grid-products .card h3 { font-size: 18.5px; line-height: 1.22; margin-bottom: 10px; }
.card p {
	font: 400 14.5px/1.55 var(--sans); color: var(--muted); margin: 0 0 22px; text-wrap: pretty;
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
	min-height: calc(3 * 1.55em);
}
.grid-products .card p { font-size: 13.5px; color: var(--muted-2); margin-bottom: 20px; -webkit-line-clamp: 2; min-height: calc(2 * 1.55em); }
.card-foot {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line);
}
.grid-products .card-foot { padding-top: 16px; }
.price { font: 500 14px/1 var(--mono); }
.price small { color: var(--muted-3); font-size: 11px; }
/* .get удалён: и на главной, и в каталоге действие оформлено одинаково — .get-box */
.get-box {
	font: 500 11.5px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--gold); border: 1px solid var(--gold-45); padding: 8px 11px;
	transition: background .18s, color .18s;
}
.card:hover .get-box { background: var(--gold); color: var(--on-accent); }

/* Persona-предметы не листятся в веб-каталоге Mojang: карточка не ссылка,
   вместо кнопки — пометка, что купить их можно только из игры. */
.card-static { border-color: color-mix(in oklab, var(--line) 55%, transparent); }
.card-static:hover { border-color: color-mix(in oklab, var(--line) 55%, transparent); transform: none; }
.in-game {
	font: 500 11.5px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--muted-4); border: 1px solid transparent; padding: 8px 0;
}

/* ---------- category tiles ---------- */

.cats {
	display: grid; grid-template-columns: repeat(5, 1fr);
	border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
@media (max-width: 1000px) {
	.cats { grid-template-columns: repeat(3, 1fr); }
	.cats > :last-child { grid-column: span 2; }
}
@media (max-width: 640px) {
	.cats { grid-template-columns: repeat(2, 1fr); }
}
.cat {
	padding: 34px 22px 30px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
	display: block; transition: background .18s;
}
.cat:hover { background: var(--panel); }
.cat b { display: block; font: 700 34px/1 var(--sans); letter-spacing: -0.03em; margin-bottom: 12px; }
.cat .label { display: block; font: 500 14px/1.3 var(--sans); margin-bottom: 6px; }
.cat .note { display: block; font: 400 11px/1.4 var(--mono); color: var(--muted-3); }

/* ---------- tools band ---------- */

.tools {
	margin-top: var(--gap-section); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
	background: var(--tools-bg);
}
.tools-in { padding-top: var(--gap-block); padding-bottom: var(--gap-block); display: flex; flex-wrap: wrap; gap: 52px 80px; align-items: flex-start; }
.tools-copy { flex: 1 1 360px; min-width: 0; }
.tools-copy .kicker { display: block; color: var(--blue); margin-bottom: 26px; }
.tools-copy h2 { font: 700 clamp(28px, 4.4vw, 62px)/0.98 var(--sans); letter-spacing: -0.04em; margin: 0 0 24px; }
.tools-copy h2 .blue { color: var(--blue); }
.tools-copy p { font: 400 17.5px/1.6 var(--sans); color: var(--muted); margin: 0 0 32px; max-width: 48ch; text-wrap: pretty; }
.tools-copy p code { font-family: var(--mono); font-size: 15px; color: var(--text); }
.btn-solid-blue {
	display: inline-flex; align-items: center; gap: 12px; height: 52px; padding: 0 28px;
	background: var(--blue); color: var(--on-accent); font: 500 15px/1 var(--sans); transition: background .18s;
}
.btn-solid-blue:hover { background: var(--blue-hi); color: var(--on-accent); }
.btn-outline-blue {
	display: inline-flex; align-items: center; height: 52px; padding: 0 28px;
	border: 1px solid var(--line); font: 500 15px/1 var(--sans); transition: border-color .18s, color .18s;
}
.btn-outline-blue:hover { border-color: var(--blue); color: var(--blue); }

.tool-list { flex: 1.1 1 340px; min-width: 0; border-top: 1px solid var(--line); }
.tool-row {
	display: grid; grid-template-columns: 28px minmax(0, 1fr) 16px; gap: 16px; align-items: baseline;
	padding: 20px 4px; border-bottom: 1px solid var(--line); transition: padding-left .18s;
}
.tool-row:hover { padding-left: 14px; }
.tool-row:hover .name { color: var(--blue); }
.tool-row .no { font: 400 11px/1.4 var(--mono); color: var(--muted-4); }
.tool-row .name { display: block; font: 500 16.5px/1.3 var(--sans); margin-bottom: 5px; }
.tool-row .desc { display: block; font: 400 13px/1.5 var(--sans); color: var(--muted-2); }
.tool-row .arr { font: 400 12px/1.4 var(--mono); color: var(--blue); }
.tool-more { display: block; padding: 20px 4px; font: 400 13px/1 var(--mono); color: var(--muted-3); }
.tool-more:hover { color: var(--blue); }

/* ---------- studio ---------- */

.studio { display: flex; flex-wrap: wrap; gap: 40px 80px; }
.studio-head { flex: 0.85 1 300px; min-width: 0; }
.studio-head .kicker { display: block; color: var(--gold); margin-bottom: 22px; }
.studio-head h2 { font: 700 clamp(25px, 3.2vw, 44px)/1.02 var(--sans); letter-spacing: -0.035em; margin: 0; }
.studio-body { flex: 1.15 1 420px; min-width: 0; }
.studio-body p { font: 400 16.5px/1.65 var(--sans); color: var(--muted); margin: 0 0 22px; text-wrap: pretty; }
.studio-body p:first-child { font-size: 19px; line-height: 1.62; color: var(--text); }
.studio-body p:last-child { margin-bottom: 0; }

/* ---------- connect ---------- */

.socials {
	display: grid; grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
@media (max-width: 900px) {
	.socials { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.socials { grid-template-columns: 1fr; }
}
.social {
	padding: 32px 26px 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
	display: flex; flex-direction: column; gap: 8px; transition: background .18s;
}
.social:hover { background: var(--panel); }
.social .name {
	display: flex; align-items: center; justify-content: space-between;
	font: 700 20px/1.2 var(--sans); letter-spacing: -0.02em;
}
.social .name .arr { font: 400 13px/1 var(--mono); color: var(--gold); }
.social .desc { font: 400 13px/1.5 var(--sans); color: var(--muted-2); }
.social .handle { font: 400 11.5px/1 var(--mono); color: var(--muted-4); margin-top: 10px; }

/* ---------- products page ---------- */

.products-head { padding-top: 72px; }
.products-head .kicker { display: block; color: var(--gold); margin-bottom: 24px; }
.products-head h1 {
	font: 700 clamp(32px, 5.2vw, 80px)/0.96 var(--sans); letter-spacing: -0.045em; margin: 0 0 22px;
}
.products-head .lede { font-size: 18px; max-width: 60ch; margin-bottom: 44px; }

.filters {
	/* колонка поиска задана явно: у auto-колонки ширину диктует intrinsic-размер
	   input'а, и поле ужимается с макетных 340px */
	display: grid; grid-template-columns: minmax(240px, 340px) 1fr auto; gap: 16px 20px; align-items: center;
	padding-bottom: 22px; border-bottom: 1px solid var(--line);
}
@media (max-width: 1000px) {
	.filters { grid-template-columns: 1fr; }
}
.search {
	display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 16px;
	border: 1px solid var(--line); background: var(--panel); flex: 1 1 260px; max-width: 340px;
}
.search .slash { font: 400 13px/1 var(--mono); color: var(--muted-4); }
.search input { border: 0; background: transparent; outline: none; width: 100%; font: 400 14.5px/1 var(--sans); }
.search:focus-within { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.search:focus-within .slash { color: var(--gold); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
	min-height: 34px; padding: 0 13px; border: 1px solid var(--line); background: transparent;
	color: var(--muted); font: 500 12px/1 var(--mono); letter-spacing: 0.04em; cursor: pointer;
	transition: border-color .18s, color .18s;
}
.chip:hover { color: var(--text); border-color: var(--muted-4); }
.chip[aria-pressed='true'] { border-color: var(--gold); background: var(--gold); color: var(--on-accent); }
.chip .n { opacity: 0.6; }
/* колонку справа задаёт сама сетка .filters — margin-left: auto здесь оставался
   от флексового варианта и перебивал сброс в мобильном брейкпоинте */
.sorts { display: flex; align-items: center; gap: 10px; }
.sorts .lbl { font: 400 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-3); }
.sort {
	min-height: 34px; padding: 0 12px; border: 1px solid transparent; background: transparent;
	color: var(--muted-3); font: 500 12px/1 var(--mono); cursor: pointer; transition: color .18s;
}
.sort:hover { color: var(--text); }
.sort[aria-pressed='true'] { border-color: var(--line); background: var(--panel); color: var(--text); }

.result-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 20px 0 34px; }
.result-row .count { font: 400 12.5px/1 var(--mono); color: var(--muted-3); }
.result-row a { font: 500 12.5px/1 var(--mono); color: var(--gold); }

.empty-state { padding: 80px 0 60px; text-align: center; border-top: 1px solid var(--line); }
.empty-state b { display: block; font: 700 22px/1.3 var(--sans); margin-bottom: 12px; }
.empty-state span { font: 400 14px/1.5 var(--mono); color: var(--muted-3); }
[hidden] { display: none !important; }

/* ---------- footer ---------- */

.foot { margin-top: var(--gap-section); border-top: 1px solid var(--line); }
.foot-in { padding-top: 56px; padding-bottom: 44px; display: flex; flex-wrap: wrap; gap: 40px 56px; }
.foot-brand { flex: 1.4 1 300px; min-width: 0; }
.foot-brand .row { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.foot-brand .row img { height: 44px; width: auto; display: block; }
.foot-brand .row span { font: 700 15px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; }
.foot-brand p { font: 400 14px/1.6 var(--sans); color: var(--muted-2); margin: 0 0 16px; max-width: 44ch; }
.foot-brand .legal { font: 400 11.5px/1.6 var(--mono); color: var(--muted-4); max-width: 52ch; }
.foot-col { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.foot-col .head {
	font: 400 10.5px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--muted-4); margin-bottom: 6px;
}
.foot-col a { font: 400 14px/1 var(--sans); color: var(--muted); }
.foot-col a:hover { color: var(--text); }
.foot-col a.blue { color: var(--blue); }
.foot-col a.blue:hover { color: var(--blue-hi); }
.foot-copy { padding-bottom: 40px; font: 400 11.5px/1 var(--mono); color: var(--muted-5); }

/* Полноразмерной навигации нужно ~810px ширины .wrap (745px до того, как в шапке
   появился переключатель темы). Если ужимать её только с 720px, в полосе между
   этими значениями шапка переносится на две строки и становится ВЫШЕ, чем на узком
   экране, — поэтому у навигации свой, более ранний порог. Он же держит границу
   двухрядной шапки ниже 780px, под которую посчитан --anchor-offset. */
@media (max-width: 840px) {
	.nav { gap: 18px; font-size: 13px; }
}

@media (max-width: 720px) {
	/* вертикальные отступы теперь в --gap-section / --gap-block */
	.chip, .sort { min-height: 44px; }
	.btn-ghost-gold { height: 44px; }
	html.js .theme-toggle { width: 44px; height: 44px; }

	/* Ниже ~356px пять пунктов навигации переставали влезать в строку. Строка не
	   переносится, ужиматься .nav было нечему (нет min-width: 0) — и шапка
	   вылезала за экран, а вместе с ней ехала вся страница: на 320px документ
	   прокручивался вбок на 16px, «Connect» уходил за правый край. Скроллер, а
	   не перенос: лишний ряд сделал бы шапку выше --anchor-offset, под который
	   посчитаны отступы якорей. */
	.nav {
		min-width: 0;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		/* overflow-x включает и вертикальное отсечение, а оно срезает кольцо
		   фокуса на ссылках — возвращаем ему место */
		padding-block: 6px;
		margin-block: -6px;
	}
	.nav::-webkit-scrollbar { display: none; }
}

/* Горизонтальные скроллеры: край, за которым осталось содержимое, растворяем в
   фон. Полосы прокрутки на телефоне накладные — видны только во время жеста,
   поэтому обрезанный пункт читается как поломка, а не как «листай дальше».
   Атрибут ставит js/xscroll.js: end | start | both. */
[data-xscroll] { --xfade: 26px; }
[data-xscroll='end'] {
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--xfade)), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - var(--xfade)), transparent);
}
[data-xscroll='start'] {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 var(--xfade));
	mask-image: linear-gradient(to right, transparent, #000 var(--xfade));
}
[data-xscroll='both'] {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 var(--xfade), #000 calc(100% - var(--xfade)), transparent);
	mask-image: linear-gradient(to right, transparent, #000 var(--xfade), #000 calc(100% - var(--xfade)), transparent);
}