/* ============================================================
   ТОКЕНЫ ДИЗАЙНА — СТИЛЬ «ЛАВАНДА»
   ============================================================ */
:root {
	/* --- Палитра --- */
	--c-bg:            #faf8fc;
	--c-surface:       #ffffff;
	--c-surface-alt:   #f1ecf7;
	--c-text:          #2a2633;
	--c-text-soft:     #5a5266;
	--c-muted:         #8a8296;
	--c-border:        #e6dff0;
	--c-border-strong: #cec3de;

	--c-accent:        #8b6bb1;
	--c-accent-dark:   #6e4f94;
	--c-accent-soft:   #ede4f7;
	--c-on-accent:     #ffffff;

	--c-success:       #5baa7d;
	--c-warning:       #d9a33a;
	--c-danger:        #c95a72;
	--c-info:          #6a8cc9;

	/* --- Типографика --- */
	--font-base:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-heading: Georgia, "Times New Roman", serif;
	--font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--fs-xs:   0.78rem;
	--fs-sm:   0.88rem;
	--fs-base: 1rem;
	--fs-md:   1.12rem;
	--fs-lg:   1.35rem;
	--fs-xl:   1.75rem;
	--fs-2xl:  2.2rem;
	--fs-3xl:  2.8rem;

	--lh-tight: 1.2;
	--lh-base:  1.65;

	--fw-heading: 700;
	--ls-heading: 0;
	--ls-btn:     0.02em;
	--tt-btn:     none;
	--ls-badge:   0.04em;
	--tt-badge:   uppercase;

	/* --- Отступы (шкала 4px) --- */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 24px;
	--sp-6: 32px;
	--sp-7: 48px;
	--sp-8: 64px;
	--sp-9: 96px;

	/* --- Радиусы --- */
	--r-sm:    8px;
	--r-md:    14px;
	--r-lg:    24px;
	--r-full:  999px;
	--r-btn:   var(--r-full);
	--r-card:  16px;
	--r-input: 12px;
	--r-badge: var(--r-full);

	--bw-card:  1px;
	--bw-input: 1px;

	/* --- Тени --- */
	--sh-sm:   0 1px 3px rgba(60,40,90,0.05);
	--sh-md:   0 8px 24px rgba(60,40,90,0.08);
	--sh-lg:   0 16px 40px rgba(60,40,90,0.12);
	--sh-card: var(--sh-sm);

	/* --- Контейнер --- */
	--container: 1160px;
}

/* ============================================================
   БАЗА
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--font-base);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	color: var(--c-text);
	background: var(--c-bg);
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-accent-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5 {
	font-family: var(--font-heading);
	font-weight: var(--fw-heading);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-heading);
	color: var(--c-text);
	margin: 0 0 var(--sp-3);
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-md); }
p { margin: 0 0 1.2em; }
hr { border: 0; border-top: 1px solid var(--c-border); margin: var(--sp-6) 0; }

.container {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--sp-5);
}

.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px; height: 1px;
	overflow: hidden;
	white-space: nowrap;
}

/* ============================================================
   ДВУХКОЛОНОЧНАЯ СЕТКА НА ВСЮ ШИРИНУ ОКНА
   ============================================================ */
.content-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 0; /* убираем gap, отступы зададим внутри колонок */
	align-items: start;
	width: 100%;
	max-width: 100%;
	margin: 0;
}

/* Левая колонка — контент с внутренними отступами */
.site-main {
	min-width: 0;
	padding-left: var(--sp-6);   /* 32px слева */
	padding-right: var(--sp-6);  /* 32px справа */
}

/* Правая колонка — сайдбар у правого края */
.sidebar {
	padding-right: var(--sp-6);  /* 32px от правого края окна */
	padding-left: var(--sp-5);   /* 24px от контента */
}

/* На мобильных сайдбар скрыт, контент во всю ширину */
@media (max-width: 900px) {
	.content-inner {
		grid-template-columns: 1fr;
	}
	.sidebar {
		display: none;
	}
	.site-main {
		padding-left: var(--sp-5);
		padding-right: var(--sp-5);
	}
}

/* ============================================================
   КНОПКИ
   ============================================================ */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	padding: var(--sp-3) var(--sp-5);
	border-radius: var(--r-btn);
	font-family: var(--font-base);
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1;
	border: 2px solid transparent;
	cursor: pointer;
	transition: all 0.18s ease;
	text-decoration: none;
	white-space: nowrap;
	letter-spacing: var(--ls-btn);
	text-transform: var(--tt-btn);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--c-accent); color: var(--c-on-accent); }
.btn--primary:hover { background: var(--c-accent-dark); box-shadow: var(--sh-md); }

.btn--outline {
	background: transparent;
	color: var(--c-accent-dark);
	border-color: var(--c-accent);
}
.btn--outline:hover { background: var(--c-accent-soft); }

.btn--ghost {
	background: transparent;
	color: var(--c-text);
	padding: var(--sp-2) var(--sp-3);
}
.btn--ghost:hover { background: var(--c-surface-alt); }

.btn--link {
	background: none; border: 0; padding: 0;
	color: var(--c-accent-dark); font-weight: 600; border-radius: 0;
}
.btn--link:hover { text-decoration: underline; transform: none; box-shadow: none; }

.btn--sm { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-xs); }
.btn--lg { padding: var(--sp-4) var(--sp-6); font-size: var(--fs-base); }

/* ============================================================
   БЕЙДЖИ / ПИЛЮЛИ
   ============================================================ */
.badge {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-1);
	padding: var(--sp-1) var(--sp-3);
	border-radius: var(--r-badge);
	font-size: var(--fs-xs);
	font-weight: 600;
	background: var(--c-surface-alt);
	color: var(--c-text-soft);
	line-height: 1.4;
	letter-spacing: var(--ls-badge);
	text-transform: var(--tt-badge);
}
.badge--accent { background: var(--c-accent-soft); color: var(--c-accent-dark); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
	background: linear-gradient(180deg, var(--c-accent-soft) 0%, var(--c-bg) 100%);
	padding: var(--sp-8) 0 var(--sp-7);
	text-align: center;
}
.hero__eyebrow {
	display: inline-block;
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--c-accent-dark);
	background: var(--c-surface);
	padding: var(--sp-1) var(--sp-4);
	border-radius: var(--r-full);
	margin-bottom: var(--sp-5);
	box-shadow: var(--sh-sm);
}
.hero h1 {
	font-size: var(--fs-3xl);
	max-width: 760px;
	margin: 0 auto var(--sp-4);
}
.hero__lead {
	max-width: 620px;
	margin: 0 auto var(--sp-6);
	color: var(--c-text-soft);
	font-size: var(--fs-md);
	line-height: 1.55;
}
.hero__actions {
	display: flex;
	gap: var(--sp-4);
	justify-content: center;
	flex-wrap: wrap;
}
.hero__image {
	margin: var(--sp-7) auto 0;
	max-width: 900px;
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--sh-lg);
}
.hero__image img { width: 100%; }

/* ============================================================
   СЕКЦИИ
   ============================================================ */
.section { padding: var(--sp-7) 0; }
.section--soft { background: var(--c-surface); }

.section-title {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	margin: 0 0 var(--sp-6);
}
.section-title::after {
	content: "";
	flex: 1;
	height: 2px;
	background: var(--c-border);
	border-radius: 2px;
}
.section-title span {
	font-family: var(--font-heading);
	font-size: var(--fs-xl);
	font-weight: var(--fw-heading);
	color: var(--c-text);
	white-space: nowrap;
}
.section-title a {
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--c-accent-dark);
	white-space: nowrap;
}

/* ============================================================
   ПИЛЮЛИ РУБРИК
   ============================================================ */
.categories {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	justify-content: center;
}
.pill {
	display: inline-block;
	padding: var(--sp-3) var(--sp-5);
	border-radius: var(--r-full);
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	color: var(--c-text);
	font-size: 0.9rem;
	transition: all 0.18s ease;
}
.pill:hover {
	background: var(--c-accent-soft);
	border-color: var(--c-accent);
	color: var(--c-accent-dark);
	text-decoration: none;
}
.pill.is-active {
	background: var(--c-accent);
	border-color: var(--c-accent);
	color: var(--c-on-accent);
}

/* ============================================================
   СЕТКА КАРТОЧЕК
   ============================================================ */
.posts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: var(--sp-6);
}

.card {
	background: var(--c-surface);
	border: var(--bw-card) solid var(--c-border);
	border-radius: var(--r-card);
	overflow: hidden;
	box-shadow: var(--sh-card);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	display: flex;
	flex-direction: column;
}
.card:hover {
	transform: translateY(-4px);
	box-shadow: var(--sh-md);
}
.card__thumb {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--c-surface-alt);
}
.card__thumb img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.card:hover .card__thumb img { transform: scale(1.04); }
.card__body {
	padding: var(--sp-5);
	display: flex;
	flex-direction: column;
	flex: 1;
}
.card__category {
	display: inline-block;
	align-self: flex-start;
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-badge);
	color: var(--c-accent-dark);
	background: var(--c-accent-soft);
	padding: var(--sp-1) var(--sp-3);
	border-radius: var(--r-badge);
	margin-bottom: var(--sp-3);
}
.card__title {
	font-size: var(--fs-lg);
	margin: 0 0 var(--sp-3);
	line-height: 1.3;
}
.card__title a { color: var(--c-text); }
.card__title a:hover { color: var(--c-accent-dark); text-decoration: none; }
.card__excerpt {
	font-size: var(--fs-sm);
	color: var(--c-text-soft);
	margin: 0 0 var(--sp-5);
	flex: 1;
}
.card__meta {
	font-size: var(--fs-xs);
	color: var(--c-muted);
	display: flex;
	gap: var(--sp-4);
	align-items: center;
}
.card__meta span + span::before {
	content: "•";
	margin-right: var(--sp-2);
	color: var(--c-border-strong);
}

/* ============================================================
   БЛОК «ОБ АВТОРЕ»
   ============================================================ */
.about {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: var(--sp-7);
	align-items: center;
	background: var(--c-surface);
	border-radius: var(--r-lg);
	padding: var(--sp-7);
	box-shadow: var(--sh-sm);
	border: 1px solid var(--c-border);
}
.about__photo {
	border-radius: var(--r-lg);
	overflow: hidden;
	aspect-ratio: 1 / 1;
	box-shadow: var(--sh-md);
}
.about__photo img { width: 100%; height: 100%; object-fit: cover; }
.about__content h2 { margin-top: 0; }
.about__content p { color: var(--c-text-soft); }
.about__signature {
	font-family: var(--font-heading);
	font-style: italic;
	font-size: var(--fs-md);
	color: var(--c-accent-dark);
	margin-top: var(--sp-4);
}

/* ============================================================
   ПОДПИСКА
   ============================================================ */
.subscribe {
	background: var(--c-accent-soft);
	border-radius: var(--r-lg);
	padding: var(--sp-8) var(--sp-7);
	text-align: center;
}
.subscribe h2 { margin: 0 0 var(--sp-3); }
.subscribe p {
	color: var(--c-text-soft);
	max-width: 500px;
	margin: 0 auto var(--sp-5);
}
.subscribe__form {
	display: flex;
	gap: var(--sp-3);
	max-width: 500px;
	margin: 0 auto;
	flex-wrap: wrap;
	justify-content: center;
}
.subscribe__form input {
	flex: 1;
	min-width: 240px;
	padding: var(--sp-4) var(--sp-5);
	border: var(--bw-input) solid var(--c-border-strong);
	border-radius: var(--r-full);
	font-size: var(--fs-base);
	font-family: inherit;
	background: var(--c-surface);
	color: var(--c-text);
	outline: none;
	transition: border-color 0.18s, box-shadow 0.18s;
}
.subscribe__form input:focus {
	border-color: var(--c-accent);
	box-shadow: 0 0 0 3px rgba(139,107,177,0.15);
}

/* ============================================================
   ПАГИНАЦИЯ
   ============================================================ */
.pagination {
	display: flex;
	gap: var(--sp-2);
	justify-content: center;
	flex-wrap: wrap;
	margin-top: var(--sp-7);
}
.pagination a, .pagination span {
	min-width: 42px; height: 42px;
	padding: 0 var(--sp-4);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--r-input);
	border: 1px solid var(--c-border);
	background: var(--c-surface);
	color: var(--c-text);
	font-size: var(--fs-sm);
	transition: all 0.18s;
}
.pagination a:hover {
	background: var(--c-accent-soft);
	border-color: var(--c-accent);
	color: var(--c-accent-dark);
	text-decoration: none;
}
.pagination .is-current {
	background: var(--c-accent);
	border-color: var(--c-accent);
	color: var(--c-on-accent);
}


/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width: 900px) {
	.hero h1 { font-size: var(--fs-2xl); }
	.about { grid-template-columns: 1fr; text-align: center; }
	.about__photo { max-width: 220px; margin: 0 auto; }
	.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
	.menu-toggle { display: block; }
	.main-navigation {
		display: none;
		position: absolute;
		top: 76px; left: 0; right: 0;
		background: var(--c-surface);
		border-bottom: 1px solid var(--c-border);
		padding: var(--sp-5);
	}
	.main-navigation.is-open { display: block; }
	.main-navigation ul { flex-direction: column; gap: var(--sp-3); }
	.header-inner .btn { display: none; }
	.hero { padding: var(--sp-6) 0 var(--sp-5); }
	.section { padding: var(--sp-6) 0; }
	.subscribe { padding: var(--sp-6) var(--sp-5); }
	.footer-grid { grid-template-columns: 1fr; }
}