/* Блог: список /p/ (pages/blog.php) и запись /p/<адрес>/ (pages/page.php).
   Разметка у полной и лёгкой версии одна, меняются только шрифт и цвета — они в переменных.
   Полная версия: свой шрифт и золотые акценты. Лёгкая (`body.kp-lite`): обычный Bootstrap,
   его штатные цвета (#777 подсказки, #ddd рамки, #337ab7 акцент, #d9534f предупреждение).

   ⚠️ Цвет текста НЕ задаём и на переменные тем сайта не опираемся: в лёгкой версии
   они не переопределяются, и белый текст ложился на белый фон. Наследуем цвет
   от скина, а свои подложки делаем полупрозрачным серым — он читается везде. */

/* Шрифт заголовков объявлен здесь, а не взят из kodg.css: в лёгкой версии тот не подключается.
   Там заголовки идут шрифтом Bootstrap, и файл шрифта не загружается.
   ⚠️ `inherit` в значении переменной не годится: так переменная берётся у родителя (с :root),
   и лёгкая версия получала шрифт и золото полной. Поэтому шрифт Bootstrap назван прямо,
   а «цвет как у текста» — currentColor. */
@font-face{
	font-family:'KodgMason';
	src:url('/media/fonts/MasonChroniclesRegular.otf') format('opentype');
	font-display:swap;
}

:root{
	--kp-face:'KodgMason', Georgia, serif;
	--kp-acc:#b5893f;
	--kp-acc-bg:rgba(181,137,63,.16);
	--kp-acc-fg:currentColor;
	--kp-cap:#b5893f;
	--kp-warn:#c0392b;
	--kp-line:rgba(128,128,128,.35);
	--kp-soft:rgba(128,128,128,.28);
	--kp-fill:rgba(128,128,128,.10);
	--kp-item:rgba(128,128,128,.07);
	--kp-th:rgba(128,128,128,.20);
	--kp-cell:rgba(128,128,128,.30);
	--kp-dim:#8b8b8b;
}
body.kp-lite{
	--kp-face:"Helvetica Neue", Helvetica, Arial, sans-serif;
	--kp-acc:#337ab7;
	--kp-acc-bg:#337ab7;
	--kp-acc-fg:#fff;
	--kp-cap:currentColor;
	--kp-warn:#d9534f;
	--kp-line:#ddd;
	--kp-soft:#ddd;
	--kp-fill:#f5f5f5;
	--kp-item:#fff;
	--kp-th:#f5f5f5;
	--kp-cell:#ddd;
	--kp-dim:#777;
}

.kp{max-width:820px; margin:0 auto; padding:18px 15px 50px}
.kp-head{text-align:center; margin:6px 0 22px}
.kp-head h1{
	font-family:var(--kp-face); font-weight:normal;
	font-size:34px; line-height:1.15; margin:0 0 8px;
}
.kp-head .sub{font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--kp-dim)}
.kp-head .rule{
	height:1px; margin:16px auto 0; max-width:260px;
	background:linear-gradient(90deg, transparent, rgba(128,128,128,.55), transparent);
}
.kp-lite .kp-head .rule{height:auto; background:none; border-top:1px solid var(--kp-line)}

/* Тело статьи */
.kp-body{font-size:15px; line-height:1.7}
.kp-body p{margin:0 0 13px}
.kp-body h2{
	font-family:var(--kp-face); font-weight:normal; font-size:23px;
	margin:30px 0 10px; padding-bottom:6px;
	border-bottom:1px solid var(--kp-line);
}
.kp-body h3{font-size:16px; margin:22px 0 7px}
.kp-body ul, .kp-body ol{margin:0 0 13px; padding-left:22px}
.kp-body li{margin:0 0 7px}
.kp-body img{max-width:100%; height:auto}
.kp-body hr{border:0; border-top:1px solid var(--kp-line); margin:26px 0}

/* Буквица у первого абзаца — как в книжной вёрстке. Класс свой, не «lead»: так называется
   абзац-врезка в Bootstrap, и он раздувал текст до 21px. */
.kp-body .kp-first{margin-bottom:16px}
.kp-body .dropcap{
	float:left; font-family:var(--kp-face); font-size:58px; line-height:.86;
	margin:2px 10px 0 0; color:var(--kp-cap);
}
.kp-body .kp-first::after{content:''; display:block; clear:both}

/* Посвящение или эпиграф над текстом */
.kp-body .epi{
	font-style:italic; color:var(--kp-dim); text-align:right;
	margin:0 0 22px; padding-right:2px;
}

/* Прямая речь: своей строкой, с отступом — как в книге, а не внутри абзаца */
.kp-body .say{margin:0 0 10px; padding-left:20px; text-indent:-20px}

/* Интервью. Вопрос — реплика без подложки, полужирная, с тире; ответ — блок с отбивкой
   слева и именем говорящего. Имя спрашивающего не печатаем: он один на все вопросы. */
.kp-body .q{
	margin:26px 0 8px; padding:0; border:0;
	font-weight:600; line-height:1.55;
}
.kp-body .q::before{content:'— '; color:var(--kp-cap); font-weight:700}
.kp-body .q .who{display:none}
.kp-body .q i{font-style:normal}

.kp-body .a{
	margin:0 0 8px; padding:8px 0 8px 16px;
	border-left:2px solid var(--kp-line);
}
.kp-body .a .who{
	display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
	color:var(--kp-dim); margin-bottom:3px;
}
/* Ответ без подписи (собеседник один и уже представлен) прижимаем к вопросу */
.kp-body .a:not(:has(.who)){padding-top:2px}

/* Врезки — как во врезках новостей БК */
.kp-body .core, .kp-body .note{
	background:var(--kp-fill); border:1px solid var(--kp-soft);
	border-left:3px solid var(--kp-acc); padding:13px 17px; margin:0 0 18px;
}
.kp-body .note{border-left-color:var(--kp-warn)}
.kp-body .dim{color:var(--kp-dim)}

/* Таблица условий */
.kp-body table{width:100%; border-collapse:collapse; margin:0 0 16px}
.kp-body th{
	text-align:left; font-size:13px; padding:8px 10px;
	background:var(--kp-th); border:1px solid var(--kp-cell);
}
.kp-body td{padding:8px 10px; border:1px solid var(--kp-cell); vertical-align:top; font-size:14px}
.kp-body td.n{text-align:center; white-space:nowrap; font-weight:bold}

/* Возврат в блог и метки записи */
.kp-back{margin:0 0 14px; font-size:13px}
.kp-back a{text-decoration:none}
.kp-tags{margin:18px 0 0}
.kp-tags a{
	display:inline-block; margin:0 5px 6px 0; padding:2px 10px; font-size:12px;
	border:1px solid var(--kp-line); border-radius:11px; text-decoration:none;
}
.kp-foot{
	margin-top:30px; padding-top:14px; border-top:1px solid var(--kp-line);
	color:var(--kp-dim); font-size:12px; text-align:center;
}
@media (max-width:600px){ .kp-head h1{font-size:26px} .kp-body h2{font-size:20px} }

/* Просмотр скриншотов: окно поверх страницы. Подложка тёмная в любой теме —
   на ней снимок читается лучше всего, цвета скина тут ни при чём. */
.kp-body a.kp-zoom{cursor:zoom-in}
.kp-lb{position:fixed; inset:0; z-index:100001; display:none; background:rgba(10,12,16,.92)}
.kp-lb.on{display:block}
.kp-lb-s{position:absolute; inset:0; overflow:auto; display:flex; align-items:center; justify-content:center; padding:48px 56px 56px}
.kp-lb-s img{max-width:100%; max-height:100%; height:auto; box-shadow:0 8px 30px rgba(0,0,0,.6); cursor:zoom-out}
.kp-lb.full .kp-lb-s{display:block; padding:48px 10px 56px}
.kp-lb.full .kp-lb-s img{max-width:none; max-height:none}
.kp-lb-c{position:absolute; left:0; right:0; bottom:0; padding:12px 60px; text-align:center; font-size:13px; color:#c9d1db; pointer-events:none}
.kp-lb button{position:absolute; border:0; background:rgba(255,255,255,.12); color:#fff; border-radius:50%;
	width:42px; height:42px; font-size:24px; line-height:42px; padding:0; cursor:pointer}
.kp-lb button:hover{background:rgba(255,255,255,.25)}
.kp-lb-x{top:8px; right:8px}
.kp-lb-p{left:8px; top:50%; margin-top:-21px}
.kp-lb-n{right:8px; top:50%; margin-top:-21px}
@media (max-width:600px){
	.kp-lb-s{padding:52px 8px 60px}
	.kp-lb-p, .kp-lb-n{top:auto; bottom:8px; margin-top:0}
	.kp-lb-c{padding:12px 56px 18px}
}

/* Список записей /p/ */
.kp-list .kp-head{margin-bottom:26px}
.kp-list .kp-head h1{line-height:1.1}
.bl-item{
	border:1px solid var(--kp-soft); border-left:3px solid var(--kp-acc);
	background:var(--kp-item); padding:15px 18px; margin:0 0 14px;
}
.bl-item h2{font-family:var(--kp-face); font-weight:normal; font-size:22px; margin:0 0 4px}
.bl-item h2 a{text-decoration:none}
.bl-item .meta{font-size:12px; color:var(--kp-dim); margin:0 0 8px}
.bl-item p{margin:0; font-size:14px; line-height:1.65}
.bl-empty{color:var(--kp-dim); text-align:center; padding:30px 0}

/* Метки и постраничность */
.bl-tags{text-align:center; margin:0 0 22px}
.bl-tags a{
	display:inline-block; margin:0 4px 6px; padding:4px 11px; font-size:13px;
	border:1px solid var(--kp-line); border-radius:12px; text-decoration:none;
}
.bl-tags a .n{color:var(--kp-dim); font-size:12px}
.bl-tags a.on{border-color:var(--kp-acc); background:var(--kp-acc-bg); color:var(--kp-acc-fg)}
.bl-tags a.on .n{color:var(--kp-acc-fg)}
.bl-item .tag{
	display:inline-block; margin:8px 5px 0 0; padding:2px 9px; font-size:12px;
	border:1px solid var(--kp-line); border-radius:11px; text-decoration:none;
}
.bl-pager{text-align:center; margin:22px 0 0}
.bl-pager a, .bl-pager span{
	display:inline-block; min-width:32px; margin:0 3px; padding:5px 9px; font-size:14px;
	border:1px solid var(--kp-line); text-decoration:none;
}
.bl-pager span.cur{border-color:var(--kp-acc); background:var(--kp-acc-bg); color:var(--kp-acc-fg); font-weight:bold}
@media (max-width:600px){ .kp-list .kp-head h1{font-size:26px} .bl-item h2{font-size:19px} }