/* Блог (webchat/blog). Шапка — общее меню сайта на светлом фоне (seo.css .daylight, .hnav), под ней белый лист для чтения:
   рисунки карандашом лежат прямо на нём (multiply растворяет бумагу рисунка в белом). Наведение — градиентом брендбука.
   Статья — одна сетка на шапку и текст: крошки, заголовок, обложка и текст начинаются с одной линии, оглавление — левее. */
.bl-draft{display:inline-block;margin-left:10px;padding:2px 9px;border-radius:999px;background:var(--lz-honey);color:var(--lz-night);font:500 12px/1.5 Golos;vertical-align:middle}
.bl-draft--top{margin:18px 0 0}

/* сетка статьи: [оглавление] [текст] [поле для шапки и обложки] */
.bl-grid{display:grid;grid-template-columns:190px minmax(0,680px) minmax(0,1fr);column-gap:56px}
.bl-grid>*{grid-column:2}
.bl-head{grid-column:2/-1;max-width:900px;padding:18px 0 40px}
.bl-head h1{margin:22px 0 18px;max-width:15em;font:600 clamp(34px,4.6vw,56px)/1.08 Golos;letter-spacing:-.022em;color:var(--ink);text-wrap:balance}
.bl-lead{margin:0 0 24px;max-width:36em;font-size:20px;line-height:1.5;color:var(--muted);text-wrap:pretty}
.bl-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;margin:0;font-size:14.5px;color:var(--faint)}
/* «Поделиться» в строке даты: на телефоне — системное окно (seo.js), иначе меню под кнопкой */
.bl-share{position:relative}
.bl-share summary{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border:1px solid var(--line);border-radius:999px;color:var(--ink);cursor:pointer;list-style:none;user-select:none}
.bl-share summary::-webkit-details-marker{display:none}
.bl-share summary:hover,.bl-share[open] summary{border-color:var(--ink)}
.bl-share .ic{width:16px;height:16px}
.bl-share__menu{position:absolute;left:0;top:calc(100% + 8px);z-index:20;display:flex;flex-direction:column;min-width:220px;padding:6px;border:1px solid var(--line);border-radius:14px;background:var(--white);box-shadow:var(--rb-shadow-modal)}
.bl-share__menu a,.bl-share__menu button{display:flex;align-items:center;gap:10px;padding:9px 10px;border:0;border-radius:9px;background:none;color:var(--ink);font:inherit;font-size:14.5px;text-align:left;cursor:pointer}
.bl-share__menu a:hover,.bl-share__menu button:hover{background:var(--paper)}
.bl-post{padding-top:0}
.bl-cover{grid-column:2/-1;margin:0 0 44px}
.bl-cover img{display:block;width:100%;height:auto;border-radius:14px;mix-blend-mode:multiply}
.bl-toc{grid-column:1;position:sticky;top:88px;align-self:start;display:flex;flex-direction:column;padding-top:6px}
.bl-toc b{margin:0 0 10px;font-size:14px;font-weight:600;color:var(--ink)}
.bl-toc a{padding:6px 0 6px 12px;border-left:2px solid var(--line);font-size:14px;line-height:1.35;color:var(--muted)}
.bl-toc a:hover{border-left-color:transparent;background:var(--lz-grad-cta) 0 0/2px 100% no-repeat;color:var(--ink)}

/* текст статьи */
.bl-body{min-width:0;font-size:19px;line-height:1.72;color:var(--ink)}
.bl-body>:first-child{margin-top:0}
.bl-body p{margin:0 0 22px;text-wrap:pretty}
.bl-body h2{margin:60px 0 18px;font:600 clamp(25px,2.6vw,31px)/1.2 Golos;letter-spacing:-.012em;scroll-margin-top:24px}
.bl-body h3{margin:38px 0 12px;font:600 21px/1.3 Golos}
/* ссылка — подчёркнута градиентом брендбука, при наведении черта толще и градиент бежит */
.bl-body a{color:var(--ink);background:var(--lz-grad-cta) 0 100%/200% 1.5px no-repeat;padding-bottom:1px}
.bl-body a:hover{background-size:200% 3px;animation:bl-line-run 2.4s ease-in-out infinite}
/* общий lz-grad-run двигает фон по середине высоты — черта уезжала на текст и зачёркивала ссылку; здесь — по низу */
@keyframes bl-line-run{0%,100%{background-position:0% 100%}50%{background-position:100% 100%}}
.bl-body ul,.bl-body ol{margin:0 0 22px;padding-left:1.3em} .bl-body li{margin:0 0 8px} .bl-body li::marker{color:var(--faint)}
.bl-body strong{font-weight:600}
.bl-body hr{margin:48px 0;border:0;border-top:1px solid var(--line)}
.bl-body blockquote{margin:34px 0;padding:2px 0 2px 24px;border-left:2px solid var(--ink);font-size:22px;line-height:1.55}
.bl-body blockquote p{margin:0 0 12px} .bl-body blockquote p:last-child{margin:0}
.bl-body code{padding:.1em .35em;border-radius:6px;background:var(--paper);font:500 .86em/1.4 Mono,monospace}
.bl-body pre{margin:0 0 24px;padding:18px 20px;border-radius:14px;background:var(--paper);overflow-x:auto;font-size:15px;line-height:1.55}
.bl-body pre code{padding:0;background:none}
.bl-body table{width:100%;margin:8px 0 28px;border-collapse:collapse;font-size:16px;line-height:1.45}
.bl-body th,.bl-body td{padding:10px 12px 10px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.bl-body th{font-weight:600;border-bottom-color:var(--ink)}
/* таблица «подпись — значение» (юридические страницы витрины, webchat/legal_pages): подписи не рвём, на телефоне — друг под другом */
.bl-body .bl-dl th{width:12em;border-bottom-color:var(--line);white-space:nowrap}
@media (max-width:640px){.bl-body .bl-dl tr,.bl-body .bl-dl th,.bl-body .bl-dl td{display:block;width:auto} .bl-body .bl-dl th{padding-bottom:2px;border:0} .bl-body .bl-dl td{padding-top:0}}
.bl-body .footnotes{margin-top:56px;padding-top:18px;border-top:1px solid var(--line);font-size:15px;color:var(--muted)}
.bl-body .footnotes a,.bl-body sup a{background:none;color:var(--muted)}
/* картинка и ролик — по ширине текста, подпись под ними */
.bl-fig{margin:40px 0}
.bl-fig img{display:block;width:100%;height:auto;border-radius:14px;mix-blend-mode:multiply}   /* у рисунка края белые — скругление не видно */
.bl-fig video{display:block;width:100%;height:auto;border-radius:14px;background:var(--paper)}
.bl-fig figcaption{max-width:600px;margin:12px 0 0;font-size:15px;line-height:1.5;color:var(--muted)}
/* врезки: промпт — что написали Ложке, пример — как это выглядит на деле */
.bl-note{margin:30px 0;padding:20px 24px;border-radius:16px;background:var(--paper);font-size:17.5px;line-height:1.6}
.bl-note b{display:block;margin:0 0 6px;font-size:14px;font-weight:600;color:var(--teal)}
.bl-note p{margin:0 0 10px} .bl-note p:last-child{margin:0}
.bl-note--prompt p{font:400 16px/1.6 Mono,monospace}
.bl-models{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:44px 0 0;padding-top:22px;border-top:1px solid var(--line)}
.bl-models b{margin-right:6px;font-size:15px;font-weight:600}
.bl-models a{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border:1px solid var(--line);border-radius:999px;font-size:14.5px;line-height:1;color:var(--ink);background:none}
.bl-models a:hover{border-color:var(--ink);background:none}
.bl-try{margin-top:72px;padding:56px 0 64px;background:var(--paper)}
.bl-try .wrap{max-width:860px}
.bl-try h2{margin:0 0 8px;font:600 28px/1.2 Golos} .bl-try p{margin:0 0 22px;font-size:17px;color:var(--muted)}
.bl-more{padding-top:64px;padding-bottom:80px}
.bl-more h2{margin:0 0 8px;font:600 28px/1.2 Golos}

/* оглавление блога: «Ложкоблог», рубрики — как меню, градиентной чертой */
.bl-hub__head{padding-top:14px}
.bl-hub__head h1{margin:0 0 14px;font:600 clamp(44px,6vw,76px)/1.02 Golos;letter-spacing:-.03em;color:var(--ink)}
.bl-hub__one{max-width:34em;margin:0 0 34px;font-size:19px;line-height:1.5;color:var(--muted)}
.bl-tabs{display:flex;flex-wrap:wrap;gap:4px 28px;border-bottom:1px solid var(--line)}
.bl-tabs a{position:relative;padding:0 0 14px;font-size:15.5px;color:var(--muted)}
.bl-tabs a:hover,.bl-tabs a[aria-current]{color:var(--ink)}
.bl-tabs a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--lz-grad-pastel)}
.bl-hub{padding-top:48px;padding-bottom:88px}
.bl-first{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:center;padding:0 0 44px}
.bl-first--text{grid-template-columns:minmax(0,760px)} .bl-first .bl-draft{margin-left:0}
.bl-first__pic{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:14px;mix-blend-mode:multiply}
.bl-first__txt b{display:inline;font:600 clamp(26px,2.4vw,32px)/1.15 Golos;letter-spacing:-.018em;text-wrap:balance}
.bl-first__txt>.bl-row__when{margin-bottom:14px}
.bl-first__txt>span:last-child{display:block;margin-top:14px;font-size:18px;line-height:1.55;color:var(--muted)}
.bl-row{display:grid;grid-template-columns:150px minmax(0,1fr) 210px;gap:32px;align-items:start;padding:28px 0;border-top:1px solid var(--line)}
.bl-row__when{display:flex;flex-direction:column;gap:2px;padding-top:4px;font-size:14px;line-height:1.4;color:var(--faint)}
.bl-first .bl-row__when{flex-direction:row;gap:14px}
.bl-row__txt b{font:600 23px/1.25 Golos;letter-spacing:-.01em}
.bl-row__txt>span:last-child{display:block;margin-top:8px;font-size:16.5px;line-height:1.55;color:var(--muted)}
.bl-row__pic{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:10px;mix-blend-mode:multiply}
/* наведение — заголовок бегущим градиентом брендбука */
.bl-row:hover b,.bl-first:hover b{background:var(--lz-grad-cta) 0 50%/200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:lz-grad-run 2.4s ease-in-out infinite}
.bl-first:focus-visible,.bl-row:focus-visible,.bl-tabs a:focus-visible,.bl-toc a:focus-visible{outline:2px solid var(--teal);outline-offset:4px;border-radius:4px}
.bl-empty{margin:24px 0;color:var(--muted)}
/* короткие заметки (обновления за неделю, новые модели) — сеткой без картинок под статьями */
.bl-notes{margin:56px 0 0;padding-top:28px;border-top:1px solid var(--line)}
.bl-notes h2{margin:0 0 22px;font:600 24px/1.2 Golos;letter-spacing:-.01em;color:var(--ink)}
.bl-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.bl-card{display:flex;flex-direction:column;gap:8px;padding:18px 20px 20px;border:1px solid var(--line);border-radius:14px;color:var(--ink);background:none}
.bl-card .bl-row__when{flex-direction:row;gap:12px}
.bl-card b{font:600 18px/1.3 Golos;letter-spacing:-.008em;text-wrap:balance}
.bl-card>span:last-child{font-size:15px;line-height:1.5;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bl-card:hover{border-color:var(--ink)}
.bl-card:hover b{background:var(--lz-grad-cta) 0 50%/200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:lz-grad-run 2.4s ease-in-out infinite}
@media (max-width:1060px){.bl-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.bl-cards{grid-template-columns:1fr}}
.bl-rss{margin:40px 0 0;font-size:14.5px} .bl-rss a{color:var(--muted);text-decoration:underline;text-underline-offset:3px} .bl-rss a:hover{color:var(--ink)}

@media (max-width:1060px){.bl-grid{grid-template-columns:minmax(0,1fr);max-width:760px} .bl-grid>*,.bl-head,.bl-cover{grid-column:1} .bl-toc{display:none}}
@media (max-width:820px){.bl-first{grid-template-columns:1fr;gap:20px} .bl-row{grid-template-columns:minmax(0,1fr) 120px;gap:8px 18px}
 .bl-row__when{grid-column:1/-1;flex-direction:row;gap:14px;padding:0} .bl-row__txt b{font-size:20px} .bl-row__txt>span:last-child{font-size:15.5px}}
@media (max-width:640px){.bl-head h1{font-size:34px} .bl-lead{font-size:18px} .bl-body{font-size:18px} .bl-body blockquote{font-size:19.5px} .bl-row__pic{aspect-ratio:1}}
