/*
Theme Name: Хронотоп Модерн
Theme URI: https://chronotope.ru/
Description: Действующая тема сайта. Современная вёрстка: сетка вместо абсолютного позиционирования, настоящая мобильная версия с бургер-меню, весь текст набран текстом, а не нарисован картинками. Дочерняя тема Twenty Thirteen: родительская обновляется штатно, и эти правки при обновлении не затираются.
Author: Chronotope Dev
Template: twentythirteen
Version: 1.0.7
Requires PHP: 7.4
Text Domain: chronotope-modern
*/

/* ==========================================================================
   1. Шрифты
   Romul — меню, Annabelle — каллиграфия. Оба раньше рисовались через Cufón:
   текст подменялся картинкой на canvas. Теперь это настоящие веб-шрифты,
   собранные из тех же исходных данных (см. _deploy/tools/cufon2font.py).
   ========================================================================== */

@font-face {
	font-family: 'Romul';
	src: url('fonts/romul.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Annabelle';
	src: url('fonts/annabelle.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/*
 * Рукописный шрифт от заказчика: Alexandra Zeferino One.
 *
 * В исходном файле буквы мельче, чем у Annabelle, при том же кегле —
 * строчные занимают 0.223 кегля против 0.417. Масштаб впечён в сам файл
 * (уменьшена кегельная площадка), а не задан через size-adjust: этот
 * дескриптор появился в Safari только в 17-й версии, а заголовок главной
 * виден и на телефонах — на устройствах постарше надпись вышла бы вдвое
 * мельче. Пересобирается скриптами в _deploy/tools.
 *
 * Коэффициент 1.71 уравнивает длину строки с Annabelle, а не высоту букв
 * (для той нужен 1.87). Раскладка каллиграфии подогнана под ширину
 * фрагментов: строки, ставшие на десятую длиннее, ломались в лишних
 * местах и наезжали на плитки. Буквы при этом ниже на 8%, на глаз
 * незаметно.
 */
@font-face {
	font-family: 'Zeferino One';
	src: url('fonts/zeferino-one.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   2. Токены
   Палитра взята из старой темы без изменений, чтобы сайт остался узнаваемым.
   ========================================================================== */

:root {
	/* Цвета */
	--c-bg: #faeedd;
	--c-surface: #faf5e8;
	--c-tile-back: #ffefd5;
	--c-ink: #141412;
	--c-ink-soft: #6b635a;
	--c-rule: #80746f;
	--c-rule-soft: #afa79b;
	--c-accent: #000;

	/* Шрифты */
	--font-display: Bitter, Georgia, 'Times New Roman', serif;
	--font-ui: 'Source Sans Pro', 'Segoe UI', Helvetica, sans-serif;
	--font-body: Georgia, 'Times New Roman', serif;
	--font-menu: 'Romul', Georgia, serif;
	--font-script: 'Zeferino One', 'Annabelle', 'Segoe Script', cursive;

	/*
	 * Плавная типографская шкала. Размер зависит от ширины экрана,
	 * поэтому отдельные медиазапросы под каждый кегль не нужны.
	 */
	--step--1: clamp(0.83rem, 0.79rem + 0.20vw, 0.94rem);
	--step-0:  clamp(1.00rem, 0.94rem + 0.31vw, 1.19rem);
	--step-1:  clamp(1.20rem, 1.10rem + 0.50vw, 1.50rem);
	--step-2:  clamp(1.44rem, 1.28rem + 0.80vw, 1.90rem);
	--step-3:  clamp(1.73rem, 1.48rem + 1.24vw, 2.40rem);
	--step-4:  clamp(2.07rem, 1.70rem + 1.87vw, 3.03rem);

	/* Ритм и размеры */
	--space-3xs: 0.25rem;
	--space-2xs: 0.5rem;
	--space-xs: 0.75rem;
	--space-s: 1rem;
	--space-m: 1.5rem;
	--space-l: 2.5rem;
	--space-xl: 4rem;
	--space-2xl: 6rem;

	--container: 1200px;
	--measure: 66ch;
	--radius: 2px;
}

/* ==========================================================================
   3. Сброс
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol {
	margin: 0;
}

/*
 * Базовый кегль задаётся через :root, а не html, намеренно: плагин
 * tiva-events-calendar тянет за собой Bootstrap, а тот ставит
 * html { font-size: 10px }. Вся вёрстка темы считается в rem, поэтому без
 * этой строки размеры уезжают в полтора раза. Селектор :root специфичнее
 * html, так что правило выигрывает независимо от порядка подключения.
 */
:root {
	font-size: 100%;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

img,
picture,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

/* ==========================================================================
   4. База
   ========================================================================== */

body {
	background-color: var(--c-bg);
	color: var(--c-ink);
	font-family: var(--font-body);
	font-size: var(--step-0);
	line-height: 1.65;
	/*
	 * Ни один блок не должен вылезать за ширину экрана. В старой теме
	 * горизонтальная прокрутка появлялась из-за абсолютно спозиционированных
	 * элементов с отрицательными координатами.
	 */
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: 1.2;
	text-wrap: balance;
}

h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }
h4, h5, h6 { font-size: var(--step-0); }

a {
	color: var(--c-accent);
	text-decoration: none;
}

a:hover,
a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

:focus-visible {
	outline: 2px solid var(--c-rule);
	outline-offset: 3px;
}

/* ==========================================================================
   5. Примитивы раскладки
   Заменяют собой абсолютное позиционирование старой темы.
   ========================================================================== */

.chr-container {
	width: min(100% - 2 * var(--space-s), var(--container));
	margin-inline: auto;
}

/* Колонка текста комфортной для чтения ширины */
.chr-measure {
	max-width: var(--measure);
}

/* Вертикальный ритм: отступ появляется между соседями, а не у краёв */
.chr-stack > * + * {
	margin-block-start: var(--flow, var(--space-m));
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed !important;
	top: var(--space-s);
	left: var(--space-s);
	z-index: 1000;
	width: auto;
	height: auto;
	padding: var(--space-2xs) var(--space-s);
	clip-path: none;
	background: var(--c-surface);
	border: 1px solid var(--c-rule);
}