/*
  Оформление FK12.ru — один в один со старым сайтом (WordPress + Elementor).
  Цвета и размеры — через токены ниже (:root): смена дизайна = правка этого списка.
  Откуда значения — docs/current-design.md.
*/
:root {
  --c-text: #3B3D42;          /* основной текст */
  --c-title: #413F4F;         /* заголовки, меню */
  --c-muted: #7A7A7A;         /* дата, просмотры, подписи */
  --c-bg: #F3F3F3;            /* серый фон страницы */
  --c-white: #FFFFFF;
  --c-line: #E2E2E2;
  --c-link: #3F90DC;          /* ссылки и голубые плашки */
  --c-accent: #F94F4F;        /* красные кнопки */
  --c-accent-dark: #DC3C3A;
  --c-footer: #30344D;
  --c-footer-bottom: #2A2E45;
  --c-footer-text: #B7B9C5;
  --c-hero-shade: rgba(42, 46, 69, .6);   /* затемнение фото в шапках */
  /* цвета разделов: кружки на главной, плашки в ленте */
  --c-article: #3F90DC;
  --c-book: #FFBA00;
  --c-task: #35AD79;
  --c-game: #A138C5;
  --c-exercise: #00BCD4;
  --c-film: #494E6D;
  --c-game-panel: rgba(161, 56, 197, .8);
  --c-star: #F3AA49;
  --c-star-off: #C9CED9;
  --c-peach: #FCE7CF;        /* шапка книги */
  --c-peach-2: #F7D4AC;
  --c-alert: #FFF6DD;
  /* старые имена — их используют читалка, увеличение фото и комментарии (низ файла) */
  --c-cream: #F7F7F7;
  --c-rust: var(--c-link);
  --c-text-2: var(--c-text);
  --c-meta: var(--c-muted);
  /* читалка книг: фон как у шапки книги, белые страницы */
  --c-paper: #FFFFFF;
  --c-reader-text: #3B3D42;
  --c-reader-line: rgba(59, 61, 66, .18);
  --c-reader-glass: rgba(255, 255, 255, .72);
  --shadow-book: 0 22px 44px -16px rgba(59, 61, 66, .5), 0 4px 12px rgba(59, 61, 66, .16);
  --font: Roboto, Arial, sans-serif;
  --fs-body: 1.1rem;          /* 17.6px, как на старом сайте */
  --wrap: 1200px;             /* 1170 содержимого + поля по 15 */
  --wrap-text: 980px;         /* белый лист материала */
  --side: 320px;              /* правая колонка */
  --radius: 4px;
  --radius-lg: 10px;
  --shadow: 0 4px 14px rgba(42, 46, 69, .15);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-slide: cubic-bezier(.65, 0, .35, 1);
  --t-fast: .2s;
  --t: .3s;
}

/* ---------- основа ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--c-bg); color: var(--c-text); font: 400 var(--fs-body)/1.5 var(--font); }
img, svg, video, iframe { max-width: 100%; }
img { height: auto; }
svg { width: 1em; height: 1em; flex: none; }
a { color: var(--c-link); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--c-accent); }
h1, h2, h3, h4 { color: var(--c-title); line-height: 1.25; font-weight: 700; margin: 0 0 .6em; }
p { margin: 0 0 .8em; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 15px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--c-title); color: #fff; padding: 8px 14px; z-index: 100; }
.skip:focus { left: 8px; color: #fff; }
.center { text-align: center; }
.empty { color: var(--c-muted); }

/* ---------- кнопки и плашки ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 16px; border: 0; border-radius: 3px;
  background: var(--c-accent); color: #fff; font: 500 1.05rem/1.5 var(--font); cursor: pointer; transition: background var(--t-fast), color var(--t-fast); }
.btn:hover { background: var(--c-accent-dark); color: #fff; }
.btn--big { padding: 8px 36px; background: var(--c-accent-dark); font-size: 1.1rem; }
.btn--big:hover { background: #C22F2D; }
.btn--light { background: var(--c-white); color: var(--c-text); border: 1px solid #D5D5D5; font-size: .95rem; font-weight: 400; }
.btn--light:hover { background: var(--c-white); color: var(--c-link); border-color: var(--c-link); }
.btn--grey { background: #DDDDDD; color: var(--c-link); padding: 6px 26px; }
.btn--grey:hover { background: #CFCFCF; color: var(--c-link); }
.btn--outline { background: transparent; border: 1px solid #fff; color: #fff; font-size: .9rem; font-weight: 700; padding: 2px 10px; }
.btn--outline:hover { background: transparent; color: #B6B6B6; text-decoration: none; }
.badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 14px; }
.badge { display: inline-block; padding: 1px 7px; border-radius: 2px; background: var(--c-article); color: #fff; font-size: .9rem; line-height: 1.6; }
a.badge:hover { color: #fff; filter: brightness(1.1); }
.badge--game { background: var(--c-game); }
.badge--task { background: var(--c-task); }
.badge--book { background: var(--c-book); }
.badge--film { background: var(--c-film); }
.badge--exercise { background: var(--c-exercise); }
.badge--training, .badge--photo { background: var(--c-title); }

/* ---------- шапка: логотип, меню, лупа ---------- */
.menu { position: sticky; top: 0; z-index: 50; background: var(--c-white); box-shadow: 0 0 10px -2px rgba(0, 0, 0, .5); }
.menu__in { position: relative; display: flex; align-items: center; min-height: 60px; }
.logo { display: block; margin-right: auto; line-height: 0; }
.logo img { width: 98px; height: auto; }
.menu__toggle { display: none; }
.nav__list { display: flex; margin: 0; padding: 0; list-style: none; }
.nav__item { position: relative; }
.nav__item > a { display: flex; align-items: center; gap: 5px; min-height: 60px; padding: 0 16px; color: #30344D; font-size: 1.1rem; font-weight: 900; text-transform: uppercase; }
.nav__item > a:hover, .nav__item.is-current > a { color: var(--c-link); }
.nav__caret { width: 11px; height: 11px; }
.nav__sub-toggle { display: none; }
.nav__sub { position: absolute; top: calc(100% - 3px); left: 0; width: 188px; margin: 0; padding: 0; list-style: none; background: var(--c-white);
  border-top: 3px solid var(--c-link); box-shadow: 0 0 10px -8px rgba(0, 0, 0, .5); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--t), transform var(--t), visibility var(--t); }
.nav__item:hover .nav__sub, .nav__item:focus-within .nav__sub { opacity: 1; visibility: visible; transform: none; }
.nav__sub li:not(:last-child) { border-bottom: 1px solid #DDDDDD; }
.nav__sub a { display: block; padding: 8px 20px; color: var(--c-text); font-size: 1rem; font-weight: 500; }
.nav__sub a:hover { color: var(--c-link); background: #F3F3F3; }
.nav__sub a[aria-current] { color: var(--c-link); }
.search-open { display: flex; padding: 10px 0 10px 12px; color: #30344D; font-size: 1rem; }
.search-open:hover { color: var(--c-link); }

/* поиск: строка поиска появляется прямо в шапке справа, с лёгким увеличением — как на старом сайте */
.search-pop { position: absolute; top: 50%; right: 9px; z-index: 5; display: flex; align-items: center; width: 600px; max-width: calc(100% - 30px);
  padding: 0; background: var(--c-white); opacity: 0; visibility: hidden; transform: translateY(-50%) scale(.8);
  transition: opacity .2s linear, transform .2s linear, visibility .2s linear; }
.search-pop.is-open { opacity: 1; visibility: visible; transform: translateY(-50%); }
.search-pop__form { display: flex; flex: 1; align-items: center; min-width: 0; }
.search-pop input { flex: 1; min-width: 0; padding: 8px 16px; border: 1px solid #DDDDDD; border-radius: 3px; font: 300 15px/1.4 Roboto, sans-serif; color: var(--c-text); }
.search-pop input::placeholder { color: var(--c-text); }
.search-pop input:focus { outline: none; border-color: var(--c-text); }
.search-pop__go, .search-pop__close { flex: none; display: grid; place-items: center; margin-left: 10px; padding: 10px; border: 0; background: var(--c-white); color: #30344D; cursor: pointer; }
.search-pop__close { margin-left: 0; }
.search-pop__go:hover, .search-pop__close:hover { color: var(--c-link); }
.search-pop svg { width: 16px; height: 16px; }
.search-big input { flex: 1; min-width: 0; padding: 8px 12px; border: 1px solid #D5D5D5; border-radius: 3px; font: inherit; color: var(--c-text); }
.search-big { display: flex; gap: 12px; margin-bottom: 30px; }

/* ---------- шапки страниц: фото с затемнением ---------- */
.hero { position: relative; display: flex; align-items: center; min-height: 300px; overflow: hidden; background: var(--c-footer-bottom); color: #fff; text-align: center; isolation: isolate; }
.hero--tall { min-height: 630px; }   /* шапка статьи, как на старом сайте */
.hero--task { min-height: 520px; } .hero--training { min-height: 500px; } .hero--photo { min-height: 400px; }   /* у уроков, тренировок и фото шапка ниже, как было */
.hero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c-hero-shade); }
.hero__in { padding-top: 40px; padding-bottom: 40px; }
.hero__title { margin: 0; color: #fff; font-size: 2.8rem; font-weight: 900; line-height: 1.2; }
.hero__sub { margin: 12px 0 0; font-size: 1rem; font-weight: 700; }
.hero .info { justify-content: center; margin-top: 18px; }
.hero--home { min-height: 560px; text-align: left; }
.hero--home .hero__bg { object-position: 50% 0; }
.hero--home::before { background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, #2A2E45 80%); opacity: .82; }
.hero--home .hero__title { font-size: 3.3rem; font-style: italic; text-transform: uppercase; line-height: 1.45; }

/* строка «дата · просмотры · комментарии» */
.info { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; color: var(--c-muted); font-size: .95rem; font-weight: 500; }
.info span, .info a { display: inline-flex; align-items: center; gap: 7px; color: inherit; }
.info svg { width: 15px; height: 15px; }
.info--light, .info--light a { color: #fff; font-size: 1rem; }
.info--light a:hover { color: var(--c-accent); }

/* ---------- главная: цветные кружки разделов ---------- */
.circles { background: var(--c-white); padding: 30px 0; }
.circles__in { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.circle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 120px; height: 120px; border-radius: 50%;
  background: var(--c-article); color: #fff; font-size: 1rem; font-weight: 400; line-height: 1; text-align: center; padding: 0 10px; transition: all .2s ease-out; }
.circle:hover { color: #fff; transform: scale(1.04); }
.circle svg { width: 40px; height: 40px; }
.circle--books { background: var(--c-book); --icon-cut: var(--c-book); }
.circle--lesson-task { background: var(--c-task); }
.circle--games { background: var(--c-game); --icon-cut: var(--c-game); }
.circle--exercises { background: var(--c-exercise); }
.circle--films { background: var(--c-film); }

/* ---------- две колонки: лента/текст + правая колонка ---------- */
.columns { display: grid; grid-template-columns: minmax(0, 1fr) var(--side); gap: 30px; align-items: start; padding-top: 30px; padding-bottom: 30px; }
.columns__main > * + * { margin-top: 30px; }
.more { text-align: center; }
.side { display: grid; gap: 30px; }
.side__box { padding: 40px; background: var(--c-white); border-radius: var(--radius); }
.side__title, .box__title { position: relative; margin: 0 0 26px; padding-bottom: 14px; border-bottom: 1px solid var(--c-line); font-size: 1.4rem; }
.side__title::after, .box__title::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 56px; height: 2px; background: var(--c-link); }
.side__list { margin: 0; padding: 0; list-style: none; }
.side__list li + li { margin-top: 10px; }
.side__list a { display: flex; align-items: center; gap: 12px; color: var(--c-text); font-weight: 500; }
.side__list a:hover, .side__list a[aria-current] { color: var(--c-link); }
.side__list--icons li + li { margin-top: 14px; }
.side__list--icons svg { width: 22px; height: 22px; color: var(--c-title); --icon-cut: var(--c-white); }
.side__list--icons a:hover svg, .side__list--icons a[aria-current] svg { color: var(--c-link); }

/* лента главной: картинка слева, текст справа */
.feed-list { display: grid; gap: 30px; }
.feed { display: grid; grid-template-columns: 311px minmax(0, 1fr); min-height: 311px; background: var(--c-white); border-radius: var(--radius); overflow: hidden; }
.feed__img { display: block; }
.feed__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feed__body { align-self: center; padding: 30px; }
.feed__body .badge { margin-bottom: 8px; }
.feed__title { margin: 4px 0 8px; font-size: 1.65rem; }
.feed__title a { color: var(--c-title); }
.feed__title a:hover { color: var(--c-accent); }
.feed__title span { font-weight: 500; }
.feed__terms { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; color: var(--c-muted); }
.feed__terms svg { width: 16px; height: 16px; color: #555; }
.feed__text { margin-bottom: 14px; }

/* статья в списке: заголовок, ниже картинка с рубрикой и текст */
.post { padding: 40px; background: var(--c-white); border-radius: var(--radius); }
.post__title { font-size: 2rem; margin-bottom: 20px; }
.post__title a { color: var(--c-title); }
.post__title a:hover { color: var(--c-accent); }
.post__row { display: grid; grid-template-columns: 315px minmax(0, 1fr); gap: 25px; }
.post__img { position: relative; align-self: start; }
.post__img img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.post__img .badge { position: absolute; top: 20px; left: 20px; }
.post__body p { margin-bottom: 18px; }

/* ---------- списки разделов ---------- */
.list { padding-top: 30px; padding-bottom: 40px; }
.list--boxed { }
.list--boxed .toolbar, .list--boxed .list__results { background: var(--c-white); }
.list--boxed .toolbar { margin: 0; padding: 25px 40px 15px; border-radius: var(--radius) var(--radius) 0 0; }
.list--boxed .list__results { padding: 10px 40px 40px; border-radius: 0 0 var(--radius) var(--radius); }
.list--boxed .pager { margin-top: 40px; }
.toolbar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.toolbar select { width: 200px; padding: 5px 10px; border: 1px solid #D5D5D5; border-radius: 3px; background: var(--c-white); color: var(--c-muted); font: .95rem var(--font); cursor: pointer; }

/* кнопка «Фильтры» и панель, выезжающая справа (JetBlocks «Hamburger Panel» на старом сайте) */
.fpanel-open { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid #DDDDDD; border-radius: 3px;
  background: var(--c-white); color: var(--c-muted); font: 1rem var(--font); cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast); }
.fpanel-open:hover, .fpanel-open[aria-expanded="true"] { color: var(--c-link); border-color: var(--c-link); }
.fpanel-open svg { width: 16px; height: 16px; }
.fpanel { position: fixed; inset: 0; z-index: 100; visibility: hidden; transition: visibility .4s; }
.fpanel.is-open { visibility: visible; }
.fpanel__cover { position: absolute; inset: 0; background: rgba(0, 0, 0, .3); opacity: 0; transition: opacity .4s cubic-bezier(.6, .17, .45, .88); }
.fpanel.is-open .fpanel__cover { opacity: 1; }
.fpanel__box { position: absolute; top: 0; right: 0; bottom: 0; width: 300px; max-width: 100%; overflow-y: auto; padding: 30px; background: var(--c-white);
  box-shadow: 0 0 10px rgba(0, 0, 0, .15); transform: translateX(100%); transition: transform .4s cubic-bezier(.6, .17, .45, .88); }
.fpanel.is-open .fpanel__box { transform: none; }
.fpanel__close { position: absolute; top: 20px; right: 20px; display: flex; padding: 4px; border: 0; background: none; color: var(--c-muted); cursor: pointer; }
.fpanel__close:hover { color: var(--c-accent); }
.fpanel__close svg { width: 16px; height: 16px; }
.fpanel__title { margin: 0 0 20px; color: var(--c-title); font-size: 1.4rem; font-weight: 700; }
.fpanel__search { display: flex; margin-bottom: 20px; }
.fpanel__search input { flex: 1; min-width: 0; height: 38px; padding: 6px 10px 6px 9px; border: 1px solid #DDDDDD; border-radius: 3px; color: var(--c-muted); font: 1rem var(--font); }
.fpanel__search input:focus { outline: none; border-color: var(--c-link); }
.fpanel__search button { flex: none; display: grid; place-items: center; width: 38px; height: 38px; margin-left: 10px; border: 1px solid var(--c-link); border-radius: 3px;
  background: var(--c-link); color: #fff; cursor: pointer; }
.fpanel__search button:hover { background: var(--c-accent); border-color: var(--c-accent); }
.fpanel__search svg { width: 16px; height: 16px; }
.fgroup { border-top: 1px solid #DDDDDD; }
.fgroup:last-of-type { border-bottom: 1px solid #DDDDDD; }
.fgroup summary { display: flex; align-items: center; justify-content: space-between; min-height: 37px; padding: 6px 0; color: var(--c-text);
  font-size: 1.1rem; font-weight: 700; cursor: pointer; list-style: none; }
.fgroup summary::-webkit-details-marker { display: none; }
.fgroup summary svg { width: 12px; height: 12px; color: var(--c-muted); transform: rotate(-90deg); transition: transform var(--t-fast); }
.fgroup[open] summary svg { transform: none; }
.fgroup summary:hover { color: var(--c-link); }
.fgroup ul { margin: 0 0 12px; padding: 0; list-style: none; }
.fgroup li { padding-top: 5px; margin-bottom: 5px; }
.fgroup label { display: flex; align-items: flex-start; gap: 5px; color: var(--c-muted); font-size: 1rem; line-height: 1.2; cursor: pointer; }
.fgroup label:hover { color: var(--c-link); }
.fgroup input { flex: none; appearance: none; width: 15px; height: 15px; margin: 1px 0 0; border: 1px solid #CCCCCC; border-radius: 3px; background: var(--c-white); cursor: pointer; display: grid; place-items: center; }
.fgroup input::after { content: ""; width: 4px; height: 8px; margin-top: -2px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0; }
.fgroup input:checked { border-color: var(--c-link); background: var(--c-link); }
.fgroup input:checked::after { opacity: 1; }
.fgroup input:checked + span { color: var(--c-link); }
.fgroup input:focus-visible { outline: 2px solid var(--c-link); outline-offset: 1px; }
.fpanel__reset { display: flex; width: max-content; margin: 25px auto 0; }
.fpanel__reset[hidden] { display: none; }

/* выбранные фильтры над списком */
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 20px; padding: 0; list-style: none; }
.fchip { position: relative; display: inline-block; padding: 0 16px 0 6px; border: 1px solid #DDDDDD; border-radius: 3px; background: var(--c-white);
  color: var(--c-text); font-size: .9rem; line-height: 1.6; }
.fchip span { color: var(--c-muted); text-transform: lowercase; }
.fchip b { position: absolute; top: 50%; right: 3px; transform: translateY(-50%); color: var(--c-muted); font-size: 21px; font-weight: 400; line-height: 1; }
.fchip:hover { color: var(--c-text); }
.fchip:hover span { color: var(--c-accent); }
.fchip:hover b { color: var(--c-accent-dark); }
.list__results.is-loading { opacity: .5; pointer-events: none; transition: opacity .2s; }

.grid { display: grid; gap: 30px 40px; }
.grid--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--covers { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 30px; }
.grid--articles { grid-template-columns: 1fr; }

/* игра, урок, упражнение: квадратная картинка слева */
.card { display: grid; grid-template-columns: 173px minmax(0, 1fr); min-height: 173px; background: var(--c-white); }
.card__img img { display: block; width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; }
.card__body { padding: 15px 20px; }
.card__title { margin: 0 0 10px; font-size: 1.35rem; }
.card__title a { color: var(--c-title); }
.card__title a:hover { color: var(--c-accent); }
.card__text { margin: 0; }

/* книга, фильм: обложка */
.cover__img { position: relative; display: block; line-height: 0; }
.cover__img img { width: 100%; aspect-ratio: 300 / 429; object-fit: cover; border: 1px solid #E6E6E6; }
.cover__year { position: absolute; right: 8px; bottom: 8px; padding: 3px 8px; background: var(--c-link); color: #fff; font-size: 1.1rem; font-weight: 500; line-height: 1.4; }
.cover__rating { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 10px 0 0; color: var(--c-muted); font-weight: 500; }
.cover__title { margin: 10px 0 6px; font-size: 1.25rem; }
.cover__title a { color: var(--c-title); }
.cover__title a:hover { color: var(--c-accent); }
.cover__sub { margin: 0; color: var(--c-muted); }

/* звёзды оценки: серые снизу, жёлтые сверху на нужную ширину */
.stars { position: relative; display: inline-flex; flex: none; line-height: 0; }
.stars__row { display: inline-flex; gap: 1px; color: var(--c-star-off); white-space: nowrap; }
.stars__row--on { position: absolute; inset: 0 auto 0 0; overflow: hidden; color: var(--c-star); }
.stars svg { width: 16px; height: 16px; }

.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; margin-top: 30px; }
.pager a, .pager span { min-width: 34px; padding: 4px 12px; border: 1px solid #E2E4EA; border-radius: 3px; background: #E2E4EA; color: #3B3D42; text-align: center; transition: background var(--t-fast), color var(--t-fast); }
.pager span { background: var(--c-white); color: var(--c-text); }
.pager a:hover { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }

/* ---------- материал: белый лист по центру ---------- */
.sheet { padding-top: 30px; padding-bottom: 30px; }
.sheet__in { max-width: var(--wrap-text); margin: 0 auto; }
.sheet__in > * + *, .columns__main > .box + .box { margin-top: 30px; }
.sheet + .sheet { padding-top: 0; }
.box { padding: 40px; background: var(--c-white); border-radius: var(--radius); }
.box--over { position: relative; margin-top: -100px; }
.box__title { margin-top: 10px; }
.box > .box__title:first-child { margin-top: 0; }

/* текст материала */
.rich { overflow-wrap: break-word; }
.rich > :last-child { margin-bottom: 0; }
/* заголовки и абзацы внутри текста — размеры старого сайта (тема Hello + Elementor) */
.rich h2, .rich h3, .rich h4, .rich h5 { margin: .5rem 0 1rem; font-weight: 700; line-height: 1.2; }
.rich h2 { font-size: 2rem; }
.rich h3 { font-size: 1.7rem; }
.rich h4 { font-size: 1.4rem; }
.rich h5 { font-size: 1.3rem; }
.rich p { margin: 0 0 12px; }
.rich ul, .rich ol { padding-left: 40px; margin: 0 0 12px; }
.rich .text-center { text-align: center; }
.rich .text-right { text-align: right; }
.rich .text-justify { text-align: justify; }
.rich img { max-width: 100%; }
.rich blockquote { margin: 1em 0; padding: 10px 20px; border-left: 4px solid var(--c-link); background: #F8F8F8; }
.rich table, .box table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: .95rem; }
.rich td, .rich th, .box td, .box th { padding: 8px 10px; border: 1px solid #DCDCDC; vertical-align: top; }
.rich th, .box th { background: #F5F5F5; font-weight: 700; text-align: center; }
.box caption { padding: 8px; font-weight: 700; text-align: center; caption-side: top; color: var(--c-title); }
.table-wrap { overflow-x: auto; }
.tags { margin-top: 20px; color: var(--c-muted); font-size: .95rem; }
.video { margin-bottom: 25px; }
.video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

/* раскрывающиеся разделы («Нормативы») */
.accordion { border: 1px solid var(--c-line); border-radius: var(--radius); margin-top: 10px; background: var(--c-white); }
.accordion__title { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; color: var(--c-title); font-weight: 700; cursor: pointer; list-style: none; }
.accordion__title::-webkit-details-marker { display: none; }
.accordion__title::after { content: "+"; color: var(--c-link); font-size: 1.4rem; line-height: 1; }
.accordion[open] .accordion__title { color: var(--c-link); border-bottom: 1px solid var(--c-line); }
.accordion[open] .accordion__title::after { content: "−"; }
.accordion__body { padding: 10px 20px 20px; }

/* поделиться и просмотры */
.share { display: flex; align-items: center; gap: 18px; margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--c-line); }
.share a { display: flex; color: #616161; font-size: 1.25rem; }
.share a:hover { color: var(--c-link); }
.share__views { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: var(--c-muted); }

/* «Вам может быть интересно» */
.grid--mini { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 17px; }
.mini__img { display: block; }
.mini__img img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.mini__title { margin: 12px 0 0; font-size: 1.1rem; font-weight: 700; line-height: 1.3; }
.mini__title a { color: #54595F; }
.mini__title a:hover { color: var(--c-accent); }

/* ---------- подвижная игра: фото, слева название, справа фиолетовая панель ---------- */
.game-head { position: relative; display: grid; min-height: 500px; overflow: hidden; color: #fff; isolation: isolate; background: var(--c-footer-bottom); }
.game-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to right, var(--c-hero-shade) 50%, var(--c-game-panel) 50%); }
.game-head__in { display: grid; grid-template-columns: 1fr 1fr; }
/* название игры прижато вправо, к фиолетовой панели — как на старом сайте */
.game-head__title { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; padding: 60px 40px; text-align: right; }
.game-head__title .badge { margin-bottom: 14px; padding: 0 8px; font-size: 1.3rem; line-height: 31px; }
.game-head__title .hero__title { font-size: 2rem; }
.game-head__facts { align-self: center; max-width: 705px; margin: 0; padding: 40px 40px; list-style: none; font-size: 1.1rem; line-height: 1.5; }
.game-head__facts li { display: flex; gap: 10px; padding: 4px 0; }
.game-head__facts svg { width: 16px; height: 16px; margin-top: 4px; --icon-cut: #A86CC3; }
.game-head__facts b { text-transform: uppercase; font-weight: 700; }
.game-head__facts a { color: #fff; }
.game-head__facts a:hover { text-decoration: underline; }

/* ---------- упражнение: слева вид и название, справа данные ---------- */
.ex-head__in { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; }
.ex-head__title { text-align: right; }
.ex-head__title p { margin: 0; font-size: 1.4rem; }
.ex-head__title h1 { margin: 0; color: #fff; font-size: 1.9rem; font-weight: 700; }
.ex-head__facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; margin: 0; text-align: left; font-size: 1rem; }
.ex-head__facts dt { color: rgba(255, 255, 255, .75); }
.ex-head__facts dd { margin: 0; font-weight: 700; }
.ex-head__facts a { color: #fff; }
.steps { margin: 30px 0; padding: 0; list-style: none; }
.steps li { display: grid; grid-template-columns: 50px 1fr; gap: 14px; margin-bottom: 18px; }
.steps__num { color: var(--c-link); font-size: 1.5rem; line-height: 1.2; text-align: center; }
.steps p { margin: 0; }
.step-pics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0 0 30px; }
.step-pics figure { display: grid; margin: 0; }
.step-pics img, .step-pics figcaption { grid-area: 1 / 1; }
.step-pics img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.step-pics figcaption { align-self: end; justify-self: start; padding: 4px 12px; background: var(--c-link); color: #fff; font-size: 1.1rem; font-weight: 500; }
.step-pics figure p { margin: 8px 0 0; font-size: .95rem; }
.pointlist { margin: 0 0 30px; padding-left: 1.3em; }
.pointlist li { margin-bottom: 10px; }
.pointlist--bad li::marker { color: var(--c-accent); }

/* ---------- книга: персиковая полоса с волной ---------- */
/* книга: оранжевый градиент и две полупрозрачные волны Elementor (сверху wave-brush, снизу waves) */
.book-head { position: relative; padding: 30px 0; background: linear-gradient(280deg, rgba(255, 140, 0, .11) 0%, rgba(255, 153, 0, .29) 100%); overflow: hidden; }
.book-head__in { position: relative; z-index: 1; display: grid; grid-template-columns: 322px minmax(0, 1fr); gap: 30px; max-width: var(--wrap-text); }
.book-head__cover { display: block; width: 100%; height: auto; box-shadow: var(--shadow); }
.book-head h1 { margin: 4px 0 12px; font-size: 1.75rem; }
.book-head__bib { font-size: 1rem; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 50px; margin: 0 0 24px; }
.facts dt { color: var(--c-muted); }
.facts dd { margin: 0; color: var(--c-text); }
.facts a { color: var(--c-text); }
.facts a:hover { color: var(--c-link); }
.buy { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- фильм: тёмная шапка ---------- */
.film-head { position: relative; padding: 30px 0; background: var(--c-footer-bottom); color: #fff; isolation: isolate; overflow: hidden; }
.film-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(42, 46, 69, .72); }
.film-head__in { display: grid; grid-template-columns: 302px minmax(0, 1fr); gap: 30px; max-width: var(--wrap-text); }
.film-head__poster img { display: block; width: 100%; border-radius: 3px; }
.film-head__watch { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; color: #fff; font-weight: 700; line-height: 1.2; }
.film-head__watch svg { width: 34px; height: 34px; padding: 8px; border-radius: 3px; background: #E8264F; }
.film-head__watch small { display: block; color: #ABABAB; font-size: 1rem; }
.film-head__watch:hover { color: #fff; }
.film-head__info { align-self: center; }
.film-head h1 { margin: 0; color: #fff; font-size: 2.1rem; }
.film-head h1 span { font-weight: 400; font-size: 1.7rem; }
.film-head__orig { margin: 0 0 8px; color: #9DA0B0; }
.film-head__sport { font-style: italic; }
.film-head a { color: #fff; }
.film-head a:hover { text-decoration: underline; }
.film-head__line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.film-head .chip { padding: 0 6px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 3px; }
.film-head .dot::before { content: "•"; margin-right: 10px; }
.film-head__rate { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.film-head__rate .stars svg { width: 21px; height: 21px; }
.film-head__rate .btn svg { width: 14px; height: 14px; }
.film-head h2 { margin: 16px 0 2px; color: #fff; font-size: 1.5rem; }
.film-head h2 + p { margin: 0; color: #DADCE4; }

/* фотоальбом */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 20px; }
.gallery figure { margin: 0; }
.gallery img { display: block; width: 100%; }

/* тренировка */
.session { margin-top: 30px; }
.session small { color: var(--c-muted); font-size: 1rem; font-weight: 400; }

/* обратная связь */
.form { display: grid; gap: 14px; }
.form label { display: grid; gap: 4px; font-size: .95rem; }

/* ---------- подвал ---------- */
.footer { background: var(--c-footer); color: var(--c-footer-text); font-size: .9rem; text-align: center; }
.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding-top: 30px; padding-bottom: 30px; }
.footer__about img { width: 98px; }
.footer__about p { margin: 6px 0 0; max-width: 150px; margin-left: auto; margin-right: auto; }
.footer__links { margin: 0; padding: 0; list-style: none; }
.footer__links li + li { margin-top: 4px; }
.footer__links a, .footer__contacts a { color: #fff; font-weight: 700; }
.footer__contacts a { font-weight: 400; }
.footer a:hover { color: var(--c-link); }
.footer__contacts p { margin: 0 0 8px; }
.footer__bottom { padding: 20px 0; background: var(--c-footer-bottom); color: #DDDDDD; font-size: .8rem; text-align: left; }
.footer__bottom a { color: #DDDDDD; font-weight: 400; }

/* ---------- планшет ---------- */
@media (max-width: 1100px) {
  .grid--covers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .columns { grid-template-columns: 1fr; }
  .grid--cards { grid-template-columns: 1fr; }
  .grid--covers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .game-head__in, .ex-head__in { grid-template-columns: 1fr; }
  .game-head__title { align-items: center; padding: 40px 30px; text-align: center; }
  .game-head::before { background: var(--c-hero-shade); }
  .game-head__facts { max-width: none; background: var(--c-game-panel); padding: 30px; }
  .ex-head__title { text-align: center; }
  .ex-head__facts { justify-self: center; }
  .feed { grid-template-columns: 220px minmax(0, 1fr); min-height: 0; }

  /* меню прячется под кнопку */
  .menu__toggle { display: flex; order: 2; padding: 10px; border: 0; background: none; color: var(--c-title); font-size: 1.3rem; cursor: pointer; }
  .search-open { order: 1; }
  .nav { position: absolute; top: 100%; left: 0; right: 0; display: none; background: var(--c-white); box-shadow: 0 8px 16px rgba(0, 0, 0, .1); }
  .menu.is-open .nav { display: block; }
  .nav__list { flex-direction: column; padding: 6px 0; }
  .nav__item { display: flex; flex-wrap: wrap; border-top: 1px solid #EDEDED; }
  .nav__item > a { flex: 1; padding: 12px 20px; }
  .nav__caret { display: none; }
  .nav__sub-toggle { display: flex; align-items: center; padding: 0 20px; border: 0; background: none; color: var(--c-title); cursor: pointer; }
  .nav__item.is-open .nav__sub-toggle svg { transform: rotate(180deg); }
  .nav__sub { position: static; display: none; width: 100%; box-shadow: none; opacity: 1; visibility: visible; transform: none; background: #FAFAFA; }
  .nav__item.is-open .nav__sub { display: block; }
  .nav__sub a { padding-left: 36px; }
}

/* ---------- телефон ---------- */
@media (max-width: 640px) {
  :root { --fs-body: 1rem; }
  .hero { min-height: 220px; }
  .hero--tall, .game-head { min-height: 320px; }
  .hero__title { font-size: 1.9rem; }
  .hero--home { min-height: 380px; }
  .hero--home .hero__title { font-size: 2rem; }
  .circles { padding: 24px 0; }
  .circles__in { gap: 12px; }
  .circle { width: 96px; height: 96px; font-size: .8rem; }
  .circle svg { width: 28px; height: 28px; }
  .feed { grid-template-columns: 1fr; }
  .feed__img img { aspect-ratio: 16 / 9; height: auto; }
  .feed__body { padding: 20px; }
  .feed__title { font-size: 1.35rem; }
  .post, .box, .side__box { padding: 20px; }
  .post__title { font-size: 1.5rem; }
  .post__row { grid-template-columns: 1fr; }
  .card { grid-template-columns: 110px minmax(0, 1fr); min-height: 110px; }
  .card__title { font-size: 1.1rem; }
  .card__text { font-size: .95rem; }
  .grid--covers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .list--boxed .list__results { padding: 10px 20px 25px; }
  .list--boxed .toolbar { padding: 20px 20px 0; }
  .toolbar select { width: 160px; }
  .grid--mini { grid-template-columns: 1fr; }
  .step-pics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .book-head__in, .film-head__in { grid-template-columns: 1fr; }
  .book-head__cover, .film-head__poster { max-width: 260px; margin: 0 auto; }
  .facts { gap: 6px 20px; }
  .box--over { margin-top: -60px; }
  .footer__cols { grid-template-columns: 1fr; }
  .footer__bottom { text-align: center; }
}

/* ---------- плавность ---------- */
@keyframes fade-in { from { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(-14px) scale(.98); } }
@keyframes zoom-in { from { opacity: 0; transform: scale(.94); } }
.search-pop[open] { animation: pop-in var(--t) var(--ease); }
.search-pop[open]::backdrop, .zoom[open]::backdrop { animation: fade-in var(--t) var(--ease); }
.zoom__fig img:not([hidden]) { animation: zoom-in .4s var(--ease); }
.zoom__fig figcaption:not([hidden]) { animation: fade-in .5s var(--ease) .1s backwards; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- картинки в тексте, увеличение фото, комментарии ---------- */
/* картинки и видео в тексте */
.rich .richtext-image { margin: 1em auto; }
.rich .richtext-image.full-width { display: block; width: auto; max-width: 100%; height: auto; }
.rich .richtext-image.left { float: left; max-width: 45%; margin: .3em 24px 12px 0; }
.rich .richtext-image.right { float: right; max-width: 45%; margin: .3em 0 12px 24px; }
/* картинка с подписью (core/image_formats.py): плавает сама рамка, картинка внутри по её ширине;
   во всю ширину — не больше своего настоящего размера, мелкие не растягиваются */
.rich .rich-figure { margin: 1em auto; text-align: center; }
.rich .rich-figure--left { float: left; width: 30%; margin: .3em 24px 12px 0; }
.rich .rich-figure--right { float: right; width: 30%; margin: .3em 0 12px 24px; }
.rich .rich-figure .richtext-image { float: none; display: block; margin: 0 auto; max-width: 100%; height: auto; }
.rich .rich-figure .richtext-image.full-width { width: auto; }
.rich .rich-figure a { display: block; cursor: zoom-in; }
.rich .rich-figure figcaption { margin-top: 6px; color: var(--c-muted); font-size: .9rem; line-height: 1.35; }
.zoom { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; outline: none; }
.zoom[open] { display: flex; align-items: center; justify-content: center; }
.zoom::backdrop { background: rgba(0, 0, 0, .88); }
.zoom :focus, .zoom :focus-visible { outline: none; }
.zoom__fig { margin: 0; text-align: center; }
.zoom__fig img { display: block; max-width: 92vw; max-height: 84vh; width: auto; height: auto; margin: 0 auto; border-radius: var(--radius); cursor: zoom-out; }
.zoom__fig figcaption { max-width: 80vw; margin: 8px auto 0; color: #fff; font-size: .95rem; line-height: 1.35; }
.zoom__wait { display: block; width: 40px; height: 40px; border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff; border-radius: 50%; animation: zoom-spin .8s linear infinite; }
.zoom__wait[hidden], .zoom__fig img[hidden] { display: none; }
@keyframes zoom-spin { to { transform: rotate(360deg); } }
.zoom button { position: fixed; z-index: 1; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .15); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; transition: background .15s; }
.zoom button:hover, .zoom button:focus-visible { background: rgba(255, 255, 255, .3); }
.zoom__close { top: 12px; right: 16px; }
.zoom__nav { top: 50%; transform: translateY(-50%); font-size: 40px; padding-bottom: 4px; }
.zoom__nav--prev { left: 12px; }
.zoom__nav--next { right: 12px; }
.zoom__count { position: fixed; top: 22px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, .8); font-size: .9rem; }
@media (max-width: 600px) {
  .zoom__fig img { max-width: 100vw; border-radius: 0; }
  .zoom__nav { top: auto; bottom: 16px; transform: none; }
}

.rich iframe, .rich .responsive-object iframe { width: 100%; height: auto; aspect-ratio: 16/9; border: 0; border-radius: var(--radius); margin: 1em 0; }
.rich .responsive-object { position: static !important; padding: 0 !important; height: auto !important; }
.rich hr { border: 0; border-top: 1px solid var(--c-line); margin: 2em 0; }
.rich sup { line-height: 0; color: var(--c-rust); font-weight: 700; }

/* комментарии */
.comments { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--c-line); }
.comments h2 { font-size: 1.4rem; }
.comments__count { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 14px;
  background: var(--c-cream); color: var(--c-rust); font-size: .9rem; vertical-align: middle; }
.comments__list, .comments__replies { list-style: none; margin: 0; padding: 0; }
.comment { padding: 16px 0; border-bottom: 1px solid var(--c-line); }
.comments__replies { margin: 12px 0 0 28px; border-left: 3px solid var(--c-cream); padding-left: 16px; }
.comments__replies .comment:last-child { border-bottom: 0; padding-bottom: 0; }
.comment__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 6px; }
.comment__head time { color: var(--c-muted); font-size: .85rem; }
.comment__text { overflow-wrap: anywhere; }
.comment__reply { background: none; border: 0; padding: 6px 0 0; color: var(--c-rust); font: 500 .85rem var(--font); cursor: pointer; }
.comment__reply:hover { color: var(--c-accent); }
.comment-form { margin-top: 28px; padding: 24px; background: var(--c-cream); border-radius: var(--radius); display: grid; gap: 14px; }
.comment-form h3 { margin: 0; font-size: 1.15rem; }
.comment-form label { display: grid; gap: 4px; font-size: .9rem; color: var(--c-text-2); }
.comment-form input, .comment-form textarea, .form input, .form textarea, .form select {
  font: inherit; font-size: 1rem; padding: 10px 12px; border: 1px solid #DCCBB8; border-radius: var(--radius); background: #fff; color: var(--c-text); }
.comment-form input:focus, .comment-form textarea:focus, .form input:focus, .form textarea:focus { outline: 2px solid var(--c-peach); border-color: var(--c-rust); }
.comment-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.comment-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.comment-form button[type=submit] { justify-self: start; }
.comment-form__replyto { margin: 0; font-size: .9rem; }
.comment-form__replyto button { background: none; border: 0; color: var(--c-accent); cursor: pointer; font: inherit; text-decoration: underline; }
.notice { padding: 12px 16px; border-radius: var(--radius); margin: 12px 0; }
.notice--ok { background: #E8F3E3; color: #2F5A22; }
.notice--error { background: #FBE3DF; color: var(--c-accent-dark); }


/* ---------- читалка книг (static/js/reader.js) ---------- */
html.reader-open { overflow: hidden; }
.reader { position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-rows: auto 1fr auto; color: var(--c-reader-text);
  
  background:
    linear-gradient(180deg, var(--c-peach) 0%, var(--c-peach-2) 100%);
  animation: fade-in var(--t) var(--ease); outline: 0; -webkit-tap-highlight-color: transparent; }
.reader [hidden] { display: none !important; }
.reader svg { width: 18px; height: 18px; }

.reader__bar { position: relative; z-index: 7; display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 12px 8px 20px; }
.reader__title { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 1.05rem; font-weight: 500; }
.reader__title svg { color: var(--c-accent); width: 22px; height: 22px; }
.reader__title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader__tools { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.reader__btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--c-reader-text); cursor: pointer; transition: background var(--t-fast), color var(--t-fast); }
.reader__btn:hover { background: rgba(59, 61, 66, .08); color: var(--c-accent-dark); }
.reader__btn--close { margin-left: 6px; background: var(--c-accent); color: #fff; }
.reader__btn--close:hover { background: var(--c-accent-dark); color: #fff; }   /* крестик остаётся белым */

.reader__stage { position: relative; min-height: 0; overflow: hidden; }
.reader__scroll { position: absolute; inset: 0; display: flex; overflow: auto; overscroll-behavior: contain; touch-action: none; }
/* прокрутка нужна только увеличенной странице; иначе переворачиваемый лист на миг вылезает за край,
   появляется полоса прокрутки и книга дёргается вбок */
.reader:not(.is-zoomed) .reader__scroll { overflow: hidden; }
.reader.is-zoomed .reader__scroll { touch-action: pan-x pan-y; cursor: grab; }
.reader.is-dragging .reader__scroll, .reader.is-dragging .reader__book { cursor: grabbing; user-select: none; }
.reader__zoom { width: auto; min-width: 54px; padding: 0 8px; border-radius: 21px; font: 500 .85rem/1 var(--font); font-variant-numeric: tabular-nums; }
.reader.is-zoomed .reader__zoom { background: var(--c-accent); color: #fff; }
.reader__book { position: relative; display: flex; flex: none; margin: auto; perspective: 2800px; cursor: pointer; }
.reader.is-zoomed .reader__book { cursor: inherit; }

/* страницы: белый лист, у разворота — тень у корешка и едва заметный край стопки */
.reader__sheet { position: relative; flex: 1 1 0; height: 100%; overflow: hidden; background: var(--c-paper); box-shadow: var(--shadow-book); border-radius: 2px; }
.reader__sheet--left { display: none; }
.reader.is-spread .reader__sheet--left { display: block; border-radius: 3px 0 0 3px; box-shadow: var(--shadow-book), -1px 1px 0 #E8E8E8, -2px 2px 0 #FFF, -3px 3px 0 #DDDDDD; }
.reader.is-spread .reader__sheet--right { border-radius: 0 3px 3px 0; box-shadow: var(--shadow-book), 1px 1px 0 #E8E8E8, 2px 2px 0 #FFF, 3px 3px 0 #DDDDDD; }
.reader.is-spread .reader__sheet::after { content: ""; position: absolute; top: 0; bottom: 0; width: 9%; pointer-events: none; }
.reader.is-spread .reader__sheet--left::after { right: 0; background: linear-gradient(to left, rgba(60, 40, 30, .2), rgba(60, 40, 30, .06) 30%, transparent); }
.reader.is-spread .reader__sheet--right::after { left: 0; background: linear-gradient(to right, rgba(60, 40, 30, .22), rgba(60, 40, 30, .06) 30%, transparent); }
.reader .reader__sheet.is-empty { background: transparent; box-shadow: none; }
.reader .reader__sheet.is-empty::after { display: none; }
.reader__page { display: block; width: 100%; height: 100%; object-fit: contain; }
.reader__page.is-fresh { animation: fade-in var(--t-fast) var(--ease); }

/* лист, который переворачивается */
.reader__leaf { position: absolute; top: 0; z-index: 3; width: 50%; height: 100%; transform-style: preserve-3d; pointer-events: none; }
.reader__leaf--next { left: 50%; transform-origin: left center; }
.reader__leaf--prev { left: 0; transform-origin: right center; }
.reader__face { position: absolute; inset: 0; overflow: hidden; background: var(--c-paper); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.reader__face--back { transform: rotateY(180deg); }
.reader__face.is-empty { background: transparent; }
.reader__face::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; animation: leaf-shade .7s ease-in-out; }
.reader__leaf--next .reader__face::after, .reader__leaf--prev .reader__face--back::after { background: linear-gradient(to left, rgba(40, 25, 20, .35), transparent 70%); }
.reader__leaf--prev .reader__face::after, .reader__leaf--next .reader__face--back::after { background: linear-gradient(to right, rgba(40, 25, 20, .35), transparent 70%); }
@keyframes leaf-shade { 50% { opacity: 1; } }
.reader__ghost { position: absolute; inset: 0; z-index: 2; overflow: hidden; background: var(--c-paper); box-shadow: var(--shadow-book); pointer-events: none; }

/* пока страница рисуется: обложка (для первой) или ромбик-узор */
.reader__wait { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: var(--c-paper); color: var(--c-meta); font-size: .95rem; }
.reader__wait--cover img { width: 100%; height: 100%; object-fit: cover; }
.reader__spin { width: 22px; height: 22px; border: 3px solid var(--c-accent); border-radius: 3px; transform: rotate(45deg); animation: reader-spin 1.2s var(--ease-slide) infinite; }
.reader__wait-num { opacity: .7; }
@keyframes reader-spin { 50% { transform: rotate(225deg) scale(.7); border-color: var(--c-peach-2); } to { transform: rotate(405deg); } }

/* стрелки по бокам */
.reader__nav { position: absolute; top: 50%; z-index: 4; width: 52px; height: 52px; margin-top: -26px; background: var(--c-reader-glass);
  box-shadow: inset 0 0 0 1px var(--c-reader-line); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.reader__nav:hover { background: var(--c-accent); color: #fff; box-shadow: none; }
.reader__nav svg { width: 20px; height: 20px; }
.reader__nav--prev { left: 16px; }
.reader__nav--next { right: 16px; }
.reader.is-first .reader__nav--prev, .reader.is-last .reader__nav--next { opacity: 0; pointer-events: none; }

/* низ: номер страницы и полоса книги (светлая часть — сколько уже загружено) */
.reader__foot { display: flex; align-items: center; gap: 18px; padding: 10px 24px 14px; }
.reader__count { display: flex; align-items: center; gap: 6px; flex: none; font-size: .95rem; white-space: nowrap; }
.reader__num { width: 3.4em; padding: 5px 4px; border: 1px solid var(--c-reader-line); border-radius: 6px; background: rgba(255, 255, 255, .6);
  color: inherit; font: inherit; text-align: center; }
.reader__num:focus { outline: 0; border-color: var(--c-accent); background: #fff; }
.reader__pair { margin-left: -4px; }
.reader__of { opacity: .75; }
.reader__track { position: relative; flex: 1; height: 26px; }
.reader__buffer { position: absolute; left: 0; top: 50%; width: 0; height: 4px; margin-top: -2px; border-radius: 2px; background: rgba(249, 79, 79, .25); transition: width var(--t) var(--ease); }
.reader.is-loaded .reader__buffer { opacity: 0; transition: opacity 1s 1s; }
.reader__range { --pos: 0%; position: relative; display: block; width: 100%; height: 26px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.reader__range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--c-accent) var(--pos), rgba(59, 61, 66, .14) var(--pos)); }
.reader__range::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--c-accent) var(--pos), rgba(59, 61, 66, .14) var(--pos)); }
.reader__range::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: -6px; border: 2px solid #fff; border-radius: 3px; background: var(--c-accent); transform: rotate(45deg); -webkit-appearance: none; }
.reader__range::-moz-range-thumb { width: 12px; height: 12px; border: 2px solid #fff; border-radius: 3px; background: var(--c-accent); transform: rotate(45deg); }
.reader__range:focus { outline: 0; }
.reader__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(249, 79, 79, .4); }

.reader__toast { position: absolute; left: 50%; bottom: 18px; z-index: 5; max-width: calc(100% - 32px); padding: 10px 18px; transform: translateX(-50%);
  border-radius: 22px; background: #fff; color: var(--c-text); box-shadow: var(--shadow); font-size: .95rem; text-align: center; }
.reader__link { padding: 0; border: 0; background: none; color: var(--c-accent); font: inherit; text-decoration: underline; cursor: pointer; }
.reader__error { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 20px; background: var(--c-cream); text-align: center; }

/* касание середины на телефоне прячет панели — книга на весь экран */
.reader.is-bare .reader__bar, .reader.is-bare .reader__foot { display: none; }
.reader.is-bare .reader__nav { opacity: 0; pointer-events: none; }

@media (max-width: 600px) {
  .reader__bar { min-height: 50px; padding: 4px 6px 4px 14px; gap: 6px; }
  .reader__title { font-size: .95rem; }
  .reader__title svg { display: none; }
  .reader__btn { width: 38px; height: 38px; }
  .reader__btn--mode { display: none; }
  .reader__nav { width: 40px; height: 40px; margin-top: -20px; opacity: .75; }
  .reader__nav--prev { left: 6px; }
  .reader__nav--next { right: 6px; }
  .reader__foot { gap: 12px; padding: 8px 14px max(12px, env(safe-area-inset-bottom)); }
}
@media (hover: none) and (pointer: coarse) { .reader__nav { display: none; } }
/* панель редактора Wagtail (видна только администратору) не закрывает книгу */
html.reader-open wagtail-userbar { display: none; }

/* комментарии внутри белого листа: без своей верхней черты */
.box > .comments { margin-top: 0; padding-top: 0; border-top: 0; }
.box .center { margin: 24px 0 0; }
/* небольшая картинка (как уменьшенные копии на старом сайте): у левого края или по центру */
.rich .rich-figure--small { text-align: left; }
.rich .rich-figure--small .richtext-image, .rich .rich-figure--small-center .richtext-image { width: auto; max-width: 100%; }
.rich .rich-figure--small .richtext-image { margin: 0; }
/* галерея из старых статей ([gallery] WordPress): плитки по 5 в ряд, нажатие — крупно */
.rich .rich-figure--gallery { float: left; width: calc(20% - 8px); margin: 0 4px 8px; }
.rich .rich-figure--gallery + :not(.rich-figure--gallery) { clear: left; }
.rich .rich-figure--gallery .richtext-image { width: 100%; }
.rich .rich-figure--gallery figcaption { font-size: .8rem; }
@media (max-width: 640px) { .rich .rich-figure--gallery { width: calc(33.33% - 8px); } }

/* страница «не найдено» */
.error-page { max-width: 760px; padding-top: 30px; padding-bottom: 60px; text-align: center; }
.error-page__pic { display: block; width: 577px; max-width: 100%; height: auto; margin: 32px auto 20px; }
.error-page h1 { font-size: 2.8rem; font-weight: 900; }
@media (max-width: 640px) { .error-page h1 { font-size: 2rem; } }
/* формы */
.form input, .form textarea, .form select { width: 100%; font: inherit; font-size: 1rem; padding: 10px 12px; border: 1px solid #D5D5D5; border-radius: 3px; background: #fff; color: var(--c-text); }
.form input:focus, .form textarea:focus { outline: 2px solid rgba(63, 144, 220, .35); border-color: var(--c-link); }
.form small { color: var(--c-muted); }
.form__req, .form__error { color: var(--c-accent-dark); }
/* «Контакты»: слева адрес и телефон, справа форма */
.contacts { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; padding: 40px 50px; }
.contacts h2 { font-size: 2rem; text-align: center; }
.contacts__send { text-align: right; }
@media (max-width: 960px) { .contacts { grid-template-columns: 1fr; padding: 20px; } }
.contacts__text h2 { margin-bottom: 20px; }

/* форма комментариев не вылезает за край узкого экрана */
.comment-form { grid-template-columns: minmax(0, 1fr); }
.comment-form > *, .comment-form__row > * { min-width: 0; }
.comment-form input, .comment-form textarea { width: 100%; box-sizing: border-box; }
.comment-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .comment-form__row { grid-template-columns: minmax(0, 1fr); } .comment-form { padding: 16px; } }
@media (max-width: 640px) { .cover__rating { font-size: .85rem; } .cover__rating .stars svg { width: 11px; height: 11px; } }

/* наведение на картинки, как на старом сайте: фото в ленте и карточках плавно приближается внутри рамки,
   обложки книг и фильмов чуть увеличиваются */
.feed__img, .post__img, .card__img, .mini__img { overflow: hidden; }
.feed__img img, .post__img img, .card__img img, .mini__img img { transition: transform .5s ease-out; }
.feed__img img:hover, .post__img img:hover, .card__img img:hover, .mini__img img:hover { transform: scale(1.06); }
.cover__img { transition: transform .2s; }
.cover__img:hover { transform: scale(1.04); }
.btn.is-loading { opacity: .6; pointer-events: none; }

/* ---------- особая раскладка обычной страницы («О себе», как на старом сайте) ---------- */
.wide { padding-top: 30px; padding-bottom: 30px; }
.wide .box { padding: 40px 50px; }
.layout > * + * { margin-top: 40px; }
.fact { display: flex; align-items: center; gap: 15px; }
.fact + .fact { margin-top: 40px; }
.fact--right { flex-direction: row-reverse; text-align: right; }
.fact__icon { flex: none; width: 40px; height: 40px; color: var(--c-accent); }
.fact__body { flex: 1; min-width: 0; }
.fact__title { margin: 8px 0 5px; color: var(--c-title); font-size: 1.3rem; font-weight: 700; line-height: 1.3; }
.fact__text { margin: 0; color: var(--c-text); font-size: 1.1rem; line-height: 1.5; }
.profile { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 40px; align-items: start; }
.profile__side { padding-top: 8px; }
.profile__photo img { display: block; width: 238px; height: auto; border-radius: 3px; box-shadow: 0 0 19px -2px rgba(0, 0, 0, .31); }
.layout-divider { margin: 0 20px; border: 0; border-top: 1px solid #DDDDDD; }
.lcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; text-align: center; }
.lcard { display: flex; flex-direction: column; align-items: center; }
.lcard__icon { display: grid; place-items: center; width: 100px; height: 100px; border-radius: 50%; background: var(--c-title); color: #fff; }
.lcard__icon svg { width: 50px; height: 50px; }
.lcard__title { margin: 10px 0 6px; color: var(--c-title); font-size: 1.7rem; font-weight: 700; line-height: 1.2; }
.lcard__text { margin: 0 0 16px; color: var(--c-text); font-size: 1.1rem; line-height: 1.5; }
.lcard__btn { margin-top: auto; padding: 9px 16px; font-size: 1.1rem; font-weight: 500; }
.twocol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.twocol__title { margin: 0 0 30px; color: var(--c-title); font-size: 2rem; font-weight: 700; line-height: 1.2; text-align: center; }
.twocol .fact { gap: 40px; align-items: center; }
.twocol .fact + .fact { margin-top: 30px; }
.twocol .fact__icon { width: 50px; height: 50px; }
.twocol .fact__title { margin: 8px 0 4px; }
@media (max-width: 960px) {
  .wide .box { padding: 30px 25px; }
  .profile { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .profile__photo { order: -1; }
  .fact--right { flex-direction: row; text-align: left; }
  .profile__side { justify-self: stretch; }
  .lcards, .twocol { grid-template-columns: 1fr; }
  .twocol .fact { gap: 20px; }
}
.wide .sheet__in { max-width: none; }
@media (max-width: 960px) { .profile__side { text-align: left; } }

/* «Уроки и задания»: по три в белом листе — фото сверху, «класс · тип», название */
.grid--tasks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0 -15px; }
.tcard { padding: 15px; }
.tcard__img { display: block; overflow: hidden; border-radius: 3px; line-height: 0; }
.tcard__img img { width: 100%; aspect-ratio: 343 / 194; object-fit: cover; transition: transform .5s ease-out; }
.tcard__img img:hover { transform: scale(1.06); }
.tcard__terms { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 12px 0 8px; color: var(--c-muted); font-size: 1.1rem; }
.tcard__terms span { display: inline-flex; align-items: center; gap: 10px; }
.tcard__terms svg { width: 16px; height: 16px; }
.tcard__title { margin: 0; font-size: 1.3rem; font-weight: 700; line-height: 1.2; }
.tcard__title a { color: var(--c-title); }
.tcard__title a:hover { color: var(--c-accent); }
@media (max-width: 960px) { .grid--tasks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid--tasks { grid-template-columns: 1fr; } }

/* статья в списке «Статьи»: строка сведений и кнопка «Подробнее» — как на старом сайте */
.post__body p { font-size: 1.1rem; line-height: 1.5; color: #3B3D42; margin-bottom: 10px; }
.post__body .info { font-size: 1rem; font-weight: 400; color: #7A7A7A; }
.post__more { display: inline-block; margin-top: 10px; padding: 9px 16px; border: 1px solid #DDD; border-radius: 3px; color: #7A7A7A; font-size: 1.1rem; font-weight: 500; line-height: 1.1; transition: .3s; }
.post__more:hover { color: #fff; background: var(--c-accent); }

/* упражнения в списке: одна колонка, белая полоса, фото 304×304 слева — как на старом сайте */
.grid--exercises { display: grid; grid-template-columns: 1fr; gap: 30px; }
.xcard { display: grid; grid-template-columns: 304px minmax(0, 1fr); gap: 30px; background: var(--c-white); border-radius: var(--radius); overflow: hidden; }
.xcard__img { display: block; overflow: hidden; line-height: 0; }
.xcard__img img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .5s ease-out; }
.xcard__img img:hover { transform: scale(1.06); }
.xcard__body { padding: 20px 30px 20px 0; }
.xcard__title { margin: 0 0 8px; font-size: 1.8rem; font-weight: 900; line-height: 1.2; }
.xcard__title a { color: #413F4F; } .xcard__title a:hover { color: var(--c-accent); }
.xcard__text { margin: 0 0 20px; font-size: 1.1rem; line-height: 1.5; color: #3B3D42; }
.xcard__props { display: grid; grid-template-columns: 161px minmax(0, 1fr); gap: 10px 0; margin: 0; font-size: 1.1rem; }
.xcard__props dt { color: #BABABA; } .xcard__props dd { margin: 0; color: #3B3D42; }
@media (max-width: 640px) {
  .xcard { grid-template-columns: 1fr; gap: 0; }
  .xcard__body { padding: 20px; }
  .xcard__title { font-size: 1.5rem; }
  .xcard__props { grid-template-columns: 110px minmax(0, 1fr); }
}

/* рубрика статей: заголовок без шапки-фото, как на старом сайте */
.plain-title { margin: 30px 16px 15px; text-align: center; font-size: 2.8rem; font-weight: 900; line-height: 1.2; color: var(--c-title); }
.columns--after-title { padding-top: 0; }
@media (max-width: 640px) { .plain-title { font-size: 2rem; margin-top: 20px; } }

/* «Контакты»: строки со значками, как на старом сайте */
.contacts__text p { font-size: 1.1rem; }
.contacts__list, .rich .contacts__list { margin: 20px 0 0; padding: 0; list-style: none; font-size: 1.1rem; line-height: 1.5; }
.contacts__list li { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 15px; }
.contacts__list svg { flex: none; width: 20px; height: 20px; margin-top: 3px; color: var(--c-link); }
.contacts__form textarea { height: 135px; }

/* шапка статьи: рубрика и строка «дата · просмотры · комментарии» — размеры старого сайта */
.hero .badges .badge { padding: 2px 12px; font-size: 1.1rem; line-height: 1.5; }
.hero .info { gap: 6px 26px; font-size: 1.1rem; font-weight: 400; }
.hero .info svg { width: 16px; height: 16px; }
.hero .info span, .hero .info a { gap: 10px; }
/* фильм: фон шапки прижат к верху — как на старом сайте */
.film-head .hero__bg { object-position: 50% 0; }
/* отступы абзацев, сделанные в старом редакторе (padding-left 40 и 80 px) */
.rich .indent-1 { padding-left: 40px; }
.rich .indent-2 { padding-left: 80px; }

/* комментарии как на старом сайте: форма без подложки, кнопка справа, ниже «Комментариев: N» с чертой */
.comment-form { margin-top: 0; padding: 0; background: none; }
.comment-form textarea { min-height: 85px; }
.comment-form button[type=submit] { justify-self: end; padding: 5px 30px; background: var(--c-accent); }
.comment-form button[type=submit]:hover { background: var(--c-accent-dark); }
.comments__head { margin-top: 24px; padding-bottom: 12px; border-bottom: 1px solid #C9C9C9; font-size: 1.2rem; }
.comments__empty { margin: 14px 0 0; }

/* две картинки рядом с подписью сверху («Правильно» / «Неправильно»), как колонки старого сайта */
.rich .rich-figure--half, .rich .rich-figure--half-good, .rich .rich-figure--half-bad {
  display: inline-flex; flex-direction: column-reverse; width: calc(50% - 12px); margin: 0 0 20px; vertical-align: top; }
.rich .rich-figure--half + .rich-figure--half, .rich .rich-figure--half-good + .rich-figure--half-bad,
.rich .rich-figure--half-bad + .rich-figure--half-good { margin-left: 20px; }
.rich .rich-figure--half img, .rich .rich-figure--half-good img, .rich .rich-figure--half-bad img { width: 100%; height: auto; }
.rich .rich-figure--half figcaption, .rich .rich-figure--half-good figcaption, .rich .rich-figure--half-bad figcaption {
  margin: 0 0 16px; text-align: center; font-size: 1.4rem; font-weight: 700; font-style: normal; line-height: 1.2; color: var(--c-title); }
.rich .rich-figure--half-good figcaption { color: #35AD79; }
.rich .rich-figure--half-bad figcaption { color: #F94F4F; }
@media (max-width: 640px) {
  .rich .rich-figure--half, .rich .rich-figure--half-good, .rich .rich-figure--half-bad { display: flex; width: 100%; margin-left: 0 !important; }
}

/* волны-разделители, как shape divider в Elementor */
.shape { position: absolute; left: 0; width: 100%; overflow: hidden; line-height: 0; direction: ltr; pointer-events: none; }
.shape--top { top: -1px; }
.shape--bottom { bottom: -1px; transform: rotate(180deg); }
.shape svg { display: block; position: relative; left: 50%; width: calc(100% + 1.3px); max-width: none; height: auto; transform: translateX(-50%); }
.shape path { fill: rgba(255, 140, 0, .11); }
.shape--book-top svg { width: calc(149% + 1.3px); }

/* лента времени «Образование» — размеры JetTimeline старого сайта */
.tline { position: relative; display: grid; gap: 30px; }
.tline__line { position: absolute; top: 0; bottom: 0; left: 27.5px; width: 5px; background: #DDD; }
.tline__progress { width: 100%; height: 0; background: var(--c-link); }
.tline__item { position: relative; display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 30px; align-items: center; }
.tline__point { position: relative; z-index: 1; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #DDD; color: #fff; transition: background .3s; }
.tline__point svg { width: 26px; height: 26px; }
.tline__card { position: relative; padding: 50px; border-radius: 6px; background: #fff; box-shadow: 2px 2px 30px rgba(156, 156, 192, .26); }
.tline__card::before { content: ""; position: absolute; top: 50%; left: -15px; width: 30px; height: 30px; background: #fff; transform: translateY(-50%) rotate(45deg); }
.tline__title { position: relative; margin: 0; font-size: 1.4rem; font-weight: 700; line-height: 1.2; color: var(--c-text); transition: color .3s; }
.tline__date { position: relative; margin: 0 0 9px; font-size: 1.3rem; font-weight: 700; line-height: 1.3; color: #7A7A7A; }
.tline__text { position: relative; margin: 0; font-size: 1.1rem; }
.tline__item.is-active .tline__point { background: var(--c-link); }
.tline__item.is-active .tline__title { color: var(--c-link); }
@media (max-width: 640px) {
  .tline__line, .tline__point, .tline__card::before { display: none; }
  .tline { gap: 25px; }
  .tline__item { grid-template-columns: 1fr; }
  .tline__card { padding: 25px; }
}
/* плитка грамот: ровные ряды высотой ~370 px, рамка, тёмная пелена с лупой при наведении */
.pwall { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.pwall__item { position: relative; display: block; overflow: hidden; border: 1px solid #DDD; border-radius: 3px; }
.pwall__item img { display: block; width: 100%; height: auto; }
.pwall__over { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(12, 12, 12, .66); color: #fff; opacity: 0; transition: opacity .3s; }
.pwall__over svg { width: 30px; height: 30px; }
.pwall__item:hover .pwall__over, .pwall__item:focus-visible .pwall__over { opacity: 1; }
@media (max-width: 640px) { .pwall__item { flex-basis: 100% !important; } }
/* «Образование» и «Достижения»: без белой подложки, прямо на сером фоне — как на старом сайте */
.box:has(> .layout > .block-timeline:only-child), .box:has(> .layout > .block-photos:only-child) { padding: 0; background: none; box-shadow: none; }

/* колонка «Последнее фото» у фотоальбома */
.side__photos { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.side__photos a { display: grid; gap: 8px; color: #54595F; font-weight: 700; line-height: 1.3; }
.side__photos a:hover { color: var(--c-accent); }
.side__photos img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.hero__sub--coach { font-size: 1.1rem; font-weight: 400; } .hero__sub--coach a { color: #fff; font-weight: 500; } .hero__sub--coach a:hover { color: var(--c-accent); }
.steps--list { margin: 0; }
.steps__num { font-size: 1.6rem; }

/* «Вам может быть интересно»: постеры фильмов по 6, обложки книг по 4 — размеры старого сайта */
.mini__title a { color: #413F4F; }
.see-also--article .mini__title a { color: #54595F; }
.grid--mini-poster { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px 20px; }
.grid--mini-cover { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 20px; }
.grid--mini-poster .mini__img img { aspect-ratio: 7 / 10; border-radius: 3px; }
.grid--mini-cover .mini__img img { aspect-ratio: 210 / 299; border-radius: 3px; }
.grid--mini-poster .mini__img, .grid--mini-cover .mini__img { border-radius: 3px; }
.grid--mini-poster .mini__title, .grid--mini-cover .mini__title { margin-top: 8px; line-height: 1.2; }
@media (max-width: 760px) {
  .grid--mini-poster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--mini-cover { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.video--last { margin-bottom: 0; }

/* шапка фильма — шрифты, цвета и градиент старого сайта (слева плотнее, справа виден кадр) */
.film-head::before { background: linear-gradient(270deg, rgba(42, 46, 69, .64) 0%, #2A2E45 76%); }
.film-head h1 { font-size: 2rem; font-weight: 700; line-height: 1.2; }
.film-head h1 span { font-size: 1.6rem; font-weight: 400; }
.film-head__orig { margin: 0 0 4px; color: #939393; font-size: 1.2rem; line-height: 1.5; }
.film-head__sport { margin: 0 0 12px; font-size: 1.1rem; font-style: italic; font-weight: 400; color: #F3F3F3; }
.film-head__sport a { color: #F3F3F3; }
.film-head__line { margin: 0 0 14px; gap: 6px 10px; font-size: 1.1rem; color: #F3F3F3; }
.film-head__line a { color: #F3F3F3; }
.film-head .chip { padding: 0 4px; border: 1px solid #7A7A7A; border-radius: 3px; color: #DDD; line-height: 26px; }
.film-head .dot::before { content: "●"; margin-right: 8px; font-size: .6em; vertical-align: middle; }
.film-head__rate { margin: 0; gap: 21px; font-size: 1.1rem; color: #F3F3F3; }
.film-head__rate > span:not(.stars) { margin-left: -9px; }
.film-head__rate .stars__row { gap: 1px; color: #CCD6DF; }
.film-head__rate .stars__row--on { color: #F0AD4E; }
.film-head__rate .stars svg { width: 22px; height: 22px; }
.film-head a:hover { text-decoration: none; color: #B6B6B6; }
.film-head .btn--trailer { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid #fff; border-radius: 3px; font-size: .9rem; font-weight: 500; line-height: 1; color: #fff; }
.film-head .btn--trailer:hover { color: #B6B6B6; border-color: #fff; background: transparent; text-decoration: none; }
.film-head h2 { margin: 12px 0 0; font-size: 1.54rem; font-weight: 600; line-height: 1.2; }
.film-head h2 + p { font-size: 1.1rem; color: #DDD; line-height: 1.5; }
.film-head__watch { font-size: 1rem; font-weight: 900; }
.film-head__watch small { color: #939393; font-size: 1rem; font-weight: 900; }

/* окно «Смотреть трейлер» */
.vpop { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(42, 46, 69, .85); }
.vpop[open] { display: grid; place-items: center; }
.vpop::backdrop { background: transparent; }
.vpop__frame { width: min(1170px, 92vw); aspect-ratio: 16 / 9; }
.vpop__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.vpop__close { position: absolute; top: 10px; right: 20px; border: 0; background: none; color: #fff; font-size: 2.2rem; line-height: 1; cursor: pointer; }
.film-head__in, .book-head__in { max-width: calc(var(--wrap-text) + 30px); }   /* постер/обложка на одной линии с белым листом, как было */
.film-head__watch .film-head__yt { width: 35px; height: 34px; padding: 6px 5px; border-radius: 3px; background: #F00; color: #fff; }   /* значок YouTube, как было */
/* шапка книги — шрифты старого сайта */
.book-head h1 { font-size: 2rem; line-height: 1.2; margin: 0 0 12px; }
.book-head__bib { font-size: 1.1rem; }
.book-head .facts { grid-template-columns: 151px 1fr; gap: 10px 6px; font-size: 1.1rem; }
.book-head .btn--big { padding: 7px 35px; font-weight: 400; font-size: 1.1rem; }
.see-also--task .grid--mini { column-gap: 27px; }   /* у уроков картинки чуть уже, как было */
/* шапка игры — как было: название 700, отступ под плашкой, подписи 1rem/600, длинное значение переносится под значок */
.game-head__title .badge { margin-bottom: 30px; }
.game-head__title .hero__title { font-weight: 700; }
.game-head__facts li { display: block; padding: 4px 0 5px; }
.game-head__facts svg { display: inline-block; margin: 0 10px 0 0; vertical-align: -2px; }
.game-head__facts b { font-size: 1rem; font-weight: 600; margin-right: 5px; }
.game-head__facts a { white-space: nowrap; }   /* значение не рвётся посередине, как было */
/* строка под заголовком урока — как было: светло-серый текст, ссылки того же размера, отступ 30 */
.hero .info--light { color: #F3F3F3; }
.hero .info--light a { color: #F3F3F3; font-size: inherit; }
.hero .info__terms { display: inline; }
.hero--task .info { margin-top: 30px; }
/* шапка статьи — как было: лист наезжает на 100 px, содержимое по центру видимой части, отступы 30 */
.box--over { margin-top: -130px; }
.hero--article .hero__in { padding-bottom: 140px; }
.hero .badges { gap: 6px 17px; margin-bottom: 30px; }
.hero .info { margin-top: 30px; }
@media (max-width: 760px) { .box--over { margin-top: -90px; } .hero--article .hero__in { padding-bottom: 100px; } }
.rich h2 { line-height: 1.4; }   /* как было: 32/44.8 */
/* шапка упражнения — как было: высота 560, шрифты 1.6/2rem, данные 1.1rem, подписи #BABABA */
.ex-head { min-height: 560px; }
.ex-head__in { gap: 40px; }
.ex-head__title p { font-size: 1.6rem; line-height: 1.5; }
.ex-head__title h1 { font-size: 2rem; line-height: 1.2; }
.ex-head__facts { grid-template-columns: 214px 1fr; gap: 10px 0; font-size: 1.1rem; line-height: 1.5; }
.ex-head__facts dt { color: #BABABA; }
.ex-head__facts dd { font-weight: 400; }
/* тренировка, фото, видео — размеры старого сайта */
.hero__sub--coach { color: #DDD; }
.hero__sub--coach a { font-weight: 400; }
.video iframe { aspect-ratio: 900 / 536; }
.hero--photo .info { font-size: 1rem; }
.hero--photo .info--light, .hero--photo .info--light a { color: #fff; }
.columns--photo { grid-template-columns: minmax(0, 1fr) 358px; gap: 28px; }
@media (max-width: 960px) { .columns--photo { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .ex-head__facts { grid-template-columns: auto 1fr; gap: 8px 20px; } }

/* лента на главной — размеры старого сайта: текст прижат к верху, значок 16px, заголовок 1.6rem */
.feed__body { align-self: start; }
.feed__body .badge { margin-bottom: 10px; padding: 4px 6px; font-size: 1rem; line-height: 1.2; }
.feed__title { margin: 0 0 8px; font-size: 1.6rem; line-height: 1.2; }
.feed__title a { color: #30344D; }
.feed__terms { gap: 6px; margin-bottom: 6px; font-size: 1.1rem; }
.feed__terms svg { color: #7A7A7A; }
.feed .info { gap: 6px 20px; font-size: 1rem; line-height: 24px; }
.feed .info span { gap: 4px; }
.feed .info svg { width: 16px; height: 16px; }

/* правая колонка — шаг строк как на старом сайте; «Ученику»: значок 22px, отступ 10px, текст 1.2rem */
.side__list li + li { margin-top: 8.5px; }
.side__list--icons { margin-top: -3px; }
.side__list--icons li + li { margin-top: 0; }
.side__list--icons a { gap: 10px; min-height: 41px; padding: 4px 0; font-size: 1.2rem; line-height: 1.5; }

/* главная: заголовок и круги разделов — размеры старого сайта */
.hero--home .hero__title { line-height: 1.4; }
.circles { padding: 40px 0; }
.circles__in { gap: 26px; }
.circle { gap: 6px; }
.circle span { margin-bottom: 4px; }
@media (max-width: 760px) { .circles { padding: 24px 0; } .circles__in { gap: 12px; } }

/* лента: фильм и книга — постер целиком на цветной подложке, как на старом сайте */
.feed--film .feed__img, .feed--book .feed__img { display: flex; align-items: center; justify-content: center; padding: 12px 0;
  background: linear-gradient(280deg, rgba(42, 46, 69, .64) 0%, rgba(42, 46, 69, .93) 100%); }
.feed--book .feed__img { background: linear-gradient(280deg, rgba(255, 140, 0, .11) 0%, rgba(255, 153, 0, .29) 100%); }
.feed--film .feed__img img, .feed--book .feed__img img { width: 210px; height: auto; aspect-ratio: 7 / 10; object-fit: cover; border-radius: 3px 0 0 3px; }
.feed--book .feed__img img { aspect-ratio: 210 / 299; }

/* подвал — размеры старого сайта: три колонки по 390px, текст 14px #B0B0B0, ссылки 900 с шагом 27px */
.footer { color: #B0B0B0; font-size: 14px; line-height: 1.5; }
.footer__cols { gap: 0; }
.footer__about p { margin-top: 10px; }
.footer__links li { line-height: 27px; }
.footer__links li + li { margin-top: 0; }
.footer__links a { font-size: .9rem; font-weight: 900; }
.footer__contacts p { margin: 0 0 12px; }
.footer__contacts a { font-size: 14px; }
.footer__bottom { padding: 18px 0 22px; font-size: 12px; line-height: 18px; }
.footer__bottom .wrap { padding-left: 25px; padding-right: 25px; }
.more .btn { padding: 9px 16px; font-size: 1.1rem; line-height: 1; border-radius: 3px; }
.footer__about img { display: block; margin: 0 auto; }
.footer__contacts p:last-child { max-width: 270px; margin-left: auto; margin-right: auto; }
.more { margin-bottom: 0; }

/* раздел «Статьи» — размеры старого сайта: колонка 811px, справа 321px; карточка: заголовок
   на 32px от верха, картинка 316px, плашка 16px, текст 390px */
.columns--section { grid-template-columns: minmax(0, 1fr) 321px; gap: 29px; padding-right: 24px; }
.post { padding: 32px 41px 40px 40px; border-radius: 3px; }
.post__title { margin-bottom: 16px; line-height: 1.2; }
.post__row { grid-template-columns: 316px minmax(0, 1fr); gap: 24px; }
.post__img .badge { padding: 2px 12px; border-radius: 3px; font-size: 1rem; line-height: 24px; }
@media (max-width: 960px) { .columns--section { grid-template-columns: 1fr; padding-right: 15px; } }
@media (max-width: 960px) {
  .post { padding: 20px; }
  .post__row { grid-template-columns: 1fr; }
  .feed__title { font-size: 1.35rem; }
}
.post__more { line-height: 1; }

/* карточка игры в разделе — размеры старого сайта: картинка 176px, заголовок 1.4rem на 17px от верха */
.card { grid-template-columns: 176px minmax(0, 1fr); min-height: 176px; }
.card__body { padding: 17px 20px 15px; }
.card__title { margin-bottom: 10px; font-size: 1.4rem; line-height: 1.2; }
@media (max-width: 960px) { .card { grid-template-columns: 110px minmax(0, 1fr); min-height: 110px; } .card__title { font-size: 1.2rem; } }
/* панель «Сортировать / Фильтры» — как на старом сайте */
.toolbar select { height: 33px; padding: 5px 14px; border-color: #DDD; font-size: 1rem; }
.fpanel-open { padding: 6px 14px; color: #3B3D42; font-size: 1.1rem; line-height: 1.2; }

/* «Уроки и задания» — размеры старого сайта: панель 30px сверху, карточка 15/15/30, метки на 14px ниже фото */
.list--boxed .toolbar { padding: 30px 40px 0; }
.list--boxed .list__results { padding: 0 40px 40px; }
.tcard { padding: 15px 15px 30px; }
.tcard__terms { margin: 14px 0 10px; }
@media (max-width: 760px) { .list--boxed .list__results { padding: 0 20px 25px; } .list--boxed .toolbar { padding: 20px 20px 0; } }
.list--boxed .pager { margin-top: 55px; }

/* книги в разделе — размеры старого сайта: обложка со скруглением 3px, год 2px 6px справа снизу,
   название 1.3rem на 14px ниже обложки */
.list--boxed .grid--covers { padding-top: 13px; }
.cover__img img { border-radius: 3px; }
.cover__year { right: 11px; bottom: 8px; padding: 2px 6px; border-radius: 2px; font-size: 1.1rem; line-height: 1.5; }
.cover__title { margin: 14px 0 7px; font-size: 1.3rem; line-height: 1.2; }

/* фильмы в разделе — как на старом сайте: звёзды 16px вплотную (#F0AD4E / #CCD6DF), оценка 600,
   название на 4px ниже строки звёзд */
.cover__rating { justify-content: flex-start; gap: 9px; margin: 8px 0 0; line-height: 24px; }
.cover__rating .stars__row { gap: 0; color: #CCD6DF; }
.cover__rating .stars__row--on { color: #F0AD4E; }
.cover__rating > span:last-child { font-weight: 600; line-height: 1.2; }
.cover__rating + .cover__title { margin-top: 4px; }
.grid--covers ~ .pager { margin-top: 70px; }
.cover__rating { min-height: 24px; }
/* упражнения в разделе: шаг карточек 38px, значения серые #7A7A7A с заглавной буквы */
.grid--exercises { gap: 38px; }
.xcard__props dd { color: #7A7A7A; }
.xcard__props dd::first-letter { text-transform: uppercase; }

/* раздел «Фото» — как на старом сайте: полоса «Фотогалерея» 300px с тёмной виньеткой,
   колонка поиска 321px и белый блок с плиткой 210×119 по 3 в ряд (ширина как у старого: 1140px) */
.pband { position: relative; display: grid; place-items: center; min-height: 300px; padding: 30px 15px;
  background: #222 var(--pband) center / cover no-repeat; isolation: isolate; }
.pband::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .9;
  background: radial-gradient(rgba(12, 12, 12, .69) 50%, #000 100%); }
.pband__title { margin: 0; color: #fff; font-size: 2.8rem; font-weight: 900; line-height: 1.2; text-align: center; }
.pindex { display: grid; grid-template-columns: 321px minmax(0, 1fr); gap: 30px; align-items: start;
  max-width: 1170px; margin: 0 auto; padding: 31px 15px 40px; }
.pindex__side, .pindex__main { padding: 30px; background: var(--c-white); border-radius: 3px; }
.pindex__form { display: grid; gap: 20px; padding: 10px; }
.pindex__search { display: flex; gap: 10px; }
.pindex__search input { flex: 1; min-width: 0; height: 39px; padding: 7px; border: 1px solid #DDD; border-radius: 3px; font: 300 15px var(--font); color: #3B3D42; }
.pindex__search button { flex: none; display: grid; place-items: center; width: 40px; height: 38px; border: 1px solid #C36; border-radius: 3px; background: #141B4D; color: #fff; cursor: pointer; }
.pindex__search svg { width: 14px; height: 14px; }
.pindex__form select { width: 100%; height: 36px; padding: 7px 2px 7px 3px; border: 1px solid #767676; border-radius: 3px; background: #fff; font: 300 15px var(--font); color: #000; }
.pindex__grid { display: grid; grid-template-columns: repeat(3, 210px); justify-content: space-between; gap: 24px 0; padding: 15px 20px 0; }
.ptile { display: grid; align-content: start; gap: 10px; color: #3B3D42; font-size: 15px; font-weight: 500; line-height: 18px; }
.ptile img { display: block; width: 210px; height: 119px; object-fit: cover; }
.ptile:hover { color: var(--c-accent); }
.pindex__line { margin: 30px 0 20px; border: 0; border-top: 1px solid #DDD; }
.pindex .pager { justify-content: flex-start; margin-top: 0; }
@media (max-width: 960px) {
  .pindex { grid-template-columns: 1fr; }
  .pindex__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: 0; }
  .ptile img { width: 100%; height: auto; aspect-ratio: 210 / 119; }
  .pband { min-height: 180px; } .pband__title { font-size: 2rem; }
}
.pindex__grid { row-gap: 36px; }
.pindex__line { margin-left: 10px; margin-right: 10px; }
.pindex .pager { padding: 0 10px; }

/* «О себе» — отступы старого сайта по цифрам */
.profile { gap: 62px; }
.profile__side { padding-top: 1px; }
.layout-divider { margin: 0 26px; }
.block-profile + .block-divider { margin-top: 60px; }
.block-divider + .block-cards { margin-top: 45px; }
.block-cards + .block-divider { margin-top: 64px; }
.block-divider + .block-columns { margin-top: 71px; }
.lcard__btn { height: 36px; line-height: 18px; }
.twocol { gap: 20px; }
.twocol .fact { padding-left: 20px; }
.twocol .fact + .fact { margin-top: 39px; }
.twocol .fact__title { margin-top: 0; }
.box:has(.block-profile) { padding-bottom: 62px; }
@media (max-width: 960px) {
  .profile { gap: 30px; }
  .block-profile + .block-divider, .block-cards + .block-divider, .block-divider + .block-columns, .block-divider + .block-cards { margin-top: 40px; }
  .twocol .fact { padding-left: 0; }
}
.twocol .fact + .fact { margin-top: 48px; }
.lcard__title { margin-top: 14px; }
.block-divider + .block-cards { margin-top: 46px; }