/* ==========================================================================
   «Я и мои грани» — дизайн-система
   Тёмная кинематографичность. Свет свечи. Замедление.
   ========================================================================== */

:root {
	--mg-ink:        #0a0806;
	--mg-ink-2:      #100d0a;
	--mg-surface:    #14110d;
	--mg-surface-2:  #1a1611;
	--mg-line:       rgba(242, 232, 213, .10);
	--mg-line-gold:  rgba(212, 162, 78, .28);

	--mg-cream:      #f2e8d5;
	--mg-text:       #cfc4b0;
	--mg-muted:      #8a8175;
	--mg-gold:       #d4a24e;
	--mg-gold-soft:  #e8c089;

	--mg-serif: "Cormorant Garamond", "Times New Roman", serif;
	--mg-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--mg-measure: 66ch;
	--mg-gutter: clamp(1.25rem, 5vw, 3rem);
	--mg-section: clamp(4rem, 9vw, 8rem);

	/* Подмена палитры Kadence: тема следует за нами. */
	--global-palette1: #d4a24e;
	--global-palette2: #e8c089;
	--global-palette3: #f2e8d5;
	--global-palette4: #e2d8c4;
	--global-palette5: #cfc4b0;
	--global-palette6: #8a8175;
	--global-palette7: #14110d;
	--global-palette8: #100d0a;
	--global-palette9: #0a0806;
	--global-content-width: 1180px;
}

/* ---------- База ---------- */

html { background: var(--mg-ink); scroll-behavior: smooth; }

body {
	background: var(--mg-ink);
	color: var(--mg-text);
	font-family: var(--mg-sans);
	font-size: 1.0625rem;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-synthesis-weight: none;
}

/* Тонкая зернистость — как плёнка. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	opacity: .035;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--mg-gold); color: var(--mg-ink); }

h1, h2, h3, h4, h5, h6,
.entry-title, .page-title, .archive-title {
	font-family: var(--mg-serif);
	font-weight: 400;
	color: var(--mg-cream);
	letter-spacing: .005em;
	text-wrap: balance;
}

h1, .entry-title { line-height: 1.1; }
h2 { font-size: clamp(1.85rem, 3.4vw, 2.7rem); line-height: 1.2; }
h3 { font-size: clamp(1.3rem, 2.1vw, 1.6rem); line-height: 1.3; }

p { margin-bottom: 1.35em; }
p:last-child { margin-bottom: 0; }

a { color: var(--mg-gold); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover, a:focus { color: var(--mg-gold-soft); }

strong, b { color: var(--mg-cream); font-weight: 500; }
em, i { font-style: italic; }

hr {
	border: 0;
	border-top: 1px solid var(--mg-line-gold);
	margin: clamp(2.5rem, 5vw, 4rem) 0;
}

img { border-radius: 2px; }

/* ---------- Шапка ---------- */

#masthead.site-header,
.site-header {
	background: rgba(10, 8, 6, .82);
	-webkit-backdrop-filter: blur(14px) saturate(120%);
	backdrop-filter: blur(14px) saturate(120%);
	border-bottom: 1px solid var(--mg-line);
}

.site-header-row-container-inner { border: 0; }

/*
 * Шапка закреплена.
 *
 * Полоса уже собрана как стеклянная: полупрозрачный фон, размытие, тонкая
 * линия снизу. Ей не хватало только закрепления.
 *
 * Закрепляем насовсем, без «уезжает вниз». Прокрутка на главной покадровая,
 * и при переходе к секции страница встаёт так, что сверху остаётся 96 px —
 * ровно под шапку (scroll-margin-top у секций). Если шапка в этот момент
 * спрятана, вместо неё видна полоса предыдущего экрана; закреплённая шапка
 * встаёт в этот зазор и делает кадр целым.
 *
 * position: sticky, а не fixed: шапка остаётся в потоке, при включении
 * ничего не прыгает и не нужен компенсирующий отступ.
 */
#masthead.site-header {
	position: sticky;
	top: 0;
	z-index: 940;
	transition: background-color .3s ease, border-bottom-color .3s ease,
		box-shadow .3s ease;
}

/* Панель WordPress висит над всем: под ней шапка встаёт ниже. */
body.admin-bar #masthead.site-header { top: 32px; }

@media screen and (max-width: 782px) {
	body.admin-bar #masthead.site-header { top: 46px; }
}

/* Страница сдвинулась — полоса чуть плотнее и с тенью, чтобы край читался. */
#masthead.is-floating {
	background: rgba(10, 8, 6, .93);
	border-bottom-color: rgba(242, 232, 213, .14);
	box-shadow: 0 14px 34px -22px rgba(0, 0, 0, .95);
}

.site-title, .site-title a, .site-description { color: var(--mg-cream); }
.site-title { font-family: var(--mg-serif); font-size: 1.5rem; letter-spacing: .04em; }
.site-branding .brand:hover .site-title { color: var(--mg-gold-soft); }

/* Меню */
.main-navigation .primary-menu-container > ul > li > a,
.header-navigation .primary-menu-container a {
	color: var(--mg-text);
	font-family: var(--mg-sans);
	font-size: .8125rem;
	font-weight: 400;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color .25s ease;
}

.main-navigation .primary-menu-container > ul > li > a:hover,
.main-navigation .primary-menu-container > ul > li.current-menu-item > a,
.main-navigation .primary-menu-container > ul > li > a[aria-current="page"] {
	color: var(--mg-gold);
}

.main-navigation .primary-menu-container > ul > li > a::after {
	content: "";
	display: block;
	height: 1px;
	width: 100%;
	margin-top: .45em;
	background: var(--mg-gold);
	/* scaleX вместо width: линия растёт на композиторе, без пересчёта
	   раскладки на каждом кадре. */
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .3s ease;
}
.main-navigation .primary-menu-container > ul > li > a:hover::after,
.main-navigation .primary-menu-container > ul > li > a[aria-current="page"]::after { transform: scaleX(1); }

/*
 * Активный пункт меню на главной.
 *
 * WordPress знает только «текущую страницу» — на главной это всегда
 * «Главная», поэтому «Грани» и «Подписка» (якоря секций) не подсвечивались
 * никогда. Скрипт навигации знает, какой экран в кадре, и ставит is-current
 * соответствующему пункту. body.mg-spy появляется только из скрипта:
 * без JavaScript остаётся штатная подсветка страницы, как раньше.
 */
.main-navigation .primary-menu-container > ul > li.is-current > a,
.mobile-navigation li.is-current > a,
.drawer-navigation li.is-current > a {
	color: var(--mg-gold);
}

.main-navigation .primary-menu-container > ul > li.is-current > a::after { width: 100%; }

/* Штатная подсветка страницы уступает место подсветке экрана. */
body.mg-spy .main-navigation .primary-menu-container > ul > li.current-menu-item:not(.is-current) > a,
body.mg-spy .main-navigation .primary-menu-container > ul > li:not(.is-current) > a[aria-current="page"] {
	color: var(--mg-text);
}

body.mg-spy .main-navigation .primary-menu-container > ul > li:not(.is-current) > a[aria-current="page"]::after {
	width: 0;
}

body.mg-spy .mobile-navigation li.current-menu-item:not(.is-current) > a,
body.mg-spy .drawer-navigation li.current-menu-item:not(.is-current) > a {
	color: var(--mg-cream) !important;
}

.mobile-navigation li.is-current > a,
.drawer-navigation li.is-current > a { color: var(--mg-gold) !important; }

/* Кнопка мобильного меню */
button.menu-toggle, .mobile-toggle-open-container .menu-toggle {
	color: var(--mg-cream);
	border-color: var(--mg-line-gold);
}

/* ---------- Утилиты ---------- */

.mg-wrap {
	width: 100%;
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: var(--mg-gutter);
}

.mg-full {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.mg-eyebrow {
	display: block;
	font-family: var(--mg-sans);
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--mg-gold);
	margin: 0 0 1.6rem;
}

.mg-lead {
	font-family: var(--mg-serif);
	font-size: clamp(1.3rem, 2.2vw, 1.65rem);
	line-height: 1.55;
	color: var(--mg-cream);
}

.mg-muted { color: var(--mg-muted); }

/* ---------- Кнопки ---------- */

.mg-btn,
.entry-content .mg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6em;
	min-height: 52px;
	max-width: 100%;
	text-align: center;
	line-height: 1.45;
	white-space: normal;
	overflow-wrap: break-word;
	padding: .85em 2.1em;
	font-family: var(--mg-sans);
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid var(--mg-gold);
	border-radius: 1px;
	background: var(--mg-gold);
	color: #14100a;
	transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}

.mg-btn:hover, .entry-content .mg-btn:hover {
	background: var(--mg-gold-soft);
	border-color: var(--mg-gold-soft);
	color: #14100a;
	transform: translateY(-1px);
}

.mg-btn--ghost,
.entry-content .mg-btn--ghost {
	background: transparent;
	color: var(--mg-cream);
	border-color: rgba(242, 232, 213, .30);
	text-decoration: none;
}

.mg-btn--ghost:hover, .entry-content .mg-btn--ghost:hover {
	background: rgba(242, 232, 213, .06);
	border-color: var(--mg-gold);
	color: var(--mg-cream);
}

.mg-btn-row { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }

/* ---------- Герой (Порог) ---------- */

.mg-hero {
	position: relative;
	min-height: min(92svh, 900px);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
	background: var(--mg-ink);
}

.mg-hero__media {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center 62%;
	transform: scale(1.02);
}

.mg-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 80% at 50% 42%, rgba(10, 8, 6, .18) 0%, rgba(10, 8, 6, .72) 58%, var(--mg-ink) 100%),
		linear-gradient(to bottom, rgba(10, 8, 6, .88) 0%, rgba(10, 8, 6, .25) 34%, rgba(10, 8, 6, .78) 82%, var(--mg-ink) 100%);
}

.mg-hero__inner {
	position: relative;
	z-index: 2;
	max-width: 860px;
	padding: clamp(5rem, 12vh, 9rem) var(--mg-gutter) clamp(4rem, 9vh, 7rem);
}

.mg-hero__eyebrow {
	font-family: var(--mg-sans);
	font-size: .6875rem;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: var(--mg-gold);
	margin-bottom: 2rem;
}

.mg-hero__title {
	font-family: var(--mg-serif);
	font-weight: 300;
	font-size: clamp(2.1rem, 5.2vw, 3.9rem);
	line-height: 1.14;
	letter-spacing: -.005em;
	color: var(--mg-cream);
	margin: 0 auto 1.6rem;
	text-wrap: balance;
	hyphens: none;
	text-shadow: 0 2px 40px rgba(0, 0, 0, .55);
}

.mg-hero__title em { font-style: italic; color: var(--mg-gold-soft); }

.mg-hero__sub {
	max-width: 46ch;
	margin: 0 auto 2.6rem;
	font-size: 1.0625rem;
	line-height: 1.75;
	color: #b9ae9c;
}

.mg-hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 2.2rem;
	transform: translateX(-50%);
	z-index: 2;
	width: 1px;
	height: 56px;
	background: linear-gradient(to bottom, transparent, var(--mg-gold));
	opacity: .55;
}

/* ---------- Секции ---------- */

.mg-section { padding-block: var(--mg-section); position: relative; }
.mg-section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.mg-section--band { background: var(--mg-ink-2); border-top: 1px solid var(--mg-line); border-bottom: 1px solid var(--mg-line); }

.mg-section__head { max-width: var(--mg-measure); margin: 0 auto clamp(2.5rem, 5vw, 4rem); }
.mg-section__head--center { text-align: center; }

.mg-statement {
	font-family: var(--mg-serif);
	font-weight: 300;
	font-size: clamp(1.9rem, 4.4vw, 3.15rem);
	line-height: 1.24;
	color: var(--mg-cream);
	margin: 0 0 1.4rem;
	text-wrap: balance;
}
.mg-statement em { font-style: italic; color: var(--mg-gold); }

.mg-divider {
	width: 1px;
	height: 72px;
	margin: 0 auto;
	background: linear-gradient(to bottom, transparent, var(--mg-line-gold) 40%, transparent);
}

/* ---------- Карточки историй ---------- */

.mg-stories {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

.mg-story {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--mg-surface);
	border: 1px solid var(--mg-line);
	overflow: hidden;
	transition: border-color .3s ease, transform .3s ease;
}

.mg-story:hover { border-color: var(--mg-line-gold); transform: translateY(-3px); }

.mg-story__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--mg-surface-2);
}

.mg-story__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	filter: saturate(.82) contrast(1.02) brightness(.92);
	transition: transform .6s ease, filter .6s ease;
}

.mg-story:hover .mg-story__media img { transform: scale(1.04); filter: saturate(.95) brightness(1); }

.mg-story__body { padding: clamp(1.4rem, 2.6vw, 2rem); display: flex; flex-direction: column; gap: .85rem; flex: 1; }

.mg-story__kicker {
	font-family: var(--mg-sans);
	font-size: .625rem;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--mg-gold);
}

.mg-story__title {
	font-family: var(--mg-serif);
	font-size: clamp(1.4rem, 2.4vw, 1.8rem);
	line-height: 1.22;
	margin: 0;
	color: var(--mg-cream);
}

.mg-story__title a { color: inherit; text-decoration: none; }
.mg-story__title a:hover { color: var(--mg-gold-soft); }

.mg-story__excerpt { color: var(--mg-text); font-size: .975rem; line-height: 1.7; margin: 0; }

/* ---------- Мета карточки: дата, время чтения, грани ---------- */
/*
 * Та же мета, что в ленте каталога (.mg-zcard__meta), но в масштабе
 * карточки главной и в два ряда: дата с временем чтения, ниже — грани.
 * Грани — ссылки на ленту с фильтром, поэтому z-index выше «растянутой
 * ссылки» закрытой карточки: иначе клик по грани открывал бы окно входа.
 *
 * Отступы снизу гасим точечно: общее правило темы «p { margin-bottom: 2rem }»
 * отрывало мету от текста на 39 px. Мета — часть заголовочной группы, ей
 * положено стоять вплотную к отрывку.
 */
.mg-story .mg-story__meta {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	margin: 0 0 .15rem;
	font-family: var(--mg-sans);
	font-size: .65rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mg-muted);
}

.mg-story .mg-story__facets {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	margin: 0 0 .4rem;
	font-family: var(--mg-sans);
	font-size: .65rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mg-muted);
}

.mg-story__sep { margin: 0 .4rem; color: rgba(138, 129, 117, .7); }
.mg-story__facet-label { color: var(--mg-muted); }
.mg-story__facet-dash { margin: 0 .38rem; color: rgba(138, 129, 117, .75); }

.mg-story__facet {
	position: relative;
	z-index: 6;
	color: var(--mg-muted);
	text-decoration: none;
}

.mg-story__facet-name { color: var(--mg-gold); transition: color .18s ease; }

.mg-story__facet:hover .mg-story__facet-name,
.mg-story__facet:focus .mg-story__facet-name {
	color: var(--mg-gold-soft);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mg-story__facet:focus-visible {
	outline: 1px solid var(--mg-gold);
	outline-offset: 3px;
}

.mg-story__more {
	margin-top: auto;
	font-family: var(--mg-sans);
	font-size: .6875rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--mg-gold);
	text-decoration: none;
}
.mg-story__more:hover { color: var(--mg-gold-soft); }

/* ---------- Замок: платная история без доступа ---------- */

/* Растянутая ссылка: кликабельна вся карточка, вложенных ссылок нет. */
.mg-story { position: relative; }
.mg-story__stretch { position: absolute; inset: 0; z-index: 3; }
.mg-story__stretch:focus-visible {
	outline: 2px solid var(--mg-gold);
	outline-offset: -3px;
}

/* Обложка притушена, но история должна угадываться по кадру. */
.mg-story--locked .mg-story__media img {
	filter: grayscale(.4) brightness(.58) contrast(1.04);
	transform: scale(1.02);
}
.mg-story--locked:hover .mg-story__media img {
	filter: grayscale(.15) brightness(.72) contrast(1.02);
	transform: scale(1.05);
}

/* Значок на обложке: золотое кольцо и мягкое затемнение по краям. */
.mg-story__lock {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	pointer-events: none;
	background: radial-gradient(circle at 50% 50%, rgba(10,8,6,.10) 0%, rgba(10,8,6,.55) 78%);
}
.mg-story__lock .mg-lock {
	width: 46px;
	height: 46px;
	padding: 11px;
	color: var(--mg-gold-soft);
	border: 1px solid var(--mg-line-gold);
	border-radius: 50%;
	background: rgba(10, 8, 6, .55);
	backdrop-filter: blur(2px);
	transition: color .3s ease, border-color .3s ease, transform .3s ease;
}
.mg-story--locked:hover .mg-story__lock .mg-lock {
	color: var(--mg-gold);
	border-color: rgba(212, 162, 78, .6);
	transform: translateY(-2px);
}

/* Строка вместо «Читать →». */
.mg-story__more--locked {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	color: var(--mg-gold);
	cursor: pointer;
}
.mg-story__more--locked .mg-lock { width: 15px; height: 15px; flex: none; }
.mg-story--locked:hover .mg-story__more--locked { color: var(--mg-gold-soft); }

/* ---------- Полка платных историй ---------- */

.mg-shelf { padding-block: var(--mg-section); }
.mg-shelf .mg-section__head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }

.mg-shelf__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.25rem, 2.5vw, 2rem);
}

/* Две колонки на десктопе — как в утверждённой раскладке. */
@media (min-width: 768px) {
	.mg-shelf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/*
 * Одна история — одна карточка. В сетке из двух колонок она прижималась
 * влево, а справа зияла пустая половина. Пока история одна, ставим её по
 * центру; как только появится вторая, правило перестанет действовать.
 */
@media (min-width: 768px) {
	.mg-shelf__grid:has(> :only-child) {
		grid-template-columns: minmax(0, 34rem);
		justify-content: center;
	}
}

/* На широком экране карточки полки ниже, чем в ленте: их читают рядами. */
.mg-shelf .mg-story__media { aspect-ratio: 16 / 9; }

/*
 * Полка на главной. Стили ленты на главной («Короткие очерки») сделаны
 * под три карточки в ряд: кадр 4:5, прозрачный фон, номер «01» над
 * обложкой. На полке это превращало одну карточку в колонну высотой
 * 900px. Поэтому здесь возвращаем вид карточки, а кадр держим 16:9.
 * Правила с page-id-6 сильнее базовых, значит нужен тот же префикс.
 */
body.page-id-6 #mg-shelf .mg-story {
	background: var(--mg-surface);
	border: 1px solid var(--mg-line);
	overflow: hidden;
}

body.page-id-6 #mg-shelf .mg-story::before { content: none; }

body.page-id-6 #mg-shelf .mg-story__media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

body.page-id-6 #mg-shelf .mg-story__body {
	padding: clamp(1.4rem, 2.6vw, 2rem);
}

/*
 * Отрывок на полке — приманка, а не текст: три строки. Иначе одна карточка
 * на главной растягивалась в четверть экрана.
 */
.mg-shelf .mg-story__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* В ленте отрывок тянется, чтобы «Читать →» стоял по низу. На полке
	   он сам себе мера: иначе между текстом и замком зияет пустота. */
	flex: 0 0 auto;
}

/*
 * Внешние отступы заголовка и отрывка приходят от темы (h3 1.5em, абзац 2em).
 * В ленте они незаметны — карточки стоят рядом, — а на полке между названием
 * и текстом появлялся разрыв в полстроки, и карточка росла на 60px.
 */
.mg-shelf .mg-story__title { margin-block: 0; }
.mg-shelf .mg-story__excerpt { margin-bottom: 0; }

.mg-shelf__note {
	margin: clamp(1.5rem, 3vw, 2rem) auto 0;
	max-width: 46ch;
	text-align: center;
	font-size: .875rem;
	line-height: 1.7;
	color: var(--mg-muted);
}

/* Якорь формы оплаты: чтобы клик по замку не прилипал к верхнему краю. */
.mg-anchor { scroll-margin-top: calc(var(--mg-head-h, 81px) + 16px); }

/*
 * Пункты меню «Грани» и «Подписка» ведут на секции главной. Шапка
 * закреплена и закрывает верх кадра, поэтому якорю оставляем место
 * ровно под неё — ни пикселем больше.
 *
 * Было 96px при шапке 81px: секция вставала на 15px ниже её края, и в
 * этот зазор проглядывала полоса предыдущего экрана. Переменную
 * --mg-head-h ставит скрипт шапки (moigrani-design.php), поэтому
 * отступ сам подстраивается под реальную высоту, включая панель WP.
 */
#mg-sec-hero, #mg-sec-facets, #mg-sec-stories, #mg-sec-gate {
	scroll-margin-top: var(--mg-head-h, 81px);
}

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* Короткая подсветка формы после перехода с закрытой карточки. */
.mg-form-pulse { animation: mg-form-pulse 1.6s ease-out 1; }
@keyframes mg-form-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(212, 162, 78, .45); }
	70%  { box-shadow: 0 0 0 10px rgba(212, 162, 78, 0); }
	100% { box-shadow: 0 0 0 0 rgba(212, 162, 78, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.mg-form-pulse { animation: none; }
}

/* ---------- Грани ---------- */

.mg-facets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 1px;
	background: var(--mg-line);
	border: 1px solid var(--mg-line);
}

.mg-facet {
	background: var(--mg-ink);
	padding: clamp(1.6rem, 3vw, 2.4rem);
	transition: background .3s ease;
}
.mg-facet:hover { background: var(--mg-surface); }

.mg-facet__num {
	font-family: var(--mg-sans);
	font-size: .625rem;
	letter-spacing: .24em;
	color: var(--mg-gold);
	opacity: .8;
}

.mg-facet__name {
	font-family: var(--mg-serif);
	font-size: 1.5rem;
	color: var(--mg-cream);
	margin: .5rem 0 .6rem;
}

.mg-facet__desc { font-size: .9375rem; line-height: 1.65; color: var(--mg-muted); margin: 0; }

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

.mg-gate {
	position: relative;
	padding-block: clamp(3.5rem, 8vw, 7rem);
	background:
		radial-gradient(90% 70% at 12% 0%, rgba(212, 162, 78, .10), transparent 60%),
		var(--mg-ink-2);
	border-top: 1px solid var(--mg-line);
	border-bottom: 1px solid var(--mg-line);
}

.mg-gate__grid {
	display: grid;
	gap: clamp(2.4rem, 5vw, 3.5rem);
	align-items: start;
}

@media (min-width: 1024px) {
	.mg-gate__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 452px);
		gap: clamp(2.5rem, 4vw, 4.5rem);
	}
}

.mg-gate__title {
	font-family: var(--mg-serif);
	font-weight: 300;
	font-size: clamp(1.9rem, 3.6vw, 2.9rem);
	line-height: 1.18;
	color: var(--mg-cream);
	margin: 0 0 1.1rem;
	max-width: 22ch;
}

.mg-gate__lead {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--mg-text);
	margin: 0 0 clamp(2rem, 4vw, 2.6rem);
	max-width: 46ch;
}

/* Надзаголовок списка */
.mg-gate__inside {
	margin: 0 0 1rem;
	font-family: var(--mg-sans);
	font-size: .6875rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--mg-gold);
}

.mg-gate__list {
	counter-reset: gate;
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--mg-line);
}

.mg-gate__item {
	counter-increment: gate;
	position: relative;
	padding: 1.25rem 0 1.25rem 2.7rem;
	border-bottom: 1px solid var(--mg-line);
}

/* Номер пункта — тонкая цифра на поле слева. */
.mg-gate__item::before {
	content: counter(gate, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 1.42rem;
	font-family: var(--mg-sans);
	font-size: .6875rem;
	letter-spacing: .14em;
	color: var(--mg-gold);
}

.mg-gate__item-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 .8rem;
	margin: 0 0 .4rem;
	font-family: var(--mg-serif);
	font-weight: 400;
	font-size: clamp(1.15rem, 1.5vw, 1.35rem);
	line-height: 1.3;
	color: var(--mg-cream);
}

/* Ритм: «1 раз в неделю», «Закрытая библиотека». */
.mg-gate__when {
	font-family: var(--mg-sans);
	font-size: .625rem;
	font-weight: 400;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--mg-muted);
	white-space: nowrap;
}

.mg-gate__item-text {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.65;
	color: var(--mg-text);
}

/* Цена — прозой, а не плитками: тон разговора, не прайса. */
.mg-gate__price {
	margin-top: clamp(2rem, 4vw, 2.6rem);
	padding-top: clamp(1.6rem, 3vw, 2rem);
	border-top: 1px solid var(--mg-line-gold);
}

.mg-gate__price-line {
	display: flex;
	align-items: baseline;
	gap: .8rem;
	margin: 0;
}

.mg-gate__sum {
	font-family: var(--mg-serif);
	font-size: clamp(1.9rem, 2.8vw, 2.3rem);
	line-height: 1;
	color: var(--mg-cream);
}

.mg-gate__price-label {
	font-family: var(--mg-sans);
	font-size: .6875rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--mg-gold);
}

.mg-gate__price-note {
	margin: .55rem 0 1.5rem;
	max-width: 46ch;
	font-size: .9375rem;
	line-height: 1.65;
	color: var(--mg-muted);
}
.mg-gate__price-note:last-child { margin-bottom: 0; }

/* Дверь: форма PMS в собственной рамке. */
.mg-gate__entry {
	border: 1px solid var(--mg-line-gold);
	background: rgba(10, 8, 6, .55);
	padding: clamp(1.4rem, 3vw, 2rem);
}

.mg-gate__entry-label {
	display: block;
	margin-bottom: 1.3rem;
	text-align: center;
}

/* Внутри рамки форма не подчиняется общему правилу «560 по центру». */
.mg-gate__entry .pms-form {
	max-width: 100% !important;
	margin-inline: 0;
}

/* Тихая просьба — внизу, уже не отдельной секцией. */
.mg-gate__mercy {
	margin-top: clamp(2.4rem, 5vw, 3.4rem);
	padding-top: clamp(1.8rem, 3.5vw, 2.4rem);
	border-top: 1px solid var(--mg-line);
	text-align: center;
}

.mg-gate__mercy-text {
	margin: 0 auto 1.4rem;
	max-width: 54ch;
	font-size: .9375rem;
	line-height: 1.7;
	color: var(--mg-muted);
}

/* Старые классы ниже оставлены для страницы «Вход в пространство». */
.mg-gate__text { max-width: 52ch; margin: 0 auto 2.4rem; color: var(--mg-text); }

.mg-prices {
	display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-bottom: 2.4rem;
}

.mg-price {
	min-width: 190px;
	padding: 1.5rem 1.75rem;
	border: 1px solid var(--mg-line-gold);
	background: rgba(10, 8, 6, .5);
	text-align: center;
}

.mg-price__sum {
	font-family: var(--mg-serif);
	font-size: 2.1rem;
	color: var(--mg-cream);
	line-height: 1.1;
}
.mg-price__sum span { font-size: .9rem; font-family: var(--mg-sans); color: var(--mg-muted); letter-spacing: .08em; }
.mg-price__label {
	margin-top: .5rem;
	font-family: var(--mg-sans);
	font-size: .6875rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--mg-gold);
}

/* Своя шапка есть — штатные заголовки скрываем. */
.single-post .entry-hero, .page .entry-hero,
.single-post .entry-header, .page .entry-header,
.blog .entry-hero, .archive .entry-hero { display: none; }

.single-post #primary, .page #primary, .blog #primary, .archive #primary { margin-top: 0; }

.mg-article-head {
	position: relative;
	padding: clamp(5rem, 13vh, 8rem) var(--mg-gutter) clamp(3rem, 6vw, 4.5rem);
	text-align: center;
	border-bottom: 1px solid var(--mg-line);
	background: var(--mg-ink);
	overflow: hidden;
}

.mg-article-head--cover {
	min-height: clamp(420px, 62vh, 660px);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background-image: var(--mg-cover);
	background-size: cover;
	background-position: center 38%;
}

.mg-article-head__veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(to bottom, rgba(10, 8, 6, .72) 0%, rgba(10, 8, 6, .30) 38%, rgba(10, 8, 6, .88) 88%, var(--mg-ink) 100%);
}

.mg-article-head__inner { position: relative; z-index: 2; max-width: 880px; }


.mg-article-head__kicker {
	font-family: var(--mg-sans);
	font-size: .6875rem; letter-spacing: .28em; text-transform: uppercase;
	color: var(--mg-gold); margin-bottom: 1.4rem;
}

.mg-article-head__title {
	font-family: var(--mg-serif);
	font-weight: 300;
	font-size: clamp(2rem, 4.6vw, 3.2rem);
	line-height: 1.14;
	color: var(--mg-cream);
	max-width: 22ch;
	margin: 0 auto;
}

.mg-article-head__cover {
	max-width: 1000px;
	margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: 1px solid var(--mg-line);
}
.mg-article-head__cover img { width: 100%; height: 100%; object-fit: cover; }

.single-post .entry-content,
.page .entry-content {
	max-width: var(--mg-measure);
	margin-inline: auto;
	font-size: 1.125rem;
	line-height: 1.82;
	color: var(--mg-text);
}

.single-post .entry-content > p.mg-p--first::first-letter {
	float: left;
	font-family: var(--mg-serif);
	font-size: 3.9rem;
	line-height: .82;
	padding: .08em .12em 0 0;
	color: var(--mg-gold);
}

.single-post .entry-content em { color: var(--mg-cream); }

.entry-meta, .entry-footer, .post-navigation { color: var(--mg-muted); font-size: .8125rem; }
.entry-meta a, .entry-footer a { color: var(--mg-muted); }
.entry-meta a:hover { color: var(--mg-gold); }

.entry-taxonomies a, .category-links a {
	font-family: var(--mg-sans);
	font-size: .625rem; letter-spacing: .22em; text-transform: uppercase;
	color: var(--mg-gold); text-decoration: none;
}

/* ---------- Комментарии ---------- */

#comments, .comments-area {
	max-width: var(--mg-measure);
	margin-inline: auto;
}
.comment-respond input[type="text"], .comment-respond input[type="email"],
.comment-respond input[type="url"], .comment-respond textarea,
.mg-form input[type="text"], .mg-form input[type="email"], .mg-form textarea, .mg-form select {
	width: 100%;
	background: var(--mg-surface);
	border: 1px solid var(--mg-line);
	color: var(--mg-cream);
	padding: .9em 1.1em;
	font-family: var(--mg-sans);
	font-size: 1rem;
	border-radius: 1px;
}
.comment-respond input:focus, .comment-respond textarea:focus,
.mg-form input:focus, .mg-form textarea:focus {
	outline: none;
	border-color: var(--mg-gold);
	box-shadow: 0 0 0 3px rgba(212, 162, 78, .12);
}
.comment-respond label, .mg-form label { color: var(--mg-muted); font-size: .8125rem; }

input[type="submit"], .comment-respond .submit, .mg-form button[type="submit"] {
	background: var(--mg-gold); color: #14100a; border: 0;
	padding: .85em 2.1em; font-family: var(--mg-sans); font-size: .75rem;
	letter-spacing: .2em; text-transform: uppercase; cursor: pointer;
	transition: background .25s ease;
}
input[type="submit"]:hover, .mg-form button[type="submit"]:hover { background: var(--mg-gold-soft); }

/* ---------- Архив «Улица» ---------- */

.blog .entry-hero, .archive .entry-hero { display: none; }

.mg-archive-head {
	padding: clamp(3.5rem, 8vh, 6rem) var(--mg-gutter) clamp(2rem, 4vw, 3rem);
	text-align: center;
	border-bottom: 1px solid var(--mg-line);
	background: radial-gradient(60% 100% at 50% 0%, rgba(212, 162, 78, .06), transparent 70%), var(--mg-ink);
}

.mg-archive-head__title {
	font-family: var(--mg-serif);
	font-weight: 300;
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	line-height: 1.12;
	color: var(--mg-cream);
	margin: 0 0 1rem;
}

.mg-archive-head__desc {
	max-width: 54ch;
	margin: 0 auto;
	color: var(--mg-muted);
	font-size: 1rem;
	line-height: 1.7;
}

#archive-container {
	display: grid !important;
	/*
	 * Две колонки на десктопе, одна на планшете и телефоне.
	 * Сетку задаёт настройка Kadence post_archive_columns, но нижестоящие
	 * правила темы с auto-fit всё перебивали — отсюда была одна колонка
	 * на любой ширине. Здесь границы заданы явно.
	 */
	grid-template-columns: 1fr;
	gap: clamp(1.75rem, 2.6vw, 2.75rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 1024px) {
	#archive-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.entry-list-item { margin: 0 !important; }

#archive-container .loop-entry {
	display: flex; flex-direction: column; height: 100%;
	background: var(--mg-surface);
	border: 1px solid var(--mg-line);
	box-shadow: none;
	transition: border-color .3s ease, transform .3s ease;
}
#archive-container .loop-entry:hover { border-color: var(--mg-line-gold); transform: translateY(-3px); }

#archive-container .entry-content-wrap { padding: clamp(1.4rem, 2.4vw, 1.9rem); display: flex; flex-direction: column; flex: 1; }

#archive-container .entry-title {
	font-family: var(--mg-serif);
	font-size: clamp(1.35rem, 2.2vw, 1.7rem);
	line-height: 1.22;
	margin: 0 0 .7rem;
}
#archive-container .entry-title a { color: var(--mg-cream); text-decoration: none; }
#archive-container .entry-title a:hover { color: var(--mg-gold-soft); }

#archive-container .entry-summary p { color: var(--mg-text); font-size: .975rem; line-height: 1.7; }

#archive-container .entry-actions .post-more-link {
	font-family: var(--mg-sans); font-size: .6875rem; letter-spacing: .2em;
	text-transform: uppercase; color: var(--mg-gold); text-decoration: none;
}
#archive-container .kadence-svg-icon { width: 14px; height: 14px; }

#archive-container .entry-thumbnail img,
#archive-container .post-thumbnail img { filter: saturate(.82) brightness(.92); }

.moigrani-intro {
	margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
	max-width: var(--mg-measure);
	text-align: center;
	color: var(--mg-text);
	font-family: var(--mg-serif);
	font-size: clamp(1.1rem, 2vw, 1.3rem);
	line-height: 1.65;
}

/* Пагинация */
.page-numbers {
	display: inline-grid; place-items: center;
	min-width: 42px; height: 42px;
	color: var(--mg-text); text-decoration: none;
	border: 1px solid var(--mg-line);
	font-family: var(--mg-sans); font-size: .8125rem;
}
.page-numbers.current, .page-numbers:hover { border-color: var(--mg-gold); color: var(--mg-gold); }
.page-numbers.dots { border-color: transparent; }

/* ---------- Подвал ---------- */

#colophon.site-footer, .site-footer {
	background: var(--mg-ink-2);
	border-top: 1px solid var(--mg-line);
	color: var(--mg-muted);
}

.site-footer .site-container { padding-block: clamp(2.5rem, 5vw, 4rem); }

.site-footer a { color: var(--mg-text); text-decoration: none; }
.site-footer a:hover { color: var(--mg-gold); }


/* ---------- Форма ---------- */

.mg-form { max-width: 560px; margin-inline: auto; display: grid; gap: 1.1rem; }
.mg-form__row { display: grid; gap: .45rem; }
.mg-form__note { font-size: .8125rem; color: var(--mg-muted); }
.mg-form__ok {
	border: 1px solid var(--mg-line-gold);
	background: rgba(212, 162, 78, .08);
	padding: 1.1rem 1.3rem;
	color: var(--mg-cream);
}

/* ---------- Плагин подписок: подгонка ---------- */

.pms-form, .pms-subscription-plan, .pms-field {
	color: var(--mg-text) !important;
	font-family: var(--mg-sans);
}

.pms-subscription-plan {
	background: var(--mg-surface) !important;
	border: 1px solid var(--mg-line) !important;
	color: var(--mg-text) !important;
}
.pms-subscription-plan:hover { border-color: var(--mg-line-gold) !important; }

.pms-subscription-plan-price-value, .pms-subscription-plan-currency, .pms-subscription-plan-name {
	color: var(--mg-cream) !important;
	font-family: var(--mg-serif);
}

.pms-field input[type="text"], .pms-field input[type="email"],
.pms-field input[type="password"], .pms-field select {
	background: var(--mg-surface) !important;
	border: 1px solid var(--mg-line) !important;
	color: var(--mg-cream) !important;
}

.pms-form-submit, .pms-button {
	background: var(--mg-gold) !important;
	border-color: var(--mg-gold) !important;
	color: #14100a !important;
	font-family: var(--mg-sans);
	font-size: .75rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	border-radius: 1px !important;
}

.mg-notice {
	border: 1px solid var(--mg-line-gold);
	background: rgba(212, 162, 78, .07);
	padding: clamp(1.3rem, 3vw, 1.9rem);
	color: var(--mg-cream);
	max-width: var(--mg-measure);
	margin: 0 auto 2rem;
	text-align: center;
	font-family: var(--mg-serif);
	font-size: 1.15rem;
	line-height: 1.6;
}

.mg-placeholder {
	border: 1px dashed rgba(212, 162, 78, .45);
	background: rgba(212, 162, 78, .05);
	padding: 1.1rem 1.3rem;
	color: var(--mg-gold-soft);
	font-size: .9rem;
	font-family: var(--mg-sans);
	max-width: var(--mg-measure);
	margin: 1.5rem auto;
}

/* ---------- Адаптив ---------- */

@media (max-width: 767px) {
	body { font-size: 1.03125rem; }
	.mg-hero { min-height: 88svh; }
	.mg-hero__media { background-position: center 58%; }
	.mg-hero__scroll { display: none; }
	.single-post .entry-content, .page .entry-content { font-size: 1.0625rem; line-height: 1.78; }
	.single-post .entry-content > p.mg-p--first::first-letter { font-size: 3rem; }
	.mg-btn, .entry-content .mg-btn {
		width: 100%;
		padding: .9em 1.2em;
		letter-spacing: .13em;
		font-size: .72rem;
	}
	.mg-btn-row { flex-direction: column; gap: .7rem; }
	.mg-facets { grid-template-columns: 1fr 1fr; }
	.mg-price { flex: 1 1 100%; }
}

@media (max-width: 420px) {
	.mg-facets { grid-template-columns: 1fr; }
}

@media (max-width: 360px) {
	/* Узкие экраны: длинные подписи кнопок должны дышать. */
	.mg-btn, .entry-content .mg-btn {
		letter-spacing: .08em;
		font-size: .68rem;
		padding-left: 1em;
		padding-right: 1em;
	}
	.mg-hero__title { font-size: 1.9rem; }
	.mg-hero__sub { font-size: .975rem; }
}

@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; }
	html { scroll-behavior: auto; }
}

/* Фокус — видимый и в тон. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
	outline: 2px solid var(--mg-gold);
	outline-offset: 3px;
}

/* Логотип — только знак-многогранник, название и подзаголовок живым текстом.
   Раньше словесное название было вшито в растр logo.png и текстовый блок
   скрывался. Теперь название и краткое описание выводит WordPress, поэтому
   блок показываем: его правят из настроек сайта, а не в графическом редакторе. */
.site-branding .brand { display: flex; align-items: center; gap: .85rem; }
.site-branding .site-title-wrap { display: flex; flex-direction: column; justify-content: center; }
.site-branding .custom-logo { max-height: 52px; width: auto; }
.mobile-site-branding .custom-logo { max-height: 42px; }

.site-branding .site-title,
.site-branding .site-title a {
	margin: 0;
	font-family: var(--mg-serif);
	font-size: 1.32rem;
	line-height: 1.12;
	letter-spacing: .045em;
}

/* Подзаголовок: строчные под капители — тише. Одним кеглем ниже
   заголовка и с воздухом: подпись должна читаться как выдох, а не
   как вторая строка названия. */
.site-branding .site-description {
	margin: .42em 0 0;
	font-family: var(--mg-sans);
	font-size: .66rem;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: .12em;
	text-transform: lowercase;
	color: var(--mg-gold);
}

@media (max-width: 1024px) {
	.site-branding .site-title, .site-branding .site-title a { font-size: 1.12rem; }
}

/* Карточки архива: обложка сверху, без скруглений темы. */
#archive-container .entry-thumbnail,
#archive-container .post-thumbnail { margin: 0; overflow: hidden; }
#archive-container .entry-thumbnail img,
#archive-container .post-thumbnail img {
	width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block;
	filter: saturate(.82) brightness(.9);
	transition: transform .5s ease, filter .5s ease;
}
#archive-container .loop-entry:hover .entry-thumbnail img { transform: scale(1.03); filter: saturate(.95) brightness(1); }
#archive-container .entry-content-wrap { border-radius: 0; }
#archive-container .loop-entry { border-radius: 0; }

/* Дублирующая обложка внутри статьи не нужна: она уже в шапке. */
.single-post .entry-content .post-thumbnail,
.single-post .entry-content > .wp-post-image,
.single-post article > .post-thumbnail { display: none; }

/* Никаких светлых подложек темы. */
.content-area, #primary, .content-container, .site-main, .content-wrap,
#inner-wrap, #wrapper, .entry-content-wrap, .loop-entry { background: transparent !important; box-shadow: none !important; }

#archive-container .loop-entry { background: var(--mg-surface) !important; }
#archive-container .entry-header { margin-bottom: .9rem; }
#archive-container .entry-summary { margin-bottom: 1.1rem; }
#archive-container .entry-summary p { margin: 0; }

/* Похожие записи / навигация */
.entry-related .loop-entry, .post-navigation .loop-entry { background: var(--mg-surface) !important; }
.entry-related img, .post-navigation img { filter: saturate(.8) brightness(.85); }

.mg-footnav {
	display: flex; flex-wrap: wrap; gap: .4rem 1.8rem;
	justify-content: center; align-items: center;
	padding: 1.8rem 1rem 2.2rem;
	border-top: 1px solid var(--mg-line);
}
.mg-footnav a {
	font-family: var(--mg-sans);
	font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase;
	color: var(--mg-muted) !important; text-decoration: none;
	transition: color .25s ease;
}
.mg-footnav a:hover { color: var(--mg-gold) !important; }

/* Мобильное меню: тёмная панель, кремовые ссылки. */
.mobile-menu-container, .drawer-menu-container, .mobile-drawer-content,
.drawer-content { background: var(--mg-ink-2) !important; }

.mobile-navigation a, .drawer-navigation a,
.mobile-navigation .menu-item > a,
.drawer-navigation .menu-item > a {
	color: var(--mg-cream) !important;
	font-family: var(--mg-sans);
	font-size: .9375rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	border-color: var(--mg-line) !important;
}
.mobile-navigation a:hover, .drawer-navigation a:hover { color: var(--mg-gold) !important; }

.mobile-navigation li, .drawer-navigation li { border-bottom: 1px solid var(--mg-line) !important; }

.mobile-navigation .menu-toggle-close, .drawer-navigation .menu-toggle-close,
.popup-drawer .drawer-toggle-close, button.drawer-toggle-close {
	color: var(--mg-cream) !important;
}

#mobile-drawer .drawer-overlay, .popup-drawer .drawer-overlay { background: rgba(0,0,0,.7) !important; }

/* Мобильная шапка */
.mobile-site-branding .site-title, .mobile-site-branding .site-title a { color: var(--mg-cream) !important; }

/* Панель мобильного меню: убираем синеватый фон темы. */
.popup-drawer .drawer-inner, .drawer-inner { background: var(--mg-ink-2) !important; }

/* ==========================================================================
   ВИДЕНИЕ mc — композиция, ритм, детали
   Слой поверх базовой дизайн-системы. Ничего из базового не отменяет:
   правила ниже только уточняют то, что база задала намеренно расплывчато.
   ========================================================================== */

/* ---------- 1. Шапка комнаты: центр, а не левый край ---------- */
/*
 * .mg-article-head__title имеет max-width:22ch и margin:0 auto — центрируется
 * бокс, а не текст. Поэтому «Кухня» и «Письма» визуально уезжают влево,
 * пока подзаголовок под ними стоит ровно по центру. Лечим выравниванием.
 */
.mg-article-head,
.mg-article-head__inner,
.mg-archive-head { text-align: center; }

/*
 * .mg-article-head__inner ограничен 880px, но без margin-inline:auto он
 * остаётся прижатым к левому краю — из-за этого «Кухня», «Письма» и «Очаг»
 * висели в левой четверти, пока подзаголовок под ними стоял по центру.
 */
/*
 * Специфичность важна: Kadence сбрасывает margin у заголовков внутри
 * .content-style-boxed сильнее, чем селектор без второго класса.
 */
.mg-article-head .mg-article-head__inner,
.page .mg-article-head__inner,
.blog .mg-article-head__inner { margin-inline: auto; }

.mg-article-head .mg-article-head__title,
.page .mg-article-head__title,
.blog .mg-article-head__title { margin-inline: auto; }

/* ---------- 2. Обложка не печатается дважды ---------- */
/*
 * Kadence выводит featured image как .post-thumbnail.article-post-thumbnail
 * прямо в .content-wrap, до .entry-content. Прежнее правило скрывало только
 * вложенные в .entry-content — из-за этого обложка стояла дважды: кинематографичной
 * шапкой и обычной рамкой под ней.
 */
.single-post .content-wrap > .post-thumbnail,
.single-post > article > .post-thumbnail { display: none; }

/* ---------- 3. Ритм прозы ---------- */
/*
 * У автора текст рубленый: короткие удары («Прошло двадцать лет.», «Ни разу.»)
 * стоят вровень с длинными абзацами, и ритм речи пропадает на экране.
 * Различаем три интонации:
 *   .mg-p--beat  — удар, короткая строка. Воздух вокруг, засечный набор.
 *   .mg-p--voice — прямая речь с тире. Отступ, засечный курсив.
 *   .mg-p--ask   — вопрос, оставленный без ответа. Сверху и снизу линейка.
 * Ни один символ текста не меняется — только начертание и воздух.
 */
.single-post .entry-content > p.mg-p--beat {
	font-family: var(--mg-serif);
	font-size: clamp(1.3rem, 2.4vw, 1.6rem);
	line-height: 1.45;
	color: var(--mg-cream);
	margin-top: 1.9em;
	margin-bottom: 1.9em;
}
.single-post .entry-content > p.mg-p--beat + p.mg-p--beat { margin-top: .2em; }

.single-post .entry-content > p.mg-p--voice {
	font-family: var(--mg-serif);
	font-style: italic;
	font-size: clamp(1.15rem, 1.9vw, 1.28rem);
	line-height: 1.6;
	color: var(--mg-cream);
	padding-left: 1.4em;
	border-left: 1px solid var(--mg-line-gold);
	margin-block: 1.6em;
}

.single-post .entry-content > p.mg-p--ask {
	font-family: var(--mg-serif);
	font-style: italic;
	font-size: clamp(1.25rem, 2.1vw, 1.45rem);
	color: var(--mg-cream);
	padding-block: .55em;
	margin-block: 1.8em;
	border-top: 1px solid var(--mg-line);
	border-bottom: 1px solid var(--mg-line);
}

/* ---------- 4. Формы: ширина человеческая ---------- */
/*
 * PMS отдаёт формы во всю ширину колонки — на 1180px это нечитаемо.
 * Держим все формы на одной мере, как форму «Письма».
 */
.pms-form,
.pms-form-wrapper,
.pms-account,
#pms_login,
.pms-login-form {
	max-width: 560px !important;
	margin-inline: auto;
}

.pms-form input[type="checkbox"],
.pms-form input[type="radio"] {
	accent-color: var(--mg-gold);
	width: 1.05em;
	height: 1.05em;
	margin-right: .5em;
	vertical-align: -0.15em;
}
.pms-form label,
.pms-form .login-remember label { color: var(--mg-text); font-size: .9rem; }
.pms-form .login-extra { font-size: .85rem; }
.pms-form .login-extra a { color: var(--mg-gold); }

/* ---------- 5. Один компонент карточки — два места ---------- */
/*
 * Кикер на карточках не нужен: на главной слово «Истории» повторялось трижды
 * подряд и ничего не говорило, на «Улице» его не было вовсе. Один компонент —
 * одно поведение; где мы находимся, уже сказал заголовок секции.
 */
.mg-story__kicker { display: none; }

/*
 * Нижние края карточек выравнивает сама строка grid, а «читать» прижат к низу
 * через margin-top:auto. Резать выдержку по строкам нельзя: обрыв на висящем
 * слове («Он сидит на краю скамейки. Не…») читается как ошибка вёрстки.
 */
.mg-story__more,
#archive-container .entry-actions { margin-top: auto; padding-top: .6rem; }

#archive-container .loop-entry .entry-summary { margin-bottom: 0; }

/* ---------- 6. Разделитель перестаёт висеть в пустоте ---------- */
.mg-divider {
	height: 56px;
	background: linear-gradient(to bottom, transparent, var(--mg-line-gold) 45%, var(--mg-line-gold) 55%, transparent);
	opacity: .8;
}
.mg-section:has(> .mg-wrap > .mg-divider:last-child) { padding-bottom: clamp(2rem, 4vw, 3rem); }

/* ---------- 7. Тихий призыв в конце текста ---------- */
/*
 * 1.md: «В конце каждого текста — мягкий призыв: продолжение и разбор этой
 * истории — внутри Пространства». Раньше вместо него стояло только «ДАЛЕЕ →».
 */
.mg-afterword {
	max-width: var(--mg-measure);
	margin: clamp(3rem, 6vw, 4.5rem) auto 0;
	padding-top: clamp(2rem, 4vw, 3rem);
	border-top: 1px solid var(--mg-line);
	text-align: center;
}
.mg-afterword__text {
	font-family: var(--mg-serif);
	font-style: italic;
	font-size: clamp(1.15rem, 2.1vw, 1.4rem);
	line-height: 1.55;
	color: var(--mg-text);
	margin: 0 auto 1.6rem;
	max-width: 40ch;
}
.mg-afterword__cta {
	font-family: var(--mg-sans);
	font-size: .75rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--mg-gold);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: .6em;
	padding: .8em 1.6em;
	border: 1px solid var(--mg-line-gold);
	transition: background .25s ease, border-color .25s ease;
}
.mg-afterword__cta:hover { background: rgba(212,162,78,.08); border-color: var(--mg-gold); }

/* ---------- 8. Прогресс чтения ---------- */
/*
 * «Один экран — одна мысль» требует знать, где ты. Тонкая золотая линия
 * под шапкой набирается по мере чтения. Видна только на странице истории.
 */
.mg-progress {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 900;
	width: 100%;
	height: 2px;
	transform-origin: 0 50%;
	transform: scaleX(0);
	background: linear-gradient(to right, rgba(212,162,78,.25), var(--mg-gold));
	opacity: 0;
	transition: opacity .4s ease;
	pointer-events: none;
}
body.single-post .mg-progress { opacity: 1; }

/* ---------- 9. Свет: кадр в три часа ночи ---------- */
/*
 * До этого весь сайт был одного тона: #0a0806 от шапки до подвала. Тёмно —
 * но не кинематографично. Кинематограф — это источник света в темноте:
 * что-то горит, от этого падает свет, а края кадра уходят в черноту.
 * Здесь: тёплый ночник у верхней кромки кадра и холодная виньетка по краям.
 */
body {
	background:
		radial-gradient(120% 68% at 50% -14%, rgba(212, 162, 78, .085) 0%, rgba(212, 162, 78, .026) 38%, rgba(10, 8, 6, 0) 68%),
		radial-gradient(88% 52% at 50% 112%, rgba(140, 92, 40, .07) 0%, rgba(10, 8, 6, 0) 62%),
		var(--mg-ink);
	background-attachment: fixed;
}

/* Виньетка — держит взгляд в центре, края кадра гаснут. */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(112% 80% at 50% 44%, rgba(10, 8, 6, 0) 42%, rgba(10, 8, 6, .68) 100%);
}

/* Полосы-переходы между комнатами — света не глушим. */
.mg-section--band {
	background:
		radial-gradient(80% 100% at 50% 0%, rgba(212, 162, 78, .05), transparent 66%),
		var(--mg-ink-2);
}

/* ---------- 10. Обложки приведены к ночному тону ---------- */
/*
 * «Голуби» — единственная дневная, серая обложка в наборе: она выбивалась из
 * ночной кинематографичности сильнее всего остального. Не замен��ем картинку
 * (это авторское), а приводим её к общему тону плёнки: меньше цвета,
 * темнее, чуть теплее. И добавляем виньетку, чтобы кадр держался в темноте.
 */
.mg-story__media::after,
#archive-container .entry-thumbnail::after,
#archive-container .post-thumbnail::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(120% 92% at 50% 42%, rgba(10, 8, 6, 0) 46%, rgba(10, 8, 6, .58) 100%),
		linear-gradient(to top, rgba(10, 8, 6, .46), rgba(10, 8, 6, 0) 46%);
}

.mg-story__media,
#archive-container .entry-thumbnail,
#archive-container .post-thumbnail { position: relative; }

.mg-story__media img {
	filter: sepia(.30) saturate(.62) brightness(.68) contrast(1.10);
	transition: transform .6s ease, filter .6s ease;
}
.mg-story:hover .mg-story__media img {
	transform: scale(1.04);
	filter: sepia(.22) saturate(.78) brightness(.82) contrast(1.08);
}

#archive-container .entry-thumbnail img,
#archive-container .post-thumbnail img {
	filter: sepia(.30) saturate(.62) brightness(.68) contrast(1.10);
	transition: transform .5s ease, filter .5s ease;
}
#archive-container .loop-entry:hover .entry-thumbnail img {
	transform: scale(1.03);
	filter: sepia(.22) saturate(.78) brightness(.82) contrast(1.08);
}

/* Шапка статьи — тот же ночной тон. */
.mg-article-head--cover {
	background-color: var(--mg-ink);
	background-blend-mode: multiply;
}

/* ---------- 11. Пауза становится паузой ---------- */
/*
 * Между «Манифестом» и «Улицей» было 270px пустоты с тонкой вертикалью
 * посередине — висела в никуда. Теперь это настоящая пауза: поменьше
 * воздуха, а вертикаль заменена на короткую золотую нить.
 */
.mg-divider {
	height: 44px;
	width: 1px;
	opacity: 1;
	background: linear-gradient(to bottom, transparent, var(--mg-gold) 42%, rgba(212, 162, 78, .5) 58%, transparent);
}
.mg-section:has(> .mg-wrap > .mg-divider:last-child) { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }

/* ---------- 12. Грани: восемь огранённых плиток ---------- */
/*
 * Сетка граней была ровной таблицей 4×2 — как спецификация, а не как
 * «многогранник» из манифеста. Теперь первая грань — шире остальных
 * (она же «Тень», с неё начинается путь), а плитки приподняты паузой.
 */
.mg-facets {
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
}
.mg-facet:first-child { grid-column: span 2; grid-row: span 2; }
.mg-facet:first-child .mg-facet__name { font-size: 2rem; }
.mg-facet:first-child .mg-facet__desc { font-size: 1rem; max-width: 34ch; }

@media (max-width: 900px) {
	.mg-facets { grid-template-columns: repeat(2, 1fr); }
	.mg-facet:first-child { grid-column: span 2; grid-row: span 1; }
	.mg-facet:first-child .mg-facet__name { font-size: 1.5rem; }
}

@media (max-width: 480px) {
	.mg-facets { grid-template-columns: 1fr; }
	.mg-facet:first-child { grid-column: span 1; }
}

/* ---------- 13. Ритм между кнопкой и манифестом ---------- */
/*
 * Между кнопками Порога и словом «МАНИФЕСТ» было около 250px пустоты — два
 * интервала подряд (низ героя плюс верх секции). Пауза остаётся, но вдвое
 * короче: тишина должна ощущаться, а не теряться.
 */
.mg-hero__inner { padding-bottom: clamp(2.5rem, 6vh, 4rem); }
.mg-hero + .mg-section { padding-top: clamp(2.5rem, 6vw, 4.5rem); }

/* Ширина кадра на мобильном: заголовок в 4 строки — слишком узко. */
@media (max-width: 767px) {
	.mg-hero__title { font-size: clamp(1.95rem, 8.4vw, 2.6rem); }
	.mg-hero__sub { font-size: 1rem; line-height: 1.7; }
}

/* ---------- 14. Подвал: камень и тишина ---------- */
/*
 * Подвал был пустым: строка копирайта и пять ссылок. Последнее, что видит
 * человек, должно быть не вывеской, а точкой. Ставим многогранник — тот же
 * знак, что в шапке — и одну тихую строку.
 */
.site-footer .site-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.3rem;
}




.mg-footnav {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 1.8rem;
	justify-content: center;
	align-items: center;
	padding: 1.7rem 1rem 2rem;
	border-top: 1px solid var(--mg-line);
	width: 100%;
}

/* ---------- 15. Шапка комнаты и первая секция ---------- */
/*
 * Между заголовком комнаты и её содержимым был двойной интервал: низ шапки
 * плюс верх секции — около 200px пустоты. Раньше это читалось как «страница
 * ещё не началась». Теперь это один переход, а не два.
 */
.mg-article-head { padding-bottom: clamp(2rem, 4vw, 3rem); }
.mg-article-head + .mg-section,
.mg-article-head + .mg-section--tight { padding-top: clamp(1.5rem, 3vw, 2.5rem); }

/* Там, где сразу идёт форма, воздуха ещё меньше. */
.mg-article-head + .mg-section:has(.mg-form) { padding-top: clamp(1rem, 2vw, 1.75rem); }

/* ---------- 16. Похожие записи ---------- */
/*
 * Штатный блок темы скрыт: его слайдер (splide) на этой странице не
 * инициализируется — карточки схлопываются в 64px, и заголовок «Похожие
 * записи» остаётся один над пустым местом. Рабочую выдачу печатает наш
 * блок «Ещё на Улице» (muigrani_street_related).
 */
.entry-related { display: none !important; }

/* Наш блок «Ещё на Улице»: три карточки в ряд, заголовок по центру. */
.mg-related__head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.mg-related .mg-stories { margin-inline: auto; }

/* Служебное: слайдер темы всё равно в разметке — на всякий случай ставим
   сетку, если он когда-нибудь проявится. */
.entry-related-carousel .splide__track { overflow: visible !important; }
/*
 * Kadence показывает три записи в слайдере (splide), который на этой странице
 * не инициализировался: карточки схлопывались в 64px под пустым заголовком.
 * Для трёх записей карусель и её стрелки — лишнее. Превращаем список в
 * обычную сетку: та же выдача, статичная вёрстка, ничего не зависит от JS.
 */
.entry-related-carousel .splide__track { overflow: visible !important; }

.entry-related-carousel .splide__list {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
	padding: 0 !important;
	margin: 0 !important;
}

.entry-related-carousel .splide__slide {
	width: auto !important;
	margin: 0 !important;
	list-style: none;
}

.entry-related-carousel .splide__slide:not(:first-child) { margin: 0 !important; }

/* Стрелки и точки карусели убираем — сетке они не нужны. */
.entry-related .splide__arrows,
.entry-related .splide__pagination { display: none !important; }

.entry-related-title { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }

@media (max-width: 900px) {
	.entry-related-carousel .splide__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.entry-related-carousel .splide__list { grid-template-columns: 1fr; }
}

/*
 * Блок «Ещё на Улице» лежит внутри .content-wrap, который ограничен колонкой
 * чтения (726px). Трём карточкам нужен полный кров — выводим секцию в
 * полную ширину, как остальные блоки.
 */
.mg-related.mg-full { width: 100vw; }
.mg-related .mg-wrap { max-width: 1180px; margin-inline: auto; padding-inline: var(--mg-gutter); }
.mg-related .mg-stories {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 900px) {
	.mg-related .mg-stories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.mg-related .mg-stories { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Манифест — «тихое признание»
   Не слоган: крупный курсив, широкие поля, дыхание. Свет сверху и снизу.
   ========================================================================== */

.mg-confession {
	position: relative;
	padding-block: clamp(4.5rem, 10vw, 8.5rem);
	text-align: center;
	background:
		radial-gradient(120% 90% at 50% 50%, rgba(212, 162, 78, .05), transparent 68%),
		var(--mg-ink);
}

/* Золотые разделители сверху и снизу — тонкие, как карандашная линия. */
.mg-confession::before,
.mg-confession::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: min(72%, 860px);
	height: 1px;
	background: linear-gradient(
		to right,
		transparent 0%,
		rgba(212, 162, 78, .45) 18%,
		rgba(212, 162, 78, .85) 50%,
		rgba(212, 162, 78, .45) 82%,
		transparent 100%
	);
}
.mg-confession::before { top: 0; }
.mg-confession::after  { bottom: 0; }

.mg-confession__label {
	margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem);
	letter-spacing: .3em;
	opacity: .85;
}

.mg-confession__text {
	max-width: 40ch;
	margin-inline: auto;
	font-family: var(--mg-serif);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(1.45rem, 3.15vw, 2.35rem);
	line-height: 1.42;
	letter-spacing: .004em;
	color: var(--mg-cream);
	text-wrap: balance;
	text-shadow: 0 0 60px rgba(212, 162, 78, .07);
}

@media (max-width: 767px) {
	.mg-confession__text {
		max-width: 30ch;
		font-size: clamp(1.3rem, 5.2vw, 1.7rem);
		line-height: 1.5;
	}
	.mg-confession::before,
	.mg-confession::after { width: 80%; }
}

/* ---------- 17. Манифест: ритм относительно соседей ---------- */
/*
 * Блок признания стоит сразу за Порогом, но не был охвачен правилом
 * «.mg-hero + .mg-section», поэтому между кнопками и словом МАНИФЕСТ
 * снова вырос провал около 310px. Приводим к тому же переходу,
 * что и у остальных секций.
 */
.mg-hero + .mg-confession { padding-top: clamp(3rem, 6vw, 5rem); }

/*
 * На мобильном колонка 30ch разбивала текст на шесть коротких строк —
 * признание читалось как колонка, а не как фраза. Шире и спокойнее.
 */
@media (max-width: 767px) {
	.mg-confession { padding-block: clamp(3rem, 8vw, 5rem); }
	.mg-confession__text { max-width: 38ch; }
	.mg-confession__label { margin-bottom: clamp(1.4rem, 3vw, 1.9rem); }
}

/* ---------- 18. Название цикла в карточке ---------- */
/*
 * Подпись «Кем ты хотал стать?» под заголовком. Мелко, золотом, с
 * разрядкой — как рукописная пометка на полях, а не как ещё один тег.
 */
.mg-cycle {
	display: block;
	margin-top: .55rem;
	font-family: var(--mg-sans);
	font-size: .6875rem;
	font-weight: 400;
	font-style: normal;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--mg-gold);
	opacity: .8;
}

/* В карточке архива Kadence заголовок — h2, подпись идёт следом. */
#archive-container .loop-entry .mg-cycle { margin-top: .5rem; }

/* ---------- 19. «Показать старые зарисовки» ---------- */
.mg-loadmore {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .8rem;
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

.mg-loadmore__btn { cursor: pointer; }
.mg-loadmore__btn:disabled { opacity: .45; cursor: default; }

.mg-loadmore__status {
	margin: 0;
	min-height: 1.2em;
	font-size: .8125rem;
	color: var(--mg-muted);
}

/*
 * Карточки, подгруженные кнопкой. Появляются тихо — без этого список
 * дёргался бы на глазах у того, кто нажал.
 */
#archive-container > li.mg-is-new {
	animation: mg-fade-in .6s ease both;
}

@keyframes mg-fade-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	#archive-container > li.mg-is-new { animation: none; }
}

/* ---------- 20. Карточка в архиве: плотнее, чем на главной ---------- */
/*
 * В две колонки карточка архива разрасталась: обложка 16/9 съедала треть
 * экрана, заголовок и отступы были рассчитаны на три колонки главной. На
 * 1440×900 влезало всего две истории — лента не читалась как лента.
 * Здесь те же карточки, но на треть плотнее.
 */
@media (min-width: 1024px) {
	#archive-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(1.75rem, 2.4vw, 2.5rem) clamp(1.5rem, 2vw, 2.25rem);
	}

	/*
	 * Кадр короче. Пропорция у Kadence задаётся не aspect-ratio на картинке,
	 * а padding-bottom на .post-thumbnail (обёртка высотой 0) — поэтому правим
	 * именно его. 52.6% — это 1.9 к 1: шире кадра, короче высота.
	 */
	#archive-container .post-thumbnail { padding-bottom: 52.6% !important; }

	#archive-container .entry-content-wrap { padding: clamp(1.15rem, 1.7vw, 1.5rem); }

	#archive-container .entry-title {
		font-size: clamp(1.2rem, 1.55vw, 1.42rem);
		line-height: 1.25;
		margin-bottom: .5rem;
	}

	#archive-container .entry-summary p {
		font-size: .9rem;
		line-height: 1.6;
		/* Три строки: выдержка задаёт тон, а не пересказывает историю. */
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}

	#archive-container .entry-summary { margin-bottom: 0; }

	/*
	 * Подпись цикла: отступ снизу обнуляем. У .entry-header в теме уже есть
	 * margin-bottom, и вместе с нашим получался двойной провал между подписью
	 * и выдержкой — на плотной карточке он читался как дыра.
	 */
	#archive-container .loop-entry .mg-cycle {
		font-size: .625rem;
		letter-spacing: .2em;
		margin: .4rem 0 0;
	}

	#archive-container .entry-actions .post-more-link { font-size: .625rem; }
}

/* ---------- 21. Страница «Циклы» ---------- */
/*
 * Тихая витрина: по одному блоку на цикл. Не витрина с обложками — список тем,
 * потому что цикл это оглавление, а не страница.
 */
.mg-cycles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 1px;
	background: var(--mg-line);
	border: 1px solid var(--mg-line);
}

.mg-cycle-card {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--mg-ink);
	text-decoration: none;
	transition: background .3s ease;
}
.mg-cycle-card:hover { background: var(--mg-surface); }

.mg-cycle-card__num {
	font-family: var(--mg-sans);
	font-size: .625rem;
	letter-spacing: .24em;
	color: var(--mg-gold);
	opacity: .8;
}

.mg-cycle-card__name {
	font-family: var(--mg-serif);
	font-size: clamp(1.4rem, 2.2vw, 1.75rem);
	line-height: 1.25;
	color: var(--mg-cream);
	margin: .3rem 0 .2rem;
}

.mg-cycle-card__count {
	font-family: var(--mg-sans);
	font-size: .6875rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--mg-muted);
}

.mg-cycle-card:hover .mg-cycle-card__name { color: var(--mg-gold-soft); }

/*
 * Заголовок «Темы, о которых истории» не влезал в 22ch и разбивался на
 * «Темы, о / которых истории». У этой страницы — шире.
 */
.mg-article-head--wide .mg-article-head__title { max-width: 20ch; }
@media (min-width: 640px) {
	.mg-article-head--wide .mg-article-head__title { max-width: 100%; }
}

/* ==========================================================================
   Футер: одна подпись под картиной
   ========================================================================== */
/*
 * Было: пустой чёрный склад в пол-экрана, посредине чужой копирайт из
 * theme_mods темы, внизу серая полоса с навигацией и лишними ссылками.
 * Стало: один центрированный блок — кристалл, фраза, копирайт, строка
 * комнат. Никаких полос и рамок внутри.
 */

/* Фон футера — тот же, что у страницы: иначе тёмная полоса читается как заплата. */
#colophon.site-footer,
#colophon.site-footer .site-footer-wrap,
#colophon.site-footer .site-bottom-footer-wrap,
#colophon.site-footer .site-footer-row-container,
#colophon.site-footer .site-footer-row-container-inner,
#colophon.site-footer .site-container {
	background: transparent;
	border: 0;
	box-shadow: none;
}

/* Отступы: подпись под картиной, а не пустой склад. */
#colophon.site-footer .site-footer-wrap { padding-block: clamp(1.25rem, 2.5vw, 2rem) 0; }

/*
 * Пустота над футером складывалась из двух отступов подряд: margin-bottom
 * области контента темы (5rem) плюс наш padding — 128px чёрного поля перед
 * кристаллом. Мягко убираем те��евой 5rem, свои секции отступы уже имеют.
 */
#primary.content-area,
.content-area { margin-bottom: clamp(1.75rem, 4vw, 3rem); }
#colophon.site-footer .site-container { padding: 0 var(--mg-gutter); }
#colophon.site-footer .site-footer-row-container-inner { margin: 0; }

/*
 * В подвале остаётся только наш блок: строку темы (копирайт «Тихое
 * пространство») прячем, иначе подвал идёт дважды.
 */
#colophon.site-footer .site-info,
#colophon.site-footer .site-bottom-footer-wrap { display: none; }


/* Навигация — просто текст, золотое подчёркивание наводится курсором. */
.mg-footnav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: .35rem 1.25rem;
	margin-top: 1.75rem;
	padding: 0;
	border: 0;
}

.mg-footnav a {
	position: relative;
	font-family: var(--mg-sans);
	font-size: .6875rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--mg-muted) !important;
	text-decoration: none;
	transition: color .25s ease;
}

.mg-footnav a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	height: 1px;
	background: var(--mg-gold);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform .25s ease;
}

.mg-footnav a:hover,
.mg-footnav a:focus-visible { color: var(--mg-gold) !important; }
.mg-footnav a:hover::after,
.mg-footnav a:focus-visible::after { transform: scaleX(1); }

/* Разделитель-точка между комнатами — не ссылка. */
.mg-footnav a + a::before {
	content: "·";
	position: absolute;
	left: -0.75rem;
	color: var(--mg-line-gold);
}

/* ==========================================================================
   «Тихое приглашение» в конце открытой истории
   ========================================================================== */
/*
 * Текст автора. Цвета переведены на переменные палитры: в исходной разметке
 * стоял холодный зелёный #e6ece4, который выбивался бы из тёплой гаммы сайта
 * (#0a0806 / #cfc4b0). Ритм тот же — центрированный блок под тонкой золотой линейкой.
 */
.pms-invite-block {
	max-width: 640px;
	margin: clamp(2.5rem, 6vw, 4rem) auto 0;
	padding: clamp(2rem, 4vw, 2.75rem) clamp(1.25rem, 3vw, 2rem);
	text-align: center;
	border-top: 1px solid var(--mg-line-gold);
}

.pms-invite-block__text {
	margin: 0 auto 1.4rem;
	max-width: 58ch;
	font-size: 1rem;
	line-height: 1.75;
	color: var(--mg-text);
}

/* Ссылка внутри абзаца — без подчёркивания «по умолчанию», но с золотом. */
.pms-invite-block__text a {
	color: var(--mg-gold);
	text-decoration: none;
	border-bottom: 1px solid var(--mg-line-gold);
	padding-bottom: 1px;
	transition: border-color .25s ease;
}
.pms-invite-block__text a:hover { border-bottom-color: var(--mg-gold); }

.pms-invite-block__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: .85em 2.2em;
	background: var(--mg-gold);
	color: #14100a;
	border-radius: 2px;
	font-family: var(--mg-sans);
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .25s ease, transform .25s ease;
}
.pms-invite-block__cta:hover {
	background: var(--mg-gold-soft);
	color: #14100a;
	transform: translateY(-1px);
}

/* Воздух от кнопки до последней строки. */
.pms-invite-block__note {
	margin: 1.5rem 0 0;
	font-size: .8rem;
	line-height: 1.6;
	color: var(--mg-muted);
}
.pms-invite-block__note a { color: var(--mg-text); }

/* На телефоне кнопка — во всю ширину, как остальные на сайте. */
@media (max-width: 560px) {
	.pms-invite-block__cta { width: 100%; }
}

/* ==========================================================================
   Заглушка платной истории
   ========================================================================== */

/* Блок, а не проза: рамка, замок, спокойная строка. */
.mg-locked {
	display: flex;
	align-items: flex-start;
	gap: clamp(1rem, 2.5vw, 1.5rem);
	max-width: 620px;
	margin: clamp(1.5rem, 4vw, 2.5rem) 0;
	padding: clamp(1.4rem, 3vw, 2rem);
	border: 1px solid var(--mg-line-gold);
	background: rgba(212, 162, 78, .05);
}

.mg-locked__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 1px solid var(--mg-line-gold);
	border-radius: 50%;
	color: var(--mg-gold);
	background: rgba(10, 8, 6, .45);
}

.mg-locked__icon .mg-lock { width: 21px; height: 21px; }

.mg-locked__body { min-width: 0; }
.mg-locked__body p { margin: 0; color: var(--mg-text); font-size: 1rem; line-height: 1.7; }
.mg-locked__body p + p { margin-top: .6em; }
.mg-locked__body a { color: var(--mg-gold); text-decoration-color: rgba(212, 162, 78, .45); }
.mg-locked__body a:hover { color: var(--mg-gold-soft); }

/* Никакой буквицы внутри заглушки — на всякий случай. */
.single-post .entry-content .mg-locked p::first-letter {
	float: none;
	font: inherit;
	color: inherit;
	padding: 0;
}

@media (max-width: 560px) {
	.mg-locked { flex-direction: column; gap: .9rem; }
	.mg-locked__icon { width: 40px; height: 40px; }
}

/* ==========================================================================
   «Теория граней»: восемь огранённых плиток
   ========================================================================== */
/*
 * Сетка была сломана: «Тень» занимала 2×2, и в сетке 4×3 справа от
 * «Свидетеля» оставалась пустая ячейка, а строки не выравнивались по высоте.
 *
 * Теперь — ровно 4×2, восемь равных плиток без дыр. «Тень» выделяется не
 * размером (это ломало сетку), а светом: она светлее остальных и в золотой
 * рамке. Род первой плитки — с этого начинается путь.
 */
/*
 * auto-fit, а не фиксированные четыре колонки: пустые треки схлопываются, и
 * блок с тремя плитками (он же на «Входе в пространство») занимает всю
 * ширину вместо того, чтобы зиять пустой четвёртой ячейкой.
 */
.mg-facets {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
	gap: 1px;
	background: var(--mg-line);
	border: 1px solid var(--mg-line);
}

/*
 * Огранка за плитками: тонкая сетка штрихов под углом — намёк на гранёный
 * камень. Держится на SVG в data-URI, поэтому не тянет ни одного файла.
 */
.mg-facets {
	position: relative;
	isolation: isolate;
	background-image:
		repeating-linear-gradient(58deg, rgba(212, 162, 78, .05) 0 1px, transparent 1px 15px),
		repeating-linear-gradient(-58deg, rgba(212, 162, 78, .04) 0 1px, transparent 1px 15px);
}

.mg-facet {
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: clamp(1.4rem, 2.4vw, 1.9rem);
	background: var(--mg-ink);
	transition: background .35s ease;
}

/* Первая плитка — светлее и в рамке: с неё начинается путь. */
.mg-facet:first-child {
	grid-column: auto;
	grid-row: auto;
	background: linear-gradient(160deg, rgba(212, 162, 78, .09), rgba(10, 8, 6, .2) 62%), var(--mg-surface);
	box-shadow: inset 0 0 0 1px var(--mg-line-gold);
}

.mg-facet:hover { background: var(--mg-surface); }
.mg-facet:first-child:hover {
	background: linear-gradient(160deg, rgba(212, 162, 78, .16), rgba(10, 8, 6, .2) 62%), var(--mg-surface-2);
}

.mg-facet:first-child .mg-facet__name { font-size: 1.85rem; }
.mg-facet:first-child .mg-facet__desc { font-size: .95rem; color: var(--mg-text); max-width: 30ch; }

/* Номер грани — золотой, но у первой плитки он ведёт, а не просто стоит. */
.mg-facet__num {
	display: block;
	margin-bottom: .9rem;
	font-size: .625rem;
	letter-spacing: .26em;
	color: var(--mg-gold);
	opacity: .75;
}
.mg-facet:first-child .mg-facet__num { opacity: 1; }

.mg-facet__name {
	margin: 0 0 .5rem;
	font-family: var(--mg-serif);
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--mg-cream);
}

.mg-facet__desc {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--mg-muted);
}

/* Ровный низ у всех плиток в ряду. */
.mg-facet__desc { flex: 1; }

@media (max-width: 900px) {
	.mg-facets { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
	.mg-facet:first-child .mg-facet__name { font-size: 1.5rem; }
}

@media (max-width: 480px) {
	.mg-facets { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Движение на главной
   ========================================================================== */
/*
 * Появление секций при прокрутке. Ключевое условие — скрывать элемент имеет
 * право только .mg-js: этот класс ставит скрипт. Без JavaScript (или если
 * скрипт не успел) контент виден как есть, без «прыжков» и пустот.
 */
.mg-js [data-reveal] {
	opacity: 0;
	transform: translateY(22px);
	transition:
		opacity .9s cubic-bezier(.22, .61, .36, 1),
		transform .9s cubic-bezier(.22, .61, .36, 1);
	will-change: opacity, transform;
}

.mg-js [data-reveal].is-in {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/*
 * Секция — точка прилипания, и её собственный сдвиг уводит эту точку.
 *
 * Пока секция ждёт появления, она стоит на 22px ниже своего места, и якорь
 * считался по сдвинутой коробке: страница вставала на 74 или 58 вместо 81 —
 * шапка то не доезжала до блока, то наезжала на него. Причина не в снапе
 * и не в отступах, а в transform на самой секции.
 *
 * Появление секции остаётся, но только прозрачностью: сдвигаются элементы
 * внутри — у них свои data-reveal и свой каскад (строки граней, карточки,
 * пункты списка). Секция как геометрическая единица неподвижна.
 */
.mg-js #mg-sec-facets[data-reveal],
.mg-js #mg-sec-stories[data-reveal],
.mg-js #mg-sec-gate[data-reveal] {
	transform: none;
}

/* Каскад внутри секции: строки граней, карточки, пункты списка — по очереди. */
.mg-js .mg-facets [data-reveal] { transition-delay: calc(var(--i, 0) * 70ms); }
.mg-js .mg-stories [data-reveal]  { transition-delay: calc(var(--i, 0) * 90ms); }

/* Золотой штрих, который прочерчивается при появлении секции. */
.mg-js .mg-section__head .mg-eyebrow { position: relative; }

.mg-js .mg-section__head.is-in::after,
.mg-js .mg-confession.is-in::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%) scaleX(0);
	width: min(180px, 40%);
	height: 1px;
	margin-top: 1.1rem;
	background: linear-gradient(to right, transparent, var(--mg-line-gold), transparent);
	transition: transform 1.1s cubic-bezier(.22, .61, .36, 1) .15s;
}
.mg-js .mg-section__head.is-in::after,
.mg-js .mg-confession.is-in::after { transform: translateX(-50%) scaleX(1); }

/*
 * Уважаем системную настройку: если человек просил меньше движения,
 * не двигаем ничего. Классы is-in всё равно проставятся — контент виден.
 */
@media (prefers-reduced-motion: reduce) {
	.mg-js [data-reveal] { opacity: 1; transform: none; transition: none; }
	.mg-js .mg-section__head.is-in::after,
	.mg-js .mg-confession.is-in::after { transition: none; }
}

/* Более тонкий узор огранки — при наведении он слегка оживает. */
.mg-facets { transition: background-image .6s ease; }
.mg-facets:hover {
	background-image:
		repeating-linear-gradient(58deg, rgba(212, 162, 78, .085) 0 1px, transparent 1px 15px),
		repeating-linear-gradient(-58deg, rgba(212, 162, 78, .065) 0 1px, transparent 1px 15px);
}

/* ==========================================================================
   «Вход в пространство»: вводка, список с тире, тарифы с пояснением
   ========================================================================== */
/*
 * Тире в списке висит в поле, текст идёт ровной колонкой. Отступ считается
 * от самого маркера, поэтому перенос строки не заезжает под тире — и на
 * узком экране список остаётся списком, а не рваной лесенкой.
 */
.mg-article-head__lead {
	margin: 1.7rem auto 0;
	max-width: 34ch;
	font-family: var(--mg-serif);
	font-style: italic;
	font-size: clamp(1.25rem, 2.4vw, 1.55rem);
	line-height: 1.5;
	color: var(--mg-cream);
}

.mg-article-head__sub {
	margin: .9rem auto 0;
	max-width: 44ch;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--mg-muted);
}

/*
 * Селектор с двумя классами, а не просто .mg-dash: тема задаёт спискам
 * margin и padding-left, и без этого тире съезжало влево вместе с текстом.
 */
.entry-content .mg-dash {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 62ch;
}

.mg-dash > li {
	position: relative;
	margin-bottom: 1.45rem;
	padding-left: 1.9rem;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--mg-text);
	text-wrap: pretty;
}

.mg-dash > li:last-child { margin-bottom: 0; }

.mg-dash > li::before {
	content: "—";
	position: absolute;
	left: 0;
	top: 0;
	font-family: var(--mg-serif);
	color: var(--mg-gold);
}

.mg-dash > li > strong {
	color: var(--mg-cream);
	font-weight: 500;
}

/* Пояснение к цене — внутри карточки: на узком экране число и его смысл
   не разъезжаются в две отдельные колонки. */
.mg-prices--tall .mg-price {
	flex: 1 1 260px;
	max-width: 360px;
	padding: 1.8rem 1.6rem 1.7rem;
}

.mg-prices--tall .mg-price:first-child {
	background: linear-gradient(160deg, rgba(212, 162, 78, .08), rgba(10, 8, 6, .25) 62%), var(--mg-surface);
	box-shadow: inset 0 0 0 1px var(--mg-line-gold);
}

.mg-price__note {
	margin: 1.1rem auto 0;
	max-width: 30ch;
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--mg-muted);
}

@media (max-width: 767px) {
	.mg-dash > li { font-size: 1.03125rem; }
	.mg-prices--tall .mg-price { max-width: 100%; }
}

/* ==========================================================================
   Окно регистрации: одна дверь вместо формы в колонке
   ========================================================================== */
/*
 * Форма PMS переехала в окно, страницы ставят только кнопку.
 *
 * Главное правило: без JavaScript окно — обычная секция внизу страницы,
 * и форма в ней работает (это простой POST). Класс mg-modal-js ставит
 * крошечный скрипт рядом с разметкой, до отрисовки, поэтому «всплывающее»
 * поведение включается без мигания. Так регистрация не исчезает вместе
 * со скриптом.
 */

.mg-modal {
	position: relative;
	padding: clamp(2.5rem, 6vw, 4rem) var(--mg-gutter);
	background: var(--mg-ink-2);
	border-top: 1px solid var(--mg-line);
}

.mg-modal__backdrop { display: none; }

.mg-modal__panel {
	position: relative;
	width: min(560px, 100%);
	margin-inline: auto;
	padding: clamp(1.6rem, 4vw, 2.6rem);
	background: var(--mg-ink);
	border: 1px solid var(--mg-line-gold);
	text-align: center;
	scroll-margin-top: 96px;
}

.mg-modal__close { display: none; }

/*
 * Два класса, а не один: Kadence красит любую кнопку в золото своим
 * правилом `button:focus`, и при фокусе крестик превращался в золотой
 * квадрат. `.mg-modal .mg-modal__close` сильнее, чем `button:focus`.
 */
.mg-modal .mg-modal__close {
	position: absolute;
	top: .35rem;
	right: .35rem;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 1px;
	color: var(--mg-muted);
	cursor: pointer;
	transition: color .2s ease;
}

.mg-modal .mg-modal__close:hover,
.mg-modal .mg-modal__close:focus,
.mg-modal .mg-modal__close:focus-visible,
.mg-modal .mg-modal__close:active {
	background: transparent;
	color: var(--mg-cream);
}

.mg-modal__title {
	margin: 0 0 1.7rem;
	font-size: clamp(1.6rem, 3.6vw, 2.1rem);
}

.mg-modal__text {
	margin: 0 auto 1.7rem;
	max-width: 40ch;
	font-family: var(--mg-serif);
	font-size: 1.15rem;
	line-height: 1.6;
	color: var(--mg-text);
}

.mg-modal__form { text-align: left; }
.mg-modal__form .pms-form { max-width: 100% !important; margin-inline: 0; }

.mg-modal__placeholder {
	margin-top: 1.5rem;
	padding: 1rem 1.1rem;
	border: 1px dashed rgba(212, 162, 78, .45);
	background: rgba(212, 162, 78, .05);
	color: var(--mg-gold-soft);
	font-size: .875rem;
	line-height: 1.6;
	text-align: left;
}

/* ---------- Со скриптом: настоящий слой поверх страницы ---------- */

html.mg-modal-js .mg-modal { display: none; }

html.mg-modal-js .mg-modal.is-open {
	display: flex;
	position: fixed;
	inset: 0;
	z-index: 1200;
	align-items: center;
	justify-content: center;
	padding: clamp(.75rem, 3vw, 2rem);
	background: none;
	border: 0;
}

html.mg-modal-js .mg-modal.is-open .mg-modal__backdrop {
	display: block;
	position: absolute;
	inset: 0;
	background: rgba(6, 5, 4, .86);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

html.mg-modal-js .mg-modal.is-open .mg-modal__panel {
	z-index: 1;
	max-height: min(92svh, 940px);
	overflow-y: auto;
	overscroll-behavior: contain;
	box-shadow: 0 30px 90px rgba(0, 0, 0, .65);
}

html.mg-modal-js .mg-modal.is-open .mg-modal__close { display: flex; }

html.mg-modal-open { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
	html.mg-modal-js .mg-modal.is-open .mg-modal__panel {
		animation: mg-modal-in .3s cubic-bezier(.22, .61, .36, 1) both;
	}
}

@keyframes mg-modal-in {
	from { opacity: 0; transform: translateY(14px) scale(.99); }
	to   { opacity: 1; transform: none; }
}

/* ---------- Дверь на главной: была форма, стала кнопка ---------- */

/*
 * Слева список на всю высоту, и дверь стоит по центру своей колонки:
 * прижатая к верхнему краю кнопка оставляла под собой полэкрана пустоты.
 *
 * Sticky здесь не работает — у обёртки сайта overflow: clip, и элемент
 * не за что зацепить. Поэтому центр, а не «прилипание».
 * (Позже, в слое 20, секция переведена на overflow:clip, и липкая
 * карточка на десктопе всё-таки заработала — см. .mg-gate__entry ниже.)
 */
.mg-gate__entry {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .95rem;
	text-align: center;
	align-self: center;
}

.mg-gate__entry-text {
	margin: 0;
	max-width: 30ch;
	font-family: var(--mg-serif);
	font-size: 1.2rem;
	line-height: 1.5;
	color: var(--mg-cream);
}

.mg-gate__entry-note {
	margin: 0;
	max-width: 30ch;
	font-size: .8125rem;
	line-height: 1.6;
	color: var(--mg-muted);
}

.mg-gate__entry-btn { width: 100%; }

/* ---------- Призыв в блоке входа на главной ---------- */

.mg-enter-cta { margin: 0; text-align: center; }

.mg-enter-hint {
	margin: 1rem auto 0;
	max-width: 40ch;
	text-align: center;
	font-size: .8125rem;
	line-height: 1.6;
	color: var(--mg-muted);
}

@media (max-width: 767px) {
	html.mg-modal-js .mg-modal.is-open .mg-modal__panel { max-height: 94svh; }
	.mg-enter-cta .mg-btn { width: 100%; }
}

/* Кнопки действий в диалоговых окнах. */
.mg-modal__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .7rem;
	justify-content: center;
	margin: 1.6rem 0 0;
}

@media (max-width: 559px) {
	.mg-modal__actions { flex-direction: column; }
	.mg-modal__actions .mg-btn { width: 100%; }
}

/*
 * Кнопка в фокусе. Глобальное правило `a:focus` красит текст в золото,
 * и на золотой кнопке текст становился почти невидимым — это било по тем,
 * кто ходит по сайту с клавиатуры.
 */
.mg-btn:focus,
.entry-content .mg-btn:focus {
	background: var(--mg-gold-soft);
	border-color: var(--mg-gold-soft);
	color: #14100a;
}

.mg-btn--ghost:focus,
.entry-content .mg-btn--ghost:focus {
	background: transparent;
	color: var(--mg-cream);
	border-color: rgba(242, 232, 213, .55);
}

/* ==========================================================================
   Страница «Оплата подписки»
   ========================================================================== */
/*
 * Сумма — первое, что человек ищет глазами. Ставим её отдельным блоком
 * в рамке, крупной антиквой: цифра и тариф, больше ничего.
 */
.mg-pay__sum {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: .5rem .9rem;
	max-width: var(--mg-measure);
	margin: 0 auto 1.6rem;
	padding: 1.5rem 1.6rem;
	border: 1px solid var(--mg-line-gold);
	background: linear-gradient(160deg, rgba(212, 162, 78, .08), rgba(10, 8, 6, .25) 62%), var(--mg-surface);
	text-align: center;
}

.mg-pay__sum-label {
	font-family: var(--mg-sans);
	font-size: .6875rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--mg-gold);
}

.mg-pay__sum-value {
	font-family: var(--mg-serif);
	font-size: clamp(2rem, 4vw, 2.6rem);
	line-height: 1;
	color: var(--mg-cream);
}

.mg-pay__sum-plan {
	font-family: var(--mg-serif);
	font-style: italic;
	font-size: 1.1rem;
	color: var(--mg-text);
}

.mg-pay__login {
	margin: 0 auto 1.4rem;
	text-align: center;
	font-size: .9375rem;
	color: var(--mg-muted);
}

.mg-pay__login strong {
	color: var(--mg-cream);
	font-weight: 500;
}

/* Реквизиты: заметная рамка, но не тревожная. */
.mg-pay__requisites {
	max-width: var(--mg-measure);
	margin: 0 auto 2rem;
	padding: clamp(1.3rem, 3vw, 1.8rem);
	border: 1px dashed rgba(212, 162, 78, .45);
	background: rgba(212, 162, 78, .05);
	text-align: center;
	color: var(--mg-gold-soft);
	font-size: .9375rem;
	line-height: 1.65;
}

.mg-pay__requisites p { margin: 0; }

/* Шаги: два коротких абзаца, которые читают в последнюю очередь. */
.mg-pay__steps {
	counter-reset: mg-pay;
	max-width: var(--mg-measure);
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.mg-pay__steps > li {
	position: relative;
	margin-bottom: 1.2rem;
	padding-left: 2.6rem;
	line-height: 1.7;
	color: var(--mg-text);
}

.mg-pay__steps > li:last-child { margin-bottom: 0; }

.mg-pay__steps > li::before {
	counter-increment: mg-pay;
	content: counter(mg-pay, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: .15em;
	font-family: var(--mg-sans);
	font-size: .625rem;
	letter-spacing: .18em;
	color: var(--mg-gold);
}

.entry-content .mg-pay__steps {
	list-style: none;
	margin-inline: auto;
	padding: 0;
}

/* Подпись под кнопкой регистрации: тихая, но читаемая. */
.mg-modal__footnote {
	margin: 1.3rem auto 0;
	max-width: 44ch;
	text-align: center;
	font-size: .8125rem;
	line-height: 1.6;
	color: var(--mg-muted);
}

/* ==========================================================================
   ГЛАВНАЯ — премиальный слой
   ==========================================================================
   Всё ниже действует только на главной (body.page-id-6). Остальные страницы
   не затрагиваются: правила с префиксом `body.page-id-6` сильнее базовых
   за счёт специфичности, поэтому откат — это удаление одного блока.

   Задача слоя — не «добавить эффектов», а выстроить кадр: у каждой секции
   свой свет, свой воздух и своя роль. Движение медленное и скупое: если
   анимацию замечаешь — она уже слишком громкая.
   ========================================================================== */

body.page-id-6 {
	--mg-ease:      cubic-bezier(.22, .61, .36, 1);
	--mg-ease-soft: cubic-bezier(.16, .84, .44, 1);
}

/* ---------- 1. Порог: герой ---------- */

/*
 * Было: текст по центру поверх вспышек света — заголовок спорил с картинкой.
 * Стало: асимметричный кадр. Текст стоит слева на плотной тени, свет
 * разгорается справа и остаётся свободным. Так читается и то, и другое.
 */
body.page-id-6 .mg-hero {
	min-height: min(100svh, 980px);
	align-items: flex-end;
	justify-content: flex-start;
	text-align: left;
	/*
	 * Блок «заголовок + манифест + кнопки» должен стоять по центру ЭКРАНА,
	 * а не по центру секции. Секция начинается под шапкой (81px), поэтому
	 * без компенсации группа уезжала вверх на половину её высоты: замер на
	 * 1440×900 давал 184…640 при центре окна 450. Нижний отступ, равный
	 * высоте шапки, возвращает центр группы в центр окна на любой высоте:
	 * (H − 81 − C)/2 + C/2 + 81 ≡ 100vh/2, где H = 100vh − 81.
	 */
	padding-bottom: var(--mg-head-h, 81px);
}

body.page-id-6 .mg-hero__media {
	background-position: 68% 58%;
	transform: scale(1.06);
	transition: transform 2.6s var(--mg-ease-soft);
	will-change: transform;
}

body.page-id-6 .mg-hero__media::after {
	background:
		linear-gradient(to right,
			var(--mg-ink) 0%,
			rgba(10, 8, 6, .94) 30%,
			rgba(10, 8, 6, .58) 56%,
			rgba(10, 8, 6, .30) 78%,
			rgba(10, 8, 6, .55) 100%),
		linear-gradient(to bottom,
			rgba(10, 8, 6, .92) 0%,
			rgba(10, 8, 6, .18) 30%,
			rgba(10, 8, 6, .20) 58%,
			var(--mg-ink) 100%);
}

body.page-id-6 .mg-hero__inner {
	max-width: 1180px;
	width: 100%;
	margin-inline: auto;
	padding: 0 var(--mg-gutter);
}

body.page-id-6 .mg-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: clamp(1.6rem, 3vw, 2.2rem);
	font-size: .625rem;
	letter-spacing: .38em;
}

body.page-id-6 .mg-hero__eyebrow::before {
	content: "";
	width: 44px;
	height: 1px;
	background: linear-gradient(to right, transparent, var(--mg-gold));
	flex: none;
}

body.page-id-6 .mg-hero__title {
	max-width: 16ch;
	margin: 0 0 clamp(1.5rem, 3vw, 2rem);
	font-size: clamp(2.15rem, 5.1vw, 4.35rem);
	line-height: 1.06;
	letter-spacing: -.018em;
	text-shadow: 0 4px 60px rgba(0, 0, 0, .7);
}

body.page-id-6 .mg-hero__sub {
	max-width: 40ch;
	margin: 0 0 clamp(2.2rem, 4vw, 3rem);
	font-size: 1.0625rem;
	line-height: 1.72;
	color: #b6ab99;
	text-shadow: 0 2px 24px rgba(0, 0, 0, .6);
}

body.page-id-6 .mg-hero .mg-btn-row {
	justify-content: flex-start;
}

/* Подсказка внизу слева. Слово снято 24.10, линия — следом; блок остаётся
   пустой абсолютной коробкой и на вид ничего не добавляет. */
body.page-id-6 .mg-hero__scroll {
	/* Была флекс-элементом высотой 94px и тянула группу вверх на 47px. */
	position: absolute;
	left: var(--mg-gutter);
	bottom: 0;
	transform: none;
	width: auto;
	height: auto;
	background: none;
	display: flex;
	align-items: center;
	gap: .9rem;
	font-family: var(--mg-sans);
	font-size: .5625rem;
	letter-spacing: .32em;
	text-transform: uppercase;
	color: var(--mg-muted);
	opacity: .8;
	padding-bottom: clamp(1.2rem, 2.5vh, 1.8rem);
}


/* ---------- 2. Манифест: глава, а не врезка ---------- */

/*
 * Между героем и манифестом был жёсткий шов из двух линий. Теперь это
 * отдельный «экран»: своё небо в окне, свой свет, много воздуха.
 */
body.page-id-6 .mg-confession {
	min-height: clamp(460px, 74vh, 720px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding-block: clamp(5rem, 11vw, 9rem);
	overflow: hidden;
	isolation: isolate;
	background: var(--mg-ink);
}

body.page-id-6 .mg-confession {
	position: relative;
	z-index: 0;
}

/* Кадр с ночным окном — фоном, приглушённый почти до шёпота. */
body.page-id-6 .mg-confession::before {
	display: block;
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	width: auto;
	height: auto;
	left: 0;
	transform: none;
	background-image: url("/wp-content/uploads/2026/10/night-window.jpg");
	background-size: cover;
	background-position: center 46%;
	opacity: .3;
	transition: transform 3s var(--mg-ease-soft), opacity 1.4s ease;
}

body.page-id-6 .mg-confession.is-in::before {
	transform: scale(1.04);
	opacity: .34;
}

/* Вуаль: держит текст читаемым и уводит края в темноту. */
body.page-id-6 .mg-confession::after {
	display: block;
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	width: auto;
	height: auto;
	left: 0;
	transform: none;
	background:
		radial-gradient(100% 76% at 50% 50%, rgba(10, 8, 6, .62) 0%, rgba(10, 8, 6, .92) 58%, var(--mg-ink) 100%);
}

body.page-id-6 .mg-confession .mg-wrap {
	position: relative;
	z-index: 2;
}

body.page-id-6 .mg-confession__label {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.4rem;
	margin-bottom: clamp(2rem, 4vw, 3rem);
	letter-spacing: .4em;
}

body.page-id-6 .mg-confession__label::before,
body.page-id-6 .mg-confession__label::after {
	content: "";
	width: clamp(40px, 9vw, 96px);
	height: 1px;
	background: linear-gradient(to right, transparent, rgba(212, 162, 78, .7));
}

body.page-id-6 .mg-confession__label::after {
	background: linear-gradient(to left, transparent, rgba(212, 162, 78, .7));
}

body.page-id-6 .mg-confession__text {
	max-width: 32ch;
	font-size: clamp(1.6rem, 3.3vw, 2.6rem);
	line-height: 1.4;
	letter-spacing: .002em;
}

/* ---------- 3. Зарисовки: журнальная полоса ---------- */

body.page-id-6 .mg-section--stories .mg-section__head {
	position: relative;
	max-width: none;
	margin-bottom: clamp(2.4rem, 4.5vw, 3.6rem);
	/*
	 * По центру. Надзаголовок и заголовок стоят над сеткой из трёх карточек
	 * во всю ширину — при выравнивании влево заголовок висел в углу, а
	 * золотой штрих под ним (псевдоэлемент ::after, он уже центрирован)
	 * оказывался не под текстом, а сбоку. Теперь ось одна.
	 */
	text-align: center;
}

/*
 * Золотой штрих под заголовком в этой секции убран.
 *
 * Псевдоэлемент ::after стоит в статической позиции после содержимого
 * головы, а номера историй («01», «02», «03») висят над обложками на
 * translateY(-120%) — ровно в той же полосе. Замер: штрих 630…808 px на
 * y 217…222, номера — 201…226. Штрих оказывался между цифрами, как
 * случайная черта. В остальных секциях он живёт ниже и не мешает.
 */
.mg-js .mg-section--stories .mg-section__head.is-in::after { content: none; }

body.page-id-6 .mg-section--stories .mg-section__head h2 {
	max-width: 18ch;
	margin-inline: auto;
	font-size: clamp(2rem, 4vw, 3.1rem);
	line-height: 1.12;
}

body.page-id-6 .mg-stories {
	counter-reset: mg-story;
	gap: clamp(1.2rem, 2.4vw, 2.2rem);
	align-items: stretch;
}

body.page-id-6 .mg-story {
	background: transparent;
	border: 0;
	overflow: visible;
	transition: transform .7s var(--mg-ease);
}

body.page-id-6 .mg-story:hover { transform: translateY(-6px); }

body.page-id-6 .mg-story__media {
	aspect-ratio: 4 / 5;
	background: var(--mg-surface-2);
	overflow: hidden;
	position: relative;
}

body.page-id-6 .mg-story__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10, 8, 6, .55) 0%, transparent 46%);
	pointer-events: none;
}

/*
 * Номер истории — счётчиком, а не разметкой: шорткод печатает карточки,
 * и лезть в него ради цифры незачем.
 */
body.page-id-6 .mg-story::before {
	counter-increment: mg-story;
	content: counter(mg-story, decimal-leading-zero);
	position: absolute;
	top: -.2rem;
	left: 0;
	z-index: 3;
	font-family: var(--mg-sans);
	font-size: .625rem;
	letter-spacing: .26em;
	color: var(--mg-gold);
	opacity: .9;
	transform: translateY(-120%);
}

body.page-id-6 .mg-story__media img {
	filter: sepia(.42) saturate(.82) brightness(.88) contrast(1.03);
	transform: scale(1.01);
	transition: transform 1.1s var(--mg-ease-soft), filter .7s ease;
}

body.page-id-6 .mg-story:hover .mg-story__media img {
	transform: scale(1.06);
	filter: sepia(.30) saturate(.94) brightness(1) contrast(1.03);
}

body.page-id-6 .mg-story__body {
	padding: clamp(1.1rem, 2vw, 1.6rem) 0 0;
	gap: .7rem;
}

body.page-id-6 .mg-story__title {
	font-size: clamp(1.3rem, 1.9vw, 1.6rem);
	line-height: 1.18;
	letter-spacing: -.01em;
}

body.page-id-6 .mg-story__title a { text-decoration: none; }

body.page-id-6 .mg-story__excerpt {
	font-size: .9375rem;
	line-height: 1.65;
	color: var(--mg-muted);
}

body.page-id-6 .mg-story__more {
	margin-top: auto;
	font-family: var(--mg-sans);
	font-size: .625rem;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--mg-gold);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	transition: gap .35s var(--mg-ease), color .25s ease;
}

body.page-id-6 .mg-story:hover .mg-story__more { gap: .9rem; color: var(--mg-gold-soft); }

/* Кнопка «Все истории» — тихая ссылка с чертой, а не второй акцент. */
body.page-id-6 .mg-section--stories > .mg-wrap > p:last-child {
	margin-top: clamp(2.4rem, 4vw, 3.2rem) !important;
}

body.page-id-6 .mg-section--stories .mg-btn--ghost {
	min-height: 0;
	padding: .6em 0;
	border: 0;
	border-bottom: 1px solid rgba(242, 232, 213, .22);
	background: none;
	letter-spacing: .22em;
}

body.page-id-6 .mg-section--stories .mg-btn--ghost:hover {
	border-bottom-color: var(--mg-gold);
	transform: none;
}

/* ---------- 4. Грани: реестр вместо плиток ---------- */

/*
 * Было: восемь одинаковых коробок с рамками — читалось как таблица.
 * Стало: ровный реестр. Рамок нет, есть только тонкая линия сверху,
 * крупная цифра и воздух. Первая грань светится — с неё начинается путь.
 */
body.page-id-6 .mg-section--facets {
	background:
		radial-gradient(90% 60% at 50% 0%, rgba(212, 162, 78, .07), transparent 62%),
		var(--mg-ink-2);
	border-top: 0;
	border-bottom: 0;
	padding-block: clamp(4.5rem, 9vw, 7.5rem);
}

body.page-id-6 .mg-section--facets .mg-facets {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	background: none;
	border: 0;
}

body.page-id-6 .mg-section--facets .mg-facet {
	position: relative;
	padding: clamp(1.6rem, 2.6vw, 2.2rem) clamp(1rem, 2vw, 1.8rem) clamp(1.8rem, 3vw, 2.4rem);
	background: none;
	border-top: 1px solid var(--mg-line);
	transition: background .5s ease;
}

body.page-id-6 .mg-section--facets .mg-facet::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 100%;
	height: 1px;
	background: linear-gradient(to right, var(--mg-gold), transparent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .8s var(--mg-ease);
}

body.page-id-6 .mg-section--facets .mg-facet:hover::before { transform: scaleX(1); }

body.page-id-6 .mg-section--facets .mg-facet:hover {
	background: linear-gradient(to bottom, rgba(212, 162, 78, .05), transparent 70%);
}

/* Первая грань — точка отсчёта. Свет, а не коробка. */
body.page-id-6 .mg-section--facets .mg-facet:first-child {
	background: radial-gradient(120% 90% at 50% 0%, rgba(212, 162, 78, .12), transparent 70%);
	border-top-color: var(--mg-line-gold);
	box-shadow: none;
}

body.page-id-6 .mg-section--facets .mg-facet:first-child::before { width: 100%; }

body.page-id-6 .mg-section--facets .mg-facet__num {
	display: block;
	margin-bottom: clamp(1.4rem, 3vw, 2.4rem);
	font-family: var(--mg-serif);
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	line-height: 1;
	letter-spacing: .02em;
	color: var(--mg-gold);
	opacity: .5;
	transition: opacity .4s ease;
}

body.page-id-6 .mg-section--facets .mg-facet:hover .mg-facet__num,
body.page-id-6 .mg-section--facets .mg-facet:first-child .mg-facet__num { opacity: .95; }

body.page-id-6 .mg-section--facets .mg-facet__name {
	font-size: clamp(1.25rem, 1.7vw, 1.5rem);
	margin: 0 0 .6rem;
}

body.page-id-6 .mg-section--facets .mg-facet:first-child .mg-facet__name { font-size: clamp(1.4rem, 2vw, 1.7rem); }

body.page-id-6 .mg-section--facets .mg-facet__desc {
	font-size: .9rem;
	line-height: 1.6;
	color: var(--mg-muted);
	max-width: 26ch;
}

body.page-id-6 .mg-section--facets .mg-facet:first-child .mg-facet__desc {
	color: var(--mg-text);
	max-width: 28ch;
}

/* ---------- 5. Дверь: секция-портал ---------- */

/*
 * Раньше это была обычная двухколоночная секция. Теперь за ней стоит
 * открытая дверь — единственный тёплый свет на странице после героя.
 */
body.page-id-6 .mg-gate {
	position: relative;
	isolation: isolate;
	padding-block: clamp(2.5rem, 5vh, 3.6rem);
	background: var(--mg-ink);
	border-top: 0;
	border-bottom: 0;
	/*
	 * clip, а не hidden: секция обрезает кадр двери по краям, но не
	 * становится скролл-контейнером. С hidden карточка входа не могла
	 * прилипнуть и на десктопе висела, оставив под собой пол-экрана
	 * чёрного — самый заметный провал композиции на странице.
	 */
	overflow: clip;
}

body.page-id-6 .mg-gate::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: url("/wp-content/uploads/2026/10/bg/forest.jpg?v=3.12.0");
	background-size: cover;
	background-position: 50% 50%;
	opacity: 1;
	mix-blend-mode: screen;
	filter: contrast(1.08) brightness(1.22) sepia(.20) saturate(1.25);
	transform: scale(1.04);
	transition: transform 3.4s var(--mg-ease-soft);
}

body.page-id-6 .mg-gate.is-in::before { transform: scale(1); }

body.page-id-6 .mg-gate::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(72% 60% at 50% 46%,
			rgba(10, 8, 6, .46) 0%,
			rgba(10, 8, 6, .62) 58%,
			rgba(10, 8, 6, .74) 100%),
		linear-gradient(to bottom, var(--mg-ink) 0%, transparent 16%, transparent 84%, var(--mg-ink) 100%);
}

body.page-id-6 .mg-gate__grid {
	align-items: start;
	gap: clamp(2.4rem, 5vw, 4.5rem);
}

/* Список — по линейке, без коробок. */
body.page-id-6 .mg-gate__list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: mg-inside;
}

body.page-id-6 .mg-gate__item {
	padding: clamp(1rem, 2vw, 1.4rem) 0;
	border-top: 1px solid rgba(242, 232, 213, .08);
	display: grid;
	grid-template-columns: 2.2rem minmax(0, 1fr);
	column-gap: .8rem;
}

body.page-id-6 .mg-gate__item:last-child {
	border-bottom: 1px solid rgba(242, 232, 213, .08);
}

body.page-id-6 .mg-gate__item::before {
	counter-increment: mg-inside;
	content: counter(mg-inside, decimal-leading-zero);
	grid-row: span 2;
	font-family: var(--mg-sans);
	font-size: .5625rem;
	letter-spacing: .2em;
	color: var(--mg-gold);
	padding-top: .45em;
	opacity: .85;
}

body.page-id-6 .mg-gate__item-title {
	grid-column: 2;
	margin: 0 0 .3rem;
	font-size: clamp(1.1rem, 1.5vw, 1.28rem);
}

body.page-id-6 .mg-gate__item-text {
	grid-column: 2;
	font-size: .9rem;
	line-height: 1.6;
	color: var(--mg-muted);
}

/* Цена — типографическое событие, а не две строки мелким. */
body.page-id-6 .mg-gate__price {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	margin-top: clamp(2.2rem, 4vw, 3rem);
	padding-top: clamp(1.4rem, 3vw, 2rem);
	border-top: 1px solid var(--mg-line-gold);
}

body.page-id-6 .mg-gate__price-line {
	display: block;
	margin: 0;
}

/*
 * Разметка идёт вперемешку: цена → пояснение → цена → пояснение.
 * Автораскладка положила бы пояснение во вторую колонку, поэтому места
 * заданы явно: слева первый тариф со своим текстом, справа второй.
 */
body.page-id-6 .mg-gate__price > *:nth-child(1) { grid-area: 1 / 1; }
body.page-id-6 .mg-gate__price > *:nth-child(2) { grid-area: 2 / 1; }
body.page-id-6 .mg-gate__price > *:nth-child(3) { grid-area: 1 / 2; }
body.page-id-6 .mg-gate__price > *:nth-child(4) { grid-area: 2 / 2; }

body.page-id-6 .mg-gate__price > *:nth-child(3) {
	padding-left: clamp(1rem, 2vw, 1.6rem);
	border-left: 1px solid rgba(242, 232, 213, .1);
}

body.page-id-6 .mg-gate__price > *:nth-child(4) {
	padding-left: clamp(1rem, 2vw, 1.6rem);
	border-left: 1px solid rgba(242, 232, 213, .1);
}

body.page-id-6 .mg-gate__sum {
	display: block;
	font-size: clamp(2.1rem, 3.4vw, 2.9rem);
	line-height: 1;
	margin-bottom: .5rem;
}

body.page-id-6 .mg-gate__price-label {
	display: block;
	margin-bottom: .7rem;
}

body.page-id-6 .mg-gate__price-note {
	margin: 0 0 clamp(1.3rem, 2.5vw, 1.8rem);
	font-size: .875rem;
	line-height: 1.6;
	color: var(--mg-muted);
	max-width: 30ch;
}

/* Карточка двери: стекло, свет изнутри, ничего лишнего. */
body.page-id-6 .mg-gate__entry {
	position: relative;
	align-self: start;
	padding: clamp(1.6rem, 2.6vw, 2.1rem);
	background:
		linear-gradient(165deg, rgba(24, 20, 15, .92), rgba(12, 10, 8, .88));
	border: 1px solid rgba(212, 162, 78, .30);
	box-shadow:
		inset 0 1px 0 rgba(242, 232, 213, .06),
		0 24px 60px rgba(0, 0, 0, .45);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	transition: border-color .6s ease, box-shadow .6s ease, transform .7s var(--mg-ease);
}

body.page-id-6 .mg-gate__entry:hover {
	border-color: rgba(212, 162, 78, .55);
	box-shadow:
		inset 0 1px 0 rgba(242, 232, 213, .10),
		0 26px 70px rgba(0, 0, 0, .5),
		0 0 60px rgba(212, 162, 78, .07);
	transform: translateY(-3px);
}

body.page-id-6 .mg-gate__entry-text {
	max-width: 24ch;
	font-size: clamp(1.3rem, 2vw, 1.55rem);
	line-height: 1.4;
}

body.page-id-6 .mg-gate__entry-note {
	max-width: 34ch;
	font-size: .78125rem;
	line-height: 1.6;
	color: var(--mg-muted);
}

body.page-id-6 .mg-gate__mercy {
	margin-top: clamp(3rem, 6vw, 4.5rem);
	padding-top: clamp(2rem, 4vw, 2.8rem);
	border-top: 1px solid rgba(242, 232, 213, .08);
}

/* ---------- 6. Швы между экранами ---------- */

/*
 * Жёсткие границы секций читались как стопки коробок. Тонкая линия,
 * растворяющаяся к краям, и общий градиент делают переход незаметным.
 */
body.page-id-6 .mg-section,
body.page-id-6 .mg-section--band {
	border-top: 0;
	border-bottom: 0;
	position: relative;
}

body.page-id-6 .mg-section::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(86%, 1080px);
	height: 1px;
	background: linear-gradient(to right, transparent, rgba(242, 232, 213, .09), transparent);
	pointer-events: none;
}

/* ---------- 7. Адаптив ---------- */

@media (max-width: 1023px) {
	body.page-id-6 .mg-section--facets .mg-facets {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	body.page-id-6 .mg-gate__grid {
		grid-template-columns: 1fr;
	}
	body.page-id-6 .mg-gate::before { background-position: 70% 50%; }
	body.page-id-6 .mg-gate__entry { max-width: 460px; }
}

@media (max-width: 767px) {
	body.page-id-6 .mg-hero {
		min-height: min(94svh, 780px);
		align-items: flex-end;
		padding-bottom: var(--mg-head-h, 81px);
	}
	body.page-id-6 .mg-hero__media { background-position: 62% 52%; }
	body.page-id-6 .mg-hero__media::after {
		background:
			linear-gradient(to bottom,
				rgba(10, 8, 6, .82) 0%,
				rgba(10, 8, 6, .35) 26%,
				rgba(10, 8, 6, .72) 62%,
				var(--mg-ink) 100%);
	}
	body.page-id-6 .mg-hero__title { max-width: 100%; font-size: clamp(2rem, 9vw, 2.6rem); }
	body.page-id-6 .mg-hero__scroll { display: none; }
	body.page-id-6 .mg-hero .mg-btn-row { justify-content: flex-start; }

	body.page-id-6 .mg-confession { min-height: 0; padding-block: clamp(4rem, 12vw, 6rem); }
	body.page-id-6 .mg-confession__text { max-width: 26ch; font-size: clamp(1.4rem, 5.6vw, 1.8rem); }

	body.page-id-6 .mg-story__media { aspect-ratio: 4 / 3; }

	body.page-id-6 .mg-section--facets .mg-facets { grid-template-columns: 1fr; }
	body.page-id-6 .mg-gate__price { grid-template-columns: 1fr; }
	body.page-id-6 .mg-gate__price > *:nth-child(1) { grid-area: auto; }
	body.page-id-6 .mg-gate__price > *:nth-child(2) { grid-area: auto; }
	body.page-id-6 .mg-gate__price > *:nth-child(3) { grid-area: auto; margin-top: 1.4rem; }
	body.page-id-6 .mg-gate__price > *:nth-child(4) { grid-area: auto; }
	body.page-id-6 .mg-gate__price > *:nth-child(3),
	body.page-id-6 .mg-gate__price > *:nth-child(4) {
		padding-left: 0;
		border-left: 0;
	}
	body.page-id-6 .mg-gate__entry { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	body.page-id-6 .mg-hero__media,
	body.page-id-6 .mg-confession > .mg-wrap::before,
	body.page-id-6 .mg-gate::before { transition: none; transform: none; }
	body.page-id-6 .mg-story,
	body.page-id-6 .mg-story__media img { transition: none; }
}

/* ---------- 8. Вход героя и «дыхание» кадров ---------- */

/*
 * Дети героя входят по очереди. Класс mg-js ставит общий скрипт, поэтому
 * без JavaScript эти правила не срабатывают вовсе и текст виден сразу.
 */
body.page-id-6 .mg-js .mg-hero--enter .mg-hero__eyebrow,
body.page-id-6 .mg-js .mg-hero--enter .mg-hero__title,
body.page-id-6 .mg-js .mg-hero--enter .mg-hero__sub,
body.page-id-6 .mg-js .mg-hero--enter .mg-btn-row {
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity 1.15s var(--mg-ease),
		transform 1.15s var(--mg-ease);
}

body.page-id-6 .mg-js .mg-hero--enter .mg-hero__eyebrow { transition-delay: .05s; }
body.page-id-6 .mg-js .mg-hero--enter .mg-hero__title   { transition-delay: .18s; }
body.page-id-6 .mg-js .mg-hero--enter .mg-hero__sub     { transition-delay: .34s; }
body.page-id-6 .mg-js .mg-hero--enter .mg-btn-row       { transition-delay: .48s; }

body.page-id-6 .mg-js .mg-hero--in .mg-hero__eyebrow,
body.page-id-6 .mg-js .mg-hero--in .mg-hero__title,
body.page-id-6 .mg-js .mg-hero--in .mg-hero__sub,
body.page-id-6 .mg-js .mg-hero--in .mg-btn-row {
	opacity: 1;
	transform: none;
}

/*
 * Медленный наезд кадра у карточек. Картинка приходит чуть крупнее и
 * «усаживается» — это читается как кино, а не как зум. Двигаем только
 * transform: перерисовки текста не будет.
 */
body.page-id-6 .mg-js .mg-story__media img {
	transform: scale(1.08);
	transition: transform 1.8s var(--mg-ease-soft), filter .7s ease;
}

body.page-id-6 .mg-js .mg-story.mg-frame-in .mg-story__media img {
	transform: scale(1.01);
}

body.page-id-6 .mg-js .mg-story.mg-frame-in:hover .mg-story__media img {
	transform: scale(1.055);
}

@media (prefers-reduced-motion: reduce) {
	body.page-id-6 .mg-hero--enter .mg-hero__eyebrow,
	body.page-id-6 .mg-hero--enter .mg-hero__title,
	body.page-id-6 .mg-hero--enter .mg-hero__sub,
	body.page-id-6 .mg-hero--enter .mg-btn-row {
		opacity: 1;
		transform: none;
		transition: none;
	}
	body.page-id-6 .mg-story__media img { transform: none; }
}

/* ==========================================================================
   20. АТМОСФЕРА И ГЛУБИНА — 2026-10-23
   ==========================================================================
   Предыдущий слой выстроил кадр, но фон под текстом везде был ровной
   заливкой. Экран без воздуха читается как вёрстка; экран, у которого под
   словами есть глубина, — как кадр.

   Что добавлено:
   — фоновый слой с картинкой под каждой секцией (разметка приходит из
     moigrani_home_atmos(), рисунок — отсюда);
   — вуаль поверх картинки: текст остаётся главным, края кадра растворяются
     в фоне страницы, поэтому секции не читаются как коробки;
   — зерно поверх всего: убивает бандинг на больших тёмных градиентах и
     даёт фактуру плёнки;
   — медленный параллакс и «шов» между секциями (JS — moigrani-design.php).

   Откат: удалить блок целиком. Ни одна базовая секция не пострадает — все
   правила либо добавляют слой, либо перекрывают существующий.
   ========================================================================== */

/* ---------- 1. Зерно: фактура плёнки поверх всей страницы ---------- */

/*
 * Тёмный фон — худший случай для бандинга: градиент от #0a0806 к #1a1410
 * на 2000px разбивается на полосы прямо в макете. Зерно — стандартное
 * лечение: оно разбивает полосу пиксельной сеткой, глаз перестаёт её видеть,
 * а картинка получает фактуру, которой не хватало цифровому кадру.
 *
 * Тайл 160×160 — потому что мелкий шум виден как сетка, крупный как пятна.
 * Микс overlay выбран потому, что при нём шум темнее средней точки уходит
 * в тень, а светлее — в свет: то есть он не поднимает общую яркость,
 * как это делает обычный opacity. 3.5% — верхняя граница, при которой
 * зерно читается как плёнка; выше 6% оно читается как грязь.
 */
body.page-id-6::after {
	content: "";
	position: fixed;
	inset: 0;
	/*
	 * 1000 — не «повыше всего». Модалка регистрации в Kadence/PMS стоит
	 * на 1200, а выдвижное меню на 99999; на 9995 зерно ложилось поверх
	 * окна формы. Оно и не мешало клику (pointer-events:none), но
	 * смешивалcя с полями ввода и платило за это лишний слой композиции.
	 * 1000 — выше всего содержимого страницы и ниже обеих надстроек.
	 */
	z-index: 1000;
	pointer-events: none;
	background-image: url("/wp-content/uploads/2026/10/bg/grain.webp?v=3.6.1");
	background-repeat: repeat;
	background-size: 160px 160px;
	opacity: .035;
	mix-blend-mode: overlay;
	-webkit-mix-blend-mode: overlay;
}

/* На слабых телефонах смешивание целого экрана дороже, чем оно того стоит:
   полотно текстуры там всё равно не видно из-за вуалей. */
@media (max-width: 900px), (hover: none) {
	body.page-id-6::after { display: none; }
}

/* ---------- 2. Слой: картинка, дрейф, вуаль ---------- */

/*
 * Слой — обычный <i>, вставленный в разметку (см. moigrani_home_atmos).
 * Он лежит под содержимым секции, ничего не перекрывает и ничего не
 * переносит: position:absolute внутри секции, которая сама relative.
 *
 * Три вложенных элемента, и это не избыточность:
 *   .mg-atmos        — рамка кадра, обрезает края (overflow:hidden);
 *   .mg-atmos__drift — медленный наезд (CSS-анимация scale);
 *   .mg-atmos__img   — сама картинка; ей скрипт пишет параллакс (translateY).
 * Разводить наезд и параллакс по разным элементам обязательно: оба пишут
 * в transform, и одна анимация убила бы другую.
 */
body.page-id-6 .mg-atmos {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	/* contain:paint не даёт параллаксу инвалидировать раскладку страницы. */
	contain: paint;
	--mg-p: .5;
}

body.page-id-6 .mg-atmos__drift,
body.page-id-6 .mg-atmos__img {
	position: absolute;
	inset: 0;
	display: block;
}

/*
 * Запас 12% сверху и снизу. Параллакс сдвигает картинку максимум на 16%
 * высоты секции — без запаса на краях появились бы пустые полосы.
 * 118% вместо 112% с запасом на округление процентов вниз.
 */
body.page-id-6 .mg-atmos__img {
	inset: -12% 0;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 50%;
	opacity: var(--mg-o, .26);
	will-change: transform;
}

body.page-id-6 .mg-atmos__veil {
	position: absolute;
	inset: 0;
	display: block;
	background-image: var(--mg-veil);
	background-color: rgba(10, 8, 6, .55);
}

/*
 * Наезд кадра. 46 секунд в одну сторону и обратно — медленнее, чем
 * заметно; глаз ловит только движение, если по нему скользит взгляд,
 * и то не сразу. На узких touch-экранах выключен: там параллакс уже не
 * запускается, а постоянная анимация на пяти слоях съедала бы кадры.
 */
@media (hover: hover) and (pointer: fine) and (min-width: 901px) {
	body.page-id-6 .mg-atmos__drift {
		animation: mg-atmos-drift 46s var(--mg-ease-soft) infinite alternate;
		will-change: transform;
	}
}

@keyframes mg-atmos-drift {
	from { transform: scale(1.01) translate3d(0, 0, 0); }
	to   { transform: scale(1.07) translate3d(0, -1.2%, 0); }
}

/*
 * Содержимое секции — над слоем. Отдельного правила для .mg-hero__media
 * не нужно: оно и так прямой потомок .mg-hero, поэтому и так получает
 * z-index:2 из этого селектора. Раньше стояло отдельное z-index:1, оно
 * проигрывало по специфичности и просто ничего не делало.
 */
/*
 * Пустая коробка бывшей подсказки — декоративный оверлей: position:relative
 * из этого правила возвращал её в поток флекс-колонки героя и сдвигал
 * центрируемый блок вверх на половину её высоты (47px). Надпись «листайте»
 * и линия сняты 24.10, элемент в контенте остался пустым.
 */
body.page-id-6 .mg-full > :not(.mg-atmos):not(.mg-hero__scroll) { position: relative; z-index: 2; }

/* Подсказке z-index:2 уже задан её собственным правилом. */
body.page-id-6 .mg-hero > .mg-hero__scroll { z-index: 2; }

/* ---------- 3. Картинки по секциям ---------- */

/*
 * Базовая строка — jpg; webp перекрывает её в @supports (см. 3a ниже).
 *
 * Размеры 1600 и 2400: фон никогда не показан в натуральную величину,
 * а на телефоне кадр уходит вниз по высоте секции и апскейлится не больше
 * чем в 1.3 раза — выше качества там всё равно не видно.
 */
body.page-id-6 .mg-atmos--hero .mg-atmos__img {
	--mg-o: .55;
	/*
	 * Свеча в правой трети — там, где в исходнике она и стоит. Раньше
	 * стояло 62% 45%, и кадр обрезался так, что источник света уезжал
	 * за правый край.
	 */
	background-position: 66% 50%;
	background-image: url("/wp-content/uploads/2026/10/bg/hero.jpg?v=3.7.0");
}



/*
 * Туман — самый тёмный кадр набора: средняя яркость 28 при p99 всего 53.
 * На прозрачности 0.30 поверх черни он давал прибавку в 5 уровней — то
 * есть практически ничего. Поэтому яркость поднимаем фильтром ДО подмешивания,
 * а не прозрачностью: иначе пришлось бы поднимать её до 0.8 и получить
 * вместо тумана грязь.
 *
 * Замеры исходников (средняя / 99-й перцентиль яркости):
 *   facets 61/213 · confession 24/83 · stories 29/53 · hero 22/79 · quiet 12/40
 * Поднятые кадры дают под собой +14…+18 уровней — фон читается, но текст
 * на нём по прибору держится выше 6:1 (work/verify-home.py --contrast).
 */
/*
 * Зарисовки — по Блоку: ночь, улица, фонарь, аптека.
 *
 * Кадр сменился впервые с первого набора фонов. Было абстрактное холодное
 * пятно тумана: фон читался, но ничего не говорил. Автор попросил сцену из
 * «Ночи, улицы, фонаря, аптеки» — и это ровно тот регистр, в котором живут
 * очерки.
 *
 * Как кадр уложен в секцию. Секция кроет фон карточками от 25% до 95%
 * высоты, поэтому видна только верхняя полоса и поля по краям. Отсюда
 * композиция: линия горизонта в верхней четверти, фонарь в правой трети,
 * витрина аптеки у самого правого края (её свет попадает в правое поле),
 * а три четверти кадра — мокрый булыжник в темноте, куда ложится текст
 * карточек.
 *
 * Верхние 12% исходника дотянуты размытым продолжением туманной полосы:
 * слой стоит с inset:-12% (запас под параллакс), и без этого запаса
 * плафон фонаря срезался верхним краем секции.
 *
 * Замер исходника: средняя яркость 19 (у старого тумана было 29), p99 68
 * только за счёт пламени и витрины — то есть кадр темнее прежнего, но с
 * двумя точками света. Поэтому яркость поднята фильтром (2.15), а не
 * прозрачностью: 0.45 поверх черни даёт читаемый свет и не выжигает
 * подложку карточек.
 */
body.page-id-6 .mg-atmos--stories .mg-atmos__img {
	/*
	 * 100% по X, а не 50%: при cover кадр шире секции, и сдвиг вправо —
	 * единственный способ оставить витрину аптеки в поле, а не за краем.
	 * Тон и прозрачность этого кадра заданы ниже, в слое 21.
	 */
	background-position: 100% 50%;
	background-image: url("/wp-content/uploads/2026/10/bg/stories-sky.jpg?v=3.12.0");
}

body.page-id-6 .mg-atmos--facets .mg-atmos__img {
	--mg-o: .70;
	background-position: 50% 34%;
	background-image: url("/wp-content/uploads/2026/10/bg/facets.jpg?v=3.9.0");
}

/*
 * У двери уже есть свой кадр — открытая дверь со светом (gate-door.jpg в
 * ::before). Вторую дверь ставить нельзя: два проёма в одной секции спорят
 * и оба слабеют. Поэтому здесь не сюжет, а воздух под дверью: тёплая
 * дымка, поднимающаяся от нижнего края. Ровно та пустота, из-за которой
 * карточка входа висела в чёрном пустоте.
 *
 * Кадр quiet — почти пустой: тёмный сверху, тёплый снизу. Ровно то, что
 * нужно, чтобы низ секции перестал быть обрывом.
 */
body.page-id-6 .mg-atmos--gate-deep .mg-atmos__img {
	--mg-o: .58;
	/*
	 * cover, а не auto 74%: при фиксированной высоте ширина картинки в
	 * пересчёте на высоту секции переставала дотягиваться до краёв
	 * примерно от 2400px в ширину, и по бокам появлялись некрашенные
	 * полосы. cover закрывает секцию при любой ширине, а тёплый низ
	 * остаётся на месте — он и есть цель слоя.
	 */
	background-position: 50% 100%;
	background-size: cover;
	/* Кадр почти чёрный (средняя 12) — подсвечиваем вдвое и сразу гасим
	   вуалем снизу, где ложится текст. */
	filter: brightness(2);
	background-repeat: no-repeat;
	background-image: url("/wp-content/uploads/2026/10/bg/quiet.jpg?v=3.6.1");
}


/* ---------- 3a. webp как улучшение, jpg как базовый путь ---------- */

/*
 * Раньше рядом стояли два объявления background-image: сперва jpg, затем
 * image-set с webp. Два объявления одного свойства на одном элементе не
 * «выбираются по поддержке» — просто побеждает последнее, и строка с jpg
 * была мёртвым кодом. Проверено перехватом запросов: при заблокированном
 * webp браузер не брал jpg и оставлял фон пустым.
 *
 * Теперь базовый путь — jpg, а webp лежит в @supports и перекрывает его
 * только там, где движок действительно понимает image-set(). Порядок важен:
 * специфичность одинаковая, решает порядок в файле.
 */
@supports (background-image: image-set(url("a.webp") type("image/webp"))) {
	body.page-id-6 .mg-atmos--hero .mg-atmos__img {
		background-image: image-set(
			url("/wp-content/uploads/2026/10/bg/hero-1600.webp?v=3.7.0") type("image/webp") 1x,
			url("/wp-content/uploads/2026/10/bg/hero-2400.webp?v=3.7.0") type("image/webp") 2x
		);
	}
}
@supports (background-image: image-set(url("a.webp") type("image/webp"))) {

}
@supports (background-image: image-set(url("a.webp") type("image/webp"))) {
	body.page-id-6 .mg-atmos--stories .mg-atmos__img {
		background-image: image-set(
			url("/wp-content/uploads/2026/10/bg/stories-sky-1600.webp?v=3.12.0") type("image/webp") 1x,
			url("/wp-content/uploads/2026/10/bg/stories-sky-2400.webp?v=3.12.0") type("image/webp") 2x
		);
	}
}
@supports (background-image: image-set(url("a.webp") type("image/webp"))) {
	body.page-id-6 .mg-atmos--facets .mg-atmos__img {
		background-image: image-set(
			url("/wp-content/uploads/2026/10/bg/facets-1600.webp?v=3.9.0") type("image/webp") 1x,
			url("/wp-content/uploads/2026/10/bg/facets-2400.webp?v=3.9.0") type("image/webp") 2x
		);
	}
}
@supports (background-image: image-set(url("a.webp") type("image/webp"))) {
	body.page-id-6 .mg-atmos--gate-deep .mg-atmos__img {
		background-image: image-set(
			url("/wp-content/uploads/2026/10/bg/quiet-1600.webp?v=3.6.1") type("image/webp") 1x,
			url("/wp-content/uploads/2026/10/bg/quiet-2400.webp?v=3.6.1") type("image/webp") 2x
		);
	}
}

@supports (background-image: image-set(url("a.webp") type("image/webp"))) {
	body.page-id-6 .mg-gate::before {
		background-image: image-set(
			url("/wp-content/uploads/2026/10/bg/forest-1600.webp?v=3.12.0") type("image/webp") 1x,
			url("/wp-content/uploads/2026/10/bg/forest-2400.webp?v=3.12.0") type("image/webp") 2x
		);
	}
}

/*
 * Телефон. На 390 px ширины cover режет шестнадцатидевятую картинку до
 * полосы в 11% ширины — там остаётся один ствол и кусок тумана. Поэтому
 * для узких экранов есть вертикальный срез (правые стволы, столб света и
 * светлячки), а запасной путь — тот же широкий кадр: движков без webp
 * сегодня нет, но пустой фон вместо картинки недопустим.
 */
@media (max-width: 900px) {
	body.page-id-6 .mg-gate::before { background-position: 50% 50%; }
}

@supports (background-image: image-set(url("a.webp") type("image/webp"))) {
	@media (max-width: 900px) {
		body.page-id-6 .mg-gate::before {
			background-image: image-set(
				url("/wp-content/uploads/2026/10/bg/forest-tall-480.webp?v=3.12.0") type("image/webp") 1x,
				url("/wp-content/uploads/2026/10/bg/forest-tall-960.webp?v=3.12.0") type("image/webp") 2x
			);
		}
	}
}

/* ---------- 4. Вуаль: как картинка уходит в фон ---------- */

/*
 * Вуаль делает три работы сразу:
 *   1) гасит картинку до читаемости — основной тон текста лежит на контрасте
 *      не меньше 11:1, и ради этого картинка не должна быть ярче 34%;
 *   2) растворяет верх и низ кадра в --mg-ink, поэтому между секциями
 *      нет ступеньки тона;
 *   3) кладёт вертикальный градиент плотности: середина светлее краёв —
 *      глаз ведёт по центру, к тексту.
 *
 * Порядок слоёв в background-image: первый — сверху.
 */
body.page-id-6 .mg-atmos--hero .mg-atmos__veil {
	background-color: transparent;
	background-image:
		linear-gradient(to bottom,
			var(--mg-ink) 0%,
			rgba(10, 8, 6, .80) 12%,
			rgba(10, 8, 6, .55) 46%,
			rgba(10, 8, 6, .72) 82%,
			var(--mg-ink) 100%),
		linear-gradient(to right,
			rgba(10, 8, 6, .92) 0%,
			rgba(10, 8, 6, .74) 34%,
			rgba(10, 8, 6, .20) 68%,
			rgba(10, 8, 6, .42) 100%);
}

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


body.page-id-6 .mg-atmos--stories .mg-atmos__veil {
	background-color: transparent;
	background-image:
		radial-gradient(90% 62% at 50% 34%, rgba(10, 8, 6, .82), rgba(10, 8, 6, .52) 66%, transparent 100%),
		linear-gradient(to bottom,
			var(--mg-ink) 0%,
			rgba(10, 8, 6, .60) 14%,
			rgba(10, 8, 6, .48) 74%,
			rgba(10, 8, 6, .74) 92%,
			var(--mg-ink) 100%);
}

/*
 * Реестр граней — единственная секция, где текста много и он стоит
 * плотным блоком по всей ширине. Гасим ровно: под 60% картинка проступает
 * только в промежутках между строками реестра, и это как раз тот случай,
 * где глубина читается, а текст остаётся текстом.
 */
body.page-id-6 .mg-atmos--facets .mg-atmos__veil {
	background-color: transparent;
	background-image:
		radial-gradient(78% 54% at 50% 26%, rgba(10, 8, 6, .70), rgba(10, 8, 6, .66) 70%, rgba(10, 8, 6, .78) 100%),
		linear-gradient(to bottom,
			var(--mg-ink) 0%,
			rgba(10, 8, 6, .66) 10%,
			rgba(10, 8, 6, .62) 84%,
			var(--mg-ink) 100%);
}

/*
 * У двери вуаль почти пустая в верхней половине: там живёт кадр с открытой
 * дверью, и гасить его нельзя. Работает только низ — он и был провалом.
 */
body.page-id-6 .mg-atmos--gate-deep .mg-atmos__veil {
	background-color: transparent;
	background-image:
		radial-gradient(88% 52% at 50% 96%, rgba(10, 8, 6, .30), rgba(10, 8, 6, .62) 58%, rgba(10, 8, 6, .84) 100%),
		linear-gradient(to bottom,
			rgba(10, 8, 6, .24) 0%,
			rgba(10, 8, 6, .10) 44%,
			rgba(10, 8, 6, .40) 76%,
			rgba(10, 8, 6, .82) 94%,
			rgba(10, 8, 6, .90) 100%);
}

/* ---------- 5. Шов между секциями ---------- */

/*
 * Пока секция не доехала до центра взгляда, её собственный слой ещё не
 * виден — и на стыке возникает провал тона. Скрипт пишет в --mg-p
 * положение секции (0 — ушла вниз, 1 — уехала вверх), а CSS по нему
 * подмешивает тёплый стык. Получается переход без единого пикселя
 * жёсткой границы: два соседних тона просто встречаются.
 */
body.page-id-6 .mg-atmos__veil::after {
	content: "";
	position: absolute;
	inset: 0;
	display: block;
	opacity: calc((1 - var(--mg-p)) * .5);
	background: linear-gradient(to top,
		rgba(212, 162, 78, .055) 0%,
		transparent 26%);
	transition: opacity .4s linear;
}

/* ---------- 6. Глубина внутри секций ---------- */

/*
 * Там, где раньше была ровная заливка, теперь есть задник. Значит, переднему
 * плану можно позволить чуть больше воздуха: карточки и строки реестра
 * получают собственный тень-подложку и перестают сливаться с фоном.
 */
body.page-id-6 .mg-section--stories .mg-story__body,
body.page-id-6 .mg-section--facets .mg-facet {
	position: relative;
}

body.page-id-6 .mg-section--stories .mg-story__body::before {
	content: "";
	position: absolute;
	/*
	 * Горизонтальный отступ нулевой не по вкусу, а потому что минус 1.2rem
	 * (19.2px) у первой карточки на 320px вылезал за левое поле и мог
	 * дать горизонтальную прокрутку при наведении. По вертикали оставляем
	 * воздух — там поле всегда есть.
	 */
	inset: -1.1rem 0 -1.3rem;
	z-index: -1;
	background: radial-gradient(120% 100% at 50% 40%, rgba(10, 8, 6, .62), transparent 72%);
	opacity: 0;
	transition: opacity .7s var(--mg-ease);
	pointer-events: none;
}

body.page-id-6 .mg-section--stories .mg-story:hover .mg-story__body::before { opacity: 1; }

/*
 * Строка реестра проявляется не «париж вверх», а прочерком: золотая линия
 * идёт слева направо, текст под ней встаёт на место. Это дешевле общего
 * fade-up и читается как запись, а не как эффект.
 */
body.page-id-6 .mg-js .mg-section--facets .mg-facet::before {
	transition: transform 1.05s var(--mg-ease);
	transition-delay: calc(var(--i, 0) * 70ms);
}

body.page-id-6 .mg-js .mg-section--facets .mg-facet .mg-facet__num,
body.page-id-6 .mg-js .mg-section--facets .mg-facet .mg-facet__name,
body.page-id-6 .mg-js .mg-section--facets .mg-facet .mg-facet__desc {
	transition:
		opacity .85s var(--mg-ease),
		transform .85s var(--mg-ease);
	transition-delay: calc(var(--i, 0) * 70ms);
}

/*
 * Заголовок реестра поднимается над линией — так строка собирается
 * в две фазы: сначала черта, потом слово.
 */
body.page-id-6 .mg-js .mg-section--facets .mg-facet:not(.is-in) .mg-facet__num,
body.page-id-6 .mg-js .mg-section--facets .mg-facet:not(.is-in) .mg-facet__name,
body.page-id-6 .mg-js .mg-section--facets .mg-facet:not(.is-in) .mg-facet__desc {
	opacity: 0;
	transform: translateY(14px);
}

/*
 * Карточка истории: кадр приоткрывается сверху вниз при появлении.
 * clip-path анимируется на композиторе и стоит дешевле, чем подъём всей
 * карточки: текст под обложкой не прыгает, двигается только изображение.
 */
body.page-id-6 .mg-js .mg-story__media {
	clip-path: inset(0 0 100% 0);
	transition: clip-path 1.25s var(--mg-ease);
	transition-delay: calc(var(--i, 0) * 90ms);
}

body.page-id-6 .mg-js .mg-story.is-in .mg-story__media { clip-path: inset(0 0 0 0); }

/* Медленное дыхание света в карточке двери. 9 секунд — один вдох. */
body.page-id-6 .mg-js .mg-gate.is-in .mg-gate__entry {
	animation: mg-door-breathe 9s ease-in-out infinite;
}

@keyframes mg-door-breathe {
	0%, 100% {
		box-shadow:
			inset 0 1px 0 rgba(242, 232, 213, .06),
			0 24px 60px rgba(0, 0, 0, .45),
			0 0 42px rgba(212, 162, 78, .05);
	}
	50% {
		box-shadow:
			inset 0 1px 0 rgba(242, 232, 213, .10),
			0 28px 74px rgba(0, 0, 0, .52),
			0 0 78px rgba(212, 162, 78, .12);
	}
}

/* ---------- 7. Адаптив ---------- */

/*
 * На узких экранах секция выше, а параллакс уже не запускается — картинка
 * просто повторяет себя по вертикали. Поднимаем прозрачность вуалей и
 * опускаем картинку: на телефоне площадь текста относительно кадра
 * больше, значит ему нужно больше тишины, а не меньше.
 */
@media (max-width: 900px) {
	body.page-id-6 .mg-atmos__img {
		inset: -8% 0;
		opacity: calc(var(--mg-o, .26) * .82);
	}


	body.page-id-6 .mg-atmos--facets .mg-atmos__img { background-position: 50% 22%; }
	body.page-id-6 .mg-atmos--stories .mg-atmos__img { background-position: 50% 26%; }

	body.page-id-6 .mg-atmos--facets .mg-atmos__veil {
		background-image:
			radial-gradient(100% 34% at 50% 16%, rgba(10, 8, 6, .78), rgba(10, 8, 6, .74) 70%, rgba(10, 8, 6, .86) 100%),
			linear-gradient(to bottom, var(--mg-ink) 0%, rgba(10, 8, 6, .72) 8%, rgba(10, 8, 6, .70) 92%, var(--mg-ink) 100%);
	}
}

/*
 * На телефоне слой на всю высоту секции не нужен: карточки и так занимают
 * весь экран, и картинка за ними только мешает. Уводим её наверх и
 * оставляем вуаль — тон секции от этого не меняется.
 */
@media (max-width: 600px) {
	body.page-id-6 .mg-section--stories .mg-atmos,
	body.page-id-6 .mg-section--facets .mg-atmos {
		bottom: auto;
		height: 62%;
	}

	body.page-id-6 .mg-js .mg-story__media {
		transition-duration: 1s;
	}
}

/* Очень широкие экраны: кадр не должен растягиваться в пустоту. */
@media (min-width: 1800px) {
	body.page-id-6 .mg-atmos__img { background-position: 50% 50%; }
	body.page-id-6 .mg-atmos--hero .mg-atmos__img { background-position: 58% 45%; }
}

/* ---------- 8. Уважение к настройкам ---------- */

/*
 * «Меньше движения» отключает здесь всё движение, кроме появления
 * содержимого: без движения человек не должен остаться с пустым экраном.
 * Появление остаётся, но становится мгновенным — не анимацией, а сменой
 * состояния.
 */
@media (prefers-reduced-motion: reduce) {
	/*
	 * Страховка для реестра граней. Правило ниже прячет содержимое строки
	 * до класса .is-in и оно сильнее всего остального в файле (0,5,1).
	 * Сегодня это безопасно только потому, что скрипт появления при
	 * «меньше движения» выходит раньше и класс .mg-js не ставится. Если
	 * когда-нибудь это изменится, восемь строк просто исчезнут. Поэтому
	 * возвращаем непрозрачность явно, а не полагаемся на чужой скрипт.
	 */
	body.page-id-6 .mg-section--facets .mg-facet .mg-facet__num,
	body.page-id-6 .mg-section--facets .mg-facet .mg-facet__name,
	body.page-id-6 .mg-section--facets .mg-facet .mg-facet__desc {
		opacity: 1 !important;
		transform: none !important;
	}

	body.page-id-6 .mg-atmos__drift { animation: none !important; }
	body.page-id-6 .mg-js .mg-gate.is-in .mg-gate__entry { animation: none !important; }
	body.page-id-6 .mg-js .mg-story__media { clip-path: none !important; transition: none !important; }
	body.page-id-6 .mg-js .mg-section--facets .mg-facet::before,
	body.page-id-6 .mg-js .mg-section--facets .mg-facet .mg-facet__num,
	body.page-id-6 .mg-js .mg-section--facets .mg-facet .mg-facet__name,
	body.page-id-6 .mg-js .mg-section--facets .mg-facet .mg-facet__desc { transition: none !important; }
	body.page-id-6 .mg-atmos__veil::after { opacity: calc((1 - var(--mg-p)) * .28); }
}

/*
 * Повышенная контрастность: слой уходит совсем. Читатель, который просил
 * больше контраста, получает ровную заливку без потери текста.
 */
@media (prefers-contrast: more) {
	body.page-id-6 .mg-atmos { display: none; }
	body.page-id-6::after { display: none; }
}


/* ---------- 9. Дверь: карточка следует за читателем ---------- */

/*
 * Слева список из пяти пунктов, тарифы и пояснения — это почти полтора
 * экрана. Справа стояла одна карточка, и под ней зиял чёрный провал
 * высотой с половину экрана: композиция читалась как «забыли догрузить».
 *
 * Карточка теперь липкая и проходит всю высоту списка. Провал исчезает
 * не подрезкой текста, а присутствием: у читателя всё это время в
 * правой колонке горит ровно одна точка действия, и глаз возвращается
 * к ней после каждого пункта.
 *
 * top: 96px — под шапку Kadence (81px) плюс воздух; на коротких
 * экранах отступ уменьшается, иначе карточка уезжает за верх.
 */
body.page-id-6 .mg-gate__entry {
	position: sticky;
	top: clamp(72px, 9vh, 104px);
	align-self: start;
}

/*
 * Тонкая вертикальная нить под карточкой: показывает, что колонка
 * продолжается ниже. Без неё липкая карточка выглядит случайно
 * зависшей, а с ней — как элемент, который ведёт вглубь.
 */
body.page-id-6 .mg-gate__entry::after {
	content: "";
	width: 1px;
	height: clamp(3rem, 9vh, 7rem);
	margin-top: 1.4rem;
	background: linear-gradient(to bottom, rgba(212, 162, 78, .38), transparent);
}

@media (max-width: 1023px) {
	/*
	 * В одну колонку липкость бессмысленна: колонка равна секции, и
	 * карточка просто стояла бы на месте, отрезанная от своего текста.
	 * Возвращаем статичное положение.
	 *
	 * Центрировать надо ПО ГОРИЗОНТАЛИ, а не по вертикали: в одну колонку
	 * строка по высоте равна содержимому, поэтому align-self:center был
	 * пустым правилом, и карточка с max-width:460px прилипала к левому
	 * краю — на 768px справа от неё зияло 231px пустоты, на 1023px — 467px.
	 * Ровно то, что проверяется замером: justify-self центрует по горизонтали.
	 */
	body.page-id-6 .mg-gate__entry {
		position: relative;
		top: auto;
		align-self: auto;
		justify-self: center;
	}

	body.page-id-6 .mg-gate__entry::after { display: none; }
}

/* Короткий горизонтальный экран: прилипнуть почти некуда. */
@media (max-height: 560px) and (min-width: 1024px) {
	body.page-id-6 .mg-gate__entry { position: relative; top: auto; align-self: center; }
}

/* ---------- 10. Тон приглушённого текста под фото ---------- */

/*
 * Замер по фактическому фону под текстом (work/verify-home.py --contrast):
 * --mg-muted #8a8175 на самой светлой точке фона даёт ~4.9:1 — формально
 * проходит AA, но запас в четверть пункта. На других страницах за словом
 * стоит ровная заливка, здесь — картинка на 30% прозрачности, и светлее
 * она не станет.
 *
 * Поднимаем ТОЛЬКО на главной: остальные страницы автор настраивал под
 * ровный фон, и менять им тон — значит менять то, о чём меня не просили.
 * --mg-text #cfc4b0 не трогаем: он и так ~11:1.
 */
body.page-id-6 {
	--mg-muted: #9b9285;
}


/* ==========================================================================
   21. КИНЕМАТОГРАФ: высота экрана, свет, появление, кнопки — 2026-10-23
   ==========================================================================
   Сцена, а не страница: каждая секция занимает целый экран и держит
   содержимое по центру; фон ловит свет; текст приходит из тумана.

   ВНИЗАНИЕ К ПРАВКАМ. 2026-10-23 при переписывании вуалей скрипт искал
   селектор через s.index("...mg-atmos--hero .mg-atmos__veil {") и нашёл
   ПЕРВОЕ вхождение — в слое 20. Вместе с пятью вуалями удалились хвост
   слоя 20 (липкая карточка двери, тон приглушённого текста) и разделы 1–2
   слоя 21. Сайт продолжал открываться — пропало только то, что не видно
   без замера.

   Отсюда правило: правя слой, брать якорь, встречающийся в файле РОВНО
   ОДИН раз (баннер раздела), и проверять результат не «открылась ли
   страница», а конкретными признаками — getComputedStyle по ключевым
   селекторам и высотой страницы на эталонном экране.

   Откат: удалить блок; он ничего не переопределяет намертво.
   ========================================================================== */

/* ---------- 1. Высота экрана ---------- */

body.page-id-6 :is(.mg-hero, .mg-confession, .mg-section, .mg-gate) {
	/*
	 * Три строки — три движка, а не три попытки перебить правило. Побеждает
	 * последняя применимая: старые берут vh, браузеры 2022–2024 — svh
	 * (не дёргается при появлении панели), современные — dvh.
	 *
	 * Вычитаем шапку: кадр секции — это экран МИНУС закреплённая шапка.
	 * Делить сто процентов высоты с шапкой было ошибкой: секция в 100dvh
	 * под шапкой вылезала низом за край на её же высоту.
	 */
	min-height: calc(100vh - var(--mg-head-h, 81px));
	min-height: calc(100svh - var(--mg-head-h, 81px));
	min-height: calc(100dvh - var(--mg-head-h, 81px));

	display: flex;
	flex-direction: column;
	justify-content: center;

	> * { flex: none; }
}

/* Отступы не должны съедать экран: на низком экране они сами дают треть кадра. */
@media (max-height: 700px) {
	body.page-id-6 :is(.mg-hero, .mg-confession, .mg-section, .mg-gate) {
		padding-block: clamp(2.2rem, 6vh, 3.6rem);
	}
}

/* Альбомная ориентация телефона: полноэкранная секция прячет текст за сгибом. */
@media (max-height: 560px) {
	body.page-id-6 :is(.mg-hero, .mg-confession, .mg-section, .mg-gate) {
		min-height: 0;
		justify-content: flex-start;
	}
}

/* ---------- 1a. Кадр героя: своя сцена вместо кадра темы ---------- */

/*
 * У героя два слоя: .mg-hero__media темы (картинка + маска поверх) и наш
 * .mg-atmos. С двумя сценами в одном кадре каша: маска темы гасила резкую
 * свечу, а наш слой добивал боке, и в итоге читалось тёплое пятно вместо
 * «горящей свечи на столе».
 *
 * Оставляем ОДНУ сцену — в своём слое, где мы управляем и вуалью, и
 * параллаксом. Слой темы гасим: без него нечего было бы гасить.
 *
 * Что теряется и почему это не важно: у .mg-hero__media свой наезд кадра
 * и своя маска. Наезд у нас свой (.mg-atmos__drift), маска — наш вуаль.
 */
body.page-id-6 .mg-hero__media {
	background-image: none !important;
}

body.page-id-6 .mg-hero__media::after { display: none; }

/* ---------- 2. Свет и фактура фона ---------- */

/*
 * Восстановлено 2026-10-23 после того, как переписывание вуалей снесло эти
 * три правила: скрипт искал селектор вуалей через s.index(), а первое
 * вхождение оказалось в СЛОЕ 20, и вместе с пятью вуалями удалились все
 * правила слоя 21 на картинку. Симптом был тихий: сайт работал, а фоны
 * просто не получали ни screen, ни контраста. Проверяйте итог по
 * getComputedStyle, а не по «страница открылась».
 */

body.page-id-6 .mg-atmos__img {
	/*
	 * screen вместо обычного наложения: тёмные участки кадра не «шлят»
	 * поверх фона, а растворяются в нём, и остаётся только свет. Плюс
	 * контраст и яркость, чтобы туман и пылинки читались, а не уходили
	 * в серую кашу.
	 *
	 * Прозрачность теперь ФУНКЦИЯ от прогресса секции (--mg-p):
	 *
	 *   p = 0    секция внизу, только входит во взгляд  → 40% яркости
	 *   p = 0.42 секция прошла половину пути            → 100%
	 *   p = 1    секция ушла вверх                        → ~50%
	 *
	 * То есть кадр ВЫПЛЫВАЕТ из темноты по мере входа и притухает, когда
	 * уходит. Пол и потолок (0.4 и 0.5) заданы, чтобы фон не пропадал
	 * совсем: страница не должна мигать чёрным при быстрой прокрутке.
	 */
	opacity: calc(
		var(--mg-o, .26) *
		max(.5, min(var(--mg-p, .5) * 2.4, 1) * min((1.15 - var(--mg-p, .5)) * 3.4, 1))
	);
	mix-blend-mode: screen;
	-webkit-mix-blend-mode: screen;
	filter: contrast(1.15) brightness(1.1);
}

/*
 * Зарисовки — «ночь, улица, фонарь, аптека». Тон перемерен под новый кадр.
 *
 * Кадр темнее прежнего тумана (средняя 19 против 29), но у него есть два
 * источника света, и они не должны ни гаснуть, ни разгораться. 0.70 поверх
 * screen даёт свет фонаря и витрины читаемым, при этом замер контраста по
 * пикселям фона под текстом на 1440 и 1024 даёт минимум 6.4:1 (отрывки
 * карточек), заголовок 15.2:1, надзаголовок 7.5:1.
 *
 * Сепия снова нужна: кадр пришёл холодно-серым, как и прежний туман, и без
 * подгонки спорит с бронзовой палитрой остальных секций.
 */
body.page-id-6 .mg-atmos--stories .mg-atmos__img {
	--mg-o: .68;
	/* Сепия убрана: у звёздного кадра своя тёплая пыль, а сепия поверх
	   превращала верхнюю полосу в ровное коричневое облако. Контраст
	   возвращает пыльным полосам структуру, не поднимая общий тон. */
	filter: contrast(1.18) brightness(.96) saturate(1.08);
}

/*
 * Кристалл после снятия вуали стал спорным с сеткой из восьми строк — он
 * оказался ярче заголовка. Опускаем: он должен остаться фактурой, а не
 * вторым содержанием.
 */
body.page-id-6 .mg-atmos--facets .mg-atmos__img {
	--mg-o: .38;
	filter: contrast(1.08) brightness(1.02);
}

/*
 * 0.26, а не 0.62. Фонарь на 0.62 разгорался оранжевым пятном во всю
 * правую половину секции и налезал на тарифы — это не атмосфера, а костёр.
 * Дальний огонь в тёмной комнате читается как «там кто-то ждёт», и для
 * этого хватает четверти прозрачности. Плюс сдвиг вправо и вверх, чтобы
 * источник ушёл из-под блока с ценами.
 */
body.page-id-6 .mg-atmos--gate-deep .mg-atmos__img {
	--mg-o: .16;
	background-position: 82% 42%;
	filter: contrast(1.05) brightness(.92);
}

/*
 * Вуали переписаны. Прежние были двумя полноразмерными затемнениями —
 * вертикальным и горизонтальным — и они ПЕРЕМНОЖАЛИСЬ: там, где накрывались,
 * оставалось 0.10 × 0.04 = 0.4% от картинки. Замер вклада кадра в фон по сетке
 * 4×3 давал максимум +7 из 255, то есть атмосферы не было видно вовсе, при том
 * что opacity стоял 0.55, а картинки были новые и яркие.
 *
 * Теперь у каждой вуали своя работа, и они не накрывают друг друга:
 *
 *   ГОРИЗОНТАЛЬНАЯ — защита текста. Сильная слева (там заголовок), уходит в
 *   ноль к 78%, где начинается свободная часть кадра.
 *   ВЕРТИКАЛЬНАЯ — только стык с соседними секциями. Работает в верхних и
 *   нижних 18%, в середине прозрачна.
 *
 * В середине справа остаётся ~0.95 видимости кадра, а под заголовком — те же
 * 0.96 перекрытия, что и раньше. То есть контраст текста не приносится в
 * жертву видимости: тёмное там, где читают, и светло там, где не читают.
 */

body.page-id-6 .mg-atmos--hero .mg-atmos__veil {
	background-color: transparent;
	background-image:
		/* стык с шапкой и с признанием — только края */
		linear-gradient(to bottom,
			var(--mg-ink) 0%,
			rgba(10, 8, 6, .88) 7%,
			rgba(10, 8, 6, .12) 19%,
			rgba(10, 8, 6, 0) 34%,
			rgba(10, 8, 6, 0) 72%,
			rgba(10, 8, 6, .30) 90%,
			var(--mg-ink) 100%),
		/* заголовок слева — здесь темно */
		linear-gradient(to right,
			rgba(10, 8, 6, .95) 0%,
			rgba(10, 8, 6, .90) 24%,
			rgba(10, 8, 6, .66) 44%,
			rgba(10, 8, 6, .26) 64%,
			rgba(10, 8, 6, .04) 80%);
}

/*
 * Признание. Текст стоит по центру, поэтому здесь наоборот: тёмная лужа
 * в середине, а свет уходит вверх и вниз. Верх — как раз там, где в кадре
 * блестит вода.
 */


/*
 * Зарисовки. Заголовок слева, но карточки занимают всю ширину и у них свои
 * обложки — фон здесь фоном и остаётся: затемняем ровно настолько, чтобы
 * подложка карточек и подписи не плавали.
 *
 * Третья полоса — полоса у правого края. Без неё витрина аптеки светила
 * ровным светлым прямоугольником, приклеенным к краю страницы: кадр
 * обрезан по правому полю, и огонь терял край, который в жизни у него
 * есть. Полоса даёт этому краю тень и заодно приглушает свет, чтобы он
 * оставался источником в глубине, а не вторым содержанием.
 */
body.page-id-6 .mg-atmos--stories .mg-atmos__veil {
	background-color: transparent;
	background-image:
		linear-gradient(to bottom,
			var(--mg-ink) 0%,
			rgba(10, 8, 6, .80) 6%,
			rgba(10, 8, 6, .30) 20%,
			rgba(10, 8, 6, .30) 76%,
			rgba(10, 8, 6, .62) 93%,
			var(--mg-ink) 100%),
		/* Левая треть плотнее с v3.12: надзаголовок «Зарисовки из жизни»
		   лёг на рукав галактики и держал 4.52:1 — впритык. Теперь под
		   ним .90 вплоть до 18%, а галактика в правой половине не тронута. */
		linear-gradient(to right,
			rgba(10, 8, 6, .90) 0%,
			rgba(10, 8, 6, .62) 18%,
			rgba(10, 8, 6, .34) 34%,
			rgba(10, 8, 6, .10) 58%,
			rgba(10, 8, 6, 0) 78%),
		linear-gradient(to left,
			rgba(10, 8, 6, .62) 0%,
			rgba(10, 8, 6, .24) 7%,
			rgba(10, 8, 6, 0) 15%);
}

/*
 * Грани. Текста много и он по всей ширине — сетка из восьми строк. Здесь
 * свет пропускаем только сверху, где заголовок разделён воздухом, и почти
 * не пропускаем внизу, где строки идут одна за другой.
 */
body.page-id-6 .mg-atmos--facets .mg-atmos__veil {
	background-color: transparent;
	background-image:
		/*
		 * Замер: описания граней 03–08 падали до 3.96:1, числа — до 4.59.
		 * Кристалл сидит в верхней правой четверти, а сетка занимает всё
		 * от 30% вниз. Поэтому свет оставлен ОКНОМ 8–32% по высоте справа,
		 * а полоса с текстом гасится плотно. Заголовок при этом стоит
		 * над окном и остаётся на тёмном.
		 */
		linear-gradient(to bottom,
			var(--mg-ink) 0%,
			rgba(10, 8, 6, .46) 6%,
			rgba(10, 8, 6, .12) 14%,
			rgba(10, 8, 6, .10) 30%,
			rgba(10, 8, 6, .68) 40%,
			rgba(10, 8, 6, .88) 90%,
			var(--mg-ink) 100%),
		linear-gradient(to right,
			rgba(10, 8, 6, .58) 0%,
			rgba(10, 8, 6, .36) 26%,
			rgba(10, 8, 6, .26) 48%,
			rgba(10, 8, 6, .14) 72%,
			rgba(10, 8, 6, .06) 100%);
}

/*
 * Дверь. Слева список, справа стеклянная карточка — стекло свет переживает,
 * поэтому тёмное держим слева, а справа оставляем фонарь в полную силу.
 */
body.page-id-6 .mg-atmos--gate-deep .mg-atmos__veil {
	background-color: transparent;
	background-image:
		linear-gradient(to bottom,
			rgba(10, 8, 6, .62) 0%,
			rgba(10, 8, 6, .34) 16%,
			rgba(10, 8, 6, .30) 52%,
			rgba(10, 8, 6, .74) 84%,
			rgba(10, 8, 6, .90) 100%),
		linear-gradient(to right,
			rgba(10, 8, 6, .90) 0%,
			rgba(10, 8, 6, .80) 30%,
			rgba(10, 8, 6, .46) 52%,
			rgba(10, 8, 6, .14) 76%,
			rgba(10, 8, 6, .04) 100%);
}

/*
 * Мобильные вуали. На узких экранах секции стали полноэкранными, а текст
 * в них переехал: признание — в центр, сетка граней — в одну колонку во всю
 * ширину, тарифы — вниз. Проценты от десктопа на такую геометрию не
 * работают: замер дал 3.82:1 на надзаголовке «Манифест» и 4.33:1 на
 * описании третьей грани. Поэтому у телефонов свои значения — темные там,
 * где реально лежит текст, и свет остаётся только в свободных углах.
 */
@media (max-width: 900px) {


	body.page-id-6 .mg-atmos--facets .mg-atmos__veil {
		background-image:
			linear-gradient(to bottom,
				var(--mg-ink) 0%,
				rgba(10, 8, 6, .58) 5%,
				rgba(10, 8, 6, .34) 12%,
				rgba(10, 8, 6, .68) 22%,
				rgba(10, 8, 6, .88) 34%,
				rgba(10, 8, 6, .92) 94%,
				var(--mg-ink) 100%),
			linear-gradient(to right,
				rgba(10, 8, 6, .50) 0%,
				rgba(10, 8, 6, .30) 30%,
				rgba(10, 8, 6, .16) 64%,
				rgba(10, 8, 6, .08) 100%);
	}

	body.page-id-6 .mg-atmos--gate-deep .mg-atmos__veil {
		background-image:
			linear-gradient(to bottom,
				rgba(10, 8, 6, .70) 0%,
				rgba(10, 8, 6, .52) 14%,
				rgba(10, 8, 6, .58) 62%,
				rgba(10, 8, 6, .82) 88%,
				rgba(10, 8, 6, .92) 100%),
			linear-gradient(to right,
				rgba(10, 8, 6, .80) 0%,
				rgba(10, 8, 6, .66) 34%,
				rgba(10, 8, 6, .42) 62%,
				rgba(10, 8, 6, .22) 100%);
	}

	/* Зарисовки на телефоне: карточки занимают весь экран, фон уходит в
	   верхнюю часть, где только заголовок. */
	body.page-id-6 .mg-atmos--stories .mg-atmos__veil {
		background-image:
			linear-gradient(to bottom,
				var(--mg-ink) 0%,
				rgba(10, 8, 6, .72) 6%,
				rgba(10, 8, 6, .30) 18%,
				rgba(10, 8, 6, .48) 34%,
				rgba(10, 8, 6, .74) 94%,
				var(--mg-ink) 100%);
	}
}

/* ---------- 3. Появление из тумана ---------- */

/*
 * К появлению секций добавлено размытие: текст не проявляется, а
 * проявляется из глубины. Фильтр в списке переходов, поэтому анимация
 * идёт вместе с прозрачностью и сдвигом, а не после них.
 */
.mg-js [data-reveal] {
	filter: blur(8px);
	transition:
		opacity .9s cubic-bezier(.22, .61, .36, 1),
		transform .9s cubic-bezier(.22, .61, .36, 1),
		filter .9s cubic-bezier(.22, .61, .36, 1);
	will-change: opacity, transform, filter;
}

.mg-js [data-reveal].is-in {
	filter: blur(0);
	will-change: auto;
}

/*
 * Размытие 8px на крупном заголовке читается как туман, на мелком —
 * как мыло. Чем мельче кегль, тем короче размытие.
 */
.mg-js .mg-section__head h2[data-reveal],
.mg-js .mg-gate__title[data-reveal],
.mg-js .mg-confession__text[data-reveal] { filter: blur(8px); }

.mg-js .mg-eyebrow[data-reveal],
.mg-js .mg-lead[data-reveal],
.mg-js .mg-story__excerpt[data-reveal],
.mg-js .mg-facet__desc[data-reveal] { filter: blur(4px); }

/*
 * Каскад. Внутри одной группы строки и карточки идут с шагом 70–90мс, а
 * служебные элементы — заголовок, подзаголовок, кнопки — отстают от
 * основного текста ещё на шаг: сначала ставят тон, потом его расшифровывают.
 */
.mg-js .mg-section__head .mg-eyebrow[data-reveal] { transition-delay: .06s; }
.mg-js .mg-section__head h2[data-reveal]           { transition-delay: .12s; }
.mg-js .mg-section__head .mg-lead[data-reveal]    { transition-delay: .22s; }
.mg-js .mg-btn[data-reveal],
.mg-js .mg-btn-row[data-reveal]                   { transition-delay: .28s; }

/* На узких экранах blur дороже: экрана меньше, а узлов в кадре больше. */
@media (max-width: 600px) {
	.mg-js [data-reveal] { filter: blur(5px); }
}

/* ---------- 4. Кнопки ---------- */

/*
 * Переход перечислен поимённо, а не через `all`: `all` тянет в анимацию
 * всё, что когда-нибудь поменяется, включая размеры — и кнопка начинает
 * дёргать соседей. Здесь только то, что действительно меняется.
 */
body.page-id-6 .mg-btn {
	transition:
		background .4s ease,
		color .4s ease,
		border-color .4s ease,
		transform .4s cubic-bezier(.22, .61, .36, 1),
		box-shadow .4s ease;
}

/* Основная кнопка: тёплое свечение вокруг, а не заливка. */
body.page-id-6 .mg-btn:not(.mg-btn--ghost):hover,
body.page-id-6 .mg-btn:not(.mg-btn--ghost):focus-visible {
	box-shadow:
		0 0 20px rgba(212, 162, 78, .4),
		0 10px 32px rgba(0, 0, 0, .45);
}

/* Призрачная — тише: только тонкая обводка светится, заливки нет. */
body.page-id-6 .mg-btn--ghost:hover,
body.page-id-6 .mg-btn--ghost:focus-visible {
	box-shadow: 0 0 16px rgba(212, 162, 78, .22);
}

/*
 * Кнопка входа в пространство — самая важная на странице, но она живёт
 * внутри стеклянной карточки. Свечение рисуем на карточке, иначе оно
 * упирается в её же собственный box-shadow.
 */
body.page-id-6 .mg-gate__entry:hover .mg-btn:not(.mg-btn--ghost) {
	box-shadow: 0 0 26px rgba(212, 162, 78, .48);
}

/*
 * На телефоне ряд кнопок прижимается к нижнему краю экрана, если между
 * кнопками и краем экрана ничего нет. Отступ снизу — обязательный, иначе
 * палец закрывает половину кнопки.
 */
@media (max-width: 600px) {
	body.page-id-6 .mg-btn-row { margin-bottom: .85rem; }
	body.page-id-6 .mg-btn { margin-bottom: .35rem; }
}

/* ---------- Уважение к настройкам ---------- */

@media (prefers-reduced-motion: reduce) {
	/* Размытие в появлении — это движение, а не оформление: отключаем. */
	.mg-js [data-reveal] { filter: none !important; transition: none !important; }
	body.page-id-6 .mg-btn { transition: none !important; }
	body.page-id-6 .mg-btn:hover { box-shadow: none !important; }
}


/* ==========================================================================
   22. МАНИФЕСТ В ГЕРОЕ — 2026-10-23
   ==========================================================================
   Блок «Манифест» снят с главной: его текст переехал в подзаголовок
   героя, а сама секция убрана. Страница стала на экран короче, а первое
   что читатель видит — теперь утверждение сайта, а не обещание.

   Текст манифеста набирается тем же серифным курсивом, каким стоял в
   отдельной секции, но в масштабе подзаголовка: на дисплейном размере
   (clamp 1.6–2.6rem) он не помещался в герой вместе с заголовком и
   кнопками, а «просто подзаголовок» — обесценивал бы формулировку.
   ========================================================================== */

body.page-id-6 .mg-hero__sub--manifest {
	/*
	 * Было 38ch и clamp(1.2–1.7rem) — текст выглядел зажатым: узкая
	 * колонка в углу, справа пусто. Раздвинули меру до 46ch и убавили
	 * кегль: теперь он читается как фраза, а не как тесный блок, и
	 * подлезает под ту же линию, что и заголовок.
	 */
	max-width: 46ch;
	font-family: var(--mg-serif);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(1.05rem, 1.75vw, 1.42rem);
	line-height: 1.52;
	letter-spacing: .004em;
	color: var(--mg-cream);
	text-wrap: balance;
	text-shadow:
		0 2px 24px rgba(0, 0, 0, .6),
		0 0 60px rgba(212, 162, 78, .07);
}

@media (max-width: 767px) {
	body.page-id-6 .mg-hero__sub--manifest {
		max-width: 34ch;
		font-size: clamp(1rem, 4.4vw, 1.2rem);
		line-height: 1.48;
	}
}

/* ==========================================================================
   23. ПЕРЕХОДЫ МЕЖДУ ЭКРАНАМИ — 2026-10-23
   ==========================================================================
   Задача: страница идёт экранами, и переход между ними должен читаться как
   монтажный склей, а не как стык двух страниц.

   Три слоя, все на одном числе — прогрессе секции (--mg-p, его ставит
   скрипт на самой секции; слой атмосферы наследует то же значение):

   1. ФОН ВЫПЛЫВАЕТ ИЗ ТЕМНОТЫ. Прозрачность кадра — функция от --mg-p
      (см. правило .mg-atmos__img выше): вошедшая секция проявляется из
      темноты, уходящая притухает. Пол и потолок заданы, чтобы при быстрой
      прокрутке фон не мигал чёрным.

   2. СВЕТОВОЙ ШОВ. Тонкая тёплая линия на верхней границе секции и мягкий
      градиент под ней. Яркость шва зависит от того, где граница стоит
      относительно взгляда: пик — когда стык проходит через середину
      экрана. Получается «свет, который переходит с одного экрана на
      другой».

   3. СОДЕРЖИМОЕ ПРОЯВЛЯЕТСЯ. Текст секции чуть темнее, пока секция не
      дошла до середины взгляда, и выходит на полную яркость.

   Чего здесь нет намеренно: сдвига и масштаба самих секций. Transform на
   предке ломает position:sticky — а в секции двери карточка входа липкая,
   и она потеряла бы прилипание. Поэтому движение есть только у фона и у
   прозрачности: оба свойства compositor-only и не пересчитывают раскладку.

   Для секции двери яркость содержимого НЕ меняется — по той же причине.
   ========================================================================== */

/* ---------- Шов на стыке ---------- */

body.page-id-6 .mg-fold {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;

	background:
		/* тёплая линия света по верхней границе секции */
		linear-gradient(to bottom,
			rgba(212, 162, 78, .17) 0%,
			rgba(212, 162, 78, .055) 9%,
			rgba(212, 162, 78, 0) 26%),
		/* и мягкий отсвет снизу, где секция примыкает к следующей */
		linear-gradient(to top,
			rgba(212, 162, 78, .12) 0%,
			rgba(212, 162, 78, .035) 8%,
			rgba(212, 162, 78, 0) 22%);

	/*
	 * Пик на середине пути секции: min растёт до p=0.45, потом падает.
	 * То есть шов вспыхивает ровно тогда, когда стык проходит через
	 * середину экрана.
	 */
	opacity: calc(min(var(--mg-p, .5) * 2.2, 1) * min((1 - var(--mg-p, .5)) * 2.2, 1));
}

/* Волосяная линия по самой кромке — граница кадра. */
body.page-id-6 .mg-fold::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(to right,
		transparent 0%,
		rgba(212, 162, 78, .30) 18%,
		rgba(242, 232, 213, .34) 50%,
		rgba(212, 162, 78, .30) 82%,
		transparent 100%);
}

/* ---------- Проявление содержимого ---------- */

/*
 * Текст секции выходит на полную яркость, когда секция доходит до
 * середины взгляда. Сдвига нет намеренно: движение фона уже даёт
 * глубину, а текст, ползущий вверх поверх картинки, читается как
 * дешёвый приём.
 *
 * Секция двери исключена: там липкая карточка входа, а у элемента с
 * непрозрачностью меняется containing block — прилипание поедет.
 */
body.page-id-6 .mg-hero__inner,
body.page-id-6 .mg-section--facets > .mg-wrap,
body.page-id-6 .mg-section--stories > .mg-wrap {
	opacity: calc(.58 + .42 * min(1, var(--mg-p, 1) * 2.6));
}

/*
 * На узких экранах эффект ослаблен: там и так тесно, а полупрозрачный
 * текст на телефоне выглядит выцветшим, а не «проявляющимся».
 */
@media (max-width: 767px) {
	body.page-id-6 .mg-hero__inner,
	body.page-id-6 .mg-section--facets > .mg-wrap,
	body.page-id-6 .mg-section--stories > .mg-wrap {
		opacity: calc(.78 + .22 * min(1, var(--mg-p, 1) * 2.6));
	}
}

/* ---------- Уважение к настройкам ---------- */

@media (prefers-reduced-motion: reduce) {
	/*
	 * Без движения прогресс секции не считается, --mg-p остаётся .5 —
	 * формулы дают полную яркость, и страница читается как обычно.
	 * Явно гасим только шов: он и есть «переход».
	 */
	body.page-id-6 .mg-fold { opacity: .35; }
}

/* ---------- 24. Река на весь блок «Теории граней» ---------- */

/*
 * Блок «граней» шириной 1440 и высотой около 1000 на десктопе, а на
 * телефоне 390 на 1900. Один кадр на оба не годится: на телефоне cover
 * срезает его до вертикальной полосы в 9% ширины, и вместо реки остаётся
 * абстрактная каша. Поэтому два кадра — широкий и вертикальный.
 *
 * Десктоп — широкий: в нём алмаз крупный и читается, а рябь идёт через
 * всю верхнюю половину и гаснет вниз, к самой тёмной части блока.
 * Телефон — вертикальный: река идёт сверху вниз по всей высоте, и алмаз
 * остаётся в верхней трети, где нет текста.
 */
@media (max-width: 900px) {
	body.page-id-6 .mg-atmos--facets .mg-atmos__img {
		background-image: url("/wp-content/uploads/2026/10/bg/facets-tall-400.webp?v=3.9.0");
		background-image: image-set(
			url("/wp-content/uploads/2026/10/bg/facets-tall-400.webp?v=3.9.0") type("image/webp") 1x,
			url("/wp-content/uploads/2026/10/bg/facets-tall-800.webp?v=3.9.0") type("image/webp") 2x
		);
		background-position: 50% 4%;
	}
}

/*
 * Вуаль граней ослаблена в средней полосе: раньше она гасила воду с 40%
 * высоты, и река читалась только «шапочкой» под заголовком. Теперь под
 * сеткой строк видно рябь — земля под текстом фактурная, а не пустая.
 * Над заголовком вуаль осталась плотной: там свет алмаза.
 */
body.page-id-6 .mg-atmos--facets .mg-atmos__veil {
	background-image:
		linear-gradient(to bottom,
			var(--mg-ink) 0%,
			rgba(10, 8, 6, .44) 6%,
			rgba(10, 8, 6, .14) 14%,
			rgba(10, 8, 6, .22) 30%,
			rgba(10, 8, 6, .52) 42%,
			rgba(10, 8, 6, .74) 92%,
			var(--mg-ink) 100%),
		linear-gradient(to right,
			rgba(10, 8, 6, .54) 0%,
			rgba(10, 8, 6, .30) 26%,
			rgba(10, 8, 6, .20) 48%,
			rgba(10, 8, 6, .12) 72%,
			rgba(10, 8, 6, .05) 100%);
}

/*
 * Мобильная вуаль граней. Правило выше — десктопное, и без этого
 * дополнения оно перебивало мобильную (слой ниже в файле), а на телефоне
 * золотые номера строк падали до 4.25:1 на светлой воде.
 */
@media (max-width: 900px) {
	body.page-id-6 .mg-atmos--facets .mg-atmos__veil {
		background-image:
			linear-gradient(to bottom,
				var(--mg-ink) 0%,
				rgba(10, 8, 6, .54) 5%,
				rgba(10, 8, 6, .32) 12%,
				rgba(10, 8, 6, .64) 24%,
				rgba(10, 8, 6, .82) 38%,
				rgba(10, 8, 6, .90) 94%,
				var(--mg-ink) 100%),
			linear-gradient(to right,
				rgba(10, 8, 6, .54) 0%,
				rgba(10, 8, 6, .34) 30%,
				rgba(10, 8, 6, .20) 64%,
				rgba(10, 8, 6, .10) 100%);
	}
}

/*
 * Положение свечи на узких экранах. Правило слоя 21 (66% 50%) перебивало
 * мобильное из слоя 20, и на 768px свеча вставала ровно за кнопками
 * «Оформить подписку» / «Начать с бесплатных историй» — золотая кнопка на
 * золотом огне, контраст 4.26:1.
 *
 * Чем МЕНЬШЕ процент, тем правее уезжает источник: при 66% свеча стояла
 * на 66% ширины, то есть как раз под кнопками. При 54% она уходит к
 * правому краю, и под кнопками остаётся тёмная вода.
 */
@media (max-width: 900px) {
	body.page-id-6 .mg-atmos--hero .mg-atmos__img { background-position: 54% 42%; }
}

/* ==========================================================================
   25. ПЕРЕЛИСТЫВАНИЕ МЕЖДУ БЛОКАМИ — 2026-10-23
   ==========================================================================
   Прежние переходы (слой 23) делали одно: секция выплывала из темноты и
   шов вспыхивал на стыке. Теперь к этому добавлено ДВИЖЕНИЕ КАДРА: вошедшая
   секция идёт на зрителя, уходящая отходит вглубь.

   Реализовано без transform на содержимом: transform у предка меняет
   containing block и ломает position:sticky — липкая карточка входа в
   секции двери поехала бы (проверено замером: карточка сползала на 20px при
   прокрутке 300px). Поэтому двигается ТОЛЬКО фон, а текст меняет
   прозрачность. Оба свойства compositor-only.

   Смещение параллакса пишется скриптом переменной --mg-py, а не готовым
   transform: иначе масштаб перелистывания затирал бы параллакс, и наоборот.
   ========================================================================== */

/*
 * Кадр: 1.055 при входе, 1.01 в середине, 0.965 при уходе. Запас кадра в
 * ±12% (inset) перекрывает и масштаб, и ход параллакса — края не открываются.
 */
body.page-id-6 .mg-atmos__img {
	transform:
		translate3d(0, var(--mg-py, 0px), 0)
		scale(calc(1.055 - var(--mg-p, .5) * 0.09));
}

/*
 * Завеса. Тёмная полоса, которая поднимается вверх по мере того, как
 * секция входит во взгляд: сначала кадр выглядит выходящим из темноты,
 * потом завеса уходит и открывает его целиком. Это и есть перелистывание:
 * предыдущий экран уходит, следующий выходит из-под него.
 */
body.page-id-6 .mg-fold::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 44%;
	background: linear-gradient(to bottom,
		rgba(10, 8, 6, .92) 0%,
		rgba(10, 8, 6, .62) 52%,
		rgba(10, 8, 6, 0) 100%);
	transform: translateY(calc(var(--mg-p, .5) * -100%));
	opacity: calc(.9 - var(--mg-p, .5) * 1.5);
	pointer-events: none;
}

/*
 * На телефоне завеса не нужна: там секция длиннее экрана и проходит мимо
 * взгляда целиком, а полоса поверх текста только мешает.
 */
@media (max-width: 1023px) {
	body.page-id-6 .mg-fold::before { display: none; }
}

/* ==========================================================================
   Дверь: приглашение на одном экране
   ==========================================================================
   Было: две колонки — слева список и тарифы, справа карточка «Вход» с
   формой. Стало: один центрированный столбец и одна кнопка внизу.

   Задача кадра — уложить всё приглашение в один экран: секция и так имеет
   min-height: 100dvh, поэтому содержимое должно быть ниже 100vh, а не
   выталкивать низ за край. Отсюда плотный кегль, список в три колонки
   (шесть пунктов → два ряда) и короткие отступы.

   Классы .mg-door__* живут отдельно от старых .mg-gate__*, поэтому прежние
   правила для двухколоночной карточки остаются в файле нетронутыми и
   просто не находят элементов.
   ========================================================================== */

body.page-id-6 .mg-door {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 1040px;
	margin-inline: auto;
	text-align: center;
}

/* Надзаголовок: две линейки, растворяющиеся к краям. */
body.page-id-6 .mg-door__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: clamp(.7rem, 1.6vw, 1rem);
	font-family: var(--mg-sans);
	font-size: .5625rem;
	line-height: 1;
	letter-spacing: .32em;
	text-transform: uppercase;
	color: var(--mg-gold);
}

body.page-id-6 .mg-door__eyebrow::before,
body.page-id-6 .mg-door__eyebrow::after {
	content: "";
	width: clamp(18px, 4vw, 48px);
	height: 1px;
	background: linear-gradient(to right, transparent, rgba(212, 162, 78, .55));
}

body.page-id-6 .mg-door__eyebrow::after {
	transform: scaleX(-1);
}

/* Заголовок: две строки, вторая — курсивом и золотом, как в герое. */
body.page-id-6 .mg-door__title {
	margin: clamp(.8rem, 1.5vw, 1.05rem) 0 0;
	font-family: var(--mg-serif);
	font-weight: 300;
	font-size: clamp(1.8rem, 4vw, 2.8rem);
	line-height: 1.02;
	letter-spacing: -.02em;
	color: var(--mg-cream);
	text-shadow: 0 4px 60px rgba(0, 0, 0, .65);
}

body.page-id-6 .mg-door__title-line {
	display: block;
}

body.page-id-6 .mg-door__title-line:last-child {
	font-style: italic;
	color: var(--mg-gold-soft);
}

/* Манифест: курсивная антиква, две строки. */
body.page-id-6 .mg-door__lead {
	max-width: min(34rem, 100%);
	margin: clamp(.55rem, 1.2vw, .8rem) auto 0;
	font-family: var(--mg-serif);
	font-style: italic;
	font-size: clamp(.98rem, 1.25vw, 1.12rem);
	line-height: 1.4;
	color: #c3b7a4;
	text-wrap: pretty;
}

/* Подпись списка: мелкий капсюль с расходящимися линейками. */
body.page-id-6 .mg-door__caption {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
	max-width: 460px;
	margin: clamp(1rem, 2vw, 1.35rem) auto clamp(.6rem, 1.1vw, .8rem);
	font-family: var(--mg-sans);
	font-size: .5rem;
	letter-spacing: .32em;
	text-transform: uppercase;
	color: var(--mg-muted);
}

body.page-id-6 .mg-door__caption::before,
body.page-id-6 .mg-door__caption::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(to right, transparent, rgba(242, 232, 213, .16));
}

body.page-id-6 .mg-door__caption::after {
	transform: scaleX(-1);
}

/* Список: три колонки, шесть пунктов — два ряда. */
body.page-id-6 .mg-door__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: clamp(1.2rem, 2.6vw, 2.2rem);
	margin: 0;
	padding: 0;
	width: 100%;
	list-style: none;
	text-align: left;
}

body.page-id-6 .mg-door__item {
	padding: clamp(.62rem, 1.1vw, .8rem) 0 clamp(.7rem, 1.2vw, .9rem);
	border-top: 1px solid rgba(242, 232, 213, .09);
}

body.page-id-6 .mg-door__num {
	display: block;
	margin-bottom: .38rem;
	font-family: var(--mg-sans);
	font-size: .5rem;
	letter-spacing: .2em;
	color: var(--mg-gold);
	opacity: .9;
}

body.page-id-6 .mg-door__item-title {
	margin: 0;
	font-family: var(--mg-serif);
	font-weight: 400;
	font-size: clamp(1.02rem, 1.3vw, 1.16rem);
	line-height: 1.2;
	color: var(--mg-cream);
}

body.page-id-6 .mg-door__when {
	display: block;
	margin-top: .3rem;
	font-family: var(--mg-sans);
	font-size: .5rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--mg-gold);
	opacity: .8;
}

body.page-id-6 .mg-door__item-text {
	margin: .38rem 0 0;
	font-size: .8125rem;
	line-height: 1.44;
	color: var(--mg-muted);
	text-wrap: pretty;
}

/* Тарифы: две колонки через вертикальную линейку. */
body.page-id-6 .mg-door__rates {
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: 100%;
	max-width: 780px;
	margin: clamp(1.2rem, 2.2vw, 1.7rem) auto 0;
	padding-top: clamp(.8rem, 1.4vw, 1.05rem);
	border-top: 1px solid var(--mg-line-gold);
}

body.page-id-6 .mg-door__rate {
	padding-inline: clamp(.9rem, 3vw, 2.4rem);
	text-align: left;
}

body.page-id-6 .mg-door__rate:first-child {
	padding-left: 0;
}

body.page-id-6 .mg-door__rate + .mg-door__rate {
	border-left: 1px solid rgba(242, 232, 213, .10);
}

body.page-id-6 .mg-door__rate-line {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .35rem .7rem;
	margin: 0 .0 .35rem;
}

body.page-id-6 .mg-door__rate .mg-gate__sum {
	margin: 0;
	font-size: clamp(1.75rem, 2.6vw, 2.3rem);
}

body.page-id-6 .mg-door__rate-label {
	font-family: var(--mg-sans);
	font-size: .5625rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--mg-gold);
}

body.page-id-6 .mg-door__rate-note {
	margin: 0;
	max-width: 36ch;
	font-size: .8125rem;
	line-height: 1.45;
	color: var(--mg-muted);
}

/* Дверь: одна кнопка, на неё смотрит весь столбец. */
body.page-id-6 .mg-door__cta {
	width: 100%;
	margin: clamp(1.1rem, 2.2vw, 1.5rem) 0 0;
}

body.page-id-6 .mg-door__btn {
	min-width: 340px;
	padding-block: .85rem;
}

/*
 * Фон секции под центрированный столбец: дверь остаётся по краям, а в
 * середине — ровное затемнение, чтобы текст читался на любом кадре.
 */
body.page-id-6 .mg-gate::after {
	background:
		radial-gradient(72% 60% at 50% 46%,
			rgba(10, 8, 6, .46) 0%,
			rgba(10, 8, 6, .62) 58%,
			rgba(10, 8, 6, .74) 100%),
		linear-gradient(to bottom,
			var(--mg-ink) 0%,
			transparent 16%,
			transparent 84%,
			var(--mg-ink) 100%);
}

/*
 * Пять пунктов вместо шести. Если оставить их прижатыми влево, последний
 * ряд обрывается на середине и справа остаётся дыра шириной в карточку.
 * Поэтому неполный ряд всегда встаёт по центру: сетка удваивается по
 * колонкам, пункт занимает две, а начало последнего ряда сдвигается на
 * одну колонку. Ширины карточек не меняются — две колонки плюс зазор
 * ровно равны прежней доле.
 *
 * Классов в селекторе два: он должен побеждать правила двух- и трёхколоночной
 * сетки независимо от того, где в файле они объявлены.
 */
@media (min-width: 1024px) {
	body.page-id-6 .mg-door__list.mg-door__list--five {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	body.page-id-6 .mg-door__list.mg-door__list--five > .mg-door__item {
		grid-column: span 2;
	}

	body.page-id-6 .mg-door__list.mg-door__list--five > .mg-door__item:nth-child(4) {
		grid-column: 2 / span 2;
	}

	body.page-id-6 .mg-door__list.mg-door__list--five > .mg-door__item:nth-child(5) {
		grid-column: 4 / span 2;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	body.page-id-6 .mg-door__list.mg-door__list--five {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	body.page-id-6 .mg-door__list.mg-door__list--five > .mg-door__item {
		grid-column: span 2;
	}

	body.page-id-6 .mg-door__list.mg-door__list--five > .mg-door__item:nth-child(5) {
		grid-column: 2 / span 2;
	}
}

/* Планшет: две колонки — три ряда. */
@media (max-width: 1023px) {
	body.page-id-6 .mg-door__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Телефон: одна колонка, всё в столбик. */
@media (max-width: 767px) {
	body.page-id-6 .mg-door__list {
		grid-template-columns: 1fr;
	}

	/* На телефоне номер уходит в левое поле — строка становится ниже. */
	body.page-id-6 .mg-door__item {
		display: grid;
		grid-template-columns: 1.7rem minmax(0, 1fr);
		column-gap: .45rem;
		align-items: start;
	}

	body.page-id-6 .mg-door__num {
		grid-row: 1 / span 3;
		margin-bottom: 0;
		padding-top: .3rem;
	}

	body.page-id-6 .mg-door__item-title,
	body.page-id-6 .mg-door__when,
	body.page-id-6 .mg-door__item-text {
		grid-column: 2;
	}

	body.page-id-6 .mg-door__rates {
		grid-template-columns: 1fr;
		margin-top: 1.8rem;
	}

	body.page-id-6 .mg-door__rate {
		padding-inline: 0;
	}

	body.page-id-6 .mg-door__rate + .mg-door__rate {
		margin-top: 1.2rem;
		padding-top: 1.2rem;
		border-left: 0;
		border-top: 1px solid rgba(242, 232, 213, .10);
	}

	body.page-id-6 .mg-door__title {
		font-size: clamp(1.8rem, 8.4vw, 2.4rem);
	}

	body.page-id-6 .mg-door__btn {
		width: 100%;
		min-width: 0;
	}

	body.page-id-6 .mg-door__eyebrow {
		letter-spacing: .22em;
	}
}

/*
 * Низкие экраны (ноутбук 720–800): тот же кадр, но на пол-ступени плотнее.
 * Иначе шесть пунктов и тарифы перестают помещаться в 100vh.
 */
@media (min-width: 1024px) and (max-height: 820px) {
	body.page-id-6 .mg-door__title {
		font-size: clamp(1.7rem, 3.4vw, 2.35rem);
	}

	body.page-id-6 .mg-door__lead {
		font-size: .98rem;
		margin-top: .5rem;
	}

	body.page-id-6 .mg-door__caption {
		margin: .9rem auto .55rem;
	}

	body.page-id-6 .mg-door__item {
		padding: .55rem 0 .7rem;
	}

	body.page-id-6 .mg-door__num {
		margin-bottom: .3rem;
	}

	body.page-id-6 .mg-door__item-text {
		margin-top: .3rem;
		font-size: .78125rem;
		line-height: 1.45;
	}

	body.page-id-6 .mg-door__rates {
		margin-top: .95rem;
		padding-top: .7rem;
	}

	body.page-id-6 .mg-door__rate .mg-gate__sum {
		font-size: 1.75rem;
	}

	body.page-id-6 .mg-door__cta {
		margin-top: .95rem;
	}

	body.page-id-6 .mg-door__btn {
		padding-block: .8rem;
	}
}

/* ==========================================================================
   Страница «Оплата подписки» (page-id-121)
   ==========================================================================
   Задача страницы — довести человека от «аккаунт создан» до «доступ открыт»
   без единого вопроса. Поэтому у неё два такта:

   1. Порог. Приоткрытая дверь с ярким светом во всю ширину: слева текст
      (что происходит и что осталось), справа сама дверь. Свет — единственный
      тёплый акцент страницы, он же метафора доступа.

   2. Расчёт. Слева — три шага обычным языком, справа — карточка счёта:
      сумма, куда переводить, почта для сверки. Карточка стоит на странице
      каркасом, а не всплывает: человек должен видеть сумму, пока читает шаги.

   Тексты переписаны: вместо «переведите сумму по реквизитам ниже» — что
   именно произойдёт, в каком порядке, почему подтверждение ручное и что
   делать, если что-то не сойдётся.
   ========================================================================== */

/* ---------- 1. Порог ---------- */

body.page-id-121 .mg-payhero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	min-height: clamp(460px, 58svh, 620px);
	overflow: clip;
	background: var(--mg-ink);
}

body.page-id-121 .mg-payhero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: url("/wp-content/uploads/2026/10/bg/door.jpg?v=1");
	background-size: cover;
	/* Дверь стоит в правой половине кадра: держим её у правого края. */
	background-position: 62% 42%;
	transform: scale(1.03);
	transition: transform 3.2s cubic-bezier(.16, .84, .44, 1);
}

body.page-id-121 .mg-payhero.is-in .mg-payhero__media { transform: scale(1); }

@supports (background-image: image-set(url("a.webp") type("image/webp"))) {
	body.page-id-121 .mg-payhero__media {
		background-image: image-set(
			url("/wp-content/uploads/2026/10/bg/door-1600.webp?v=1") type("image/webp") 1x,
			url("/wp-content/uploads/2026/10/bg/door-2400.webp?v=1") type("image/webp") 2x
		);
	}
}

/*
 * Вуаль: слева почти плотно (там текст), к правому краю отпускает — свет
 * остаётся светом. Сверху и снизу кадр растворяется в --mg-ink, чтобы не
 * было ступеньки между шапкой, порогом и расчётом.
 */
body.page-id-121 .mg-payhero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to right,
			rgba(10, 8, 6, .97) 0%,
			rgba(10, 8, 6, .93) 38%,
			rgba(10, 8, 6, .58) 62%,
			rgba(10, 8, 6, .16) 100%),
		linear-gradient(to bottom,
			rgba(10, 8, 6, .92) 0%,
			rgba(10, 8, 6, .10) 26%,
			rgba(10, 8, 6, .18) 62%,
			var(--mg-ink) 100%);
}

body.page-id-121 .mg-payhero__inner {
	max-width: 1180px;
	width: 100%;
	margin-inline: auto;
	padding: 0 var(--mg-gutter) clamp(2.2rem, 5.5vh, 3.6rem);
}

body.page-id-121 .mg-payhero__title {
	margin: clamp(.9rem, 2vw, 1.3rem) 0 clamp(.9rem, 1.8vw, 1.2rem);
	font-family: var(--mg-serif);
	font-weight: 300;
	font-size: clamp(2.05rem, 4.6vw, 3.4rem);
	line-height: 1.04;
	letter-spacing: -.02em;
	color: var(--mg-cream);
	text-shadow: 0 4px 60px rgba(0, 0, 0, .7);
}

body.page-id-121 .mg-payhero__lead {
	max-width: 38ch;
	text-wrap: pretty;
	margin: 0;
	font-family: var(--mg-serif);
	font-style: italic;
	font-size: clamp(1.05rem, 1.5vw, 1.3rem);
	line-height: 1.45;
	color: #c6baa7;
	text-shadow: 0 2px 24px rgba(0, 0, 0, .6);
}

/* ---------- 2. Расчёт ---------- */

body.page-id-121 .mg-pay {
	padding-block: clamp(3rem, 6vw, 5.2rem);
}

body.page-id-121 .mg-pay__grid {
	display: grid;
	gap: clamp(2rem, 4vw, 3.4rem);
	align-items: start;
}

@media (min-width: 1024px) {
	body.page-id-121 .mg-pay__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
		gap: clamp(2.5rem, 4vw, 4rem);
	}
}

body.page-id-121 .mg-pay__h2 {
	margin: .7rem 0 clamp(1.2rem, 2.4vw, 1.8rem);
	font-family: var(--mg-serif);
	font-weight: 300;
	font-size: clamp(1.7rem, 2.6vw, 2.2rem);
	line-height: 1.15;
	color: var(--mg-cream);
}

/* Шаги: номер в левом поле, заголовок антиквой, пояснение рубленым. */
body.page-id-121 .mg-pay__steps {
	counter-reset: pay;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.page-id-121 .mg-pay__step {
	counter-increment: pay;
	position: relative;
	padding: clamp(.95rem, 1.8vw, 1.25rem) 0 clamp(1rem, 1.8vw, 1.3rem) 2.9rem;
	border-top: 1px solid rgba(242, 232, 213, .09);
}

body.page-id-121 .mg-pay__step:last-child {
	border-bottom: 1px solid rgba(242, 232, 213, .09);
}

body.page-id-121 .mg-pay__step::before {
	content: counter(pay, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: clamp(1.15rem, 2vw, 1.45rem);
	font-family: var(--mg-sans);
	font-size: .625rem;
	letter-spacing: .18em;
	color: var(--mg-gold);
}

body.page-id-121 .mg-pay__step-title {
	margin: 0 0 .4rem;
	font-family: var(--mg-serif);
	font-weight: 400;
	font-size: clamp(1.15rem, 1.5vw, 1.35rem);
	line-height: 1.25;
	color: var(--mg-cream);
}

body.page-id-121 .mg-pay__step-text {
	margin: 0;
	max-width: 54ch;
	font-size: .9375rem;
	line-height: 1.65;
	color: var(--mg-muted);
	text-wrap: pretty;
}

body.page-id-121 .mg-pay__note {
	margin: clamp(1.3rem, 2.5vw, 1.8rem) 0 0;
	max-width: 54ch;
	font-family: var(--mg-serif);
	font-style: italic;
	font-size: 1rem;
	line-height: 1.55;
	color: #b6ab99;
}

/* ---------- 3. Карточка счёта ---------- */

body.page-id-121 .mg-pay__card {
	position: relative;
	padding: clamp(1.4rem, 2.4vw, 1.9rem);
	background: linear-gradient(165deg, rgba(24, 20, 15, .94), rgba(12, 10, 8, .90));
	border: 1px solid rgba(212, 162, 78, .28);
	box-shadow:
		inset 0 1px 0 rgba(242, 232, 213, .06),
		0 24px 60px rgba(0, 0, 0, .45);
}

/* Верхняя грань карточки ловит свет — как край двери. */
body.page-id-121 .mg-pay__card::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	background: linear-gradient(to right, transparent, rgba(232, 192, 137, .55), transparent);
}

body.page-id-121 .mg-pay__card .mg-pay__sum {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .3rem;
	max-width: none;
	margin: 0 0 clamp(1.3rem, 2.4vw, 1.7rem);
	padding: 0 0 clamp(1.2rem, 2.2vw, 1.5rem);
	border: 0;
	border-bottom: 1px solid rgba(242, 232, 213, .10);
	background: none;
	text-align: left;
}

body.page-id-121 .mg-pay__sum-label {
	font-family: var(--mg-sans);
	font-size: .5625rem;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--mg-gold);
}

body.page-id-121 .mg-pay__sum-value {
	font-family: var(--mg-serif);
	font-size: clamp(2.5rem, 3.6vw, 3.2rem);
	line-height: 1;
	color: var(--mg-cream);
}

body.page-id-121 .mg-pay__sum-plan {
	font-family: var(--mg-serif);
	font-style: italic;
	font-size: 1.05rem;
	color: #c6baa7;
}

body.page-id-121 .mg-pay__sum-note {
	margin: 0 0 1rem;
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--mg-muted);
}

body.page-id-121 .mg-pay__sum-btn {
	margin-top: .2rem;
}

body.page-id-121 .mg-pay__requisites {
	text-align: left;
	margin: 0 0 clamp(1.1rem, 2vw, 1.4rem);
	padding: clamp(.9rem, 1.6vw, 1.15rem) clamp(1rem, 1.8vw, 1.25rem);
	border: 1px dashed rgba(212, 162, 78, .40);
	background: rgba(212, 162, 78, .05);
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--mg-gold-soft);
}

body.page-id-121 .mg-pay__requisites p {
	margin: 0;
	overflow-wrap: anywhere;
}

body.page-id-121 .mg-pay__label {
	display: block;
	margin-bottom: .5rem;
	font-family: var(--mg-sans);
	font-size: .5625rem;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--mg-gold);
}

body.page-id-121 .mg-pay__login {
	margin: 0 0 .9rem;
	text-align: left;
	font-size: .875rem;
	line-height: 1.6;
	color: var(--mg-muted);
}

body.page-id-121 .mg-pay__login strong {
	color: var(--mg-cream);
	font-weight: 500;
	overflow-wrap: anywhere;
}

body.page-id-121 .mg-pay__help {
	margin: 0;
	font-size: .8125rem;
	line-height: 1.6;
	color: var(--mg-muted);
}

/* ---------- 4. Телефон ---------- */

@media (max-width: 900px) {
	/* На 390 px cover режет 16:9 до полосы — берём вертикальный срез. */
	body.page-id-121 .mg-payhero__media {
		background-position: 62% 50%;
	}

	@supports (background-image: image-set(url("a.webp") type("image/webp"))) {
		body.page-id-121 .mg-payhero__media {
			background-image: image-set(
				url("/wp-content/uploads/2026/10/bg/door-tall-480.webp?v=1") type("image/webp") 1x,
				url("/wp-content/uploads/2026/10/bg/door-tall-960.webp?v=1") type("image/webp") 2x
			);
		}
	}
}

@media (max-width: 767px) {
	body.page-id-121 .mg-payhero {
		min-height: clamp(420px, 62svh, 560px);
	}

	body.page-id-121 .mg-payhero::after {
		background:
			linear-gradient(to bottom,
				rgba(10, 8, 6, .88) 0%,
				rgba(10, 8, 6, .44) 32%,
				rgba(10, 8, 6, .62) 64%,
				var(--mg-ink) 100%);
	}

	body.page-id-121 .mg-payhero__title {
		font-size: clamp(1.95rem, 8.6vw, 2.5rem);
	}

	body.page-id-121 .mg-pay__step {
		padding-left: 2.4rem;
	}
}


/* Последняя строка карточки: что произойдёт после подтверждения. */
body.page-id-121 .mg-pay__after {
	margin: 0;
	padding-top: clamp(.9rem, 1.6vw, 1.1rem);
	border-top: 1px solid rgba(242, 232, 213, .10);
	font-family: var(--mg-serif);
	font-style: italic;
	font-size: .9375rem;
	line-height: 1.55;
	color: #b6ab99;
}

/* ---------- Появление на странице истории ---------- */

@keyframes mg-rise-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

/* Шапка встаёт целиком, первые восемь блоков прозы — друг за другом.
   Дальше не считаем: у длинного текста всё, что ниже, уже за экраном, и
   анимировать его значит рисовать кадры впустую. */
.single-post .mg-article-head {
	animation: mg-rise-in .8s cubic-bezier(.22, .61, .36, 1) both;
}

.single-post .entry-content > :nth-child(-n+8) {
	animation: mg-rise-in .6s cubic-bezier(.22, .61, .36, 1) both;
}

.single-post .entry-content > :nth-child(1) { animation-delay: .04s; }
.single-post .entry-content > :nth-child(2) { animation-delay: .08s; }
.single-post .entry-content > :nth-child(3) { animation-delay: .12s; }
.single-post .entry-content > :nth-child(4) { animation-delay: .16s; }
.single-post .entry-content > :nth-child(5) { animation-delay: .20s; }
.single-post .entry-content > :nth-child(6) { animation-delay: .24s; }
.single-post .entry-content > :nth-child(7) { animation-delay: .28s; }
.single-post .entry-content > :nth-child(8) { animation-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
	.single-post .mg-article-head,
	.single-post .entry-content > * {
		animation: none;
	}
}

/* ---------- Подложка страницы истории ---------- */

/*
 * Фон карточки продолжается за текстом. Слой слабый (6 %): он даёт цвет и
 * глубину, но не спорит с набором — контраст прозы остаётся прежним.
 */
.single-post .entry-content-wrap {
	position: relative;
	isolation: isolate;
}


/* ==========================================================================
   Слой изображений на странице истории
   ==========================================================================
   Было: обложка в шапке почти не читалась (вуаль 72 % сверху), под прозой
   лежала плоская 12 %-заливка. Стало: кадр виден как кадр, а под текстом —
   размытое цветовое поле: оно даёт глубину и не спорит с набором.
   ========================================================================== */

/* ---------- 1. Шапка ---------- */

/* Картинку переносим в псевдослой: только так её можно поднять по яркости,
   не задев текст. */
.mg-article-head--cover { background-image: none; }

.mg-article-head--cover::before {
	content: "";
	position: absolute;
	inset: -3%;
	z-index: 0;
	background-image: var(--mg-cover, none);
	background-size: cover;
	background-position: center 32%;
	filter: saturate(1.06) contrast(1.04) brightness(1.08);
	transform: scale(1.03);
	animation: mg-hero-drift 24s ease-in-out infinite alternate;
}

/* Очень медленный дрейф: кадр «дышит», но движение не читается как эффект. */
@keyframes mg-hero-drift {
	from { transform: scale(1.03) translate3d(0, 0, 0); }
	to   { transform: scale(1.08) translate3d(0, -1.4%, 0); }
}

/* Вуаль: сверху почти прозрачная, к низу плотная. Раньше тёмный верх
   (72 %) съедал весь кадр — теперь он виден, а заголовок держится на
   чернильном основании. */
.mg-article-head__veil {
	background:
		radial-gradient(125% 85% at 50% 26%, rgba(10, 8, 6, 0) 36%, rgba(10, 8, 6, .55) 100%),
		linear-gradient(
			to bottom,
			rgba(10, 8, 6, .40) 0%,
			rgba(10, 8, 6, .05) 24%,
			rgba(10, 8, 6, .34) 60%,
			rgba(10, 8, 6, .90) 88%,
			var(--mg-ink) 100%
		);
}

/* ---------- 2. Полотно истории: без боковых полос ---------- */

/*
 * Боковые фото-полосы убраны, и это не вкусовое решение, а арифметика.
 * Кадр 2000×1116 при `cover` в полосе 296×1562 (ширина экрана 1440) занимает
 * высоту 1562 → ширина кадра становится 2796 px, а видно из него 296 px,
 * то есть 10.6 %. На 1920 px — 19 %. В полосу попадает вертикальная стружка
 * фотографии: не кадр, а размытое пятно, которое ничего не рассказывает.
 * Чтобы полоса работала, картинку надо рисовать под пропорцию 1:5 — это уже
 * не фотография, а орнамент. Пока его нет, честнее оставить полотно чистым.
 *
 * Стыковка: карточка начинается сразу под шапкой. Отступ сверху когда-то
 * добавляли «для воздуха», но на тёмной обложке полоса фона читалась не как
 * пауза, а как разрыв между кадром и текстом — пустая полоса с двумя
 * границами. Воздух даёт внутренний отступ самой карточки, а стык
 * обозначает золотая линия ниже.
 */

.single-post .entry-content-wrap {
	margin-top: 0;
	margin-bottom: clamp(1.2rem, 3vw, 3rem);
}

/* Тонкая золотая линия сверху: полотно начинается, а не просто продолжается. */
.single-post .entry-content-wrap::after {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 56px;
	height: 1px;
	transform: translateX(-50%);
	background: linear-gradient(90deg, transparent, var(--mg-gold), transparent);
	opacity: .55;
	pointer-events: none;
}

@media (max-width: 760px) {
	.single-post .entry-content-wrap { margin-top: 0; margin-bottom: 0; }
}

/* ---------- 3. Приглашение ---------- */

.single-post .pms-invite-block {
	position: relative;
	isolation: isolate;
}

/* Фон приглашения снят: изображение живёт только в шапке истории.
   Здесь остаётся ровная поверхность — финал не спорит с заголовком. */
.single-post .pms-invite-block::before { content: none; }

@media (prefers-reduced-motion: reduce) {
	.mg-article-head--cover::before { animation: none; }
}


/* Пустая полоса уведомлений PWA (super-progressive-web-apps) висит в левом
   нижнем углу с одним крестиком: сообщения в ней нет. Скрываем, пока пусто;
   когда плагин что-то скажет — покажется сама. */
.snackbar:has(> #snackbar-msg:empty) { display: none !important; }

/* ==========================================================================
   Тон истории: набор следует за гранью
   ==========================================================================
   Грань — это обещание интонации. «Тень» говорит плотнее и глуше, «Целитель» —
   воздушнее и теплее, «Воин» — резче и короче. Меняются кегль, интерлиньяж,
   мера строки, размер буквицы и температура текста; сами слова не трогаются.
   ========================================================================== */

.single-post .entry-content {
	font-size: var(--mg-tone-size, 1.125rem);
	line-height: var(--mg-tone-lh, 1.82);
	max-width: var(--mg-tone-measure, var(--mg-measure));
	color: var(--mg-tone-color, var(--mg-text));
}

.single-post .entry-content > p.mg-p--first::first-letter {
	font-size: var(--mg-tone-drop, 3.9rem);
}

/* Тень: плотнее, глуше, уже — будто говорят вполоборота. */
body.mg-tone-ten {
	--mg-tone-size: 1.0625rem;
	--mg-tone-lh: 1.74;
	--mg-tone-measure: 60ch;
	--mg-tone-drop: 3.5rem;
	--mg-tone-color: #c6bba7;
}

/* Маска: уже и ровнее — замкнутое пространство, где следят за собой. */
body.mg-tone-maska {
	--mg-tone-size: 1.0625rem;
	--mg-tone-lh: 1.9;
	--mg-tone-measure: 57ch;
	--mg-tone-drop: 3.2rem;
	--mg-tone-color: #cbc1ae;
}

/* Раненый: больше воздуха — между строк и вокруг строки. */
body.mg-tone-ranenyy {
	--mg-tone-size: 1.125rem;
	--mg-tone-lh: 1.94;
	--mg-tone-measure: 63ch;
	--mg-tone-drop: 4rem;
}

/* Целитель: тепло и простор, чуть крупнее обычного. */
body.mg-tone-tselitel {
	--mg-tone-size: 1.15rem;
	--mg-tone-lh: 1.96;
	--mg-tone-measure: 66ch;
	--mg-tone-drop: 4.4rem;
	--mg-tone-color: #d6cbb7;
}

/* Воин: коротко и жёстко — строки стоят теснее, речь идёт быстрее. */
body.mg-tone-voin {
	--mg-tone-size: 1.1rem;
	--mg-tone-lh: 1.62;
	--mg-tone-measure: 61ch;
	--mg-tone-drop: 3.2rem;
	--mg-tone-color: #d2c8b4;
}

/* Ребёнок: крупнее и медленнее — читают вслух. */
body.mg-tone-rebenok {
	--mg-tone-size: 1.1875rem;
	--mg-tone-lh: 1.9;
	--mg-tone-measure: 59ch;
	--mg-tone-drop: 4.8rem;
	--mg-tone-color: #d8cdb9;
}

/* Творец: широкая мера и крупная буквица — место для жеста. */
body.mg-tone-tvorets {
	--mg-tone-size: 1.125rem;
	--mg-tone-lh: 1.86;
	--mg-tone-measure: 70ch;
	--mg-tone-drop: 5.2rem;
}

/* Свидетель: ровная, документальная строка — без украшений. */
body.mg-tone-svidetel {
	--mg-tone-size: 1.1rem;
	--mg-tone-lh: 1.72;
	--mg-tone-measure: 64ch;
	--mg-tone-drop: 3.4rem;
	--mg-tone-color: #cabfae;
}

/* ==========================================================================
   Поверхность для чтения
   ==========================================================================
   Было: текст на почти чёрном #0a0806 при контрасте 11.6:1 — по замерам это
   верхняя граница комфорта, а сам фон давал ощущение «слишком темно» и
   ореолы вокруг букв. По рекомендациям для длинного чтения в тёмной теме
   берут приподнятый тёмно-серый, а не чистый чёрный, и держат контраст в
   диапазоне примерно 7–12:1.
   ========================================================================== */

.single-post .entry-content-wrap {
	/* Kadence принудительно гасит фон этого блока — перебиваем осознанно. */
	background: linear-gradient(180deg, #241d16 0%, #1f1913 100%) !important;
	border: 1px solid rgba(242, 232, 213, .07);
	border-radius: 2px;
	box-shadow: 0 30px 90px rgba(0, 0, 0, .35);
	/* Сверху больше, чем по бокам: первая строка не должна упираться в край. */
	padding: clamp(2.4rem, 4vw, 3.6rem) clamp(1.2rem, 3vw, 2.6rem) clamp(1.8rem, 3vw, 2.4rem);
}

/* Базовый текст — тёплый и светлее прежнего: 10.4:1 на новой поверхности. */
.single-post .entry-content { --mg-tone-color: #d5cab6; }

/* Тона подняты вместе с фоном, иначе приглушённые грани уходили в серость. */
body.mg-tone-ten     { --mg-tone-color: #cdc2ae; }
body.mg-tone-maska   { --mg-tone-color: #d2c7b3; }
body.mg-tone-tselitel{ --mg-tone-color: #e2d7c3; }
body.mg-tone-voin    { --mg-tone-color: #ddd2be; }
body.mg-tone-rebenok { --mg-tone-color: #e5dac6; }
body.mg-tone-svidetel{ --mg-tone-color: #d4c9b5; }

/* Буквица: работает и там, где первый абзац обёрнут плагином. */
.single-post .entry-content p.mg-p--first::first-letter {
	float: left;
	font-family: var(--mg-serif);
	font-size: var(--mg-tone-drop, 3.9rem);
	line-height: .82;
	padding: .08em .12em 0 0;
	color: var(--mg-gold);
}

/* Боковые панели — заметнее: фон вокруг стал светлее, кадр не должен отставать. */
@media (min-width: 1300px) {
	.single-post .entry-content-wrap::before,
	.single-post .entry-content-wrap::after {
		opacity: .58;
		filter: saturate(.95) brightness(1.08);
	}
}

/* ---------- Шапка правовой страницы с кадром ---------- */

/* В контенте у этих страниц стоит `min-height:auto` — для кадра это мало,
   поэтому высоту задаём принудительно. */
body.page .mg-article-head--cover {
	min-height: clamp(230px, 26vh, 330px) !important;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

/* Отдельного слоя вуали в разметке страницы нет — рисуем его сами, чтобы
   заголовок читался поверх любого кадра. */
body.page .mg-article-head--cover::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to bottom,
		rgba(10, 8, 6, .66) 0%,
		rgba(10, 8, 6, .30) 30%,
		rgba(10, 8, 6, .80) 72%,
		var(--mg-ink) 100%
	);
	pointer-events: none;
}


/* Тень под текстом шапки: кадр остаётся светлым, а буквы не теряются на
   бумаге и на светлых предметах. Для крупного заголовка это дешевле, чем
   ещё сильнее гасить фотографию. */
body.page .mg-article-head--cover .mg-article-head__title,
body.page .mg-article-head--cover .mg-article-head__kicker,
body.page .mg-article-head--cover .mg-article-head__inner > p {
	text-shadow: 0 2px 26px rgba(10, 8, 6, .72), 0 1px 3px rgba(10, 8, 6, .55);
}

/* ---------- Правовые документы: как в карточке истории ---------- */

/*
 * Раньше документ лежал прямо на чернильном фоне страницы: текст мелкий
 * (17 px), мера 68ch, никакой поверхности. Теперь у него та же «страница»,
 * что у истории, — тот же градиент, рамка, тень и золотая линия сверху.
 * Панель включается через :has(.mg-legal), поэтому другие страницы сайта
 * не меняются.
 */
/*
 * Панель живёт на самом документе: в контейнере лежит ещё и шапка во всю
 * ширину, и отступ контейнера давал пустую полосу над кадром.
 */
body.page .entry-content-wrap:has(.mg-legal) {
	background: none !important;
	border: 0;
	box-shadow: none;
	padding: 0;
	margin: 0;
}

.mg-legal::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 56px;
	height: 1px;
	transform: translateX(-50%);
	background: linear-gradient(90deg, transparent, var(--mg-gold), transparent);
	opacity: .55;
	pointer-events: none;
}

@media (max-width: 760px) {
	body.page .entry-content-wrap:has(.mg-legal) {
		margin-top: 0;
		margin-bottom: 0;
	}
}

/* ---------- Главное меню из восьми пунктов ---------- */

/*
 * 25.10 в меню добавились четыре раздела — строка перестала помещаться
 * (доступно 919 px, нужно 1058 px), и шапка ломалась на две строки.
 * Ужимаем трекинг, отступы и на волосок кегль; сами названия не сокращаем.
 *
 * Селектор повторяет существующий (см. блок «Меню» выше): нужна та же
 * специфичность, но позже в файле — иначе тема перебьёт.
 */
@media (min-width: 1025px) {
	.main-navigation .primary-menu-container > ul > li > a {
		padding-inline: 4px;
		letter-spacing: .02em;
		font-size: .78rem;
	}
}

/* Узкий десктоп: ещё плотнее, иначе строка рвётся на 1200–1280. */
@media (min-width: 1025px) and (max-width: 1279px) {
	.main-navigation .primary-menu-container > ul > li > a {
		padding-inline: 3px;
		letter-spacing: 0;
		font-size: .75rem;
	}
}

/*
 * Отдельного «просторного» режима нет: шапка ограничена 919 px даже на
 * 1920 — добавка воздуха возвращала перенос на две строки.
 */

/*
 * Пункт с именем не сжимается.
 *
 * В шапке семь пунктов, и flex сжимал последний до 24 px: имя («Me») ломалось
 * на две строки, а кружок «онлайн» обрезался (замечание автора 25.10).
 * Поэтому пункту с именем запрещаем сжатие, а у остальных чуть ужимаем кегль
 * и боковые отступы — этого хватает, чтобы всё влезло в одну строку.
 */
@media (min-width: 1025px) {
	.main-navigation .primary-menu-container > ul > li.mg-menu-user {
		flex: 0 0 auto;
	}

	.main-navigation .primary-menu-container > ul > li > a {
		white-space: nowrap;
		padding-inline: 3px;
		font-size: .72rem;
	}
}

/* ---------- Метки самой истории ----------
   В карточках теги идут по левому краю, под текстом. А здесь это метки
   записи — строка под текстом истории; её ставим по центру, как эпилог. */

.single-post .entry-tags .tags-links {
	justify-content: center;
	text-align: center;
}