/*
Theme Name: Elbrus.info V2
Theme URI: https://elbrus.info/
Description: Reference encyclopedia theme for Elbrus.info. Standalone:
  it neither depends on nor extends any shared parent theme.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: elbrus-info-v2
*/

@charset "UTF-8";
/* ==========================================================================
   Elbrus.info — design system v2
   Direction: "Слои / Strata" — the mountain read as layers of knowledge.
   Rules    : no build step, no stylesheet imports, no web fonts, no requests.
              Bilingual by construction: no baked-in label widths, logical
              properties everywhere, per-language reading measure and serif.
   Sections : 01 tokens · 02 reset · 03 layout · 04 typography · 05 notation
              06 masthead + nav · 07 search · 08 hero + figures
              09 home modules · 10 article · 11 lists, cards, results
              12 footer · 13 states + forms · 14 catalogue
              15 responsive · 16 motion, contrast, print
   ========================================================================== */

/* ---------- 01 TOKENS ---------------------------------------------------- */

:root {
  color-scheme: light dark;

  /* Surfaces. "deep" is new in v2: it gives the mountain a place to be, and
     carries the hero and the section openers. */
  --paper:        #f6f4f0;
  --paper-raised: #fdfcfa;
  --paper-sunk:   #ece9e2;
  --deep:         #12181c;
  --deep-2:       #1b2328;
  --deep-ink:     #eceae4;
  --deep-muted:   #a4aeb4;

  --line:         #dcd7cd;
  --line-strong:  #b9b1a2;   /* decorative dividers and card edges */
  --line-deep:    #313b41;
  /* The boundary of anything the reader can operate. Held above 3:1 against
     every surface it sits on. A decorative hairline does not carry that duty
     and stays --line-strong. */
  --control:      #7a7368;

  --ink:          #12161a;
  --ink-2:        #313940;
  --ink-muted:    #58616a;

  /* Two accents, one job each. Ice = measurement, links, interaction.
     Oxide = provenance, citations, archive, source marks. No third accent
     is used for text or state. */
  --ice:          #145a7d;
  --ice-strong:   #0c405b;
  --ice-wash:     #e4edf2;
  --oxide:        #8c3d1f;
  --oxide-strong: #6b2c13;
  --oxide-wash:   #f3e8e1;

  /* Section markers. Decoration and orientation only: never the sole signal,
     never applied to body text, always accompanied by the section name. */
  --sect-start:     #6b6357;
  --sect-mountain:  #7a4b2c;
  --sect-icewater:  #2b6a86;
  --sect-nature:    #4c6b45;
  --sect-places:    #8a6a2e;
  --sect-history:   #7a3b4a;
  --sect-names:     #5a5285;
  --sect-knowledge: #3f5560;

  /* Type. System stacks only; the serif is chosen per language in §04. */
  --serif-en: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, "Charter", Georgia, "Times New Roman", serif;
  --serif-ru: Georgia, "PT Serif", "Charter", "Times New Roman", "Liberation Serif", serif;
  --sans:     ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:     ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", "Roboto Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --serif:    var(--serif-en);

  /* Continuous scale: no jumps at breakpoints. */
  --fs-display: clamp(2.35rem, 0.6rem + 4.6vw, 4.5rem);
  --fs-h1:      clamp(1.95rem, 1.2rem + 2.9vw, 3.35rem);
  --fs-h2:      clamp(1.5rem, 1.14rem + 1.55vw, 2.3rem);
  --fs-h3:      clamp(1.15rem, 1.03rem + .52vw, 1.45rem);
  --fs-h4:      clamp(1.02rem, .98rem + .2vw, 1.15rem);
  --fs-lead:    clamp(1.1rem, 1rem + .68vw, 1.42rem);
  --fs-body:    clamp(1rem, .97rem + .2vw, 1.09rem);
  --fs-small:   .875rem;
  --fs-note:    .765rem;

  --lh-tight: 1.12;
  --lh-head:  1.2;
  --lh-body:  1.62;
  --lh-ui:    1.35;

  /* Space */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;    --s-10: 8rem;

  /* Layout */
  --gutter:  clamp(1.125rem, .4rem + 2.6vw, 3.5rem);
  --shell:   min(80rem, 100% - (var(--gutter) * 2));
  --reading: 44rem;          /* EN default measure; RU is set in §04 */
  --rail:    4.5rem;
  --header-h: 3.75rem;

  --radius:    .25rem;
  --radius-lg: .625rem;

  /* Motion */
  --ease: cubic-bezier(.2, .6, .25, 1);
  --dur:  170ms;
  --dur-slow: 240ms;

  --focus-ring: 2px solid var(--ice);
  --focus-offset: 3px;

  --tap: 44px;               /* project target for a comfortable touch area */
}

/* Per-language typography. Georgia has a complete, well-hinted Cyrillic and
   is present on every target platform; the EN serif stack keeps the Iowan /
   Palatino colour that reads well in Latin long-form. Measure differs because
   Cyrillic lowercase is wider on average at the same size. */
:root:lang(ru), [lang="ru"] { --serif: var(--serif-ru); --reading: 36rem; }
:root:lang(en), [lang="en"] { --serif: var(--serif-en); --reading: 33rem; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #10151a;
    --paper-raised: #171d22;
    --paper-sunk:   #0a0e12;
    --deep:         #080b0e;
    --deep-2:       #121a1f;
    --deep-ink:     #e9e7e2;
    --deep-muted:   #9aa4ab;
    --line:         #29323a;
    --line-strong:  #44505a;
    --line-deep:    #232c33;
    --control:      #7d8892;
    --ink:          #e9e7e2;
    --ink-2:        #ccd2d6;
    --ink-muted:    #98a2aa;
    --ice:          #7cc3e8;
    --ice-strong:   #a9dcf6;
    --ice-wash:     #14262f;
    --oxide:        #e2a486;
    --oxide-strong: #f1c0a9;
    --oxide-wash:   #2b1e18;
    --sect-start:     #b3a996;
    --sect-mountain:  #d09a72;
    --sect-icewater:  #7fbdd8;
    --sect-nature:    #9ec092;
    --sect-places:    #d7b571;
    --sect-history:   #d5919f;
    --sect-names:     #a89fd6;
    --sect-knowledge: #92aab6;
  }
}

:root[data-theme="dark"] {
  --paper:        #10151a;
  --paper-raised: #171d22;
  --paper-sunk:   #0a0e12;
  --deep:         #080b0e;
  --deep-2:       #121a1f;
  --deep-ink:     #e9e7e2;
  --deep-muted:   #9aa4ab;
  --line:         #29323a;
  --line-strong:  #44505a;
  --line-deep:    #232c33;
  --control:      #7d8892;
  --ink:          #e9e7e2;
  --ink-2:        #ccd2d6;
  --ink-muted:    #98a2aa;
  --ice:          #7cc3e8;
  --ice-strong:   #a9dcf6;
  --ice-wash:     #14262f;
  --oxide:        #e2a486;
  --oxide-strong: #f1c0a9;
  --oxide-wash:   #2b1e18;
  --sect-start:     #b3a996;
  --sect-mountain:  #d09a72;
  --sect-icewater:  #7fbdd8;
  --sect-nature:    #9ec092;
  --sect-places:    #d7b571;
  --sect-history:   #d5919f;
  --sect-names:     #a89fd6;
  --sect-knowledge: #92aab6;
}


/* ---------- 01b DARK SURFACE SCOPE -------------------------------------- */
/* The hero, the deep bands and the footer are dark in BOTH themes. A component
   dropped onto them must not keep the light-surface ink: `.eyebrow` and
   `.note-label` inherit --ink-muted, which is far too dark on this surface.
   Rather than patching those two classes, the surface itself re-points every
   token, so any component placed here is correct by default. The values are
   the dark-theme values and hold in both themes. */
.hero,
.band--deep,
.footer {
  --paper:        var(--deep);
  --paper-raised: var(--deep-2);
  --paper-sunk:   var(--deep);
  --ink:          var(--deep-ink);
  --ink-2:        var(--deep-ink);
  --ink-muted:    var(--deep-muted);
  --line:         var(--line-deep);
  --line-strong:  #55636b;
  --control:      #8f9aa1;
  --ice:          #7cc3e8;
  --ice-strong:   #a9dcf6;
  --ice-wash:     #16262f;
  --oxide:        #e2a486;
  --oxide-strong: #f1c0a9;
  --sect-start:     #b3a996;
  --sect-mountain:  #d09a72;
  --sect-icewater:  #7fbdd8;
  --sect-nature:    #9ec092;
  --sect-places:    #d7b571;
  --sect-history:   #d5919f;
  --sect-names:     #a89fd6;
  --sect-knowledge: #92aab6;
  background: var(--deep);
  color: var(--deep-ink);
}

/* ---------- 02 RESET ----------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor jumps must not hide the heading behind the sticky masthead. */
  scroll-padding-block-start: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
svg { fill: currentColor; }

a { color: var(--ice); text-underline-offset: .16em; text-decoration-thickness: from-font; }
a:hover { color: var(--ice-strong); }

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

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

table { border-collapse: collapse; }

[hidden] { display: none !important; }

.u-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skiplink {
  position: absolute; inset-block-start: -100%; inset-inline-start: var(--s-4);
  z-index: 100; background: var(--paper-raised); color: var(--ink);
  padding: var(--s-3) var(--s-4); border: 1px solid var(--control);
  border-radius: var(--radius); font-size: var(--fs-small);
}
.skiplink:focus-visible { inset-block-start: var(--s-2); }

/* ---------- 03 LAYOUT ---------------------------------------------------- */

.shell { inline-size: var(--shell); margin-inline: auto; }

.band { padding-block: clamp(2.5rem, 1rem + 5vw, 5.5rem); position: relative; }
.band--tight { padding-block: clamp(1.75rem, 1rem + 2.5vw, 3rem); }
.band--sunk  { background: var(--paper-sunk); }
.band--rule  { border-block-start: 1px solid var(--line); }

.band__head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--s-3) var(--s-5); margin-block-end: var(--s-6);
}
.band__head .band__title { margin: 0; }
.band__head .band__help {
  margin: 0; color: var(--ink-muted); font-size: var(--fs-small);
  max-inline-size: 42ch; flex: 1 1 22ch;
}

/* The layer rail: presentational orientation, never the only route anywhere. */
.rail {
  position: absolute; inset-block: 0; inset-inline-start: calc(var(--gutter) * -1 + .5rem);
  inline-size: var(--rail); display: none;
  font-family: var(--mono); font-size: var(--fs-note);
  color: var(--ink-muted); letter-spacing: .06em;
}
.rail::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0;
  inline-size: 1px; background: var(--line);
}
.rail__num { position: sticky; inset-block-start: calc(var(--header-h) + 1rem); padding-inline-start: var(--s-3); }

/* A grid or flex child defaults to min-width:auto, so one wide descendant —
   a comparison table, a long DOI — can push a whole column past the viewport.
   Every track in this system opts out of that explicitly. */
.grid > *, .artbody > *, .hero__inner > *, .footer__cols > *,
.spec__demo > *, .masthead__bar > * { min-inline-size: 0; }

.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(16.5rem, 100%), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }

/* ---------- 04 TYPOGRAPHY ------------------------------------------------ */

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: var(--lh-head); margin-block: 0 var(--s-3); }

/* body sets overflow-wrap: break-word so a long DOI cannot widen a column.
   On a heading that same rule split «прочитанный» across two lines at 1192 px.
   Display type therefore opts out: it wraps at spaces only, and the type scale
   below is sized so the longest Russian word still fits its column. */
h1, h2, h3, h4,
.display, .hero__title, .arthead__title, .band__title, .topiccard__title,
.entrylist__title, .result__title, .layercard__title, .relcard__title,
.nextq__q, .empty__title, .spec__title, .lead, .artlead, .hero__promise {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -.012em; }
h2 { font-size: var(--fs-h2); letter-spacing: -.008em; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-family: var(--sans); font-weight: 650; }

p { margin-block: 0 var(--s-4); }
p:last-child { margin-block-end: 0; }

.display {
  font-family: var(--serif); font-size: var(--fs-display);
  line-height: 1.03; letter-spacing: -.02em; font-weight: 600; margin: 0;
  text-wrap: balance;
}
.lead {
  font-family: var(--serif); font-size: var(--fs-lead);
  line-height: 1.45; color: var(--ink-2); max-inline-size: 38ch;
}

/* Long-form reading is set in the serif, matching what the component catalogue
   states about the three type roles. Interface text stays in the sans. */
/* The text column is capped at the reading measure, but a figure, a comparison
   table or a card row may use the full editorial column. That is what keeps a
   1440 px window from stranding the article against the left edge. */
.prose {
  max-inline-size: none;
  font-family: var(--serif);
  font-size: 1.045rem;
  line-height: 1.66;
  color: var(--ink-2);
}
.prose .small, .prose .note-label, .prose .chip { font-family: var(--sans); }
.prose > * { max-inline-size: var(--reading); }
.prose > .figure, .prose > figure, .prose > .tablewrap, .prose > .related,
.prose > .notes, .prose > .nextq, .prose > .grid { max-inline-size: 100%; }
.prose > * + * { margin-block-start: var(--s-4); }
.prose h2 { margin-block-start: var(--s-7); }
.prose h3 { margin-block-start: var(--s-6); }
.prose ul, .prose ol { padding-inline-start: 1.35em; }
.prose li + li { margin-block-start: var(--s-2); }
.prose strong { font-weight: 650; }

.muted { color: var(--ink-muted); }
.small { font-size: var(--fs-small); }

/* ---------- 05 NOTATION -------------------------------------------------- */
/* The monospace layer is the signature of the system: it is how the site says
   "this value carries a source". It is never used for running prose. */

.note-label {
  font-family: var(--mono); font-size: var(--fs-note);
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-muted);
}

.eyebrow {
  font-family: var(--mono); font-size: var(--fs-note);
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-muted); display: flex; align-items: center; gap: var(--s-2);
  margin-block-end: var(--s-3);
}
.eyebrow::before {
  content: ""; inline-size: 1.75rem; block-size: 2px;
  background: var(--marker, var(--line-strong)); flex: none;
}

/* Provenance grammar. Every quantitative or historical statement uses this
   order and typography, on every template and in both languages. */
.prov {
  font-family: var(--mono); font-size: var(--fs-note);
  color: var(--oxide); letter-spacing: .04em;
  display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3);
  margin-block-start: var(--s-3);
}
.prov__item { display: inline-flex; gap: .35em; align-items: baseline; }
.prov__key { color: var(--ink-muted); text-transform: uppercase; }
.prov a { color: var(--oxide); text-decoration: underline; }
.prov a:hover { color: var(--oxide-strong); }

.chip {
  display: inline-flex; align-items: center; gap: .45em;
  font-family: var(--mono); font-size: var(--fs-note);
  letter-spacing: .07em; text-transform: uppercase;
  padding: .28em .6em; border: 1px solid var(--line-strong);
  border-radius: 999px; color: var(--ink-muted); background: transparent;
  white-space: nowrap;
}
.chip--ready { color: var(--ice-strong); border-color: var(--ice); }
.chip--ready::before { content: ""; inline-size: .5em; block-size: .5em; border-radius: 50%; background: currentColor; }
.chip--prep::before  { content: ""; inline-size: .5em; block-size: .5em; border-radius: 50%; border: 1px solid currentColor; }
.chip--kind { color: var(--ink-2); border-color: var(--line); }

.marker {
  inline-size: 100%; block-size: 3px; display: block;
  background: var(--marker, var(--line-strong));
}

/* ---------- 06 MASTHEAD AND NAVIGATION ----------------------------------- */

.masthead {
  position: sticky; inset-block-start: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
  border-block-end: 1px solid var(--line);
}
@supports not (backdrop-filter: blur(1px)) { .masthead { background: var(--paper); } }

.masthead__bar {
  display: flex; align-items: center; gap: var(--s-4);
  min-block-size: var(--header-h);
}

.brand { display: inline-flex; align-items: baseline; gap: .5rem; text-decoration: none; color: inherit; flex: none; }
.brand__name { font-family: var(--serif); font-weight: 600; font-size: 1.2rem; letter-spacing: -.01em; }
.brand__kind { font-family: var(--mono); font-size: var(--fs-note); color: var(--ink-muted); letter-spacing: .06em; }

.navbar { display: none; flex: 1 1 auto; min-inline-size: 0; }
.navbar__list { display: flex; flex-wrap: wrap; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.navbar__item { position: relative; }

.navbar__btn {
  appearance: none; background: none; border: 0;
  padding: .55rem .6rem; border-radius: var(--radius);
  font-size: var(--fs-small); line-height: var(--lh-ui); color: var(--ink-2);
  display: inline-flex; align-items: center; gap: .4rem;
  min-block-size: 2.25rem;
}
.navbar__btn:hover { background: var(--paper-sunk); color: var(--ink); }
.navbar__btn[aria-expanded="true"] { background: var(--paper-sunk); color: var(--ink); }
.navbar__btn[aria-current="true"], .navbar__btn.is-current { box-shadow: inset 0 -2px 0 0 var(--marker, var(--ice)); }
.navbar__btn::after {
  content: ""; inline-size: .4em; block-size: .4em; flex: none;
  border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-.1em); opacity: .55;
  transition: transform var(--dur) var(--ease);
}
.navbar__btn[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-.1em); }

.panel {
  position: absolute; inset-block-start: calc(100% + .4rem); inset-inline-start: 0;
  z-index: 60; inline-size: min(34rem, 92vw);
  background: var(--paper-raised); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--s-5);
  box-shadow: 0 12px 40px -18px rgb(0 0 0 / .45);
}
.panel[hidden] { display: none; }
.panel__title { font-family: var(--sans); font-size: var(--fs-small); font-weight: 650; margin-block-end: var(--s-3); }
.panel__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.panel__link { display: block; text-decoration: none; color: inherit; padding-inline-start: var(--s-3); border-inline-start: 3px solid var(--marker, var(--line-strong)); }
.panel__link:hover .panel__name { color: var(--ice); text-decoration: underline; }
.panel__name { font-weight: 600; font-size: var(--fs-small); }
.panel__blurb { font-size: var(--fs-note); color: var(--ink-muted); margin-block-start: .15rem; line-height: 1.45; }
.panel__foot { margin-block-start: var(--s-4); padding-block-start: var(--s-3); border-block-start: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--s-3); }

.masthead__tools { display: flex; align-items: center; gap: var(--s-2); margin-inline-start: auto; flex: none; }
/* One search field is visible at a time: in the bar from 64em, in its own
   full-width row below that, so it stays permanent instead of hiding behind an
   icon. Both exist in the document and carry distinct ids. */
.masthead__tools .search { display: none; }

.langswitch { display: inline-flex; border: 1px solid var(--control); border-radius: var(--radius); overflow: hidden; }
.langswitch__opt {
  padding: .35rem .55rem; font-family: var(--mono); font-size: var(--fs-note);
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  color: var(--ink-muted); background: transparent; min-block-size: 1.9rem;
  display: inline-flex; align-items: center;
}
.langswitch__opt[aria-current="true"] { background: var(--ink); color: var(--paper); }
.langswitch__opt:hover:not([aria-current="true"]) { background: var(--paper-sunk); color: var(--ink); }

.iconbtn {
  appearance: none; background: none; border: 1px solid var(--control);
  border-radius: var(--radius); padding: .4rem .7rem;
  font-size: var(--fs-small); min-block-size: 2.25rem; min-inline-size: 2.25rem;
  display: inline-flex; align-items: center; gap: .4rem; color: var(--ink-2);
}
.iconbtn:hover { background: var(--paper-sunk); color: var(--ink); }

/* Mobile drawer: a disclosure under the bar, never covering the control that
   closes it. Uses <details> so it works with JavaScript disabled. */
.drawer { border-block-start: 1px solid var(--line); }
.drawer > summary {
  list-style: none; cursor: pointer; padding-block: .7rem;
  display: flex; align-items: center; gap: .5rem;
  font-size: var(--fs-small); min-block-size: var(--tap);
}
.drawer > summary::-webkit-details-marker { display: none; }
.drawer > summary::after {
  content: ""; inline-size: .45em; block-size: .45em; margin-inline-start: auto;
  border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform var(--dur) var(--ease);
}
.drawer[open] > summary::after { transform: rotate(-135deg); }
.drawer__body { max-block-size: min(74vh, 40rem); overflow-y: auto; overscroll-behavior: contain; padding-block-end: var(--s-5); }
.drawer__group { border-block-start: 1px solid var(--line); }
.drawer__group > summary {
  list-style: none; cursor: pointer; padding: .8rem var(--s-1); min-block-size: var(--tap);
  display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: var(--fs-small);
}
.drawer__group > summary::-webkit-details-marker { display: none; }
.drawer__group > summary::before { content: ""; inline-size: 3px; block-size: 1.1em; background: var(--marker, var(--line-strong)); flex: none; }
.drawer__group > summary::after {
  content: "+"; margin-inline-start: auto; font-family: var(--mono); color: var(--ink-muted);
}
.drawer__group[open] > summary::after { content: "–"; }
.drawer__links { list-style: none; margin: 0; padding: 0 0 var(--s-3) calc(3px + .6rem); display: grid; gap: .1rem; }
.drawer__links a { display: block; padding: .55rem 0; font-size: var(--fs-small); min-block-size: var(--tap); text-decoration: none; }
.drawer__links a:hover { text-decoration: underline; }
.drawer__links .muted { display: block; font-size: var(--fs-note); }

/* ---------- 07 SEARCH ---------------------------------------------------- */

.searchrow { border-block-start: 1px solid var(--line); padding-block: var(--s-3); }

.search { position: relative; }
.search__form { display: flex; gap: var(--s-2); align-items: stretch; }
.search__field {
  flex: 1 1 auto; min-inline-size: 0;
  background: var(--paper-raised); color: var(--ink);
  border: 1px solid var(--control); border-radius: var(--radius);
  padding: .6rem .8rem; min-block-size: var(--tap);
  font-size: var(--fs-body);
}
.search__field::placeholder { color: var(--ink-muted); }
.search__field:focus-visible { border-color: var(--ice); }
.search__submit {
  flex: none; background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink); border-radius: var(--radius);
  padding: .6rem 1.1rem; min-block-size: var(--tap); font-size: var(--fs-small); font-weight: 600;
}
.search__submit:hover { background: var(--ice-strong); border-color: var(--ice-strong); color: #fff; }
.search__help { margin-block-start: var(--s-2); font-size: var(--fs-note); color: var(--ink-muted); }
.masthead .search__help, .searchrow .search__help { display: none; }
.suggest { color: var(--ink); }

.suggest {
  position: absolute; inset-inline: 0; inset-block-start: calc(100% + .35rem); z-index: 70;
  background: var(--paper-raised); border: 1px solid var(--control);
  border-radius: var(--radius); box-shadow: 0 14px 40px -20px rgb(0 0 0 / .5);
  max-block-size: 22rem; overflow-y: auto;
}
.suggest[hidden] { display: none; }
.suggest__list { list-style: none; margin: 0; padding: var(--s-2); display: grid; gap: 1px; }
.suggest__opt {
  display: grid; gap: .1rem; padding: .55rem .6rem; border-radius: var(--radius);
  cursor: pointer; text-decoration: none; color: inherit;
}
.suggest__opt:hover, .suggest__opt[aria-selected="true"] { background: var(--ice-wash); }
.suggest__title { font-size: var(--fs-small); font-weight: 600; }
.suggest__meta { font-family: var(--mono); font-size: var(--fs-note); color: var(--ink-muted); letter-spacing: .05em; }
.suggest__empty { padding: var(--s-4); font-size: var(--fs-small); color: var(--ink-muted); }

mark { background: var(--ice-wash); color: inherit; padding: 0 .1em; border-radius: 2px; }

/* ---------- 08 HERO AND FIGURES ------------------------------------------ */

.hero { position: relative; overflow: hidden; }
.hero__inner {
  display: grid; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  padding-block: clamp(2.75rem, 1.5rem + 5vw, 6rem);
  align-items: center;
}
.hero__title { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -.022em; margin: 0; text-wrap: balance; }
.hero__promise { font-family: var(--serif); font-size: var(--fs-lead); max-inline-size: 34ch; margin-block: var(--s-4) var(--s-5); }
.hero__search { max-inline-size: 34rem; }
.hero__search .search__field { background: rgb(255 255 255 / .07); }
.hero__search .search__submit { background: var(--deep-ink); color: var(--deep); border-color: var(--deep-ink); }
.hero__meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-block-start: var(--s-5); }
.hero__figure { margin: 0; }
.hero__figure svg { inline-size: 100%; block-size: auto; }
.hero__caption { font-family: var(--mono); font-size: var(--fs-note); color: var(--ink-muted); letter-spacing: .05em; margin-block-start: var(--s-3); }

figure { margin: 0; }
.figure { margin-block: var(--s-6); }
.figure__frame {
  background: var(--paper-raised); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--s-4);
}
.figure svg { inline-size: 100%; block-size: auto; }
.figure figcaption { margin-block-start: var(--s-3); font-size: var(--fs-small); color: var(--ink-muted); }
.figure figcaption .note-label { display: block; margin-block-end: .2rem; }

/* Honest placeholder for a photograph that does not exist yet. */
.mediaslot {
  border: 1px dashed var(--line-strong); border-radius: var(--radius-lg);
  background: repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in srgb, var(--line) 45%, transparent) 10px 11px);
  aspect-ratio: 16 / 9; display: grid; place-content: center; text-align: center;
  padding: var(--s-5); gap: var(--s-2);
}
.mediaslot__label { font-family: var(--mono); font-size: var(--fs-note); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted); }
.mediaslot__help { font-size: var(--fs-note); color: var(--ink-muted); max-inline-size: 34ch; margin: 0; }

/* ---------- 09 HOME MODULES ---------------------------------------------- */

.facts { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.fact { background: var(--paper); padding: var(--s-5) var(--s-4); }
.fact__value { font-family: var(--serif); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.35rem); line-height: 1.05; letter-spacing: -.015em; }
.fact__unit { font-family: var(--sans); font-size: .55em; color: var(--ink-muted); margin-inline-start: .25em; }
.fact__label { font-size: var(--fs-small); color: var(--ink-2); margin-block-start: var(--s-2); max-inline-size: 30ch; }
.fact--novalue .fact__value { font-family: var(--sans); font-size: var(--fs-h4); color: var(--ink-muted); font-style: italic; }

.layercard {
  display: grid; gap: var(--s-2); padding: var(--s-4) 0;
  border-block-start: 1px solid var(--line);
  grid-template-columns: 2.5rem 1fr; align-items: start;
}
.layercard__num { font-family: var(--mono); font-size: var(--fs-note); color: var(--ink-muted); padding-block-start: .3rem; }
.layercard__body > * + * { margin-block-start: var(--s-2); }
.layercard__title { font-family: var(--serif); font-size: var(--fs-h3); margin: 0; }
.layercard__text { font-size: var(--fs-small); color: var(--ink-2); max-inline-size: 52ch; margin: 0; }

.topiccard {
  display: grid; gap: var(--s-3); padding: var(--s-5) var(--s-4);
  background: var(--paper-raised); border: 1px solid var(--line);
  border-radius: var(--radius-lg); text-decoration: none; color: inherit;
  border-block-start: 3px solid var(--marker, var(--line-strong));
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
a.topiccard:hover { border-color: var(--line-strong); border-block-start-color: var(--marker, var(--ice)); transform: translateY(-2px); }
a.topiccard:hover .topiccard__title { color: var(--ice); }
.topiccard__title { font-family: var(--serif); font-size: var(--fs-h3); margin: 0; }
.topiccard__text { font-size: var(--fs-small); color: var(--ink-muted); margin: 0; }
.topiccard__foot { margin-block-start: auto; display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.topiccard__subs { font-family: var(--mono); font-size: var(--fs-note); color: var(--ink-muted); letter-spacing: .05em; }

.entrylist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.entrylist__item { border-block-start: 1px solid var(--line); }
.entrylist__item:last-child { border-block-end: 1px solid var(--line); }
/* One column by default: a long Russian state label must wrap under the title
   rather than widen the row and push the page sideways. */
.entrylist__link {
  display: grid; grid-template-columns: 1fr; gap: var(--s-2);
  align-items: baseline; padding: var(--s-4) 0; text-decoration: none; color: inherit;
  min-block-size: var(--tap);
}
.entrylist__link > *, .entrylist__inactive > * { min-inline-size: 0; }
.entrylist__link .chip, .entrylist__inactive .chip { justify-self: start; }
.entrylist__link:hover .entrylist__title { color: var(--ice); text-decoration: underline; }
.entrylist__title { font-family: var(--serif); font-size: var(--fs-h3); margin: 0; }
.entrylist__lead { grid-column: 1 / -1; font-size: var(--fs-small); color: var(--ink-muted); margin: 0; max-inline-size: 62ch; }
.entrylist__item--inactive { color: var(--ink-muted); }
.entrylist__inactive { display: grid; grid-template-columns: 1fr; gap: var(--s-2); align-items: baseline; padding: var(--s-4) 0; }

/* ---------- 10 ARTICLE --------------------------------------------------- */

.crumbs { font-size: var(--fs-note); color: var(--ink-muted); padding-block: var(--s-4) 0; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; }
.crumbs li::after { content: "/"; margin-inline-start: .35rem; color: var(--line-strong); }
.crumbs li:last-child::after { content: none; }
.crumbs a { color: var(--ink-muted); }
.crumbs a:hover { color: var(--ice); }

.arthead { padding-block: var(--s-5) var(--s-6); border-block-end: 1px solid var(--line); }
.arthead__title { max-inline-size: 20ch; }
.artlead { font-family: var(--serif); font-size: var(--fs-lead); line-height: 1.45; color: var(--ink-2); max-inline-size: 46ch; margin-block: var(--s-4) 0; }
.artmeta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-block-start: var(--s-5); font-family: var(--mono); font-size: var(--fs-note); color: var(--ink-muted); letter-spacing: .05em; }
.artmeta__k { text-transform: uppercase; }
.artmeta__v { color: var(--ink-2); }

/* The answer sits at the top and is never hidden behind a disclosure. */
.answer {
  border-inline-start: 3px solid var(--ice);
  background: var(--ice-wash); border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--s-5); margin-block: var(--s-6);
}
.answer__label { font-family: var(--mono); font-size: var(--fs-note); text-transform: uppercase; letter-spacing: .1em; color: var(--ice-strong); margin-block-end: var(--s-2); }
.answer__body { font-family: var(--serif); font-size: 1.06rem; line-height: 1.55; max-inline-size: 60ch; }
.answer__body > * + * { margin-block-start: var(--s-3); }

.artbody { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); padding-block: var(--s-6) var(--s-8); align-items: start; }

.toc { font-size: var(--fs-small); }
.toc__title { font-family: var(--mono); font-size: var(--fs-note); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted); margin-block-end: var(--s-3); }
.toc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; border-inline-start: 1px solid var(--line); }
.toc__list a { display: block; padding: .4rem 0 .4rem var(--s-3); margin-inline-start: -1px; border-inline-start: 2px solid transparent; text-decoration: none; color: var(--ink-2); }
.toc__list a:hover { color: var(--ice); }
.toc__list a[aria-current="true"] { border-inline-start-color: var(--ice); color: var(--ice-strong); font-weight: 600; }

details.toc--mobile { border: 1px solid var(--line); border-radius: var(--radius); padding: 0 var(--s-4); }
details.toc--mobile > summary { cursor: pointer; padding-block: .8rem; min-block-size: var(--tap); display: flex; align-items: center; font-size: var(--fs-small); font-weight: 600; }
details.toc--mobile > summary::-webkit-details-marker { display: none; }
details.toc--mobile > summary::after { content: ""; inline-size: .45em; block-size: .45em; margin-inline-start: auto; border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor; transform: rotate(45deg); }
details.toc--mobile[open] > summary::after { transform: rotate(-135deg); }
details.toc--mobile .toc__list { margin-block-end: var(--s-4); }

.prose h2 { scroll-margin-block-start: calc(var(--header-h) + 1.5rem); }
.prose h3 { scroll-margin-block-start: calc(var(--header-h) + 1.5rem); }

/* Footnote references and the notes list. */
.fnref {
  font-family: var(--mono); font-size: .72em; vertical-align: super; line-height: 0;
  color: var(--oxide); text-decoration: none; padding-inline: .12em;
}
.fnref:hover { color: var(--oxide-strong); text-decoration: underline; }
.notes { border-block-start: 1px solid var(--line); padding-block-start: var(--s-5); margin-block-start: var(--s-7); }
.notes ol { padding-inline-start: 1.5em; font-size: var(--fs-small); color: var(--ink-2); }
.notes li { margin-block-end: var(--s-3); }
.notes li:target { background: var(--oxide-wash); border-radius: var(--radius); }

.sourcecard {
  display: grid; gap: var(--s-2); padding: var(--s-4);
  border: 1px solid var(--line); border-inline-start: 3px solid var(--oxide);
  border-radius: 0 var(--radius) var(--radius) 0; background: var(--paper-raised);
}
.sourcecard__kind { font-family: var(--mono); font-size: var(--fs-note); text-transform: uppercase; letter-spacing: .1em; color: var(--oxide); }
.sourcecard__title { font-size: var(--fs-small); font-weight: 600; margin: 0; }
.sourcecard__link { font-family: var(--mono); font-size: var(--fs-note); word-break: break-all; }

.tablewrap { overflow-x: auto; max-inline-size: 100%; border: 1px solid var(--line); border-radius: var(--radius); }
.tablewrap table { inline-size: 100%; min-inline-size: 34rem; font-size: var(--fs-small); }
.tablewrap caption { caption-side: top; text-align: start; padding: var(--s-3) var(--s-4); font-size: var(--fs-note); color: var(--ink-muted); border-block-end: 1px solid var(--line); }
.tablewrap th, .tablewrap td { text-align: start; padding: .7rem var(--s-4); border-block-start: 1px solid var(--line); vertical-align: top; }
.tablewrap thead th { border-block-start: 0; font-family: var(--mono); font-size: var(--fs-note); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); font-weight: 500; }
.tablewrap tbody th { font-weight: 600; }

.related { display: grid; gap: var(--s-4); }
.relcard {
  display: grid; gap: var(--s-2); padding: var(--s-4);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--paper-raised); text-decoration: none; color: inherit;
}
a.relcard:hover { border-color: var(--ice); }
a.relcard:hover .relcard__title { color: var(--ice); }
.relcard__title { font-family: var(--serif); font-size: var(--fs-h4); margin: 0; }
.relcard__why { font-size: var(--fs-note); color: var(--ink-muted); margin: 0; }
.relcard--inactive { border-style: dashed; color: var(--ink-muted); }

.nextq {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4);
  padding: var(--s-5); border: 1px solid var(--control); border-radius: var(--radius-lg);
  background: var(--paper-sunk); margin-block-start: var(--s-6); text-decoration: none; color: inherit;
}
a.nextq:hover { border-color: var(--ice); }
.nextq__q { font-family: var(--serif); font-size: var(--fs-h3); margin: 0; }

/* ---------- 11 LISTS, CARDS, RESULTS ------------------------------------- */

.results { display: grid; gap: 0; }
.result { border-block-start: 1px solid var(--line); padding-block: var(--s-4); display: grid; gap: var(--s-2); }
.result:last-child { border-block-end: 1px solid var(--line); }
.result__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-3); }
.result__title { font-family: var(--serif); font-size: var(--fs-h3); margin: 0; }
.result__title a { text-decoration: none; color: inherit; }
.result__title a:hover { color: var(--ice); text-decoration: underline; }
.result__lead { font-size: var(--fs-small); color: var(--ink-2); margin: 0; max-inline-size: 66ch; }
.result__path { font-family: var(--mono); font-size: var(--fs-note); color: var(--ink-muted); letter-spacing: .04em; }

.filterbar { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin-block: var(--s-5); }
.filter {
  appearance: none; background: transparent; border: 1px solid var(--control);
  border-radius: 999px; padding: .35rem .8rem; min-block-size: 2.25rem;
  font-family: var(--mono); font-size: var(--fs-note); letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-muted);
}
.filter:hover { border-color: var(--ink-muted); color: var(--ink); }
.filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.countline { font-family: var(--mono); font-size: var(--fs-note); color: var(--ink-muted); letter-spacing: .06em; }


/* ---------- 11b TOPIC INDEX AND SECTION NAVIGATION ----------------------- */
/* Built from the existing tokens and components: a disclosure per menu entry,
   the section blurb already used in the menu panel, and the same chip and
   entrylist as everywhere else. No second visual language. */

.topicbar {
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5);
  align-items: flex-end; justify-content: space-between;
  margin-block-end: var(--s-5);
}
.topicbar__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.field--inline { flex: 1 1 18rem; max-inline-size: 26rem; }
.field--inline input { inline-size: 100%; }

.topictree { display: grid; gap: 0; }

.topicgroup { border-block-start: 1px solid var(--line); }
.topicgroup:last-of-type { border-block-end: 1px solid var(--line); }
.topicgroup[hidden] { display: none; }
.topicgroup > summary {
  list-style: none; cursor: pointer; min-block-size: var(--tap);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4);
  padding-block: var(--s-4);
}
.topicgroup > summary::-webkit-details-marker { display: none; }
.topicgroup > summary::before {
  content: ""; inline-size: 3px; align-self: stretch; flex: none;
  background: var(--marker, var(--line-strong));
}
.topicgroup > summary::after {
  content: ""; inline-size: .45em; block-size: .45em; margin-inline-start: auto;
  border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform var(--dur) var(--ease);
  align-self: center;
}
.topicgroup[open] > summary::after { transform: rotate(-135deg); }
.topicgroup > summary:hover .topicgroup__name { color: var(--ice); }
.topicgroup__name { font-family: var(--serif); font-size: var(--fs-h3); font-weight: 600; }
.topicgroup__meta { font-size: var(--fs-note); color: var(--ink-muted); flex: 1 1 14rem; }
.topicgroup__body {
  padding-inline-start: calc(3px + var(--s-4)); padding-block-end: var(--s-5);
  display: grid; gap: var(--s-5);
}

.topictree__section[hidden] { display: none; }
.topictree__title { font-family: var(--serif); font-size: var(--fs-h4); margin: 0 0 var(--s-1); }
.topictree__blurb { font-size: var(--fs-small); color: var(--ink-muted); margin: 0 0 var(--s-3); max-inline-size: 62ch; }
.topictree__subs { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; gap: 0; }
.topictree__sub {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-3);
  padding-block: .55rem; border-block-start: 1px solid var(--line);
  font-size: var(--fs-small);
}
.topictree__sub[hidden] { display: none; }
.topictree__subname { color: var(--ink-2); }
.topictree__link { font-weight: 600; }
.topictree__link::before { content: "→ "; color: var(--ink-muted); }

/* The subtopic list of one section, used on a hub page. */
.subtopics { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.subtopic {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-3);
  padding-block: var(--s-3); border-block-start: 1px solid var(--line);
}
.subtopic:last-child { border-block-end: 1px solid var(--line); }
.subtopic__name { font-family: var(--serif); font-size: var(--fs-h4); }
.subtopic__link { font-size: var(--fs-small); font-weight: 600; }
.subtopic__link::before { content: "→ "; color: var(--ink-muted); }


/* ---------- 11c OBJECT, PERSON AND EVENT CARDS --------------------------- */
/* A row of the card is a label and either a value or a stated absence. The
   absent state is a first-class row, not a gap: it says what is missing and
   why, in the reader's terms, and it never carries a plausible substitute. */

.cardfacts { display: grid; gap: 0; margin-block: var(--s-5); }
.cardfact {
  display: grid; gap: var(--s-1) var(--s-5);
  padding-block: var(--s-4); border-block-start: 1px solid var(--line);
}
.cardfacts .cardfact:last-child { border-block-end: 1px solid var(--line); }
.cardfact__k {
  font-family: var(--mono); font-size: var(--fs-note);
  text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted);
}
.cardfact__v { font-family: var(--serif); font-size: var(--fs-h4); color: var(--ink); }
.cardfact__v a { font-family: var(--serif); }
.cardfact__why { font-size: var(--fs-small); color: var(--ink-muted); max-inline-size: 62ch; margin: 0; }
.cardfact--none .cardfact__v { font-family: var(--sans); font-style: italic; color: var(--ink-muted); }

@media (min-width: 48em) {
  .cardfact { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); }
  .cardfact__k { grid-row: span 2; }
}

/* The three-entity separator used on the person card: person, publication and
   the event they belong to are shown as three distinct things, not one story. */
.entities { display: grid; gap: var(--s-4); margin-block: var(--s-5); }
.entity {
  border: 1px solid var(--line); border-inline-start: 3px solid var(--marker, var(--line-strong));
  border-radius: 0 var(--radius) var(--radius) 0; padding: var(--s-4);
  background: var(--paper-raised);
}
.entity__kind {
  font-family: var(--mono); font-size: var(--fs-note); text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-muted);
}
.entity__name { font-family: var(--serif); font-size: var(--fs-h4); margin: var(--s-1) 0 var(--s-2); }
.entity__note { font-size: var(--fs-small); color: var(--ink-2); margin: 0; }
@media (min-width: 56em) { .entities { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Service states get the calm centred frame already used for an empty result. */
.service { max-inline-size: 44rem; margin-inline: auto; padding-block: var(--s-8) var(--s-6); }
.service__kind {
  font-family: var(--mono); font-size: var(--fs-note); text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-muted);
}
.service__title { font-family: var(--serif); font-size: var(--fs-h1); margin-block: var(--s-3) var(--s-4); }
.service__lead { font-family: var(--serif); font-size: var(--fs-lead); color: var(--ink-2); }
.service__ways { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; gap: 0; }
.service__ways li { border-block-start: 1px solid var(--line); }
.service__ways li:last-child { border-block-end: 1px solid var(--line); }
.service__ways a {
  display: block; padding-block: var(--s-4); min-block-size: var(--tap);
  font-family: var(--serif); font-size: var(--fs-h4); text-decoration: none;
}
.service__ways a:hover { text-decoration: underline; }
.service__ways .muted { display: block; font-family: var(--sans); font-size: var(--fs-small); }

/* ---------- 12 FOOTER ---------------------------------------------------- */

.footer { padding-block: var(--s-8) var(--s-6); margin-block-start: var(--s-8); }
.footer__cols { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }
.footer__title { font-family: var(--mono); font-size: var(--fs-note); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted); margin-block-end: var(--s-3); }
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: var(--fs-small); }
.footer__list a { text-decoration: none; }
.footer__list a:hover { text-decoration: underline; }

.footer__bottom { margin-block-start: var(--s-7); padding-block-start: var(--s-5); border-block-start: 1px solid var(--line-deep); display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); align-items: center; font-size: var(--fs-note); color: var(--deep-muted); }
.footer__bottom .langswitch__opt { color: var(--ink-muted); }
.footer__bottom .langswitch__opt[aria-current="true"] { background: var(--deep-ink); color: var(--deep); }

.themeswitch { display: inline-flex; border: 1px solid #45525a; border-radius: var(--radius); overflow: hidden; }
.themeswitch button {
  appearance: none; background: transparent; border: 0; color: var(--ink-muted);
  padding: .35rem .6rem; min-block-size: 2rem; font-family: var(--mono);
  font-size: var(--fs-note); letter-spacing: .06em;
}
.themeswitch button[aria-pressed="true"] { background: var(--deep-ink); color: var(--deep); }
.themeswitch button:hover:not([aria-pressed="true"]) { color: var(--ink); }

/* ---------- 13 STATES AND FORMS ------------------------------------------ */

.callout {
  border: 1px solid var(--control); border-inline-start-width: 3px;
  border-radius: 0 var(--radius) var(--radius) 0; padding: var(--s-4);
  background: var(--paper-raised); font-size: var(--fs-small);
}
.callout--scope { border-inline-start-color: var(--oxide); }
.callout--demo  { border-inline-start-color: var(--ice); }
.callout__title { font-family: var(--mono); font-size: var(--fs-note); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted); margin-block-end: var(--s-2); }

.empty { text-align: center; padding: var(--s-8) var(--s-4); border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); }
.empty__title { font-family: var(--serif); font-size: var(--fs-h2); margin-block-end: var(--s-3); }
.empty__help { color: var(--ink-muted); max-inline-size: 44ch; margin-inline: auto; }

.field { display: grid; gap: var(--s-2); max-inline-size: 32rem; }
.field__label { font-size: var(--fs-small); font-weight: 600; }
.field__hint { font-size: var(--fs-note); color: var(--ink-muted); }
.field input, .field textarea, .field select {
  background: var(--paper-raised); border: 1px solid var(--control);
  border-radius: var(--radius); padding: .6rem .8rem; min-block-size: var(--tap);
}
.field--error input { border-color: var(--oxide); }
.field__error { font-size: var(--fs-note); color: var(--oxide-strong); display: flex; gap: .4rem; align-items: baseline; }
.field__error::before { content: "!"; font-family: var(--mono); font-weight: 700; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-block-size: var(--tap); padding: .6rem 1.15rem; border-radius: var(--radius);
  font-size: var(--fs-small); font-weight: 600; text-decoration: none;
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
}
.btn:hover { background: var(--ice-strong); border-color: var(--ice-strong); color: #fff; }
.btn--quiet { background: transparent; color: var(--ink-2); border-color: var(--control); }
.btn--quiet:hover { background: var(--paper-sunk); color: var(--ink); border-color: var(--ink-muted); }
.btn[aria-disabled="true"], .btn:disabled { opacity: .5; pointer-events: none; }

.inactive { color: var(--ink-muted); text-decoration: none; border-block-end: 1px dotted var(--line-strong); cursor: default; }

/* ---------- 14 COMPONENT CATALOGUE --------------------------------------- */

.spec { border-block-start: 1px solid var(--line); padding-block: var(--s-6); }
.spec__head { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: baseline; margin-block-end: var(--s-4); }
.spec__id { font-family: var(--mono); font-size: var(--fs-note); color: var(--ink-muted); letter-spacing: .08em; }
.spec__title { font-family: var(--serif); font-size: var(--fs-h3); margin: 0; }
.spec__note { font-size: var(--fs-small); color: var(--ink-muted); max-inline-size: 62ch; margin: 0; }
.spec__demo { display: grid; gap: var(--s-5); margin-block-start: var(--s-4); }
.spec__pair { display: grid; gap: var(--s-3); }
.spec__lang { font-family: var(--mono); font-size: var(--fs-note); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
/* A stage is the designated container for a sample that is wider than the
   viewport — the desktop navigation bar shown on a phone, for instance. The
   sample scrolls inside its own frame; the catalogue page itself never does. */
.spec__stage {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--s-4); background: var(--paper);
  overflow-x: auto; max-inline-size: 100%;
}
.spec__pair > *, .spec__stage > * { min-inline-size: 0; }
.swatchgrid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); }
.swatch { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.swatch__chip { block-size: 3.25rem; }
.swatch__meta { padding: .5rem .6rem; font-family: var(--mono); font-size: var(--fs-note); color: var(--ink-muted); }
.swatch__name { display: block; color: var(--ink); }

/* ---------- 15 RESPONSIVE ------------------------------------------------ */

@media (min-width: 40em) {
  .facts { grid-template-columns: repeat(2, 1fr); }
  .entrylist__link, .entrylist__inactive {
    grid-template-columns: 1fr auto; gap: var(--s-2) var(--s-4);
  }
}

@media (min-width: 64em) {
  /* Eight entries are not squeezed into one line at any width. The bar keeps
     identity and tools on the first row and gives the navigation a row of its
     own, so a long Russian label never pushes the search out of reach. */
  :root { --header-h: 7rem; }
  .masthead__bar { flex-wrap: wrap; align-items: center; }
  .navbar { display: block; flex: 1 0 100%; order: 3;
            border-block-start: 1px solid var(--line); margin-block-start: .1rem; }
  .navbar__list { gap: .15rem; margin-inline-start: -.6rem; }
  .navbar__btn { padding-block: .65rem; font-size: .92rem; }
  .panel { inset-block-start: calc(100% + .2rem); }
  .drawer { display: none; }
  .searchrow { display: none; }
  .masthead__tools { order: 2; }
  .masthead__tools .search { display: block; inline-size: 15rem; }
  .facts { grid-template-columns: repeat(5, 1fr); }
  .hero__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .artbody { grid-template-columns: minmax(0, 14rem) minmax(0, 48rem); justify-content: start; }
  .artbody__aside { position: sticky; inset-block-start: calc(var(--header-h) + 1.5rem); align-self: start; }
  .toc--mobile { display: none; }
  .band { }
  .band--railed .rail { display: block; }
  .related { grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
  .spec__demo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 90em) {
  .masthead__tools .search { inline-size: 19rem; }
}

/* Below 64em the search moves to its own full-width row so it stays permanent
   and legible rather than being hidden behind an icon. */
@media (max-width: 63.99em) {
  .masthead__bar { flex-wrap: wrap; }
  .toc--desktop { display: none; }
  .artbody__aside { order: -1; }
}

/* At 320 px the eight-entry drawer and the long Russian titles still need to
   flow, so the display size and gutters step down rather than overflow. */
@media (max-width: 22.5em) {
  :root { --gutter: .875rem; --fs-display: 2.1rem; }
  .brand__kind { display: none; }
}

/* ---------- 16 MOTION, CONTRAST, PRINT ----------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  .chip, .filter, .topiccard, .sourcecard, .callout { border: 1px solid CanvasText; }
  .chip--ready::before { background: CanvasText; }
  .filter[aria-pressed="true"] { forced-color-adjust: none; }
  .marker, .eyebrow::before { background: CanvasText; }
}

@media print {
  .masthead, .footer, .toc, .search, .nextq, .skiplink { display: none !important; }
  body { background: #fff; color: #000; }
  .band { padding-block: 1rem; }
  .prose { max-inline-size: none; }
  a::after { content: " (" attr(href) ")"; font-size: .75em; word-break: break-all; }
  .fnref::after { content: none; }
}