.reading-section{padding-bottom:54px}.reading-section h2{font-family:var(--serif);font-size:32px;letter-spacing:-1px;margin:12px 0 25px}.reading-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.reading-grid a{border:1px solid var(--line);border-radius:10px;padding:24px;display:grid;gap:9px}.reading-grid a:hover{background:#edf1e4}.reading-grid b{font-size:16px;font-weight:600}.reading-grid span{font-size:12px;color:#5f7056;line-height:1.7}.footer-directory{display:flex;flex-wrap:wrap;gap:15px 25px;padding:24px 0;border-top:1px solid var(--line);font-size:11px;color:#55694c}.footer-directory a:hover{text-decoration:underline;text-underline-offset:3px}@media(max-width:800px){.reading-grid{grid-template-columns:1fr}.reading-section h2{font-size:27px}.reading-grid a{padding:20px}.footer-directory{gap:16px 22px;line-height:1.6}}

.preset-card,.tool-card{color:inherit;text-decoration:none}
.mini-pause{display:flex;align-items:center;justify-content:center;gap:7px;background:#c5efb6;color:#243c29;font-size:9px;font-weight:700;border-radius:5px;width:100%;padding:9px}
.mini-phone-buttons span{flex:1;padding:7px 0;text-align:center;font-size:7px;background:#223530;border:1px solid #32463b;color:#c3d6c6;border-radius:5px}

/* Сцена героя: нарисованная покерная комната. Картинка подгоняется ПО ВЫСОТЕ и
   прижимается вправо — тогда видно и пустую стену сверху, где висит табло, и
   игроков снизу. При обрезке по ширине (cover) им срезало головы.
   Левая треть рисунка пустая и совпадает по цвету с фоном сцены (#0a3f35),
   поэтому стык картинки с плоским фоном не виден, а текст ложится на стену. */
.hero-scene{position:relative;isolation:isolate;background:#093f33;color:#f1f6ec;overflow:hidden}
.hero-scene::before,.hero-scene::after{content:'';position:absolute;inset:0;z-index:-1}
.hero-scene::before{background:url(/img/hero-poker-night.webp?v=2) left center/auto 100% no-repeat}
/* Игроки теперь под текстом. Гасить всю левую половину нельзя — рисунок ради
   этого и появился, поэтому тень кладём мягким пятном ровно под текстом, а
   дальше картинка остаётся открытой. */
.hero-scene::after{background:radial-gradient(60% 72% at 20% 52%,rgba(7,40,32,.88) 0%,rgba(7,40,32,.6) 46%,rgba(7,40,32,0) 78%),linear-gradient(94deg,rgba(9,63,51,.72) 0%,rgba(9,63,51,.5) 28%,rgba(9,63,51,.24) 48%,rgba(9,63,51,.06) 64%,rgba(9,63,51,0) 78%)}
.hero-scene .hero-copy{text-shadow:0 2px 16px rgba(4,18,14,.7)}
.hero-scene .hero-benefits{color:#c2d4b7}
.hero-scene .hero{align-items:start;min-height:620px;padding-top:54px}
.hero-scene .hero-copy{padding-top:26px}
.hero-scene .hero-art{padding-top:0}
.hero-scene .hero h1{color:#f6f4ec}
.hero-scene .hero h1 em{color:#c8f0b7}
.hero-scene .hero-copy>p{color:#c6d6c2}
.hero-scene .eyebrow{color:#accb9d}
.hero-scene .hero-benefits{color:#a2b598}
.hero-scene .hero-benefits svg{color:#c8f0b7}
.hero-scene .button-primary{background:var(--mint);color:#1d382b}
.hero-scene .button-primary:hover{background:#d6f7c8}
.hero-scene .text-link{color:#e0efd6}
.hero-scene .art-caption{color:#a9bd9f}
.hero-scene .hero-art::before{display:none}
/* Табло висит на стене нарисованной комнаты: тень вместо подставки. */
.hero-scene .mini-tv{box-shadow:0 36px 64px -28px #04120e,0 0 0 1px #ffffff14}
@media(max-width:1100px){
  .hero-scene .hero{min-height:560px;padding-top:40px}
}
@media(max-width:800px){
  /* Один столбец, и первым идёт табло с телефоном — как на десктопе, где
     устройства стоят рядом с текстом. Текст уходит под них, поверх игроков,
     поэтому затемнение переносим вниз. */
  .hero-scene .hero{min-height:0;padding-top:18px}
  .hero-scene .hero-art{order:1;margin-top:0;padding-top:6px;padding-bottom:64px}
  .hero-scene .hero-copy{order:2;padding-top:4px}
  /* Отдельный кадр для телефона: вырезан по промежутку между игроками, иначе
     обрезка по ширине рубит лица посередине. */
  .hero-scene::before{background-image:url(/img/hero-poker-night-mobile.webp?v=2);background-size:cover;background-position:center bottom}
  .hero-scene::after{background:linear-gradient(0deg,rgba(7,40,32,.93) 0%,rgba(7,40,32,.85) 32%,rgba(9,63,51,.6) 60%,rgba(9,63,51,.28) 82%,rgba(9,63,51,.1) 100%)}
}

/* Бургер-меню в шапке: на телефоне заменяет строку разделов. */
.header-tools{display:flex;align-items:center;gap:10px}
.burger{display:none;position:relative}
.burger>summary{list-style:none;cursor:pointer;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:11px;color:var(--ink)}
.burger>summary::-webkit-details-marker{display:none}
.burger>summary svg{width:20px;height:20px}
.burger[open]>summary{background:#e9eedf}
.burger-panel{position:absolute;right:0;top:calc(100% + 9px);z-index:30;min-width:242px;display:grid;gap:2px;padding:8px;background:var(--paper);border:1px solid var(--line);border-radius:13px;box-shadow:0 26px 52px -28px #16281d59}
.burger-panel a{padding:11px 12px;border-radius:8px;font-size:13px;color:var(--ink)}
.burger-panel a:hover{background:#e9eedf}
@media(max-width:800px){
  .burger{display:block}
}
/* Рядом с кнопкой появился бургер, и на узких экранах бренд с кнопкой начали
   ломаться на две строки. Запрещаем перенос и поджимаем кнопку. */
@media(max-width:560px){
  .site-header{gap:10px}
  .header-tools{gap:8px}
  .site-header .brand>span{white-space:nowrap}
  .header-tools .button{white-space:nowrap;font-size:10px;padding:11px 13px;min-height:42px;gap:8px}
  .header-tools .button svg{width:14px;height:14px}
  .burger>summary{width:42px;height:42px;border-radius:10px}
}

/* Индикатор живого отсчёта в макетах героя. Движение выключается системной
   настройкой prefers-reduced-motion — правило для неё уже есть в base.css. */
@keyframes hero-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}
.hero-scene .live-dot{animation:hero-pulse 1.8s ease-in-out infinite}
.mini-pause{cursor:pointer;user-select:none}
.mini-pause:focus-visible{outline:2px solid #c8f0b7;outline-offset:2px}