/* Кривая охлаждения – «тетрадь литейщика», сдержанная версия.
   Шрифты единые: Source Serif 4 – заголовки и текст, Inter – интерфейс;
   рукописный Caveat – только внутри рисунка в шапке. От наброска остались
   миллиметровка, лист с карандашной кривой, красные подчёркивания и обводки,
   стикеры тем и скотч; карточки, кнопки и врезки – ровные.
   Цвета только через переменные; тёмная тема – доска. Цвет рубрики – --tc. */

@view-transition { navigation: auto; }

:root {
  --bg: #fbf8f1;
  --sheet: #ffffff;
  --paper: #f4f0e6;
  --ink: #1f2228;
  --ink-2: #3f434b;
  --muted: #6c7078;
  --line: #e2dccf;
  --line-strong: #c9c1b0;
  --pencil: #2e3035;
  --accent: #d4541c;
  --accent-ink: #b4410e;
  --marker: #ffe17a;
  --sticky: #fff3b4;
  --grid-minor: rgba(58, 104, 168, .06);
  --grid-major: rgba(58, 104, 168, .12);
  --rule: rgba(58, 104, 168, .16);
  --margin-line: rgba(212, 84, 28, .4);
  --focus: #1f6fd1;
  --tc: var(--accent);
  --serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --hand: "Caveat", "Segoe Print", cursive;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --radius: 12px;
  --shadow: 0 1px 2px rgba(31, 34, 40, .05), 0 6px 20px rgba(31, 34, 40, .06);
  --shadow-up: 0 2px 4px rgba(31, 34, 40, .06), 0 16px 36px rgba(31, 34, 40, .12);
  --tape: rgba(228, 216, 178, .78);
  --squiggle: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%2012'%20preserveAspectRatio='none'%3E%3Cpath%20d='M2%207%20C%2030%203,%2052%2010,%2080%206%20S%20130%203,%20158%207%20S%20186%209,%20198%205'%20fill='none'%20stroke='%23d4541c'%20stroke-width='2.4'%20stroke-linecap='round'%20vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .37 0 0 0 0 .28 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1f2528;
    --sheet: #262d31;
    --paper: #2b3337;
    --ink: #efece4;
    --ink-2: #d2cfc6;
    --muted: #a3a59f;
    --line: #394247;
    --line-strong: #4c565c;
    --pencil: #e9e5da;
    --accent: #ff8a55;
    --accent-ink: #ffab80;
    --marker: rgba(255, 225, 122, .3);
    --sticky: #3b3a28;
    --grid-minor: rgba(255, 255, 255, .035);
    --grid-major: rgba(255, 255, 255, .07);
    --rule: rgba(255, 255, 255, .08);
    --margin-line: rgba(255, 138, 85, .38);
    --focus: #7fb2ff;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .3);
    --shadow-up: 0 2px 4px rgba(0, 0, 0, .35), 0 16px 36px rgba(0, 0, 0, .45);
    --tape: rgba(220, 210, 175, .26);
    --grain: none;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 150px; }
body {
  margin: 0;
  background: var(--grain), var(--bg);
  color: var(--ink);
  font: 16.5px/1.6 var(--sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--marker); color: var(--ink); }
.wrap { max-width: 80rem; margin: 0 auto; padding: 0 16px; }
.wrap-wide { max-width: 86rem; margin: 0 auto; padding: 0 16px; }
.wrap-narrow { max-width: 50rem; margin: 0 auto; padding: 0 16px; }
@media (min-width: 760px) { .wrap, .wrap-wide, .wrap-narrow { padding: 0 32px; } }
.skip { position: absolute; left: -999px; top: 8px; background: var(--bg); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.block { margin-top: 72px; }
main { overflow-x: clip; }
svg { overflow: visible; }

/* скотч – полупрозрачная полоска с рваными краями */
.tape { position: absolute; width: 86px; height: 24px; background: var(--tape); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); z-index: 2;
  clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 4% 96%, 0 50%); }

/* ---------- полоса прочтения ---------- */

.progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; pointer-events: none; }
.progress span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--accent); }
body:not(.kind-story) .progress { display: none; }

/* ---------- шапка ---------- */

.masthead { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); transition: box-shadow .3s; }
.masthead.is-scrolled { box-shadow: 0 6px 20px rgba(31, 34, 40, .06); }
.mast-row { display: flex; align-items: center; gap: 20px; padding-top: 12px; padding-bottom: 8px; transition: padding .3s var(--ease); }
.masthead.is-scrolled .mast-row { padding-top: 7px; padding-bottom: 4px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); min-width: 0; margin-right: auto; }
.logo { width: 34px; height: 34px; flex: none; transition: transform .5s var(--ease); }
.brand:hover .logo { transform: rotate(-8deg) scale(1.06); }
.logo-axes { fill: none; stroke: var(--pencil); stroke-width: 1.7; stroke-linecap: round; opacity: .7; }
.logo-curve { fill: none; stroke: var(--accent); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 0; }
.brand:hover .logo-curve { animation: logo-draw 1s var(--ease); }
@keyframes logo-draw { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }
.wordmark { font: 700 clamp(1.25rem, 1.05rem + .7vw, 1.55rem)/1.1 var(--serif); letter-spacing: -.01em; }

.mast-nav { display: flex; gap: 4px; }
.mast-nav a { position: relative; font: 500 .92rem/1 var(--sans); color: var(--ink-2); text-decoration: none; padding: 9px 10px 11px; border-radius: 8px; }
.mast-nav a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 7px; background: var(--squiggle) no-repeat 0 50% / 0% 7px; transition: background-size .45s var(--ease); }
.mast-nav a:hover { color: var(--ink); background: var(--paper); }
.mast-nav a:hover::after, .mast-nav a[aria-current="page"]::after { background-size: 100% 7px; }
.mast-nav a[aria-current="page"] { color: var(--ink); }
@media (max-width: 900px) { .mast-nav { display: none; } }

.mast-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.search-form { display: flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 10px; padding: 1px 4px 1px 12px; background: var(--sheet); transition: border-color .2s, box-shadow .2s; }
.search-form:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.search-form input { font: inherit; font-size: .9rem; border: 0; background: transparent; color: var(--ink); width: 12rem; padding: 7px 0; outline: none; transition: width .35s var(--ease); }
.search-form button { border: 0; background: transparent; color: var(--ink-2); width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer; border-radius: 8px; }
.search-form svg, .btn svg, .read-more svg, .section-link svg, .topic-go svg, .method-note svg, .tm-all svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lang-switch { font: 700 .8rem/1 var(--sans); letter-spacing: .06em; text-decoration: none; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 10px; padding: 10px 11px; background: var(--sheet); transition: background .2s, border-color .2s; }
.lang-switch:hover { background: var(--marker); border-color: var(--pencil); }
@media (max-width: 680px) {
  .search-form input { width: 0; padding: 0; }
  .search-form:focus-within input { width: 8.5rem; padding: 7px 0; }
  .search-form { padding-left: 4px; }
}

/* меню тем: значок, название, число материалов, подсказка, панель */
.topic-bar { border-top: 1px solid var(--line); }
.topic-menu { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.tm-item { position: relative; }
.tm-link { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 8px 12px; border-radius: 10px; text-decoration: none; color: var(--ink); transition: background .2s; }
.tm-link::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 2px; height: 8px; background: var(--squiggle) no-repeat 0 50% / 0% 8px; transition: background-size .5s var(--ease); }
.tm-item:hover .tm-link, .tm-link:focus-visible { background: color-mix(in srgb, var(--tc) 8%, var(--sheet)); }
.tm-item:hover .tm-link::after, .tm-link[aria-current="page"]::after { background-size: 100% 8px; }
.tm-icon { flex: none; width: 36px; height: 36px; padding: 4px; border-radius: 9px; background: color-mix(in srgb, var(--tc) 13%, var(--sheet)); color: var(--tc); transition: transform .4s var(--ease); }
.tm-item:hover .tm-icon { transform: rotate(-6deg) scale(1.06); }
.tm-icon svg { width: 100%; height: 100%; }
.tm-text { display: flex; flex-direction: column; min-width: 0; }
.tm-name { display: flex; align-items: center; gap: 6px; font: 650 .93rem/1.2 var(--sans); white-space: nowrap; }
.tm-count { font: 700 .68rem/1 var(--sans); color: var(--tc); background: color-mix(in srgb, var(--tc) 14%, transparent); border-radius: 999px; padding: 3px 6px; }
.tm-hint { font: 400 .76rem/1.3 var(--sans); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .25s, max-height .3s; max-height: 2em; }
.masthead.is-scrolled .tm-hint { opacity: 0; max-height: 0; }
.masthead.is-scrolled .tm-link { padding-top: 6px; padding-bottom: 9px; }
.tm-panel { position: absolute; top: calc(100% + 4px); left: 0; width: 22rem; padding: 16px 18px 14px; background: var(--sheet); border: 1px solid var(--line); border-top: 3px solid var(--tc); border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow-up); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .25s var(--ease), visibility 0s .25s; z-index: 5; }
.tm-item:nth-last-child(-n + 2) .tm-panel { left: auto; right: 0; }
.tm-item:hover .tm-panel, .tm-item:focus-within .tm-panel { opacity: 1; visibility: visible; transform: none; transition-delay: .08s, .08s, 0s; }
.tm-title { font: 700 1.05rem/1.25 var(--serif); margin: 0 0 6px; }
.tm-desc { font: 400 .86rem/1.5 var(--sans); color: var(--ink-2); margin: 0 0 10px; }
.tm-list { list-style: none; margin: 0 0 10px; padding: 10px 0 0; border-top: 1px dashed var(--line-strong); }
.tm-list li { margin: 0 0 8px; }
.tm-list a { font: 500 .86rem/1.4 var(--serif); color: var(--ink); text-decoration: none; display: block; }
.tm-list a:hover { color: var(--accent-ink); }
.tm-all { display: inline-flex; align-items: center; gap: 6px; font: 600 .82rem var(--sans); color: var(--accent-ink); text-decoration: none; }
@media (max-width: 1100px) {
  .topic-menu { display: flex; overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .topic-menu::-webkit-scrollbar { display: none; }
  .tm-item { flex: none; }
  .tm-panel { display: none; }
}
@media (max-width: 600px) { .tm-hint { display: none; } .tm-icon { width: 30px; height: 30px; } }
/* на узком экране верхние ссылки (Патенты, Статьи…) уходят в конец ленты тем */
.tm-more { display: none; }
@media (max-width: 900px) {
  .tm-more { display: flex; flex: none; align-items: center; }
  .tm-more a { font: 500 .9rem var(--sans); color: var(--ink-2); text-decoration: none; padding: 10px 10px; white-space: nowrap; }
  .tm-more:first-of-type { border-left: 1px solid var(--line); margin-left: 6px; padding-left: 6px; }
}

/* ---------- общие элементы ---------- */

.kicker { margin: 0 0 10px; font: 650 .8rem/1.2 var(--sans); color: var(--tc); display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.kicker a { text-decoration: none; color: inherit; padding: 1px 6px; margin-left: -6px; border-radius: 3px;
  background: linear-gradient(104deg, transparent .9%, color-mix(in srgb, var(--tc) 18%, transparent) 2.4%, color-mix(in srgb, var(--tc) 14%, transparent) 5.8%, color-mix(in srgb, var(--tc) 16%, transparent) 93%, color-mix(in srgb, var(--tc) 20%, transparent) 96%, transparent 98%); }
.kicker-type { color: var(--muted); font-weight: 500; }
.kicker-type::before { content: "·"; margin-right: 8px; }
.eyebrow { font: 700 .78rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; margin: 0 0 16px; color: var(--accent); }
.dek { font-family: var(--serif); font-style: italic; color: var(--ink-2); font-size: 1.16rem; line-height: 1.5; margin: 0 0 16px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.hand-title { position: relative; display: inline-block; font: 700 clamp(1.6rem, 1.3rem + 1vw, 2.1rem)/1.15 var(--serif); letter-spacing: -.015em; color: var(--ink); margin: 0; padding-bottom: 12px; }
.hand-title .mark-under-svg { position: absolute; left: -2%; bottom: -2px; width: 104%; height: 12px; }
.section-link, .read-more { display: inline-flex; align-items: center; gap: 8px; font: 600 .92rem var(--sans); text-decoration: none; color: var(--ink); }
.section-link svg, .read-more svg { transition: transform .3s var(--ease); }
.section-link:hover svg, .read-more:hover svg { transform: translateX(5px); }

/* красные пометки карандашом: обводка и подчёркивание, рисуются на глазах */
.mark { position: relative; white-space: nowrap; }
.mark-svg { position: absolute; pointer-events: none; overflow: visible; }
.mark-circle-svg { left: -8%; top: -14%; width: 116%; height: 128%; }
.mark .mark-under-svg { left: -2%; bottom: -.3em; width: 104%; height: .4em; }
.mark-line { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.mark-line.sk-2 { stroke-width: 1.3; opacity: .45; }
.mark .mark-line { animation: draw .9s var(--ease) forwards; animation-delay: calc(1.1s + var(--m, 0) * .7s); }
.hand-title.is-in .mark-line, .reveal-all .hand-title .mark-line { animation: draw .8s .15s var(--ease) forwards; }

.btn { position: relative; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 600 .95rem/1 var(--sans); padding: 13px 20px; border: 1.5px solid var(--pencil); border-radius: 10px; cursor: pointer; background: var(--sheet); color: var(--ink); transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(31, 34, 40, .12); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn svg { transition: transform .3s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn-hot { background: var(--marker); color: var(--ink); }
.btn-dark { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-ghost { background: var(--sheet); }

/* ---------- появление при прокрутке ---------- */

.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--d, 0) * 80ms); }
.js .reveal.is-in, .reveal-all .reveal { opacity: 1; transform: none; }

/* ---------- шапка главной: миллиметровка и лист с наброском ---------- */

.hero, .page-head { position: relative; overflow: hidden; background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px), linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid-minor) 1px, transparent 1px), linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);
  background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px; background-position: -1px -1px; }
.hero::after, .page-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(transparent, var(--bg)); pointer-events: none; }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; padding-top: 52px; padding-bottom: 70px; align-items: center; }
@media (min-width: 980px) { .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 52px; padding-top: 68px; padding-bottom: 92px; } }
.hero-title { font-family: var(--serif); font-weight: 700; font-size: clamp(2.3rem, 1.4rem + 3.1vw, 3.9rem); line-height: 1.12; letter-spacing: -.02em; margin: 0 0 24px; text-wrap: balance; }
.hero-sub { font-family: var(--serif); font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.62; color: var(--ink-2); margin: 0 0 30px; max-width: 38rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 34px; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 12px 36px; margin: 0; padding-top: 20px; border-top: 1px dashed var(--line-strong); }
.hero-stats div { display: flex; flex-direction: column-reverse; align-items: flex-start; }
.hero-stats dt { font: 700 2.4rem/1 var(--serif); color: var(--accent); font-variant-numeric: tabular-nums; }
.hero-stats dd { margin: 0 0 4px; font: 500 .85rem/1.2 var(--sans); color: var(--muted); }
.hero-copy > * { animation: rise .9s var(--ease) both; }
.hero-copy > :nth-child(2) { animation-delay: .08s; } .hero-copy > :nth-child(3) { animation-delay: .16s; } .hero-copy > :nth-child(4) { animation-delay: .24s; } .hero-copy > :nth-child(5) { animation-delay: .32s; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes write { from { opacity: 1; clip-path: inset(-20% 100% -20% 0); } to { opacity: 1; clip-path: inset(-20% -5% -20% 0); } }
.hero-small .hero-grid { grid-template-columns: minmax(0, 1fr); padding-top: 80px; padding-bottom: 80px; }

.hero-art { min-width: 0; }
.sheet { position: relative; background: var(--sheet); padding: 18px 18px 12px; border-radius: 3px; transform: rotate(.9deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 14px 30px rgba(31, 34, 40, .08); animation: sheet-in 1s var(--ease) both; }
.sheet::before, .sheet::after { content: ""; position: absolute; top: -10px; width: 92px; height: 26px; background: var(--tape); clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 4% 96%, 0 50%); }
.sheet::before { left: 8%; transform: rotate(-6deg); } .sheet::after { right: 8%; transform: rotate(5deg); }
@keyframes sheet-in { from { opacity: 0; transform: rotate(4deg) translateY(30px); } to { opacity: 1; transform: rotate(.9deg); } }
.hero-sketch { width: 100%; height: auto; }
.sk-live { filter: url(#sk-wobble); }
.sk-line { fill: none; stroke: var(--pencil); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.1s var(--ease) forwards; animation-delay: var(--t, 0s); }
.hero-sketch g > .sk-line { animation-delay: inherit; }
.hero-sketch g { animation-delay: var(--t, 0s); }
.sk-line.sk-2 { stroke-width: 1.1; opacity: .45; }
.sk-curve-l { stroke: var(--accent); stroke-width: 3.4; animation-duration: 1.8s; }
.sk-curve-l.sk-2 { stroke-width: 1.6; }
.sk-hatch-l { stroke: var(--accent); stroke-width: 1; opacity: .28; animation-duration: 1.4s; }
.sk-hatch-l.sk-2 { opacity: .12; }
.sk-levels-l { opacity: .55; }
.sk-blade-l { stroke-width: 1.8; }
.sk-thin { stroke-width: 1.4; }
.sk-label { font: 700 24px var(--hand); fill: var(--ink); opacity: 0; animation: write .9s var(--ease) forwards; animation-delay: var(--t, 0s); }
.sk-small { font-size: 21px; } .sk-dim { fill: var(--muted); } .sk-hot { fill: var(--accent); }

/* ---------- главный материал ---------- */

.featured { margin-top: 56px; }
.featured .hand-title { margin-bottom: 26px; }
.featured-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; align-items: center; }
@media (min-width: 900px) { .featured-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; } }
.polaroid { position: relative; display: block; background: #fff; padding: 12px 12px 36px; box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 14px 30px rgba(31, 34, 40, .1); transform: rotate(-.8deg); transition: transform .6s var(--ease); }
.polaroid:hover { transform: rotate(0deg); }
.polaroid img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: contain; background: #fff; }
.polaroid .tape-l { top: -12px; left: -18px; transform: rotate(-38deg); }
.polaroid .tape-r { top: -12px; right: -18px; transform: rotate(38deg); }
.featured-title { font-family: var(--serif); font-weight: 700; font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.5rem); line-height: 1.12; letter-spacing: -.018em; margin: 0 0 16px; text-wrap: balance; }
.featured-title a, .card-title a { text-decoration: none; }
.featured-title span, .card-title span { background: var(--squiggle) no-repeat 0 100% / 0% 9px; padding-bottom: 5px; transition: background-size .6s var(--ease); }
.featured-title a:hover span, .card-title a:hover span, .card:hover .card-title span { background-size: 100% 9px; }
.featured .read-more { margin-top: 18px; color: var(--accent-ink); }

/* ---------- карточки: ровные листки ---------- */

.cards { display: grid; gap: 32px 28px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.cards + .cards { margin-top: 32px; }
.cards-1 { grid-template-columns: 1fr; }
.cards-2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); }
.card { position: relative; display: flex; flex-direction: column; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s var(--ease), opacity .8s var(--ease); }
.js .card.reveal.is-in:hover, .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-up); }
.card-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; border-bottom: 1px solid var(--line); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.card:hover .card-media img { transform: scale(1.04); }
.card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.card-title { font-family: var(--serif); font-weight: 700; font-size: 1.26rem; line-height: 1.24; letter-spacing: -.01em; margin: 0 0 10px; text-wrap: balance; }
.card-dek { font-family: var(--serif); color: var(--ink-2); font-size: 1rem; line-height: 1.55; margin: 0 0 14px; }
.card-meta { font: 500 .8rem/1.4 var(--sans); color: var(--muted); margin: auto 0 0; padding-top: 12px; border-top: 1px dashed var(--line); }
.card--big .card-title { font-size: 1.52rem; }
.card--big .card-media { aspect-ratio: 16 / 9; }
@media (min-width: 980px) {
  .card--wide { display: grid; grid-template-columns: 1.3fr 1fr; align-items: stretch; }
  .card--wide .card-media { aspect-ratio: auto; height: 100%; min-height: 18rem; border-bottom: 0; border-right: 1px solid var(--line); }
  .card--wide .card-body { justify-content: center; padding: 26px 28px; }
  .card--wide .card-title { font-size: 1.7rem; }
}

/* ---------- рубрики: стикеры на скотче ---------- */

.topic-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px 22px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); }
.topic-tile a { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 8px; height: 100%; padding: 28px 24px 20px; background: color-mix(in srgb, var(--tc) 12%, var(--sticky)); border-radius: 4px; text-decoration: none; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 10px 22px rgba(31, 34, 40, .07); transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.topic-tile a::after { content: ""; position: absolute; right: 0; bottom: 0; width: 24px; height: 24px; background: linear-gradient(135deg, color-mix(in srgb, var(--tc) 22%, var(--sticky)) 50%, var(--bg) 50%); }
.topic-tile a:hover { transform: translateY(-5px); box-shadow: 0 2px 4px rgba(0, 0, 0, .06), 0 18px 34px rgba(31, 34, 40, .12); }
.topic-tile .tape { top: -10px; left: 50%; margin-left: -43px; transform: rotate(-2deg); }
.topic-icon { width: 54px; height: 54px; color: var(--tc); }
.topic-icon svg, .page-icon svg { width: 100%; height: 100%; }
.topic-icon .sk-line, .page-icon .sk-line, .tm-icon .sk-line { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; stroke-width: 2.2; fill: none; stroke: var(--pencil); stroke-linecap: round; stroke-linejoin: round; }
.topic-icon .sk-tc, .page-icon .sk-tc, .tm-icon .sk-tc { stroke: currentColor; }
.topic-icon .sk-soft, .page-icon .sk-soft, .tm-icon .sk-soft { opacity: .5; }
.topic-icon .sk-2, .page-icon .sk-2, .tm-icon .sk-2 { opacity: .4; stroke-width: 1.2; }
.tm-icon .sk-line { stroke-width: 3; }
.topic-tile a:hover .topic-icon svg { animation: wobble .9s var(--ease); }
@keyframes wobble { 30% { transform: translateY(-4px) rotate(-6deg); } 60% { transform: translateY(1px) rotate(3deg); } }
.topic-name { font-family: var(--serif); font-weight: 700; font-size: 1.28rem; line-height: 1.2; margin-top: 4px; color: var(--ink); }
.topic-desc { color: var(--ink-2); font-size: .92rem; line-height: 1.55; }
.topic-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font: 600 .85rem var(--sans); color: var(--ink-2); }
.topic-go { display: grid; place-items: center; width: 36px; height: 36px; border: 1.5px solid var(--pencil); border-radius: 10px; color: var(--ink); background: var(--sheet); transition: transform .4s var(--ease), background .3s; }
.topic-tile a:hover .topic-go { transform: translateX(4px); background: var(--marker); }

/* ---------- метод: тетрадный лист с полями ---------- */

.method { position: relative; margin-top: 90px; padding: 40px clamp(20px, 4vw, 56px) 34px clamp(48px, 7vw, 96px); background-color: var(--sheet); border-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 14px 30px rgba(31, 34, 40, .07);
  background-image: linear-gradient(90deg, transparent clamp(30px, 4.8vw, 66px), var(--margin-line) clamp(30px, 4.8vw, 66px), var(--margin-line) calc(clamp(30px, 4.8vw, 66px) + 2px), transparent calc(clamp(30px, 4.8vw, 66px) + 2px)), repeating-linear-gradient(transparent 0 31px, var(--rule) 31px 32px); }
.method .hand-title { margin-bottom: 6px; }
.method-grid { display: grid; gap: 26px 34px; margin: 26px 0 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.circled { width: 54px; height: 54px; }
.circled .sk-line { fill: none; stroke: var(--accent); stroke-dasharray: none; stroke-dashoffset: 0; animation: none; stroke-width: 2.2; stroke-linecap: round; }
.circled .sk-2 { stroke-width: 1.2; opacity: .5; }
.circled text { font: 700 28px var(--serif); fill: var(--ink); }
.method-item h3 { font-family: var(--serif); font-size: 1.28rem; margin: 6px 0 6px; }
.method-item p { margin: 0; color: var(--ink-2); line-height: 1.6; }
.method-note { margin: 0; padding-top: 16px; font: 400 1rem/1.55 var(--serif); color: var(--ink-2); }
.method-note a { color: var(--accent-ink); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-family: var(--sans); font-weight: 600; font-size: .92rem; }

/* ---------- шапки разделов ---------- */

.page-head-inner { position: relative; z-index: 1; display: flex; gap: 26px; align-items: center; padding-top: 50px; padding-bottom: 48px; }
.page-icon { flex: none; width: 92px; height: 92px; padding: 14px; background: color-mix(in srgb, var(--tc, var(--accent)) 13%, var(--sticky)); color: var(--tc); border-radius: 6px; box-shadow: 0 10px 22px rgba(31, 34, 40, .08); animation: rise .8s var(--ease) both; }
.page-head .eyebrow { color: var(--tc, var(--accent)); margin-bottom: 8px; }
.page-title { font-family: var(--serif); font-weight: 700; font-size: clamp(2.1rem, 1.4rem + 2.5vw, 3.2rem); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 12px; animation: rise .8s .05s var(--ease) both; }
.page-dek { font-family: var(--serif); font-style: italic; color: var(--ink-2); font-size: 1.15rem; margin: 0; max-width: 46rem; animation: rise .8s .12s var(--ease) both; }
@media (max-width: 600px) { .page-icon { width: 68px; height: 68px; padding: 10px; } .page-head-inner { align-items: flex-start; } }
.empty { color: var(--muted); }
.tag-group h2 { font: 700 1.3rem var(--serif); margin: 0 0 14px; }
.tag-group + .tag-group { margin-top: 34px; }

/* ---------- материал ---------- */

.story-head { max-width: 60rem; text-align: center; padding-top: 50px; padding-bottom: 30px; }
.story-head > * { animation: rise .9s var(--ease) both; }
.story-head > :nth-child(2) { animation-delay: .06s; } .story-head > :nth-child(3) { animation-delay: .12s; } .story-head > :nth-child(4) { animation-delay: .18s; }
.story-head .kicker { justify-content: center; font-size: .88rem; }
.story-title { font-family: var(--serif); font-weight: 700; font-size: clamp(2.1rem, 1.25rem + 3.1vw, 3.7rem); line-height: 1.08; letter-spacing: -.022em; margin: 0 0 20px; text-wrap: balance; }
.story-head .dek { font-size: clamp(1.12rem, 1rem + .5vw, 1.34rem); max-width: 46rem; margin: 0 auto 22px; }
.story-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; font: 500 .82rem/1 var(--sans); color: var(--ink-2); }
.story-meta > * { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--sheet); text-decoration: none; }
.story-meta a:hover { border-color: var(--pencil); }
.story-meta .meta-type { background: var(--marker); border-color: var(--pencil); color: var(--ink); font-weight: 650; }

.story-cover { margin-bottom: 48px; }
.fig { margin: 0; }
.fig-frame { position: relative; display: block; width: 100%; padding: 10px; border: 1px solid var(--line); background: #fff; border-radius: 6px; cursor: zoom-in; box-shadow: var(--shadow); transition: box-shadow .4s var(--ease); }
.fig-frame::before { content: ""; position: absolute; top: -11px; left: 50%; margin-left: -40px; width: 80px; height: 22px; background: var(--tape); clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 4% 96%, 0 50%); transform: rotate(-2deg); z-index: 2; }
.fig-frame:hover { box-shadow: var(--shadow-up); }
.fig-frame img { margin: 0 auto; width: 100%; }
.fig-zoom { position: absolute; right: 16px; bottom: 16px; display: grid; place-items: center; width: 42px; height: 42px; border: 1.5px solid #2e3035; border-radius: 10px; background: #ffe17a; color: #1f2228; opacity: 0; transform: scale(.85); transition: opacity .3s, transform .35s var(--ease); }
.fig-zoom svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fig-frame:hover .fig-zoom, .fig-frame:focus-visible .fig-zoom { opacity: 1; transform: none; }
@media (hover: none) { .fig-zoom { opacity: .95; transform: none; } }
.fig-cover .fig-frame img { max-height: 80vh; object-fit: contain; }
.fig figcaption { font: .87rem/1.55 var(--sans); color: var(--muted); margin-top: 12px; display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: space-between; }
.fig .cap { color: var(--ink-2); max-width: 52rem; flex: 1 1 24rem; }
.fig-num { font-weight: 700; color: var(--accent-ink); }
.fig .credit { font-size: .74rem; align-self: flex-end; }

.story-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 48px; }
@media (min-width: 1180px) { .story-layout { grid-template-columns: 15rem minmax(0, 44rem) 1fr; } .story-body { grid-column: 2; } }
.story-body, .story-aside { min-width: 0; }
.story-aside { display: none; }
@media (min-width: 1180px) { .story-aside { display: block; grid-column: 1; grid-row: 1; } }
.toc { position: sticky; top: 160px; padding: 16px 16px 10px; background: color-mix(in srgb, var(--tc) 7%, var(--sheet)); border: 1px solid var(--line); border-radius: var(--radius); }
.toc-title { font: 700 .74rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a { position: relative; display: block; padding: 6px 0 6px 24px; font: 500 .88rem/1.35 var(--sans); color: var(--ink-2); text-decoration: none; transition: color .25s; }
.toc a::before { content: counter(toc) "."; position: absolute; left: 0; top: 6px; font: 600 .82rem var(--sans); color: var(--muted); }
.toc a:hover { color: var(--ink); }
.toc a.is-active { color: var(--ink); font-weight: 650; background: var(--squiggle) no-repeat 24px 100% / calc(100% - 24px) 6px; }
.toc a.is-active::before { color: var(--tc); }
.toc .toc-source a::before { content: "↓"; }

.prose { width: 100%; max-width: 44rem; margin: 0 auto; padding: 0 16px; font-family: var(--serif); font-size: 1.2rem; line-height: 1.72; counter-reset: sec; }
@media (min-width: 760px) { .prose { padding: 0; } }
@media (max-width: 600px) { .prose { font-size: 1.1rem; } }
.prose > p { margin: 0 0 1.1em; }
.prose > p:first-of-type::first-letter { float: left; font: 700 3.9em/.86 var(--serif); margin: .06em .1em 0 0; color: var(--tc); }
.prose a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose h2 { counter-increment: sec; font-family: var(--serif); font-weight: 700; font-size: 1.62rem; line-height: 1.22; margin: 2.1em 0 .6em; letter-spacing: -.012em; padding-bottom: 10px; background: var(--squiggle) no-repeat 0 100% / 4.5rem 8px; }
.prose h2::before { content: "§ " counter(sec); display: block; font: 700 .78rem/1 var(--sans); letter-spacing: .1em; color: var(--tc); margin-bottom: 8px; }
.prose ul { padding-left: 1.2em; margin: 0 0 1.1em; }
.prose li { margin: .4em 0; }
.prose li::marker { color: var(--tc); }
.prose strong { font-weight: 700; }
.prose code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .85em; }
.prose .fig { margin: 2.6em 0; }
@media (min-width: 1180px) { .prose .fig, .prose .table-wrap { margin-left: -4rem; margin-right: -12rem; } }
@media (min-width: 900px) and (max-width: 1179px) { .prose .fig, .prose .table-wrap { margin-left: -3rem; margin-right: -3rem; } }
.prose .fig .fig-frame img { max-height: 78vh; object-fit: contain; }

/* врезки: «Главное» – жёлтый стикер, «Что проверить» – лист в клетку */
.box { position: relative; margin: 2.2em 0; padding: 26px 26px 12px; font-family: var(--sans); font-size: 1rem; line-height: 1.6; border-radius: var(--radius); }
.box h3 { margin: 0 0 14px; font: 700 .76rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.box p { margin: 0 0 14px; }
.box ul { list-style: none; padding: 0; margin: 0 0 14px; }
.box li { position: relative; padding-left: 32px; margin: 0 0 12px; }
.box li::before { content: ""; position: absolute; left: 0; top: .1em; width: 20px; height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 13.5c2.2 1.6 3.8 3.4 5.4 6.2C11.6 12 15.6 7 21.5 3.5' fill='none' stroke='%23d4541c' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.box-points { background: var(--sticky); border-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 10px 24px rgba(31, 34, 40, .07); }
.box-points::before { content: ""; position: absolute; top: -11px; left: 50%; margin-left: -46px; width: 92px; height: 24px; background: var(--tape); transform: rotate(1.5deg); clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 4% 96%, 0 50%); }
.box-check { background-color: var(--sheet); border: 1px solid var(--line-strong); border-left: 4px solid var(--tc);
  background-image: linear-gradient(var(--grid-minor) 1px, transparent 1px), linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px); background-size: 12px 12px; }
.box-check h3 { color: var(--tc); }

.stats { margin: 2.4em 0; }
.stats h3 { font: 700 .76rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.stats-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); }
.stat { padding: 16px 16px 14px; background: var(--sheet); border: 1px solid var(--line); border-top: 3px solid var(--tc); border-radius: 0 0 10px 10px; box-shadow: var(--shadow); }
.stat-num { display: block; font: 700 1.6rem/1.1 var(--serif); color: var(--ink); margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.stat-label { display: block; font: 500 .86rem/1.45 var(--sans); color: var(--ink-2); }

.table-wrap { margin: 2em 0; overflow-x: auto; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.prose table { width: 100%; border-collapse: collapse; font: .9rem/1.45 var(--sans); font-variant-numeric: tabular-nums; }
.prose th { text-align: left; font: 650 .74rem/1.25 var(--sans); letter-spacing: .04em; color: var(--muted); background: var(--paper); padding: 12px 12px; border-bottom: 1px solid var(--line-strong); vertical-align: bottom; }
.prose td { padding: 9px 12px; border-bottom: 1px solid var(--line); }
.prose tbody tr:last-child td { border-bottom: 0; }
.prose tbody tr { transition: background .2s; }
.prose tbody tr:hover { background: color-mix(in srgb, var(--marker) 55%, transparent); }

.source-card { margin-top: 64px; padding-top: 10px; padding-bottom: 8px; }
.source-card .hand-title { margin-bottom: 22px; }
.biblio { margin: 0 0 24px; font-size: .93rem; padding: 6px 22px; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.biblio div { display: grid; grid-template-columns: 12rem 1fr; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.biblio div:last-child { border-bottom: 0; }
.biblio dt { font: 500 .86rem/1.4 var(--sans); color: var(--muted); }
.biblio dd { margin: 0; overflow-wrap: anywhere; }
.biblio a { color: var(--accent-ink); }
@media (max-width: 560px) { .biblio div { grid-template-columns: 1fr; gap: 0; } }
.source-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; }
.copy-cite.is-done { background: var(--marker); }

.chips { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips a { display: inline-block; font: 500 .85rem/1 var(--sans); text-decoration: none; color: var(--ink-2); border: 1px solid var(--line-strong); border-radius: 999px; padding: 7px 13px; background: var(--sheet); transition: background .2s, border-color .2s, transform .3s var(--ease); }
.chips a:hover { transform: translateY(-2px); background: var(--marker); border-color: var(--pencil); color: var(--ink); }
.chips-lg a { font-size: .95rem; padding: 9px 15px; }
.chips .count { color: var(--muted); font-variant-numeric: tabular-nums; margin-left: 2px; }

.related { margin-top: 90px; }
.about-body { padding-top: 46px; }

.search-big input { width: 100%; max-width: 44rem; font: 1.2rem var(--serif); padding: 15px 18px; color: var(--ink); background: var(--sheet); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 22px; outline: none; }
.search-big input:focus { border-color: var(--ink); }

/* ---------- окно просмотра рисунков ---------- */

.lightbox { position: fixed; inset: 0; z-index: 100; display: grid; grid-template-rows: auto 1fr auto; background: rgba(20, 22, 26, .94); color: #eef1f6; opacity: 0; transition: opacity .35s var(--ease); }
.lightbox.is-open { opacity: 1; }
.lightbox[hidden] { display: none; }
.lb-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; font: 600 .85rem var(--sans); color: #c9ccd3; }
.lb-tools { display: flex; gap: 10px; }
.lb-btn { display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid rgba(233, 229, 218, .5); border-radius: 10px; background: rgba(255, 255, 255, .05); color: #eef1f6; cursor: pointer; transition: background .2s, transform .3s var(--ease); }
.lb-btn:hover { background: rgba(255, 225, 122, .22); transform: scale(1.05); }
.lb-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lb-stage { position: relative; overflow: hidden; display: grid; place-items: center; touch-action: none; }
.lb-stage img { max-width: calc(100vw - 32px); max-height: calc(100vh - 190px); width: auto; height: auto; background: #fff; border-radius: 4px; cursor: zoom-in; user-select: none; -webkit-user-drag: none; transform-origin: 0 0; will-change: transform; }
.lb-stage.is-zoomed img { cursor: grab; }
.lb-stage.is-dragging img { cursor: grabbing; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); }
.lb-prev { left: 14px; } .lb-next { right: 14px; }
.lb-caption { max-width: 60rem; margin: 0 auto; padding: 12px 18px 18px; font: .92rem/1.55 var(--sans); color: #c6cad1; text-align: center; }
.lb-caption .fig-num { color: #ffb37f; }
.lb-caption .credit { display: block; margin-top: 6px; font-size: .74rem; color: #9aa0a8; }
.lb-hint { font-size: .78rem; font-weight: 500; color: #858b94; }
@media (max-width: 600px) { .lb-nav { display: none; } .lb-hint { display: none; } }

/* ---------- подвал: доска ---------- */

.site-footer { margin-top: 110px; background: #2a3133; color: #c9cbc4; padding: 56px 0 34px; position: relative;
  background-image: radial-gradient(ellipse at 20% 0%, rgba(255, 255, 255, .05), transparent 60%); }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 12px; background: var(--squiggle) repeat-x 0 50% / 240px 12px; opacity: .55; }
.site-footer .brand { color: #efece4; margin-right: 0; }
.site-footer .logo-axes { stroke: #efece4; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px 48px; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; } }
.footer-tag { margin: 12px 0 0; max-width: 24rem; font: 400 1.02rem/1.5 var(--serif); color: #d9d6cc; }
.footer-h { font: 700 .74rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #efece4; margin: 0 0 6px; }
.footer-nav { display: flex; flex-direction: column; gap: 8px; }
.footer-nav a { font: 500 .93rem var(--sans); text-decoration: none; color: #c9cbc4; transition: color .2s, transform .3s var(--ease); width: fit-content; }
.footer-nav a:hover { color: #fff; transform: translateX(3px); }
.footer-note { font-size: .84rem; margin: 40px 0 0; padding-top: 22px; border-top: 1px dashed rgba(239, 236, 228, .22); max-width: 60rem; color: #a7aaa4; }

/* ---------- переходы и доступность ---------- */

::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }
::view-transition-group(*) { animation-duration: .55s; animation-timing-function: cubic-bezier(.2, .7, .1, 1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-delay: 0s !important; transition-duration: .001s !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
  .sk-line, .mark-line { stroke-dashoffset: 0; }
  .sk-label { opacity: 1; clip-path: none; }
  .sk-live { filter: none; }
  @view-transition { navigation: none; }
}

@media print {
  .masthead, .site-footer, .source-links, .related, .story-aside, .progress, .fig-zoom { display: none; }
  body { background: #fff; color: #000; }
}