/*
Theme Name: dds_cocomillacakery.com
Author: Анна Калинина
Description: Тема-альбом для портала о подборе и оформлении помещений под пекарни, кафе и кондитерские: крафт, калька, миллиметровка, штампы и образцы фактур.
Version: 1.1
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cocomil
*/

@font-face {
	font-family: "Roboto Condensed";
	src: url("fonts/roboto-condensed.woff2") format("woff2");
	font-weight: 300 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Caveat";
	src: url("fonts/caveat.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

:root {
	--kraft: #f2e6d0;
	--grid: #e4d3b4;
	--choc: #3a2418;
	--deep: #2a1a12;
	--ink: #4a3222;
	--muted: #8a7360;
	--rasp: #d63b5c;
	--rasp-dark: #b02a48;
	--caramel: #e8a33d;
	--mint: #7fa88c;
	--line: #b8a17f;
	--kalka: #f8f2e6;
	--paper: #efdfcb;
	--kraft-dark: #dcc29d;
	--atlas: #ece6dc;
	--sidebar: #e9d9bc;
	--white: #fffaf2;
	--font-head: "Roboto Condensed", "Arial Narrow", "Liberation Sans Narrow", "Helvetica Neue", Arial, sans-serif;
	--font-text: "Roboto Condensed", "Arial Narrow", "Liberation Sans Narrow", Arial, sans-serif;
	--font-hand: "Caveat", "Segoe Print", "Comic Sans MS", cursive;
}

/* ---------- Скрытые элементы (до основных стилей) ---------- */
.cookie-note[hidden] { display: none !important; }

/* ---------- База ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	overflow-x: hidden;
	font-family: var(--font-text);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--ink);
	background-color: var(--kraft);
	background-image:
		linear-gradient(var(--grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--grid) 1px, transparent 1px),
		linear-gradient(rgba(228, 211, 180, 0.45) 1px, transparent 1px),
		linear-gradient(90deg, rgba(228, 211, 180, 0.45) 1px, transparent 1px),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .18 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px, 220px 220px;
}
img { max-width: 100%; height: auto; }
a { color: var(--choc); text-decoration: underline; text-decoration-color: var(--rasp); text-decoration-thickness: 2px; text-underline-offset: 3px; transition: color .15s, text-decoration-color .15s; }
a:hover { color: var(--rasp); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px dashed var(--rasp); outline-offset: 3px; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); color: var(--choc); line-height: 1.12; margin: 1.6em 0 .6em; font-weight: 800; letter-spacing: -.005em; }
h1 { font-size: clamp(2rem, 5vw, 3.3rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.25rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); }
h4 { font-size: 1.2rem; }
p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.4em; }
li { margin-bottom: .35em; }
blockquote {
	margin: 1.6em 0;
	padding: 1.2em 1.4em 1.2em 1.6em;
	background: var(--kalka);
	border: 1px solid var(--line);
	border-left: 6px solid var(--rasp);
	font-size: 1.15rem;
	color: var(--choc);
}
blockquote p:last-child { margin-bottom: 0; }
table { width: 100%; border-collapse: collapse; margin: 1.4em 0; background: var(--kalka); border: 1px solid var(--line); }
th, td { border: 1px solid var(--line); padding: .6em .8em; text-align: left; vertical-align: top; }
th { background: var(--choc); color: var(--kraft); font-weight: 700; text-transform: uppercase; font-size: .9rem; letter-spacing: .04em; }
code, pre { font-family: "Courier New", monospace; background: var(--kalka); }
pre { padding: 1em 1.2em; overflow-x: auto; border: 1px solid var(--line); }
hr { border: 0; border-top: 2px dashed var(--line); margin: 2em 0; }
.screen-reader-text, .skip-link:not(:focus) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.skip-link:focus { position: absolute; top: .5rem; left: .5rem; z-index: 100; background: var(--rasp); color: #fff; padding: .6rem 1rem; }
p, li, h1, h2, h3, h4, td, th, .card-title, .crumbs, .widget { overflow-wrap: break-word; hyphens: auto; }

.shell { width: min(92%, 1240px); margin-inline: auto; }

/* ---------- Кнопки ---------- */
.btn {
	display: inline-block;
	padding: .85rem 2.2rem;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1.1rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	text-decoration: none;
	color: #fff;
	background: var(--rasp);
	border: 2px solid var(--rasp);
	outline: 2px solid var(--rasp);
	outline-offset: 3px;
	border-radius: 0;
	cursor: pointer;
	transition: background .15s, color .15s, transform .15s;
}
.btn:hover { background: var(--rasp-dark); color: #fff; transform: translate(0, -2px); }
.btn-line {
	display: inline-block;
	padding: .5rem 1.4rem;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: .95rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	text-decoration: none;
	color: var(--choc);
	background: var(--white);
	border: 1px solid var(--choc);
	box-shadow: inset 0 0 0 2px var(--white), inset 0 0 0 3px var(--choc);
	transition: background .15s, color .15s;
}
.btn-line:hover { background: var(--rasp); color: #fff; border-color: var(--rasp); box-shadow: inset 0 0 0 2px var(--rasp), inset 0 0 0 3px #fff; }

/* Ярлык на кальке */
.label-kalka {
	display: inline-block;
	position: relative;
	padding: .55rem 1.4rem .6rem;
	background: rgba(250, 246, 238, .92);
	color: var(--choc);
	font-family: var(--font-head);
	font-weight: 800;
	text-transform: uppercase;
	font-size: clamp(1.35rem, 2.6vw, 2rem);
	line-height: 1.05;
	letter-spacing: .01em;
	clip-path: polygon(0 6%, 3% 0, 22% 4%, 47% 0, 71% 5%, 100% 0, 98% 52%, 100% 100%, 76% 95%, 51% 100%, 27% 96%, 2% 100%, 0 55%);
	margin: 0 0 1.4rem;
}
.title-under {
	font-size: clamp(1.7rem, 3.4vw, 2.4rem);
	margin: 0 0 1.4rem;
}
.title-under span {
	background-image: linear-gradient(var(--rasp), var(--rasp));
	background-size: 100% 3px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	padding-bottom: .12em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* ---------- Шапка ---------- */
.site-head {
	background: var(--choc);
	color: var(--kraft);
	border-bottom: 4px solid var(--deep);
}
.head-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.1rem 0;
}
.brand { display: flex; align-items: center; gap: 1rem; min-width: 0; text-decoration: none; color: inherit; }
.brand:hover { color: inherit; }
.brand-mark { flex: 0 0 auto; width: 92px; height: 92px; display: block; }
.brand-logo { display: block; max-height: 92px; width: auto; }
.brand-text { min-width: 0; }
.brand-name {
	display: block;
	font-family: var(--font-head);
	font-weight: 800;
	font-size: clamp(1.05rem, 1.8vw, 1.45rem);
	line-height: 1.15;
	color: #e7c79d;
	max-width: 40ch;
}
.brand-desc {
	display: block;
	margin-top: .35rem;
	font-size: .9rem;
	line-height: 1.35;
	color: #d8c2a3;
	max-width: 62ch;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.8rem; justify-content: flex-end; }
.main-nav li { margin: 0; }
.main-nav a {
	color: #e9d5b6;
	text-decoration: none;
	font-size: 1.15rem;
	padding: .3rem 0;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}
.main-nav a:hover, .main-nav .current-menu-item > a { color: #fff; border-bottom-color: var(--rasp); }
.nav-toggle {
	display: none;
	background: transparent;
	color: var(--kraft);
	border: 2px solid var(--kraft);
	font-family: var(--font-head);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	padding: .5rem .9rem;
	cursor: pointer;
}
.nav-toggle:hover { background: var(--rasp); border-color: var(--rasp); }
/* ---------- Хлебные крошки ---------- */
.crumbs { font-size: .95rem; color: var(--muted); margin: 1.8rem 0 1.2rem; }
.crumbs a { color: var(--choc); }
.crumbs .sep { color: var(--rasp); margin: 0 .35rem; font-weight: 700; }
.crumbs span:last-child { color: var(--ink); }

/* ---------- Главная: общий ---------- */
.front { width: 85%; margin-inline: auto; padding-bottom: 3rem; }
.fs { padding: 2.5rem 0; }

/* Первый экран */
.hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	align-items: center;
	gap: 2.5rem;
	padding: 3.5rem 0 3rem;
}
.hero-text { min-width: 0; }
.hero h1 {
	font-size: clamp(2.4rem, 5.6vw, 4.6rem);
	line-height: 1.02;
	margin: 0 0 1.5rem;
	letter-spacing: -.01em;
	color: var(--deep);
	text-transform: none;
}
.hero-lead { hyphens: manual; font-size: clamp(1.2rem, 2vw, 1.6rem); color: var(--ink); max-width: 26ch; margin: 0 0 2rem; line-height: 1.35; }
.hero-art { position: relative; min-width: 0; }
.hero-art img { display: block; width: 100%; height: auto; aspect-ratio: 1288 / 1144; filter: drop-shadow(0 2px 0 rgba(58, 36, 24, .08)); }
.dim {
	position: absolute;
	font-family: var(--font-hand);
	font-weight: 600;
	color: #2b2b2b;
	font-size: clamp(.95rem, 1.6vw, 1.35rem);
	line-height: 1;
	padding: 0 .25rem;
	background: rgba(246, 244, 240, .82);
	white-space: nowrap;
}
.dim-top { left: 63%; top: 28.4%; transform: rotate(4deg); }
.dim-side { left: 84.5%; top: 50%; transform: rotate(-86deg); }
.dim-bottom { left: 55%; top: 84.6%; transform: rotate(5deg); }

/* Двухколоночные ряды главной */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
.duo > * { min-width: 0; }

/* Блок 1 — зоны */
.zones-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.zones-intro { color: var(--ink); margin: -.6rem 0 2.6rem; max-width: 46ch; }
.zones-board { position: relative; padding: 3.4rem 0 4.4rem 3.6rem; }
.zones-frame {
	position: relative;
	background: var(--mint);
	padding: 14px;
	border-radius: 14px;
	clip-path: polygon(0 4%, 2% 0, 98% 0, 100% 4%, 100% 96%, 98% 100%, 2% 100%, 0 96%);
}
.zones-frame img { display: block; width: 100%; height: auto; aspect-ratio: 526 / 247; object-fit: cover; background: var(--paper); }
.zone {
	position: absolute;
	display: flex;
	align-items: flex-start;
	gap: .45rem;
	padding: .45rem .9rem .5rem .7rem;
	background: #9cbfa6;
	color: var(--deep);
	clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
	line-height: 1.15;
	z-index: 2;
}
.zone b { display: block; font-family: var(--font-head); font-size: 1.15rem; font-weight: 800; }
.zone small { display: block; font-size: .82rem; color: #2f3b31; }
.zone-num {
	flex: 0 0 auto;
	display: inline-grid;
	place-items: center;
	width: 1.35rem;
	height: 1.35rem;
	margin-top: .12rem;
	border-radius: 50%;
	background: var(--rasp);
	color: #fff;
	font-size: .78rem;
	font-weight: 700;
}
.zone-1 { left: 0; top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; padding: .8rem .45rem .8rem .5rem; }
.zone-1 .zone-num { transform: rotate(180deg); }
.zone-2 { top: 0; left: 52%; }
.zone-3 { bottom: 0; left: 5%; }
.zone-4 { bottom: 0; left: 38%; }
.zone-5 { bottom: 0; right: 0; }

/* Блок 2 — чек-лист */
.check-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: 1.6rem; align-items: start; }
.check-wrap > * { min-width: 0; }
.check-list { list-style: none; margin: 0; padding: 0; }
.check-list li {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr);
	gap: .6rem;
	align-items: start;
	padding: .55rem .9rem .55rem .7rem;
	margin: 0 0 .5rem;
	background: rgba(248, 242, 230, .7);
	border-left: 3px solid var(--caramel);
	clip-path: polygon(0 0, 100% 3%, 99% 100%, 0 96%);
}
.check-list svg { width: 28px; height: 28px; display: block; }
.check-list b { display: block; font-size: 1.3rem; font-weight: 500; color: var(--choc); line-height: 1.2; }
.check-list small { display: block; color: var(--muted); font-size: .92rem; line-height: 1.35; margin-top: .15rem; }
.photo-pin { position: relative; padding: 12px 12px 14px; background: var(--white); transform: rotate(1.6deg); margin-top: 1rem; }
.photo-pin img { display: block; width: 100%; height: auto; aspect-ratio: 259 / 195; object-fit: cover; }
.photo-pin::before {
	content: "";
	position: absolute;
	top: -16px;
	left: 30%;
	width: 42%;
	height: 34px;
	background: rgba(214, 186, 140, .82);
	transform: rotate(-2deg);
	z-index: 2;
}
.stamp {
	position: absolute;
	right: -10px;
	bottom: -22px;
	padding: .35rem .9rem;
	color: var(--rasp);
	font-family: var(--font-head);
	font-weight: 900;
	font-size: clamp(1.2rem, 2.2vw, 1.6rem);
	text-transform: uppercase;
	letter-spacing: .03em;
	border: 3px solid var(--rasp);
	outline: 1.5px solid var(--rasp);
	outline-offset: 3px;
	background: rgba(255, 250, 242, .72);
	transform: rotate(-12deg);
	mix-blend-mode: multiply;
	z-index: 3;
}

/* Последние записи */
.posts-row { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); gap: 2.4rem; align-items: start; }
.posts-row > * { min-width: 0; }
.folder-note { position: relative; margin-top: 1rem; }
.folder-note img { display: block; width: 100%; height: auto; aspect-ratio: 1092 / 744; }
.folder-note-text {
	position: absolute;
	left: 20%;
	right: 26%;
	top: 44%;
	hyphens: manual;
	transform: rotate(-1.2deg);
	color: var(--ink);
	font-family: var(--font-hand);
	font-size: clamp(1.15rem, 1.7vw, 1.5rem);
	line-height: 1.15;
}
.folder-note-text p { margin: 0 0 .5rem; }
.folder-note-text a { font-family: var(--font-head); font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.posts-panel {
	position: relative;
	background: var(--kraft-dark);
	padding: 4rem 2rem 2.4rem;
	clip-path: polygon(0 2%, 4% 0, 100% 1%, 99% 98%, 96% 100%, 1% 99%);
}
.posts-panel .label-kalka { position: absolute; top: -.2rem; left: 50%; transform: translateX(-50%); white-space: nowrap; margin: 0; }
.cards-front { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; align-items: start; }
.cards-front .card:nth-child(2) { margin-top: -1.2rem; }
.cards-front .card:nth-child(3) { margin-top: -.6rem; }
.empty-note { padding: 1.4rem 1.6rem; background: var(--kalka); border: 1px solid var(--line); }

/* Карточка записи */
.card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--white);
	border: 1px solid var(--line);
	padding: 10px;
	overflow: hidden;
	transform: rotate(var(--tilt, -1deg));
	transition: transform .2s;
	min-width: 0;
}
.card:nth-child(3n+2) { --tilt: .8deg; }
.card:nth-child(3n) { --tilt: 1.6deg; }
.card:hover { transform: rotate(0deg) translateY(-4px); }
.card-thumb { display: block; position: relative; overflow: hidden; border: 1px solid var(--line); }
.card-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .3s; }
.card:hover .card-thumb img { transform: scale(1.04); }
.card-body { flex: 1; display: flex; flex-direction: column; padding: .8rem .3rem .3rem; min-width: 0; }
.card-title { font-size: 1.22rem; line-height: 1.18; margin: 0 0 .35rem; font-weight: 800; }
.card-title a { text-decoration: none; color: var(--deep); }
.card-title a:hover { color: var(--rasp); }
.card-date { display: block; font-size: .88rem; color: var(--muted); margin-bottom: .45rem; }
.card-excerpt { font-size: .96rem; line-height: 1.45; color: var(--ink); margin-bottom: .9rem; }
.card-excerpt p { margin: 0 0 .5em; background: none; }
.card-more { margin-top: auto; align-self: stretch; text-align: center; }
.sticky-tag {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	background: var(--caramel);
	color: var(--deep);
	font-size: .78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	padding: .2rem .6rem;
}
.card.is-stacked { box-shadow: 6px 6px 0 -1px var(--white), 6px 6px 0 0 var(--line), 12px 12px 0 -1px var(--white), 12px 12px 0 0 var(--line); overflow: visible; }

/* Блок 3 — три пути */
.paths-intro { margin: -.6rem 0 2rem; max-width: 48ch; }
.paths { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: 2.2rem; align-items: start; }
.path {
	position: relative;
	background: var(--caramel);
	color: var(--deep);
	padding: 1.4rem 1rem 4.4rem;
	text-align: center;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 46px), 0 100%);
	min-width: 0;
	background-image: linear-gradient(rgba(255, 255, 255, .12), rgba(0, 0, 0, .04));
}
.path h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); margin: 0 0 1rem; line-height: 1.1; }
.path-area { display: block; font-size: 1.35rem; font-weight: 500; line-height: 1.25; margin-bottom: .6rem; }
.path-area span { display: block; font-size: 1rem; color: #5a3a1e; }
.path p { font-size: .95rem; line-height: 1.4; margin: 0; color: #3b2616; }
.path-wrap { position: relative; min-width: 0; }
.path-wrap:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 46%;
	right: -2.5rem;
	width: 2.8rem;
	height: 2.4rem;
	z-index: 2;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 48'%3E%3Cpath d='M3 10c14-6 28 0 38 22' fill='none' stroke='%232a1a12' stroke-width='2.6' stroke-dasharray='4 4' stroke-linecap='round'/%3E%3Cpath d='M33 30l9 5 2-10' fill='none' stroke='%232a1a12' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.path-wrap:nth-child(2) { margin-top: 1.6rem; }

/* Блок 4 — атлас фактур */
.atlas {
	position: relative;
	background-color: var(--atlas);
	background-image: linear-gradient(#d7d0c6 1px, transparent 1px), linear-gradient(90deg, #d7d0c6 1px, transparent 1px);
	background-size: 24px 24px;
	padding: 4.4rem 2rem 2.2rem;
	border: 1px solid #d3c7b6;
}
.atlas .label-kalka { position: absolute; top: -1.2rem; left: 50%; transform: translateX(-50%); white-space: nowrap; margin: 0; background: #e9e3d8; }
.swatches { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8rem 1.6rem; }
.swatch { margin: 0; text-align: center; min-width: 0; }
.swatch-img { position: relative; display: block; }
.swatch-img img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%); }
.swatch-img i {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 30%;
	height: 30%;
	z-index: 2;
	background: linear-gradient(135deg, #c9b9a2 0%, #e3d8c7 45%, #f6f0e6 100%);
	clip-path: polygon(0 0, 100% 0, 0 100%);
	filter: drop-shadow(-1px -1px 2px rgba(42, 26, 18, .18));
}
.swatch figcaption { font-family: var(--font-hand); font-size: 1.7rem; font-weight: 600; color: var(--deep); line-height: 1.1; margin-top: .45rem; }
.swatch small { display: block; font-family: var(--font-text); font-weight: 400; font-size: .85rem; color: var(--muted); line-height: 1.3; }

/* ---------- Внутренние страницы ---------- */
.layout-with-sidebar { display: grid; grid-template-columns: minmax(0, 67fr) minmax(0, 27fr); column-gap: 6%; align-items: start; padding-bottom: 3.5rem; }
.layout-single { display: block; width: 85%; margin-left: auto; margin-right: auto; padding-bottom: 3.5rem; }
.layout-with-sidebar > * { min-width: 0; }
.sheet {
	background: var(--kalka);
	border: 1px solid var(--line);
	padding: 2.2rem 2.4rem 2.4rem;
	position: relative;
}
.sheet::before {
	content: "";
	position: absolute;
	top: -12px;
	left: 2.4rem;
	width: 110px;
	height: 26px;
	background: rgba(214, 186, 140, .8);
	transform: rotate(-3deg);
}
.page-title { margin: 0 0 .6rem; font-size: clamp(1.9rem, 4vw, 2.8rem); }
.page-title span { background-image: linear-gradient(var(--rasp), var(--rasp)); background-size: 100% 3px; background-repeat: no-repeat; background-position: 0 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.entry-meta { color: var(--muted); font-size: .95rem; margin-bottom: 1.4rem; display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
.entry-meta a { color: var(--muted); }
.entry-cover { margin: 0 0 1.6rem; border: 1px solid var(--line); padding: 8px; background: var(--white); }
.entry-cover img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.entry-content > *:first-child { margin-top: 0; }
.entry-content img { display: block; height: auto; }
.entry-content h2 { border-bottom: 2px solid var(--rasp); padding-bottom: .25rem; }
.entry-content ul li::marker { color: var(--rasp); }
.entry-content .wp-block-image, .entry-content figure { margin: 1.6em 0; }
.entry-content figcaption { font-size: .9rem; color: var(--muted); text-align: center; margin-top: .4rem; }
.entry-tags { margin-top: 2rem; font-size: .95rem; }
.entry-tags a { display: inline-block; margin: 0 .3rem .4rem 0; padding: .15rem .6rem; background: var(--caramel); color: var(--deep); text-decoration: none; }
.archive-head { margin-bottom: 1.6rem; }
.archive-head p { color: var(--muted); }
.cards-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.8rem; align-items: start; }
.layout-single .cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards-grid .card-thumb img { aspect-ratio: 16 / 10; }
.post-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding-top: 1.2rem; border-top: 2px dashed var(--line); }
.post-nav a { text-decoration: none; font-weight: 700; color: var(--choc); }
.post-nav a:hover { color: var(--rasp); }

/* ---------- Сайдбар ---------- */
.sidebar {
	background: var(--sidebar);
	border: 1px solid var(--line);
	padding: 1.6rem 1.4rem;
	color: var(--ink);
	position: relative;
}
.sidebar .widget { margin-bottom: 1.8rem; color: var(--ink); }
.sidebar .widget:last-child { margin-bottom: 0; }
.sidebar .widget-title {
	font-size: 1.15rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--choc);
	margin: 0 0 .9rem;
	padding-bottom: .35rem;
	border-bottom: 3px solid var(--rasp);
	display: inline-block;
}
.sidebar ul { list-style: none; margin: 0; padding: 0; }
.sidebar li { margin: 0; padding: .55rem 0; border-bottom: 1px dashed var(--line); }
.sidebar li:last-child { border-bottom: 0; }
.sidebar a { color: var(--choc); text-decoration: none; }
.sidebar a:hover { color: var(--rasp); text-decoration: underline; text-decoration-color: var(--rasp); }
.sidebar .post-date { display: block; font-size: .85rem; color: var(--muted); }

/* ---------- Пагинация ---------- */
.pager { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: 2.6rem 0 .5rem; }
.pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.7rem;
	height: 2.7rem;
	padding: 0 .8rem;
	background: var(--white);
	color: var(--choc);
	border: 1px solid var(--choc);
	box-shadow: inset 0 0 0 2px var(--white), inset 0 0 0 3px var(--line);
	text-decoration: none;
	font-weight: 700;
}
.pager a.page-numbers:hover { background: var(--caramel); }
.pager .page-numbers.current { background: var(--rasp); color: #fff; border-color: var(--rasp); box-shadow: inset 0 0 0 2px var(--rasp), inset 0 0 0 3px #fff; }
.pager .page-numbers.dots { background: none; border: 0; box-shadow: none; min-width: auto; }

/* ---------- Поиск ---------- */
.search-box { display: flex; gap: .5rem; max-width: 520px; }
.search-box input[type="search"] {
	flex: 1;
	min-width: 0;
	padding: .7rem .9rem;
	font: inherit;
	border: 1px solid var(--choc);
	background: var(--white);
	color: var(--ink);
	border-radius: 0;
}
.search-box button {
	font-family: var(--font-head);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	padding: .7rem 1.2rem;
	background: var(--rasp);
	color: #fff;
	border: 2px solid var(--rasp);
	cursor: pointer;
	border-radius: 0;
}
.search-box button:hover { background: var(--rasp-dark); }

/* ---------- 404 ---------- */
.lost { text-align: center; padding: 2rem 0 4rem; }
.lost-code { font-family: var(--font-head); font-weight: 900; font-size: clamp(5rem, 16vw, 10rem); line-height: 1; color: transparent; -webkit-text-stroke: 2px var(--choc); margin: 0; }
.lost .search-box { margin: 1.6rem auto; }

/* ---------- Комментарии ---------- */
.comments-area { margin-top: 2.6rem; padding-top: 1.4rem; border-top: 2px dashed var(--line); }
.comments-title { font-size: 1.5rem; margin-top: 0; }
.comment-list { list-style: none; margin: 0 0 2rem; padding: 0; }
.comment-list .children { list-style: none; padding-left: 1.6rem; margin-top: 1rem; border-left: 2px solid var(--mint); }
.comment-body { background: var(--white); border: 1px solid var(--line); padding: 1rem 1.2rem; margin-bottom: 1rem; }
.comment-author { font-weight: 700; color: var(--choc); }
.comment-author img { display: inline-block; vertical-align: middle; border-radius: 50%; margin-right: .5rem; }
.comment-metadata { font-size: .85rem; color: var(--muted); margin-bottom: .5rem; }
.comment-metadata a { color: var(--muted); }
.reply a { font-size: .85rem; font-weight: 700; text-transform: uppercase; }
.comment-awaiting-moderation { color: var(--rasp); font-size: .9rem; }
.comment-respond label { display: block; font-weight: 700; margin-bottom: .3rem; color: var(--choc); }
.comment-respond input[type="text"], .comment-respond input[type="email"], .comment-respond input[type="url"], .comment-respond textarea {
	width: 100%;
	padding: .7rem .9rem;
	font: inherit;
	border: 1px solid var(--choc);
	background: var(--white);
	color: var(--ink);
	border-radius: 0;
}
.comment-respond p { margin-bottom: 1rem; }
.comment-form-cookies-consent label { display: inline; font-weight: 400; }
.comment-respond .submit {
	font-family: var(--font-head);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	padding: .8rem 1.8rem;
	background: var(--rasp);
	color: #fff;
	border: 2px solid var(--rasp);
	outline: 2px solid var(--rasp);
	outline-offset: 3px;
	cursor: pointer;
	border-radius: 0;
}
.comment-respond .submit:hover { background: var(--rasp-dark); }
.comment-navigation { display: flex; justify-content: space-between; margin-bottom: 1.4rem; }

/* ---------- Подвал ---------- */
.site-foot {
	margin-top: 2rem;
	background-color: var(--deep);
	background-image: url("images/burlap.jpg");
	background-size: 400px auto;
	color: #d9c4a5;
	border-top: 4px solid var(--choc);
	padding: 3rem 0 1.4rem;
}
.foot-cols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2.4rem; }
.foot-cols > * { min-width: 0; }
.site-foot .widget { color: #d9c4a5; font-size: .98rem; }
.site-foot .widget-title { color: #ecc896; font-size: 1.35rem; margin: 0 0 .8rem; font-weight: 800; }
.site-foot .widget p { color: #d9c4a5; }
.site-foot a { color: #f2e6d0; text-decoration-color: var(--rasp); }
.site-foot a:hover { color: var(--caramel); }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin: 0 0 .35rem; }
.site-foot li a { text-decoration: none; font-size: 1.05rem; }
.site-foot li a:hover { text-decoration: underline; }
.copy { margin-top: 2.4rem; padding-top: 1.1rem; border-top: 1px dashed rgba(216, 194, 163, .3); text-align: center; font-size: .92rem; color: #bfa98a; }

/* ---------- Cookie ---------- */
.cookie-note {
	position: fixed;
	left: 1rem;
	right: 1rem;
	bottom: 1rem;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.6rem;
	max-width: 900px;
	margin: 0 auto;
	padding: 1rem 1.4rem;
	background: var(--choc);
	color: #eedcbf;
	border: 2px solid var(--caramel);
	font-size: .95rem;
}
.cookie-note p { margin: 0; color: #eedcbf; }
.cookie-note a { color: #fff; }
.cookie-note .btn { padding: .55rem 1.6rem; font-size: .95rem; flex: 0 0 auto; }

/* ---------- Адаптив ---------- */
@media (max-width: 1100px) {
	.front { width: 92%; }
	.duo { gap: 2.4rem; }
	.posts-row { grid-template-columns: minmax(0, 1fr); }
	.folder-note { max-width: 520px; }
}
@media (max-width: 960px) {
	.head-row { flex-wrap: wrap; }
	.brand { flex: 1 1 0; }
	.nav-toggle { display: inline-block; }
	.main-nav { display: none; flex: 0 0 100%; border-top: 1px dashed rgba(184, 161, 127, .45); padding-top: .4rem; }
	.site-head.is-open .main-nav { display: block; }
	.main-nav ul { display: block; }
	.main-nav li { border-bottom: 1px dashed rgba(184, 161, 127, .3); }
	.main-nav li:last-child { border-bottom: 0; }
	.main-nav a { display: block; padding: .7rem 0; border-bottom: 0; white-space: normal; }
	.hero { grid-template-columns: minmax(0, 1fr); padding-top: 2.4rem; }
	.hero-lead { max-width: none; }
	.duo { grid-template-columns: minmax(0, 1fr); }
	.layout-with-sidebar { grid-template-columns: minmax(0, 1fr); row-gap: 2.4rem; }
	.layout-single { width: 100%; }
	.layout-single .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.foot-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.foot-cols > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
	.cards-front { grid-template-columns: minmax(0, 1fr); }
	.cards-front .card:nth-child(n) { margin-top: 0; }
	.posts-panel { padding: 4.2rem 1.2rem 2rem; }
	.check-wrap { grid-template-columns: minmax(0, 1fr); }
	.photo-pin { max-width: 440px; }
	.paths { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
	.path-wrap:not(:last-child)::after { display: none; }
	.path-wrap:nth-child(2) { margin-top: 0; }
	.swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	body { font-size: 1rem; }
	.front { width: 92%; }
	.fs { padding: 2rem 0; }
	.head-row { padding: .8rem 0; gap: .8rem; }
	.brand-mark { width: 60px; height: 60px; }
	.brand-logo { max-height: 60px; }
	.brand-desc { -webkit-line-clamp: 2; font-size: .8rem; }
	.zones-board { padding: 0; }
	.zone { position: static; transform: none; writing-mode: horizontal-tb; margin: .5rem .4rem 0 0; display: inline-flex; padding: .45rem .9rem .5rem .7rem; }
	.zone-1 { transform: none; padding: .45rem .9rem .5rem .7rem; }
	.zone-1 .zone-num { transform: none; }
	.zones-frame { margin-bottom: .6rem; }
	.cards-grid, .layout-single .cards-grid { grid-template-columns: minmax(0, 1fr); }
	.sheet { padding: 1.6rem 1.2rem 1.8rem; }
	.atlas { padding: 4rem 1rem 1.6rem; }
	.atlas .label-kalka, .posts-panel .label-kalka { white-space: normal; text-align: center; width: max-content; max-width: 90%; }
	.swatches { gap: 1.2rem; }
	.swatch figcaption { font-size: 1.45rem; }
	.foot-cols { grid-template-columns: minmax(0, 1fr); }
	.cookie-note { flex-direction: column; align-items: flex-start; padding: 1rem 1.2rem; }
	.btn { padding: .8rem 1.6rem; }
	.search-box { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.card, .card-thumb img, .btn { transition: none; }
}