/*
Theme Name: dds_sausagefestgame.com
Theme URI: https://sausagefestgame.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: umdom
*/

/* ---------- Шрифты ---------- */
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/oswald-cyrillic-500-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/oswald-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/oswald-cyrillic-700-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/oswald-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/jetbrains-mono-cyrillic-400-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/jetbrains-mono-cyrillic-700-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Переменные ---------- */
:root {
    --bg: #1B1F23;
    --grid: #3A4148;
    --panel: #1F2227;
    --band: #242A2F;
    --foot: #12161A;
    --aside: #161A1E;
    --head: #F2F4F0;
    --text: #C9D1CE;
    --muted: #7F8A86;
    --yellow: #F2C230;
    --cyan: #4FC3D9;
    --line: #4A5258;
    --danger: #E0664A;
    --f-head: "Oswald", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
    --f-mono: "JetBrains Mono", "DejaVu Sans Mono", Consolas, "Courier New", monospace;
    --gap: clamp(1rem, 2.4vw, 2rem);
}

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

/* ---------- База ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    overflow-x: hidden;
    background-color: var(--bg);
    background-image:
        linear-gradient(rgba(58, 65, 72, .55) 1px, transparent 1px),
        linear-gradient(90deg, rgba(58, 65, 72, .55) 1px, transparent 1px),
        linear-gradient(rgba(58, 65, 72, .22) 1px, transparent 1px),
        linear-gradient(90deg, rgba(58, 65, 72, .22) 1px, transparent 1px);
    background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
    color: var(--text);
    font-family: var(--f-mono);
    font-size: 15px;
    line-height: 1.7;
}
p { margin: 0 0 1em; }
h1, h2, h3, h4, h5, h6 {
    font-family: var(--f-head);
    font-weight: 700;
    color: var(--head);
    line-height: 1.15;
    margin: 1.4em 0 .6em;
    letter-spacing: .01em;
}
h1 { font-size: clamp(1.9rem, 4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.15rem; }
p, li, dd, td, h1, h2, h3, h4, .card-title { overflow-wrap: break-word; hyphens: auto; }
.brand-name, .sec-title, .page-title, .panel-label { hyphens: manual; }
a { color: var(--cyan); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .15s; }
a:hover { color: var(--yellow); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 2px;
}
img { max-width: 100%; height: auto; }
.screen-reader-text, .sr-only {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.skip-link {
    position: absolute; left: 1rem; top: -60px; z-index: 100;
    background: var(--yellow); color: var(--bg); padding: .5rem 1rem; font-weight: 700;
}
.skip-link:focus { top: 1rem; }

/* ---------- Рамка и проводка ---------- */
.frame {
    position: relative;
    margin: 20px;
    border: 2px solid var(--line);
    background-image: url("images/wiring-left.svg"), url("images/wiring-right.svg");
    background-repeat: repeat-y, repeat-y;
    background-position: left top, right top;
    background-size: 140px auto, 140px auto;
}
.shell {
    width: min(92%, 1180px);
    margin-left: auto;
    margin-right: auto;
}
.home .shell { width: min(85%, 1180px); }

/* ---------- Шапка ---------- */
.site-head { padding: 1.2rem 0 1.8rem; position: relative; }
.head-top { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
.main-nav li { display: flex; align-items: center; }
.main-nav li + li::before {
    content: ""; width: 1px; height: 1.1em; background: var(--line); margin: 0 1rem;
}
.main-nav a {
    color: var(--head); text-decoration: none; font-size: .95rem;
    padding: .3rem 0; border-bottom: 2px solid transparent; display: inline-block;
}
.main-nav a:hover { color: var(--yellow); }
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a { color: var(--yellow); border-bottom-color: var(--yellow); }
.menu-toggle {
    display: none; background: none; border: 2px solid var(--line); color: var(--head);
    font: inherit; font-size: .85rem; padding: .4rem .8rem; cursor: pointer;
}
.menu-toggle span { display: inline-block; width: 16px; height: 2px; background: var(--yellow); vertical-align: middle; margin-right: .5rem; box-shadow: 0 -5px 0 var(--yellow), 0 5px 0 var(--yellow); }

.brand { display: flex; align-items: flex-start; gap: 1.6rem; margin-top: 1.6rem; }
.brand-mark { flex: 0 0 auto; display: block; color: inherit; }
.brand-mark svg, .brand-logo { width: 124px; height: auto; display: block; }
.brand-text { min-width: 0; }
.brand-name {
    display: block; font-family: var(--f-head); font-weight: 700; color: var(--head);
    font-size: clamp(1.8rem, 4.6vw, 3.6rem); line-height: 1.08; text-decoration: none; margin: 0;
}
a.brand-name:hover { color: var(--head); }
.brand-desc { margin: .8rem 0 0; color: var(--text); font-size: .95rem; line-height: 1.55; max-width: 62ch; }

/* ---------- Хлебные крошки ---------- */
.crumbs { font-size: .82rem; color: var(--muted); margin: 0 0 1.4rem; padding: .6rem 0; border-bottom: 1px dashed var(--line); }
.crumbs a { color: var(--text); text-decoration: none; }
.crumbs a:hover { color: var(--yellow); }
.crumbs-sep { color: var(--yellow); margin: 0 .35rem; }
.crumbs span:last-child { color: var(--muted); }

/* ---------- Раскладки ---------- */
.site-main { padding-bottom: 3rem; }
.layout-with-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 67fr) minmax(0, 27fr);
    gap: 6%;
    align-items: start;
}
.layout-single { display: block; }
.layout-single .content-area { width: 85%; margin-left: auto; margin-right: auto; }
.content-area { min-width: 0; }

/* ---------- Плашка-лист (обёртка контента) ---------- */
.sheet {
    background: var(--panel);
    border: 2px solid var(--line);
    padding: clamp(1.2rem, 3vw, 2.4rem);
    position: relative;
}
.sheet::before, .sheet::after {
    content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid var(--yellow);
}
.sheet::before { top: -2px; left: -2px; border-right: 0; border-bottom: 0; }
.sheet::after { bottom: -2px; right: -2px; border-left: 0; border-top: 0; }
.page-title { margin-top: 0; }
.entry-meta { font-size: .82rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-bottom: 1.4rem; }
.entry-meta a { color: var(--cyan); text-decoration: none; }
.entry-thumb { margin: 0 0 1.6rem; border: 1px solid var(--line); }
.entry-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

/* ---------- Текст записи ---------- */
.entry-content > *:first-child { margin-top: 0; }
.entry-content h2 { border-left: 4px solid var(--yellow); padding-left: .8rem; }
.entry-content ul, .entry-content ol { padding-left: 1.4rem; margin: 0 0 1.2em; }
.entry-content ul { list-style: none; padding-left: 0; }
.entry-content ul li { position: relative; padding-left: 1.4rem; margin-bottom: .4em; }
.entry-content ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border: 2px solid var(--cyan); }
.entry-content ol li { margin-bottom: .4em; }
.entry-content ol li::marker { color: var(--yellow); font-weight: 700; }
.entry-content blockquote {
    margin: 1.6em 0; padding: 1.2rem 1.4rem 1.2rem 1.6rem;
    background: var(--band); border-left: 4px solid var(--cyan);
    color: var(--head); font-family: var(--f-head); font-size: 1.2rem; line-height: 1.45;
}
.entry-content blockquote p:last-child { margin-bottom: 0; }
.entry-content table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: .9rem; display: block; overflow-x: auto; }
.entry-content th, .entry-content td { border: 1px solid var(--line); padding: .55rem .8rem; text-align: left; vertical-align: top; }
.entry-content th { background: var(--band); color: var(--head); font-family: var(--f-head); font-weight: 500; letter-spacing: .03em; }
.entry-content pre { background: var(--foot); border: 1px solid var(--line); padding: 1rem; overflow-x: auto; font-size: .85rem; }
.entry-content code { background: var(--foot); padding: .1em .35em; color: var(--yellow); }
.entry-content pre code { background: none; padding: 0; color: var(--text); }
.entry-content figure { margin: 1.6em 0; }
.entry-content figcaption { font-size: .8rem; color: var(--muted); margin-top: .4rem; }
.entry-content hr { border: 0; border-top: 1px dashed var(--line); margin: 2em 0; }
.entry-tags { margin-top: 2rem; font-size: .82rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.entry-tags a { border: 1px solid var(--line); padding: .2rem .6rem; text-decoration: none; color: var(--text); }
.entry-tags a:hover { border-color: var(--yellow); color: var(--yellow); }

/* ---------- Кнопки ---------- */
.btn, .comment-form .submit, .search-form button {
    display: inline-block; font-family: var(--f-mono); font-size: .88rem; font-weight: 400;
    color: var(--yellow); background: transparent; border: 2px solid var(--yellow);
    padding: .4rem .9rem; text-decoration: none; cursor: pointer; line-height: 1.4;
    transition: background .15s, color .15s, transform .15s;
}
.btn:hover, .comment-form .submit:hover, .search-form button:hover {
    background: var(--yellow); color: var(--bg); transform: translate(-2px, -2px);
    box-shadow: 2px 2px 0 var(--cyan);
}
.btn-cyan { color: var(--cyan); border-color: var(--cyan); }
.btn-cyan:hover { background: var(--cyan); color: var(--bg); box-shadow: 2px 2px 0 var(--yellow); }

/* ---------- Карточки записей ---------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.8rem); }
.content-area .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.layout-single .content-area .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card {
    display: flex; flex-direction: column; min-width: 0;
    background: var(--panel); border: 2px solid var(--line); padding: 12px;
    overflow: hidden; transition: border-color .15s, transform .15s;
}
.card:hover { border-color: var(--cyan); transform: translateY(-3px); }
.card-thumb { display: block; overflow: hidden; }
.card-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 7 / 4; object-fit: cover; transition: transform .3s; }
.card:hover .card-thumb img { transform: scale(1.03); }
.card-body { flex: 1; display: flex; flex-direction: column; padding: .9rem .2rem .2rem; min-width: 0; }
.card-title { font-family: var(--f-head); font-weight: 500; font-size: 1.3rem; line-height: 1.25; margin: 0 0 .5rem; color: var(--head); }
.card-title a { color: inherit; text-decoration: none; }
.card-title a:hover { color: var(--yellow); }
.card-excerpt { font-size: .86rem; color: var(--text); flex: 1; line-height: 1.6; }
.card-excerpt p { margin: 0 0 0.5em; background: none; }
.card-foot { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: .8rem; }
.stamp { font-size: .82rem; color: var(--muted); letter-spacing: .04em; }
.sticky-mark { display: inline-block; font-size: .72rem; color: var(--bg); background: var(--yellow); padding: 0 .4rem; margin-bottom: .4rem; align-self: flex-start; }
.empty-state { border: 2px dashed var(--line); padding: 2rem; text-align: center; color: var(--muted); }

/* ---------- Пагинация ---------- */
.pager { display: flex; flex-wrap: wrap; gap: .5rem; margin: 2.4rem 0 0; align-items: center; }
.pager .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.6rem; height: 2.6rem; padding: 0 .8rem;
    border: 2px solid var(--line); color: var(--text); text-decoration: none; font-size: .9rem;
    background: var(--panel);
}
.pager a.page-numbers:hover { border-color: var(--cyan); color: var(--cyan); }
.pager .page-numbers.current { background: var(--yellow); border-color: var(--yellow); color: var(--bg); font-weight: 700; }
.pager .page-numbers.dots { border: 0; background: none; min-width: auto; }

/* ---------- Сайдбар ---------- */
.sidebar { min-width: 0; background: var(--aside); border: 2px solid var(--line); padding: 1.4rem 1.3rem; color: var(--text); }
.sidebar .wbox + .wbox { margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px dashed var(--line); }
.sidebar .wbox-title { margin: 0 0 .9rem; font-size: 1.15rem; color: var(--head); text-transform: uppercase; letter-spacing: .04em; }
.sidebar .wbox-title::before { content: "// "; color: var(--yellow); font-family: var(--f-mono); font-size: .9rem; }
.sidebar ul { list-style: none; margin: 0; padding: 0; }
.sidebar li { padding: .5rem 0; border-bottom: 1px solid rgba(74, 82, 88, .6); font-size: .88rem; }
.sidebar li:last-child { border-bottom: 0; }
.sidebar a { color: var(--text); text-decoration: none; }
.sidebar a:hover { color: var(--yellow); }
.sidebar .post-date { display: block; color: var(--muted); font-size: .78rem; }
.sidebar p { color: var(--text); }

/* ---------- Поиск ---------- */
.search-form { display: flex; gap: .5rem; flex-wrap: wrap; max-width: 520px; }
.search-form input[type="search"] {
    flex: 1 1 200px; min-width: 0; font: inherit; color: var(--head); background: var(--foot);
    border: 2px solid var(--line); padding: .5rem .8rem;
}
.search-form input[type="search"]::placeholder { color: var(--muted); }

/* ---------- Комментарии ---------- */
.comments { margin-top: 2.4rem; }
.comments-title { margin-top: 0; }
.comment-list { list-style: none; margin: 0 0 2rem; padding: 0; }
.comment-list .children { list-style: none; padding-left: clamp(1rem, 3vw, 2rem); border-left: 1px dashed var(--line); }
.note { margin: 0 0 1rem; }
.note > .note-head, .note > .note-text, .note > .note-reply, .note > .note-wait { background: var(--panel); }
.note-head { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .9rem 1.1rem .4rem; border: 1px solid var(--line); border-bottom: 0; }
.note-head img { display: block; border: 1px solid var(--line); }
.note-author { color: var(--head); font-weight: 700; }
.note-text { padding: .3rem 1.1rem .4rem; border-left: 1px solid var(--line); border-right: 1px solid var(--line); font-size: .9rem; }
.note-wait { padding: .3rem 1.1rem; margin: 0; color: var(--yellow); font-size: .82rem; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.note-reply { padding: 0 1.1rem .9rem; border: 1px solid var(--line); border-top: 0; font-size: .82rem; }
.comment-respond { background: var(--panel); border: 2px solid var(--line); padding: 1.4rem; }
.comment-reply-title { margin-top: 0; }
.comment-reply-title small { font-family: var(--f-mono); font-size: .8rem; margin-left: .8rem; }
.comment-form label { display: block; font-size: .82rem; color: var(--muted); margin-bottom: .3rem; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
    width: 100%; font: inherit; color: var(--head); background: var(--foot); border: 2px solid var(--line); padding: .55rem .8rem;
}
.comment-form .comment-form-cookies-consent label { display: inline; }
.form-note { font-size: .82rem; color: var(--muted); }

/* ---------- Главная: общие ---------- */
.fp-block { margin: 0 0 clamp(2rem, 4vw, 3rem); }
.panel {
    background: var(--panel); border: 2px solid var(--line);
    padding: clamp(1rem, 2.4vw, 1.6rem) clamp(1rem, 2.4vw, 1.6rem);
    position: relative;
}
.panel-label {
    font-family: var(--f-head); font-weight: 500; font-size: 1.05rem; color: var(--yellow);
    text-transform: uppercase; letter-spacing: .06em; margin: 0 0 1rem;
}
.sec-title { font-size: clamp(1.8rem, 3.6vw, 2.6rem); text-transform: uppercase; margin: 0 0 1.2rem; letter-spacing: .01em; }
.sec-lead { max-width: 70ch; color: var(--text); margin: -.4rem 0 1.4rem; font-size: .92rem; }

/* Блок 1: схема квартиры */
.plan-grid { display: grid; grid-template-columns: 130px minmax(0, 1fr) 64px; gap: 0 1.2rem; align-items: stretch; }
.plan-zones { list-style: none; margin: 0; padding: 0 1rem 0 0; border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-around; }
.plan-zones li { font-size: 1.05rem; color: var(--head); padding: .4rem 0; }
.plan-zones li::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--cyan); margin-right: .55rem; vertical-align: middle; }
.plan-figure { margin: 0; position: relative; container-type: inline-size; min-width: 0; }
.plan-figure img { display: block; width: 100%; height: auto; aspect-ratio: 1850 / 1044; }
.plan-tag {
    position: absolute; left: 2%; font-size: clamp(9px, 1.65cqi, 15px); line-height: 1.4;
    color: var(--head); background: rgba(31, 34, 39, .94); padding: .1em 1.4em .1em .3em; margin: 0;
}
.plan-nums { position: relative; }
.plan-num {
    position: absolute; left: 0; transform: translateY(-50%);
    font-family: var(--f-head); font-weight: 700; font-size: clamp(1.4rem, 2.6vw, 2.4rem);
    color: var(--yellow); line-height: 1;
}
.plan-legend {
    list-style: none; margin: 1.2rem 0 0; padding: 1rem 0 0; border-top: 1px dashed var(--line);
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .8rem 1.2rem; font-size: .8rem;
}
.plan-legend li { min-width: 0; color: var(--text); }
.plan-legend b { display: block; font-family: var(--f-head); font-size: 1.15rem; color: var(--yellow); }
.plan-tags-list { display: none; }

/* Блок 2: разбор устройства */
.device-figure { margin: 0; position: relative; container-type: inline-size; }
.device-figure img { display: block; width: 100%; height: auto; aspect-ratio: 2320 / 564; }
.device-tag {
    position: absolute; font-size: clamp(9px, 1.4cqi, 16px); color: var(--head); white-space: nowrap;
    border-bottom: 1px solid var(--line); line-height: 1.5; padding: 0 .1em;
}
.device-notes { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.device-notes li { min-width: 0; font-size: .8rem; border-top: 2px solid var(--cyan); padding-top: .6rem; }
.device-notes li:nth-child(even) { border-top-color: var(--yellow); }
.device-notes strong { display: block; color: var(--head); font-family: var(--f-head); font-weight: 500; font-size: 1.05rem; margin-bottom: .2rem; }

/* Блок записей */
.fp-latest-foot { margin-top: 1.6rem; text-align: right; }

/* Блок 3: календарь */
.fp-band {
    background: var(--band);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: clamp(1.6rem, 3vw, 2.2rem) 0 clamp(1.8rem, 3vw, 2.4rem);
    margin-bottom: clamp(2rem, 4vw, 3rem);
}
.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; position: relative; }
.timeline::before {
    content: ""; position: absolute; left: 0; right: 0; top: 2.35rem; height: 1px; background: var(--muted);
}
.timeline::after {
    content: ""; position: absolute; right: 0; top: calc(2.35rem - 4px); width: 9px; height: 9px;
    border-top: 1px solid var(--muted); border-right: 1px solid var(--muted); transform: rotate(45deg);
}
.timeline li { min-width: 0; position: relative; }
.tl-head { display: block; font-weight: 700; color: var(--head); font-size: .98rem; min-height: 1.7rem; }
.tl-dot { display: block; width: 13px; height: 13px; border-radius: 50%; background: var(--text); margin: .25rem 0 1rem; position: relative; z-index: 1; box-shadow: 0 0 0 4px var(--band); }
.timeline li:nth-child(4) .tl-dot { background: var(--yellow); }
.tl-text { font-size: .84rem; color: var(--muted); margin: 0; }

/* Блок 4: ошибки */
.mistakes {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr) minmax(0, .82fr) minmax(0, 1fr);
    grid-template-areas: "m1 m2 m3 m4" "mn m2 m3 m5";
    gap: 1.2rem;
}
.mistake {
    border: 2px solid var(--cyan); padding: 1rem 1.1rem; min-width: 0;
    background: rgba(31, 34, 39, .85); transition: transform .15s, box-shadow .15s;
}
.mistake:hover { transform: translate(-3px, -3px); box-shadow: 3px 3px 0 var(--line); }
.mistake-num { display: block; font-family: var(--f-mono); font-weight: 700; color: var(--yellow); font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1; margin-bottom: .3rem; }
.mistake h3 { font-family: var(--f-mono); font-weight: 700; font-size: 1rem; margin: 0 0 .4rem; color: var(--head); line-height: 1.35; }
.mistake p { font-size: .8rem; color: var(--text); margin: 0; }
.m1 { grid-area: m1; } .m2 { grid-area: m2; } .m3 { grid-area: m3; } .m4 { grid-area: m4; } .m5 { grid-area: m5; }
.m2 { border-color: var(--yellow); display: flex; flex-direction: column; }
.m2-head { display: flex; gap: 1rem; align-items: flex-start; }
.m2-head .mistake-num { flex: 0 0 auto; }
.m2 figure { margin: .6rem 0 0; flex: 1; display: flex; align-items: flex-end; justify-content: flex-end; }
.m2 { background: var(--panel); }
.m2 img { display: block; width: 86%; height: auto; aspect-ratio: 888 / 514; mix-blend-mode: lighten; -webkit-mask-image: radial-gradient(ellipse at center, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse at center, #000 62%, transparent 100%); }
.mistake-note {
    grid-area: mn; border: 1px dashed var(--line); padding: 1rem 1.1rem; font-size: .8rem; color: var(--muted); min-width: 0;
}
.mistake-note strong { color: var(--cyan); font-weight: 400; display: block; margin-bottom: .3rem; }

/* ---------- Подвал ---------- */
.site-foot { background: var(--foot); border-top: 2px solid var(--line); color: var(--text); margin-top: 1rem; }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 3rem; padding: 2.2rem 0 2rem; }
.foot-col { min-width: 0; }
.foot-col .wbox-title { font-family: var(--f-mono); font-weight: 700; font-size: 1rem; color: var(--head); margin: 0 0 .8rem; }
.foot-col p, .foot-col li, .foot-col .textwidget { color: var(--text); font-size: .86rem; }
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col li { padding: .1rem 0; }
.foot-col a { color: var(--text); text-decoration: none; }
.foot-col a:hover { color: var(--yellow); }
.foot-col .post-date { color: var(--muted); }
.foot-copy { border-top: 1px solid var(--line); padding: 1rem 0 1.2rem; font-size: .8rem; color: var(--muted); }

/* ---------- 404 ---------- */
.nf-code { font-family: var(--f-head); font-weight: 700; font-size: clamp(5rem, 16vw, 10rem); line-height: 1; color: transparent; -webkit-text-stroke: 2px var(--yellow); margin: 0 0 .5rem; }
.nf-actions { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

/* ---------- Cookie ---------- */
.cookie-strip {
    position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 90;
    max-width: 760px; margin-left: auto; margin-right: auto;
    display: flex; align-items: center; gap: 1rem 1.4rem; flex-wrap: wrap;
    background: var(--foot); border: 2px solid var(--yellow); color: var(--text);
    padding: 1rem 1.3rem; font-size: .84rem; box-shadow: 6px 6px 0 rgba(0, 0, 0, .45);
}
.cookie-strip p { margin: 0; flex: 1 1 260px; min-width: 0; }
.cookie-strip .btn { flex: 0 0 auto; }

/* ---------- Адаптив ---------- */
@media (max-width: 960px) {
    .frame { margin: 12px; background-size: 90px auto, 90px auto; }
    .home .shell, .shell { width: min(92%, 1180px); }
    .layout-with-sidebar { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .layout-single .content-area { width: 100%; }
    .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .plan-grid { grid-template-columns: minmax(0, 1fr) 48px; }
    .plan-zones { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: .2rem 1.2rem; border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 .6rem; margin-bottom: 1rem; }
    .plan-zones li { font-size: .9rem; }
    .plan-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .device-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
    .timeline::before, .timeline::after { display: none; }
    .tl-dot { margin-bottom: .6rem; }
    .mistakes { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "m1 m3" "m2 m2" "m4 m5" "mn mn"; }
    .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .head-top { justify-content: flex-start; }
    .menu-toggle { display: inline-block; }
    .main-nav { width: 100%; }
    .main-nav ul { display: none; flex-direction: column; align-items: stretch; border: 2px solid var(--line); background: var(--foot); margin-top: .6rem; }
    .main-nav.is-open ul { display: flex; }
    .main-nav li + li::before { display: none; }
    .main-nav li { border-bottom: 1px solid var(--line); }
    .main-nav li:last-child { border-bottom: 0; }
    .main-nav a { padding: .7rem 1rem; width: 100%; border-bottom: 0; }
    .main-nav .current-menu-item > a { border-left: 3px solid var(--yellow); }
    .head-top { flex-wrap: wrap; }
}
@media (max-width: 600px) {
    body { font-size: 14px; }
    .frame { margin: 6px; background-image: none; }
    .brand { gap: 1rem; margin-top: 1rem; flex-direction: column; }
    .brand-mark svg, .brand-logo { width: 80px; }
    .cards, .content-area .cards, .layout-single .content-area .cards { grid-template-columns: minmax(0, 1fr); }
    .plan-tag { display: none; }
    .plan-grid { grid-template-columns: minmax(0, 1fr); }
    .plan-nums { display: none; }
    .plan-tags-list { display: block; list-style: none; margin: 1rem 0 0; padding: 0; font-size: .82rem; }
    .plan-tags-list li { padding: .25rem 0 .25rem 1rem; position: relative; }
    .plan-tags-list li::before { content: ""; position: absolute; left: 0; top: .8em; width: 6px; height: 6px; background: var(--head); }
    .plan-legend { grid-template-columns: minmax(0, 1fr); }
    .device-tag { display: none; }
    .device-notes { grid-template-columns: minmax(0, 1fr); }
    .timeline { grid-template-columns: minmax(0, 1fr); }
    .mistakes { grid-template-columns: minmax(0, 1fr); grid-template-areas: "m1" "m2" "m3" "m4" "m5" "mn"; }
    .m2 img { width: 100%; }
    .foot-cols { grid-template-columns: minmax(0, 1fr); }
    .panel { padding: 1rem; }
    .sheet { padding: 1.1rem 1rem; }
    .fp-band { padding: 1.4rem 0; }
    .cookie-strip { left: .5rem; right: .5rem; bottom: .5rem; padding: .9rem 1rem; }
    .sidebar { padding: 1.1rem 1rem; }
    .mistake, .mistake-note { padding: .9rem 1rem; }
}