/* ===== fonts.css ===== */
/* Шрифты OFL, свои копии (assets/fonts, tools/fetch_fonts.py). Браузер грузит только нужные подмножества. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url(fonts/cormorant-garamond-italic-300-400-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url(fonts/cormorant-garamond-italic-300-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url(fonts/cormorant-garamond-italic-300-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url(fonts/cormorant-garamond-italic-300-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-normal-400-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-normal-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-normal-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-normal-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-normal-500-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-normal-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-normal-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-normal-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url(fonts/onest-normal-300-500-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url(fonts/onest-normal-300-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url(fonts/onest-normal-300-500-math.woff2) format('woff2');
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-209F, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url(fonts/onest-normal-300-500-symbols.woff2) format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AE, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F8D0-1F8D8, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FAC6, U+1FAC8, U+1FACC-1FADD, U+1FADF-1FAEB, U+1FAEF-1FAFA, U+1FB00-1FBFF;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url(fonts/onest-normal-300-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url(fonts/onest-normal-300-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(fonts/unbounded-normal-200-800-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(fonts/unbounded-normal-200-800-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(fonts/unbounded-normal-200-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(fonts/unbounded-normal-200-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== tokens.css ===== */
/* Сгенерировано из tokens/tokens.json (tools/build_tokens.py). Не править руками. */
:root {

  /* цвета */
  --wall: #0B0A09;                 /* тёплый чёрный фон сайта */
  --wall-2: #121010;               /* приподнятая плоскость, подложка картинок */
  --wall-3: #1A1715;               /* поля ввода, подложки на тёмном */
  --ivory: #EFE8DC;                /* основной текст на тёмном, светлые кнопки */
  --ivory-2: #C9C0B2;              /* второстепенный текст на тёмном */
  --mute: #8E867A;                 /* подписи и метки на тёмном */
  --rule: rgba(239, 232, 220, .13); /* линии на тёмном */
  --rule-2: rgba(239, 232, 220, .26); /* заметные линии и рамки на тёмном */
  --ink: #0B0A09;                  /* текст на светлом */
  --ink-2: #4A443D;                /* второстепенный текст на слоновой кости */
  --ink-mute: #6E665C;             /* подписи на слоновой кости */
  --ink-rule: rgba(11, 10, 9, .14); /* линии на слоновой кости */
  --red: #E30613;                  /* «о» из логотипа: акцент, красная полоса, точки статуса */
  --red-ink: #FF4D3F;              /* красный для мелкого текста на тёмном */
  --fog: #EEEEEC;                  /* холодный светло-серый: светлые полосы среди тёмного */
  --fog-2: #E2E2DF;                /* подложка картинок на светлом */
  --fog-ink-2: #4B4944;            /* второстепенный текст на светлом */
  --fog-mute: #66645E;             /* подписи на светлом */
  --fog-rule: rgba(11, 10, 9, .14); /* линии на светлом */
  --paper: #FFFFFF;                /* плашки-подписи поверх картинок */

  /* шрифты */
  --f-display: "Unbounded", "Arial", sans-serif;
  --f-text: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
  --f-serif: "Cormorant Garamond", "Times New Roman", serif;

  /* роли текста: font: var(--t-…) */
  --t-hero: 300 clamp(58px, 13.6vw, 232px)/.86 var(--f-display);
  --t-title: 300 clamp(40px, 7.6vw, 128px)/1 var(--f-display);
  --t-section: 300 clamp(42px, 5.6vw, 92px)/.94 var(--f-display);
  --t-banner: 300 clamp(52px, 8vw, 132px)/.86 var(--f-display);
  --t-part: 300 clamp(32px, 3.2vw, 54px)/1.05 var(--f-display);
  --t-title-l: 300 clamp(26px, 2.6vw, 42px)/1.1 var(--f-display);
  --t-title-m: 300 clamp(24px, 2.2vw, 34px)/1.14 var(--f-display);
  --t-title-s: 400 clamp(19px, 1.5vw, 22px)/1.25 var(--f-display);
  --t-heading: 400 clamp(20px, 1.55vw, 24px)/1.3 var(--f-display);
  --t-lede: 300 clamp(18px, 1.45vw, 22px)/1.5 var(--f-text);
  --t-prose: 400 19px/1.7 var(--f-text);
  --t-body: 400 17px/1.6 var(--f-text);
  --t-card: 500 18px/1.32 var(--f-text);
  --t-small: 300 15.5px/1.5 var(--f-text);
  --t-ui: 500 15px/1.1 var(--f-text);
  --t-nav: 400 14.5px/1 var(--f-text);
  --t-eyebrow: 500 12px/1.4 var(--f-mono);
  --t-label: 400 11px/1.4 var(--f-mono);
  --t-caption: 400 12px/1.55 var(--f-mono);
  --t-accent: italic 300 1.1em/1 var(--f-serif);

  /* сетка */
  --maxw: 1440px;
  --gut: clamp(20px, 4.4vw, 72px);
  --cg: clamp(16px, 2.2vw, 32px);
  --room: clamp(88px, 10vw, 160px);
  --prose-w: 690px;
  --bleed-l: calc(-1 * (var(--gut) + (100vw - min(100vw, var(--maxw))) / 2));

  /* отступы для новых компонентов */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* движение */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --slow: cubic-bezier(.16, 1, .3, 1);
  --d-fast: .4s;
  --d-mid: .6s;
  --d-slow: 1.6s;

  color-scheme: dark;
  interpolate-size: allow-keywords;
}
/* радиус пятна цвета на обложке: нужен @property, чтобы он плавно менялся */
@property --r { syntax: '<length>'; inherits: true; initial-value: 0px; }
@media (min-width: 1700px) {
  :root { --maxw: 1600px; }
}

/* ===== base.css ===== */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--wall);
  color: var(--ivory);
  font: var(--t-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  font-feature-settings: "kern" 1;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd, figure { margin: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--red); color: #fff; }
.nw { white-space: nowrap; }
:focus-visible { outline: 2px solid var(--ivory); outline-offset: 4px; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -100px; z-index: 300; background: var(--ivory); color: var(--ink); padding: 12px 18px; font-weight: 500; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
kbd { font: 400 11px/1 var(--f-mono); border: 1px solid var(--rule-2); padding: 3px 6px; }
@media (max-width: 640px) {
  body { font-size: 16px; }
}
main { overflow-x: clip; }

/* ===== type.css ===== */
.eyebrow {
  font: var(--t-eyebrow);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mute);
}
.lede { font: var(--t-lede); color: var(--ivory-2); max-width: 36ch; }
.ulink {
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: 2px;
  transition: background-size .6s var(--slow);
}
.ulink:hover { background-size: 0 1px; background-position: 100% 100%; }
.more {
  display: inline-flex; align-items: center; gap: 12px;
  font: 500 14px/1.2 var(--f-text); letter-spacing: .01em;
  padding-bottom: 6px; border-bottom: 1px solid var(--rule-2);
  transition: border-color .5s var(--ease), gap .6s var(--slow);
}
.more:hover { border-color: currentColor; gap: 18px; }
.room { padding-block: var(--room); position: relative; }
.room + .room { border-top: 1px solid var(--rule); }
/* у раздела-.wrap линия идёт по колонке текста, а не по краям полей */
.room.wrap + .room.wrap { border-top: 0; }
.room.wrap + .room.wrap::before { content: ""; position: absolute; top: 0; left: var(--gut); right: var(--gut); border-top: 1px solid var(--rule); }
.ch { display: inline-block; text-align: center; transition: font-weight .35s var(--ease); }
.sec-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); row-gap: 20px; align-items: end; margin-bottom: clamp(40px, 4.4vw, 72px); }
.sec-title { grid-column: 1 / span 8; display: flex; align-items: flex-start; gap: .14em; font: var(--t-section); letter-spacing: -.055em; }
.sec-title--sm { font-size: clamp(32px, 3.2vw, 52px); letter-spacing: -.045em; margin-bottom: 10px; }
.sec-aside { grid-column: 9 / span 4; display: grid; gap: 16px; justify-items: start; font-size: 15px; color: var(--ivory-2); padding-bottom: .5em; }
.related-room .sec-head { margin-bottom: clamp(32px, 3.4vw, 56px); }
.w { display: inline-block; white-space: nowrap; }
@media (max-width: 960px) {
  .sec-title, .sec-aside { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .sec-title { font-size: clamp(36px, 11vw, 48px); }
}
.sec-title { display: block; }
.it { font: var(--t-accent); letter-spacing: -.025em; }
/* курсив отделён пробелом, а не отступом: если слово уходит на новую строку, пробел остаётся в конце прошлой,
   и курсив встаёт по левому краю заголовка (отступ сдвигал бы его вправо) */
.sec-title .it::before { content: " "; word-spacing: .05em; }

/* ===== motion.css ===== */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise 1.3s var(--slow) both; }
  .rise--1 { animation-delay: .08s; }
  .rise--2 { animation-delay: .2s; }
  .rise--3 { animation-delay: .34s; }
  .rise--4 { animation-delay: .48s; }
  .rise--5 { animation-delay: .62s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes unveil { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 8% { transform: scale(1.35); } 16% { transform: scale(1); } }
@keyframes drift { from { translate: 0 -3.2%; } to { translate: 0 3.2%; } }
@keyframes float { from { translate: 0 28px; } to { translate: 0 -28px; } }
@keyframes assemble { from { translate: var(--fx) var(--fy); scale: .84; opacity: 0; } }
@keyframes unmask { from { clip-path: inset(7% 9% 7% 9%); } to { clip-path: inset(0 0 0 0); } }
@keyframes orbit { to { transform: rotate(360deg); } }

/* ===== components/button.css ===== */
.btn {
  --h: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: var(--h); padding: 0 24px;
  border: 1px solid transparent; border-radius: 0; background: none;
  font: var(--t-ui); letter-spacing: .01em;
  cursor: pointer; white-space: nowrap;
  transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}
.btn svg { transition: transform .6s var(--slow); }
.btn:hover svg { transform: translateX(4px); }
.btn--sm { --h: 40px; padding: 0 16px; font-size: 14px; gap: 10px; }
.btn--ivory { background: var(--ivory); color: var(--ink); }
.btn--ivory:hover { background: #fff; }
.btn--ink { background: var(--ink); color: var(--ivory); }
.btn--ink:hover { background: var(--red); color: #fff; }
.btn--line { border-color: var(--rule-2); color: var(--ivory); }
.btn--line:hover { border-color: var(--ivory); }

/* ===== components/forms.css ===== */
.form { display: grid; gap: 30px; }
.field { display: grid; gap: 10px; }
.field > label, .field legend { font: 500 11px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); padding: 0; }
.field input, .field textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--rule-2);
  padding: 10px 0 14px; font: 300 clamp(20px, 1.7vw, 26px)/1.3 var(--f-text); color: var(--ivory);
  transition: border-color .4s var(--ease); border-radius: 0;
}
.field input::placeholder, .field textarea::placeholder { color: rgba(239, 232, 220, .32); }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--ivory); }
.field input:focus-visible, .field textarea:focus-visible { box-shadow: 0 1px 0 0 var(--ivory); }
.form__ok { font-size: 15px; color: var(--ivory); border-left: 2px solid var(--red); padding-left: 14px; }

/* ===== components/header.css ===== */
.hd {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11, 10, 9, .86);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--rule);
}
.hd__in { display: flex; align-items: center; gap: clamp(16px, 2vw, 36px); height: 76px; }
.hd__logo { flex: none; display: block; }
.hd__logo img { width: 92px; height: auto; }
.nav { margin-left: clamp(8px, 2.4vw, 40px); }
.nav > ul { display: flex; gap: clamp(14px, 1.7vw, 28px); }
.nav > ul > li > a {
  position: relative; display: block; padding: 8px 0;
  font: var(--t-nav); color: var(--ivory-2); letter-spacing: .005em;
  transition: color .4s var(--ease);
}
.nav > ul > li > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .7s var(--slow);
}
.nav > ul > li > a:hover, .nav__svc:hover > a { color: var(--ivory); }
.nav > ul > li > a:hover::after, .nav > ul > li > a[aria-current]::after, .nav__svc:hover > a::after { transform: scaleX(1); transform-origin: left; }
.nav > ul > li > a[aria-current] { color: var(--ivory); }
.hd__tail { margin-left: auto; display: flex; align-items: center; gap: clamp(12px, 1.4vw, 22px); }
.search { position: relative; display: flex; align-items: center; height: 40px; }
.search__btn {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: none; border: 0; color: var(--ivory-2); cursor: pointer;
  transition: color .4s var(--ease);
}
.search__btn:hover { color: var(--ivory); }
.search__in {
  width: 0; padding: 0; border: 0; border-bottom: 1px solid transparent;
  background: transparent; color: var(--ivory); height: 32px;
  font: 400 14px/1 var(--f-text);
  transition: width .7s var(--slow), padding .7s var(--slow), border-color .4s;
}
.search__in::placeholder { color: var(--mute); }
.search.is-open .search__in, .search:focus-within .search__in { width: 168px; padding: 0 4px; border-bottom-color: var(--rule-2); }
.search__in:focus { outline: none; border-bottom-color: var(--ivory); }
.no-js .search__in { width: 140px; padding: 0 4px; border-bottom-color: var(--rule-2); }
.hd__check {
  display: inline-flex; align-items: baseline; gap: 8px;
  font: 500 13px/1 var(--f-text); color: var(--ivory-2); letter-spacing: .02em;
  transition: color .4s var(--ease);
}
.hd__check small { font: 400 11px/1 var(--f-mono); color: var(--mute); letter-spacing: .08em; text-transform: uppercase; }
.hd__check:hover { color: var(--ivory); }
.menu { display: none; position: relative; }
.menu > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 2px;
  font: 500 14px/1 var(--f-text);
}
.menu > summary::-webkit-details-marker { display: none; }
.menu__bars { width: 22px; height: 9px; position: relative; }
.menu__bars::before, .menu__bars::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor; transition: transform .5s var(--slow); }
.menu__bars::before { top: 0; }
.menu__bars::after { bottom: 0; }
.menu[open] .menu__bars::before { transform: translateY(4px) rotate(45deg); }
.menu[open] .menu__bars::after { transform: translateY(-4px) rotate(-45deg); }
.menu__panel {
  position: fixed; left: 0; right: 0; top: 76px; bottom: 0;
  background: var(--wall); padding: 32px var(--gut) 40px; overflow-y: auto;
  border-top: 1px solid var(--rule);
}
.menu__panel ul { display: grid; gap: 0; }
.menu__panel li a { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--rule); font: 300 28px/1.1 var(--f-display); letter-spacing: -.03em; }
.menu__panel li a small { font: 400 11px/1 var(--f-mono); color: var(--mute); letter-spacing: .1em; }
.menu__foot { display: grid; gap: 12px; margin-top: 32px; }
.menu__foot .btn { width: 100%; }
@media (max-width: 1240px) {
  .hd__check { display: none; }
}
@media (max-width: 1080px) {
  .nav { display: none; }
  .menu { display: block; }
  .search.is-open .search__in, .search:focus-within .search__in { width: min(46vw, 220px); }
}
@media (max-width: 640px) {
  .hd__in { height: 64px; }
  .menu__panel { top: 64px; }
  .hd__logo img { width: 80px; }
}
/* шапка: главное действие — светлая кнопка «Обсудить продвижение»; бесплатный разбор трека (ЧЕК) — тихой ссылкой с красной точкой */
.hd__check { display: inline-flex; align-items: center; gap: 8px; font: 400 13.5px/1 var(--f-text); color: var(--ivory-2); white-space: nowrap; transition: color .4s var(--ease); }
.hd__check i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); flex: none; }
.hd__check small { font: 400 10.5px/1 var(--f-mono); letter-spacing: .08em; color: var(--mute); text-transform: uppercase; }
.hd__check:hover { color: var(--ivory); }
.hd__talk { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; background: var(--ivory); color: var(--ink); font: 500 13.5px/1 var(--f-text); letter-spacing: .01em; white-space: nowrap; transition: background-color .5s var(--ease); }
.hd__talk:hover { background: #fff; }
@media (max-width: 1240px) {
  .hd__check { display: none; }
}
@media (max-width: 640px) {
  .hd__talk { height: 36px; padding: 0 12px; font-size: 13px; }
}
/* кнопка экскурсии не помещается рядом с логотипом, поиском и меню уже на 430 (iPhone Pro Max): шапка давала прокрутку вбок на 20px */
@media (max-width: 460px) {
  .hd__talk { display: none; }
}

/* кнопка «Экскурсия по лейблу»: «кружок» из студии как видеосообщение; под курсором в кружке идёт видео (просьба владельца 28.10 — связать «обсудить» с бесплатной экскурсией) */
.face { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--wall-3); box-shadow: 0 0 0 1.5px var(--red); }
.face img, .face video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.face video { opacity: 0; transition: opacity .4s var(--ease); }
.face.is-play video { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .face::after { content: ""; position: absolute; inset: -1.5px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--red); animation: face-ping 2.6s var(--ease) infinite; } }
@keyframes face-ping { 0% { opacity: .9; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.6); } }
.hd__tour { gap: 10px; padding: 0 16px 0 7px; }
.hd__tour small { font: 400 10.5px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); }
.btn--face { gap: 12px; padding-left: 10px; }
.btn--face .face { width: 32px; height: 32px; }
@media (max-width: 640px) { .hd__tour { padding-left: 5px; } .hd__tour small { display: none; } }

/* ===== components/footer.css ===== */
.ft { border-top: 1px solid var(--rule); padding-block: 72px 40px; color: var(--ivory-2); }
.ft__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); row-gap: 48px; }
.ft__brand { grid-column: 1 / span 4; display: grid; gap: 22px; align-content: start; }
.ft__brand img { width: 128px; }
.ft__brand p { font-size: 14px; max-width: 34ch; }
.ft__cols { grid-column: 6 / span 7; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--cg); row-gap: 32px; }
.ft__h { font: 500 11px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin-bottom: 16px; }
.ft__cols li { margin-bottom: 9px; font-size: 14px; }
.ft__cols a { transition: color .3s; }
.ft__cols a:hover { color: var(--ivory); }
.ft__bottom { margin-top: 72px; padding-top: 22px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--mute); }
@media (max-width: 960px) {
  .ft__brand, .ft__cols { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .ft__cols { grid-template-columns: 1fr 1fr; }
}
.sign { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: baseline; padding-bottom: 28px; margin-bottom: 56px; border-bottom: 1px solid var(--rule); font-size: 14px; color: var(--ivory-2); }
.sign b { font-weight: 500; color: var(--ivory); }
.sign a:hover { color: var(--ivory); }
.sign__go { margin-left: auto; display: inline-flex; gap: 10px; align-items: center; color: var(--ivory); }
@media (max-width: 640px) {
  .sign__go { margin-left: 0; }
}

/* ===== components/ribbon.css ===== */
.ribbon { border-bottom: 1px solid var(--rule); }
.ribbon__in { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); min-height: 40px; }
.ribbon__k { flex: none; display: flex; gap: 12px; font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.ribbon__k span:first-child { color: var(--ivory-2); }
.ribbon__list { flex: 1; min-width: 0; display: flex; gap: clamp(18px, 2.2vw, 36px); overflow-x: auto; scrollbar-width: none; }
.ribbon__list::-webkit-scrollbar { display: none; }
.ribbon__list a { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ivory-2); white-space: nowrap; padding: 10px 0; transition: color .4s; }
.ribbon__list a:hover { color: var(--ivory); }
.ribbon__list b { font-weight: 500; color: var(--ivory); }
.st { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--ivory-2); flex: none; }
.st--last { background: var(--red); border-color: var(--red); }
.ribbon__all { flex: none; display: inline-flex; gap: 10px; align-items: center; font-size: 13px; color: var(--ivory-2); }
.ribbon__all:hover { color: var(--ivory); }
@media (max-width: 640px) {
  .ribbon__k span:last-child, .ribbon__all { display: none; }
}

/* ===== components/card.css ===== */
.topics { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: baseline; margin-top: clamp(80px, 9vw, 140px); padding-bottom: 22px; border-bottom: 1px solid var(--rule); }
.topics a { font-size: 14px; color: var(--ivory-2); transition: color .4s; }
.topics a:hover, .topics a[aria-current] { color: var(--ivory); }
.topics a[aria-current] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.newsline { margin-top: clamp(48px, 5vw, 80px); }
.newsline__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--cg); border-top: 1px solid var(--rule); }
.nl { display: grid; grid-template-columns: clamp(96px, 9vw, 132px) minmax(0, 1fr); gap: 16px; align-items: start; padding: 20px 0; }
.nl__pic { aspect-ratio: 1024 / 704; overflow: hidden; background: var(--wall-2); }
.nl__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--slow); }
.nl:hover .nl__pic img { transform: scale(1.06); }
.nl__txt { display: grid; gap: 8px; }
.nl__t { font: 400 15.5px/1.4 var(--f-text); color: var(--ivory); }
.newsline .topics { margin-top: 0; border-top: 1px solid var(--rule); padding-top: 18px; }
.card { position: relative; display: grid; gap: 18px; align-content: start; min-width: 0; }
.card__pic { display: block; overflow: hidden; background: var(--wall-2); aspect-ratio: 1024 / 704; }
.card__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--slow); }
.card:hover .card__pic img { transform: scale(1.04); }
.card__txt { display: grid; gap: 10px; align-content: start; }
.card__k { display: flex; flex-wrap: wrap; gap: 4px 14px; font: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.card__k span:first-child { color: var(--ivory-2); }
.card__t { font: var(--t-card); letter-spacing: -.005em; color: var(--ivory); }
.card__t a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .8s var(--slow); }
.card:hover .card__t a, .card__t a:focus-visible { background-size: 100% 1px; }
.card__dek { font: var(--t-small); color: var(--ivory-2); max-width: 46ch; }
.card--xl .card__t { font: var(--t-title-l); letter-spacing: -.04em; max-width: 22ch; }
.card--xl .card__dek { font-size: 17px; }
.card--md .card__t { font-size: 19px; }
.card--sm .card__t { font-size: 16px; line-height: 1.38; }
.feed { border-top: 1px solid var(--rule); padding-block: clamp(48px, 5vw, 80px) var(--room); }
.feed__h { font: var(--t-eyebrow); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin-bottom: 28px; }
.feed__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--cg); row-gap: 40px; }
.card--type .card__pic { display: grid; place-items: center; border: 1px solid var(--rule); }
.card--type .card__pic span { font: 300 clamp(26px, 2.4vw, 36px)/1 var(--f-display); letter-spacing: -.045em; color: var(--ivory-2); }
@media (max-width: 960px) {
  .feed__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .newsline__list { grid-template-columns: 1fr; }
  .nl { padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .newsline__list li:last-child .nl { border-bottom: 0; }
}
@media (max-width: 640px) {
  .feed__row { grid-template-columns: 1fr; row-gap: 0; }
  .feed .card--sm { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
}
.newsline { margin-top: clamp(36px, 3.4vw, 56px); }
/* линия над «Ещё в журнале» — по колонке текста, как у остальных разделов */
.feed { border-top: 0; }
.feed::before { content: ""; position: absolute; top: 0; left: var(--gut); right: var(--gut); border-top: 1px solid var(--rule); }

/* ===== components/cover-reveal.css ===== */
.litf { position: relative; --mx: 50%; --my: 50%; --r: 0px; transition: --r .9s var(--slow); }
.litf > img:not(.lit) { filter: grayscale(1) contrast(1.08) brightness(.72); }
.fog .litf > img:not(.lit) { filter: grayscale(1) contrast(1.05) brightness(.97); }
.litf > .lit {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--mx) var(--my), #000 0, #000 58%, transparent 100%);
  mask-image: radial-gradient(circle var(--r) at var(--mx) var(--my), #000 0, #000 58%, transparent 100%);
}
.card:hover .litf, .tile:hover .litf, .wide:hover .litf, .hit1:hover .litf, .litf:focus-visible { --r: clamp(150px, 15vw, 240px); }
.card--xl .litf { --r: clamp(110px, 11vw, 190px); --mx: 64%; --my: 42%; }
.card--xl:hover .litf { --r: clamp(170px, 17vw, 280px); }
/* без курсора (телефон, планшет) обложки всегда цветные */
@media (hover: none) {
  .litf > img:not(.lit), .fog .litf > img:not(.lit) { filter: none; }
  .litf > .lit { display: none; }
}
/* «стоп-моушн»: крупная обложка «кипит», как бумага в покадровой анимации. Фильтр #us-boil и класс .is-boil ставит site.js —
   на одну обложку, которая больше всего видна. Серый и цветной слои «фонарика» сдвигаются одинаково: один фильтр, одна рамка */
.is-boil > img { filter: url(#us-boil); }
.litf.is-boil > img:not(.lit) { filter: url(#us-boil) grayscale(1) contrast(1.08) brightness(.72); }
.fog .litf.is-boil > img:not(.lit) { filter: url(#us-boil) grayscale(1) contrast(1.05) brightness(.97); }
@media (hover: none) {
  .litf.is-boil > img:not(.lit), .fog .litf.is-boil > img:not(.lit) { filter: url(#us-boil); }
}
/* живая обложка: у статьи есть ролик (data-mo у обложки) — в крупном месте вместо «кипения» играет он. Ролик и вуаль ставит site.js,
   .is-mo — когда ролик пошёл. Ролик цветной; «фонарик» сохраняется: сверху серая вуаль с дыркой под курсором — тот же круг, что у .lit */
.mo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; }
.mo-veil {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  -webkit-backdrop-filter: grayscale(1) contrast(1.08) brightness(.72); backdrop-filter: grayscale(1) contrast(1.08) brightness(.72);
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--mx) var(--my), transparent 0, transparent 58%, #000 100%);
  mask-image: radial-gradient(circle var(--r) at var(--mx) var(--my), transparent 0, transparent 58%, #000 100%);
}
.fog .mo-veil { -webkit-backdrop-filter: grayscale(1) contrast(1.05) brightness(.97); backdrop-filter: grayscale(1) contrast(1.05) brightness(.97); }
.is-mo > .mo, .is-mo > .mo-veil { opacity: 1; }
@media (hover: none) { .mo-veil { display: none; } }

/* ===== components/tiles.css ===== */
.tiles { position: relative; padding-block: clamp(56px, 6vw, 96px) clamp(96px, 10vw, 160px); }
.tiles__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px 24px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 44px); }
.tiles__h { font: 300 clamp(34px, 3.6vw, 60px)/1 var(--f-display); letter-spacing: -.045em; }
.tiles__head p { font-size: 15px; color: var(--fog-ink-2); }
.tiles__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(6px, .9vw, 14px); }
.tile { min-width: 0; }
.tile__pic { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--fog-2); }
.tile__pic img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transform: scale(var(--z, 1)); transform-origin: var(--pos, 50% 50%); transition: transform 1.6s var(--slow); }
.tile:hover .tile__pic img { transform: scale(calc(var(--z, 1) * 1.05)); }
.tile__tag { position: absolute; left: 50%; bottom: clamp(16px, 2vw, 28px); transform: translateX(-50%); background: #fff; color: var(--ink); padding: 5px 10px 6px; font: 400 14px/1.2 var(--f-text); letter-spacing: 0; white-space: nowrap; box-shadow: 0 0 0 1px rgba(11, 10, 9, .08); }
.tile__cap { display: grid; gap: 8px; padding: 18px clamp(14px, 1.7vw, 26px) 0; }
.tile__t { font: 500 16px/1.38 var(--f-text); max-width: 34ch; }
.tile__t a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .8s var(--slow); }
.tile:hover .tile__t a { background-size: 100% 1px; }
@media (max-width: 960px) {
  .tiles__row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
}
@media (max-width: 640px) {
  .tiles__row { column-gap: 6px; }
  .tile__cap { padding-inline: 12px; }
  .tile__t { font-size: 14.5px; }
  .tile__tag { font-size: 12.5px; }
}
.tile__pic { aspect-ratio: 1024 / 704; }
.tile__tag { z-index: 2; }
.tiles__head { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: 18px; margin-bottom: clamp(28px, 3.2vw, 52px); }
.tiles__h { font: 200 clamp(64px, 12.6vw, 230px)/.8 var(--f-display); letter-spacing: 0; margin-left: -.04em; }
.tiles__h > span { display: block; }
.tiles__h [aria-hidden="true"] { display: flex; justify-content: space-between; }
.tiles__h .w { display: contents; }
.tiles__head p { order: -1; justify-self: end; font: 400 12px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fog-mute); }

/* ===== components/objects.css ===== */
.collage.collage--art { width: min(44vw, 720px); top: calc(clamp(40px, 7.6vw, 128px) * 1.08); bottom: auto; right: -1vw; }
@media (max-width: 1080px) and (min-width: 961px) {
  .collage.collage--art { width: 48vw; top: calc(clamp(40px, 7.6vw, 128px) * 1.08); bottom: auto; }
}
@media (max-width: 960px) {
  .collage.collage--art { position: relative; top: auto; right: auto; bottom: auto; width: 112%; margin: 2vw -6% 0; }
}
.collage { position: absolute; right: -1.5vw; bottom: calc(clamp(58px, 13.6vw, 232px) * .36 - min(46vw, 760px) * .33); width: min(46vw, 760px); aspect-ratio: 1323 / 910; pointer-events: none; }
.collage__p {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transform: translate3d(calc(var(--px, 0) * var(--dx) + var(--sp, 0) * var(--sx)), calc(var(--py, 0) * var(--dy) + var(--sp, 0) * var(--sy)), 0);
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55));
}
.collage__p--a { z-index: 1; --dx: 10px; --dy: 8px; --sx: 60px; --sy: -90px;
  clip-path: polygon(0 0, 100% 0, 100% 59.34%, 83.14% 59.34%, 77.85% 68.13%, 61.98% 68.13%, 61.98% 100%, 61.22% 100%, 60.47% 78.24%, 58.35% 76.92%, 60.32% 71.43%, 60.92% 57.14%, 60.17% 42.86%, 52.91% 41.32%, 46.26% 42.31%, 45.65% 40.44%, 42.03% 41.21%, 41.42% 57.14%, 39.30% 60.99%, 11.34% 61.54%, 11.34% 87.91%, 24.94% 87.91%, 31.75% 87.91%, 32.50% 100%, 0 100%); }
.collage__p--c { z-index: 1; --dx: 18px; --dy: 12px; --sx: 140px; --sy: 40px;
  clip-path: polygon(61.98% 68.13%, 77.85% 68.13%, 83.14% 59.34%, 100% 59.34%, 100% 100%, 61.98% 100%); }
.collage__p--b { z-index: 3; --dx: -26px; --dy: -18px; --sx: -120px; --sy: 120px;
  clip-path: polygon(11.34% 61.54%, 39.30% 60.99%, 41.42% 57.14%, 42.03% 41.21%, 45.65% 40.44%, 46.26% 42.31%, 52.91% 41.32%, 60.17% 42.86%, 60.92% 57.14%, 60.32% 71.43%, 58.35% 76.92%, 60.47% 78.24%, 61.22% 100%, 32.50% 100%, 31.75% 87.91%, 24.94% 87.91%, 11.34% 87.91%); }
@media (prefers-reduced-motion: no-preference) {
  .collage__p { animation: assemble 1.25s var(--slow) both; }
  .collage__p--a { --fx: -7vw; --fy: -5vw; animation-delay: .05s; }
  .collage__p--c { --fx: 9vw; --fy: 6vw; animation-delay: .2s; }
  .collage__p--b { --fx: -12vw; --fy: 10vw; animation-delay: .35s; }
}
@media (max-width: 1080px) {
  .collage { width: 54vw; bottom: calc(clamp(58px, 13.6vw, 232px) * .36 - 54vw * .33); }
}
@media (max-width: 760px) {
  .collage { position: relative; right: auto; bottom: auto; width: 116%; margin: -7vw -8% 0; }
}
.collage.collage--home { width: min(47vw, 790px); right: -1.5vw; top: calc(clamp(26px, 4.3vw, 70px) * .2); bottom: auto; }
.obj { display: block; height: auto; pointer-events: none; }
/* кастрюля на обложке срезана снизу — ставим её дном ровно на границу с тёмным блоком: срез совпадает с краем раздела (обход 28.10 17:52) */
.obj--pot { position: absolute; z-index: 6; right: clamp(16px, 22vw, 360px); bottom: 0; width: clamp(150px, 13.5vw, 220px); transform: none; filter: drop-shadow(0 -10px 30px rgba(11, 10, 9, .18)); }
.obj--box { grid-column: 7 / span 6; width: 100%; max-width: 540px; justify-self: end; margin-right: clamp(0px, 3vw, 48px); position: relative; z-index: 1; margin-block: calc(-1 * clamp(150px, 15vw, 250px)) -24px; filter: drop-shadow(0 40px 46px rgba(60, 0, 4, .45)); }
.obj--clock { width: clamp(40px, 3.6vw, 60px); margin-top: .06em; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .5)); }
.obj--globe { position: absolute; z-index: 6; right: calc(-1 * clamp(60px, 7vw, 120px)); bottom: 0; width: clamp(200px, 21vw, 340px); transform: translateY(46%); filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .6)); }
@media (min-width: 1700px) {
  .obj--globe { right: calc((100vw - var(--maxw)) / -2 - 80px); }
}
@media (max-width: 960px) {
  .obj--box { grid-column: 1 / -1; grid-row: 1; width: min(78%, 440px); justify-self: center; margin: calc(-1 * clamp(120px, 24vw, 200px)) 0 0; }
  .collage.collage--home { position: relative; top: auto; right: auto; width: 112%; margin: -4vw -6% 0; }
}
@media (max-width: 640px) {
  .obj--pot { width: 30vw; right: 6vw; }
  .obj--globe { width: 46vw; right: -10vw; }
}
.sec-title .obj { display: inline-block; vertical-align: top; }
.chrome { display: block; width: 100%; height: auto; aspect-ratio: 1; pointer-events: none; }
.chrome--blob { position: absolute; z-index: 5; top: 0; left: 61%; width: clamp(170px, 17vw, 290px); transform: translate(-50%, -66%); filter: drop-shadow(0 30px 28px rgba(0, 0, 0, .45)); }
.no-webgl .chrome { display: none; }
.orbit { position: absolute; inset: -7%; width: 114%; height: 114%; overflow: visible; mix-blend-mode: difference; animation: orbit 70s linear infinite; }
.orbit text { font: 400 11.5px/1 var(--f-mono); letter-spacing: .06em; fill: #EFE8DC; }
@media (max-width: 960px) {
  .obj--globe { width: clamp(140px, 30vw, 220px); }
}

/* коробка в полосе ЧЕК: объём — наклон за курсором (site.js задаёт --rx/--ry), тень уходит в другую сторону, коробка медленно парит */
.obj--box { --rx: 0; --ry: 0; transform: perspective(1100px) rotateX(calc(var(--rx) * 1deg)) rotateY(calc(var(--ry) * 1deg));
  filter: drop-shadow(calc(var(--ry) * -1.4px) calc(40px + var(--rx) * 1.4px) 46px rgba(60, 0, 4, .5)); transition: transform .9s var(--slow), filter .9s var(--slow); }
@media (prefers-reduced-motion: no-preference) {
  .obj--box { animation: box-float 7s ease-in-out infinite alternate; }
}
@keyframes box-float { from { translate: 0 -8px; rotate: -1.2deg; } to { translate: 0 10px; rotate: 1.4deg; } }

/* ===== components/opportunity.css ===== */
.state { display: inline-flex; align-items: center; gap: 10px; font: 400 12px/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ivory-2); }
.state i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--ivory-2); flex: none; }
.state--last { color: var(--ivory); }
.state--last i { background: var(--red); border-color: var(--red); box-shadow: 0 0 0 4px rgba(227, 6, 19, .18); }
.state--closed { color: var(--mute); }
.state--closed i { border-style: dashed; border-color: var(--mute); }
.state--soon i { border-color: var(--ivory-2); background: radial-gradient(circle, var(--ivory-2) 0 1.5px, transparent 2px); }   /* приём объявлен, но ещё не начался */
.cal__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule-2); }
.opp { display: grid; grid-template-rows: auto auto auto 1fr auto auto; gap: 14px; padding: 26px clamp(16px, 1.8vw, 28px) 30px; border-bottom: 1px solid var(--rule); }
.opp + .opp { border-left: 1px solid var(--rule); }
.opp:first-child { padding-left: 0; }
.opp--last { box-shadow: inset 0 2px 0 var(--red); }
.opp__date { display: grid; gap: 8px; }
.opp__date b { font: 300 clamp(44px, 4.4vw, 72px)/.9 var(--f-display); letter-spacing: -.055em; white-space: nowrap; }
.opp__date--w b { font-size: clamp(28px, 2.5vw, 40px); line-height: 1; padding-top: .28em; }
.opp__date span { font: 400 11px/1.5 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.opp .state { margin-top: 4px; }
.opp__t { font: var(--t-title-s); letter-spacing: -.03em; }
.opp__w { font-size: 14.5px; line-height: 1.5; color: var(--ivory-2); }
.opp__m { font: 400 11px/1.5 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.opp__go { width: fit-content; font-size: 14px; }
.opp--closed .opp__date b, .opp--closed .opp__t { color: var(--ivory-2); }
.cal__note { margin-top: 24px; font-size: 14px; color: var(--mute); max-width: 90ch; }
@media (max-width: 1080px) {
  .cal__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opp:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 640px) {
  .cal__cards { grid-template-columns: 1fr; }
  .opp, .opp:nth-child(n) { border-left: 0; padding-left: 0; padding-right: 0; }
}
.opp__date--w b { white-space: normal; }

/* ===== components/hits.css ===== */
.hits { position: relative; }
.hits__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); row-gap: 48px; align-items: start; }
.hit1 { grid-column: 1 / span 5; position: relative; padding-top: clamp(150px, 16vw, 260px); }
.hit1__n { position: absolute; left: -.1em; top: -.1em; z-index: 0; font: 200 clamp(320px, 40vw, 640px)/.76 var(--f-display); letter-spacing: -.08em; color: var(--ivory); pointer-events: none; }
.hit1__pic { position: relative; z-index: 1; display: block; width: 72%; margin-left: auto; aspect-ratio: 1024 / 704; overflow: hidden; background: var(--wall-2); }
.hit1__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--slow); }
.hit1:hover .hit1__pic img { transform: scale(1.04); }
.hit1__txt { position: relative; z-index: 1; display: grid; gap: 12px; margin: 22px 0 0 28%; }
.hit1__t { font: 300 clamp(22px, 2vw, 32px)/1.15 var(--f-display); letter-spacing: -.035em; }
.hits__list { grid-column: 7 / span 6; border-top: 1px solid var(--rule-2); }
.hit { border-bottom: 1px solid var(--rule); }
.hit a { display: grid; grid-template-columns: 2.4ch clamp(84px, 7.4vw, 112px) minmax(0, 1fr); column-gap: clamp(14px, 1.4vw, 22px); align-items: center; padding: 14px 0; transition: padding .7s var(--slow); }
.hit a:hover { padding-left: 8px; }
.hit__n { font: 300 clamp(22px, 1.9vw, 30px)/1 var(--f-display); letter-spacing: -.04em; color: var(--ivory-2); }
.hit__pic { aspect-ratio: 1024 / 704; overflow: hidden; background: var(--wall-2); }
.hit__pic img { width: 100%; height: 100%; object-fit: cover; }
.hit__txt { display: grid; gap: 6px; min-width: 0; }
.hit__t { font: 400 16px/1.36 var(--f-text); color: var(--ivory); }
.hit__v { position: relative; display: block; padding-bottom: 8px; font: 400 12px/1.4 var(--f-mono); color: var(--mute); }
.hit__v b { font-weight: 500; color: var(--ivory-2); }
.hit__v i { position: absolute; left: 0; bottom: 0; height: 2px; width: calc(var(--w) * 100%); background: var(--ivory-2); opacity: .45; }
.hit1 .hit__v { font-size: 13px; }
.hit1 .hit__v i { background: var(--red); opacity: 1; }
@media (max-width: 960px) {
  .hit1, .hits__list { grid-column: 1 / -1; }
  .hit1 { padding-top: clamp(140px, 30vw, 260px); }
}
@media (max-width: 640px) {
  .hit1__n { font-size: 82vw; }
  .hit1__pic { width: 70%; }
  .hit1__txt { margin-left: 0; }
  .hit a { grid-template-columns: 2.4ch 76px minmax(0, 1fr); }
}
/* глобус в наушниках — под карточкой №1, в пустом месте левой колонки, целиком в кадре; слегка покачивается */
.hit1 .obj--globe { position: relative; right: auto; bottom: auto; z-index: 0; transform: none; width: clamp(170px, 15vw, 250px); margin: clamp(36px, 4vw, 64px) 0 0 28%; }
@media (prefers-reduced-motion: no-preference) { .hit1 .obj--globe { animation: float 7s ease-in-out infinite alternate; } }
@media (max-width: 960px) { .hit1 .obj--globe { display: none; } }

/* ===== components/library.css ===== */
.library { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); row-gap: 72px; }
.library__col { grid-column: span 6; }
.library__col:last-child { grid-column: 8 / span 5; }
.library__lead { color: var(--mute); font-size: 15px; margin-bottom: 28px; }
.dirs li, .tools li { border-top: 1px solid var(--rule); }
.dirs li:last-child, .tools li:last-child { border-bottom: 1px solid var(--rule); }
.dirs a { display: grid; grid-template-columns: 7ch minmax(0, 1fr) auto; column-gap: 20px; align-items: baseline; padding: 18px 0; transition: padding .7s var(--slow); }
.dirs a:hover { padding-left: 8px; }
.dirs b { font: 300 clamp(24px, 2.2vw, 34px)/1 var(--f-display); letter-spacing: -.04em; white-space: nowrap; }
.dirs span { font-size: 17px; }
.tools li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; padding: 18px 0; align-items: baseline; }
.tools b { font-weight: 500; font-size: 17px; }
.tools p { grid-column: 1; font-size: 14px; color: var(--mute); margin-top: 4px; }
.tools .state { grid-row: 1; grid-column: 2; }
.tools .is-live b a { border-bottom: 1px solid var(--rule-2); }
.lib-note { margin-top: 20px; font-size: 13px; color: var(--mute); max-width: 60ch; }
@media (max-width: 960px) {
  .library__col, .library__col:last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .dirs a { grid-template-columns: 6ch 1fr; }
}
/* UpSound AI — главный инструмент: карточка со снимком интерфейса над списком */
.tool-ai { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; align-items: center; margin-bottom: 20px; padding: 14px; background: var(--wall-2); border: 1px solid var(--rule); transition: border-color var(--d-fast) var(--ease); }
.tool-ai:hover { border-color: var(--rule-2); }
.tool-ai img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); transition: transform 1.2s var(--slow); }
.tool-ai:hover img { transform: scale(1.025); }
.tool-ai__txt { display: grid; gap: 8px; justify-items: start; }
.tool-ai b { font: 400 clamp(22px, 2vw, 30px)/1 var(--f-display); letter-spacing: -.04em; }
.tool-ai__d { font-size: 14px; line-height: 1.45; color: var(--ivory-2); }
@media (max-width: 640px) { .tool-ai { grid-template-columns: minmax(0, 1fr); } }

/* ===== components/bands.css ===== */
.fog { background: var(--fog); color: var(--ink); color-scheme: light; }
.fog ::selection { background: var(--ink); color: var(--fog); }
.fog :focus-visible { outline-color: var(--ink); }
.fog .eyebrow { color: var(--fog-mute); }
.fog .more { border-color: var(--fog-rule); }
.fog .more:hover { border-color: var(--ink); }
.fog .card__k { color: var(--fog-mute); }
.fog .card__k span:first-child { color: var(--fog-ink-2); }
.band { position: relative; }
.band--red { background: var(--red); color: #fff; color-scheme: dark; }
.band--red .eyebrow { color: #fff; }
.band--red :focus-visible { outline-color: #fff; }
.band--fog { background: var(--fog); color: var(--ink); color-scheme: light; }
.check { padding-block: clamp(80px, 8vw, 128px); }
.check__in { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); row-gap: 40px; align-items: center; }
.check__txt { grid-column: 1 / span 6; position: relative; z-index: 2; display: grid; gap: 24px; justify-items: start; }
.check__t { font: var(--t-banner); letter-spacing: -.06em; }
.check__d { font: 300 clamp(18px, 1.5vw, 23px)/1.45 var(--f-text); max-width: 32ch; }
.band--red .btn--ivory:hover { background: var(--ink); color: var(--ivory); }
.check__side { position: absolute; right: 0; top: 0; writing-mode: vertical-rl; font: 400 11px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.band--fog .field > label { color: var(--fog-mute); }
.band--fog .field input { color: var(--ink); border-bottom-color: rgba(11, 10, 9, .3); font-size: 19px; }
.band--fog .field input::placeholder { color: rgba(11, 10, 9, .4); }
.band--fog .field input:focus { border-bottom-color: var(--ink); }
.band--fog .field input:focus-visible { box-shadow: 0 1px 0 0 var(--ink); }
.band--fog .form__ok { color: var(--ink); }
.band--fog .btn--ink { justify-self: start; }
@media (max-width: 960px) {
  .check__txt { grid-column: 1 / -1; }
  .check__side { display: none; }
}
@media (max-width: 640px) {
  .check__t { font-size: clamp(46px, 14vw, 64px); }
}

/* книга на главной — светлая полоса после сцены курса (.cband): видео с upsound.ai слева, текст справа (владелец 28.10) */
.bookband { padding-block: clamp(64px, 7vw, 112px); }
.bookband__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); row-gap: 32px; align-items: center; }
.bookband__video { grid-column: 1 / span 6; }
.lb__video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); box-shadow: 0 30px 50px -28px rgba(11, 10, 9, .55); }
.lb__vid { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.6s var(--slow); }
.bookband__video:hover .lb__vid { transform: scale(1.03); }
.bookband .lb__tag { left: auto; right: 14px; top: auto; bottom: 14px; transform: none; font-size: 13px; }
.bookband__txt { grid-column: 8 / span 5; }
.lb__d { font-size: 16px; line-height: 1.55; color: var(--fog-ink-2); max-width: 46ch; }
.lb__book { display: grid; gap: 12px; justify-items: start; }
.bookband__t { max-width: 18em; font: 400 clamp(22px, 2.2vw, 34px)/1.15 var(--f-display); letter-spacing: -.035em; }
@media (max-width: 960px) {
  .bookband__video, .bookband__txt { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .bookband .lb__tag { font-size: 12.5px; }
}

/* ===== components/help.css ===== */
.help__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--cg); border-top: 1px solid var(--rule-2); }
.help__list li { border-bottom: 1px solid var(--rule); }
.help__list a { display: grid; grid-template-columns: 15ch minmax(0, 1fr) 22px; column-gap: 20px; row-gap: 6px; align-items: baseline; padding: 20px 0 22px; transition: padding .7s var(--slow); }
.help__list a:hover { padding-left: 10px; }
.help__topic { grid-row: 1 / span 2; font: 400 11.5px/1.6 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.help__svc { font: 400 clamp(18px, 1.5vw, 22px)/1.25 var(--f-display); letter-spacing: -.03em; }
.help__what { grid-column: 2; font-size: 14px; line-height: 1.45; color: var(--mute); }
.help__a { grid-column: 3; grid-row: 1; opacity: .4; transition: opacity .5s, transform .7s var(--slow); }
.help__list a:hover .help__a { opacity: 1; transform: translateX(4px); }
@media (max-width: 960px) {
  .help__list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .help__list a { grid-template-columns: minmax(0, 1fr) 22px; }
  .help__topic { grid-row: auto; grid-column: 1; }
  .help__svc, .help__what { grid-column: 1; }
  .help__a { grid-row: 1 / span 3; grid-column: 2; align-self: center; }
}
.helpband { position: relative; padding-block: clamp(120px, 11vw, 190px) clamp(80px, 8vw, 128px); }
.helpband__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); row-gap: clamp(48px, 5vw, 84px); align-items: center; }
.helpband__obj { grid-column: 1 / span 5; grid-row: 1; position: relative; width: 100%; max-width: 480px; justify-self: start; margin-top: calc(-1 * clamp(160px, 17vw, 300px)); }
.helpband__obj .chrome { filter: drop-shadow(0 46px 40px rgba(11, 10, 9, .38)); }
.helpband__head { grid-column: 6 / span 7; grid-row: 1; display: grid; gap: 22px; justify-items: start; position: relative; z-index: 2; }
.helpband__t { font: 300 clamp(40px, 5vw, 86px)/.96 var(--f-display); letter-spacing: -.055em; }
.helpband__l1 { display: block; font-size: .44em; line-height: 1.1; letter-spacing: -.035em; color: var(--fog-ink-2); margin-bottom: .5em; }
.helpband__l2 { display: block; }
.helpband__t .it { font-size: 1.18em; margin-left: .03em; }
.helpband__d { max-width: 52ch; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.55; color: var(--fog-ink-2); }
.helpband__go { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 6px; }
.helpband .help__list { grid-column: 1 / -1; display: block; border-top: 1px solid var(--ink); }
.helpband .help__list li { border-bottom: 1px solid var(--fog-rule); }
.helpband .help__list a {
  position: relative; isolation: isolate; display: grid; align-items: baseline;
  grid-template-columns: 4ch 15ch minmax(0, 1.2fr) minmax(0, 1fr) 22px; column-gap: clamp(16px, 2vw, 32px); row-gap: 8px;
  padding: clamp(18px, 1.7vw, 26px) 14px; transition: color .5s var(--ease);
}
.helpband .help__list a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .6s var(--slow); }
.helpband .help__list a:hover, .helpband .help__list a:focus-visible { color: var(--ivory); padding-left: 14px; }
.helpband .help__list a:hover::before, .helpband .help__list a:focus-visible::before { transform: scaleY(1); }
.help__n { font: 400 11.5px/1.6 var(--f-mono); color: var(--fog-mute); }
.helpband .help__topic { grid-row: auto; font: 400 11.5px/1.6 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fog-mute); }
.helpband .help__svc { font: 300 clamp(22px, 2.15vw, 34px)/1.08 var(--f-display); letter-spacing: -.04em; }
.helpband .help__what { grid-column: 4; grid-row: 1; font-size: 15px; line-height: 1.45; color: var(--fog-ink-2); }
.help__proof { grid-column: 4; grid-row: 2; font: 400 12px/1.5 var(--f-mono); color: var(--ink); }
.helpband .help__a { grid-column: 5; grid-row: 1; opacity: .5; }
.helpband .help__list a:hover :is(.help__n, .help__topic, .help__what, .help__proof),
.helpband .help__list a:focus-visible :is(.help__n, .help__topic, .help__what, .help__proof) { color: #CFC7B9; }
.helpband .help__list a:hover .help__a { opacity: 1; transform: translateX(4px); }
@media (max-width: 1180px) {
  .helpband .help__list a { grid-template-columns: 4ch minmax(0, 1fr) minmax(0, 1fr) 22px; }
  .helpband .help__topic { grid-column: 2; grid-row: 1; }
  .helpband .help__svc { grid-column: 2; grid-row: 2; }
  .helpband .help__what { grid-column: 3; grid-row: 1 / span 2; align-self: end; }
  .help__proof { grid-column: 3; grid-row: 3; }
  .helpband .help__a { grid-column: 4; }
}
@media (max-width: 960px) {
  .helpband__obj { grid-column: 1 / -1; max-width: 340px; justify-self: center; margin-top: 0; }
  .helpband__head { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 640px) {
  .helpband .help__list a { grid-template-columns: 3ch minmax(0, 1fr) 22px; padding-inline: 4px; }
  .helpband .help__topic, .helpband .help__svc, .helpband .help__what, .help__proof { grid-column: 2; grid-row: auto; }
  .helpband .help__a { grid-column: 3; grid-row: 1 / span 3; align-self: center; }
  .helpband__obj { max-width: 260px; }
}

/* главная услуга агентства: тёмная карточка-ссылка во всю ширину — нажимается, как остальные услуги, только крупнее */
.flag { grid-column: 1 / -1; position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--cg); row-gap: 40px; padding: clamp(28px, 4vw, 64px); background: var(--ink); color: var(--ivory); transition: background-color .6s var(--ease); }
.flag:hover { background: #151311; }
.flag:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.flag__txt { display: grid; gap: 22px; justify-items: start; align-content: start; }
.flag__k { display: flex; flex-wrap: wrap; gap: 4px 0; font: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--red-ink); }
.flag__k span:not(:last-child)::after { content: "·"; margin: 0 .7em; color: var(--mute); }
.flag__t { display: block; font: 300 clamp(40px, 5.2vw, 90px)/.94 var(--f-display); letter-spacing: -.055em; }
.flag__t .it { font-size: 1.12em; margin-left: .04em; }
.flag__d { max-width: 44ch; font: 300 clamp(17px, 1.35vw, 21px)/1.5 var(--f-text); color: var(--ivory-2); }
.flag__inc { display: flex; flex-wrap: wrap; gap: 8px; }
.flag__inc li { padding: 7px 12px 8px; border: 1px solid var(--rule-2); font: 400 13.5px/1 var(--f-text); color: var(--ivory); transition: border-color var(--d-fast) var(--ease); }
.flag:hover .flag__inc li { border-color: rgba(239, 232, 220, .45); }
.flag__go { margin-top: 6px; position: static; }
/* весь блок — ссылка на лендинг: кнопка растянута на блок; обложки кейсов лежат выше и ведут каждая в свой кейс */
.flag__go::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.flag__go:focus-visible { outline: 1px solid var(--ivory); outline-offset: 4px; }
.flag__cases { position: relative; z-index: 2; }
.flag__cases .deck--flag { width: min(100%, 300px); margin: 8px 0 92px; }
.flag:hover .flag__go { background: #fff; }
.flag:hover .flag__go svg { transform: translateX(4px); }
.flag__side { display: grid; align-content: space-between; gap: 32px; }
.flag__who, .flag__cases { display: grid; gap: 10px; }
.flag__who ul { display: flex; flex-wrap: wrap; row-gap: 4px; font: 300 clamp(20px, 1.9vw, 30px)/1.2 var(--f-display); letter-spacing: -.035em; }
.flag__who li { white-space: nowrap; }
.flag__who li:not(:last-child)::after { content: "·"; margin: 0 .45em; color: var(--mute); }
.flag__cases .cycle { min-height: 3.6em; font: 300 clamp(17px, 1.4vw, 21px)/1.3 var(--f-text); color: var(--ivory-2); }
.flag__cases .cycle li::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 10px; border-radius: 50%; background: var(--red); vertical-align: .15em; }

/* все услуги — в две колонки, чтобы список читался с одного взгляда */
.helpband .help__list--all { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--cg); border-top: 0; }
.helpband .help__list--all li { border-top: 1px solid var(--ink); border-bottom: 0; }
.helpband .help__list--all li:nth-last-child(-n+2) { border-bottom: 1px solid var(--fog-rule); }
.helpband .help__list--all a { grid-template-columns: 3.4ch minmax(0, 1fr) 22px; row-gap: 6px; align-items: baseline; }
.helpband .help__list--all .help__n { grid-column: 1; grid-row: 2; }
.helpband .help__list--all .help__topic { grid-column: 2; grid-row: 1; }
.helpband .help__list--all .help__topic:empty { display: none; }
.helpband .help__list--all .help__svc { grid-column: 2; grid-row: 2; font-size: clamp(21px, 1.85vw, 29px); }
.helpband .help__list--all .help__what { grid-column: 2; grid-row: 3; }
.helpband .help__list--all .help__proof { grid-column: 2; grid-row: 4; }
.helpband .help__list--all .help__a { grid-column: 3; grid-row: 2; }
@media (max-width: 960px) {
  .flag { grid-template-columns: minmax(0, 1fr); }

}
@media (max-width: 760px) {
  .helpband .help__list--all { grid-template-columns: minmax(0, 1fr); }
  .helpband .help__list--all li:nth-last-child(2) { border-bottom: 0; }
}

/* ===== sections/home.css ===== */
.stage { padding-top: clamp(24px, 4vh, 48px); position: relative; overflow: clip; }
.stage__in { position: relative; }
.stage__bar { display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
.stage__type { position: relative; margin-top: clamp(36px, 4.4vw, 76px); }
.stage__title { position: relative; z-index: 2; display: block; }
.stage__l1 { display: block; font: 300 clamp(26px, 4.3vw, 70px)/1.04 var(--f-display); letter-spacing: -.045em; }
.stage__word { display: inline-block; font: var(--t-hero); letter-spacing: -.055em; white-space: nowrap; margin-left: -.04em; }
.stage__foot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); row-gap: 32px; margin-top: clamp(36px, 3.6vw, 64px); align-items: end; }
@media (max-width: 760px) {
  .stage__word { font-size: 12vw; }
  .stage__foot { margin-top: 24px; }
}
.stage__title a { display: block; color: inherit; }
.stage__word { font-size: clamp(64px, 16vw, 272px); line-height: .84; }
.stage__l3 { display: block; max-width: 11.5em; margin-top: .28em; font: 300 clamp(24px, 3.2vw, 54px)/1.04 var(--f-display); letter-spacing: -.045em; color: var(--ivory-2); }
.stage__foot { display: grid; grid-template-columns: minmax(0, 52ch); gap: 18px; justify-items: start; margin-top: clamp(28px, 3vw, 48px); position: relative; z-index: 4; }
.stage__foot .lede { max-width: 50ch; font-size: clamp(17px, 1.3vw, 20px); }
.stage__meta { display: flex; flex-wrap: wrap; gap: 6px 22px; font: 400 11.5px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.stage__rub { color: var(--ivory); display: inline-flex; align-items: center; gap: 8px; }
.stage__rub i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.fresh { padding-top: clamp(72px, 8vw, 128px); }
.fresh__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); row-gap: clamp(40px, 4vw, 64px); align-items: start; }
.fresh__grid > .card--xl { grid-column: 1 / span 8; grid-row: 1 / span 2; }
.fresh__grid > .card--xl .card__pic { margin-left: var(--bleed-l); }
.wide { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); row-gap: 36px; align-items: center; max-width: var(--maxw); margin-inline: auto; padding: clamp(150px, 13vw, 220px) var(--gut) clamp(72px, 8vw, 120px); }
.wide__pic { grid-column: 1 / span 7; margin-left: var(--bleed-l); display: block; overflow: hidden; aspect-ratio: 1024 / 704; background: var(--wall-2); }
.wide__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.8s var(--slow); }
.wide__pic:hover img, .wide:hover .wide__pic img { transform: scale(1.03); }
.wide__txt { grid-column: 9 / span 4; display: grid; gap: 18px; justify-items: start; }
.wide__big { font: 200 clamp(84px, 9.4vw, 156px)/.8 var(--f-display); letter-spacing: -.07em; color: var(--ivory); margin: 10px 0 4px -.04em; }
.wide__t { font: var(--t-title-m); letter-spacing: -.035em; }
@media (max-width: 1180px) {
  .fresh__grid > .card--xl { grid-column: 1 / span 7; }
}
@media (max-width: 1080px) {
  .wide__txt { grid-column: 8 / span 5; }
}
@media (max-width: 960px) {
  .fresh__grid > .card--xl { grid-column: 1 / -1; grid-row: auto; }
  .fresh__grid > .card--xl .card__pic { margin-inline: calc(-1 * var(--gut)); }
  .wide__pic { grid-column: 1 / -1; margin-inline: calc(-1 * var(--gut)); }
  .wide__txt { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .stage__word { font-size: 17vw; }
  .stage__l3 { font-size: clamp(22px, 6.4vw, 30px); }
}
@media (max-width: 640px) {
  .wide__big { font-size: 96px; }
}
.stage .stage__type { margin-top: clamp(28px, 3vw, 48px); }
.stage__word { text-shadow: 0 0 .18em rgba(11, 10, 9, .7), 0 0 .04em rgba(11, 10, 9, .85); }
.fresh__grid > .card--xl { grid-row: auto; }
.fresh__side { grid-column: 9 / span 4; display: grid; row-gap: clamp(40px, 4vw, 64px); align-content: start; min-width: 0; }
@media (max-width: 1180px) {
  .fresh__side { grid-column: 8 / span 5; }
}
@media (max-width: 960px) {
  .fresh__side { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--cg); }
}
@media (max-width: 640px) {
  .fresh__side { grid-template-columns: 1fr; }
}

/* ===== article/layout.css ===== */
.readbar { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 70; pointer-events: none; }
.readbar i { position: absolute; inset: 0; background: var(--ivory); transform-origin: left; transform: scaleX(0); opacity: .9; }
.readbar b { position: absolute; top: -2px; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--red); transform: translateX(-3px); opacity: 0; transition: opacity .4s; }
.byline__pic { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--rule-2); display: grid; place-items: center; flex: none; font: 300 14px/1 var(--f-display); letter-spacing: -.02em; color: var(--ivory); }
.prose > * + * { margin-top: 1.05em; }
.prose a:not(.btn) { background: linear-gradient(var(--rule-2), var(--rule-2)) 0 100% / 100% 1px no-repeat; transition: background-image .4s; }
.prose a:not(.btn):hover { background-image: linear-gradient(var(--ivory), var(--ivory)); }
.prose ul { padding-left: 0; display: grid; gap: .4em; }
.prose ul > li { position: relative; padding-left: 28px; }
.prose ul > li::before { content: ""; position: absolute; left: 4px; top: .82em; width: 12px; height: 1px; background: var(--mute); }
.prose b, .prose strong { font-weight: 500; color: var(--ivory); }
.a-intro p + p { margin-top: 1.05em; }
.a-h3 { font: var(--t-heading); letter-spacing: -.03em; color: var(--ivory); margin-top: 2.1em !important; scroll-margin-top: 110px; }
.note { margin-block: 2.8em !important; display: grid; grid-template-columns: auto 1fr; gap: 0 22px; padding: 28px 0; border-top: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); }
.note__eye { grid-row: 1 / span 3; width: 40px; height: 40px; margin-top: 2px; }
.note__k { font: 500 11px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.note__t { font: 300 clamp(19px, 1.5vw, 22px)/1.5 var(--f-text); color: var(--ivory); margin-top: 10px; }
.note__a { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; font-size: 15px; }
.art { overflow-x: clip; }
.a-stage { padding-top: clamp(24px, 4vh, 44px); position: relative; }
.a-stage__bar { display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--rule); position: relative; z-index: 4; }
.a-path { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; }
.a-path a:hover { color: var(--ivory); }
.a-path__dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--red); margin-right: 8px; vertical-align: 1px; }
.a-stage__type { position: relative; margin-top: clamp(40px, 4vw, 72px); }
.a-title { position: relative; z-index: 2; font: var(--t-title); letter-spacing: -.05em; }
.a-title__l { display: block; }
.a-title__l2 { text-align: right; padding-right: 3vw; text-shadow: 0 0 .2em rgba(11, 10, 9, .75), 0 0 .05em rgba(11, 10, 9, .9); }
.a-title__l4 { font-size: .4em; letter-spacing: -.035em; margin-top: .55em; color: var(--ivory-2); }
.a-stage__foot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); row-gap: 32px; margin-top: clamp(28px, 2.6vw, 44px); align-items: start; position: relative; z-index: 4; }
.a-dek { grid-column: 1 / span 6; font-size: clamp(18px, 1.35vw, 20px); max-width: 52ch; }
.credits { grid-column: 1 / span 6; border-top: 1px solid var(--rule-2); display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--cg); }
.credits div:nth-child(-n+2) { grid-column: 1 / -1; }
.credits div { display: grid; grid-template-columns: 9ch 1fr; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--rule); }
.credits dt { font: 400 11px/1.75 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.credits dd { font-size: 14px; color: var(--ivory-2); line-height: 1.5; }
.byline__pic { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--rule-2); display: grid; place-items: center; flex: none; font: 300 14px/1 var(--f-display); letter-spacing: -.02em; color: var(--ivory); }
.a-body {
  --toc-w: clamp(196px, 17vw, 250px); --gut-w: clamp(56px, 5.6vw, 92px); --gap-w: clamp(28px, 3vw, 44px); --notes-w: clamp(150px, 14vw, 210px);
  display: grid; grid-template-columns: var(--toc-w) var(--gut-w) minmax(0, 1fr) var(--gap-w) var(--notes-w);
  max-width: calc(var(--toc-w) + var(--gut-w) + 690px + var(--gap-w) + var(--notes-w) + 2 * var(--gut));
  margin: clamp(80px, 9vw, 144px) auto 0; padding-inline: var(--gut);
}
.toc { grid-column: 1; position: relative; }
.toc__in { position: sticky; top: 104px; max-height: calc(100vh - 128px); overflow-y: auto; padding-right: 8px; scrollbar-width: none; }
.toc__in::-webkit-scrollbar { display: none; }
.toc__top { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid var(--rule); margin-bottom: 18px; }
.toc__top::-webkit-details-marker { display: none; }
.toc__top [data-read] { color: var(--ivory-2); }
.toc__part + .toc__part { margin-top: 20px; }
.toc a { position: relative; display: block; padding: 5px 0 5px 14px; font: 400 14px/1.45 var(--f-text); color: var(--mute); transition: color .4s var(--ease); }
.toc a::before { content: ""; position: absolute; left: 0; top: .95em; width: 5px; height: 5px; border-radius: 50%; background: transparent; transform: scale(.4); transition: background-color .4s, transform .6s var(--slow); }
.toc a:hover { color: var(--ivory-2); }
.toc .toc__h { color: var(--ivory-2); font-size: 14.5px; }
.toc__h i { display: block; font: 400 10.5px/1.7 var(--f-mono); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.toc ol a { display: grid; grid-template-columns: 2.2ch 1fr; gap: 8px; }
.toc ol .k { font: 400 11px/1.95 var(--f-mono); color: #6F685E; }
.toc a.is-read { color: #77705F; }
.toc a.is-active { color: var(--ivory); }
.toc a.is-active::before { background: var(--red); transform: scale(1); }
.toc [data-toc-grp] > summary { list-style: none; cursor: pointer; padding: 2px 0 4px 14px; font: 400 11px/1.6 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.toc [data-toc-grp] > summary::-webkit-details-marker { display: none; }
.toc [data-toc-grp] > summary::after { content: " +"; }
.toc [data-toc-grp][open] > summary::after { content: " −"; }
.toc [data-toc-grp] ol { margin-left: 14px; border-left: 1px solid var(--rule); padding-left: 2px; }
.toc [data-toc-grp] ol a::before { left: -2px; }
.prose { grid-column: 3; min-width: 0; font: var(--t-prose); color: #E4DCCF; }
.a-intro p:first-child { font: 300 clamp(20px, 1.6vw, 23px)/1.6 var(--f-text); color: var(--ivory); }
.a-intro p:first-child::first-letter { float: left; font: 300 4.4em/.76 var(--f-display); margin: .1em .1em 0 -.03em; color: var(--ivory); }
@supports (initial-letter: 3) {
  .a-intro p:first-child::first-letter { float: none; font-family: var(--f-display); font-weight: 300; initial-letter: 3; margin: 0 .16em 0 0; line-height: 1; }
}
.a-h3--step { position: relative; }
.prose .side { float: right; clear: right; width: var(--notes-w); margin: .35em calc(-1 * (var(--notes-w) + var(--gap-w))) 1em 0 !important; padding-top: 10px; border-top: 1px solid var(--rule-2); font-size: 13px; line-height: 1.5; color: var(--mute); }
.side__h { font: 500 12.5px/1.4 var(--f-text); color: var(--ivory-2); margin-bottom: 8px; }
.side p + p { margin-top: 6px; }
.side__q { font: 300 15px/1.4 var(--f-display) !important; letter-spacing: -.02em; color: var(--ivory); }
.fn { font: 500 .6em/0 var(--f-mono); vertical-align: super; margin-left: 1px; }
.prose .fn a, .side .fn a { background: none; color: var(--ivory-2); padding: 0 1px; }
.prose .fn a:hover { color: var(--ivory); }
.notes { margin-top: 3em !important; border-top: 1px solid var(--rule-2); padding-top: 14px; }
.notes ol { margin-top: 14px; display: grid; gap: 8px; counter-reset: n; }
.notes li { counter-increment: n; position: relative; padding-left: 3ch; font-size: 14px; line-height: 1.5; color: var(--ivory-2); scroll-margin-top: 120px; }
.notes li::before { content: counter(n); position: absolute; left: 0; font: 400 12px/1.75 var(--f-mono); color: var(--mute); }
.notes li:target { color: var(--ivory); }
@media (max-width: 1180px) {
  .a-body { grid-template-columns: var(--toc-w) var(--gut-w) minmax(0, 1fr); max-width: none; }
  .prose .side { float: none; width: auto; margin: 1.8em 0 !important; padding: 12px 0 0; }
}
@media (max-width: 960px) {
  .a-body { display: block; }
  .toc { margin-bottom: 40px; }
  .toc__in { position: static; max-height: none; overflow: visible; padding: 0; }
  .toc__box { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
  .toc__top { margin-bottom: 0; border-bottom: 0; padding: 16px 0; }
  .toc__top::after { content: "+"; font: 300 20px/1 var(--f-text); color: var(--ivory-2); margin-left: 12px; }
  .toc__box[open] .toc__top::after { content: "−"; }
  .toc__box[open] { padding-bottom: 16px; }
  .a-dek, .credits { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .prose { font-size: 17.5px; }
  .a-intro p:first-child { font-size: 19px; }
  .a-title { font-size: clamp(34px, 10.4vw, 44px); }
  .a-title__l4 { font-size: .5em; }
  .credits { grid-template-columns: 1fr; }
  .credits div { grid-template-columns: 8ch 1fr; }
}
@media (min-width: 1700px) {
  .prose { font-size: 20px; }
}
@media (max-width: 960px) {
  .page-article { padding-bottom: 80px; }
}
@media (max-width: 640px) {
  .prose { font-size: 17.5px; }
}
.page-article { padding-bottom: 0 !important; }
.a-body { --abw: calc(var(--toc-w) + var(--gut-w) + 690px + var(--gap-w) + var(--notes-w) + 2 * var(--gut)); --side: calc((100vw - min(100vw, var(--abw))) / 2 + var(--gut)); --lead: calc(var(--side) + var(--toc-w) + var(--gut-w)); --trail: calc(var(--side) + var(--gap-w) + var(--notes-w)); }
@media (max-width: 960px) {
  .a-body { --lead: var(--gut); }
  .a-stage__bar > p:last-child { display: none; }
}
.toc__in { transition: opacity .45s var(--ease), transform .7s var(--slow), visibility 0s linear 0s; }
.toc__in.is-off { opacity: 0; transform: translateY(-12px); visibility: hidden; pointer-events: none; transition: opacity .3s var(--ease), transform .5s var(--slow), visibility 0s linear .3s; }
/* полоса сразу после статьи: отступ от подписи автора; коробке ЧЕК — место сверху, чтобы она не задевала текст */
.art + .band { margin-top: clamp(80px, 8vw, 128px); }
.art + .check { margin-top: clamp(190px, 18vw, 300px); }

/* ===== article/blocks.css ===== */
.keynums { container-type: inline-size; margin-block: 2.4em !important; border-top: 1px solid var(--ivory); padding-top: 18px; }
.keynums__head { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; margin-bottom: 8px; }
.keynums dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.keynum { display: grid; gap: 10px; align-content: start; padding: 26px 20px 26px 0; border-bottom: 1px solid var(--rule); container-type: inline-size; }
.keynum:nth-child(2n) { padding-left: 20px; border-left: 1px solid var(--rule); }
.keynum dd { order: -1; font: 300 min(64px, 21cqi)/1 var(--f-display); letter-spacing: -.05em; white-space: nowrap; color: var(--ivory); }
.keynum dt { font-size: 14px; line-height: 1.45; color: var(--ivory-2); max-width: 26ch; }
.keynums__note { margin-top: 14px; font-size: 13px; color: var(--mute); }
.fig { margin-block: 2.2em !important; }
.fig img { width: 100%; background: var(--wall-2); }
.fig figcaption { margin-top: 14px; font: var(--t-caption); color: var(--mute); letter-spacing: .02em; max-width: 60ch; display: flex; gap: 12px; }
.fig figcaption::before { content: ""; flex: none; width: 18px; height: 1px; background: var(--mute); margin-top: .78em; }
.fig--pair .fig__row, .fig--quad .fig__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fig--quad .fig__row { grid-template-columns: repeat(4, 1fr); }
.fig--shots .fig__row { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; margin-top: 12px; align-items: start; }
/* фото — ссылка на полный размер (без подчёркивания текста); ряд фото разной пропорции — одна высота, ширина по пропорции */
.fig .fig__zoom { display: block; background: none !important; cursor: zoom-in; }
.fig .fig__zoom + .fig__zoom { margin: 0; }
.fig .fig__row--fit { display: flex !important; gap: 12px; align-items: flex-start; }
.fig .fig__row--fit > .fig__zoom { flex: 1 1 0; min-width: 0; }
.chart { margin-block: 2.6em !important; border-top: 1px solid var(--ivory); padding-top: 18px; }
.chart__title { font: 400 clamp(19px, 1.5vw, 22px)/1.3 var(--f-display); letter-spacing: -.03em; color: var(--ivory); }
.chart__sub { font-size: 14px; color: var(--mute); margin-top: 6px !important; }
.chart__plot { position: relative; height: 300px; margin-top: 36px; }
.chart__grid { position: absolute; inset: 0 0 34px 34px; }
.chart__grid span { position: absolute; left: -34px; right: 0; bottom: calc(var(--y) * 100%); border-top: 1px solid var(--rule); }
.chart__grid em { position: absolute; left: 0; top: -8px; font: 400 11px/1 var(--f-mono); font-style: normal; color: var(--mute); }
.chart__cols { position: absolute; inset: 0 0 0 34px; display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); gap: clamp(10px, 2vw, 28px); }
.col { position: relative; display: grid; grid-template-rows: 1fr 34px; outline: none; cursor: default; }
.col__bar { align-self: end; height: calc(var(--v) * (100%)); background: linear-gradient(to top, rgba(239,232,220,.9), rgba(239,232,220,.55)); transform-origin: bottom; transition: background .5s var(--ease), transform 1.4s var(--slow); position: relative; }
.col__val { position: absolute; left: 0; right: 0; bottom: calc(34px + var(--v) * (100% - 34px) + 8px); text-align: center; font: 300 18px/1 var(--f-display); letter-spacing: -.03em; color: var(--ivory); }
.col__city { align-self: center; text-align: center; font: 400 12px/1 var(--f-mono); color: var(--ivory-2); letter-spacing: .04em; }
.col:hover .col__bar, .col:focus-visible .col__bar { background: var(--red); }
.col:focus-visible { outline: 1px solid var(--ivory); outline-offset: 6px; }
.chart.is-armed:not(.is-in) .col__bar { transform: scaleY(0); }
.chart.is-in .col { transition-delay: calc(var(--i) * 90ms); }
.chart.is-in .col__bar { transition-delay: calc(var(--i) * 90ms), calc(var(--i) * 90ms); }
.chart__tip { position: absolute; z-index: 2; transform: translate(-50%, -100%); background: var(--ivory); color: var(--ink); padding: 10px 14px; pointer-events: none; white-space: nowrap; display: grid; gap: 2px; font-size: 13px; }
.chart__tip b { font: 400 15px/1.2 var(--f-display); letter-spacing: -.02em; color: var(--ink); }
.chart__src { margin-top: 18px; font: 400 12px/1.4 var(--f-mono); color: var(--mute); }
.chart__table { margin-top: 12px; font-size: 14px; }
.chart__table summary { cursor: pointer; color: var(--ivory-2); font-size: 14px; width: fit-content; }
.chart__table table { width: 100%; border-collapse: collapse; margin-top: 14px; font-variant-numeric: tabular-nums; }
.chart__table th, .chart__table td { text-align: left; padding: 8px 0; border-bottom: 1px solid var(--rule); font-weight: 400; }
.chart__table td { text-align: right; }
.pull { margin-block: 2.6em !important; padding-block: 8px; display: grid; gap: 18px; }
.pull blockquote { margin: 0; font: 300 clamp(22px, 2vw, 30px)/1.32 var(--f-display); letter-spacing: -.035em; color: var(--ivory); text-indent: -.45em; }
.pull figcaption { font: 400 12px/1.5 var(--f-mono); color: var(--mute); letter-spacing: .02em; }
.steps { margin-block: 2em !important; border-top: 1px solid var(--rule); }
.stp { border-bottom: 1px solid var(--rule); }
.stp > summary { list-style: none; cursor: pointer; position: relative; display: grid; grid-template-columns: 1fr 20px; gap: 14px; align-items: baseline; padding: 20px 0; transition: padding .6s var(--slow); }
.stp > summary::-webkit-details-marker { display: none; }
.stp > summary:hover { padding-left: 8px; }
.stp > summary h3 { font: 400 clamp(18px, 1.4vw, 21px)/1.35 var(--f-display); letter-spacing: -.025em; color: var(--ivory); scroll-margin-top: 110px; }
.stp__pm { position: relative; width: 14px; height: 14px; align-self: center; }
.stp__pm::before, .stp__pm::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--ivory-2); transition: transform .6s var(--slow); }
.stp__pm::after { transform: rotate(90deg); }
.stp[open] .stp__pm::after { transform: rotate(0); }
.stp__body { padding: 0 0 28px; display: grid; gap: 1em; font-size: 18px; }
.pack { margin-block: 2.2em !important; border: 1px solid var(--rule-2); padding: clamp(20px, 2.4vw, 32px); }
.pack__head { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.ring { width: 44px; height: 44px; transform: rotate(-90deg); flex: none; }
.ring__track { fill: none; stroke: var(--rule-2); stroke-width: 1.5; }
.ring__fill { fill: none; stroke: var(--ivory); stroke-width: 1.5; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .9s var(--slow), opacity .3s; opacity: 0; }
.pack__title { font: 400 18px/1.3 var(--f-display); letter-spacing: -.02em; color: var(--ivory); }
.pack__count { font: 400 12px/1.4 var(--f-mono); color: var(--mute); letter-spacing: .04em; margin-top: 4px !important; }
.pack__reset { margin-left: auto; background: none; border: 0; color: var(--mute); font-size: 13px; cursor: pointer; padding: 6px 0; border-bottom: 1px solid var(--rule-2); }
.pack__reset:hover { color: var(--ivory); }
.prose .pack__list li { border-top: 1px solid var(--rule); padding-left: 0; }
.prose .pack__list li::before { content: none; }
.pack__item { display: flex; align-items: center; gap: 16px; padding: 14px 0; cursor: pointer; font-size: 17px; }
.pack__item input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pack__box { width: 20px; height: 20px; border: 1px solid var(--ivory-2); flex: none; position: relative; transition: background-color .4s, border-color .4s; }
.pack__box::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid var(--ink); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) scale(0); transition: transform .5s var(--slow); }
.pack__item input:checked + .pack__box { background: var(--ivory); border-color: var(--ivory); }
.pack__item input:checked + .pack__box::after { transform: rotate(45deg) scale(1); }
.pack__item input:checked ~ .pack__label { color: var(--mute); text-decoration: line-through; text-decoration-thickness: 1px; }
.pack__item input:focus-visible + .pack__box { outline: 2px solid var(--ivory); outline-offset: 3px; }
.pack__done { margin-top: 14px !important; font-size: 15px; color: var(--ivory); }
.people { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cg); border-top: 1px solid var(--rule); }
.person { padding-top: 24px; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
.person p { font-size: 15px; color: var(--ivory-2); line-height: 1.5; }
.person b { color: var(--ivory); font-weight: 500; }
.related { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); row-gap: 56px; align-items: start; }
.stepno { position: absolute; right: calc(100% + 18px); top: -.18em; font: 200 clamp(46px, 4.4vw, 70px)/.9 var(--f-display); letter-spacing: -.06em; color: var(--ivory-2); text-align: right; white-space: nowrap; }
.stepno small { display: block; font: 400 10px/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-bottom: 4px; }
.stepno--sm { top: 50%; transform: translateY(-50%); font-size: clamp(26px, 2.2vw, 36px); color: var(--mute); }
.stp > summary:hover .stepno--sm, .stp[open] .stepno--sm { color: var(--ivory); }
.part { position: relative; margin-top: 3.6em !important; padding-top: 1.1em; border-top: 1px solid var(--ivory); scroll-margin-top: 110px; }
.part__k { font: 400 11px/1.5 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.part__t { font: var(--t-part); letter-spacing: -.045em; color: var(--ivory); margin-top: .35em; max-width: 13ch; }
.part__num { position: absolute; z-index: -1; top: -.04em; left: calc(100% + var(--gap-w) + var(--notes-w) * .25); font: 200 clamp(220px, 25vw, 440px)/.8 var(--f-display); letter-spacing: -.08em; color: transparent; -webkit-text-stroke: 1px rgba(239, 232, 220, .32); white-space: nowrap; pointer-events: none; }
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
    .part__num { animation: float linear both; animation-timeline: view(); animation-range: cover; }
}}
.mini { margin: 10px 0 12px; }
.mini__row { display: grid; grid-template-columns: 1fr auto; gap: 5px 8px; align-items: baseline; margin-bottom: 10px; font-size: 12px; }
.mini__row b { font: 400 14px/1 var(--f-display); letter-spacing: -.02em; color: var(--ivory); white-space: nowrap; }
.mini__row i { grid-column: 1 / -1; height: 3px; background: var(--rule); position: relative; }
.mini__row i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--w) * 100%); background: var(--ivory-2); }
.fig--wide, .pull { margin-right: calc(-1 * (var(--notes-w) + var(--gap-w))) !important; }
.pull blockquote { font-size: clamp(24px, 2.4vw, 38px); }
.people { margin-top: 2.4em !important; }
.pyr { margin-block: 2.4em !important; border-top: 1px solid var(--rule); padding-top: 14px; }
.pyr__t { font: 400 11px/1.5 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin-bottom: 18px; }
.pyr ol { display: grid; gap: 6px; margin-right: calc(-1 * (var(--notes-w) + var(--gap-w))); }
.pyr li { display: grid; grid-template-columns: minmax(0, 1fr) var(--notes-w); column-gap: var(--gap-w); align-items: center; }
.pyr__lvl { justify-self: center; width: var(--w); border: 1px solid var(--rule-2); padding: 14px 16px; text-align: center; display: grid; gap: 2px; font: 400 16px/1.3 var(--f-display); letter-spacing: -.02em; color: var(--ivory); transition: border-color .5s, background-color .5s; }
.pyr__lvl small { font: 400 12px/1.4 var(--f-text); letter-spacing: 0; color: var(--mute); }
.pyr__lvl--top { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.pyr__lvl:not(.pyr__lvl--top):hover { border-color: var(--ivory); background: rgba(239, 232, 220, .04); }
.pyr__n { position: relative; font-size: 12.5px; line-height: 1.4; color: var(--mute); }
.pyr__n:not(:empty)::before { content: ""; position: absolute; right: calc(100% + 8px); top: .7em; width: calc(var(--gap-w) - 14px); height: 1px; background: var(--rule-2); }
.pyr figcaption { margin-top: 14px; font: 400 12px/1.5 var(--f-mono); color: var(--mute); }
@media (max-width: 1180px) {
  .fig--wide, .pull, .pyr ol { margin-right: 0 !important; }
  .pyr li { grid-template-columns: minmax(0, 1fr) 150px; column-gap: 24px; }
  .part__num { left: auto; right: calc(-1 * var(--gut) - 2vw); font-size: 24vw; }
}
@media (max-width: 960px) {
  .stepno { position: static; display: block; margin-bottom: 10px; text-align: left; font-size: 46px; }
  .stepno small { display: inline; margin-right: 10px; }
  .stp > summary { grid-template-columns: auto 1fr 20px; }
  .stepno--sm { position: static; transform: none; display: inline; font-size: 22px; margin: 0; }
  .part__num { right: -6vw; font-size: 42vw; }
}
@media (max-width: 640px) {
  .pyr li { grid-template-columns: 1fr; row-gap: 4px; }
  .pyr__n { text-align: center; }
  .pyr__n::before { display: none; }
  .fig--quad .fig__row { grid-template-columns: 1fr 1fr; }
  .fig--quad .fig__row { grid-template-columns: 1fr 1fr; }
  /* одно фото в «паре» (узкий скриншот): на телефоне во всю ширину, иначе мелкий текст на нём не читается */
  .fig--pair .fig__row > .fig__zoom:only-child { grid-column: 1 / -1; }
  .chart__plot { height: 260px; }
  .col__city { font-size: 10px; }
  .people { grid-template-columns: 1fr; }
}
.part { position: relative; isolation: isolate; margin-top: 3.4em !important; padding: clamp(52px, 5vw, 84px) 0 clamp(56px, 5.4vw, 92px); border-top: 0; }
.part::before { content: ""; position: absolute; z-index: -2; top: 0; bottom: 0; left: calc(-1 * var(--gut-w)); right: -100vw; background: var(--band); }
.part--fog { --band: var(--fog); color: var(--ink); }
.part--red { --band: var(--red); color: #fff; }
.part .part__k { color: inherit; }
.part--fog .part__k { color: var(--fog-mute); }
.part .part__t { color: inherit; max-width: 12ch; }
.part__sum { margin-top: 20px !important; max-width: 34ch; font: 400 16px/1.5 var(--f-text); }
.part--fog .part__sum { color: var(--fog-ink-2); }
.part--red .part__sum { color: #fff; }
.part .part__num { z-index: -1; top: auto; bottom: 0; left: auto; right: calc(-1 * var(--trail) + .03em); font: 200 clamp(240px, 27vw, 440px)/.74 var(--f-display); letter-spacing: -.08em; -webkit-text-stroke: 0; animation: none; }
.part--fog .part__num { color: var(--ink); }
.part--red .part__num { color: var(--wall); }
/* длинный заголовок может зайти на номер: ореол цвета полосы вокруг букв, слово читается целиком */
.part--fog .part__t { text-shadow: 0 0 .05em var(--fog), 0 0 .1em var(--fog), 0 0 .18em var(--fog); }
.part--red .part__t { text-shadow: 0 0 .05em var(--red), 0 0 .1em var(--red), 0 0 .18em var(--red); }
.part--red ::selection { background: var(--ink); color: #fff; }
.prose .bleed { position: relative; z-index: 6; width: 100vw; margin: 3.2em 0 !important; margin-left: calc(-1 * var(--lead)) !important; }
.bleed img { width: 100%; height: min(88vh, 60vw); object-fit: cover; object-position: 50% 58%; background: var(--wall-2); }
.bleed__tag { position: absolute; left: 50%; bottom: clamp(16px, 2.4vw, 32px); transform: translateX(-50%); background: #fff; color: var(--ink); padding: 5px 10px 6px; font: 400 13.5px/1.2 var(--f-text); white-space: nowrap; box-shadow: 0 0 0 1px rgba(11, 10, 9, .08); }
.chart.chart--band { position: relative; isolation: isolate; margin-block: 3.4em !important; margin-right: calc(-1 * (var(--notes-w) + var(--gap-w))) !important; padding: clamp(40px, 4vw, 64px) 0 clamp(44px, 4.4vw, 72px); border-top: 0; color: var(--ink); color-scheme: light; }
.chart--band::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(-1 * var(--gut-w)); right: -100vw; background: var(--fog); }
.chart--band .chart__title { color: var(--ink); font-size: clamp(24px, 2.2vw, 34px); max-width: 22ch; }
.chart--band .chart__sub, .chart--band .chart__src { color: var(--fog-mute); }
.chart--band .chart__plot { height: clamp(300px, 26vw, 400px); margin-top: 52px; }
.chart--band .chart__grid span { border-top-color: var(--fog-rule); }
.chart--band .chart__grid em { color: var(--fog-mute); }
.chart--band .col__bar { background: var(--ink); }
.chart--band .col:first-child .col__bar { background: var(--red); }
.chart--band .col:hover .col__bar, .chart--band .col:focus-visible .col__bar { background: var(--red); }
.chart--band .col__val { color: var(--ink); font-size: clamp(18px, 1.6vw, 24px); }
.chart--band .col__city { color: var(--fog-ink-2); }
.chart--band .col:focus-visible { outline-color: var(--ink); }
.chart--band .chart__tip { background: var(--ink); color: var(--ivory); }
.chart--band .chart__tip b { color: var(--ivory); }
.chart--band .chart__table summary { color: var(--fog-ink-2); }
.chart--band .chart__table th, .chart--band .chart__table td { border-bottom-color: var(--fog-rule); }
.chart--band .fn a { color: var(--fog-ink-2) !important; }
.chart--band :focus-visible { outline-color: var(--ink); }
.pdfband { margin-top: clamp(80px, 8vw, 128px); padding-block: clamp(64px, 7vw, 112px); }
.pdfband__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); row-gap: 40px; align-items: center; }
.pdfdoc { grid-column: 1 / span 2; justify-self: start; width: clamp(110px, 10vw, 150px); aspect-ratio: 210 / 297; background: #fff; padding: 12px; display: grid; align-content: space-between; transform: rotate(4deg); box-shadow: 0 34px 36px -16px rgba(11, 10, 9, .4); position: relative; }
.pdfdoc span { font: 500 8px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fog-mute); }
.pdfdoc b { font: 400 clamp(12px, 1vw, 15px)/1.1 var(--f-display); letter-spacing: -.03em; color: var(--ink); }
.pdfdoc i { position: absolute; right: 12px; top: 12px; width: 9px; height: 9px; border-radius: 50%; background: var(--red); }
.pdfband__txt { grid-column: 3 / span 5; display: grid; gap: 14px; justify-items: start; }
.pdfband__t { font: 300 clamp(36px, 4.6vw, 76px)/.94 var(--f-display); letter-spacing: -.055em; }
/* на телефоне длинное слово («Онлайн-экскурсия») помещается целиком: кегль от ширины экрана */
@media (max-width: 640px) { .pdfband__t { font-size: clamp(26px, 8.2vw, 36px); } }
.pdfband__txt > p:last-child { font-size: 16px; color: var(--fog-ink-2); }
.pdfband__form { grid-column: 9 / span 4; gap: 22px; }
.related .card:nth-child(1) { grid-column: 1 / span 5; }
.related .card:nth-child(2) { grid-column: 7 / span 3; margin-top: 96px; }
.related .card:nth-child(3) { grid-column: 10 / span 3; }
@media (max-width: 1180px) {
  .chart.chart--band { margin-right: 0 !important; }
  .chart--band::before { right: calc(-1 * var(--gut)); }
  .part::before { right: calc(-1 * var(--gut)); }
  .part .part__num { left: auto; right: calc(-1 * var(--gut) - .1em); font-size: clamp(200px, 26vw, 320px); }
}
@media (max-width: 960px) {
  .related .card:nth-child(n) { grid-column: 1 / -1; margin-top: 0; }
  .related .card:nth-child(2) { grid-column: 4 / -1; }
  .pdfdoc { grid-column: 1 / span 3; }
  .pdfband__txt { grid-column: 4 / -1; }
  .pdfband__form { grid-column: 1 / -1; }
  .part::before, .chart--band::before { left: calc(-1 * var(--gut)); right: calc(-1 * var(--gut)); }
  .part .part__num { right: calc(-1 * var(--gut) - .08em); font-size: 44vw; }
}
@media (max-width: 640px) {
  .pdfdoc, .pdfband__txt { grid-column: 1 / -1; }
  .bleed img { height: 72vw; }
}
@media (max-width: 960px) {
  .part .part__num { position: relative; display: block; left: auto; right: auto; bottom: auto; text-align: right; margin: 28px calc(-1 * var(--gut) - .06em) calc(-1 * clamp(52px, 5vw, 84px) - .02em) 0; font-size: 40vw; line-height: .74; }
}
@media (max-width: 640px) {
  .pyr__lvl { padding: 12px 8px; font-size: 14px; min-width: 9.4em; }
}
.toc [data-toc-grp]::details-content, .stp::details-content, .toc__box::details-content {
  block-size: 0; overflow: clip; transition: block-size .6s var(--slow), content-visibility .6s allow-discrete;
}
.toc [data-toc-grp][open]::details-content, .stp[open]::details-content, .toc__box[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) {
  .toc [data-toc-grp]::details-content, .stp::details-content, .toc__box::details-content { transition: none; }
}

/* фото на всю ширину внутри свёрнутого шага: складка обрезает всё, что шире её */
.stp__body .fig--wide { margin-right: 0 !important; }

/* ===== article/core.css ===== */
/* Обычные блоки редактора WordPress в тексте статьи: заголовки, списки, цитаты, картинки, таблицы, видео.
   Правила касаются только того, что выводит редактор: элементы без классов прямо в .prose или с классами wp-block-*.
   Блоки дизайн-системы (.fig, .pull, .chart, .side…) этими правилами не задеваются. */
.prose > :where(h2:not([class]), h2.wp-block-heading) { font: 400 clamp(23px, 1.9vw, 29px)/1.25 var(--f-display); letter-spacing: -.035em; color: var(--ivory); margin-top: 2.3em; scroll-margin-top: 110px; }
.prose > :where(h3:not([class]), h3.wp-block-heading) { font: var(--t-heading); letter-spacing: -.03em; color: var(--ivory); margin-top: 2em; scroll-margin-top: 110px; }
:is(.prose, .stp__body) > :where(h4:not([class]), h4.wp-block-heading) { font: 500 19px/1.4 var(--f-text); color: var(--ivory); margin-top: 1.8em; scroll-margin-top: 110px; }
:is(.prose, .stp__body) > :where(h2:not([class]), h2.wp-block-heading, h3:not([class]), h3.wp-block-heading, h4:not([class]), h4.wp-block-heading) + :where(p, ul, ol) { margin-top: .7em; }
:is(.prose, .stp__body) > :where(ol:not([class]), ol.wp-block-list) { padding-left: 0; display: grid; gap: .45em; counter-reset: li; list-style: none; }
:is(.prose, .stp__body) > :where(ol:not([class]), ol.wp-block-list) > li { position: relative; padding-left: 36px; counter-increment: li; }
:is(.prose, .stp__body) > :where(ol:not([class]), ol.wp-block-list) > li::before { content: counter(li) "."; position: absolute; left: 0; top: .25em; font: 400 13px/1.4 var(--f-mono); color: var(--mute); }
.prose > :where(ul, ol) li > :where(ul, ol) { margin-top: .45em; }
.prose > :where(p:empty) { display: none; }
.prose > :where(blockquote:not([class]), .wp-block-quote) { margin-inline: 0; padding: .2em 0 .2em 24px; border-left: 1px solid var(--red); font: 300 clamp(19px, 1.5vw, 22px)/1.55 var(--f-text); color: var(--ivory); }
.prose > :where(blockquote:not([class]), .wp-block-quote) cite { display: block; margin-top: .8em; font: var(--t-caption); font-style: normal; color: var(--mute); }
.prose :where(.wp-block-image, figure:not([class]), .wp-caption, left) img { display: block; max-width: 100%; height: auto; background: var(--wall-2); }
.prose > :where(p) img { max-width: 100%; height: auto; }
.prose > :where(figure:not([class]), .wp-block-image, .wp-caption) { margin-inline: 0; }
.prose :where(.wp-block-image figcaption, figure:not([class]) figcaption, .wp-element-caption, .wp-caption-text) { margin-top: 10px; font: var(--t-caption); color: var(--mute); }
.prose :where(.aligncenter) { margin-inline: auto; text-align: center; }
.prose :where(.aligncenter) img { margin-inline: auto; }
.prose :where(.alignleft) { float: left; margin: .3em 1.4em .8em 0; max-width: 50%; }
.prose :where(.alignright) { float: right; margin: .3em 0 .8em 1.4em; max-width: 50%; }
.prose :where(.wp-caption) { max-width: 100%; }
.prose :where(left) { display: block; }
.prose > :where(hr, .wp-block-separator) { border: 0; border-top: 1px solid var(--rule-2); margin-block: 2.4em; }
.prose > table, .prose :where(.wp-block-table) table { width: 100%; border-collapse: collapse; font: 400 15.5px/1.5 var(--f-text); color: var(--ivory-2); }
.prose > table th, .prose :where(.wp-block-table) th { text-align: left; font: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); padding: 10px 14px 10px 0; border-bottom: 1px solid var(--rule-2); vertical-align: bottom; }
.prose > table td, .prose :where(.wp-block-table) td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.prose > table td img { margin: 0; }
.prose :where(.wp-block-table) { overflow-x: auto; }
.prose :where(iframe) { display: block; width: 100%; max-width: 100%; border: 0; background: var(--wall-2); }
.prose :where(iframe[src*="youtube"], iframe[src*="youtu.be"], iframe[src*="vk.com/video"], iframe[src*="rutube"], .wp-block-embed iframe) { aspect-ratio: 16 / 9; height: auto; }
/* ролик YouTube по клику (inc/content.php → us_yt_lite): обложка 16:9 в сером, цвет и кнопка под курсором; по клику на её месте плеер */
.ytl { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--wall-2); overflow: hidden; }
.ytl__a { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink); }
.ytl img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.78); transition: filter var(--d-mid) var(--ease); }
.ytl__a:hover img, .ytl__a:focus-visible img { filter: none; }
.ytl__btn { position: relative; display: grid; place-items: center; width: clamp(60px, 6vw, 84px); aspect-ratio: 1; border-radius: 50%; background: var(--ivory);
  box-shadow: 0 0 0 2px var(--red), 0 24px 48px -18px rgba(0, 0, 0, .85); transition: transform .8s var(--slow), background-color .4s var(--ease); }
.ytl__btn svg { width: 30%; height: 30%; margin-left: 7%; }
.ytl__a:hover .ytl__btn, .ytl__a:focus-visible .ytl__btn { transform: scale(1.08); background: #fff; }
.ytl__a:focus-visible { outline: 1px solid var(--ivory); outline-offset: -1px; }
.ytl iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.prose :where(.wp-block-video video, video:not([class])) { display: block; width: 100%; height: auto; }
/* вертикальные ролики (рилсы из кейсов) не выше экрана; два-три подряд — в ряд: группа ядра с классом vids */
.prose .wp-block-video { margin-block: 2em; }
.prose .wp-block-video video { width: auto; max-width: 100%; max-height: min(78vh, 720px); background: var(--wall-2); }
.prose .wp-block-video figcaption, .prose .vids__cap { font: var(--t-caption); color: var(--mute); margin-top: 12px; }
.prose .vids { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 12px; align-items: start; margin-block: 2em; }   /* на телефоне — по два в ряд */
.prose .vids > * + * { margin-top: 0; }
.prose .vids .wp-block-video { margin: 0; }
.prose .vids .wp-block-video video { width: 100%; max-height: none; aspect-ratio: 9 / 16; object-fit: cover; }
.prose :where(p, li) > code { font: 400 .88em/1.4 var(--f-mono); background: var(--wall-3); padding: 1px 5px; }
.prose > :where(pre) { overflow-x: auto; background: var(--wall-3); padding: 16px; font: 400 14px/1.6 var(--f-mono); }
.prose :where(.has-text-align-center) { text-align: center; }
.prose :where(.has-text-align-right) { text-align: right; }
.prose :where(.wp-block-buttons) { display: flex; flex-wrap: wrap; gap: 12px; }
.prose :where(.wp-block-button__link) { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; background: var(--ivory); color: var(--ink); font: var(--t-ui); background-image: none; }
@media (max-width: 640px) {
  .prose :where(.alignleft, .alignright) { float: none; margin: 1em 0; max-width: 100%; }
  .prose > table, .prose :where(.wp-block-table) table { font-size: 14.5px; }
}

/* ===== components/agency.css ===== */
/* Первый экран главной: кто мы и чем занимаемся + шесть предложений агентства (вместо слайдера старого сайта) */
.agency { padding-top: clamp(20px, 3vh, 40px); padding-bottom: clamp(56px, 5.6vw, 96px); }
.agency__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); }
.agency__bar { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; }

/* кто мы */
.agency__who { grid-column: 1 / span 5; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(22px, 2.2vw, 34px); padding-top: clamp(28px, 2.8vw, 44px); padding-right: clamp(0px, 1.6vw, 28px); }
.agency__t { position: relative; z-index: 5; font: 300 clamp(36px, 3.75vw, 64px)/1 var(--f-display); letter-spacing: -.052em; }
.agency__t .it { display: block; margin-top: .08em; font-size: 1.2em; line-height: .9; letter-spacing: -.02em; }
.agency__lede { max-width: 32ch; font: var(--t-lede); color: var(--ivory-2); }
.agency__do { display: grid; gap: 10px; width: 100%; }
.agency__do ul { display: flex; flex-wrap: wrap; row-gap: 4px; font: 400 16px/1.45 var(--f-text); }
.agency__do li:not(:last-child)::after { content: "/"; margin: 0 .55em; color: var(--mute); }
.agency__do a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .6s var(--slow); }
.agency__do a:hover { background-size: 100% 1px; }
.agency__go { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.go-note { flex-basis: 100%; max-width: 40ch; font: 400 13px/1.45 var(--f-text); color: var(--mute); }

/* предложения: лента карточек + вкладки; без JS ленту листают пальцем или колесом */
.offers { grid-column: 6 / -1; min-width: 0; display: grid; gap: 14px; align-content: start; padding-top: clamp(28px, 2.8vw, 44px); }
.offers__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; position: relative; }
.offers__track::-webkit-scrollbar { display: none; }
.offer {
  --pad: clamp(22px, 2.5vw, 42px); --k: rgba(239, 232, 220, .72); --d: var(--ivory-2);
  flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always;
  position: relative; overflow: hidden; container-type: inline-size;
  min-height: clamp(380px, 31vw, 520px); padding: var(--pad);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: clamp(16px, 2vw, 32px);
  grid-template-rows: auto 1fr auto auto auto auto;
  grid-template-areas: "k k" "f f" "t t" "d d" "n n" "go go";
  background: var(--wall-3); color: var(--ivory);
}
.offer--dark { box-shadow: inset 0 0 0 1px var(--rule); }
.offer--red { --k: rgba(255, 255, 255, .86); --d: #fff; background: var(--red); color: #fff; }
.offer--fog { --k: var(--fog-mute); --d: var(--fog-ink-2); background: var(--fog); color: var(--ink); }
.offer--ivory { --k: var(--ink-mute); --d: var(--ink-2); background: var(--ivory); color: var(--ink); }
.offer__k { grid-area: k; position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 4px 0; font: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--k); }
.offer__k span:not(:last-child)::after { content: "·"; margin: 0 .7em; }
.offer__i { color: inherit; }
.offer__t { grid-area: t; position: relative; z-index: 2; max-width: 15em; margin-top: 18px; font: 300 clamp(28px, 5.8cqi, 50px)/1 var(--f-display); letter-spacing: -.05em; }
.offer__d { grid-area: d; position: relative; z-index: 2; max-width: 46ch; margin-top: 14px; font: 300 clamp(15px, 2.3cqi, 17.5px)/1.5 var(--f-text); color: var(--d); }
.offer__note { grid-area: n; position: relative; z-index: 2; max-width: 52ch; margin-top: 12px; font: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--k); }
.offer__go { grid-area: go; position: static; z-index: 2; justify-self: start; margin-top: 22px; }
.offer__go::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.offer--red .btn--ink:hover, .offer--red:hover .btn--ink { background: #fff; color: var(--ink); }
.offer--fog:hover .btn--ink, .offer--ivory:hover .btn--ink { background: var(--red); color: #fff; }
.offer--dark:hover .btn--ivory { background: #fff; }
.offer:hover .offer__go svg { transform: translateX(4px); }
.offer__go:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

/* правая часть карточки: у каждого предложения свой предмет — телефон с ботом, видео, клиенты, эксперты курса, пластинка */
.offer { grid-template-areas: "k f" "sp f" "t f" "d f" "n f" "go f"; grid-template-rows: auto 1fr auto auto auto auto; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.offer__fig { grid-area: f; position: relative; z-index: 1; min-width: 0; }
.offer__flabel { font: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--k); }

/* видео с upsound.ai — на всю карточку, текст на затемнении слева */
.offer--video { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
/* видео занимает правые 72% карточки: человек в кадре стоит справа от текста, а не под ним */
.offer__fig--video { grid-area: auto; position: absolute; inset: 0 0 0 28%; z-index: 0; overflow: hidden; }
.offer__vid { width: 100%; height: 100%; object-fit: cover; object-position: 30% 0%; display: block; filter: saturate(.85); transform-origin: 50% 0; transform: scale(1.16); transition: transform 1.6s var(--slow), filter 1s var(--ease); }
.offer--video:hover .offer__vid { transform: scale(1.12); filter: saturate(1.05); }
.offer__fig--video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--wall-3) 0%, rgba(11, 10, 9, .7) 22%, rgba(11, 10, 9, 0) 52%), linear-gradient(0deg, rgba(11, 10, 9, .45), transparent 36%); }

/* телефон с ботом ЧЕК — выходит за низ карточки, покачивается */
.offer__fig--phone { align-self: end; margin: 0 calc(-1 * var(--pad) - 10%) calc(-1 * var(--pad) - 22%) -46%; }
.offer__fig--phone img { --rx: 0; --ry: 0; display: block; width: 100%; height: auto; transform: perspective(1000px) rotateX(calc(var(--rx) * 1deg)) rotateY(calc(var(--ry) * 1deg)); transition: transform .9s var(--slow); }
@media (prefers-reduced-motion: no-preference) { .offer__fig--phone { animation: float 6s ease-in-out infinite alternate; } }

/* по очереди: клиенты и эксперты (site.js, [data-cycle]); без JS — первый */
.cycle { position: relative; }
.cycle > li { transition: opacity .9s var(--ease), transform 1.2s var(--slow); }
.cycle > li:not(:first-child) { position: absolute; inset: 0 0 auto 0; opacity: 0; }
.cycle.is-run > li { position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateY(14px); }
.cycle.is-run > li.is-on { opacity: 1; transform: none; }

.offer__fig--clients { display: grid; grid-template-rows: auto 1fr; align-content: start; justify-items: end; gap: 14px; padding-top: 4px; }
/* обложки — ссылки на кейсы, лежат выше ссылки всей карточки (.offer__go::after); пустое место вокруг ведёт, как раньше, на лендинг */
.offer__fig--clients { z-index: 4; pointer-events: none; }
.offer__fig--clients .deck a { pointer-events: auto; }
.offer__fig--clients .deck--offer { align-self: end; width: min(100%, 190px); margin-bottom: 62px; }
.offer--fog .deck__t { color: var(--ink); font-size: 15px; }
.offer--fog .deck__go { color: var(--fog-mute); }
.offer--fog .deck a:hover .deck__go { color: var(--ink); }
.offer__fig--clients .cycle { min-height: 1.1em; font: 300 clamp(26px, 6cqi, 52px)/.95 var(--f-display); letter-spacing: -.055em; text-align: right; white-space: nowrap; }
.offer__fig--clients .offer__flabel { text-align: right; }

/* эксперты курса: по одному, крупно справа, бюст стоит на нижнем крае карточки; смена по очереди (site.js, [data-cycle]).
   Бюсты на общем холсте 460×380: одна шкала лица, голова и плечи, одна ч/б обработка — размер и тон у всех одинаковые (обход 28.10 19:01).
   Блок заходит влево под текст, но не под кнопку «Программа курса» (~214px): 100cqi − 100% — левая колонка с промежутком, 230px — кнопка с зазором.
   Узкая карточка (961–1180) и телефон: подпись прямо над головой. Широкая: подпись слева от головы, низ — на линии низа описания (ниже).
   От человека до подписи — ровный отступ --gap у всех шестерых: от макушки (--t) и левого края силуэта (--l) по прозрачности, data/experts-busts.json */
.offer__fig--experts { --gap: 5.3cqi; align-self: stretch; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; margin: 0 calc(-1 * var(--pad)) calc(-1 * var(--pad)) max(-46%, calc(230px + 100% - 100cqi)); }
.offer__fig--experts .offer__flabel { padding-right: var(--pad); text-align: right; }
.offer__fig--experts .cycle > li { height: 100%; display: grid; align-content: end; }
.offer__fig--experts img { display: block; width: 100%; height: auto; }
/* подпись заходит на прозрачный верх холста: низ подписи — на --gap выше макушки (высота бюста — 82,6 % ширины ячейки) */
.offer__fig--experts li p { position: relative; z-index: 1; justify-self: end; max-width: min(30ch, calc(100% - 24px)); margin-bottom: calc(var(--gap) - var(--t, .2) * 82.6%); padding-right: var(--pad); display: grid; gap: 4px; text-align: right; }
@media (min-width: 1181px), (min-width: 641px) and (max-width: 960px) {
  /* --bw — ширина бюста, --bleed — насколько плечо уходит за правый край. Правый край подписи — на --gap левее силуэта (--l — доля ширины бюста).
     Низ подписи — на линии низа описания: под описанием кнопка (52px) и отступ 22px.
     Описание у этой карточки уже, чтобы подпись помещалась между ним и головой */
  .offer__fig--experts { --bw: min(54cqi, 400px); --bleed: 16px; }
  .offer__fig--experts .cycle:not(.is-run) > li:first-child { position: relative; }
  .offer__fig--experts img { position: absolute; right: calc(-1 * var(--bleed)); bottom: 0; width: var(--bw); }
  .offer__fig--experts li p { position: absolute; right: calc(var(--bw) * (1 - var(--l, .3)) - var(--bleed) + var(--gap)); bottom: calc(var(--pad) + 76px); width: max-content; max-width: 160px; margin: 0; padding: 0; }
  .offer--experts .offer__d { max-width: 24ch; }
}
.offer__fig--experts b { font: 400 17px/1.15 var(--f-display); letter-spacing: -.03em; }
.offer__fig--experts p span { font-size: 12.5px; line-height: 1.35; color: var(--d); }

/* эксперты курса на орбите — та же сцена, что после статьи (css/components/cband.css), в карточке слайдера (владелец 28.10).
   --W — ширина бюста, --R — радиус: у карточки радиус меньше, чем в статье, — соседи выглядывают из-за плеч переднего.
   --cap — место под подписью переднего: самая длинная (Орлов) — имя и три строки.
   Блок заходит влево под текст на 32 % своей колонки; на светлой карточке дальние бюсты не темнеют, а тают в фоне */
.offer__fig--orbit { --W: min(31cqi, 230px); --R: calc(var(--W) * .72); --cap: max(calc(var(--W) * .5), 92px); --step: 4s;
  align-self: stretch; display: grid; grid-template-rows: minmax(0, 1fr); margin: 0 calc(-1 * var(--pad)) 0 -32%; }
/* «+30 спикеров ещё» над орбитой — тот же элемент, что у сцены курса (.cband__more), в цветах карточки.
   Стоит в свободном верхнем углу поверх блока: карточка не становится выше, слайды не прыгают */
.offer__fig--orbit .cband__more { position: absolute; top: 0; bottom: auto; margin: 0; padding-right: var(--pad); grid-template-columns: auto auto; align-items: center; column-gap: 14px; text-align: left; color: inherit; }
.offer__fig--orbit .cband__more b { font-size: clamp(36px, 7cqi, 52px); }
.offer__fig--orbit .cband__more span { color: var(--k); }
.offer__fig--orbit .cband__stage { grid-column: auto; align-self: end; height: calc(var(--W) * 1.12 + var(--cap)); margin: 0; }
.offer__fig--orbit .cband__stage::before, .offer__fig--orbit .cband__ring { bottom: var(--cap); }
.offer__fig--orbit .cband__p figcaption { top: calc(100% + 10px); }
.offer__fig--orbit .cband__p b { font-size: 17px; color: inherit; }
.offer__fig--orbit .cband__p span { max-width: 26ch; font: 400 12.5px/1.35 var(--f-text); letter-spacing: 0; color: var(--d); }
.offer--orbit .offer__d { max-width: 24ch; }
.offer--ivory .cband__stage::before, .offer--fog .cband__stage::before { background: radial-gradient(closest-side, rgba(11, 10, 9, .12), rgba(11, 10, 9, 0)); }
@supports (opacity: cos(0deg)) {
  .offer--ivory .cband__p img, .offer--fog .cband__p img { filter: grayscale(1) contrast(1.05); opacity: calc(.14 + .43 * (cos(var(--t)) + 1)); }
}
/* стоит под курсором (вся карточка — ссылка) и пока карточка не на экране слайдера */
@media (prefers-reduced-motion: no-preference) {
  .offer:hover .cband__ring, .offers.is-js .offer:not(.is-cur) .cband__ring { animation-play-state: paused; }
}
/* «уменьшить движение»: один передний эксперт с подписью, без ряда из сцены статьи */
@media (prefers-reduced-motion: reduce) {
  .offer__fig--orbit .cband__ring { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .offer__fig--orbit .cband__p:not(:first-child) { display: none; }
  .offer__fig--orbit .cband__p { width: min(100%, calc(var(--W) * 1.3)); }
  .offer__fig--orbit .cband__p span { margin-inline: auto; }
}

/* пластинка дистрибуции — медленно крутится, выходит за правый нижний угол */
.offer__fig--vinyl { align-self: end; display: grid; margin: 0 calc(-1 * var(--pad) - 22%) calc(-1 * var(--pad) - 22%) 0; }
.offer__vinyl { grid-area: 1 / 1; width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .6)); }
@media (prefers-reduced-motion: no-preference) { .offer__vinyl { animation: spin 26s linear infinite; } .offer:hover .offer__vinyl { animation-duration: 9s; } }
.offer__vnum { grid-area: 1 / 1; align-self: start; justify-self: start; z-index: 2; display: grid; gap: 6px; margin: -8px 0 0 -6%; font: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--k); }
.offer__vnum b { font: 200 clamp(56px, 13cqi, 116px)/.8 var(--f-display); letter-spacing: -.06em; color: var(--ivory); text-transform: none; }
/* барабан площадок дистрибуции: грани по кругу (rotateX), окно с красными линиями — «попадание»; шаг — раз в 2,2 с */
.offer__fig--reel { align-self: stretch; display: grid; grid-template-rows: auto 1fr auto; gap: 14px; margin-right: calc(-1 * var(--pad)); padding-right: var(--pad); }
.offer__fig--reel .offer__vnum { margin: 0; }
.offer__fig--reel .offer__vnum b { font-size: clamp(44px, 10cqi, 84px); }
.reel { --h: clamp(46px, 9.4cqi, 66px); position: relative; align-self: center; height: calc(var(--h) * 3.4); perspective: 700px; -webkit-mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent); mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent); }
.reel::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: var(--h); translate: 0 -50%; border-block: 1px solid var(--red); pointer-events: none; }
.reel__drum { --rz: calc(var(--h) * 1.038); /* радиус для 7 граней: h / 2 / tan(180° / 7) */ position: absolute; inset: 0; transform-style: preserve-3d; transform: translateZ(calc(-1 * var(--rz))) rotateX(0deg); }
.reel__drum li { position: absolute; left: 0; right: 0; top: 50%; height: var(--h); margin-top: calc(var(--h) / -2); display: flex; align-items: center; backface-visibility: hidden; background: var(--wall-3);
  transform: rotateX(calc(var(--i) * -360deg / var(--n))) translateZ(var(--rz)); font: 300 clamp(18px, 4.4cqi, 30px)/1 var(--f-display); letter-spacing: -.04em; color: var(--ivory); white-space: nowrap; }
.reel__note { max-width: 30ch; }
@media (prefers-reduced-motion: no-preference) { .reel__drum { animation: reel-7 15.4s cubic-bezier(.7, 0, .2, 1) infinite; } .offer:not(.is-cur) .reel__drum { animation-play-state: paused; } }
@keyframes reel-7 {
  0%, 10% { transform: translateZ(calc(-1 * var(--rz))) rotateX(0deg); }
  14.3%, 24.3% { transform: translateZ(calc(-1 * var(--rz))) rotateX(51.43deg); }
  28.6%, 38.6% { transform: translateZ(calc(-1 * var(--rz))) rotateX(102.86deg); }
  42.9%, 52.9% { transform: translateZ(calc(-1 * var(--rz))) rotateX(154.29deg); }
  57.1%, 67.1% { transform: translateZ(calc(-1 * var(--rz))) rotateX(205.71deg); }
  71.4%, 81.4% { transform: translateZ(calc(-1 * var(--rz))) rotateX(257.14deg); }
  85.7%, 95.7% { transform: translateZ(calc(-1 * var(--rz))) rotateX(308.57deg); }
  100% { transform: translateZ(calc(-1 * var(--rz))) rotateX(360deg); }
}
@keyframes spin { to { rotate: 360deg; } }
@keyframes float { from { translate: 0 -6px; } to { translate: 0 8px; } }

/* текущая карточка: предмет въезжает, когда вкладка переключилась */
@media (prefers-reduced-motion: no-preference) {
  .offers.is-js .offer .offer__fig:not(.offer__fig--video) { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease) .15s, transform 1.2s var(--slow) .15s; }
  .offers.is-js .offer.is-cur .offer__fig:not(.offer__fig--video) { opacity: 1; transform: none; }
}

/* справка у имени: видео из студии и факты */
.who { position: relative; display: inline-block; cursor: help; outline: none; }
.who .it { background: linear-gradient(currentColor, currentColor) 0 92% / 100% 1px no-repeat; }
.tip { position: absolute; left: 0; top: calc(100% + 14px); z-index: 30; width: min(340px, 80vw); display: grid; background: var(--wall-2); border: 1px solid var(--rule-2); box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .9);
  font: 400 14px/1.45 var(--f-text); letter-spacing: 0; color: var(--ivory-2); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .35s var(--ease), transform .6s var(--slow), visibility 0s linear .6s; }
.who:hover .tip, .who:focus-within .tip, .who:focus .tip { opacity: 1; visibility: visible; transform: none; transition: opacity .35s var(--ease), transform .6s var(--slow), visibility 0s; }
.tip__vid { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.tip__txt { display: grid; gap: 8px; padding: 14px 16px 16px; }
.tip__txt b { font: 400 19px/1.1 var(--f-display); letter-spacing: -.03em; color: var(--ivory); }
.tip__txt li::before { content: "— "; color: var(--mute); }

.offers__tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 10px; }
.offers__tab { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: 8px; padding: 13px 0 4px; border-top: 1px solid var(--rule-2); font: 400 13px/1.3 var(--f-text); color: var(--mute); transition: color var(--d-fast) var(--ease); }
.offers__n { font: 400 11px/1.45 var(--f-mono); letter-spacing: .06em; }
.offers__tab:hover, .offers__tab.is-on { color: var(--ivory); }
.offers__tab:focus-visible { outline: 1px solid var(--ivory); outline-offset: 4px; }
.offers__bar { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--ivory); transform: scaleX(0); transform-origin: 0 50%; }
.offers__tab.is-on .offers__bar { transform: scaleX(1); }
.offers.is-auto .offers__tab.is-on .offers__bar { animation: offers-run var(--offer-t, 7s) linear both; }
.offers.is-paused .offers__tab.is-on .offers__bar { animation-play-state: paused; }
@keyframes offers-run { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* цифры и клиенты */
/* клиенты: имена набирают вес под курсором */
.agency__cl { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); row-gap: 12px; align-items: baseline; margin-top: clamp(48px, 4.6vw, 80px); }
.agency__cl .eyebrow { grid-column: 1 / span 2; }
.agency__cl ul { grid-column: 3 / -1; display: flex; flex-wrap: wrap; row-gap: 6px; font: 300 clamp(20px, 1.9vw, 32px)/1.25 var(--f-display); letter-spacing: -.035em; color: var(--ivory-2); }
.agency__cl li { white-space: nowrap; transition: color var(--d-fast) var(--ease); }
.agency__cl li:hover, .agency__cl li:focus-within { color: var(--ivory); }
/* имя с фото артиста: превью у курсора и с клавиатуры (site.js, .peek--artist) */
.agency__cl [data-peek] { outline: none; }
.agency__cl [data-peek]:focus-visible { outline: 1px solid var(--ivory); outline-offset: 4px; }
.agency__cl li:not(:last-child)::after { content: "·"; margin: 0 .45em; color: var(--mute); }
/* переход к журналу: без второй «шапки» с линией */
.agency + .stage .stage__bar { border-bottom: 0; padding-bottom: 0; }
.agency + .stage { padding-top: clamp(40px, 4vw, 72px); }

@media (max-width: 1180px) {
  .agency__who { grid-column: 1 / span 6; }
  .offers { grid-column: 7 / -1; }
  .offers__tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 6px; }
}
@media (min-width: 961px) and (max-width: 1180px) {
  .offer__fig--orbit { margin-left: -18%; }   /* карточка узкая: дальний бюст не заходит на описание */
}
@media (max-width: 960px) {
  .agency__who, .offers { grid-column: 1 / -1; }
  .agency__who { padding-right: 0; }
  .agency__t { font-size: clamp(34px, 6.4vw, 56px); }
  .offers { padding-top: 40px; }
  .offers__tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .agency__cl .eyebrow, .agency__cl ul { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .agency__bar { flex-direction: column; }
  .offers__track { gap: 10px; margin-right: calc(-1 * var(--gut)); padding-right: var(--gut); scroll-padding-left: 0; }
  .offer { flex-basis: 88%; min-height: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "k" "f" "t" "d" "n" "go"; }
  .offer { grid-template-areas: "f" "k" "t" "d" "n" "go"; grid-template-rows: auto; }
  .offer__fig { margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) 18px; height: 230px; overflow: hidden; }
  .offer__fig--video { position: relative; inset: auto; }
  .offer__fig--video::after { background: linear-gradient(0deg, var(--wall-3), transparent 50%); }
  .offer--video .offer__k, .offer--video .offer__t, .offer--video .offer__d, .offer--video .offer__go { max-width: none; }
  .offer__fig--phone { display: grid; place-items: center; animation: none; }
  .offer__fig--phone img { width: 92%; margin-top: 30px; }
  .offer__fig--clients { padding: var(--pad) var(--pad) 0; align-content: center; height: auto; min-height: 150px; }
  .offer__fig--clients .cycle { font-size: 40px; text-align: left; }
  .offer__fig--clients .offer__flabel { text-align: left; }
  /* эксперт на телефоне — внизу карточки: стоит на её нижнем крае, как на компьютере */
  .offer--experts { grid-template-areas: "k" "t" "d" "n" "go" "f"; }
  .offer__fig--experts { align-self: stretch; align-content: end; grid-template-rows: auto; height: auto; overflow: visible; margin: 26px calc(-1 * var(--pad)) calc(-1 * var(--pad)); }
  .offer__fig--experts .cycle { height: 250px; }
  .offer__fig--experts img { justify-self: center; width: 72%; }
  .offer__fig--experts .offer__flabel, .offer__fig--experts li p { justify-self: start; padding: 0 var(--pad); text-align: left; }
  .offer__fig--experts li p { margin-bottom: calc(var(--gap) - var(--t, .2) * 59.5%); }   /* бюст — 72 % ширины */
  /* орбита на телефоне — сверху карточки, как предметы других карточек */
  .offer__fig--orbit { --W: 116px; --R: calc(var(--W) * .9); height: 300px; padding-top: var(--pad); margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) 6px; }
  .offer__fig--orbit .cband__more { top: var(--pad); left: 0; right: auto; justify-content: start; padding: 0 var(--pad); }
  .offer__fig--clients { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; justify-items: start; overflow: hidden; }
  .offer__fig--clients .deck--offer { grid-column: 2; grid-row: 1 / -1; width: 150px; margin: 0 0 -60px; }
  .offer__fig--clients .deck__t { display: none; }
  .offer__fig--reel { margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) 18px; padding: var(--pad) var(--pad) 0; height: 250px; }
  .reel { --h: 46px; height: 120px; }
  .reel__note { display: none; }
  .offer__fig--vinyl { height: 230px; margin-bottom: 18px; place-items: center; }
  .offer__vinyl { width: 78%; }
  .offer__vnum { margin: 14px 0 0 var(--pad); }
  .offer__t { margin-top: 20px; font-size: clamp(26px, 8.4cqi, 34px); }
  .offers__tabs { column-gap: 6px; }
  .offers__tab { padding: 0; height: 12px; }
  .offers__n, .offers__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .agency__cl li:nth-child(n+11) { display: none; }
  .agency__cl ul { font-size: 20px; }
}

/* ===== components/box3d.css ===== */
/* коробка ЧЕК в 3D: настоящий куб из трёх граней картинки cut-box.webp (развёртка — tools/box3d_unwarp.mjs).
   Камера подобрана так, что в покое куб совпадает с картинкой. Единица --u — один пиксель исходника 900×773 при текущей ширине.
   Движение: медленно «дышит» (CSS), за курсором поворачивается (assets/js/box3d.js задаёт --rx/--ry и свет граней).
   На сенсорных экранах, при «уменьшить движение» и без JS стоит в исходном ракурсе. */
.box3d {
  --W: 649.1; --H: 434.1; --D: 574.4; --cx: 3.4; --cy: -27.6; --P: 4308;        /* из box3d_unwarp.mjs */
  --ry0: -40.91deg; --rx0: -26.77deg; --rz0: -.85deg;
  --u: calc(100cqw / 900);
  --rx: 0deg; --ry: 0deg;
  grid-column: 7 / span 6; width: 100%; max-width: 540px; justify-self: end; margin-right: clamp(0px, 3vw, 48px);
  margin-block: calc(-1 * clamp(150px, 15vw, 250px)) -24px;
  position: relative; z-index: 1; aspect-ratio: 900 / 773; container-type: inline-size; pointer-events: none;
}
@media (max-width: 960px) {
  .box3d { grid-column: 1 / -1; grid-row: 1; width: min(78%, 440px); justify-self: center; margin: calc(-1 * clamp(120px, 24vw, 200px)) 0 0; }
}
/* браузеры без единиц контейнера (Safari до 16): ширина коробки — примерно от окна */
@supports not (width: 1cqw) {
  .box3d { --u: min(.6px, .048vw); }
  @media (max-width: 960px) { .box3d { --u: min(.489px, .0778vw); } }
}
.box3d__scene { position: absolute; inset: 0; perspective: calc(var(--P) * var(--u)); }
.box3d__rig, .box3d__float, .box3d__cube { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.box3d__rig { left: 50%; top: 50%;
  transform: translate(calc(var(--cx) * var(--u)), calc(var(--cy) * var(--u))) rotateZ(var(--rz0)) rotateX(calc(var(--rx0) + var(--rx))); }
.box3d__cube { transform: rotateY(calc(var(--ry0) + var(--ry))); }

/* грани: размер в единицах исходника, на 1px шире с каждой стороны — без щелей на рёбрах */
.box3d__f { --fw: var(--W); --fh: var(--H); --dz: var(--D);
  position: absolute; left: 0; top: 0; width: calc(var(--fw) * var(--u) + 2px); height: calc(var(--fh) * var(--u) + 2px);
  margin: calc(var(--fh) * var(--u) / -2 - 1px) 0 0 calc(var(--fw) * var(--u) / -2 - 1px);
  background: #2A2623; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.box3d__f img { display: block; width: 100%; height: 100%; }
.box3d__f::before, .box3d__f::after { content: ""; position: absolute; inset: 0; }
.box3d__f::after { background: var(--tone, transparent); }
.box3d__f--front { transform: translateZ(calc(var(--D) * var(--u) / 2)); --tone: var(--tone-front); }
.box3d__f--side { --fw: var(--D); transform: rotateY(90deg) translateZ(calc(var(--W) * var(--u) / 2)); --tone: var(--tone-side); }
.box3d__f--top { --fh: var(--D); transform: rotateX(90deg) translateZ(calc(var(--H) * var(--u) / 2)); --tone: var(--tone-top); }
.box3d__f--back { transform: rotateY(180deg) translateZ(calc(var(--D) * var(--u) / 2)); }
.box3d__f--left { --fw: var(--D); transform: rotateY(-90deg) translateZ(calc(var(--W) * var(--u) / 2)); }
.box3d__f--bottom { --fh: var(--D); transform: rotateX(-90deg) translateZ(calc(var(--H) * var(--u) / 2)); background: #1A1715; }
/* свет: к низу и к дальнему ребру грани темнеют; задние грани — в тени */
.box3d__f--front::before { background: linear-gradient(to top, rgba(11, 10, 9, .26), rgba(11, 10, 9, 0) 34%); }
.box3d__f--side::before { background: linear-gradient(to top, rgba(11, 10, 9, .3), rgba(11, 10, 9, 0) 40%), linear-gradient(to right, rgba(11, 10, 9, 0) 45%, rgba(11, 10, 9, .18)); }
.box3d__f--top::before { background: linear-gradient(to bottom, rgba(11, 10, 9, .1), rgba(11, 10, 9, 0) 45%); }
.box3d__f--back::after, .box3d__f--left::after { background: rgba(11, 10, 9, .6); }

/* тень на полу: мягкий эллипс под дном, поворачивается вместе с коробкой */
.box3d__shadow { position: absolute; left: 0; top: 0; width: calc(var(--W) * var(--u) * 1.5); height: calc(var(--D) * var(--u) * 1.5);
  margin: calc(var(--D) * var(--u) * -.75) 0 0 calc(var(--W) * var(--u) * -.75);
  transform: translateY(calc((var(--H) / 2 + 26) * var(--u))) rotateY(calc(var(--ry0) + var(--ry))) rotateX(90deg);
  background: radial-gradient(closest-side, rgba(60, 0, 4, .62), rgba(60, 0, 4, .3) 58%, rgba(60, 0, 4, 0)); }

/* дыхание: подъём и поворот идут с разным периодом — движение не повторяется по кругу */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .box3d__float { animation: box3d-lift 6.5s ease-in-out infinite alternate, box3d-turn 9.5s ease-in-out infinite alternate; }
  .box3d__shadow { animation: box3d-shade 6.5s ease-in-out infinite alternate; }
  .box3d.is-off .box3d__float, .box3d.is-off .box3d__shadow { animation-play-state: paused; }
}
@keyframes box3d-lift { from { translate: 0 calc(-14 * var(--u)); } to { translate: 0 calc(10 * var(--u)); } }
@keyframes box3d-turn { from { rotate: .18 1 .06 -4deg; } to { rotate: .18 1 .06 4deg; } }
@keyframes box3d-shade { from { opacity: .72; scale: .93 1 .93; } to { opacity: 1; scale: 1.02 1 1.02; } }

/* ===== components/cband.css ===== */
/* Полоса курса «Музыкальный бизнес» после статьи (блок upsound/banner, kind=course; DS: build/cband.py).
   Тёмная сцена: бюсты экспертов курса стоят по кругу (CSS 3D) и по очереди выходят вперёд — у переднего видна подпись.
   Без «уменьшить движение» и под курсором — стоит. При «уменьшить движение» — ряд бюстов без поворота. Владелец 28.10: вместо «белой книжки». */
.cband { --W: clamp(150px, 17vw, 270px); --R: calc(var(--W) * 1.25); --step: 4s;
  overflow: hidden; color: var(--ivory); padding-block: clamp(72px, 8vw, 128px) clamp(64px, 7vw, 112px);
  background: radial-gradient(56% 64% at 30% 72%, #221D19 0%, rgba(34, 29, 25, 0) 70%), var(--wall); border-top: 1px solid var(--rule); }
.cband__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); row-gap: clamp(28px, 3vw, 48px); align-items: end; }
.cband__head { grid-column: 1 / -1; position: relative; z-index: 3; }
.cband__head .eyebrow i { font-style: normal; color: var(--ivory-2); }
.cband__dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--red); margin-right: 10px; vertical-align: 1px; }
.cband__t { font: var(--t-banner); letter-spacing: -.06em; margin-top: 18px; color: var(--ivory); }
.cband__t .it { font-size: 1.12em; margin-left: .04em; letter-spacing: -.02em; color: var(--ivory); }

/* сцена: шесть бюстов на орбите. Каждый смотрит на зрителя (поворот круга гасится обратным поворотом бюста),
   передний — крупный и светлый, дальние — меньше и в тени; подпись видна только у переднего. --a — поворот круга */
@property --a { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
.cband__stage { grid-column: 1 / span 7; position: relative; height: calc(var(--W) * 1.5); margin-top: calc(var(--W) * -.2); perspective: 1600px; perspective-origin: 50% 0%; }
.cband__stage::before { content: ""; position: absolute; left: 50%; bottom: calc(var(--W) * .36); width: calc(var(--R) * 2.9); height: calc(var(--W) * .5); translate: -50% 50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(239, 232, 220, .09), rgba(239, 232, 220, 0)); }
.cband__ring { --a: 0deg; position: absolute; left: 50%; bottom: calc(var(--W) * .36); width: var(--W); height: calc(var(--W) * .826); margin-left: calc(var(--W) / -2);
  transform-style: preserve-3d; transform: rotateX(-9deg) translateZ(calc(-1 * var(--R))); }
.cband__p { --t: calc(var(--i) * 60deg + var(--a)); position: absolute; inset: 0; margin: 0; transform-origin: 50% 100%;
  transform: rotateY(var(--t)) translateZ(var(--R)) rotateY(calc(-1 * var(--t))) rotateX(9deg); }
.cband__p img { display: block; width: 100%; height: auto; filter: grayscale(1) contrast(1.05) brightness(.95);
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 98%); mask-image: linear-gradient(to bottom, #000 58%, transparent 98%); }
.cband__p figcaption { position: absolute; left: -40%; right: -40%; top: calc(100% + 20px); text-align: center; opacity: 0; }
.cband__p b { display: block; font: 400 clamp(16px, 1.25vw, 20px)/1.25 var(--f-display); letter-spacing: -.03em; color: var(--ivory); }
.cband__p span { display: block; margin: 7px auto 0; max-width: 30ch; font: 400 11px/1.45 var(--f-mono); letter-spacing: .06em; color: var(--mute); }
@supports (opacity: cos(0deg)) {
  /* свет и подпись — по углу на орбите: cos = 1 впереди, −1 сзади */
  .cband__p img { filter: grayscale(1) contrast(1.05) brightness(calc(.22 + .38 * (cos(var(--t)) + 1))); }
  .cband__p figcaption { opacity: clamp(0, (cos(var(--t)) - .93) * 16, 1); }
}
@supports not (opacity: cos(0deg)) {
  .cband__p:first-child figcaption { opacity: 1; }
}

/* «+30» у сцены: сколько ещё спикеров, кроме шести на орбите, — справа на линии пола. В ряду цифр его нет:
   там его не замечали, казалось, что экспертов всего шесть (владелец 28.10). Ссылка — на программу курса */
.cband__more { position: absolute; right: 0; bottom: 0; z-index: 4; display: grid; justify-items: end; gap: 8px; text-align: right; color: var(--ivory); }
.cband__more b { font: 200 clamp(38px, 3.6vw, 60px)/.9 var(--f-display); letter-spacing: -.06em; white-space: nowrap; }
.cband__more span { max-width: 21ch; font: 400 11px/1.45 var(--f-mono); letter-spacing: .06em; color: var(--mute); }
.cband__more i { font-style: normal; white-space: nowrap; }
.cband__more svg { margin-left: 2px; vertical-align: middle; transition: transform .4s var(--ease); }
a.cband__more:hover span { color: var(--ivory-2); }
a.cband__more:hover svg { transform: translateX(4px); }
a.cband__more:focus-visible { outline: 1px solid var(--ivory); outline-offset: 6px; }

/* справа: подводка, две цифры, кнопка */
.cband__side { grid-column: 8 / -1; position: relative; z-index: 3; display: grid; gap: clamp(22px, 2vw, 30px); align-self: center; }
.cband__d { font: 300 clamp(17px, 1.3vw, 19px)/1.55 var(--f-text); color: var(--ivory-2); max-width: 40ch; }
.cband__nums { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: 16px; }
.cband__nums div { border-top: 1px solid var(--rule-2); padding-top: 12px; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 8px; }
.cband__nums dd { font: 200 clamp(38px, 3.6vw, 60px)/.9 var(--f-display); letter-spacing: -.06em; color: var(--ivory); white-space: nowrap; }
.cband__nums dt { font: 400 11px/1.45 var(--f-mono); letter-spacing: .06em; color: var(--mute); }
.cband__go { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; }
.cband__go .more { color: var(--ivory-2); }
.cband__go .more:hover { color: var(--ivory); }

/* поворот по шагам: бюст стоит впереди 3 с, за 1 с орбита поворачивается к следующему. Без @property — те же шаги скачком */
@media (prefers-reduced-motion: no-preference) {
  .cband__ring { animation: cband-turn calc(var(--step) * 6) infinite; }
  .cband__stage:hover .cband__ring, .cband:focus-within .cband__ring { animation-play-state: paused; }
}
@keyframes cband-turn {
  0%, 12.5% { --a: 0deg; animation-timing-function: cubic-bezier(.65, 0, .25, 1); }
  16.667%, 29.167% { --a: -60deg; animation-timing-function: cubic-bezier(.65, 0, .25, 1); }
  33.333%, 45.833% { --a: -120deg; animation-timing-function: cubic-bezier(.65, 0, .25, 1); }
  50%, 62.5% { --a: -180deg; animation-timing-function: cubic-bezier(.65, 0, .25, 1); }
  66.667%, 79.167% { --a: -240deg; animation-timing-function: cubic-bezier(.65, 0, .25, 1); }
  83.333%, 95.833% { --a: -300deg; animation-timing-function: cubic-bezier(.65, 0, .25, 1); }
  100% { --a: -360deg; }
}
/* «уменьшить движение»: шесть бюстов рядом, без поворота и маски */
@media (prefers-reduced-motion: reduce) {
  .cband__stage { perspective: none; height: auto; margin-top: 0; }
  .cband__stage::before { display: none; }
  .cband__ring { position: static; width: auto; height: auto; margin: 0; transform: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 12px; }
  .cband__p { position: relative; transform: none; }
  .cband__p figcaption { position: static; margin-top: 10px; opacity: 1 !important; }
  .cband__p img { filter: grayscale(1) !important; }
  .cband__more { position: static; justify-items: start; margin-top: 28px; text-align: left; }
}

@media (max-width: 960px) {
  .cband__stage, .cband__side { grid-column: 1 / -1; }
  .cband__stage { margin-top: 0; }
  .cband__side { align-self: start; }
}
@media (max-width: 640px) {
  .cband { --W: 132px; --R: calc(var(--W) * 1.12); }
  .cband__t { font-size: clamp(32px, 10.2vw, 50px); }
  /* «+30» — строкой под подписью переднего: справа на линии пола он наезжал бы на подпись.
     Подпись — во всю ширину сцены (самая длинная роль — 3 строки, ~80px), орбита выше на столько же: иначе роль в 6 строк ложилась на «+30» */
  .cband__stage { height: calc(var(--W) * 1.7 + 92px); margin-top: -8px; }
  .cband__stage::before, .cband__ring { bottom: calc(var(--W) * .62 + 92px); }
  .cband__p figcaption { left: -60%; right: -60%; }
  .cband__p span { max-width: none; }
  .cband__more { left: 0; grid-template-columns: auto auto; justify-content: center; align-items: center; column-gap: 14px; text-align: left; }
  .cband__more b { font-size: 38px; }
  .cband__nums dd { font-size: clamp(30px, 8.6vw, 38px); }
  .cband__nums { column-gap: 12px; }
}
/* телефон и «уменьшить движение»: бюсты стоят рядами — сцене нужна высота по содержимому (высота выше — только для орбиты) */
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .cband__stage { height: auto; }
}

/* ===== components/deck.css ===== */
/* колода обложек кейсов агентства: верхняя по очереди уходит назад (site.js, [data-deck]).
   --p — место в колоде: 0 — сверху, дальше — глубже; глубже третьей не видно. Без JS — веер в порядке разметки */
.deck { position: relative; aspect-ratio: 1; margin: 0; padding: 0; }
.deck > li { --p: 0; position: absolute; inset: 0; z-index: calc(20 - var(--p));
  transform: translate(calc(var(--p) * 6%), calc(var(--p) * -5%)) rotate(calc(var(--p) * 3.5deg)) scale(calc(1 - var(--p) * .07));
  opacity: max(0, calc(1 - var(--p) * .3)); transition: transform 1.1s var(--slow), opacity .8s var(--ease); }
.deck img { display: block; width: 100%; height: 100%; object-fit: cover; box-shadow: 0 34px 50px -24px rgba(0, 0, 0, .75); }
.deck a { display: block; height: 100%; position: relative; color: var(--ivory); }
/* подпись — только у верхней обложки */
.deck__t { position: absolute; left: 0; right: 0; top: 100%; display: grid; gap: 6px; padding-top: 14px; font: 300 clamp(16px, 1.3vw, 20px)/1.3 var(--f-text); color: var(--ivory); opacity: 0; transition: opacity .5s var(--ease); }
.deck > li[style*="--p:0"] .deck__t, .deck > li.is-on .deck__t { opacity: 1; }
.deck.is-run > li:not(.is-on) .deck__t { opacity: 0; }
.deck__go { font: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); transition: color var(--d-fast) var(--ease); }
.deck a:hover .deck__go, .deck a:focus-visible .deck__go { color: var(--ivory); }
.deck a:hover img { filter: saturate(1.1); }
.deck a:focus-visible { outline: 1px solid var(--ivory); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .deck > li { transition: none; } }

/* ===== components/ico3d.css ===== */
/* 3D-иконки справочников и инструментов: кадры assets/img/ico3d/*.webp (рисует tools/icons3d.mjs), живой поворот — assets/js/icons3d.js.
   Под курсором строки предмет чуть поднимается; со скриптом ещё и поворачивается в 3D за курсором (холст поверх кадра).
   Без скрипта и WebGL кадр слегка наклоняется; на сенсорных экранах и при «уменьшить движение» стоит неподвижно. */
.ico3d { --ico: 56px; position: relative; display: block; width: var(--ico); height: var(--ico); }
.ico3d img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .55)); }
.ico3d__live { position: absolute; left: 50%; top: 50%; width: calc(var(--ico) * 1.6); height: calc(var(--ico) * 1.6);
  margin: calc(var(--ico) * -.8) 0 0 calc(var(--ico) * -.8); pointer-events: none; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .55)); }
.ico3d.is-live img { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .ico3d, .ico3d img { transition: transform .9s var(--slow); }
  :is(a, li):hover > .ico3d { transform: translateY(-4px); }
  html:not(.ico3d-on) :is(a, li):hover > .ico3d img { transform: rotate(-6deg) scale(1.06); }
}

/* справочники и инструменты: предмет — первой колонкой строки (главная) */
.dirs.dirs--ico a { grid-template-columns: var(--ico-col, 56px) 7ch minmax(0, 1fr); }
.dirs--ico .ico3d, .tools--ico .ico3d { align-self: center; }
.tools.tools--ico li { grid-template-columns: var(--ico-col, 56px) minmax(0, 1fr) auto; }
.tools.tools--ico .ico3d { grid-row: 1 / span 2; grid-column: 1; }
.tools.tools--ico b, .tools.tools--ico p { grid-column: 2; }
.tools.tools--ico .state { grid-column: 3; }
/* /instrumenty/ · «В разработке»: предмет стоит у огромного номера справа внизу и касается его края;
   номер получает поле справа — предмет не заходит на текст карточки */
.j-soon__n:has(.ico3d) { --ico-n: clamp(48px, 4.4vw, 68px); position: relative; justify-self: start; padding-right: calc(var(--ico-n) * .82); }
.j-soon__n .ico3d { --ico: var(--ico-n); position: absolute; right: 0; bottom: -.02em; }
@media (prefers-reduced-motion: no-preference) { .j-soon__i:hover .ico3d { transform: translateY(-4px); } }
/* /instrumenty/ · «Ещё бесплатно» на светлой полосе: предмет — первой колонкой, тень мягче */
.j-free__list.j-free__list--ico a { grid-template-columns: var(--ico-col, 56px) minmax(0, 1fr) 22px; }
.j-free__list.j-free__list--ico .ico3d { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.j-free__list.j-free__list--ico b, .j-free__list.j-free__list--ico span:not(.ico3d) { grid-column: 2; }
.j-free__list.j-free__list--ico i { grid-column: 3; }
.fog .ico3d img, .fog .ico3d__live { filter: drop-shadow(0 8px 10px rgba(11, 10, 9, .22)); }
@media (max-width: 640px) {
  .ico3d { --ico: 44px; }
  .j-free__list--ico { --ico-col: 44px; }
  .dirs--ico, .tools--ico { --ico-col: 44px; }
  .dirs.dirs--ico a { grid-template-columns: var(--ico-col) 6ch minmax(0, 1fr); column-gap: 14px; }
  .tools.tools--ico li { column-gap: 14px; }
}

/* ===== components/mega.css ===== */
/* панели «Журнал», «Календарь», «Справочники», «Инструменты» под шапкой — тот же язык, что у «Услуг» (svc.css):
   светлая главная карточка слева, справа — списки и карточки с картинками. У каждой свой ход: журнал — огромные тонкие места 1–2–3,
   календарь — огромная дата с будильником, справочники — полка 3D-предметов, инструменты — снимок UpSound AI.
   Открываются под курсором и с клавиатуры (:hover / :focus-within), без JS; ниже 1080px меню мобильное, панелей нет.
   Закрытая панель не рисует содержимое (content-visibility: hidden): её картинки грузятся, только когда панель открыли. */
.mega {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 49; max-height: calc(100vh - 76px); overflow: auto; overscroll-behavior: contain;
  background: var(--wall-2); border-bottom: 1px solid var(--rule-2); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .8);
  visibility: hidden; opacity: 0; clip-path: inset(0 0 100% 0); content-visibility: hidden;
  transition: clip-path .7s var(--slow), opacity .35s var(--ease), visibility 0s linear .7s, content-visibility 0s linear .7s;
  transition-behavior: allow-discrete;
}
.nav__mega:hover > .mega, .nav__mega:focus-within > .mega {
  visibility: visible; opacity: 1; clip-path: inset(0 0 -60px 0); content-visibility: visible;
  transition: clip-path .7s var(--slow), opacity .3s var(--ease), visibility 0s, content-visibility 0s;
}
/* открытая панель — над той, что ещё закрывается: курсор с соседнего пункта попадает в новую, а не возвращает старую */
.nav__mega:hover > .mega, .nav__mega:focus-within > .mega, .nav__svc:hover > .svc, .nav__svc:focus-within > .svc { z-index: 50; }
/* мостик от пункта меню к панели — только под самим пунктом: соседние пункты открываются сразу */
:is(.nav__mega, .nav__svc) > a::before { content: ""; position: absolute; left: -10px; right: -10px; top: 100%; height: 26px; }

.mega__in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-rows: auto auto; column-gap: var(--cg); row-gap: 24px; align-items: start; padding-block: 34px 36px; }
.mega__k { font: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.mega a:focus-visible { outline: 1px solid var(--ivory); outline-offset: 3px; }

/* главная карточка: светлая, ссылка заголовка растянута на всю карточку; свои ссылки внутри — выше неё */
.mega__flag { grid-column: 1; grid-row: 1 / -1; align-self: stretch; position: relative; display: grid; align-content: start; gap: 12px; padding: clamp(22px, 2.2vw, 32px);
  background: var(--fog); color: var(--ink); transition: background-color .5s var(--ease); }
.mega__flag:hover { background: #fff; }
.mega__flag .mega__k, .mega__flag .card__k { color: var(--fog-mute); }
.mega__flag .card__k span:first-child { color: var(--fog-ink-2); }
.mega__flag .state { color: var(--fog-ink-2); }
.mega__flag .state--open i { border-color: var(--fog-ink-2); }
.mega__flag a:focus-visible { outline-color: var(--ink); }
.mega__ft { font: 300 clamp(24px, 2vw, 32px)/1.08 var(--f-display); letter-spacing: -.045em; color: var(--ink); }
.mega__ft::after { content: ""; position: absolute; inset: 0; z-index: 1; }
/* «Читать», «Попробовать» внизу карточки — как .more, но всю карточку ведёт ссылка заголовка */
.mega__go { align-self: end; display: inline-flex; align-items: center; gap: 12px; width: fit-content; margin-top: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--fog-rule);
  font: 500 14px/1.2 var(--f-text); transition: border-color .5s var(--ease), gap .6s var(--slow); }
.mega__flag:hover .mega__go { border-color: var(--ink); gap: 18px; }
.mega__flag .ico3d img { filter: drop-shadow(0 8px 10px rgba(11, 10, 9, .22)); }

.mega__foot { grid-column: 2 / -1; align-self: end; display: flex; align-items: flex-end; gap: 18px var(--cg); padding-top: 22px; border-top: 1px solid var(--rule-2); }
.mega__all { flex: none; margin-left: auto; }
.mega .state { font-size: 11px; }

/* ---------- Журнал */
.mega--journal .mega__in { grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr); }
.mj-cats { grid-column: 2; }
.mj-hits { grid-column: 3; }
.mj-new__pic { display: block; aspect-ratio: 1024 / 704; overflow: hidden; background: var(--fog-2); }
.mj-new__pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--slow); }
.mj-new:hover .mj-new__pic img { transform: scale(1.03); }
.mj-new .card__k { margin-top: 6px; }
.mj-new__t { font-size: clamp(21px, 1.7vw, 28px); line-height: 1.12; letter-spacing: -.04em; }
.mj-new__d { font-size: 15px; line-height: 1.5; color: var(--fog-ink-2); }
.mj-new { grid-template-rows: auto auto auto auto auto 1fr; }

.mj-cats ul { margin-top: 12px; padding-top: 6px; border-top: 1px solid var(--rule); }
.mj-cats a { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; }
.mj-cats span { font: 400 16px/1.25 var(--f-display); letter-spacing: -.03em; color: var(--ivory); }
.mj-cats i { flex: 1; min-width: 16px; border-bottom: 1px dotted var(--rule-2); }
.mj-cats b { font: 400 12px/1 var(--f-mono); letter-spacing: .06em; color: var(--mute); transition: color var(--d-fast) var(--ease); }
.mj-cats a:hover span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.mj-cats a:hover b { color: var(--ivory); }

.mj-hits ol { margin-top: 12px; border-top: 1px solid var(--rule); }
.mj-hits a { display: grid; grid-template-columns: 52px clamp(96px, 8.4vw, 128px) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 16px; row-gap: 8px;
  padding: 14px 0; border-bottom: 1px solid var(--rule); }
.mj-hits__n { grid-row: 1 / span 2; font: 200 76px/.74 var(--f-display); letter-spacing: -.08em; color: var(--ivory); }
.mj-hits__pic { grid-row: 1 / span 2; display: block; aspect-ratio: 1024 / 704; overflow: hidden; background: var(--wall-3); }
.mj-hits__pic img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(.8); transition: filter .6s var(--ease); }
.mj-hits a:hover img, .mj-hits a:focus-visible img { filter: none; }
.mj-hits__t { font: 400 15px/1.3 var(--f-display); letter-spacing: -.025em; color: var(--ivory); }
.mj-hits small { align-self: end; font: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.mj-hits a:hover .mj-hits__t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

.mega--journal .mega__foot { display: grid; row-gap: 18px; }
.mega--journal .mega__all { justify-self: end; }
.mj-doors { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 2.2fr); column-gap: var(--cg); }
.mj-doors a { display: grid; align-content: start; gap: 8px; }
.mj-doors b { font: 300 clamp(22px, 1.9vw, 30px)/1 var(--f-display); letter-spacing: -.05em; color: var(--ivory); }
.mj-doors span { font-size: 13px; line-height: 1.4; color: var(--mute); transition: color var(--d-fast) var(--ease); }
.mj-doors a:hover span { color: var(--ivory-2); }
.mj-doors a:hover b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.mj-doors__v a { grid-template-columns: clamp(104px, 9vw, 136px) minmax(0, 1fr); column-gap: 16px; }
.mj-doors__pic { grid-row: 1 / span 2; position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--wall-3); }
.mj-doors__pic img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(.8); transition: filter .6s var(--ease); }
.mj-doors__v a:hover img { filter: none; }
.mj-doors__pic i { position: absolute; left: 8px; bottom: 8px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ivory); color: var(--ink); }

/* ---------- Календарь */
.mk-first--last { box-shadow: inset 0 3px 0 var(--red); }
.mk-first__date { display: flex; align-items: flex-end; gap: 0; margin-top: 6px; }
.mk-d { display: grid; gap: 10px; }
.mk-d b { font: 200 clamp(56px, 4.6vw, 78px)/.8 var(--f-display); letter-spacing: -.065em; color: var(--ivory); white-space: nowrap; }
.mk-d span { font: 400 11px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.mk-d--w b { font: 300 clamp(26px, 2.1vw, 34px)/1.05 var(--f-display); letter-spacing: -.04em; white-space: normal; padding-top: .2em; }
.mk-first .mk-d b { font-size: clamp(104px, 8.6vw, 150px); color: var(--ink); }
.mk-first .mk-d--w b { font-size: clamp(36px, 3vw, 48px); }
.mk-first .mk-d span { color: var(--fog-mute); }
.mk-clock { flex: none; width: clamp(58px, 4.8vw, 82px); height: auto; margin: 0 0 26px -16px; }
.mk-first .mk-d--w { flex: 0 1 auto; min-width: 0; }
.mk-first .mk-d--w + .mk-clock { margin: 0 0 30px 12px; }
.mk-first__t { margin-top: 2px; }
.mk-first { grid-template-rows: repeat(6, auto) 1fr; }
.mk-first__w { font-size: 15px; line-height: 1.5; color: var(--fog-ink-2); }
.mk-m { font: 400 11px/1.5 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.mk-first .mk-m { color: var(--fog-mute); }

.mk-next { grid-column: 2 / -1; }
.mk-now { display: flex; align-items: center; gap: 10px; font: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--ivory-2); }
.mk-now i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(227, 6, 19, .18); }
.mk-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; border-top: 1px solid var(--rule-2); }
.mk-i + .mk-i { border-left: 1px solid var(--rule); }
.mk-i--last { box-shadow: inset 0 2px 0 var(--red); }
.mk-i a { display: grid; align-content: start; gap: 12px; height: 100%; padding: 22px clamp(14px, 1.6vw, 24px) 6px; }
.mk-i:first-child a { padding-left: 0; }
.mk-i__t { font: 400 17px/1.25 var(--f-display); letter-spacing: -.03em; color: var(--ivory); }
.mk-i a:hover .mk-i__t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.mk-i--closed .mk-d b, .mk-i--closed .mk-i__t { color: var(--ivory-2); }

.mk-f { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px var(--cg); align-items: start; }
.mk-f .mega__all { grid-column: 1 / -1; justify-self: end; }
.mk-f__g ul { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; }
.mk-f__g a { font: 400 15px/1.35 var(--f-text); color: var(--ivory-2); transition: color var(--d-fast) var(--ease); }
.mk-f__g sup { margin-left: 3px; font: 400 10px/1 var(--f-mono); color: var(--mute); }
.mk-f__g a:hover { color: var(--ivory); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* ---------- Справочники */
.md-flag { padding-right: clamp(22px, 2.2vw, 32px); }
.md-flag > .ico3d { --ico: clamp(68px, 5.6vw, 84px); position: absolute; right: clamp(16px, 1.8vw, 26px); top: clamp(14px, 1.6vw, 22px); }
.md-flag > .mega__k { padding-right: 84px; }
.md-flag__t { padding-right: clamp(64px, 5.4vw, 84px); }
.md-flag__n { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; font: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--fog-mute); }
.md-flag__n b { font: 200 clamp(64px, 5.4vw, 92px)/.8 var(--f-display); letter-spacing: -.065em; color: var(--ink); }
.md-flag__list { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; margin-top: 10px; border-top: 1px solid var(--fog-rule); }
.md-flag__list a { display: grid; gap: 3px; padding: 10px 0 11px; border-bottom: 1px solid var(--fog-rule); }
.md-flag__list b { font: 400 16px/1.2 var(--f-display); letter-spacing: -.03em; color: var(--ink); }
.md-flag__list span { font: 400 10.5px/1.45 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fog-mute); }
.md-flag { grid-template-rows: auto auto auto auto auto 1fr; }
.md-flag__check { font: 400 10.5px/1.5 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fog-mute); }
.md-flag__list a:hover b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

.md-shelf { grid-column: 2; }
.md-shelf > ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 12px; border-top: 1px solid var(--rule); }
.md-shelf > ul > li + li { border-left: 1px solid var(--rule); }
.md-shelf__a { display: grid; justify-items: start; align-content: start; gap: 10px; padding: 18px clamp(10px, 1.3vw, 22px) 16px; }
.md-shelf > ul > li:first-child .md-shelf__a { padding-left: 0; }
.md-shelf .ico3d { --ico: clamp(60px, 5.2vw, 76px); margin: 0 0 8px -4px; }
.md-shelf__n { font: 200 clamp(38px, 3.3vw, 56px)/.85 var(--f-display); letter-spacing: -.065em; color: var(--ivory); }
.md-shelf__t { min-height: 2.6em; font: 500 clamp(13.5px, 1.1vw, 16px)/1.3 var(--f-text); color: var(--ivory); }
.md-shelf .is-soon .md-shelf__n, .md-shelf .is-soon .md-shelf__t { color: var(--ivory-2); }
.md-shelf__a:hover .md-shelf__t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.md-shelf > ul > li { display: grid; grid-template-rows: auto 1fr; align-content: start; }
.md-read { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 6px; margin: 4px clamp(10px, 1.3vw, 22px) 0; padding-top: 14px; border-top: 1px solid var(--rule); }
.md-shelf > ul > li:first-child :is(.md-read, .md-cats) { margin-left: 0; }
.md-cats { align-self: start; margin: 4px clamp(10px, 1.3vw, 22px) 0; border-top: 1px solid var(--rule); }
.md-cats a { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 13px; line-height: 1.35; color: var(--ivory-2); }
.md-cats b { flex: none; min-width: 2ch; font: 300 20px/1 var(--f-display); letter-spacing: -.04em; color: var(--ivory); }
.md-cats a:hover { color: var(--ivory); }
.md-read__pic { display: block; aspect-ratio: 1024 / 704; overflow: hidden; margin-bottom: 4px; background: var(--wall-3); }
.md-read__pic img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(.8); transition: filter .6s var(--ease); }
.md-read:hover img, .md-read:focus-visible img { filter: none; }
.md-read__k { font: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.md-read__t { font-size: 13px; line-height: 1.4; color: var(--ivory-2); }
.md-read:hover .md-read__t { color: var(--ivory); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.md-note { flex: 1; max-width: 72ch; font-size: 13.5px; line-height: 1.5; color: var(--mute); }

/* ---------- Инструменты */
.mega--tools .mega__in { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); grid-template-rows: auto auto auto; }
.mt-ai__t { font-size: clamp(34px, 3vw, 52px); line-height: .95; letter-spacing: -.055em; }
.mt-ai__sub { font: 300 15px/1.45 var(--f-text); color: var(--fog-ink-2); }
.mt-ai__pic { display: block; margin-top: 8px; perspective: 900px; }
.mt-ai__pic img { display: block; width: 100%; height: auto; box-shadow: 0 30px 46px -26px rgba(11, 10, 9, .55); transition: transform 1.2s var(--slow); }
@media (prefers-reduced-motion: no-preference) { .mt-ai:hover .mt-ai__pic img { transform: rotateX(5deg) rotateY(-7deg) translateY(-4px); } }

.mt-now { grid-column: 2 / -1; }
.mt-now ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--cg); margin-top: 12px; }
.mt-now a { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; row-gap: 6px; align-content: start; height: 100%; padding-top: 16px; border-top: 1px solid var(--rule-2); }
.mt-now a > :not(.ico3d, .face, .mt-cl) { grid-column: 2; }
.mt-now .ico3d, .mt-now .face, .mt-now .mt-cl { grid-row: 1 / span 3; }
.mt-now .face { width: 56px; height: 56px; box-shadow: 0 0 0 2px var(--red); }
.mt-now b { font: 400 17px/1.2 var(--f-display); letter-spacing: -.03em; color: var(--ivory); }
.mt-now span:not(.state, .ico3d, .face, .mt-cl) { font-size: 13px; line-height: 1.4; color: var(--mute); }
/* «Чек-листы»: светлый листок с тремя строками, две отмечены красным — CSS, без картинки; под курсором выпрямляется */
.mt-cl { position: relative; display: grid; align-content: center; gap: 8px; width: 42px; height: 54px; margin: 1px 0 0 7px; padding: 0 7px;
  background: var(--fog); box-shadow: 0 16px 18px -10px rgba(0, 0, 0, .75); transform: perspective(260px) rotateY(-16deg) rotate(-5deg); }
.mt-cl i { display: flex; align-items: center; gap: 4px; height: 6px; }
.mt-cl i::before { content: ""; flex: none; width: 6px; height: 6px; border: 1px solid var(--fog-ink-2); }
.mt-cl i::after { content: ""; flex: 1; height: 1px; background: var(--fog-ink-2); opacity: .45; }
.mt-cl i:nth-child(-n+2)::before { border-color: var(--red); background: var(--red); }
@media (prefers-reduced-motion: no-preference) {
  .mt-cl { transition: transform .9s var(--slow); }
  .mt-now a:hover .mt-cl, .mt-now a:focus-visible .mt-cl { transform: perspective(260px) translateY(-3px); }
}
.mt-now a:hover b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

.mt-soon { grid-column: 2; }
.mt-free { grid-column: 3; }
.mt-soon ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--cg); margin-top: 12px; border-top: 1px solid var(--rule); }
.mt-free ul { margin-top: 12px; border-top: 1px solid var(--rule); }
:is(.mt-soon, .mt-free) a { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--rule); }
:is(.mt-soon, .mt-free) .ico3d { --ico: 44px; grid-row: 1 / span 2; }
:is(.mt-soon, .mt-free) b { font: 500 14.5px/1.3 var(--f-text); color: var(--ivory); }
:is(.mt-soon, .mt-free) span:not(.ico3d) { font-size: 12.5px; line-height: 1.35; color: var(--mute); }
.mt-soon b { color: var(--ivory-2); }
:is(.mt-soon, .mt-free) a:hover b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* появление: блоки выезжают по очереди, как пункты «Услуг» */
@media (prefers-reduced-motion: no-preference) {
  .mega__in > * { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .7s var(--slow); transition-delay: calc(var(--i, 0) * 70ms + 90ms); }
  .mega__in > :nth-child(2) { --i: 1; } .mega__in > :nth-child(3) { --i: 2; } .mega__in > :nth-child(4) { --i: 3; } .mega__in > :nth-child(5) { --i: 4; }
  .nav__mega:hover .mega__in > *, .nav__mega:focus-within .mega__in > * { opacity: 1; transform: none; }
}
@media (max-width: 1240px) {
  .mj-hits a { grid-template-columns: 40px 96px minmax(0, 1fr); column-gap: 12px; }
  .mj-hits__n { font-size: 60px; }
  .mj-doors { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 16px; }
  .mj-doors__v { grid-column: 1 / -1; }
  .mt-now ul { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
}

/* ===== components/peek.css ===== */
/* «Самое читаемое» на главной: у курсора — первый абзац статьи, о чём она (site.js, .peek, data-why). Без обложки — она уже есть в строке */
.peek--why { position: fixed; left: 0; top: 0; z-index: 60; width: clamp(260px, 22vw, 340px); padding: 16px 18px 18px; pointer-events: none; opacity: 0; transition: opacity var(--d-fast) var(--ease); background: var(--ivory); color: var(--ink); box-shadow: 0 28px 48px -16px rgba(11, 10, 9, .6); }
.peek--why.is-on { opacity: 1; }
.peek__k { font: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
.peek__why { margin-top: 8px; font: 400 15px/1.5 var(--f-text); color: var(--ink-2); }
.peek__why:empty { display: none; }
@media (hover: none) { .peek--why { display: none; } }

/* переключатель срока у «Самого читаемого» */
.hits__tabs { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.hits__tabs button { padding: 6px 0; border: 0; border-bottom: 1px solid transparent; background: none; font: 400 15px/1.2 var(--f-text); color: var(--mute); cursor: pointer; transition: color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease); }
.hits__tabs button:hover { color: var(--ivory-2); }
.hits__tabs button[aria-selected="true"] { color: var(--ivory); border-bottom-color: var(--ivory); }
.hits__tabs button:focus-visible { outline: 1px solid var(--ivory); outline-offset: 3px; }
.no-js .hits__tabs { display: none; }

/* услуги: у курсора — первый экран страницы услуги на we.upsound.org */
.peek--svc { position: fixed; left: 0; top: 0; z-index: 60; width: clamp(280px, 24vw, 380px); pointer-events: none; opacity: 0; transition: opacity var(--d-fast) var(--ease); background: var(--ink); box-shadow: 0 30px 60px -20px rgba(11, 10, 9, .7); }
.peek--svc.is-on { opacity: 1; }
.peek--svc img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; }
.peek--svc .peek__k { padding: 9px 12px 10px; color: var(--mute); }
/* под картинкой услуги — 2–3 коротких преимущества с лендинга (data-plus) */
.peek__plus { display: grid; gap: 6px; padding: 12px 14px 14px; font: 400 13px/1.35 var(--f-text); color: var(--ivory); }
.peek__plus li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 8px; }
.peek__plus li::before { content: ""; width: 6px; height: 6px; margin-top: .45em; border-radius: 50%; background: var(--red); }
@media (hover: none) { .peek--svc { display: none; } }

/* справочники на главной: у курсора — обложка статьи по теме справочника, целиком 1024:704 */
.peek--cover { position: fixed; left: 0; top: 0; z-index: 60; width: clamp(220px, 18vw, 300px); aspect-ratio: 1024 / 704; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity var(--d-fast) var(--ease); box-shadow: 0 28px 48px -16px rgba(0, 0, 0, .6); }
.peek--cover.is-on { opacity: 1; }
.peek--cover img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: none) { .peek--cover { display: none; } }

/* «Делали для» на главной: у курсора и у имени в фокусе — фото артиста с we.upsound.org (data/client-photos.json) и что делали */
.peek--artist { position: fixed; left: 0; top: 0; z-index: 60; width: clamp(150px, 12.5vw, 200px); pointer-events: none; opacity: 0; transition: opacity var(--d-fast) var(--ease); background: var(--wall-2); box-shadow: 0 28px 48px -16px rgba(0, 0, 0, .7); }
.peek--artist.is-on { opacity: 1; }
.peek--artist img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.peek--artist .peek__why { margin: 0; padding: 8px 10px 9px; font: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
@media (hover: none) { .peek--artist { display: none; } }

/* ===== components/svc.css ===== */
/* панель «Услуги» под шапкой: главная услуга, все услуги с пользой и «Делали для», бесплатное и обучение.
   Открывается под курсором и с клавиатуры (:focus-within), без JS. Позиционируется от .hd (sticky).
   Только внутри пункта меню: .svc — ещё и строка справочника (css/sections/directories.css), её это правило прятало. */
.nav__svc > .svc {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 49; max-height: calc(100vh - 76px); overflow: auto;
  background: var(--wall-2); border-bottom: 1px solid var(--rule-2); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .8);
  visibility: hidden; opacity: 0; clip-path: inset(0 0 100% 0);
  transition: clip-path .7s var(--slow), opacity .35s var(--ease), visibility 0s linear .7s;
}
.nav__svc > .svc::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 34px; } /* мостик от пункта меню к панели */
.nav__svc:hover .svc, .nav__svc:focus-within .svc { visibility: visible; opacity: 1; clip-path: inset(-34px 0 -60px 0); transition: clip-path .7s var(--slow), opacity .3s var(--ease), visibility 0s; }
.svc__in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--cg); row-gap: 26px; padding-block: 34px 38px; }

.svc__flag { grid-row: 1 / span 2; display: grid; align-content: start; gap: 14px; padding: clamp(22px, 2.2vw, 32px); background: var(--fog); color: var(--ink); transition: background-color .5s var(--ease); }
.svc__flag:hover { background: #fff; }
.svc__k { font: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--fog-mute); }
.svc__ft { font: 300 clamp(28px, 2.5vw, 42px)/1 var(--f-display); letter-spacing: -.05em; }
.svc__ft .it { font-size: 1.1em; }
.svc__fd { font-size: 15px; line-height: 1.5; color: var(--fog-ink-2); }
.svc__num { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--fog-mute); }
.svc__num b { font: 200 clamp(56px, 5vw, 86px)/.8 var(--f-display); letter-spacing: -.06em; color: var(--ink); }
.svc__who { font: 300 clamp(17px, 1.3vw, 20px)/1.3 var(--f-display); letter-spacing: -.03em; }

.svc__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--cg); }
.svc__list li { border-top: 1px solid var(--rule); }
.svc__list a { display: grid; align-content: start; gap: 5px; padding: 13px 0 15px; }
.svc__list b { font: 400 17px/1.2 var(--f-display); letter-spacing: -.03em; color: var(--ivory); }
.svc__list span { font-size: 13.5px; line-height: 1.4; color: var(--mute); transition: color var(--d-fast) var(--ease); }
.svc__list small { font: 400 10.5px/1.45 var(--f-mono); letter-spacing: .03em; color: var(--ivory-2); }
.svc__list a:hover span, .svc__list a:focus-visible span { color: var(--ivory-2); }
.svc__list a:hover b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

.svc__more { grid-column: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px var(--cg); align-items: start; padding-top: 22px; border-top: 1px solid var(--rule-2); }
.svc__card { display: grid; grid-template-rows: 96px auto auto; gap: 4px; }
.svc__card img { width: 100%; height: 96px; object-fit: cover; object-position: 50% 18%; background: var(--fog); transition: transform 1.2s var(--slow); }
.svc__card .svc__book { object-fit: contain; object-position: 0 50%; background: none; }
/* картинки под этот формат: целиком при любой ширине карточки, фон — цветом за прозрачной картинкой.
   ЧЕК — коробка и телефон с ботом на красном; курс — эксперты стоят рядом на нижнем крае (одна шкала, одна ч/б обработка — уже в картинке) */
.svc__card .svc__check { object-fit: contain; object-position: 50% 50%; background: var(--red); }
.svc__card .svc__crew { object-fit: contain; object-position: 50% 100%; }
.svc__card:hover img { transform: translateY(-3px); }
.svc__big { display: flex; align-items: flex-end; height: 96px; font: 200 92px/.78 var(--f-display); letter-spacing: -.06em; color: var(--ivory); }
.svc__card b { margin-top: 10px; font: 500 14.5px/1.3 var(--f-text); color: var(--ivory); }
.svc__card span:not(.svc__big) { font-size: 13px; line-height: 1.4; color: var(--mute); }
.svc__all { grid-column: 1 / -1; justify-self: end; }

/* появление: пункты выезжают по очереди */
@media (prefers-reduced-motion: no-preference) {
  .svc__list li, .svc__more { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .7s var(--slow); }
  .svc__list li { transition-delay: calc(var(--i, 0) * 28ms + 120ms); }
  .svc__more { transition-delay: .42s; }
  .nav__svc:hover :is(.svc__list li, .svc__more), .nav__svc:focus-within :is(.svc__list li, .svc__more) { opacity: 1; transform: none; }
}
@media (max-width: 1180px) {
  .svc__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.svc__inc { font: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--fog-mute); margin-top: 6px; }

/* карточка главной услуги: ссылка названия растянута на всю карточку; колода кейсов — выше неё, свои ссылки на кейсы (site.js, [data-deck]) */
.svc__flag { position: relative; grid-template-rows: auto auto auto auto auto 1fr; }
.svc__ft::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.svc__ft:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.svc__cases { position: relative; z-index: 2; align-self: end; display: grid; gap: 12px; margin-top: 18px; }
.deck--svc { width: clamp(130px, 10vw, 160px); margin: 6px 0 74px 4px; }
.deck--svc .deck__t { color: var(--ink); font-size: 14px; }
.deck--svc .deck__go { color: var(--fog-mute); }
.deck--svc a:hover .deck__go, .deck--svc a:focus-visible .deck__go { color: var(--ink); }
@media (max-width: 1080px) { .svc__cases { display: none; } }
/* закрытая панель не рисует содержимое: картинки (ЧЕК, курс, книга, колода кейсов) грузятся, только когда панель открыли */
.nav__svc > .svc { content-visibility: hidden; transition: clip-path .7s var(--slow), opacity .35s var(--ease), visibility 0s linear .7s, content-visibility 0s linear .7s; transition-behavior: allow-discrete; }
.nav__svc:hover > .svc, .nav__svc:focus-within > .svc { content-visibility: visible; transition: clip-path .7s var(--slow), opacity .3s var(--ease), visibility 0s, content-visibility 0s; }

/* ===== components/yt.css ===== */
/* «Что посмотреть»: ролики канала UpSound на YouTube. Обложки чёрно-белые, как коллажи журнала, цвет — под курсором и у текущего.
   Плеер грузится только по клику (site.js, [data-yt]): YouTube в России замедлен, страница от него не ждёт */
.yt__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: var(--cg); row-gap: 40px; align-items: start; }
.yt__main { margin: 0; display: grid; gap: 22px; }
.yt__screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--wall-3); }
.yt__poster { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(.88); transform: scale(1.03); transition: filter 1s var(--ease), transform 1.6s var(--slow); }
.yt__screen:hover .yt__poster { filter: none; transform: scale(1); }
.yt__screen::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(11, 10, 9, .5), transparent 42%); pointer-events: none; }
.yt__play { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; color: var(--ink); }
.yt__btn { position: relative; display: grid; place-items: center; width: clamp(72px, 7vw, 108px); aspect-ratio: 1; border-radius: 50%; background: var(--ivory); box-shadow: 0 0 0 2px var(--red), 0 30px 60px -20px rgba(0, 0, 0, .85); transition: transform .8s var(--slow), background-color .4s var(--ease); }
.yt__btn svg { width: 30%; height: 30%; margin-left: 7%; }
.yt__play:hover .yt__btn, .yt__play:focus-visible .yt__btn { transform: scale(1.08); background: #fff; }
.yt__play:focus-visible { outline: none; }
.yt__play:focus-visible .yt__btn { box-shadow: 0 0 0 2px var(--red), 0 0 0 6px var(--ivory); }
@media (prefers-reduced-motion: no-preference) { .yt__btn::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; box-shadow: 0 0 0 2px var(--red); animation: face-ping 2.6s var(--ease) infinite; } }
.yt__len { position: absolute; right: 16px; bottom: 14px; padding: 6px 8px; background: rgba(11, 10, 9, .72); font: 400 12px/1 var(--f-mono); letter-spacing: .08em; color: var(--ivory); }
.yt__screen.is-play .yt__play, .yt__screen.is-play .yt__poster, .yt__screen.is-play::after { visibility: hidden; }
.yt__screen iframe { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border: 0; background: #000; }
.yt__cap { display: grid; gap: 12px; justify-items: start; }
.yt__t { max-width: 24em; font: 300 clamp(26px, 2.6vw, 44px)/1.08 var(--f-display); letter-spacing: -.045em; }
.yt__out { font: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); transition: color var(--d-fast) var(--ease); }
.yt__out:hover { color: var(--ivory); }
.yt__side { display: grid; gap: 14px; }
.yt__list { display: grid; border-top: 1px solid var(--rule-2); }
.yt__i { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--rule); color: var(--ivory-2); transition: color var(--d-fast) var(--ease); }
.yt__i:hover, .yt__i.is-on { color: var(--ivory); }
.yt__th { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--wall-3); }
.yt__th img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter .8s var(--ease); }
.yt__i:hover .yt__th img, .yt__i.is-on .yt__th img { filter: none; }
.yt__i.is-on .yt__th::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 2px var(--red); }
.yt__tl { position: absolute; right: 4px; bottom: 4px; padding: 3px 4px; background: rgba(11, 10, 9, .75); font: 400 10px/1 var(--f-mono); color: var(--ivory); }
.yt__it { display: grid; gap: 6px; }
.yt__is { font: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.yt__iT { font: 400 15px/1.3 var(--f-text); }
/* серии — одной строкой по всей ширине (обход 28.10 19:01: последняя одна переезжала на вторую строку); на планшете — по три, на телефоне — столбиком */
.yt__series { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: baseline; gap: 10px 20px; margin-top: clamp(32px, 3.4vw, 56px); padding-top: 20px; border-top: 1px solid var(--rule); }
.yt__series a { white-space: nowrap; font: 300 clamp(16px, 1.45vw, 24px)/1.1 var(--f-display); letter-spacing: -.035em; color: var(--ivory-2); transition: color var(--d-fast) var(--ease); }
.yt__series a:hover { color: var(--ivory); }
.yt__series small { margin-left: .35em; vertical-align: super; font: 400 11px/1 var(--f-mono); color: var(--mute); }
@media (max-width: 960px) { .yt__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 960px) {
  .yt__series { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; }
  .yt__series .eyebrow { grid-column: 1 / -1; }
  .yt__series a { font-size: 19px; }
}
@media (max-width: 640px) { .yt__i { grid-template-columns: 112px minmax(0, 1fr); } .yt__series { grid-template-columns: minmax(0, 1fr); row-gap: 10px; } }

/* вкладка «Видео» на странице журнала: сетка роликов канала; ролик играет прямо в карточке по клику (site.js, [data-ytgrid]) */
.j-vids { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--cg); row-gap: clamp(36px, 3.4vw, 56px); margin-top: 8px; }
.vcard { display: grid; gap: 10px; align-content: start; }
.vcard__pic { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--wall-3); color: var(--ink); }
.vcard__pic img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06) brightness(.9); transition: filter .9s var(--ease), transform 1.4s var(--slow); }
.vcard__pic:hover img, .vcard__pic:focus-visible img { filter: none; transform: scale(1.03); }
.vcard__btn { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: var(--ivory); box-shadow: 0 0 0 2px var(--red); opacity: 0; transform: scale(.85); transition: opacity .4s var(--ease), transform .7s var(--slow); }
.vcard__btn svg { width: 32%; height: 32%; margin-left: 7%; }
.vcard__pic:hover .vcard__btn, .vcard__pic:focus-visible .vcard__btn { opacity: 1; transform: none; }
.vcard__pic:focus-visible { outline: 1px solid var(--ivory); outline-offset: 4px; }
.vcard__pic iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.vcard__pic.is-play .yt__tl, .vcard__pic.is-play .vcard__btn { display: none; }
.vcard__t { font: 300 clamp(19px, 1.5vw, 23px)/1.2 var(--f-display); letter-spacing: -.03em; }
.vcard__m { font: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.j-vid__series { margin-top: clamp(48px, 5vw, 80px); }
.j-vid__all { display: inline-flex; margin-top: 28px; }
.j-nofilter [data-jfilter], .j-nofilter .j-rubs { visibility: hidden; }
@media (hover: none) { .vcard__btn { opacity: 1; transform: none; } }
@media (max-width: 960px) { .j-vids { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .j-vids { grid-template-columns: minmax(0, 1fr); } }