/*
Theme Name: Stable Diffusion Ru
Description: Тема сайта stable-diffusion.info. Собрана под бренд, палитра и метрика сняты с stability.ai/stable-image.
Author: Stable Diffusion Ru
Version: 1.0.0
Text Domain: sd-theme
*/

/* ═══════════════════════════════════════════════════════════
   1. ТОКЕНЫ
   Палитра и метрика сняты пипеткой и замерами с офсайта
   stability.ai/stable-image (Squarespace 7.1).
   ═══════════════════════════════════════════════════════════ */
:root {
	/* Контейнер офсайта — 1528px при полях 4vw. Сохранён по прямому
	   требованию владельца: сайт должен читаться как русская версия. */
	--shell: 1528px;
	--pad: 4vw;

	/* Ширина наборной колонки. Контейнер 1528px под сплошной текст
	   не годится: строка в 1500px нечитаема. Текст живёт в 820px,
	   широкий контейнер работает на сетках и полосах. */
	--read: 820px;

	--violet: #300465;   /* глубокий фиолетовый, тёмные полосы и hero */
	--magenta: #730498;  /* пурпур бренда */
	--lilac: #b89eff;    /* светлый акцент, CTA в шапке */
	--ds: #5f31a4;       /* фиолетовый, наследие DreamStudio */
	--ink: #1e1e1e;      /* графит */
	--ink-2: #1e2023;    /* цвет абзацев */
	--cream: #ede5e1;    /* кремовая полоса */
	--mist: #f2f3f4;     /* светло-серая поверхность */
	--paper: #ffffff;
	--muted: #383838;    /* приглушённый на светлом */
	--muted-dark: rgba(255, 255, 255, .7);
	--line: rgba(30, 30, 30, .18);
	--line-dark: rgba(255, 255, 255, .28);

	--r-tile: 10px;      /* радиус карточки на офсайте */
	--r-band: 30px;      /* скругление верхней кромки тёмной полосы */
	--r-pill: 300px;     /* кнопка-пилюля */

	--f: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	/* Моноширинного веб-шрифта нет намеренно: свободные с кириллицей
	   в сетке кончились, а офсайт сам обходится двумя семействами.
	   Код и промпты набираются системным моно — он ничего не весит. */
	--mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;

	--t: .18s;
}

/* ═══════════════════════════════════════════════════════════
   2. БАЗА
   ═══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink-2);
	font-family: var(--f);
	font-size: 18px;
	line-height: 1.6;
	font-weight: 400;
	/* Защита от бокового переполнения на уровне документа. */
	overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; }

a { color: var(--magenta); text-decoration: underline; text-underline-offset: .18em; }
a:hover { color: var(--violet); }

h1, h2, h3, h4 {
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -.02em;
	color: var(--ink);
	margin: 0 0 .5em;
	text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 1.3rem + 3.2vw, 4.2rem); letter-spacing: -.035em; }
h2 { font-size: clamp(1.55rem, 1.1rem + 1.7vw, 2.5rem); margin-top: 1.6em; }
h3 { font-size: clamp(1.2rem, 1rem + .7vw, 1.55rem); margin-top: 1.5em; }
h4 { font-size: 1.05rem; margin-top: 1.2em; }

p, ul, ol, table { margin: 0 0 1.1em; }
li { margin-bottom: .45em; }

code, kbd, .mono { font-family: var(--mono); font-size: .92em; }
code {
	background: var(--mist);
	border-radius: 4px;
	padding: .12em .4em;
	overflow-wrap: anywhere;
}

.visually-hidden {
	position: absolute; width: 1px; height: 1px; margin: -1px;
	padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ═══════════════════════════════════════════════════════════
   3. КОНТЕЙНЕР И ПОЛОСЫ
   Ритма из отступов между секциями нет — как на офсайте, где
   штатные паддинги обнулены. Ритм задаёт лента фоновых полос,
   воздух живёт внутри них.
   ═══════════════════════════════════════════════════════════ */
.shell {
	width: 100%;
	max-width: var(--shell);
	margin-inline: auto;
	padding-inline: var(--pad);
}
.shell--read { max-width: calc(var(--read) + var(--pad) * 2); }

.band {
	padding-block: clamp(48px, 5vw, 88px);
	position: relative;
}
.band--cream  { background: var(--cream); }
.band--mist   { background: var(--mist); }
.band--ink    { background: var(--ink); }
.band--violet { background: var(--violet); }

/* Тёмные полосы наезжают на предыдущую стопкой листов — приём с
   офсайта, где .section-background скруглён сверху на 30px. */
.band--ink, .band--violet {
	border-radius: var(--r-band) var(--r-band) 0 0;
	color: var(--paper);
	margin-top: -1px;
}
.band--ink h1, .band--ink h2, .band--ink h3,
.band--violet h1, .band--violet h2, .band--violet h3 { color: var(--paper); }
.band--ink p, .band--violet p { color: var(--muted-dark); }
.band--ink a, .band--violet a { color: var(--lilac); }

/* ═══════════════════════════════════════════════════════════
   4. ШАПКА
   Липкая, лого слева, навигация справа, CTA в конце.
   Бургер с 1160px — брейкпоинт офсайта.
   ═══════════════════════════════════════════════════════════ */
.masthead {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--violet);
	color: var(--paper);
}
.masthead__row {
	display: flex;
	align-items: center;
	gap: 22px;
	min-height: 68px;
	padding-block: 14px;
}

.mark {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--paper);
	text-decoration: none;
	font-weight: 600;
	letter-spacing: -.02em;
	font-size: 1.05rem;
	flex-shrink: 0;
}
.mark:hover { color: var(--paper); }
.mark__dot {
	width: 26px; height: 26px; flex: 0 0 26px;
	border-radius: 50%;
	background: var(--lilac);
	display: block;
}

.rail {
	display: flex;
	align-items: center;
	gap: 22px;
	margin-left: auto;
	flex-wrap: wrap;
}
.rail a {
	color: #d9d9d9;
	text-decoration: none;
	font-size: .98rem;
	white-space: nowrap;
}
.rail a:hover, .rail a.here { color: var(--paper); }

/* Реф-кнопка стоит ВНЕ сворачиваемой навигации: на мобильном она
   обязана быть видна на первом экране без открытия меню. */
.masthead .pill { flex-shrink: 0; }

.burner {
	display: none;
	width: 42px; height: 42px;
	border: 1px solid var(--line-dark);
	border-radius: var(--r-pill);
	background: transparent;
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
}
.burner span {
	display: block;
	width: 18px; height: 1px;
	background: var(--paper);
	margin: 4px auto;
}

.drawer { display: none; }

@media (max-width: 1160px) {
	.rail { display: none; }
	.burner { display: block; margin-left: auto; }
	.masthead__row { gap: 12px; }
	.drawer.open {
		display: block;
		background: var(--violet);
		border-top: 1px solid var(--line-dark);
		padding-bottom: 18px;
	}
	.drawer.open ul { list-style: none; margin: 0; padding: 12px 0 0; }
	.drawer.open li { margin: 0; }
	.drawer.open a {
		display: block;
		padding: 11px 0;
		color: #d9d9d9;
		text-decoration: none;
	}
	.drawer.open a:hover { color: var(--paper); }
}

@media (max-width: 420px) {
	.mark__text { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   5. КНОПКИ
   Пилюля 300px, обводка 1px, ховер — инверсия. Ровно как на
   офсайте: заливка наливается, текст выворачивается, кнопка
   не двигается и тени не получает.
   ═══════════════════════════════════════════════════════════ */
.pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 15px 21px;
	border-radius: var(--r-pill);
	border: 1px solid transparent;
	font-family: var(--f);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--t) linear, color var(--t) linear, border-color var(--t) linear;
	text-align: center;
}
.pill--solid {
	background: var(--lilac);
	color: var(--ink);
	border-color: var(--lilac);
}
.pill--solid:hover { background: var(--ink); color: var(--lilac); border-color: var(--ink); }

.pill--ghost {
	background: transparent;
	color: var(--magenta);
	border-color: var(--magenta);
}
.pill--ghost:hover { background: var(--magenta); color: var(--paper); }

.pill--light {
	background: transparent;
	color: var(--paper);
	border-color: var(--paper);
}
.pill--light:hover { background: var(--paper); color: var(--ink); }

.pill--sm { padding: 9px 16px; font-size: .92rem; }

.pill__short { display: none; }
@media (max-width: 560px) {
	.pill__full { display: none; }
	.pill__short { display: inline; }
	.pill { padding: 12px 16px; font-size: .95rem; }
}

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0; }

/* ═══════════════════════════════════════════════════════════
   6. ПЛИТКИ И СЕТКИ
   Карточка офсайта: радиус 10px, без границы, без тени,
   полупрозрачная заливка поверх тонированной полосы.
   ═══════════════════════════════════════════════════════════ */
.tile {
	background: rgba(255, 255, 255, .5);
	border-radius: var(--r-tile);
	padding: 30px;
	min-width: 0;
}
.band--ink .tile, .band--violet .tile { background: rgba(255, 255, 255, .08); }
.band--cream .tile { background: rgba(255, 255, 255, .6); }
.tile > :first-child { margin-top: 0; }
.tile > :last-child { margin-bottom: 0; }
.tile h3 { margin-top: 0; }

/* auto-fit требует настоящей минимальной длины: repeat(auto-fit,
   minmax(0,1fr)) — невалидная запись, браузер отбрасывает всё
   объявление и колонка едет по max-content. */
.grid { display: grid; gap: 15px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) {
	.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
	.grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
}

/* Текст + кадр сбоку. Кадр вторым в разметке, чтобы на узком
   экране он встал ПОД текстом. */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: center; margin: 30px 0; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1fr) 340px; } }

.shot { margin: 0; }
.shot img { display: block; width: 100%; height: auto; border-radius: var(--r-tile); }

/* Галерея кадров: небольшие снимки в один ряд по центру. На наведении
   кадр вырастает и выходит поверх соседей — увеличение делает картинку
   разборчивой, не занимая место в спокойном состоянии. */
/* Галерея — ряд из трёх кадров по центру полосы. Колонкой она встаёт
   на экранах 700px и уже, где три кадра в строке превращаются в марки.
   Ряд не переносится: кадры ужимаются, а не уезжают вниз. */
.shots { display: flex; flex-wrap: nowrap; justify-content: center; gap: 18px; margin-top: 30px; }
.shots__item { position: relative; margin: 0; flex: 0 1 440px; min-width: 0; text-align: center; }

@media (max-width: 700px) {
	.shots { flex-direction: column; align-items: center; gap: 22px; }
	.shots__item { flex: 0 0 auto; width: 100%; max-width: 500px; }
}
.shots__item img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--r-tile);
	transform-origin: center;
	transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease;
}
.shots__item .step__cap { margin-top: 8px; }
.band--ink .shots__item .step__cap,
.band--violet .shots__item .step__cap { color: var(--muted-dark); }

/* Увеличение включается только там, где кадру есть куда расти: при
   ширине окна меньше 900px кадр уже занимает почти всю полосу, и
   scale(1.3) выдавливал горизонтальную прокрутку на 38px. */
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
	.shots__item:hover { z-index: 3; }
	.shots__item:hover img { transform: scale(1.3); box-shadow: 0 26px 60px rgba(30, 30, 30, .38); }
}
@media (max-width: 560px) {
	.shots__item .step__cap { font-size: .72rem; letter-spacing: .05em; }
}
@media (prefers-reduced-motion: reduce) {
	.shots__item img { transition: none; }
	.shots__item:hover img { transform: none; }
}

/* ═══════════════════════════════════════════════════════════
   7. ПОДПИСЬ ПОД КАДРОМ
   Живёт отдельным блоком, потому что переиспользуется тремя
   разными местами: подписи кадров на /vozmozhnosti/, подпись
   ролика в sd_video() и подпись иллюстрации первого экрана.
   ═══════════════════════════════════════════════════════════ */
.step__cap {
	margin-top: 10px;
	font-size: .86rem;
	color: var(--muted-dark);
	font-variant-numeric: tabular-nums;
}
.band--cream .step__cap { color: var(--muted); }

@media (max-width: 560px) {
	.step__cap { font-size: .76rem; }
}

/* ═══════════════════════════════════════════════════════════
   8. ПЕРВЫЙ ЭКРАН
   ═══════════════════════════════════════════════════════════ */
.opening {
	background: var(--violet);
	color: var(--paper);
	padding-block: clamp(40px, 4.5vw, 76px);
	/* position + overflow держат холст анимации внутри полосы:
	   он намеренно вылезает за края (см. .opening__morph). */
	position: relative;
	overflow: hidden;
}
.opening h1 { color: var(--paper); max-width: 16ch; }

/* Холст морфического фона. Вынесен за границы полосы на 48px:
   размытие по краю холста растворяет пиксели в прозрачность и
   даёт светлую кайму по периметру, если холст совпадает с блоком.
   Размытие тут же гасит ступеньки от растяжения мелкого поля —
   поле считается на холсте примерно в 8 раз меньше видимого. */
/* Размеры заданы явно: canvas — заменяемый элемент, и у абсолютно
   позиционированного заменяемого `width: auto` берёт собственный
   размер холста (300×150), а не растягивается по inset. */
.opening__morph {
	position: absolute;
	top: -48px;
	left: -48px;
	display: block;
	width: calc(100% + 96px);
	max-width: none;
	height: calc(100% + 96px);
	pointer-events: none;
	z-index: 0;
	filter: blur(16px);
}
.opening > .shell { position: relative; z-index: 1; }

@media (max-width: 560px) {
	.opening__morph {
		top: -32px;
		left: -32px;
		width: calc(100% + 64px);
		height: calc(100% + 64px);
		filter: blur(11px);
	}
}

/* Иллюстрация первого экрана. У файла альфа-канал и нет своего
   фона: сквозь него идут и фиолет полосы, и анимация. Поэтому ни
   скругления, ни заливки у картинки быть не должно — иначе вырез
   превратится в наклеенную карточку. Тень приземляет предмет. */
.hero-shot { margin: 0; }
.hero-shot img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 16px 34px rgba(11, 0, 26, .55));
}
.opening__lede {
	font-size: clamp(1.08rem, .98rem + .5vw, 1.4rem);
	color: var(--muted-dark);
	max-width: 62ch;
	margin-bottom: 26px;
}
.opening__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; align-items: center; }
@media (min-width: 1000px) { .opening__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; } }

.facts { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 30px; }
.facts__n { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); font-weight: 600; letter-spacing: -.03em; display: block; }
.facts__l { font-size: .88rem; color: var(--muted-dark); }

/* ═══════════════════════════════════════════════════════════
   9. ТЕКСТОВЫЙ БЛОК
   ═══════════════════════════════════════════════════════════ */
.prose { max-width: var(--read); }
.prose > :first-child { margin-top: 0; }
.lede { font-size: clamp(1.05rem, .98rem + .4vw, 1.3rem); color: var(--muted); }
.band--ink .lede, .band--violet .lede { color: var(--muted-dark); }

.page-head { padding-block: clamp(30px, 3.5vw, 56px) 0; }

.note {
	border-left: 3px solid var(--magenta);
	background: var(--mist);
	border-radius: 0 var(--r-tile) var(--r-tile) 0;
	padding: 20px 24px;
	margin: 28px 0;
}
.note > :last-child { margin-bottom: 0; }
.note--warn { border-left-color: #c2410c; background: #fdf3e9; }

/* ═══════════════════════════════════════════════════════════
   10. КРОШКИ
   ═══════════════════════════════════════════════════════════ */
.crumbs { font-size: .88rem; color: var(--muted); padding-top: 22px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--magenta); }
.crumbs__sep { margin: 0 .5em; opacity: .5; }
.crumbs__here { color: var(--ink); }

/* ═══════════════════════════════════════════════════════════
   11. ТАБЛИЦЫ
   Шире экрана — скроллятся внутри себя; на ≤640px становятся
   стеком карточек, страница вбок не едет.
   ═══════════════════════════════════════════════════════════ */
.table-scroll { overflow-x: auto; margin: 26px 0; -webkit-overflow-scrolling: touch; }
.data { width: 100%; border-collapse: collapse; font-size: .96rem; }
.data th, .data td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.data th { font-weight: 600; color: var(--ink); white-space: nowrap; }
.data tbody tr:last-child td { border-bottom: 0; }
.data .num { font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 640px) {
	.data, .data tbody, .data tr, .data td { display: block; width: 100%; }
	.data thead { display: none; }
	.data tr {
		background: var(--mist);
		border-radius: var(--r-tile);
		padding: 14px 16px;
		margin-bottom: 12px;
	}
	.data td { border: 0; padding: 5px 0; }
	.data td::before {
		content: attr(data-label);
		display: block;
		font-size: .78rem;
		text-transform: uppercase;
		letter-spacing: .06em;
		color: var(--muted);
	}

	/* Внутри тёмной полосы карточка строки не может быть светлой:
	   текст там наследует белый и сливался с заливкой (контраст 1.11).
	   Карточка становится полупрозрачной подложкой поверх полосы. */
	.band--ink .data tr,
	.band--violet .data tr {
		background: rgba(255, 255, 255, .08);
		border: 1px solid var(--line-dark);
	}
	.band--ink .data td::before,
	.band--violet .data td::before { color: var(--muted-dark); }
}

/* Таблица на тёмной полосе: шапка и линейки заданы под светлый фон,
   на тёмном графит по графиту давал контраст 1.00. */
.band--ink .data th,
.band--violet .data th { color: var(--paper); }
.band--ink .data th, .band--ink .data td,
.band--violet .data th, .band--violet .data td { border-bottom-color: var(--line-dark); }

/* ═══════════════════════════════════════════════════════════
   12. ЗВЁЗДЫ
   ═══════════════════════════════════════════════════════════ */
.stars { position: relative; display: inline-block; line-height: 0; white-space: nowrap; vertical-align: middle; }
.stars svg { width: var(--star, 18px); height: var(--star, 18px); display: inline-block; fill: currentColor; }
.stars__bg { color: var(--line); display: block; }
/* Не inset:0 — он задаёт и right, и инлайновая ширина перебивается. */
.stars__fg { color: #f0a202; position: absolute; top: 0; left: 0; bottom: 0; overflow: hidden; display: block; }

.verdict { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.verdict__n { font-size: 2.4rem; font-weight: 600; letter-spacing: -.03em; }

/* ═══════════════════════════════════════════════════════════
   13. FAQ
   Аккордеон на grid-template-rows: 0fr → 1fr, не на max-height.
   ═══════════════════════════════════════════════════════════ */
.faq { max-width: var(--read); }
.qa { border-bottom: 1px solid var(--line); }
.band--ink .qa, .band--violet .qa { border-bottom-color: var(--line-dark); }
.qa__q {
	cursor: pointer;
	list-style: none;
	padding: 18px 34px 18px 0;
	font-weight: 600;
	position: relative;
	color: var(--ink);
}
.band--ink .qa__q, .band--violet .qa__q { color: var(--paper); }
.qa__q::-webkit-details-marker { display: none; }
.qa__q::after {
	content: "+";
	position: absolute; right: 4px; top: 50%;
	transform: translateY(-50%);
	font-size: 1.3rem; font-weight: 400;
	color: var(--magenta);
}
.band--ink .qa__q::after, .band--violet .qa__q::after { color: var(--lilac); }
.qa[open] .qa__q::after { content: "−"; }
.qa__a { padding-bottom: 18px; }
.qa__a > :last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════
   14. СВЯЗКИ И ПОДВАЛ
   ═══════════════════════════════════════════════════════════ */
.related { margin: 40px 0 0; }
.related ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.related li { margin: 0; }
.related a {
	display: inline-block;
	padding: 9px 16px;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	text-decoration: none;
	color: var(--ink);
	font-size: .94rem;
	transition: background-color var(--t) linear, color var(--t) linear;
}
.related a:hover { background: var(--ink); color: var(--paper); }

.basement {
	background: var(--ink);
	color: var(--muted-dark);
	border-radius: var(--r-band) var(--r-band) 0 0;
	padding-block: 54px 34px;
	margin-top: 0;
	font-size: .94rem;
}
.basement h4 { color: var(--paper); font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 14px; }
.basement a { color: var(--muted-dark); text-decoration: none; }
.basement a:hover { color: var(--paper); }
.basement__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
@media (min-width: 760px) { .basement__grid { grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; } }
.basement ul { list-style: none; padding: 0; margin: 0; }
.basement li { margin-bottom: 9px; }
.basement__legal {
	margin-top: 38px;
	padding-top: 22px;
	border-top: 1px solid var(--line-dark);
	font-size: .84rem;
	color: rgba(255, 255, 255, .5);
}
.basement__legal p { color: rgba(255, 255, 255, .5); margin-bottom: .6em; }

/* ═══════════════════════════════════════════════════════════
   15. ДВИЖЕНИЕ
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}