/* ═══════════════════════════════════════════════════════════
   CSI MaaS base.css — reset + 排版基础 + 版心栅格 + 无障碍
   前置：tokens.css
   ═══════════════════════════════════════════════════════════ */

*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  font-family:var(--f-sans);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  letter-spacing:var(--ls-body);
  color:var(--ink-1);
  background:var(--bg-0);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
picture{ display:contents; }  /* picture 仅作格式协商的透明包装，不参与布局 */
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; letter-spacing:inherit; }
input,textarea,select{ font:inherit; letter-spacing:inherit; }
ul,ol{ list-style:none; }
strong,b{ font-weight:var(--fw-bold); }

::selection{ background:rgba(166,124,74,.22); }

:focus-visible{
  outline:2px solid var(--gold-500);
  outline-offset:3px;
  border-radius:3px;
}

/* 跳到主要内容 */
.skip{
  position:absolute; left:-9999px; top:0; z-index:var(--z-toast);
  background:var(--ink-1); color:#fff;
  padding:10px 18px; border-radius:0 0 var(--r-sm) 0; font-size:var(--fs-sm);
}
.skip:focus{ left:0; }

/* ── 版心与栅格（§4.4） ─────────────────────────────────── */
.wrap{
  width:min(var(--maxw), 100% - var(--gutter) * 2);
  margin-inline:auto;
  position:relative;
}
.wrap--narrow{ max-width:var(--maxw-narrow); }
.wrap--wide{ max-width:var(--maxw-wide); }

.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--grid-gap); }
@media (max-width:1023px){ .grid{ grid-template-columns:repeat(8,1fr); } }
@media (max-width:767px){ .grid{ grid-template-columns:repeat(4,1fr); } }

/* ── 排版基元 ──────────────────────────────────────────── */
h1,h2,h3,h4{ text-wrap:balance; }
p{ text-wrap:pretty; }

/* eyebrow：板块编号（母题③） */
.eyebrow{
  font-family:var(--f-mono);
  font-size:var(--fs-mono);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-mono);
  text-transform:uppercase;
  color:var(--gold-600);
}

/* 金色短横（母题②） */
.gold-rule{
  width:25px; height:2px;
  background:var(--gold-400);
  transform-origin:left;
}
@media (max-width:767px){ .gold-rule{ width:22px; } }

/* SVG 图标统一规格 */
.ico{
  width:24px; height:24px;
  fill:none; stroke:currentColor;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

/* 纸纹颗粒层（母题④，全站叠加） */
body::after{
  content:""; position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.035;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 屏幕阅读器专用 */
.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}

/* 底部安全区（刘海屏） */
.safe-bottom{ padding-bottom:max(24px, env(safe-area-inset-bottom)); }