/* ==========================================================================
   e-Ukraine — the Ukrainian state typeface.
   Self-hosted WOFF2, so no third-party request and no render-blocking
   stylesheet. font-display: swap keeps text visible while they arrive.
   ========================================================================== */

@font-face {
    font-family: "e-Ukraine";
    src: url("../fonts/e-Ukraine-Regular.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "e-Ukraine";
    src: url("../fonts/e-Ukraine-Medium.woff2") format("woff2");
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "e-Ukraine";
    src: url("../fonts/e-Ukraine-Bold.woff2") format("woff2");
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "e-Ukraine Head";
    src: url("../fonts/e-UkraineHead-Regular.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "e-Ukraine Head";
    src: url("../fonts/e-UkraineHead-Medium.woff2") format("woff2");
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "e-Ukraine Head";
    src: url("../fonts/e-UkraineHead-Bold.woff2") format("woff2");
    font-weight: 700; font-style: normal; font-display: swap;
}
/* ==========================================================================
   Ukraine Market Desk — theme
   System fonts only: no external requests, no layout shift, fast LCP.
   ========================================================================== */

/* The neutrals are not grey. Every one of them is mixed towards the accent
   blue, so the page reads as one blue-toned family rather than blue type
   dropped onto a grey-and-white template. */
:root {
    --ink:        #11223c;
    --ink-soft:   #42597a;
    --ink-faint:  #5f7699;
    --paper:      #ffffff;
    --paper-tint: #eef3fb;
    --line:       #d7e2f0;
    --line-soft:  #e7eef8;
    --accent:     #1257a8;
    --accent-ink: #0c3f7d;
    --gold:       #e0a92a;
    --focus:      #1f74d8;

    /* Ukraine's flag, for the hairlines that open and close the page. */
    --uablue:     #0057B7;
    --uayellow:   #FFD700;

    --shell: 78rem;
    --radius: 10px;
    --shadow: 0 1px 2px rgba(20,34,50,.05), 0 6px 20px rgba(20,34,50,.06);

    --sans: "e-Ukraine", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    /* Display cut, used for headings only — never for long reading. */
    --serif: "e-Ukraine Head", "e-Ukraine", -apple-system, BlinkMacSystemFont,
             "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --ink:        #e6eefa;
        --ink-soft:   #a6bad4;
        --ink-faint:  #7b90ad;
        --paper:      #0d1626;
        --paper-tint: #142138;
        --line:       #22334f;
        --line-soft:  #1a2740;
        --accent:     #74b0ef;
        --accent-ink: #a3cbf5;
        --gold:       #e8bd48;
        --focus:      #74b0ef;
        --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
    }
}

/* --- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.65;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 3px; }

h1, h2, h3, h4 { line-height: 1.22; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.012em; }
p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.25em; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--accent); color: #fff; padding: .7rem 1.1rem; border-radius: 0 0 6px 0;
}
.skip:focus { left: 0; }

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 1.5rem; }
.muted { color: var(--ink-soft); }

/* --- Masthead ---------------------------------------------------------- */
.masthead {
    border-bottom: 1px solid var(--line);
    background: var(--paper);
    position: sticky; top: 0; z-index: 40;
    backdrop-filter: saturate(180%) blur(8px);
}

/* The flag as a hairline. Two halves of one 4px bar rather than two stacked
   elements, so it survives sub-pixel rounding at any zoom. These three are in
   normal flow: the page's opening line, its closing line, and the one between
   the masthead and the photograph. */
.masthead::before,
.foot::after,
.hero-slider::before {
    content: ""; display: block; height: 4px;
    background: linear-gradient(to bottom, var(--uablue) 0 50%, var(--uayellow) 50% 100%);
}

/* The same line again at every change of ground colour further down: each
   tinted band opens and closes with it instead of with a grey rule. These
   are placed absolutely rather than in flow, so they sit on the band's own
   edge and not inside its padding. */
.hero, .block--tint, .uselinks, .foot { position: relative; }

.hero::before, .hero::after,
.block--tint::before, .block--tint::after,
.uselinks::before,
.foot::before {
    content: ""; position: absolute; left: 0; right: 0; height: 4px;
    background: linear-gradient(to bottom, var(--uablue) 0 50%, var(--uayellow) 50% 100%);
}
.hero::before, .block--tint::before, .uselinks::before, .foot::before { top: 0; }
.hero::after,  .block--tint::after { bottom: 0; }
.masthead__inner {
    display: flex; align-items: center; gap: 1.25rem;
    min-height: 4.4rem; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit; margin-right: auto; }
/* Sized off the two lines of type beside it — name plus strapline — so the
   mark and the text block finish at the same height. width:auto keeps the
   lockup's own proportions; the width/height attributes on the tag reserve
   the space before it loads, so nothing shifts. */
.brand__mark { height: 48px; width: auto; flex: none; }
.brand__name { display: block; font-weight: 700; font-size: 1.08rem; letter-spacing: -.02em; }
.brand__tag  { display: block; font-size: .74rem; color: var(--ink-faint); letter-spacing: .01em; }

/* The strapline is the first thing to give way when the masthead runs out
   of room; it comes back the moment the name and the menu both fit. */
@media (max-width: 76rem) {
    .brand__tag { display: none; }
}

/* Two banded rows rather than one line of links. The bands are the flag's
   own colours held right back — a wash, not a paint — because they are
   there to separate the two halves of the menu, not to be looked at. The
   tints are laid over the masthead's own ground with alpha, so one pair of
   values reads correctly on white and on the dark theme alike. */
.nav { display: block; }
.nav__row { border-top: 1px solid var(--line-soft); padding: .4rem 0; }
.nav__row--primary   { background: rgba(0, 87, 183, .07); }
.nav__row--secondary { background: rgba(255, 215, 0, .15); }

/* No margin or padding reset here: .shell on the same element supplies
   both, and that is what lines the menu up with the column the rest of
   the page is set in. Resetting them here would win on source order and
   push the row to the window edge. */
/* The row is set justified: the items share the width between them and the
   first and last sit flush against the column edges, so both bands measure
   exactly the same as the page underneath them. flex-basis 0 with grow lets
   a long label take the room it needs while the short ones still stretch,
   which keeps six items and three items looking like the same menu. */
.nav__list {
    display: flex; gap: .4rem; list-style: none;
    flex-wrap: wrap; align-items: stretch;
}
.nav__list > li { flex: 1 1 auto; display: flex; }
.nav__list > li > a { width: 100%; justify-content: center; text-align: center; }
.nav__list a {
    text-decoration: none; color: var(--ink-soft); font-size: .93rem; font-weight: 550;
}

/* Every top-level item is the same kind of box — a flex one. The subjects
   item carries a caret beside its label, and an inline box holding an SVG
   takes its baseline from that SVG, which used to leave that one word
   sitting a couple of pixels below the rest of the menu. Laying all six out
   the same way removes the question rather than correcting for it.
   The child combinator matters: the drop-down's own links are further down
   the tree and keep their plain, unframed look. */
/* Each item is the outlined button from the hero, at menu size: the same
   hairline in the same blue, the same corner, the same fill on hover. The
   ground stays transparent so the band's colour reads through the frame
   rather than being boxed out of it. */
.nav__list > li > a {
    display: inline-flex; align-items: center; gap: .3rem;
    line-height: 1.2;
    padding: .42rem .8rem;
    color: var(--accent);
    background: transparent;
    border: 1px solid var(--accent);
    border-radius: 7px;
    transition: color .15s, border-color .15s, background-color .15s;
}
.nav__list > li > a:hover {
    background: var(--accent); border-color: var(--accent); color: #fff;
}
/* Where you are: the frame turns gold and the label thickens, so the
   marker reads even before the colour does. */
.nav__list > li > a[aria-current] {
    border-color: var(--gold); color: var(--ink); font-weight: 700;
}
.nav__list > li > a[aria-current]:hover {
    background: var(--gold); border-color: var(--gold); color: #1b1300;
}

/* Below a full desktop the frames close up. This has to come after the
   rules it narrows: same selector, same weight, so position decides. */
@media (max-width: 76rem) {
    .nav__list { gap: .3rem; }
    .nav__list > li > a { padding: .38rem .55rem; font-size: .89rem; }
}

/* --- The subjects drop-down -------------------------------------------- */
/* Opens on hover and on keyboard focus alike, so it works without a line of
   JavaScript; the parent link still goes to the index page, which is what a
   tap on a touch screen gets. */
.nav__drop { position: relative; }
/* The opener is for narrow screens only. Wide, hover already does it and
   a second control beside the link would be one thing too many. */
.navsub { display: none; }
.nav__caret { transition: transform .15s; }
.nav__drop:hover > a .nav__caret,
.nav__drop:focus-within > a .nav__caret { transform: rotate(180deg); }

/* Clear of the frame rather than flush against it. */
.nav__drop > .nav__sub { margin-top: .3rem; }
.nav__sub {
    position: absolute; left: 0; top: 100%;
    min-width: 15rem; margin: 0; padding: .45rem 0;
    list-style: none;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity .14s, transform .14s, visibility .14s;
    z-index: 50;
}
.nav__drop:hover > .nav__sub,
.nav__drop:focus-within > .nav__sub {
    opacity: 1; visibility: visible; transform: translateY(0);
}

/* Deliberately lighter than the menu itself: this is a list to scan, not a
   row of headings to weigh up. */
.nav__sub a {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    padding: .4rem .8rem; border-bottom: 0;
    font-size: .88rem; font-weight: 400; color: var(--ink-soft);
}
.nav__sub a:hover { background: var(--paper-tint); color: var(--accent); border-bottom: 0; }
.nav__n { font-size: .72rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.nav__sub-all { border-top: 1px solid var(--line-soft); margin-top: .35rem; padding-top: .35rem; }
.nav__sub-all a { font-weight: 500; color: var(--accent); font-size: .82rem; }

@media (prefers-reduced-motion: reduce) {
    .nav__sub, .nav__caret { transition: none; }
}

.searchbox { display: flex; align-items: center; gap: .3rem; }
.searchbox input {
    font: inherit; font-size: .9rem; padding: .42rem .7rem; width: 11rem;
    border: 1px solid var(--line); border-radius: 20px; background: var(--paper-tint); color: var(--ink);
}
.searchbox input::placeholder { color: var(--ink-faint); }
.searchbox button {
    background: none; border: 0; cursor: pointer; color: var(--ink-soft);
    padding: .35rem; display: flex; border-radius: 50%;
}
.searchbox button:hover { color: var(--accent); }
.searchbox--page { margin: 1rem 0; }
.searchbox--page input { width: 100%; max-width: 28rem; font-size: 1rem; padding: .6rem 1rem; }
.searchbox--page button {
    background: var(--accent); color: #fff; padding: .6rem 1.1rem; border-radius: 20px;
    font-size: .92rem; font-weight: 600;
}
.searchbox--page button:hover { background: var(--accent-ink); color: #fff; }


@media (prefers-color-scheme: dark) {
    .nav__row--primary   { background: rgba(0, 87, 183, .30); }
    .nav__row--secondary { background: rgba(255, 215, 0, .13); }
    .nav__list > li > a:hover { background: rgba(255, 255, 255, .07); }
}

.navtoggle { display: none; background: none; border: 0; cursor: pointer; padding: .6rem; }
.navtoggle__bars, .navtoggle__bars::before, .navtoggle__bars::after {
    display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; position: relative;
}
.navtoggle__bars::before, .navtoggle__bars::after { content: ""; position: absolute; }
.navtoggle__bars::before { top: -7px; }
.navtoggle__bars::after  { top: 7px; }

@media (max-width: 67.5rem) {
    .navtoggle { display: block; }
    .nav { display: none; }
    .nav.is-open { display: block; }
    .nav__row { padding: .35rem 0 .5rem; }
    .nav__list { flex-direction: column; gap: .35rem; align-items: stretch; }
    /* The row rule turns every item into a flex row so the pills can share
       the width. Stacked, that would put a drop-down list beside its own
       heading instead of under it. */
    .nav__list > li { display: block; }
    .nav__list > li > a { display: flex; padding: .55rem .7rem; }

    /* No hovering on a phone, so the lists are closed and each has a
       button of its own. Three of them open at once is nineteen links
       and a menu taller than the screen; one at a time fits. */
    .nav__drop { position: relative; flex: 1 1 auto; }
    .nav__drop > a { padding-right: 2.6rem; }
    .nav__caret { display: block; }
    .nav__drop > a .nav__caret { display: none; }

    .navsub {
        display: flex; align-items: center; justify-content: center;
        /* Pinned to the heading row, not to the item: once the list below
           opens, a button stretched to the full height would put its arrow
           in the middle of the open list. */
        position: absolute; top: 0; right: 0; width: 2.6rem; height: 2.35rem;
        background: none; border: 0; padding: 0; cursor: pointer;
        color: var(--accent);
    }
    .navsub:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
    .navsub .nav__caret { transition: transform .15s; }
    .nav__drop.is-open > .navsub .nav__caret { transform: rotate(180deg); }

    .nav__sub {
        position: static; opacity: 1; visibility: visible; transform: none;
        border: 0; box-shadow: none; background: none; border-radius: 0;
        min-width: 0; padding: .1rem 0 .5rem;
        display: none;
    }
    .nav__drop.is-open > .nav__sub { display: block; }
    /* Hover must not reopen it: on a touch screen the first tap counts as
       a hover and the list would spring open under the finger. */
    .nav__drop:hover > .nav__sub,
    .nav__drop:focus-within > .nav__sub { display: none; }
    .nav__drop.is-open:hover > .nav__sub,
    .nav__drop.is-open:focus-within > .nav__sub { display: block; }

    .nav__sub a { padding: .4rem 0 .4rem 1rem; border-bottom: 0; }
    .nav__sub-all { border-top: 0; margin: 0; padding: 0; }
}

/* --- Breadcrumbs ------------------------------------------------------- */
.crumbs { border-bottom: 1px solid var(--line-soft); background: var(--paper-tint); }
.crumbs ol {
    list-style: none; display: flex; flex-wrap: wrap; gap: .45rem;
    margin: 0; padding: .55rem 0; font-size: .8rem; color: var(--ink-faint);
}
.crumbs li + li::before { content: "/"; margin-right: .45rem; color: var(--line); }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }

/* --- Hero -------------------------------------------------------------- */
.hero {
    padding: 3.5rem 0 3rem;
    background:
        radial-gradient(60rem 22rem at 12% -10%, rgba(18,87,168,.13), transparent 60%),
        radial-gradient(50rem 20rem at 92% 0%, rgba(224,169,42,.12), transparent 60%),
        var(--paper-tint);
}
.hero__eyebrow {
    font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--accent); margin: 0 0 .8rem;
}
.hero__title {
    font-family: var(--serif); font-size: clamp(1.9rem, 4.6vw, 3rem);
    margin: 0 0 .7rem; letter-spacing: -.02em;
}
/* The hero runs the full shell width, so it lines up with the navigation
   above it and the blocks below rather than sitting in a narrow column. */
.hero__lead { font-size: 1.08rem; color: var(--ink-soft); margin: 0 0 1.6rem; }
.hero__actions { display: flex; gap: .7rem; flex-wrap: wrap; margin: 0; }

.btn {
    display: inline-block; background: var(--accent); color: #fff; text-decoration: none;
    padding: .68rem 1.25rem; border-radius: 7px; font-size: .93rem; font-weight: 600;
    border: 1px solid var(--accent);
}
.btn:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
.btn--ghost { background: transparent; color: var(--accent); }
.btn--ghost:hover { background: var(--accent); color: #fff; }

/* --- Blocks & grids ---------------------------------------------------- */
.block { padding: 2.75rem 1.5rem; }
.block--tint {
    background: var(--paper-tint);
    max-width: none; padding-left: 0; padding-right: 0;
}
/* Two classes, deliberately: the lists inside a tinted band reset their
   own margin and padding further down the file, and at equal specificity
   the later rule wins — which left the band's contents flush against the
   left edge on wide screens instead of centred with the rest of the page. */
.block.block--tint > * { max-width: var(--shell); margin-left: auto; margin-right: auto; padding: 0 1.5rem; }
.block__h {
    font-size: .8rem; text-transform: uppercase; letter-spacing: .11em; font-weight: 700;
    color: var(--ink-faint); margin: 0 0 1.4rem; padding-bottom: .6rem;
    border-bottom: 2px solid var(--line);
}

.grid { display: grid; gap: 1.9rem 1.6rem; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--feature { grid-template-columns: 2fr 1fr; align-items: start; }
.grid--feature .card--lead { grid-row: span 2; }
/* The lead card spans two rows, and those rows are sized by the cards beside
   it — so a short lead left a hole underneath. Two fixes together close it:
   the small cards give up their third line of text, and the lead's picture
   takes whatever height is left over. Only applies to the two-column layout;
   below 980px the block is a single stack and needs neither. */
@media (min-width: 981px) {
    .grid--feature .card:not(.card--lead) .card__excerpt {
        display: -webkit-box; -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
    }
    .grid--feature .card--lead { height: 100%; }
    .grid--feature .card--lead .card__media {
        flex: 1 1 auto; aspect-ratio: auto; min-height: 14rem;
    }
    .grid--feature .card--lead .card__media img { height: 100%; object-fit: cover; }
}


@media (max-width: 980px) {
    .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
    .grid--feature { grid-template-columns: 1fr; }
    .grid--feature .card--lead { grid-row: auto; }
}
@media (max-width: 620px) {
    .grid--3, .grid--4 { grid-template-columns: 1fr; }
    .block { padding: 2rem 1.25rem; }
}

/* --- Cards ------------------------------------------------------------- */
.card { display: flex; flex-direction: column; gap: .8rem; }
.card__media {
    display: block; overflow: hidden; border-radius: var(--radius);
    background: var(--line-soft); aspect-ratio: 16 / 9;
}
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.card:hover .card__media img { transform: scale(1.035); }
.card__body { display: flex; flex-direction: column; gap: .45rem; }
.card__title { font-size: 1.06rem; margin: 0; line-height: 1.32; }
.card__title a { color: inherit; text-decoration: none; }
.card__title a:hover { color: var(--accent); }
.card__excerpt { font-size: .93rem; color: var(--ink-soft); margin: 0; }
.card__meta { font-size: .8rem; color: var(--ink-faint); margin: 0; display: flex; gap: .4rem; flex-wrap: wrap; }

.card--lead .card__title { font-family: var(--serif); font-size: clamp(1.4rem, 2.6vw, 1.85rem); }
.card--lead .card__excerpt { font-size: 1rem; }
.card--compact .card__media { aspect-ratio: 3 / 2; }
.card--compact .card__title { font-size: .96rem; }

.tagline {
    display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--accent); text-decoration: none;
}
.tagline:hover { text-decoration: underline; }
.tagline--sm { font-size: .68rem; }

/* --- Page heads -------------------------------------------------------- */
.pagehead { padding: 2.75rem 1.5rem 1rem; }
/* No measure cap on either of these: a page head has to line up with the
   pictures and the menu below it, the same way an article head does. */
.pagehead h1 {
    font-family: var(--serif); font-size: clamp(1.7rem, 3.8vw, 2.5rem);
    margin: 0 0 .6rem;
}
.pagehead__lead { font-size: 1.03rem; color: var(--ink-soft); margin: 0 0 .5rem; }
.pagehead__meta { font-size: .84rem; color: var(--ink-faint); margin: 0; }

/* --- Article ----------------------------------------------------------- */
.article__head { padding-top: 2.75rem; }
.article__title {
    font-family: var(--serif); font-size: clamp(1.85rem, 4.4vw, 2.75rem);
    margin: .5rem 0 .8rem; letter-spacing: -.022em;
}
.article__standfirst { font-size: 1.14rem; color: var(--ink-soft); line-height: 1.55; margin: 0 0 1.1rem; }
.article__meta {
    font-size: .84rem; color: var(--ink-faint); display: flex; gap: .5rem; flex-wrap: wrap;
    padding-bottom: 1.4rem; border-bottom: 1px solid var(--line); margin: 0;
}
/* The byline is a link, but it sits in a faint meta line: an underline is
   enough to say so without pulling the eye off the headline. */
.article__byline a {
    color: inherit; text-decoration: underline;
    text-decoration-color: var(--line); text-underline-offset: .18em;
}
.article__byline a:hover, .article__byline a:focus-visible {
    color: var(--accent); text-decoration-color: currentColor;
}

.article__cover { margin: 2rem auto; max-width: var(--shell); padding: 0 1.5rem; }
.article__cover img { width: 100%; border-radius: var(--radius); background: var(--line-soft); }
.article__cover figcaption { font-size: .78rem; color: var(--ink-faint); margin-top: .55rem; }
.article__cover figcaption a { color: var(--ink-faint); }

.notice {
    background: var(--paper-tint); border-left: 3px solid var(--gold);
    padding: .85rem 1.1rem; border-radius: 0 6px 6px 0; font-size: .88rem;
    color: var(--ink-soft); margin: 1.6rem 0;
}

.prose { font-size: 1.06rem; line-height: 1.75; }
.prose > p:first-of-type::first-letter {
    float: left; font-family: var(--serif); font-size: 3.3em; line-height: .84;
    padding: .06em .09em 0 0; color: var(--accent); font-weight: 700;
}
.prose h2 {
    font-family: var(--serif); font-size: 1.52rem; margin: 2.4rem 0 .8rem;
    padding-top: .4rem; letter-spacing: -.015em;
}
.prose h3 { font-size: 1.16rem; margin: 1.9rem 0 .6rem; }
.prose ul, .prose ol { padding-left: 1.35em; }
.prose li { margin-bottom: .45em; }
.prose blockquote {
    margin: 1.8rem 0; padding: .3rem 0 .3rem 1.3rem; border-left: 3px solid var(--accent);
    font-family: var(--sans); font-size: 1.06rem; font-weight: 500; color: var(--ink-soft);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose figure { margin: 2rem 0; }
.prose figure img { border-radius: var(--radius); }
.prose figcaption { font-size: .8rem; color: var(--ink-faint); margin-top: .5rem; }
.prose table { width: 100%; border-collapse: collapse; font-size: .93rem; margin: 1.8rem 0; display: block; overflow-x: auto; }
.prose th, .prose td { padding: .6rem .7rem; border-bottom: 1px solid var(--line); text-align: left; }
.prose th { font-weight: 700; background: var(--paper-tint); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.4rem 0; }

.article__foot { margin-top: 2.75rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.article__share { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em;
                  font-weight: 700; color: var(--ink-faint); margin: 0 0 .7rem; }
.share { display: flex; gap: .5rem; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.share a {
    display: inline-block; font-size: .84rem; text-decoration: none; color: var(--ink-soft);
    border: 1px solid var(--line); border-radius: 18px; padding: .32rem .85rem;
}
.share a:hover { border-color: var(--accent); color: var(--accent); }

.adjacent { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2.5rem 0 1rem; }
.adjacent__item {
    border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1.1rem;
    text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: .3rem;
}
.adjacent__item:hover { border-color: var(--accent); }
.adjacent__item--next { text-align: right; }
.adjacent__label { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em;
                   font-weight: 700; color: var(--ink-faint); }
.adjacent__title { font-size: .93rem; font-weight: 600; line-height: 1.35; }
@media (max-width: 620px) { .adjacent { grid-template-columns: 1fr; } .adjacent__item--next { text-align: left; } }

/* --- Topics ------------------------------------------------------------ */
.topics { list-style: none; padding: 0; margin: 0; display: grid;
          grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .8rem 1.4rem; }
.topics a {
    display: flex; justify-content: space-between; align-items: baseline; gap: .8rem;
    text-decoration: none; color: var(--ink); padding: .6rem 0;
    border-bottom: 1px solid var(--line-soft); font-weight: 600; font-size: .97rem;
}
.topics a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.topics__n { font-size: .78rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; font-weight: 500; }
.topics__desc { font-size: .85rem; color: var(--ink-soft); margin: .4rem 0 0; }
.topics--full a { padding: .75rem 0; font-size: 1.05rem; }

/* --- Year lists -------------------------------------------------------- */
.yearlist { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.yearlist a {
    display: inline-flex; align-items: baseline; gap: .4rem; text-decoration: none;
    border: 1px solid var(--line); border-radius: 7px; padding: .4rem .75rem;
    color: var(--ink); font-size: .92rem; font-weight: 600;
}
.yearlist a span { font-size: .74rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.yearlist a:hover, .yearlist a[aria-current] { border-color: var(--accent); color: var(--accent); }
.yearlist a[aria-current] { background: var(--accent); color: #fff; }
.yearlist a[aria-current] span { color: rgba(255,255,255,.75); }

/* --- Ledger (archive / search listing) --------------------------------- */
.ledger { list-style: none; padding: 0; margin: 0; }
.ledger__row {
    display: grid; grid-template-columns: 4.5rem 1fr; gap: 1.2rem;
    padding: 1.25rem 0; border-bottom: 1px solid var(--line-soft);
}
.ledger__date { font-size: .84rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; padding-top: .2rem; }
.ledger__title { font-size: 1.12rem; margin: 0 0 .35rem; line-height: 1.35; }
.ledger__title a { color: inherit; text-decoration: none; }
.ledger__title a:hover { color: var(--accent); }
.ledger__excerpt { font-size: .92rem; color: var(--ink-soft); margin: 0 0 .4rem; }
@media (max-width: 560px) { .ledger__row { grid-template-columns: 1fr; gap: .3rem; } }

/* --- Timeline ---------------------------------------------------------- */
.yearjump { position: sticky; top: 4.4rem; z-index: 30; background: var(--paper-tint);
            border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line); }
.yearjump ul { list-style: none; display: flex; gap: .15rem; margin: 0; padding: .5rem 0;
               overflow-x: auto; scrollbar-width: thin; }
.yearjump a { text-decoration: none; font-size: .82rem; font-weight: 600; color: var(--ink-soft);
              padding: .25rem .5rem; border-radius: 5px; white-space: nowrap; }
.yearjump a:hover { background: var(--accent); color: #fff; }

.tl { margin-bottom: 2.75rem; }
.tl__year {
    font-family: var(--serif); font-size: 2.1rem; color: var(--accent);
    margin: 0 0 1rem; padding-bottom: .3rem; border-bottom: 2px solid var(--line);
    scroll-margin-top: 8rem;
}
.tl__list { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--line); }
.tl__item { position: relative; padding: 0 0 1.6rem 1.6rem; }
.tl__item::before {
    content: ""; position: absolute; left: -7px; top: .45rem; width: 12px; height: 12px;
    border-radius: 50%; background: var(--paper); border: 2px solid var(--line);
}
.tl__item.is-major::before { background: var(--gold); border-color: var(--gold); }
.tl__date { font-size: .8rem; color: var(--ink-faint); display: block; margin-bottom: .2rem; }
.tl__title { font-size: 1.06rem; margin: 0 0 .35rem; }
.tl__summary { font-size: .93rem; color: var(--ink-soft); margin: 0 0 .4rem; max-width: 70ch; }
.tl__link { font-size: .84rem; font-weight: 600; text-decoration: none; }
.tl__link:hover { text-decoration: underline; }

/* --- Feed directory ---------------------------------------------------- */
.feeds { display: flex; flex-direction: column; }
.feeds__row { display: flex; align-items: center; justify-content: space-between;
              gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line-soft); }
.feeds__label { font-weight: 600; font-size: .97rem; }
.feeds__links { display: flex; gap: .4rem; flex-shrink: 0; }
.feeds__links a { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-decoration: none;
                  border: 1px solid var(--line); border-radius: 5px; padding: .2rem .55rem;
                  color: var(--ink-soft); }
.feeds__links a:hover { border-color: var(--accent); color: var(--accent); }

/* --- Facts list -------------------------------------------------------- */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
         gap: 1rem; margin: 2rem 0 0; padding: 1.2rem 0 0; border-top: 1px solid var(--line); }
.facts dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .09em;
            color: var(--ink-faint); font-weight: 700; margin-bottom: .25rem; }
.facts dd { margin: 0; font-size: 1.05rem; font-weight: 600; }

/* --- Pagination -------------------------------------------------------- */
.pager { display: flex; align-items: center; justify-content: space-between;
         gap: 1rem; margin-top: 2.5rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
         flex-wrap: wrap; }
.pager__step { font-size: .9rem; font-weight: 600; text-decoration: none; }
.pager__step.is-off { color: var(--ink-faint); opacity: .5; }
.pager__nums { list-style: none; display: flex; gap: .25rem; margin: 0; padding: 0; }
.pager__nums a, .pager__nums span {
    display: inline-block; min-width: 2.1rem; text-align: center; padding: .3rem .5rem;
    border-radius: 6px; text-decoration: none; font-size: .9rem;
}
.pager__nums a:hover { background: var(--paper-tint); }
.pager__nums .is-current { background: var(--accent); color: #fff; font-weight: 700; }
.pager__gap { color: var(--ink-faint); padding: .3rem .2rem; }

/* --- Footer ------------------------------------------------------------ */
.foot { background: var(--paper-tint); }
.foot__grid {
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem;
    padding-top: 2.75rem; padding-bottom: 2rem;
}
/* The full lockup here, wordmark included: there is room for it to be read
   at this size, which there is not up in the masthead. */
.foot__logo { width: 160px; height: auto; margin: 0 0 1.1rem; }
.foot__brand { font-weight: 700; font-size: 1.05rem; margin: 0 0 .5rem; }
.foot__about p { font-size: .9rem; color: var(--ink-soft); max-width: 42ch; }
.foot__disclaimer { font-size: .8rem !important; color: var(--ink-faint) !important; }
.foot__h { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em;
           color: var(--ink-faint); margin: 0 0 .8rem; font-weight: 700; }
.foot__list { list-style: none; padding: 0; margin: 0; }
.foot__list li { margin-bottom: .45rem; }
.foot__list a { font-size: .9rem; color: var(--ink-soft); text-decoration: none; }
.foot__list a:hover { color: var(--accent); text-decoration: underline; }
.foot__base {
    padding: 1.1rem 1.5rem; border-top: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem 1.5rem; flex-wrap: wrap;
}
.foot__base p { margin: 0; font-size: .82rem; color: var(--ink-faint); }

/* One list, two homes: the far left of the top bar and the far end of the
   copyright line. Each mark carries its own brand colour, so hovering cannot
   recolour them — they lift and come up to full strength instead. Resting
   slightly under full opacity keeps five saturated squares from shouting
   over the type they sit beside. */
.social { display: flex; gap: .3rem; list-style: none; margin: 0; padding: 0; }
.social__a {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 7px;
    opacity: .88;
    transition: opacity .15s, transform .15s, background-color .15s;
}
.social__a:hover { opacity: 1; transform: translateY(-1px); background: var(--paper); }
.social__a svg { display: block; }

/* In the top strip they sit tight against the edge and a size down, so the
   bar stays the thin utility rule it was. */
.social--top { margin-right: auto; gap: .15rem; }
.social--top .social__a { width: 26px; height: 26px; }
.social--top .social__a svg { width: 16px; height: 16px; }

@media (max-width: 30rem) {
    .social--top { gap: 0; }
    .social--top .social__a { width: 23px; height: 23px; }
    .social--top .social__a svg { width: 15px; height: 15px; }
}
@media (max-width: 820px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot__grid { grid-template-columns: 1fr; gap: 1.5rem; } }

/* --- Print ------------------------------------------------------------- */
@media print {
    .masthead, .foot, .crumbs, .share, .adjacent, .block--tint, .yearjump { display: none; }
    body { font-size: 12pt; color: #000; background: #fff; }
    .prose a::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
}

/* ==========================================================================
   Hero carousel — reukraine.com.ua pattern
   Scroll-snap strip; without JavaScript it stays a swipeable, keyboard
   scrollable list. Arrows and bullets appear only once site.js wires them.
   ========================================================================== */

:root {
    --slide-bar: rgba(12, 30, 58, .70);   /* the navy caption bar */
    --slide-radius: 0;              /* full-bleed: no rounded corners */
}

/* No bottom padding: the tinted hero band starts directly under the
   photograph, and its own opening line closes the slider off. */
.hero-slider { padding: 0; }

/* The picture runs the full width of the window; everything drawn on top of
   it — caption, chevrons, bullets — is pulled back onto the page's own
   column, so the slider reads as part of the layout and not as a banner
   pasted across it. --gutter is that column's left edge, measured from the
   window, and never less than the page's own side padding on a small screen. */
.hero-slider > .shell {
    max-width: none; padding: 0;
    --gutter: max(1.5rem, calc(50% - var(--shell) / 2 + 1.5rem));
}

.slider { position: relative; }

.slider__viewport {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--slide-radius);
}
.slider__viewport::-webkit-scrollbar { display: none; }
.slider__viewport:focus-visible {
    outline: 2px solid var(--focus); outline-offset: 3px;
}

.slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    position: relative;
    border-radius: var(--slide-radius);
    overflow: hidden;
    background: var(--paper-tint);
}

.slide__link { display: block; position: relative; text-decoration: none; color: #fff; }

.slide__img {
    display: block; width: 100%; height: auto;
    /* 16:9 on narrow screens; capped on wide ones so the hero does not
       push the rest of the page below the fold. object-fit crops. */
    aspect-ratio: 16 / 9;
    max-height: 34rem;
    object-fit: cover;
    border-radius: var(--slide-radius);
}

/* Caption block, bottom-left, lifted clear of the lower edge and lined up
   with the page column rather than with the edge of the window. */
.slide__desc { position: absolute; left: var(--gutter, 0); bottom: 0; max-width: min(72%, 46rem); }

.slide__cat {
    display: inline-block;
    background: var(--slide-bar);
    color: #fff;
    font-size: .72rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
    padding: .38rem .8rem .38rem 3.1rem;
    margin-bottom: 2px;
}

.slide__in {
    margin: 0 0 50px;
    padding: 10px 18px 10px 50px;
    background: var(--slide-bar);
    color: #fff;
    font-family: var(--serif);
    font-size: 1.32rem;
    line-height: 1.35;
    font-weight: 500;
    /* Keep the picture visible behind a long headline. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.slide__link:hover .slide__in { background: rgba(12, 30, 58, .86); }

/* Chevrons on the flanks */
.slider__arrow {
    position: absolute; top: 50%; margin-top: -22px;
    width: 27px; height: 44px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: none; border: 0; cursor: pointer; z-index: 10;
    color: #fff;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5));
}
.slider__arrow:hover { color: var(--gold); }
.slider__arrow:disabled { opacity: .35; cursor: auto; pointer-events: none; }
.slider__arrow--prev { left: max(6px, calc(var(--gutter, 10px) - 34px)); }
.slider__arrow--next { right: max(6px, calc(var(--gutter, 10px) - 34px)); }
.slider__arrow[hidden] { display: none; }

/* Bullets, flush right, riding over the lower edge of the image */
/* Lifted out of the flow, like the chevrons already are. In flow the
   bullets' negative top margin shortened the slider by the amount they
   overlapped the photograph, which dragged the closing flag line up inside
   the picture. Pinned to the bottom edge they sit exactly where they did
   and the line lands where the photograph actually ends. */
.slider__dots {
    position: absolute; right: 0; bottom: 16px; z-index: 99;
    text-align: right;
    padding-right: var(--gutter, 12px);
    line-height: 0;
}
.slider__dots[hidden] { display: none; }
.slider__dot {
    width: 8px; height: 8px; padding: 0; margin: 0 4px;
    display: inline-block; border-radius: 100%;
    background: #e6e6e6; border: 0; cursor: pointer;
    /* The bullets ride over the photograph, so they need to hold their
       own against a light or a dark frame. */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
    transition: background-color .15s, transform .15s;
}
.slider__dot:hover { transform: scale(1.35); }
.slider__dot[aria-current="true"] { background: var(--slide-bar); }

@media (max-width: 48rem) {
    .hero-slider { padding: 0; }
    /* A 16:9 strip is too shallow to carry a headline on a phone. */
    .slide__img { aspect-ratio: 4 / 3; max-height: 20rem; }
    .slide__desc { max-width: 100%; }
    .slide__cat { padding-left: 1.1rem; font-size: .66rem; }
    .slide__in {
        margin-bottom: 22px; padding: 8px 12px 8px 1.1rem; font-size: 1rem; line-height: 1.3;
        -webkit-line-clamp: 2; line-clamp: 2;
    }
    .slider__arrow { margin-top: -30px; }
    .slider__dots { bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .slider__dot { transition: none; }
}
/* ==========================================================================
   Bilingual masthead
   ========================================================================== */

.brand__name { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.brand__name-latin { font-weight: 700; font-size: 1.08rem; letter-spacing: -.02em; }
.brand__sep { color: var(--ink-faint); font-weight: 400; }
.brand__name-cyr {
    font-weight: 600; font-size: 1.02rem; letter-spacing: -.01em; color: var(--ink-soft);
}

@media (max-width: 30rem) {
    .brand__name { gap: .3rem; }
    .brand__name-latin { font-size: .98rem; }
    .brand__sep { display: none; }
    .brand__name-cyr { font-size: .78rem; flex-basis: 100%; }
    .brand__tag { display: none; }
}

/* ==========================================================================
   Timeline — every entry now leads somewhere
   ========================================================================== */

.tl__year { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.tl__yearlink {
    font-family: var(--sans); font-size: .78rem; font-weight: 600; letter-spacing: .02em;
    color: var(--ink-faint); text-decoration: none;
}
.tl__yearlink:hover { color: var(--accent); text-decoration: underline; }

.tl__title a { text-decoration: none; color: inherit; }
.tl__title a:hover { color: var(--accent); text-decoration: underline; }

.tl__links { margin: 0; }
.tl__link--soft { color: var(--ink-faint); font-weight: 500; }
.tl__link--soft:hover { color: var(--accent); }

/* ==========================================================================
   Useful links — the band that closes every page
   ========================================================================== */

.uselinks {
    background: var(--paper-tint);
    padding: 2.6rem 1.5rem 2.4rem;
}
.uselinks__h {
    font-family: var(--serif); font-size: 1.35rem; margin: 0 0 .35rem; color: var(--ink);
}
.uselinks__lead {
    margin: 0 0 1.9rem; color: var(--ink-soft); font-size: .92rem; max-width: 62ch;
}

.uselinks__grid {
    display: grid; gap: 1.8rem 2rem;
    grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
}

.uselinks__gh {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700;
    color: var(--ink-faint); margin: 0 0 .7rem; padding-bottom: .45rem;
    border-bottom: 1px solid var(--line);
}

.uselinks__list { list-style: none; margin: 0; padding: 0; }
.uselinks__list li { margin: 0 0 .42rem; }
.uselinks__list a {
    display: block; text-decoration: none; color: inherit;
    border-left: 2px solid transparent; padding-left: .6rem; margin-left: -.6rem;
}
.uselinks__list a:hover { border-left-color: var(--accent); }

.uselinks__label {
    display: block; font-size: .92rem; font-weight: 600; color: var(--accent);
}
.uselinks__list a:hover .uselinks__label { color: var(--accent-ink); text-decoration: underline; }

/* The one-line descriptions are held back by default: printed under every
   link they turn this closing band into a full screen of text on every
   page. They stay in the markup and in the title attribute. To show them,
   change display to block. */
.uselinks__note {
    display: none; font-size: .78rem; line-height: 1.4; color: var(--ink-faint); margin-top: .1rem;
}

@media (max-width: 40rem) {
    .uselinks { padding: 2rem 1.25rem 1.9rem; }
    .uselinks__grid { gap: 1.5rem; }
}

/* ==========================================================================
   Top bar — the language flags
   ========================================================================== */

.topbar {
    background: var(--paper-tint);
    border-bottom: 1px solid var(--line-soft);
}
.topbar__inner {
    display: flex; align-items: center; justify-content: flex-end;
    padding: .3rem 1.5rem;
    min-height: 1.9rem;
}

.langflags { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-left: auto; }

.flag {
    display: inline-flex; line-height: 0;
    border-radius: 3px; overflow: hidden;
    border: 1px solid var(--line);
    opacity: .62;
    transition: opacity .15s, border-color .15s, box-shadow .15s;
}
.flag .flagsvg { display: block; width: 24px; height: 18px; }
.flag:hover { opacity: 1; border-color: var(--gold); }
.flag:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.flag.on { opacity: 1; border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }

@media (max-width: 40rem) {
    .topbar__inner { padding: .28rem 1.25rem; }
    .flag .flagsvg { width: 21px; height: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .flag { transition: none; }
}

/* ==========================================================================
   The author page
   ========================================================================== */

/* Portrait beside the text; the text takes whatever the shell has left, so
   this page lines up with the articles rather than sitting in its own column. */
.who { display: grid; gap: 3rem; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
       align-items: start; }
.who__portrait { margin: 0; }
.who__portrait img {
    display: block; width: 100%; height: auto; border-radius: var(--radius);
    border: 1px solid var(--line); box-shadow: var(--shadow);
}
.who__body { min-width: 0; }

/* No portrait uploaded yet: the text must not be squeezed into the column
   the picture would have taken — it spans both. */
.who__body:only-child { grid-column: 1 / -1; }
.who__more { display: flex; gap: .7rem; flex-wrap: wrap; margin: 1.8rem 0 0; }

@media (max-width: 62rem) {
    .who { grid-template-columns: 1fr; gap: 1.6rem; }
    .who__portrait { max-width: 13rem; }
}

/* ==========================================================================
   The three periods on the war page
   ========================================================================== */

.periods { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.periods__item {
    border-left: 3px solid var(--gold); padding: .2rem 0 .2rem 1.1rem;
}
.periods__link {
    display: flex; align-items: baseline; gap: .7rem; text-decoration: none; color: inherit;
}
.periods__name { font-family: var(--serif); font-size: 1.24rem; font-weight: 500; color: var(--accent); }
.periods__link:hover .periods__name { color: var(--accent-ink); text-decoration: underline; }
.periods__n {
    font-size: .76rem; color: var(--ink-faint); background: var(--paper);
    border: 1px solid var(--line); border-radius: 999px; padding: .05rem .5rem;
}
.periods__desc { margin: .3rem 0 0; color: var(--ink-soft); font-size: .93rem; max-width: 70ch; }
.periods__note {
    margin: 1.6rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line);
    font-size: .88rem; color: var(--ink-faint); max-width: 74ch;
}

/* ==========================================================================
   Reading paths — /start and /start/<slug>
   A path is an ordering, so it is numbered on the page as well as in the
   markup: the reader should be able to see where they are in it.
   ========================================================================== */

.paths { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.path { display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; align-items: start; }
.path__n {
    font-family: var(--serif); font-size: 1.5rem; line-height: 1; color: var(--gold);
    border-top: 3px solid var(--gold); padding-top: .55rem;
}
.path__body { display: flex; flex-direction: column; gap: .4rem; }
.path__title { margin: 0; font-family: var(--serif); font-size: 1.3rem; line-height: 1.3; }
.path__title a { color: inherit; text-decoration: none; }
.path__title a:hover { color: var(--accent); text-decoration: underline; }
.path__intro { margin: 0; color: var(--ink-soft); max-width: 74ch; }
.path__meta { margin: 0; font-size: .8rem; color: var(--ink-faint); }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.3rem; counter-reset: step; }
.step {
    border-left: 3px solid var(--line); padding: .1rem 0 .1rem 1.2rem;
    transition: border-color .2s ease;
}
.step:hover { border-left-color: var(--gold); }
.step__n {
    margin: 0 0 .2rem; font-size: .74rem; letter-spacing: .09em; text-transform: uppercase;
    color: var(--ink-faint);
}
.step__title { margin: 0; font-family: var(--serif); font-size: 1.18rem; line-height: 1.32; }
.step__title a { color: inherit; text-decoration: none; }
.step__title a:hover { color: var(--accent); text-decoration: underline; }
.step__excerpt { margin: .35rem 0 0; color: var(--ink-soft); font-size: .95rem; max-width: 76ch; }
.step__meta { margin: .35rem 0 0; font-size: .8rem; color: var(--ink-faint); display: flex; gap: .4rem; flex-wrap: wrap; }

@media (max-width: 34rem) {
    .path { grid-template-columns: 1fr; gap: .3rem; }
    .path__n { border-top: 0; padding-top: 0; font-size: 1.15rem; }
}

/* ==========================================================================
   Guides — the compiled, printable documents
   ========================================================================== */

/* Every guide card is the same ruled panel whether or not a photograph was
   found for it, so one guide without artwork does not leave a hole in the
   row. Where there is a picture it runs to the panel edge, pulled out of
   the padding rather than floated above it. */
.card--guide {
    border: 1px solid var(--line); border-top: 3px solid var(--gold);
    background: var(--paper); padding: 1.4rem 1.3rem; gap: .5rem;
}
.card--guide .card__media {
    margin: -1.4rem -1.3rem .9rem; aspect-ratio: 16 / 9;
}
.card--guide .card__title { font-family: var(--serif); font-size: 1.2rem; }
.card--guide .card__meta { margin-top: auto; padding-top: .6rem; }

.guide__actions { margin: 1.1rem 0 0; }
.guide__intro { margin-bottom: 2rem; }

.guide__toc {
    border: 1px solid var(--line); background: var(--paper-tint);
    padding: 1.3rem 1.5rem; margin: 0 0 2.6rem;
}
.guide__toc .block__h { margin-top: 0; }
.guide__toc ol { margin: 0; padding-left: 1.3rem; display: grid; gap: .4rem; }
.guide__toc a { color: var(--accent); text-decoration: none; }
.guide__toc a:hover { text-decoration: underline; }

.guide__section { padding-top: 2.2rem; border-top: 1px solid var(--line-soft); margin-top: 2.2rem; }
.guide__section:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.guide__section-title {
    display: flex; align-items: baseline; gap: .8rem;
    font-family: var(--serif); font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.25;
    margin: 0 0 1rem;
}
.guide__section-n {
    flex: 0 0 auto; font-size: .82rem; color: var(--gold);
    border: 1px solid var(--gold); border-radius: 999px;
    width: 1.9rem; height: 1.9rem; display: inline-flex; align-items: center; justify-content: center;
}
.guide__source {
    margin: 1.2rem 0 0; font-size: .84rem; color: var(--ink-faint);
    border-left: 2px solid var(--line); padding-left: .8rem;
}
.guide__source a { color: var(--ink-faint); }

/* ==========================================================================
   Newsletter — the inline band and the page form
   ========================================================================== */

.news__inner { max-width: var(--shell); margin: 0 auto; padding: 2.6rem 1.5rem; }
.news__title { margin: 0; font-family: var(--serif); font-size: clamp(1.3rem, 2.6vw, 1.75rem); }
.news__lead { margin: .5rem 0 1.2rem; color: var(--ink-soft); max-width: 62ch; }
.news__form { margin: 0; }
/* The honeypot: off-screen rather than display:none, which some bots skip. */
.news__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.news__label {
    display: block; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-faint); margin-bottom: .4rem;
}
.news__row { display: flex; gap: .6rem; flex-wrap: wrap; max-width: 34rem; }
.news__input {
    flex: 1 1 16rem; min-width: 0; font: inherit; color: inherit;
    background: var(--paper); border: 1px solid var(--line); border-radius: 2px;
    padding: .62rem .8rem;
}
.news__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.news__consent { margin: .8rem 0 0; font-size: .8rem; color: var(--ink-faint); max-width: 62ch; }
.news__form--page { margin-top: .5rem; }

.formnote {
    margin: 0 0 1.4rem; padding: .8rem 1rem; border-left: 3px solid var(--line);
    background: var(--paper-tint); font-size: .95rem;
}
.formnote--ok    { border-left-color: #2e7d4f; }
.formnote--error { border-left-color: #b3402f; }

/* ==========================================================================
   Newsletter call in the top bar
   ========================================================================== */


/* ==========================================================================
   Print — a guide is meant to leave the screen
   ========================================================================== */

@media print {
    .no-print, .news, .paths, .nav { display: none !important; }
    .guide__toc { border: 0; background: none; padding: 0; }
    .guide__section { break-inside: auto; page-break-before: auto; }
    .guide__section-title { break-after: avoid; page-break-after: avoid; }
    .guide__section-n { border-color: #999; color: #333; }
    .guide__source { color: #444; }
    .guide__source a::after { content: none; }
}

/* ==========================================================================
   Where this piece was collected
   Sits between the article and the previous/next pair, so a reader arriving
   from a search result learns the piece is part of an order before they are
   offered somewhere else to go.
   ========================================================================== */

.collected {
    margin: 2.4rem 0 0; padding: 1.1rem 1.3rem;
    border: 1px solid var(--line); border-left: 3px solid var(--gold);
    background: var(--paper-tint);
}
.collected__label {
    margin: 0 0 .55rem; font-size: .74rem; letter-spacing: .09em;
    text-transform: uppercase; color: var(--ink-faint);
}
.collected__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.collected__list a { font-family: var(--serif); font-size: 1.02rem; color: var(--accent); text-decoration: none; }
.collected__list a:hover { text-decoration: underline; }
.collected__kind { font-size: .78rem; color: var(--ink-faint); margin-left: .5rem; }

@media print { .collected { display: none; } }

/* Section lead under a block heading — the hub runs two blocks that each
   need a line of their own before the list starts. */
.block__lead {
    margin: -.4rem 0 1.6rem; color: var(--ink-soft); max-width: 74ch;
}

/* ==========================================================================
   The hub directory on /guides
   Each collection is a framed head in the shape of a menu item, with what it
   contains listed straight underneath. Two columns where there is room, so a
   page holding eight collections and seventy pieces stays one screen deep
   rather than four.
   ========================================================================== */

.hub { display: grid; gap: 1.8rem 2.2rem; grid-template-columns: repeat(2, 1fr); }
.hub__group { min-width: 0; }

.hub__head { margin: 0; font-size: 1rem; }
.hub__head > a {
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .42rem .8rem;
    color: var(--accent); text-decoration: none;
    border: 1px solid var(--accent); border-radius: 7px;
    background: var(--paper);
    transition: color .15s, border-color .15s, background-color .15s;
}
.hub__head > a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.hub__name { font-family: var(--serif); font-weight: 500; }

/* The number is the square: same box as the thumbnail on a guide, so the
   two kinds of head line up with each other down the column. */
.hub__n {
    flex: none; width: 1.6rem; height: 1.6rem; border-radius: 4px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--gold); color: #1b1300; font-size: .82rem; font-weight: 700;
}
.hub__thumb { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 4px; object-fit: cover; }

.hub__meta { margin: .5rem 0 .35rem; font-size: .78rem; color: var(--ink-faint); }

.hub__items {
    margin: 0; padding-left: 1.35rem; display: grid; gap: .28rem;
    font-size: .93rem;
}
.hub__items li::marker { color: var(--ink-faint); font-size: .82rem; }
.hub__items a { color: var(--ink-soft); text-decoration: none; }
.hub__items a:hover { color: var(--accent); text-decoration: underline; }

@media (max-width: 52rem) {
    .hub { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ==========================================================================
   Comments
   The block closes every page that is a page. Nothing here is visible until
   it has been approved, so what a reader sees is either a conversation or an
   invitation to start one.
   ========================================================================== */

.comments { border-top: 1px solid var(--line); padding-top: 2.2rem; }
.comments__list { list-style: none; margin: 0 0 2.4rem; padding: 0; display: grid; gap: 1.4rem; }
.comment {
    border-left: 3px solid var(--line); padding: .1rem 0 .1rem 1.1rem; max-width: 74ch;
}
.comment__meta { margin: 0 0 .3rem; font-size: .8rem; color: var(--ink-faint); display: flex; gap: .45rem; flex-wrap: wrap; }
.comment__author { font-weight: 700; color: var(--ink-soft); }
.comment__body { margin: 0; color: var(--ink-soft); }

.comments__form { max-width: 46rem; }
.comments__lead { margin: 0 0 1.1rem; color: var(--ink-soft); }
.comments__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }

.field { margin: 0 0 1rem; }
.field__label {
    display: block; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-faint); margin-bottom: .35rem;
}
.field__hint { text-transform: none; letter-spacing: 0; font-size: .76rem; }
.field__input {
    width: 100%; font: inherit; color: inherit; background: var(--paper);
    border: 1px solid var(--line); border-radius: 3px; padding: .6rem .75rem;
}
.field__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.field__input--short { max-width: 8rem; }
/* The sum sits apart from the message: it is a gate, not another field of */
/* the comment. */
.field--sum { border-top: 1px solid var(--line-soft); padding-top: 1rem; }

.comments__actions { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin: 0; }
.comments__note { font-size: .82rem; color: var(--ink-faint); }

@media (max-width: 40rem) {
    .comments__grid { grid-template-columns: 1fr; }
}
@media print { .comments { display: none; } }

/* ==========================================================================
   Beyond Ukraine
   ========================================================================== */

/* The map is inlined so the visited countries can be painted by CSS. Land
   sits a shade off the page ground; the marked countries take the flag blue. */
.worldmap { background: var(--paper-tint); padding: 1.6rem 0 1.2rem; position: relative; }
.worldmap__frame { max-width: 62rem; margin: 0 auto; }
.worldmap svg { width: 100%; height: auto; display: block; }
.worldmap svg path { fill: var(--line); stroke: var(--paper-tint); stroke-width: .4; transition: fill .2s; }
.worldmap__note { margin: .7rem 0 0; font-size: .74rem; color: var(--ink-faint); text-align: center; }

/* Three numbers, evenly spaced, nothing else. */
.tally {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 1rem 2.6rem; justify-content: center;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    padding: 1.2rem 0;
}
.tally li { text-align: center; }
.tally strong {
    display: block; font-family: var(--serif); font-size: clamp(1.6rem, 3.4vw, 2.3rem);
    line-height: 1; color: var(--accent);
}
.tally span { font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); }

.country__since { margin: .4rem 0 0; font-size: .82rem; color: var(--ink-faint); }

/* The personal timeline: the year is the anchor, the entry hangs off it. */
.miles { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.mile { display: grid; grid-template-columns: 5rem 1fr; gap: 1.2rem; align-items: start; }
.mile__year {
    margin: 0; font-family: var(--serif); font-size: 1.3rem; line-height: 1.1;
    color: var(--gold); border-top: 3px solid var(--gold); padding-top: .5rem;
}
.mile__body { min-width: 0; }
.mile__title { margin: 0; font-family: var(--serif); font-size: 1.16rem; line-height: 1.32; }
.mile__text { margin: .35rem 0 0; color: var(--ink-soft); max-width: 74ch; }
.mile__where { margin: .35rem 0 0; font-size: .82rem; }
.mile__where a { color: var(--ink-faint); }
.miles--compact .mile { gap: 1rem; }

/* Entries: a story, a note on business, an observation. */
.gposts { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; }
.gpost { display: grid; gap: 1rem; }
.gpost__img { width: 100%; border-radius: 3px; }
.gpost__meta { margin: 0 0 .3rem; font-size: .78rem; color: var(--ink-faint); display: flex; gap: .4rem; flex-wrap: wrap; }
.gpost__kind { letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.gpost__title { margin: 0; font-family: var(--serif); font-size: 1.25rem; line-height: 1.3; }
.gpost__text { margin-top: .5rem; }

@media (max-width: 34rem) {
    .mile { grid-template-columns: 1fr; gap: .3rem; }
    .mile__year { border-top: 0; padding-top: 0; font-size: 1.1rem; }
    .tally { gap: .8rem 1.6rem; }
}
@media print { .worldmap { display: none; } }

/* The countries with nothing written about them yet: names, grouped by
   continent. A card each would promise a page that is not there. */
.morec__h {
    margin: 1.4rem 0 .5rem; font-size: .95rem; letter-spacing: .04em;
    text-transform: uppercase; color: var(--muted);
}
.morec {
    display: flex; flex-wrap: wrap; gap: .4rem .55rem;
    list-style: none; margin: 0; padding: 0;
}
.morec li {
    border: 1px solid var(--line); border-radius: 999px;
    padding: .28rem .7rem; font-size: .92rem;
}