/* ============================================================
   Clash客户端官网 · 「日光拓扑海报」设计系统 —— base.css
   设计令牌 / Reset / 排版 / 布局 / 按钮 / 页头 / 页脚 / 面板 / Reveal / 响应式
   直角为主,仅按钮 2px 圆角;零投影零发光零玻璃;分区靠裸露基线与细边框。
   ============================================================ */

/* ---------- 1. 设计令牌 ---------- */
:root{
  /* 纸面与面板 */
  --paper:#F8F3E8;            /* 暖白纸面 */
  --card:#FDFAF1;             /* 浅沙面板(一级) */
  --card-2:#F0E7D2;           /* 浅沙面板(二级) */
  --rule:#D8CDB2;             /* 细边框 / 分割线 */
  --rule-faint:rgba(216,205,178,.5); /* 裸露基线 */

  /* 油墨 */
  --ink:#1C2A5E;              /* 主文字 */
  --ink-soft:#5D689A;         /* 次要文字 */
  --cobalt:#1E43C8;           /* 主强调:路径线/描边/结构 */
  --cobalt-deep:#14309A;      /* 主强调深色变体 */
  --cobalt-tint:rgba(30,67,200,.16); /* 高亮块 / hover 底 */
  --vermilion:#D8331B;        /* 朱红:仅关键转折/版本徽标/主下载按钮 */
  --vermilion-half:rgba(216,51,27,.45); /* 套印错位副线 */
  --vermilion-tint:rgba(216,51,27,.1);

  /* 语义色 */
  --ok:#1E7A46;
  --warn:#B87500;
  --danger:#D8331B;

  /* 字体 */
  --ft-display:'Noto Sans SC','Inter','PingFang SC','Microsoft YaHei',sans-serif;
  --ft-body:'Inter','Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --ft-mono:'JetBrains Mono','SFMono-Regular',Consolas,'Liberation Mono',monospace;

  /* 尺度 */
  --r-btn:2px;                       /* 全站唯一圆角 */
  --gutter:clamp(16px,4.5vw,64px);   /* 版心左右留白,窄屏 ≥16px */
  --wrap-max:1240px;
  --mast-h:67px;                     /* 页头高度 */
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{background:var(--paper)}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}

body{
  font-family:var(--ft-body);
  font-size:15.5px;
  line-height:1.75;
  color:var(--ink);
  background:var(--paper);
  -webkit-text-size-adjust:100%;
}

::selection{background:var(--cobalt);color:var(--card)}

a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0}
img{max-width:100%;height:auto;display:inline-block}
svg{max-width:100%}
fieldset{border:0}
table{border-collapse:collapse}

:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}

/* 汉堡菜单展开时锁死背景滚动 */
html.nav-open{overflow:hidden}

/* 装饰绝对定位元素防伸出视口 */
main{overflow-x:clip}
@supports not (overflow-x:clip){
  main{overflow-x:hidden}
}

/* ---------- 3. 排版 ---------- */
h1,h2,h3,h4{
  font-family:var(--ft-display);
  font-weight:700;
  line-height:1.35;
  letter-spacing:.01em;
  color:var(--ink);
}
h2{font-size:clamp(22px,2.6vw,30px)}
h3{font-size:clamp(17px,2vw,20px)}
h4{font-size:16px}

/* 行内代码:超长订阅 URL / 安装包文件名必然出现,必须可断行 */
code{
  font-family:var(--ft-mono);
  font-size:.92em;
  background:var(--card-2);
  border:1px solid var(--rule);
  padding:1px 5px;
  overflow-wrap:anywhere;
  word-break:break-word;
}
pre{
  font-family:var(--ft-mono);
  font-size:13px;
  line-height:1.75;
  background:var(--card);
  border:1px solid var(--rule);
  border-left:3px solid var(--cobalt);
  padding:16px 18px;
  overflow-x:auto;
  margin:18px 0;
}
pre code{
  background:none;
  border:0;
  padding:0;
  overflow-wrap:normal;
  word-break:normal;
  white-space:pre;
}

/* 小节引言(kicker):等宽小字 + 前置短横 */
.kicker{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--ft-mono);
  font-size:12px;
  letter-spacing:.28em;
  color:var(--cobalt);
  margin-bottom:22px;
}
.kicker::before{
  content:"";
  width:26px;
  height:2px;
  background:var(--cobalt);
  flex-shrink:0;
}

/* 分区标题组 */
.sec-head{margin-bottom:34px}
.sec-title{
  font-family:var(--ft-display);
  font-weight:800;
  font-size:clamp(24px,3vw,34px);
  letter-spacing:.01em;
}
.sec-sub{
  margin-top:12px;
  max-width:56em;
  font-size:14.5px;
  line-height:1.9;
  color:var(--ink-soft);
}

/* Display 级大字(海报体量,仅演示/特殊场景;与 H1 二选一做大) */
.type-display{
  font-family:var(--ft-display);
  font-weight:800;
  font-size:clamp(34px,4.6vw,57px);
  line-height:1.16;
  letter-spacing:.01em;
}

/* ---------- 4. 布局 ---------- */
.wrap{
  max-width:var(--wrap-max);
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
  min-width:0;
}
/* 区块节奏:只声明纵向,严禁 padding 简写覆盖版心留白 */
.sec{
  padding-top:72px;
  padding-bottom:72px;
  overflow-x:clip;
}
.sec-tight{
  padding-top:44px;
  padding-bottom:44px;
  overflow-x:clip;
}
/* 分区之间的裸露基线 */
.sec-ruled{border-top:1px solid var(--rule)}
.sec-trunked{border-top:2px solid var(--cobalt)}

/* 通用网格防溢出 */
.grid-2,.grid-3{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2>*,.grid-3>*{min-width:0}
@media (max-width:900px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .grid-2,.grid-3{grid-template-columns:1fr}
}

/* ---------- 5. 按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:52px;
  padding-left:30px;
  padding-right:30px;
  font-family:var(--ft-display);
  font-weight:600;
  font-size:16px;
  letter-spacing:.04em;
  border-radius:var(--r-btn);
  cursor:pointer;
  text-align:center;
}
.btn svg{flex-shrink:0}

/* 主下载按钮:朱红 + 钴蓝错位套印框(全站三处朱红之一) */
.btn-hot{
  position:relative;
  z-index:0;
  background:var(--vermilion);
  color:var(--card);
  transition:transform .15s ease;
}
.btn-hot::after{
  content:"";
  position:absolute;
  inset:0;
  border:1.5px solid var(--cobalt);
  border-radius:var(--r-btn);
  transform:translate(4px,4px);
  transition:transform .15s ease;
  z-index:-1;
}
.btn-hot:hover{transform:translate(2px,2px)}
.btn-hot:hover::after{transform:translate(0,0)}

/* 次按钮:钴蓝描边 */
.btn-line{
  border:1.5px solid var(--cobalt);
  color:var(--cobalt-deep);
  background:var(--card);
}
.btn-line:hover{background:var(--cobalt-tint)}

/* 小号按钮 */
.btn-sm{
  height:40px;
  padding-left:18px;
  padding-right:18px;
  font-size:14px;
}

.cta-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:18px;
  margin-top:32px;
}

/* ---------- 6. 标签胶囊(等宽小字,平台/版本信息用) ---------- */
.tag-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:30px;
}
.tag{
  font-family:var(--ft-mono);
  font-size:12px;
  letter-spacing:.03em;
  color:var(--cobalt-deep);
  border:1px solid var(--cobalt);
  background:var(--card);
  padding:6px 11px;
  max-width:100%;
  overflow:hidden;
}
/* 当前版本徽标:朱红(全站三处朱红之一) */
.tag-ver{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--vermilion);
  border-color:var(--vermilion);
  color:var(--card);
  white-space:nowrap;
}
.tag-ver::before{
  content:"";
  width:6px;
  height:6px;
  background:var(--card);
  flex-shrink:0;
}

/* ---------- 7. 页头(极简一行 · 中点分隔) ---------- */
#site-header,.site-top{
  position:sticky;
  top:0;
  z-index:80;
}
.masthead{
  height:var(--mast-h);
  border-top:3px solid var(--cobalt);
  border-bottom:1px solid var(--rule);
  display:flex;
  align-items:center;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
  background:var(--paper);
}
.ident{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.ident-mark{
  width:30px;
  height:30px;
  display:block;
  flex-shrink:0;
}
.ident-name{
  font-family:var(--ft-display);
  font-weight:700;
  font-size:17px;
  letter-spacing:.02em;
  white-space:nowrap;
}
.waypath{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:14px;
  margin-left:auto;
}
.waypath a{
  color:var(--ink);
  padding:3px 1px;
  border-bottom:2px solid transparent;
  white-space:nowrap;
}
.waypath a:hover{color:var(--cobalt-deep);border-bottom-color:var(--cobalt)}
.waypath a[aria-current="page"]{color:var(--cobalt-deep);border-bottom-color:var(--cobalt)}
.waypath .sep{color:var(--rule);font-weight:700;user-select:none}

/* 工具区:语言切换 + 汉堡,窄屏自带 margin-left:auto 贴右 */
.mast-tools{
  display:flex;
  align-items:center;
  gap:12px;
  margin-left:22px;
  flex-shrink:0;
}
.lang-box{position:relative}
.lang-pick{
  font-family:var(--ft-mono);
  font-size:12.5px;
  color:var(--ink-soft);
  border:1px solid var(--rule);
  padding:8px 12px;
  min-height:36px;
  background:var(--card);
  cursor:pointer;
  white-space:nowrap;
  border-radius:var(--r-btn);
}
.lang-pick:hover{color:var(--cobalt-deep);border-color:var(--cobalt)}
.lang-menu{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  min-width:168px;
  background:var(--card);
  border:1px solid var(--cobalt);
  z-index:90;
  padding-top:4px;
  padding-bottom:4px;
}
.lang-menu[hidden]{display:none}
.lang-menu a{
  display:block;
  padding:10px 16px;
  font-family:var(--ft-mono);
  font-size:13px;
  color:var(--ink);
}
.lang-menu a:hover{background:var(--cobalt-tint);color:var(--cobalt-deep)}
.lang-menu a[aria-current="true"]{background:var(--card-2);color:var(--cobalt-deep)}

/* 汉堡按钮:≥44px 触达,默认隐藏 */
.burger{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  min-width:44px;
  min-height:44px;
  border:1px solid var(--rule);
  background:var(--card);
  cursor:pointer;
  border-radius:var(--r-btn);
}
.burger-bar{
  width:18px;
  height:2px;
  background:var(--cobalt);
  flex-shrink:0;
  transition:transform .15s ease,opacity .15s ease;
}
html.nav-open .burger-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
html.nav-open .burger-bar:nth-child(2){opacity:0}
html.nav-open .burger-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* 移动端抽屉:实色背景 / 整行可点 / 自身可滚动不穿透 */
.mast-drawer{
  position:fixed;
  top:var(--mast-h);
  left:0;
  right:0;
  z-index:79;
  background:var(--card);
  border-top:2px solid var(--cobalt);
  border-bottom:1px solid var(--rule);
  max-height:calc(100dvh - var(--mast-h));
  overflow-y:auto;
  overscroll-behavior:contain;
}
.mast-drawer[hidden]{display:none}
.mast-drawer a{
  display:block;
  width:100%;
  min-height:44px;
  padding-top:13px;
  padding-bottom:13px;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
  font-size:15px;
  color:var(--ink);
  border-bottom:1px solid var(--rule-faint);
}
.mast-drawer a:hover{background:var(--cobalt-tint)}
.mast-drawer a[aria-current="page"],
.mast-drawer a[aria-current="true"]{
  color:var(--cobalt-deep);
  border-left:3px solid var(--vermilion);
  background:var(--card-2);
}
.drawer-cap{
  font-family:var(--ft-mono);
  font-size:11px;
  letter-spacing:.2em;
  color:var(--ink-soft);
  padding-top:16px;
  padding-bottom:8px;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
  border-bottom:1px solid var(--rule-faint);
  background:var(--card-2);
}

@media (min-width:981px){
  .burger{display:none}
  .mast-drawer{display:none}
}
@media (max-width:980px){
  :root{--mast-h:58px}
  .waypath{display:none}
  .mast-tools{margin-left:auto}
  .burger{display:inline-flex}
  .ident-name{font-size:15.5px}
}
@media (max-width:400px){
  .lang-pick{padding:8px 8px;font-size:11.5px}
}

/* ---------- 8. 页脚(印刷版权栏) ---------- */
.colophon{
  margin-top:72px;
  border-top:2px solid var(--cobalt);
  background:var(--card);
}
.colo-grid{
  display:grid;
  grid-template-columns:minmax(220px,1.2fr) 1fr 1fr .9fr;
  gap:36px;
  padding-top:48px;
  padding-bottom:40px;
}
.colo-grid>*{min-width:0}
.colo-brand-line{display:flex;align-items:center;gap:10px}
.colo-logo{width:26px;height:26px;flex-shrink:0}
.colo-name{
  font-family:var(--ft-display);
  font-weight:700;
  font-size:15.5px;
  white-space:nowrap;
}
.colo-tag{
  margin-top:14px;
  font-size:13px;
  line-height:1.85;
  color:var(--ink-soft);
  max-width:34em;
}
.colo-print{
  margin-top:18px;
  font-family:var(--ft-mono);
  font-size:10.5px;
  letter-spacing:.16em;
  color:var(--ink-soft);
}
.colo-cap{
  font-family:var(--ft-mono);
  font-size:11px;
  letter-spacing:.18em;
  color:var(--cobalt-deep);
  padding-bottom:10px;
  border-bottom:1px solid var(--rule);
  margin-bottom:12px;
}
.colo-col a{
  display:block;
  padding-top:5px;
  padding-bottom:5px;
  font-size:13.5px;
  color:var(--ink-soft);
}
.colo-col a:hover{color:var(--cobalt-deep)}
.colo-base{border-top:1px solid var(--rule)}
.colo-base-in{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  padding-top:16px;
  padding-bottom:16px;
  font-family:var(--ft-mono);
  font-size:11px;
  letter-spacing:.12em;
  color:var(--ink-soft);
}
@media (max-width:900px){
  .colo-grid{grid-template-columns:1fr 1fr;gap:28px}
}
@media (max-width:560px){
  .colo-grid{grid-template-columns:1fr}
}

/* ---------- 9. 通用面板 / 卡片 ---------- */
.panel{
  background:var(--card);
  border:1px solid var(--rule);
  padding:22px 24px;
  min-width:0;
}
.panel-deep{background:var(--card-2)}
.panel-frame{border:1.5px solid var(--cobalt)}
/* 面板铭牌:等宽小字标注,信息图图注质感 */
.panel-cap{
  font-family:var(--ft-mono);
  font-size:11px;
  letter-spacing:.16em;
  color:var(--cobalt-deep);
  margin-bottom:12px;
}

/* ---------- 10. 滚动淡入 ---------- */
.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s ease,transform .6s ease;
}
.reveal.shown{opacity:1;transform:translateY(0)}

/* ---------- 11. 装饰微倾斜(仅限小尺寸装饰元素,禁止用于长内容容器) ---------- */
.tilt-a{transform:rotate(-.4deg)}
.tilt-b{transform:rotate(.35deg)}

/* ---------- 12. 动效降级 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{transition:none;opacity:1;transform:none}
  .btn-hot,.btn-hot::after{transition:none}
  .burger-bar{transition:none}
}

/* ---------- 13. 窄屏兜底 ---------- */
@media (max-width:640px){
  .tilt-a,.tilt-b{transform:none}
  .btn{width:auto;min-width:0}
  .cta-row{gap:12px}
  .sec{padding-top:52px;padding-bottom:52px}
  .sec-tight{padding-top:36px;padding-bottom:36px}
}