/*
Theme Name: Babama Ru
Description: Тема сайта babama.help. Язык дизайна — «витрина»: каталог площадок ярлыками с люверсом, секции стоят на полках, числа подаются долями от каталога.
Version: 1.0.7
Text Domain: babama-ru
*/

/* ── Шрифт хостится в теме: fonts.googleapis.com с российских провайдеров не отвечает ── */
@font-face{font-family:"Plex Serif";src:url(fonts/plexserif-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Serif";src:url(fonts/plexserif-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Serif";src:url(fonts/plexserif-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Serif";src:url(fonts/plexserif-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  /* палитра снята кодом из CSS-бандлов babama.ru */
  --canvas:#f9fafc;
  --sheet:#ffffff;
  --sheet2:#eff2f7;
  --sheet3:#ecedf2;
  --line:#dbe1ee;
  --line2:#c3cad9;
  --ink:#2b3850;
  --ink2:#465575;
  /* офсайтные #6b7a99 и #96a0b7 дают на полотне 4,17:1 и 2,53:1 — ниже нормы 4,5:1,
     поэтому для ТЕКСТА взяты те же тона на две ступени темнее (5,6:1 и 4,8:1),
     а офсайтные оставлены линиям и рамкам, где контраст не нормируется */
  --dim:#566481;
  --dim2:#626f8c;
  --accent:#5703cc;
  --accent2:#8833ff;
  --bad:#cc3030;
  --good:#359a61;
  --deep:#22203f;

  --hall:1340px;
  --gutter:28px;
  --r:6px;
  --r-s:4px;
  --crown-h:66px;

  --f:"Plex Serif",Georgia,"Times New Roman",serif;
  --fm:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--canvas);color:var(--ink);
  font-family:var(--f);font-size:17px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-underline-offset:.18em}
a:hover{color:var(--accent2)}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.14;font-weight:600;letter-spacing:-.008em;text-wrap:balance}
h1{font-size:clamp(2rem,1.3rem+2.6vw,3.15rem);font-weight:700}
h2{font-size:clamp(1.45rem,1.05rem+1.5vw,2.2rem)}
h3{font-size:clamp(1.12rem,.98rem+.5vw,1.32rem)}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.15em;padding-left:1.2em}
li{margin:0 0 .42em}
b,strong{font-weight:600}
.num,.share b,.ledger td:last-child,.rate__v{font-variant-numeric:lining-nums tabular-nums}

.hall{width:100%;max-width:var(--hall);margin:0 auto;padding-inline:var(--gutter)}
.slim{max-width:820px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:60;background:var(--sheet);padding:10px 14px;border:1px solid var(--accent);border-radius:var(--r-s)}

/* ── Шапка ────────────────────────────────────────────── */
.crown{position:sticky;top:0;z-index:40;background:var(--sheet);border-bottom:1px solid var(--line)}
.crown__in{display:flex;align-items:center;gap:18px;min-height:var(--crown-h)}
.sign{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);flex:0 0 auto}
.sign__m{width:28px;height:28px;flex:none;display:block}
.sign__w{font-weight:700;font-size:19px;letter-spacing:-.015em}
.sign__w i{font-style:normal;color:var(--accent)}
.menu{display:flex;align-items:center;gap:2px;margin-left:auto;flex-wrap:nowrap}
.menu a{display:inline-block;padding:7px 10px;font-size:15px;text-decoration:none;color:var(--ink2);border-radius:var(--r-s);white-space:nowrap}
.menu a:hover{color:var(--accent);background:var(--sheet2)}
.menu a.on{color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)}
.crown .buy{margin-left:14px;flex:0 0 auto}
.burger{display:none;flex:0 0 auto;width:42px;height:38px;border:1px solid var(--line2);background:var(--sheet);border-radius:var(--r-s);cursor:pointer;padding:0;margin-left:10px}
.burger span{display:block;width:18px;height:2px;background:var(--ink);margin:3px auto;transition:transform .18s,opacity .18s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.tray{display:none;border-top:1px solid var(--line);background:var(--sheet);max-height:calc(100dvh - var(--crown-h));overflow-y:auto;overscroll-behavior:contain}
.tray.open{display:block}
.tray__in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;padding:14px 0 20px}
.tray a{padding:10px 12px;text-decoration:none;color:var(--ink2);font-size:16px;border-radius:var(--r-s)}
.tray a:hover,.tray a.on{color:var(--accent);background:var(--sheet2)}

/* ── Кнопки ───────────────────────────────────────────── */
.buy,.ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--f);font-weight:600;font-size:16px;line-height:1.2;
  padding:12px 22px;border-radius:var(--r-s);text-decoration:none;border:1px solid transparent;
  transition:background .18s,color .18s,border-color .18s;
}
.buy{background:var(--accent);color:#fff}
.buy:hover{background:var(--accent2);color:#fff}
.ghost{background:transparent;color:var(--ink);border-color:var(--line2)}
.ghost:hover{border-color:var(--accent);color:var(--accent)}
.buy--sm{padding:8px 14px;font-size:14px;white-space:nowrap}
.crown .buy{padding:9px 16px;font-size:15px}
.buy__short{display:none}

/* ── Полка: секция стоит НА линии, а не под подписью ───── */
.shelf{padding:64px 0 0;position:relative}
/* flow-root не даёт margin-top у .shelf__end схлопнуться наружу: без него
   разделитель выпадал за нижнюю границу секции и на 360px наезжал на
   следующую (замер CDP: зазор -27px при норме не меньше 28) */
.shelf>.hall{display:flow-root}
.shelf__end{margin-top:56px;border-top:2px solid var(--line);position:relative}
.shelf__end::before{content:"";position:absolute;left:0;top:-2px;width:66px;height:2px;background:var(--accent)}
.shelf:last-of-type .shelf__end{border-top-color:transparent}
.shelf:last-of-type .shelf__end::before{display:none}
.shelf__head{    max-width: 70ch;}
.lede{font-size:clamp(1.05rem,1rem+.35vw,1.22rem);color:var(--ink2);}

/* ── Первый экран: витрина ────────────────────────────── */
.case{padding:52px 0 0}
.case__grid{display:grid;gap:34px}
@media(min-width:1080px){.case__grid{grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:52px;align-items:start}}
/* внутренние страницы: широкая колонка отдана тексту, врезка справа узкая */
@media(min-width:1080px){.case__grid--flip{grid-template-columns:minmax(0,1fr) minmax(0,392px)}}
.case h1{margin-bottom:.42em}
.case__act{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 0}
.case__note{margin:16px 0 0;font-size:14.5px;color:var(--dim)}
.case__tally{display:flex;flex-wrap:wrap;gap:26px 40px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}

/* ── Живое поле под первым экраном ────────────────────── */
/* холст .case__fluid ставит scripts.js; до него и без WebGL лежит тот же
   акцент статичными пятнами по углам, подальше от строк */
.case{position:relative;isolation:isolate}
.case::before{
  content:"";position:absolute;left:0;right:0;top:0;height:min(100%,1150px);z-index:-2;pointer-events:none;
  background:
    radial-gradient(64% 58% at 100% 0%,rgba(136,51,255,.13),rgba(136,51,255,0) 72%),
    radial-gradient(42% 46% at 0% 0%,rgba(87,3,204,.07),rgba(87,3,204,0) 72%);
  -webkit-mask-image:linear-gradient(#000 calc(100% - 160px),transparent);mask-image:linear-gradient(#000 calc(100% - 160px),transparent);
}
.case--fluid::before{display:none}
.case__fluid{
  position:absolute;left:0;top:0;width:100%;z-index:-1;display:block;pointer-events:none;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 160px),transparent);mask-image:linear-gradient(#000 calc(100% - 160px),transparent);
}

/* Числа — доля от каталога: 18/175 */
.share{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:2px}
.share b{font-size:clamp(1.65rem,1.3rem+1vw,2.1rem);font-weight:700;line-height:1}
.share i{font-style:normal;font-size:1rem;color:var(--dim2);font-variant-numeric:lining-nums tabular-nums}
.share em{flex:0 0 100%;font-style:normal;font-size:13.5px;color:var(--dim);margin-top:3px}

/* ── Витрина ярлыков ──────────────────────────────────── */
.case__wall{border:1px solid var(--line);background:var(--sheet2);border-radius:var(--r);padding:14px}
.rack{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
.rack--wide{grid-template-columns:repeat(auto-fill,minmax(216px,1fr))}

.tag{
  position:relative;background:var(--sheet);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 14px 13px 26px;min-height:78px;text-decoration:none;color:inherit;display:block;overflow:hidden;
  transition:border-color .18s;
}
/* люверс — несущая деталь формы */
.tag::before{
  content:"";position:absolute;left:9px;top:12px;width:9px;height:9px;border-radius:50%;
  background:var(--canvas);box-shadow:0 0 0 1px var(--line2) inset,0 0 0 1px var(--line2);
  transition:background .18s,box-shadow .18s;
}
/* засечка, которая проявляется в зазоре при наведении */
.tag::after{
  content:"";position:absolute;left:9px;bottom:12px;top:32px;width:2px;background:var(--accent);
  opacity:0;transition:opacity .18s;
}
.tag__in{display:block;transition:transform .18s}
.tag:hover{border-color:var(--line2)}
.tag:hover .tag__in{transform:translateX(3px)}
.tag:hover::after{opacity:1}
.tag:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tag.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.tag.on::before{background:var(--accent);box-shadow:0 0 0 1px var(--accent) inset,0 0 0 1px var(--accent)}
.tag.on .tag__n{color:var(--accent)}
.tag__n{display:block;font-weight:600;font-size:15.5px;line-height:1.25;margin-bottom:3px}
.tag__c{display:block;font-size:12.5px;color:var(--dim);font-variant-numeric:lining-nums tabular-nums}
.tag__t{display:block;font-size:13px;color:var(--dim);margin-top:6px;line-height:1.4}
.tag--more{display:flex;align-items:center;justify-content:center;text-align:center;background:none;border-style:dashed;color:var(--dim);font-size:14px;padding-left:14px}
.tag--more::before,.tag--more::after{display:none}

/* ── Карточки-заметки ─────────────────────────────────── */
.cards{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1080px){.cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{background:var(--sheet);border:1px solid var(--line);border-radius:var(--r);padding:20px 20px 18px;position:relative;overflow:hidden}
.card::before{content:"";position:absolute;left:9px;top:12px;width:9px;height:9px;border-radius:50%;background:var(--canvas);box-shadow:0 0 0 1px var(--line2) inset,0 0 0 1px var(--line2)}
.card{padding-left:28px}
.card h3{margin:0 0 .38em}
.card p:last-child{margin-bottom:0}
.card--flat{background:var(--sheet2)}
.card--warn{border-color:var(--line2)}
.card--warn h3{color:var(--bad)}

/* ── Таблицы ──────────────────────────────────────────── */
.ledger-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--sheet)}
.ledger{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
.ledger caption{text-align:left;padding:14px 18px 0;font-weight:600;font-size:15px}
.ledger th{text-align:left;font-weight:600;font-size:13.5px;color:var(--dim);padding:12px 18px;border-bottom:1px solid var(--line);white-space:nowrap}
.ledger td{padding:11px 18px;border-bottom:1px solid var(--sheet2);vertical-align:top;font-variant-numeric:lining-nums tabular-nums}
.ledger tr:last-child td{border-bottom:0}
.ledger td:first-child{font-weight:600}
.ledger tbody tr:hover{background:var(--sheet2)}
@media(max-width:620px){
  .ledger{min-width:0}
  .ledger thead{position:absolute;left:-9999px}
  .ledger tr{display:block;border-bottom:1px solid var(--line);padding:10px 0}
  .ledger tr:last-child{border-bottom:0}
  .ledger td{display:flex;justify-content:space-between;gap:14px;border:0;padding:5px 16px;text-align:right}
  .ledger td::before{content:attr(data-l);font-size:13px;color:var(--dim);text-align:left;flex:0 0 44%}
  .ledger td:first-child{font-weight:600}
}

/* ── Оценка ───────────────────────────────────────────── */
.score{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;padding:20px 22px;border:1px solid var(--line);border-radius:var(--r);background:var(--sheet)}
.score__v{font-size:2.6rem;font-weight:700;line-height:1;font-variant-numeric:lining-nums tabular-nums}
.score__t{font-size:14.5px;color:var(--dim);max-width:46ch}
.stars{position:relative;display:inline-flex;line-height:0;vertical-align:middle}
.stars__b,.stars__f{display:flex;gap:2px}
.stars__b{color:var(--line2)}
.stars__f{position:absolute;top:0;left:0;bottom:0;overflow:hidden;white-space:nowrap;color:var(--accent)}
.stars svg{width:var(--st,16px);height:var(--st,16px);flex:none;fill:currentColor}

.rate{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r);background:var(--sheet);overflow:hidden}
.rate__r{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;padding:14px 18px;border-bottom:1px solid var(--sheet2);align-items:baseline}
.rate__r:last-child{border-bottom:0}
.rate__n{font-weight:600}
.rate__v{font-weight:700;font-size:1.15rem}
.rate__w{grid-column:1/-1;font-size:14.5px;color:var(--dim);margin:0}

/* ── Отзывы ───────────────────────────────────────────── */
.quotes{display:grid;gap:14px}
@media(min-width:900px){.quotes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.quote{background:var(--sheet);border:1px solid var(--line);border-radius:var(--r);padding:20px 20px 18px 28px;position:relative;overflow:hidden}
.quote::before{content:"";position:absolute;left:9px;top:12px;width:9px;height:9px;border-radius:50%;background:var(--canvas);box-shadow:0 0 0 1px var(--line2) inset,0 0 0 1px var(--line2)}
.quote__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin-bottom:10px}
.quote__by{font-weight:600}
.quote__role{font-size:13.5px;color:var(--dim)}
.quote__d{font-size:13px;color:var(--dim2);margin-left:auto;font-variant-numeric:lining-nums tabular-nums}
.quote p{margin:0;font-size:15.5px}

/* ── Вопросы ──────────────────────────────────────────── */
.query{border:1px solid var(--line);border-radius:var(--r);background:var(--sheet);overflow:hidden}
.query__i{border-bottom:1px solid var(--sheet2)}
.query__i:last-child{border-bottom:0}
.query__q{width:100%;text-align:left;background:none;border:0;padding:15px 46px 15px 20px;font:inherit;font-weight:600;font-size:16px;color:var(--ink);cursor:pointer;position:relative}
.query__q::after{content:"";position:absolute;right:20px;top:50%;width:9px;height:9px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.query__q[aria-expanded="true"]::after{transform:translateY(-25%) rotate(-135deg)}
.query__q:hover{color:var(--accent)}
.query__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .22s ease}
.query__i.open .query__a{grid-template-rows:1fr}
.query__a>div{overflow:hidden}
.query__a p{margin:0;padding:0 20px 16px;color:var(--ink2);font-size:15.5px}

/* ── Плита с призывом ─────────────────────────────────── */
.plank{background:var(--deep);color:#fff;border-radius:var(--r);padding:30px 28px;display:grid;gap:18px}
@media(min-width:820px){.plank{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:30px;padding:34px 34px}}
.plank h2{margin:0 0 .3em;color:#fff}
.plank p{margin:0;color:#c9cbe0;font-size:15.5px;max-width:62ch}
.plank .buy{background:#fff;color:var(--deep)}
.plank .buy:hover{background:var(--accent2);color:#fff}

/* ── Мелочи ───────────────────────────────────────────── */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;color:var(--dim);padding:18px 0 0}
.crumbs a{color:var(--dim);text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.crumbs__now{color:var(--ink2)}
.near{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.near a{display:inline-block;padding:7px 13px;border:1px solid var(--line2);border-radius:var(--r-s);font-size:14.5px;text-decoration:none;color:var(--ink2)}
.near a:hover{border-color:var(--accent);color:var(--accent)}
.src{font-size:13.5px;color:var(--dim2);margin-top:10px}
.src a{color:var(--dim);text-decoration:underline}
.mark{display:inline-block;padding:2px 7px;border-radius:3px;font-size:12.5px;background:var(--sheet3);color:var(--ink2);font-variant-numeric:lining-nums tabular-nums}
.mark--on{background:#eee6ff;color:var(--accent)}
.mark--off{background:#fbe9e9;color:#b32626}
.two{display:grid;gap:26px}
@media(min-width:960px){.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px}}
.two--wide{}
@media(min-width:1080px){.two--wide{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:52px}}

/* ── Подвал ───────────────────────────────────────────── */
.plinth{margin-top:76px;border-top:2px solid var(--line);background:var(--sheet);padding:38px 0 30px}
.plinth__top{display:grid;gap:26px}
@media(min-width:900px){.plinth__top{grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:48px}}
.plinth__ab p{font-size:15px;color:var(--ink2);margin:12px 0 0}
.plinth__links{display:flex;flex-wrap:wrap;gap:6px 4px;justify-self: center;
    align-content: center;}
.plinth__links a{display:inline-block;padding:5px 10px;font-size:14.5px;text-decoration:none;color:var(--ink2);border-radius:var(--r-s)}
.plinth__links a:not(.buy):hover{color:var(--accent);background:var(--sheet2)}
.plinth__cta{margin-top:30px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.plinth__cta .buy{margin-right:6px}
.plinth__cta p{margin:0;font-size:14.5px;color:var(--dim);max-width:52ch}
.plinth__base{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);font-size:13.5px;color:var(--dim);display:grid;gap:8px}
.plinth__base p{margin:0}

/* ── Появление: выкладка на полку ─────────────────────── */
.js .lay{opacity:0;transform:scaleY(.86);transform-origin:bottom center}
.js .lay.in{opacity:1;transform:none;transition:opacity .42s ease,transform .42s cubic-bezier(.2,.8,.25,1)}
.js .lay.in{transition-delay:var(--d,0ms)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .lay{opacity:1;transform:none}
}

/* ── Брейкпоинты: 1240 / 1080 / 920 / 760 / 620 / 480 / 380 ── */
@media(max-width:1240px){
  .menu a.extra{display:none}
}
@media(max-width:1080px){
  :root{--gutter:22px}
  .menu{display:none}
  .burger{display:block}
  .crown__in{gap:12px}
  .crown .buy{margin-left:auto}
}
@media(max-width:920px){
  .shelf{padding-top:52px}
  .shelf__end{margin-top:44px}
}
@media(max-width:760px){
  body{font-size:16.5px}
  .case{padding-top:36px}
  .case__wall{padding:10px}
  .rack{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px}
  .tray__in{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:620px){
  :root{--gutter:16px}
  .case__tally{gap:20px 26px}
  .plank{padding:24px 20px}
}
@media(max-width:480px){
  .crown .buy{padding:9px 13px;font-size:14px}
  .buy__full{display:none}
  .buy__short{display:inline}
  .rack{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
  .score__v{font-size:2.2rem}
}
@media(max-width:380px){
  .sign__w{font-size:17px}
  .crown__in{gap:8px}
  .burger{width:38px;margin-left:6px}
  .rack{grid-template-columns:repeat(auto-fill,minmax(108px,1fr))}
  .tag{padding:12px 10px 11px 22px;min-height:70px}
  .tag__n{font-size:14.5px}
}