:root {
    --linen: #F4EFEA;
    --seam: #E7DFD8;
    --espresso: #33241F;
    --ink: #1F1815;
    --muted: #6B5D56;
    --rose: #B5606C;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--linen);
    color: var(--ink);
    font: 16px/1.6 "Manrope", system-ui, sans-serif;
}

header {
    background: var(--espresso);
    color: var(--linen);
    padding: 20px 16px;
}

header .bar, main, footer {
    max-width: 720px;
    margin: 0 auto;
}

header .bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.brand {
    color: var(--linen);
    text-decoration: none;
    font: 300 32px/1 "Cormorant Garamond", Georgia, serif;
    letter-spacing: 0.02em;
}

.langs a {
    color: var(--linen);
    opacity: 0.6;
    margin-left: 12px;
    font-size: 14px;
    text-decoration: none;
}

[data-lang="uk"] .langs a[hreflang="uk"],
[data-lang="en"] .langs a[hreflang="en"] { opacity: 1; text-decoration: underline; }

main { padding: 32px 16px 48px; }

h1 {
    font: 400 40px/1.15 "Cormorant Garamond", Georgia, serif;
    margin: 0 0 8px;
}

h2 {
    font: 500 26px/1.2 "Cormorant Garamond", Georgia, serif;
    margin: 36px 0 8px;
}

.updated { color: var(--muted); font-size: 14px; margin: 0 0 24px; }

a { color: var(--rose); }

ul { padding-left: 20px; }

li { margin: 4px 0; }

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

th, td { text-align: left; vertical-align: top; padding: 8px 8px 8px 0; border-bottom: 1px solid var(--seam); }

.table-wrap { overflow-x: auto; }

footer {
    padding: 24px 16px 40px;
    border-top: 1px solid var(--seam);
    color: var(--muted);
    font-size: 14px;
}

footer a { color: var(--muted); margin-right: 16px; }

/* One language at a time; Ukrainian when scripts are off. */
[data-lang="uk"] [lang="en"]:not(html),
[data-lang="en"] [lang="uk"]:not(html) { display: none; }