/* ==========================================================================
   GABRIEL ADS — Design Tokens / Reset / Typography
   视觉概念：跨境之桥。中国预算 → 中亚媒体。
   语气：编辑感、高对比、排版驱动、规格书式的精确。
   ========================================================================== */

/* 字体表在 base.html 里用 <link rel="stylesheet"> 引入，不走样式表内联引入：
   串联引入会让浏览器先把本文件下载并解析完，才会发现字体表 —— 阻塞首屏。
   多语种包含西里尔 / 哈萨克 / 乌兹别克字形，按 unicode-range 按需下载，
   纯英文页面不会请求任何一个西里尔子集。 */

/* ---------- 1. Tokens ---------- */
:root{
  /* 墨色系 */
  --ink:#0B0B0C;
  --ink-2:#111114;
  --ink-3:#17171C;
  --ink-4:#1F1F26;
  --line:rgba(244,241,234,.10);
  --line-2:rgba(244,241,234,.18);

  /* 骨白系 */
  --bone:#F4F1EA;
  --bone-2:#DCD7CB;
  --muted:#8C8779;
  --muted-2:#6B665C;

  /* 强调：丝路金 + 信号红 */
  --gold:#C9A24A;
  --gold-lt:#E6CB86;
  --gold-dim:rgba(201,162,74,.16);
  --signal:#E2452F;

  /* 语义 */
  --bg:var(--ink);
  --fg:var(--bone);
  --fg-muted:var(--muted);

  /* 字体
     Archivo 无西里尔字形 → 紧随其后的 Onest 承接所有西里尔字符（俄/哈/乌兹别克西里尔）。
     等宽用 IBM Plex Mono：它是少数同时覆盖 西里尔+哈萨克+₸ 坚戈符号 且 带 U+02BB 的字体，
     因此一种等宽字体就能服务全部四种语言，不会出现跨语言版本标签字体不一致。 */
  --f-display:'Archivo','Onest',"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC",system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,"SFMono-Regular",Consolas,monospace;
  /* 编辑性衬线：Cormorant Garamond 400 正体 + 400 斜体。
     它的小写字母区（x-height）很小、升部很长 —— 同字号下视觉体量比 Archivo 小约 15%，
     所以凡是把 sans 换成 serif 的地方都必须同步放大字号，否则会看起来"缩水"。
     使用场合仅限大字号（声明轮播的强调词、引言、专有名词签名），不用在小字号。 */
  --f-serif:'Cormorant Garamond',Georgia,'Times New Roman','Songti SC','Source Han Serif SC',serif;

  /* 尺度 */
  --pad-x:clamp(20px,4vw,64px);
  --max:1560px;
  --max-read:66ch;
  --sect-y:clamp(72px,9vw,168px);

  --r:3px;
  --r-lg:6px;

  /* 动效 */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
  --dur:.7s;

  --nav-h:74px;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--f-display);
  font-size:clamp(15px,.42vw + 13.6px,17px);
  line-height:1.62;
  font-weight:400;
  font-variation-settings:'wdth' 100;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}

::selection{background:var(--gold);color:var(--ink)}

/* 滚动条 */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:#2C2C33;border:2px solid var(--ink);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}

/* ---------- 3. 排版 ---------- */
.u-display,
h1,h2{
  font-family:var(--f-display);
  font-weight:800;
  font-variation-settings:'wdth' 100,'wght' 800;
  line-height:.92;
  letter-spacing:-.032em;
  text-wrap:balance;
}
h3,h4{font-family:var(--f-display);font-weight:700;font-variation-settings:'wdth' 100,'wght' 700;line-height:1.14;letter-spacing:-.018em}

.h-hero{
  font-size:clamp(2.5rem,8.6vw,8.6rem);
  font-weight:900;
  font-variation-settings:'wdth' 96,'wght' 900;
  line-height:.86;
  letter-spacing:-.038em;
}
.h-xl{font-size:clamp(2rem,5.4vw,4.6rem);line-height:.95;letter-spacing:-.03em}
.h-lg{font-size:clamp(1.6rem,3.2vw,2.9rem);line-height:1.02;letter-spacing:-.026em}
.h-md{font-size:clamp(1.22rem,1.75vw,1.6rem);line-height:1.18;letter-spacing:-.016em}
.h-sm{font-size:clamp(1.02rem,1.15vw,1.14rem);font-weight:700;line-height:1.3;letter-spacing:-.008em}

.u-caps{text-transform:uppercase}
.u-mono{
  font-family:var(--f-mono);
  font-size:clamp(10.5px,.72vw,12px);
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1.4;
  font-variation-settings:normal;
}
.u-num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* 编辑性衬线工具类
   --f-serif 的 x-height 小，1em 会比 Archivo 显得小；工具类默认给 1.06em 补偿，
   大标题处由具体组件再放大（见 layout.css 的声明轮播 / components.css 的引言块）。 */
.u-serif{
  font-family:var(--f-serif);
  font-weight:400;font-style:normal;
  font-variation-settings:normal;
  font-size:1.06em;line-height:1.08;letter-spacing:.004em;
}
.u-serif-em{
  font-family:var(--f-serif);
  font-weight:400;font-style:italic;
  font-variation-settings:normal;
  font-size:1.06em;letter-spacing:.004em;
}

.lede{
  font-size:clamp(1.02rem,1.15vw,1.28rem);
  line-height:1.66;
  color:var(--bone-2);
  max-width:var(--max-read);
  font-weight:400;
}
.u-body{color:var(--bone-2);max-width:var(--max-read)}
.u-muted{color:var(--muted)}
.u-gold{color:var(--gold)}
.u-tight{max-width:46ch}

/* 中文微调：拉丁-中日韩混排时的字距与行高 */
html[lang="zh"] .h-hero,html[lang="zh"] .h-xl,html[lang="zh"] .h-lg,
html[lang="zh"] h1,html[lang="zh"] h2{letter-spacing:-.012em;line-height:1.02}
html[lang="zh"] .h-hero{line-height:.98}
html[lang="zh"] .u-mono{letter-spacing:.06em;text-transform:none}
html[lang="zh"] .u-caps{text-transform:none}

/* 西里尔语系（俄 / 哈 / 乌兹别克 / 吉尔吉斯 …）
   整站切换到 Onest。原因：如果沿用 Archivo 打头，一行里拉丁词会用 Archivo、
   西里尔词会用 Onest —— 同一句话里出现两种字面，标题会散。
   整体切到 Onest 后，拉丁与西里尔由同一套字面驱动，混排是干净的。 */
html:is([lang="ru"],[lang="kk"],[lang="ky"],[lang="uz"],[lang="tk"],[lang="tg"],[lang="az"],
        [lang="uk"],[lang="bg"],[lang="sr"],[lang="mn"],[lang="be"],[lang="mk"]){
  --f-display:'Onest',"PingFang SC","Microsoft YaHei","Source Han Sans SC",system-ui,sans-serif;
}
/* 西里尔字面普遍比拉丁宽，且哈萨克语有 Һ І Ң 这类高瘦字形 —— 收紧要更保守，行高给足 */
html:is([lang="ru"],[lang="kk"],[lang="ky"],[lang="uz"],[lang="tk"],[lang="tg"],[lang="az"],[lang="uk"],[lang="bg"],[lang="sr"],[lang="mn"]) .h-hero{
  letter-spacing:-.024em;line-height:.94;
}
html:is([lang="ru"],[lang="kk"],[lang="ky"],[lang="uz"],[lang="tk"],[lang="tg"],[lang="az"],[lang="uk"],[lang="bg"],[lang="sr"],[lang="mn"]) :is(h1,h2,.h-xl,.h-lg){
  letter-spacing:-.02em;line-height:1.06;
}
html:is([lang="ru"],[lang="kk"],[lang="uz"]) .u-mono{letter-spacing:.16em}

/* ---------- 4. 布局原语 ---------- */
.u-container{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad-x)}
.u-container--wide{max-width:1920px}
.u-container--narrow{max-width:1040px}

.section{position:relative;padding-block:var(--sect-y)}
.section--tight{padding-block:clamp(48px,5.4vw,96px)}
.section--flush{padding-block:0}
.theme--light{background:var(--bone);color:var(--ink);--fg:var(--ink);--fg-muted:#6E6A5F;--line:rgba(11,11,12,.13);--line-2:rgba(11,11,12,.24);--bone-2:#3A382F;--muted:#6E6A5F}
.theme--light .u-muted{color:#6E6A5F}
.theme--light ::selection{background:var(--ink);color:var(--bone)}

.u-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(16px,2vw,32px)}
.col-12{grid-column:span 12}.col-8{grid-column:span 8}.col-7{grid-column:span 7}
.col-6{grid-column:span 6}.col-5{grid-column:span 5}.col-4{grid-column:span 4}
.col-3{grid-column:span 3}

/* ---------- 5. 眉标 / 分区标记 ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-mono);font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
}
html[lang="zh"] .eyebrow{letter-spacing:.1em;text-transform:none;font-size:12px}
.eyebrow::before{content:"";width:6px;height:6px;background:var(--gold);flex:none;border-radius:1px}
.eyebrow--plain::before{display:none}

.sect-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:clamp(20px,3vw,56px);margin-bottom:clamp(32px,4.4vw,72px)}
.sect-head__l{max-width:min(920px,66ch)}
.sect-head .eyebrow{margin-bottom:clamp(14px,1.6vw,22px)}
.sect-idx{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;
  color:var(--muted);text-transform:uppercase;white-space:nowrap;
}

/* ---------- 6. 分割线 / 细网格 ---------- */
.rule{height:1px;background:var(--line);border:0;width:100%}
.rule--accent{height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
.hairlines{position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:calc(100% / 4) 100%;opacity:.55}
@media(max-width:900px){.hairlines{display:none}}

/* ---------- 7. 颗粒质感 ---------- */
.grain{position:fixed;inset:-50%;pointer-events:none;z-index:9998;opacity:.032;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 7s steps(6) infinite}
@keyframes grainShift{
  0%{transform:translate(0,0)}16%{transform:translate(-3%,-2%)}33%{transform:translate(2%,-3%)}
  50%{transform:translate(-2%,3%)}66%{transform:translate(3%,2%)}83%{transform:translate(-3%,1%)}100%{transform:translate(0,0)}
}
@media(max-width:700px){.grain{opacity:.024}}

/* ---------- 8. 滚动揭示 ---------- */
[data-reveal]{opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--ease),transform .9s var(--ease);
  transition-delay:var(--d,0ms)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal="mask"]{opacity:1;transform:none;
  clip-path:inset(0 0 100% 0);transition:clip-path 1s var(--ease);transition-delay:var(--d,0ms)}
[data-reveal="mask"].is-in{clip-path:inset(0 0 0 0)}
[data-reveal="left"]{transform:translateX(-30px)}
[data-reveal="right"]{transform:translateX(30px)}
[data-reveal="scale"]{transform:scale(.96);opacity:0}
[data-reveal="scale"].is-in{transform:none;opacity:1}
@media(prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important}
  html{scroll-behavior:auto}
}

/* ---------- 9. 通用工具 ---------- */
.u-hide{display:none!important}
.u-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.u-flex{display:flex}.u-between{justify-content:space-between}.u-center{align-items:center}
.u-gap{gap:clamp(16px,2vw,32px)}
.u-stack>*+*{margin-top:clamp(14px,1.6vw,22px)}
.u-mt{margin-top:clamp(24px,3vw,48px)}
.u-mt-s{margin-top:clamp(14px,1.6vw,22px)}
.u-mt-l{margin-top:clamp(40px,5vw,80px)}
.u-nowrap{white-space:nowrap}
.u-rel{position:relative}