/*
 * «Відомі» — власні блоки й доводка скіна Osnova.
 *
 * Напрямок: «Портретна галерея». Патерни — H7 «Іменна дошка», S7
 * «Експлікація», B7 «Гравіювання», картки C24 «Іменна картка», C25 «Досьє»,
 * C26 «Паспарту», стрічка `.osn-card--vitryna`.
 *
 * Правила, яких файл дотримується (ті самі, що в батька):
 *   — жодного !important: наші файли стають у чергу після скіна;
 *   — жодних #id у селекторах;
 *   — жодного :link / :visited;
 *   — жодного захардкодженого кольору — усе з токенів;
 *   — три брейкпоінти, завжди max-width: 1024 / 768 / 540.
 *
 * Зміст:
 *   1  Загальне: типографіка, бренд
 *   2  Заголовок секції S7
 *   3  Бейдж B7
 *   4  Зображення: квадрат, паспарту, монограма
 *   5  Іменна дошка H7
 *   6  Іменна картка C24
 *   7  Зали галереї
 *   8  Паспарту C26
 *   9  Досьє C25 і блок «Ще одна історія»
 *  10  Стрічка: .osn-card--vitryna
 *  11  Віджети
 *  12  Сторінка життєпису
 *  13  Порожній стан
 *  14  Адаптив
 */

/* ==========================================================================
   1. Загальне
   ========================================================================== */

.osn-single__title,
.osn-archhead__title,
.osn-card__title,
.osn-widget__title,
.osn-postnav__title,
.osn-empty__title {
	font-family: var(--osn-font-display);
	font-weight: 600;
	letter-spacing: -0.01em;
}

.osn-single__title {
	line-height: 1.14;
}

.osn-prose h2,
.osn-prose h3 {
	font-family: var(--osn-font-display);
	font-weight: 600;
	/* Якір із змісту не має ховатися під липкою шапкою чи смугою прогресу. */
	scroll-margin-top: calc(var(--osn-space) * 9);
}

/* Бренд у шапці: логотип-табличка */

.vdmi-brand__link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.vdmi-brand__logo {
	display: block;
	width: auto;
	height: var(--osn-logo-height);
}

/* ==========================================================================
   2. Заголовок секції — S7 «Експлікація»
   ========================================================================== */

.vdmi-shead {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
	align-items: end;
	gap: calc(var(--osn-space) * 4);
	margin-bottom: calc(var(--osn-space) * 4);
	padding-bottom: calc(var(--osn-space) * 2);
	border-bottom: var(--vdmi-rule) solid var(--osn-line-strong);
}

/* Підзаголовка немає — права колонка порожня, лінія висіла б ні на чому. */
.vdmi-shead--solo {
	grid-template-columns: minmax(0, 1fr);
}

.vdmi-shead__main {
	min-width: 0;
}

.vdmi-shead__kicker {
	margin: 0 0 calc(var(--osn-space) * 0.75);
	font-family: var(--osn-font-body);
	font-size: var(--osn-fs-kicker);
	font-weight: 600;
	letter-spacing: var(--osn-track-caps);
	text-transform: uppercase;
	color: var(--vdmi-bronze);
}

.vdmi-shead__title {
	margin: 0;
	font-family: var(--osn-font-display);
	font-size: 32px;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--osn-ink);
}

.vdmi-shead__note {
	display: grid;
	gap: var(--osn-space);
	justify-items: start;
	min-width: 0;
	padding-left: calc(var(--osn-space) * 3);
	border-left: var(--vdmi-hair) solid var(--vdmi-bronze-line);
}

.vdmi-shead__sub {
	margin: 0;
	font-size: var(--osn-fs-small);
	line-height: 1.5;
	color: var(--osn-ink-muted);
}

.vdmi-shead__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	font-size: var(--osn-fs-meta);
	font-weight: 600;
	color: var(--osn-accent);
	text-decoration: none;
}

.vdmi-shead__link:hover,
.vdmi-shead__link:focus-visible {
	color: var(--osn-accent-hover);
	text-decoration: underline;
}

/* ==========================================================================
   3. Бейдж рубрики — B7 «Гравіювання»
   ========================================================================== */

.vdmi-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--osn-font-display);
	/* Курсив у нижньому регістрі — усі шість попередніх тем серії ставили
	   рубрику капсами, і саме за цим картки різних сайтів упізнавалися. */
	font-style: italic;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--osn-accent);
	text-decoration: none;
}

.vdmi-badge__dash {
	flex: 0 0 auto;
	width: 18px;
	height: var(--vdmi-hair);
	background: var(--vdmi-bronze-line);
}

a.vdmi-badge:hover,
a.vdmi-badge:focus-visible {
	color: var(--osn-accent-hover);
}

a.vdmi-badge:hover .vdmi-badge__dash,
a.vdmi-badge:focus-visible .vdmi-badge__dash {
	background: var(--osn-accent-hover);
}

/* ==========================================================================
   4. Зображення
   ========================================================================== */

.vdmi-media {
	display: block;
	overflow: hidden;
	background: var(--osn-surface-alt);
}

.vdmi-media__img {
	display: block;
	width: 100%;
	height: 100%;
	/*
	 * Обличчя на портреті майже завжди вище за геометричний центр кадру.
	 * Центрований cover зрізав би маківку й лишав груди.
	 */
	object-fit: cover;
	object-position: 50% 30%;
}

.vdmi-media--square {
	aspect-ratio: 1 / 1;
}

.vdmi-media--mat {
	aspect-ratio: 4 / 3;
}

.vdmi-media--mini {
	width: 64px;
	aspect-ratio: 1 / 1;
}

/* Заглушка з монограмою: сайт про людей, і картка без портрета — звичайна
   ситуація. Сіра пляма читалася б як помилка, монограма — як задум. */
.vdmi-media--blank {
	display: grid;
	place-items: center;
	background: var(--osn-surface-alt);
	border: var(--vdmi-hair) solid var(--osn-line);
}

.vdmi-media__mono {
	font-family: var(--osn-font-display);
	font-size: 2.5rem;
	font-weight: 500;
	line-height: 1;
	color: var(--vdmi-bronze-line);
}

.vdmi-media--mini .vdmi-media__mono {
	font-size: 1.25rem;
}

/* ==========================================================================
   5. Іменна дошка — H7
   ========================================================================== */

.vdmi-plaque {
	padding: calc(var(--osn-space) * 6) 0 0;
}

.vdmi-plaque__board {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--vdmi-portrait);
	align-items: center;
	gap: calc(var(--osn-space) * 6);
	padding: calc(var(--osn-space) * 5);
	background: var(--osn-surface);
	border: var(--vdmi-hair) solid var(--osn-line);
}

.vdmi-plaque__label {
	display: grid;
	gap: calc(var(--osn-space) * 2);
	justify-items: start;
	min-width: 0;
}

.vdmi-plaque__name {
	margin: 0;
	font-family: var(--osn-font-display);
	font-size: 42px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.vdmi-plaque__link {
	color: var(--osn-ink);
	text-decoration: none;
}

.vdmi-plaque__link:hover,
.vdmi-plaque__link:focus-visible {
	color: var(--osn-accent);
}

.vdmi-plaque__rule {
	display: block;
	width: 96px;
	height: var(--vdmi-rule);
	background: var(--vdmi-bronze-line);
}

.vdmi-plaque__lede {
	margin: 0;
	max-width: 54ch;
	font-size: 18px;
	line-height: 1.6;
	color: var(--osn-ink-muted);
}

.vdmi-plaque__portrait {
	min-width: 0;
}

.vdmi-plaque__row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: calc(var(--osn-space) * 3);
	margin: calc(var(--osn-space) * 4) 0 0;
	padding: 0;
	list-style: none;
}

/* ==========================================================================
   6. Іменна картка — C24
   ========================================================================== */

.vdmi-namecard {
	position: relative;
	display: grid;
	gap: calc(var(--osn-space) * 1.5);
	justify-items: start;
	min-width: 0;
}

/*
 * Псевдопосилання накриває всю картку, щоб клікалася вона цілком. Воно
 * приховане від читача з екрана й вилучене з таб-порядку — навігація йде
 * через справжнє посилання в заголовку, яке лежить вище за z-index.
 */
.vdmi-namecard__hit {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.vdmi-namecard .vdmi-media {
	width: 100%;
}

.vdmi-namecard__rule {
	display: block;
	width: 32px;
	height: var(--vdmi-hair);
	background: var(--vdmi-bronze-line);
}

.vdmi-namecard__name {
	position: relative;
	z-index: 2;
	margin: 0;
	font-family: var(--osn-font-display);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.25;
}

.vdmi-namecard__link {
	color: var(--osn-ink);
	text-decoration: none;
}

.vdmi-namecard:hover .vdmi-namecard__link,
.vdmi-namecard__link:focus-visible {
	color: var(--osn-accent);
}

.vdmi-namecard--tight .vdmi-namecard__name {
	font-size: 17px;
}

/* ==========================================================================
   7. Зали галереї
   ========================================================================== */

.vdmi-halls {
	padding: var(--vdmi-block-gap) 0 0;
}

.vdmi-halls__strip {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--osn-space) * 1.5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vdmi-hall {
	display: inline-flex;
	align-items: baseline;
	gap: calc(var(--osn-space) * 1.5);
	min-height: 40px;
	padding: calc(var(--osn-space) * 1.25) calc(var(--osn-space) * 2);
	background: var(--osn-surface);
	border: var(--vdmi-hair) solid var(--osn-line);
	text-decoration: none;
}

.vdmi-hall:hover,
.vdmi-hall:focus-visible {
	border-color: var(--osn-accent);
}

.vdmi-hall__name {
	font-family: var(--osn-font-body);
	font-size: var(--osn-fs-small);
	font-weight: 500;
	color: var(--osn-ink);
	white-space: nowrap;
}

.vdmi-hall__count {
	font-size: var(--osn-fs-meta);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--vdmi-bronze);
}

.vdmi-hall:hover .vdmi-hall__name,
.vdmi-hall:focus-visible .vdmi-hall__name {
	color: var(--osn-accent);
}

/* ==========================================================================
   8. Паспарту — C26
   ========================================================================== */

.vdmi-choice {
	padding: var(--vdmi-block-gap) 0 calc(var(--osn-space) * 2);
}

.vdmi-choice__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: calc(var(--osn-space) * 4);
}

/*
 * Стеля на кількість колонок. Без неї auto-fit при двох картках розтягує
 * кожну до пів контейнера, і паспарту роздувається до 600 px — рівно та
 * вада, на якій обпеклася попередня тема серії з вертикальною афішею.
 */
.vdmi-choice__grid[data-cols="2"] {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 800px;
}

.vdmi-choice__grid[data-cols="3"] {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vdmi-choice__grid[data-cols="4"] {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.vdmi-mat {
	position: relative;
	display: grid;
	gap: calc(var(--osn-space) * 2);
	min-width: 0;
}

.vdmi-mat__hit {
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Сам мат: широкі поля поверхні плюс внутрішня бронзова рамка. */
.vdmi-mat__frame {
	padding: var(--vdmi-mat-pad);
	background: var(--osn-surface);
	border: var(--vdmi-hair) solid var(--osn-line);
}

.vdmi-mat__frame .vdmi-media {
	border: var(--vdmi-hair) solid var(--vdmi-bronze-line);
}

.vdmi-mat__label {
	display: grid;
	gap: var(--osn-space);
	justify-items: start;
	min-width: 0;
}

.vdmi-mat__name {
	position: relative;
	z-index: 2;
	margin: 0;
	font-family: var(--osn-font-display);
	font-size: 21px;
	font-weight: 600;
	line-height: 1.22;
}

.vdmi-mat__link {
	color: var(--osn-ink);
	text-decoration: none;
}

.vdmi-mat:hover .vdmi-mat__link,
.vdmi-mat__link:focus-visible {
	color: var(--osn-accent);
}

.vdmi-mat:hover .vdmi-mat__frame {
	border-color: var(--osn-line-strong);
}

.vdmi-mat__note {
	margin: 0;
	font-size: var(--osn-fs-small);
	line-height: 1.55;
	color: var(--osn-ink-muted);
}

/* ==========================================================================
   9. Досьє C25 і блок «Ще одна історія»
   ========================================================================== */

.vdmi-extra {
	margin-bottom: calc(var(--osn-space) * 6);
	padding-bottom: calc(var(--osn-space) * 5);
	border-bottom: var(--vdmi-hair) solid var(--osn-line);
}

.vdmi-extra__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: calc(var(--osn-space) * 3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vdmi-extra__list {
	display: grid;
	gap: calc(var(--osn-space) * 3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vdmi-dossier {
	display: grid;
	gap: var(--osn-space);
	justify-items: start;
	min-width: 0;
	padding-left: calc(var(--osn-space) * 2.5);
	border-left: var(--vdmi-rule) solid var(--vdmi-bronze-line);
}

.vdmi-dossier__name {
	margin: 0;
	font-family: var(--osn-font-display);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
}

.vdmi-dossier__link {
	color: var(--osn-ink);
	text-decoration: none;
}

.vdmi-dossier__link:hover,
.vdmi-dossier__link:focus-visible {
	color: var(--osn-accent);
}

.vdmi-dossier__note {
	margin: 0;
	font-size: var(--osn-fs-small);
	line-height: 1.55;
	color: var(--osn-ink-muted);
}

/* ==========================================================================
   10. Стрічка — .osn-card--vitryna
   ========================================================================== */

/*
 * Дзеркально до звичного: текст ліворуч, квадратний портрет праворуч.
 * У стрічці читач сканує заголовки, і портрет, поставлений першим, щоразу
 * відкидав би початок рядка на 160 px управо.
 *
 * У розмітці Osnova обкладинка йде першою, тому колонки розставлені явно.
 * Записів без мініатюри це не ламає: другу колонку тримає `auto`, і без
 * зображення вона просто стискається в нуль.
 */
.osn-card--vitryna {
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	gap: calc(var(--osn-space) * 3);
}

.osn-card--vitryna .osn-card__cover {
	grid-column: 2;
	grid-row: 1;
	width: 140px;
	aspect-ratio: 1 / 1;
	background: var(--osn-surface-alt);
	border: var(--vdmi-hair) solid var(--osn-line);
}

.osn-card--vitryna .osn-card__cover img {
	object-position: 50% 30%;
}

.osn-card--vitryna .osn-card__body {
	grid-column: 1;
	grid-row: 1;
}

.osn-card--vitryna .osn-card__title {
	font-size: 24px;
	line-height: 1.2;
}

/*
 * Рубрику в стрічці малює батьківський `osn_post_terms()`, а не наш бейдж —
 * розмітка чужа, тож підганяємо її під B7 тими самими засобами.
 */
.osn-card--vitryna .osn-terms__link {
	font-family: var(--osn-font-display);
	font-style: italic;
	font-size: 15px;
	color: var(--osn-accent);
	text-decoration: none;
}

.osn-card--vitryna .osn-terms__link:hover,
.osn-card--vitryna .osn-terms__link:focus-visible {
	color: var(--osn-accent-hover);
	text-decoration: underline;
}

/* ==========================================================================
   11. Віджети
   ========================================================================== */

.osn-widget__title {
	font-size: 20px;
	padding-bottom: var(--osn-space);
	border-bottom: var(--vdmi-rule) solid var(--vdmi-bronze-line);
}

.vdmi-wlist,
.vdmi-wcats {
	display: grid;
	gap: calc(var(--osn-space) * 2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vdmi-wrow {
	display: grid;
	gap: var(--osn-space);
	min-width: 0;
}

.vdmi-wrow--thumbed {
	grid-template-columns: 64px minmax(0, 1fr);
	align-items: start;
	gap: calc(var(--osn-space) * 1.5);
}

.vdmi-wrow__media {
	display: block;
}

.vdmi-wrow__media .vdmi-media {
	border: var(--vdmi-hair) solid var(--osn-line);
}

.vdmi-wrow__text {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.vdmi-wrow__link {
	font-family: var(--osn-font-display);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--osn-ink);
	text-decoration: none;
}

.vdmi-wrow__link:hover,
.vdmi-wrow__link:focus-visible {
	color: var(--osn-accent);
}

.vdmi-wrow__meta {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--osn-space) * 1.5);
	font-size: var(--osn-fs-meta);
	color: var(--osn-ink-faint);
}

.vdmi-wcats__item {
	border-bottom: var(--vdmi-hair) solid var(--osn-line);
}

.vdmi-wcats__link {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: calc(var(--osn-space) * 2);
	min-height: 40px;
	padding-bottom: calc(var(--osn-space) * 1.5);
	text-decoration: none;
}

.vdmi-wcats__name {
	font-size: var(--osn-fs-small);
	font-weight: 500;
	color: var(--osn-ink);
}

.vdmi-wcats__count {
	font-size: var(--osn-fs-meta);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--vdmi-bronze);
}

.vdmi-wcats__link:hover .vdmi-wcats__name,
.vdmi-wcats__link:focus-visible .vdmi-wcats__name {
	color: var(--osn-accent);
}

/* ==========================================================================
   12. Сторінка життєпису
   ========================================================================== */

/* --- Смуга прогресу --- */

.vdmi-progress {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 60;
	width: 100%;
	height: 3px;
	background: transparent;
	pointer-events: none;
}

.vdmi-progress__fill {
	display: block;
	width: 0;
	height: 100%;
	background: var(--vdmi-bronze-line);
	transform-origin: 0 50%;
}

/* --- Зміст --- */

.vdmi-toc {
	margin: 0 0 calc(var(--osn-space) * 4);
	padding: calc(var(--osn-space) * 3);
	background: var(--osn-surface);
	border: var(--vdmi-hair) solid var(--osn-line);
	border-left: var(--vdmi-rule) solid var(--vdmi-bronze-line);
}

.vdmi-toc__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--osn-space);
}

.vdmi-toc__title {
	margin: 0;
	font-family: var(--osn-font-body);
	font-size: var(--osn-fs-kicker);
	font-weight: 600;
	letter-spacing: var(--osn-track-caps);
	text-transform: uppercase;
	color: var(--vdmi-bronze);
}

.vdmi-toc__toggle {
	min-height: 40px;
	padding: 0;
	font-family: inherit;
	font-size: var(--osn-fs-meta);
	font-weight: 600;
	color: var(--osn-accent);
	background: none;
	border: 0;
	cursor: pointer;
}

.vdmi-toc__list {
	display: grid;
	gap: calc(var(--osn-space) * 1.25);
	margin: calc(var(--osn-space) * 2) 0 0;
	padding: 0;
	list-style: none;
	counter-reset: vdmi-toc;
}

.vdmi-toc__item {
	counter-increment: vdmi-toc;
}

.vdmi-toc__item--h3 {
	padding-left: calc(var(--osn-space) * 2.5);
}

.vdmi-toc__link {
	display: inline-block;
	font-size: var(--osn-fs-small);
	line-height: 1.4;
	color: var(--osn-ink-muted);
	text-decoration: none;
}

.vdmi-toc__item--h2 > .vdmi-toc__link::before {
	content: counter(vdmi-toc) ". ";
	font-variant-numeric: tabular-nums;
	color: var(--vdmi-bronze);
}

.vdmi-toc__link:hover,
.vdmi-toc__link:focus-visible {
	color: var(--osn-accent);
	text-decoration: underline;
}

/* Активний пункт scrollspy проставляє скрипт. */
.vdmi-toc__item--current > .vdmi-toc__link {
	font-weight: 600;
	color: var(--osn-accent);
}

/* --- Врізка «читайте також» --- */

.vdmi-inline {
	margin: calc(var(--osn-space) * 4) 0;
	padding: calc(var(--osn-space) * 2.5) calc(var(--osn-space) * 3);
	background: var(--osn-accent-soft);
	border-left: var(--vdmi-rule) solid var(--osn-accent);
}

.vdmi-inline__lead {
	margin: 0 0 6px;
	font-family: var(--osn-font-body);
	font-size: var(--osn-fs-kicker);
	font-weight: 600;
	letter-spacing: var(--osn-track-caps);
	text-transform: uppercase;
	color: var(--osn-accent);
}

.vdmi-inline__name {
	margin: 0;
	font-family: var(--osn-font-display);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
}

.vdmi-inline__link {
	color: var(--osn-ink);
	text-decoration: none;
}

.vdmi-inline__link:hover,
.vdmi-inline__link:focus-visible {
	color: var(--osn-accent);
	text-decoration: underline;
}

/* --- Шеринг --- */

.vdmi-share {
	margin-top: calc(var(--osn-space) * 5);
	padding-top: calc(var(--osn-space) * 3);
	border-top: var(--vdmi-hair) solid var(--osn-line);
}

.vdmi-share__title {
	margin: 0 0 calc(var(--osn-space) * 2);
	font-family: var(--osn-font-body);
	font-size: var(--osn-fs-kicker);
	font-weight: 600;
	letter-spacing: var(--osn-track-caps);
	text-transform: uppercase;
	color: var(--vdmi-bronze);
}

.vdmi-share__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--osn-space);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vdmi-share__link {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 calc(var(--osn-space) * 2);
	font-family: var(--osn-font-body);
	font-size: var(--osn-fs-meta);
	font-weight: 600;
	color: var(--osn-accent);
	background: var(--osn-surface);
	border: var(--vdmi-hair) solid var(--osn-line);
	text-decoration: none;
	cursor: pointer;
}

.vdmi-share__link:hover,
.vdmi-share__link:focus-visible {
	color: var(--osn-accent-contrast);
	background: var(--osn-accent);
	border-color: var(--osn-accent);
}

.vdmi-share__status {
	margin: var(--osn-space) 0 0;
	min-height: 1.4em;
	font-size: var(--osn-fs-meta);
	color: var(--osn-ink-muted);
}

/* --- Блок автора --- */

.vdmi-author {
	margin-top: calc(var(--osn-space) * 5);
	padding: calc(var(--osn-space) * 3);
	background: var(--osn-surface);
	border: var(--vdmi-hair) solid var(--osn-line);
}

.vdmi-author__title {
	margin: 0 0 calc(var(--osn-space) * 2);
	font-family: var(--osn-font-body);
	font-size: var(--osn-fs-kicker);
	font-weight: 600;
	letter-spacing: var(--osn-track-caps);
	text-transform: uppercase;
	color: var(--vdmi-bronze);
}

.vdmi-author__body {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	align-items: start;
	gap: calc(var(--osn-space) * 3);
}

.vdmi-author__avatar {
	display: block;
	overflow: hidden;
	border: var(--vdmi-hair) solid var(--vdmi-bronze-line);
}

.vdmi-author__img {
	display: block;
	width: 100%;
	height: auto;
}

.vdmi-author__text {
	display: grid;
	gap: var(--osn-space);
	justify-items: start;
	min-width: 0;
}

.vdmi-author__name {
	margin: 0;
	font-family: var(--osn-font-display);
	font-size: 21px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--osn-ink);
}

.vdmi-author__bio {
	margin: 0;
	font-size: var(--osn-fs-small);
	line-height: 1.6;
	color: var(--osn-ink-muted);
}

.vdmi-author__all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	font-size: var(--osn-fs-meta);
	font-weight: 600;
	color: var(--osn-accent);
	text-decoration: none;
}

.vdmi-author__all:hover,
.vdmi-author__all:focus-visible {
	text-decoration: underline;
}

/* ==========================================================================
   13. Порожній стан
   ========================================================================== */

.vdmi-empty {
	position: relative;
	padding-left: calc(var(--osn-space) * 3);
}

.vdmi-empty__mat {
	position: absolute;
	top: calc(var(--osn-space) * 5);
	bottom: calc(var(--osn-space) * 5);
	left: 0;
	width: var(--vdmi-rule);
	background: var(--vdmi-bronze-line);
}

/* ==========================================================================
   14. Мета карток — спільне
   ========================================================================== */

.vdmi-cardmeta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: calc(var(--osn-space) * 1.5);
	margin: 0;
	font-size: var(--osn-fs-meta);
	color: var(--osn-ink-faint);
}

.vdmi-cardmeta__time {
	font-variant-numeric: tabular-nums;
	color: var(--vdmi-bronze);
}

/* ==========================================================================
   15. Адаптив
   ========================================================================== */

@media (max-width: 1024px) {

	.vdmi-shead {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		gap: calc(var(--osn-space) * 2);
	}

	.vdmi-shead__note {
		padding-left: 0;
		padding-top: var(--osn-space);
		border-left: 0;
		border-top: var(--vdmi-hair) solid var(--vdmi-bronze-line);
	}

	.vdmi-shead__title {
		font-size: 28px;
	}

	.vdmi-plaque__name {
		font-size: 34px;
	}

	.vdmi-plaque__board {
		grid-template-columns: minmax(0, 1fr) 220px;
		gap: calc(var(--osn-space) * 4);
	}

	.vdmi-plaque__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vdmi-choice__grid,
	.vdmi-choice__grid[data-cols="3"],
	.vdmi-choice__grid[data-cols="4"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: none;
	}
}

@media (max-width: 768px) {

	.vdmi-plaque {
		padding-top: calc(var(--osn-space) * 4);
	}

	/* Дошка розкладається вертикально: спершу портрет, під ним етикетка —
	   як експонат на стіні, а не як розворот. */
	.vdmi-plaque__board {
		grid-template-columns: minmax(0, 1fr);
		gap: calc(var(--osn-space) * 3);
		padding: calc(var(--osn-space) * 3);
	}

	.vdmi-plaque__portrait {
		order: -1;
		max-width: 240px;
	}

	.vdmi-plaque__name {
		font-size: 30px;
	}

	.vdmi-plaque__lede {
		font-size: 17px;
	}

	/*
	 * Смуга зал гортається горизонтально, а не переноситься в стовпчик:
	 * вісім зал у стовпчику з'їли б увесь екран і відсунули добірку вниз.
	 * Прокрутка робиться самим браузером, жодного скрипта.
	 */
	.vdmi-halls__strip {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: var(--osn-space);
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
	}

	.vdmi-halls__item {
		scroll-snap-align: start;
	}

	.vdmi-hall {
		white-space: nowrap;
	}

	.osn-card--vitryna .osn-card__title {
		font-size: 21px;
	}

	.vdmi-author__body {
		grid-template-columns: 72px minmax(0, 1fr);
		gap: calc(var(--osn-space) * 2);
	}

	/*
	 * Зміст на вузькому екрані згортається. Стан ставить скрипт: без нього
	 * атрибута `hidden` на списку немає, і зміст лишається розгорнутим.
	 */
	.vdmi-toc__toggle {
		display: inline-flex;
		align-items: center;
	}
}

@media (max-width: 540px) {

	.vdmi-shead__title {
		font-size: 24px;
	}

	.vdmi-plaque__name {
		font-size: 26px;
	}

	.vdmi-plaque__portrait {
		max-width: none;
	}

	.vdmi-plaque__row {
		grid-template-columns: minmax(0, 1fr);
		gap: calc(var(--osn-space) * 3);
	}

	/* В один стовпчик іменна картка стає горизонтальною: квадрат 92 px
	   ліворуч, ім'я праворуч. Портрет на всю ширину екрана в списку з
	   чотирьох позицій перетворив би блок на нескінченну стрічку. */
	.vdmi-namecard {
		grid-template-columns: 92px minmax(0, 1fr);
		align-items: center;
		gap: calc(var(--osn-space) * 2);
	}

	.vdmi-namecard__rule {
		display: none;
	}

	.vdmi-namecard .vdmi-cardmeta,
	.vdmi-namecard__name {
		grid-column: 2;
	}

	.vdmi-namecard .vdmi-media {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.vdmi-choice__grid,
	.vdmi-choice__grid[data-cols="2"],
	.vdmi-choice__grid[data-cols="3"],
	.vdmi-choice__grid[data-cols="4"] {
		grid-template-columns: minmax(0, 1fr);
		gap: calc(var(--osn-space) * 3);
	}

	.vdmi-extra__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Стрічка: портрет меншає, але лишається праворуч — переставляти його
	   вниз означало б розірвати зв'язок «ім'я — обличчя». */
	.osn-card--vitryna {
		gap: calc(var(--osn-space) * 2);
	}

	.osn-card--vitryna .osn-card__cover {
		width: 120px;
	}

	.osn-card--vitryna .osn-card__title {
		font-size: 19px;
	}

	.vdmi-author__body {
		grid-template-columns: minmax(0, 1fr);
	}

	.vdmi-author__avatar {
		max-width: 72px;
	}

	.vdmi-mat__name {
		font-size: 19px;
	}
}

/* ==========================================================================
   16. Рух
   ========================================================================== */

/*
 * Смуга прогресу — єдина анімована річ у темі, і навіть вона за замовчуванням
 * рухається без переходу: ширину їй ставить rAF щокадру.
 */
@media (prefers-reduced-motion: reduce) {

	.vdmi-progress {
		display: none;
	}
}

/* ==========================================================================
   17. Запобіжник від розпертих колонок (1.1)

   Osnova робить сітками і запис, і бічну колонку, і картки, але колонку
   всередині не задає — тоді вона «auto» й росте під найширший рядок, який
   не можна перенести. Одного заголовка з нерозривними пробілами (стаття
   про Наталію Балюк) вистачило, щоб бічна колонка налізла на статтю,
   а назва в «Нових статтях» вилізла за віджет. Тепер колонка не ширша
   за батька, а задовгий рядок переноситься бодай посеред слова.
   ========================================================================== */

.osn-single,
.osn-single__head,
.osn-sidebar,
.osn-loop,
.osn-card__body {
	grid-template-columns: minmax(0, 1fr);
}

.osn-single__title,
.osn-card__title,
.osn-archhead__title,
.osn-postnav__title,
.osn-widget__title,
.vdmi-shead__title,
.vdmi-wrow__link,
.vdmi-wcats__name,
.vdmi-toc__link,
.vdmi-inline__link,
.vdmi-plaque__name,
.vdmi-namecard__name,
.vdmi-mat__name,
.vdmi-dossier__name {
	overflow-wrap: anywhere;
}

.osn-widget {
	min-width: 0;
}

/* Широка таблиця в тексті гортається у своїй рамці, а не розпирає колонку. */
.osn-prose .wp-block-table {
	max-width: 100%;
	overflow-x: auto;
}