/*
Theme Name: Interier Vibe · План БТИ
Theme URI: https://interiervibe.ru/
Description: Журнал об обустройстве квартир в эстетике поэтажного плана: помещения-рубрики, основная надпись, размерные цепочки.
Version: 1.0.0
Author: Редакция Interier Vibe
Text Domain: iv-bti
*/

/* ==========================================================================
   0. Шрифты: Sofia Sans + Sofia Sans Condensed (вариативные, кириллица, самохост)
   ========================================================================== */
@font-face {
	font-family: "IV Sofia";
	src: url("assets/fonts/iv-sofia.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "IV Cond";
	src: url("assets/fonts/iv-sofia-cond.woff2") format("woff2");
	font-weight: 500 850;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "IV Cond";
	src: url("assets/fonts/iv-sofia-cond-italic.woff2") format("woff2");
	font-weight: 400 600;
	font-style: italic;
	font-display: swap;
}

/* ==========================================================================
   1. Токены
   Нейтрали - пять ступеней туши. Синий - чернильный штамп (ссылки, врезки).
   Красный - линия перепланировки (активное, наведение, ключевое число).
   ========================================================================== */
:root {
	color-scheme: light;
	--paper: #FFFFFF;
	--ink: #1B1C20;
	--ink-700: #3F434A;
	--ink-600: #5E636C;
	--ink-300: #C8CCD1;
	--ink-50: #F3F4F5;
	--stamp: #2F3FA3;
	--red: #D2362A;
	--red-wash: rgba(210, 54, 42, .07);

	--f-text: "IV Sofia", "Segoe UI", Roboto, Arial, sans-serif;
	--f-cond: "IV Cond", "Arial Narrow", "Roboto Condensed", sans-serif;

	--wrap: 1240px;
	--gut: 24px;
	--hatch: repeating-linear-gradient(-45deg, var(--ink) 0 1.4px, transparent 1.4px 7px);
	--ease: cubic-bezier(.16, 1, .3, 1);
}

/* ==========================================================================
   2. База
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--ink-600) var(--ink-50); scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--f-text);
	font-size: 17px;
	line-height: 1.6;
	font-kerning: normal;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--stamp); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--red); }
::selection { background: #FBD9D5; color: var(--ink); }
input, button { font: inherit; color: inherit; }
input { caret-color: var(--red); }
:focus-visible { outline: 2.5px solid var(--stamp); outline-offset: 3px; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }

.iv-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.iv-skip { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--ink); color: var(--paper); padding: 10px 16px; font-family: var(--f-cond); font-weight: 700; text-decoration: none; }
.iv-skip:focus { top: 8px; color: var(--paper); }
.iv-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.iv-num { font-variant-numeric: tabular-nums; text-align: right; }

/* Номер помещения в кружке - как на поэтажном плане */
.iv-n {
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	width: 1.5em;
	height: 1.5em;
	margin-right: .45em;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	font-family: var(--f-cond);
	font-weight: 700;
	font-size: .76em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	vertical-align: .12em;
}
.iv-n--lg { font-size: .42em; border-width: 2.5px; vertical-align: .5em; margin-right: .35em; }

/* Кнопки */
.iv-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 18px;
	background: var(--ink);
	color: var(--paper);
	border: 1.5px solid var(--ink);
	font-family: var(--f-cond);
	font-weight: 700;
	font-size: 1.05rem;
	text-decoration: none;
	transition: background-color .2s, border-color .2s, color .2s;
}
.iv-btn:hover { background: var(--red); border-color: var(--red); color: var(--paper); }
.iv-btn--line { background: transparent; color: var(--ink); }
.iv-btn--line:hover { background: transparent; color: var(--red); border-color: var(--red); }

/* ==========================================================================
   3. Шапка
   ========================================================================== */
.iv-head { border-bottom: 2px solid var(--ink); background: var(--paper); position: relative; z-index: 30; }
.iv-head__in { display: flex; align-items: center; gap: 24px; min-height: 70px; position: relative; }
.iv-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; flex: 0 0 auto; }
.iv-logo:hover { color: var(--ink); }
.iv-logo:hover .iv-mark { transform: rotate(-4deg); }
.iv-mark { transition: transform .4s var(--ease); }
.iv-logo__word { font-family: var(--f-cond); font-weight: 820; font-size: 1.55rem; letter-spacing: -.012em; line-height: 1; white-space: nowrap; }

.iv-nav { flex: 1 1 auto; min-width: 0; }
.iv-nav__list { display: flex; justify-content: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.iv-nav__list a {
	display: inline-flex;
	align-items: center;
	padding: 8px 9px;
	color: var(--ink);
	text-decoration: none;
	font-family: var(--f-cond);
	font-weight: 600;
	font-size: 1.04rem;
	white-space: nowrap;
	transition: color .15s;
}
.iv-nav__list a:hover { color: var(--red); }
.iv-nav__list a.is-current { color: var(--red); box-shadow: inset 0 -3px 0 var(--red); }
.iv-nav__list .iv-n { font-size: .7em; }

.iv-search, .iv-mnav { position: static; }
.iv-search > summary, .iv-mnav > summary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border: 1.5px solid var(--ink);
	font-family: var(--f-cond);
	font-weight: 700;
	font-size: 1rem;
	user-select: none;
	transition: color .15s, border-color .15s;
}
.iv-search > summary:hover, .iv-mnav > summary:hover { color: var(--red); border-color: var(--red); }
.iv-search[open] > summary, .iv-mnav[open] > summary { background: var(--ink); color: var(--paper); }
.iv-search__panel {
	position: absolute;
	right: var(--gut);
	top: calc(100% + 2px);
	width: min(460px, calc(100vw - 2 * var(--gut)));
	padding: 14px;
	background: var(--paper);
	border: 2px solid var(--ink);
	box-shadow: 0 18px 40px -18px rgba(27, 28, 32, .35);
}
.iv-mnav { display: none; }
.iv-mnav__list {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 2px);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--ink);
	border-bottom: 2px solid var(--ink);
	box-shadow: 0 18px 40px -18px rgba(27, 28, 32, .35);
}
.iv-mnav__list a {
	display: flex;
	align-items: center;
	padding: 14px var(--gut);
	background: var(--paper);
	color: var(--ink);
	text-decoration: none;
	font-family: var(--f-cond);
	font-weight: 650;
	font-size: 1.1rem;
}
.iv-mnav__c { margin-left: auto; font-style: italic; font-weight: 500; color: var(--ink-600); font-variant-numeric: tabular-nums; }

/* Форма поиска */
.iv-sform { display: flex; gap: 0; }
.iv-sform__in {
	flex: 1 1 auto;
	min-width: 0;
	height: 48px;
	padding: 0 14px;
	border: 1.5px solid var(--ink);
	border-right: 0;
	border-radius: 0;
	background: var(--paper);
	font-size: 1rem;
	-webkit-appearance: none;
	appearance: none;
}
.iv-sform__in::placeholder { color: var(--ink-600); opacity: 1; }
.iv-sform__in:focus { outline: none; border-color: var(--stamp); box-shadow: inset 0 0 0 1px var(--stamp); }
.iv-sform__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 48px;
	padding: 0 18px;
	border: 1.5px solid var(--ink);
	border-radius: 0;
	background: var(--ink);
	color: var(--paper);
	font-family: var(--f-cond);
	font-weight: 700;
	font-size: 1.02rem;
	cursor: pointer;
	transition: background-color .2s, border-color .2s;
}
.iv-sform__btn:hover { background: var(--red); border-color: var(--red); }

/* ==========================================================================
   4. Главная: план + экспликация
   ========================================================================== */
.iv-hero__head {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
	gap: 40px;
	align-items: end;
	padding: 36px 0 24px;
}
.iv-hero__title {
	margin: 0;
	max-width: 21ch;
	font-family: var(--f-cond);
	font-weight: 830;
	font-size: clamp(2.5rem, 1.2rem + 3.6vw, 4.6rem);
	line-height: .96;
	letter-spacing: -.022em;
	text-wrap: balance;
}
.iv-hero__sub { margin: 0; font-size: 1.08rem; color: var(--ink-700); max-width: 38ch; }
.iv-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
	gap: 40px;
	align-items: start;
	padding-top: 24px;
	border-top: 2px solid var(--ink);
}
.iv-hero__plan { position: relative; }
.iv-plan { display: block; width: 100%; height: auto; overflow: visible; }

/* --- графика плана --- */
.iv-hatch { stroke: var(--ink); transition: stroke .2s; }
.iv-wall--ext { stroke: var(--ink); stroke-width: 2.5; transition: stroke .2s; }
.iv-wall--int { fill: var(--ink); transition: fill .2s; }
.iv-cut { fill: var(--paper); }
.iv-win line { stroke: var(--ink); stroke-width: 1.6; transition: stroke .2s; }
.iv-door { stroke: var(--ink); stroke-width: 3; }
.iv-door-arc { fill: none; stroke: var(--ink-600); stroke-width: 1.3; }
.iv-dl, .iv-ext { stroke: var(--ink-600); stroke-width: 1.2; }
.iv-tick { stroke: var(--ink); stroke-width: 2.2; }
.iv-dimt { font-family: var(--f-cond); font-style: italic; font-weight: 500; font-size: 22px; fill: var(--ink-700); }

.iv-room { cursor: pointer; }
.iv-room__area { fill: transparent; stroke: transparent; stroke-width: 12; transition: fill .2s, stroke .2s; }
.iv-room__area--off { fill: var(--ink-50); stroke: none; }
.iv-room__n { fill: var(--paper); stroke: var(--ink); stroke-width: 2; transition: fill .2s, stroke .2s; }
.iv-room__nt { font-family: var(--f-cond); font-weight: 750; font-size: 22px; fill: var(--ink); transition: fill .2s; }
.iv-room__nt--tile { font-size: 34px; }
.iv-room__name { font-family: var(--f-cond); font-weight: 760; font-size: 30px; fill: var(--ink); transition: fill .2s; }
.iv-room__cnt { font-family: var(--f-cond); font-style: italic; font-weight: 500; font-size: 22px; fill: var(--ink-600); }
.iv-room__off { font-family: var(--f-cond); font-style: italic; font-size: 24px; fill: var(--ink-600); }
.iv-lead { cursor: pointer; }
.iv-lead__line { stroke: var(--ink); stroke-width: 1.5; transition: stroke .2s; }
.iv-lead__dot { fill: var(--ink); transition: fill .2s; }

/* Наведение/фокус на помещении: красная линия перепланировки */
.iv-room:is(:hover, :focus-visible) .iv-room__area { fill: var(--red-wash); stroke: var(--red); }
.iv-room:is(:hover, :focus-visible) .iv-room__n { fill: var(--red); stroke: var(--red); }
.iv-room:is(:hover, :focus-visible) .iv-room__nt { fill: var(--paper); }
.iv-room:is(:hover, :focus-visible) .iv-room__name { fill: var(--red); }
.iv-room:focus-visible, .iv-lead:focus-visible { outline: none; }
.iv-lead:is(:hover, :focus-visible) .iv-room__n { fill: var(--red); stroke: var(--red); }
.iv-lead:is(:hover, :focus-visible) .iv-room__nt { fill: var(--paper); }
.iv-lead:is(:hover, :focus-visible) .iv-lead__line { stroke: var(--red); }
.iv-lead:is(:hover, :focus-visible) .iv-lead__dot { fill: var(--red); }

/* Экспликация -> план: строка таблицы подсвечивает своё помещение */
.iv-hero:has(.iv-exp [data-room="1"]:is(:hover, :focus-visible)) .iv-room[data-room="1"] .iv-room__area,
.iv-hero:has(.iv-exp [data-room="2"]:is(:hover, :focus-visible)) .iv-room[data-room="2"] .iv-room__area,
.iv-hero:has(.iv-exp [data-room="3"]:is(:hover, :focus-visible)) .iv-room[data-room="3"] .iv-room__area,
.iv-hero:has(.iv-exp [data-room="4"]:is(:hover, :focus-visible)) .iv-room[data-room="4"] .iv-room__area,
.iv-hero:has(.iv-exp [data-room="5"]:is(:hover, :focus-visible)) .iv-room[data-room="5"] .iv-room__area { fill: var(--red-wash); stroke: var(--red); }
.iv-hero:has(.iv-exp [data-room="1"]:is(:hover, :focus-visible)) .iv-room[data-room="1"] .iv-room__n,
.iv-hero:has(.iv-exp [data-room="2"]:is(:hover, :focus-visible)) .iv-room[data-room="2"] .iv-room__n,
.iv-hero:has(.iv-exp [data-room="3"]:is(:hover, :focus-visible)) .iv-room[data-room="3"] .iv-room__n,
.iv-hero:has(.iv-exp [data-room="4"]:is(:hover, :focus-visible)) .iv-room[data-room="4"] .iv-room__n,
.iv-hero:has(.iv-exp [data-room="5"]:is(:hover, :focus-visible)) .iv-room[data-room="5"] .iv-room__n { fill: var(--red); stroke: var(--red); }
.iv-hero:has(.iv-exp [data-room="1"]:is(:hover, :focus-visible)) .iv-room[data-room="1"] .iv-room__nt,
.iv-hero:has(.iv-exp [data-room="2"]:is(:hover, :focus-visible)) .iv-room[data-room="2"] .iv-room__nt,
.iv-hero:has(.iv-exp [data-room="3"]:is(:hover, :focus-visible)) .iv-room[data-room="3"] .iv-room__nt,
.iv-hero:has(.iv-exp [data-room="4"]:is(:hover, :focus-visible)) .iv-room[data-room="4"] .iv-room__nt,
.iv-hero:has(.iv-exp [data-room="5"]:is(:hover, :focus-visible)) .iv-room[data-room="5"] .iv-room__nt { fill: var(--paper); }
/* 6 - стены, 7 - окна, 8 - весь контур */
.iv-hero:has([data-room="6"]:is(:hover, :focus-visible)) .iv-hatch,
.iv-plan[data-current="6"] .iv-hatch { stroke: var(--red); }
.iv-hero:has([data-room="6"]:is(:hover, :focus-visible)) .iv-wall--ext,
.iv-plan[data-current="6"] .iv-wall--ext { stroke: var(--red); }
.iv-hero:has([data-room="6"]:is(:hover, :focus-visible)) .iv-wall--int,
.iv-plan[data-current="6"] .iv-wall--int { fill: var(--red); }
.iv-hero:has([data-room="7"]:is(:hover, :focus-visible)) .iv-win line,
.iv-plan[data-current="7"] .iv-win line { stroke: var(--red); stroke-width: 2.4; }
.iv-hero:has([data-room="8"]:is(:hover, :focus-visible)) .iv-wall--ext,
.iv-plan[data-current="8"] .iv-wall--ext { stroke: var(--red); stroke-width: 6; }
.iv-hero:has(.iv-exp [data-room="6"]:is(:hover, :focus-visible)) .iv-lead[data-room="6"] .iv-room__n,
.iv-hero:has(.iv-exp [data-room="7"]:is(:hover, :focus-visible)) .iv-lead[data-room="7"] .iv-room__n,
.iv-hero:has(.iv-exp [data-room="8"]:is(:hover, :focus-visible)) .iv-lead[data-room="8"] .iv-room__n { fill: var(--red); stroke: var(--red); }
.iv-hero:has(.iv-exp [data-room="6"]:is(:hover, :focus-visible)) .iv-lead[data-room="6"] .iv-room__nt,
.iv-hero:has(.iv-exp [data-room="7"]:is(:hover, :focus-visible)) .iv-lead[data-room="7"] .iv-room__nt,
.iv-hero:has(.iv-exp [data-room="8"]:is(:hover, :focus-visible)) .iv-lead[data-room="8"] .iv-room__nt { fill: var(--paper); }

/* План -> экспликация */
.iv-hero:has(.iv-plan [data-room="1"]:is(:hover, :focus-visible)) .iv-exp tr[data-room="1"],
.iv-hero:has(.iv-plan [data-room="2"]:is(:hover, :focus-visible)) .iv-exp tr[data-room="2"],
.iv-hero:has(.iv-plan [data-room="3"]:is(:hover, :focus-visible)) .iv-exp tr[data-room="3"],
.iv-hero:has(.iv-plan [data-room="4"]:is(:hover, :focus-visible)) .iv-exp tr[data-room="4"],
.iv-hero:has(.iv-plan [data-room="5"]:is(:hover, :focus-visible)) .iv-exp tr[data-room="5"],
.iv-hero:has(.iv-plan [data-room="6"]:is(:hover, :focus-visible)) .iv-exp tr[data-room="6"],
.iv-hero:has(.iv-plan [data-room="7"]:is(:hover, :focus-visible)) .iv-exp tr[data-room="7"],
.iv-hero:has(.iv-plan [data-room="8"]:is(:hover, :focus-visible)) .iv-exp tr[data-room="8"] { background: var(--red-wash); }

/* Текущее помещение на мини-плане рубрики */
.iv-room.is-current .iv-room__area { fill: var(--red-wash); stroke: var(--red); }
.iv-room.is-current .iv-room__n, .iv-lead.is-current .iv-room__n { fill: var(--red); stroke: var(--red); }
.iv-room.is-current .iv-room__nt, .iv-lead.is-current .iv-room__nt { fill: var(--paper); }
.iv-plan--mini .iv-room__nt { font-size: 32px; }
.iv-plan--mini .iv-room__n { stroke-width: 2.5; }

/* --- экспликация --- */
.iv-exp__t { width: 100%; border-collapse: collapse; border: 2px solid var(--ink); font-variant-numeric: tabular-nums; }
.iv-exp__t caption { text-align: left; padding: 0 0 10px; font-family: var(--f-cond); font-weight: 780; font-size: 1.3rem; line-height: 1.1; }
.iv-exp__t th {
	padding: 7px 10px;
	background: var(--ink-50);
	border-bottom: 1.5px solid var(--ink);
	font-family: var(--f-cond);
	font-style: italic;
	font-weight: 500;
	font-size: .9rem;
	color: var(--ink-700);
	text-align: left;
}
.iv-exp__t th:last-child { text-align: right; }
.iv-exp__t td { padding: 9px 10px; border-top: 1px solid var(--ink-300); vertical-align: middle; }
.iv-exp__t td:first-child { width: 44px; }
.iv-exp__t td:first-child .iv-n { margin: 0; font-size: .82rem; }
.iv-exp__t td + td { border-left: 1px solid var(--ink-300); }
.iv-exp__t tbody tr { transition: background-color .15s; }
.iv-exp__t tbody tr:hover { background: var(--red-wash); }
.iv-exp__a { display: block; color: var(--ink); text-decoration: none; font-family: var(--f-cond); font-weight: 680; font-size: 1.12rem; }
.iv-exp__a:hover { color: var(--red); }
.iv-exp__w { display: block; font-family: var(--f-cond); font-style: italic; font-size: .86rem; color: var(--ink-600); line-height: 1.2; }
.iv-exp__t tfoot td { border-top: 2px solid var(--ink); font-family: var(--f-cond); font-weight: 750; font-size: 1.05rem; }
.iv-exp .iv-btn { margin-top: 16px; width: 100%; justify-content: space-between; }

/* ==========================================================================
   5. Секции, сетка листов, карточки
   ========================================================================== */
.iv-sec { padding-top: 64px; }
.iv-sec__t {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0 0 22px;
	font-family: var(--f-cond);
	font-weight: 800;
	font-size: clamp(1.7rem, 1.2rem + 1.2vw, 2.2rem);
	line-height: 1.05;
	letter-spacing: -.01em;
}
/* после заголовка секции - отрезок стены со штриховкой */
.iv-sec__t::after {
	content: "";
	flex: 1 1 auto;
	height: 12px;
	background: var(--hatch);
	border-top: 1.5px solid var(--ink);
	border-bottom: 1.5px solid var(--ink);
}
.iv-sec__more { margin: 28px 0 0; text-align: center; }

/* Сетка листов: у каждой карточки своя рамка, соседние рамки сливаются в одну линию */
.iv-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	padding: 1px 0 0 1px;
}
.iv-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 16px;
	margin: -1px 0 0 -1px;
	border: 1px solid var(--ink);
	background: var(--paper);
}
.iv-card__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink-50); margin-bottom: 14px; position: relative; }
.iv-card__img img, .iv-card__img .iv-tile { width: 100%; height: 100%; object-fit: cover; }
.iv-card__img::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 0 var(--red); transition: box-shadow .25s var(--ease); pointer-events: none; }
.iv-card:hover .iv-card__img::after { box-shadow: inset 0 0 0 4px var(--red); }
.iv-card__title { margin: 0 0 14px; font-family: var(--f-cond); font-weight: 720; font-size: 1.42rem; line-height: 1.1; letter-spacing: -.005em; text-wrap: balance; }
.iv-card__title a { color: var(--ink); text-decoration: none; }
.iv-card__title a::after { content: ""; position: absolute; inset: 0; } /* вся карточка кликабельна */
.iv-card:hover .iv-card__title a { color: var(--red); }
.iv-card__ex { margin: 0 0 18px; color: var(--ink-700); font-size: 1.04rem; }
.iv-card__stamp {
	display: grid;
	grid-template-columns: 1.4fr 1fr .8fr;
	gap: 1px;
	margin: auto 0 0;
	background: var(--ink-300);
	border-top: 1px solid var(--ink-300);
}
.iv-card__stamp > div { background: var(--paper); padding: 6px 8px 2px 0; min-width: 0; }
.iv-card__stamp > div + div { padding-left: 8px; }
.iv-card__stamp dt { font-family: var(--f-cond); font-style: italic; font-size: .78rem; color: var(--ink-600); line-height: 1.2; }
.iv-card__stamp dd { margin: 0; font-family: var(--f-cond); font-weight: 620; font-size: .95rem; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; }
.iv-card__stamp .iv-n { font-size: .74em; margin-right: .35em; }
.iv-card__read {
	position: absolute;
	top: 26px;
	right: 26px;
	display: none;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 2px solid var(--stamp);
	outline: 1px solid var(--stamp);
	outline-offset: -5px;
	border-radius: 50%;
	background: var(--paper);
	color: var(--stamp);
	transform: rotate(-8deg);
}
.iv-card.is-read .iv-card__read { display: grid; }
.iv-tile { display: block; background: var(--ink-50); }

/* Главный лист на главной */
.iv-lead { margin-bottom: 0; }
.iv-card--lead {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: 32px;
	padding: 20px;
	border: 2px solid var(--ink);
	margin: 0 0 28px;
}
.iv-card--lead .iv-card__img { aspect-ratio: 16 / 11; margin: 0; }
.iv-card--lead .iv-card__body { display: flex; flex-direction: column; }
.iv-card--lead .iv-card__title { font-size: clamp(1.8rem, 1.2rem + 1.4vw, 2.5rem); line-height: 1.02; letter-spacing: -.015em; }
.iv-card--lead .iv-card__read { top: 34px; right: auto; left: 34px; }
.iv-card__body { display: flex; flex-direction: column; flex: 1 1 auto; }

/* ==========================================================================
   6. Размерная цепочка
   ========================================================================== */
.iv-dims { margin: 22px 0 24px; --dl: 2.35rem; }
.iv-dims__chain { display: flex; margin: 0; padding: 0; list-style: none; }
.iv-dims__seg {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	padding: 0 12px;
	text-align: center;
	/* выносная линия слева */
	background: linear-gradient(var(--ink-600), var(--ink-600)) left top / 1px calc(var(--dl) + 12px) no-repeat;
}
.iv-dims__seg:last-child { background: linear-gradient(var(--ink-600), var(--ink-600)) left top / 1px calc(var(--dl) + 12px) no-repeat, linear-gradient(var(--ink-600), var(--ink-600)) right top / 1px calc(var(--dl) + 12px) no-repeat; }
.iv-dims__seg::before { /* размерная линия */
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: var(--dl);
	height: 1.5px;
	background: var(--ink);
	transform-origin: left center;
	animation: iv-draw .9s var(--ease) both;
	animation-delay: calc(var(--i, 0) * 140ms + 150ms);
}
.iv-dims__seg::after { /* засечка 45° */
	content: "";
	position: absolute;
	left: -.5px;
	top: calc(var(--dl) - 7px);
	width: 2px;
	height: 15px;
	background: var(--ink);
	transform: rotate(45deg);
}
.iv-dims__chain::after { content: none; }
.iv-dims__seg:last-child .iv-dims__l::after { /* засечка на правом конце */
	content: "";
	position: absolute;
	right: -.5px;
	top: calc(var(--dl) - 7px);
	width: 2px;
	height: 15px;
	background: var(--ink);
	transform: rotate(45deg);
}
.iv-dims__v {
	display: block;
	height: var(--dl);
	padding-top: .25rem;
	font-family: var(--f-cond);
	font-weight: 780;
	font-size: 1.45rem;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.iv-dims__seg:first-child .iv-dims__v { color: var(--red); }
.iv-dims__l { display: block; padding-top: 16px; font-family: var(--f-cond); font-style: italic; font-size: .95rem; line-height: 1.25; color: var(--ink-700); }
@keyframes iv-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ==========================================================================
   7. Справочник размеров
   ========================================================================== */
.iv-ref { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 40px; align-items: start; }
.iv-ref__head p { color: var(--ink-700); margin: 0; }
.iv-ref .iv-sec__t::after { display: none; }
.iv-ref__v { font-family: var(--f-cond); font-weight: 780; font-size: 1.2rem; color: var(--red); white-space: nowrap; }
.iv-table--ref td a { color: var(--ink); text-decoration-color: var(--ink-300); }
.iv-table--ref td a:hover { color: var(--red); text-decoration-color: var(--red); }

/* ==========================================================================
   8. Шапка рубрики, поиска, всех статей
   ========================================================================== */
.iv-archead { border-bottom: 2px solid var(--ink); padding: 18px 0 32px; }
.iv-archead__in.has-plan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 380px); gap: 48px; align-items: center; }
.iv-archead__title { margin: 10px 0 12px; font-family: var(--f-cond); font-weight: 830; font-size: clamp(2.4rem, 1.4rem + 3vw, 4rem); line-height: .98; letter-spacing: -.02em; text-wrap: balance; }
.iv-archead__desc { max-width: 62ch; color: var(--ink-700); font-size: 1.1rem; }
.iv-archead__desc p { margin: 0 0 .6em; }
.iv-archead__count { margin: 12px 0 0; font-family: var(--f-cond); font-style: italic; font-size: 1.05rem; color: var(--ink-600); }
.iv-archead__search { margin-top: 18px; max-width: 520px; }
.iv-archead__plan .iv-plan { max-width: 380px; margin-left: auto; }
.iv-sec--list { padding-top: 32px; }

/* ==========================================================================
   9. Статья
   ========================================================================== */
.iv-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 20px; font-family: var(--f-cond); font-size: 1rem; color: var(--ink-600); }
.iv-crumbs a { color: var(--ink-700); text-decoration: none; display: inline-flex; align-items: center; }
.iv-crumbs a:hover { color: var(--red); }
.iv-crumbs .iv-n { font-size: .74em; }

.iv-art__head { max-width: 940px; margin-bottom: 36px; }
.iv-art__title { margin: 14px 0 16px; font-family: var(--f-cond); font-weight: 830; font-size: clamp(2.2rem, 1.3rem + 2.7vw, 3.7rem); line-height: 1; letter-spacing: -.02em; text-wrap: balance; }
.iv-art__lead { margin: 0; max-width: 64ch; font-size: 1.2rem; line-height: 1.55; color: var(--ink-700); }

/* основная надпись статьи */
.iv-tb {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
	gap: 1px;
	margin: 24px 0 0;
	background: var(--ink);
	border: 2px solid var(--ink);
}
.iv-tb__c { background: var(--paper); padding: 7px 12px 8px; min-width: 0; }
.iv-tb__c--wide { grid-column: span 2; }
.iv-tb dt { font-family: var(--f-cond); font-style: italic; font-size: .82rem; color: var(--ink-600); line-height: 1.2; }
.iv-tb dd { margin: 2px 0 0; font-family: var(--f-cond); font-weight: 650; font-size: 1.05rem; font-variant-numeric: tabular-nums; display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iv-tb .iv-n { font-size: .74em; }

.iv-cover { margin: -8px 0 44px; border: 1px solid var(--ink); }
.iv-cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; max-height: 660px; }

.iv-art__grid { display: grid; grid-template-columns: 250px minmax(0, 720px); gap: 56px; align-items: start; }
.iv-art__grid > .iv-art__body:only-child { grid-column: 2; }
.iv-toc { position: sticky; top: 20px; }
.iv-toc__d { border: 2px solid var(--ink); }
.iv-toc__h { display: block; padding: 8px 12px; background: var(--ink-50); border-bottom: 1.5px solid var(--ink); font-family: var(--f-cond); font-weight: 760; font-size: 1.05rem; }
.iv-toc__d:not([open]) .iv-toc__h { border-bottom: 0; }
.iv-toc__h::after { content: "+"; float: right; font-weight: 500; }
.iv-toc__d[open] .iv-toc__h::after { content: "\2212"; }
.iv-toc__list { margin: 0; padding: 6px 0; list-style: none; max-height: calc(100vh - 120px); overflow: auto; }
.iv-toc__list a { display: flex; align-items: flex-start; padding: 6px 12px; color: var(--ink-700); text-decoration: none; font-family: var(--f-cond); font-size: 1rem; line-height: 1.25; }
.iv-toc__list a:hover { color: var(--red); background: var(--red-wash); }
.iv-toc__list .iv-n { font-size: .72em; margin-top: .1em; }

/* --- текст --- */
.iv-prose { font-size: 1.125rem; line-height: 1.64; counter-reset: fig; }
.iv-prose > :first-child { margin-top: 0; }
.iv-prose p { margin: 0 0 1.05em; }
.iv-prose h2 {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 2.3em 0 .65em;
	font-family: var(--f-cond);
	font-weight: 780;
	font-size: clamp(1.6rem, 1.3rem + .9vw, 2rem);
	line-height: 1.08;
	letter-spacing: -.01em;
	scroll-margin-top: 20px;
	text-wrap: balance;
}
.iv-h2n {
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	width: 1.45em;
	height: 1.45em;
	border: 2px solid var(--ink);
	border-radius: 50%;
	font-size: .62em;
	font-weight: 750;
	font-variant-numeric: tabular-nums;
	transform: translateY(-.14em);
}
.iv-prose h3 { margin: 1.8em 0 .5em; font-family: var(--f-text); font-weight: 700; font-size: 1.24rem; line-height: 1.25; }
.iv-prose ul, .iv-prose ol { margin: 0 0 1.2em; padding-left: 1.6em; }
.iv-prose li { margin: 0 0 .45em; }
.iv-prose ul { list-style: none; }
.iv-prose ul > li { position: relative; }
.iv-prose ul > li::before { /* засечка вместо точки */
	content: "";
	position: absolute;
	left: -1.15em;
	top: .38em;
	width: 2px;
	height: .8em;
	background: var(--red);
	transform: rotate(45deg);
}
.iv-prose ol { list-style: none; counter-reset: li; }
.iv-prose ol > li { position: relative; counter-increment: li; }
.iv-prose ol > li::before {
	content: counter(li);
	position: absolute;
	left: -1.65em;
	top: .18em;
	display: grid;
	place-items: center;
	width: 1.3em;
	height: 1.3em;
	border: 1.5px solid var(--ink);
	border-radius: 50%;
	font-family: var(--f-cond);
	font-weight: 750;
	font-size: .82em;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}
.iv-prose strong { font-weight: 700; }
.iv-prose a { color: var(--stamp); }
.iv-prose a:hover { color: var(--red); }

/* врезка «Коротко» - синий чернильный штамп */
.iv-prose blockquote { margin: 1.6em 0; padding: 14px 0; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); font-style: normal; }
.iv-prose blockquote.iv-short {
	padding: 16px 20px 14px;
	border: 2px solid var(--stamp);
	outline: 1px solid var(--stamp);
	outline-offset: -6px;
	border-radius: 7px;
}
.iv-prose blockquote p:last-child { margin-bottom: 0; }
.iv-short__l {
	display: inline-block;
	margin-right: .5em;
	font-family: var(--f-cond);
	font-weight: 800;
	font-size: .92em;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--stamp);
}

/* таблицы - экспликация */
.iv-table { margin: 1.6em 0; overflow-x: auto; border: 2px solid var(--ink); -webkit-overflow-scrolling: touch; }
.iv-table table { width: 100%; border-collapse: collapse; font-size: .98rem; line-height: 1.45; font-variant-numeric: tabular-nums; }
.iv-table th { padding: 9px 12px; background: var(--ink-50); border-bottom: 1.5px solid var(--ink); text-align: left; vertical-align: bottom; font-family: var(--f-cond); font-style: italic; font-weight: 520; font-size: .98rem; color: var(--ink-700); }
.iv-table td { padding: 9px 12px; border-top: 1px solid var(--ink-300); vertical-align: top; }
.iv-table tr:first-child td { border-top: 0; }
.iv-table th + th, .iv-table td + td { border-left: 1px solid var(--ink-300); }
.iv-table caption { caption-side: top; text-align: left; padding: 8px 12px; font-family: var(--f-cond); font-weight: 700; }

/* фото в тексте */
.iv-prose figure, .iv-fig { margin: 2em 0; counter-increment: fig; }
.iv-prose figure img { width: 100%; height: auto; border: 1px solid var(--ink); }
.iv-prose figcaption { margin-top: 8px; font-family: var(--f-cond); font-style: italic; font-size: 1rem; line-height: 1.35; color: var(--ink-700); }
.iv-prose figcaption::before { content: "Рис. " counter(fig) ". "; font-style: normal; font-weight: 700; color: var(--ink); }
.iv-prose hr { border: 0; height: 12px; margin: 2.4em 0; background: var(--hatch); border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }

.iv-sec--rel { padding-top: 72px; }

/* служебные страницы */
.iv-page__title { margin: 14px 0 28px; font-family: var(--f-cond); font-weight: 830; font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.4rem); line-height: 1; letter-spacing: -.02em; }
.iv-page__body { max-width: 720px; }

/* ==========================================================================
   10. Пагинация, пусто, 404
   ========================================================================== */
.iv-pager { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 32px 0 0; }
.iv-pager__btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1.5px solid var(--ink); color: var(--ink); text-decoration: none; font-family: var(--f-cond); font-weight: 700; }
.iv-pager__btn:hover { color: var(--red); border-color: var(--red); }
.iv-pager__cur { font-family: var(--f-cond); font-style: italic; font-size: 1.05rem; color: var(--ink-700); }

.iv-empty { padding: 44px 24px; border: 2px dashed var(--ink-300); text-align: center; color: var(--ink-700); }
.iv-empty__t { margin: 0 0 6px; font-family: var(--f-cond); font-weight: 780; font-size: 1.6rem; color: var(--ink); }

.iv-404 { padding: 56px 0 24px; }
.iv-404__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 56px; align-items: center; }
.iv-gone { fill: none; stroke: var(--red); stroke-width: 3; stroke-dasharray: 12 9; }
.iv-gone__t { font-family: var(--f-cond); font-weight: 800; font-size: 96px; fill: var(--red); }
.iv-404__code { margin: 0 0 6px; font-family: var(--f-cond); font-style: italic; font-size: 1.1rem; color: var(--ink-600); }
.iv-404__title { margin: 0 0 14px; font-family: var(--f-cond); font-weight: 830; font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.4rem); line-height: 1; letter-spacing: -.02em; text-wrap: balance; }
.iv-404__search { margin: 22px 0; max-width: 520px; }
.iv-404__rooms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--ink-300); border: 1.5px solid var(--ink); }
.iv-404__rooms a { display: flex; align-items: center; padding: 10px 12px; background: var(--paper); color: var(--ink); text-decoration: none; font-family: var(--f-cond); font-weight: 650; font-size: 1.05rem; }
.iv-404__rooms a:hover { color: var(--red); background: #FFF8F7; }

/* ==========================================================================
   11. Подвал - основная надпись
   ========================================================================== */
.iv-foot { margin-top: 88px; padding: 0 0 36px; }
.iv-stampblock {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .9fr);
	gap: 1px;
	background: var(--ink);
	border: 2px solid var(--ink);
}
.iv-stampblock > * { background: var(--paper); padding: 18px 18px 16px; min-width: 0; }
.iv-stampblock__brand p { margin: 14px 0 0; color: var(--ink-700); font-size: .98rem; max-width: 40ch; }
.iv-stampblock__h { margin: 0 0 10px; font-family: var(--f-cond); font-style: italic; font-size: .9rem; color: var(--ink-600); }
.iv-stampblock ul { margin: 0; padding: 0; list-style: none; }
.iv-stampblock li { margin: 0 0 6px; }
.iv-stampblock li a { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; font-family: var(--f-cond); font-weight: 600; font-size: 1.04rem; }
.iv-stampblock li a:hover { color: var(--red); }
.iv-stampblock li .iv-n { font-size: .72em; }
.iv-stampblock__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0; padding: 0 !important; background: var(--ink-300) !important; }
.iv-stampblock__meta > div { background: var(--paper); padding: 10px 12px; }
.iv-stampblock__meta dt { font-family: var(--f-cond); font-style: italic; font-size: .82rem; color: var(--ink-600); }
.iv-stampblock__meta dd { margin: 2px 0 0; font-family: var(--f-cond); font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.iv-foot__note { margin: 14px 0 0; font-size: .88rem; color: var(--ink-600); max-width: 90ch; }

/* ==========================================================================
   12. Адаптив
   ========================================================================== */
@media (max-width: 1180px) {
	.iv-nav { display: none; }
	.iv-mnav { display: block; }
	.iv-head__in { justify-content: space-between; }
	.iv-search { margin-left: auto; }
}
@media (max-width: 1000px) {
	.iv-hero__head, .iv-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.iv-hero__sub { max-width: 60ch; }
	.iv-art__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.iv-art__grid > .iv-art__body:only-child { grid-column: auto; }
	.iv-toc { position: static; }
	.iv-toc__list { max-height: none; }
	.iv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.iv-ref { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.iv-stampblock { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.iv-stampblock__brand { grid-column: 1 / -1; }
	.iv-404__in { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.iv-404__plan { max-width: 320px; }
}
@media (max-width: 860px) {
	.iv-card--lead { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 16px; }
	.iv-archead__in.has-plan { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.iv-archead__plan { order: -1; }
	.iv-archead__plan .iv-plan { max-width: 300px; margin: 0; }
}
@media (max-width: 640px) {
	:root { --gut: 16px; }
	body { font-size: 16.5px; }
	.iv-head__in { gap: 10px; min-height: 60px; }
	.iv-logo__word { font-size: 1.32rem; }
	.iv-mark { width: 28px; height: 28px; }
	.iv-search__t, .iv-mnav > summary span { display: none; }
	.iv-search > summary, .iv-mnav > summary { padding: 9px; }
	.iv-mnav__list { grid-template-columns: minmax(0, 1fr); }
	.iv-hero__head { padding-top: 24px; }
	.iv-grid { grid-template-columns: minmax(0, 1fr); }
	.iv-card { padding: 14px; }
	.iv-prose { font-size: 1.07rem; }
	.iv-tb__c--wide { grid-column: auto; }
	.iv-stampblock { grid-template-columns: minmax(0, 1fr); }
	.iv-404__rooms { grid-template-columns: minmax(0, 1fr); }
	/* размерная цепочка встаёт вертикально */
	.iv-dims__chain { flex-direction: column; border-left: 1.5px solid var(--ink); margin-left: 8px; }
	.iv-dims__seg, .iv-dims__seg:last-child { display: grid; grid-template-columns: minmax(96px, auto) minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 6px 0 6px 18px; text-align: left; background: none; }
	.iv-dims__seg::before { left: -1.5px; top: 0; bottom: 0; right: auto; width: 1.5px; height: auto; transform-origin: top center; animation-name: iv-draw-v; }
	.iv-dims__seg::after { left: -8.5px; top: -1px; width: 15px; height: 2px; }
	.iv-dims__seg:last-child .iv-dims__l::after { display: none; }
	.iv-dims__v { height: auto; padding: 0; font-size: 1.3rem; }
	.iv-dims__l { padding: 0; }
}
@keyframes iv-draw-v { from { transform: scaleY(0); } to { transform: scaleY(1); } }

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

@media print {
	.iv-head, .iv-foot, .iv-toc, .iv-sec--rel { display: none; }
	.iv-art__grid { display: block; }
}