/* 00-fonts.css */
/* Golos Text and Literata (SIL Open Font License 1.1), self-hosted from Google Fonts on 2026-11-07: no third-party
   connection and no render-blocking stylesheet before the first paint. Only the subsets the site uses; the browser
   downloads a file only when the page has characters of its unicode-range. */
/* cyrillic-ext */
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/q5uCsoe9Lv5t7Meb31EcEx58hLxR.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
/* cyrillic */
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/q5uCsoe9Lv5t7Meb31EcExd8hLxR.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
/* latin-ext */
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/q5uCsoe9Lv5t7Meb31EcEx18hLxR.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/q5uCsoe9Lv5t7Meb31EcExN8hA.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; }
/* cyrillic-ext */
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/q5uCsoe9Lv5t7Meb31EcEx58hLxR.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
/* cyrillic */
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/q5uCsoe9Lv5t7Meb31EcExd8hLxR.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
/* latin-ext */
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/q5uCsoe9Lv5t7Meb31EcEx18hLxR.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/q5uCsoe9Lv5t7Meb31EcExN8hA.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; }
/* cyrillic-ext */
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/q5uCsoe9Lv5t7Meb31EcEx58hLxR.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
/* cyrillic */
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/q5uCsoe9Lv5t7Meb31EcExd8hLxR.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
/* latin-ext */
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/q5uCsoe9Lv5t7Meb31EcEx18hLxR.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/q5uCsoe9Lv5t7Meb31EcExN8hA.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; }
/* cyrillic-ext */
@font-face { font-family: 'Literata'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/or3yQ6P12-iJxAIgLYT1PLs1a-t7PU0AbeE9KK5Z5ClqOw.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
/* cyrillic */
@font-face { font-family: 'Literata'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/or3yQ6P12-iJxAIgLYT1PLs1a-t7PU0AbeE9KK5Q5ClqOw.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
/* latin-ext */
@font-face { font-family: 'Literata'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/or3yQ6P12-iJxAIgLYT1PLs1a-t7PU0AbeE9KK5a5ClqOw.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */
@font-face { font-family: 'Literata'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/or3yQ6P12-iJxAIgLYT1PLs1a-t7PU0AbeE9KK5U5Ck.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; }
/* cyrillic-ext */
@font-face { font-family: 'Literata'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/or3PQ6P12-iJxAIgLa78DkTtAoDhk0oVpaK3YLanFLHpPf2TbLi4J_zWTFCW.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
/* cyrillic */
@font-face { font-family: 'Literata'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/or3PQ6P12-iJxAIgLa78DkTtAoDhk0oVpaK3YLanFLHpPf2TbLi4J_XWTFCW.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
/* latin-ext */
@font-face { font-family: 'Literata'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/or3PQ6P12-iJxAIgLa78DkTtAoDhk0oVpaK3YLanFLHpPf2TbLi4J__WTFCW.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */
@font-face { font-family: 'Literata'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/or3PQ6P12-iJxAIgLa78DkTtAoDhk0oVpaK3YLanFLHpPf2TbLi4J_HWTA.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; }
/* cyrillic-ext */
@font-face { font-family: 'Literata'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/or3PQ6P12-iJxAIgLa78DkTtAoDhk0oVpaK3YLanFLHpPf2TbLi4J_zWTFCW.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
/* cyrillic */
@font-face { font-family: 'Literata'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/or3PQ6P12-iJxAIgLa78DkTtAoDhk0oVpaK3YLanFLHpPf2TbLi4J_XWTFCW.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
/* latin-ext */
@font-face { font-family: 'Literata'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/or3PQ6P12-iJxAIgLa78DkTtAoDhk0oVpaK3YLanFLHpPf2TbLi4J__WTFCW.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */
@font-face { font-family: 'Literata'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/or3PQ6P12-iJxAIgLa78DkTtAoDhk0oVpaK3YLanFLHpPf2TbLi4J_HWTA.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; }

/* 00-tokens.css */
/* MyPsy design tokens. Paper and ink with one calm accent (deep teal) and a warm second voice (ochre).
   Layout concept: a magazine page. A 12-column grid, hairline rules, large serif headlines, sans for interface.

   The dark palette is the reference look. The light one mirrors it on warm linen paper: the page is the linen, a
   card is lighter than the page so it lifts off it (as paper-2 does in the dark palette), the ink is the dark
   palette's own paper colour, and the mint and peach fills are strong enough to be seen. The site header keeps the
   dark palette in both themes (class theme-dark in layout.mjs). */
:root {
  --paper: #EDE2CE;
  --paper-2: #F9F2E4;
  --paper-3: #E0D3BA;
  --ink: #121819;
  --ink-2: #2F3C3B;
  --muted: #525E5B;
  --rule: #CDBFA5;
  --rule-strong: #121819;
  --accent: #17524E;
  --accent-ink: #0F3B38;
  --accent-soft: #C6E0DA;
  --on-accent: #FFFFFF;
  --warm: #94440F;
  --warm-soft: #F0D0B2;
  --danger: #8A2A18;
  --danger-soft: #F4D3C8;
  --ok: #2A6335;
  --shade: rgba(16, 24, 25, .5);

  --serif: "Literata", "PT Serif", Georgia, "Times New Roman", serif;
  --sans: "Golos Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --fs-display: clamp(2.5rem, 4.6vw + 1rem, 4.75rem);
  --fs-h1: clamp(2.125rem, 3.2vw + 1rem, 3.75rem);
  --fs-h2: clamp(1.5rem, 1.3vw + 1.05rem, 2.125rem);
  --fs-h3: clamp(1.1875rem, .4vw + 1.05rem, 1.375rem);
  --fs-dek: clamp(1.1875rem, .7vw + 1rem, 1.5rem);
  --fs-body: 1.0625rem;
  --fs-read: clamp(1.125rem, .25vw + 1.06rem, 1.25rem);
  --fs-ui: 1rem;
  --fs-small: .875rem;
  --fs-micro: .75rem;

  --measure: 42rem;
  --wrap: 78rem;
  --gutter: clamp(1rem, 3.2vw, 2.5rem);
  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: .75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: 6.5rem;
  --radius: 3px;
  --radius-l: 10px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121819;
    --paper-2: #182122;
    --paper-3: #1E2A2B;
    --ink: #E9EEEC;
    --ink-2: #C5CFCC;
    --muted: #9FACA8;
    --rule: #2B3839;
    --rule-strong: #E9EEEC;
    --accent: #8FC5BF;
    --accent-ink: #BFE0DC;
    --accent-soft: #1F3533;
    --on-accent: #0E1515;
    --warm: #E9B48C;
    --warm-soft: #3A2A1E;
    --danger: #F2A58F;
    --danger-soft: #3A1F19;
    --ok: #9BD3A6;
    --shade: rgba(0, 0, 0, .62);
    color-scheme: dark;
  }
}

/* `.theme-dark` gives one block the dark palette whatever the theme of the page is: the front page hero uses it */
:root[data-theme="dark"], .theme-dark {
  --paper: #121819;
  --paper-2: #182122;
  --paper-3: #1E2A2B;
  --ink: #E9EEEC;
  --ink-2: #C5CFCC;
  --muted: #9FACA8;
  --rule: #2B3839;
  --rule-strong: #E9EEEC;
  --accent: #8FC5BF;
  --accent-ink: #BFE0DC;
  --accent-soft: #1F3533;
  --on-accent: #0E1515;
  --warm: #E9B48C;
  --warm-soft: #3A2A1E;
  --danger: #F2A58F;
  --danger-soft: #3A1F19;
  --ok: #9BD3A6;
  --shade: rgba(0, 0, 0, .62);
  color-scheme: dark;
}

/* Type pairs for the styleguide comparison. The default pair needs no attribute. */
:root[data-type="b"] {
  --serif: "Source Serif 4", "PT Serif", Georgia, serif;
  --sans: "Onest", "Segoe UI", system-ui, sans-serif;
}
:root[data-type="c"] {
  --serif: "Playfair Display", "Literata", Georgia, serif;
  --sans: "Golos Text", "Segoe UI", system-ui, sans-serif;
}

/* 10-base.css */
/* Base: reset, typography, links, buttons, forms, small shared pieces. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  hanging-punctuation: first;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.12; margin: 0; text-wrap: balance; font-optical-sizing: auto; letter-spacing: -.012em; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: .06em; text-underline-offset: .18em; }
a:hover { color: var(--accent-ink); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--accent-soft); color: var(--ink); }
hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }
em, i, cite, q { font-style: italic; }
mark.todo { background: var(--warm-soft); color: var(--warm); font-family: var(--sans); font-size: .78em; font-style: normal; padding: .1em .45em; border-radius: var(--radius); white-space: nowrap; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: .6rem 1rem; z-index: 100; }
.skip:focus { left: var(--gutter); top: .5rem; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* editorial type roles */
.h-display { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -.022em; }
.h1 { font-size: var(--fs-h1); line-height: 1.06; letter-spacing: -.018em; }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -.005em; }
.kicker { font-family: var(--sans); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--warm); }
.kicker a { text-decoration: none; }
.kicker a:hover { text-decoration: underline; }
.dek { font-family: var(--serif); font-style: italic; font-size: var(--fs-dek); line-height: 1.38; color: var(--ink-2); max-width: 40rem; }
.meta { font-size: var(--fs-small); color: var(--muted); }
.meta a { color: inherit; }
.lead-text { font-family: var(--serif); font-size: var(--fs-read); line-height: 1.6; max-width: var(--measure); }
.muted { color: var(--muted); }
.small { font-size: var(--fs-small); }
.micro { font-size: var(--fs-micro); }
.serif { font-family: var(--serif); }
.nowrap { white-space: nowrap; }
.tnum { font-variant-numeric: tabular-nums; }

/* rules */
.rule { border-top: 1px solid var(--rule); }
.rule-strong { border-top: 2px solid var(--rule-strong); }
.rule-double { border-top: 3px double var(--rule-strong); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.875rem; padding: .6rem 1.25rem; border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); font-family: var(--sans); font-size: var(--fs-ui); font-weight: 600; text-decoration: none; border-radius: var(--radius); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.btn:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--on-accent); }
.btn-ghost { background: transparent; color: var(--accent-ink); }
.btn-ghost:hover { background: var(--accent-soft); color: var(--accent-ink); }
.btn-quiet { background: transparent; border-color: var(--rule); color: var(--ink); font-weight: 500; }
.btn-quiet:hover { background: var(--paper-3); border-color: var(--ink-2); color: var(--ink); }
.btn-small { min-height: 2.25rem; padding: .35rem .85rem; font-size: var(--fs-small); }
.btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent); }
.link-arrow { font-family: var(--sans); font-size: var(--fs-small); font-weight: 600; color: var(--accent-ink); text-decoration: none; }
.link-arrow::after { content: " →"; }
.link-arrow:hover { text-decoration: underline; }

/* chips and tags */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.125rem; padding: .25rem .8rem; border: 1px solid var(--rule); border-radius: 999px; background: transparent; color: var(--ink); font-family: var(--sans); font-size: var(--fs-small); text-decoration: none; cursor: pointer; }
.chip:hover { border-color: var(--ink-2); color: var(--ink); }
.chip[aria-pressed="true"], .chip.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.chip-count { color: var(--muted); font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] .chip-count { color: inherit; opacity: .8; }
.badge { display: inline-block; font-family: var(--sans); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: .15rem .5rem; border: 1px solid currentColor; border-radius: var(--radius); color: var(--muted); }
.badge-warm { color: var(--warm); }
.badge-danger { color: var(--danger); }
.badge-accent { color: var(--accent-ink); }
.demo-flag { display: inline-block; font-family: var(--sans); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; background: var(--warm-soft); color: var(--warm); padding: .2rem .55rem; border-radius: var(--radius); }

/* forms */
label { font-family: var(--sans); font-size: var(--fs-small); font-weight: 500; }
.field { display: grid; gap: .35rem; }
.input, select.input, textarea.input { width: 100%; min-height: 2.875rem; padding: .55rem .8rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-2); color: var(--ink); font: inherit; }
.input:focus { border-color: var(--accent); }
.input::placeholder { color: var(--muted); }
.check { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; }
.check input { margin-top: .3rem; accent-color: var(--accent); width: 1.05rem; height: 1.05rem; }

/* notes */
.note { font-size: var(--fs-small); color: var(--muted); border-left: 2px solid var(--rule); padding-left: .9rem; max-width: 46rem; }
.note-strong { border-left-color: var(--warm); color: var(--ink-2); }
.empty { padding: var(--s-6) 0; color: var(--muted); font-family: var(--serif); font-style: italic; font-size: var(--fs-h3); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  .site-head, .site-foot, .no-print, .search-dlg, .drawer { display: none !important; }
  body { background: #fff; color: #000; }
}

/* 20-layout.css */
/* Shell: preview bar, utility row, masthead, rubric navigation, drawer, search dialog, footer, section grid. */
.preview-bar { background: var(--ink); color: var(--paper); font-size: var(--fs-micro); letter-spacing: .04em; text-align: center; padding: .3rem var(--gutter); }
.preview-bar a { color: inherit; }

.util { display: flex; align-items: center; gap: 1.25rem; min-height: 2.5rem; font-size: var(--fs-small); border-bottom: 1px solid var(--rule); }
/* links of the top row are tall enough for a finger: the help link is the one a person in distress looks for */
.util a { text-decoration: none; color: var(--ink-2); display: inline-flex; align-items: center; min-height: 2.75rem; }
.util a:hover { color: var(--accent-ink); text-decoration: underline; }
.util-help { color: var(--danger) !important; font-weight: 600; }
.util-gap { flex: 1; }
.util-count { display: inline-block; min-width: 1.3rem; padding: 0 .35rem; margin-left: .25rem; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: var(--fs-micro); font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
/* the theme switch: a small track with a moon and a sun, the knob sits under the active one. Dark is the default. */
.theme-sw { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; align-items: center; justify-items: center; width: 3.5rem; height: 1.75rem; padding: 0 .15rem; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper-2); color: var(--muted); cursor: pointer; }
.theme-sw:hover { border-color: var(--accent); }
.theme-sw svg { position: relative; z-index: 1; width: .95rem; height: .95rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: color .2s; }
.theme-sw-knob { position: absolute; top: .15rem; left: .15rem; width: 1.5rem; height: 1.35rem; border-radius: 999px; background: var(--accent-soft); transition: translate .22s cubic-bezier(.2, .7, .2, 1); }
.theme-sw svg:first-of-type { color: var(--accent-ink); }
:root[data-theme="light"] .theme-sw-knob { translate: 1.6rem 0; }
:root[data-theme="light"] .theme-sw svg:first-of-type { color: var(--muted); }
:root[data-theme="light"] .theme-sw svg:last-of-type { color: var(--accent-ink); }

.mast { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding-block: clamp(1rem, 2.4vw, 1.9rem) clamp(.8rem, 1.6vw, 1.2rem); }
.mast-side { display: flex; align-items: center; gap: .75rem; }
.mast-side.end { justify-content: flex-end; }
.wordmark { display: block; font-family: var(--serif); font-weight: 600; font-size: clamp(2.1rem, 4.4vw, 3.6rem); line-height: 1; letter-spacing: -.035em; text-decoration: none; color: var(--ink); text-align: center; }
.wordmark:hover { color: var(--ink); }
.wordmark i { font-weight: 400; color: var(--accent); }
.mast-tag { grid-column: 1 / -1; text-align: center; font-family: var(--serif); font-style: italic; color: var(--muted); font-size: var(--fs-small); margin-top: -.35rem; }
.mast-btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .45rem .9rem; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper-2); cursor: pointer; font-size: var(--fs-small); color: var(--ink-2); text-decoration: none; }
.mast-btn:hover { border-color: var(--ink-2); color: var(--ink); }
.mast-btn svg { width: 1.05rem; height: 1.05rem; flex: none; }
.search-open { min-width: min(17rem, 100%); justify-content: flex-start; color: var(--muted); }

.rubrics { border-top: 2px solid var(--rule-strong); border-bottom: 1px solid var(--rule); }
.rubrics-row { display: flex; gap: clamp(.9rem, 1.9vw, 1.75rem); overflow-x: auto; scrollbar-width: none; padding-block: .1rem; }
.rubrics-row > :first-child { margin-left: auto; }
.rubrics-row > :last-child { margin-right: auto; }
.rubrics-row::-webkit-scrollbar { display: none; }
.rubrics-row a { flex: none; padding: .7rem 0 .62rem; font-size: .9375rem; font-weight: 500; text-decoration: none; color: var(--ink); border-bottom: 2px solid transparent; white-space: nowrap; }
.rubrics-row a:hover { border-bottom-color: var(--rule); color: var(--ink); }
.rubrics-row a[aria-current="page"], .rubrics-row a[aria-current="true"] { border-bottom-color: var(--accent); color: var(--accent-ink); }
.rubrics-row .all { color: var(--muted); }
.site-head.is-stuck .rubrics { position: sticky; top: env(safe-area-inset-top, 0px); }

/* drawer with every topic */
.drawer { border: 0; padding: 0; margin: 0; max-width: none; max-height: none; width: min(34rem, 100vw); height: 100dvh; background: var(--paper); color: var(--ink); overflow-y: auto; }
.drawer::backdrop { background: var(--shade); }
.drawer-in { padding: 1.25rem var(--gutter) 3rem; display: grid; gap: 1.5rem; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.drawer h2 { font-size: 1.5rem; }
.drawer-rubric { border-top: 1px solid var(--rule); padding-top: .9rem; }
.drawer-rubric > a { font-family: var(--serif); font-size: 1.25rem; text-decoration: none; }
.drawer-topics { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .45rem; }
.drawer-topics a { font-size: var(--fs-small); color: var(--ink-2); text-decoration: none; }
.drawer-topics a:hover { text-decoration: underline; }
.icon-btn { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--rule); border-radius: 999px; background: none; cursor: pointer; }
.icon-btn:hover { border-color: var(--ink-2); }
.icon-btn svg { width: 1.1rem; height: 1.1rem; }

/* search dialog */
.search-dlg { border: 0; padding: 0; width: min(46rem, calc(100vw - 2rem)); max-height: min(44rem, calc(100dvh - 2rem)); margin: clamp(1rem, 7vh, 5rem) auto auto; background: var(--paper); color: var(--ink); border-radius: var(--radius-l); overflow: hidden; }
.search-dlg[open] { display: flex; flex-direction: column; }
.search-dlg::backdrop { background: var(--shade); }
.search-top { display: flex; gap: .75rem; align-items: center; padding: 1rem 1.1rem; border-bottom: 1px solid var(--rule); }
.search-input { flex: 1; min-width: 0; border: 0; background: none; font-family: var(--serif); font-size: clamp(1.2rem, 2.4vw, 1.6rem); color: var(--ink); padding: .3rem 0; }
.search-input:focus { outline: none; }
.search-input::placeholder { color: var(--muted); font-style: italic; }
.search-body { overflow-y: auto; padding: 1rem 1.1rem 1.4rem; display: grid; gap: 1.1rem; }
.search-hint { font-size: var(--fs-small); color: var(--muted); }
.search-res { display: grid; }
.search-item { display: grid; gap: .2rem; padding: .85rem 0; border-top: 1px solid var(--rule); text-decoration: none; }
.search-item:first-child { border-top: 0; }
.search-item b { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; line-height: 1.2; }
.search-item:hover b { color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: 1px; }
.search-path { font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--warm); font-weight: 600; }
.search-why { font-size: var(--fs-small); color: var(--muted); }
.search-why q { font-family: var(--serif); color: var(--ink-2); }
.search-crisis { background: var(--danger-soft); border-left: 3px solid var(--danger); padding: 1rem 1.1rem; display: grid; gap: .5rem; }
.search-crisis b { font-family: var(--serif); font-weight: 400; font-size: 1.25rem; }

/* generic page sections */
main { display: block; }
.page-head { padding-block: clamp(1.75rem, 4vw, 3.25rem) clamp(1.25rem, 2.5vw, 2rem); display: grid; gap: .9rem; }
.page-head .dek { max-width: 46rem; }
.crumbs { display: flex; flex-wrap: wrap; gap: .4rem; font-size: var(--fs-small); color: var(--muted); }
.crumbs a { color: inherit; text-decoration: none; padding-block: .7rem; }
/* a phone number in the text: one piece, easy to hit */
a.tel { white-space: nowrap; font-weight: 600; padding-block: .6em; }
.crumbs a:hover { text-decoration: underline; }
.crumbs li + li::before { content: "/"; margin-right: .4rem; color: var(--rule); }
.sec { padding-block: clamp(1.75rem, 3.6vw, 3rem); }
.sec + .sec { border-top: 1px solid var(--rule); }
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem; margin-bottom: clamp(1rem, 2vw, 1.6rem); }
.sec-head .h2 { max-width: 40rem; }
.sec-head p { color: var(--muted); max-width: 38rem; }
.sec-flag { border-top: 2px solid var(--rule-strong); padding-top: .7rem; }
.band { background: var(--paper-3); }
.band-ink { background: var(--ink); color: var(--paper); }
.band-ink .muted, .band-ink .meta { color: color-mix(in srgb, var(--paper) 72%, transparent); }
.band-ink a:hover { color: var(--paper); }

.grid { display: grid; gap: clamp(1.25rem, 2.6vw, 2.5rem); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-main { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.g-aside { grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem); }
.grid > * { min-width: 0; }
.col-rule > * + * { border-left: 1px solid var(--rule); padding-left: clamp(1.25rem, 2.6vw, 2.5rem); }
.stack { display: grid; gap: var(--s-4); align-content: start; }
.stack-l { display: grid; gap: var(--s-6); align-content: start; }
.row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

@media (max-width: 60rem) {
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-main, .g-aside { grid-template-columns: minmax(0, 1fr); }
  .g-main.col-rule > * + *, .g-aside.col-rule > * + * { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 1.5rem; }
}
@media (max-width: 40rem) {
  .g-2, .g-3, .g-4 { grid-template-columns: minmax(0, 1fr); }
  .col-rule > * + * { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 1.25rem; }
  .mast { grid-template-columns: auto 1fr auto; }
  .wordmark { text-align: left; }
  .mast-tag { display: none; }
  .search-open { min-width: 0; }
  .search-open span, .menu-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .mast-btn { padding: 0; width: 2.75rem; justify-content: center; }
  .rubrics-row { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .rubrics-row > :first-child { margin-left: 0; }
  .util { gap: .9rem; }
  .util .util-hide { display: none; }
}

/* footer */
.site-foot { margin-top: clamp(3rem, 7vw, 6rem); border-top: 3px double var(--rule-strong); padding-block: clamp(2rem, 4vw, 3.25rem) 2rem; }
.foot-grid { display: grid; grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
.foot-brand .wordmark { text-align: left; font-size: 2.2rem; }
.foot-brand p { margin-top: .8rem; color: var(--muted); font-size: var(--fs-small); max-width: 24rem; }
.foot-col h2 { font-family: var(--sans); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .8rem; }
.foot-col li + li { margin-top: .45rem; }
.foot-col a { text-decoration: none; font-size: .9375rem; }
.foot-col a:hover { text-decoration: underline; }
.foot-legal { margin-top: 2.25rem; padding-top: 1.1rem; border-top: 1px solid var(--rule); display: grid; gap: .5rem; font-size: var(--fs-small); color: var(--muted); }
@media (max-width: 52rem) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 30rem) { .foot-grid { grid-template-columns: minmax(0, 1fr); } }

/* 30-components.css */
/* Editorial components. Lists are built from type, rules and whitespace; cards are kept for people and results. */

/* covers */
.cover { position: relative; margin: 0; background: var(--paper-3); overflow: hidden; aspect-ratio: 3 / 2; max-width: 100%; }
.cover-wide { aspect-ratio: 16 / 9; }
.cover-tall { aspect-ratio: 4 / 5; }
.cover-strip { aspect-ratio: 5 / 1; }
.cover .cover-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.cover figcaption { position: absolute; left: .7rem; bottom: .55rem; font-size: var(--fs-micro); color: var(--muted); background: color-mix(in srgb, var(--paper) 78%, transparent); padding: .1rem .4rem; }

/* lead package */
.lead-pack { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(1.5rem, 3vw, 3rem); padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.lead-story { display: grid; gap: 1.1rem; align-content: start; }
.lead-story .h-display a, .story-title a { text-decoration: none; }
.lead-story .h-display a:hover, .story-title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .12em; color: var(--ink); }
.lead-side { display: grid; align-content: start; border-left: 1px solid var(--rule); padding-left: clamp(1.25rem, 2.4vw, 2.25rem); }
.lead-side .story + .story { border-top: 1px solid var(--rule); }
@media (max-width: 56rem) { .lead-pack { grid-template-columns: minmax(0, 1fr); } .lead-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); } }

/* stories */
.story { display: grid; gap: .45rem; padding-block: 1.1rem; align-content: start; }
.story-title { font-family: var(--serif); font-size: var(--fs-h3); line-height: 1.22; font-weight: 400; letter-spacing: -.008em; }
.story-title.big { font-size: var(--fs-h2); line-height: 1.12; }
.story p { color: var(--ink-2); font-size: .9688rem; }
.story .meta { display: flex; flex-wrap: wrap; gap: .25rem .8rem; align-items: center; }
.story-list > .story + .story { border-top: 1px solid var(--rule); }
.story-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(6rem, 11rem); gap: 1.25rem; align-items: start; }
.story-row .cover { aspect-ratio: 4 / 3; }
.story-num { font-family: var(--serif); font-size: 2rem; line-height: 1; color: var(--rule); font-variant-numeric: lining-nums; }
.state-note { font-family: var(--sans); font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* the semantic search band on the home page */
.ask { display: grid; gap: 1rem; justify-items: center; text-align: center; padding-block: clamp(2rem, 5vw, 3.75rem); }
.ask .h1 { max-width: 20ch; }
.ask-field { display: flex; align-items: center; gap: .75rem; width: min(40rem, 100%); min-height: 3.75rem; padding: .5rem .6rem .5rem 1.25rem; border: 1px solid var(--ink); border-radius: 999px; background: var(--paper-2); cursor: text; text-align: left; color: var(--muted); font-family: var(--serif); font-style: italic; font-size: 1.1875rem; }
.ask-field:hover { border-color: var(--accent); }
.ask-field .btn { border-radius: 999px; margin-left: auto; font-style: normal; flex: none; }
.ask-examples { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem 1.25rem; max-width: 46rem; }
.ask-examples button { border: 0; background: none; padding: .2rem 0; cursor: pointer; font-family: var(--serif); font-style: italic; font-size: 1.0625rem; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: .2em; }
.ask-examples button:hover { color: var(--accent-ink); text-decoration-color: currentColor; }

/* phrases in people's own words */
.phrases { columns: 3 15rem; column-gap: clamp(1.5rem, 3vw, 3rem); column-rule: 1px solid var(--rule); }
.phrases li { break-inside: avoid; padding: .5rem 0; border-bottom: 1px solid var(--rule); font-family: var(--serif); font-style: italic; font-size: 1.1875rem; line-height: 1.3; }
.phrases a { text-decoration: none; }
.phrases a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.phrases-plain { columns: auto; }
.phrases-2 { columns: 2 15rem; }
.said { font-family: var(--serif); font-style: italic; color: var(--ink-2); }
.said-list { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; font-family: var(--serif); font-style: italic; color: var(--ink-2); }
.said-list li::before { content: "«"; }
.said-list li::after { content: "»"; }

/* rubric fronts */
.front { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr); gap: clamp(1.25rem, 2.6vw, 2.5rem); }
.front-title { display: grid; gap: .6rem; align-content: start; }
.front-title .h2 a { text-decoration: none; }
.front-title .h2 a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.topic-lines li { border-top: 1px solid var(--rule); }
.topic-lines li:last-child { border-bottom: 1px solid var(--rule); }
.topic-lines a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem 1rem; align-items: baseline; padding: .7rem 0; text-decoration: none; }
.topic-lines b { font-family: var(--serif); font-weight: 400; font-size: 1.25rem; line-height: 1.2; }
.topic-lines a:hover b { text-decoration: underline; text-decoration-thickness: 1px; }
.topic-lines span { grid-column: 1; color: var(--muted); font-size: var(--fs-small); font-family: var(--serif); font-style: italic; }
.topic-lines i { grid-row: 1; grid-column: 2; font-style: normal; font-size: var(--fs-micro); color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 62rem) { .front { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .front-title { grid-column: 1 / -1; } }
@media (max-width: 40rem) { .front { grid-template-columns: minmax(0, 1fr); } }

/* index of topics by letter or rubric */
.index-cols { columns: 3 16rem; column-gap: clamp(1.5rem, 3vw, 3rem); }
.index-group { break-inside: avoid; padding-bottom: 1.5rem; }
.index-group h2, .index-group h3 { font-size: 1.375rem; border-top: 2px solid var(--rule-strong); padding-top: .55rem; margin-bottom: .5rem; }
.index-group h2 a, .index-group h3 a { text-decoration: none; }
.index-group li a { display: flex; justify-content: space-between; gap: 1rem; padding: .32rem 0; text-decoration: none; border-bottom: 1px dotted var(--rule); }
.index-group li a:hover { color: var(--accent-ink); }
.index-group li i { font-style: normal; color: var(--muted); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }

/* people: expert cards are real cards */
.person { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .9rem 1rem; padding: 1.1rem; border: 1px solid var(--rule); border-radius: var(--radius-l); background: var(--paper-2); align-content: start; }
.person-photo { width: 4rem; height: 4rem; border-radius: 50%; background: var(--paper-3); display: grid; place-items: center; overflow: hidden; color: var(--muted); }
.person-photo svg { width: 100%; height: 100%; }
.person h3 { font-size: 1.25rem; }
.person h3 a { text-decoration: none; }
.person h3 a:hover { text-decoration: underline; }
.person .why { grid-column: 1 / -1; font-size: var(--fs-small); color: var(--ink-2); border-top: 1px solid var(--rule); padding-top: .7rem; }
.person .why b { font-weight: 600; color: var(--ink); }
.person .row { grid-column: 1 / -1; }

/* key and value lines */
.kv { display: grid; grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr); gap: .5rem 1.5rem; }
.kv dt { color: var(--muted); font-size: var(--fs-small); }
.kv dd { margin: 0; }
@media (max-width: 36rem) { .kv { grid-template-columns: minmax(0, 1fr); gap: .1rem; } .kv dd { margin-bottom: .7rem; } }

/* numbered steps and routes */
.steps { counter-reset: step; display: grid; }
.steps > li { counter-increment: step; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--rule); }
.steps > li::before { content: counter(step); font-family: var(--serif); font-size: 2rem; line-height: 1; color: var(--accent); font-variant-numeric: lining-nums; }
.steps b { font-family: var(--serif); font-weight: 400; font-size: 1.25rem; display: block; margin-bottom: .2rem; }

/* journey: what to read next */
.journey { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--rule-strong); }
.journey > a { display: grid; gap: .35rem; padding: 1.1rem 1.25rem 1.2rem 0; text-decoration: none; align-content: start; }
.journey > a + a { border-left: 1px solid var(--rule); padding-left: 1.25rem; }
.journey small { font-size: var(--fs-micro); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.journey b { font-family: var(--serif); font-weight: 400; font-size: 1.25rem; line-height: 1.2; }
.journey a:hover b { text-decoration: underline; text-decoration-thickness: 1px; }
@media (max-width: 44rem) { .journey { grid-template-columns: minmax(0, 1fr); } .journey > a + a { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); } }

/* save and follow controls, toast */
.save-btn[aria-pressed="true"] .when-off, .save-btn[aria-pressed="false"] .when-on, .save-btn:not([aria-pressed]) .when-on { display: none; }
.toast { position: fixed; left: 50%; bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: .7rem 1.1rem; border-radius: var(--radius-l); font-size: var(--fs-small); z-index: 60; max-width: calc(100vw - 2rem); }
.toast a { color: inherit; }
.cookie-note { position: fixed; left: 1rem; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); margin: 0 auto; max-width: 40rem; display: flex; gap: .75rem; align-items: center; background: var(--ink); color: var(--paper); padding: .7rem 1rem; border-radius: var(--radius-l); font-size: var(--fs-small); z-index: 55; box-shadow: 0 6px 24px rgb(0 0 0 / .25); }
.cookie-note p { margin: 0; flex: 1; }
.cookie-note a { color: inherit; }
@media (max-width: 30rem) { .cookie-note { flex-direction: column; align-items: stretch; } }

/* personal block */
.foryou { border: 1px solid var(--rule); border-top: 2px solid var(--accent); padding: clamp(1.1rem, 2.4vw, 1.75rem); background: var(--paper-2); display: grid; gap: 1.1rem; }
.foryou-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem 1rem; }

/* crisis and safety */
.crisis { background: var(--danger-soft); border-left: 3px solid var(--danger); padding: 1.1rem 1.25rem; display: grid; gap: .6rem; }
.crisis h2, .crisis h3 { font-size: 1.375rem; }
.crisis a { color: var(--danger); font-weight: 600; }

/* tables that may be wider than the screen scroll in their own box */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.table th { text-align: left; font-family: var(--sans); font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: .55rem .9rem .55rem 0; border-bottom: 2px solid var(--rule-strong); white-space: nowrap; }
.table td { padding: .6rem .9rem .6rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.table .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .q { font-family: var(--serif); font-size: 1.0625rem; }

/* 35-kit.css */
/* Kit: pieces made for the front page and meant for any other page later: a dark scope, phrase bubbles, figures,
   a row of steps, rubric drawings and signs, rubric tiles, a slot for a picture. Colours come from tokens only. */

/* a block that keeps the dark palette whatever the theme of the page is (the palette itself is in 00-tokens.css) */
.theme-dark { background: var(--paper); color: var(--ink); }

/* ---- page hero: the dark band at the top of a rubric or a topic page --------------------------------------- */
.page-hero { background: radial-gradient(40rem 20rem at 88% -12%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 72%), var(--paper); }
.page-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.page-hero .page-head { padding-block: clamp(1.5rem, 3.2vw, 2.6rem) clamp(1.5rem, 3vw, 2.4rem); }
.page-hero .ra { width: clamp(9rem, 19vw, 15rem); height: auto; color: var(--ink-2); }
.page-hero-in > .kit-pic { width: clamp(12rem, 26vw, 22rem); aspect-ratio: 16 / 9; height: auto; border-radius: var(--radius-l); }
@media (max-width: 48rem) {
  .page-hero-in { grid-template-columns: minmax(0, 1fr); }
  .page-hero .ra, .page-hero-in > .kit-pic { display: none; }
}

/* ---- phrase lists everywhere become bubbles (the plain and the annotated variants keep their list look) ------- */
.phrases:not(.phrases-plain):not(.xp-said) { columns: auto; display: flex; flex-wrap: wrap; align-items: flex-start; gap: .7rem .6rem; }
.phrases:not(.phrases-plain):not(.xp-said) li { padding: .48em .95em .54em; border: 1px solid var(--rule); border-radius: 1.3em 1.3em 1.3em .3em; background: var(--paper-2);
  font-size: 1.125rem; line-height: 1.2; transition: background-color .18s, color .18s, border-color .18s; }
.phrases:not(.phrases-plain):not(.xp-said) li:nth-child(even) { border-radius: 1.3em 1.3em .3em 1.3em; }
.phrases:not(.phrases-plain):not(.xp-said) li:nth-child(5n+1) { background: var(--accent-soft); border-color: transparent; color: var(--accent-ink); }
.phrases:not(.phrases-plain):not(.xp-said) li:nth-child(7n+4) { background: var(--warm-soft); border-color: transparent; }
.phrases:not(.phrases-plain):not(.xp-said) li > a { display: block; margin: -.48em -.95em -.54em; padding: .48em .95em .54em; color: inherit; text-decoration: none; }
.phrases:not(.phrases-plain):not(.xp-said) li:has(> a):hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* the same bubbles for «Узнаёте себя?» inside an article */
.prose aside.box-recognition ul { display: flex; flex-wrap: wrap; gap: .6rem .5rem; padding-left: 0; }
.prose aside.box-recognition ul > li { margin: 0; padding: .45em .9em .5em; border: 1px solid color-mix(in srgb, var(--warm) 35%, transparent); border-radius: 1.3em 1.3em 1.3em .3em; background: var(--paper); }
.prose aside.box-recognition ul > li:nth-child(even) { border-radius: 1.3em 1.3em .3em 1.3em; }
.prose aside.box-recognition ul > li::before, .prose aside.box-recognition ul > li::after { content: none; }

/* ---- rubric drawings and signs ----------------------------------------------------------------------------- */
.ra { display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ra .ra-a { stroke: var(--accent); stroke-width: 2; }
.ra .ra-f { fill: var(--accent-soft); stroke: var(--accent); }
.ri { display: block; flex: none; width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* a picture, when one is supplied, takes the place of the drawing or of the sign */
.kit-pic { display: block; object-fit: cover; background: var(--paper-3); }

/* ---- a phrase in people's own words: a messenger bubble, one corner left sharp ----------------------------- */
.say { display: inline-flex; align-items: center; gap: .55em; max-width: 100%; padding: .5em .95em .56em .8em; border: 1px solid var(--rule); border-radius: 1.3em 1.3em 1.3em .3em;
  background: var(--paper-2); color: var(--ink); font-family: var(--serif); font-style: italic; line-height: 1.18; letter-spacing: -.005em; text-decoration: none; text-wrap: balance;
  transition: background-color .18s, color .18s, border-color .18s, transform .18s, opacity .18s; }
.say .ri { color: var(--accent); }
.say .kit-pic { width: 2.1em; height: 2.1em; margin: -.2em 0 -.2em -.25em; border-radius: 50%; flex: none; }
.say-l { font-size: clamp(1.1875rem, .4vw + 1rem, 1.3125rem); }
.say-m { font-size: clamp(1.0625rem, .2vw + 1rem, 1.125rem); }
.say-s { font-size: 1rem; }
.say-tone-a { background: var(--accent-soft); border-color: transparent; color: var(--accent-ink); }
.say-tone-w { background: var(--warm-soft); border-color: transparent; }
.say:hover, .say.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.say:hover .ri, .say.is-on .ri { color: inherit; }
.say:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ---- a living cloud: phrases as links, anywhere on the site. Each bubble leans a little and floats, straightens
   and grows when the reader reaches for it. A dashed one leads to a page that is still being written. ----------- */
.say-live { display: flex; flex-flow: row wrap; align-items: flex-start; gap: .85rem .65rem; }
.say-live li { display: block; min-width: 0; }
.say-live li:nth-child(3n+2) { margin-top: .5rem; }
.say-live .say { rotate: -.8deg; transition: background-color .18s, color .18s, border-color .18s, rotate .18s, scale .18s; }
.say-live li:nth-child(even) .say { rotate: .7deg; border-radius: 1.3em 1.3em .3em 1.3em; }
.say-live .say:hover, .say-live .say:focus-visible { rotate: 0deg; scale: 1.04; }
.say-soon { border-style: dashed; color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) {
  .say-live .say { animation: say-float 7s ease-in-out infinite; animation-delay: calc(var(--i) * -.9s); }
  .say-live .say:hover { animation-play-state: paused; }
}
@keyframes say-float { 50% { translate: 0 -4px; } }

/* ---- figures counted from the content ---------------------------------------------------------------------- */
.figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem clamp(1rem, 3vw, 2.5rem); }
.figs > div { display: grid; gap: .2rem; align-content: start; padding-top: .8rem; border-top: 1px solid var(--rule); }
.figs b { font-family: var(--serif); font-weight: 400; font-size: clamp(1.75rem, 1.6vw + 1rem, 2.75rem); line-height: 1; letter-spacing: -.02em; color: var(--accent); font-variant-numeric: lining-nums; }
.figs span { font-size: var(--fs-small); line-height: 1.35; color: var(--muted); }
.figs-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 40rem) { .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- a row of numbered steps -------------------------------------------------------------------------------- */
.flow { counter-reset: flow; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem clamp(1rem, 2.6vw, 2.25rem); }
.flow > li { counter-increment: flow; display: grid; gap: .4rem; align-content: start; padding-top: 1rem; border-top: 2px solid var(--rule-strong); }
.flow > li::before { content: counter(flow); font-family: var(--serif); font-size: 2.25rem; line-height: 1; color: var(--accent); font-variant-numeric: lining-nums; }
.flow b { font-family: var(--serif); font-weight: 400; font-size: 1.25rem; line-height: 1.2; }
.flow span { font-size: var(--fs-small); line-height: 1.45; color: var(--muted); }
@media (max-width: 56rem) { .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 30rem) { .flow { grid-template-columns: minmax(0, 1fr); } }

/* ---- rubric tiles ------------------------------------------------------------------------------------------- */
.rubric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1.25rem, 2.6vw, 2.5rem); border-top: 1px solid var(--rule); }
.rubric-tile { display: grid; gap: .45rem; align-content: start; padding: 1.5rem 0 1.6rem; border-bottom: 1px solid var(--rule); color: inherit; text-decoration: none; }
.rubric-tile .ra { width: 7.5rem; height: auto; margin-bottom: .5rem; color: var(--ink-2); transition: transform .25s; }
.rubric-tile .kit-pic { width: 100%; aspect-ratio: 16 / 9; height: auto; margin-bottom: .6rem; border-radius: var(--radius-l); }
.rubric-tile:hover .ra { transform: translateY(-3px); }
.rubric-tile:hover .h3 { text-decoration: underline; text-underline-offset: .18em; }
.rubric-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.rubric-said { font-family: var(--serif); font-style: italic; font-size: 1.125rem; line-height: 1.3; color: var(--ink-2); }
@media (max-width: 56rem) { .rubric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .rubric-grid { grid-template-columns: minmax(0, 1fr); } .rubric-tile .ra { width: 6rem; } }

/* ---------- the wall of universities on the front page: names set like marks, never logos ---------- */
.sci-marks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(1.25rem, 2.6vw, 2.5rem); }
.sci-marks > li { display: grid; gap: .3rem; align-content: start; padding: 1.05rem 0 1.15rem; border-top: 1px solid var(--rule); }
.sci-marks b { font-family: var(--serif); font-weight: 400; font-size: clamp(1.125rem, .55vw + .95rem, 1.5rem); line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; }
.sci-marks span, .sci-people span { font-size: var(--fs-small); line-height: 1.35; color: var(--muted); }
.sci-people { margin-top: 1.75rem; padding-top: 1.1rem; border-top: 2px solid var(--rule-strong); display: grid; gap: .8rem; }
.sci-people ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem clamp(1.25rem, 2.6vw, 2.5rem); }
.sci-people li { display: grid; gap: .15rem; }
.sci-people b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.125rem; line-height: 1.25; }
.sci-note { margin-top: 1.4rem; max-width: 46rem; }
@media (max-width: 56rem) { .sci-people ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .sci-people ul { grid-template-columns: minmax(0, 1fr); } }

/* a rubric tile carries the scene of its rubric: it draws itself when the tile comes into view */
.rubric-tile .scene { width: 100%; margin-bottom: .6rem; }

/* the wall as drawings: every university is its best known building, drawn in our lines when the tile comes into view */
.sci-marks { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.6rem clamp(.9rem, 1.8vw, 1.6rem); }
.sci-marks > li { padding: 0; border-top: 0; gap: .3rem; text-align: center; }
.sci-marks .scene { width: 100%; margin-bottom: .35rem; }
.sci-marks b { font-size: 1.0625rem; line-height: 1.2; }
@media (max-width: 62rem) { .sci-marks { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .sci-marks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 26rem) { .sci-marks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- large figures inside a text: a number that proves what is said, next to the claim it stands on ---------- */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 0; margin: 2.4em 0; padding: 1.5rem 0 1.6rem; border-top: 2px solid var(--rule-strong); border-bottom: 1px solid var(--rule); }
.facts-1 { grid-template-columns: minmax(0, 1fr); }
.facts-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.facts .fact { display: grid; gap: .5rem; align-content: start; padding: 0 clamp(1rem, 2.4vw, 2rem); border-left: 1px solid var(--rule); }
.facts .fact:first-child { padding-left: 0; border-left: 0; }
.facts .fact b { font-family: var(--serif); font-weight: 400; font-size: clamp(2.5rem, 3vw + 1.4rem, 4rem); line-height: 1; letter-spacing: -.02em; color: var(--accent); font-variant-numeric: lining-nums; }
.facts .fact p { margin: 0; font-family: var(--serif); font-size: 1.0625rem; line-height: 1.4; max-width: 24rem; }
.sci-figs { margin: 0 0 1.6rem; }
@media (max-width: 40rem) {
  .facts, .facts-2 { grid-template-columns: minmax(0, 1fr); }
  .facts .fact { padding: 1.1rem 0 0; border-left: 0; border-top: 1px solid var(--rule); }
  .facts .fact:first-child { padding-top: 0; border-top: 0; }
}
/* the front page shows 18 universities; on a phone the first twelve, the whole list is on «Научная база» */
@media (max-width: 40rem) { .sci-marks > li:nth-child(n+13) { display: none; } }

/* 36-pics.css */
/* Topic pictograms and motion. A pictogram is shown once on a page and large: at the top of a topic page or of an
   article. It is not repeated in lists, cards or phrases: small and many, it turns into noise. Everything here moves
   through opacity, translate and scale only, so the browser runs it without redrawing the page, and all of it is
   off when the reader asks for less motion. */

/* ---- from page to page: a soft cross-fade. A page has at most one large pictogram and all of them share one name,
   so the disc of a topic page turns into the disc of its article instead of blinking. ----------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .26s; }
  ::view-transition-group(topic-pic) { animation-duration: .5s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
}

/* ---- the large pictogram at the top of a topic page or an article: a disc with a slow warm light behind it ----- */
.page-hero { overflow: clip; }
.pic-hero { position: relative; display: block; flex: none; width: clamp(8rem, 15vw, 11.5rem); aspect-ratio: 1; margin-inline: clamp(1rem, 3vw, 3rem); view-transition-name: topic-pic; }
.pic-hero::before { content: ""; position: absolute; inset: -24%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--warm) 32%, transparent), transparent); }
.pic-hero .kit-pic { position: relative; width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 0 1px color-mix(in srgb, var(--warm) 45%, transparent), 0 1.4rem 2.8rem -1.4rem rgb(0 0 0 / .5); }
.art-top { display: grid; grid-template-columns: minmax(0, 56rem) auto; justify-content: space-between; align-items: center; column-gap: 2rem; }
.art-top .pic-hero { width: clamp(6.5rem, 11vw, 9.5rem); }
@media (max-width: 48rem) {
  /* on a phone the disc is a small sign in the corner, beside the path and the topic name */
  .page-hero-in, .art-top { position: relative; }
  .art-top { grid-template-columns: minmax(0, 1fr); }
  .pic-hero, .art-top .pic-hero { position: absolute; top: 1.35rem; right: 0; width: 3.5rem; margin: 0; }
  .page-hero-in > .pic-hero { right: var(--gutter); }
  .pic-hero::before { inset: -14%; }
  .page-hero-in:has(> .pic-hero) :is(.crumbs, .kicker), .art-top:has(> .pic-hero) :is(.crumbs, .kicker) { padding-right: 4.4rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .pic-hero::before { animation: pic-breathe 6.5s ease-in-out infinite; }
}
@keyframes pic-breathe { 50% { opacity: .5; scale: .9; } }

/* 37-live.css */
/* A living page: air between the blocks, blocks that come together as the reader reaches them, and a soft reply
   to every action. Rules of the house: only opacity, translate and scale move; a block appears once; the text of an
   article never moves; nothing is hidden unless the script that shows it is already running. Under «less motion»
   the base stylesheet switches every transition and animation off, so this file needs no second guard. */

/* ---- air: more room between sections and one line per section instead of two ----------------------------------- */
.sec { padding-block: clamp(2rem, 4.4vw, 3.75rem); }
.sec-head { margin-bottom: clamp(1.25rem, 2.6vw, 2.25rem); }
.sec + .sec:has(> .sec-flag) { border-top-color: transparent; }

/* the lead story of a rubric stands alone above a row of the next ones */
.lead-story { padding-bottom: .6rem; margin-bottom: .6rem; border-bottom: 1px solid var(--rule); }
.lead-story .story { max-width: 54rem; }
.lead-story + .grid { margin-top: 0; }

/* a list of questions set in two columns when it stands alone (a topic without articles yet) */
.topic-lines-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 4vw, 4rem); }
.topic-lines-2 li:last-child { border-bottom: 0; }
.empty-lead { padding-block: 0 1.25rem; }
/* «Куда дальше» on a topic page: situations on the left, narrower ways out on the right */
.onward { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 2rem clamp(1.5rem, 5vw, 5rem); align-items: start; }
.onward-1 { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 48rem) { .topic-lines-2, .onward { grid-template-columns: minmax(0, 1fr); } }

/* article: the tools of the rail sit in two tidy rows */
.rail-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.rail-actions > :first-child { grid-column: 1 / -1; }
.rail-actions .btn { padding-inline: .5rem; }

/* ---- a soft reply to every action -------------------------------------------------------------------------------- */
.btn, .chip, .link-arrow, .topic-lines a b, .story-title a, .toc a, .tool-links a, .crumbs a {
  transition: background-color .15s, border-color .15s, color .15s, text-decoration-color .15s, translate .15s; }
.btn:active, .chip:active { translate: 0 1px; }
.link-arrow::after { content: "→"; display: inline-block; margin-left: .32em; transition: translate .2s; }
.link-arrow:hover::after { translate: .28em 0; }
.did { animation: did-pop .32s cubic-bezier(.2, .7, .2, 1); }
@keyframes did-pop { 40% { scale: 1.07; } }
/* fingers need 44 px; the phrase wall of the front page keeps its own sizes */
@media (pointer: coarse) {
  .chip { min-height: 2.75rem; padding-inline: 1rem; }
  .btn-small { min-height: 2.75rem; }
  .hero .chip { min-height: 2.125rem; padding-inline: .8rem; }
}

@media screen {
  /* ---- the top of a page comes in line by line ------------------------------------------------------------------- */
  .page-head > *, .art-head > * { animation: head-in .55s cubic-bezier(.2, .7, .2, 1) both; }
  .page-head > :nth-child(2), .art-head > :nth-child(2) { animation-delay: .05s; }
  .page-head > :nth-child(3), .art-head > :nth-child(3) { animation-delay: .1s; }
  .page-head > :nth-child(4), .art-head > :nth-child(4) { animation-delay: .18s; }
  .page-head > :nth-child(n+5), .art-head > :nth-child(n+5) { animation-delay: .26s; }

  /* ---- blocks rise into place when the reader reaches them. core.js gives `rv` only to blocks that are below the
     screen at that moment and `is-in` when they come into view, then takes both away. Without the script no block
     ever gets `rv`, so nothing can stay hidden. ------------------------------------------------------------------ */
  .rv { opacity: 0; translate: 0 1rem; }
  .rv.is-in { opacity: 1; translate: none;
    transition: opacity .45s ease var(--rv-d, 0ms), translate .5s cubic-bezier(.2, .7, .2, 1) var(--rv-d, 0ms), background-size .6s ease var(--rv-d, 0ms); }

  /* the line over a step is drawn from left to right */
  .flow > li.rv { border-top-color: transparent; background: linear-gradient(var(--rule-strong), var(--rule-strong)) 0 0 / 0% 2px no-repeat border-box; }
  .flow > li.rv.is-in { background-size: 100% 2px; }

  /* a rubric drawing is drawn by its lines: in a tile when the tile arrives, at the top of a page when it opens */
  .rv .ra [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .rv.is-in .ra [pathLength] { stroke-dashoffset: 0; transition: stroke-dashoffset .9s ease calc(var(--rv-d, 0ms) + .1s); }
  .page-hero .ra [pathLength] { stroke-dasharray: 1; animation: ra-draw 1.3s .25s ease both; }

  /* ---- article: a thin line at the very top shows how much is read; on a phone a way back to the top appears once
     the reader is well into the text. Both are tied to the scroll position by the browser itself, no script. ------ */
  @supports (animation-timeline: scroll()) {
    body[data-view-type="article"]::after { content: ""; position: fixed; z-index: 60; inset: 0 0 auto 0; height: 3px; background: var(--accent);
      transform-origin: 0 50%; pointer-events: none; animation: read-bar linear both; animation-timeline: scroll(root block); }
    @media (max-width: 62rem) {
      body[data-view-type="article"] .to-top { display: grid; animation: to-top-in linear both; animation-timeline: scroll(root block); }
    }
  }
}
.to-top { display: none; position: fixed; z-index: 55; right: max(1rem, env(safe-area-inset-right, 0px)); bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  width: 2.875rem; height: 2.875rem; place-items: center; border: 1px solid var(--rule-strong); border-radius: 50%; background: var(--paper-2); color: var(--ink); text-decoration: none; }
.to-top::before { content: ""; width: .65rem; height: .65rem; margin-top: .3rem; border-left: 2px solid currentColor; border-top: 2px solid currentColor; rotate: 45deg; }

@keyframes head-in { from { opacity: 0; translate: 0 .75rem; } }
@keyframes ra-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes read-bar { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes to-top-in { 0%, 12% { opacity: 0; visibility: hidden; } 16%, 100% { opacity: 1; visibility: visible; } }
@media print { .rv { opacity: 1; translate: none; } .to-top { display: none; } }

/* 38-scenes.css */
/* Life scenes: line drawings at the top of a topic page or an article (see src/lib/scenes.mjs for the classes).
   Colours come from the tokens, so a scene is a light drawing on the dark band and an ink drawing on linen paper.
   Without motion (print, «less motion», an old browser) the finished drawing simply stands there: every hidden
   starting state lives inside the motion query. Only stroke offset, opacity and clip move, about forty parts. */
.scene { flex: none; width: clamp(19rem, 41vw, 35rem); }
.art-top .scene { width: clamp(17rem, 35vw, 30rem); }
/* the scene of a rubric page is drawn on a wider board and gets more room */
.scene:has(> svg[viewBox="0 0 640 360"]) { width: 100%; }
.page-hero-in:has(> .scene > svg[viewBox="0 0 640 360"]) { grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); }
.sc { display: block; width: 100%; height: auto; overflow: visible; fill: none; stroke: var(--ink-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* a richer scene has more parts, so each takes a shorter turn and the whole still builds in about three seconds */
.sc[viewBox="0 0 640 360"] { --sc-step: 30ms; }
/* depth by line weight: far things thin, the main figure thick */
.sc .t { stroke-width: 1; }
.sc .k { stroke-width: 2.3; }
.sc .a { stroke: var(--accent); }
.sc .w { stroke: var(--warm); }
.sc .bg { fill: var(--paper); }
.sc .af { fill: var(--accent-soft); stroke: var(--accent); }
.sc .wf { fill: var(--warm); stroke: none; }
.sc .dot { fill: var(--accent); stroke: none; }
.sc .lt { opacity: .1; }
.sc .gh { stroke-dasharray: 3 5; opacity: .55; }
.sc .bl { opacity: 0; }
.sc text { font: italic 13px var(--serif); fill: var(--ink); stroke: none; }
.sc text.big { font-size: 16px; }
.sc text.dim { fill: var(--muted); }
.sc text.tiny { font: 10px var(--sans); fill: var(--muted); }
.sc text.wt2 { fill: var(--warm); }
.sc text.wt { font: 600 10.5px ui-monospace, Consolas, monospace; fill: var(--warm); }

/* a scene inside an article: the second and the third of the topic's story. It waits for the reader: core.js holds
   the drawing until the scene comes into view (class sc-wait); without the script it is simply drawn. */
.prose .scene-in { margin: 2.6em 0 2.2em; }
.scene-in .scene, .art-top .scene-in .scene { width: 100%; max-width: 34rem; margin: 0; order: 0; }
.sc-wait .sc * { animation-play-state: paused !important; }

/* the review sheet at /sceny/: every scene, two in a row */
.scene-sheet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem clamp(1rem, 3vw, 2.5rem); padding-bottom: 3rem; }
.scene-sheet figure { margin: 0; }
.scene-sheet figcaption { margin-top: .4rem; font-size: var(--fs-small); color: var(--muted); }
.scene-sheet .scene, .scene-sheet .scene:has(> svg) { width: 100%; max-width: none; margin: 0; }
.scene-sheet-wide { grid-template-columns: minmax(0, 1fr); max-width: 60rem; }
/* /sceny/#s-NAME starts the sheet from that scene: the ones before it are put away */
.scene-sheet:has(figure:target) figure:not(:target):not(:target ~ figure) { display: none; }

@media (max-width: 48rem) {
  .scene-sheet { grid-template-columns: minmax(0, 1fr); }
  /* on a phone the scene opens the page: it stands above the title, as wide as the screen allows */
  .page-hero-in:has(> .scene > svg[viewBox="0 0 640 360"]) { grid-template-columns: minmax(0, 1fr); }
  .scene, .art-top .scene, .scene:has(> svg[viewBox="0 0 640 360"]) { order: -1; width: 100%; max-width: 27rem; margin: 1.1rem auto -.5rem; }
}

@media screen and (prefers-reduced-motion: no-preference) {
  .sc .d { stroke-dasharray: 1; stroke-dashoffset: 1; animation: sc-draw .7s ease forwards; animation-delay: calc(var(--i) * var(--sc-step, 42ms)); }
  .sc .fd { opacity: 0; animation: sc-fade .6s ease forwards; animation-delay: calc(var(--i) * var(--sc-step, 42ms)); }
  .sc .lt { opacity: 0; animation: sc-light .9s ease forwards; animation-delay: calc(var(--i) * var(--sc-step, 42ms)); }
  .sc .gh { opacity: 0; animation: sc-ghost .9s ease forwards; animation-delay: calc(var(--i) * var(--sc-step, 42ms)); }
  .sc .ty { clip-path: inset(0 100% 0 0); animation: sc-type .9s steps(14) forwards; animation-delay: calc(var(--i) * var(--sc-step, 42ms) + .3s); }
  .sc .br { animation: sc-fade .6s ease forwards, sc-breathe 4s ease-in-out infinite; animation-delay: calc(var(--i) * var(--sc-step, 42ms)), 3.6s; }
  .sc .bl { animation: sc-blink 1.1s steps(1) 3.6s infinite; }
  .sc .fl { animation: sc-float 5s ease-in-out 3.6s infinite; }
  .sc .f2 { animation-duration: 6.5s; }
}
@keyframes sc-draw { to { stroke-dashoffset: 0; } }
@keyframes sc-fade { to { opacity: 1; } }
@keyframes sc-light { to { opacity: .1; } }
@keyframes sc-ghost { to { opacity: .55; } }
@keyframes sc-type { to { clip-path: inset(0 0 0 0); } }
@keyframes sc-breathe { 50% { opacity: .45; } }
@keyframes sc-blink { 50% { opacity: 1; } }
@keyframes sc-float { 50% { transform: translateY(-3px); } }

/* 39-motion.css */
/* The second motion layer (switch «motion2», class m2 on <html> set by the head script of layout.mjs). The rule of the
   house stays: motion explains, it does not decorate. Each thing moves once and for less than a second, only opacity,
   position and a drawn line move, the text of an article never moves, and under «less motion» the base stylesheet
   switches everything off. Three gestures, one for each moment of reading:
   - a new section: the rule above it is drawn from left to right, the signature of the science path;
   - a new page: a soft dissolve while the masthead stays in place (the browser's own view transitions);
   - a tap: a short reply of the pressed thing (37-live.css). */

@media screen {
  /* the rule over a section is drawn as the section arrives (core.js gives `rv` only to blocks below the screen) */
  .m2 .sec-flag.rv { border-top-color: transparent; background: linear-gradient(var(--rule-strong), var(--rule-strong)) 0 0 / 0% 2px no-repeat border-box; }
  .m2 .sec-flag.rv.is-in { background-size: 100% 2px;
    transition: opacity .45s ease var(--rv-d, 0ms), translate .5s cubic-bezier(.2, .7, .2, 1) var(--rv-d, 0ms), background-size 1s cubic-bezier(.65, 0, .35, 1) var(--rv-d, 0ms); }

  /* the lines over the five big questions are drawn one after another */
  .m2 .dem-lead.rv > li > a, .m2 .rv .dem-lead > li > a { border-top-color: transparent; background: linear-gradient(var(--rule-strong), var(--rule-strong)) 0 0 / 0% 2px no-repeat border-box; }
  .m2 .dem-lead.rv.is-in > li > a, .m2 .rv.is-in .dem-lead > li > a { background-size: 100% 2px; transition: background-size .8s cubic-bezier(.65, 0, .35, 1); }
  .m2 .dem-lead.rv.is-in > li:nth-child(2) > a, .m2 .rv.is-in .dem-lead > li:nth-child(2) > a { transition-delay: .08s; }
  .m2 .dem-lead.rv.is-in > li:nth-child(3) > a, .m2 .rv.is-in .dem-lead > li:nth-child(3) > a { transition-delay: .16s; }
  .m2 .dem-lead.rv.is-in > li:nth-child(4) > a, .m2 .rv.is-in .dem-lead > li:nth-child(4) > a { transition-delay: .24s; }
  .m2 .dem-lead.rv.is-in > li:nth-child(5) > a, .m2 .rv.is-in .dem-lead > li:nth-child(5) > a { transition-delay: .32s; }

  /* a card answers the pointer with a hairline lift, never a jump */
  .m2 .dem-lead a, .m2 .rubric-tile, .m2 .story { transition: translate .25s cubic-bezier(.2, .7, .2, 1); }
  .m2 .dem-lead a:hover, .m2 .rubric-tile:hover { translate: 0 -2px; }

  /* page to page: the masthead stays, the page dissolves into the next one */
  .m2 .site-head { view-transition-name: masthead; }
  html.m2::view-transition-old(root), html.m2::view-transition-new(root) { animation-duration: .24s; animation-timing-function: ease; }
  html.m2::view-transition-group(masthead) { animation-duration: 0s; }
}
@media (prefers-reduced-motion: reduce) {
  html.m2::view-transition-group(*), html.m2::view-transition-old(*), html.m2::view-transition-new(*) { animation: none !important; }
}

/* ---- the hand-drawn stroke under the key words (src/lib/ink.mjs): the headline of a main page, in an article the
   question of the headline and the first sentence of «Коротко», always a short phrase on one line (a stroke under
   every line of a long headline reads as crossed out). Copper, drawn from left to right when the words come into view
   (core.js adds ink-on). Without the motion layer the words are plain. --------------------------------------------- */
html.m2 .ink { white-space: nowrap; padding-bottom: .1em; background: no-repeat 0 100% / 0% .3em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8.5C40 4.2 92 2.6 132 4.8S186 9.2 198 4' fill='none' stroke='%2394440F' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 1s cubic-bezier(.65, 0, .35, 1); }
html.m2[data-theme="dark"] .ink, html.m2 .theme-dark .ink { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8.5C40 4.2 92 2.6 132 4.8S186 9.2 198 4' fill='none' stroke='%23E9B48C' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
html.m2 .ink.ink-on { background-size: 100% .3em; }
@media (prefers-reduced-motion: reduce) { html.m2 .ink { background-size: 100% .3em; } }
@media print { html.m2 .ink { background: none; } }

/* 40-article.css */
/* Article: the reading experience. Bookish opening, measured column, quiet rail. */
.art-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; padding-block: clamp(1.75rem, 4vw, 3.5rem) clamp(1.25rem, 2.4vw, 2rem); max-width: 56rem; }
.art-head .h1 { max-width: 20ch; overflow-wrap: break-word; }
.art-head .dek { font-size: clamp(1.25rem, .9vw + 1.05rem, 1.75rem); max-width: 44rem; }
.byline { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; align-items: center; padding-block: .85rem; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-size: var(--fs-small); color: var(--muted); }
.byline b { color: var(--ink); font-weight: 600; }
.byline a { color: inherit; }
.byline .spacer { flex: 1; }
.editor-flag { background: var(--warm-soft); color: var(--warm); font-size: var(--fs-small); padding: .5rem .9rem; border-left: 3px solid var(--warm); }

.art-layout { display: grid; grid-template-columns: minmax(0, var(--measure)) minmax(14rem, 18rem); gap: clamp(2rem, 6vw, 6rem); align-items: start; justify-content: space-between; }
.art-rail { position: sticky; top: calc(4rem + env(safe-area-inset-top, 0px)); display: grid; gap: 1.5rem; font-size: var(--fs-small); }
.art-rail h2 { font-family: var(--sans); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .6rem; }
.toc li { border-top: 1px solid var(--rule); }
.toc a { display: block; padding: .5rem 0; text-decoration: none; color: var(--ink-2); }
.toc a:hover, .toc a[aria-current="true"] { color: var(--accent-ink); }
.toc a[aria-current="true"] { font-weight: 600; }
.toc-mobile { display: none; border: 1px solid var(--rule); padding: .2rem 1rem; margin-bottom: 1.5rem; }
.toc-mobile summary { cursor: pointer; padding: .6rem 0; font-weight: 600; font-size: var(--fs-small); }
@media (max-width: 62rem) {
  .art-layout { grid-template-columns: minmax(0, var(--measure)); justify-content: start; }
  .art-rail { position: static; order: 2; border-top: 1px solid var(--rule); padding-top: 1.5rem; }
  .art-rail .toc-box { display: none; }
  .toc-mobile { display: block; }
}

.prose { font-family: var(--serif); font-size: var(--fs-read); line-height: 1.68; color: var(--ink); max-width: var(--measure); }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { font-size: var(--fs-h2); line-height: 1.14; margin-top: 2.2em; padding-top: .7em; border-top: 1px solid var(--rule); scroll-margin-top: 5rem; }
.prose h2 .sec-no { display: block; font-family: var(--sans); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .12em; color: var(--warm); margin-bottom: .5em; font-variant-numeric: lining-nums; }
.prose h2 .sec-no::before { content: "Раздел "; text-transform: uppercase; }
.prose h3 { font-size: var(--fs-h3); margin-top: 1.7em; font-style: italic; }
.prose a { color: var(--accent-ink); }
.prose strong { font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose ul { list-style: none; }
.prose ul > li { position: relative; }
.prose ul > li::before { content: "—"; position: absolute; left: -1.3em; color: var(--warm); }
.prose ol { list-style: decimal; }
.prose ol > li::marker { font-family: var(--sans); font-size: .85em; color: var(--warm); font-weight: 600; }
.prose li + li { margin-top: .5em; }

/* the bookish opening: larger first paragraph, first line in small capitals, drop cap for features */
.prose .lede { font-size: 1.14em; line-height: 1.6; }
.prose .lede::first-line { font-variant-caps: small-caps; letter-spacing: .03em; }
.prose.has-dropcap .lede::first-letter { float: left; font-size: 3.9em; line-height: .82; padding: .08em .1em 0 0; font-weight: 400; color: var(--accent); font-variant-caps: normal; }

.prose blockquote { margin-inline: 0; padding-left: 1.25em; border-left: 2px solid var(--accent); font-style: italic; color: var(--ink-2); }
.prose .pull { margin-block: 2em; padding-block: 1.1em; border-top: 2px solid var(--rule-strong); border-bottom: 1px solid var(--rule); }
.prose .pull p { font-size: clamp(1.5rem, 1.6vw + 1rem, 2.125rem); line-height: 1.22; font-style: italic; letter-spacing: -.01em; text-wrap: balance; }
.prose hr.asterism { border: 0; text-align: center; margin-block: 2.2em; height: 1.2em; }
.prose hr.asterism::before { content: "⁂"; font-size: 1.3em; color: var(--muted); }

.prose .box { font-family: var(--sans); font-size: .9em; line-height: 1.55; padding: 1.15em 1.3em 1.25em; margin-block: 1.9em; background: var(--paper-2); border-top: 2px solid var(--rule-strong); }
.prose .box > * + * { margin-top: .7em; }
.prose .box-title { font-family: var(--sans); font-style: normal; font-size: var(--fs-micro); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0; }
.prose .box-short { background: transparent; border-top: 2px solid var(--accent); border-bottom: 1px solid var(--rule); padding-inline: 0; font-family: var(--serif); font-size: 1.04em; }
.prose .box-short .box-title { color: var(--accent-ink); }
/* the reader's own words stand on the page itself, marked by a warm line: a filled box was heavy in the dark theme */
.prose .box-recognition { background: none; border-top: 0; border-left: 2px solid var(--warm); padding-block: .2em .4em; }
.prose .box-recognition .box-title { color: var(--warm); }
.prose .box-recognition li, .prose .box-recognition p { font-family: var(--serif); font-style: italic; font-size: 1.12em; }
.prose .box-recognition ul > li::before { content: "«"; left: -.9em; color: var(--warm); }
.prose .box-recognition ul > li::after { content: "»"; color: var(--warm); }
.prose .box-recognition ul { padding-left: .9em; }
.prose .box-when { background: var(--accent-soft); border-top-color: var(--accent); }
.prose .box-when .box-title { color: var(--accent-ink); }
.prose .box-safety { background: var(--danger-soft); border-top-color: var(--danger); }
.prose .box-safety .box-title { color: var(--danger); }
.prose .box-expert { border-left: 2px solid var(--accent); border-top: 0; background: transparent; padding-block: .2em; font-family: var(--serif); font-style: italic; }
.prose .box ul > li::before { color: var(--muted); }

/* blocks after the text */
.faq details { border-top: 1px solid var(--rule); }
.faq details:last-child { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; padding: .9rem 2rem .9rem 0; font-family: var(--serif); font-size: 1.25rem; line-height: 1.25; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .2rem; top: .7rem; font-family: var(--sans); font-size: 1.4rem; color: var(--muted); }
.faq details[open] summary::after { content: "–"; }
.faq .faq-a { padding: 0 0 1.1rem; max-width: var(--measure); color: var(--ink-2); font-family: var(--serif); font-size: 1.0625rem; line-height: 1.6; }
.sources li { padding: .55rem 0; border-top: 1px solid var(--rule); font-size: var(--fs-small); color: var(--ink-2); }
.sources li b { font-weight: 600; color: var(--ink); }
.art-foot { max-width: var(--measure); display: grid; gap: clamp(2rem, 4vw, 3rem); margin-top: clamp(2rem, 4vw, 3.5rem); }
.art-foot h2 { font-size: var(--fs-h2); margin-bottom: .9rem; }
.limits { font-size: var(--fs-small); color: var(--muted); border-top: 1px solid var(--rule); padding-top: 1rem; }

/* stub: an honest page for a planned material */
.planned { border: 1px dashed var(--rule); padding: clamp(1.1rem, 2.4vw, 1.75rem); display: grid; gap: .8rem; max-width: var(--measure); }

/* about the article, feedback, tools in the rail */
.about-list > div { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; padding: .65rem 0; border-top: 1px solid var(--rule); font-size: var(--fs-small); }
.about-list > div:last-child { border-bottom: 1px solid var(--rule); }
.about-list dt { color: var(--muted); }
.about-list dd { margin: 0; color: var(--ink-2); }
.about-art .meta { margin-top: .9rem; }
@media (max-width: 34rem) { .about-list > div { grid-template-columns: 1fr; gap: .15rem; } }
.feedback .row { gap: .6rem; }
.feedback [aria-pressed="true"] { border-color: var(--accent); color: var(--accent-ink); }
.tool-links li { border-top: 1px solid var(--rule); }
.tool-links a { display: block; padding: .5rem 0; text-decoration: none; color: var(--ink-2); }
.tool-links a:hover { color: var(--accent-ink); }

/* tool blocks: phrases to say, levels, plan by time, checklist */
.prose .box h4 { font-family: var(--sans); font-size: 1em; font-weight: 600; letter-spacing: 0; line-height: 1.3; }
.prose .box-tool { scroll-margin-top: 5rem; }
.prose .tool-foot { margin-top: 1.1em; }
.prose .tool-note { font-size: var(--fs-micro); color: var(--muted); }
.prose .box-takeaways { background: transparent; border-top: 2px solid var(--rule-strong); border-bottom: 1px solid var(--rule); padding-inline: 0; font-family: var(--serif); font-size: 1.02em; }
.prose .box-exercise { background: var(--accent-soft); border-top-color: var(--accent); }
.prose .box-exercise .box-title { color: var(--accent-ink); }

.prose .script { list-style: none; padding: 0; }
.prose .script > li { padding: .9em 0; border-top: 1px solid var(--rule); margin: 0; }
.prose .script > li::before { content: none; }
.prose .script p { margin: 0; }
.prose .script-tag { display: block; font-family: var(--sans); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .15em; }
.prose .script-not { color: var(--muted); }
.prose .script-say { margin-top: .6em; font-family: var(--serif); font-size: 1.16em; line-height: 1.4; }
.prose .script-say .script-tag { color: var(--accent-ink); }
.copy-btn { font-family: var(--sans); font-size: var(--fs-micro); background: none; border: 1px solid var(--rule); border-radius: 2px; padding: .2em .65em; margin-left: .35em; cursor: pointer; color: var(--muted); vertical-align: middle; white-space: nowrap; }
.copy-btn:hover, .copy-btn:focus-visible { color: var(--accent-ink); border-color: var(--accent); }

/* levels read as three rows: the reading column is too narrow for three columns of text */
.prose .level { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: .2em 1.2em; padding: .9em 0 .9em .9em; margin: 0; border-top: 1px solid var(--rule); border-left: 3px solid var(--accent); }
.prose .level + .level { margin-top: .5em; }
.prose .level > h4 { grid-row: 1 / span 2; color: var(--accent-ink); }
.prose .level > ul, .prose .level > p { grid-column: 2; margin: 0; }
.prose .level-watch { border-left-color: var(--warm); }
.prose .level-watch > h4 { color: var(--warm); }
.prose .level-urgent { border-left-color: var(--danger); }
.prose .level-urgent > h4 { color: var(--danger); }
.prose .level ul { padding-left: 1.1em; }
.prose .level-link { font-weight: 600; padding-top: .5em; }
@media (max-width: 34rem) {
  .prose .level { grid-template-columns: 1fr; }
  .prose .level > h4 { grid-row: auto; margin-bottom: .4em; }
  .prose .level > ul, .prose .level > p { grid-column: 1; }
}

.prose .timeline { list-style: none; padding: 0; counter-reset: tl; }
.prose .timeline > li { position: relative; margin: 0 0 0 .8em; padding: 0 0 1.2em 1.9em; border-left: 1px solid var(--rule-strong); }
.prose .timeline > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.prose .timeline > li::before { counter-increment: tl; content: counter(tl); position: absolute; left: -.85em; top: -.15em; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--accent); color: var(--paper); font-size: .8em; font-weight: 600; display: grid; place-items: center; font-variant-numeric: lining-nums; }
.prose .timeline h4 { margin-bottom: .45em; }
.prose .timeline ul { padding-left: 1.1em; }

.prose .checklist { list-style: none; padding: 0; }
.prose .checklist > li::before { content: none; }
.prose .checklist label { display: grid; grid-template-columns: auto 1fr; gap: .7em; align-items: start; cursor: pointer; }
.prose .checklist input { width: 1.15em; height: 1.15em; margin: .22em 0 0; accent-color: var(--accent); }
.prose .checklist input:checked + span { color: var(--muted); }

@media print {
  .art-layout { display: block; }
  .prose .box { break-inside: avoid; background: none; border: 1px solid #999; }
  .prose .level { border-left: 3px solid #000; }
  .prose .timeline > li::before { background: none; color: #000; border: 1px solid #000; }
}

/* citations and the list of sources */
.cite { font-family: var(--sans); font-size: .62em; line-height: 0; vertical-align: super; margin-left: .12em; font-variant-numeric: lining-nums; }
.cite a { color: var(--accent-ink); text-decoration: none; padding: 0 .15em; }
.cite a:hover { text-decoration: underline; }
.sources { list-style: decimal; padding-left: 1.4rem; }
.sources li { scroll-margin-top: 5rem; }
.sources li:target { background: var(--accent-soft); }
.src-type { display: inline-block; margin-left: .35rem; font-size: var(--fs-micro); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

/* research base: one conclusion per folded block, unanswered questions, the note on who compiled it */
.ev-list { border-bottom: 1px solid var(--rule); max-width: var(--measure); }
.ev { border-top: 1px solid var(--rule); }
.ev > summary { cursor: pointer; list-style: none; position: relative; padding: .8rem 2rem .8rem 0; font-family: var(--serif); font-size: 1.125rem; line-height: 1.3; }
.ev > summary::-webkit-details-marker { display: none; }
.ev > summary::after { content: "+"; position: absolute; right: .2rem; top: .65rem; font-family: var(--sans); font-size: 1.3rem; color: var(--muted); }
.ev[open] > summary::after { content: "–"; }
.ev-tag { display: inline-block; margin-left: .4rem; padding: .05rem .45rem; border: 1px solid var(--warm); color: var(--warm); font-family: var(--sans); font-size: var(--fs-micro); letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; white-space: nowrap; }
.ev-body { padding: 0 0 1.1rem; display: grid; gap: .55rem; }
.ev-answer { font-family: var(--serif); font-size: 1.0625rem; line-height: 1.55; color: var(--ink); }
.ev-row { font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2); }
.ev-row b { font-weight: 600; color: var(--ink); }
.ev-ref { font-variant-numeric: lining-nums; text-decoration: none; color: var(--accent-ink); }
.gaps { max-width: var(--measure); }
.gaps li { padding: .55rem 0; border-top: 1px solid var(--rule); font-size: var(--fs-small); color: var(--ink-2); }
.gaps-more > summary { cursor: pointer; padding: .6rem 0; font-size: var(--fs-small); font-weight: 600; }
.science-note { max-width: var(--measure); margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }

/* the answer first (decisions D-021, D-025, D-027). Everywhere: title, the whole lead (the person's scene and the
   annotation that sells the reading), the answer. On a computer the picture is not touched and the answer opens
   the body; the copy in the head is hidden there. On a phone the head copy is shown above the picture and the
   body copy is hidden. */
.art-answer { display: none; }
@media (max-width: 48rem) {
  .art-top.answer-top .art-head { padding-top: 1.1rem; gap: .8rem; }
  .art-top.answer-top .art-answer { display: flex; flex-direction: column; gap: 1rem; }
  .art-top.answer-top .art-answer > .box { margin: 0; }
  .art-top.answer-top .scene, .art-top.answer-top .scene:has(> svg[viewBox="0 0 640 360"]) { order: 1; margin: .25rem auto 0; }
  .has-answer-top .prose .not-phone { display: none; }
}

/* account.css */
/* Accounts: the sign-in dialog and the small account lines. Present only in a build that names an account server. */
.acc-dlg { width: min(34rem, calc(100vw - 2rem)); padding: 0; border: 1px solid var(--rule-strong); border-radius: var(--radius-l); background: var(--paper); color: var(--ink); }
.acc-dlg::backdrop { background: rgb(0 0 0 / .55); }
.acc-form { display: grid; gap: 1rem; padding: clamp(1.25rem, 3vw, 2rem); }
.acc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.acc-head .icon-btn { flex: none; font-size: 1.5rem; line-height: 1; }
.acc-msg { padding: .7rem .9rem; border-left: 2px solid var(--danger); background: var(--danger-soft); }
.acc-slot { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: 1rem; }
.acc-ref { display: flex; flex-wrap: wrap; gap: .6rem; margin: .8rem 0; }
.acc-ref .input { flex: 1 1 16rem; }
.acc-h { margin-top: 1.6rem; }
.spec-account { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.acc-line { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem 1rem; margin: 1rem 0; }
.acc-line .field { flex: 1 1 14rem; max-width: 22rem; }
.acc-slot .btn + .btn { margin-left: 0; }
.svodka-admin { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem 1rem; }
.svodka-admin .field { flex: 1 1 16rem; max-width: 26rem; }
.svodka-acts { display: flex; flex-wrap: wrap; gap: .3rem .9rem; }

/* ask.css */
/* «Спроси MyPsy»: a quiet button at the bottom left (the arrow «наверх» lives on the right, «Помощь сейчас» at the
   top) and a panel that opens over the page. */
.ask-fab { position: fixed; z-index: 54; left: max(1rem, env(safe-area-inset-left, 0px)); bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  min-height: 2.75rem; padding: .55rem 1.1rem; border: 1px solid var(--accent); border-radius: 999px; background: var(--paper); color: var(--accent-ink);
  font-family: var(--sans); font-size: var(--fs-small); font-weight: 600; cursor: pointer; box-shadow: 0 2px 10px rgb(0 0 0 / .12); }
.ask-fab:hover { background: var(--accent); color: var(--on-accent); }
.ask-panel { width: min(40rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 1px solid var(--rule); border-radius: var(--radius-l);
  background: var(--paper); color: var(--ink); overflow: auto; }
.ask-panel::backdrop { background: rgb(0 0 0 / .45); }
.ask-form { display: grid; gap: .7rem; padding: 1.1rem 1.1rem .4rem; }
.ask-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ask-head h2 { margin: 0; }
.ask-label { font-size: var(--fs-small); color: var(--ink-2); }
.ask-form textarea { width: 100%; padding: .7rem .8rem; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--paper-2); color: var(--ink);
  font: inherit; font-size: var(--fs-ui); resize: vertical; }
.ask-form .btn { justify-self: start; }
.ask-note { margin: 0; font-size: var(--fs-micro); color: var(--muted); }
.ask-out { display: grid; gap: 1rem; padding: .6rem 1.1rem 1.2rem; }
.ask-out:empty { display: none; }
.ask-card { display: grid; gap: .45rem; padding: 1rem; border: 1px solid var(--rule); border-radius: var(--radius-l); background: var(--paper-2); }
.ask-path, .ask-why { margin: 0; font-size: var(--fs-small); color: var(--muted); }
.ask-title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.35rem; line-height: 1.2; }
.ask-title a { text-decoration: none; }
.ask-title a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.ask-short { margin: 0; }
.ask-actions, .ask-picks { display: flex; flex-wrap: wrap; gap: .5rem; }
.ask-next { display: grid; gap: .35rem; }
.ask-next .ask-label { margin: 0; }
.ask-link { font-size: var(--fs-ui); }
.ask-none p, .ask-unsure p { margin: 0 0 .5rem; }
@media (max-width: 40rem) {
  .ask-fab { bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
  .ask-panel { width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); }
}
@media print { .ask-fab { display: none; } }

/* The navigation quiz «Какой шаг подойдёт вам сейчас» inside an article (quiz.js): the route builder's buttons in a
   quiet box between sections. */
.quiz-slot { margin: var(--s-6) 0; }
.quiz-box { display: grid; gap: .7rem; padding: 1.1rem 1.2rem; border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: var(--radius-l); background: var(--paper-2); }
.quiz-box .kicker { margin: 0; }
.quiz-q { margin: 0; font-family: var(--serif); font-size: 1.35rem; line-height: 1.25; }
.quiz-opts { display: grid; gap: .5rem; }
.quiz-step { margin: 0; }
.quiz-steps { margin: 0; padding-left: 1.2rem; display: grid; gap: .45rem; }
.quiz-steps .meta { display: block; }
.quiz-help { margin: 0; padding: .7rem .8rem; border-radius: var(--radius); background: var(--warm-soft); }
.quiz-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.quiz-box a.btn { color: var(--on-accent); text-decoration: none; }
.quiz-box .btn { font-family: var(--sans); }

/* A guide page («Путеводитель»): numbered steps, each with why it comes now. */
.guide-page .guide-for { max-width: var(--measure); }
.guide-steps { list-style: none; margin: var(--s-5) 0; padding: 0; display: grid; gap: 0; max-width: var(--measure); }
.guide-step { display: grid; grid-template-columns: 2.75rem 1fr; gap: 1rem; padding: 1.1rem 0; border-top: 1px solid var(--rule); }
.guide-step:last-child { border-bottom: 1px solid var(--rule); }
.guide-no { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 1px solid var(--accent); border-radius: 999px; color: var(--accent-ink); font-family: var(--serif); font-size: 1.25rem; }
.guide-title { font-family: var(--serif); font-size: 1.35rem; line-height: 1.2; text-decoration: none; }
.guide-title:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.guide-why, .guide-step .meta { margin: 0; }
.guide-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: var(--s-4) 0; }
.guide-help, .guide-outro { max-width: var(--measure); }
.route-cta-alt { margin: .6rem 0 0; font-size: var(--fs-small); }
.ask-fab { transition: transform .2s ease, opacity .2s ease; }
.ask-fab.is-away, .ask-fab.is-near { transform: translateY(160%); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .ask-fab { transition: none; } }
/* inside an article the quiz speaks in the interface voice, not in the article's reading size: the result fits a phone screen */
.prose .quiz-box { font-family: var(--sans); font-size: var(--fs-ui); line-height: 1.45; }
.prose .quiz-box .quiz-q { font-family: var(--serif); font-size: 1.3rem; }
.prose .quiz-steps { font-size: var(--fs-ui); }
.prose .quiz-steps a { font-weight: 600; }
.prose .quiz-help { font-size: var(--fs-small); }
.prose .quiz-box .route-opt { font-family: var(--sans); font-size: var(--fs-ui); }

/* Conversion (switch «nudge»): the returning reader's route in the hero, the action inside a toast. */
.hero-continue { margin: .4rem 0 0; font-size: var(--fs-small); }
.hero-continue a { color: var(--accent); }
.toast-act { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }

/* asked.css */
/* «О чём спрашивают чаще всего»: a numbered list of questions with how often they are asked (decision 2026-10-14) */
.asked-list { list-style: none; counter-reset: asked; display: grid; max-width: 56rem; margin: 0; padding: 0; }
.asked-list li { counter-increment: asked; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); column-gap: .9rem; row-gap: .2rem; padding: .85rem 0; border-top: 1px solid var(--rule); }
.asked-list li:last-child { border-bottom: 1px solid var(--rule); }
.asked-list li::before { content: counter(asked); grid-row: span 2; color: var(--accent); font-family: var(--serif); font-size: 1.2rem; line-height: 1.3; font-variant-numeric: lining-nums; }
.asked-list a { color: inherit; text-decoration: none; font-family: var(--serif); font-size: 1.12rem; line-height: 1.3; }
.asked-list a:hover b, .asked-list a:focus-visible b { text-decoration: underline; text-underline-offset: .18em; }
.asked-n { color: var(--accent); font-size: var(--fs-small); }
.asked-n i { font-style: normal; color: var(--muted); }

/* b2b.css */
/* The page for specialists, the demand map (build-time example and the internal tool) and the thin tool pages.
   Tokens only. Hierarchy is carried by type and hairline rules; nothing here is a card. */

/* ---- /dlya-specialistov/ ------------------------------------------------------------------------------------ */
.b2b-head .h1 { max-width: 22ch; }
.b2b [id] { scroll-margin-top: 1.5rem; }
.b2b-brief-sec { padding-top: 0; }
.b2b-brief { counter-reset: brief; display: grid; margin-top: .9rem; }
.b2b-brief li { counter-increment: brief; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: .75rem; padding: .8rem 0; border-top: 1px solid var(--rule); font-family: var(--serif); font-size: var(--fs-read); line-height: 1.4; }
.b2b-brief li:last-child { border-bottom: 1px solid var(--rule); }
.b2b-brief li::before { content: counter(brief); color: var(--accent); font-variant-numeric: lining-nums; }
.b2b-toc .topic-lines b { font-size: 1.0625rem; }

/* a verified figure with its source: a large numeral, one sentence, the source line */
.b2b-fact { display: grid; gap: .5rem; align-content: start; }
.b2b-fact b { font-family: var(--serif); font-weight: 400; font-size: clamp(2.75rem, 4vw + 1.5rem, 4.5rem); line-height: 1; letter-spacing: -.02em; color: var(--accent); font-variant-numeric: lining-nums; }
.b2b-fact p { font-family: var(--serif); font-size: 1.125rem; line-height: 1.4; max-width: 24rem; }
.b2b-fact cite { font-style: normal; font-size: var(--fs-small); color: var(--muted); }
.b2b-src { overflow-wrap: anywhere; }

/* ruled lists */
.b2b-list li { padding: .7rem 0; border-top: 1px solid var(--rule); max-width: var(--measure); }
.b2b-list li:last-child { border-bottom: 1px solid var(--rule); }
.b2b-not li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: .5rem; }
.b2b-not li::before { content: "×"; color: var(--danger); font-family: var(--serif); font-size: 1.3rem; line-height: 1.15; }

/* the chain: what happens, what can be seen, where it stands now */
.b2b-steps > li > div { max-width: var(--measure); min-width: 0; }
.b2b-steps p + p { margin-top: .45rem; }
.b2b-state { font-size: var(--fs-small); color: var(--ink-2); }
.b2b-state > span { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-right: .5rem; }

/* the nested ladder of packages: every rung starts one step further and repeats nothing */
.b2b-ladder { --step: clamp(.6rem, 4.5vw, 4rem); display: grid; }
.b2b-rung { margin-left: calc(var(--i) * var(--step)); display: grid; grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr); gap: .75rem clamp(1rem, 3vw, 2.5rem); padding: 1.1rem 0 1.3rem; border-top: 2px solid var(--rule-strong); }
.b2b-rung:last-child { border-bottom: 1px solid var(--rule); }
.b2b-rung-name { display: grid; gap: .3rem; align-content: start; }
.b2b-rung-base { font-size: var(--fs-small); color: var(--muted); margin-bottom: .45rem; }
.b2b-rung-adds li { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: .15rem 1.25rem; align-items: baseline; padding: .5rem 0; border-top: 1px solid var(--rule); }
.b2b-rung-adds b { font-family: var(--serif); font-weight: 400; font-size: 1.1875rem; line-height: 1.25; }
.b2b-rung-adds span { color: var(--muted); font-size: var(--fs-small); }
@media (max-width: 44rem) {
  .b2b-ladder { --step: .6rem; }
  .b2b-rung { grid-template-columns: minmax(0, 1fr); }
  .b2b-rung-adds li { grid-template-columns: minmax(0, 1fr); }
}

/* what stays yours: ruled key and value lines */
.b2b-kv { gap: 0 1.5rem; max-width: 60rem; }
.b2b-kv dt, .b2b-kv dd { padding: .85rem 0; border-top: 1px solid var(--rule); }
.b2b-kv dt { font-family: var(--serif); font-size: 1.1875rem; line-height: 1.25; color: var(--ink); }
@media (max-width: 36rem) {
  .b2b-kv dd { border-top: 0; padding-top: 0; margin-bottom: 0; }
  .b2b-kv dt { padding-bottom: .3rem; }
}

.b2b-faq { max-width: 52rem; }
.b2b-form { display: grid; gap: 1rem; max-width: 34rem; }
.b2b-form-status { font-size: var(--fs-small); padding: .7rem .9rem; background: var(--accent-soft); color: var(--accent-ink); border-left: 3px solid var(--accent); }

/* ---- thin tool pages ---------------------------------------------------------------------------------------- */
.tool-frame { display: block; width: 100%; height: 85vh; min-height: 28rem; margin-top: 1rem; border: 1px solid var(--rule); background: var(--paper-2); }
.tools-list { margin-top: 1.5rem; max-width: 52rem; }
.tools-back { margin-top: 1.25rem; }

/* ---- demand map: shared pieces ------------------------------------------------------------------------------ */
.dm-note { max-width: none; }
.dm-sub { margin: 0; font-family: var(--sans); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); line-height: 1.4; }
.dm-demo { display: grid; gap: 1.1rem; align-content: start; }
.dm-head { display: grid; gap: .4rem; padding: 1rem 0 1.1rem; border-top: 2px solid var(--rule-strong); border-bottom: 1px solid var(--rule); }
.dm-phrase { font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 1.6vw + 1rem, 2.25rem); line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; overflow-wrap: anywhere; }
.dm-num { font-size: var(--fs-small); color: var(--ink-2); }
.dm-num b { margin-right: .2rem; font-family: var(--serif); font-weight: 400; font-size: clamp(1.75rem, 1.2vw + 1.3rem, 2.5rem); line-height: 1; color: var(--accent); font-variant-numeric: lining-nums tabular-nums; }
.dm-cols-head { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0 .35rem; font-size: var(--fs-micro); color: var(--muted); }
.dm-rows { border-top: 1px solid var(--rule); }
.dm-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1rem; align-items: baseline; padding: .55rem 0; border-bottom: 1px solid var(--rule); }
.dm-row-main { display: grid; gap: .15rem; min-width: 0; }
.dm-row-label { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--warm); }
.dm-row-q { font-family: var(--serif); font-size: 1.0625rem; line-height: 1.3; overflow-wrap: anywhere; }
.dm-row-flags { font-size: var(--fs-micro); color: var(--muted); }
.dm-row-n { display: grid; gap: .1rem; justify-items: end; text-align: right; white-space: nowrap; }
.dm-row-n b { font-weight: 600; font-variant-numeric: tabular-nums; }
.dm-row-n small { font-size: var(--fs-micro); color: var(--muted); }
.dm-after { margin-top: .6rem; }

/* ---- demand map: the tool ----------------------------------------------------------------------------------- */
.dm-gate { display: grid; gap: 1rem; max-width: 36rem; padding-block: .5rem 2rem; }
.dm-gate-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; align-items: end; }
.dm-gate-error { color: var(--danger); font-size: var(--fs-small); }
@media (max-width: 26rem) { .dm-gate-form { grid-template-columns: minmax(0, 1fr); } }

.dm-app { display: grid; gap: 1.5rem; }
.dm-note-bar { z-index: 5; display: grid; gap: .4rem; padding: .75rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--paper); }
@media (min-width: 48rem) and (min-height: 40rem) { .dm-note-bar { position: sticky; top: 0; } }
.dm-setup { display: grid; gap: 1rem; }
.dm-spec-field { max-width: 36rem; }
.dm-pick { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.dm-pick > summary { cursor: pointer; padding: .8rem 0; font-size: var(--fs-small); font-weight: 600; }
.dm-pick-in { display: grid; gap: 1.1rem; padding: .2rem 0 1.2rem; }
.dm-pick-group { display: grid; gap: .5rem; }
.dm-copybox { display: grid; gap: .5rem; }
.dm-copybox textarea { min-height: 10rem; font-size: var(--fs-small); }

.dm-doc { display: grid; gap: 1.75rem; }
.dm-doc-head { display: grid; gap: .6rem; }
.dm-miss { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.dm-miss > summary { cursor: pointer; padding: .6rem 0; font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); }
.dm-miss-list { display: grid; gap: .35rem; padding: 0 0 .8rem; font-size: var(--fs-small); color: var(--muted); max-width: 60rem; }
.dm-miss-list b { font-weight: 600; color: var(--ink-2); }
.dm-toc .chips li { display: flex; }
.dm-topics { display: grid; gap: clamp(2.25rem, 4.5vw, 4rem); }
.dm-topics .dm-topic { display: grid; gap: 1.25rem; scroll-margin-top: 7.5rem; }
.dm-topic-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1.5rem; padding-top: .8rem; border-top: 3px double var(--rule-strong); }
.dm-topic-title { display: grid; gap: .35rem; min-width: 0; }
.dm-cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
.dm-col { display: grid; gap: 1.4rem; align-content: start; min-width: 0; }
.dm-block { min-width: 0; }
.dm-topics .dm-head { border-top-width: 1px; border-top-color: var(--rule); }
.dm-facts { gap: 0 1.5rem; grid-template-columns: minmax(7rem, 12rem) minmax(0, 1fr); }
.dm-facts dt, .dm-facts dd { padding: .5rem 0; border-bottom: 1px solid var(--rule); }
.dm-more { margin-top: .15rem; }
.dm-more > summary { cursor: pointer; padding: .6rem 0; font-size: var(--fs-small); font-weight: 600; color: var(--accent-ink); }
.dm-more > .dm-rows { border-top: 0; }
.dm-more-in { grid-column: 1 / -1; margin: 0; }
.dm-more-in > summary { padding: .35rem 0; font-size: var(--fs-micro); font-weight: 500; color: var(--muted); }
.dm-rows-sub { margin: .25rem 0 .2rem; padding-left: 1rem; border-top: 0; border-left: 2px solid var(--rule); }
.dm-rows-sub .dm-row:last-child { border-bottom: 0; }
.dm-rows-sub .dm-row-q { font-size: 1rem; }
.dm-print-only { display: none; }
@media (max-width: 56rem) { .dm-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 36rem) {
  .dm-facts { grid-template-columns: minmax(0, 1fr); }
  .dm-facts dt { border-bottom: 0; padding-bottom: 0; }
  .dm-facts dd { margin-bottom: 0; padding-top: .1rem; }
}

/* the printed map: a clean document with the title line, the date and the methodological note */
@media print {
  .dm-page-head, .dm-gate, .dm-note-bar, .dm-setup, .dm-copybox, .dm-toc, .dm-remove, .dm-more > summary, .toast { display: none !important; }
  .dm-print-only { display: block !important; }
  .dm, .dm * { color: inherit !important; background: transparent !important; border-color: currentColor !important; }
  .dm.wrap { max-width: none; padding-inline: 0; }
  .dm-doc-title { font-size: 22pt; }
  .dm-cols { grid-template-columns: minmax(0, 1fr); }
  .dm-topic-head { break-after: avoid; }
  .dm-topic-head, .dm-head, .dm-row, .dm-sub, .dm-cols-head { break-inside: avoid; }
  .dm-sub, .dm-cols-head { break-after: avoid; }
  .dm-rows-sub { border-left-width: 1px; }
  .dm-neigh .chip { min-height: 0; padding: 0 .7rem 0 0; border: 0; }
  @page { margin: 14mm 14mm 16mm; }
}

/* who answers now: a stacked bar of the top five and its legend */
.field-bar { display: flex; height: 1.5rem; border: 1px solid var(--rule-strong); max-width: 52rem; }
.field-bar > span { display: block; min-width: 2px; }
.field-pract { background: var(--accent); }
.field-media { background: var(--ink-2); }
.field-clinic { background: var(--warm); }
.field-brand { background: var(--muted); }
.field-open { background: var(--paper-3); }
.field-legend { display: grid; gap: .45rem; margin-top: 1rem; max-width: 52rem; font-size: var(--fs-small); }
.field-legend li { display: grid; grid-template-columns: 1rem 3rem 1fr; gap: .6rem; align-items: baseline; }
.field-legend b { font-variant-numeric: tabular-nums; text-align: right; }
.field-swatch { width: 1rem; height: .8rem; border: 1px solid var(--rule-strong); align-self: center; }

/* cabinet.css */
/* Personal cabinet: the reader's own issue of the magazine. Section titles stand in a narrow left column under
   a flag rule, the content on the right is built from type, hairline rules and whitespace. Tokens only.
   Every selector is scoped with .cab so nothing leaks into other pages of the shared stylesheet. */

/* anchors and focused controls stop below the sticky sub-navigation */
:root:has(.cab-nav) { scroll-padding-top: 3rem; }
@supports not selector(:has(*)) { .cab-sec { scroll-margin-top: 3rem; } }

/* sticky sub-navigation */
.cab-nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--paper); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.cab-nav-row { display: flex; gap: clamp(1rem, 2vw, 1.75rem); overflow-x: auto; scrollbar-width: none; }
.cab-nav-row::-webkit-scrollbar { display: none; }
.cab-nav-row a { flex: none; display: inline-flex; align-items: baseline; gap: .4rem; padding: .7rem 0 .6rem; border-bottom: 2px solid transparent; font-size: var(--fs-small); font-weight: 500; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.cab-nav-row a:hover { border-bottom-color: var(--rule); color: var(--ink); }
.cab-nav-row a[aria-current="true"] { border-bottom-color: var(--accent); color: var(--accent-ink); }
.cab-nav-row a:focus-visible { outline-offset: -2px; }
.cab-n { font-size: var(--fs-micro); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.cab-nav-row a[aria-current="true"] .cab-n { color: inherit; }

/* a section: title column and content column */
.cab-head .note a { color: var(--accent-ink); white-space: nowrap; }
.cab-sec { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(1.25rem, 2.6vw, 2.5rem); }
.cab-side { position: sticky; top: 4rem; align-self: start; display: grid; gap: .5rem; align-content: start; }
.cab-side .h2:focus-visible { outline-offset: 4px; }
.cab-main { min-width: 0; overflow-wrap: anywhere; }
.cab-main [data-k] { scroll-margin-block: 1.25rem; }
.cab-box { display: grid; gap: 1.5rem; align-content: start; }
.cab-wait, .cab-empty { font-family: var(--serif); font-style: italic; font-size: var(--fs-h3); line-height: 1.4; color: var(--muted); max-width: 40rem; }
.cab-empty-block { display: grid; gap: .9rem; justify-items: start; }
.cab-status { font-size: var(--fs-small); color: var(--ink-2); max-width: 46rem; }
.cab-status:not(:empty) { margin-bottom: 1.25rem; padding: .55rem .9rem; background: var(--accent-soft); border-left: 2px solid var(--accent); }
.cab-status .cab-act { min-height: 0; padding: 0; margin-left: .4rem; }
.cab-sub { display: grid; gap: .75rem; align-content: start; }
.cab-sub-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1.5rem; }
.cab-lede { font-family: var(--serif); font-size: var(--fs-body); line-height: 1.55; color: var(--ink-2); max-width: 42rem; }
@media (max-width: 62rem) {
  .cab-sec { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .cab-side { position: static; }
  /* in one column the rule between sections already closes the last list */
  .cab-box > .cab-list:last-child > .cab-row:last-child,
  .cab-box > .cab-sub:last-child > .cab-list:last-child > .cab-row:last-child { border-bottom: 0; padding-bottom: 0; }
}

/* quiet text controls: rows carry several actions, bordered buttons would turn the page into a panel */
.cab-act { display: inline-flex; align-items: center; min-height: 2.25rem; padding: .25rem 0; border: 0; border-radius: var(--radius); background: none; cursor: pointer; font-family: var(--sans); font-size: var(--fs-small); font-weight: 500; line-height: 1.3; text-align: left; color: var(--accent-ink); text-decoration: underline; text-decoration-color: var(--rule); text-decoration-thickness: 1px; text-underline-offset: .24em; }
.cab-act:hover { text-decoration-color: currentColor; }
.cab-act[aria-pressed="true"] { color: var(--ink); font-weight: 600; text-decoration: none; }
.cab-act-danger { color: var(--danger); }
.cab-act[disabled] { color: var(--muted); text-decoration: none; cursor: default; opacity: .5; }
.cab-arrow { min-width: 2.25rem; justify-content: center; font-size: var(--fs-body); text-decoration: none; }
.cab-arrow:hover:not([disabled]) { background: var(--paper-3); }

/* lists of rows */
.cab-list { display: grid; }
.cab-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem 1.5rem; align-items: start; padding-block: .95rem; border-top: 1px solid var(--rule); }
.cab-list > .cab-row:last-child { border-bottom: 1px solid var(--rule); }
.cab-row-main { display: grid; gap: .35rem; min-width: 0; align-content: start; }
.cab-row-main > p:not(.kicker):not(.meta) { color: var(--ink-2); font-size: .9688rem; max-width: 44rem; }
.cab-row-main .said { font-size: var(--fs-body); }
.cab-row-acts { display: flex; flex-wrap: wrap; gap: 0 1.1rem; align-items: center; justify-content: flex-end; }
.cab-row-lead { padding-block: 0 1.25rem; border-top: 0; }
.cab-row-lead .story-title { font-size: var(--fs-h2); line-height: 1.12; }
.cab-row-tight { padding-block: .55rem; align-items: baseline; }
.cab-row-tight .story-title { font-size: 1.125rem; }
.cab-row-num { grid-template-columns: 2rem minmax(0, 1fr) auto; }
.cab-num { font-family: var(--serif); font-size: 1.375rem; line-height: 1.15; color: var(--muted); font-variant-numeric: lining-nums tabular-nums; }
.cab-time { font-size: var(--fs-small); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 40rem) {
  .cab-row { grid-template-columns: minmax(0, 1fr); }
  .cab-row-num { grid-template-columns: 1.75rem minmax(0, 1fr); }
  .cab-row-num .cab-row-acts { grid-column: 2; }
  .cab-row-acts { justify-content: flex-start; }
}

/* thin bars: reading progress and relative strength of an interest */
.cab-bar { display: block; width: 100%; max-width: 16rem; height: 3px; background: var(--rule); }
.cab-bar > i { display: block; height: 100%; background: var(--accent); }
.cab-progress { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; }
.cab-progress .cab-bar { flex: 1 1 8rem; }
.cab-int { grid-template-columns: minmax(0, 1fr) minmax(4rem, 10rem) auto; align-items: center; padding-block: .45rem; }
.cab-int-name { font-family: var(--serif); font-size: 1.125rem; line-height: 1.25; }
.cab-int-name a { text-decoration: none; }
.cab-int-name a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.cab-int-name small { font-family: var(--sans); font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-left: .5rem; white-space: nowrap; }
@media (max-width: 40rem) {
  .cab-int { grid-template-columns: minmax(0, 1fr) auto; }
  .cab-int .cab-bar { grid-column: 1 / -1; grid-row: 2; max-width: none; }
}
.cab-follows .chip[aria-pressed="true"]::after { content: "×"; font-size: 1.05em; line-height: 1; opacity: .8; }

/* onboarding: sits in the frame of the shared personal block (.foryou) */
.cab-ob { gap: 1.4rem; }
.cab-ob-head { display: grid; gap: .45rem; max-width: 44rem; }
.cab-ob-head p:not(.kicker) { color: var(--ink-2); }
.cab-ob-group { display: grid; gap: .6rem; }
.cab-ob-group + .cab-ob-group { border-top: 1px solid var(--rule); padding-top: 1rem; }
.cab-ob-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.25rem; border-top: 1px solid var(--rule); padding-top: 1.1rem; }
.cab-ob-foot .meta { flex: 1 1 12rem; }

/* the reader's own collections */
.cab-coll { display: grid; gap: .5rem; }
.cab-coll + .cab-coll { margin-top: 1rem; }
.cab-coll-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .1rem 1.5rem; border-top: 2px solid var(--rule-strong); padding-top: .6rem; }
.cab-coll-head h3 { font-size: clamp(1.375rem, .6vw + 1.2rem, 1.625rem); line-height: 1.2; }
.cab-coll-head h3 small { font-family: var(--sans); font-size: var(--fs-small); letter-spacing: 0; color: var(--muted); margin-left: .5rem; white-space: nowrap; }
.cab-coll .cab-row-acts { gap: 0 .9rem; }

/* inline editors and confirmations */
.cab-form { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; max-width: 40rem; }
.cab-form .field { flex: 1 1 14rem; min-width: 0; }
.cab-panel { display: grid; gap: .75rem; justify-items: start; max-width: 42rem; padding: .2rem 0 .2rem 1rem; border-left: 2px solid var(--rule); }
.cab-panel > .field, .cab-panel > .cab-form { width: 100%; }
.cab-panel-danger { border-left-color: var(--danger); }
.cab-panel-danger .btn { background: var(--danger); border-color: var(--danger); }
.cab-panel-danger .btn:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.cab-text { min-height: 11rem; font-family: var(--sans); font-size: var(--fs-small); line-height: 1.45; resize: vertical; overflow-wrap: normal; white-space: pre; overflow: auto; }
.cab-err { font-size: var(--fs-small); color: var(--danger); max-width: 40rem; }
.cab-text-soft { white-space: pre-wrap; overflow-wrap: anywhere; min-height: 7rem; }
.cab-kv { max-width: 34rem; margin: 0; grid-template-columns: minmax(0, 1fr) auto; gap: 0; }
.cab-kv dt, .cab-kv dd { padding-block: .5rem; border-top: 1px solid var(--rule); }
.cab-kv dt { color: var(--ink-2); font-size: var(--fs-body); padding-right: 1.5rem; }
.cab-kv dd { font-family: var(--serif); font-size: 1.125rem; font-variant-numeric: lining-nums tabular-nums; text-align: right; }
.cab-kv dt:last-of-type, .cab-kv dd:last-of-type { border-bottom: 1px solid var(--rule); }
@media (max-width: 36rem) { .cab-kv { grid-template-columns: minmax(0, 1fr) auto; gap: 0; } .cab-kv dd { margin-bottom: 0; } }
.cab-data-acts { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.cab-data-acts .btn[aria-expanded="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }

@media print {
  .cab-act, .cab-form, .cab-panel, .cab-ob { display: none !important; }
  .cab-sec { grid-template-columns: minmax(0, 1fr); }
  .cab-side { position: static; }
}

/* dir.css */
/* City directory of psychological centres (/psihologi/<city>/). Cards reuse the kz-* rules of kz-drafts.css. */
.dir-city .dir-card { gap: .7rem; }
.dir-city .dir-hours { margin: 0; font-size: var(--fs-small); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.dir-city .dir-acts { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .2rem; }
.dir-city .dir-guide { display: grid; gap: .8rem; margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--rule); max-width: 46rem; }
.dir-city .dir-guide h2, .dir-city .dir-guide p { margin: 0; }
.dir-city .dir-links { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.dir-city .dir-note { font-size: var(--fs-small); }
.dir-city .dir-join { display: grid; gap: .6rem; margin-top: 2rem; padding: 1.2rem; border: 1px solid var(--accent); border-radius: var(--radius-l); max-width: 46rem; }
.dir-city .dir-join h2, .dir-city .dir-join p { margin: 0; }
.dir-city a.chip { text-decoration: none; }
/* «Найти специалиста очно» at the end of an article: links to the directory pages of the topic's kind of help */
.dir-art { display: grid; gap: .4rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.dir-art p { margin: 0; }
.dir-art ul { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin: 0; padding: 0; list-style: none; font-size: var(--fs-small); }

/* editorial.css */
/* Trust and editorial pages, the help-now page and the styleguide. Tokens only.
   Every selector is scoped with .ed-, .help- or .sg- so nothing leaks into other pages of the shared stylesheet.
   The pages reuse the article shell (.art-head, .byline, .art-layout, .art-rail, .prose, .art-foot). */

/* ---- trust pages ------------------------------------------------------------------------------------------------- */
.ed-body { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.ed-nav li:last-child { border-bottom: 1px solid var(--rule); }
.ed-nav a[aria-current="page"] { color: var(--accent-ink); font-weight: 600; }

/* a block the page module puts into the running text: interface type instead of reading type */
.prose .ed-out { font-family: var(--sans); font-size: var(--fs-body); line-height: 1.55; margin-block: 1.9em; }
.prose .ed-out h3 { font-style: normal; margin-top: 0; }
.prose .ed-out ul, .prose .ed-out ol { list-style: none; padding-left: 0; }
.prose .ed-out li + li { margin-top: 0; }
.prose .ed-out ul > li::before { content: none; }
.prose .ed-out .person h3 a { color: inherit; }
.ed-empty { font-family: var(--serif); font-style: italic; color: var(--muted); }
.ed-count { margin-top: 1rem; font-size: var(--fs-small); color: var(--muted); }
.ed-state { padding-block: 1rem; border-top: 2px solid var(--rule-strong); border-bottom: 1px solid var(--rule); }

/* ledger: a term and two labelled cells per row; a table on wide screens, a list on narrow ones */
.ed-ledger { border-top: 2px solid var(--rule-strong); }
.ed-ledger > li { display: grid; grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr) minmax(0, 1fr); gap: .75rem 1.5rem; padding: 1.05rem 0 1.15rem; border-bottom: 1px solid var(--rule); }
.prose .ed-ledger-term { font-family: var(--serif); font-size: 1.1875rem; line-height: 1.2; letter-spacing: -.005em; }
.ed-ledger-term small { display: block; margin-top: .3rem; font-family: var(--sans); font-size: var(--fs-micro); letter-spacing: .04em; color: var(--muted); }
.ed-ledger-label { margin-bottom: .25rem; font-size: var(--fs-micro); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.ed-ledger p:not(.ed-ledger-label) { font-size: .9375rem; color: var(--ink-2); }
.ed-ledger .ed-ledger-eg { margin-top: .45rem; color: var(--muted); }
/* wide: the labels of the first row work as column heads, the rest stay available to screen readers only */
@media (min-width: 44.01rem) {
  .ed-ledger > li + li .ed-ledger-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 44rem) {
  .ed-ledger > li { grid-template-columns: minmax(0, 1fr); }
}

/* corrections log */
.ed-log th:first-child, .ed-log td:first-child { width: 8.5rem; }
.ed-log .ed-log-empty { padding-block: 1.25rem; font-family: var(--serif); font-style: italic; color: var(--muted); }

/* ---- help now: calm, short, large type --------------------------------------------------------------------------- */
.help-head { display: grid; gap: .9rem; max-width: 46rem; padding-block: clamp(1.75rem, 4vw, 3.25rem) 0; }
.prose.help-prose { max-width: 40rem; margin-top: 1.5rem; font-size: clamp(1.1875rem, .55vw + 1.07rem, 1.4375rem); line-height: 1.6; }
.prose.help-prose .lede { font-size: 1.14em; line-height: 1.5; }
.prose.help-prose .lede::first-line { font-variant-caps: normal; letter-spacing: 0; }
.prose.help-prose h2 { margin-top: 2em; padding-top: .6em; border-top: 2px solid var(--rule-strong); font-size: clamp(1.625rem, 1.6vw + 1.2rem, 2.375rem); }
.prose.help-prose h2 .sec-no { display: none; }
.prose.help-prose strong { font-weight: 600; }
.prose.help-prose ol { list-style: none; padding-left: 0; counter-reset: help-step; }
.prose.help-prose ol > li { counter-increment: help-step; position: relative; padding-left: 3.1rem; }
.prose.help-prose ol > li + li, .prose.help-prose ul > li + li { margin-top: .9em; }
.prose.help-prose ol > li::before { content: counter(help-step); position: absolute; left: 0; top: .08em; font-size: 1.9em; line-height: 1; color: var(--accent); font-variant-numeric: lining-nums; }
.prose.help-prose .box-note { margin-top: 2.6em; font-size: var(--fs-body); }
.prose.help-prose .ed-out { margin-block: 1.6em; }
@media (max-width: 30rem) {
  .prose.help-prose ol > li { padding-left: 2.5rem; }
}

.prose .help-112 { gap: .35rem; padding: clamp(1.1rem, 3vw, 1.75rem); }
.help-112-label { font-size: var(--fs-small); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--danger); }
.help-112-num { font-family: var(--serif); font-size: clamp(4.5rem, 14vw, 7.5rem); line-height: .95; letter-spacing: -.03em; font-variant-numeric: lining-nums; }
.prose .help-112 a { color: var(--danger); }
.prose .help-112-num a { font-weight: 400; text-decoration: none; }
.prose .help-112-num a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .08em; }
.help-112 p:not([class]) { font-size: 1.0625rem; color: var(--ink); }
.prose .help-src { font-size: var(--fs-small); color: var(--muted); }
.prose .help-src a { color: inherit; font-weight: 400; }

.help-lines { border-top: 1px solid var(--rule); }
.help-lines > li { display: grid; gap: .3rem; padding: 1.15rem 0 1.25rem; border-bottom: 1px solid var(--rule); }
.help-line-name { font-size: var(--fs-small); font-weight: 600; letter-spacing: .02em; }
.help-line-name span { font-weight: 400; color: var(--muted); }
.help-line-phone { font-family: var(--serif); font-size: clamp(1.75rem, 5vw + .6rem, 3rem); line-height: 1.1; letter-spacing: -.015em; font-variant-numeric: lining-nums; }
.prose .help-line-phone a { color: var(--ink); text-decoration: none; white-space: nowrap; }
.prose .help-line-phone a:hover { color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .12em; }
.help-line-more { max-width: 34rem; font-size: .9375rem; color: var(--ink-2); }
.help-line-pending { font-family: var(--serif); font-style: italic; font-size: 1.5rem; line-height: 1.2; color: var(--muted); }

.help-foot { display: grid; gap: .4rem; max-width: 40rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--rule); font-size: var(--fs-small); color: var(--muted); }
.help-foot a { color: inherit; }

/* ---- styleguide -------------------------------------------------------------------------------------------------- */
:root:has(.sg-bar) { scroll-padding-top: 4.5rem; }
.sg-bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--paper); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.sg-bar-row { display: flex; align-items: center; gap: .5rem 1.25rem; padding-block: .5rem; overflow-x: auto; scrollbar-width: none; }
.sg-bar-row::-webkit-scrollbar { display: none; }
.sg-bar-row > * { flex: none; }
.sg-bar-group { display: flex; align-items: center; gap: .5rem; }
.sg-bar-label { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.sg-bar .chip { white-space: nowrap; }
.sg-bar .chip b { font-weight: 600; }
.sg-bar .chip:focus-visible, .sg-bar-nav a:focus-visible { outline-offset: -2px; }
.sg-bar-nav { display: flex; gap: 1.1rem; margin-left: auto; padding-left: .5rem; }
.sg-bar-nav a { padding: .4rem 0; font-size: var(--fs-small); font-weight: 500; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.sg-bar-nav a:hover { color: var(--accent-ink); text-decoration: underline; }

.sg .sec-head { align-items: flex-end; }
.sg-group { margin-top: clamp(1.5rem, 3vw, 2.25rem); display: grid; gap: .8rem; }
.sg-lead { max-width: 46rem; }
.sg-code { font-family: var(--sans); font-size: var(--fs-micro); letter-spacing: .01em; color: var(--muted); overflow-wrap: anywhere; }
.sg-token { font-family: var(--sans); font-size: var(--fs-small); font-weight: 600; }

/* colour */
.sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 1.25rem 1rem; }
.sg-swatch { display: grid; gap: .1rem; align-content: start; font-size: var(--fs-small); }
.sg-chip { display: block; height: 4.25rem; margin-bottom: .45rem; border: 1px solid var(--rule); }
.sg-on { display: inline-block; padding: .2rem .6rem; font-family: var(--serif); font-size: 1.0625rem; }
.sg .is-low { color: var(--danger); font-weight: 600; }

/* one labelled specimen: the name in a narrow left column, the thing itself on the right */
.sg-spec { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 1rem clamp(1.25rem, 2.6vw, 2.5rem); padding-block: 1.5rem; border-top: 1px solid var(--rule); }
.sg-spec-label { display: grid; gap: .25rem; align-content: start; font-size: var(--fs-small); }
.sg-spec-label b { font-weight: 600; }
.sg-spec-body { min-width: 0; }
@media (max-width: 48rem) {
  .sg-spec { grid-template-columns: minmax(0, 1fr); }
}

/* type */
.sg-glyphs { display: grid; gap: .5rem; }
.sg-glyph-serif { font-family: var(--serif); font-size: clamp(1.25rem, 1vw + 1rem, 1.75rem); line-height: 1.35; }
.sg-glyph-sans { font-size: 1.125rem; }
.sg-smcp { font-variant-caps: small-caps; letter-spacing: .03em; }
.sg-pair { padding-top: .7rem; border-top: 2px solid transparent; }
.sg-pair.is-on { border-top-color: var(--accent); }
.sg-pair-notes { display: grid; gap: .2rem; font-size: .9375rem; }
.sg-pair-notes dt { margin-top: .6rem; font-size: var(--fs-micro); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.sg-pair-notes dd { margin: 0; color: var(--ink-2); }
/* Pair C is a headline face. Reading text keeps the default serif on this page; the shared tokens have one --serif
   for both roles, so a real split needs a separate headline token. */
:root[data-type="c"] .sg :is(.prose, .prose .box-short, .prose .box-recognition li, .prose .box-recognition p, .prose .box-expert, .dek, .lead-text, .phrases, .said-list, .faq-a, .empty, .topic-lines span, .sg-on) { font-family: "Literata", "PT Serif", Georgia, serif; }

/* sizes */
.sg-spaces { display: grid; gap: .5rem; }
.sg-spaces li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) 3.5rem; align-items: center; gap: .75rem; }
.sg-space { display: block; height: .75rem; max-width: 100%; background: var(--accent); }

/* the article sample */
.sg-article { border-top: 1px solid var(--rule); }
.sg-article-body { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.sg-legend li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .45rem 0; }
.sg-legend .sg-code { flex: none; }
.sg-after { margin-top: 1rem; }

/* blocks */
.sg-person { max-width: 26rem; }
.sg-cover { max-width: 26rem; }
.sg-band { display: grid; gap: .5rem; padding: 1.5rem; }
.sg-form { max-width: 26rem; }

/* figures.css */
/* «MyPsy в цифрах» (/o-nas-v-cifrah/) and the list of places (/o-nas-v-cifrah/universitety/), 76-figures.mjs. The figures reuse
   the front page's .figs; here they run in more columns on the paper, the list runs in rows of narrow columns, most cited first. */
.figs-more, .sci-more { margin: 1rem 0 0; }
.figs-all { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.figures-page .figs b { color: var(--accent-ink); }
.figs-note { max-width: 44rem; margin: 1.2rem 0 0; }
.places-jump { margin-top: 1rem; }
.places-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); column-gap: clamp(1.25rem, 2.6vw, 2.5rem); margin: 0; padding: 0; list-style: none; }
.places-list li { break-inside: avoid; display: grid; gap: .1rem; padding: .55rem 0; border-top: 1px solid var(--rule); }
.places-list b { font-weight: 600; line-height: 1.3; }
.places-list span { font-size: var(--fs-small); color: var(--muted); }

/* home.css */
/* Front page. The hero is always dark (see .theme-dark); the shared pieces live in 35-kit.css. */

/* the hero says the tagline itself, so on this page the masthead is quieter and shorter */
[data-home] .mast-tag { display: none; }
[data-home] .mast { padding-block: clamp(.7rem, 1.5vw, 1.15rem) clamp(.5rem, 1vw, .8rem); }

.hero { background: radial-gradient(46rem 24rem at 82% -4%, color-mix(in srgb, var(--accent) 17%, transparent), transparent 72%),
  radial-gradient(34rem 20rem at 4% 108%, color-mix(in srgb, var(--warm) 11%, transparent), transparent 70%), var(--paper); }
.hero-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(1.5rem, 3.6vw, 3.75rem); align-items: start;
  padding-block: clamp(1.75rem, 3.4vw, 3rem) clamp(1.75rem, 3.2vw, 2.75rem); }
.hero-say { display: grid; gap: 1.05rem; align-content: start; min-width: 0; }
.hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.375rem, 2.5vw + 1.15rem, 3.625rem); line-height: 1; letter-spacing: -.022em; text-wrap: balance; }
.hero h1 em { display: block; font-style: italic; color: var(--accent); }
.hero .dek { max-width: 31rem; color: var(--ink-2); }

/* the search field: a button that opens the search dialog */
.hero-ask { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; max-width: 31rem; min-height: 3.35rem; padding: .35rem .4rem .35rem 1.2rem;
  border: 1px solid var(--rule-strong); border-radius: 999px; background: var(--paper-2); color: var(--muted); font: inherit; font-size: var(--fs-body); text-align: left; cursor: pointer; }
.hero-ask:hover { border-color: var(--accent); color: var(--ink); }
.hero-ask:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.hero-eg { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .85rem; font-size: var(--fs-small); color: var(--muted); }
.hero-eg button { padding: 0; border: 0; background: none; color: var(--ink-2); font: inherit; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: .2em; cursor: pointer; }
.hero-eg button:hover { color: var(--accent); text-decoration-color: currentColor; }
.hero-help { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: var(--fs-small); }
.hero-figs { padding-bottom: clamp(1.75rem, 3.2vw, 2.75rem); }
.hero-in { padding-bottom: clamp(1.25rem, 2.4vw, 2rem); }

/* ---- the wall of phrases and the answer under it ------------------------------------------------------------ */
.hero-wall { display: grid; gap: 1.25rem; align-content: start; min-width: 0; }
.hero-q { font-family: var(--serif); font-style: italic; font-size: var(--fs-h3); line-height: 1.2; color: var(--muted); }
.say-cloud { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: .85rem .65rem; }
.hw-item { display: block; min-width: 0; }
.hw-item:nth-child(3n+2) { margin-top: .7rem; }
.hw-item:nth-child(4n) { margin-top: .3rem; }
.hw-item .say { transform: rotate(-.9deg); }
.hw-item:nth-child(even) .say { border-radius: 1.3em 1.3em .3em 1.3em; transform: rotate(.8deg); }
.hw-item .say:hover, .hw-item .say.is-on { transform: rotate(0deg) scale(1.04); }
.hw-item.is-dim .say { opacity: .25; }
.hw-filter .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* the answer of the active phrase. Without scripts the phrases are plain links and no answer is shown. */
.hw-reply { display: none; }
.hw-stage, .hero-wall.is-live .hw-item.is-active .hw-reply { gap: .7rem; align-content: start; padding: 1.15rem 1.3rem 1.3rem; border: 1px solid var(--rule-strong);
  border-radius: .3em 1.4em 1.4em 1.4em; background: var(--paper-2); text-align: left; }
.hw-stage { display: grid; max-width: 31rem; min-height: 15rem; margin-top: .4rem; }
.hw-stage:empty { display: none; }
.hw-answer { font-size: var(--fs-body); line-height: 1.5; }

@media (max-width: 60rem) {
  .hero-in { grid-template-columns: minmax(0, 1fr); }
  .say-cloud { flex-direction: column; flex-wrap: nowrap; gap: .8rem; }
  .hw-item, .hw-item:nth-child(n) { width: 100%; margin-top: 0; }
  .hw-item:nth-child(even) { text-align: right; }
  .hw-item .say { max-width: 90%; min-height: 2.75rem; text-align: left; }
  /* on a narrow screen the answer opens under its phrase, like a reply in a chat */
  .hw-stage { display: none; }
  .hero-wall.is-live .hw-item.is-active .hw-reply { display: grid; margin-top: .7rem; border-left: 3px solid var(--accent); }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-wall.is-live .hw-item { animation: hw-in .55s both; animation-delay: calc(var(--i) * 55ms); }
  .hero-wall.is-live .say { animation: hw-float 7s ease-in-out infinite; animation-delay: calc(var(--i) * -0.9s); }
  .hero-wall.is-live .say.is-on, .hero-wall.is-live .say:hover { animation-play-state: paused; }
  .hw-stage.is-new { animation: hw-in .25s both; }
}
@keyframes hw-in { from { opacity: 0; } }
@keyframes hw-float { 50% { translate: 0 -4px; } }

/* ---- lower blocks ---------------------------------------------------------------------------------------------- */
.home-pros { display: grid; gap: .55rem; }
.home-pros li { position: relative; padding-left: 1.5rem; }
.home-pros li::before { content: ""; position: absolute; left: 0; top: .5em; width: .8rem; height: .45rem; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }

/* ---- «О чём спрашивают чаще всего»: the four biggest questions as large figures, the rest as a ranked list ---- */
.dem-lead { list-style: none; margin: 0 0 clamp(1rem, 2vw, 1.5rem); padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem clamp(1rem, 2vw, 1.75rem); }
.dem-lead a { display: grid; gap: .3rem; align-content: start; height: 100%; padding-top: .8rem; border-top: 2px solid var(--rule-strong); color: var(--ink); text-decoration: none; }
.dem-lead .dem-n { font-family: var(--serif); font-size: clamp(2rem, 2.2vw + 1rem, 3rem); line-height: 1; letter-spacing: -.02em; color: var(--accent); font-variant-numeric: lining-nums; }
.dem-lead .dem-unit { font-size: var(--fs-small); color: var(--muted); }
.dem-lead .dem-say { font-family: var(--serif); font-size: var(--fs-h3); line-height: 1.25; margin-top: .35rem; }
.dem-lead .dem-ans { font-size: var(--fs-small); color: var(--muted); }
.dem-lead a:hover .dem-say { text-decoration: underline; text-underline-offset: 3px; }
.dem-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 4vw, 3.5rem); }
.dem-list li { border-top: 1px solid var(--rule); }
.dem-list a { display: grid; grid-template-columns: 1.9rem minmax(0, 1fr) auto; gap: .2rem .8rem; align-items: baseline; padding: .75rem 0; color: var(--ink); text-decoration: none; }
.dem-list .dem-rank { font-size: var(--fs-small); color: var(--muted); font-variant-numeric: tabular-nums; }
.dem-list .dem-body { display: grid; gap: .3rem; min-width: 0; }
.dem-list .dem-say { font-family: var(--serif); font-size: 1.125rem; line-height: 1.3; }
.dem-list .dem-ans { font-size: var(--fs-small); color: var(--muted); }
.dem-list .dem-n { font-family: var(--serif); font-size: 1.25rem; color: var(--accent); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.dem-list a:hover .dem-say { text-decoration: underline; text-underline-offset: 3px; }
.dem-bar { display: block; height: 4px; border-radius: 2px; background: var(--paper-3); overflow: hidden; }
.dem-bar i { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.dem-note { margin: clamp(1rem, 2vw, 1.5rem) 0 0; max-width: 52rem; }
/* the rest of the top folds under one button; the browser's own details element works without scripts */
.dem-more > summary { list-style: none; display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .55rem 1.15rem; border: 1px solid var(--rule); border-radius: var(--radius); color: var(--ink); font-weight: 600; cursor: pointer; }
.dem-more > summary::-webkit-details-marker { display: none; }
.dem-more > summary::after { content: ""; width: .45rem; height: .45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.dem-more[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.dem-more > summary:hover { border-color: var(--ink-2); background: var(--paper-3); }
.dem-more .dem-close, .dem-more[open] .dem-open { display: none; }
.dem-more[open] .dem-close { display: inline; }
.dem-more[open] .dem-list { margin-top: 1rem; }
@media (max-width: 70rem) { .dem-lead { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 60rem) { .dem-list { grid-template-columns: minmax(0, 1fr); } }
/* on a phone the five become compact rows: the figure on the left, the question on the right */
@media (max-width: 44rem) {
  .dem-lead { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .dem-lead a { grid-template-columns: auto minmax(0, 1fr); column-gap: .9rem; row-gap: .1rem; padding: .7rem 0; border-top-width: 1px; border-top-color: var(--rule); }
  .dem-lead .dem-n { grid-column: 1; grid-row: 1; font-size: 1.75rem; min-width: 5.5ch; }
  .dem-lead .dem-unit { grid-column: 1; grid-row: 2; font-size: var(--fs-micro); line-height: 1.25; max-width: 7rem; }
  .dem-lead .dem-say { grid-column: 2; grid-row: 1; margin-top: 0; font-size: 1.125rem; align-self: center; }
  .dem-lead .dem-ans { grid-column: 2; grid-row: 2; }
}

/* ---- the science editorial: a dark band, five steps, three of them checks ---------------------------------- */
.sci-ed { background: var(--paper-2); color: var(--ink); padding-block: clamp(2.5rem, 6vw, 5rem); border-block: 1px solid var(--rule); overflow-x: clip; }
.sci-ed-head { display: grid; gap: .7rem; max-width: 46rem; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.sci-ed-head .h2 { font-size: clamp(2rem, 2.6vw + 1rem, 3.25rem); line-height: 1.08; }
.sci-ed-head .lead-text { color: var(--ink-2); }
.sci-steps b { font-family: var(--serif); font-weight: 400; font-size: var(--fs-h3); line-height: 1.2; }
.sci-steps .st-tag { justify-self: start; font-size: var(--fs-micro); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); border: 1px solid currentColor; border-radius: 999px; padding: .1rem .55rem; }
.sci-ed-figs { margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.sci-ed-foot { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: baseline; color: var(--muted); margin: 0; }

/* ---- the cabinet: the promise on the left, a small picture of the «Сегодня» screen on the right ------------- */
.cab-promo-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; border-top: 2px solid var(--rule-strong); padding-top: .9rem; }
.cab-promo .lead-text { color: var(--ink-2); }
.cab-promo-pic { display: grid; justify-items: center; }
.cp-card { width: min(100%, 22rem); background: #182122; border: 1px solid #2B3839; color: #E9EEEC; border-radius: 26px; padding: 1.1rem 1.1rem 1rem; display: grid; gap: .7rem; box-shadow: 0 18px 50px rgb(0 0 0 / .18); }
.cp-k { margin: 0; font-size: var(--fs-micro); font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: #E9B48C; }
.cp-dials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; }
.cp-dials svg { width: 100%; height: auto; }
.cp-bg, .cp-fg { fill: none; stroke-width: 11; stroke-linecap: round; }
.cp-bg { stroke: #1E2A2B; }
.cp-fg { stroke: #8FC5BF; }
.cp-fg.warm { stroke: #E9B48C; }
.cp-fg.ok { stroke: #9BD3A6; }
.cp-dials text { fill: #E9EEEC; font-family: var(--serif); font-size: 32px; }
.cp-labels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: center; font-size: .72rem; color: #9FACA8; margin-top: -.4rem; }
.cp-goal { display: flex; justify-content: space-between; gap: .5rem; font-size: .85rem; }
.cp-bar { height: 7px; border-radius: 999px; background: #1E2A2B; overflow: hidden; margin-top: -.3rem; }
.cp-bar i { display: block; width: 80%; height: 100%; border-radius: 999px; background: #8FC5BF; }
.cp-cal { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 3px; }
.cp-cal i { aspect-ratio: 1; border-radius: 3px; background: #1E2A2B; }
.cp-cal .m1 { background: #E7795E; } .cp-cal .m2 { background: #E0A06A; } .cp-cal .m3 { background: #D8C98A; } .cp-cal .m4 { background: #8CC8A2; } .cp-cal .m5 { background: #4FB383; }
.cp-note { margin: 0; justify-self: end; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: #E9B48C; }
@media (max-width: 52rem) { .cab-promo-in { grid-template-columns: minmax(0, 1fr); } }

/* ---- the path of a fact (src/client/sci-path.js) ----------------------------------------------------------------
   Five stages on one line. A light runs from stage to stage, the three checks scan and tick, the audit sends work
   back to the author, then facts keep flowing along the line. Without scripts or with reduced motion the path stands
   still in its final state; the script adds .sci-wait at once and .is-play when the block comes into view. */
.sci-path { --g: clamp(1rem, 2vw, 1.75rem); --node: 3rem; position: relative; margin: 0 0 clamp(2rem, 4vw, 3rem); padding-top: 2.9rem; }
.sci-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem var(--g); }
.sci-steps li { position: relative; display: grid; gap: .45rem; align-content: start; }
.sci-steps .st-n { position: relative; z-index: 1; width: var(--node); height: var(--node); border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--rule); background: var(--paper-2); font-family: var(--serif); font-size: 1.35rem; line-height: 1; color: var(--muted); margin-bottom: .35rem; }
.sci-steps .st-check .st-n { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent); }
.sci-steps .st-n::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; pointer-events: none; }
.sci-steps li:nth-child(3) .st-n::after { border-color: var(--warm); }
.st-ok { position: absolute; right: -.5rem; top: -.5rem; width: 1.3rem; height: 1.3rem; }
.st-ok circle { fill: var(--accent); }
.st-ok path { fill: none; stroke: var(--paper-2); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 0; }
.st-seg { position: absolute; top: calc(var(--node) / 2 - 1px); left: calc(var(--node) + .4rem); right: calc(.4rem - var(--g)); height: 2px; border-radius: 2px; background: var(--rule); }
.st-seg i { position: absolute; inset: 0; border-radius: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 25%, transparent), var(--accent)); transform-origin: left center; }
.st-seg em { position: absolute; top: 50%; left: 100%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 18px var(--accent); opacity: 0; }
.sci-steps .st-text { font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2); }
/* the audit sends work back: a warm arc from stage 5 to stage 3 */
.sci-back { position: absolute; top: 0; left: calc(2 * (100% + var(--g)) / 5 + var(--node) / 2); width: calc(2 * (100% + var(--g)) / 5); height: 2.75rem; pointer-events: none; }
.sci-back svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 1.9rem; overflow: visible; }
.sci-back path { fill: none; stroke: var(--warm); stroke-width: 1.6; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.sci-back span { position: absolute; top: 0; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: var(--fs-micro); font-weight: 600; letter-spacing: .04em; color: var(--warm); background: var(--paper-2); padding: 0 .55rem; }
/* after the first run the line stays alive: facts keep flowing and pass under the checks */
.sci-stream { position: absolute; top: calc(2.9rem + var(--node) / 2 - 3px); left: calc(var(--node) / 2); width: calc(4 * (100% + var(--g)) / 5); height: 6px; pointer-events: none; }
.sci-stream i { position: absolute; top: 0; left: 0; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); opacity: 0; }

@keyframes stNode { from { opacity: 0; transform: scale(.35); } 70% { opacity: 1; transform: scale(1.12); } to { opacity: 1; transform: scale(1); } }
@keyframes stPing { 0% { opacity: .95; transform: scale(1); } 100% { opacity: 0; transform: scale(2.2); } }
@keyframes stPop { from { opacity: 0; transform: scale(0) rotate(-30deg); } 70% { opacity: 1; transform: scale(1.25); } to { opacity: 1; transform: scale(1); } }
@keyframes stTick { from { stroke-dashoffset: 16; } to { stroke-dashoffset: 0; } }
@keyframes stText { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes stFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes stRun { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes stFillV { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes stRunV { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes stBack { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes stFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes stStream { 0% { left: 0; opacity: 0; } 5% { opacity: 1; } 95% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

/* the fact itself rides the path: a glowing chip whose label changes at every stage (motion only) */
.sci-chip { display: none; }
@keyframes stChip {
  0% { left: 0; opacity: 0; transform: translateY(6px); }
  5.6% { left: 0; opacity: 1; transform: none; }
  14.3% { left: 0; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  26.2% { left: calc(1 * (100% + var(--g)) / 5); }
  34.9% { left: calc(1 * (100% + var(--g)) / 5); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  46.8% { left: calc(2 * (100% + var(--g)) / 5); }
  55.6% { left: calc(2 * (100% + var(--g)) / 5); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  67.5% { left: calc(3 * (100% + var(--g)) / 5); }
  76.2% { left: calc(3 * (100% + var(--g)) / 5); transform: translateX(0); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  /* the last stage sits at the right edge: the chip ends at the node instead of running past the column */
  88.1% { left: calc(4 * (100% + var(--g)) / 5); opacity: 1; transform: translateX(calc(var(--node) - 100%)); }
  94.4% { left: calc(4 * (100% + var(--g)) / 5); opacity: 1; transform: translateX(calc(var(--node) - 100%)); }
  100% { left: calc(4 * (100% + var(--g)) / 5); opacity: 0; transform: translateX(calc(var(--node) - 100%)); }
}
@keyframes stLbl { 0% { opacity: 0; transform: translateY(4px); } 10% { opacity: 1; transform: none; } 90% { opacity: 1; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: no-preference) {
  /* one stage every .91 s (30% faster on the owner's word, 2026-10-30): the node lights up, the fact rests .55 s, then runs to the next node in .75 s */
  .sci-path li { --t: calc(var(--k) * .91s + .245s); }
  /* waiting below the fold: the same state the animations start from, so nothing flashes */
  .sci-path.sci-wait .st-n, .sci-path.sci-wait .st-ok, .sci-path.sci-wait li > b, .sci-path.sci-wait .st-tag, .sci-path.sci-wait .st-text, .sci-path.sci-wait .sci-back span { opacity: 0; }
  .sci-path.sci-wait .st-seg i { transform: scaleX(0); }
  .sci-path.sci-wait .sci-back svg { clip-path: inset(0 0 0 100%); }
  .sci-path.is-play .st-n { animation: stNode .42s cubic-bezier(.2, .9, .3, 1.2) var(--t) both; }
  .sci-path.is-play .st-check .st-n::after { animation: stPing .77s ease-out calc(var(--t) + .14s) 2 both; }
  .sci-path.is-play .st-ok { animation: stPop .315s cubic-bezier(.2, .9, .3, 1.3) calc(var(--t) + .35s) both; }
  .sci-path.is-play .st-ok path { animation: stTick .245s ease-out calc(var(--t) + .49s) both; }
  .sci-path.is-play li > b { animation: stText .42s ease calc(var(--t) + .105s) both; }
  .sci-path.is-play .st-tag { animation: stText .42s ease calc(var(--t) + .175s) both; }
  .sci-path.is-play .st-text { animation: stText .42s ease calc(var(--t) + .21s) both; }
  .sci-path.is-play .st-seg i { animation: stFill .525s cubic-bezier(.65, 0, .35, 1) calc(var(--t) + .385s) both; }
  .sci-path.is-play .st-seg em { animation: stRun .525s cubic-bezier(.65, 0, .35, 1) calc(var(--t) + .385s) both; }
  .sci-path.is-play .sci-chip { display: inline-grid; position: absolute; top: .45rem; left: 0; z-index: 2; grid-template-columns: auto auto; align-items: center; column-gap: .45rem; padding: .22rem .7rem .22rem .5rem; border-radius: 999px; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--paper-2)); color: var(--accent-ink); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .02em; white-space: nowrap; box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 35%, transparent); pointer-events: none; animation: stChip 4.41s both; }
  .sci-path.is-play .sci-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
  .sci-path.is-play .sci-chip span { grid-area: 1 / 2; opacity: 0; animation: stLbl .91s both; }
  .sci-path.is-play .sci-chip span:nth-of-type(1) { animation-delay: .245s; }
  .sci-path.is-play .sci-chip span:nth-of-type(2) { animation-delay: 1.155s; }
  .sci-path.is-play .sci-chip span:nth-of-type(3) { animation-delay: 2.065s; }
  .sci-path.is-play .sci-chip span:nth-of-type(4) { animation-delay: 2.975s; }
  .sci-path.is-play .sci-chip span:nth-of-type(5) { animation-duration: .525s; animation-delay: 3.885s; }
  .sci-path.is-play .sci-back svg { animation: stBack .77s cubic-bezier(.65, 0, .35, 1) 4.55s both; }
  .sci-path.is-play .sci-back span { animation: stFade .35s ease 5.04s both; }
  .sci-path.is-play li:nth-child(3) .st-n::after { animation: stPing .77s ease-out 5.25s 2 both; }
  .sci-path.is-play .sci-stream i { animation: stStream 4.8s linear infinite; }
  .sci-path.is-play .sci-stream i:nth-child(1) { animation-delay: 8.2s; }
  .sci-path.is-play .sci-stream i:nth-child(2) { animation-delay: 9.4s; }
  .sci-path.is-play .sci-stream i:nth-child(3) { animation-delay: 10.6s; }
  .sci-path.is-play .sci-stream i:nth-child(4) { animation-delay: 11.8s; }
  .sci-path.is-off .sci-stream i { animation-play-state: paused; }
}

/* a narrow screen: the same path, top to bottom */
@media (max-width: 56rem) {
  .sci-path { padding-top: 0; }
  .sci-steps { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .sci-steps li { grid-template-columns: var(--node) minmax(0, 1fr); column-gap: 1rem; row-gap: .3rem; }
  .sci-steps .st-n { grid-column: 1; grid-row: 1 / span 3; margin: 0; }
  .sci-steps li > b, .sci-steps .st-tag, .sci-steps .st-text { grid-column: 2; }
  .st-seg { top: calc(var(--node) + .35rem); bottom: calc(.35rem - 1.6rem); left: calc(var(--node) / 2 - 1px); right: auto; width: 2px; height: auto; }
  .st-seg i { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 25%, transparent), var(--accent)); transform-origin: center top; }
  .st-seg em { top: 100%; left: 50%; margin: -5px 0 0 -5px; }
  .sci-path.sci-wait .st-seg i { transform: scaleY(0); }
  .sci-back, .sci-stream, .sci-path.is-play .sci-chip { display: none; }
}
@media (max-width: 56rem) and (prefers-reduced-motion: no-preference) {
  .sci-path.is-play .st-seg i { animation-name: stFillV; }
  .sci-path.is-play .st-seg em { animation-name: stRunV; }
}

/* ---- «Самые изученные темы»: the row of the top questions, with the conclusion and the audit mark --------------- */
.res-lead .dem-say { font-size: var(--fs-h3); }
.res-lead .res-line { color: var(--ink-2); line-height: 1.45; }
.res-chip { justify-self: start; margin-top: .35rem; font-size: var(--fs-micro); font-weight: 600; letter-spacing: .04em; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: .1rem .55rem; }
@media (max-width: 44rem) { .res-lead .res-chip { grid-column: 2; } }

/* ---- the new front page (switch «home2», /glavnaya-2/ while it is checked) ------------------------------------------
   The headline comes in line by line and a hand-drawn line settles under «Честные ответы»; the search types what
   people write; three facts of trust stand under it. Under «less motion» everything simply stands in place. */
.hero-v2 h1 .hl { display: block; }
.hero-v2 h1 em.hl > span { position: relative; display: inline-block; }
.h-ul { position: absolute; left: 0; bottom: -.16em; width: calc(100% - .12em); height: .22em; overflow: visible; fill: none; stroke: var(--warm); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; }
.hero-trust { list-style: none; margin: .25rem 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr) minmax(0, 1.25fr); max-width: 31rem; border-top: 1px solid var(--rule); }
/* the answer on the first screen is a taste: five lines, the rest is one press away */
.hero-v2 .hw-stage { min-height: 0; }
.hero-v2 .hw-stage .hw-answer { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.hero-trust li { padding: .75rem .9rem 0 0; min-width: 0; }
.hero-trust li + li { padding-left: .9rem; border-left: 1px solid var(--rule); }
.hero-trust b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.3rem; line-height: 1.1; color: var(--ink); }
.hero-trust span { display: block; margin-top: .3rem; font-size: var(--fs-micro); line-height: 1.4; color: var(--muted); }
.hero-trust a { color: inherit; text-decoration: none; }
.hero-trust a:hover b { color: var(--accent); }
.hero-ask [data-type-phrases].is-typing { color: var(--ink); }
.hero-ask [data-type-phrases].is-typing::after { content: ""; display: inline-block; width: 1.5px; height: 1.05em; margin-left: 2px; vertical-align: -.16em; background: var(--accent); animation: caret 1.05s steps(1) infinite; }
.hw-all { display: none; }
@media (max-width: 60rem) {
  /* on a phone four phrases, the rest after one press */
  .hero-wall.is-live:not(.is-all) .hw-item:nth-child(n+5), .hero-wall.is-live:not(.is-all) .hw-filter { display: none; }
  .hero-wall.is-live:not(.is-all) .hw-all:not([hidden]) { display: inline-flex; justify-self: start; }
}
@media (max-width: 26rem) {
  /* one compact row on a phone: the three facts side by side, a few short lines each */
  .hero-trust li { padding: .6rem .5rem 0 0; }
  .hero-trust li + li { padding-left: .55rem; }
  .hero-trust b { font-size: 1.02rem; }
  .hero-trust span { font-size: .72rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}

/* «Главные вопросы»: two tabs over one place; without scripts both lists stand one under the other */
.qt-tabs { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--rule); }
.qt-tabs [role="tab"] { position: relative; padding: .55rem 0 .7rem; border: 0; background: none; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; }
.qt-tabs [role="tab"]::after { content: ""; position: absolute; inset: auto 0 -1px 0; height: 2px; background: var(--accent); scale: 0 1; transform-origin: 0 50%; transition: scale .35s cubic-bezier(.2, .7, .2, 1); }
.qt-tabs [role="tab"][aria-selected="true"] { color: var(--ink); }
.qt-tabs [role="tab"][aria-selected="true"]::after { scale: 1 1; }
.qt-tabs [role="tab"]:hover { color: var(--ink); }
.qt-tabs [role="tab"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.qt-panel + .qt-panel { margin-top: clamp(2rem, 4vw, 3rem); }
.qt-lead { margin-bottom: 1.1rem; font-size: var(--fs-small); color: var(--muted); max-width: 38rem; }
.qt.is-tabs .qt-h { display: none; }
.qt.is-tabs .qt-panel + .qt-panel { margin-top: 0; }
.qt-h { margin-bottom: .4rem; }
@media (max-width: 30rem) { .qt-tabs { flex-wrap: nowrap; gap: 1.1rem; } .qt-tabs [role="tab"] { font-size: var(--fs-small); white-space: nowrap; } }

/* universities: six buildings, the rest under «more» */
.sci-all { margin-top: 1.2rem; }
.sci-all > summary { display: inline-flex; list-style: none; cursor: pointer; font-weight: 600; color: var(--accent); }
.sci-all > summary::-webkit-details-marker { display: none; }
.sci-all > summary::after { content: ""; width: .45rem; height: .45rem; margin: .35rem 0 0 .55rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: 45deg; transition: rotate .2s; }
.sci-all[open] > summary::after { rotate: 225deg; margin-top: .6rem; }
.sci-all .sci-all-close, .sci-all[open] .sci-all-open { display: none; }
.sci-all[open] .sci-all-close { display: inline; }
.sci-all[open] > .sci-marks { margin-top: 1.5rem; }

/* «Найти специалиста» alone: the text on the left, the way on the right */
.podbor-in { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.25rem clamp(1.5rem, 5vw, 5rem); align-items: end; }
.podbor-in .row { justify-content: flex-end; }
@media (max-width: 48rem) { .podbor-in { grid-template-columns: minmax(0, 1fr); } .podbor-in .row { justify-content: flex-start; } }

/* «С чем сюда приходят»: one living scene and nine tiles (variants A and B of 2026-10-19 together) */
.rd { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.rd-fig { margin: 0; }
.rd-fig[hidden] { display: none; }
.rd-fig .scene { width: 100%; }
.rd-fig figcaption { display: grid; gap: .6rem; margin-top: .9rem; }
.rd-fig .h3 { color: var(--ink); text-decoration: none; }
.rd-fig .h3:hover { text-decoration: underline; text-underline-offset: .18em; }
.rd-q { display: flex; flex-wrap: wrap; gap: .5rem; }
.rd-q a { font-family: var(--serif); font-style: italic; font-size: 1.02rem; color: var(--ink); text-decoration: none; border: 1px solid var(--rule); border-radius: 999px; padding: .32rem .85rem; transition: border-color .15s; }
.rd-q a:hover { border-color: var(--accent); }
.rd-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.rd-t { display: grid; grid-template-columns: auto 1fr; gap: .3rem .5rem; padding: .85rem .85rem .75rem; border: 1px solid var(--rule); border-radius: 14px; color: var(--ink); text-decoration: none;
  background: color-mix(in srgb, var(--ink) 3%, transparent); transition: border-color .2s, background-color .2s, translate .25s; }
.rd-t:hover, .rd-t.on { border-color: var(--warm); background: color-mix(in srgb, var(--warm) 7%, transparent); }
.rd-t:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rd-i { width: 30px; height: 30px; color: var(--accent); }
.rd-i svg { width: 30px; height: 30px; }
.rd-n { font-family: var(--serif); font-size: 1.6rem; line-height: 1; color: var(--accent); text-align: right; }
.rd-t b { grid-column: 1 / -1; font-family: var(--serif); font-weight: 400; font-size: 1.02rem; line-height: 1.2; }
.rd-u { grid-column: 1 / -1; margin-top: -.2rem; font-size: var(--fs-micro); color: var(--muted); }
.rd-bar { grid-column: 1 / -1; height: 3px; margin-top: .2rem; border-radius: 2px; background: var(--rule); }
.rd-bar i { display: block; height: 100%; border-radius: 2px; background: var(--warm); }
@media (max-width: 56rem) { .rd { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 34rem) {
  .rd-tiles { gap: .45rem; }
  .rd-t { padding: .6rem .6rem .55rem; }
  .rd-t b { font-size: .88rem; }
  .rd-n { font-size: 1.2rem; }
  .rd-i, .rd-i svg { width: 22px; height: 22px; }
  .rd-u { display: none; }
}
/* a scene drawn by hand (hand.js): its own animations wait, the script draws it, then it lives as before */
svg.hand * { animation: none !important; }
svg.hand .d { stroke-dasharray: 1; }
svg.hand .pc { fill: none !important; stroke: var(--ink-2); stroke-width: .75; stroke-dasharray: 1; }
svg.hand.alive .br { animation: sc-breathe 4s ease-in-out infinite !important; }
svg.hand.alive .bl { animation: sc-blink 1.1s steps(1) infinite !important; }
svg.hand.alive .fl { animation: sc-float 5s ease-in-out infinite !important; }

@media screen {
  .hero-v2 h1 .hl { animation: hl-in .85s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-v2 h1 em.hl { animation-delay: .14s; }
  .hero-v2 .h-ul { animation: ul-draw 1s .8s cubic-bezier(.65, 0, .35, 1) both; }
  .hero-v2 .hero-say > :not(h1):not(.hw-stage) { animation: head-in .6s cubic-bezier(.2, .7, .2, 1) both; animation-delay: .32s; }
  .hero-v2 .hero-say > .kicker { animation-delay: 0s; }
  .hero-v2 .hero-say > .hero-trust { animation-delay: .5s; }
  .qt-panel.is-new { animation: head-in .4s cubic-bezier(.2, .7, .2, 1) both; }
}
@keyframes hl-in { from { opacity: 0; translate: 0 .3em; filter: blur(8px); } }
@keyframes ul-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes caret { 50% { opacity: 0; } }

/* index.css */
/* Rubricators and discovery (40-index.mjs, explore.js): topic directory, tag index, situation navigator,
   cases, reading routes, the search page and the self-check hub. Tokens only; everything is prefixed with xp-. */

/* ---- topic directory: filter bar and view tabs ------------------------------------------------------------- */
.xp-bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem clamp(1rem, 3vw, 2.5rem); padding-block: .55rem .5rem; background: var(--paper); border-top: 2px solid var(--rule-strong); border-bottom: 1px solid var(--rule); }
.xp-filter { flex: 1 1 18rem; min-width: 0; display: flex; align-items: center; gap: .65rem; border-bottom: 2px solid transparent; }
.xp-filter:focus-within { border-bottom-color: var(--accent); }
.xp-filter-icon { flex: none; width: 1.25rem; height: 1.25rem; color: var(--muted); }
.xp-filter-icon svg { width: 100%; height: 100%; }
.xp-filter-input { flex: 1; width: 100%; min-width: 0; min-height: 2.75rem; border: 0; padding: .3rem 0; background: none; color: var(--ink); font-family: var(--serif); font-size: clamp(1.125rem, 1vw + .95rem, 1.5rem); }
.xp-filter-input:focus { outline: none; }
.xp-filter-input::placeholder { color: var(--muted); font-style: italic; }
.xp-filter-input::-webkit-search-cancel-button, .xp-find-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.xp-clear { flex: none; width: 2.25rem; height: 2.25rem; color: var(--ink-2); }
.xp-tabs { display: flex; gap: 1.5rem; flex: none; }
.xp-tab { min-height: 2.75rem; padding: .45rem 0 .35rem; border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer; font-family: var(--sans); font-size: .9375rem; font-weight: 500; color: var(--muted); white-space: nowrap; }
.xp-tab:hover { color: var(--ink); border-bottom-color: var(--rule); }
.xp-tab[aria-selected="true"] { color: var(--accent-ink); border-bottom-color: var(--accent); }
.xp-status { min-height: 1.4rem; padding-top: .6rem; }
.xp-none { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; max-width: var(--measure); padding-block: 1rem 2rem; }
.xp-none .empty { padding: 0; }

/* without scripts both lists are simply printed one after another */
:root:not(.has-js) .xp-bar, :root:not(.has-js) .xp-status { display: none; }
.xp-nojs { padding-block: 1.5rem .6rem; }
.has-js .xp-nojs { display: none; }
.has-js .xp-dir[data-view="rubrics"] [data-dir-panel="abc"], .has-js .xp-dir[data-view="abc"] [data-dir-panel="rubrics"] { display: none; }
.xp-panel { padding-top: .75rem; }

/* ---- groups: a heading column and a list column, used by the directory, the tag index and situations -------- */
.xp-group { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: .9rem clamp(1.25rem, 2.6vw, 2.5rem); padding-block: .9rem clamp(1.6rem, 3vw, 2.4rem); border-top: 2px solid var(--rule-strong); }
.xp-group-head { display: grid; gap: .4rem; align-content: start; }
.xp-group-head a { text-decoration: none; }
.xp-group-head a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.xp-group-head .h3 { font-size: clamp(1.375rem, .6vw + 1.2rem, 1.625rem); line-height: 1.15; }
.xp-dir.is-filtering .xp-group-head .meta { display: none; }
.xp-anchor { scroll-margin-top: 1.5rem; }
.xp-dir .index-group { scroll-margin-top: 8rem; }
.xp-lines { columns: 2 17rem; column-gap: clamp(1.25rem, 2.6vw, 2.5rem); border-top: 1px solid var(--rule); }
.xp-lines li, .xp-lines li:last-child { break-inside: avoid; border-top: 0; border-bottom: 1px solid var(--rule); }
.xp-group .xp-lines { border-top: 0; }
.xp-care a, .xp-dir .index-group .xp-care a { padding-left: .8rem; border-left: 2px solid var(--danger); }
.xp-care span { font-family: var(--sans); font-style: normal; color: var(--ink-2); }
.xp-dir .index-group li i { flex: none; max-width: 48%; text-align: right; }
.xp-letters { display: flex; flex-wrap: wrap; gap: .1rem .2rem; margin-bottom: 1.4rem; }
.xp-letters a { display: inline-grid; place-items: center; min-width: 2.375rem; min-height: 2.375rem; border-bottom: 2px solid transparent; font-family: var(--serif); font-size: 1.3125rem; text-decoration: none; }
.xp-letters a:hover { border-bottom-color: var(--accent); }
@media (max-width: 52rem) { .xp-group { grid-template-columns: minmax(0, 1fr); } }

/* chip groups with a label column */
.xp-kv { gap: 1.1rem 1.5rem; align-items: start; }
.xp-kv dt { padding-top: .45rem; font-family: var(--sans); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.xp-rest { display: grid; gap: .7rem; margin-top: 1.5rem; }
.xp-after { margin-top: 1rem; }
.xp-tight { margin-top: .3rem; }
.xp-more { margin-top: .4rem; }
.xp-more .xp-lines { border-top: 0; }
.xp-more summary { cursor: pointer; min-height: 2.75rem; padding: .7rem 0; font-size: var(--fs-small); font-weight: 600; color: var(--accent-ink); }
.xp-more[open] summary { border-bottom: 1px solid var(--rule); }

/* phrases with the name of the topic they lead to */
.xp-said small { display: block; margin-top: .15rem; font-family: var(--sans); font-style: normal; font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* ---- situation navigator ------------------------------------------------------------------------------------- */
.xp-nav { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding-block: clamp(1.75rem, 4vw, 3rem); }
.xp-step { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.xp-step > .muted { max-width: 44rem; }
.xp-step h2:focus { outline: none; }
.xp-step h2:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.xp-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.25rem, 2.6vw, 2.5rem); border-top: 2px solid var(--rule-strong); }
.xp-choice { display: grid; gap: .25rem; width: 100%; min-height: 3.5rem; padding: .85rem 0 .9rem; border: 0; border-bottom: 1px solid var(--rule); background: none; text-align: left; cursor: pointer; }
.xp-choice b { font-family: var(--serif); font-weight: 400; font-size: 1.375rem; line-height: 1.2; }
.xp-choice span { font-size: var(--fs-small); color: var(--muted); }
.xp-choice:hover b { color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.xp-ctx { display: grid; gap: .7rem; padding-block: 1rem; border-top: 2px solid var(--rule-strong); border-bottom: 1px solid var(--rule); }
.xp-ctx .kicker + .chips { margin-bottom: .5rem; }
.xp-routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.25rem, 2.6vw, 2.5rem); border-top: 2px solid var(--rule-strong); }
.xp-route { display: grid; gap: .55rem; align-content: start; padding: 1.1rem 0 1.35rem; border-bottom: 1px solid var(--rule); }
.xp-route .story-title { font-size: clamp(1.375rem, .6vw + 1.2rem, 1.625rem); }
.xp-mats { display: grid; gap: .3rem; font-size: var(--fs-small); }
.xp-mats .state-note { margin-right: .4rem; }
.xp-linkbtn { border: 0; padding: 0; background: none; cursor: pointer; color: var(--accent-ink); text-decoration: underline; text-underline-offset: .18em; font: inherit; }
@media (max-width: 44rem) { .xp-choices, .xp-routes { grid-template-columns: minmax(0, 1fr); } }

/* ---- cases, reading routes, self-check hub ------------------------------------------------------------------- */
.xp-disclaimer { display: grid; grid-template-columns: minmax(0, 1fr); gap: .45rem; max-width: 52rem; padding: 1rem 1.25rem 1.1rem; background: var(--warm-soft); border-top: 2px solid var(--warm); color: var(--ink); }
.xp-disclaimer .kicker { color: var(--warm); }
.art-head + .xp-disclaimer { margin-bottom: clamp(1.25rem, 2.4vw, 2rem); }
.xp-case { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.xp-case > .crisis { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); max-width: 52rem; }
.xp-situation { display: grid; gap: .5rem; max-width: var(--measure); margin-bottom: clamp(1.5rem, 3vw, 2.25rem); padding-left: 1.1rem; border-left: 2px solid var(--accent); }
.xp-situation p:last-child { font-family: var(--serif); font-style: italic; font-size: var(--fs-dek); line-height: 1.38; color: var(--ink-2); }
.xp-empty { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-content: start; max-width: var(--measure); padding-top: .8rem; border-top: 2px solid var(--rule-strong); }
.xp-empty .empty { padding: 0; color: var(--ink); font-size: var(--fs-h2); line-height: 1.15; }
.xp-route-steps > li:first-child { border-top: 2px solid var(--rule-strong); }
.xp-route-steps > li:last-child { border-bottom: 1px solid var(--rule); }
.xp-stepbody { display: grid; gap: .3rem; align-content: start; }
.xp-stepbody b { margin: 0; line-height: 1.22; }
.xp-stepbody b a { text-decoration: none; }
.xp-stepbody b a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.xp-stepbody > p:not(.kicker):not(.meta) { color: var(--ink-2); max-width: 40rem; }
.xp-wait { color: var(--muted); }

/* ---- full-page search ---------------------------------------------------------------------------------------- */
.xp-find { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; max-width: 46rem; padding-bottom: clamp(1.75rem, 3.6vw, 3rem); }
.xp-find-field { display: flex; align-items: center; gap: .7rem; min-height: 3.75rem; padding: .4rem .5rem .4rem 1.1rem; border: 1px solid var(--ink); border-radius: 999px; background: var(--paper-2); }
.xp-find-field:focus-within { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 3px; }
.xp-find-input { flex: 1; width: 100%; min-width: 0; border: 0; padding: .3rem 0; background: none; color: var(--ink); font-family: var(--serif); font-size: clamp(1.125rem, 1vw + .95rem, 1.5rem); }
.xp-find-input:focus { outline: none; }
.xp-find-input::placeholder { color: var(--muted); font-style: italic; }
.xp-find-field .btn { flex: none; border-radius: 999px; }
.xp-find-results:empty { display: none; }
.xp-find-results .search-item:first-child { border-top: 2px solid var(--rule-strong); }
.xp-find-examples { gap: .7rem; padding-top: .5rem; }
.xp-find-examples .ask-examples { justify-content: flex-start; max-width: none; }
@media (max-width: 26rem) { .xp-find-field { padding-left: .9rem; gap: .5rem; } .xp-find-field .xp-filter-icon { display: none; } }

/* kz-drafts.css */
/* Scoped addition for the editorial-only KZ preview. All colors inherit the MyPsy theme tokens. */
.kz-review .kz-filters {
  display: grid;
  gap: 1rem;
  border-top: 1px solid var(--rule);
  padding-top: 1.25rem;
  max-width: 43rem;
}
.kz-review .kz-filters .field {
  gap: .5rem;
}
.kz-review .kz-tile { overflow-wrap: anywhere; min-width: 0; }
.kz-review .kz-tile .why { display: grid; gap: .4rem; }
.kz-review .sp-id { min-width: 0; }
.kz-review .sp-id .stack { min-width: 0; overflow-wrap: anywhere; }
.kz-review .sp-book { overflow-wrap: anywhere; }
.kz-review [hidden] { display: none !important; }
@media (max-width: 34rem) {
  .kz-review .sp-id { grid-template-columns: 4rem minmax(0,1fr); gap: .8rem; }
  .kz-review .sp-id .person-photo { width: 4rem; height: 4rem; }
}
/* Closed booking preview /kz-redakciya/zapis/: MyPsy person card plus free time slots. */
/* KZ booking preview (closed owner build), design of 2026-11-07: time and price first, one tap to book on a phone. */
.kz-ph { position: relative; display: inline-grid; place-items: center; flex: none; width: 4.5rem; height: 4.5rem; border-radius: 14px; overflow: hidden;
  background: var(--paper-3); color: var(--ink-2); font-family: var(--serif); font-size: 1.35rem; }
.kz-ph::before { content: attr(data-ini); }
.kz-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kz-zapis .kz-zfilters { display: grid; gap: .7rem; margin: 0 0 1.4rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.kz-zapis .kz-frow { display: grid; gap: .35rem; min-width: 0; }
.kz-zapis .kz-flabel { font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.kz-zapis .kz-scroll { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .15rem; }
.kz-zapis .kz-scroll::-webkit-scrollbar { display: none; }
.kz-zapis .kz-scroll .chip { flex: none; white-space: nowrap; }
.kz-zapis .kz-ftools { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; justify-content: space-between; }
.kz-zapis .kz-only, .kz-zapis .kz-sort { display: inline-flex; gap: .5rem; align-items: center; color: var(--ink-2); font-size: var(--fs-small); }
.kz-zapis .kz-sort select { font: inherit; color: var(--ink); background: var(--paper-2); border: 1px solid var(--rule); border-radius: 999px; padding: .3rem .7rem; }
.kz-zapis .kz-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); }
.kz-zapis .kz-zwrap { display: grid; min-width: 0; }
.kz-zapis .kz-zwrap[hidden] { display: none; }
.kz-zapis .kz-zcard { display: grid; gap: .8rem; align-content: start; height: 100%; padding: 1.1rem; border: 1px solid var(--rule); border-radius: var(--radius-l); background: var(--paper-2); }
.kz-zapis .kz-zhead { display: flex; gap: .9rem; align-items: flex-start; }
.kz-zapis .kz-zhead > a { text-decoration: none; }
.kz-zapis .kz-zname { display: grid; gap: .2rem; min-width: 0; }
.kz-zapis .kz-zname h3 { margin: 0; font-size: 1.2rem; line-height: 1.2; }
.kz-zapis .kz-zname h3 a { text-decoration: none; color: var(--ink); }
.kz-zapis .kz-role { margin: 0; font-size: var(--fs-small); color: var(--muted); }
.kz-zapis .kz-rate { margin: 0; font-size: var(--fs-small); color: var(--ink-2); }
.kz-zapis .kz-rate b { color: var(--ink); }
.kz-zapis .kz-badges { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.kz-zapis .kz-badges li { font-size: var(--fs-micro); padding: .2rem .55rem; border-radius: 999px; background: var(--paper-3); color: var(--ink-2); }
.kz-zapis .kz-where { margin: 0; font-size: var(--fs-small); color: var(--ink-2); }
.kz-zapis .kz-where b { color: var(--ink); font-weight: 600; }
.kz-zapis .kz-prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: .5rem; }
.kz-zapis .kz-pt { display: grid; gap: .1rem; padding: .55rem .75rem; border-radius: 8px; background: var(--paper-3); }
.kz-zapis .kz-pt span { font-size: var(--fs-micro); color: var(--muted); }
.kz-zapis .kz-pt b { font-size: 1.15rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.kz-zapis .kz-pt s { font-size: var(--fs-micro); color: var(--muted); }
.kz-zapis .kz-noprice { margin: 0; }
.kz-zapis .kz-when { display: grid; gap: .55rem; }
.kz-zapis .kz-days { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; }
.kz-zapis .kz-days::-webkit-scrollbar { display: none; }
.kz-zapis .kz-dtab { flex: none; display: grid; gap: 0; min-width: 4.2rem; padding: .35rem .6rem; text-align: left; font: inherit; color: var(--ink-2);
  background: transparent; border: 1px solid var(--rule); border-radius: 8px; cursor: pointer; }
.kz-zapis .kz-dtab span { font-size: var(--fs-micro); color: var(--muted); }
.kz-zapis .kz-dtab b { font-size: var(--fs-small); font-weight: 600; }
.kz-zapis .kz-dtab.is-on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color: var(--ink); }
.kz-zapis .kz-times { display: flex; flex-wrap: wrap; gap: .4rem; }
.kz-zapis .kz-times[hidden] { display: none; }
.kz-zapis .kz-t, .kz-bridge .kzb-time .chip { min-width: 4.25rem; min-height: 2.5rem; padding: .3rem .8rem; font: inherit; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--on-accent); background: var(--accent); border: 0; border-radius: 8px; cursor: pointer; }
.kz-zapis .kz-t:hover, .kz-bridge .kzb-time .chip:hover { filter: brightness(1.08); }
.kz-zapis .kz-noslots { margin: 0; padding: .6rem .75rem; border-radius: 8px; border: 1px dashed var(--rule); font-size: var(--fs-small); color: var(--ink-2); }
.kz-zapis .kz-go { justify-self: start; }
.kz-zapis .kz-empty { color: var(--ink-2); }
.kz-zapis .kz-morewrap { margin-top: 1.4rem; }
/* profile */
.kz-prof .kz-phead { padding-bottom: 1.2rem; }
.kz-prof .kz-pid { display: flex; gap: 1.1rem; align-items: center; margin-top: .6rem; }
.kz-prof .kz-pid .kz-ph { width: 6.5rem; height: 6.5rem; border-radius: 18px; font-size: 2rem; }
.kz-prof .kz-pname { display: grid; gap: .25rem; min-width: 0; }
.kz-prof .kz-pname .h1 { margin: 0; font-size: clamp(1.75rem, 2.4vw + 1rem, 3rem); }
.kz-prof .kz-pname .dek { margin: 0; font-size: var(--fs-ui); }
.kz-prof .kz-stats { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: 1.1rem 0 .8rem; border: 1px solid var(--rule); border-radius: var(--radius-l); background: var(--paper-2); }
.kz-prof .kz-stats div { display: flex; flex-direction: column-reverse; gap: .1rem; padding: .7rem .8rem; text-align: center; }
.kz-prof .kz-stats div + div { border-left: 1px solid var(--rule); }
.kz-prof .kz-stats dt { font-size: var(--fs-micro); color: var(--muted); }
.kz-prof .kz-stats dd { margin: 0; font-size: 1.2rem; font-weight: 600; color: var(--ink); }
.kz-prof .kz-pgrid { display: grid; gap: 1.6rem; }
.kz-prof .kz-bookbox { display: grid; gap: .9rem; padding: 1.1rem; border: 1px solid var(--rule); border-radius: var(--radius-l); background: var(--paper-2); }
.kz-prof .kz-bookbox h2 { margin: 0; }
.kz-prof .kz-pmain { display: grid; gap: 1.8rem; align-content: start; }
.kz-prof .kz-sec { display: grid; gap: .7rem; padding-top: 1.1rem; border-top: 1px solid var(--rule); }
.kz-prof .kz-sec h2 { margin: 0; }
.kz-prof .kz-list { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.kz-prof .kz-list li { padding-left: .9rem; border-left: 2px solid var(--rule); line-height: 1.45; }
.kz-prof .kz-read { display: grid; gap: .35rem; margin-top: .4rem; }
.kz-prof .kz-clinic { display: grid; gap: .45rem; }
.kz-prof .kz-clinic + .kz-clinic { border-top: 1px solid var(--rule); padding-top: 1rem; margin-top: .4rem; }
.kz-prof .kz-clinic p { margin: 0; }
.kz-prof .kz-cname { font-weight: 600; color: var(--ink); }
.kz-prof .kz-addr, .kz-prof .kz-note { font-size: var(--fs-small); color: var(--ink-2); }
.kz-prof .kz-revsum { margin: 0; font-size: 1.1rem; }
.kz-prof .kz-bar { position: sticky; bottom: 0; z-index: 5; display: flex; gap: 1rem; align-items: center; justify-content: space-between;
  margin-top: 1.6rem; padding: .75rem 0; background: var(--paper); border-top: 1px solid var(--rule); }
.kz-prof .kz-bar div { display: grid; gap: .05rem; min-width: 0; }
.kz-prof .kz-bar b { font-size: 1.15rem; }
.kz-prof .kz-bar s { font-size: var(--fs-micro); color: var(--muted); }
.kz-prof .kz-bar span { font-size: var(--fs-micro); color: var(--muted); }
/* on a phone the booking bar takes the bottom edge: the «Спроси MyPsy» button moves above it */
@media (max-width: 59.99rem) { .kz-has-bar .ask-fab { bottom: calc(5.2rem + env(safe-area-inset-bottom, 0px)); } }
@media (min-width: 60rem) {
  .kz-prof .kz-pgrid { grid-template-columns: minmax(0, 1fr) 23rem; align-items: start; }
  .kz-prof .kz-aside { grid-column: 2; grid-row: 1; position: sticky; top: 1rem; }
  .kz-prof .kz-pmain { grid-column: 1; grid-row: 1; }
  .kz-prof .kz-bar { display: none; }
}
.kz-zapis .kz-book, .kz-bridge .kz-book { border: 1px solid var(--rule); border-radius: var(--radius-l); background: var(--paper); color: var(--ink); padding: 1.4rem; width: min(26rem, calc(100% - 2rem)); }
.kz-zapis .kz-book::backdrop, .kz-bridge .kz-book::backdrop { background: rgb(0 0 0 / .55); }
.kz-zapis .kz-consent, .kz-bridge .kz-consent { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; color: var(--ink-2); }
.kz-zapis .kz-book .row, .kz-bridge .kz-book .row { justify-content: flex-end; }
/* Bridge «article -> specialist» in the closed owner build: a quiet block before «Если захотите обсудить». */
.kz-bridge { display: grid; gap: .9rem; border: 1px solid var(--rule); border-radius: var(--radius-l); padding: 1.2rem; background: var(--paper-2); }
.kz-bridge h2 { margin: 0; }
.kz-bridge .kzb-list { display: grid; gap: .8rem; }
.kz-bridge .kzb-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .9rem; align-items: start; padding-top: .8rem; border-top: 1px solid var(--rule); }
.kz-bridge .kz-ph { width: 3.5rem; height: 3.5rem; border-radius: 12px; font-size: 1.1rem; text-decoration: none; }
.kz-bridge h3 { font-size: 1.1rem; margin: 0; }
.kz-bridge h3 a { text-decoration: none; }
.kz-bridge .kzb-main p { margin: .15rem 0 .45rem; }
.kz-bridge .kzb-time { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.kz-bridge .kzb-time .meta { margin-right: .3rem; }

/* lk.css */
/* «Мой кабинет», version 2 (/lk/, src/client/lk.js). An app shell inside the site page: on a computer a dark rail of
   sections beside the screen, on a phone a bottom bar of five sections and a floating «Отметить». Every screen is a
   dashboard of cards: the summary first (dials, rings, goals, highlights), the detail one tap deeper (trends).
   Colours are the site tokens plus state colours for the mood field, the calendar and the Stroop words. */
.lk {
  --lk-card: #FBF6EC; --lk-ok-soft: #D3E6D2;
  --lk-q-hp: #B9821B; --lk-q-hu: #B4432A; --lk-q-lu: #3E6E9C; --lk-q-lp: #2F7A5C;
  --lk-m1: #B4432A; --lk-m2: #C9773C; --lk-m3: #C9B26A; --lk-m4: #6FA884; --lk-m5: #2F7A5C;
  --lk-st-red: #B3261E; --lk-st-blue: #1D4FA3; --lk-st-green: #1E6B34; --lk-st-yellow: #8A6A00;
  --lk-rail: #121819; --lk-rail-ink: #E9EEEC; --lk-rail-muted: #9FACA8; --lk-rail-accent: #8FC5BF;
  --lk-r: 18px; --lk-r-s: 10px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lk {
    --lk-card: #172022; --lk-ok-soft: #1E3324;
    --lk-q-hp: #E2B04A; --lk-q-hu: #E7795E; --lk-q-lu: #7FA9D6; --lk-q-lp: #6CC39A;
    --lk-m1: #E7795E; --lk-m2: #E0A06A; --lk-m3: #D8C98A; --lk-m4: #8CC8A2; --lk-m5: #4FB383;
    --lk-st-red: #FF8A80; --lk-st-blue: #8AB4FF; --lk-st-green: #7FD99A; --lk-st-yellow: #F2D06B;
    --lk-rail: #0C1112;
  }
}
:root[data-theme="dark"] .lk {
  --lk-card: #172022; --lk-ok-soft: #1E3324;
  --lk-q-hp: #E2B04A; --lk-q-hu: #E7795E; --lk-q-lu: #7FA9D6; --lk-q-lp: #6CC39A;
  --lk-m1: #E7795E; --lk-m2: #E0A06A; --lk-m3: #D8C98A; --lk-m4: #8CC8A2; --lk-m5: #4FB383;
  --lk-st-red: #FF8A80; --lk-st-blue: #8AB4FF; --lk-st-green: #7FD99A; --lk-st-yellow: #F2D06B;
  --lk-rail: #0C1112;
}

/* the app owns the screen: the site's own floating buttons step aside */
body[data-app="lk"] .ask-fab, body[data-app="lk"] .to-top { display: none !important; }
.lk-off { padding-block: var(--s-7); display: grid; gap: var(--s-3); }
.lk h1, .lk h2, .lk h3 { margin: 0; line-height: 1.2; text-wrap: balance; }
.lk p { margin: 0; }
.lk button:not(.btn) { font: inherit; color: inherit; }

/* shell */
.lk-app { display: grid; grid-template-columns: 15rem minmax(0, 1fr); max-width: 90rem; margin-inline: auto; }
.lk-rail { position: sticky; top: calc(3.5rem + env(safe-area-inset-top, 0px)); align-self: start; max-height: calc(100vh - 4rem); overflow-y: auto; margin: 1.25rem 0 1.25rem max(1rem, env(safe-area-inset-left, 0px)); background: var(--lk-rail); color: var(--lk-rail-ink); border-radius: var(--lk-r); display: flex; flex-direction: column; gap: .3rem; padding: 1.1rem .7rem 1rem; }
.lk-logo { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; padding: .2rem .7rem .9rem; }
.lk-logo small { display: block; font-family: var(--sans); font-size: .7rem; font-weight: 500; color: var(--lk-rail-muted); letter-spacing: .06em; text-transform: uppercase; margin-top: .25rem; }
.lk-nav { display: grid; gap: .15rem; }
.lk-nav a { display: flex; align-items: center; gap: .7rem; padding: .58rem .75rem; border-radius: 12px; color: var(--lk-rail-muted); text-decoration: none; font-weight: 500; }
.lk-nav a svg { width: 1.25rem; height: 1.25rem; flex: none; }
.lk-nav a:hover { color: var(--lk-rail-ink); background: rgba(255, 255, 255, .05); }
.lk-nav a[aria-current="page"] { color: var(--lk-rail-ink); background: rgba(143, 197, 191, .16); }
.lk-nav a[aria-current="page"] svg { color: var(--lk-rail-accent); }
.lk-rail .lk-log { margin-top: .8rem; background: var(--lk-rail-accent); border-color: var(--lk-rail-accent); color: #0E1515; }
.lk-rail .lk-log:hover { background: #BFE0DC; border-color: #BFE0DC; color: #0E1515; }
.lk-foot { margin-top: 1rem; font-size: .78rem; color: var(--lk-rail-muted); padding: .2rem .7rem; line-height: 1.45; }
.lk-foot a { color: var(--lk-rail-accent); }
.lk-main { min-width: 0; padding: 1.25rem max(16px, env(safe-area-inset-right, 0px)) 3rem 1.25rem; }
.lk-in { max-width: 72rem; margin: 0 auto; display: grid; gap: 1rem; }
.lk-tabbar, .lk-fab { display: none; }
@media (max-width: 900px) {
  .lk-app { grid-template-columns: minmax(0, 1fr); }
  .lk-rail { display: none; }
  .lk-main { padding: 1rem max(16px, env(safe-area-inset-right, 0px)) calc(6.5rem + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
  .lk-tabbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--lk-rail); border-top: 1px solid rgba(255, 255, 255, .06); padding: .3rem max(.4rem, env(safe-area-inset-right, 0px)) calc(.3rem + env(safe-area-inset-bottom, 0px)) max(.4rem, env(safe-area-inset-left, 0px)); }
  .lk-tabbar a { display: grid; justify-items: center; gap: .15rem; padding: .4rem 0 .3rem; color: var(--lk-rail-muted); text-decoration: none; font-size: .68rem; font-weight: 500; position: relative; }
  .lk-tabbar a svg { width: 1.35rem; height: 1.35rem; }
  .lk-tabbar a[aria-current="page"] { color: var(--lk-rail-accent); }
  .lk-tabbar a[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 2px; border-radius: 2px; background: var(--lk-rail-accent); }
  .lk-fab { display: inline-flex; position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px)); z-index: 51; border-radius: 999px; box-shadow: 0 6px 20px rgba(0, 0, 0, .28); }
  body[data-app="lk"] .site-foot { padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }
}
@media print { .lk-tabbar, .lk-fab, .lk-rail { display: none !important; } .lk-app { grid-template-columns: 1fr; } }

/* top of a screen */
.lk-top { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.lk-top .grow { flex: 1; min-width: 12rem; display: grid; gap: .3rem; }
.lk-h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.7rem, 2vw + 1rem, 2.4rem); letter-spacing: -.01em; }
.lk-sub { color: var(--ink-2); max-width: 44rem; }
.lk-notice { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; background: var(--warm-soft); color: var(--ink); border-radius: var(--lk-r); padding: .75rem 1rem; font-size: .92rem; }
.lk-notice b { color: var(--warm); text-transform: uppercase; letter-spacing: .06em; font-size: .74rem; }

/* cards */
.lk-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.lk-c { background: var(--lk-card); border: 1px solid var(--rule); border-radius: var(--lk-r); padding: 1.1rem 1.15rem 1.15rem; display: grid; gap: .75rem; align-content: start; min-width: 0; }
.lk .s12 { grid-column: span 12; } .lk .s8 { grid-column: span 8; } .lk .s7 { grid-column: span 7; } .lk .s6 { grid-column: span 6; } .lk .s5 { grid-column: span 5; } .lk .s4 { grid-column: span 4; }
@media (max-width: 1100px) { .lk .s4 { grid-column: span 6; } }
@media (max-width: 760px) { .lk .s8, .lk .s7, .lk .s6, .lk .s5, .lk .s4 { grid-column: span 12; } }
.lk-ch { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.lk-ch h2 { font-family: var(--sans); font-size: 1.05rem; font-weight: 600; }
.lk-ch .grow { flex: 1; }
.lk-chip { display: inline-block; font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; font-weight: 600; padding: .1rem .5rem; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; justify-self: start; }
.lk-chip.ex { color: var(--warm); } .lk-chip.mine { color: var(--ok); } .lk-chip.hold { color: var(--danger); } .lk-chip.go { color: var(--accent); }
.lk-note { font-size: .86rem; color: var(--ink-2); border-left: 3px solid var(--warm); padding-left: .7rem; }
.lk .btn { border-radius: 999px; }
.lk .lk-danger { background: var(--danger); border-color: var(--danger); color: var(--paper-2); }
.lk .lk-danger:hover { background: var(--danger); border-color: var(--danger); filter: brightness(1.08); color: var(--paper-2); }
.lk .btn[disabled] { opacity: .45; cursor: default; }
.lk .lk-danger-q { color: var(--danger); border-color: var(--danger); }
.lk .lk-danger-q:hover { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
.lk-c > .btn { justify-self: start; }
.lk-empty p { color: var(--ink-2); max-width: 34rem; }
.lk-row { display: flex; gap: .55rem; flex-wrap: wrap; align-items: center; }
a.lk-c { color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s; }
a.lk-c:hover { border-color: var(--accent); }
.lk-hr { border: 0; border-top: 1px solid var(--rule); margin: .2rem 0; }

/* dials, rings */
.lk-dials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.lk-dial { display: grid; justify-items: center; gap: .1rem; text-align: center; text-decoration: none; color: var(--ink); border-radius: 14px; padding: .2rem 0 .4rem; }
.lk-dial:hover { background: var(--paper-3); color: var(--ink); }
.lk-dial svg { width: 100%; max-width: 9.5rem; height: auto; }
.lk-dial .lab { font-weight: 600; font-size: .9rem; }
.lk-dial .st { font-size: .76rem; color: var(--muted); line-height: 1.3; }
.lk-gauge-bg { fill: none; stroke: var(--paper-3); stroke-width: 11; stroke-linecap: round; }
.lk-gauge-fg { fill: none; stroke-width: 11; stroke-linecap: round; }
.lk-gauge-band { fill: none; stroke: var(--ink-2); stroke-width: 2.5; opacity: .5; stroke-linecap: round; }
.lk-gauge-num { font-family: var(--serif); font-weight: 600; font-size: 34px; fill: var(--ink); }
.lk-gauge-unit { font-size: 11px; fill: var(--muted); font-family: var(--sans); }
.lk-rings { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center; }
.lk-rings svg { width: 8.5rem; height: 8.5rem; }
.lk-ring-bg { fill: none; stroke: var(--paper-3); stroke-width: 12; }
.lk-ring-fg { fill: none; stroke-width: 12; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; }
.lk-legend { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.lk-legend li { display: grid; grid-template-columns: .8rem minmax(0, 1fr) auto; gap: .55rem; align-items: center; font-size: .92rem; }
.lk-legend i { width: .8rem; height: .8rem; border-radius: 50%; }
.lk-legend b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 761px) and (max-width: 1240px) { .lk-rings { grid-template-columns: minmax(0, 1fr); justify-items: center; } .lk-legend { width: 100%; } }
@media (max-width: 480px) { .lk-rings svg { width: 6.25rem; height: 6.25rem; } .lk-rings { gap: .8rem; } .lk-legend li { font-size: .84rem; gap: .45rem; } }
@media (max-width: 340px) { .lk-rings { grid-template-columns: minmax(0, 1fr); justify-items: center; } .lk-legend { width: 100%; } }

/* highlights, next step, recommendations */
.lk-hl { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem; gap: .8rem; align-items: center; }
.lk-hl h3 { font-size: .98rem; font-weight: 600; line-height: 1.35; margin-top: .2rem; font-family: var(--sans); }
.lk-hl p { font-size: .86rem; color: var(--ink-2); margin-top: .25rem; }
.lk-dir { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.lk-dir.up { color: var(--ok); } .lk-dir.down { color: var(--warm); } .lk-dir.flat { color: var(--muted); }
.lk-spark { width: 100%; height: 2.8rem; overflow: visible; }
.lk-spark path { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.lk-spark circle { fill: var(--accent); }
.lk-next { grid-template-columns: minmax(0, 1fr) auto; gap: .9rem; align-items: center; background: var(--accent-soft); border-color: transparent; }
.lk-next h3 { font-family: var(--serif); font-size: 1.25rem; margin-top: .15rem; }
.lk-next p:not(.kicker) { color: var(--ink-2); font-size: .92rem; margin-top: .25rem; }
@media (max-width: 560px) { .lk-next { grid-template-columns: minmax(0, 1fr); } .lk-next .btn { justify-self: start; } }
.lk-recs { display: grid; margin: 0; padding: 0; list-style: none; }
.lk-recs li { border-top: 1px solid var(--rule); }
.lk-recs li:first-child { border-top: 0; }
.lk-recs a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem; align-items: center; padding: .65rem 0; text-decoration: none; color: var(--ink); }
.lk-recs a:hover b { color: var(--accent); }
.lk-recs b { font-weight: 600; }
.lk-recs .why { display: block; font-size: .82rem; color: var(--muted); margin-top: .1rem; }
.lk-recs .go { color: var(--accent); font-weight: 700; }
.lk-support { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; font-size: .86rem; color: var(--ink-2); padding-top: .6rem; border-top: 1px solid var(--rule); }

/* goals */
.lk-goal { display: grid; gap: .55rem; }
.lk-goal h3 { font-family: var(--serif); font-size: 1.15rem; }
.lk-gprog { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem; align-items: center; }
.lk-gbar { height: .65rem; border-radius: 999px; background: var(--paper-3); overflow: hidden; }
.lk-gbar i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.lk-gbar i.done { background: var(--ok); }
.lk-gnum { font-weight: 700; font-variant-numeric: tabular-nums; }
.lk-weeks { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; align-items: end; height: 3.2rem; }
.lk-weeks span { border-radius: 4px 4px 2px 2px; background: var(--paper-3); min-height: 3px; }
.lk-weeks span.hit { background: var(--ok); }
.lk-weeks span.part { background: var(--accent); opacity: .6; }
.lk-weeks.sm { height: 1.7rem; gap: 3px; }
.lk-wl { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; font-size: .64rem; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.lk-gpick { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.lk-gpick li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .75rem .85rem; border: 1px solid var(--rule); border-radius: 14px; background: var(--paper-2); }
.lk-gpick b { display: block; }
.lk-gpick span { font-size: .84rem; color: var(--muted); }
@media (max-width: 480px) { .lk-gpick li { grid-template-columns: minmax(0, 1fr); } .lk-gpick li > :last-child { justify-self: start; } }

/* charts */
svg.lk-chart { width: 100%; height: auto; display: block; overflow: visible; }
svg.lk-chart text { fill: var(--muted); font-family: var(--sans); font-size: 11px; }
.lk-grid-l { stroke: var(--rule); stroke-width: 1; }
.lk-ln { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.lk-ln.warm { stroke: var(--warm); }
.lk-area { fill: var(--accent); opacity: .06; }
.lk-band { fill: var(--accent); opacity: .14; }
.lk-avg { stroke: var(--ink-2); stroke-dasharray: 5 4; stroke-width: 1.2; }
.lk-goal-l { stroke: var(--ok); stroke-dasharray: 2 4; stroke-width: 2; }
svg.lk-chart .lk-goal-t { fill: var(--ok); font-weight: 600; }
.lk-dot { fill: var(--accent); } .lk-dot.warm { fill: var(--warm); }
.lk-dot.end { fill: var(--lk-card); stroke: var(--accent); stroke-width: 2.6; }
svg.lk-chart .lk-endlab { fill: var(--ink); font-weight: 700; font-size: 12px; }
.lk-z1 { fill: var(--lk-ok-soft); } .lk-z2 { fill: var(--warm-soft); } .lk-z3 { fill: var(--danger-soft); }

/* metric picker, range, stats */
.lk-pills { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.lk-pg { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; margin-right: .3rem; min-width: 5.5rem; }
.lk-pill { border: 1px solid var(--rule); background: var(--lk-card); border-radius: 999px; padding: .35rem .8rem; font-size: .88rem; color: var(--ink-2); text-decoration: none; }
.lk-pill:hover { border-color: var(--accent); color: var(--ink); }
.lk-pill[aria-current="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
@media (max-width: 600px) { .lk-pills { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding: 0 16px .3rem; scrollbar-width: none; } .lk-pill { white-space: nowrap; } }
.lk-seg { display: inline-flex; background: var(--paper-3); border-radius: 999px; padding: .2rem; }
.lk-seg button { border: 0; background: transparent; border-radius: 999px; padding: .3rem .75rem; cursor: pointer; font-size: .84rem; color: var(--ink-2); white-space: nowrap; }
.lk-seg button[aria-pressed="true"] { background: var(--lk-card); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
.lk-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.lk-stat { display: grid; gap: .1rem; min-width: 0; }
.lk-stat .k { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.lk-stat .v { font-family: var(--serif); font-weight: 600; font-size: 1.5rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; line-height: 1.2; }
.lk-cell { display: grid; gap: .3rem; min-width: 0; }

.lk-ext { display: grid; gap: .35rem; margin: 0; padding: .6rem 0 0; list-style: none; border-top: 1px solid var(--rule); }
.lk-ext li { display: flex; justify-content: space-between; gap: .6rem; font-size: .88rem; color: var(--ink-2); }
.lk-ext b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.lk-how { grid-column: span 8; background: transparent; border-style: dashed; }
@media (max-width: 1100px) { .lk-how { grid-column: span 6; } }
@media (max-width: 760px) { .lk-how { grid-column: span 12; } }

/* calendar, mood field, coincidences */
.lk-calw { --lk-cell: 1.15rem; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px; }
@media (min-width: 1100px) { .lk-calw { --lk-cell: 1.55rem; } }
.lk-dows { display: grid; grid-template-rows: repeat(7, var(--lk-cell)); gap: 3px; font-size: .64rem; color: var(--muted); line-height: var(--lk-cell); }
.lk-cal { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, var(--lk-cell)); grid-auto-columns: var(--lk-cell); gap: 3px; overflow-x: auto; padding-bottom: .2rem; }
.lk-cal span { border-radius: 4px; background: var(--paper-3); }
.lk-cal span.today { outline: 2px solid var(--ink); outline-offset: 1px; }
.lk-scale { display: flex; align-items: center; gap: .3rem; font-size: .75rem; color: var(--muted); }
.lk-scale i { width: .9rem; height: .9rem; border-radius: 3px; display: inline-block; }
.lk-quad { width: 100%; max-width: 22rem; height: auto; touch-action: manipulation; justify-self: center; display: block; margin-inline: auto; }
.lk-quad .qa { cursor: crosshair; }
.lk-quad text { font-family: var(--sans); font-size: 11px; fill: var(--ink-2); font-weight: 600; pointer-events: none; }
.lk-quad text.ax { fill: var(--muted); font-weight: 500; font-size: 10px; }
.lk-quad .pt { fill: var(--ink); opacity: .3; pointer-events: none; }
.lk-quad .pick { fill: var(--lk-card); stroke: var(--ink); stroke-width: 3; pointer-events: none; }
.lk-coin { display: grid; margin: 0; padding: 0; list-style: none; }
.lk-coin li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem; align-items: center; padding: .6rem 0; border-top: 1px solid var(--rule); }
.lk-coin li:first-child { border-top: 0; }
.lk-coin .d { font-weight: 700; font-variant-numeric: tabular-nums; }
.lk-coin .d.up { color: var(--ok); } .lk-coin .d.down { color: var(--warm); }
.lk-bar2 { height: .4rem; border-radius: 999px; background: var(--paper-3); position: relative; margin: .3rem 0; }
.lk-bar2 i { position: absolute; top: 0; bottom: 0; border-radius: 999px; }

.lk-wd { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.lk-wd li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) 2.2rem; gap: .5rem; align-items: center; font-size: .86rem; color: var(--ink-2); }
.lk-wd li.best { color: var(--ink); font-weight: 600; }
.lk-wd b { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.lk-wdbar { height: .55rem; border-radius: 999px; background: var(--paper-3); overflow: hidden; }
.lk-wdbar i { display: block; height: 100%; border-radius: 999px; }

/* forms */
.lk-form { display: grid; gap: 1.1rem; }
.lk-field { display: grid; gap: .35rem; }
.lk-field label, .lk-field .label { font-weight: 600; }
.lk-field .hint { font-size: .82rem; color: var(--muted); }
.lk-field input[type=range] { width: 100%; accent-color: var(--accent); min-height: 1.75rem; }
.lk-tags { display: flex; gap: .4rem; flex-wrap: wrap; }
.lk-tags button, .lk-pick button { border: 1px solid var(--rule); background: var(--lk-card); border-radius: 999px; padding: .4rem .85rem; cursor: pointer; font-size: .9rem; min-height: 2.25rem; }
.lk-tags button[aria-pressed="true"], .lk-pick button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.lk-rv { font-family: var(--serif); font-weight: 600; font-variant-numeric: tabular-nums; }
.lk-saved { color: var(--ok); font-weight: 600; }

/* portrait, reading */
.lk-traits { display: grid; gap: .9rem; }
.lk-trait .nm { display: flex; justify-content: space-between; gap: .5rem; font-weight: 600; }
.lk-trait .nm span:last-child { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lk-track { position: relative; height: .7rem; border-radius: 999px; background: var(--paper-3); margin: .35rem .6rem; }
.lk-track i { position: absolute; top: -.25rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--accent); border: 3px solid var(--lk-card); transform: translateX(-50%); }
.lk-track .mid { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--muted); opacity: .5; }
.lk-poles { display: flex; justify-content: space-between; gap: 1rem; font-size: .78rem; color: var(--muted); }
.lk-poles span:last-child { text-align: right; }
.lk-vals { display: grid; gap: .5rem; counter-reset: v; margin: 0; padding: 0; list-style: none; }
.lk-vals li { display: flex; gap: .7rem; align-items: baseline; padding: .55rem .8rem; border-radius: var(--lk-r-s); background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.lk-vals li::before { counter-increment: v; content: counter(v); font-family: var(--serif); opacity: .7; }
.lk-reads { display: grid; margin: 0; padding: 0; list-style: none; }
.lk-reads li { border-top: 1px solid var(--rule); }
.lk-reads li:first-child { border-top: 0; }
.lk-reads a { display: grid; gap: .3rem; padding: .7rem 0; text-decoration: none; color: var(--ink); }
.lk-reads a:hover b { color: var(--accent); }
.lk-mini { display: block; height: .3rem; border-radius: 999px; background: var(--paper-3); overflow: hidden; max-width: 16rem; }
.lk-mini i { display: block; height: 100%; background: var(--accent); }

/* tests, more */
.lk-tcard { gap: .5rem; }
.lk-tcard .meta { font-size: .8rem; color: var(--muted); }
.lk-tcard h3 { font-family: var(--serif); font-size: 1.15rem; }
.lk-status { font-size: .82rem; font-weight: 600; }
.lk-tcard.soon { background: transparent; border-style: dashed; }
.lk-tcard.soon .lk-status { color: var(--muted); }
.lk-status.due { color: var(--warm); } .lk-status.done { color: var(--ok); } .lk-status.new { color: var(--accent); }
.lk-more { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.lk-more a { display: flex; gap: .8rem; align-items: center; }
.lk-more svg { width: 1.6rem; height: 1.6rem; color: var(--accent); flex: none; }

/* runner */
.lk-flow { max-width: 42rem; display: grid; gap: 1rem; }
.lk-prog { height: 5px; background: var(--paper-3); border-radius: 999px; overflow: hidden; }
.lk-prog i { display: block; height: 100%; background: var(--accent); transition: width .2s; }
.lk-qcard { background: var(--lk-card); border: 1px solid var(--rule); border-radius: var(--lk-r); padding: 1.3rem; display: grid; gap: 1rem; }
.lk-qno { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.lk-qtext { font-family: var(--serif); font-size: 1.35rem; line-height: 1.35; }
.lk-opts { display: grid; gap: .5rem; }
.lk-opt { text-align: left; background: var(--paper); border: 1px solid var(--rule); border-radius: 14px; padding: .78rem .95rem; cursor: pointer; min-height: 2.9rem; }
.lk-opt:hover, .lk-opt.sel { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.lk-scale10 { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: .3rem; }
.lk-scale10 .lk-opt { padding: .65rem 0; text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; }
@media (max-width: 480px) { .lk-scale10 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.lk-ends { display: flex; justify-content: space-between; gap: 1rem; font-size: .8rem; color: var(--muted); }
.lk-back { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0; justify-self: start; }
.lk-back:hover { color: var(--ink); }
.lk-bigres { font-family: var(--serif); font-size: 3rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.lk-bandbox { padding: .8rem 1rem; border-radius: var(--lk-r-s); }
.lk-bandbox.b1 { background: var(--lk-ok-soft); } .lk-bandbox.b2 { background: var(--warm-soft); } .lk-bandbox.b3 { background: var(--danger-soft); }
.lk-vcard { background: var(--lk-card); border: 1px solid var(--rule); border-radius: var(--lk-r); padding: 1.8rem 1.3rem; display: grid; gap: .4rem; text-align: center; }
.lk-vcard .w { font-family: var(--serif); font-size: 2.1rem; font-weight: 600; }
.lk-vbtns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.lk-vbtns .lk-opt { text-align: center; }
.lk-pick { display: flex; flex-wrap: wrap; gap: .5rem; }
.lk-rt { height: 12rem; border-radius: var(--lk-r); display: grid; place-items: center; text-align: center; font-family: var(--serif); font-size: 1.4rem; cursor: pointer; user-select: none; -webkit-user-select: none; border: 1px solid var(--rule); background: var(--paper-3); padding: 1rem; touch-action: manipulation; }
.lk-rt.go { background: var(--accent); color: var(--on-accent); }
.lk-rt.early { background: var(--danger-soft); }
.lk-sword { font-size: clamp(2.2rem, 7vw, 3.4rem); font-weight: 700; text-align: center; letter-spacing: .04em; padding: 1.2rem 0; background: var(--lk-card); border: 1px solid var(--rule); border-radius: var(--lk-r); }
.lk-sbtns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.lk-sbtns .lk-opt { text-align: center; }
@media (max-width: 480px) { .lk-sbtns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lk-lgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; max-width: 18rem; }
.lk-lgrid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 22rem; }
.lk-lgrid .cc { aspect-ratio: 1; background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; display: grid; place-items: center; }
.lk-qm { font-family: var(--serif); font-size: 1.6rem; }
.lk-lopts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; max-width: 26rem; }
.lk-lopts .lk-opt { display: grid; place-items: center; aspect-ratio: 1; padding: .3rem; }
.lk .shape { fill: var(--ink); }
.lk-seq { font-family: var(--serif); font-size: 1.8rem; font-variant-numeric: tabular-nums; letter-spacing: .05em; }
.lk-dumpbox { width: 100%; min-height: 10rem; font-family: ui-monospace, Consolas, monospace; font-size: .78rem; background: var(--paper); color: var(--ink); border: 1px solid var(--rule); border-radius: var(--lk-r-s); padding: .6rem; }
.lk-confirm { display: grid; gap: .6rem; padding: .8rem; border: 1px solid var(--danger); border-radius: var(--lk-r-s); background: var(--danger-soft); }
.lk-foot-note { font-size: .78rem; color: var(--muted); line-height: 1.45; max-width: 60rem; }
@media (prefers-reduced-motion: reduce) { .lk * { transition: none !important; } }

/* Telegram Mini App (/tg/): the app owns the screen, the site's header and footer step aside; Telegram gives the safe
   areas of the phone as CSS variables, the page keeps its own padding when they are missing */
body[data-tg] .site-head, body[data-tg] .site-foot, body[data-tg] .skip { display: none !important; }
body[data-tg] .lk-rail { top: 1rem; }
body[data-tg] .lk-main { padding-top: max(1rem, var(--tg-content-safe-area-inset-top, 0px)); }
@media (max-width: 900px) {
  body[data-tg] .lk-tabbar { padding-bottom: calc(.3rem + max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px))); }
}
.lk-more .lk-home { display: flex; gap: .8rem; align-items: center; text-align: left; font: inherit; color: var(--ink); cursor: pointer; }

/* ---- «База» in Telegram: search in one's own words, the rubrics, questions with short answers -------------------- */
.lk-find { margin-bottom: 1rem; }
.lk-find-row { display: flex; gap: .5rem; }
.lk-find-row input { flex: 1; min-width: 0; font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: .7rem; padding: .65rem .8rem; }
.lk-find-row input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
a.lk-found { display: grid; gap: .25rem; padding: .7rem 0; border-top: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
a.lk-found b { font-family: var(--serif); font-size: 1.12rem; color: var(--accent); }
.lk-rubs a.lk-c { display: block; }
.lk-qa { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.lk-qa-h { font-family: var(--serif); font-size: 1.2rem; line-height: 1.25; }
.lk-qa .btn { justify-self: start; }
.lk-fab[hidden] { display: none !important; }

/* marshrut.css */
/* «Мой маршрут»: the builder page (/marshrut/), the entry block on reading pages and the route list, which the
   cabinet reuses. Magazine language: rules and type hold the hierarchy, no cards. */

/* ---- the builder --------------------------------------------------------------------------------------------- */
.route { max-width: 44rem; min-height: 20rem; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.route-wait { font-family: var(--serif); font-style: italic; font-size: var(--fs-h3); line-height: 1.4; color: var(--muted); }
.route-progress { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.4rem; }
.route-bar { position: relative; flex: 1; max-width: 16rem; height: 2px; background: var(--rule); }
.route-bar i { position: absolute; inset: 0 auto 0 0; background: var(--accent); }
.route-topic { margin-bottom: .6rem; }
.route-q { outline: none; }
.route-hint { margin-top: .6rem; max-width: 36rem; }
.route-opts { display: grid; margin-top: 1.4rem; border-top: 2px solid var(--rule-strong); }
.route-opt {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem 1.2rem;
  width: 100%; min-height: 3.4rem; padding: 1rem .5rem; border: 0; border-bottom: 1px solid var(--rule);
  background: none; color: var(--ink); text-align: left; cursor: pointer;
  font-family: var(--serif); font-size: var(--fs-h3); line-height: 1.25;
}
.route-opt:hover { background: var(--paper-2); }
.route-opt:focus-visible { background: var(--paper-2); outline: 2px solid var(--accent); outline-offset: -2px; }
.route-opt .meta { font-family: var(--sans); }
.route-nav { margin-top: 1.2rem; }
.route-link { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: .15em; cursor: pointer; }
.route-urgent { margin-top: clamp(2rem, 4vw, 3rem); }
.route-note { margin-top: 1rem; max-width: 44rem; }

/* ---- the route: a numbered reading order -------------------------------------------------------------------- */
.route-list { list-style: none; counter-reset: route; margin: 1.4rem 0 0; padding: 0; border-top: 2px solid var(--rule-strong); }
.route-item { position: relative; counter-increment: route; padding: 1.1rem 0 1.15rem 3.2rem; border-bottom: 1px solid var(--rule); }
.route-item::before { content: counter(route); position: absolute; left: .1rem; top: 1rem; font-family: var(--serif); font-size: 2.2rem; line-height: 1; color: var(--muted); }
.route-item.is-start::before { color: var(--accent); }
.route-item.is-done .story-title a { color: var(--muted); }
.route-item .kicker { margin-bottom: .3rem; }
.route-item .meta { margin-top: .35rem; }
.route-check { margin-top: .1rem; }
.route-help { max-width: 44rem; margin-top: 1.3rem; padding: 1rem 1.2rem; border-left: 2px solid var(--accent); background: var(--paper-2); }
.route-actions { flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem; margin-top: 1.4rem; }
.route-saved { margin-top: 1rem; max-width: 40rem; }

/* ---- the entry block on reading pages ------------------------------------------------------------------------ */
.route-cta { display: grid; gap: .55rem; max-width: 44rem; margin: clamp(1.75rem, 3.5vw, 2.75rem) 0; padding: 1.4rem 0 1.5rem; border-top: 2px solid var(--rule-strong); border-bottom: 1px solid var(--rule); }
.route-cta-title { font-family: var(--serif); font-size: var(--fs-h2); line-height: 1.15; }
.route-cta-go { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem; margin-top: .5rem; }
.route-cta-wide { max-width: none; }

/* ---- inside the cabinet ---------------------------------------------------------------------------------------- */
.route-card { margin-bottom: 1.8rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--rule); }
.route-card-head .meta { margin: .3rem 0 .5rem; }
.route-week-h { margin-top: 1.5rem; font-size: var(--fs-micro); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.route-week { list-style: none; display: grid; margin: .5rem 0 0; padding: 0; border-top: 1px solid var(--rule); }
.route-week li { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--rule); }
.route-week li.is-today { font-weight: 600; }
.route-week li.is-today .meta { color: var(--accent-ink); }
.route-more { margin-top: .4rem; }

@media (max-width: 560px) {
  .route-item { padding-left: 2.5rem; }
  .route-item::before { font-size: 1.8rem; }
  .route-week li { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .route-opt { padding-inline: .25rem; }
}

/* specialists.css */
/* Specialist layer: who is who, category pages, demo profiles and the matching flow.
   Type, hairline rules and whitespace; the only cards are people. Tokens only. */

/* who is who: definition columns */
.sp-who h3 { font-size: var(--fs-h2); }
.sp-who h3 a { text-decoration: none; }
.sp-who h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.sp-who.g-2 { row-gap: 0; }
.sp-who.g-2 > .stack { border-top: 1px solid var(--rule); padding-block: 1.25rem 1.5rem; }

/* a quiet pointer to urgent help under ordinary lists */
.sp-urgent { margin-top: 1.25rem; font-size: var(--fs-small); color: var(--muted); max-width: 46rem; }
.sp-urgent a { color: var(--danger); font-weight: 600; }

/* how people look for a specialist: what matters, the phrase people use, our short answer */
.sp-asks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); column-gap: clamp(1.25rem, 2.6vw, 2.5rem); margin: 0; }
.sp-asks > div { display: grid; gap: .35rem; align-content: start; border-top: 1px solid var(--rule); padding: .8rem 0 1.1rem; }
.sp-asks dt { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.sp-asks dd { margin: 0; font-size: var(--fs-small); color: var(--ink-2); }
.sp-asks dd.q { font-family: var(--serif); font-style: italic; font-size: 1.1875rem; line-height: 1.3; color: var(--ink); }

/* plain ruled lists: what a specialist works with and what is out of scope */
.sp-list li { border-top: 1px solid var(--rule); padding: .65rem 0; font-family: var(--serif); font-size: 1.125rem; line-height: 1.4; }
.sp-list li:last-child { border-bottom: 1px solid var(--rule); }
.sp-list li .meta { font-family: var(--sans); margin-top: .35rem; }
.sp-list-no li { position: relative; padding-left: 1.4rem; color: var(--ink-2); }
.sp-list-no li::before { content: ""; position: absolute; left: 0; top: 1.42rem; width: .75rem; border-top: 1px solid var(--warm); }

/* demo profile */
.sp-demo-banner { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .8rem; padding: .7rem .9rem; border-left: 3px solid var(--warm); background: var(--paper-2); font-size: var(--fs-small); color: var(--ink-2); }
.sp-demo-banner > span:last-child { flex: 1 1 16rem; }
.sp-id { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem clamp(1rem, 2.4vw, 1.75rem); align-items: start; }
.sp-id .person-photo { width: clamp(4.5rem, 12vw, 7.5rem); height: clamp(4.5rem, 12vw, 7.5rem); }
.sp-pending dd { font-family: var(--serif); font-style: italic; color: var(--muted); }
.sp-facts { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
.sp-facts dd { margin-bottom: .7rem; }
.sp-book { display: grid; gap: .9rem; padding: 1.1rem; border-top: 2px solid var(--rule-strong); background: var(--paper-2); }
.sp-form-msg { padding: .7rem .9rem; border-left: 3px solid var(--accent); background: var(--accent-soft); color: var(--accent-ink); font-size: var(--fs-small); }

/* matching flow */
.pb-form { display: grid; gap: clamp(1.25rem, 2.6vw, 2rem); max-width: 58rem; }
.pb-q { display: grid; gap: .8rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.pb-q legend { padding: 0; margin-bottom: .7rem; font-family: var(--serif); font-size: var(--fs-h2); font-weight: 400; line-height: 1.14; letter-spacing: -.012em; }
.pb-choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.pb-choice { position: relative; display: inline-flex; max-width: 100%; }
.pb-choice .chip { border-radius: 1.1rem; min-height: 2.5rem; }
.pb-choice input:checked + .chip { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pb-choice input:focus-visible + .chip { outline: 2px solid var(--accent); outline-offset: 3px; }
.pb-topics { display: grid; gap: .6rem; padding-top: .9rem; border-top: 1px solid var(--rule); }
.pb-crisis { display: grid; gap: .9rem; }
.pb-crisis:empty { display: none; }
.pb-msg { font-size: var(--fs-small); font-weight: 600; color: var(--warm); }
.pb-result { display: grid; gap: 1.1rem; }
.pb-result[hidden] { display: none; }
.pb-result h3 { margin-top: .9rem; padding-top: 1rem; border-top: 1px solid var(--rule); font-size: var(--fs-h3); }
.pb-result [tabindex="-1"]:focus { outline: none; }
@media (max-width: 30rem) {
  .pb-steps > li { grid-template-columns: 1.75rem minmax(0, 1fr); gap: .75rem; }
  .pb-steps > li::before { font-size: 1.6rem; }
}

/* real specialist card: document check line and direct contacts */
.sp-verified { padding: .7rem .9rem; border-left: 3px solid var(--accent); background: var(--accent-soft); color: var(--accent-ink); font-size: var(--fs-small); }
.sp-contacts { display: grid; gap: .45rem; }
.sp-contacts a { overflow-wrap: anywhere; }
.pb-choice input:disabled + .chip { opacity: .45; text-decoration: line-through; cursor: not-allowed; }

/* specialist onboarding: the quiz, the cabinet and the card preview */
.an-form { display: grid; gap: clamp(1.25rem, 2.6vw, 2rem); min-width: 0; max-width: 46rem; }
.an-step { display: grid; gap: clamp(1.25rem, 2.4vw, 1.75rem); }
.an-step[hidden] { display: none; }
.an-step > h2:focus { outline: none; }
.an-q legend { font-size: var(--fs-h3); margin-bottom: .5rem; }
/* the rule sits on the legend: a border on the fieldset itself would run through the legend text */
.an-q + .an-q legend { width: 100%; padding-top: clamp(1.25rem, 2.4vw, 1.75rem); border-top: 1px solid var(--rule); }
.an-q .check b { font-weight: 600; }
.an-q .check input { flex: none; }
.an-pair { align-items: flex-start; gap: 1rem; }
.an-pair .field { flex: 1 1 11rem; min-width: 0; }
.an-msg { padding: .7rem .9rem; border-left: 3px solid var(--warm); background: var(--warm-soft); font-weight: 400; color: var(--ink); }
.an-msg[hidden] { display: none; }
.an-msg ul { display: grid; gap: .3rem; }
.an-nav { gap: .6rem; }
.an-link { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.an-side { position: sticky; top: 4rem; align-self: start; }
.an-result[hidden] { display: none; }
.an-result [tabindex="-1"]:focus { outline: none; }
.an-preview { padding: clamp(1rem, 2.5vw, 1.75rem); border: 1px solid var(--rule-strong); background: var(--paper); min-width: 0; }
.an-preview .page-head { padding-top: 0; }
.an-faq + .an-faq { padding-top: 1rem; border-top: 1px solid var(--rule); }
@media (max-width: 60rem) { .an-side { position: static; } }

/* svodka.css */
/* «Сводка»: the owner's page with the numbers of the site's own counter. Tables and thin bars, nothing else. */
.svodka-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.svodka-sec { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }
.svodka-sec .h3 { margin-bottom: .7rem; }
.svodka-bar { width: 34%; min-width: 4rem; }
.svodka-bar i { display: block; height: 2px; background: var(--accent); }
.svodka-note { margin-top: clamp(2rem, 4vw, 3rem); max-width: 44rem; }
.svodka .chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.svodka-hint { margin-bottom: .7rem; max-width: 40rem; }

/* tests.css */
/* Tests (/testy/): the list of tests, one test with its questions and the result. Magazine language like the route
   builder: rules and type hold the hierarchy, no cards; every answer is a whole row the finger can hit. */

/* ---- the list ------------------------------------------------------------------------------------------------ */
.tests-list { list-style: none; max-width: 44rem; margin: clamp(1.5rem, 3vw, 2.5rem) 0 0; padding: 0; border-top: 2px solid var(--rule-strong); }
.tests-card { padding: 1.1rem 0 1.2rem; border-bottom: 1px solid var(--rule); }
.tests-card p { margin: .35rem 0 0; }
.tests-title { font-family: var(--serif); font-size: var(--fs-h3); line-height: 1.25; color: var(--ink); }

/* ---- one test ------------------------------------------------------------------------------------------------ */
.test-page .sec { max-width: 44rem; }
.test-about p { margin: .5rem 0 0; }
.test-form { max-width: 44rem; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.test-instruction { margin: 0 0 1rem; font-family: var(--serif); font-style: italic; font-size: var(--fs-dek); line-height: 1.4; color: var(--ink-2); }
.test-q { margin: 0; padding: 1.2rem 0 1rem; border: 0; border-top: 1px solid var(--rule); scroll-margin-top: 5rem; }
.test-q:first-of-type { border-top: 2px solid var(--rule-strong); }
.test-q legend { float: left; width: 100%; padding: 0; font-family: var(--serif); font-size: var(--fs-h3); line-height: 1.3; color: var(--ink); }
.test-q legend + * { clear: both; }
.test-no { color: var(--accent-ink); }
.test-opts { display: grid; gap: .1rem; padding-top: .7rem; }
.test-opt { display: flex; align-items: center; gap: .7rem; min-height: 2.75rem; padding: .35rem .5rem; border-radius: var(--radius); cursor: pointer; }
.test-opt:hover { background: var(--paper-2); }
.test-opt input { flex: none; width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--accent); }
.test-opt:has(input:checked) { background: var(--accent-soft); }
.test-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.test-q.is-missing legend { color: var(--danger); }
.test-q.is-missing { background: var(--danger-soft); }
.test-error { margin: 1rem 0 0; color: var(--danger); font-weight: 600; }
.test-form > .btn { margin-top: 1.4rem; }

/* ---- the result ---------------------------------------------------------------------------------------------- */
.test-result { margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.2rem; border-top: 2px solid var(--rule-strong); outline: none; scroll-margin-top: 5rem; }
.test-scale { margin-top: 1rem; }
.test-scale-title { margin: 0; font-weight: 600; }
.test-score { margin: .4rem 0 0; }
.test-num { font-family: var(--serif); font-size: var(--fs-display); line-height: 1; color: var(--accent-ink); }
.test-bar { position: relative; max-width: 24rem; height: 6px; margin: .8rem 0 1rem; border-radius: 3px; background: var(--rule); overflow: hidden; }
.test-bar span { position: absolute; inset: 0 auto 0 0; background: var(--accent); }
.test-band { margin: 0 0 .6rem; }
.test-safety { margin: .8rem 0 1rem; padding: .9rem 1rem; border-left: 3px solid var(--danger); background: var(--danger-soft); }
.test-safety p { margin: 0; }
.test-note { margin-top: 1rem; }
.test-sources ol { padding-left: 1.2rem; }
.test-help { max-width: 44rem; margin-top: clamp(1.5rem, 3vw, 2.5rem); }