:root {
    --color-bg: #f2efe6;
    --color-surface: #ebe6d9;
    --color-border: #ded7c3;
    --color-text: #211f19;
    --color-text-muted: #5f5848;
    --color-accent: #1f5c33;
    --color-accent-2: #9a4321;
    --color-row-bg: #f6f4ee;

    --font-heading: Georgia, "Liberation Serif", "Noto Serif", "Times New Roman", serif;
    --font-body: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Liberation Sans", "Noto Sans", sans-serif;
    --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Liberation Mono", Consolas, Menlo, monospace;
    --gh-font-heading: var(--font-heading);
    --gh-font-body: var(--font-body);

    --container-max: 1440px;
    --container-pad: clamp(16px, 4vw, 32px);
    --measure: 70ch;
    --gap: clamp(1rem, 2vw, 1.75rem);
    --radius: 10px;
    --sticky-nav-height: 56px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-bg: #171b16;
        --color-surface: #1f251d;
        --color-border: #34402f;
        --color-text: #eef1e7;
        --color-text-muted: #a9b39c;
        --color-accent: #7fce78;
        --color-accent-2: #e79463;
        --color-row-bg: #1d221c;
    }
}
/* Ручной переключатель (assets/js/theme.js) должен работать независимо
   от системной темы ОС — этот блок дублирует значения из медиа-запроса
   выше, но без условия на prefers-color-scheme, чтобы "тёмная" тема
   применялась и когда ОС в светлом режиме. */
:root[data-theme="dark"] {
    --color-bg: #171b16;
    --color-surface: #1f251d;
    --color-border: #34402f;
    --color-text: #eef1e7;
    --color-text-muted: #a9b39c;
    --color-accent: #7fce78;
    --color-accent-2: #e79463;
    --color-row-bg: #1d221c;
}

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

html {
    font-size: clamp(16px, 0.9rem + 0.25vw, 20px);
    -webkit-text-size-adjust: 100%;
}

body {
    position: relative;
    margin: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--gh-font-body);
    line-height: 1.6;
}

/* Фон декора — псевдоэлемент, не сама body: так можно применить
   тёмную коррекцию (filter) отдельно от контента, не трогая геометрию
   актива (TASK-3 §4.4). Актив однопалитровый (без варианта для тёмной
   темы внутри файла) — при показе на тёмном фоне без коррекции
   контраст уходит к ~11:1 вместо требуемых 1.30-1.40. */
body::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: url(../img/bg-decor.svg);
    background-size: 2600px auto;
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: scroll;
}

/* Ниже 960px раскладка одноколоночная (обрамление колонок больше не
   нужно) — "top center" на узком экране показывает пустой промежуток
   между двумя декоративными мотивами полотна (см. лог), сдвигаем на
   левый мотив (там больше цветов). 30% по X — не сам левый край: при
   660x2600 asset и узких вьюпортах пустая рамка left считается как
   (assetW-viewportW)*30%, чтобы в окно попадал центр цветочного
   кластера (~600-1120px по X в исходных координатах 2600x2600), а не
   его самый край. Геометрию самого файла не трогаем, только точку
   привязки. */
@media (max-width: 959px) {
    body::before { background-position: 30% top; }
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) body::before { filter: brightness(0.24); }
}
:root[data-theme="dark"] body::before { filter: brightness(0.24); }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--color-accent); text-underline-offset: 0.15em; }
a:not(.btn):not(.post-card__link):not(.link-btn) { text-decoration-thickness: from-font; }

h1, h2, h3, h4 { font-family: var(--gh-font-heading); line-height: 1.2; margin: 0 0 0.5em; }

.skip-link {
    position: absolute;
    left: 1rem;
    top: -3rem;
    background: var(--color-surface);
    color: var(--color-text);
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    z-index: 100;
    transition: top 0.15s ease;
}
.skip-link:focus { top: 1rem; }

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

.container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

.site-footer { flex-shrink: 0; background: var(--color-surface); border-top: 1px solid var(--color-border); margin-top: clamp(2rem, 6vw, 4rem); }

/* Шапка — один блок: фон-рисунок, навигация лежит поверх (TASK-3 §2.1-2.2) */
.site-header {
    position: relative;
    flex-shrink: 0;
    background-color: #2f2a1b;
    background-image: url(../img/header-main.svg);
    background-size: auto 300px;
    background-position: center bottom;
    background-repeat: no-repeat;
    height: 300px;
}
/* Три градиента поверх сцены — не отдельная плашка, а слой той же
   картинки (см. переписку с оператором): тонкое затемнение у самого
   верха гарантирует контраст навигации независимо от того, что
   оказалось под ней при масштабировании (окно/солнце); низ плавно
   уходит в фон ленты, чтобы не было чёткой линии стыка; края (там,
   где сцена уже кончилась) чуть светлеют, чтобы не выглядеть глухим
   провалом. Середина и низ самой сцены не трогаются никак. */
.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.5) 56px, rgba(0, 0, 0, 0) 88px),
        linear-gradient(to top, var(--color-bg), rgba(0, 0, 0, 0) 18.67%),
        linear-gradient(to right, rgba(255, 244, 222, 0.14), rgba(0, 0, 0, 0) 18%, rgba(0, 0, 0, 0) 82%, rgba(255, 244, 222, 0.14));
    background-repeat: no-repeat;
    /* Верхнее затемнение (защита контраста навигации) — НАМЕРЕННО в
       фиксированных px, не в %: строка навигации имеет свою постоянную
       высоту независимо от высоты картинки шапки, поэтому и зона её
       защиты не должна "сжиматься" пропорционально на низких шапках.
       Первая попытка (% от высоты, эталон 300px) была отменена: на
       96px (телефон) зона затемнения обрывалась до того, как доходила
       до иконок — контраст падал до 1.8-3.3 при живом замере пикселей
       (getImageData под каждой иконкой), при требуемых >=4.5. Текущие
       56/88px — минимум, эмпирически подобранный по живому замеру на
       360/480px (там же самый жёсткий случай), даёт запас 5.05-13.5 на
       всём диапазоне 360-1920px. Нижний переход в фон (18.67% от
       высоты) — ЭТО безопасно в процентах, он не защищает никакой
       фиксированный UI-элемент, только даёт больше видимой сцены на
       высоких шапках. Зона осветления краёв (3-й градиент) —
       calc(100% - 88px), той же логике, что верхнее затемнение. */
    background-size: 100% 100%, 100% 100%, 100% calc(100% - 88px);
    background-position: top, top, left bottom;
}
.site-header--inner {
    background-image: url(../img/header-inner.svg);
    background-size: auto 240px;
    height: 240px;
}

@media (max-width: 1500px) {
    .site-header { background-size: calc(100vw * 3200 / 1400) auto; height: calc(100vw * 300 / 1400); }
    .site-header--inner { background-size: calc(100vw * 3200 / 1400) auto; height: calc(100vw * 240 / 1400); }
}

@media (max-width: 699px) {
    .site-header, .site-header--inner { height: 96px; }
}

.site-header > .container { position: absolute; inset: 0 0 auto 0; }

.site-header__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1.1rem;
}

.site-header__brand-group { display: flex; align-items: center; gap: 1.1rem; min-width: 0; }

.site-header__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    overflow: hidden;
    color: #f2e8d4;
    text-decoration: none;
    font-family: var(--gh-font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    min-height: 44px;
}
.site-header__mark { display: inline-flex; flex-shrink: 0; }
.site-header__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.site-header__actions { display: flex; align-items: center; gap: 1.25rem; flex-shrink: 0; }

.link-btn {
    background: none;
    border: none;
    font: inherit;
    font-weight: 600;
    color: #e6dcc8;
    cursor: pointer;
    padding: 0.6rem 0.2rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
}
.link-btn:hover, .link-btn:focus-visible { text-decoration: underline; color: #f2e8d4; }
.link-btn__icon { display: none; flex-shrink: 0; }

@media (max-width: 959px) {
    .link-btn { padding: 0.6rem; min-width: 44px; justify-content: center; }
    .link-btn__icon { display: inline-flex; }
    .link-btn__label {
        position: absolute;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

/* Закреплённая строка навигации — отдельный элемент, появляется по
   мере прокрутки за счёт position:sticky (TASK-3 §2.5), без картинки */
.site-nav-sticky {
    position: sticky;
    top: 0;
    z-index: 30;
    background: #2f2a1b;
    display: none;
}
.site-nav-sticky.is-visible { display: block; }
.site-nav-sticky__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: var(--sticky-nav-height);
}

/* Мобильная версия (<960px): поиск/тема/вход уезжают в .mobile-actions-bar
   (см. ниже), полоса .site-nav-sticky освобождается от кнопок — вместо
   плоского фона показываем уменьшенную версию декора шапки (тот же файл,
   что и в самой шапке, header-inner.svg, готовый компактный вариант —
   не перерисовываю, просто масштабирую по высоте полосы), чтобы переход
   от полноразмерной шапки к датчикам не обрывался на пустом месте. */
@media (max-width: 959px) {
    .site-nav-sticky {
        background-image: url(../img/header-inner.svg);
        background-size: cover;
        background-position: center;
    }
}

.site-footer__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1.5rem;
    color: var(--color-text-muted);
}
.site-footer__links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.site-footer__links a { color: var(--color-text-muted); min-height: 44px; display: inline-flex; align-items: center; }
.site-footer__links a:hover, .site-footer__links a:focus-visible { color: var(--color-accent); }

/* Переключатель темы — один компонент (partials/theme-switch.hbs),
   переиспользуется в шапке, в футере и в мобильной нижней панели через
   параметр theme_class (выбирает готовый класс кнопки под контекст) —
   своего цвета/фона не задаёт, только поведение клика (цикл, theme.js)
   и разрыв строки внутри подписи. */
.theme-switch { white-space: nowrap; }

/* Мобильная версия (<960px): поиск/тема/вход живут только в
   .mobile-actions-bar (см. ниже) — прячем их дубли в шапке, закреплённой
   навигации и обычной строке футера, чтобы не дублировать три раза.
   На десктопе (≥960px) всё остаётся как было — этот блок их не трогает. */
@media (max-width: 959px) {
    .site-header .theme-switch,
    .site-nav-sticky .theme-switch,
    .site-header .site-header__actions,
    .site-nav-sticky .site-header__actions,
    .site-footer__row .theme-switch {
        display: none;
    }
}

/* Нижняя панель действий — мобильная версия (<960px) только, прилипает
   к низу ЭКРАНА (position: sticky + bottom: 0 внутри <footer>, тот же
   приём, что sensors-bar использует для верха, только зеркально): пока
   пользователь внутри ленты/статьи, полоса "плывёт" по низу вьюпорта, а
   когда долистывает до конца страницы — вписывается на своё место над
   остальным содержимым футера, а не висит поверх него отдельным слоем. */
.mobile-actions-bar { display: none; }
@media (max-width: 959px) {
    .mobile-actions-bar {
        display: flex;
        align-items: center;
        justify-content: space-around;
        gap: 0.25rem;
        position: sticky;
        bottom: 0;
        z-index: 25;
        background: var(--color-surface);
        border-top: 1px solid var(--color-border);
        padding-inline: var(--container-pad);
    }
}
.mobile-actions-bar__item {
    background: none;
    border: none;
    font: inherit;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0.5rem;
    min-height: 44px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    text-decoration: none;
    text-align: center;
}
.mobile-actions-bar__item:hover, .mobile-actions-bar__item:focus-visible { color: var(--color-accent); }
.mobile-actions-bar__icon { width: 20px; height: 20px; flex-shrink: 0; }
.mobile-actions-bar .theme-switch { font-size: 0.8rem; padding: 0.5rem; min-height: 44px; }

/* Обёртка вокруг <main>+.mobile-actions-bar (не .site-footer) — нужна,
   чтобы sticky-позиционирование нижней панели действий имело правильные
   границы: родитель sticky-элемента должен охватывать ВЕСЬ скролл
   основного контента, а не только сам футер, иначе панель "прилипает"
   лишь у самого конца страницы, а не всю дорогу вниз по ленте. */
.page-body { flex: 1 0 auto; display: flex; flex-direction: column; }

.layout { flex: 1 0 auto; padding-top: clamp(0.75rem, 2vw, 1.5rem); padding-bottom: clamp(1.5rem, 4vw, 3rem); }
.layout__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap);
    align-items: start;
}
.layout__nav {
    order: 2; min-width: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    padding: 1.1rem;
}
.layout__content { order: 1; min-width: 0; }
.layout__sensors { order: 3; min-width: 0; }

@media (min-width: 960px) {
    .layout__grid { grid-template-columns: 14em minmax(0, 1fr) 17em; }
    .layout__nav { order: 1; }
    .layout__content { order: 2; }
    .layout__sensors { order: 3; }
}

.layout__nav-label {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-text-muted);
    margin: 0 0 0.6rem;
}
.layout__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.05rem; }
.layout__nav a {
    color: var(--color-text);
    text-decoration: none;
    display: flex;
    align-items: center;
    font-size: 0.88rem;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    min-height: 30px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.layout__nav a:hover, .layout__nav a:focus-visible { background: var(--color-bg); color: var(--color-accent); }
.layout__nav-sub-label {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-muted);
    margin: 0.9rem 0 0.5rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--color-border);
}
.layout__nav-tags-empty { color: var(--color-text-muted); font-size: 0.85rem; padding: 0.35rem 0.5rem; }

.layout__sensors {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    padding: 1.1rem;
}

@media (max-width: 959px) {
    .layout__sensors { max-width: 30em; }
    .layout__sensors.js-collapsible { display: none; }
    .layout__sensors.js-collapsible.is-expanded { display: block; }
}

.sensors-bar {
    display: flex;
    align-items: center;
    gap: clamp(0.6rem, 3vw, 1.1rem);
    width: 100%;
    height: 44px;
    padding-inline: var(--container-pad);
    overflow-x: auto;
    position: sticky;
    top: var(--sticky-nav-height);
    z-index: 20;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    font: inherit;
    color: var(--color-text);
    cursor: pointer;
}
.sensors-bar__item { display: inline-flex; align-items: center; gap: 0.3rem; flex-shrink: 0; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.sensors-bar__icon { width: 16px; height: 16px; color: var(--color-text-muted); flex-shrink: 0; }
.sensors-bar__lamps { display: inline-flex; gap: 0.3rem; flex-shrink: 0; margin-inline-start: auto; padding-inline-start: 0.5rem; }
.sensors-bar__lamp { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--color-text-muted); flex-shrink: 0; }
.sensors-bar__lamp.is-on { background: var(--color-accent); border-color: var(--color-accent); }

@media (min-width: 960px) {
    .sensors-bar { display: none; }
}

.breadcrumbs { margin-bottom: 1rem; font-size: 0.85rem; color: var(--color-text-muted); }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.breadcrumbs li { display: flex; align-items: center; gap: 0.4rem; }
.breadcrumbs li + li::before { content: "/"; color: var(--color-border); }
.breadcrumbs a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumbs a:hover, .breadcrumbs a:focus-visible { color: var(--color-accent); text-decoration: underline; }
.breadcrumbs li[aria-current="page"] { color: var(--color-text); max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.intro { max-width: var(--measure); margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.intro__title { font-size: clamp(1.9rem, 3vw + 1rem, 2.75rem); text-align: center; }
.intro__lead { color: var(--color-text-muted); font-size: 1.05rem; margin: 0; text-align: center; }

.page-head { max-width: var(--measure); margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.page-head--author { display: flex; gap: 1.25rem; align-items: center; max-width: none; }
.page-head__pic { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.page-head__kicker { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; color: var(--color-accent); font-weight: 700; margin: 0 0 0.4rem; }
.page-head__title { font-size: clamp(1.7rem, 2.5vw + 1rem, 2.4rem); }
.page-head__lead { color: var(--color-text-muted); }
.page-head__meta { color: var(--color-text-muted); font-size: 0.9rem; }

.empty-state {
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    padding: 2rem;
    color: var(--color-text-muted);
    text-align: center;
}

.feed {
    display: flex;
    flex-direction: column;
    gap: clamp(0.6rem, 1.5vw, 0.9rem);
}

.post-card {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: var(--color-row-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}
.post-card__thumb-link { flex-shrink: 0; border-radius: 6px; overflow: hidden; display: block; width: clamp(72px, 18vw, 140px); }
.post-card__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--color-bg); }
.post-card__body { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; flex: 1; }
.post-card__meta { margin: 0; font-size: 0.85rem; color: var(--color-text-muted); }
.post-card__meta a { color: var(--color-text-muted); }
.post-card__title { font-size: 1.15rem; margin: 0; }
.post-card__title a { color: var(--color-text); text-decoration: none; }
.post-card__title a:hover, .post-card__title a:focus-visible { color: var(--color-accent); }
.post-card__excerpt {
    margin: 0;
    color: var(--color-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.post-card__foot { margin: 0.2rem 0 0; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.post-card__author { color: var(--color-text-muted); font-weight: 600; font-size: 0.9rem; }
.post-card__go { color: var(--color-accent); font-weight: 600; text-decoration: none; }
.post-card__go:hover, .post-card__go:focus-visible { text-decoration: underline; }

.feed > .post-card:first-child { padding: clamp(1.1rem, 2.5vw, 1.5rem); }
.feed > .post-card:first-child .post-card__title { font-size: clamp(1.3rem, 1.2vw + 1rem, 1.75rem); }
.feed > .post-card:first-child .post-card__thumb-link { width: clamp(96px, 24vw, 200px); }

.post__head { max-width: var(--measure); }
.post__foot, .post__nextprev { max-width: var(--measure); margin-inline: auto; }
.post__meta { color: var(--color-text-muted); font-size: 0.9rem; margin: 0 0 0.5rem; }
.post__meta a { color: var(--color-text-muted); }
.post__title { font-size: clamp(1.9rem, 3vw + 1rem, 2.75rem); }
.post__dek { color: var(--color-text-muted); font-size: 1.1rem; }
.post__hero { margin: 1.5rem 0; max-width: none; }
.post__hero img { border-radius: var(--radius); width: 100%; }
.post__hero figcaption { color: var(--color-text-muted); font-size: 0.85rem; margin-top: 0.5rem; }

.gh-content { font-size: 1.05rem; max-width: none; }
.gh-content > * { max-width: var(--measure); margin-inline: auto; }
.gh-content > * + * { margin-top: 1.15em; }
.gh-content > .kg-width-wide { max-width: min(100%, 56rem); }
.gh-content > .kg-width-full { max-width: 100%; }
.gh-content h2, .gh-content h3, .gh-content h4 { margin-top: 1.6em; }
.gh-content a { text-decoration-thickness: from-font; }
.gh-content blockquote {
    margin: 1.5em 0;
    padding-left: 1.1em;
    border-left: 3px solid var(--color-accent);
    color: var(--color-text-muted);
    font-style: italic;
}
.gh-content code {
    font-family: var(--font-mono);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0.15em 0.4em;
    font-size: 0.9em;
    overflow-wrap: anywhere;
}
.gh-content pre {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1em;
    max-width: 100%;
    overflow-x: auto;
    font-size: 0.8rem;
    line-height: 1.55;
}
.gh-content pre code { border: none; padding: 0; background: none; font-size: inherit; }

/* Сворачиваемые блоки кода — заголовок-шапка с кликом слева и кнопкой копирования справа. */
.gh-content .code-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75em;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.6em 0.75em 0.6em 1em;
    margin: 1.5em 0 0;
    font-size: 0.95rem;
}
.gh-content .code-toggle__label {
    display: flex;
    align-items: center;
    min-width: 0;
    cursor: pointer;
}
.gh-content .code-toggle__label:hover, .gh-content .code-toggle__label:focus-visible { color: var(--color-accent); }
.gh-content .code-toggle__mark { display: inline-block; width: 1em; flex-shrink: 0; margin-right: 0.3em; }
.gh-content .code-toggle + pre { margin-top: 0; border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; }
.gh-content .code-copy-btn {
    flex-shrink: 0;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-muted);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0.3em 0.65em;
    cursor: pointer;
    min-height: 30px;
}
.gh-content .code-copy-btn:hover, .gh-content .code-copy-btn:focus-visible { color: var(--color-accent); border-color: var(--color-accent); }
.gh-content .code-copy-btn:disabled { color: var(--color-accent); cursor: default; }
.gh-content img { border-radius: var(--radius); }
.gh-content ul, .gh-content ol { padding-left: 1.4em; }
.gh-content hr { border: none; border-top: 1px solid var(--color-border); margin: 2em 0; }

.post__foot { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--color-border); display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; }
.post__by { font-weight: 600; color: var(--color-text); }
.post__tags { display: flex; gap: 0.6rem; margin: 0; flex-wrap: wrap; }
.post__tags a {
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
    text-decoration: none;
    font-size: 0.85rem;
}
.post__nextprev { color: var(--color-text-muted); }
.post__nextprev span { text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.06em; margin-right: 0.5em; }
.post__nextprev a { color: var(--color-text); font-weight: 600; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.6rem 1.4rem;
    border-radius: 999px;
    background: var(--color-accent);
    color: var(--color-surface);
    text-decoration: none;
    font-weight: 700;
    border: 2px solid var(--color-accent);
}
.btn--ghost { background: transparent; color: var(--color-accent); }
.btn:hover, .btn:focus-visible { filter: brightness(1.05); }

.comments { max-width: var(--measure); margin-top: clamp(2rem, 5vw, 3.5rem); }
.comments__title { font-size: 1.4rem; }
.comments__gate { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; color: var(--color-text-muted); }

.pagination-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.6rem 1rem;
    margin-top: clamp(1.5rem, 4vw, 2.5rem);
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
}
.pagination-nav a { color: var(--color-accent); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }
.pagination-nav a:hover, .pagination-nav a:focus-visible { text-decoration: underline; }
.pagination-nav a[hidden] { display: none; }
.pagination-nav__edge { font-size: 0.85rem; }
.pagination-nav__count {
    order: 3;
    flex-basis: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}
.pagination-nav__count a,
.pagination-nav__count .pagination-nav__current {
    min-width: 1.6rem;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
.pagination-nav__current { color: var(--color-text); font-weight: 700; }
.pagination-nav__ellipsis { color: var(--color-text-muted); padding: 0 0.1rem; font-family: var(--font-body); }
@media (min-width: 560px) {
    .pagination-nav { justify-content: space-between; }
    .pagination-nav__count { flex-basis: auto; flex: 1 1 auto; order: 0; }
}

.sensors { font-size: 0.92rem; }
.sensors__line { margin: 0 0 0.5rem; font-weight: 700; }
.sensors__status {
    margin: 0 0 0.85rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--color-accent-2);
    border-left-width: 4px;
    border-radius: 6px;
    color: var(--color-text);
    font-weight: 600;
}
.sensors__noscript {
    margin: 0 0 0.85rem;
    padding: 0.65rem 0.8rem;
    border: 1px dashed var(--color-border);
    border-radius: 6px;
    color: var(--color-text-muted);
}
.sensors__metrics { display: grid; gap: 0.55rem; margin: 0 0 0.9rem; }
.sensors__metrics > div { display: flex; justify-content: space-between; gap: 0.75rem; border-bottom: 1px solid var(--color-border); padding-bottom: 0.4rem; }
.sensors__metrics > div:last-child { border-bottom: none; padding-bottom: 0; }
.sensors__metrics dt { margin: 0; color: var(--color-text-muted); }
.sensors__metrics dd { margin: 0; font-family: var(--font-mono); font-weight: 700; text-align: right; }
.sensors__sep { color: var(--color-text-muted); font-weight: 400; margin: 0 0.2em; }
.sensors__metrics dd.is-pending { color: var(--color-text-muted); font-weight: 500; font-size: 0.82em; font-family: var(--font-body); }
.sensors__metrics dd.is-on { color: var(--color-accent); }
.sensors__metrics dd.is-off { color: var(--color-text-muted); }

.sensors__sub-label {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-muted);
    margin: 0.9rem 0 0.5rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--color-border);
}
.sensors__sub-label a { color: inherit; text-decoration: none; }
.sensors__sub-label a:hover, .sensors__sub-label a:focus-visible { color: var(--color-accent); text-decoration: underline; }

.sensors__lamps { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.4rem; }
.sensors__lamp { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; }
.sensors__lamp-icon { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--color-text-muted); flex-shrink: 0; }
.sensors__lamp.is-on .sensors__lamp-icon { background: var(--color-accent); border-color: var(--color-accent); }
.sensors__lamp.is-off .sensors__lamp-icon { background: none; }
.sensors__lamp-name { color: var(--color-text-muted); flex: 1; }
.sensors__lamp-bri { font-family: var(--font-mono); }
.sensors__lamp.is-on .sensors__lamp-bri { color: var(--color-accent); font-weight: 700; }
.sensors__lamp.is-off .sensors__lamp-bri { color: var(--color-text-muted); }

.sensors__log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; color: var(--color-text-muted); font-size: 0.85rem; }
.sensors__log li { padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-border); }
.sensors__log li:last-child { padding-bottom: 0; border-bottom: none; }
.sensors__log a { color: inherit; text-decoration: none; }
.sensors__log a:hover, .sensors__log a:focus-visible { color: var(--color-accent); text-decoration: underline; }

@media (max-width: 719px) {
    .page-head--author { flex-direction: column; align-items: flex-start; }
}