/* ==========================================================================
   GABRIELIA ADS — Pages: generics / light-theme overrides / bands / print
   ========================================================================== */

/* ---------- 通用栅格 ---------- */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,32px)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,32px)}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,28px)}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(14px,1.8vw,26px)}
@media(max-width:1000px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:880px){.grid-2,.grid-3{grid-template-columns:minmax(0,1fr)}}

/* ---------- 带序号的章节头 ---------- */
.idxsec{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,2.6vw,48px);
  padding-top:clamp(20px,2.4vw,34px);border-top:1px solid var(--line)}
.idxsec__n{font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;color:var(--gold);padding-top:.9em;white-space:nowrap}
@media(max-width:760px){.idxsec{grid-template-columns:minmax(0,1fr);gap:12px}.idxsec__n{padding-top:0}}

/* ---------- 编辑式引言（左栏粘性） ---------- */
.editorial{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.55fr);gap:clamp(24px,4vw,80px);align-items:start}
.editorial__aside{position:sticky;top:calc(var(--nav-h) + 28px)}
.editorial__aside .eyebrow{margin-bottom:18px}
.editorial__body>*+*{margin-top:clamp(18px,2.2vw,30px)}
.editorial__body p{font-size:clamp(1rem,1.28vw,1.16rem);color:var(--bone-2);line-height:1.76}
.editorial__body h3{margin-top:clamp(26px,3vw,44px)}
.editorial__body strong{color:var(--bone);font-weight:600}
.editorial__body em{font-style:normal;color:var(--gold-lt)}
@media(max-width:940px){.editorial{grid-template-columns:minmax(0,1fr)}.editorial__aside{position:static}}

/* ---------- 全幅图带 ---------- */
.band{position:relative;overflow:hidden;isolation:isolate;
  min-height:clamp(300px,44vw,600px);display:flex;align-items:center}
.band__media{position:absolute;inset:0;z-index:-2}
.band__media img{width:100%;height:100%;object-fit:cover;object-position:center 55%;
  filter:saturate(.72) contrast(1.1) brightness(.72)}
.band__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(11,11,12,.94) 0%,rgba(11,11,12,.62) 42%,rgba(11,11,12,.24) 100%)}
.band__in{width:100%;max-width:var(--max);margin-inline:auto;padding:clamp(48px,6vw,100px) var(--pad-x)}
.band h2{max-width:17ch}

/* ---------- 大号编号列表（用于五类预算/四类节奏） ---------- */
.numlist{border-top:1px solid var(--line)}
.numlist__i{display:grid;grid-template-columns:clamp(48px,6vw,92px) minmax(0,1fr);gap:clamp(14px,2vw,32px);
  padding:clamp(18px,2.2vw,30px) 0;border-bottom:1px solid var(--line);transition:padding-left .45s var(--ease)}
.numlist__i:hover{padding-left:10px}
.numlist__n{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;color:var(--gold);padding-top:.35em}
.numlist__i h3{font-size:clamp(1.05rem,1.55vw,1.35rem);margin-bottom:8px}
.numlist__i p{font-size:14.6px;color:var(--bone-2);line-height:1.66}
.numlist__i p+p{margin-top:9px}

/* ---------- 媒体格式清单 ---------- */
.formats{display:flex;flex-wrap:wrap;gap:6px 8px;margin-top:2px}
.formats li{font-size:13px;color:var(--bone-2);border:1px solid var(--line);padding:6px 11px;border-radius:var(--r);
  transition:all .35s var(--ease)}
.formats li:hover{border-color:rgba(201,162,74,.45);color:var(--gold-lt);background:var(--gold-dim)}

/* ---------- 灯箱 ---------- */
.lb{position:fixed;inset:0;z-index:9500;background:rgba(6,6,7,.96);backdrop-filter:blur(8px);
  display:none;place-items:center;padding:clamp(16px,3vw,48px)}
.lb.is-on{display:grid}
.lb img{max-width:100%;max-height:88svh;object-fit:contain;border:1px solid var(--line)}
.lb__x{position:absolute;top:20px;right:24px;width:44px;height:44px;border:1px solid var(--line-2);border-radius:99px;
  display:grid;place-items:center;transition:all .35s var(--ease)}
.lb__x:hover{border-color:var(--gold);color:var(--gold);transform:rotate(90deg)}
.lb__x svg{width:16px;height:16px}

/* ---------- 版权细字 ---------- */
.legal{font-size:12.5px;color:var(--muted-2);line-height:1.66}
.legal a{color:var(--muted);border-bottom:1px solid var(--line-2)}
.legal a:hover{color:var(--gold)}

/* ==========================================================================
   明色主题下的组件覆盖
   ========================================================================== */
.theme--light .svc,.theme--light .case,.theme--light .net,.theme--light .model{
  background:#fff;border-color:rgba(11,11,12,.12)}
.theme--light .svc:hover,.theme--light .case:hover,.theme--light .net:hover,.theme--light .model:hover{
  border-color:rgba(11,11,12,.34)}
.theme--light .svc__body p,.theme--light .svc__out dd,.theme--light .net__body p,
.theme--light .case__body p,.theme--light .model dd,.theme--light .model>p{color:#4A4739}
.theme--light .svc__out dt,.theme--light .svc__out dt{color:#7A7568}
.theme--light .net__body>p{color:#7A7568}
.theme--light .case__meta div{color:#7A7568}
.theme--light .case__meta b{color:#8A6B1F}
.theme--light .svc__media::after{background:linear-gradient(180deg,rgba(11,11,12,.34) 0%,rgba(11,11,12,.66) 66%,#fff 100%)}
.theme--light .case__media::after{background:linear-gradient(180deg,rgba(11,11,12,.2) 20%,rgba(11,11,12,.78) 100%)}
.theme--light .net__media::after{background:linear-gradient(180deg,rgba(11,11,12,0) 45%,rgba(11,11,12,.32))}
.theme--light .svc:hover .svc__media img,.theme--light .net:hover .net__media img,
.theme--light .case:hover .case__media img{filter:saturate(1.02) contrast(1.02) brightness(1.02)}

.theme--light .commit,.theme--light .issues,.theme--light .pairs,.theme--light .datapts{background:rgba(11,11,12,.14);border-color:rgba(11,11,12,.14)}
.theme--light .commit__i,.theme--light .issue,.theme--light .pair,.theme--light .datapt{background:var(--bone)}
.theme--light .commit__i:hover,.theme--light .pair:hover{background:#fff}
.theme--light .commit__n{-webkit-text-stroke-color:rgba(11,11,12,.34)}
.theme--light .commit__i p,.theme--light .issue p,.theme--light .datapt p,.theme--light .pair__pos{color:#3A382F}
.theme--light .pair__neg{color:rgba(11,11,12,.42)}
.theme--light .datapt__v{color:#8A6B1F}
.theme--light .datapt__src{color:rgba(11,11,12,.44);border-color:rgba(11,11,12,.13)}
.theme--light .issue__ask{color:#7A7568;border-color:rgba(11,11,12,.13)}
.theme--light .issue__kw{color:#8A6B1F}

.theme--light .gloss{background:rgba(11,11,12,.14);border-color:rgba(11,11,12,.14)}
.theme--light .gloss__i{background:var(--bone)}
.theme--light .gloss__i dt{color:var(--ink)}
.theme--light .gloss__i dd{color:#8A6B1F}
.theme--light .tag{color:#4A4739;border-color:rgba(11,11,12,.2)}
.theme--light .tag--gold{color:#7A5C14;border-color:rgba(138,107,31,.34);background:rgba(138,107,31,.09)}
.theme--light .note{border-color:rgba(138,107,31,.32);background:linear-gradient(150deg,rgba(138,107,31,.07),transparent 70%)}
.theme--light .note p{color:#3A382F}
.theme--light .crosslist li,.theme--light .ticklist li{color:#3A382F}
.theme--light .chk__i{color:#3A382F}
.theme--light .chk__box{border-color:rgba(11,11,12,.3)}
.theme--light .formats li{color:#3A382F;border-color:rgba(11,11,12,.16)}
.theme--light .formats li:hover{background:rgba(138,107,31,.09);color:#7A5C14;border-color:rgba(138,107,31,.4)}
.theme--light .numlist,.theme--light .numlist__i,.theme--light .step{border-color:rgba(11,11,12,.13)}
.theme--light .numlist__i p,.theme--light .step__d,.theme--light .step__t p{color:#3A382F}
.theme--light .numlist__i h3,.theme--light .step__t h3{color:var(--ink)}
.theme--light .step__t p{color:#7A7568}
.theme--light .step::before{background:var(--bone)}
.theme--light .step:hover{background:rgba(11,11,12,.028)}
.theme--light .steps::before{background:rgba(11,11,12,.13)}
.theme--light .acc,.theme--light .acc__i{border-color:rgba(11,11,12,.13)}
.theme--light .acc__q span{color:var(--ink)}
.theme--light .acc__a>div{color:#3A382F}
.theme--light .creds{background:rgba(11,11,12,.14);border-color:rgba(11,11,12,.14)}
.theme--light .cred{background:var(--bone)}
.theme--light .cred p{color:#7A7568}
.theme--light .cinfo li{border-color:rgba(11,11,12,.13)}
.theme--light .cinfo dd{color:var(--ink)}
.theme--light .field label{color:#7A7568}
.theme--light .field input,.theme--light .field select,.theme--light .field textarea{border-color:rgba(11,11,12,.2);color:var(--ink)}
.theme--light .field input:focus,.theme--light .field select:focus,.theme--light .field textarea:focus{
  background:rgba(138,107,31,.05);border-color:#8A6B1F}
.theme--light .figure{border-color:rgba(11,11,12,.16)}
.theme--light .marquee{background:var(--ink);border-color:transparent}
.theme--light .tlink:hover{color:#8A6B1F}
.theme--light .eyebrow{color:#8A6B1F}
.theme--light .eyebrow::before{background:#8A6B1F}
.theme--light .pq footer{color:#7A7568}
.theme--light .mosaic>*{background:rgba(11,11,12,.1)}

/* ==========================================================================
   打印
   ========================================================================== */
@media print{
  .grain,.progress-bar,.nav,.mnav,.scroll-cue,.side-label,.marquee,.lb,.ctaband{display:none!important}
  body{background:#fff;color:#000}
  .section{padding-block:20px}
  [data-reveal]{opacity:1!important;transform:none!important;clip-path:none!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9px;color:#666}
}

/* ==========================================================================
   收尾响应式
   ========================================================================== */
@media(max-width:1200px){
  .hairlines{display:none}
}
@media(max-width:900px){
  .section{padding-block:clamp(56px,9vw,90px)}
  .sect-head{margin-bottom:clamp(26px,5vw,40px)}
  .hero__lede{max-width:none}
}
@media(max-width:600px){
  .btn{--bh:48px}
  .btn--lg{--bh:52px}
  .grid-4{grid-template-columns:minmax(0,1fr)}
  .creds{grid-template-columns:minmax(0,1fr)}
}

/* ---------- 404 / 空状态链接网格 ---------- */
.nolist{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.nolist a{background:var(--ink-2);padding:clamp(20px,2.4vw,30px);display:flex;flex-direction:column;gap:10px;
  transition:background .35s var(--ease),padding-left .4s var(--ease)}
.nolist a:hover{background:var(--ink-3);padding-left:calc(clamp(20px,2.4vw,30px) + 8px)}
.nolist .u-mono{color:var(--gold)}
.nolist b{font-size:17px;font-weight:700;letter-spacing:-.014em}
.nolist span{font-size:13.5px;color:var(--muted);line-height:1.5}
.theme--light .nolist a{background:var(--bone)}
.theme--light .nolist a:hover{background:#EBE7DD}

/* ---------- 无照片的内页 hero（404 等）：用光晕代替照片，避免加载大图 ---------- */
.phero--bare{background:
  radial-gradient(1100px 520px at 78% 6%,rgba(201,162,74,.15),transparent 62%),
  radial-gradient(760px 430px at 4% 98%,rgba(226,69,47,.075),transparent 60%),
  var(--ink)}
.phero--bare .phero__scrim{background:linear-gradient(180deg,rgba(11,11,12,.42) 0%,rgba(11,11,12,.10) 42%,rgba(11,11,12,.92) 100%)}


/* ============================================================
   溢出防护
   实测：窄视口下 .ticklist / .tbl 会把文档撑出横向滚动（390px 下 10–38px）。
   表格已由 .tblwrap 包裹滚动；这里给所有会被内容撑宽的块级组件设上限。
   ============================================================ */
.ticklist,.crosslist,.numlist,.steps,.commit,.datapts,.gaps,.logowall,.net-grid,.svc-grid{
  max-width:100%;min-width:0;
}
.ticklist li,.crosslist li,.numlist__i,.step{min-width:0}
.tblwrap{max-width:100%}
.tblwrap>table{display:block}
.tbl th,.tbl td{overflow-wrap:anywhere}


/* ============================================================
   .ticklist 根因
   实测 390px 视口下该组件比视口宽 10px（被 overflow-x:clip 遮住而已）。
   成因是 flex 行内出现不可断的长串（英文短语、URL、长公司名）时无法换行，
   min-width:0 缺位导致 flex 项拒绝收缩。这里把两侧都锁死。
   ============================================================ */
.ticklist{width:100%;max-width:100%}
.ticklist li{min-width:0;flex-wrap:wrap}
.ticklist li>*{min-width:0}
.ticklist li span,.ticklist li div,.ticklist li p{
  flex:1 1 auto;min-width:0;overflow-wrap:anywhere;word-break:break-word;
}
.crosslist li,.numlist__i,.step{overflow-wrap:anywhere}


/* ============================================================
   .ticklist 30px 盒子偏移 —— 钝刀中和
   实测（390px 视口）：父元素内容盒 20→370，而 ul.ticklist 盒子在 50→400，
   宽高一致、padding/margin 计算值均为 0。
   我此前两次「按猜测的原因去修」都没修掉（长词换行、min-width:0）。
   既然已定位到「整块右移 30px」，就一次性中和全部位移来源，
   不再依赖推断具体是哪一条属性。检查清单组件用 static + 零位移是安全的。
   ============================================================ */
.ticklist{
  position:static;
  left:auto;right:auto;top:auto;bottom:auto;
  transform:none;
  text-indent:0;
  margin-inline:0;
  padding-inline:0;
  inset-inline-start:auto;
  width:100%;
}
.ticklist li{margin-inline:0;padding-inline:0}

/* ==========================================================================
   品牌墙（brandGrid）：logo 卡 + 一句话
   用于 brands-consumer / brands-digital。logo 图已烘好底色（浅/深），
   卡内不叠加滤镜，避免白底图在深色卡上被压暗。
   ========================================================================== */
.bgrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(228px,1fr));
  gap:18px;
  margin-top:clamp(22px,3vw,40px);
}
.bgrid__count{margin:14px 0 0}

.bcard{
  display:flex;
  flex-direction:column;
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.bcard__logo{
  aspect-ratio:2/1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.bcard__logo img{display:block;width:100%;height:100%;object-fit:contain}

/* 浅底 logo：白底卡，压一条暗描边，避免白色块在深色页里糊成一片 */
.bcard__logo--light{background:#fff;border-bottom:1px solid rgba(11,11,12,.12)}
.bcard__logo--dark{background:var(--ink-3);border-bottom:1px solid var(--line)}

.bcard__body{padding:14px 16px 18px}
.bcard__name{
  margin:0;
  font-family:var(--f-display);
  font-size:15px;
  font-weight:600;
  line-height:1.35;
  letter-spacing:-.01em;
  text-transform:none;
  color:var(--bone);
}
.bcard__line{
  margin:8px 0 0;
  font-size:12.5px;
  line-height:1.6;
  color:var(--muted);
}

/* ==========================================================================
   品牌墙：折叠展开的完整名单（To see the full list）
   原生 <details>，零 JS。数据为空时模板整块不渲染，页面上不会留空壳。
   ========================================================================== */
.wallmore{
  margin-top:clamp(18px,2.4vw,30px);
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.wallmore__sum{
  display:flex;
  align-items:center;
  gap:12px;
  padding:15px 20px;
  cursor:pointer;
  list-style:none;
  font-family:var(--f-display);
  font-size:14px;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--bone);
}
.wallmore__sum::-webkit-details-marker{display:none}
.wallmore__sum:hover{background:var(--ink-3)}
.wallmore__label{flex:1 1 auto}
.wallmore__count{flex:0 0 auto;font-size:11px;letter-spacing:.06em;color:var(--muted)}
.wallmore__chev{
  flex:0 0 auto;
  width:8px;
  height:8px;
  margin-right:4px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .18s ease;
}
.wallmore[open] .wallmore__chev{transform:rotate(-135deg) translate(-2px,-2px)}
.wallmore__panel{
  padding:0 20px 20px;
  border-top:1px solid var(--line);
}
/* 展开区直接复用 .bgrid / .bcard，与上方预览卡片完全同款（logo + 名称 + 一句话）。
   唯一区别：这里的卡片不带 data-reveal —— [data-reveal] 默认 opacity:0，要靠
   IntersectionObserver 加 .is-in 才显形；折叠状态下元素是 display:none，观察器不会触发，
   展开后会得到一整片空白。 */
.wallmore__panel .bgrid{margin-top:18px}
.wallmore__panel .bcard__line{color:var(--muted)}
.wallmore__note{margin:16px 0 0;font-size:11.5px;color:var(--muted)}
/* 不执行 JS 时的兜底：面板里 <noscript> 的纯文本完整名单（与卡片版同一份数据、同一个顺序）。
   有脚本时浏览器不渲染 <noscript> 的内容，所以这些规则只在抓取器和关闭 JS 的环境里起作用。 */
.wallmore__plain{
  margin:18px 0 0;
  padding:0;
  list-style:none;
  columns:3;
  column-gap:24px;
  font-size:12.5px;
  line-height:1.95;
  color:var(--muted);
}
.wallmore__plain li{break-inside:avoid}
@media (max-width:760px){.wallmore__plain{columns:2;font-size:12px}}

@media (max-width:760px){
  .bgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .bcard__body{padding:11px 12px 14px}
  .bcard__name{font-size:13px}
  .bcard__line{font-size:11.5px}
  .wallmore__sum{padding:13px 14px;font-size:13px}
  .wallmore__panel{padding:0 14px 16px}
  .wallmore__panel .bgrid{margin-top:14px}
}

/* 首页专属：主标题缩小档位
   基准 .h-hero = clamp(2.5rem, 8.6vw, 8.6rem)
   一档 = 7.4vw（-1.2vw）；本次再降两档 → 5vw（共 -3.6vw）
   下限只降一档（2.5rem→2rem）：手机上 1.75rem 的标题过小，故保留 32px */
body[data-page="index.html"] .h-hero{font-size:clamp(2rem,5vw,5rem)}

/* 品牌墙页 / 合作页：主标题同样缩小。
   这两页原用基准值 clamp(2.5rem, 8.6vw, 8.6rem)，一档 = 1.2vw；
   本次降两档 → 6.2vw（8.6 - 1.2 × 2）。
   下限同样只降到 2rem：手机上 32px 是底线。 */
body[data-page="brands.html"] .h-hero,
body[data-page="partners.html"] .h-hero{font-size:clamp(2rem,6.2vw,6.2rem)}

/* ============================================================
   装饰插画卡 .svc--plain（区块级开关，由 JSON 的 media_plain 触发）
   用途：竖版装饰插画需要原色完整呈现，不做压暗/去饱和，也不加底部渐变罩。
   放在文件末尾，确保与 .theme--light 的同权重规则相遇时后者不覆盖。
   ============================================================ */
.svc--plain .svc__media{background:transparent}
.svc--plain .svc__media img,
.svc--plain:hover .svc__media img{filter:none}
.svc--plain .svc__media::after,
.theme--light .svc--plain .svc__media::after{display:none}

/* ==========================================================================
   四部分品牌墙：固定 5 列（2 行 x 5）+ 展开后的「Show less」
   --------------------------------------------------------------------------
   DOM 里 <summary> 必须是 <details> 的第一个子元素（否则浏览器会自己造一个默认
   折叠控件），但视觉上要它落在展开列表的下方 —— 所以用 flex + order 调视觉顺序，
   DOM 顺序不动，无障碍语义不受影响。
   展开后把控制条 position:sticky 钉在视口底部，这样滚到列表任何位置都能一手收起。
   ⚠️ 父级不能有 overflow:hidden，否则会新建滚动容器、sticky 就失效了；
      改用 overflow:clip（同样裁圆角，但不新建滚动容器）。不认识 clip 的老浏览器
      保留 hidden 兜底，退化成一个普通的底部条，不影响功能。
   ========================================================================== */
.bgrid--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.wallmore{display:flex;flex-direction:column;overflow:hidden;overflow:clip}
.wallmore__sum{order:2}
.wallmore__panel{order:1}
.wallmore:not([open]) > .wallmore__panel{display:none}
.wallmore__label--less{display:none}
.wallmore[open] .wallmore__label--more{display:none}
.wallmore[open] .wallmore__label--less{display:inline}
.wallmore[open] .wallmore__sum{
  position:sticky;
  bottom:0;
  z-index:6;
  border-top:1px solid var(--line);
  box-shadow:0 -20px 32px -20px rgba(0,0,0,.6);
}
@media (max-width:1180px){
  .bgrid--5{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:900px){
  .bgrid--5{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  .bgrid--5{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ============================================================
   .figure--plain（split 区块的装饰插画）
   默认 .figure img 带 saturate(.76) contrast(1.08) brightness(.88) 压暗去饱和，
   用于照片融入深色界面；装饰插画需原色完整呈现，故整层去掉。
   由 JSON 的 image_plain 触发（blocks.html 的 blk_split）。
   ============================================================ */
.figure--plain{background:transparent;border-color:transparent}
.figure--plain img{filter:none}
.theme--light .figure--plain{border-color:transparent}

/* ============================================================
   单栏宽版正文 .prosewide（由区块级开关 b.layout == 'full' 触发）
   用途：整段讲述型内容、右栏没有配图或清单时，正文只占一栏会让
   右半边整块空着。这里限制阅读宽度（74ch 约合中文 37 字/行），
   长段落读起来不累。
   ============================================================ */
.prosewide{max-width:74ch}
@media(max-width:720px){.prosewide{max-width:100%}}

/* 俄语文本平均比英语长 15–25%，长词在 375px 窄屏里会顶出容器。
   只在 ru 下允许断词，英语/其他语言排版不受影响。 */
html[lang="ru"] p,
html[lang="ru"] h1,
html[lang="ru"] h2,
html[lang="ru"] h3,
html[lang="ru"] h4,
html[lang="ru"] li,
html[lang="ru"] td,
html[lang="ru"] th {
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* 乌兹别克语是黏着语，词比英语更长（memorandumimizni、TAYINLANMOQDA 一类），
   窄屏上同样会顶出容器；按钮与链接文字也在实测里溢出，一并纳入。
   只在 uz 下生效，英语排版不受影响。 */
html[lang="uz"] p,
html[lang="uz"] h1,
html[lang="uz"] h2,
html[lang="uz"] h3,
html[lang="uz"] h4,
html[lang="uz"] li,
html[lang="uz"] td,
html[lang="uz"] th,
html[lang="uz"] a,
html[lang="uz"] .btn,
html[lang="uz"] .u-mono {
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* .btn 默认 white-space:nowrap，乌语 CTA 文案在 320px 级窄屏会顶出按钮框 7px。
   只在窄屏放开换行；375px 及以上文案本来放得下，视觉不变。 */
@media(max-width:400px) {
  html[lang="uz"] .btn {
    white-space: normal;
    text-align: center;
  }
}

/* 哈萨克语同为黏着语，长词行为与乌兹别克语接近，先按同一口径铺规则；
   译文落地后会再实测（320/375/1440 × 各页），届时按真实数据收紧阈值。 */
html[lang="kk"] p,
html[lang="kk"] h1,
html[lang="kk"] h2,
html[lang="kk"] h3,
html[lang="kk"] h4,
html[lang="kk"] li,
html[lang="kk"] td,
html[lang="kk"] th,
html[lang="kk"] a,
html[lang="kk"] .btn,
html[lang="kk"] .u-mono {
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

@media(max-width:400px) {
  html[lang="kk"] .btn {
    white-space: normal;
    text-align: center;
  }
}