/* ==========================================================================
   «Зарисовки» — страница открытых историй (moigrani-street.php)
   ==========================================================================
   Только эта страница: правила подключены из mu-плагина и не попадают
   в остальной сайт. Палитра и шрифты — из moigrani.css (--mg-*).
   ========================================================================== */

/* Служебный класс: текст только для скринридеров. Раньше жил в
   moigrani-views.css, который больше не подключается. */
.mg-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.mg-zar { padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }

/* ---------- Компактная шапка ---------- */

.mg-zhead {
	position: relative;
	overflow: hidden;
	padding: clamp(1.6rem, 3.4vw, 2.6rem) 0 clamp(1.3rem, 2.4vw, 1.9rem);
	border-bottom: 1px solid var(--mg-line);
	background:
		radial-gradient(70% 120% at 50% 0%, rgba(212, 162, 78, .07), transparent 70%),
		var(--mg-ink);
}

/* Фоновый кадр: набережная в сумерках.
   Кадр держится справа, а слева поверх него лежит чернильная растяжка —
   так заголовок читается без подложки, а сам вид не превращается в шум. */
.mg-zhead::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--mgz-cover, none);
	background-size: cover;
	background-position: 64% 38%;
	opacity: .62;
	filter: saturate(.8) brightness(.95);
	pointer-events: none;
}

.mg-zhead::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to right, var(--mg-ink) 0%, rgba(10, 8, 6, .88) 32%, rgba(10, 8, 6, .34) 64%, rgba(10, 8, 6, .08) 100%),
		linear-gradient(to top, var(--mg-ink) 0%, rgba(10, 8, 6, .55) 26%, transparent 62%);
	pointer-events: none;
}

/* Текст выше обоих слоёв кадра: ::after иначе красит и его. */
.mg-zhead__inner { position: relative; z-index: 1; }

.mg-zhead__kicker {
	display: block;
	margin-bottom: .75rem;
	font-family: var(--mg-sans);
	font-size: .68rem;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--mg-gold);
}

.mg-zhead__title {
	margin: 0 0 .85rem;
	font-family: var(--mg-serif);
	font-weight: 300;
	font-size: clamp(1.6rem, 3.3vw, 2.55rem);
	line-height: 1.12;
	color: var(--mg-cream);
	text-wrap: balance;
}

.mg-zhead__lead {
	max-width: 56ch;
	margin: 0;
	color: var(--mg-muted);
	font-size: .93rem;
	line-height: 1.65;
}

/* ---------- Панель фильтров ---------- */

.mg-zfilters {
	display: none;
	padding: .8rem 0 .55rem;
	border-bottom: 1px solid var(--mg-line);
	margin-bottom: 1.1rem;
	/* после клика по тегу лента прокручивается к панели — оставляем место
	   под липкой шапкой сайта */
	scroll-margin-top: 84px;
}

html.mg-zf-js .mg-zfilters { display: block; }

.mg-zfilters__bar {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex-wrap: wrap;
}

/* ---------- Формат истории ---------- */

.mg-zformats {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin-top: .6rem;
}

.mg-zformat {
	display: inline-flex;
	align-items: center;
	padding: .34rem .62rem;
	background: transparent;
	border: 1px solid var(--mg-line);
	border-radius: 2px;
	color: var(--mg-text);
	font-family: var(--mg-sans);
	font-size: .7rem;
	letter-spacing: .06em;
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.mg-zformat:hover { border-color: var(--mg-line-gold); color: var(--mg-cream); }

.mg-zformat[aria-pressed="true"] {
	background: rgba(212, 162, 78, .16);
	border-color: var(--mg-gold);
	color: var(--mg-cream);
}

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

/*
 * Формат и «Эксклюзив» — один ряд, но разные вопросы. Ряд общий, чтобы
 * четвёртая кнопка не уезжала на отдельную строку и не выглядела как
 * ещё один формат истории.
 */
.mg-zfline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem .9rem;
	margin-top: .6rem;
}

.mg-zfline .mg-zformats { margin-top: 0; }

.mg-zexcl {
	display: flex;
	align-items: center;
	padding-left: .75rem;
	border-left: 1px solid var(--mg-line);
}

/* Кнопка подписчика: грань-ромб золотая всегда, фон — только когда нажата. */
.mg-zformat--excl { gap: .34rem; }

.mg-zformat__diamond {
	width: .62rem;
	height: .62rem;
	flex: 0 0 auto;
	color: var(--mg-gold);
	transition: color .2s ease;
}

.mg-zformat--excl[aria-pressed="true"] .mg-zformat__diamond { color: var(--mg-cream); }

.mg-zfilters__item { position: relative; }

/* ---------- «Мои истории»: две галки ---------- */

/*
 * «Мои истории» — две настоящие галки в ряду фильтров, вместо выпадашки
 * «Мои ▾». Форма обычная GET: без скрипта уходит отправкой и сохраняет
 * остальные фильтры скрытыми полями, со скриптом — подгружает порцию через
 * REST и правит адрес. Разметка — в templates/street.php.
 */
.mg-zmine {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
}

.mg-zmine__set {
	display: flex;
	align-items: center;
	gap: .3rem 1.05rem;
	flex-wrap: wrap;
}

.mg-zmine__check {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	min-height: 2rem;
	font-family: var(--mg-sans);
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mg-text);
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}

/* Сам чекбокс остаётся в разметке, в форме и в порядке табуляции — его
   только не видно: квадрат рисует соседний .mg-zmine__box (у input в
   браузерах нет надёжных ::after). */
.mg-zmine__check input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.mg-zmine__box {
	display: inline-grid;
	place-items: center;
	width: 15px;
	height: 15px;
	flex: none;
	border: 1px solid var(--mg-line);
	border-radius: 2px;
	background: rgba(10, 8, 6, .35);
	transition: border-color .2s ease, background-color .2s ease;
}

.mg-zmine__box::after {
	content: "";
	width: 4px;
	height: 7px;
	margin-top: -2px;
	border: solid var(--mg-gold);
	border-width: 0 1.5px 1.5px 0;
	transform: rotate(45deg) scale(0);
	transition: transform .15s ease;
}

.mg-zmine__check:hover .mg-zmine__box { border-color: var(--mg-line-gold); }

.mg-zmine__check input:checked + .mg-zmine__box {
	border-color: var(--mg-gold);
	background: rgba(212, 162, 78, .14);
}

.mg-zmine__check input:checked + .mg-zmine__box::after { transform: rotate(45deg) scale(1); }

.mg-zmine__check input:checked ~ .mg-zmine__text { color: var(--mg-cream); }

/* Клавиатура: рамка на квадрате, потому что input визуально скрыт. */
.mg-zmine__check input:focus-visible + .mg-zmine__box {
	outline: 2px solid var(--mg-gold);
	outline-offset: 2px;
}

/* Кнопка отправки нужна только без скрипта: со скриптом галка применяется
   сразу. Если скрипт не поднялся, кнопка остаётся видимой. */
.mg-zmine__apply {
	padding: 0;
	border: 0;
	background: none;
	color: var(--mg-muted);
	font-family: var(--mg-sans);
	font-size: .7rem;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.mg-zmine__apply:hover { color: var(--mg-gold-soft); }

/* Тема красит любую `button` на hover/focus — текстовой кнопке формы это
   ни к чему: она остаётся подчёркнутой строкой. */
.mg-zmine__apply,
.mg-zmine__apply:hover,
.mg-zmine__apply:focus,
.mg-zmine__apply:active {
	background: none;
	box-shadow: none;
}

/* Пояснение к обеим галкам: пересечение, а не объединение. */
.mg-zmine__hint {
	flex-basis: 100%;
	margin: .1rem 0 0;
	color: var(--mg-muted);
	font-family: var(--mg-sans);
	font-size: .68rem;
	line-height: 1.3;
	letter-spacing: .02em;
	text-transform: none;
}

.mg-zmine__hint[hidden] { display: none; }

html.mg-zf-js .mg-zmine__apply { display: none; }

@media (max-width: 760px) {
	/* Палец: площадка под галку, а не 32-пиксельная строка. */
	.mg-zmine__check { min-height: 44px; }
}

.mg-zbtn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .46rem .72rem;
	background: transparent;
	border: 1px solid var(--mg-line);
	border-radius: 2px;
	color: var(--mg-text);
	font-family: var(--mg-sans);
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.mg-zbtn:hover,
.mg-zbtn[aria-expanded="true"] {
	border-color: var(--mg-line-gold);
	background: rgba(212, 162, 78, .06);
	color: var(--mg-cream);
}

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

.mg-zbtn[aria-expanded="true"] .mg-zbtn__label { color: var(--mg-text); }

.mg-zbtn__value {
	color: var(--mg-gold-soft);
	text-transform: none;
	letter-spacing: .03em;
	font-size: .78rem;
}

.mg-zbtn__chev {
	width: 10px;
	height: 7px;
	opacity: .75;
	transition: transform .2s ease;
}

.mg-zbtn[aria-expanded="true"] .mg-zbtn__chev { transform: rotate(180deg); }

.mg-zfilters__found {
	margin: 0 0 0 auto;
	font-family: var(--mg-sans);
	font-size: .7rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mg-muted);
}

.mg-zfilters__reset {
	padding: 0;
	background: none;
	border: 0;
	color: var(--mg-muted);
	font-family: var(--mg-sans);
	font-size: .72rem;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.mg-zfilters__reset:hover { color: var(--mg-gold-soft); }
.mg-zfilters__reset[hidden],
.mg-zfilters__active[hidden] { display: none; }

.mg-zfilters__active {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin-top: .55rem;
}

.mg-zactive__chip {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .22rem .48rem;
	background: rgba(212, 162, 78, .10);
	border: 1px solid var(--mg-line-gold);
	border-radius: 2px;
	color: var(--mg-cream);
	font-family: var(--mg-sans);
	font-size: .7rem;
	letter-spacing: .03em;
	cursor: pointer;
}

.mg-zactive__chip:hover { border-color: var(--mg-gold); }

.mg-zactive__chip svg {
	width: 7px;
	height: 7px;
	opacity: .65;
}

/* ---------- Выпадающие панели ---------- */

.mg-zpop {
	position: absolute;
	top: calc(100% + .45rem);
	left: 0;
	z-index: 60;
	width: 296px;
	padding: .85rem;
	background: var(--mg-surface);
	border: 1px solid var(--mg-line-gold);
	border-radius: 2px;
	box-shadow: 0 26px 60px rgba(0, 0, 0, .68);
}

.mg-zpop[hidden] { display: none; }

.mg-zpop--tags { width: 336px; }

/* ---------- Календарь ---------- */

.mg-zcal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .4rem;
	margin-bottom: .55rem;
}

.mg-zcal__month {
	font-family: var(--mg-serif);
	font-size: 1.02rem;
	color: var(--mg-cream);
}

.mg-zcal__nav {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--mg-line);
	border-radius: 2px;
	color: var(--mg-text);
	cursor: pointer;
	transition: border-color .2s ease, color .2s ease;
}

.mg-zcal__nav:hover:not(:disabled) { border-color: var(--mg-line-gold); color: var(--mg-cream); }
.mg-zcal__nav:disabled { opacity: .22; cursor: default; }
.mg-zcal__nav svg { width: 7px; height: 11px; }

.mg-zcal__dow,
.mg-zcal__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}

.mg-zcal__dow { margin-bottom: .25rem; }

.mg-zcal__dow span {
	text-align: center;
	font-family: var(--mg-sans);
	font-size: .58rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mg-muted);
}

.mg-zcal__pad { display: block; }

.mg-zcal__day {
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	padding: 0;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 2px;
	color: var(--mg-text);
	font-family: var(--mg-sans);
	font-size: .76rem;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.mg-zcal__day:hover:not(:disabled) { border-color: var(--mg-line-gold); color: var(--mg-cream); }
.mg-zcal__day:disabled { color: rgba(138, 129, 117, .3); cursor: default; }
.mg-zcal__day.is-in { background: rgba(212, 162, 78, .11); color: var(--mg-cream); }

.mg-zcal__day.is-start,
.mg-zcal__day.is-end {
	background: var(--mg-gold);
	border-color: var(--mg-gold);
	color: #1a1208;
	font-weight: 600;
}

.mg-zcal__hint {
	min-height: 1.1em;
	margin: .65rem 0 0;
	font-family: var(--mg-sans);
	font-size: .72rem;
	line-height: 1.4;
	color: var(--mg-muted);
}

.mg-zcal__foot { margin-top: .45rem; }

.mg-zcal__reset {
	padding: 0;
	background: none;
	border: 0;
	color: var(--mg-muted);
	font-family: var(--mg-sans);
	font-size: .72rem;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.mg-zcal__reset:hover { color: var(--mg-gold-soft); }

/* ---------- Теги в панели ---------- */

.mg-ztags__search input {
	width: 100%;
	padding: .48rem .62rem;
	background: var(--mg-ink-2);
	border: 1px solid var(--mg-line);
	border-radius: 2px;
	color: var(--mg-cream);
	font-family: var(--mg-sans);
	font-size: .82rem;
}

.mg-ztags__search input::placeholder { color: rgba(138, 129, 117, .8); }
.mg-ztags__search input:focus { outline: none; border-color: var(--mg-line-gold); }

.mg-ztags__list {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem;
	max-height: 248px;
	margin-top: .55rem;
	overflow: auto;
	scrollbar-width: thin;
}

.mg-zchip {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .3rem .5rem;
	background: transparent;
	border: 1px solid var(--mg-line);
	border-radius: 2px;
	color: var(--mg-text);
	font-family: var(--mg-sans);
	font-size: .75rem;
	cursor: pointer;
	transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.mg-zchip:hover { border-color: var(--mg-line-gold); color: var(--mg-cream); }
.mg-zchip[hidden] { display: none; }
.mg-zchip--facet { color: var(--mg-gold-soft); }

.mg-zchip[aria-pressed="true"] {
	background: rgba(212, 162, 78, .16);
	border-color: var(--mg-gold);
	color: var(--mg-cream);
}

.mg-zchip__n {
	font-size: .6rem;
	color: var(--mg-muted);
	font-variant-numeric: tabular-nums;
}

.mg-ztags__empty {
	margin: .55rem 0 0;
	font-family: var(--mg-sans);
	font-size: .74rem;
	color: var(--mg-muted);
}

/* ---------- Лента и карточка ---------- */

.mg-zfeed { display: grid; gap: .8rem; }
.mg-zfeed[hidden] { display: none; }

.mg-zcard {
	position: relative;
	/* после «Показать ещё» карточка прокручивается под липкую шапку */
	scroll-margin-top: 84px;
	display: grid;
	grid-template-columns: 232px minmax(0, 1fr);
	border: 1px solid var(--mg-line);
	border-radius: 2px;
	background: linear-gradient(180deg, rgba(20, 17, 13, .52), rgba(16, 13, 10, .3));
	overflow: hidden;
	transition: border-color .25s ease, background .25s ease;
}

.mg-zcard[hidden] { display: none; }
.mg-zcard:hover { border-color: var(--mg-line-gold); }

.mg-zcard__hit { position: absolute; inset: 0; z-index: 5; }
.mg-zcard__hit:focus-visible { outline: 1px solid var(--mg-gold); outline-offset: -3px; }

.mg-zcard__media {
	position: relative;
	display: block;
	min-height: 158px;
	background: linear-gradient(150deg, #191510, #100d0a);
	overflow: hidden;
}

.mg-zcard__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(.85) brightness(.88);
	transition: transform .6s ease, filter .45s ease;
}

.mg-zcard:hover .mg-zcard__media img {
	transform: scale(1.03);
	filter: saturate(1) brightness(1);
}

.mg-zcard__nophoto {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 158px;
	background:
		radial-gradient(60% 60% at 30% 30%, rgba(212, 162, 78, .14), transparent 70%),
		linear-gradient(150deg, #191510, #100d0a);
}

/* Плашка типа медиа: аудио / видео */
.mg-zcard__kind {
	position: absolute;
	top: .5rem;
	left: .5rem;
	z-index: 2;
	padding: .16rem .42rem;
	background: rgba(10, 8, 6, .8);
	border: 1px solid rgba(242, 232, 213, .14);
	border-radius: 2px;
	font-family: var(--mg-sans);
	font-size: .58rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mg-text);
}

/* Золото — всем медиаформатам: видео раньше оставалось нейтральным,
   и в одной ленте соседствовали два разных вида бейджа. */
.mg-zcard__kind.is-audio,
.mg-zcard__kind.is-video { color: var(--mg-gold-soft); border-color: rgba(212, 162, 78, .34); }

/* Замок на обложке */
.mg-zcard__lock {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: grid;
	place-items: center;
	background: rgba(10, 8, 6, .52);
}

.mg-zcard__lock .mg-lock {
	width: 21px;
	height: 21px;
	color: var(--mg-cream);
	opacity: .85;
}

.mg-zcard--locked .mg-zcard__media img {
	filter: saturate(.55) brightness(.58) blur(1.4px);
}

.mg-zcard--locked:hover .mg-zcard__media img {
	filter: saturate(.7) brightness(.7) blur(.6px);
}

.mg-zcard__body {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	padding: .95rem 1.15rem 1rem;
	min-width: 0;
}

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

.mg-zcard__sep { margin: 0 .4rem; color: rgba(138, 129, 117, .7); }

/* Грань и теги — кнопки фильтра. z-index выше «растянутой ссылки» закрытой
   карточки: иначе клик по тегу на платной истории открывал бы окно входа. */
.mg-zcard__facet {
	position: relative;
	z-index: 6;
	padding: 0;
	background: none;
	border: 0;
	color: var(--mg-muted);
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	cursor: pointer;
}

/* Слово «Грань» — служебное, название — главное. */
.mg-zcard__facet-label { color: var(--mg-muted); }

.mg-zcard__facet-dash {
	margin: 0 .38rem;
	color: rgba(138, 129, 117, .75);
}

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

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

.mg-zcard__title {
	margin: .1rem 0 .15rem;
	font-family: var(--mg-serif);
	font-weight: 400;
	font-size: clamp(1.12rem, 1.8vw, 1.4rem);
	line-height: 1.22;
	color: var(--mg-cream);
	text-wrap: pretty;
}

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

.mg-zcard__desc {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	max-width: 76ch;
	color: var(--mg-text);
	font-size: .89rem;
	line-height: 1.58;
}

.mg-zcard__tags {
	display: flex;
	flex-wrap: wrap;
	/* Теги карточки — слева: и в ленте каталога, и в рекомендациях. */
	justify-content: flex-start;
	gap: .2rem .55rem;
	margin: .1rem 0 0;
	padding: 0;
	list-style: none;
}

.mg-zcard__tag {
	position: relative;
	z-index: 6;
	padding: 0;
	background: none;
	border: 0;
	font-family: var(--mg-sans);
	font-size: .67rem;
	letter-spacing: .05em;
	color: rgba(207, 196, 176, .66);
	cursor: pointer;
	transition: color .18s ease;
}

/* Тема красит любую button:focus заливкой — для текстовой кнопки-тега
   это выглядит как чужая плашка. Снимаем фон во всех состояниях. */
.mg-zcard__tag:hover,
.mg-zcard__tag:focus,
.mg-zcard__tag:active,
.mg-zcard__facet:hover,
.mg-zcard__facet:focus,
.mg-zcard__facet:active {
	background: none;
	border: 0;
	box-shadow: none;
}

.mg-zcard__tag:hover,
.mg-zcard__tag:focus,
.mg-zcard__tag:active { color: var(--mg-gold-soft); }

/* Без скрипта фильтров нет — теги остаются текстом, а не мёртвыми кнопками. */
/* Раньше без JavaScript теги и грани гасились: это были кнопки, которые
   ничего не делали. Теперь это ссылки на ленту с фильтром — они работают
   всегда, поэтому запрет снят. */

/* Тег, по которому сейчас собрана лента. */
.mg-zcard__tag.is-on {
	color: var(--mg-gold-soft);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mg-zcard__facet.is-on .mg-zcard__facet-name {
	color: var(--mg-gold-soft);
	text-decoration: underline;
	text-underline-offset: 3px;
}

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

.mg-zcard__foot {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .7rem;
	margin: auto 0 0;
	padding-top: .45rem;
}

.mg-zcard__cta {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .4rem .74rem;
	border: 1px solid var(--mg-line-gold);
	border-radius: 2px;
	color: var(--mg-gold);
	font-family: var(--mg-sans);
	font-size: .68rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.mg-zcard__cta:hover {
	background: rgba(212, 162, 78, .12);
	border-color: var(--mg-gold);
	color: var(--mg-gold-soft);
}

.mg-zcard__cta--locked {
	color: var(--mg-cream);
	border-color: rgba(242, 232, 213, .28);
}

.mg-zcard--locked:hover .mg-zcard__cta--locked {
	background: rgba(242, 232, 213, .06);
	border-color: rgba(242, 232, 213, .5);
}

/* Чипы форматов: «Слушать» и «Смотреть» рядом с «Читать». */
/* Форматные кнопки — та же кнопка, что «Читать»: одинаковые поля, кегль,
   трекинг и золотой контур. Раньше это были мелкие серые чипы, и рядом с
   «Читать» они читались как второстепенные подписи, а не как действие. */
.mg-zcard__fmt {
	position: relative;
	z-index: 6;
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .4rem .74rem;
	background: none;
	border: 1px solid var(--mg-line-gold);
	border-radius: 2px;
	color: var(--mg-gold);
	font-family: var(--mg-sans);
	font-size: .68rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.mg-zcard__fmt:hover {
	background: rgba(212, 162, 78, .12);
	border-color: var(--mg-gold);
	color: var(--mg-gold-soft);
}

.mg-zcard__fmt .mg-fmt-ico { width: 13px; height: 13px; }
/* Было rgba(138, 129, 117, .8) = 3.63:1 на фоне карточки — ниже нормы.
   Замок здесь показывает иконка, а не приглушённый цвет. */
.mg-zcard__fmt.is-locked {
	color: var(--mg-cream);
	border-color: rgba(242, 232, 213, .28);
}

.mg-zcard__fmt.is-locked:hover {
	background: rgba(242, 232, 213, .06);
	border-color: rgba(242, 232, 213, .5);
	color: var(--mg-cream);
}
.mg-zcard__fmt-lock { display: inline-flex; }
.mg-zcard__fmt-lock .mg-lock { width: 10px; height: 10px; opacity: .75; }

.mg-zcard__state {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-family: var(--mg-sans);
	font-size: .64rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mg-muted);
}

.mg-zcard__state .mg-lock { width: 12px; height: 12px; flex: none; }
.mg-zcard__state--ok { color: var(--mg-gold-soft); }

/* ---------- «Показать ещё» ---------- */

.mg-zmore {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1.2rem;
	margin-top: 1.6rem;
}

.mg-zmore[hidden],
.mg-zmore__back[hidden],
.mg-zmore .mg-btn[hidden] { display: none; }

.mg-zmore__back {
	font-family: var(--mg-sans);
	font-size: .74rem;
	color: var(--mg-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mg-zmore__back:hover { color: var(--mg-gold-soft); }

/* Пока грузится новая порция — притушить ленту, чтобы клик не выглядел
   как «ничего не произошло». */
.mg-zfeed { transition: opacity .25s ease; }
.mg-zar.is-loading .mg-zfeed { opacity: .45; pointer-events: none; }

/* ---------- Пустой результат ---------- */

/* Одинаковая высота карточек: обложка и текст не «пляшут» от строки к строке. */
@media (min-width: 761px) {
	.mg-zcard__body { min-height: 174px; }
}

.mg-zempty { padding: 2.6rem 0; text-align: center; }
.mg-zempty[hidden] { display: none; }

.mg-zempty__text {
	margin: 0 0 1rem;
	font-family: var(--mg-serif);
	font-size: 1.15rem;
	color: var(--mg-muted);
}

/* ---------- Узкие экраны ---------- */

@media (max-width: 760px) {
	/* Панель фильтров становится точкой отсчёта: иначе календарь у второй
	   кнопки уезжал за правый край экрана. */
	.mg-zfilters { position: relative; }
	.mg-zfilters__item { position: static; }

	.mg-zpop,
	.mg-zpop--tags {
		left: 0;
		right: 0;
		width: auto;
	}

	.mg-zcard { grid-template-columns: 1fr; }

	.mg-zcard__media,
	.mg-zcard__nophoto { min-height: 0; }

	.mg-zcard__media img { aspect-ratio: 16 / 9; height: auto; }

	.mg-zcard__body { padding: .9rem 1rem 1rem; }
	.mg-zcard__desc { -webkit-line-clamp: 3; }

	/* Теги — кнопки, поэтому на телефоне им нужна площадка под палец. */
	.mg-zcard__tag { padding-block: .3rem; }
	.mg-zcard__tags { margin-top: -.1rem; }

	.mg-zfilters__found { margin-left: 0; }

	/* Мобильный кадр шапки: на 390 px ширина 390 при высоте ~121, то есть
	   полоса 3:1. Широкий кадр 2400 тут всё равно срезается, а мобильный
	   отдаёт нужный кусок кадра и весит 17 КБ вместо 48. */
	.mg-zhead::before { background-image: var(--mgz-cover-mobile, var(--mgz-cover, none)); }
}

/* ==========================================================================
   Карточка: шкала, состояния, мягкое появление
   ==========================================================================
   Кегли и трекинг раньше были зашиты в каждый селектор: шесть размеров
   (.58/.64/.65/.66/.67/.68rem) и пять трекингов на одну карточку. Теперь три
   роли и два значения — подпись, мета, бейдж.
   ========================================================================== */

.mg-zcard {
	--mgz-label: .68rem;   /* кнопки, чипы, подписи капсом */
	--mgz-track: .12em;
	--mgz-meta:  .65rem;   /* дата, время чтения, теги */
	--mgz-badge: .6rem;    /* плашка на обложке — мельче остальных */
}

.mg-zcard__cta,
.mg-zcard__fmt,
.mg-zcard__state {
	font-size: var(--mgz-label);
	letter-spacing: var(--mgz-track);
}

.mg-zcard__meta {
	font-size: var(--mgz-meta);
	letter-spacing: var(--mgz-track);
}

.mg-zcard__tag { font-size: var(--mgz-meta); }

.mg-zcard__kind {
	font-size: var(--mgz-badge);
	letter-spacing: var(--mgz-track);
}

/* Длинное слово без пробелов больше не растягивает карточку: на 320 px это
   давало горизонтальный скролл всей страницы. */
.mg-zcard__title { overflow-wrap: anywhere; }

/* ---------- Состояния ---------- */

/* Клавиатура: рамка отвечает на фокус так же, как на наведение мышью. */
.mg-zcard:focus-within { border-color: var(--mg-line-gold); }

/* Заголовок подчёркивается слева направо. Фон, а не border-bottom: линия
   растёт без пересчёта раскладки. */
.mg-zcard__title a {
	background-image: linear-gradient(var(--mg-gold-soft), var(--mg-gold-soft));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size .35s ease, color .2s ease;
}

.mg-zcard:hover .mg-zcard__title a,
.mg-zcard:focus-within .mg-zcard__title a { background-size: 100% 1px; }

.mg-zcard__cta { transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease; }
.mg-zcard:not(.mg-zcard--locked):hover .mg-zcard__cta { transform: translateX(2px); }

/* ---------- Обложка ---------- */

/* Низ фотографии растворяется в теле карточки: без этого кадр упирается в
   текст прямоугольной границей. */
.mg-zcard__media::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 45%;
	background: linear-gradient(180deg, transparent, rgba(16, 13, 10, .55));
	pointer-events: none;
}

/* Горизонтального фонового кадра в теле карточки нет: за текстом он
   отвлекал. Цвет и глубину даёт обычная заливка, обложка — слева. */

/* Время чтения — служебное, как дата. */
.mg-zcard__read { color: var(--mg-muted); }

/* ---------- Появление ---------- */

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

/* Задержка по порядку: карточки встают одна за другой. Новые карточки из
   REST приходят новыми узлами — анимация срабатывает сама. */
.mg-zcard { animation: mg-zcard-in .5s cubic-bezier(.22, .61, .36, 1) backwards; }
.mg-zcard:nth-child(1)   { animation-delay: .02s; }
.mg-zcard:nth-child(2)   { animation-delay: .06s; }
.mg-zcard:nth-child(3)   { animation-delay: .10s; }
.mg-zcard:nth-child(4)   { animation-delay: .14s; }
.mg-zcard:nth-child(5)   { animation-delay: .18s; }
.mg-zcard:nth-child(6)   { animation-delay: .22s; }
.mg-zcard:nth-child(n+7) { animation-delay: .26s; }

@media (prefers-reduced-motion: reduce) {
	.mg-zcard { animation: none; }
	.mg-zcard { transition: none; }
	.mg-zfeed { transition: none; }
	.mg-zbtn__chev { transition: none; }
	.mg-zcard__title a,
	.mg-zcard__cta { transition: none; }
	.mg-zcard:hover .mg-zcard__title a { background-size: 0 1px; }
	.mg-zcard:hover .mg-zcard__media img { transform: none; }
	.mg-zcard:not(.mg-zcard--locked):hover .mg-zcard__cta { transform: none; }
}

/* ---------- Палец вместо мыши ---------- */

@media (max-width: 760px) {
	.mg-zcard__cta,
	.mg-zcard__fmt { min-height: 44px; }

	.mg-zcard__tag { min-height: 36px; padding-block: .45rem; }
	.mg-zcard__facet { min-height: 32px; }
}

/* Теги и грани — теперь ссылки. Тема подчёркивает любую a: снимаем, оставляя
   прежний вид кнопки; в ленте клик всё равно перехватывает скрипт. */
.mg-zcard__tag,
.mg-zcard__facet {
	text-decoration: none;
}

/* button был блочным, ссылка по умолчанию строчная — без этого у тега
   схлопывалась область клика и попасть в него мышью было нельзя. */
.mg-zcard__tag { display: inline-block; }
.mg-zcard__facet { display: inline-flex; align-items: baseline; }

.mg-zcard__tag:hover,
.mg-zcard__tag:focus,
.mg-zcard__facet:hover,
.mg-zcard__facet:focus {
	text-decoration: none;
}

/* Замок на обложке: крупнее и с подписью. Раньше был 21 px без текста, и
   причина «почему нельзя открыть» объяснялась только в подвале карточки. */
.mg-zcard__lock-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .65rem;
	padding: 0 .75rem;
	text-align: center;
}

.mg-zcard__lock .mg-lock {
	width: 34px;
	height: 34px;
	opacity: .95;
}

.mg-zcard__lock-label {
	font-family: var(--mg-sans);
	font-size: .62rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mg-cream);
	opacity: .92;
	text-wrap: balance;
}

@media (max-width: 760px) {
	.mg-zcard__lock .mg-lock { width: 30px; height: 30px; }
	.mg-zcard__lock-label { font-size: .6rem; }
}

/* ---------- Табы форматов под заголовком ---------- */

.mg-zcard__formats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem;
	margin: .1rem 0 .35rem;
}

.mg-zcard__tab {
	display: inline-flex;
	align-items: center;
	padding: .22rem .5rem;
	border: 1px solid var(--mg-line);
	border-radius: 2px;
	color: var(--mg-muted);
	font-family: var(--mg-sans);
	font-size: var(--mgz-meta, .65rem);
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: color .18s ease, border-color .18s ease, background .18s ease;
}

.mg-zcard__tab:hover {
	color: var(--mg-gold-soft);
	border-color: var(--mg-line-gold);
}

/* Формат, в котором история существует и который сейчас «главный». */
.mg-zcard__tab.is-on {
	color: var(--mg-gold);
	border-color: var(--mg-line-gold);
	background: rgba(212, 162, 78, .08);
}

/* Варианта нет — таб не врёт, что он кликабельный. */
.mg-zcard__tab.is-off {
	opacity: .35;
	cursor: default;
}

.mg-zcard__tab.is-off:hover {
	color: var(--mg-muted);
	border-color: var(--mg-line);
}

/* Закрытая история: выбор виден, но не работает. */
.mg-zcard__tab.is-locked {
	opacity: .6;
	cursor: default;
}

/* Состояние карточки: «Просмотрено» / «Не просмотрено».
   Живёт в строке меты: на обложке шириной 232 px плашка не помещалась
   и наезжала на формат. Наследует кегль меты, отличается только цвет. */
.mg-zcard__seen { color: var(--mg-muted); }

.mg-zcard__seen.is-seen { color: var(--mg-gold); }

/* ---------- Действия в карточке ---------- */

/* Закладка и статус нужны не всегда: до наведения карточка остаётся тихой,
   на тач-экранах кнопки видны сразу — там «наведения» не существует.
   z-index выше «растянутой ссылки» закрытой карточки: кнопки должны
   нажиматься, а их подсказки — не прятаться за обложкой. */
.mg-zcard__acts {
	position: relative;
	z-index: 6;
	display: inline-flex;
	gap: .35rem;
	margin-left: auto;
	opacity: 0;
	pointer-events: none;
	transition: opacity .18s ease;
}

.mg-zcard:hover .mg-zcard__acts,
.mg-zcard:focus-within .mg-zcard__acts {
	opacity: 1;
	pointer-events: auto;
}

@media (hover: none) {
	.mg-zcard__acts { opacity: 1; pointer-events: auto; }
}

.mg-zcard__act {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--mg-line);
	border-radius: 2px;
	color: var(--mg-muted);
	cursor: pointer;
	transition: color .18s ease, border-color .18s ease;
}

/*
 * Тема красит `button:hover` / `:focus` / `:active` золотом палитры
 * (селектор `button:hover` сильнее одного класса) и вешает тень. На
 * 32-пиксельном квадрате это и была «сплошная заливка»: контурный значок
 * сливался с фоном того же цвета. Держим фон прозрачным во всех
 * состояниях, включая то, что ставит скрипт (`mg-save--on`,
 * `mg-read-btn--on`), — заливки нет ни у одного значка.
 */
.mg-zcard__act,
.mg-zcard__act:hover,
.mg-zcard__act:focus,
.mg-zcard__act:focus-visible,
.mg-zcard__act:active,
.mg-zcard__act.mg-save--on,
.mg-zcard__act.mg-read-btn--on,
.mg-zcard__act.mg-save--on:hover,
.mg-zcard__act.mg-read-btn--on:hover,
.mg-zcard__act.mg-save--on:focus,
.mg-zcard__act.mg-read-btn--on:focus {
	background: transparent;
	box-shadow: none;
}

.mg-zcard__act:hover,
.mg-zcard__act:focus,
.mg-zcard__act:focus-visible {
	color: var(--mg-gold-soft);
	border-color: var(--mg-line-gold);
}

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

.mg-zcard__act svg { width: 15px; height: 15px; }

/* Состояние — цвет и рамка, без заливки: залитый квадрат читался как
   случайное песочное пятно, а не как аккуратный контурный значок. */
.mg-zcard__act.mg-save--on,
.mg-zcard__act.mg-read-btn--on {
	color: var(--mg-gold);
	border-color: rgba(212, 162, 78, .45);
	background: transparent;
}

.mg-zcard__act:disabled { opacity: .5; cursor: default; }

/* ---------- Подсказка к действию в карточке ---------- */

/*
 * Та же своя плашка, что у значков на обложке, но над кнопкой: под ней
 * карточка кончается, и `overflow: hidden` срезал бы подсказку. Правый
 * край плашки держится за кнопку, поэтому она не выходит за карточку.
 */
.mg-zcard__act::after {
	content: attr(data-tip);
	position: absolute;
	right: 0;
	bottom: calc(100% + .5rem);
	z-index: 30;
	padding: .34rem .55rem;
	border: 1px solid var(--mg-line-gold);
	border-radius: 2px;
	background: rgba(10, 8, 6, .97);
	box-shadow: 0 12px 28px rgba(0, 0, 0, .66);
	color: var(--mg-cream);
	font-family: var(--mg-sans);
	font-size: .68rem;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: .02em;
	text-transform: none;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(3px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

.mg-zcard__act:hover::after,
.mg-zcard__act:focus-visible::after,
.mg-zcard__act.is-tip::after {
	opacity: 1;
	visibility: visible;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.mg-zcard__act::after { transition: none; }
}

@media (max-width: 760px) {
	.mg-zcard__act { width: 36px; height: 36px; }
}

/* Метка «В закладках» в строке меты. */
.mg-zcard__saved { color: var(--mg-gold-soft); }
.mg-zcard__saved-wrap[hidden] { display: none; }

/* ---------- Значок эксклюзива на обложке ---------- */

/*
 * Платная история, открытая по подписке: маленький гранёный значок в правом
 * нижнем углу кадра. Задача — чтобы человек с первого взгляда отличал
 * эксклюзив от открытой истории, не читая подпись внизу карточки.
 *
 * pointer-events: none — карточка целиком остаётся ссылкой; z-index выше
 * замка, иначе на закрытой карточке значок утонул бы под затемнением.
 */
.mg-zcard__exclusive {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .32em .6em;
	border: 1px solid var(--mg-line-gold);
	border-radius: 2px;
	background: rgba(10, 8, 6, .74);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	font-family: var(--mg-sans);
	font-size: .55rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mg-gold);
	pointer-events: none;
}

.mg-zcard__exclusive svg {
	display: block;
	width: 12px;
	height: 12px;
}

/* На узком кадре остаётся только значок: слово там съедает обложку. */
@media (max-width: 560px) {
	.mg-zcard__exclusive-text { display: none; }

	/* Разделитель в ряду фильтров на тесном кадре не нужен: ряд переносится. */
	.mg-zexcl { padding-left: 0; border-left: 0; }
}