/* Строгая вёрстка в духе журналов начала 2000-х: плотно, без украшательств.
   Цвета — оттенки зелёного и синего; тёмная тема следует настройке системы.
   Все размеры, цвета и шрифты — переменные ниже; правила только ссылаются на них. */
:root {
    /* Расстояния: базовый шаг и кратные */
    --step: 8px;
    --step-half: calc(var(--step) / 2);
    --step-2: calc(var(--step) * 2);
    --step-3: calc(var(--step) * 3);

    /* Размеры раскладки */
    --page-max: 980px;
    --text-max: 720px;
    --toolbar-height: 50px;
    --toolbar-rule: 3px;
    --logo-size: 30px;

    /* Шрифты */
    --font-text: Verdana, Tahoma, "DejaVu Sans", Arial, sans-serif;
    --font-head: Georgia, "Times New Roman", serif;
    --font-mono: "Courier New", Courier, monospace;
    --size-text: 14px;
    --size-small: 11px;
    --size-label: 12px;
    --size-section: 13px;
    --size-h2: 16px;
    --size-h1: 24px;
    --size-brand: 26px;
    --line-text: 1.5;
    --line-head: 1.25;

    /* Цвета: светлая тема */
    --bg: #f4f7f5;
    --paper: #ffffff;
    --ink: #1b2a28;
    --muted: #5b6e6a;
    --rule: #cfdcd6;
    --bar: #0f4c5c;
    --bar-ink: #e8f3f0;
    --bar-muted: #9fc6c0;
    --accent: #2e7d4f;
    --accent-ink: #ffffff;
    --link: #0b5a8a;
    --link-visited: #3d5f7a;
    --row-alt: #eef4f1;
}
@media (prefers-color-scheme: dark) {
    :root {
        /* Цвета: тёмная тема */
        --bg: #0e1615;
        --paper: #131e1d;
        --ink: #d6e4e0;
        --muted: #8aa29c;
        --rule: #26403c;
        --bar: #0a2f38;
        --bar-ink: #dcefea;
        --bar-muted: #7fb3aa;
        --accent: #5fbf85;
        --accent-ink: #0e1615;
        --link: #6fb6e6;
        --link-visited: #8fa9c4;
        --row-alt: #172422;
    }
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
    margin: 0;
    color: var(--ink);
    background: var(--bg);
    font: var(--size-text)/var(--line-text) var(--font-text);
}
a { color: var(--link); }
a:visited { color: var(--link-visited); }

/* Одна колонка для тулбара, текста и подвала: левые края совпадают. */
.wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--step-3); }

/* Тулбар */
.toolbar {
    height: var(--toolbar-height);
    background: var(--bar);
    color: var(--bar-ink);
    border-bottom: var(--toolbar-rule) solid var(--accent);
}
.toolbar .wrap {
    height: 100%;
    display: flex;
    align-items: center;
}
/* Подпись стоит на одной базовой линии с названием, а не по центру своей строки */
.masthead {
    display: flex;
    align-items: baseline;
    gap: var(--step-2);
}
.brand {
    display: flex;
    align-items: center;
    gap: var(--step);
    color: var(--bar-ink);
    text-decoration: none;
}
.brand:visited { color: var(--bar-ink); }
.brand .n {
    width: var(--logo-size);
    height: var(--logo-size);
    display: grid;
    place-items: center;
    background: var(--accent);
    color: var(--accent-ink);
    font: bold var(--size-brand)/1 var(--font-head);
}
.brand .name {
    font: bold var(--size-brand)/1 var(--font-head);
    letter-spacing: 0.5px;
}
.tagline {
    color: var(--bar-muted);
    font-size: var(--size-label);
    text-transform: uppercase;
    letter-spacing: 1px;
}

main.wrap {
    background: var(--paper);
    padding-top: var(--step-2);
    padding-bottom: var(--step-3);
    min-height: calc(100vh - var(--toolbar-height) - var(--toolbar-rule) - 6 * var(--step));
}

/* Статья */
.article-head {
    border-bottom: 1px solid var(--rule);
    margin-bottom: var(--step-2);
    padding-bottom: var(--step);
}
.article-head h1 {
    margin: 0 0 var(--step-half);
    font: bold var(--size-h1)/var(--line-head) var(--font-head);
}
.meta { color: var(--muted); font-size: var(--size-small); }
.meta:has(.date:empty) { display: none; }
main:has(.lenta) .article-head { display: none; }
.tags { font-size: var(--size-small); margin-top: var(--step-half); }
.tags:empty { display: none; }
.tags a { margin-right: var(--step); text-decoration: none; }

/* Текст статьи: Markdown, отрисованный генератором (markdown: true) */
.content { max-width: var(--text-max); }
.content p, .content ul, .content ol { margin: 0 0 var(--step); }
.content ul, .content ol { padding-left: var(--step-3); }
.content h2, .content h3 {
    margin: var(--step-2) 0 var(--step);
    font: bold var(--size-h2)/var(--line-head) var(--font-head);
    color: var(--accent);
}
.content img { max-width: 100%; height: auto; }
.content blockquote {
    margin: 0 0 var(--step);
    padding: var(--step-half) var(--step-2);
    border-left: var(--toolbar-rule) solid var(--accent);
    background: var(--row-alt);
}
.content blockquote p { margin: 0; }
.content code { font-family: var(--font-mono); background: var(--row-alt); padding: 0 var(--step-half); }
.content pre { background: var(--row-alt); padding: var(--step); overflow: auto; }
.content pre code { padding: 0; }
main:has(.lenta) .content { max-width: none; }

/* Соседи статьи: по времени во всей ленте и внутри каждого тега */
.neighbors {
    max-width: var(--text-max);
    margin-top: var(--step-3);
    border-top: 1px solid var(--rule);
    padding-top: var(--step);
    font-size: var(--size-small);
}
.neighbors-row {
    display: grid;
    grid-template-columns: 1fr 9em 1fr;
    gap: var(--step-2);
    align-items: baseline;
    padding: var(--step-half) 0;
}
.neighbors-row:first-child { font-size: var(--size-text); }
.neighbors .label {
    text-align: center;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: var(--size-small);
}
.neighbors .label a { text-transform: none; letter-spacing: 0; }
.neighbors-row:first-child { padding-bottom: var(--step); }
.neighbors .next { text-align: right; }
.neighbors a { text-decoration: none; }
.neighbors a:hover { text-decoration: underline; }

/* Страница тега */
.tag-title {
    margin: 0 0 var(--step-2);
    font: bold var(--size-h1)/var(--line-head) var(--font-head);
}

/* Лента: одна строка на материал */
.lenta-info, .lenta-info-footer { display: none; }
.entries::before {
    content: "Свежие материалы";
    display: block;
    font: bold var(--size-section)/1 var(--font-text);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent);
    border-bottom: 2px solid var(--accent);
    padding-bottom: var(--step);
}
.entry {
    display: grid;
    grid-template-columns: 2.2em 1fr 6.5em 4.5em;
    gap: var(--step);
    align-items: baseline;
    padding: var(--step-half);
    border-bottom: 1px dotted var(--rule);
}
.entry:nth-child(even) { background: var(--row-alt); }
.entry .number { color: var(--muted); font-size: var(--size-small); text-align: right; }
.entry a { font-weight: bold; text-decoration: none; }
.entry a:hover { text-decoration: underline; }
/* Рубрик нет: генератор подставляет в <small> папку файла — не показываем */
.entry small { display: none; }
.entry .date { order: 4; }
.entry .size { order: 5; }
.entry .date, .entry .size { color: var(--muted); font-size: var(--size-small); text-align: right; }

footer.wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--muted);
    font-size: var(--size-small);
    padding-top: var(--step-2);
    padding-bottom: var(--step-3);
    border-top: 1px solid var(--rule);
}

/* Телефон: подпись «гаджеты · игры · нейросети» не помещается рядом с названием */
@media (max-width: 600px) {
    .tagline { display: none; }
}