/* ---------------------------------------------------------------------
   Self-hosted fonts — interface (Google Sans) and data (Iosevka Charon
   Mono) roles. Both cover Armenian, Cyrillic and Latin natively in one
   family (verified against Google Fonts' subset metadata — see the design
   report), so neither needs a fallback family for any of the three scripts
   this site actually renders. The display/serif role (Noto Serif + Noto
   Serif Armenian) is loaded via next/font/google in app/layout.tsx instead,
   since that pair is in Next's bundled catalog.

   Files fetched from Google Fonts once and vendored under public/fonts/ —
   see .superpowers/sdd/2026-08-17-dotnet-core-and-admin/design-report.md.
   ------------------------------------------------------------------- */

@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/google-sans/google-sans-400-normal-armenian.woff2') format('woff2');
  unicode-range: U+0308, U+0530-058F, U+2010, U+2024, U+25CC, U+FB13-FB17;
}
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/google-sans/google-sans-400-normal-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/google-sans/google-sans-400-normal-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/google-sans/google-sans-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/google-sans/google-sans-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/google-sans/google-sans-500-normal-armenian.woff2') format('woff2');
  unicode-range: U+0308, U+0530-058F, U+2010, U+2024, U+25CC, U+FB13-FB17;
}
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/google-sans/google-sans-500-normal-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/google-sans/google-sans-500-normal-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/google-sans/google-sans-500-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/google-sans/google-sans-500-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/google-sans/google-sans-600-normal-armenian.woff2') format('woff2');
  unicode-range: U+0308, U+0530-058F, U+2010, U+2024, U+25CC, U+FB13-FB17;
}
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/google-sans/google-sans-600-normal-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/google-sans/google-sans-600-normal-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/google-sans/google-sans-600-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/google-sans/google-sans-600-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Iosevka Charon Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/iosevka-charon-mono/iosevka-charon-mono-400-normal-armenian.woff2') format('woff2');
  unicode-range: U+0308, U+0530-058F, U+2010, U+2024, U+25CC, U+FB13-FB17;
}
@font-face {
  font-family: 'Iosevka Charon Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/iosevka-charon-mono/iosevka-charon-mono-400-normal-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Iosevka Charon Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/iosevka-charon-mono/iosevka-charon-mono-400-normal-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Iosevka Charon Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/iosevka-charon-mono/iosevka-charon-mono-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Iosevka Charon Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/iosevka-charon-mono/iosevka-charon-mono-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Iosevka Charon Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/iosevka-charon-mono/iosevka-charon-mono-500-normal-armenian.woff2') format('woff2');
  unicode-range: U+0308, U+0530-058F, U+2010, U+2024, U+25CC, U+FB13-FB17;
}
@font-face {
  font-family: 'Iosevka Charon Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/iosevka-charon-mono/iosevka-charon-mono-500-normal-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Iosevka Charon Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/iosevka-charon-mono/iosevka-charon-mono-500-normal-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Iosevka Charon Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/iosevka-charon-mono/iosevka-charon-mono-500-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Iosevka Charon Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/iosevka-charon-mono/iosevka-charon-mono-500-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------------
   Design tokens

   The palette is The Guardian's, measured off theguardian.com/world on
   2026-08-26 rather than eyeballed: page #ffffff, ink #121212, hairline
   #dcdcdc at 1px, section rule #333333 at 2px, masthead #052962, the
   dividers inside that band #506991, muted text #707070, and the one
   accent #ffe500. Those numbers are the whole look; everything below is
   arithmetic on them.

   Two deliberate departures.

   The six bloc colors stay. They're a classification code — reused verbatim
   from the admin (Caucasus.Infrastructure SeedData) — and they do here what
   section colors do on the Guardian: mark which country is speaking. They
   are identical in both themes on purpose, because a code doesn't get a
   "dark mode adjustment".

   Interaction stays teal, not navy. The Guardian's links are its brand blue,
   but our blue is already spoken for: #4a90d9 means Azerbaijan on every card
   on this site. A blue link beside a blue bloc dot would be asking the reader
   to tell two blues apart for meaning. Teal collides with nothing.

   Light is the Guardian's own. Dark is not an inversion of it — the Guardian
   runs a near-black #121212 with #393939 rules, and that is what dark takes.
   ------------------------------------------------------------------- */

:root {
  --paper: #ffffff;
  --paper-raised: #ffffff;
  --paper-sunken: #f6f6f6;
  --ink: #121212;
  --ink-soft: #707070;
  --ink-faint: #999999;
  --rule: #dcdcdc;

  /* The 2px rule that opens a section. The Guardian sets it darker than the
     hairline by a wide margin — that contrast is what makes a page of rules
     read as a hierarchy instead of a grid. */
  --rule-strong: #333333;

  --accent: #1f7a6c;
  --accent-soft: #dcefec;
  --on-bloc: #1a1712;

  /* The masthead band and its own furniture. --navy-rule is the divider that
     works on navy; --rule at #dcdcdc would glare there. */
  --navy: #052962;
  --navy-ink: #ffffff;
  --navy-soft: #c1d8fc;
  --navy-rule: #506991;

  /* The single accent, used the way the Guardian uses it: one button, never
     as a surface. On navy it carries navy text, not white. */
  --highlight: #ffe500;
  --on-highlight: #052962;

  --bloc-am: #e8746a;
  --bloc-az: #4a90d9;
  --bloc-ru: #8b7bc7;
  --bloc-ge: #6baf7a;
  --bloc-tr: #e0a44c;
  --bloc-intl: #9aa0a6;

  /* Display/serif: publication headlines, quoted verbatim from the press.
     Noto Serif carries Latin, Cyrillic and Armenian; Noto's Georgian sibling
     sits behind it. The Guardian's own headline face is an Egyptian slab and
     proprietary — a slab substitute would cover Latin and Cyrillic and leave
     Armenian and Georgian to fall through to something else, so a headline in
     Yerevan would be set in a different face from the same headline in Moscow.
     Noto stays. What is taken from the Guardian instead is its metrics:
     weight 500 and a 1.15 line-height, which is most of what that masthead
     reads like.
     Interface/grotesque: Google Sans, self-hosted (wwwroot/fonts).
     Data/mono: Iosevka Charon Mono, self-hosted.
     Ordering matters — each family is listed before the generic it would
     otherwise fall through to, and Georgian last because it only ever claims
     codepoints the earlier families do not cover. */
  --font-display: var(--font-noto-serif), var(--font-noto-serif-armenian),
    var(--font-noto-serif-georgian), Georgia, serif;
  --font-ui: 'Google Sans', var(--font-noto-sans-georgian), system-ui,
    -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Iosevka Charon Mono', ui-monospace, 'Cascadia Code', Menlo,
    Consolas, monospace;

  --content-width: 44rem;

  /* The Guardian measures 1300px, and that width carries a multi-column front
     page. Ours carries one column of chorus plus the day gutter beside it —
     8rem + 2rem + 44rem — and 1088px is what that actually needs. Measured at
     1920: with 1300 the band ran 396px past the last line of text, which reads
     as a page that failed to finish loading rather than as a margin. */
  --shell-width: 68rem;

  /* The margin the day labels hang in — the Guardian's own arrangement, where
     the section name sits outside the text column rather than above it. */
  --gutter-width: 8rem;
  --gutter-gap: 2rem;

  /* Nothing in the content is rounded. The names are kept so the rest of the
     sheet does not have to be rewritten to say zero. Buttons opt back in with
     --radius-pill, which is the one round thing on that site. */
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-pill: 999px;

  color-scheme: light;
}

:root[data-theme='dark'] {
  --paper: #121212;
  --paper-raised: #1a1a1a;
  --paper-sunken: #1a1a1a;
  --ink: #f6f6f6;
  --ink-soft: #9e9e9e;
  --ink-faint: #767676;
  --rule: #393939;
  --rule-strong: #767676;

  --accent: #5fcdbb;
  --accent-soft: #23433d;
  --on-bloc: #1a1712;

  /* The band darkens rather than staying brand-blue: at #052962 against a
     #121212 page it stops reading as a masthead and starts reading as a
     stray blue box. */
  --navy: #041c44;
  --navy-ink: #ffffff;
  --navy-soft: #a8c3ea;
  --navy-rule: #2b4470;

  --highlight: #ffe500;
  --on-highlight: #052962;

  color-scheme: dark;
}

/* ---------------------------------------------------------------------
   Reset & base
   ------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light dark;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 0.2s ease, color 0.2s ease;
}

h1,
h2,
h3 {
  font-family: var(--font-ui);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 0.5em;
  color: var(--ink);
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  display: block;
}

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 100;
  background: var(--accent);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------
   Layout shell
   ------------------------------------------------------------------- */

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.shell {
  max-width: var(--shell-width);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.site-main {
  /* .shell's margin-inline: auto is a cross-axis auto margin on this flex
     item (page is a column flex container), which makes flexbox skip
     stretch sizing and shrink-to-fit the content instead — on a narrow
     viewport that let the grid below claim more columns than the viewport
     has room for and overflow horizontally. An explicit width leaves no
     space for the auto margins to absorb, so stretch-to-viewport (then
     max-width) applies as intended. */
  width: 100%;
  flex: 1 0 auto;
  padding-block: clamp(1.5rem, 4vw, 3rem);
}

/* Название страницы. У Guardian это антиква в полный кегль над линейкой в
   2px, а не служебная подпись прописными вразрядку: раздел объявляется
   именем, как в газете, а не помечается ярлыком, как в приборной панели. */
.page-heading {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-transform: none;
  color: var(--ink);
  margin: 0 0 0.5rem;
}

/* ---------------------------------------------------------------------
   Header

   The Guardian's masthead is one navy band carrying everything — wordmark,
   sections, and a single yellow button — with the section colours as a strip
   along its bottom edge. That last part we already had: the spectrum bar was
   sitting under a white header doing nothing in particular, and against navy
   it becomes what it is on that site, the seam between the band and the page.
   ------------------------------------------------------------------- */

.site-header {
  background: var(--navy);
  color: var(--navy-ink);
}

.site-header__inner {
  padding-block: clamp(1rem, 2.5vw, 1.6rem) clamp(0.75rem, 2vw, 1.1rem);
}

.site-header__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* The Guardian sets its masthead far larger than anything else on the page and
   lets it run to the right edge. Ours is a sentence rather than a word, so it
   takes the left and keeps the same weight-500 serif the headlines use. */
.site-header__wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.7rem, 1.1rem + 2.4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--navy-ink);
  text-decoration: none;
}

.site-header__wordmark:hover {
  color: var(--navy-ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.site-header__tagline {
  margin: 0.45rem 0 0;
  max-width: var(--content-width);
  color: var(--navy-soft);
  font-size: 0.95rem;
  line-height: 1.45;
}

/* The one loud thing, and the Guardian's own shape for it: yellow, pill,
   navy text, sans at 700. There it says "Support us". Here it points at the
   methodology, which is the action this site actually wants from a sceptical
   reader — every page asserts that these reports are one event and that some
   bloc said nothing, and this is where those two claims are answered. */
.site-header__check {
  display: inline-flex;
  align-items: center;
  flex: none;
  background: var(--highlight);
  color: var(--on-highlight);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  padding: 0.35em 0.95em 0.4em;
  border-radius: var(--radius-pill);
}

.site-header__check:hover {
  color: var(--on-highlight);
  text-decoration: underline;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: none;
}

/* The language switcher: a row of links, not a menu.

   Six short labels are about thirty characters and fit one line at desktop
   width. On a phone they wrap under the site name, which is the cheaper
   failure: a dropdown would hide five of six behind a click and make the
   current language the only visible one. flex-wrap is therefore load-bearing
   rather than defensive.

   It sits inside .site-header__actions, on the navy masthead, so its colours
   are the masthead's own: --navy-soft resting and --navy-ink current, the same
   pair .site-header__tagline and .site-header__wordmark already use. --ink and
   --accent are the page's colours and would be all but invisible here. */
.lang-switcher {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  line-height: 1.2;
}

.lang-switcher__link,
.lang-switcher__current {
  padding: 0.1em 0.2em;
  white-space: nowrap;
}

.lang-switcher__link {
  color: var(--navy-soft);
  text-decoration: none;
}

.lang-switcher__link:hover,
.lang-switcher__link:focus-visible {
  color: var(--navy-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The current language is a span, not a link, so it is announced as the page
   the reader is on rather than as somewhere to go. */
.lang-switcher__current {
  color: var(--navy-ink);
  font-weight: 700;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  flex: none;
  background: transparent;
  color: var(--navy-ink);
  border: 1px solid var(--navy-rule);
  border-radius: var(--radius-pill);
  padding: 0.35em 0.9em 0.4em 0.75em;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.theme-toggle:hover {
  border-color: var(--navy-ink);
  color: var(--navy-ink);
}

.theme-toggle svg {
  flex: none;
}

@media (max-width: 30rem) {
  .theme-toggle__label {
    display: none;
  }
  .theme-toggle {
    padding: 0.45em;
  }
}


/* Section navigation — "Все" plus the six blocs.

   Chips became a link row, which is what a masthead nav is on the Guardian:
   items divided by hairlines in --navy-rule, and the current one carrying a
   4px underline in its own section colour. The chips were doing that job with
   a pill and a background, which reads as a control; a newspaper's sections
   read as a row of names.

   The underline colour is picked off the dot inside the link with :has(),
   rather than by putting the bloc code on the link as well. One element owns
   the classification, and the rest of the sheet reads it. */
.site-nav {
  margin: 0.9rem 0 0;
}

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--navy-rule);
}

.site-nav__list > li {
  border-right: 1px solid var(--navy-rule);
}

.site-nav__list > li:last-child {
  border-right: none;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5rem 0.85rem 0.45rem;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--navy-ink);
  text-decoration: none;
  border-bottom: 4px solid transparent;
}

.site-nav__link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-nav__link[aria-current='page'] {
  font-weight: 700;
  border-bottom-color: var(--navy-ink);
}

.site-nav__link[aria-current='page']:has(.site-nav__dot[data-bloc='AM']) {
  border-bottom-color: var(--bloc-am);
}
.site-nav__link[aria-current='page']:has(.site-nav__dot[data-bloc='AZ']) {
  border-bottom-color: var(--bloc-az);
}
.site-nav__link[aria-current='page']:has(.site-nav__dot[data-bloc='RU']) {
  border-bottom-color: var(--bloc-ru);
}
.site-nav__link[aria-current='page']:has(.site-nav__dot[data-bloc='GE']) {
  border-bottom-color: var(--bloc-ge);
}
.site-nav__link[aria-current='page']:has(.site-nav__dot[data-bloc='TR']) {
  border-bottom-color: var(--bloc-tr);
}
.site-nav__link[aria-current='page']:has(.site-nav__dot[data-bloc='INTL']) {
  border-bottom-color: var(--bloc-intl);
}

.site-nav__dot {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  flex: none;
}

.site-nav__dot[data-bloc='AM'] {
  background: var(--bloc-am);
}
.site-nav__dot[data-bloc='AZ'] {
  background: var(--bloc-az);
}
.site-nav__dot[data-bloc='RU'] {
  background: var(--bloc-ru);
}
.site-nav__dot[data-bloc='GE'] {
  background: var(--bloc-ge);
}
.site-nav__dot[data-bloc='TR'] {
  background: var(--bloc-tr);
}
.site-nav__dot[data-bloc='INTL'] {
  background: var(--bloc-intl);
}

/* "Разночтения" isn't a bloc — it's an event (two+ blocs agreeing), so its
   dot takes the site's accent colour rather than a seventh bloc colour. The
   nav no longer carries that link (it moved to the front page), but the rule
   stays with its siblings rather than being orphaned somewhere else. */
.site-nav__dot--cross {
  background: var(--accent);
}

/* The six-colour strip. It used to sit under a white header as one quiet mark;
   against the navy band it does what the section colours do on the Guardian —
   it is the seam between the masthead and the page. */
.spectrum-bar {
  display: flex;
  height: 4px;
}

.spectrum-bar li {
  flex: 1;
}

.spectrum-bar li[data-bloc='AM'] {
  background: var(--bloc-am);
}
.spectrum-bar li[data-bloc='AZ'] {
  background: var(--bloc-az);
}
.spectrum-bar li[data-bloc='RU'] {
  background: var(--bloc-ru);
}
.spectrum-bar li[data-bloc='GE'] {
  background: var(--bloc-ge);
}
.spectrum-bar li[data-bloc='TR'] {
  background: var(--bloc-tr);
}
.spectrum-bar li[data-bloc='INTL'] {
  background: var(--bloc-intl);
}

/* ---------------------------------------------------------------------
   Footer

   Navy, like the masthead — the Guardian closes the page on the same band it
   opened it with, and the two together are most of why that site reads as one
   object rather than a column of content with furniture at either end.
   ------------------------------------------------------------------- */

.site-footer {
  background: var(--navy);
  color: var(--navy-ink);
  border-top: none;
}

.site-footer__inner {
  padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
}

.site-footer__notice {
  margin: 0;
  max-width: var(--content-width);
  color: var(--navy-soft);
  font-size: 0.9rem;
}

.site-footer__links a {
  color: var(--navy-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bloc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
}

.bloc-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  letter-spacing: 0.01em;
  color: var(--navy-soft);
  white-space: nowrap;
}

.bloc-legend__dot {
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  flex: none;
}

.bloc-legend__item[data-bloc='AM'] .bloc-legend__dot {
  background: var(--bloc-am);
}
.bloc-legend__item[data-bloc='AZ'] .bloc-legend__dot {
  background: var(--bloc-az);
}
.bloc-legend__item[data-bloc='RU'] .bloc-legend__dot {
  background: var(--bloc-ru);
}
.bloc-legend__item[data-bloc='GE'] .bloc-legend__dot {
  background: var(--bloc-ge);
}
.bloc-legend__item[data-bloc='TR'] .bloc-legend__dot {
  background: var(--bloc-tr);
}
.bloc-legend__item[data-bloc='INTL'] .bloc-legend__dot {
  background: var(--bloc-intl);
}

/* ---------------------------------------------------------------------
   Story list (front page)

   A responsive card grid rather than a single reading column — with up to
   50 cards and most carrying no photo, the coverage meter (not a photo)
   is what needs the room to read clearly at a glance.
   ------------------------------------------------------------------- */

.story-list__standfirst {
  max-width: var(--content-width);
  margin: 0 0 1.75rem;
  color: var(--ink-soft);
}

.story-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: clamp(0.9rem, 2vw, 1.25rem);
  max-width: 68rem;
}

.story-card {
  display: flex;
}

.story-card__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  color: inherit;
  text-decoration: none;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.story-card__link:hover {
  border-color: var(--accent);
  box-shadow: 0 6px 20px -12px rgb(0 0 0 / 0.35);
}

@media (prefers-reduced-motion: no-preference) {
  .story-card__link:hover {
    transform: translateY(-2px);
  }
}

.story-card__image-frame {
  aspect-ratio: 16 / 8;
  background: var(--paper-sunken);
  overflow: hidden;
}

.story-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-card__body {
  padding: clamp(1rem, 3vw, 1.3rem);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.story-card__title {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 0.5em;
}

.story-card__meta {
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  margin: 0 0 1rem;
}

/* ---------------------------------------------------------------------
   Story detail page
   ------------------------------------------------------------------- */

article {
  max-width: var(--content-width);
  margin-inline: auto;
}

.story-detail__back {
  display: inline-block;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
}

.story-detail__image-frame {
  aspect-ratio: 16 / 7;
  background: var(--paper-sunken);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 1.75rem;
}

.story-detail__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

article h1 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.3rem + 1.3vw, 2.25rem);
  font-weight: 600;
  line-height: 1.3;
}

.story-detail__meta {
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  margin: 0 0 2rem;
}

.story-detail__eyebrow {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.85rem;
}

.story-coverage {
  margin: 0 0 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--rule);
}

.bloc-group {
  margin: 0 0 2.25rem;
}

.bloc-group:last-child {
  margin-bottom: 0;
}

.bloc-group__heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.6em;
  margin-bottom: 1rem;
  font-family: var(--font-ui);
  font-size: 1.15rem;
}

.bloc-group__dot {
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  flex: none;
}

.bloc-group[data-bloc='AM'] .bloc-group__dot {
  background: var(--bloc-am);
}
.bloc-group[data-bloc='AZ'] .bloc-group__dot {
  background: var(--bloc-az);
}
.bloc-group[data-bloc='RU'] .bloc-group__dot {
  background: var(--bloc-ru);
}
.bloc-group[data-bloc='GE'] .bloc-group__dot {
  background: var(--bloc-ge);
}
.bloc-group[data-bloc='TR'] .bloc-group__dot {
  background: var(--bloc-tr);
}
.bloc-group[data-bloc='INTL'] .bloc-group__dot {
  background: var(--bloc-intl);
}

.bloc-group__count {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--ink-soft);
}

/* A silent bloc gets a placeholder, not a skipped section — the same
   "absence is content" idea as the empty meter tile, spelled out here in a
   full sentence since this is where a reader lands after clicking through. */
.bloc-group--silent .bloc-group__dot {
  background: transparent;
  border: 1.5px dashed var(--ink-faint);
}

.bloc-group--silent .bloc-group__heading {
  color: var(--ink-soft);
}

.bloc-group__silent-note {
  margin: 0;
  padding: 0.9rem 1.1rem;
  border: 1.5px dashed var(--rule);
  border-radius: var(--radius-md);
  background: var(--paper-sunken);
  color: var(--ink-soft);
  font-size: 0.9rem;
  max-width: 38rem;
}

.doc-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.doc-card {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: clamp(1rem, 3vw, 1.4rem) clamp(1.1rem, 3vw, 1.6rem);
}

.doc-card__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.45;
  margin: 0 0 0.6em;
}

.doc-card__title a {
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(var(--ink) 0 0);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
}

.doc-card__title a:hover {
  color: var(--accent);
  background-image: linear-gradient(var(--accent) 0 0);
}

.doc-card__external {
  display: inline-block;
  margin-left: 0.3em;
  color: var(--ink-soft);
  font-size: 0.8em;
}

/* Mixed-script metadata (source name, language, timestamp) laid out as a
   wrapping run rather than a fixed grid, so an Armenian source name next
   to a Latin timestamp never gets clipped or misaligned. */
.doc-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
  margin: 0 0 0.85rem;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.doc-card__origin,
.doc-card__official,
.doc-card__lag {
  display: inline-flex;
  align-items: center;
  padding: 0.15em 0.6em;
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

.doc-card__origin {
  background: var(--accent-soft);
  color: var(--accent);
}

/* Word, not an icon (a reader can't decode an icon's meaning at a glance) —
   an outline rather than a fill, so it sits noticeably below the accent-
   filled "первое сообщение" pill and doesn't compete with it when both
   appear on the same card. */
.doc-card__official {
  border: 1px solid var(--ink-faint);
  color: var(--ink-soft);
}

.doc-card__lag {
  background: var(--paper-sunken);
  color: var(--ink-soft);
}

.doc-card__excerpt {
  margin: 0;
  max-width: 65ch;
}

/* Roughly half the corpus has no body text at all (title-only feeds).
   That must read as "this source only gave us a headline", not as a
   broken render of a missing field. */
.doc-card__excerpt--empty {
  color: var(--ink-soft);
  font-style: italic;
}

/* ---------------------------------------------------------------------
   Empty state
   ------------------------------------------------------------------- */

.empty-state {
  max-width: var(--content-width);
  margin-inline: auto;
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 4vw, 2.5rem);
  border: 1.5px dashed var(--rule);
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
}

.empty-state h1 {
  font-family: var(--font-display);
}

.empty-state p {
  margin: 0;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------------
   Small screens
   ------------------------------------------------------------------- */

@media (max-width: 26rem) {
  .site-header__wordmark {
    font-size: 1.4rem;
  }

  .coverage--full .coverage-meter {
    max-width: none;
  }
}

/* ---------------------------------------------------------------------
   Хор — подпись витрины.

   Строка на блок прессы: страна, её собственный заголовок в оригинальном
   письме, под ним русский перевод. Молчавшие занимают такую же строку —
   молчание здесь факт наравне с публикацией.

   Антиква для оригинала, гротеск для перевода: это разграничение чужой
   прямой речи и того, что говорит сайт, а не выбор по вкусу. Читатель
   различает их, не читая подписей.
   ------------------------------------------------------------------- */

.voices {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
}

.voice {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 1.1rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--rule);
}

.voice:first-child {
  border-top: none;
  padding-top: 0;
}

.voice__bloc {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  border-left: 3px solid var(--voice-colour, var(--rule));
  padding-left: 0.65rem;
}

.voice__country {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.3;
}

.voice__when {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-faint);
}

.voice__original {
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.35;
  margin: 0;
}

.voice__translation {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 0.3rem 0 0;
}

/* Пометка стоит в потоке текста, а не в углу карточки: читатель должен
   встретить её ровно там, где решает, чьим словам верит. */
.voice__mark {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-faint);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.05rem 0.32rem;
  margin-left: 0.45rem;
  white-space: nowrap;
  vertical-align: 0.1em;
}

.voice__outlet {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--ink-faint);
  margin: 0.35rem 0 0;
}

.voice__outlet a {
  color: inherit;
}

.voice--silent .voice__bloc {
  border-left-style: dotted;
  border-left-color: var(--rule);
}

.voice--silent .voice__country,
.voice--silent .voice__said,
.voice--more .voice__said {
  color: var(--ink-faint);
  font-family: var(--font-ui);
  font-size: 0.85rem;
}

/* ---------------------------------------------------------------------
   Столкновение — карточка ленты

   Метрика заголовка снята с theguardian.com: вес 500 при интерлиньяже 1,15.
   Стояло 1,22 без указания веса, то есть 400 — Guardian набирает плотнее и
   чуть жирнее, и именно это, а не гарнитура, отвечает за узнаваемый вид их
   полосы. Гарнитуру взять нельзя: их Egyptian — проприетарный и не несёт ни
   армянского, ни грузинского.
   ------------------------------------------------------------------- */

.collision-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.collision {
  border-top: 1px solid var(--rule);
  padding: 1.5rem 0 1.75rem;
}

.collision:first-child {
  border-top: none;
}

.collision__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Guardian подчёркивает заголовок при наведении, а не перекрашивает его.
   Перекраска на полосе из пятидесяти заголовков читается как «эта ссылка
   другая»; подчёркивание — как «сюда можно нажать». */
.collision__link:hover .collision__title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.collision__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.3rem, 2.6vw, 1.65rem);
  line-height: 1.15;
  letter-spacing: -0.005em;
  margin: 0;
}

.collision__verdict {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  line-height: 1.45;
  margin: 0.7rem 0 0;
  padding-left: 0.7rem;
  border-left: 3px solid var(--rule);
}

.collision__verdict--diverge {
  border-left-color: var(--bloc-tr);
}

.collision__verdict--converge {
  border-left-color: var(--bloc-ge);
}

.collision__summary {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0.6rem 0 0;
}

/* Guardian набирает отметку времени гротеском 12px весом 700 в #707070 —
   жирная и мелкая. Здесь стоял моноширинный 0,72rem: он читался как код, а
   это дата. Моноширинный остаётся там, где цифры выстраиваются в столбец. */
.collision__foot {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink-soft);
  margin: 0.9rem 0 0;
}

/* ---------------------------------------------------------------------
   Страница сюжета
   ------------------------------------------------------------------- */

.story {
  max-width: var(--content-width);
}

.story__back {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  margin: 0 0 1.5rem;
}

.story__image {
  margin: 0 0 1.25rem;
}

.story__image img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

.story__image-credit {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--ink-faint);
  margin: 0.4rem 0 0;
}

.story__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.4rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
  margin: 0;
}

/* Рубрики под заголовком сюжета.

   Цвет приходит из справочника переменной --topic-colour и трогает только рамку
   и точку: рубрика — это ярлык, а не блок прессы, и заливка редакторским цветом
   спорила бы с шестью цветами блоков, на которых держится вся навигация. */
.story__topics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.75rem 0 0;
}

.topic-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-soft);
  text-decoration: none;
}

.topic-chip::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--topic-colour, var(--ink-faint));
}

.topic-chip:hover {
  border-color: var(--topic-colour, var(--ink-soft));
  color: var(--ink);
  text-decoration: none;
}

.story__summary {
  font-family: var(--font-ui);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 1rem 0 0;
}

.story__section-heading {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.45rem;
  margin: 2.75rem 0 1.1rem;
}

/* Вердикт ставит редакция. Плашка намеренно неяркая: это суждение человека,
   а не измерение, и кричать ему не о чем. */
.verdict {
  border-left: 4px solid var(--rule);
  background: var(--paper-sunken);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 0.9rem 1.1rem;
  margin: 1.75rem 0 0;
}

.verdict--diverge {
  border-left-color: var(--bloc-tr);
}

.verdict--converge {
  border-left-color: var(--bloc-ge);
}

.verdict__label {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  margin: 0 0 0.35rem;
}

.verdict__note {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.4;
  margin: 0;
}

.source-group {
  margin-bottom: 2rem;
}

.source-group__heading {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  border-left: 3px solid var(--voice-colour, var(--rule));
  padding-left: 0.65rem;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 500;
  margin: 0 0 0.75rem;
}

.source-group__count {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-faint);
}

.source-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.source-item {
  padding: 0.8rem 0;
  border-top: 1px solid var(--rule);
}

.source-item__title {
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.35;
  color: inherit;
}

.source-item__meta {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--ink-faint);
  margin: 0.3rem 0 0;
}

.source-item__excerpt {
  font-family: var(--font-ui);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0.45rem 0 0;
}

@media (max-width: 40rem) {
  /* Колонка страны над цитатой, а не слева от неё: при узком экране восемь
     сантиметров под название страны съедали половину строки заголовка. */
  .voice {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }

  .voice__bloc {
    flex-direction: row;
    align-items: baseline;
    gap: 0.5rem;
  }
}

/* ---------------------------------------------------------------------
   Ширина чтения

   Здесь стояло правило, сводившее шапку, ленту и подвал к одним 44rem. Причина
   была записана и была верная: оболочка в 78rem давала шапке одну сетку, а
   колонке чтения другую, у страницы получалось два разных левых края, и глаз
   спотыкался о шов на каждой прокрутке.

   Причина держалась на том, что шапка была белой — той же поверхностью, что и
   страница, так что её край читался как продолжение колонки. Шапка теперь синяя
   полоса, и Guardian живёт ровно с этими двумя краями: шапка во всю полосу,
   текст узкой колонкой под ней. Шва не видно, потому что цвет сам объявляет
   границу.

   Левое поле — их же приём: подпись раздела висит сбоку от текста, а не над
   ним (на theguardian.com/world так стоит «Africa»). У нас в поле уходит день,
   и это решает заодно старую задачу: подпись была липкой, потому что в ленте на
   пятьдесят событий читатель теряет счёт дням, — но липкая подпись над колонкой
   закрывала собой текст, а в поле ей нечего закрывать.
   ------------------------------------------------------------------- */

.site-main {
  max-width: var(--shell-width);
  display: grid;
  grid-template-columns:
    var(--gutter-width)
    minmax(0, var(--content-width))
    minmax(0, 1fr);
  column-gap: var(--gutter-gap);
}

/* Всё, что не подпись дня, живёт в колонке чтения. Третья колонка — поле
   справа; ей нечего нести, и она существует, чтобы текст не растягивался. */
.site-main > * {
  grid-column: 2;
  max-width: none;
  margin-inline: 0;
}

.site-header__inner,
.site-footer__inner {
  max-width: var(--shell-width);
}

/* Ниже 62rem поле съедает колонку чтения — сетка складывается в одну. */
@media (max-width: 62rem) {
  .site-main {
    display: block;
  }
  .site-main > * {
    max-width: var(--content-width);
  }
}

/* ---------------------------------------------------------------------
   День как якорь ленты

   Подпись дня ушла в левое поле — см. «Ширина чтения» выше. display: contents
   на .day нужен именно для этого: заголовок и список внутри секции становятся
   прямыми ячейками сетки страницы, и подпись встаёт слева от своей ленты, а не
   над ней. Отбивка в 2px переехала с подписи на список: у Guardian раздел
   открывает линейка над текстом, а не под названием.
   ------------------------------------------------------------------- */

.day {
  display: contents;
}

.day__heading {
  grid-column: 1;
  align-self: start;

  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--ink);
  border: none;
  padding: 1.6rem 0 0;
  margin: 0;

  /* Липкий: в ленте на пятьдесят событий читатель уезжает от подписи за один
     оборот колеса и перестаёт понимать, какой день читает. Фон нужен не здесь,
     а на узком экране, где сетка складывается и подпись снова встаёт над
     текстом. */
  position: sticky;
  top: 0;
  background: var(--paper);
  z-index: 1;
}

.collision-list {
  grid-column: 2;
  border-top: 2px solid var(--rule-strong);
  padding-top: 0.25rem;
}

/* Воздух между днями. Отбирается по секции, а не по позиции заголовка: при
   display: contents заголовок остаётся первым ребёнком своей .day, так что
   :first-of-type на нём истинен для каждого дня и правило не сработало бы ни
   разу. Оба элемента строки получают один и тот же отступ, иначе подпись и
   линейка разъедутся по вертикали. */
.day:not(:first-of-type) .day__heading,
.day:not(:first-of-type) .collision-list {
  margin-top: 2.75rem;
}


/* Ведущий сюжет дня. Единственная уступка иерархии: без неё лента читается
   как список файлов — все строки равны, глазу не за что зацепиться. */
.collision--lead .collision__title {
  font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  line-height: 1.15;
}

.collision--lead .collision__verdict,
.collision--lead .collision__summary {
  font-size: 1.02rem;
}

/* Свёрнутые голоса: строка без колонки страны, иначе слева зияет пустое
   место шириной в название страны. */
.voice--more {
  grid-template-columns: 1fr;
}

.voice--more .voice__said {
  padding-left: 0.65rem;
}

/* ---------------------------------------------------------------------
   Навигация по странам

   Здесь стояло правило, сжимавшее пункты до 0,78rem: семь названий не
   помещались в колонку чтения и «Международные» уезжали на отдельную строку.
   Полоса теперь гардиановская, 1300px, и семь пунктов встают в одну строку в
   полный кегль — сжимать больше нечего. Осталось только правило для телефона,
   где перенос неизбежен по ширине экрана, а не по нашей вине.
   ------------------------------------------------------------------- */

@media (max-width: 34rem) {
  .site-nav__link {
    font-size: 0.8rem;
    padding-inline: 0.65rem;
  }
}

/* ── О чём промолчали ───────────────────────────────────────────────── */

/* Распорка, отодвигающая соседа вправо, — см. SiteNav.razor. Здесь стоял
   margin-left: auto, и он прижимал пункт к правому краю той строки, на которую
   тот перенёсся: по-грузински ряд не помещался даже в 1920, и «რის შესახებ
   გაჩუმდნენ» повисал один справа. Распорка остаётся на первой строке, поэтому
   перенесённый пункт встаёт слева — второй строкой того же ряда.

   Правая черта распорке не нужна: правило .site-nav__list > li ставит её всем,
   а здесь она висела бы у края первой строки. Селектор поэтому с родителем:
   .site-nav__spacer в одиночку проигрывает тому правилу по специфичности, и
   черта остаётся — проверено на живой странице, прежде чем попасть сюда. */
.site-nav__list > .site-nav__spacer {
  flex: 1 1 0;
  border-right: none;
}

/* Пункт другого рода в том же ряду: слева отбор по тому, кто написал,
   справа — по тому, кто промолчал. Свободное место перед ним и утолщённая черта
   говорят, что это не седьмая страна, а другой вопрос к тем же данным. */
.site-nav__item--apart {
  border-left: 1px solid var(--navy-rule);
}

/* Отбор внутри страницы. Не повторяет верхний ряд: тот перемещает по сайту,
   этот меняет вопрос на одной странице. */
.silence-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  margin: 0 0 1.25rem;
}

.silence-picker__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-soft);
  text-decoration: none;
}

.silence-picker__link:hover {
  border-color: var(--rule-strong);
  color: var(--ink);
}

.silence-picker__link--current {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

/* Оговорка стоит над лентой, а не под ней: читатель должен встретить её
   до того, как поверит числам, а не после. */
.silence-caveat {
  margin: 0 0 2rem;
  padding-left: 0.85rem;
  border-left: 2px solid var(--rule);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* Один выпуск. Разбор редактора — единственное на сайте, что написано в
   собственном голосе целиком, поэтому он набран крупнее фактов над ним, а не
   мельче. */
.digest-item {
  margin: 0 0 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}

.digest-item__heading {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1.25;
}

.digest-item__facts {
  margin: 0 0 0.75rem;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Утверждение, переставшее быть верным. Не ошибка и не прячется. */
.digest-item__stale {
  margin: 0 0 0.75rem;
  padding-left: 0.85rem;
  border-left: 2px solid var(--rule-strong);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.digest-item__verdict {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* Число рядом с вкладкой. Мельче имени и приглушённое: это оговорка, а не
   заголовок, но стоять она должна там, где на неё смотрят. */
.silence-picker__rate {
  margin-left: 0.5em;
  font-size: 0.75em;
  color: var(--ink-soft);
}

.silence-picker__link--current .silence-picker__rate {
  color: var(--paper);
  opacity: 0.75;
}

/* Две части одной страницы. Разобранное сверху, остальное снизу — и второй
   заголовок обязателен: без него нижний список выглядел бы продолжением
   разобранного. */
.silence-argued__heading {
  margin: 2.5rem 0 1rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.2;
}

.silence-argued {
  margin-bottom: 1rem;
}

/* Разбор редактора на странице сюжета. Единственный абзац на ней, написанный
   нами целиком, поэтому он отбит слева жирной чертой — тем же приёмом, каким
   оговорка на /silence отличается от текста вокруг, но в полную силу. */
.silence-note {
  margin: 1.5rem 0;
  padding-left: 1rem;
  border-left: 3px solid var(--accent);
}

.silence-note__text {
  margin: 0 0 0.35rem;
  font-size: 1.0625rem;
  line-height: 1.6;
}

.silence-note__source {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--ink-soft);
}

/* -------------------------------------------------------------------
   Поиск

   Обычная форма: на сайте нет ни одного интерактивного режима рендеринга,
   и строка поиска не повод его заводить. Отправляет её браузер, ответ
   кэшируется как любая другая страница.

   Поле и кнопка в одной строке до узкого экрана, дальше — в столбец.
   Ширина ограничена --content-width: строка ввода во весь экран на 1920
   выглядит как поле формы, а не как часть газеты.
   ------------------------------------------------------------------- */

.search {
  max-width: var(--content-width);
  margin: 0 0 1.75rem;
}

.search__label {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.search__row {
  display: flex;
  gap: 0.5rem;
}

@media (max-width: 30rem) {
  .search__row { flex-direction: column; }
}

.search__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.55rem 0.7rem;
  font-family: var(--font-ui);
  font-size: 1rem;
  color: var(--ink);
  background: var(--page);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
}

.search__input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.search__button {
  padding: 0.55rem 1.1rem;
  font-family: var(--font-ui);
  font-size: 1rem;
  color: var(--page);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 2px;
  cursor: pointer;
}

.search__button:hover { filter: brightness(1.08); }

/* Оговорка о том, что и где искали. Тем же голосом, что и сноска на
   /sources: мельче основного текста, но не примечанием под чертой —
   пустой результат без неё читается как «ничего не было». */
.search__scope {
  max-width: var(--content-width);
  margin: 2rem 0 0;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* -------------------------------------------------------------------
   «Кто о чём писал» — единственная таблица на сайте.

   Газетная, а не интерфейсная: тонкая линия под шапкой, числа в моноширинном
   --font-num, как везде, где сайт показывает счёт. Точка блока перед именем
   повторяет навигацию и подпись в подвале, чтобы цвет читался как один язык, а
   не как три разных.
   ------------------------------------------------------------------- */

.matrix {
  width: 100%;
  max-width: 34rem;
  border-collapse: collapse;
  margin: 0 0 0.75rem;
}

.matrix__caption {
  text-align: left;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--ink-soft);
  padding-bottom: 0.5rem;
}

.matrix th,
.matrix td {
  padding: 0.5rem 0.4rem;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  font-weight: 400;
}

.matrix thead th {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  border-bottom: 2px solid var(--rule-strong);
}

.matrix__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.matrix__note {
  max-width: var(--content-width);
  margin: 0 0 1.75rem;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Пары блоков. Список, а не вторая таблица: у пары два имени и одно число,
   и сетка из шести строк читается быстрее, чем матрица 6×6, три четверти
   которой — зеркало и пустая диагональ. */
.overlap-list {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  max-width: 34rem;
}

.overlap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--rule);
}

.overlap__plus {
  color: var(--ink-faint);
  padding: 0 0.15rem;
}

.overlap__count {
  font-variant-numeric: tabular-nums;
}

/* Точка блока вне навигации.

   .site-nav__dot задаёт размер, но не display, и это работает только внутри
   .site-nav__link — там родитель flex, и span получает размеры как flex-элемент.
   В ячейке таблицы тот же span остаётся строчным, ширина и высота к нему не
   применяются, и точка исчезает совсем. Поэтому здесь ей явно задан
   inline-block: правило навигации не трогаем, оно не сломано. */
.matrix th .site-nav__dot,
.overlap .site-nav__dot {
  display: inline-block;
  margin-right: 0.4em;
  vertical-align: baseline;
}