/* Start:/local/templates/moved/assets/css/pages/authors.css?17915307424450*/
/* Страницы авторов: список (/authors/) и страница одного автора. */

/* --- Страница автора --- */

.author-page__head {
	margin-bottom: 40px;
}

/* Фото и имя рядом: так страница с первого взгляда — о человеке. На узком
   экране фото встаёт над именем, иначе имя сжималось бы в столбик. */
.author-page__intro {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-bottom: 24px;
}

.author-page__photo {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 160px;
	height: 160px;
	overflow: hidden;
	border-radius: 50%;
	background-color: var(--moved-color-border);
}

.author-page__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.author-page__initials,
.author-card__initials {
	color: var(--moved-color-muted);
	font-size: 48px;
	font-weight: 700;
}

.author-page__name {
	margin: 0 0 6px;
}

.author-page__profession,
.author-page__count {
	margin: 0;
	color: var(--moved-color-muted);
}

.author-page__count {
	margin-top: 4px;
	font-size: var(--moved-size-text-small);
}

/* «О себе» — набором текста статьи: это текст, который читают, а не подпись. */
.author-page__about {
	max-width: 46rem;
	font-size: var(--moved-size-text-article);
}

.author-page__about p {
	margin-bottom: 1em;
}

/* Сайт, соцсети, почта — кнопками, как «Обсудить в…» под статьёй. */
.author-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.author-links__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 18px 10px 12px;
	border: 1px solid var(--moved-color-border);
	border-radius: var(--moved-radius-pill);
	background-color: var(--moved-color-bg);
	color: inherit;
	font-weight: 700;
	text-decoration: none;
	overflow-wrap: anywhere;
	transition:
		border-color var(--moved-transition),
		box-shadow var(--moved-transition),
		transform var(--moved-transition);
}

.author-links__link:hover,
.author-links__link:focus-visible {
	transform: translateY(-2px);
	border-color: var(--moved-color-brand);
	box-shadow: var(--moved-shadow-soft);
	color: inherit;
}

.author-links__icon {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
}

/* Рубрика — заголовком группы, число статей рядом, тише названия. */
.author-page__section + .author-page__section {
	margin-top: 40px;
}

.author-page__rubric {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 20px;
}

.author-page__rubric a {
	color: inherit;
	text-decoration: none;
}

.author-page__rubric a:hover,
.author-page__rubric a:focus-visible {
	color: var(--moved-color-accent);
	text-decoration: underline;
}

.author-page__rubric-count {
	color: var(--moved-color-muted);
	font-size: var(--moved-size-text-small);
	font-weight: 400;
}

@media (max-width: 575.98px) {
	.author-page__intro {
		flex-direction: column;
		align-items: flex-start;
	}

	.author-page__photo {
		width: 112px;
		height: 112px;
	}
}

/* --- Список авторов --- */

.authors__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.author-card {
	display: flex;
	gap: 20px;
	padding: 20px;
	border: 1px solid var(--moved-color-border);
	border-radius: var(--moved-radius-card);
	background-color: var(--moved-color-bg);
}

.author-card__photo {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 96px;
	overflow: hidden;
	border-radius: 50%;
	background-color: var(--moved-color-border);
}

.author-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.author-card__initials {
	font-size: 32px;
}

.author-card__name {
	margin: 0 0 4px;
	font-size: var(--moved-size-title-card, 1.25rem);
}

.author-card__name a {
	color: inherit;
	text-decoration: none;
}

.author-card__name a:hover,
.author-card__name a:focus-visible {
	color: var(--moved-color-accent);
	text-decoration: underline;
}

.author-card__profession,
.author-card__count {
	margin: 0;
	color: var(--moved-color-muted);
	font-size: var(--moved-size-text-small);
}

.author-card__about {
	margin: 10px 0;
}

/* End */


/* Start:/local/templates/moved/assets/vendor/bootstrap/5.3.8/css/bootstrap-moved.min.css?179153074920607*/
/*!
 * Bootstrap v5.3.8 (https://getbootstrap.com/) — сборка шаблона moved: moved.scss
 * Copyright 2011-2025 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */
:root,[data-bs-theme=light]{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-primary-rgb:13,110,253;--bs-secondary-rgb:108,117,125;--bs-success-rgb:25,135,84;--bs-info-rgb:13,202,240;--bs-warning-rgb:255,193,7;--bs-danger-rgb:220,53,69;--bs-light-rgb:248,249,250;--bs-dark-rgb:33,37,41;--bs-primary-text-emphasis:#052c65;--bs-secondary-text-emphasis:#2b2f32;--bs-success-text-emphasis:#0a3622;--bs-info-text-emphasis:#055160;--bs-warning-text-emphasis:#664d03;--bs-danger-text-emphasis:#58151c;--bs-light-text-emphasis:#495057;--bs-dark-text-emphasis:#495057;--bs-primary-bg-subtle:#cfe2ff;--bs-secondary-bg-subtle:#e2e3e5;--bs-success-bg-subtle:#d1e7dd;--bs-info-bg-subtle:#cff4fc;--bs-warning-bg-subtle:#fff3cd;--bs-danger-bg-subtle:#f8d7da;--bs-light-bg-subtle:#fcfcfd;--bs-dark-bg-subtle:#ced4da;--bs-primary-border-subtle:#9ec5fe;--bs-secondary-border-subtle:#c4c8cb;--bs-success-border-subtle:#a3cfbb;--bs-info-border-subtle:#9eeaf9;--bs-warning-border-subtle:#ffe69c;--bs-danger-border-subtle:#f1aeb5;--bs-light-border-subtle:#e9ecef;--bs-dark-border-subtle:#adb5bd;--bs-white-rgb:255,255,255;--bs-black-rgb:0,0,0;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#212529;--bs-body-color-rgb:33,37,41;--bs-body-bg:#fff;--bs-body-bg-rgb:255,255,255;--bs-emphasis-color:#000;--bs-emphasis-color-rgb:0,0,0;--bs-secondary-color:rgba(33, 37, 41, 0.75);--bs-secondary-color-rgb:33,37,41;--bs-secondary-bg:#e9ecef;--bs-secondary-bg-rgb:233,236,239;--bs-tertiary-color:rgba(33, 37, 41, 0.5);--bs-tertiary-color-rgb:33,37,41;--bs-tertiary-bg:#f8f9fa;--bs-tertiary-bg-rgb:248,249,250;--bs-heading-color:inherit;--bs-link-color:#0d6efd;--bs-link-color-rgb:13,110,253;--bs-link-decoration:underline;--bs-link-hover-color:#0a58ca;--bs-link-hover-color-rgb:10,88,202;--bs-code-color:#d63384;--bs-highlight-color:#212529;--bs-highlight-bg:#fff3cd;--bs-border-width:1px;--bs-border-style:solid;--bs-border-color:#dee2e6;--bs-border-color-translucent:rgba(0, 0, 0, 0.175);--bs-border-radius:0.375rem;--bs-border-radius-sm:0.25rem;--bs-border-radius-lg:0.5rem;--bs-border-radius-xl:1rem;--bs-border-radius-xxl:2rem;--bs-border-radius-2xl:var(--bs-border-radius-xxl);--bs-border-radius-pill:50rem;--bs-box-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.15);--bs-box-shadow-sm:0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);--bs-box-shadow-lg:0 1rem 3rem rgba(0, 0, 0, 0.175);--bs-box-shadow-inset:inset 0 1px 2px rgba(0, 0, 0, 0.075);--bs-focus-ring-width:0.25rem;--bs-focus-ring-opacity:0.25;--bs-focus-ring-color:rgba(13, 110, 253, 0.25);--bs-form-valid-color:#198754;--bs-form-valid-border-color:#198754;--bs-form-invalid-color:#dc3545;--bs-form-invalid-border-color:#dc3545}*,::after,::before{box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}hr{margin:1rem 0;color:inherit;border:0;border-top:var(--bs-border-width) solid;opacity:.25}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2;color:var(--bs-heading-color)}h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){h1{font-size:2.5rem}}h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){h2{font-size:2rem}}h3{font-size:calc(1.3rem + .6vw)}@media (min-width:1200px){h3{font-size:1.75rem}}h4{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){h4{font-size:1.5rem}}h5{font-size:1.25rem}h6{font-size:1rem}p{margin-top:0;margin-bottom:1rem}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul{padding-left:2rem}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:.875em}mark{padding:.1875em;color:var(--bs-highlight-color);background-color:var(--bs-highlight-bg)}sub,sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,1));text-decoration:underline}a:hover{--bs-link-color-rgb:var(--bs-link-hover-color-rgb)}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:var(--bs-font-monospace);font-size:1em}pre{display:block;margin-top:0;margin-bottom:1rem;overflow:auto;font-size:.875em}pre code{font-size:inherit;color:inherit;word-break:normal}code{font-size:.875em;color:var(--bs-code-color);word-wrap:break-word}a>code{color:inherit}kbd{padding:.1875rem .375rem;font-size:.875em;color:var(--bs-body-bg);background-color:var(--bs-body-color);border-radius:.25rem}kbd kbd{padding:0;font-size:1em}figure{margin:0 0 1rem}img,svg{vertical-align:middle}table{caption-side:bottom;border-collapse:collapse}caption{padding-top:.5rem;padding-bottom:.5rem;color:var(--bs-secondary-color);text-align:left}th{text-align:inherit;text-align:-webkit-match-parent}tbody,td,tfoot,th,thead,tr{border-color:inherit;border-style:solid;border-width:0}label{display:inline-block}button{border-radius:0}button:focus:not(:focus-visible){outline:0}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}select:disabled{opacity:1}[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator{display:none!important}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;border-style:none}textarea{resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{float:left;width:100%;padding:0;margin-bottom:.5rem;line-height:inherit;font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){legend{font-size:1.5rem}}legend+*{clear:left}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-text,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button{cursor:pointer;filter:grayscale(1)}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}::file-selector-button{font:inherit;-webkit-appearance:button}output{display:inline-block}iframe{border:0}summary{display:list-item;cursor:pointer}progress{vertical-align:baseline}[hidden]{display:none!important}.container,.container-fluid,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl{--bs-gutter-x:1.5rem;--bs-gutter-y:0;width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-right:auto;margin-left:auto}@media (min-width:576px){.container,.container-sm{max-width:540px}}@media (min-width:768px){.container,.container-md,.container-sm{max-width:720px}}@media (min-width:992px){.container,.container-lg,.container-md,.container-sm{max-width:960px}}@media (min-width:1200px){.container,.container-lg,.container-md,.container-sm,.container-xl{max-width:1140px}}@media (min-width:1400px){.container,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl{max-width:1320px}}.btn{--bs-btn-padding-x:0.75rem;--bs-btn-padding-y:0.375rem;--bs-btn-font-family: ;--bs-btn-font-size:1rem;--bs-btn-font-weight:400;--bs-btn-line-height:1.5;--bs-btn-color:var(--bs-body-color);--bs-btn-bg:transparent;--bs-btn-border-width:var(--bs-border-width);--bs-btn-border-color:transparent;--bs-btn-border-radius:var(--bs-border-radius);--bs-btn-hover-border-color:transparent;--bs-btn-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.15),0 1px 1px rgba(0, 0, 0, 0.075);--bs-btn-disabled-opacity:0.65;--bs-btn-focus-box-shadow:0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);display:inline-block;padding:var(--bs-btn-padding-y) var(--bs-btn-padding-x);font-family:var(--bs-btn-font-family);font-size:var(--bs-btn-font-size);font-weight:var(--bs-btn-font-weight);line-height:var(--bs-btn-line-height);color:var(--bs-btn-color);text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;border:var(--bs-btn-border-width) solid var(--bs-btn-border-color);border-radius:var(--bs-btn-border-radius);background-color:var(--bs-btn-bg);transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn:hover{color:var(--bs-btn-hover-color);background-color:var(--bs-btn-hover-bg);border-color:var(--bs-btn-hover-border-color)}.btn-check+.btn:hover{color:var(--bs-btn-color);background-color:var(--bs-btn-bg);border-color:var(--bs-btn-border-color)}.btn:focus-visible{color:var(--bs-btn-hover-color);background-color:var(--bs-btn-hover-bg);border-color:var(--bs-btn-hover-border-color);outline:0;box-shadow:var(--bs-btn-focus-box-shadow)}.btn-check:focus-visible+.btn{border-color:var(--bs-btn-hover-border-color);outline:0;box-shadow:var(--bs-btn-focus-box-shadow)}.btn-check:checked+.btn,.btn.active,.btn.show,.btn:first-child:active,:not(.btn-check)+.btn:active{color:var(--bs-btn-active-color);background-color:var(--bs-btn-active-bg);border-color:var(--bs-btn-active-border-color)}.btn-check:checked+.btn:focus-visible,.btn.active:focus-visible,.btn.show:focus-visible,.btn:first-child:active:focus-visible,:not(.btn-check)+.btn:active:focus-visible{box-shadow:var(--bs-btn-focus-box-shadow)}.btn-check:checked:focus-visible+.btn{box-shadow:var(--bs-btn-focus-box-shadow)}.btn.disabled,.btn:disabled,fieldset:disabled .btn{color:var(--bs-btn-disabled-color);pointer-events:none;background-color:var(--bs-btn-disabled-bg);border-color:var(--bs-btn-disabled-border-color);opacity:var(--bs-btn-disabled-opacity)}.btn-primary{--bs-btn-color:#fff;--bs-btn-bg:#0d6efd;--bs-btn-border-color:#0d6efd;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#0b5ed7;--bs-btn-hover-border-color:#0a58ca;--bs-btn-focus-shadow-rgb:49,132,253;--bs-btn-active-color:#fff;--bs-btn-active-bg:#0a58ca;--bs-btn-active-border-color:#0a53be;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#0d6efd;--bs-btn-disabled-border-color:#0d6efd}.btn-secondary{--bs-btn-color:#fff;--bs-btn-bg:#6c757d;--bs-btn-border-color:#6c757d;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#5c636a;--bs-btn-hover-border-color:#565e64;--bs-btn-focus-shadow-rgb:130,138,145;--bs-btn-active-color:#fff;--bs-btn-active-bg:#565e64;--bs-btn-active-border-color:#51585e;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#6c757d;--bs-btn-disabled-border-color:#6c757d}.btn-success{--bs-btn-color:#fff;--bs-btn-bg:#198754;--bs-btn-border-color:#198754;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#157347;--bs-btn-hover-border-color:#146c43;--bs-btn-focus-shadow-rgb:60,153,110;--bs-btn-active-color:#fff;--bs-btn-active-bg:#146c43;--bs-btn-active-border-color:#13653f;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#198754;--bs-btn-disabled-border-color:#198754}.btn-info{--bs-btn-color:#000;--bs-btn-bg:#0dcaf0;--bs-btn-border-color:#0dcaf0;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#31d2f2;--bs-btn-hover-border-color:#25cff2;--bs-btn-focus-shadow-rgb:11,172,204;--bs-btn-active-color:#000;--bs-btn-active-bg:#3dd5f3;--bs-btn-active-border-color:#25cff2;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#000;--bs-btn-disabled-bg:#0dcaf0;--bs-btn-disabled-border-color:#0dcaf0}.btn-warning{--bs-btn-color:#000;--bs-btn-bg:#ffc107;--bs-btn-border-color:#ffc107;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#ffca2c;--bs-btn-hover-border-color:#ffc720;--bs-btn-focus-shadow-rgb:217,164,6;--bs-btn-active-color:#000;--bs-btn-active-bg:#ffcd39;--bs-btn-active-border-color:#ffc720;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#000;--bs-btn-disabled-bg:#ffc107;--bs-btn-disabled-border-color:#ffc107}.btn-danger{--bs-btn-color:#fff;--bs-btn-bg:#dc3545;--bs-btn-border-color:#dc3545;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#bb2d3b;--bs-btn-hover-border-color:#b02a37;--bs-btn-focus-shadow-rgb:225,83,97;--bs-btn-active-color:#fff;--bs-btn-active-bg:#b02a37;--bs-btn-active-border-color:#a52834;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#dc3545;--bs-btn-disabled-border-color:#dc3545}.btn-light{--bs-btn-color:#000;--bs-btn-bg:#f8f9fa;--bs-btn-border-color:#f8f9fa;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#d3d4d5;--bs-btn-hover-border-color:#c6c7c8;--bs-btn-focus-shadow-rgb:211,212,213;--bs-btn-active-color:#000;--bs-btn-active-bg:#c6c7c8;--bs-btn-active-border-color:#babbbc;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#000;--bs-btn-disabled-bg:#f8f9fa;--bs-btn-disabled-border-color:#f8f9fa}.btn-dark{--bs-btn-color:#fff;--bs-btn-bg:#212529;--bs-btn-border-color:#212529;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#424649;--bs-btn-hover-border-color:#373b3e;--bs-btn-focus-shadow-rgb:66,70,73;--bs-btn-active-color:#fff;--bs-btn-active-bg:#4d5154;--bs-btn-active-border-color:#373b3e;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#212529;--bs-btn-disabled-border-color:#212529}.btn-outline-primary{--bs-btn-color:#0d6efd;--bs-btn-border-color:#0d6efd;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#0d6efd;--bs-btn-hover-border-color:#0d6efd;--bs-btn-focus-shadow-rgb:13,110,253;--bs-btn-active-color:#fff;--bs-btn-active-bg:#0d6efd;--bs-btn-active-border-color:#0d6efd;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#0d6efd;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#0d6efd;--bs-gradient:none}.btn-outline-secondary{--bs-btn-color:#6c757d;--bs-btn-border-color:#6c757d;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#6c757d;--bs-btn-hover-border-color:#6c757d;--bs-btn-focus-shadow-rgb:108,117,125;--bs-btn-active-color:#fff;--bs-btn-active-bg:#6c757d;--bs-btn-active-border-color:#6c757d;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#6c757d;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#6c757d;--bs-gradient:none}.btn-outline-success{--bs-btn-color:#198754;--bs-btn-border-color:#198754;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#198754;--bs-btn-hover-border-color:#198754;--bs-btn-focus-shadow-rgb:25,135,84;--bs-btn-active-color:#fff;--bs-btn-active-bg:#198754;--bs-btn-active-border-color:#198754;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#198754;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#198754;--bs-gradient:none}.btn-outline-info{--bs-btn-color:#0dcaf0;--bs-btn-border-color:#0dcaf0;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#0dcaf0;--bs-btn-hover-border-color:#0dcaf0;--bs-btn-focus-shadow-rgb:13,202,240;--bs-btn-active-color:#000;--bs-btn-active-bg:#0dcaf0;--bs-btn-active-border-color:#0dcaf0;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#0dcaf0;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#0dcaf0;--bs-gradient:none}.btn-outline-warning{--bs-btn-color:#ffc107;--bs-btn-border-color:#ffc107;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#ffc107;--bs-btn-hover-border-color:#ffc107;--bs-btn-focus-shadow-rgb:255,193,7;--bs-btn-active-color:#000;--bs-btn-active-bg:#ffc107;--bs-btn-active-border-color:#ffc107;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#ffc107;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#ffc107;--bs-gradient:none}.btn-outline-danger{--bs-btn-color:#dc3545;--bs-btn-border-color:#dc3545;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#dc3545;--bs-btn-hover-border-color:#dc3545;--bs-btn-focus-shadow-rgb:220,53,69;--bs-btn-active-color:#fff;--bs-btn-active-bg:#dc3545;--bs-btn-active-border-color:#dc3545;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#dc3545;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#dc3545;--bs-gradient:none}.btn-outline-light{--bs-btn-color:#f8f9fa;--bs-btn-border-color:#f8f9fa;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#f8f9fa;--bs-btn-hover-border-color:#f8f9fa;--bs-btn-focus-shadow-rgb:248,249,250;--bs-btn-active-color:#000;--bs-btn-active-bg:#f8f9fa;--bs-btn-active-border-color:#f8f9fa;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#f8f9fa;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#f8f9fa;--bs-gradient:none}.btn-outline-dark{--bs-btn-color:#212529;--bs-btn-border-color:#212529;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#212529;--bs-btn-hover-border-color:#212529;--bs-btn-focus-shadow-rgb:33,37,41;--bs-btn-active-color:#fff;--bs-btn-active-bg:#212529;--bs-btn-active-border-color:#212529;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#212529;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#212529;--bs-gradient:none}.btn-link{--bs-btn-font-weight:400;--bs-btn-color:var(--bs-link-color);--bs-btn-bg:transparent;--bs-btn-border-color:transparent;--bs-btn-hover-color:var(--bs-link-hover-color);--bs-btn-hover-border-color:transparent;--bs-btn-active-color:var(--bs-link-hover-color);--bs-btn-active-border-color:transparent;--bs-btn-disabled-color:#6c757d;--bs-btn-disabled-border-color:transparent;--bs-btn-box-shadow:0 0 0 #000;--bs-btn-focus-shadow-rgb:49,132,253;text-decoration:underline}.btn-link:focus-visible{color:var(--bs-btn-color)}.btn-link:hover{color:var(--bs-btn-hover-color)}.btn-lg{--bs-btn-padding-y:0.5rem;--bs-btn-padding-x:1rem;--bs-btn-font-size:1.25rem;--bs-btn-border-radius:var(--bs-border-radius-lg)}.btn-sm{--bs-btn-padding-y:0.25rem;--bs-btn-padding-x:0.5rem;--bs-btn-font-size:0.875rem;--bs-btn-border-radius:var(--bs-border-radius-sm)}.visually-hidden,.visually-hidden-focusable:not(:focus):not(:focus-within){width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption),.visually-hidden:not(caption){position:absolute!important}.visually-hidden *,.visually-hidden-focusable:not(:focus):not(:focus-within) *{overflow:hidden!important}
/* End */


/* Start:/local/templates/moved/assets/css/01-tokens.css?179153074013961*/
/* Слой 1 — токены: единственное место, где живут конкретные значения оформления.
   Правила в остальных слоях ссылаются только сюда.

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

   Здесь же токены проекта прокидываются в переменные Bootstrap: в 5.3 тема
   задаётся через --bs-*, поэтому перекрашиваем его штатным способом,
   а не переопределяем правила поверх.

   Этот файл читает страница /styleguide/ — она строит брендбук по нему,
   поэтому формат «одна переменная на строку» менять не стоит. */

:root {
	/* --- Бренд. Снято с публичного сайта. --- */
	--moved-color-brand: #2fa9eb;
	--moved-color-brand-strong: #136b99;
	--moved-color-brand-soft: #56b7ff;

	/* --- Нейтральные. Временные. --- */
	--moved-color-bg: #ffffff;
	/* Подложка под наведением и выделением строк. Уведена в синеву вслед за
	   остальными нейтральными, чтобы не выглядеть посторонним серым. */
	--moved-color-surface-muted: #f2f6f9;
	/* Та же подложка, плотнее — под наведением на спокойную кнопку. */
	--moved-color-surface-hover: #e6edf3;
	--moved-color-text: #1a1a1a;
	--moved-color-muted: #6c757d;
	--moved-color-border: #e0e0e0;

	/* --- Акцент ссылок. ВРЕМЕННЫЙ: расходится с брендом, решение не принято. --- */
	--moved-color-accent: #0a58ca;

	/* --- Состояния. Заведены по студии: «работает», «нельзя», «осторожно». ---

	   Появились не на пустом месте. В стилях студии успело развестись пять
	   зелёных и шесть красных: два из них — #e8f6ec и #e8f5ec — отличались
	   одной цифрой, и увидеть разницу можно было, только положив плашки рядом.
	   Теперь оттенок один на все состояния, а страница брендбука его показывает.

	   У каждого состояния три оттенка: основной для знака и текста, мягкий
	   для подложки, тёмный для надписи на этой подложке. */
	--moved-color-ok: #1a7f37;
	--moved-color-ok-soft: #e8f6ec;
	--moved-color-ok-strong: #1a5c31;

	--moved-color-danger: #d92d3f;
	--moved-color-danger-soft: #fdecec;
	/* Та же мягкая подложка, плотнее — под наведением на опасную кнопку. */
	--moved-color-danger-soft-hover: #fbdada;
	--moved-color-danger-strong: #8a1f1f;

	--moved-color-warn: #c98a1a;
	--moved-color-warn-soft: #fcf4e6;
	--moved-color-warn-strong: #8a5a12;

	/* Подсветка строк в списках: под наведением и у отмеченной строки. Отмеченная
	   зелёная — так же, как в списках административной панели: там это единственный
	   признак, по которому видно, с чем сейчас работают действия внизу. */
	--moved-color-row-hover: rgba(47, 169, 235, 0.06);
	--moved-color-row-picked: rgba(26, 127, 55, 0.08);

	/* Кольцо вокруг элемента под фокусом и под наведением на мелкие кнопки. */
	--moved-color-focus-ring: rgba(47, 169, 235, 0.24);

	/* Тёмная накладка поверх кадра: кнопка проигрывания, подпись площадки,
	   счётчик снимков в галерее. Полупрозрачная, потому что лежит на чужой
	   картинке и должна читаться и на светлой, и на тёмной. */
	--moved-color-veil: rgba(16, 34, 44, 0.72);
	/* Та же накладка светлее — кнопки над кадром в покое — и плотнее — под наведением. */
	--moved-color-veil-soft: rgba(20, 24, 28, 0.45);
	--moved-color-veil-strong: rgba(20, 24, 28, 0.92);
	/* Затемнение страницы под окном: подтверждение, публикация, галерея. */
	--moved-color-scrim: rgba(15, 23, 30, 0.55);
	/* Подложка под кадром ролика, пока он не загружен. */
	--moved-color-media-bg: #10222c;
	/* Лёгкая подсветка брендовым: фон значка, плитка в покое. */
	--moved-color-brand-tint: rgba(47, 169, 235, 0.12);
	/* Светлый край брендового — для свечения и градиентов: полоса прочтения. */
	--moved-color-brand-glow: #63eef8;

	/* Текст и знаки поверх кадра и тёмной накладки: заголовок на обложке,
	   подпись видео, кнопка на баннере. Три плотности: основной, приглушённый,
	   едва заметный — точки между датой и просмотрами, дорожка прочтения. */
	--moved-color-on-media: #ffffff;
	--moved-color-on-media-soft: rgba(255, 255, 255, 0.82);
	--moved-color-on-media-faint: rgba(255, 255, 255, 0.45);

	/* Категориальные цвета графиков — для серий, которые нужно различать:
	   пол, устройства. Порядок закреплённый, первый — брендовый; набор
	   проверен на различимость при дальтонизме (соседние пары ΔE ≥ 9),
	   поэтому серии всегда идут в этом порядке и не перекрашиваются. Для
	   величин одного рода (города, возраст) цвет один — брендовый. */
	--moved-viz-1: #2fa9eb;
	--moved-viz-2: #eb6834;
	--moved-viz-3: #1baf7a;
	--moved-viz-4: #eda100;
	--moved-viz-5: #e87ba4;
	--moved-viz-6: #4a3aa7;

	/* Заголовки разделов на главной. Снято с макета: тёмный сине-серый для самого
	   заголовка и приглушённый для надзаголовка над ним. */
	--moved-color-heading: #243847;
	--moved-color-eyebrow: #5d7789;

	/* --- Шапка и подвал. Снято с публичного сайта. --- */
	--moved-color-header-bg: #ffffff;
	--moved-color-header-border-top: rgba(0, 0, 0, 0.12);
	--moved-color-header-border-bottom: rgba(19, 107, 153, 0.08);
	--moved-color-footer-bg: #2f2f2f;
	--moved-color-footer-text: #ffffff;

	/* --- Тёмная сцена страницы 404. Снято с макета. --- */
	--moved-color-space-top: #0b1020;
	--moved-color-space-bottom: #060913;
	--moved-color-space-text: #c5d5e8;
	--moved-color-space-muted: #9fb3c6;
	--moved-color-space-link: #7cd0ff;

	/* --- Шрифты. Текстовый временный; брендовый снят с сайта, но пока не применён. --- */
	--moved-font-text: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--moved-font-brand: Georgia, "Times New Roman", serif;

	/* --- Типографика. Шкала заголовков снята с публичного сайта. --- */
	--moved-line-height: 1.6;
	/* Шкала заголовков: page → h1, section → h2, card → h3.
	   Каждый уровень растёт от узкого экрана к широкому по своей формуле, но шаг
	   между уровнями держится около 1,4 на всей ширине — в отличие от формулы
	   Bootstrap, где на мобильном уровни сходились до неразличимости.
	   Границы: 32→56, 24→40, 20→28. Потолок достигается около 1600px. */
	--moved-size-title-page: clamp(2rem, 1.55rem + 2vw, 3.5rem);
	--moved-size-title-section: clamp(1.5rem, 1.2rem + 1.3vw, 2.5rem);
	--moved-size-title-card: clamp(1.25rem, 1.1rem + 0.65vw, 1.75rem);
	--moved-size-text-base: 16px;
	/* Текст самой статьи — на пункт крупнее интерфейса. Снято с Дзена: там
	   статьи набраны 17 пикселями, и длинный текст на телефоне читается
	   заметно легче, чем нашими 16. Интерфейс студии и подписи остаются 16. */
	--moved-size-text-article: 17px;
	/* На телефоне текст статьи ещё на пункт крупнее: экран ближе к глазам,
	   но меньше, и 17 на нём читаются как 15. Дзен на телефоне тоже 18. */
	--moved-size-text-article-touch: 18px;
	/* Просвет между абзацами статьи. Тоже с Дзена: 20 точек при строке
	   в 27 — абзацы читаются отдельными, но текст не рассыпается. Bootstrap
	   ставит 16 (1rem), и при крупном кегле это выглядит тесно. */
	--moved-space-paragraph: 20px;
	/* Просвет над заголовком раздела внутри статьи и над подразделом.
	   Заголовок принадлежит тексту под собой, а не над: сверху в два раза
	   больше, чем абзацный просвет, снизу — меньше. У Дзена 42 и 8. */
	--moved-space-heading: 40px;
	--moved-space-heading-small: 32px;
	/* Подводка и заголовок карточки в ленте: на ступень крупнее текста. */
	--moved-size-text-lead: 18px;
	--moved-size-text-small: 14px;
	/* Служебная строка: адрес под названием рубрики, «код 301 · вес 400»,
	   подписи колонок. В студии этот размер стоял числом в дюжине правил. */
	--moved-size-text-meta: 12px;
	/* Самое мелкое, что видит читатель на телефоне: метка над героем, дата
	   в поиске. 12 — для служебных строк студии; читателю на ходу мелко. */
	--moved-size-text-caption: 13px;
	--moved-size-wordmark: clamp(2.2rem, 3.8vw, 4rem);

	/* Заголовки блоков главной и карточек в «Главных материалах». Сняты с макета
	   и держатся отдельно от общей шкалы: подними мы под них сам h2, на странице
	   статьи он встал бы почти вровень с h1 и иерархия пропала бы. */
	--moved-size-title-block: clamp(1.75rem, 2.8vw, 3rem);
	--moved-size-title-teaser: clamp(1.35rem, 1.8vw, 1.9rem);

	/* Заголовки внутри статьи — своя шкала, тише витринной. Общие h1 и h2
	   рассчитаны на главную; в колонке текста шириной 736 точек заголовок
	   раздела в 36 весит как заголовок страницы. Границы сняты с Дзена:
	   название 28→36, раздел 24→28, подраздел 20→22. */
	--moved-size-title-article: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
	--moved-size-title-article-section: clamp(1.5rem, 1.3rem + 0.7vw, 1.75rem);
	--moved-size-title-article-sub: clamp(1.25rem, 1.15rem + 0.4vw, 1.375rem);

	/* Заголовки студии — без роста от ширины: это рабочие экраны, а не витрина.
	   Раздел формы, окно подтверждения, глава справки — один размер; карточка
	   статистики, подводка справки — другой, на ступень меньше. */
	--moved-size-title-studio: 20px;
	--moved-size-title-panel: 18px;

	/* --- Форма. Скругления и тени сняты с публичного сайта. --- */
	--moved-radius: 8px;
	/* Мелкие элементы: стрелки порядка, кнопки постраничника, примеры в подсказках.
	   На предмете в 24 точки общее скругление в 8 съедает половину стороны. */
	--moved-radius-small: 6px;
	--moved-radius-card: 1.5rem;
	--moved-radius-pill: 999px;
	--moved-shadow-card: 0 18px 45px rgba(19, 107, 153, 0.12);
	--moved-shadow-soft: 0 10px 24px rgba(19, 107, 153, 0.08);
	--moved-transition: 0.2s ease;

	/* --- Проброс в Bootstrap. --- */
	--bs-body-bg: var(--moved-color-bg);
	--bs-body-color: var(--moved-color-text);
	--bs-body-font-family: var(--moved-font-text);
	--bs-body-line-height: var(--moved-line-height);
	--bs-secondary-color: var(--moved-color-muted);
	--bs-border-color: var(--moved-color-border);
	--bs-border-radius: var(--moved-radius);
	--bs-link-color: var(--moved-color-accent);
	--bs-link-hover-color: var(--moved-color-accent);
}

/* End */


/* Start:/local/templates/moved/assets/css/02-base.css?17915307401105*/
/* Слой 2 — база: только то, чего не делает reboot Bootstrap.
   Box-sizing, отступы body, типографика заголовков и абзацев, цвет ссылок
   приходят из вендорного слоя и здесь не дублируются. */

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

/* Размеры заголовков задаём сами, перекрывая Bootstrap. Он считает их по формуле
   вида calc(1.375rem + 1.5vw), и на узких экранах уровни сходятся: при 375px
   разница между h1 и h2 падала до 12 процентов, и они читались как одинаковые.
   Наши размеры фиксированные, поэтому соотношение держится на любой ширине. */
h1 {
	font-size: var(--moved-size-title-page);
	line-height: 1.15;
}

h2 {
	font-size: var(--moved-size-title-section);
	line-height: 1.2;
}

h3 {
	font-size: var(--moved-size-title-card);
	line-height: 1.3;
}

/* End */


/* Start:/local/templates/moved/assets/css/03-layout.css?17915307403932*/
/* Слой 3 — раскладка: оболочка страницы и прижатый подвал.
   Контейнер и сетка берутся у Bootstrap, свой .container не заводим —
   он столкнулся бы с вендорным классом. */

.page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.page__main {
	flex: 1 0 auto;
	padding: 40px 0;
}

.page__header,
.page__footer {
	flex: 0 0 auto;
	padding: 20px 0;
}

/* Три колонки при двух элементах: логотип встаёт в первую, подпись во вторую,
   третья остаётся пустой и уравновешивает первую. За счёт этого подпись стоит по
   центру страницы, а не по центру остатка справа от логотипа. Третья колонка
   пригодится под поиск, когда он появится. */
.page__header-inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
}

.page__brand {
	justify-self: start;
}

/* Уже lg шапка — одна строка: логотип, название со слоганом, значки справа.
   Прежде она здесь складывалась столбиком по центру, и на телефоне логотип,
   название, слоган и значки занимали полэкрана. Название теперь стоит рядом
   с логотипом, а не по центру страницы: центровать его не относительно чего. */
@media (max-width: 991.98px) {
	.page__header {
		padding: 12px 0;
	}

	.page__header-inner {
		grid-template-columns: auto minmax(0, 1fr) auto;
		gap: 12px;
	}
}

/* Телефон: строка шапки — около 64 px. Слоган и вход в студию уходят
   из строки, рубрики — в мобильное меню, см. .site-menu. */
@media (max-width: 767.98px) {
	.page__header {
		padding: 8px 0;
	}

	.page__header-inner {
		gap: 8px;
	}
}

.page__header {
	background-color: var(--moved-color-header-bg);
	border-top: 1px solid var(--moved-color-header-border-top);
	border-bottom: 1px solid var(--moved-color-header-border-bottom);
}

/* Подвал отделяется от контента собственным тёмным фоном, поэтому границы не нужно. */
.page__footer {
	background-color: var(--moved-color-footer-bg);
	color: var(--moved-color-footer-text);
}

/* Вход в редакцию. Стоит в третьей колонке сетки шапки — той, что до сих пор
   пустовала и уравновешивала логотип слева. Надпись при этом остаётся по центру
   страницы, а не съезжает. */
.page__account {
	display: flex;
	justify-content: flex-end;
}

.page__account-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: var(--moved-color-muted);
	text-decoration: none;
	transition: color var(--moved-transition), background-color var(--moved-transition);
}

.page__account-link:hover,
.page__account-link:focus-visible {
	background-color: rgba(19, 107, 153, 0.08);
	color: var(--moved-color-brand-strong);
}

/* Кнопка меню — только на телефоне. Ширина и высота — 44 px: столько нужно
   цели для пальца. */
.page__menu-button {
	display: none;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

@media (max-width: 767.98px) {
	.page__account-link {
		width: 44px;
		height: 44px;
	}

	.page__account-link--studio {
		display: none;
	}

	.page__menu-button {
		display: flex;
	}
}

/* End */


/* Start:/local/templates/moved/assets/css/04-components.css?179153074053717*/
/* Слой 4 — компоненты: повторно используемые блоки шаблона. */

.page__logo {
	font-size: var(--moved-size-title-studio);
	font-weight: 700;
	color: var(--moved-color-brand);
	text-decoration: none;
}

/* Логотип-картинка: высоту задаёт шапка, ширину считает браузер по пропорции.
   Атрибуты width и height в разметке остаются, чтобы место резервировалось до загрузки. */
/* Оба размера auto, а ограничения заданы максимумами. Так браузер сам сохраняет
   пропорции: в узкой колонке картинка уменьшается целиком, а не сплющивается по
   ширине при неизменной высоте. */
.page__logo-image {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 128px;
}

/* Подпись в шапке — фирменное начертание сайта: антиква курсивом, плотный трекинг.
   Ссылкой не делаем: логотип рядом уже ведёт на главную, и второй такой же переход
   только мешал бы навигации с клавиатуры и в экранном чтении. */
.page__wordmark {
	margin: 0;
	color: var(--moved-color-brand);
	font-family: var(--moved-font-brand);
	font-size: var(--moved-size-wordmark);
	font-style: italic;
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.04em;
	text-align: center;
}

/* Подпись и слоган занимают одну колонку сетки. min-width: 0 нужен, чтобы длинная
   строка могла переноситься: по умолчанию элемент грид-сетки не сжимается уже
   своего содержимого и выдавил бы колонки. */
.page__titles {
	min-width: 0;
	text-align: center;
}

/* Слоган намеренно набран основным шрифтом, а не брендовой антиквой: он поясняет
   подпись, а не спорит с ней за внимание. */
.page__tagline {
	margin: 8px 0 0;
	color: var(--moved-color-muted);
	font-family: var(--moved-font-text);
	font-size: var(--moved-size-text-base);
	line-height: 1.3;
}

/* Шапка в одну строку (уже lg): название — рядом с логотипом, по левому краю,
   и мельче — ему делить строку с логотипом и значками. */
@media (max-width: 991.98px) {
	.page__logo-image {
		max-height: 72px;
	}

	.page__titles,
	.page__wordmark {
		text-align: left;
	}

	.page__wordmark {
		font-size: clamp(1.5rem, 4.2vw, 2.2rem);
	}

	.page__tagline {
		margin-top: 4px;
		font-size: var(--moved-size-text-small);
	}
}

/* Телефон: логотип в высоту строки, название в две строки по центру между
   логотипом и значками, слоган — только на главной, в её вступлении он и так
   сказан словами. */
@media (max-width: 767.98px) {
	.page__titles,
	.page__wordmark {
		text-align: center;
	}

	.page__logo {
		font-size: var(--moved-size-text-base);
	}

	.page__logo-image {
		max-height: 48px;
	}

	.page__wordmark {
		font-size: clamp(1.25rem, 6vw, 1.6rem);
		line-height: 1.05;
	}

	.page__tagline {
		display: none;
	}
}

/* Кнопки. Bootstrap 5.3 собирает .btn-primary с зашитыми при компиляции цветами,
   поэтому подмена --bs-primary на него не действует — перекрашивать нужно его
   собственные переменные --bs-btn-*. Это штатный путь темизации: своих правил
   поверх вендорных не пишем. */
.btn {
	--bs-btn-border-radius: var(--moved-radius-pill);
	--bs-btn-padding-x: 1.4rem;
	--bs-btn-padding-y: 0.7rem;
	--bs-btn-font-weight: 700;
}

.btn-primary {
	--bs-btn-bg: var(--moved-color-brand);
	--bs-btn-border-color: var(--moved-color-brand);
	--bs-btn-hover-bg: var(--moved-color-brand-strong);
	--bs-btn-hover-border-color: var(--moved-color-brand-strong);
	--bs-btn-active-bg: var(--moved-color-brand-strong);
	--bs-btn-active-border-color: var(--moved-color-brand-strong);
	--bs-btn-disabled-bg: var(--moved-color-brand);
	--bs-btn-disabled-border-color: var(--moved-color-brand);
	--bs-btn-color: var(--moved-color-on-media);
	--bs-btn-hover-color: var(--moved-color-on-media);
	--bs-btn-active-color: var(--moved-color-on-media);
}

.btn-outline-primary {
	--bs-btn-color: var(--moved-color-brand-strong);
	--bs-btn-border-color: var(--moved-color-brand);
	--bs-btn-hover-bg: var(--moved-color-brand);
	--bs-btn-hover-border-color: var(--moved-color-brand);
	--bs-btn-hover-color: var(--moved-color-on-media);
	--bs-btn-active-bg: var(--moved-color-brand-strong);
	--bs-btn-active-border-color: var(--moved-color-brand-strong);
}

/* Та же кнопка, но для необратимого. Красная только в обводке и тексте: рядом
   стоит обычное действие, и заливка перетянула бы внимание на опасное. */
.btn-outline-danger {
	--bs-btn-color: var(--moved-color-danger);
	--bs-btn-border-color: var(--moved-color-danger-soft-hover);
	--bs-btn-hover-bg: var(--moved-color-danger);
	--bs-btn-hover-border-color: var(--moved-color-danger);
	--bs-btn-hover-color: var(--moved-color-on-media);
	--bs-btn-active-bg: var(--moved-color-danger-strong);
	--bs-btn-active-border-color: var(--moved-color-danger-strong);
}

/* Меню рубрик под шапкой. На узких экранах прокручивается вбок, а не переносится:
   так оно остаётся одной строкой и не съедает высоту у содержимого. */
.rubrics {
	border-bottom: 1px solid var(--moved-color-border);
	background-color: var(--moved-color-header-bg);
}

.rubrics__list {
	display: flex;
	gap: 24px;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	list-style: none;
	scrollbar-width: none;
}

.rubrics__list::-webkit-scrollbar {
	display: none;
}

.rubrics__item {
	flex: 0 0 auto;
}

.rubrics__link {
	display: block;
	padding: 14px 0;
	border-bottom: 2px solid transparent;
	color: var(--moved-color-text);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--moved-transition), border-color var(--moved-transition);
}

.rubrics__link:hover,
.rubrics__link:focus-visible {
	color: var(--moved-color-brand-strong);
}

.rubrics__link--current {
	border-bottom-color: var(--moved-color-brand);
	color: var(--moved-color-brand-strong);
}

/* На телефоне рубрики — в мобильном меню: полоса с прокруткой вбок показывала
   две рубрики из восьми, и о третьей читатель не догадывался. */
@media (max-width: 767.98px) {
	.rubrics {
		display: none;
	}
}

/* Мобильное меню — панель справа во всю высоту экрана, поверх затемнения.
   Открывает его кнопка в шапке, см. assets/js/site-menu.js. */
.site-menu {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(22rem, 88vw);
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background-color: var(--moved-color-header-bg);
	color: var(--moved-color-text);
	box-shadow: var(--moved-shadow-card);
}

.site-menu::backdrop {
	background-color: var(--moved-color-veil);
}

.site-menu[open] {
	animation: site-menu-in 0.2s ease-out;
}

@keyframes site-menu-in {
	from {
		transform: translateX(100%);
	}

	to {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-menu[open] {
		animation: none;
	}
}

/* Панель занимает весь диалог: щелчок мимо неё — щелчок по затемнению. */
.site-menu__panel {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	padding: 8px 20px 24px;
}

.site-menu__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 56px;
}

.site-menu__title {
	margin: 0;
	font-size: var(--moved-size-text-base);
	font-weight: 700;
}

.site-menu__close {
	width: 44px;
	height: 44px;
	margin-right: -10px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.site-menu__label {
	margin: 12px 0 4px;
	color: var(--moved-color-muted);
	font-size: var(--moved-size-text-small);
}

.site-menu__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-menu__list--pages {
	margin-top: 16px;
}

.site-menu__link {
	display: block;
	padding: 12px 0;
	border-bottom: 1px solid var(--moved-color-border);
	color: var(--moved-color-text);
	font-size: 1.125rem;
	text-decoration: none;
	transition: color var(--moved-transition);
}

.site-menu__link:hover,
.site-menu__link:focus-visible {
	color: var(--moved-color-brand-strong);
}

.site-menu__link--current {
	color: var(--moved-color-brand-strong);
	font-weight: 700;
}

/* Вход в редакцию — внизу панели: он нужен авторам, а не читателям. */
.site-menu__studio {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding-top: 24px;
	color: var(--moved-color-muted);
	text-decoration: none;
}

.site-menu__studio:hover,
.site-menu__studio:focus-visible {
	color: var(--moved-color-brand-strong);
}

/* Страница под открытым меню не прокручивается. */
html.is-menu-open {
	overflow: hidden;
}

/* Лента статей: ровно три карточки в строке во всю её ширину.
   Автоподбор колонок здесь не годится — на широком экране он набирал четвёртый трек,
   и при двух-трёх статьях строка оставалась полупустой.
   minmax(0, 1fr) вместо 1fr нужен, чтобы длинное слово в заголовке не раздувало
   колонку шире её доли. */
.blog {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
	margin-bottom: 40px;
}

@media (max-width: 991.98px) {
	.blog {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}
}

/* На одну колонку переходим раньше, чем помещается вторая.
   Две колонки ниже этой ширины давали карточку в 246 точек: в ней тесно
   и заголовку, и анонсу, а строка меты не помещалась даже без рубрики.
   Порог поднят с 576 до 768 — планшет в книжной ориентации показывает ленту
   в одну колонку, зато карточка читается целиком. */
@media (max-width: 767.98px) {
	.blog {
		grid-template-columns: minmax(0, 1fr);
	}
}

.blog__heading {
	margin-bottom: 32px;
}

/* Закреплённая статья на главной: обложка во всю ширину с текстом поверх. */
/* Точка отсчёта для плашки и затемнения — сам блок, а не ссылка: ссылок здесь
   теперь три (обложка, заголовок, рубрика), и общей обёртки-якоря больше нет. */
.hero-post {
	position: relative;
	margin-bottom: 40px;
	overflow: hidden;
	border-radius: var(--moved-radius-card);
	background-color: var(--moved-color-border);
}

.hero-post__cover {
	display: block;
}

.hero-post__link {
	color: var(--moved-color-on-media);
	text-decoration: none;
}

.hero-post__image {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 2 / 1;
	object-fit: cover;
}

/* Плашка «Свежее» в верхнем углу большой карточки. Позиционируется от
   .hero-post__link — у него уже есть position: relative.

   Типографика та же, что у надзаголовков разделов ниже: мелкий кегль, жирное
   начертание, разрядка и заглавные. Фон — основной брендовый голубой. */
.hero-post__badge {
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 1;
	padding: 7px 15px;
	border-radius: var(--moved-radius-pill);
	background-color: var(--moved-color-brand);
	color: var(--moved-color-on-media);
	font-size: var(--moved-size-text-small);
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	box-shadow: var(--moved-shadow-soft);
}

/* Затемнение снизу: без него светлая фотография съедает белый текст.
   Верх градиента прозрачный, чтобы кадр не темнел целиком. */
.hero-post__overlay {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: grid;
	gap: 6px;
	padding: 96px 32px 32px;
	/* Затемнение поднимается выше текста и густеет к низу: прежде оно было
	   ростом с сам текст и прозрачным там, где стоит дата, — на светлом небе
	   дата, рубрика и просмотры пропадали. Тон тот же, что у --moved-color-veil,
	   только ступенями: вверху прозрачно, к строке меты — уже полупрозрачно. */
	background: linear-gradient(180deg, rgba(16, 34, 44, 0) 0%, rgba(16, 34, 44, 0.45) 40%, rgba(16, 34, 44, 0.82) 100%);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* Мета собрана так же, как в карточках ленты: сначала дата, потом точка-разделитель,
   потом рубрика ссылкой. Отличаются только цвета — под тёмным снимком приглушённый
   серый и тёмно-синий из карточек были бы нечитаемы, поэтому здесь полупрозрачный
   белый и светлый оттенок бренда. */
.hero-post__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: var(--moved-size-text-small);
}

.hero-post__date {
	color: var(--moved-color-on-media-soft);
}

.hero-post__dot {
	color: var(--moved-color-on-media-faint);
}

/* Просмотры в герое — на снимке, поэтому цвет тот же приглушённо-белый, что
   у даты, а не серый из общей палитры: серый на фотографии не читается. */
.hero-post__views {
	color: var(--moved-color-on-media-soft);
}

/* Подчёркивание убрано, как и в карточках: в строке с датой оно спорило бы
   с ней за внимание, поэтому выделяем только цветом. */
.hero-post__section {
	color: var(--moved-color-brand-soft);
	text-decoration: none;
}

a.hero-post__section:hover,
a.hero-post__section:focus-visible {
	text-decoration: underline;
}

.hero-post__title {
	margin: 0;
	font-size: var(--moved-size-title-section);
	font-weight: 800;
	line-height: 1.15;
}

@media (max-width: 767.98px) {
	.hero-post__image {
		aspect-ratio: 4 / 3;
	}

	.hero-post__overlay {
		padding: 72px 20px 20px;
	}

	.hero-post__badge {
		top: 14px;
		left: 14px;
		padding: 6px 12px;
		font-size: var(--moved-size-text-caption);
		letter-spacing: 0.12em;
	}
}

/* Заголовок раздела на главной: надзаголовок вразрядку и крупный заголовок,
   у которого вторая часть выделена фирменным цветом. Один компонент на оба блока —
   «Новые статьи» и «Главные материалы». */
/* Форма входа. Появляется на любой странице, куда зашли без прав, поэтому живёт
   в общем слое компонентов, а не в стилях отдельной страницы. */
.auth {
	max-width: 26rem;
	margin: 0 auto;
	padding: 28px 0 48px;
}

.auth__form {
	display: grid;
	gap: 18px;
	padding: 28px;
	border: 1px solid var(--moved-color-border);
	border-radius: var(--moved-radius-card);
	background-color: var(--moved-color-bg);
	box-shadow: var(--moved-shadow-soft);
}

.auth__field {
	display: grid;
	gap: 6px;
	margin: 0;
}

.auth__label {
	color: var(--moved-color-heading);
	font-size: var(--moved-size-text-small);
	font-weight: 600;
}

.auth__input {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--moved-color-border);
	border-radius: var(--moved-radius);
	font-family: inherit;
	font-size: var(--moved-size-text-base);
}

.auth__input:focus-visible {
	border-color: var(--moved-color-brand);
	outline: 2px solid var(--moved-color-focus-ring);
	outline-offset: 1px;
}

.auth__remember,
.auth__actions,
.auth__links {
	margin: 0;
}

.auth__remember {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--moved-size-text-small);
}

/* Флажок в 22 точки вместо 13 по умолчанию: в него попадают пальцем.
   Подпись тоже нажимается — ей добавлена высота. */
.auth__remember input[type="checkbox"] {
	flex: none;
	width: 22px;
	height: 22px;
	margin: 0;
	accent-color: var(--moved-color-brand);
}

.auth__remember label {
	padding: 10px 0;
}

.auth__submit {
	width: 100%;
}

.auth__links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	font-size: var(--moved-size-text-small);
}

/* Сообщение над формой: «войдите» или «прав не хватает».
   Компонент выводит его отдельным блоком до .auth, поэтому ширину и
   центрирование ему нужно задать своими: без них оно растягивалось на всю
   страницу и текст прижимался к левому краю, тогда как форма стоит по центру.
   Ширина та же, что у формы, — сообщение читается как надпись над плашкой,
   а не как отдельная строка где-то сбоку. */
/* Плашка, а не строка текста. Серой надписью над формой сообщение читалось как
   подпись к чему-то и терялось: человек видел форму и не понимал, почему его
   на неё выкинуло. Цветом видно сразу.
   Оттенок предупреждающий, а не алый, и это обдуманно: через этот же блок
   выходит и «войдите, чтобы работать с материалами блога» — указание, а не
   поломка. Алым оно пугало бы на ровном месте. */
.auth__error {
	max-width: 26rem;
	/* Верхний отступ был у прежней надписи и остаётся: он отделяет сообщение
	   от меню под шапкой, а не от формы. */
	margin: 28px auto 20px;
	padding: 12px 16px;
	border: 1px solid var(--moved-color-warn);
	border-radius: var(--moved-radius);
	background-color: var(--moved-color-warn-soft);
	text-align: center;
}

.auth__error p {
	margin: 0;
}

/* Разметку внутри рисует Битрикс своим ShowMessage — там <font class="errortext">.
   Тег устаревший, но чужой: перекрашиваем его правилом, а не правкой ядра. */
.auth__error .errortext {
	color: var(--moved-color-warn-strong);
	font-size: var(--moved-size-text-small);
	font-weight: 600;
	line-height: 1.45;
}

/* Хорошая новость над формой: «письмо отправлено», «пароль сменён». Та же
   плашка, что у сообщения, но зелёная: это итог, а не указание. Битрикс
   выводит такое через ShowMessage тегом <font class="notetext">. */
.auth__notice {
	max-width: 26rem;
	margin: 28px auto 20px;
	padding: 12px 16px;
	border: 1px solid var(--moved-color-ok);
	border-radius: var(--moved-radius);
	background-color: var(--moved-color-ok-soft);
	text-align: center;
}

.auth__notice p {
	margin: 0;
}

.auth__notice .notetext {
	color: var(--moved-color-ok-strong);
	font-size: var(--moved-size-text-small);
	font-weight: 600;
	line-height: 1.45;
}

/* Пояснение под полем — мелко и приглушённо, чтобы не спорить с подписью. */
.auth__hint {
	color: var(--moved-color-muted);
	font-size: var(--moved-size-text-small);
	line-height: 1.45;
}

/* Одна ссылка вместо формы — когда форма своё сделала. */
.auth__links--center {
	justify-content: center;
}

.auth__captcha {
	display: block;
	margin-bottom: 8px;
	border-radius: var(--moved-radius);
}

.auth__signed {
	margin: 0;
	text-align: center;
}

.auth__signed-login {
	color: var(--moved-color-muted);
}

/* Вступление главной: h1 страницы и абзац-представление под ним. Палитра та же,
   что у заголовков разделов ниже, — тёмный сине-серый и брендовый акцент, поэтому
   отдельных цветов здесь не заводим. */
.home-intro {
	margin-bottom: 36px;
}

.home-intro__title {
	margin: 0 0 18px;
	color: var(--moved-color-heading);
	/* Токен шкалы h1: 32 на узком экране, 56 на широком. */
	font-size: var(--moved-size-title-page);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.04em;
	/* Строки выравниваются по длине — иначе на части ширин в переносе остаётся
	   висячее слово. */
	text-wrap: balance;
}

.home-intro__accent {
	color: var(--moved-color-brand);
}

.home-intro__lead {
	max-width: 72rem;
	margin: 0;
	color: var(--moved-color-muted);
	font-size: var(--moved-size-text-base);
	line-height: 1.7;
	text-wrap: pretty;
}

/* Имена авторов и название проекта выделены цветом основного текста, а не только
   насыщенностью: на сером абзаце одной жирности мало, чтобы их заметить. */
.home-intro__lead strong {
	color: var(--moved-color-text);
	font-weight: 700;
}

@media (max-width: 575.98px) {
	.home-intro {
		margin-bottom: 28px;
	}

	.home-intro__lead {
		font-size: var(--moved-size-text-base);
		line-height: 1.6;
	}

	/* Та же уступка узкому экрану, что и у текста главной: они одного роста. */
	.section-banner__text {
		font-size: var(--moved-size-text-base);
		line-height: 1.6;
	}

	.section-banner__title {
		margin-bottom: 20px;
	}
}

/* Навигационная цепочка над заголовком статьи и рубрики: «Статьи › Азия».
   Тише даты под заголовком — это подсказка, откуда пришёл читатель, а не
   часть заголовка. Ссылки без подчёркивания до наведения: строка короткая,
   и то, что это ссылки, понятно по разделителю. */
.crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	margin-bottom: 12px;
	color: var(--moved-color-muted);
	font-size: var(--moved-size-text-small);
	line-height: 1.4;
}

.crumbs__link {
	color: inherit;
	text-decoration: none;
}

.crumbs__link:hover,
.crumbs__link:focus-visible {
	color: var(--moved-color-accent);
	text-decoration: underline;
}

.crumbs__sep {
	opacity: 0.6;
}

/* Шапка рубрики: обложка во всю полосу и вступление под ней. Появляется, только
   если у раздела заполнили картинку или описание. */
.section-banner {
	margin-bottom: 36px;
}

/* Название рубрики. Своего шрифта не задаём намеренно: пусть это будет тот же
   h1, что у статьи, — размер, начертание и интерлиньяж приходят из базового
   слоя. Заголовок страницы в блоге должен выглядеть одинаково, на какой бы
   странице блога он ни стоял. */
.section-banner__title {
	margin: 0 0 28px;
}

.section-banner__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--moved-radius-card);
}

/* Вступление набрано ровно тем же, что и текст под заголовком главной: это одна
   и та же роль — короткое пояснение под крупным заголовком. */
.section-banner__text {
	margin-top: 22px;
	color: var(--moved-color-muted);
	font-size: var(--moved-size-text-base);
	line-height: 1.7;
	text-wrap: pretty;
}

.section-banner__text strong {
	color: var(--moved-color-text);
	font-weight: 700;
}

.section-banner__text p {
	margin: 0 0 12px;
}

.section-banner__text p:last-child {
	margin-bottom: 0;
}

.section-head {
	margin-bottom: 24px;
}

.section-head__eyebrow {
	margin: 0 0 6px;
	color: var(--moved-color-eyebrow);
	font-size: var(--moved-size-text-small);
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.section-head__title {
	margin: 0;
	color: var(--moved-color-heading);
	font-size: var(--moved-size-title-block);
	font-weight: 800;
	line-height: 0.98;
	letter-spacing: -0.05em;
}

.section-head__accent {
	color: var(--moved-color-brand);
}

/* «Главные материалы»: слева крупная карточка, справа три компактные. */
.popular {
	margin-top: 56px;
}

.popular__showcase {
	display: grid;
	grid-template-columns: minmax(0, 1.14fr) minmax(320px, 0.86fr);
	gap: 28px;
	padding: 26px;
	border: 1px solid var(--moved-color-border);
	border-radius: var(--moved-radius-card);
	background-color: var(--moved-color-bg);
	box-shadow: var(--moved-shadow-soft);
}

.popular-feature,
.popular-item {
	color: inherit;
	text-decoration: none;
}

.popular-feature {
	display: grid;
	gap: 16px;
	align-content: start;
}

.popular-feature__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 1.44;
	border-radius: var(--moved-radius);
	background-color: var(--moved-color-border);
}

.popular-feature__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.popular-feature__body,
/* Текстовая колонка объявлена мерой для своей строки меты: рядом стоит
   уменьшённая обложка, и колонка бывает вдвое уже самой карточки. */
.popular-item__body {
	container-type: inline-size;
	display: grid;
	gap: 8px;
	min-width: 0;
}

/* Узкая колонка: время чтения уходит.
   Здесь, в отличие от карточки ленты, уступать нечему — рубрики в строке нет,
   а дата и просмотры стояли тут раньше и должны остаться. Уходит то, что
   пришло последним и о чём в двух шагах написано на самой странице статьи. */
@container (max-width: 13rem) {
	.popular-item__meta > .popular-item__reading,
	.popular-item__meta > .popular-item__dot:has(+ .popular-item__reading) {
		display: none;
	}
}

.popular-feature__title,
.popular-item__title {
	color: var(--moved-color-heading);
	font-size: var(--moved-size-title-teaser);
	font-weight: 800;
	letter-spacing: -0.03em;
}

.popular-feature__title {
	line-height: 1.14;
}

.popular-item__title {
	line-height: 1.16;
}

/* Дата и просмотры одной строкой. Обёртка нужна ещё и раскладке: тело карточки
   разложено сеткой, и без неё число встало бы отдельной строкой под датой. */
/* Здесь рубрики в строке нет — только дата, время чтения и просмотры, — и все
   три части короткие. Перенос оставлен на самый узкий случай, а зазор уменьшен
   заодно с карточкой ленты: строки одинаковые и должны дышать одинаково. */
.popular-feature__meta,
.popular-item__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.popular-feature__meta > *,
.popular-item__meta > * {
	flex: none;
}

.popular-feature__date,
.popular-item__date,
.popular-feature__dot,
.popular-item__dot,
.popular-feature__views,
.popular-item__views {
	color: var(--moved-color-muted);
	font-size: var(--moved-size-text-small);
}

.popular-feature__section,
.popular-item__section {
	color: var(--moved-color-brand-strong);
	font-size: var(--moved-size-text-small);
}

/* Анонс. Готовится тем же помощником и той же длины, что в ленте, поэтому и
   выглядит так же — приглушённый текст под заголовком. */
.popular-feature__excerpt,
.popular-item__excerpt {
	color: var(--moved-color-muted);
	font-size: var(--moved-size-text-base);
	line-height: 1.55;
}

/* В компактной карточке текст мельче: колонка под него узкая, и на базовом кегле
   анонс занимал бы больше места, чем сам заголовок. */
.popular-item__excerpt {
	font-size: var(--moved-size-text-small);
}

.popular__list {
	display: grid;
	gap: 16px;
	align-content: start;
}

/* Миниатюра прижата к верху, а не по центру: с появлением анонса текстовая колонка
   стала выше, и по центру картинка провисала бы напротив середины абзаца. */
.popular-item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 110px;
	align-items: start;
	gap: 16px;
}

/* Разделитель между соседними, но не перед первой. */
.popular-item + .popular-item {
	padding-top: 16px;
	border-top: 1px solid var(--moved-color-border);
}

.popular-item__thumb {
	display: block;
	overflow: hidden;
	aspect-ratio: 1;
	border-radius: var(--moved-radius);
	background-color: var(--moved-color-border);
}

.popular-item__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.popular-feature:hover .popular-feature__title,
.popular-item:hover .popular-item__title {
	color: var(--moved-color-brand-strong);
}

@media (max-width: 991.98px) {
	.popular__showcase {
		grid-template-columns: minmax(0, 1fr);
		padding: 20px;
	}
}

/* Ссылка на полную ленту под выборкой на главной. */
.home-more {
	margin: 8px 0 0;
	text-align: center;
}

/* Карточка объявлена мерой для своего содержимого: правила внутри смотрят
   на её ширину, а не на ширину окна.
   Так и надо: в одном и том же окне карточка бывает разной — в ленте их три
   в ряд, в «Ещё почитать» три, на узком экране одна во всю ширину. Привяжи мы
   правила к окну, пришлось бы держать список полос вроде «от 992 до 1300»
   и переписывать его при каждой правке сетки. */
.blog-card {
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--moved-color-border);
	border-radius: var(--moved-radius-card);
	background-color: var(--moved-color-bg);
	transition: box-shadow var(--moved-transition), transform var(--moved-transition);
}

/* Узкая карточка: рубрика из строки меты уходит.
   Четыре части в неё не помещаются никак — даже сократи мы дату до «23 авг»,
   не хватает полусотни точек. Уступает рубрика, и она же — единственная часть,
   которую читателю есть где взять: та же рубрика стоит в меню над лентой
   и открывается со страницы самой статьи. Дата, время чтения и просмотры
   больше нигде в карточке не написаны.
   Разделитель перед рубрикой уходит вместе с ней — иначе он остался бы
   висеть после даты. */
@container (max-width: 25rem) {
	.blog-card__meta > .blog-card__section,
	.blog-card__meta > .blog-card__dot:has(+ .blog-card__section) {
		display: none;
	}
}

.blog-card:hover,
.blog-card:focus-within {
	transform: translateY(-2px);
	box-shadow: var(--moved-shadow-card);
}

/* Обложка обрезается по фиксированной пропорции: у статей она разного размера,
   а карточки должны стоять ровным рядом. */
.blog-card__cover {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.blog-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.blog-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 20px;
}

/* Подпись автора: фото и имя. Используется и в карточках, и под заголовком статьи. */
.author {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 10px;
}

.author__photo {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
}

.author__name {
	font-weight: 700;
	line-height: 1.2;
}

.author--card .author__name {
	font-size: var(--moved-size-text-small);
}

/* Имя — ссылка на страницу автора. Выглядит как было, ссылкой становится
   под курсором: подпись у статьи не должна пестрить подчёркиванием. */
.author__name--link {
	color: inherit;
	text-decoration: none;
}

.author__name--link:hover,
.author__name--link:focus-visible {
	color: var(--moved-color-accent);
	text-decoration: underline;
}

/* Под заголовком статьи подпись крупнее. Профессия во второй строке — везде. */
.author--article {
	margin: 0 0 24px;
}

.author--article .author__photo {
	width: 44px;
	height: 44px;
}

.author__meta {
	display: grid;
}

/* Профессия из карточки пользователя. Обычным начертанием и в тон дате и описанию:
   это уточнение к имени, а не второй заголовок. Вес задан явно — подпись лежит
   внутри имени по вёрстке, и наследованный жирный тут был бы не виден в коде. */
.author__profession {
	color: var(--moved-color-muted);
	font-size: var(--moved-size-text-small);
	font-weight: 400;
	line-height: 1.3;
}

/* Дата, рубрика и просмотры в одной строке. Части склеиваются разделителем в
   вёрстке, поэтому при отсутствии любой из них висящей точки не остаётся. */
/* Строка меты: дата, рубрика, время чтения, просмотры.
   Частей стало четыре, и на карточке средней ширины они перестали помещаться —
   просмотры уезжали на вторую строку, отрываясь от остального.
   Уступает рубрика: у неё одной есть чем поступиться, и подрезанное название
   читатель узнаёт — оно же стоит в меню над лентой. Но не до бесконечности:
   сжатая до буквы рубрика хуже переноса, поэтому у неё есть предел, а строке
   оставлена возможность перенестись, если и с ним ничего не выходит. */
.blog-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0 0 8px;
	color: var(--moved-color-muted);
	font-size: var(--moved-size-text-small);
}

/* Дата, метки и разделители не сжимаются: сжатая дата переносится по словам
   и всё равно ломает строку, а метки внутри себя перенос уже запрещают. */
.blog-card__meta > * {
	flex: none;
}

/* Предел сжатия, но не ширина.
   Просто min-width здесь не годится: он задаёт коробке ширину и на коротком
   названии — «Азия» растягивалась до тех же 4.5rem, и справа от неё зияла
   дыра до следующего разделителя. min() с max-content берёт предел только
   тогда, когда название и правда длиннее: короткое остаётся по своей ширине,
   длинное ужимается до предела и дальше уступает переносу. */
.blog-card__meta > .blog-card__section {
	flex: 0 1 auto;
	min-width: min(4.5rem, max-content);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Разделитель — отдельный элемент разметки, а не псевдоэлемент ссылки: иначе точка
   оказывается внутри неё и становится кликабельной вместе с названием рубрики. */
.blog-card__dot {
	color: var(--moved-color-muted);
}

/* Точка, за которой строка перенеслась, — см. meta-dots.js. Место за ней
   остаётся, чтобы строка не перестроилась. */
.is-dangling {
	visibility: hidden;
}

/* Просмотры: значок и число рядом. Блок общий — он выводится в карточках ленты,
   в блоке «Ещё почитать», в герое главной, на странице статьи и в редакции,
   поэтому своего цвета и размера не задаёт и берёт их у строки, в которой стоит.

   nowrap обязателен: без него значок остаётся в конце строки, а число уезжает
   на следующую. Внутри числа перенос закрыт неразрывным пробелом в разрядах. */
/* Правило общее с меткой времени чтения: в строке меты они стоят рядом, об одном
   и том же материале, и выглядеть должны парой. Разводить их по виду значило бы
   намекнуть, что это разного рода сведения. */
.views,
.reading {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

/* Размер значка привязан к шрифту строки, а не задан в пикселях: строка меты
   в карточке и в герое набрана разным кеглем, и значок должен идти за ней.
   flex: none — иначе во flex-строке значок сжимается в щель. */
.views__icon,
.reading__icon {
	flex: none;
	width: 1em;
	height: 1em;
	opacity: 0.75;
}

/* Рубрика — ссылка на свой раздел. Подчёркивание убрано: в строке с датой оно
   спорило бы с ней за внимание, поэтому выделяем только цветом. */
.blog-card__section {
	color: var(--moved-color-brand-strong);
	text-decoration: none;
}

a.blog-card__section:hover,
a.blog-card__section:focus-visible {
	text-decoration: underline;
}

/* Заголовок карточки крупнее анонса ровно настолько, чтобы читаться первым, —
   и не больше. В ленте важен не отдельный заголовок, а то, чтобы взгляд шёл
   по карточкам подряд; заголовок в полтора раза выше текста этому мешает. */
.blog-card__title {
	margin: 0 0 8px;
	font-size: var(--moved-size-text-lead);
	font-weight: 600;
	line-height: 1.3;
}

.blog-card__link {
	color: var(--moved-color-text);
	text-decoration: none;
}

.blog-card__link:hover,
.blog-card__link:focus-visible {
	color: var(--moved-color-brand-strong);
}

.blog-card__excerpt {
	color: var(--moved-color-muted);
}

.blog-card__excerpt :last-child {
	margin-bottom: 0;
}

/* Страница одной статьи. Ширина ограничена не сеткой, а удобочитаемой длиной строки. */
.article {
	max-width: 46rem;
	margin: 0 auto;
}

/* Название статьи — тише витринного h1: в колонке текста 50 точек ложились
   в три строки. Шкала своя, см. токены. */
.article__title {
	margin-bottom: 8px;
	font-size: var(--moved-size-title-article);
	line-height: 1.15;
}

/* Дата и просмотры под заголовком статьи — той же строкой и тем же разделителем,
   что и в карточках ленты. */
.article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 24px;
	color: var(--moved-color-muted);
	font-size: var(--moved-size-text-small);
}

.article__cover {
	width: 100%;
	height: auto;
	margin-bottom: 32px;
	border-radius: var(--moved-radius-card);
}

/* Текст статьи крупнее интерфейса, а абзацы — с просветом больше вендорного:
   размеры сняты с Дзена (см. токены). Списки и цитаты получают тот же просвет,
   чтобы в теле статьи ритм был один. Высота строки остаётся общей, 1.6:
   при 17 пикселях это 27 — как раз просвет между строками, при котором
   длинный абзац на телефоне не сливается. */
.article__body {
	font-size: var(--moved-size-text-article);
}

.article__body p,
.article__body ul,
.article__body ol {
	margin-bottom: var(--moved-space-paragraph);
}

/* Вложенный список — часть пункта, просвет ему не положен: Bootstrap так
   и делает, но его правило слабее нашего и без этой строки проиграло бы. */
.article__body li > ul,
.article__body li > ol {
	margin-bottom: 0;
}

/* Заголовки разделов внутри текста: своя шкала и просвет сверху вдвое больше
   абзацного — заголовок открывает то, что под ним, а не закрывает то, что
   над. Первый блок в теле — заголовок, снимок, галерея, ролик — стоит сразу
   под автором или обложкой, и свой просвет сверху ему не нужен: он удваивал
   отступ под автором. */
.article__body h2 {
	margin: var(--moved-space-heading) 0 12px;
	font-size: var(--moved-size-title-article-section);
	line-height: 1.15;
}

.article__body h3 {
	margin: var(--moved-space-heading-small) 0 10px;
	font-size: var(--moved-size-title-article-sub);
	line-height: 1.3;
}

.article__body > :first-child {
	margin-top: 0;
}

/* На телефоне текст статьи на пункт крупнее — как в Дзене: экран ближе,
   но меньше, и десктопные 17 читаются как 15. Порог — тот же, на котором
   лента переходит в одну колонку. */
@media (max-width: 767px) {
	.article__body {
		font-size: var(--moved-size-text-article-touch);
	}
}

.article__body img {
	height: auto;
	border-radius: var(--moved-radius);
}

.article__back {
	max-width: 46rem;
	margin: 40px auto 0;
}

/* Цитата. Размеры и отступы приходят из .blockquote Bootstrap — здесь только
   фирменное оформление, чтобы не переопределять вендорные правила своими селекторами.
   Брендовая антиква из --moved-font-brand применена именно здесь: это первое место
   в шаблоне, где ей есть содержательное применение. */
.blockquote {
	margin: 32px 0;
	padding: 4px 0 4px 24px;
	border-left: 3px solid var(--moved-color-brand);
	font-family: var(--moved-font-brand);
	font-size: var(--moved-size-title-card);
	font-style: italic;
	line-height: 1.35;
}

/* Bootstrap сам подставляет тире перед источником через ::before. */
.blockquote-footer {
	margin-top: 12px;
	color: var(--moved-color-muted);
	font-family: var(--moved-font-text);
	font-size: var(--moved-size-text-small);
	font-style: normal;
}

/* Внутритекстовая цитата в русской типографике: внешние кавычки «ёлочки»,
   вложенные — „лапки“. Браузер подставляет их сам по вложенности. */
q {
	quotes: "«" "»" "„" "“";
}

/* Блок соцсетей в подвале. Иконки цветные и с собственным фоном, поэтому никакой
   подложки под них не подкладываем. */
.socials {
	margin-bottom: 24px;
	text-align: center;
}

.socials__title {
	margin: 0 0 12px;
	font-size: var(--moved-size-text-lead);
	font-weight: 700;
}

.socials__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.socials__link {
	display: block;
	transition: transform var(--moved-transition);
}

.socials__link:hover,
.socials__link:focus-visible {
	transform: translateY(-2px);
}

.socials__icon {
	display: block;
	width: 36px;
	height: 36px;
}

/* Плашка про cookie. В разметке она есть всегда, но показывается только классом
   is-visible — иначе мелькала бы у тех, кто её уже закрывал. */
.cookie-banner {
	position: fixed;
	left: 50%;
	bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
	z-index: 1050;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 20px;
	width: min(1100px, calc(100vw - 32px));
	padding: 18px 20px;
	border: 1px solid var(--moved-color-border);
	border-radius: var(--moved-radius-card);
	background-color: var(--moved-color-bg);
	box-shadow: var(--moved-shadow-card);
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(16px);
	transition: opacity var(--moved-transition), transform var(--moved-transition), visibility var(--moved-transition);
}

.cookie-banner.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.cookie-banner__icon {
	width: 48px;
	height: 48px;
}

.cookie-banner__text {
	margin: 0;
	font-size: var(--moved-size-text-small);
	line-height: 1.45;
}

.cookie-banner__title {
	display: block;
	font-size: var(--moved-size-text-base);
}

.cookie-banner__link {
	color: var(--moved-color-brand-strong);
}

.cookie-banner__button {
	padding: 12px 28px;
	border: 0;
	border-radius: var(--moved-radius-pill);
	background-color: var(--moved-color-brand);
	color: var(--moved-color-on-media);
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--moved-transition);
}

.cookie-banner__button:hover,
.cookie-banner__button:focus-visible {
	background-color: var(--moved-color-brand-strong);
}

/* Телефон: плашка — заголовок, ссылка и кнопка, около 80 px. Целиком она
   закрывала почти половину экрана 320 × 640: значок, три строки пояснения
   и кнопка во всю ширину. Пояснение — по ссылке «Подробнее». */
@media (max-width: 575.98px) {
	.cookie-banner {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 12px;
		padding: 12px 14px;
	}

	.cookie-banner__icon,
	.cookie-banner__details {
		display: none;
	}

	.cookie-banner__title {
		font-size: var(--moved-size-text-small);
	}

	.cookie-banner__button {
		min-height: 44px;
		padding: 10px 16px;
	}
}

/* Ссылка на документы в подвале: тот же приглушённый регистр, что и копирайт. */
/* Ряд правовых ссылок. Flex с переносом, а не строка текста: так на узком экране
   ссылки встают друг под друга целиком, а не рвутся посередине названия. */
.page__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px 14px;
	margin: 0 0 10px;
}

.page__legal-link {
	color: var(--moved-color-footer-text);
	font-size: var(--moved-size-text-small);
	opacity: 0.85;
}

.page__legal-dot {
	color: var(--moved-color-footer-text);
	font-size: var(--moved-size-text-small);
	opacity: 0.4;
}

/* Ниже 576 ссылки стоят столбиком, и точки между ними теряют смысл — они
   разделяли бы строки, а не соседей в строке. */
@media (max-width: 575.98px) {
	.page__legal {
		flex-direction: column;
		gap: 14px;
	}

	.page__legal-dot {
		display: none;
	}

	.page__contacts {
		row-gap: 14px;
	}
}

/* Контакты: подпись жирная, значение обычным начертанием. Иконки нарисованы
   currentColor и наследуют цвет подвала, поэтому смена темы их не сломает. */
.page__contacts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 24px;
	margin: 0 0 10px;
	color: var(--moved-color-footer-text);
	font-size: var(--moved-size-text-small);
}

.page__contact {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.page__contact-icon {
	flex: 0 0 auto;
	opacity: 0.7;
}

.page__contact-link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.page__copyright {
	margin: 0;
	color: var(--moved-color-footer-text);
	font-size: var(--moved-size-text-base);
	text-align: center;
}

/* Ссылки высотой в строку — крошки, имя автора, рубрика в мете, заголовок
   карточки в одну строку, подвал, плашка cookie, ссылки формы входа — были
   17–24 точки: пальцем не попасть. Поле нажатия растёт вверх и вниз
   на 10 точек, а отрицательные поля возвращают раскладку на место:
   на вид ничего не меняется. У строчной ссылки поля сверху и снизу
   строку и так не раздвигают — правило годится для обоих случаев. */
.crumbs__link,
.author__name--link,
.hero-post__section,
.blog-card__section,
.blog-card__link,
.author-card__name a,
.author-page__rubric a,
.page__legal-link,
.page__contact-link,
.cookie-banner__link,
.auth__link {
	padding-block: 10px;
	margin-block: -10px;
}

/* End */


/* Start:/local/templates/moved/assets/css/pages/search.css?17915307427673*/
/* Поиск по блогу: окно над страницей и выдача.

   Одни и те же карточки рисуются в окне и на странице /search/ — там и там
   человек смотрит на один и тот же список, и разводить их по виду было бы
   странно. Поэтому .search-card живёт отдельно от .search и не знает, где его
   показывают. */

/* --- Окно --- */

.search[hidden] {
	display: none;
}

.search {
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 24px 16px;
	overflow-y: auto;
}

/* Затемнение отдельным слоем, а не тенью на окне: по нему нажимают, чтобы
   закрыть, и оно должно принимать нажатие само. */
.search__backdrop {
	position: fixed;
	inset: 0;
	background-color: var(--moved-color-veil);
}

.search__window {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 44rem;
	margin: 6vh 0 24px;
	padding: 28px;
	border-radius: var(--moved-radius-card);
	background-color: var(--moved-color-bg);
	box-shadow: var(--moved-shadow-card);
}

.search__close {
	position: absolute;
	top: 16px;
	right: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--moved-color-muted);
	cursor: pointer;
	transition: background-color var(--moved-transition), color var(--moved-transition);
}

.search__close:hover,
.search__close:focus-visible {
	background-color: var(--moved-color-surface-muted);
	color: var(--moved-color-heading);
}

.search__title {
	margin: 0 0 16px;
	color: var(--moved-color-heading);
	font-size: var(--moved-size-title-card);
	font-weight: 700;
}

.search__form {
	margin: 0;
}

/* Поле, значок и крестик — одной коробкой: значок внутри поля, а не рядом,
   иначе он уезжает от него на разной ширине экрана. */
.search__field {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 14px;
	border: 1px solid var(--moved-color-border);
	border-radius: var(--moved-radius);
	background-color: var(--moved-color-bg);
	transition: border-color var(--moved-transition), box-shadow var(--moved-transition);
}

.search__field:focus-within {
	border-color: var(--moved-color-brand);
	box-shadow: 0 0 0 4px var(--moved-color-focus-ring);
}

.search__field-icon {
	flex: 0 0 auto;
	color: var(--moved-color-muted);
}

.search__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 13px 0;
	border: 0;
	background: none;
	color: var(--moved-color-text);
	font-family: inherit;
	font-size: var(--moved-size-text-base);
}

.search__input:focus {
	outline: none;
}

/* Системный крестик у type="search" в вебките рисуется поверх нашего. */
.search__input::-webkit-search-cancel-button {
	display: none;
}

.search__clear {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--moved-color-muted);
	cursor: pointer;
}

.search__clear:hover,
.search__clear:focus-visible {
	background-color: var(--moved-color-surface-muted);
	color: var(--moved-color-heading);
}

.search__clear[hidden] {
	display: none;
}

/* --- Подсказки-рубрики --- */

.search__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

.search__chip {
	padding: 6px 14px;
	border: 1px solid var(--moved-color-border);
	border-radius: var(--moved-radius-pill);
	background-color: var(--moved-color-bg);
	color: var(--moved-color-eyebrow);
	font-family: inherit;
	font-size: var(--moved-size-text-small);
	cursor: pointer;
	transition: border-color var(--moved-transition), background-color var(--moved-transition), color var(--moved-transition);
}

.search__chip:hover,
.search__chip:focus-visible {
	border-color: var(--moved-color-brand);
	color: var(--moved-color-brand-strong);
}

.search__chip--current {
	border-color: var(--moved-color-brand);
	background-color: var(--moved-color-brand);
	color: var(--moved-color-bg);
}

/* --- Выдача --- */

.search__results {
	display: grid;
	gap: 4px;
	margin-top: 18px;
}

.search__note {
	margin: 18px 0 0;
	color: var(--moved-color-muted);
	font-size: var(--moved-size-text-small);
}

.search__note[hidden] {
	display: none;
}

/* Карточка. Общая для окна и страницы поиска. */
.search-card {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr);
	align-items: start;
	gap: 14px;
	padding: 12px;
	border-radius: var(--moved-radius);
	color: inherit;
	text-decoration: none;
	transition: background-color var(--moved-transition);
}

/* У статьи без обложки карточка не должна съезжать: колонка под снимок
   схлопывается, и текст начинается там же, где у соседей начинается снимок. */
.search-card:not(:has(.search-card__cover)) {
	grid-template-columns: minmax(0, 1fr);
}

.search-card:hover,
.search-card:focus-visible {
	background-color: var(--moved-color-surface-muted);
}

.search-card__cover {
	width: 76px;
	height: 76px;
	border-radius: var(--moved-radius-small);
	object-fit: cover;
}

.search-card__body {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.search-card__title {
	color: var(--moved-color-heading);
	font-size: var(--moved-size-text-base);
	font-weight: 700;
	line-height: 1.3;
}

.search-card__meta {
	color: var(--moved-color-muted);
	font-size: var(--moved-size-text-caption);
}

.search-card__excerpt {
	color: var(--moved-color-text);
	font-size: var(--moved-size-text-small);
	line-height: 1.45;
}

/* Переход к полной выдаче. Во всю ширину и по центру: это не ещё одна карточка
   в списке, а выход из него, и выглядеть одинаково с карточками ему нельзя.
   Отбит чертой сверху — ею список и заканчивается. */
.search-more {
	display: block;
	margin-top: 10px;
	padding: 13px 16px;
	border-top: 1px solid var(--moved-color-border);
	color: var(--moved-color-brand-strong);
	font-size: var(--moved-size-text-small);
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: background-color var(--moved-transition), color var(--moved-transition);
}

.search-more:hover,
.search-more:focus-visible {
	background-color: var(--moved-color-surface-muted);
	color: var(--moved-color-brand-strong);
}

/* Страница под окном не должна прокручиваться: иначе, закрыв поиск, человек
   оказывается не там, где его открыл. */
body.is-search-open {
	overflow: hidden;
}

/* --- Страница поиска --- */

.search-page__form {
	max-width: 34rem;
	margin: 0 0 20px;
}

.search-page__count {
	margin: 0 0 18px;
	color: var(--moved-color-muted);
	font-size: var(--moved-size-text-small);
}

.search-page__results {
	display: grid;
	gap: 4px;
	max-width: 44rem;
}

@media (max-width: 575.98px) {
	.search__window {
		margin-top: 0;
		padding: 20px 16px 24px;
	}

	.search-card {
		grid-template-columns: 56px minmax(0, 1fr);
	}

	.search-card__cover {
		width: 56px;
		height: 56px;
	}
}

/* End */


/* Start:/local/templates/moved/template_styles.css?1791530730238*/
/* Битрикс подключает этот файл автоматически для шаблонов сайта.
   Проектные стили живут послойно в assets/css/, поэтому здесь пусто. */

/* End */
/* /local/templates/moved/assets/css/pages/authors.css?17915307424450 */
/* /local/templates/moved/assets/vendor/bootstrap/5.3.8/css/bootstrap-moved.min.css?179153074920607 */
/* /local/templates/moved/assets/css/01-tokens.css?179153074013961 */
/* /local/templates/moved/assets/css/02-base.css?17915307401105 */
/* /local/templates/moved/assets/css/03-layout.css?17915307403932 */
/* /local/templates/moved/assets/css/04-components.css?179153074053717 */
/* /local/templates/moved/assets/css/pages/search.css?17915307427673 */
/* /local/templates/moved/template_styles.css?1791530730238 */