/* rukami — «Сделай своими руками» — clean card-grid blog. System fonts only. */

:root {
    --c-bg: #faf8f5;
    --c-surface: #ffffff;
    --c-text: #2b2722;
    --c-muted: #8a8177;
    --c-accent: #c0532b;       /* warm terracotta — handmade/craft feel */
    --c-accent-dark: #9c3f1d;
    --c-line: #e8e2d9;
    --c-badge-bg: #f6ece5;
    --radius: 14px;
    --shadow: 0 1px 2px rgba(43, 39, 34, .06), 0 8px 24px -12px rgba(43, 39, 34, .18);
    --shadow-hover: 0 2px 4px rgba(43, 39, 34, .08), 0 16px 32px -12px rgba(43, 39, 34, .26);
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.65;
    color: var(--c-text);
    background: var(--c-bg);
}
img { max-width: 100%; height: auto; }
a { color: var(--c-accent); text-decoration: none; }
a:hover { color: var(--c-accent-dark); }

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.wrap--narrow { max-width: 760px; }

/* ── header ─────────────────────────────────────────────── */
.site-header {
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-line);
    position: sticky;
    top: 0;
    z-index: 50;
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px 32px;
    flex-wrap: wrap;
    padding-top: 14px;
    padding-bottom: 14px;
}
.site-header__brand { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.site-header__logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--c-text);
}
.site-header__logo:hover { color: var(--c-accent); }
.site-header__mark {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--c-accent);
    color: #fff;
    font-size: 1.05rem;
}
.site-header__tag { font-size: .85rem; color: var(--c-muted); }

.site-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-nav__list li { margin: 0; }
.site-nav__list a {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--c-text);
}
.site-nav__list a:hover,
.site-nav__list .current-cat > a { background: var(--c-badge-bg); color: var(--c-accent-dark); }

/* ── hero ───────────────────────────────────────────────── */
.hero { padding: 44px 0 8px; max-width: 640px; }
.hero__title { margin: 0 0 8px; font-size: clamp(1.7rem, 4vw, 2.4rem); letter-spacing: -.02em; line-height: 1.15; }
.hero__tag { margin: 0; color: var(--c-muted); font-size: 1.05rem; }

/* ── card grid ──────────────────────────────────────────── */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
    gap: 24px;
    padding: 28px 0 8px;
}
.card {
    display: flex;
    flex-direction: column;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: box-shadow .18s ease, transform .18s ease;
}
.card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.card__thumb { display: block; aspect-ratio: 4 / 3; background: var(--c-badge-bg); }
.card__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card__img--empty {
    display: grid;
    place-items: center;
    font-size: 2rem;
    color: var(--c-accent);
    opacity: .45;
    background: linear-gradient(135deg, var(--c-badge-bg), #efe4da);
}
.card__body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; flex: 1; }
.card__cat {
    align-self: flex-start;
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--c-accent-dark);
    background: var(--c-badge-bg);
    padding: 3px 9px;
    border-radius: 999px;
}
.card__title { margin: 0; font-size: 1.05rem; line-height: 1.35; letter-spacing: -.01em; }
.card__title a { color: var(--c-text); }
.card__title a:hover { color: var(--c-accent); }
.card__date { margin-top: auto; font-size: .82rem; color: var(--c-muted); }

/* ── pagination ─────────────────────────────────────────── */
.navigation.pagination { padding: 24px 0 48px; }
.navigation.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.navigation.pagination .screen-reader-text { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; overflow: hidden; }
.page-numbers {
    display: inline-grid;
    place-items: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border-radius: 10px;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    color: var(--c-text);
    font-weight: 600;
}
.page-numbers.current { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
a.page-numbers:hover { border-color: var(--c-accent); color: var(--c-accent); }

/* ── archive head ───────────────────────────────────────── */
.archive-head { padding: 40px 0 0; }
.archive-head__kicker {
    margin: 0 0 4px;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--c-muted);
}
.archive-head__title { margin: 0; font-size: clamp(1.5rem, 3.5vw, 2.1rem); letter-spacing: -.02em; }
.archive-head__desc { color: var(--c-muted); margin-top: 8px; }

/* ── single post ────────────────────────────────────────── */
.post-single { padding: 44px 0 24px; }
.post-single__header { margin-bottom: 20px; }
.post-single__cat {
    display: inline-block;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--c-accent-dark);
    background: var(--c-badge-bg);
    padding: 4px 11px;
    border-radius: 999px;
    margin-bottom: 12px;
}
.post-single__title {
    margin: 0 0 10px;
    font-size: clamp(1.6rem, 4vw, 2.3rem);
    line-height: 1.2;
    letter-spacing: -.02em;
}
.post-meta { font-size: .9rem; color: var(--c-muted); }
.post-meta__sep { opacity: .6; }

.entry-content { font-size: 1.06rem; }
.entry-content p { margin: 0 0 1.1em; }
.entry-content img {
    display: block;
    margin: 1.4em auto;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.entry-content a { text-decoration: underline; text-underline-offset: 2px; }

.post-single__tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 0 6px; border-top: 1px solid var(--c-line); margin-top: 28px; }
.tag-pill {
    font-size: .85rem;
    font-weight: 600;
    color: var(--c-text);
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    padding: 4px 12px;
    border-radius: 999px;
}
.tag-pill:hover { border-color: var(--c-accent); color: var(--c-accent); }

.post-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 24px 0 12px;
    margin-top: 12px;
}
.post-nav__item--next { text-align: right; }
.post-nav__label { display: block; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); margin-bottom: 4px; }
.post-nav__item a { font-weight: 600; color: var(--c-text); }
.post-nav__item a:hover { color: var(--c-accent); }

/* ── 404 ────────────────────────────────────────────────── */
.error-404 { padding: 60px 0; }
.error-404__title { font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 0 0 12px; }
.error-404__home { font-weight: 700; }
.error-404__sub { font-size: 1.1rem; margin: 28px 0 8px; }
.error-404__cats, .site-footer__cats { list-style: none; margin: 0; padding: 0; columns: 2; }
.error-404__cats li, .site-footer__cats li { padding: 3px 0; }

/* ── footer ─────────────────────────────────────────────── */
.site-footer { background: var(--c-surface); border-top: 1px solid var(--c-line); margin-top: 48px; }
.site-footer__inner {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 32px;
    padding-top: 36px;
    padding-bottom: 28px;
}
.site-footer__title { font-size: .85rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 12px; color: var(--c-muted); }
.site-footer__cats a { color: var(--c-text); font-weight: 600; font-size: .92rem; }
.site-footer__cats a:hover { color: var(--c-accent); }
.site-footer__tags { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; line-height: 1.9; }
.site-footer__tags a { color: var(--c-muted); }
.site-footer__tags a:hover { color: var(--c-accent); }
.site-footer__bar { border-top: 1px solid var(--c-line); padding: 14px 0; }
.site-footer__copy { margin: 0; font-size: .84rem; color: var(--c-muted); }

/* ── responsive ─────────────────────────────────────────── */
@media (max-width: 720px) {
    body { font-size: 16px; }
    .site-header { position: static; }
    .site-header__inner { flex-direction: column; align-items: flex-start; gap: 10px; }
    .hero { padding-top: 28px; }
    .card-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
    .site-footer__inner { grid-template-columns: 1fr; }
    .post-nav { grid-template-columns: 1fr; }
    .post-nav__item--next { text-align: left; }
}
@media (max-width: 460px) {
    .card-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .card__body { padding: 10px 12px 12px; }
    .card__title { font-size: .95rem; }
    .card__cat { display: none; }
}

/* ---------- breadcrumbs ---------- */
.breadcrumbs { font-size: .85rem; color: #8a7f76; margin: 0 0 1.2rem; }
.breadcrumbs a { color: inherit; text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent, #c0573b); text-decoration: underline; }
.breadcrumbs__sep { margin: 0 .45rem; opacity: .6; }
.breadcrumbs [aria-current] { color: #55493f; }