:root {
    --bg: #faf8f5;
    --bg-panel: #ffffff;
    --ink: #1c1a18;
    --ink-soft: #55504a;
    --ink-faint: #8b847c;
    --accent: #8b2635;
    --accent-soft: #b8535f;
    --rule: #e2ddd6;
    --shadow: 0 1px 3px rgba(28, 26, 24, .06), 0 8px 24px rgba(28, 26, 24, .04);
    --serif: Georgia, "Times New Roman", "PT Serif", serif;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--serif);
    font-size: 18px;
    line-height: 1.65;
}

.wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
}

/* --- шапка --- */

.masthead {
    border-bottom: 3px double var(--rule);
    background: var(--bg-panel);
}

.masthead-inner {
    padding: 32px 24px 20px;
    text-align: center;
}

.logo {
    font-size: 42px;
    line-height: 1.1;
    letter-spacing: .02em;
    margin: 0;
    font-weight: 400;
}

.logo a { color: var(--ink); text-decoration: none; }

.tagline {
    margin: 10px 0 0;
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

nav.main {
    border-top: 1px solid var(--rule);
    background: var(--bg-panel);
}

nav.main ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 28px;
    list-style: none;
    margin: 0;
    padding: 12px 24px;
    max-width: 1120px;
    margin-inline: auto;
}

nav.main a {
    font-family: var(--sans);
    font-size: 13px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-soft);
    text-decoration: none;
    padding: 4px 0;
    border-bottom: 2px solid transparent;
}

nav.main a:hover,
nav.main a[aria-current="page"] {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* --- сетка --- */

main { padding: 40px 0 64px; }

.layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 48px;
    align-items: start;
}

@media (max-width: 860px) {
    .layout { grid-template-columns: 1fr; gap: 40px; }
    .logo { font-size: 32px; }
    body { font-size: 17px; }
}

/* --- статьи --- */

article.lead {
    border-bottom: 1px solid var(--rule);
    padding-bottom: 32px;
    margin-bottom: 32px;
}

.kicker {
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 10px;
}

h1 {
    font-size: 38px;
    line-height: 1.2;
    margin: 0 0 16px;
    font-weight: 400;
}

h2 {
    font-size: 27px;
    line-height: 1.25;
    margin: 40px 0 14px;
    font-weight: 400;
}

h3 {
    font-size: 21px;
    margin: 30px 0 10px;
    font-weight: 700;
}

article.lead h2 { margin-top: 0; }

h2 a, h3 a { color: var(--ink); text-decoration: none; }
h2 a:hover, h3 a:hover { color: var(--accent); }

p { margin: 0 0 18px; }

.standfirst {
    font-size: 20px;
    color: var(--ink-soft);
    line-height: 1.55;
}

.meta {
    font-family: var(--sans);
    font-size: 13px;
    color: var(--ink-faint);
    margin-bottom: 20px;
}

.feed article {
    padding: 26px 0;
    border-bottom: 1px solid var(--rule);
}

.feed article:last-child { border-bottom: none; }

.feed p { margin-bottom: 10px; }

a { color: var(--accent); }
a:hover { color: var(--accent-soft); }

blockquote {
    margin: 26px 0;
    padding: 4px 0 4px 22px;
    border-left: 3px solid var(--accent);
    color: var(--ink-soft);
    font-style: italic;
}

/* --- боковая колонка --- */

aside .box {
    background: var(--bg-panel);
    border: 1px solid var(--rule);
    box-shadow: var(--shadow);
    padding: 22px;
    margin-bottom: 26px;
}

aside h3 {
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--rule);
}

aside ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 16px;
}

aside li {
    padding: 9px 0;
    border-bottom: 1px dotted var(--rule);
    line-height: 1.45;
}

aside li:last-child { border-bottom: none; }

aside .date {
    display: block;
    font-family: var(--sans);
    font-size: 12px;
    color: var(--ink-faint);
    letter-spacing: .04em;
}

/* --- словарь --- */

dl.glossary dt {
    font-weight: 700;
    margin-top: 22px;
    font-size: 19px;
}

dl.glossary dd {
    margin: 6px 0 0;
    color: var(--ink-soft);
}

/* --- таблица --- */

.table-scroll { overflow-x: auto; margin: 24px 0; }

table {
    border-collapse: collapse;
    width: 100%;
    font-size: 16px;
}

th, td {
    text-align: left;
    padding: 11px 14px;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
}

th {
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* --- подвал --- */

footer {
    border-top: 3px double var(--rule);
    background: var(--bg-panel);
    padding: 30px 0;
    font-family: var(--sans);
    font-size: 14px;
    color: var(--ink-faint);
}

footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; }

footer a { color: var(--ink-soft); text-decoration: none; }
footer a:hover { color: var(--accent); }

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #16150f;
        --bg-panel: #1e1c18;
        --ink: #ece7df;
        --ink-soft: #b6aea3;
        --ink-faint: #8a8177;
        --accent: #d98a94;
        --accent-soft: #eaa8b0;
        --rule: #35312b;
        --shadow: none;
    }
}