/* ═══ Blog in the «ex» look — articles (/blog/<slug>), the indexes (/blog/ru, /blog/de) and the
   Soro embed (/blog/en). Loaded after ex-ui.css; everything is scoped to .ex, so the markup of the
   110 articles (.article-body, .callout, tables, code) keeps its classes and only the look changes. ═══ */

/* ── article head ── */
/* .art is also .ex-wrap: its side padding comes from there */
.ex .art-head{max-width:none;margin:0;padding-inline:0;padding-block:clamp(28px,4vw,56px) clamp(24px,3vw,40px);text-align:left}
.ex .art-badge{display:inline-flex;align-items:center;min-height:30px;margin-top:clamp(20px,3vw,32px);padding:0 12px;border:0;border-radius:999px;background:color-mix(in srgb,var(--gold) 14%,transparent);color:var(--gold-tx);font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;transition:background-color .2s}
.ex .art-badge:hover{background:color-mix(in srgb,var(--gold) 24%,transparent)}
.ex .art-title{margin:16px 0 0;max-width:22ch;font-family:var(--disp);font-weight:600;font-size:clamp(34px,4.6vw,64px);line-height:1.04;letter-spacing:-.04em;color:var(--ink);text-wrap:balance}
.ex .art-lead{margin:20px 0 0;max-width:62ch;color:var(--mu);font-size:clamp(17px,1.4vw,20px);line-height:1.55}
.ex .art-meta{justify-content:flex-start;margin-top:18px;gap:10px;color:var(--mu);font-size:14px}
.ex .art-hero{max-width:none;margin:0;padding:0}
.ex .art-hero img{border:0;border-radius:24px;aspect-ratio:21/9}
.ex .art-wrap{max-width:none;margin:0;padding:clamp(32px,4vw,56px) 0 clamp(64px,8vw,120px);gap:clamp(32px,4vw,64px)}
@media (min-width:960px){.ex .art-wrap{grid-template-columns:minmax(0,1fr) 320px}}

/* ── article body: the HTML of every post ── */
.ex .article-body{max-width:72ch;color:var(--mu);font-size:17.5px;line-height:1.75}
.ex .article-body h2{margin:2.4em 0 .7em;font-family:var(--disp);font-weight:600;font-size:clamp(24px,2.2vw,32px);line-height:1.15;letter-spacing:-.03em;color:var(--ink)}
.ex .article-body h3{margin:1.8em 0 .6em;font-size:20px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.ex .article-body .lead{color:var(--ink);font-size:19px}
.ex .article-body a{color:var(--ink);border:0;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--gold) 60%,transparent);text-decoration-thickness:1.5px;text-underline-offset:3px;transition:text-decoration-color .2s}
.ex .article-body a:hover{text-decoration-color:var(--gold)}
.ex .article-body strong{color:var(--ink)}
.ex .article-body ul,.ex .article-body ol{padding-left:1.25em}
.ex .article-body li::marker{color:var(--gold)}
.ex .article-body blockquote{border-left:3px solid var(--gold);color:var(--ink)}
.ex .article-body code{background:var(--g2);border:0;border-radius:6px;color:var(--gold-tx);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.ex .article-body pre{background:var(--g1);border:0;border-radius:16px;padding:18px 20px}
.ex .article-body pre code{color:var(--ink);background:none}
.ex .article-body img{border:0;border-radius:16px}
.ex .article-body figcaption{color:var(--mu);font-size:14px}
.ex .article-body hr{border-top:1px solid color-mix(in srgb,var(--ink) 10%,transparent)}
.ex .article-body table{font-size:15px}
.ex .article-body th,.ex .article-body td{border:0;border-bottom:1px solid color-mix(in srgb,var(--ink) 9%,transparent);padding:12px 14px}
.ex .article-body thead th{background:var(--g1);color:var(--ink)}
.ex .article-body thead th:first-child{border-radius:12px 0 0 12px}
.ex .article-body thead th:last-child{border-radius:0 12px 12px 0}
.ex .article-body tbody tr:nth-child(even){background:transparent}
.ex .article-body .callout{border:0;border-radius:16px;padding:18px 20px;background:var(--g1);color:var(--mu);box-shadow:inset 3px 0 0 var(--gold)}
.ex .article-body .callout.tip{background:color-mix(in srgb,var(--ok) 9%,var(--g1));box-shadow:inset 3px 0 0 var(--ok)}
.ex .article-body .callout.warn{background:color-mix(in srgb,#e0a84f 10%,var(--g1));box-shadow:inset 3px 0 0 #e0a84f}
.ex .article-body .callout strong,.ex .article-body .callout-title{color:var(--ink)}

/* ── FAQ under the post (same accordion as ex-ui .ex-qa) ── */
.ex .art-faq{max-width:72ch;margin:clamp(48px,6vw,80px) 0 0}
.ex .art-faq>h2{margin:0 0 20px;font-family:var(--disp);font-weight:600;font-size:clamp(26px,2.6vw,36px);letter-spacing:-.035em;color:var(--ink)}

/* ── closing call: the gold band ── */
.ex .art-cta{max-width:none;margin:clamp(48px,6vw,80px) 0 0;padding:clamp(28px,4vw,48px);border:0;border-radius:24px;background:var(--gold);color:#0b0b0c;text-align:left}
.ex .art-cta-emoji{display:none}
.ex .art-cta h2{margin:0;font-family:var(--disp);font-weight:600;font-size:clamp(26px,2.8vw,40px);line-height:1.05;letter-spacing:-.04em;color:#0b0b0c}
.ex .art-cta p{margin:12px 0 0;max-width:52ch;color:rgba(11,11,12,.78);font-size:16.5px}
.ex .art-cta-btns{margin-top:24px;justify-content:flex-start;gap:10px}

/* ── aside: order card + related posts ── */
.ex .art-aside{gap:14px}
@media (min-width:960px){.ex .art-aside{top:96px}}
.ex .art-card{padding:24px;border:0;border-radius:20px;background:var(--g1)}
.ex .art-card-cta{background:var(--g1);box-shadow:inset 0 0 0 2px var(--gold)}
.ex .art-card-title{font-family:var(--disp);font-weight:600;font-size:20px;letter-spacing:-.03em;color:var(--ink);margin-bottom:10px}
.ex .art-card p{color:var(--mu);font-size:15px;line-height:1.55}
.ex .art-games{gap:8px;margin:0 0 18px}
.ex .art-games a{padding-left:16px;color:var(--mu);font-size:14.5px}
.ex .art-games a::before{border-radius:0;width:7px;height:7px;top:.45em;background:var(--gold)}
.ex .art-games b{color:var(--ink)}
.ex .art-games a:hover b,.ex .art-games li.is-focus b{color:var(--gold-tx)}
.ex .art-games li.is-focus a{color:var(--ink)}
.ex .art-card .ex-btn{width:100%}
.ex .art-card-link{margin-top:14px;color:var(--gold-tx);font-size:14.5px;font-weight:500}
.ex .art-rel-list li{border-top:1px solid color-mix(in srgb,var(--ink) 9%,transparent)}
.ex .art-rel-list a{gap:10px;padding:12px 0;color:var(--mu);font-size:15px}
.ex .art-rel-list a:hover{color:var(--ink)}

/* ── blog indexes: head + language switch ── */
.ex .soro-hero{max-width:1320px;margin:0 auto;padding:clamp(28px,4vw,56px) var(--pad) clamp(28px,3.5vw,48px)}
.ex .soro-hero-top{align-items:flex-end}
.ex .soro-switches{gap:8px;margin-top:clamp(20px,3vw,32px)}
.ex .soro-switch{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:0;border-radius:999px;background:var(--g1);color:var(--mu);font-size:14px;font-weight:500;transition:background-color .2s,color .2s}
.ex .soro-switch:hover{background:var(--g2);color:var(--ink)}
.ex .soro-section{max-width:1320px;margin:0 auto;padding:0 var(--pad) clamp(64px,8vw,120px)}
.ex #soro-blog{color:var(--mu)}

/* the card grid (server-rendered on /blog/ru, /blog/de; the Soro widget on /blog/en) */
.ex #soro-blog .soro-blog-list{grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:clamp(14px,1.6vw,22px)}
.ex #soro-blog .soro-blog-card{background:var(--g1)!important;border:0!important;border-radius:20px;transition:background-color .25s ease}
.ex #soro-blog .soro-blog-card:hover{background:var(--g2)!important;transform:none}
.ex #soro-blog .soro-blog-card:first-child{box-shadow:inset 0 0 0 2px var(--gold);border:0!important}
.ex #soro-blog .soro-blog-card-image{transition:transform 900ms var(--ease-out)}
.ex #soro-blog .soro-blog-card{overflow:hidden}
.ex #soro-blog .soro-blog-card:hover .soro-blog-card-image{transform:scale(1.03)}
.ex #soro-blog .soro-blog-card-content{padding:clamp(18px,2vw,26px);gap:10px}
.ex #soro-blog .soro-blog-card-title{font-family:var(--disp);font-weight:600;font-size:clamp(18px,1.5vw,21px);line-height:1.2;letter-spacing:-.025em;color:var(--ink)!important}
.ex #soro-blog .soro-blog-card-excerpt{color:var(--mu)!important;font-size:15px}
.ex #soro-blog .soro-blog-card-date{color:var(--mu)!important;font-size:13px;opacity:.8}
@media (min-width:768px){
  .ex #soro-blog .soro-blog-card:first-child .soro-blog-card-title{font-size:clamp(26px,2.4vw,36px);letter-spacing:-.035em}
  .ex #soro-blog .soro-blog-card:first-child .soro-blog-card-content{padding:clamp(24px,3vw,44px)}
}
/* Soro post view text */
.ex #soro-blog .soro-blog-article-title{font-family:var(--disp);letter-spacing:-.035em;color:var(--ink)!important}
.ex #soro-blog .soro-blog-article-content{font-size:17.5px;line-height:1.75}
.ex #soro-blog .soro-blog-article-content h2,.ex #soro-blog .soro-blog-article-content h3{font-family:var(--disp);letter-spacing:-.03em}
.ex #soro-blog .soro-blog-back{border:0!important;background:var(--g1);border-radius:999px;padding:8px 16px}