/* ritmomera.ru: статическая копия старого сайта (Drupal 7, темы basic и bartik).
   Значения отступов и размеров перенесены из агрегатов Drupal, чтобы раскладка совпала с оригиналом. */

/* ===================================================================== общее */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img { border: 0; outline: 0; vertical-align: baseline; }
a { text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.swf-anim { position: relative; }

/* ============================================================ подвал: меню-спрайт
   (одинаковый на главной и внутренних, отличается только отступами) */
.footer-menu { margin: 0; list-style: none; }
.footer-menu::after { content: ""; display: block; clear: both; }
.footer-menu li { list-style: none; float: left; margin: 0 30px; height: 20px; }
.footer-menu li a { display: block; height: 20px; text-decoration: none; }
.footer-menu li.fm-sep {
  width: 14px; height: 14px; margin: 2px 0 0 0;
  background: url(/assets/img/footer_nav_separator.png) no-repeat;
}
.footer-menu li.fm-home { background: url(/assets/img/footer_nav_links.png) no-repeat 3px 0; width: 71px; }
.footer-menu li.fm-home a { width: 71px; }
.footer-menu li.fm-home:hover { background-position: 3px -19px; }
.footer-menu li.fm-feedback { background: url(/assets/img/footer_nav_links.png) no-repeat -213px 1px; width: 137px; }
.footer-menu li.fm-feedback a { width: 137px; }
.footer-menu li.fm-feedback:hover { background-position: -213px -18px; }
.footer-menu li.fm-about { background: url(/assets/img/footer_nav_links.png) no-repeat -420px 1px; width: 180px; }
.footer-menu li.fm-about a { width: 180px; }
.footer-menu li.fm-about:hover { background-position: -422px -18px; }
.footer-menu li a:focus-visible { outline: 1px dotted #9d9d9d; }

.copy { text-align: center; color: #737272; }
.copy a { color: #737272; }

/* ===================================================== главная (тема basic) */
body.front {
  width: 999px; margin: 0 auto; background: #4f4f4f; color: #919191;
  font: 13px/1.5em "Helvetica World", Helvetica, Arial, sans-serif; letter-spacing: 0.03em;
}
.front p, .front ul { margin: 0; padding: 0; }
.front-page { width: 960px; margin: 0 auto; }

.front-header {
  height: 225px;
  background: url(/assets/img/main_header_bg.png) no-repeat bottom;
}
.front-logo { display: block; padding: 25px 0 0 0; }
.front-slogan {
  text-align: center; font-family: "Helvetica World", Helvetica, Arial, sans-serif; font-size: 24px;
  color: #6e6e6d; padding: 40px 0 0 0; letter-spacing: -0.08em; word-spacing: 0.12em;
}
.front-all { margin-top: -35px; }
.front .front-all p { margin: 1em 0; }
.front-all a {
  position: absolute; color: #9d9d9d; letter-spacing: -0.05em; text-decoration: underline; font-size: 120%;
}
.front-all a:hover { color: #9d9d9d; }

/* центр между двумя боковыми «лентами» (190 слева, 200 справа) */
.front-main {
  position: relative;
  padding: 0 200px 0 190px; text-align: center;
  background: url(/assets/img/main_content_bg.png) no-repeat bottom;
}
.front-flower { padding-bottom: 40px; }
.front-flower .swf-anim { margin: 0 auto; }

/* киноленты главной: окно 190×508, плёнка ползёт вверх 20 px/с, под курсором стоит
   (как scroller_left.js / scroller_right.js старого сайта) */
.lenta { position: absolute; top: 0; width: 190px; height: 528px; }
.lenta--left { left: 0; }
.lenta--right { right: 5px; }
.lenta-view { position: absolute; top: 10px; left: 0; width: 190px; height: 508px; overflow: hidden; background: #4f4f4f; }
.lenta-track { animation: lenta-up var(--lenta-dur, 26.4s) linear infinite; }
.lenta:hover .lenta-track, .lenta:focus-within .lenta-track { animation-play-state: paused; }
@keyframes lenta-up { to { transform: translateY(-33.3333%); } }
.lenta-copy { padding-top: 10px; background: url(/assets/img/lenta/lenta.jpg) repeat-y; }
.lenta-kadr {
  display: block; width: 116px; height: 92px; margin: 21px 37px; padding: 0; border: 0;
  overflow: hidden; background: no-repeat 0 0; cursor: pointer;
}
.lenta-copy .lenta-kadr:first-child { margin-top: 3px; }
.lenta--left .lenta-kadr:hover, .lenta--left .lenta-kadr:focus-visible { background-position: -126px 0; }
.lenta--right .lenta-copy .lenta-kadr:first-child { margin: 4px 39px 21px; }
.lenta-kadr:focus-visible { outline: 2px solid #ffac00; outline-offset: 2px; }
.lenta-top, .lenta-bottom { position: absolute; left: 0; z-index: 2; pointer-events: none; }
.lenta-top { top: 5px; }
.lenta-bottom { top: 490px; }
@media (prefers-reduced-motion: reduce) { .lenta-track { animation: none; } }

/* окно отзыва из правой ленты */
.lenta-popup {
  position: absolute; z-index: 555; width: 320px; text-align: justify; color: #ccc; cursor: pointer;
  font-size: 13px; line-height: 1.35;
}
.lenta-popup[hidden] { display: none; }
.lenta-popup-top { height: 15px; background: url(/assets/img/lenta/lenta_kadr_bg1.png) no-repeat; }
.lenta-popup-text { padding: 0 20px; background: url(/assets/img/lenta/lenta_kadr_bg2.png) repeat-y; }
.lenta-popup-bottom { height: 20px; background: url(/assets/img/lenta/lenta_kadr_bg3.png) no-repeat; }

.front-footer {
  clear: both; height: 70px;
  background: url(/assets/img/main_footer_bg.png) no-repeat center 0;
}
.front-footer .footer-nav { height: 30px; }
.front .footer-menu { padding: 15px 0 0 179px; }
/* остаток меню ритмомер Drupal: одна ссылка, висит над подвалом */
.front .front-copy { padding-top: 10px; }
.front .copy { margin: 3px 0 0 0; }

/* =============================================== внутренние страницы (bartik) */
body.inner {
  margin: 0; padding: 0; min-width: 1000px; background: #4f4f4f; color: #e9e9e9;
  font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 87.5%; line-height: 1.5;
  word-wrap: break-word;
}
.inner a { color: #0070b3; }
.inner a:hover, .inner a:focus { color: #008ee2; }
.inner h1, .inner h2, .inner h3, .inner h4 { margin: 1em 0 0.5em; font-weight: inherit; }
.inner h2 { font-size: 1.143em; }
.inner p { margin: 0 0 1.2em; }

/* шапка */
.site-header {
  padding: 20px 0 0 0;
  background: #4f4f4f url(/assets/img/header_bg.jpg) no-repeat center;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.site-header .section { position: relative; width: 1000px; margin: 0 auto; }
.site-header .section::after { content: ""; display: block; clear: both; }
.site-header .logo { float: left; padding: 10px 15px 7px 40px; }
.name-and-slogan { float: right; margin: 0 45px 0 15px; }
.inner .slogan {
  margin: 7px 0 0; font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 22px;
  color: #9d9d9d; letter-spacing: -0.08em; word-spacing: 0.12em;
}

/* доска */
.main {
  width: 1000px; margin: -1px auto 0; min-height: 300px;
  padding: 1px 0 20px;
  background: #4f4f4f url(/assets/img/bg.jpg) 0 0;
}
.main > .section { padding: 0 15px; }
.region { padding: 0 30px 0 40px; }

.highlighted { position: relative; font-size: 14px; line-height: 1.5em; }
.highlighted .all-link a { letter-spacing: -0.05em; color: #9d9d9d; text-decoration: underline; }
/* «уголок», 360×330, как блок conner.swf */
.corner { position: absolute; margin: -108px 0 0 658px; z-index: 0; }

/* заголовок страницы */
.page-title {
  font-size: 30px; line-height: 1; text-align: center; color: #e9e9e9;
  letter-spacing: -0.05em; word-spacing: 0.15em;
}
.inner .page-title { margin-bottom: 20px; }
.ritmomera .page-title {
  font-size: 60px; color: var(--title);
  background: url(/assets/img/title_bg.png) no-repeat bottom right;
  padding: 0 0 50px 0; width: 660px; margin: 35px 0 30px 40px;
}
.rm-love .page-title { width: 650px; }

.region-content { min-height: 250px; }
.rm-hurt .region-content, .rm-love .region-content, .rm-fear .region-content { min-height: 1400px; }
.region-content p { margin: 0.4em 0; }
.region-content ul, .region-content ol { margin: 1em 0; padding: 0 0 0.25em 2.5em; }

/* текст материала */
.node { font-size: 15px; line-height: 22.5px; }
.node::after { content: ""; display: block; clear: both; }
.rm-node { color: #262626; }
.rm-node a, .rm-node span { color: var(--accent); }
.rm-node a:hover { color: var(--accent-hover, var(--accent)); text-decoration: underline; }

/* «Что такое ритмомера?» справа от заголовка */
.what-is { position: absolute; padding: 23px 0 0 740px; text-align: center; }
.what-is a { display: block; }

/* телевизор с отзывом */
.tv {
  float: right; position: relative; z-index: 1; margin: 160px 0 0; padding: 0;
  width: 315px; height: 328px; color: #f1e9d4;
  background: url(/assets/img/tv.png);
}
.tv-screen {
  position: relative; z-index: 10; border-top: 1px solid #353537;
  background: url(/assets/img/tv.png);
}
.tv-text {
  /* в оригинале: окно 235×160 с отступом 75/35/45/45 и самописный скролл справа у x=288.
     Здесь: то же окно, расширенное вправо до скроллбара, родной overflow:auto */
  margin: 75px 17px 45px 45px; padding: 0 14px 0 0;
  width: 239px; height: 160px; overflow-x: hidden; overflow-y: auto;
  font-size: 12px; line-height: 22.5px; outline: none;
}
/* скроллбар в цветах оригинала (кремовая нитка scroll_bg.png, оранжевый бегунок scroller.png, стрелки) */
.tv-text::-webkit-scrollbar { width: 9px; }
.tv-text::-webkit-scrollbar-track {
  background: url(/assets/img/scroll_bg.png) no-repeat center / 9px 100%;
}
.tv-text::-webkit-scrollbar-thumb {
  min-height: 31px; border-radius: 3px;
  background: url(/assets/img/scroller.png) no-repeat center / 7px 100%;
}
.tv-text::-webkit-scrollbar-button:vertical:start:increment,
.tv-text::-webkit-scrollbar-button:vertical:end:decrement { display: none; }
.tv-text::-webkit-scrollbar-button:vertical:start:decrement {
  display: block; height: 17px; background: url(/assets/img/scroll_arrow_up.png) no-repeat center;
}
.tv-text::-webkit-scrollbar-button:vertical:end:increment {
  display: block; height: 17px; background: url(/assets/img/scroll_arrow_down.png) no-repeat center;
}
.tv-text:focus-visible { outline: 1px dotted #f1e9d4; }
@supports not selector(::-webkit-scrollbar) {
  .tv-text { scrollbar-width: thin; scrollbar-color: #ff8a00 rgba(241, 233, 212, 0.35); }
}

/* листок с вводным текстом (короткий: одна картинка) */
.intro {
  float: left; position: relative; isolation: isolate;
  box-sizing: border-box; width: 495px; min-height: 458px; margin: 44px 15px 0 35px;
}
.intro-scroll { position: relative; min-height: inherit; box-sizing: border-box; padding: 18px 20px 22px 5px; }
/* листки бумаги: кремовый лист и под ним два повёрнутых цветных (как в картинках
   block1_bg_1 / block3_bg старого сайта), растут по тексту без швов */
.intro:not(.intro-long)::before, .intro:not(.intro-long)::after, .goal::before, .goal::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  box-shadow: 0 4px 26px 4px rgba(8, 30, 32, 0.38);
}
.intro:not(.intro-long)::before, .goal::before { background: rgba(210, 96, 110, 0.85); transform: rotate(1.3deg); }
.intro:not(.intro-long)::after, .goal::after { background: rgba(72, 228, 237, 0.85); transform: rotate(-1.2deg); }
.intro:not(.intro-long) .intro-scroll, .goal-paper {
  background: #fbefd2; border-bottom: 1px solid #fee5a4;
}
.intro-inner { position: relative; display: block; margin: 0; padding-left: 10px; }

/* листок длинный: верх, середина и низ отдельными картинками (обида, страх, энергосовмещение).
   В оригинале высоты были жёсткими (650/699/563) и длинный текст уезжал под скролл;
   здесь листок растёт по тексту, минимальные высоты те же. */
.intro-long { float: left; isolation: auto; width: 530px; height: auto; min-height: 650px; margin: 15px 0 0 0; padding-bottom: 30px; }
.intro-long .intro-scroll { padding: 0; }
.intro-long .intro-scroll { margin: 0; height: auto; width: 540px; overflow: visible; }
.paper-bottom {
  position: relative; z-index: 2; width: 530px; min-height: 650px; padding-bottom: 60px;
  box-sizing: border-box;
  background: url(/assets/img/block1__3_bg.png) no-repeat bottom left;
}
.rm-hurt .paper-bottom { min-height: 699px; }
.rm-energy .paper-bottom { min-height: 563px; }
.paper-top {
  position: relative; z-index: 10; width: 530px; min-height: 430px;
  background: url(/assets/img/block1__1_bg.png) no-repeat;
}
.paper-middle {
  position: relative; z-index: 3; width: 99%; height: auto; padding-bottom: 1px;
  background: url(/assets/img/block1__2_bg.png) no-repeat 0 80px;
}
.paper-middle p { padding: 0 20px 0 40px; }
.paper-middle p.p-first { padding-top: 40px; }

/* анимация ритмомеры: строчный блок, как флеш-объект, уходит под листок */
/* ряд под вводным листком: ролик слева, плеер справа; «Цель обучения» встаёт под более высоким */
.rm-row { clear: both; display: flex; align-items: flex-start; justify-content: space-between; }
.rm-anim { flex: none; width: 340px; margin-left: 1px; text-align: center; color: #f1e9d4; }
.rm-anim .swf-anim { display: inline-block; vertical-align: top; text-align: left; }

/* плеер и вопросы */
.player {
  flex: none; width: 490px; min-height: 295px; margin: 35px 0 0 0; padding: 42px 45px 34px 35px;
  background: url(/assets/img/block2_bg.png);
  color: #6f6f6f; text-align: center; font-size: 14px;
}
.player audio { display: block; width: 440px; height: 32px; margin: 8px auto; }

/* свой плеер (assets/js/player.js) */
.ap {
  display: flex; align-items: center; gap: 12px; width: 420px; margin: 12px auto;
  padding: 8px 16px 8px 8px; border-radius: 999px;
  background: rgba(38, 38, 38, 0.07); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
}
.ap-btn {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer; color: #fff;
  background: linear-gradient(180deg, var(--btn-to), var(--btn-from));
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform 0.15s ease, filter 0.15s ease;
}
.ap-btn:hover { transform: scale(1.06); filter: brightness(1.08); }
.ap-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ap-btn svg { width: 20px; height: 20px; fill: currentColor; }
.ap-time { flex: none; min-width: 36px; font-size: 13px; color: #555; font-variant-numeric: tabular-nums; }
.ap-seek {
  --p: 0%; flex: 1; height: 6px; margin: 0; border-radius: 3px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background: linear-gradient(90deg, var(--accent) var(--p), rgba(38, 38, 38, 0.18) var(--p));
}
.ap-seek::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 3px solid var(--accent); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.ap-seek::-moz-range-thumb {
  width: 10px; height: 10px; border-radius: 50%;
  background: #fff; border: 3px solid var(--accent); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.ap-seek:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.region-content .player ul { margin: 30px 0 0 0; }
.player li { color: #262626; list-style: none; font-size: 16px; margin: 10px 0; }

/* «Цель обучения» */
.goal {
  clear: both; position: relative; isolation: isolate;
  box-sizing: border-box; width: 633px; margin: 40px auto 0;
}
.goal-paper { position: relative; box-sizing: border-box; min-height: 260px; padding: 22px 34px 26px; }
.goal h3 { text-align: center; margin: 0 0 0.6em 0; font-size: 1.17em; }

/* кнопка «Купить курс» */
.buy { position: relative; margin: 30px auto 50px; text-align: center; }
.inner .btn-buy {
  display: inline-block; min-width: 280px; padding: 17px 44px 16px;
  border-radius: 999px; color: #1b1b1b; text-decoration: none;
  font: 600 22px/1 Geneva, Arial, Helvetica, sans-serif; letter-spacing: 0.04em; text-transform: uppercase;
  background: linear-gradient(180deg, var(--btn-to), var(--btn-from));
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.inner .btn-buy:hover, .inner .btn-buy:focus-visible {
  color: #111; text-decoration: none; transform: translateY(-2px); filter: brightness(1.08) saturate(1.1);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 26px color-mix(in srgb, var(--btn-from) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.inner .btn-buy:active { transform: translateY(0); filter: brightness(0.98); }
.inner .btn-buy:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* цвета ритмомер (из лепестков цветка) */
.ritmomera {
  --title: #ffac00; --accent: #ff8401; --accent-hover: #ffac00;
  --btn-from: #e0a339; --btn-to: #e9c591; --btn-hover-from: #faa517; --btn-hover-to: #e8bc7b;
}
.rm-hurt .rm-node span { color: #ffac00; }
.rm-love {
  --title: #ea348b; --accent: #ea348b; --accent-hover: #ea348b;
  --btn-from: #ed387b; --btn-to: #e58eb1; --btn-hover-from: #ec276f; --btn-hover-to: #e983ab;
}
.rm-fear {
  --title: #40edfa; --accent: #40edfa; --accent-hover: #40edfa;
  --btn-from: #75e0e8; --btn-to: #9eeaea; --btn-hover-from: #47e2f4; --btn-hover-to: #96e1e6;
}
.rm-age {
  --title: #ff5151; --accent: #ff5151; --accent-hover: #ff5151;
  --btn-from: #d7423e; --btn-to: #e19391; --btn-hover-from: #f7221c; --btn-hover-to: #f08380;
}
.rm-energy {
  --title: #e77843; --accent: #e77843; --accent-hover: #e77843;
  --btn-from: #d48342; --btn-to: #d7a67b; --btn-hover-from: #ee7c19; --btn-hover-to: #f1a363;
}
.rm-info {
  --title: #4a81ff; --accent: #4a81ff; --accent-hover: #4a81ff;
  --btn-from: #298cdf; --btn-to: #6daee6; --btn-hover-from: #118dfd; --btn-hover-to: #54afff;
}
.rm-sleep {
  --title: #00a8ec; --accent: #00a8ec; --accent-hover: #00a8ec;
  --btn-from: #1faed6; --btn-to: #65c3dc; --btn-hover-from: #00cced; --btn-hover-to: #4bd7f8;
}

/* простые страницы */
.page-about p { padding: 7px 0; }
.page-about .center { text-align: center; }
.inner .page-feedback h2 { margin-bottom: 2px; font-size: 1.429em; line-height: 1.4; }
.page-feedback .ask a { color: #ffac00; }
.page-feedback .ask a:hover { color: #ffc261; }

/* подвал внутренних страниц */
.site-footer {
  margin-top: -36px; padding: 100px 0 0 0;
  background: url(/assets/img/inner_footer_bg.png) no-repeat top;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 0.857em;
}
.site-footer .footer { width: 940px; margin: 30px auto 0; text-align: center; letter-spacing: 0.2px; }
.site-footer .region { margin-top: 20px; font-size: 14px; line-height: 1.5em; }
.site-footer .footer-nav { height: 30px; margin: 6px 0; }
.inner .footer-menu { padding: 16px 0 0 145px; }
.inner .copy { margin: 6px 0; padding: 27px 0 15px; }
.inner .copy a, .inner .copy a:hover { color: #737272; }

/* ===================================================================== телефоны и планшеты
   Одна колонка, ширина по экрану, поля 16 px. Ролики ужимаются по ширине (движок рисует SVG
   на 100% контейнера), листки нарисованы на CSS и растут по тексту. */
@media (max-width: 860px) {
  body.front, body.inner { width: auto; min-width: 0; overflow-x: hidden; }
  .swf-anim { max-width: 100%; height: auto !important; margin-left: auto; margin-right: auto; }
  .main img { max-width: 100%; height: auto; }

  /* --- подвал: меню-спрайт по центру, с переносом */
  .footer-menu, .front .footer-menu, .inner .footer-menu {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 14px;
    padding: 14px 16px 0;
  }
  .footer-menu::after { content: none; }
  .footer-menu li { float: none; margin: 0; }
  .footer-menu li.fm-sep { margin: 0; }
  .footer-menu li.fm-sep + li.fm-sep { display: none; }
  .footer-nav, .front-footer .footer-nav, .site-footer .footer-nav { height: auto; }

  /* --- главная */
  .front-page { width: auto; padding: 0 16px; }
  /* тень шапки (низ картинки) опущена ниже ссылки «все ритмомеры» */
  .front-header { height: auto; padding-bottom: 46px; background-size: 100% auto; }
  .front-logo { padding-top: 18px; }
  .front-logo img { width: 100%; height: auto; }
  .front-slogan { font-size: 17px; padding-top: 10px; letter-spacing: -0.04em; }
  .front-all { margin-top: 6px; text-align: center; }
  .front-all a { position: static; }
  .front-main { display: flex; flex-direction: column; padding: 0; background-size: 100% auto; }
  /* фото над цветком, отзывы под ним; ленты едут навстречу друг другу */
  .lenta--left { order: 1; margin-top: 4px; }
  .front-flower { order: 2; padding-bottom: 14px; }
  .lenta--right { order: 3; }
  .lenta--right .lenta-track { animation-direction: reverse; }

  /* киноленты: горизонтальные полосы плёнки, ползут влево, касанием стоят */
  .lenta { position: relative; top: auto; left: auto; right: auto; width: auto; height: auto; margin: 0 -16px 14px; }
  .lenta-top, .lenta-bottom { display: none; }
  .lenta-view {
    position: relative; top: auto; width: auto; height: 132px;
    background:
      repeating-linear-gradient(90deg, transparent 0 7px, #6c6c6c 7px 15px, transparent 15px 22px) 0 6px / 22px 8px repeat-x,
      repeating-linear-gradient(90deg, transparent 0 7px, #6c6c6c 7px 15px, transparent 15px 22px) 0 calc(100% - 6px) / 22px 8px repeat-x,
      #262626;
    box-shadow: inset 0 0 0 1px #3a3a3a;
  }
  .lenta-track { display: flex; width: max-content; animation-name: lenta-left; }
  @keyframes lenta-left { to { transform: translateX(-33.3333%); } }
  .lenta-copy { display: flex; padding: 20px 0 0; background: none; }
  .lenta-kadr, .lenta-copy .lenta-kadr:first-child, .lenta--right .lenta-copy .lenta-kadr:first-child {
    flex: none; margin: 0 8px; box-shadow: 0 0 0 3px #d9d9d9;
  }
  /* на касание наведения нет: кадры левой ленты сразу цветные */
  .lenta--left .lenta-kadr { background-position: -126px 0; }
  .lenta--right .lenta-kadr { background-color: #4f4f4f; background-position: center; }

  /* окно отзыва по центру экрана */
  .lenta-popup {
    position: fixed; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%);
    width: min(320px, calc(100vw - 32px));
  }
  .lenta-popup-text { max-height: 60vh; overflow-y: auto; }
  .lenta-popup-top, .lenta-popup-bottom { background-size: 100% 100%; }

  .front-footer { height: auto; padding-bottom: 16px; background-size: 100% auto; }
  .front .front-copy { padding: 10px 16px 0; }

  /* --- внутренние: шапка и доска */
  /* шапка: один градиент на всю область логотипа и слогана, от серого фона страницы к тёмному низу */
  .site-header { padding: 18px 0 14px; background: linear-gradient(180deg, #4f4f4f 0%, #474747 55%, #333 100%); }
  .site-header .section { width: auto; text-align: center; display: flex; flex-direction: column; }
  .site-header .logo { order: 1; }
  .name-and-slogan { order: 2; }
  .site-header .logo, .name-and-slogan { float: none; display: block; margin: 0; padding: 8px 16px 0; }
  .inner .slogan { font-size: 16px; margin: 6px 0 4px; letter-spacing: -0.04em; }
  /* доска: ровная середина мешковины во всю ширину, без затемнённых краёв, сразу под градиентом шапки */
  .main {
    width: auto; margin-top: 0; padding-bottom: 28px;
    background: #353535 url(/assets/img/bg.jpg) repeat-y center top;
  }
  .main > .section { padding: 0 16px; }
  .inner:not(.ritmomera) .main > .section { padding: 0 26px; }
  .region { padding: 0; }
  .highlighted { text-align: center; padding-top: 8px; }
  .corner { display: none; }  /* «Уже уходишь?» работает только от наведения мыши */

  .ritmomera .page-title {
    width: auto; margin: 16px 0 6px; padding: 0 0 26px; font-size: clamp(30px, 9vw, 44px);
    background-position: bottom center; background-size: min(439px, 90%) auto;
  }
  .rm-love .page-title { width: auto; }
  .region-content, .rm-hurt .region-content, .rm-love .region-content, .rm-fear .region-content { min-height: 0; }

  .what-is { position: static; padding: 0; margin: 0 0 6px; }
  .what-is img { width: 96px; height: auto; }

  /* порядок: вводный листок, облачко «что такое ритмомера», телевизор, ролик и плеер, цель обучения.
     Облачко стоит вне статьи, поэтому статья на телефоне не создаёт свой блок (display: contents),
     и её части встают в общий столбец вместе с облачком */
  .ritmomera .region-content { display: flex; flex-direction: column; }
  .rm-node { display: contents; font-size: 15px; }
  .rm-node > .intro { order: 1; }
  .ritmomera .what-is { order: 2; margin: 22px 0 -10px; }
  .rm-node > .tv { order: 3; }
  .rm-node > .rm-row { order: 4; }
  .rm-node > .goal { order: 5; }
  .ritmomera .buy { order: 6; }

  /* все вводные листки, включая длинные, рисуются на CSS */
  .intro, .intro-long {
    float: none; width: auto; min-height: 0; margin: 14px 4px 0; padding: 0; isolation: isolate;
  }
  .intro-long::before, .intro-long::after {
    content: ''; position: absolute; inset: 0; z-index: -1; box-shadow: 0 4px 26px 4px rgba(8, 30, 32, 0.38);
  }
  .intro-long::before { background: rgba(210, 96, 110, 0.85); transform: rotate(1.3deg); }
  .intro-long::after { background: rgba(72, 228, 237, 0.85); transform: rotate(-1.2deg); }
  .intro .intro-scroll, .intro-long .intro-scroll {
    width: auto; min-height: 0; padding: 16px 16px 14px 8px;
    background: #fbefd2; border-bottom: 1px solid #fee5a4;
  }
  .paper-bottom, .paper-top, .paper-middle, .rm-hurt .paper-bottom, .rm-energy .paper-bottom {
    width: auto; min-height: 0; padding: 0; background: none;
  }
  .paper-middle p, .paper-middle p.p-first { padding: 0; }

  .tv { float: none; margin: 28px auto 0; flex: none; }

  .rm-row { flex-direction: column; align-items: center; }
  .rm-anim { width: 100%; max-width: 340px; margin: 24px auto 0; }
  .rm-anim .swf-anim { display: block; width: 100% !important; }

  /* плеер: тот же листок на CSS, подложка как у block2_bg (оливковые листки) */
  .player {
    position: relative; isolation: isolate; box-sizing: border-box; align-self: stretch;
    width: auto; min-height: 0; margin: 24px 4px 0; padding: 18px 14px 12px;
    background: none;
  }
  /* подложка: повёрнутый оливковый листок с вторым листком-тенью, сверху кремовый лист */
  .player::before, .player::after { content: ''; position: absolute; inset: 0; z-index: -1; }
  .player::before {
    background: rgba(196, 190, 96, 0.9); transform: rotate(-1.4deg);
    box-shadow: 5px 3px 0 rgba(150, 178, 92, 0.9), 0 4px 22px 3px rgba(8, 30, 32, 0.35);
  }
  .player::after { background: #fbefd2; border-bottom: 1px solid #fee5a4; }
  .ap { width: auto; max-width: 420px; padding-right: 12px; gap: 8px; }
  .region-content .player ul { margin: 16px 0 0; padding: 0; }
  .player li { font-size: 15px; }

  .goal { width: auto; margin: 32px 4px 0; }
  .goal-paper { min-height: 0; padding: 16px 14px 18px; }
  .goal ol { padding-left: 1.6em; }

  .buy { margin: 30px 0 36px; }
  .inner .btn-buy { min-width: 0; width: 100%; max-width: 320px; box-sizing: border-box; padding: 16px 20px 15px; font-size: 20px; }

  /* --- подвал внутренних */
  .site-footer { margin-top: 0; padding-top: 18px; background: none; }
  .site-footer .footer { width: auto; margin: 10px 16px 0; }
  .inner .copy { padding: 16px 0 12px; }
}
/* самые узкие телефоны: телевизор 315 px с полями не помещается */
@media (max-width: 359px) {
  .tv { zoom: 0.9; }
}