/* elvis.kz — общие стили всех страниц. Без сборщика и внешних ресурсов.
   Цвета проверены числом (WCAG): текст на фоне 17,3 : 1, подписи 7,0–7,7 : 1,
   ссылки 6,5–7,1 : 1, белый на кнопке 4,7 : 1, рамка контурной кнопки 3,8 : 1. */
:root{
  --bg:#0f0f10; --panel:#19191b;
  --line:#2c2c30; --line-h:#4a4a50; --line-b:#74747c;
  --ink:#f3f3f4; --muted:#a3a3ab;
  --accent:#4da0ff; --btn:#0071e3; --btn-h:#0068d1;
  --wait:#f59e0b;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);
  font:17px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.w{max-width:1120px;margin:0 auto;padding-left:20px;padding-right:20px}

/* --- шапка --- */
.top__in{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:inline-flex;align-items:center;min-height:44px;font-size:17px;font-weight:600;letter-spacing:-.01em}
.nav{display:flex;margin-right:-7px}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 7px;font-size:14px;color:var(--muted);transition:color .12s}
.nav a:hover{color:var(--ink)}

/* --- первый экран --- */
.hero{position:relative;display:grid;gap:24px;padding-top:24px}
.hero picture{display:block}
.hero__photo{width:104px;height:104px;border-radius:26px;object-fit:cover}
h1{font-size:40px;line-height:1.05;letter-spacing:-.03em;font-weight:700}
.lead{margin-top:14px;font-size:19px;line-height:1.45;max-width:30em;text-wrap:balance}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;margin-top:8px;font-size:15px;color:var(--muted)}
.meta a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;color:var(--accent)}
.meta a:hover,.lnk:hover{text-decoration:underline;text-underline-offset:3px}

/* --- разделы --- */
.sec{position:relative;padding-top:72px}
.sec__head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
h2{font-size:28px;line-height:1.15;letter-spacing:-.02em;font-weight:700}

/* --- карточки программ --- */
.grid{display:grid;gap:16px}
.card{position:relative;display:flex;flex-direction:column;background:var(--panel);
  border:1px solid var(--line);border-radius:20px;padding:20px;transition:border-color .12s}
.card:hover{border-color:var(--line-h)}
.card__head{display:flex;align-items:center;gap:14px}
/* у значков macOS поле ≈ 10 % с каждой стороны: отрицательный отступ ставит
   видимый край значка на одну линию с текстом карточки */
.card__head img{width:64px;height:64px;margin:-6px;flex:none}
h3{font-size:22px;line-height:1.2;letter-spacing:-.01em;font-weight:600}
.role{margin-top:2px;font-size:15px;line-height:1.3;color:var(--muted)}
.card__text{margin-top:16px}
.facts{margin-top:auto;padding-top:12px;font-size:14px;line-height:1.45;color:var(--muted)}
.card__act{display:flex;flex-wrap:wrap;align-items:center;gap:4px 20px;padding-top:16px}

/* --- кнопки: залитая на странице одна --- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;
  border-radius:12px;font-size:16px;transition:background-color .12s,border-color .12s,transform .08s}
.btn:active{transform:translateY(1px)}
.btn--fill{background:var(--btn);color:#fff;font-weight:600}
.btn--fill:hover{background:var(--btn-h)}
.btn--line{border:1px solid var(--line-b);font-weight:500}
.btn--line:hover{border-color:var(--ink)}
.lnk{display:inline-flex;align-items:center;min-height:44px;font-size:16px;color:var(--accent)}
.state{display:inline-flex;align-items:center;min-height:48px;font-size:15px;color:var(--muted)}

/* --- ролики: высота двух кадров равна при любой ширине (3,16 : 1) --- */
.vids{display:grid;gap:24px 20px}
.vid{position:relative}
.vid--tall{width:56%}
.vid__frame{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;width:100%;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;color:var(--muted);
  font:12px/1.3 var(--mono);transition:border-color .12s}
button.vid__frame{cursor:pointer}
.vid--wide .vid__frame{aspect-ratio:16/9}
.vid--tall .vid__frame{aspect-ratio:9/16}
button.vid__frame:hover{border-color:var(--line-h)}
.play{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;border:1.5px solid var(--ink);transition:background-color .12s}
.play::before{content:"";margin-left:4px;border-left:14px solid var(--ink);border-top:9px solid transparent;border-bottom:9px solid transparent;transition:border-color .12s}
button.vid__frame:hover .play{background:var(--ink)}
button.vid__frame:hover .play::before{border-left-color:var(--bg)}
.vids__cap{font-size:16px;line-height:1.35;margin-top:-8px}
.vids__cap small{display:block;margin-top:2px;font-size:14px;color:var(--muted)}

/* --- поддержать --- */
.support{position:relative;display:grid;gap:20px;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:20px}
.support p{max-width:36em}
.support .btn{justify-self:start}

/* --- подвал --- */
.foot{margin-top:72px;border-top:1px solid var(--line);font-size:15px;color:var(--muted)}
.foot__in{position:relative;display:flex;flex-direction:column;padding-top:8px;padding-bottom:28px}
.foot__links{display:flex;flex-wrap:wrap;gap:0 20px}
.foot__links a{display:inline-flex;align-items:center;min-height:44px;transition:color .12s}
.foot__links a:hover{color:var(--ink)}
.foot__c{display:flex;align-items:center;gap:12px;min-height:44px}

@media (min-width:480px){
  .nav{margin-right:-10px}
  .nav a{padding:0 10px;font-size:15px}
}
@media (min-width:800px){
  .w{padding-left:32px;padding-right:32px}
  .nav{margin-right:-14px}
  .nav a{padding:0 14px;font-size:16px}
  .hero{grid-template-columns:300px minmax(0,1fr);align-items:center;gap:64px;padding-top:56px}
  .hero__photo{width:300px;height:300px;border-radius:44px}
  h1{font-size:72px}
  .lead{margin-top:22px;font-size:24px;line-height:1.4;max-width:31em}
  .meta{margin-top:14px;font-size:16px}
  .sec{padding-top:112px}
  .sec__head{margin-bottom:28px}
  h2{font-size:40px}
  .grid{grid-template-columns:1fr 1fr;gap:20px}
  .card,.support{padding:28px}
  .vids{grid-template-columns:minmax(0,3.1605fr) minmax(0,1fr);align-items:start}
  .vid--tall{width:auto}
  .vids__cap{grid-column:1/-1}
  .support{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:40px}
  .support .btn{justify-self:end}
  .foot{margin-top:112px}
  .foot__in{flex-direction:row;align-items:center;justify-content:space-between;padding-top:12px;padding-bottom:36px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* --- «скоро»: программа ещё не выпущена --- */
.soon{display:inline-flex;align-items:center;min-height:48px;font-size:15px;color:var(--muted)}

/* --- ждёт слова или данных Элвиса: перед выкладкой таких меток на сайте быть не должно
       (проверка: grep -rn 'class="wait' site/) --- */
.wait{font:12px/1.3 var(--mono);color:var(--wait);border:1px dashed currentColor;border-radius:6px;padding:3px 6px;
  white-space:normal;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* --- внутренние страницы: заголовок и текст --- */
.page{padding-top:24px}
.page__back{display:inline-flex;align-items:center;min-height:44px;font-size:15px;color:var(--muted);transition:color .12s}
.page__back:hover{color:var(--ink)}
.page h1{margin-top:8px;font-size:36px}
.page__sub{margin-top:12px;font-size:15px;color:var(--muted)}
.prose{max-width:40em}
.prose h2{margin-top:56px;font-size:24px}
.prose h3{margin-top:28px;font-size:19px}
.prose p,.prose ul,.prose ol{margin-top:14px}
.prose ul,.prose ol{padding-left:1.2em}
.prose li+li{margin-top:6px}
.prose a{color:var(--accent)}
.prose a:hover{text-decoration:underline;text-underline-offset:3px}
@media (min-width:800px){
  .page{padding-top:56px}
  .page h1{font-size:56px}
  .prose h2{margin-top:72px;font-size:28px}
}

/* ====== общие части внутренних страниц (одни на весь сайт) ====== */

/* служебная строка в конце страницы — отдельно от последнего раздела */
.page>.page__sub{margin-top:40px}
.page>h1+.page__sub{margin-top:12px}
.sec__head+.prose>:first-child,.treat .prose>:first-child{margin-top:0}
.prose .lnk{margin-top:4px}
/* ссылка внутри абзаца: место нажатия от 44 px, строки при этом не раздвигаются */
.prose p a,.prose li a,.ans a{padding:13px 0}
.nw{white-space:nowrap}

/* --- первый экран программы --- */
.app{padding-top:24px}
.app--shot{display:grid;gap:40px}
/* у значка macOS поле ≈ 10 % с каждой стороны: видимый край — на линии текста */
.app__icon{width:96px;height:96px;margin:-9px -9px 9px}
.app__note{margin-top:12px;font-size:15px;line-height:1.45;color:var(--muted);max-width:36em;text-wrap:balance}
.app__act{margin-top:24px}
.app__facts{margin-top:12px;font-size:14px;line-height:1.45;color:var(--muted);text-wrap:balance}
.app__facts+.app__note{margin-top:6px;font-size:14px}

/* --- снимок окна с подписью: вырезан по краю окна, рамка не нужна.
       У файла по бокам по 2 px полупрозрачной тени — картинка чуть шире колонки,
       чтобы видимый край окна стоял на линии текста --- */
.shot{width:100%;max-width:420px}
.shot img{width:calc(100% + 4px);max-width:none;height:auto;margin:0 -2px}
.shot figcaption{margin-top:14px;font-size:14px;line-height:1.45;color:var(--muted)}

/* --- клавиша --- */
kbd{display:inline-block;font:500 14px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  padding:0 7px;border:1px solid var(--line-h);border-radius:6px;background:var(--panel);color:var(--ink);white-space:nowrap}

/* --- строки «название — текст»: названия одной колонкой, текст другой --- */
.rows{border-top:1px solid var(--line)}
.row{display:grid;align-items:start;gap:6px;padding:18px 0;border-bottom:1px solid var(--line)}
.row__name{display:flex;align-items:center;gap:10px;font-size:17px;line-height:1.5;font-weight:600}
.row__text{max-width:36em}

/* --- строки «подпись — значение»: подписи одной колонкой, значения другой --- */
.kv{display:grid;grid-template-columns:10em minmax(0,1fr);max-width:40em;margin-top:20px;border-bottom:1px solid var(--line);font-size:16px;line-height:1.35}
/* обе ячейки — обычным текстом с одними полями: подпись и значение стоят на одной базовой линии */
.kv dt,.kv dd{min-height:52px;padding:15px 0;border-top:1px solid var(--line)}
.kv dt{padding-right:16px;color:var(--muted)}
/* ссылка-значение стоит на базовой линии подписи; место нажатия — за счёт полей */
.kv .lnk,.page__sub .lnk{display:inline;min-height:0;padding:14px 0;font-size:inherit;line-height:inherit}
.prose h2+.kv,.sec__head+.kv{margin-top:0}
.prose h2+.kv{margin-top:16px}

/* --- текстовый блок раздела, тихая строка, ряд ссылок --- */
.txt{max-width:36em}
.txt+.lnk,.rows+.txt{margin-top:12px}
.quiet{font-size:15px;color:var(--muted)}
.links{display:flex;flex-wrap:wrap;gap:0 28px}

/* --- шаги --- */
.steps{list-style:none;counter-reset:step;display:grid;gap:20px}
.steps li{counter-increment:step;display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;align-items:start}
.steps li::before{content:counter(step);display:grid;place-items:center;width:32px;height:32px;
  border:1px solid var(--line-b);border-radius:50%;font-size:15px;line-height:1}
.steps b{display:block;padding-top:3px;font-weight:600}
.steps span{display:block;margin-top:2px;font-size:15px;color:var(--muted)}

/* --- сворачиваемые блоки: вопросы, условия --- */
.faq{max-width:40em;margin-top:16px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:12px 0;
  cursor:pointer;list-style:none;font-weight:500;transition:color .12s}
.faq summary::-webkit-details-marker{display:none}
.faq summary>span:first-child{flex:1;min-width:0}
.faq summary::after{content:"";flex:none;width:9px;height:9px;margin:-4px 6px 0 0;
  border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg);
  transition:transform .15s,border-color .12s}
.faq summary:hover::after{border-color:var(--ink)}
.faq details[open] summary::after{margin-top:4px;transform:rotate(-135deg)}
.faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.faq .ans{padding:0 28px 24px 0;font-size:16px;line-height:1.55}
.faq .ans>*+*{margin-top:12px}
.faq .ans>:first-child{margin-top:0}
.faq .ans ol,.faq .ans ul{padding-left:1.9em}
.faq .ans li+li{margin-top:10px}
.faq .ans a{color:var(--accent)}
.faq .ans a:hover{text-decoration:underline;text-underline-offset:3px}
.faq .ans b{font-weight:600}
.faq .ans .ed{color:var(--muted)}

/* --- угостить автора: фото, слова, суммы --- */
.treat{display:grid;gap:16px;max-width:40em}
.treat__photo{width:72px;height:72px;border-radius:18px;object-fit:cover}
.sums{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
/* оплата ещё не подключена: суммы видны, но не нажимаются — причина написана строкой ниже */
.sum{display:inline-flex;align-items:center;justify-content:center;min-height:48px;min-width:104px;padding:0 18px;
  border:1px solid var(--line-h);border-radius:12px;font-size:16px;color:var(--muted);cursor:not-allowed}
.sum--on{border-color:var(--line-b);color:var(--ink)}
.sums+.quiet{margin-top:12px}
.quiet+.prose{margin-top:24px}

@media (min-width:800px){
  .app{padding-top:56px}
  .app--shot{grid-template-columns:minmax(0,1fr) 340px;align-items:start;gap:64px}
  .app__icon{width:128px;height:128px;margin:-12px -12px 16px}
  .app__act{margin-top:32px}
  .row{grid-template-columns:260px minmax(0,1fr);gap:32px;padding:22px 0}
  /* значения — на той же вертикали, что тексты строк .row (260 + зазор 32) */
  .kv{grid-template-columns:292px minmax(0,1fr)}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
  .page .steps{grid-template-columns:1fr;gap:20px;max-width:40em}
  .faq{margin-top:20px}
}

/* --- превью снимков и видео: маленькие, по нажатию открываются крупно (assets/gallery.js).
       Без скриптов ссылка открывает сам файл --- */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px}
.thumb{position:relative;display:block;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:var(--bg);
  outline:1px solid var(--line);outline-offset:-1px;cursor:zoom-in;transition:outline-color .12s,transform .08s}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .2s}
.thumb:hover{outline-color:var(--line-b)}
.thumb:hover img{transform:scale(1.04)}
.thumb:active{transform:translateY(1px)}
.thumb:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.thumb--tall{aspect-ratio:10/16}
/* видео: знак «играть» поверх кадра */
.thumb__play{position:absolute;inset:0;margin:auto;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:rgba(15,15,16,.72);border:1px solid rgba(243,243,244,.7);transition:background-color .12s}
.thumb__play::before{content:"";margin-left:3px;border-left:10px solid var(--ink);border-top:6px solid transparent;border-bottom:6px solid transparent}
.thumb:hover .thumb__play{background:var(--btn)}
/* место под снимок или видео, которых ещё нет (внутри — метка .wait) */
.thumb--empty{display:grid;place-items:center;padding:6px;outline-style:dashed;cursor:default;text-align:center}
.thumb--empty .wait{border:0;padding:0}
/* на странице программы — ряд покрупнее */
.shots--page{gap:10px;margin-top:0}
.shots+.txt{margin-top:12px}

/* --- крупный просмотр --- */
html.lb-open{overflow:hidden}
.lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:rgba(8,8,9,.94);color:var(--ink);overflow:hidden}
.lb:focus{outline:0}
.lb::backdrop{background:rgba(8,8,9,.94)}
.lb[open]{display:grid;grid-template-rows:minmax(0,1fr) auto;animation:lb-in .16s ease-out}
@keyframes lb-in{from{opacity:0}to{opacity:1}}
.lb__stage{position:relative;display:grid;place-items:center;min-height:0;padding:64px 12px 8px;cursor:zoom-out}
.lb__media{max-width:100%;max-height:calc(100vh - 148px);max-height:calc(100dvh - 148px);width:auto;height:auto;border-radius:10px;cursor:default;object-fit:contain;
  transition:opacity .16s}
.lb[data-state="loading"] .lb__media,.lb[data-state="error"] .lb__media{opacity:0}
.lb__wait,.lb__err{position:absolute;inset:0;margin:auto;display:none;height:max-content;width:max-content;max-width:calc(100% - 40px);text-align:center}
.lb[data-state="loading"] .lb__wait{display:block;width:32px;height:32px;border-radius:50%;
  border:2px solid var(--line-h);border-top-color:var(--ink);animation:lb-spin .8s linear infinite}
@keyframes lb-spin{to{transform:rotate(360deg)}}
.lb[data-state="error"] .lb__err{display:grid;gap:14px;justify-items:center;cursor:default}
.lb__bar{display:flex;align-items:baseline;justify-content:center;gap:12px;min-height:56px;padding:12px 20px 20px;
  font-size:15px;line-height:1.4;text-align:center}
.lb__n{flex:none;color:var(--muted);font-variant-numeric:tabular-nums}
.lb__btn{position:absolute;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line-h);border-radius:50%;
  background:rgba(25,25,27,.86);color:var(--ink);font:400 24px/1 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  cursor:pointer;transition:border-color .12s,background-color .12s,opacity .12s}
.lb__btn:hover{border-color:var(--ink);background:var(--panel)}
.lb__btn:active{transform:translateY(1px)}
.lb__btn:disabled{opacity:.28;cursor:default;border-color:var(--line-h);background:rgba(25,25,27,.86)}
.lb__x{top:10px;right:12px}
.lb__prev,.lb__next{top:calc(50% - 22px)}
.lb__prev{left:12px}
.lb__next{right:12px}
.lb__btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lb[data-one] .lb__prev,.lb[data-one] .lb__next,.lb[data-one] .lb__n{display:none}

/* --- угостить: сумма нажимается и сразу открывает оплату (assets/treat.js) --- */
.tw{margin-top:20px;max-width:40em}
.tw .sums{margin-top:0}
button.sum{background:none;color:var(--ink);border-color:var(--line-b);cursor:pointer;font:inherit;font-size:16px;
  transition:border-color .12s,background-color .12s,transform .08s}
button.sum:hover{border-color:var(--ink);background:var(--panel)}
button.sum:active{transform:translateY(1px)}
button.sum:disabled{border-color:var(--line-h);color:var(--muted);background:none;cursor:not-allowed;transform:none}
/* нажатая сумма, пока открывается оплата */
/* кружок встаёт на место цифр: ширина кнопки не меняется, соседние суммы не едут; сумма написана строкой ниже */
button.sum{position:relative}
button.sum[aria-busy="true"]{border-color:var(--ink);color:transparent;cursor:progress}
button.sum[aria-busy="true"]::before{content:"";position:absolute;inset:0;margin:auto;width:16px;height:16px;border-radius:50%;
  border:2px solid var(--line-b);border-top-color:var(--ink);animation:lb-spin .8s linear infinite}
.tw__note{margin-top:12px;font-size:15px;color:var(--muted)}
.own{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.own__f{display:flex;align-items:center;gap:8px;min-height:48px;width:168px;padding:0 14px;border:1px solid var(--line-b);border-radius:12px;
  transition:border-color .12s}
.own__f:focus-within{border-color:var(--accent);outline:1px solid var(--accent)}
.own__f input{flex:1;min-width:0;width:100%;height:46px;border:0;outline:0;background:none;color:var(--ink);font:inherit;font-size:16px;
  font-variant-numeric:tabular-nums}
.own__f input::placeholder{color:var(--muted)}
.own__f span{color:var(--muted)}
.own[data-bad] .own__f{border-color:var(--wait)}
.own .lnk{background:none;border:0;cursor:pointer;font:inherit;font-size:16px;padding:0 4px}
/* ошибка — сразу под полем, «Назад» — после неё */
.own__err{order:1;flex-basis:100%;font-size:15px;color:var(--wait)}
.own [data-back]{order:2;padding-left:0}
.tw__end a{color:var(--accent)}
.tw__end a:hover{text-decoration:underline;text-underline-offset:3px}
.tw__end{display:grid;gap:12px;justify-items:start;padding:20px;border:1px solid var(--line-h);border-radius:16px}
.tw__end b{font-size:19px;font-weight:600}
.tw__end p{font-size:15px;color:var(--muted)}
.tw__end .acts{display:flex;flex-wrap:wrap;align-items:center;gap:4px 20px}
.tw__end .lnk{background:none;border:0;cursor:pointer;font:inherit;font-size:16px}
.tw [hidden]{display:none}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* на главной блок поддержки — та же колонка: слова, под ними суммы */
.support--tw{grid-template-columns:1fr;gap:0}
.support--tw .tw__terms{margin-top:8px}

/* --- мелкая строка под текстом (оговорка) --- */
.fine{margin-top:10px;font-size:13px;line-height:1.4;color:var(--muted)}

@media (min-width:800px){
  .shots--page{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
  .lb__stage{padding:64px 76px 8px}
  .lb__prev{left:16px}
  .lb__next{right:16px}
  .lb__x{top:12px;right:16px}
  /* широкая карточка: слова слева, превью справа */
  .card--wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 40px;align-items:start}
  .card--wide>div{display:flex;flex-direction:column;height:100%}
  .card--wide .shots{margin-top:0;grid-template-columns:repeat(2,minmax(0,1fr))}
}
.thumb--row{grid-column:1/-1;aspect-ratio:auto;min-height:72px}
.thumb img{object-position:top}
.tw+.prose{margin-top:24px}
/* ряд действий одной высоты: карточка с одной ссылкой стоит на той же линии, что и карточка с кнопкой */
.card__act{min-height:64px}
/* кнопка-элемент выглядит так же, как кнопка-ссылка */
button.btn{background:none;color:var(--ink);font:inherit;font-size:16px;cursor:pointer}
button.btn--line{font-weight:500}
.tw__end:focus{outline:0}

/* --- карточки парой: описание, превью, факты и кнопки стоят на общих линиях соседней карточки --- */
@media (min-width:800px){
  @supports (grid-template-rows:subgrid){
    .grid{row-gap:0;margin-bottom:-16px}
    .card{display:grid;grid-template-rows:subgrid;grid-row:span 6;row-gap:0;margin-bottom:16px}
    .card__head{grid-row:1}
    .card__text{grid-row:2}
    .card .fine{grid-row:3}
    .card .shots{grid-row:4;align-content:start}
    .facts{grid-row:5;margin-top:0;align-self:end}
    .card__act{grid-row:6}
  }
}

/* --- крупный просмотр на телефоне: стрелки стоят в строке подписи под снимком, а не поверх него --- */
@media (max-width:799px){
  .lb[open]{grid-template-columns:44px minmax(0,1fr) 44px;column-gap:4px;padding:0 12px 12px}
  .lb__stage{grid-column:1/-1;padding:64px 0 8px}
  .lb__bar{grid-column:2;grid-row:2;align-self:center;flex-direction:column;align-items:center;gap:2px;min-height:0;padding:8px 4px;text-align:center}
  .lb__prev,.lb__next{position:static;grid-row:2;align-self:center}
  .lb__prev{grid-column:1}
  .lb__next{grid-column:3}
}