/* ==========================================================================
   Книжная страница истории
   Подключается только для записей с метой mg_book (moigrani-book.php).
   Всё под .mg-book: обычные истории этот файл не задевает.

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

.mg-book {
	--mgb-paper:      #f2e9d7;
	--mgb-paper-2:    #e9dfc9;
	--mgb-paper-edge: #ded2b8;
	--mgb-ink:        #2b241c;
	--mgb-ink-soft:   #4c4236;
	--mgb-ink-mute:   #7b6d58;
	--mgb-gold:       #8a6631;
	--mgb-gold-soft:  #a9834a;
	--mgb-rule:       rgba(96, 74, 44, .26);
	--mgb-rule-soft:  rgba(96, 74, 44, .14);
	--mgb-measure:    36rem;
}

/* ---------- Хлебные крошки ---------- */

/*
 * Живут на тёмном столе, по ширине листа: тот же левый край, что у текста,
 * чтобы взгляд не прыгал. На листе им места нет — там начинается книга.
 */
.mg-book .mg-book__crumbs {
	max-width: 50rem;
	margin: 0 auto clamp(.8rem, 1.8vw, 1.2rem);
	padding-inline: clamp(1rem, 3vw, 2.2rem);
}

.mg-book .mg-book__crumbs-list {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .45rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--mg-sans);
	font-size: .62rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mg-muted);
}

.mg-book .mg-book__crumbs-item { display: inline-flex; align-items: baseline; gap: .45rem; }

.mg-book .mg-book__crumbs-item + .mg-book__crumbs-item::before {
	content: '·';
	color: var(--mg-gold-soft);
	opacity: .7;
}

.mg-book .mg-book__crumbs-item a {
	color: var(--mg-muted);
	text-decoration: none;
	transition: color .2s ease;
}

.mg-book .mg-book__crumbs-item a:hover { color: var(--mg-gold-soft); }

.mg-book .mg-book__crumbs-item span[aria-current] {
	color: var(--mg-cream);
	opacity: .8;
	max-width: 34ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---------- Стол: тёмный фон, лист по центру ---------- */

.mg-book .mg-book-page {
	padding-block: clamp(1.5rem, 5vw, 4.5rem);
	background:
		radial-gradient(120% 80% at 50% 0%, rgba(120, 90, 40, .10), transparent 62%),
		var(--mg-ink);
}

.mg-book-article,
.mg-book .mg-book__analysis-sheet {
	position: relative;
	max-width: 50rem;
	margin: 0 auto;
	color: var(--mgb-ink);
	background-color: var(--mgb-paper);
	/*
	 * Бумага: две еле заметные штриховки поперёк друг друга дают ощущение
	 * волокна, а тёплое пятно сверху — как будто на лист падает лампа.
	 */
	background-image:
		radial-gradient(120% 90% at 50% -10%, rgba(255, 250, 238, .85), transparent 60%),
		repeating-linear-gradient(90deg, rgba(120, 96, 60, .035) 0 1px, transparent 1px 3px),
		repeating-linear-gradient(0deg, rgba(120, 96, 60, .025) 0 1px, transparent 1px 4px);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .6) inset,
		0 24px 60px rgba(0, 0, 0, .55),
		0 2px 0 #cbbb9b;
}

.mg-book-article {
	padding: clamp(1.4rem, 2.8vw, 2.6rem) clamp(1.15rem, 5vw, 4.4rem) clamp(2.2rem, 5vw, 4rem);
}

/*
 * Разбор — отдельный лист под рассказом: та же бумага, но своя страница,
 * поэтому между листами воздух.
 */
.mg-book .mg-book__analysis-sheet {
	margin: clamp(2rem, 5vw, 3.2rem) auto 0;
	padding: clamp(1.8rem, 4vw, 3rem) clamp(1.15rem, 5vw, 4.4rem) clamp(1.8rem, 4vw, 2.6rem);
}

/* Стопка листов под верхним: два смещённых края, чтобы лист не висел в воздухе. */
.mg-book-article::before,
.mg-book-article::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--mgb-paper-2);
	border-radius: 1px;
}

.mg-book-article::before { transform: translate(5px, 5px); opacity: .55; }
.mg-book-article::after  { transform: translate(10px, 10px); opacity: .3; }

/* ---------- Колонтитул ---------- */

.mg-book .mg-book__runhead {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 clamp(1.2rem, 2.4vw, 1.9rem);
	padding-bottom: .7rem;
	border-bottom: 1px solid var(--mgb-rule-soft);
	font-family: var(--mg-sans);
	font-size: .6rem;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--mgb-ink-mute);
}

/* ---------- Титул ---------- */

.mg-book .mg-book__title {
	position: relative;
	text-align: center;
	margin-bottom: clamp(1.2rem, 2.6vw, 2rem);
}

.mg-book .mg-book__h1 {
	margin: .4rem auto 0;
	max-width: 26rem;
	font-family: var(--mg-serif);
	font-weight: 400;
	font-size: clamp(1.75rem, 3.4vw, 2.4rem);
	line-height: 1.12;
	letter-spacing: -.005em;
	text-wrap: balance;
	hyphens: none;
	color: var(--mgb-ink);
}

.mg-book .mg-book__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .2rem .55rem;
	margin: 1rem 0 0;
	font-family: var(--mg-sans);
	font-size: .64rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mgb-ink-mute);
}

.mg-book .mg-book__dot { color: var(--mgb-rule); }

.mg-book .mg-book__save {
	display: flex;
	justify-content: center;
	gap: 1.1rem;
	margin: 1.7rem 0 0;
}

.mg-book .mg-book__save a,
.mg-book .mg-book__save button {
	color: var(--mgb-ink-mute);
	border-color: var(--mgb-rule);
	font-size: .66rem;
	letter-spacing: .14em;
}

.mg-book .mg-book__save a:hover,
.mg-book .mg-book__save button:hover { color: var(--mgb-gold); border-color: var(--mgb-gold); }

/* Короткая золотая линейка под титулом — как отбивка на титульном листе. */
.mg-book .mg-book__rule {
	display: block;
	width: 4rem;
	height: 1px;
	margin: 1.5rem auto 0;
	background: linear-gradient(90deg, transparent, var(--mgb-gold), transparent);
}

/* ---------- Текст ---------- */

.mg-book .mg-book__text {
	max-width: var(--mgb-measure);
	margin-inline: auto;
	color: var(--mgb-ink);
	font-family: var(--mg-serif);
	font-size: clamp(1.06rem, 1.55vw, 1.2rem);
	line-height: 1.72;
	hyphens: auto;
	-webkit-hyphens: auto;
	text-wrap: pretty;
}

/* Мера строки: только абзацы, чтобы вклейки могли выйти за неё. */
.mg-book .mg-book__text > p,
.mg-book .mg-book__text > h2,
.mg-book .mg-book__text > h3,
.mg-book .mg-book__text > blockquote,
.mg-book .mg-book__text > figure,
.mg-book .mg-book__text > ul,
.mg-book .mg-book__text > ol {
	max-width: var(--mgb-measure);
	margin-inline: auto;
}

.mg-book .mg-book__text > p {
	margin: 0;
	text-indent: 1.6em;
	text-align: justify;
}

.mg-book .mg-book__text > p + p { margin-top: .1em; }

/*
 * Красная строка — у каждого абзаца, в том числе первого после вклейки или
 * отбивки. В русском наборе отступ значит «начался новый абзац», а не
 * «продолжение мысли», поэтому исключений для прозы нет: без отступа стоят
 * только блоки, которые вообще не проза.
 */
.mg-book .mg-book__text > .mg-book__break,
.mg-book .mg-book__text > .mg-book__pull,
.mg-book .mg-book__text > .mg-book__beat,
.mg-book .mg-book__text > p.mg-p--beat,
.mg-book .mg-book__text > p.mg-p--ask,
.mg-book .mg-book__text > p.mg-book__coda {
	text-indent: 0;
}

/* ---------- Вступление ---------- */

/*
 * Описание под заголовком: то же поле «Отрывок», что и в карточках каталога.
 * Стоит между заголовком и метой — как подзаголовок на титульном листе.
 */
.mg-book .mg-book__desc {
	margin: 1.1rem auto 0;
	max-width: 30rem;
	text-align: center;
	font-family: var(--mg-serif);
	font-style: italic;
	font-size: 1.12em;
	line-height: 1.45;
	color: var(--mgb-ink-soft);
	text-wrap: balance;
}

/* ---------- Буквица ---------- */

/*
 * Книжный лист обходится без буквицы: автор попросил убрать «завитушку».
 * Правило сайта (`.single-post .entry-content > p.mg-p--first::first-letter`)
 * сильнее по специфичности, поэтому гасим его явно — иначе первая буква
 * снова становится большой золотой.
 */
body.mg-book .mg-book__text > p.mg-p--first::first-letter,
body.mg-book .mg-book__text > p:first-of-type::first-letter {
	float: none;
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
}

/* ---------- Ударные строки (система ритма прозы) ---------- */

.mg-book .mg-book__text > p.mg-p--beat {
	margin: 2.1em auto;
	text-align: center;
	text-indent: 0;
	font-size: 1.3em;
	line-height: 1.35;
	letter-spacing: .002em;
	color: var(--mgb-ink);
	max-width: 26rem;
	text-wrap: balance;
}

.mg-book .mg-book__text > p.mg-p--beat + p.mg-p--beat { margin-top: -.9em; }

.mg-book .mg-book__text > p.mg-p--voice {
	text-indent: 0;
	padding-left: 1.2em;
	border-left: 1px solid var(--mgb-rule-soft);
	font-style: italic;
	color: var(--mgb-ink-soft);
}

.mg-book .mg-book__text > p.mg-p--ask {
	margin: 2em auto;
	padding: 1.1em 0;
	text-align: center;
	text-indent: 0;
	font-style: italic;
	border-top: 1px solid var(--mgb-rule-soft);
	border-bottom: 1px solid var(--mgb-rule-soft);
	max-width: 28rem;
}

/*
 * Явная ударная строка — сильнее автоматической: курсив, крупнее, с воздухом.
 * Ставится вручную там, где строка держит всю сцену.
 */
.mg-book .mg-book__text > p.mg-book__beat {
	margin: 2.3em auto;
	max-width: 27rem;
	text-align: center;
	text-indent: 0;
	font-style: italic;
	font-size: 1.42em;
	line-height: 1.32;
	color: var(--mgb-ink);
	text-wrap: balance;
}

/* ---------- Отбивка между сценами ---------- */

.mg-book .mg-book__text > .mg-book__break {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	margin: 2.7em auto;
	max-width: 20rem;
	color: var(--mgb-gold);
	font-family: var(--mg-serif);
	font-size: 1.35rem;
	line-height: 1;
	letter-spacing: 0;
	text-indent: 0;
}

.mg-book__text > .mg-book__break::before,
.mg-book__text > .mg-book__break::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--mgb-rule), transparent);
}

/* ---------- Цитата на полях ---------- */

.mg-book .mg-book__text > .mg-book__pull {
	margin: 2.6em auto;
	padding: 1.3em 0;
	background: none;
	border: 0;
	border-top: 1px solid var(--mgb-rule-soft);
	border-bottom: 1px solid var(--mgb-rule-soft);
	box-shadow: none;
	max-width: 27rem;
	text-align: center;
	font-family: var(--mg-serif);
	font-style: italic;
	font-size: clamp(1.28rem, 2.2vw, 1.6rem);
	line-height: 1.34;
	color: var(--mgb-ink);
	text-wrap: balance;
}

/* ---------- Вклейки: иллюстрации ---------- */

.mg-book .mg-book__text > .mg-book__plate {
	/*
	 * Вклейка — не «картинка во всю ширину»: в книге это отдельный лист
	 * с полями. Держим 27rem, чтобы кадр читался как гравюра, а текст
	 * оставался главным.
	 */
	margin: clamp(2.2rem, 5vw, 3.4rem) auto clamp(1.8rem, 4vw, 2.6rem);
	max-width: 27rem;
}

/* Широкий кадр (сцена в комнате) — как разворот с кинокадром. */
.mg-book .mg-book__text > .mg-book__plate--wide { max-width: 34rem; }

.mg-book .mg-book__plate img {
	display: block;
	width: 100%;
	height: auto;
	padding: 7px;
	background: rgba(255, 252, 244, .6);
	border: 1px solid rgba(96, 74, 44, .3);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 10px 24px rgba(52, 38, 20, .18);
	filter: sepia(.12) saturate(.94) contrast(.99);
}

.mg-book .mg-book__plate figcaption {
	margin-top: 1.05rem;
	max-width: 30rem;
	margin-inline: auto;
	font-family: var(--mg-serif);
	font-style: italic;
	font-size: .98rem;
	line-height: 1.5;
	text-align: center;
	color: var(--mgb-ink-soft);
}

/* ---------- Финал и колофон ---------- */

.mg-book .mg-book__text > .mg-book__pull--plain {
	margin: 2.2em auto 1.4em;
	padding: 0;
	border: 0;
	font-size: clamp(1.5rem, 2.6vw, 1.85rem);
	line-height: 1.28;
	color: var(--mgb-gold);
}

.mg-book .mg-book__text > p.mg-book__coda {
	margin: 2.4em auto 0;
	max-width: 30rem;
	text-indent: 0;
	text-align: center;
	font-style: italic;
	font-size: 1.1em;
	line-height: 1.6;
	color: var(--mgb-ink-soft);
}

.mg-book .mg-book__colophon {
	margin-top: clamp(2.6rem, 6vw, 4rem);
	text-align: center;
}

.mg-book .mg-book__orn {
	display: block;
	margin-bottom: 1.1rem;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--mgb-gold);
}

.mg-book .mg-book__imprint {
	display: flex;
	justify-content: center;
	gap: .6rem;
	margin: 0;
	font-family: var(--mg-sans);
	font-size: .6rem;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--mgb-ink-mute);
}

/* ---------- Аудиоверсия под титулом ---------- */

/*
 * Плеер стоит на бумаге, поэтому у него нет ни своей подложки, ни рамки:
 * остаются золотая кнопка, тонкая линия перемотки и время. Разметка —
 * та же, что у плеера обычной страницы (mg-player / data-mg-player),
 * поэтому скрипт подхватывает его без правок; здесь только внешний вид.
 */
.mg-book .mg-book__audio {
	max-width: 26rem;
	margin: 1.1rem auto 0;
	text-align: center;
}

/*
 * Строка «Слушать историю» — оглавление плеера: закрыто по умолчанию,
 * раскрывается кликом или Enter. Родной треугольник `summary` убираем и
 * рисуем свой шеврон, который поворачивается в открытом состоянии.
 */
.mg-book .mg-book__audio-summary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	list-style: none;
	cursor: pointer;
	padding: .4rem .9rem;
	border: 1px solid rgba(138, 102, 49, .45);
	border-radius: 999px;
	background: rgba(138, 102, 49, .05);
	font-family: var(--mg-sans);
	font-size: .6rem;
	line-height: 1.4;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mgb-gold);
	transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}

/* Треугольник play перед подписью — кнопку видно, не читая слов. */
.mg-book .mg-book__audio-summary::before {
	content: "";
	width: 0;
	height: 0;
	border-left: 6px solid currentColor;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
}

.mg-book .mg-book__audio-summary::-webkit-details-marker { display: none; }
.mg-book .mg-book__audio-summary:hover {
	color: var(--mgb-gold-soft);
	border-color: var(--mgb-gold);
	background: rgba(138, 102, 49, .1);
}
.mg-book .mg-book__audio-summary:focus-visible { outline: 1px solid var(--mgb-gold); outline-offset: 4px; }

.mg-book .mg-book__audio-len {
	color: var(--mgb-ink-mute);
	letter-spacing: .12em;
}

.mg-book .mg-book__audio-mark {
	width: 5px;
	height: 5px;
	margin-top: -2px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg);
	transition: transform .25s ease;
}

.mg-book .mg-book__audio[open] .mg-book__audio-mark {
	margin-top: 3px;
	transform: rotate(-135deg);
}

.mg-book .mg-book__audio[open] .mg-book__audio-summary { margin-bottom: 1.1rem; }

.mg-book .mg-book__audio-player { margin: 0 auto; }

.mg-book .mg-book__audio-player {
	display: flex;
	align-items: center;
	gap: .95rem;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	color: var(--mgb-ink-mute);
}

.mg-book .mg-book__audio-player .mg-player__play {
	flex: none;
	display: grid;
	place-items: center;
	width: 2.55rem;
	height: 2.55rem;
	padding: 0;
	border: 1px solid var(--mgb-rule);
	border-radius: 50%;
	background: none;
	color: var(--mgb-gold);
	cursor: pointer;
	transition: border-color .2s ease, color .2s ease;
}

.mg-book .mg-book__audio-player .mg-player__play:hover {
	border-color: var(--mgb-gold);
	color: var(--mgb-gold-soft);
}

.mg-book .mg-book__audio-player .mg-player__play svg {
	width: 15px;
	height: 15px;
}

.mg-book .mg-book__audio-player .mg-player__bar { flex: 1; min-width: 0; }

/*
 * Высоту самого input не сжимаем: Chrome держит у range свою минимальную
 * высоту, и height: 1px он просто игнорирует. Поэтому тонкой делаем не
 * коробку, а рисунок: линия — фон высотой 1px по центру, сама зона касания
 * остаётся удобной (16px).
 */
.mg-book .mg-book__audio-player .mg-player__seek {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	height: 16px;
	margin: 0 0 .35rem;
	border: 0;
	background-color: transparent;
	background-image: linear-gradient(90deg,
		var(--mgb-gold) 0,
		var(--mgb-gold) var(--mg-progress, 0%),
		var(--mgb-rule) var(--mg-progress, 0%),
		var(--mgb-rule) 100%);
	background-size: 100% 1px;
	background-position: 0 50%;
	background-repeat: no-repeat;
	cursor: pointer;
}

/* Дорожка — волосяная линия: у range свой фон, его надо погасить. */
.mg-book .mg-book__audio-player .mg-player__seek::-webkit-slider-runnable-track {
	height: 1px;
	background: transparent;
}

.mg-book .mg-book__audio-player .mg-player__seek::-moz-range-track {
	height: 1px;
	background: transparent;
}

.mg-book .mg-book__audio-player .mg-player__seek::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 9px;
	height: 9px;
	border: 0;
	border-radius: 50%;
	background: var(--mgb-gold);
}

.mg-book .mg-book__audio-player .mg-player__seek::-moz-range-thumb {
	width: 9px;
	height: 9px;
	border: 0;
	border-radius: 50%;
	background: var(--mgb-gold);
}

.mg-book .mg-book__audio-player .mg-player__row {
	display: flex;
	justify-content: space-between;
	font-family: var(--mg-sans);
	font-size: .6rem;
	letter-spacing: .12em;
	color: var(--mgb-ink-mute);
}

/*
 * «В закладки» и «прочитано» на тёмной странице — серые пилюли. На бумаге
 * они превращаются в тонкие обводки с золотом: та же функция, другой тон.
 */
.mg-book .mg-book__save .mg-save {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .4rem .9rem;
	border: 1px solid var(--mgb-rule);
	border-radius: 999px;
	background: none;
	box-shadow: none;
	color: var(--mgb-ink-mute);
	font-family: var(--mg-sans);
	font-size: .6rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}

.mg-book .mg-book__save .mg-save:hover {
	color: var(--mgb-gold);
	border-color: var(--mgb-gold);
}

.mg-book .mg-book__save .mg-save--on {
	color: var(--mgb-gold);
	border-color: var(--mgb-gold);
	background: rgba(138, 102, 49, .07);
}

.mg-book .mg-book__save .mg-save__icon { width: 13px; height: 13px; }

/* Гостю: тихая строка вместо плеера — без второй кнопки входа. */
.mg-book .mg-book__audio-locked {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	margin-inline: auto;
	padding: .4rem .9rem;
	border: 1px solid rgba(138, 102, 49, .45);
	border-radius: 999px;
	background: rgba(138, 102, 49, .05);
	color: var(--mgb-gold);
	text-decoration: none;
	font-family: var(--mg-sans);
	font-size: .6rem;
	line-height: 1.4;
	letter-spacing: .14em;
	text-transform: uppercase;
	transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}

.mg-book .mg-book__audio-locked:hover {
	color: var(--mgb-gold-soft);
	border-color: var(--mgb-gold);
	background: rgba(138, 102, 49, .1);
}

.mg-book .mg-book__audio-locked .mg-lock { width: 14px; height: 14px; flex: none; }


/* ---------- Авторский разбор ---------- */

/*
 * Разбор — отдельная страница книги, а не продолжение рассказа: свой лист,
 * своя шапка и записи по граням. Лист печатается, только если разбор есть.
 */

.mg-book .mg-book__analysis {
	max-width: var(--mgb-measure);
	margin: 0 auto;
	/* Разбор стоит вне .mg-book__text, поэтому книжную типографику задаём сами. */
	font-family: var(--mg-serif);
	font-size: clamp(1.02rem, 1.4vw, 1.12rem);
	line-height: 1.7;
	hyphens: auto;
	-webkit-hyphens: auto;
	color: var(--mgb-ink);
}

.mg-book .mg-book__analysis-kicker {
	display: block;
	margin-bottom: .85rem;
	text-align: center;
	font-family: var(--mg-sans);
	font-size: .62rem;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--mgb-gold);
}

.mg-book .mg-book__analysis-title {
	margin: 0 auto;
	max-width: 28rem;
	font-family: var(--mg-serif);
	font-weight: 400;
	font-size: clamp(1.3rem, 2.1vw, 1.6rem);
	line-height: 1.28;
	text-align: center;
	text-wrap: balance;
	color: var(--mgb-ink);
}

.mg-book .mg-book__analysis .mg-book__analysis-lead {
	margin: 1.1rem auto 0;
	text-align: center;
	text-indent: 0;
	font-style: italic;
	font-size: 1.04em;
	line-height: 1.5;
	color: var(--mgb-ink-soft);
	text-wrap: balance;
}

.mg-book .mg-book__analysis-list { margin-top: clamp(1.8rem, 4vw, 2.4rem); }

.mg-book .mg-book__analysis-item {
	margin-top: 1.5rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--mgb-rule-soft);
}

.mg-book .mg-book__analysis-item:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.mg-book .mg-book__analysis-facet {
	display: block;
	margin-bottom: .55rem;
	font-family: var(--mg-sans);
	font-size: .62rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--mgb-gold);
}

.mg-book .mg-book__analysis p {
	margin: 0;
	text-indent: 0;
	text-align: justify;
	font-size: 1em;
	line-height: 1.7;
	color: var(--mgb-ink);
}

/* ---------- Метки в конце истории ---------- */

/*
 * Грани и теги стоят после текста, перед колофоном: в книге так и делают —
 * сначала рассказ, потом выходные данные. Каждая метка ведёт в каталог с
 * фильтром, поэтому подчёркивание появляется только при наведении: это
 * ссылка, но не украшение текста.
 */
.mg-book .mg-book__tags {
	max-width: 27rem;
	margin: clamp(2.4rem, 5vw, 3.2rem) auto 0;
	padding-top: clamp(1.4rem, 3vw, 1.9rem);
	border-top: 1px solid var(--mgb-rule-soft);
	text-align: center;
}

.mg-book .mg-book__tags-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: .35rem .5rem;
	margin: 0;
	font-family: var(--mg-sans);
	font-size: .66rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mgb-ink-mute);
}

.mg-book .mg-book__tags-list {
	margin-top: .7rem;
	padding: 0;
	list-style: none;
	letter-spacing: .03em;
	text-transform: none;
	font-size: .74rem;
}

.mg-book .mg-book__tags-label { color: var(--mgb-ink-mute); }
.mg-book .mg-book__tags-dash,
.mg-book .mg-book__tags-sep { color: var(--mgb-rule); }

.mg-book .mg-book__tag {
	color: var(--mgb-gold);
	text-decoration: none;
	transition: color .18s ease;
}

.mg-book .mg-book__tags-list .mg-book__tag { color: var(--mgb-ink-soft); }

.mg-book .mg-book__tag:hover,
.mg-book .mg-book__tag:focus-visible {
	color: var(--mgb-gold-soft);
	text-decoration: underline;
	text-underline-offset: 3px;
}

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

/* ---------- Вокруг книги: разговор и рекомендации ---------- */

/*
 * Разговор идёт на тёмном — это осознанный контраст: лист кончился, начался
 * разговор. Но колонка у него та же, что у листа: иначе секция читается как
 * чужой блок, вклеенный в страницу. Поэтому ширина — как у листа, по центру.
 */
.mg-book .mg-book__comments {
	max-width: 50rem;
	margin-inline: auto;
	padding-inline: 0;
}

/*
 * Общий стиль сайта держит блок комментариев в мере текста (--mg-measure,
 * 726 px) — на книжной странице колонка разговора должна совпадать с листом,
 * иначе секция выглядит вклеенной. Поэтому здесь ограничение снимаем.
 */
.mg-book #comments {
	max-width: none;
	margin-inline: 0;
}

/* Лист уже дал воздух — второй отступ сверху не нужен. */
.mg-book .mg-book__comments .mg-cmt {
	margin-top: clamp(1.2rem, 2.6vw, 1.8rem);
	padding-top: clamp(1.2rem, 2.6vw, 1.8rem);
}


.mg-book .mg-book__comments { margin-top: clamp(2rem, 5vw, 3.5rem); }

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

@media (max-width: 700px) {
	.mg-book .mg-book-page { padding-block: 0; }

	.mg-book-article {
		padding: 1.5rem 1.15rem 2rem;
		box-shadow: none;
	}

	.mg-book-article::before,
	.mg-book-article::after { content: none; }

	.mg-book .mg-book__runhead { display: none; }

	.mg-book .mg-book__h1 { font-size: clamp(1.7rem, 7.2vw, 2.3rem); }

	/*
	 * На узкой строке выключка и переносы дают рваные края и «реки»:
	 * выравниваем по левому краю и не переносим.
	 */
	.mg-book .mg-book__text {
		font-size: 1.03rem;
		line-height: 1.68;
		hyphens: none;
	}

	.mg-book .mg-book__text > p { text-align: left; }

	/* Разбор — тоже по левому краю и без переносов: на узкой строке иначе провалы. */
	.mg-book .mg-book__analysis { hyphens: none; }
	.mg-book .mg-book__analysis p { text-align: left; }



	.mg-book .mg-book__text > .mg-book__plate { max-width: 100%; }

	.mg-book .mg-book__text > p.mg-book__beat { font-size: 1.24em; }

	/* Мета переносится — точки-разделители у края строки выглядят обрывом. */
	.mg-book .mg-book__dot { display: none; }
	.mg-book .mg-book__meta { gap: .15rem .8rem; }
}

/* ---------- Замок вместо авторского разбора ---------- */

/*
 * Разбор открыт всем подписчикам. Без подписки лист остаётся, но пустой:
 * человек должен видеть, что разбор существует, и понимать, за что платит.
 */
.mg-book__analysis-sheet--locked {
	padding: clamp(2rem, 5vw, 3rem) clamp(1.2rem, 4vw, 2.4rem);
}

.mg-book__analysis-lock {
	text-align: center;
}

/* Лист книги светлый: цвета берём из бумажной палитры (--mgb-*), а не из
   тёмной темы сайта. На «cream» по пергаменту заголовок исчезал совсем. */
.mg-book__analysis-lock-title {
	margin: 0 0 .6rem;
	font-family: var(--mg-serif);
	font-size: clamp(1.2rem, 2.4vw, 1.5rem);
	color: var(--mgb-ink);
}

.mg-book__analysis-lock-text {
	max-width: 44ch;
	margin: 0 auto 1.2rem;
	color: var(--mgb-ink-mute);
	line-height: 1.65;
}

.mg-book__analysis-lock-cta { margin: 0; }