/* Болонка Продаж — собрано 2026-04-20T23:48:49+0000 */
/* Исходники: src-styles/, перестроить: bash bin/build-css.sh */


/* ---------- tokens.css ---------- */

/**
 * Дизайн-токены Болонки Продаж
 * v1.0 · Апрель 2026
 * 
 * Все цвета, размеры и значения используются через var(--token).
 * В будущем админка сможет менять эти значения через
 * document.documentElement.style.setProperty() без перезагрузки.
 */

:root {
    /* ===== ЦВЕТА · ЯДРО ===== */
    --color-neri:        #F1E9D6;  /* 練色 варёный шёлк — основной фон */
    --color-shu:         #A92520;  /* 真朱 киноварь — главный акцент */
    --color-kaki:        #C46B3A;  /* 柿 хурма — вторичный акцент */
    --color-kachi:       #243248;  /* 褐 тёмное индиго — глубина */
    --color-sumi:        #1A1510;  /* 墨 тушь — основной текст */
    --color-kitsune:     #8F6F3E;  /* 狐色 лисий — золото-акцент */
    --color-suo:         #800020;  /* 蘇芳 суō — экосистема */

    /* ===== ЦВЕТА · ПОВЕРХНОСТИ LIGHT ===== */
    --color-gofun:       #FBF6EC;  /* 胡粉 белила — приподнятые поверхности */
    --color-torinoko:    #E8DFC8;  /* 鳥の子色 яйцо — вторичные поверхности */
    --color-kogecha:     #3A2E26;  /* 焦茶 жжёный чай — secondary text */
    --color-rikyucha:    #6D5D4E;  /* 利休茶 рикю — muted text */
    --color-usucha:      #9C8876;  /* 薄茶 светлый чай — hints */

    /* ===== ЦВЕТА · ТЁМНАЯ ТЕМА ===== */
    --color-yoru:        #1A1A1A;  /* 夜 ночь — α ink среда */
    --color-yoi:         #1C1A17;  /* 宵 сумерки — β warm поверхности */
    --color-shu-light:   #D9524C;  /* 薄朱 shu для тёмного */
    --color-ember-light: #E8A366;  /* 洗柿 kaki для тёмного */

    /* ===== СЕМАНТИЧЕСКИЕ ПЕРЕМЕННЫЕ ===== */
    --bg:                var(--color-neri);
    --bg-surface:        var(--color-gofun);
    --bg-secondary:      var(--color-torinoko);
    --ink:               var(--color-sumi);
    --ink-secondary:     var(--color-kogecha);
    --ink-muted:         var(--color-rikyucha);
    --ink-faint:         var(--color-usucha);
    --accent:            var(--color-shu);
    --accent-ember:      var(--color-kaki);
    --accent-navy:       var(--color-kachi);
    --accent-gold:       var(--color-kitsune);
    --accent-suo:        var(--color-suo);

    /* ===== ТИПОГРАФИКА ===== */
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* размеры */
    --text-display: clamp(48px, 7vw, 72px);
    --text-h1:      clamp(36px, 5vw, 52px);
    --text-h2:      clamp(28px, 3.5vw, 40px);
    --text-h3:      clamp(22px, 2.5vw, 28px);
    --text-h4:      20px;
    --text-lead:    21px;
    --text-body:    18px;
    --text-body-sm: 16px;
    --text-caption: 14px;
    --text-micro:   12px;

    /* высоты строк */
    --lh-display: 1.04;
    --lh-tight:   1.15;
    --lh-snug:    1.3;
    --lh-normal:  1.5;
    --lh-body:    1.7;  /* основной текст статей */

    /* трекинг */
    --track-tight:  -0.025em;
    --track-snug:   -0.015em;
    --track-normal: 0;
    --track-wide:   0.08em;
    --track-caps:   0.14em;

    /* ===== ОТСТУПЫ (4px grid) ===== */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  24px;
    --space-6:  32px;
    --space-7:  48px;
    --space-8:  64px;
    --space-9:  80px;
    --space-10: 96px;
    --space-11: 128px;

    /* ===== ШИРИНЫ КОНТЕЙНЕРОВ ===== */
    --container-max:    1280px;
    --container-wide:   1440px;
    --container-read:   680px;    /* reading column статьи */
    --container-narrow: 560px;

    /* ===== СКРУГЛЕНИЯ ===== */
    --radius-sm:   4px;
    --radius-md:   6px;
    --radius-lg:   16px;
    --radius-full: 999px;

    /* ===== ТЕНИ (редко используем, больше hairline-бордеры) ===== */
    --shadow-sm: 0 1px 2px rgba(26, 21, 16, 0.06);
    --shadow-md: 0 4px 12px rgba(26, 21, 16, 0.08);
    --shadow-lg: 0 16px 48px rgba(26, 21, 16, 0.14);

    /* ===== ДВИЖЕНИЕ ===== */
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --dur-fast:   160ms;
    --dur-base:   240ms;
    --dur-slow:   400ms;

    /* ===== БОРДЕРЫ ===== */
    --border-hairline: 1px solid rgba(26, 21, 16, 0.12);
    --border-strong:   1px solid rgba(26, 21, 16, 0.22);
}

/* ===== ТЁМНАЯ ТЕМА ===== */

[data-theme="dark"] {
    --bg:             var(--color-yoru);
    --bg-surface:     var(--color-yoi);
    --bg-secondary:   #252525;
    --ink:            var(--color-neri);
    --ink-secondary:  var(--color-torinoko);
    --ink-muted:      #B8A88F;
    --ink-faint:      #7A6E5E;
    --accent:         var(--color-shu-light);
    --accent-ember:   var(--color-ember-light);
    --border-hairline: 1px solid rgba(241, 233, 214, 0.08);
    --border-strong:   1px solid rgba(241, 233, 214, 0.18);
}

/* системное тёмное оформление, если пользователь не указал явно */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:             var(--color-yoru);
        --bg-surface:     var(--color-yoi);
        --bg-secondary:   #252525;
        --ink:            var(--color-neri);
        --ink-secondary:  var(--color-torinoko);
        --ink-muted:      #B8A88F;
        --ink-faint:      #7A6E5E;
        --accent:         var(--color-shu-light);
        --accent-ember:   var(--color-ember-light);
        --border-hairline: 1px solid rgba(241, 233, 214, 0.08);
        --border-strong:   1px solid rgba(241, 233, 214, 0.18);
    }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-fast: 0ms;
        --dur-base: 0ms;
        --dur-slow: 0ms;
    }
}

/* ---------- base.css ---------- */

/**
 * Базовые стили: reset, typography, layout
 * Mobile-first: базовые правила для малых экранов, media queries расширяют
 */

/* ===== RESET ===== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-body-sm); /* mobile baseline */
    line-height: var(--lh-body);
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'kern' 1, 'liga' 1;
    min-height: 100vh;
    overflow-x: hidden;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

button {
    cursor: pointer;
    font-family: inherit;
    background: none;
    border: none;
    color: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

ul, ol {
    list-style: none;
}

/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    letter-spacing: var(--track-tight);
    line-height: var(--lh-tight);
    color: var(--ink);
    font-variation-settings: 'opsz' 144, 'SOFT' 50, 'WONK' 1;
}

h1 {
    font-size: var(--text-h1);
    line-height: var(--lh-display);
}

h2 {
    font-size: var(--text-h2);
    margin-top: var(--space-8);
    margin-bottom: var(--space-4);
}

h3 {
    font-size: var(--text-h3);
    font-weight: 400;
    margin-top: var(--space-6);
    margin-bottom: var(--space-3);
}

h4 {
    font-size: var(--text-h4);
    font-weight: 500;
    font-style: normal;
    font-family: var(--font-body);
    letter-spacing: var(--track-snug);
}

p {
    margin-bottom: var(--space-4);
}

p + p {
    margin-top: 0;
}

a.link {
    color: var(--accent);
    border-bottom: 1px solid currentColor;
    transition: opacity var(--dur-fast) var(--ease-standard);
}

a.link:hover {
    opacity: 0.7;
}

small, .text-caption {
    font-size: var(--text-caption);
    line-height: var(--lh-normal);
    color: var(--ink-muted);
}

.text-micro {
    font-size: var(--text-micro);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--ink-muted);
}

strong, b {
    font-weight: 600;
}

em, i {
    font-style: italic;
}

code, pre {
    font-family: var(--font-mono);
    font-size: 0.9em;
}

/* ===== LAYOUT UTILITIES ===== */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

.container-wide {
    max-width: var(--container-wide);
}

.container-read {
    max-width: var(--container-read);
}

.container-narrow {
    max-width: var(--container-narrow);
}

.section {
    padding-top: var(--space-9);
    padding-bottom: var(--space-9);
}

/* desktop breakpoint */
@media (min-width: 1024px) {
    body {
        font-size: var(--text-body);
    }

    .container {
        padding-left: var(--space-7);
        padding-right: var(--space-7);
    }

    .section {
        padding-top: var(--space-11);
        padding-bottom: var(--space-11);
    }
}

/* ===== FOCUS STATES ===== */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* ===== SELECTION ===== */
::selection {
    background: var(--accent);
    color: var(--color-neri);
}

/* ===== SCROLLBAR (минимальная стилизация) ===== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--ink-faint); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-muted); }

/* ---------- components.css ---------- */

/**
 * Компоненты: header, footer, post-card, rubric-chip, marumado-logo
 * Mobile-first. Десктоп-поведение в конце блоков через @media (min-width: 1024px)
 */

/* ===== HEADER ===== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg);
    border-bottom: var(--border-hairline);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) 0;
    gap: var(--space-4);
}

.site-header__brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    font-size: 22px;
    color: var(--ink);
    white-space: nowrap;
}

.site-header__nav {
    display: none; /* скрыто на мобайле, откроется по burger */
}

.site-header__nav ul {
    display: flex;
    gap: var(--space-5);
    align-items: center;
}

.site-header__nav a {
    font-size: var(--text-body-sm);
    color: var(--ink);
    transition: color var(--dur-fast) var(--ease-standard);
}

.site-header__nav a:hover {
    color: var(--accent);
}

.site-header__nav a.is-primary {
    background: var(--accent);
    color: var(--color-neri);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--text-caption);
    font-weight: 500;
    letter-spacing: var(--track-wide);
}

.site-header__burger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: var(--space-2);
}

.site-header__burger span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: var(--ink);
}

@media (min-width: 1024px) {
    .site-header__nav {
        display: block;
    }
    .site-header__burger {
        display: none;
    }
}

/* ===== MARUMADO LOGO ===== */
.marumado {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.marumado circle:nth-child(1) {
    fill: none;
    stroke: var(--ink);
    stroke-width: 1.2;
}
.marumado circle:nth-child(2) {
    fill: var(--accent-ember);
}
.marumado circle:nth-child(3) {
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.2;
}

/* ===== FOOTER ===== */
.site-footer {
    background: var(--bg-surface);
    border-top: var(--border-hairline);
    padding-top: var(--space-9);
    padding-bottom: var(--space-7);
    margin-top: var(--space-11);
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-7);
}

.site-footer__col h4 {
    font-family: var(--font-body);
    font-size: var(--text-micro);
    font-weight: 600;
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: var(--space-4);
}

.site-footer__col ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.site-footer__col a {
    font-size: var(--text-caption);
    color: var(--ink);
    transition: color var(--dur-fast);
}

.site-footer__col a:hover {
    color: var(--accent);
}

.site-footer__ecosystem {
    background: var(--accent-suo);
    color: var(--color-neri);
    padding: var(--space-6);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-7);
}

.site-footer__ecosystem-title {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--text-h3);
    margin-bottom: var(--space-4);
    color: var(--color-neri);
}

.site-footer__ecosystem-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

.site-footer__ecosystem-item {
    display: block;
    padding: var(--space-4);
    background: rgba(241, 233, 214, 0.06);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(241, 233, 214, 0.12);
    transition: background var(--dur-fast) var(--ease-standard);
}

.site-footer__ecosystem-item:hover {
    background: rgba(241, 233, 214, 0.12);
}

.site-footer__ecosystem-name {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--text-h4);
    margin-bottom: var(--space-2);
    color: var(--color-neri);
}

.site-footer__ecosystem-tagline {
    font-size: var(--text-caption);
    color: rgba(241, 233, 214, 0.7);
}

.site-footer__bottom {
    padding-top: var(--space-6);
    border-top: 1px solid rgba(26, 21, 16, 0.06);
    font-size: var(--text-micro);
    color: var(--ink-muted);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

@media (min-width: 768px) {
    .site-footer__grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .site-footer__ecosystem-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .site-footer__bottom {
        flex-direction: row;
        justify-content: space-between;
    }
}

/* ===== POST CARD ===== */
.post-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    background: var(--bg-surface);
    border: var(--border-hairline);
    border-radius: var(--radius-md);
    transition: transform var(--dur-base) var(--ease-standard),
                box-shadow var(--dur-base) var(--ease-standard);
    height: 100%;
}

.post-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.post-card__rubric {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-micro);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 600;
}

.post-card__rubric::before {
    content: '';
    width: 5px;
    height: 5px;
    background: currentColor;
    border-radius: 50%;
}

.post-card__title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    font-size: var(--text-h4);
    line-height: var(--lh-snug);
    color: var(--ink);
    letter-spacing: var(--track-snug);
    font-variation-settings: 'opsz' 144, 'SOFT' 50, 'WONK' 1;
}

.post-card__excerpt {
    font-size: var(--text-caption);
    line-height: var(--lh-normal);
    color: var(--ink-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-card__meta {
    margin-top: auto;
    padding-top: var(--space-3);
    border-top: var(--border-hairline);
    font-size: var(--text-micro);
    color: var(--ink-muted);
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
}

/* ===== RUBRIC CHIP ===== */
.rubric-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-micro);
    font-weight: 500;
    letter-spacing: var(--track-wide);
    border-radius: var(--radius-full);
    background: var(--bg-surface);
    border: var(--border-hairline);
    color: var(--ink);
    transition: all var(--dur-fast) var(--ease-standard);
}

.rubric-chip:hover {
    background: var(--accent);
    color: var(--color-neri);
    border-color: var(--accent);
}

.rubric-chip__kanji {
    font-family: var(--font-display);
    font-size: var(--text-caption);
    opacity: 0.7;
}

/* ===== HERO ===== */
.hero {
    padding: var(--space-10) 0 var(--space-9);
    text-align: center;
}

.hero__kicker {
    font-size: var(--text-micro);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: var(--space-4);
    font-weight: 600;
}

.hero__title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    font-size: var(--text-display);
    line-height: var(--lh-display);
    letter-spacing: var(--track-tight);
    margin-bottom: var(--space-5);
    font-variation-settings: 'opsz' 144, 'SOFT' 50, 'WONK' 1;
}

.hero__lead {
    max-width: 560px;
    margin: 0 auto;
    font-size: var(--text-lead);
    line-height: var(--lh-snug);
    color: var(--ink-secondary);
}

/* ===== BUTTON ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-full);
    font-weight: 500;
    letter-spacing: var(--track-wide);
    font-size: var(--text-caption);
    transition: all var(--dur-base) var(--ease-standard);
    text-transform: uppercase;
}

.btn--primary {
    background: var(--accent);
    color: var(--color-neri);
}

.btn--primary:hover {
    background: transparent;
    color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
}

.btn--secondary {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--ink);
}

.btn--secondary:hover {
    background: var(--ink);
    color: var(--color-neri);
}

/* ===== DIVIDER ===== */
.divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--ink-muted);
    margin: var(--space-7) auto;
    max-width: 400px;
}

.divider__line {
    flex: 1;
    height: 1px;
    background: currentColor;
    opacity: 0.25;
}

.divider__dot {
    width: 5px;
    height: 5px;
    background: var(--accent);
    border-radius: 50%;
}