/* zhpk.kz — образовательный портал. Один рукописный файл темы.
   Токены и правила — site/DESIGN.md. Шрифты локальные (OFL): Ysabeau Office — текст, Alumni Sans — надписи темы и цифры. */

/* ---------- шрифты ---------- */
@font-face { font-family: "Ysabeau Office"; font-style: normal; font-weight: 1 1000; font-display: swap;
  src: url("fonts/ysabeau-office-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Ysabeau Office"; font-style: normal; font-weight: 1 1000; font-display: swap;
  src: url("fonts/ysabeau-office-cyrillic-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Ysabeau Office"; font-style: normal; font-weight: 1 1000; font-display: swap;
  src: url("fonts/ysabeau-office-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Ysabeau Office"; font-style: italic; font-weight: 1 1000; font-display: swap;
  src: url("fonts/ysabeau-office-cyrillic-wght-italic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Ysabeau Office"; font-style: italic; font-weight: 1 1000; font-display: swap;
  src: url("fonts/ysabeau-office-cyrillic-ext-wght-italic.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Ysabeau Office"; font-style: italic; font-weight: 1 1000; font-display: swap;
  src: url("fonts/ysabeau-office-latin-wght-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Alumni Sans"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/alumni-sans-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Alumni Sans"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/alumni-sans-latin-wght-normal.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; }

/* ---------- токены ---------- */
:root {
  --paper: oklch(0.985 0.004 250);
  --paper-2: oklch(0.962 0.006 250);
  --rule: oklch(0.885 0.008 250);
  --rule-2: oklch(0.78 0.012 250);
  --ink: oklch(0.255 0.016 255);
  --ink-2: oklch(0.42 0.016 255);
  --ink-3: oklch(0.52 0.014 255);
  --pencil: oklch(0.87 0.16 92);
  --pencil-deep: oklch(0.72 0.15 75);
  --pencil-wash: oklch(0.965 0.05 95);
  --grid: oklch(0.6 0.05 250 / 0.07);
  --grid-major: oklch(0.6 0.05 250 / 0.13);
  --on-ink: oklch(0.93 0.006 250);
  --on-ink-2: oklch(0.76 0.01 250);
  --on-ink-rule: oklch(0.38 0.014 255);
  --on-ink-line: oklch(0.62 0.11 80);
  --edge-shade: oklch(0.3 0.02 260 / 0.18);

  --font-text: "Ysabeau Office", "Noto Sans", Roboto, "Segoe UI", system-ui, sans-serif;
  --font-display: "Alumni Sans", "Ysabeau Office", "Arial Narrow", sans-serif;

  --fs-xs: 0.9375rem;
  --fs-s: 1.0625rem;
  --fs-m: 1.1875rem;
  --fs-l: 1.4375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.375rem;
  --fs-code: 2.75rem;

  --wrap: 76rem;
  --gut: 16px;
  --measure: 68ch;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);

  --mm: linear-gradient(var(--grid-major) 1px, transparent 1px), linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
        linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  --mm-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px;
}
@media (min-width: 700px) { :root { --gut: 24px; } }
@media (min-width: 1100px) {
  :root { --gut: 32px; --fs-m: 1.25rem; --fs-l: 1.5625rem; --fs-xl: 2rem; --fs-2xl: 3.5rem; --fs-code: 4rem; }
}

/* ---------- основа ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 var(--fs-m)/1.6 var(--font-text);
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
::selection { background: var(--pencil); color: var(--ink); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

a {
  color: inherit;
  text-decoration-line: underline; text-decoration-color: var(--pencil-deep);
  text-decoration-thickness: 2px; text-underline-offset: 0.2em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  transition: background-color 160ms var(--ease), text-decoration-color 160ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  a:hover { background-color: var(--pencil); text-decoration-color: var(--ink); }
}

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 10; padding: 12px 16px; background: var(--ink); color: var(--paper); text-decoration: none; }
.skip:focus { top: 8px; }

/* надпись темы: чертёжный узкий шрифт, прописные */
.label, .kicker, .band-head h2, .toc-h, .site-foot h2, .passport dt, .ad-label {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
}

/* ---------- шапка ---------- */
.site-head { border-bottom: 1px solid var(--rule); }
.head-row { display: flex; align-items: center; gap: 16px; min-height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; padding-block: 8px; }
.brand-mark { width: 42px; height: 42px; flex: none; }
.brand-text { display: grid; line-height: 1; }
.brand-name { font: 600 2.125rem/0.9 var(--font-display); letter-spacing: 0.01em; }
.brand-tag { margin-top: 4px; font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.1; }
@media (hover: hover) and (pointer: fine) { .brand:hover { background: none; } .brand:hover .brand-name { background: var(--pencil); } }

.head-search { position: relative; margin-left: auto; display: none; }
.head-search input {
  width: 17rem; height: 46px; padding: 0 48px 0 16px;
  border: 1px solid var(--rule-2); border-radius: 2px; background: var(--paper);
  font: inherit; font-size: var(--fs-s); color: var(--ink);
}
.head-search input::placeholder { color: var(--ink-3); }
.head-search button, .search-link {
  display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px;
  border: 0; background: none; color: var(--ink-2); cursor: pointer; padding: 0;
}
.head-search button { position: absolute; right: 0; top: 0; }
.head-search svg, .search-link svg { width: 22px; height: 22px; }
.search-link { margin-left: auto; text-decoration: none; }
@media (min-width: 700px) { .head-search { display: block; } .search-link { display: none; } }

.nav { border-top: 1px solid var(--rule); }
.nav ul {
  display: flex; gap: 4px; margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut);
  list-style: none; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
}
.nav ul::-webkit-scrollbar { display: none; }
.nav a {
  display: flex; align-items: center; min-height: 50px; padding: 0 12px; white-space: nowrap;
  font-size: var(--fs-s); font-weight: 650; text-decoration: none;
  border-bottom: 4px solid transparent; margin-bottom: -1px;
}
.nav li:first-child a { padding-left: 0; }
.nav a[aria-current] { border-bottom-color: var(--pencil-deep); }
@media (max-width: 899px) {
  .nav ul { mask-image: linear-gradient(90deg, black calc(100% - 40px), transparent); -webkit-mask-image: linear-gradient(90deg, black calc(100% - 40px), transparent); padding-right: 40px; }
}
@media (hover: hover) and (pointer: fine) { .nav a:hover { background: none; border-bottom-color: var(--pencil); } .nav a[aria-current]:hover { border-bottom-color: var(--pencil-deep); } }

/* ---------- общие блоки ---------- */
main { display: block; }
.band { padding-top: 56px; }
.band-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px;
  border-bottom: 2px solid var(--ink); padding-bottom: 8px;
}
.band-head h2 { margin: 0; font-size: var(--fs-xl); line-height: 1; letter-spacing: 0.03em; }
.band-head > a { font-size: var(--fs-s); font-weight: 650; }
/* строчные ссылки-«хвосты» вне текста: невидимая зона касания не меньше 44 px */
.band-head > a, .entry-foot a, .pp-all dd a { position: relative; }
.band-head > a::after, .entry-foot a::after, .pp-all dd a::after { content: ""; position: absolute; inset: -12px -6px; }
.band-sub { margin: 12px 0 0; color: var(--ink-2); font-size: var(--fs-s); max-width: 60ch; }

.kicker { display: inline-block; font-size: 1.0625rem; line-height: 1.1; letter-spacing: 0.07em; color: var(--ink-2); text-decoration: none; }
a.kicker { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.meta { margin: 8px 0 0; font-size: var(--fs-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.meta > * + *::before { content: "·"; margin: 0 8px; color: var(--rule-2); }

.photo { display: block; overflow: hidden; background: var(--paper-2); aspect-ratio: 4 / 3; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
a.photo { text-decoration: none; }
.photo-empty { display: block; width: 100%; height: 100%; background-image: var(--mm); background-size: var(--mm-size); }

.story-title { font-weight: 650; line-height: 1.28; text-decoration: none; color: var(--ink); }
a.story-title { text-decoration: none; }

.rows { list-style: none; margin: 0; padding: 0; }
.row { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--rule); align-items: start; }
.row .kicker { margin-bottom: 4px; font-size: 0.9375rem; }
.row .story-title { display: block; font-size: var(--fs-m); }
.row .ex { margin: 8px 0 0; color: var(--ink-2); font-size: var(--fs-s); line-height: 1.5; }
@media (max-width: 699px) { .term-list .ex { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; } }
@media (min-width: 700px) { .row { grid-template-columns: 136px minmax(0, 1fr); gap: 20px; } }
@media (min-width: 900px) { .rows.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; } }

/* ---------- главная ---------- */
.intro { border-bottom: 1px solid var(--rule); background-color: var(--paper); background-image: var(--mm); background-size: var(--mm-size); background-position: -1px -1px; }
.intro-grid { display: grid; gap: 28px; padding-block: 32px 40px; }
.intro h1 { margin: 0; font-size: clamp(2.125rem, 1.4rem + 2.6vw, 3.375rem); line-height: 1.08; font-weight: 750; letter-spacing: -0.012em; max-width: 16ch; }
.intro-lead { margin: 16px 0 0; font-size: var(--fs-l); line-height: 1.4; color: var(--ink-2); max-width: 34ch; }
.abit { background: var(--paper); border: 2px solid var(--ink); align-self: start; }
.abit .label { margin: 0; padding: 8px 16px; background: var(--pencil); border-bottom: 2px solid var(--ink); font-size: 1.375rem; line-height: 1.1; letter-spacing: 0.07em; }
.abit ul { list-style: none; margin: 0; padding: 0; }
.abit li + li { border-top: 1px solid var(--rule); }
.abit ul a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; padding: 16px 16px; min-height: 56px; text-decoration: none; }
.abit .t { font-weight: 650; line-height: 1.25; }
.abit .d { grid-column: 1; font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.4; margin-top: 2px; }
.abit .arr { grid-row: 1 / span 2; grid-column: 2; width: 20px; height: 20px; color: var(--ink-3); transition: transform 160ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .abit ul a:hover { background: var(--pencil-wash); } .abit ul a:hover .arr { transform: translateX(3px); color: var(--ink); } }
.abit .official { margin: 0; padding: 12px 16px 16px; border-top: 2px solid var(--ink); font-size: var(--fs-xs); line-height: 1.45; color: var(--ink-2); }
@media (min-width: 900px) {
  .intro-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; padding-block: 56px 64px; align-items: start; }
}

.spec-index { list-style: none; margin: 8px 0 0; padding: 0; columns: 1; column-gap: 40px; }
.spec-index li { break-inside: avoid; border-bottom: 1px solid var(--rule); }
.spec-index a { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 12px 0; min-height: 48px; text-decoration: none; }
.spec-index .code { font: 600 1.375rem/1 var(--font-display); letter-spacing: 0.03em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.spec-index .name { font-weight: 650; line-height: 1.3; }
@media (hover: hover) and (pointer: fine) { .spec-index a:hover { background: none; } .spec-index a:hover .name { background: var(--pencil); } .spec-index a:hover .code { color: var(--ink); } }
@media (min-width: 700px) { .spec-index { columns: 2; } }
@media (min-width: 1100px) { .spec-index { columns: 3; } }

.latest { display: grid; gap: 8px; margin-top: 8px; }
.lead-card { padding-top: 16px; }
.lead-card .photo { aspect-ratio: 3 / 2; }
.lead-card .kicker { margin-top: 8px; }
.lead-card .story-title { display: block; margin-top: 8px; font-size: var(--fs-l); line-height: 1.22; }
.lead-card .ex { margin: 12px 0 0; color: var(--ink-2); max-width: 60ch; }
@media (min-width: 900px) {
  .latest { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; }
  .latest .rows .row:first-child { padding-top: 16px; }
  .lead-card .photo { aspect-ratio: 4 / 3; }
}

.trio { display: grid; gap: 8px 40px; }
.trio .band { padding-top: 48px; }
.list-plain { list-style: none; margin: 0; padding: 0; }
.list-plain li { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.list-plain .story-title { display: block; font-size: var(--fs-s); line-height: 1.35; }
@media (min-width: 900px) { .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- крошки ---------- */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 2px 0; list-style: none; margin: 0; padding: 16px 0 0; font-size: var(--fs-xs); color: var(--ink-3); }
.crumbs li { display: flex; min-width: 0; }
.crumbs li + li::before { content: "›"; margin: 0 8px; color: var(--rule-2); }
.crumbs a { color: var(--ink-2); text-decoration-thickness: 1px; text-decoration-color: var(--rule-2); }
.crumbs [aria-current] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 32ch; }
@media (max-width: 699px) { .crumbs li:last-child { flex: 1 1 0; } .crumbs [aria-current] { max-width: none; } }

/* ---------- запись и страница ---------- */
.entry-head { padding-top: 20px; max-width: 54rem; }
.entry-head .kicker { margin-bottom: 2px; }
.entry-head h1 { margin: 0; font-size: clamp(2.125rem, 1.45rem + 2.3vw, 3rem); line-height: 1.12; font-weight: 750; letter-spacing: -0.012em; }
.entry-head .meta { margin-top: 16px; font-size: var(--fs-s); }

.entry-cover { margin: 28px 0 0; max-width: 54rem; }
.entry-cover .photo { aspect-ratio: 3 / 2; }
@media (min-width: 700px) { .entry-cover .photo { aspect-ratio: 16 / 9; } }

.entry-grid { display: grid; gap: 32px; margin-top: 32px; }
.entry-main { min-width: 0; max-width: 54rem; }
.entry-aside { display: none; }
@media (min-width: 1100px) {
  .entry-grid { grid-template-columns: minmax(0, 54rem) 17rem; justify-content: space-between; gap: 48px; }
  .entry-aside { display: block; }
  .toc-inline { display: none; }
}

.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { counter-increment: toc; border-top: 1px solid var(--rule); }
.toc a { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); padding: 8px 0; font-size: var(--fs-xs); line-height: 1.4; text-decoration: none; color: var(--ink-2); }
.toc a::before { content: counter(toc, decimal-leading-zero); font: 600 1rem/1.4 var(--font-display); color: var(--ink-3); letter-spacing: 0.04em; }
.toc-side { position: sticky; top: 24px; }
.toc-h { margin: 0 0 8px; font-size: 1.0625rem; color: var(--ink-2); }
.toc-inline { margin: 0 0 28px; border: 1px solid var(--rule-2); background: var(--paper); }
.toc-inline summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 16px; cursor: pointer; font-weight: 650; font-size: var(--fs-s); list-style: none; }
.toc-inline summary::-webkit-details-marker { display: none; }
.toc-inline summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: translateY(-3px) rotate(45deg); flex: none; }
.toc-inline[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.toc-inline ol { padding: 0 16px 8px; }
.toc-inline a { font-size: var(--fs-s); padding: 12px 0; }

.prose { max-width: var(--measure); hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; }
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 1em; }
.prose h2 { margin: 1.9em 0 0.6em; font-size: var(--fs-xl); line-height: 1.18; font-weight: 750; letter-spacing: -0.008em; hyphens: manual; scroll-margin-top: 16px; }
.prose h3 { margin: 1.6em 0 0.5em; font-size: var(--fs-l); line-height: 1.25; font-weight: 750; hyphens: manual; }
@media (max-width: 699px) { .prose h2 { font-size: 1.625rem; } .prose h3 { font-size: 1.3125rem; } }
.prose ul, .prose ol { margin: 0 0 1.1em; padding-left: 1.3em; }
.prose li { margin: 0.35em 0; padding-left: 0.2em; }
.prose ul > li::marker { color: var(--pencil-deep); font-size: 1.1em; }
.prose ol > li::marker { font-weight: 650; color: var(--ink-2); }
.prose strong, .prose b { font-weight: 750; }
.prose figure, .prose .wp-img { margin: 1.6em 0; }
.prose img { margin: 1.6em 0; }
.prose hr { border: 0; border-top: 1px solid var(--rule-2); margin: 2em 0; }
.prose blockquote { margin: 1.6em 0; padding: 16px 20px; background: var(--paper-2); border-top: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); }
.table { margin: 1.6em 0; overflow-x: auto; border: 1px solid var(--rule-2);
  /* тень у края, пока таблицу можно прокрутить вбок; исчезает у края прокрутки */
  background:
    linear-gradient(to right, var(--paper) 40%, transparent) left / 28px 100% no-repeat local,
    linear-gradient(to left, var(--paper) 40%, transparent) right / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--edge-shade), transparent) left / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--edge-shade), transparent) right / 12px 100% no-repeat scroll,
    var(--paper); }
.table table { width: 100%; border-collapse: collapse; font-size: var(--fs-s); line-height: 1.4; font-variant-numeric: tabular-nums; hyphens: manual; }
.table th, .table td { padding: 12px 16px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.table thead th { background: var(--paper-2); font-weight: 750; border-bottom: 2px solid var(--ink); }
.table tr:last-child td { border-bottom: 0; }
.table td + td, .table th + th { border-left: 1px solid var(--rule); }

.entry-foot { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: var(--fs-s); color: var(--ink-2); }

.adjacent { display: grid; gap: 0; margin-top: 40px; border-top: 2px solid var(--ink); }
.adjacent a { display: block; padding: 16px 0; text-decoration: none; border-bottom: 1px solid var(--rule); }
.adjacent .label { display: block; font-size: 0.9375rem; color: var(--ink-3); margin-bottom: 2px; }
.adjacent .t { display: block; font-weight: 650; line-height: 1.3; }
@media (min-width: 700px) {
  .adjacent { grid-template-columns: 1fr 1fr; gap: 32px; }
  .adjacent a:last-child:not(:first-child) { text-align: right; }
}
@media (hover: hover) and (pointer: fine) { .adjacent a:hover { background: none; } .adjacent a:hover .t { background: var(--pencil); } }

.more { padding-top: 64px; }
.more .rows { margin-top: 8px; }

/* паспорт специальности: основная надпись чертежа */
.passport {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "code code" "cls pub" "adm adm" "all all";
  gap: 1px; margin: 24px 0 0; max-width: 54rem; background: var(--ink); border: 2px solid var(--ink);
}
.passport > div { background: var(--paper); padding: 12px 16px 12px; min-width: 0; }
.passport dt { font-size: 0.9375rem; line-height: 1; color: var(--ink-3); letter-spacing: 0.09em; }
.passport dd { margin: 8px 0 0; line-height: 1.3; }
.pp-code { grid-area: code; background-color: var(--paper); background-image: var(--mm); background-size: var(--mm-size); background-position: -1px -1px; }
.pp-code dd { font: 600 var(--fs-code)/0.92 var(--font-display); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; margin-top: 8px; white-space: nowrap; }
.pp-name { grid-area: name; }
.pp-name dd { font-weight: 650; font-size: var(--fs-m); }
.pp-cls { grid-area: cls; } .pp-pub { grid-area: pub; } .pp-adm { grid-area: adm; } .pp-all { grid-area: all; }
.pp-cls dd, .pp-pub dd, .pp-adm dd, .pp-all dd { font-size: var(--fs-s); }
.pp-all dd a { font-weight: 650; }
.pp-pub dd { font-variant-numeric: tabular-nums; }
.pp-adm dd { color: var(--ink-2); }
@media (min-width: 760px) {
  .passport { grid-template-columns: 16.5rem minmax(0, 1.4fr) minmax(0, 1fr); grid-template-areas: "code cls pub" "code adm all"; }
  .pp-code dd { font-size: 3.75rem; }
  .pp-code { display: flex; flex-direction: column; justify-content: space-between; }
}

/* рекламные места: ad($slot) ядра (top — .ad-meta, в тексте — .ad-in); высота отведена заранее, чтобы текст не прыгал */
.ad { margin: 32px 0; max-width: var(--measure); }
.ad-label { margin: 0 0 8px; font-size: 0.9375rem; line-height: 1; color: var(--ink-3); letter-spacing: 0.1em; }
.ad-box { display: block; min-height: 250px; background: var(--paper-2); text-align: center; }
.ad-box > ins { display: block; width: 100%; }
.ad-meta { margin: 24px 0 0; max-width: 54rem; }
@media (min-width: 700px) { .ad-meta .ad-box { min-height: 120px; } }
.ad-list > .ad { margin: 16px 0; max-width: 62rem; }
.prose .ad { margin: 1.8em 0; }
/* скрипт рекламы не загрузился (блокировщик) или место не заполнено — рамку не показываем */
.ads-failed .ad, .ad:has(ins[data-ad-status="unfilled"]) { display: none; }

/* ---------- рубрика ---------- */
.term-head { padding-top: 20px; }
.term-head h1 { margin: 0; font: 600 clamp(3.25rem, 2.2rem + 4.4vw, 5.5rem)/0.92 var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; }
.term-count { margin: 12px 0 0; color: var(--ink-2); font-size: var(--fs-s); font-variant-numeric: tabular-nums; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0 0 20px; list-style: none; border-bottom: 2px solid var(--ink); }
.chips a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--rule-2); border-radius: 999px; text-decoration: none; font-weight: 650; font-size: var(--fs-s);
  transition: transform 140ms var(--ease), background-color 160ms var(--ease);
}
.chips a:active { transform: scale(0.97); }
.chips a[aria-current] { background: var(--pencil); border-color: var(--pencil-deep); }
.chips .n { color: var(--ink-3); font-variant-numeric: tabular-nums; font-weight: 400; }
.chips a[aria-current] .n { color: var(--ink-2); }
.term-list .row { padding: 20px 0; }
@media (min-width: 700px) { .term-list .row { grid-template-columns: 220px minmax(0, 1fr); gap: 28px; } .term-list .story-title { font-size: var(--fs-l); line-height: 1.24; } }
@media (min-width: 1100px) { .term-list { max-width: 62rem; } .term-list .row { grid-template-columns: 260px minmax(0, 1fr); } }

.pager { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 32px 0 0; padding: 0; }
.pager a, .pager span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 46px; padding: 0 16px;
  border: 1px solid var(--rule-2); text-decoration: none; font-weight: 650; font-variant-numeric: tabular-nums;
  transition: transform 140ms var(--ease), background-color 160ms var(--ease);
}
.pager a:active { transform: scale(0.97); }
.pager [aria-current] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.pager .gap { border-color: transparent; min-width: 24px; padding: 0; }

/* ---------- о сайте, 404 ---------- */
.lede { font-size: var(--fs-l); line-height: 1.45; color: var(--ink); margin: 0 0 1.2em; }
.oops { padding-top: 32px; max-width: 46rem; }
.oops .passport { grid-template-columns: 9rem minmax(0, 1fr); grid-template-areas: "code name"; margin: 0 0 28px; }
.oops .pp-code dd { font-size: 3.25rem; }
.oops h1 { margin: 0; font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); line-height: 1.1; font-weight: 750; }
.oops p { color: var(--ink-2); }
.find { display: flex; gap: 8px; margin: 24px 0 0; max-width: 34rem; }
.find input { flex: 1; min-width: 0; height: 50px; padding: 0 16px; border: 1px solid var(--rule-2); border-radius: 2px; background: var(--paper); font: inherit; color: var(--ink); }
.find button {
  height: 50px; padding: 0 24px; border: 2px solid var(--ink); border-radius: 2px; background: var(--ink); color: var(--paper);
  font: inherit; font-weight: 650; cursor: pointer; transition: transform 140ms var(--ease), background-color 160ms var(--ease);
}
.find button:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .find button:hover { background: var(--pencil); color: var(--ink); } }
.oops-links { display: flex; flex-wrap: wrap; gap: 8px 24px; list-style: none; margin: 28px 0 0; padding: 0; font-weight: 650; }
.oops-links a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- подвал ---------- */
.site-foot { margin-top: 96px; background: var(--ink); color: var(--on-ink); font-size: var(--fs-s); line-height: 1.5; }
.site-foot a { text-decoration-color: var(--on-ink-line); }
@media (hover: hover) and (pointer: fine) { .site-foot a:hover { background: var(--pencil); color: var(--ink); } }
.foot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; padding-block: 48px 32px; }
.foot-about { grid-column: 1 / -1; }
.foot-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.foot-brand .brand-tag { color: var(--on-ink-2); }
.foot-disclaimer { margin: 16px 0 0; color: var(--on-ink); max-width: 46ch; }
.site-foot h2 { margin: 0 0 12px; font-size: 1.125rem; line-height: 1; color: var(--on-ink-2); letter-spacing: 0.1em; }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 16px 28px; border-top: 1px solid var(--on-ink-rule); color: var(--on-ink-2); font-size: var(--fs-xs); }
@media (min-width: 700px) { .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .foot-about { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .foot-grid { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 40px; } .foot-about { grid-column: auto; } }

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