/*
 * Раздел «Работы»: архив и кейс.
 *
 * Холст светлый, как у страниц плагинов и как был у прежнего архива;
 * первый экран тёмный, потому что шапка у нас накладка и наверху
 * прозрачная. Палитра та же, что на страницах плагинов, — раздел
 * другой, а сайт один.
 *
 * Главный герой здесь снимок, а не текст: на работы приходят смотреть.
 * Поэтому обложка идёт сразу под заголовком и во всю ширину полосы,
 * а описание живёт под ней.
 *
 * Правила вложены в `.ssw` по той же причине, что на страницах
 * плагинов: пока на сайте живёт кит Elementor, одиночный селектор
 * он перебивает.
 */

.ssw {
	--ssw-bg: #f7f7f7;
	--ssw-surface: #ffffff;
	--ssw-ink: #101418;
	--ssw-dim: #6b7780;
	--ssw-line: rgba(16, 20, 24, 0.1);

	--ssw-dark: #0e0e0e;
	--ssw-dark-card: #171717;
	--ssw-dark-ink: #ffffff;
	--ssw-dark-muted: rgba(255, 255, 255, 0.66);

	--ssw-accent: #25cbc2;
	--ssw-accent-2: #1affd3;
	--ssw-accent-ink: #0d8b84;

	background: var(--ssw-bg);
	color: var(--ssw-ink);
	display: block;
	font-family: "Gotham Pro", system-ui, -apple-system, sans-serif;
	font-size: var(--ss-text);
	overflow-x: clip;
}

.ssw .ssw__inner {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: calc(var(--ss-shell) + var(--ss-gutter) * 2);
	padding-inline: var(--ss-gutter);
}

/* ------------------------------------------------------------- первый экран */

/*
 * Первый экран: градиент вместо плоской заливки и бегущий узор поверх.
 *
 * Узор — файл из медиатеки, а не из темы: правило сайта. Анимация
 * живёт внутри самого SVG, поэтому от нас нужен только фон и слой.
 *
 * Слой отдельным псевдоэлементом, а не фоном самого блока: под узором
 * должен оставаться градиент, а прозрачность задаётся один раз здесь,
 * не трогая содержимое.
 */
.ssw {
	/* Адрес узора — одной строкой: файл лежит в медиатеке, не в теме. */
	--ssw-uzor: url("https://sergeev.studio/wp-content/uploads/2026/09/pattern-s_16x9_1920x1080_1px_animated.svg");
}

.ssw .ssw__hero {
	background: linear-gradient(160deg, #111111 0%, #191919 55%, #111111 100%);
	border-end-end-radius: clamp(20px, 2.4vw, 36px);
	border-end-start-radius: clamp(20px, 2.4vw, 36px);
	color: var(--ssw-dark-ink);
	isolation: isolate;
	overflow: hidden;
	padding-block: calc(var(--ss-header-h, 78px) + clamp(36px, 6vh, 76px)) clamp(28px, 5vh, 56px);
	position: relative;
}

.ssw .ssw__hero::before {
	background: var(--ssw-uzor) no-repeat 50% 0 / cover;
	content: "";
	inset: 0;
	opacity: 0.5;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

/* Человеку, выключившему анимации, бегущий узор не нужен вовсе:
   останавливать SVG снаружи нечем, поэтому показываем неподвижный. */
@media (prefers-reduced-motion: reduce) {
	.ssw .ssw__hero::before {
		background-image: url("https://sergeev.studio/wp-content/uploads/2026/07/patt2-323232.svg");
	}
}

/* Название работы и город — одной строкой над заголовком: это подпись
   к кейсу, а не его тема. Тема — в H1. */
.ssw .ssw__label {
	align-items: center;
	color: var(--ssw-accent);
	display: flex;
	flex-wrap: wrap;
	font-size: 13px;
	gap: 8px 14px;
	letter-spacing: 0.1em;
	margin: 0 0 16px;
	text-transform: uppercase;
}

.ssw .ssw__gorod {
	color: var(--ssw-dark-muted);
	letter-spacing: 0.06em;
}

.ssw .ssw__gorod::before {
	content: "· ";
}

.ssw .ssw__title {
	color: var(--ssw-dark-ink);
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: var(--ss-h1);
	font-weight: 500;
	letter-spacing: -0.025em;
	line-height: 1.05;
	margin: 0;
	max-width: 20ch;
	text-transform: none;
}

.ssw .ssw__sajt {
	margin: clamp(14px, 2vh, 20px) 0 0;
}

.ssw .ssw__sajt a {
	border-block-end: 1px solid rgba(37, 203, 194, 0.4);
	color: var(--ssw-accent);
	text-decoration: none;
}

/* ----------------------------------------------------------------- снимок */

/*
 * Обложка — это снимок сайта целиком, картинка высокая. Показываем
 * её окном с ограниченной высотой и прижимаем к верхнему краю: первый
 * экран чужого сайта и есть то, ради чего сюда пришли. Целиком её
 * можно посмотреть на самом сайте, ссылка рядом.
 */
.ssw .ssw__snimok {
	background: var(--ssw-surface);
	border: 1px solid var(--ssw-line);
	border-radius: clamp(16px, 2vw, 24px);
	margin: clamp(-40px, -4vh, -24px) 0 0;
	overflow: hidden;
	position: relative;
	z-index: 1;
}

.ssw .ssw__snimok img {
	display: block;
	inline-size: 100%;
	max-block-size: clamp(360px, 62vh, 620px);
	object-fit: cover;
	object-position: 50% 0;
}

/* --------------------------------------------------- крошки, лид, факты */

/* Крошки печатает Rank Math, оформление наше. Разметка у него своя:
   абзац со ссылками и разделителями, поэтому правила цепляются
   за содержимое блока, а не за наши классы. */

.ssw .ssw__kroshki {
	color: #adadad;
	font-size: 14px;
	margin-block-end: clamp(16px, 2vw, 24px);
}

.ssw .ssw__kroshki p {
	margin: 0;
}

.ssw .ssw__kroshki a {
	color: #ffffff;
	font-weight: 300;
	text-decoration: none;
}

.ssw .ssw__kroshki a:hover,
.ssw .ssw__kroshki a:focus-visible {
	color: #ffffff;
	text-decoration: underline;
}

/* Лид крупнее основного текста и уже по колонке: это первое, что читают,
   и читаться оно должно быстрее остального. */
.ssw .ssw__lid {
	color: rgba(255, 255, 255, 0.82);
	font-size: clamp(16px, 1.5vw, 19px);
	line-height: 1.55;
	margin-block-start: clamp(16px, 2vw, 22px);
	max-inline-size: 58ch;
}

/* Плитка фактов лежит между снимком и текстом — там, где человек уже
   посмотрел и ещё не решил, читать ли. Короткие ответы на вопросы,
   которые он задаёт первыми: что это, сколько делали, что входило. */
/* Плитка — карточка, а не строка в воздухе: тот же белый лист
   с волосяной рамкой, что у работ в списке. На светло-сером фоне
   страницы это собирает факты в один предмет и держит их вместе
   с текстом кейса, а не отдельно от него. */
.ssw .ssw__fakty {
	background: var(--ssw-dark);
	border-radius: clamp(14px, 1.4vw, 18px);
	color: var(--ssw-dark-ink);
	display: flex;
	flex-wrap: wrap;
	margin-block: 0 clamp(24px, 3vw, 36px);
	margin-inline: 0;
	overflow: hidden;
	padding: 0;
}

/*
 * Факты разделены прожилками, а не промежутками: так плитка читается
 * паспортом работы, а взгляд идёт по колонкам. Поля у каждой ячейки
 * свои — промежутки между ними съели бы линии.
 */
.ssw .ssw__fakt {
	border-inline-start: 1px solid rgba(255, 255, 255, 0.12);
	flex: 1 1 auto;
	min-inline-size: 0;
	padding: clamp(16px, 1.6vw, 22px) clamp(18px, 1.8vw, 24px);
}

.ssw .ssw__fakt:first-child {
	border-inline-start: 0;
}

/* Локация в правой колонке набирается как факт, но стоит отдельно
   и с полем снизу — под ней сразу карточка. */
.ssw .ssw__fakt--rail {
	margin-block-end: clamp(20px, 2.4vw, 28px);
}

.ssw .ssw__fakt dt {
	color: var(--ssw-dark-muted);
	font-size: var(--ss-small);
	margin-block-end: 6px;
}

.ssw .ssw__fakt dd {
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: clamp(15px, 1.4vw, 18px);
	font-weight: 500;
	letter-spacing: -0.01em;
	margin: 0;
	/* Длинные значения переносим по слогам-обрывкам, а не даём им
	   вылезать в соседнюю колонку: «Многостраничный сайт» в 150 px
	   не помещается никак. */
	overflow-wrap: anywhere;
}

/* Состав работ занимает всю ширину плитки: значков бывает семь,
   и в колонку 140 пикселей они не встают. */
.ssw .ssw__fakt--sostav {
	border-block-start: 1px solid rgba(255, 255, 255, 0.12);
	border-inline-start: 0;
	flex-basis: 100%;
}

.ssw .ssw__fakt--sostav dd {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Плашка — обводка фирменным цветом по прозрачному фону. Заливка
   спорила с тёмной плиткой: два серых прямоугольника друг в друге,
   а так видно и состав работ, и что это перечень, а не кнопки. */
.ssw .ssw__znak {
	background: transparent;
	border: 1px solid var(--ssw-accent);
	border-radius: 999px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 400;
	padding: 5px 13px;
}

/* ------------------------------------------ значок проезда на телефоне

   Прячем везде, кроме узких экранов: на десктопе снимок едет при
   наведении, и кнопка была бы вторым способом сделать то же самое.
   Класс `ssw--zhivaya` ставит скрипт — без него кнопки нет вовсе,
   чтобы не предлагать действие, которое не сработает.

   Значок, а не надпись: он встаёт в угол снимка зеркально стрелке
   перехода и не спорит с ней размером. */

.ssw .ssw__proezd,
.ssw .sswb__proezd {
	display: none;
}

@media (max-width: 767px) {
	.ssw .ssw__proezd.ssw--zhivaya,
	.ssw .sswb__proezd.ssw--zhivaya {
		background: rgba(255, 255, 255, 0.92);
		block-size: 44px;
		border: 0;
		border-radius: 50%;
		color: var(--ssw-ink);
		display: grid;
		font-size: 18px;
		inline-size: 44px;
		padding: 0;
		place-items: center;
		position: absolute;
		transition: background 0.2s ease;
		/* Тень нужна не для вида: снимки бывают со светлой шапкой,
		   и белый кружок на белом пропадал. */
		box-shadow: 0 2px 10px rgba(8, 8, 8, 0.22);
	}

	/* Пока снимок едет — значок притушен: видно, что он уже нажат. */
	.ssw .ssw__proezd[aria-pressed="true"],
	.ssw .sswb__proezd[aria-pressed="true"] {
		background: rgba(255, 255, 255, 0.6);
	}

	/* В карточке — левый верхний угол снимка, зеркально стрелке справа.
	   Отступ сверху тот же, что у неё: под полосой браузера. */
	.ssw .sswb__proezd.ssw--zhivaya {
		inset: 42px auto auto 12px;
	}

	/* В кейсе полосы браузера нет, поэтому значок стоит у самого края. */
	.ssw .ssw__proezd.ssw--zhivaya {
		inset: 14px auto auto 14px;
	}
}

/* -------------------------------------------- проезд снимка в кейсе

   Окно фиксированной высоты, картинка внутри во всю длину и едет
   вверх при наведении. `object-fit: cover` тут пришлось снять: он
   обрезает картинку под окно, и ехать становится нечему. */

.ssw .ssw__snimok--edet {
	--okno: clamp(360px, 62vh, 620px);

	block-size: var(--okno);
}

.ssw .ssw__snimok--edet img {
	block-size: auto;
	max-block-size: none;
	object-fit: fill;
	transition: transform 0.5s ease;
}

/* Подсказка нужна ровно до первого наведения: дальше она мешает
   смотреть. Поэтому на самом проезде она и уходит. */
.ssw .ssw__podskazka {
	background: rgba(8, 8, 8, 0.72);
	border-radius: 999px;
	color: #ffffff;
	font-size: var(--ss-small);
	inset: auto 50% 16px auto;
	opacity: 0;
	padding: 8px 16px;
	pointer-events: none;
	position: absolute;
	transform: translateX(50%);
	transition: opacity 0.3s ease;
}

@media (hover: hover) {
	.ssw .ssw__snimok--edet img {
		will-change: transform;
	}

	.ssw .ssw__snimok--edet:hover img,
	.ssw .ssw__snimok--edet:focus-within img {
		transform: translateY(calc(-100% + var(--okno)));
		transition-duration: var(--hod, 5s);
		transition-timing-function: linear;
	}

	.ssw .ssw__snimok--edet .ssw__podskazka {
		opacity: 1;
	}

	.ssw .ssw__snimok--edet:hover .ssw__podskazka {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ssw .ssw__snimok--edet img {
		transition: none;
	}

	.ssw .ssw__snimok--edet:hover img,
	.ssw .ssw__snimok--edet:focus-within img {
		transform: none;
	}
}

/* ---------------------------------------------------------------- раскладка */

.ssw .ssw__body {
	align-items: start;
	display: grid;
	gap: clamp(24px, 3vw, 56px);
	grid-template-columns: minmax(0, 1fr) 330px;
	padding-block: clamp(32px, 5vh, 56px) clamp(32px, 5vh, 56px);
}

.ssw .ssw__text {
	line-height: 1.65;
}

.ssw .ssw__text h2 {
	color: var(--ssw-ink);
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: var(--ss-h3);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: clamp(26px, 3.4vh, 38px) 0 12px;
	text-transform: none;
}

.ssw .ssw__text > h2:first-child {
	margin-block-start: 0;
}

.ssw .ssw__text p {
	margin: 0 0 1em;
}

/* Список сделанного — строками с галочкой, без плиток: пунктов тут
   пять-шесть, и стену из них не построить. */
.ssw .ssw__spisok {
	display: grid;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ssw .ssw__spisok li {
	align-items: start;
	display: flex;
	gap: 12px;
	line-height: 1.5;
	margin: 0;
}

.ssw .ssw__spisok li::before {
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.4 8.6l3 3 6.2-6.6' fill='none' stroke='%230d8b84' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 50% / 15px 15px,
		rgba(37, 203, 194, 0.14);
	block-size: 26px;
	border-radius: 50%;
	content: "";
	flex: none;
	inline-size: 26px;
	margin-block-start: 1px;
}

/* ------------------------------------------------------------- карточка «так же» */

/*
 * Липкая карточка едет внутри своей колонки — значит колонка обязана
 * быть длиннее её самой. Раньше в сетке было две ячейки, текст и
 * карточка, и у половины кейсов текст выходил короче: высота строки
 * равнялась высоте карточки, ехать было некуда, и липкость выглядела
 * невключённой.
 *
 * Поэтому полоса заявки переехала в ту же сетку, под текст. Колонка
 * стала заведомо длиннее карточки, и та теперь действительно едет
 * вдоль всего чтения.
 */
.ssw .ssw__rail {
	align-self: stretch;
	block-size: auto;
	grid-column: 2;
	grid-row: 1 / -1;
}

.ssw .ssw__text {
	grid-column: 1;
}

/* Боковая карточка — младшая сестра приглашения из архива: тот же
   тёмный фон, тот же узор, тот же мокап. Два предложения об одном
   и том же не должны выглядеть как с разных сайтов.

   Отличие одно и вынужденное: колонка узкая, поэтому мокап уходит
   вниз под кнопку, а не встаёт рядом с текстом. */

.ssw .ssw__card {
	background: var(--ssw-dark);
	border-radius: 24px;
	color: var(--ssw-dark-ink);
	inset-block-start: calc(var(--ss-header-h, 78px) + 16px);
	isolation: isolate;
	overflow: hidden;
	padding: clamp(22px, 2.2vw, 28px);
	position: sticky;
}

/* Узор отдельным слоем — как в приглашении: фон нужен и под текстом,
   и под мокапом, а прозрачность задаётся один раз здесь. */
.ssw .ssw__card::before {
	background: url("../img/setka-patt.webp") repeat 0 0 / 152px 247px;
	content: "";
	inset: 0;
	opacity: 0.55;
	position: absolute;
	z-index: -1;
}

.ssw .ssw__card-nad {
	color: var(--ssw-accent);
	font-size: 13px;
	letter-spacing: 0.08em;
	margin: 0 0 12px;
	text-transform: uppercase;
}

.ssw .ssw__card-label {
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: var(--ss-h4);
	font-weight: 500;
	letter-spacing: -0.01em;
	margin: 0 0 8px;
}

.ssw .ssw__card-text {
	color: var(--ssw-dark-muted);
	line-height: 1.5;
	margin: 0 0 18px;
}

/*
 * Мокап шире карточки и намеренно вылезает за её правый край: экраны
 * в нём стоят по диагонали, и вписанный целиком он превращается
 * в марку на визитке. Обрезает его `overflow` самой карточки.
 *
 * Отрицательные отступы снизу и справа съедают паддинг — картинка
 * должна доходить до края, а не висеть в рамке из воздуха.
 */
.ssw .ssw__card-mokap {
	display: block;
	inline-size: 128%;
	margin-block: 18px calc(clamp(22px, 2.2vw, 28px) * -1);
	/* Вылет делим поровну на обе стороны: иначе связка экранов
	   смещена вправо и в карточке видно, что она не по центру. */
	margin-inline: -14%;
	max-inline-size: none;
	/*
	 * Высоту ограничиваем: карточка должна быть ниже текстовой колонки,
	 * иначе липкой ей быть негде — ехать внутри себя нельзя. Обрезаем
	 * снизу, там у мокапа просто фон.
	 */
	max-block-size: 300px;
	object-fit: cover;
	object-position: 50% 0;
}

.ssw .ssw__cta {
	align-items: center;
	background: linear-gradient(90deg, var(--ssw-accent-2), var(--ssw-accent));
	border-radius: 999px;
	color: #0b0b0b;
	display: inline-flex;
	font-size: 15px;
	font-weight: 500;
	gap: 10px;
	inline-size: 100%;
	justify-content: center;
	min-block-size: 54px;
	padding-inline: 24px;
	text-decoration: none;
	transition: transform 0.2s ease;
}

/* --------------------------------------------------------------- другие работы */

.ssw .ssw__drugie {
	padding-block-end: clamp(48px, 8vh, 96px);
}

.ssw .ssw__drugie-title {
	color: var(--ssw-ink);
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: var(--ss-h3);
	font-weight: 500;
	letter-spacing: -0.02em;
	margin: 0 0 clamp(16px, 2.2vh, 24px);
	text-transform: none;
}

/* Заголовок и стрелки в одной строке — как над лентой отзывов.

   Отступ снизу задаём здесь, а не заголовку: у заголовка он свой,
   а кнопки в той же строке остались бы без него и сели бы прямо
   на карточки. */
.ssw .ssw__drugie-head {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
	margin-block-end: clamp(20px, 2.6vw, 32px);
}

.ssw .ssw__drugie-head .ssw__drugie-title {
	margin-block-end: 0;
}

.ssw .ssw__strelki {
	display: flex;
	gap: 10px;
}

.ssw .ssw__strelka-knopka {
	background: var(--ssw-dark);
	block-size: 44px;
	border: 0;
	border-radius: 10px;
	color: #ffffff;
	cursor: pointer;
	display: grid;
	font-size: 18px;
	inline-size: 44px;
	padding: 0;
	place-items: center;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.ssw .ssw__strelka-knopka:hover {
	box-shadow: 0 6px 18px rgba(22, 24, 29, 0.12);
	transform: translateY(-1px);
}

/* Лента, а не сетка: работ в подборке восемь, и показать их рядами
   значит увести человека со страницы кейса вниз. Прокрутка со снапом
   работает и без скрипта — пальцем, колесом и клавишами. */
.ssw .ssw__lenta {
	cursor: grab;
	display: flex;
	gap: clamp(14px, 1.6vw, 20px);
	overflow-x: auto;
	padding-block-end: 6px;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.ssw .ssw__lenta::-webkit-scrollbar {
	display: none;
}

/* Пока тянут мышью, снап мешает: лента дёргалась бы к ближайшей
   карточке под самым пальцем. */
.ssw .ssw__lenta.ssw--tyanut {
	cursor: grabbing;
	scroll-snap-type: none;
}

.ssw .ssw__lenta > * {
	flex: 0 0 clamp(240px, 27vw, 320px);
	scroll-snap-align: start;
}

.ssw .sswk {
	background: var(--ssw-surface);
	border: 1px solid var(--ssw-line);
	border-radius: 18px;
	color: var(--ssw-ink);
	display: block;
	overflow: hidden;
	text-decoration: none;
}

.ssw .sswk__snimok {
	display: block;
	max-block-size: 180px;
	overflow: hidden;
}

.ssw .sswk__snimok img {
	display: block;
	inline-size: 100%;
	max-block-size: 180px;
	object-fit: cover;
	object-position: 50% 0;
}

.ssw .sswk__name {
	display: block;
	font-weight: 600;
	padding: 14px 18px 0;
}

.ssw .sswk__gorod {
	color: var(--ssw-dim);
	display: block;
	font-size: var(--ss-small);
	padding: 4px 18px 16px;
}

.ssw .ssw__vse {
	margin: clamp(18px, 2.4vh, 26px) 0 0;
}

.ssw .ssw__vse a {
	border-block-end: 1px solid rgba(13, 139, 132, 0.35);
	color: var(--ssw-accent-ink);
	text-decoration: none;
}

/* --------------------------------------------------------------------- архив

   Три вида карточки, переключаются `?vid=1|2|3`. Общее у всех одно:
   карточка ведёт внутрь, на кейс, и ни одной исходящей ссылки в разделе
   нет — домен клиента показан текстом, как подпись к снимку. */

.ssw .ssw__setka {
	display: grid;
	gap: clamp(16px, 2vw, 24px);
	padding-block: clamp(32px, 5vh, 56px);
}

.ssw .sswb__ssylka {
	color: inherit;
	display: block;
	text-decoration: none;
}

.ssw .sswb__snimok img {
	display: block;
	inline-size: 100%;
	object-fit: cover;
	object-position: 50% 0;
}

.ssw .sswb__name {
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: var(--ss-h4);
	font-weight: 500;
	letter-spacing: -0.02em;
	margin: 0;
	text-transform: none;
}

/* --------------------------------------------- вид 1: обложка во всю карточку

   Снимок и есть карточка, подпись лежит поверх нижнего края. Так
   портфолио читается как витрина, а не как таблица: глаз идёт
   по работам, а не по строчкам. */

.ssw--v1 .ssw__setka {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ssw--v1 .sswb {
	border-radius: 22px;
	overflow: hidden;
	position: relative;
}

.ssw--v1 .sswb__snimok img {
	block-size: clamp(300px, 34vw, 420px);
	transition: transform 0.4s ease;
}

/* Подпись поверх снимка. Тёмная подложка снизу — не украшение: без неё
   название тонет в светлых шапках чужих сайтов. */
.ssw--v1 .sswb__info {
	align-items: baseline;
	background: linear-gradient(to top, rgba(8, 8, 8, 0.92) 30%, rgba(8, 8, 8, 0));
	color: #ffffff;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	inset: auto 0 0 0;
	padding: clamp(40px, 6vw, 72px) clamp(18px, 2vw, 24px) clamp(16px, 1.8vw, 22px);
	position: absolute;
}

.ssw--v1 .sswb__name {
	font-size: var(--ss-h4);
}

.ssw--v1 .sswb__gorod,
.ssw--v1 .sswb__domen {
	color: rgba(255, 255, 255, 0.7);
	font-size: var(--ss-small);
}

.ssw--v1 .sswb__domen {
	margin-inline-start: auto;
}

.ssw--v1 .sswb__zagolovok,
.ssw--v1 .sswb__strelka,
.ssw--v1 .sswb__meta {
	display: contents;
}

.ssw--v1 .sswb__zagolovok,
.ssw--v1 .sswb__strelka {
	display: none;
}

/* ------------------------------------------------ вид 2: карточка-браузер

   Снимок показан окном браузера: тонкая полоса с тремя точками. Приём
   объясняет без слов, что на картинке сайт, а не баннер.

   Подпись собрана строками, а не в одну: название, рубрика, а под ними
   домен и город со значками. В одну строку всё это вставало по-разному
   у разных работ — где-то переносилось, где-то нет, и карточки выходили
   разной высоты. */

.ssw--v2 .ssw__setka {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ssw--v2 .sswb {
	background: var(--ssw-surface);
	border: 1px solid var(--ssw-line);
	border-radius: 22px;
	padding: clamp(14px, 1.6vw, 18px);
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.ssw .sswb {
	position: relative;
}

.ssw--v2 .sswb__snimok {
	border: 1px solid var(--ssw-line);
	border-radius: 14px;
	display: block;
	overflow: hidden;
	position: relative;
}

/* Полоса браузера нарисована псевдоэлементом: точки — три радиальных
   градиента, отдельных узлов для них заводить незачем. */
.ssw--v2 .sswb__snimok::before {
	background:
		radial-gradient(circle at 16px 50%, #ff5f57 4px, transparent 4.5px),
		radial-gradient(circle at 32px 50%, #febc2e 4px, transparent 4.5px),
		radial-gradient(circle at 48px 50%, #28c840 4px, transparent 4.5px),
		#f1f2f4;
	block-size: 30px;
	border-block-end: 1px solid var(--ssw-line);
	content: "";
	display: block;
	/* Полоса браузера остаётся на месте, когда снимок под ней едет:
	   без своего слоя картинка проезжала поверх неё. */
	position: relative;
	z-index: 1;
}

.ssw--v2 .sswb__snimok img {
	block-size: clamp(230px, 24vw, 300px);
}

/* Стрелка в углу снимка: единственный знак, что карточка куда-то ведёт.
   Белый кружок читается и на тёмной шапке чужого сайта, и на светлой. */
.ssw--v2 .sswb__strelka {
	background: rgba(255, 255, 255, 0.92);
	block-size: 40px;
	border-radius: 50%;
	color: var(--ssw-ink);
	display: grid;
	font-size: 18px;
	inline-size: 40px;
	inset: 42px 12px auto auto;
	place-items: center;
	position: absolute;
	transition: background 0.2s ease, transform 0.2s ease;
}

.ssw--v2 .sswb__info {
	display: grid;
	gap: 10px;
	justify-items: start;
	padding: 16px 6px 6px;
}

.ssw--v2 .sswb__name {
	font-size: var(--ss-h4);
	line-height: 1.25;
}

/* Рубрика — подпись, а не действие: кликается карточка целиком,
   и вторая кнопка внутри неё только спорила бы с ней. */
.ssw--v2 .sswb__tip {
	background: rgba(16, 20, 24, 0.05);
	border: 0;
	border-radius: 999px;
	color: var(--ssw-dim);
	font-size: 13px;
	padding: 5px 12px;
}

.ssw--v2 .sswb__meta {
	align-items: center;
	color: var(--ssw-dim);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--ss-small);
	gap: 6px 14px;
}

/* Значки — маской, а не картинкой: цвет тогда наследуется от текста,
   и в тёмном виде карточки их не надо рисовать заново. */
.ssw--v2 .sswb__domen::before,
.ssw--v2 .sswb__gorod::before {
	background: currentColor;
	block-size: 15px;
	content: "";
	display: inline-block;
	inline-size: 15px;
	margin-inline-end: 7px;
	vertical-align: -3px;
}

.ssw--v2 .sswb__domen::before {
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.5 1.5'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.5-1.5'/%3E%3C/svg%3E") no-repeat 50% / contain;
}

.ssw--v2 .sswb__gorod::before {
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") no-repeat 50% / contain;
}

/* Разделитель между доменом и городом — тонкая черта, как в референсе.
   Рисуется у второго значения, поэтому в одиночку каждое стоит ровно. */
.ssw--v2 .sswb__domen + .sswb__gorod {
	border-inline-start: 1px solid var(--ssw-line);
	padding-inline-start: 14px;
}

.ssw--v2 .sswb__zagolovok {
	display: none;
}

/* ------------------------------------------------------------- проезд снимка

   Длинная обложка при наведении едет вверх — как будто человек прокручивает
   сайт. Приём честный: это и есть тот самый сайт, просто снятый целиком.

   Едут не все карточки, а только те, у кого обложка длиннее ширины
   (класс ставит шаблон). Где снят один первый экран, ехать нечему,
   и движение сбивало бы с толку.

   Ход у каждой карточки свой, `--hod`: страница на три экрана и страница
   на десять не должны проезжать за одно и то же время.

   Двигается `transform`, а не `top`: браузер считает его на видеокарте
   и не пересобирает раскладку на каждом кадре. */

.ssw--v2 .sswb--edet .sswb__snimok {
	--okno: clamp(230px, 24vw, 300px);

	block-size: calc(var(--okno) + 30px);
}

.ssw--v2 .sswb--edet .sswb__snimok img {
	/* Своя высота, а не окно: картинка должна быть длиннее рамки —
	   иначе ехать некуда. */
	block-size: auto;
	object-fit: fill;
	transition: transform 0.5s ease;
}

@media (hover: hover) {
	/* Слой под видеокарту просим только там, где проезд бывает.
	   На телефоне наведения нет, а слой был — десять длинных картинок
	   держали память впустую. */
	.ssw--v2 .sswb--edet .sswb__snimok img {
		will-change: transform;
	}

	/*
	 * `-100%` считается от высоты самой картинки, поэтому прибавка
	 * окна оставляет на виду ровно последний экран — не больше.
	 */
	.ssw--v2 .sswb--edet:hover .sswb__snimok img,
	.ssw--v2 .sswb--edet:focus-within .sswb__snimok img {
		transform: translateY(calc(-100% + var(--okno)));
		transition-duration: var(--hod, 3s);
		transition-timing-function: linear;
	}
}

/* Системное «поменьше движения» — снимок стоит. Человек, который
   выключил анимации, не должен получать самый длинный проезд на сайте. */
@media (prefers-reduced-motion: reduce) {
	.ssw--v2 .sswb--edet .sswb__snimok img {
		transition: none;
	}

	.ssw--v2 .sswb--edet:hover .sswb__snimok img,
	.ssw--v2 .sswb--edet:focus-within .sswb__snimok img {
		transform: none;
	}
}

/* ------------------------------------------------------ вид 3: строкой

   По работе на ряд: слева снимок, справа название, город, домен и та
   самая фраза, под которую кейс написан. Раскладка невыгодна по высоте,
   зато на странице появляется текст — и человеку, и поисковику. */

.ssw--v3 .ssw__setka {
	gap: clamp(12px, 1.4vw, 16px);
	grid-template-columns: minmax(0, 1fr);
}

.ssw--v3 .sswb {
	background: var(--ssw-surface);
	border: 1px solid var(--ssw-line);
	border-radius: 22px;
	overflow: hidden;
	transition: border-color 0.2s ease;
}

.ssw--v3 .sswb__ssylka {
	align-items: center;
	display: grid;
	gap: clamp(18px, 2.4vw, 32px);
	grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
}

.ssw--v3 .sswb__snimok {
	display: block;
	overflow: hidden;
}

.ssw--v3 .sswb__snimok img {
	block-size: clamp(180px, 16vw, 220px);
}

.ssw--v3 .sswb__info {
	align-items: center;
	display: grid;
	gap: 6px 16px;
	grid-template-areas:
		"name  gorod strelka"
		"zag   zag   strelka"
		"domen domen strelka";
	grid-template-columns: auto auto 1fr;
	padding: clamp(16px, 2vw, 24px) clamp(18px, 2.4vw, 28px) clamp(16px, 2vw, 24px) 0;
}

.ssw--v3 .sswb__name {
	font-size: var(--ss-h3);
	grid-area: name;
}

.ssw--v3 .sswb__gorod {
	color: var(--ssw-dim);
	font-size: var(--ss-small);
	grid-area: gorod;
}

.ssw--v3 .sswb__zagolovok {
	color: var(--ssw-ink);
	grid-area: zag;
	line-height: 1.45;
	max-width: 46ch;
}

.ssw--v3 .sswb__domen {
	color: var(--ssw-dim);
	font-size: var(--ss-small);
	grid-area: domen;
}

.ssw--v3 .sswb__meta {
	display: contents;
}

.ssw--v3 .sswb__strelka {
	align-self: center;
	background: rgba(37, 203, 194, 0.12);
	block-size: 46px;
	border-radius: 50%;
	color: var(--ssw-accent-ink);
	display: grid;
	grid-area: strelka;
	inline-size: 46px;
	justify-self: end;
	place-items: center;
	transition: background 0.2s ease, transform 0.2s ease;
}

.ssw .ssw__stranicy {
	padding-block-end: clamp(48px, 8vh, 96px);
}

/*
 * Перенос кнопок. Базовая тема раскладывает листалку флексом без
 * переноса, и на телефоне ряд уезжал за оба края экрана: восемь
 * кнопок со стрелками в 390 пикселей не встают. Правило лежит здесь,
 * а не в базовой теме, потому что там оно верно для блога — там
 * страниц немного.
 */
.ssw .ssw__stranicy .nav-links {
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

.ssw .ssw__stranicy .page-numbers {
	border: 1px solid var(--ssw-line);
	border-radius: 999px;
	color: var(--ssw-ink);
	display: inline-flex;
	min-block-size: 44px;
	min-inline-size: 44px;
	place-content: center;
	place-items: center;
	text-decoration: none;
}

.ssw .ssw__stranicy .page-numbers.current {
	background: var(--ssw-ink);
	border-color: var(--ssw-ink);
	color: #ffffff;
}

.ssw .ssw__stranicy .screen-reader-text {
	clip-path: inset(50%);
	position: absolute;
}

/* ------------------------------------------------------------------ фильтр

   Пилюли-ссылки над сеткой. Выбранная залита тёмным, остальные обведены:
   состояние видно с одного взгляда и без цвета — по заливке. */

/* Фильтр собран как переключатель в калькуляторе стоимости: общая
   дорожка, выбранное — заливкой фирменного цвета. Отдельные пилюли
   читались как шесть самостоятельных кнопок, хотя выбор тут один
   из шести. */

/* Заголовок списка работ. Кегль — общая ступень `--ss-h2` из токенов:
   своих величин у страницы быть не должно, иначе шкала расползётся. */
.ssw .ssw__spisok-title {
	color: var(--ssw-ink);
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: var(--ss-h2);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: clamp(28px, 4vh, 48px) auto 0;
	text-transform: none;
}

.ssw .ssw__filtr {
	margin-block-start: clamp(26px, 4vh, 44px);
}

.ssw .ssw__filtr-track {
	background: rgba(16, 20, 24, 0.06);
	border-radius: 999px;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 5px;
}

.ssw .sswf {
	background: transparent;
	border: 0;
	border-radius: 999px;
	color: var(--ssw-dim);
	display: inline-flex;
	font-size: var(--ss-small);
	/* 44 — нижняя граница удобного касания. Сорок пикселей замер
	   ловит как дефект, и справедливо: пальцем в таб попадают мимо. */
	min-block-size: 44px;
	padding-inline: 18px;
	place-items: center;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
	white-space: nowrap;
}

/*
 * Цвета проставлены явно и для наведения тоже. Кит навязывает ссылкам
 * свой цвет наведения, и на выбранном табе надпись уходила в цвет
 * заливки — текст пропадал прямо под курсором.
 */
.ssw .sswf:hover,
.ssw .sswf:focus-visible {
	background: rgba(16, 20, 24, 0.06);
	color: var(--ssw-ink);
}

.ssw .sswf--tut,
.ssw .sswf--tut:hover,
.ssw .sswf--tut:focus-visible {
	background: var(--ssw-accent);
	color: var(--ssw-ink);
	font-weight: 500;
}

/* Полоса фильтра стоит сразу над сеткой, поэтому верхнее поле у сетки
   здесь лишнее. */
.ssw .ssw__filtr + .ssw__setka {
	padding-block-start: clamp(18px, 2.6vh, 26px);
}

.ssw .ssw__pusto {
	color: var(--ssw-dim);
	margin: 0;
	padding-block: clamp(20px, 4vh, 40px);
}

.ssw .ssw__pusto a {
	color: var(--ssw-accent-ink);
}

/* Тип сайта на карточке — подпись, а не действие: кликается карточка
   целиком, и ещё одна кнопка внутри неё только спорила бы с ней. */
.ssw .sswb__tip {
	border: 1px solid var(--ssw-line);
	border-radius: 999px;
	color: var(--ssw-dim);
	font-size: 12px;
	padding: 3px 10px;
}

.ssw--v1 .sswb__tip {
	border-color: rgba(255, 255, 255, 0.3);
	color: rgba(255, 255, 255, 0.8);
}

.ssw--v3 .sswb__info {
	grid-template-areas:
		"name  gorod tip   strelka"
		"zag   zag   zag   strelka"
		"domen domen domen strelka";
	grid-template-columns: auto auto auto 1fr;
}

.ssw--v3 .sswb__tip {
	grid-area: tip;
}

/* ------------------------------------------------------- приглашение в сетке

   Единственное тёмное пятно на светлой странице — и этим оно и работает:
   среди снимков чужих сайтов карточка не спорит содержанием, она просто
   другого цвета.

   Занимает оба столбца. В одном мокапу телефонов негде встать, а без него
   приглашение выглядит служебной плашкой. Ряд от этого не ломается:
   ширина ряда та же, просто ячейка одна. */

.ssw .sswp {
	align-items: center;
	background: var(--ssw-dark);
	border-radius: 22px;
	color: var(--ssw-dark-ink);
	display: grid;
	gap: clamp(20px, 3vw, 40px);
	grid-column: 1 / -1;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
	isolation: isolate;
	overflow: hidden;
	padding: clamp(24px, 2.8vw, 36px);
	position: relative;
}

/*
 * Сетка поверх тёмного фона. Отдельным слоем, а не фоном самой
 * карточки: фон нужен и под мокапом, и под текстом, а прозрачность
 * задаётся один раз здесь, не тронув содержимое.
 */
.ssw .sswp::before {
	/*
	 * Плитка, а не исходный SVG. Файл со стройки весил 121 КБ и грузился
	 * ради фона в том числе на телефоне; узор в нём повторяется каждые
	 * 152×247 точки при том размере, в котором мы его показываем.
	 * Вырезанная плитка весит 7 КБ — те же линии, в восемнадцать раз
	 * легче.
	 */
	background: url("../img/setka-patt.webp") repeat 0 0 / 152px 247px;
	content: "";
	inset: 0;
	opacity: 0.55;
	position: absolute;
	z-index: -1;
}

.ssw .sswp__slova {
	max-width: 42ch;
}

.ssw .sswp__nad {
	color: var(--ssw-accent);
	font-size: 13px;
	letter-spacing: 0.08em;
	margin: 0 0 12px;
	text-transform: uppercase;
}

.ssw .sswp__zag {
	color: var(--ssw-dark-ink);
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: var(--ss-h2);
	font-weight: 500;
	letter-spacing: -0.025em;
	line-height: 1.1;
	margin: 0 0 12px;
}

.ssw .sswp__text {
	color: var(--ssw-dark-muted);
	line-height: 1.5;
	margin: 0 0 clamp(20px, 2.6vh, 28px);
	max-width: 36ch;
}

.ssw .sswp .ssw__cta {
	inline-size: auto;
	justify-self: start;
	padding-inline: 28px;
}

/* Мокап стоит по центру высоты и не свисает за край: свисал — карточка
   росла под него, и слева над заголовком и под кнопкой оставалось
   по полсотни пустых пикселей. Заодно он стал уже: высоту карточки
   задаёт именно он, и каждые сто пикселей ширины — это лишние
   пятьдесят высоты. */
.ssw .sswp__mokap {
	align-self: center;
	block-size: auto;
	display: block;
	inline-size: 100%;
	justify-self: center;
	max-inline-size: 340px;
}

@media (max-width: 767px) {
	.ssw .sswp {
		grid-template-columns: minmax(0, 1fr);
	}

	/* На телефоне мокап уходит: он тут украшение, а место под ним —
	   треть экрана. */
	.ssw .sswp__mokap {
		display: none;
	}
}

/* ----------------------------------------------------------------- полоса

   Стоит в конце списка, а не прижата к низу экрана: внизу и так живут
   пузыри мессенджеров, кнопка чата и баннер cookie, а в шапке — та же
   кнопка «Обсудить проект». Прижатая полоса стала бы четвёртым слоем
   и вторым таким же предложением в поле зрения.

   Четыре части в строку на широком экране; на узком складываются
   по порядку чтения — заголовок, пояснение, кнопка, сноска. */

.ssw .ssw__polosa-vnutri {
	padding-block-end: clamp(48px, 8vh, 96px);
}

.ssw .sswl {
	align-items: center;
	background: var(--ssw-surface);
	border: 1px solid var(--ssw-line);
	border-radius: 22px;
	display: grid;
	gap: clamp(16px, 2.4vw, 32px);
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	padding: clamp(22px, 2.6vw, 32px) clamp(22px, 3vw, 40px);
}

.ssw .sswl__nad {
	color: var(--ssw-accent-ink);
	font-size: 13px;
	letter-spacing: 0.08em;
	margin: 0 0 8px;
	text-transform: uppercase;
}

.ssw .sswl__zag {
	color: var(--ssw-ink);
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: var(--ss-h3);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0;
}

.ssw .sswl__text {
	color: var(--ssw-dim);
	line-height: 1.5;
	margin: 0;
	max-width: 32ch;
}

.ssw .sswl__knopka {
	inline-size: auto;
	margin: 0;
	padding-inline: 28px;
}

/* Сноска отделена чертой, а не просто полем: иначе она читалась как
   продолжение кнопки. */
.ssw .sswl__snoska {
	border-inline-start: 1px solid var(--ssw-line);
	color: var(--ssw-dim);
	font-size: var(--ss-small);
	line-height: 1.4;
	margin: 0;
	padding-inline-start: clamp(16px, 2vw, 28px);
}

@media (max-width: 1024px) {
	.ssw .sswl {
		grid-template-columns: minmax(0, 1fr);
	}

	.ssw .sswl__snoska {
		border-inline-start: 0;
		padding-inline-start: 0;
	}

	.ssw .sswl__knopka {
		justify-self: start;
	}
}

/* ------------------------------------------------------------- наведение */

@media (hover: hover) {
	.ssw .ssw__cta:hover {
		transform: translateY(-1px);
	}

	.ssw .sswf:hover {
		border-color: rgba(37, 203, 194, 0.55);
	}

	.ssw .sswk:hover,
	.ssw--v2 .sswb:hover,
	.ssw--v3 .sswb:hover {
		border-color: rgba(37, 203, 194, 0.55);
	}

	.ssw--v1 .sswb:hover .sswb__snimok img {
		transform: scale(1.03);
	}

	.ssw--v2 .sswb:hover {
		transform: translateY(-2px);
	}

	.ssw--v2 .sswb:hover .sswb__strelka {
		background: #ffffff;
		transform: translate(2px, -2px);
	}

	.ssw--v3 .sswb:hover .sswb__strelka {
		background: var(--ssw-accent);
		color: #0b0b0b;
		transform: translateX(3px);
	}

	.ssw a:hover {
		color: inherit;
	}

	.ssw .ssw__sajt a:hover,
	.ssw .sswb__sajt a:hover,
	.ssw .ssw__vse a:hover {
		color: var(--ssw-accent-ink);
	}
}

/* ---------------------------------------------------------- уже 1024 */

@media (max-width: 1024px) {
	.ssw .ssw__body {
		grid-template-columns: minmax(0, 1fr);
	}

	/* В одну колонку — значит и привязку ко второй снимаем: иначе
	   сетка заводит несуществующий столбец, текст сжимается до буквы
	   в строке, а карточка наезжает на плитку фактов. */
	.ssw .ssw__rail {
		grid-column: auto;
		grid-row: auto;
	}

	.ssw .ssw__rail {
		block-size: auto;
	}

	/* Не `static`: узорный слой карточки позиционируется от неё, и без
	   этого он считает себя от всей страницы — тянется во всю высоту
	   и ложится поверх заголовка кейса. Липкость снимает сам режим:
	   колонка здесь уже не колонка. */
	.ssw .ssw__card {
		position: relative;
		inset-block-start: auto;
	}

	/*
	 * На телефоне карточка и полоса стоят друг под другом и говорят
	 * одно и то же двумя способами. Оставляем карточку — она первая
	 * и тёмная, а полосу прячем. На архиве полоса остаётся: там она
	 * единственная.
	 */
	.ssw:not(.ssw--arhiv) .ssw__polosa-vnutri {
		display: none;
	}

	/* Кегль плитки на телефоне меньше: в колонку 175 px «Многостраничный»
	   при общем размере не влезает и рвётся посреди слова. */
	.ssw .ssw__fakt dd {
		font-size: 15px;
	}

	.ssw .ssw__kroshki {
		font-size: 10px;
	}

	/* Лид на телефоне мельче: он идёт сразу под крупным заголовком,
	   и при общем кегле два больших куска текста подряд спорят друг
	   с другом за внимание. */
	.ssw .ssw__lid {
		font-size: 14px;
		line-height: 1.5;
	}

	/*
	 * Мокап возвращается и уходит под кнопку: экраны выглядывают
	 * из-под неё снизу карточки. Отрицательный отступ поднимает
	 * картинку, кнопка ложится поверх — порядок в разметке при этом
	 * прежний, и читалка видит сперва кнопку, а не украшение.
	 */
	.ssw .ssw__card-mokap {
		display: block;
		inline-size: 116%;
		margin-block: -52px calc(clamp(22px, 2.2vw, 28px) * -1);
		margin-inline-start: -8%;
		position: relative;
		z-index: 0;
	}

	.ssw .ssw__card .ssw__cta {
		position: relative;
		z-index: 1;
	}

	.ssw .ssw__strelki {
		display: none;
	}
}

/* ----------------------------------------------------------- уже 767 */

@media (max-width: 767px) {
	/* Поля вдвое меньше общих: экран узкий, и каждые десять пикселей
	   идут снимку и тексту, а не пустоте. */
	.ssw {
		--ss-gutter: 10px;
	}

	/* Табы — одной строкой с прокруткой, как в приложениях. В несколько
	   строк они занимали четверть первого экрана, а работ под ними
	   не оставалось. */
	.ssw .ssw__filtr {
		/* Лента идёт от края до края: обрезанный таб у границы экрана
		   и есть тот знак, что строку можно тянуть. Поля возвращаем
		   внутренним отступом дорожки. */
		margin-inline: calc(var(--ss-gutter) * -1);
		max-inline-size: none;
		inline-size: auto;
	}

	.ssw .ssw__filtr-track {
		background: none;
		border-radius: 0;
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-inline: var(--ss-gutter);
		scroll-padding-inline: var(--ss-gutter);
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}

	.ssw .ssw__filtr-track::-webkit-scrollbar {
		display: none;
	}

	/* Без дорожки под всеми табами каждый снова обводим сам —
	   иначе невыбранные повисают в воздухе. */
	.ssw .sswf {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}

	/* Подложку получают только невыбранные: правило идёт ниже общего
	   и при равном весе перекрыло бы заливку выбранного таба. */
	.ssw .sswf:not(.sswf--tut) {
		background: rgba(16, 20, 24, 0.06);
	}

	.ssw .ssw__title {
		/* На четыре пикселя меньше общего: длинные слова вроде
		   «многостраничного» при общем кегле не помещаются в строку.
		   Перенос внутри слова не разрешаем намеренно — рваное слово
		   в заголовке читается хуже, чем кегль на пару пунктов мельче;
		   вместо этого слово должно влезать целиком. */
		font-size: calc(var(--ss-h1) - 4px);
		max-width: none;
	}

	.ssw .ssw__setka {
		grid-template-columns: minmax(0, 1fr);
	}

	.ssw .ssw__lenta > * {
		flex-basis: 78vw;
	}

	/* Строкой на телефоне не строка: снимок и текст встают друг под друга. */
	.ssw--v3 .sswb__ssylka {
		grid-template-columns: minmax(0, 1fr);
	}

	.ssw--v3 .sswb__info {
		padding: clamp(14px, 4vw, 20px) clamp(14px, 4vw, 20px) clamp(16px, 4vw, 22px);
	}

	.ssw .ssw__snimok:not(.ssw__snimok--edet) img {
		max-block-size: 320px;
	}

	/* У едущего снимка высоту задаёт окно, а картинка внутри тянется
	   во всю длину. Общий предел высоты здесь сплющивал её: растяжение
	   там `fill`, а не `cover`. */
	.ssw .ssw__snimok--edet {
		--okno: 320px;
	}
}