/* ===========================================================================
   基础层：重置 + 排版 + 通用工具类
   =========================================================================== */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* 吸顶导航的高度补偿，锚点跳转时标题不会被挡住 */
    scroll-padding-top: 96px;
}

body {
    margin: 0;
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 中文标题不需要英文那样的负字距；英文才收紧 */
h1, h2, h3, h4 {
    margin: 0;
    color: var(--c-ink);
    font-weight: 600;
    line-height: var(--lh-heading);
    letter-spacing: 0;
}

:lang(en) h1,
:lang(en) h2,
:lang(en) h3 {
    letter-spacing: -0.01em;
}

h1 {
    font-size: var(--fs-h1);
    line-height: var(--lh-tight);
}

h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p {
    margin: 0;
}

/* 正文段落之间保留节奏，但首个与末个不留边距，避免容器高度虚增 */
p + p {
    margin-top: var(--s4);
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

img,
svg,
picture {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

a {
    color: var(--c-brand);
    text-decoration: none;
    transition: color var(--dur) var(--ease);
}

a:hover {
    color: var(--c-brand-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

strong {
    font-weight: 600;
    color: var(--c-ink);
}

button {
    font: inherit;
    color: inherit;
    cursor: pointer;
}

/* --- 焦点可见性：键盘导航必须有清晰的焦点环 ------------------------------- */
:focus-visible {
    outline: 2px solid var(--c-brand);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* --- 跳转到主内容（键盘 / 读屏用户） ------------------------------------- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: var(--s3) var(--s5);
    background: var(--c-ink);
    color: #fff;
    border-radius: 0 0 var(--r-md) 0;
}

.skip-link:focus {
    left: 0;
    color: #fff;
    text-decoration: none;
}

/* --- 工具类 -------------------------------------------------------------- */

/* 视觉隐藏但保留给读屏 */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 型号、参数值、版本号：等宽 + 等宽数字，纵向自然对齐 */
.mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* 内联图标符号表：占 0 尺寸，不参与布局。
   不能用 style="display:none" —— 严格 CSP 会拦下行内样式。 */
.svg-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* 正文区块：限制行宽，保证中文长文可读性 */
.prose {
    max-width: var(--content-max);
    color: var(--c-text);
}

.prose h2 {
    margin-top: var(--s7);
    margin-bottom: var(--s4);
}

.prose h3 {
    margin-top: var(--s6);
    margin-bottom: var(--s3);
}

.prose ul {
    margin: var(--s4) 0;
    padding-left: 1.25em;
    list-style: disc;
}

.prose li + li {
    margin-top: var(--s2);
}

/* 尊重用户的「减少动态效果」偏好 */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* 入场淡入。
   初始隐藏状态挂在 html.js 之下：脚本没加载成功时内容照常显示，不会白屏。
   JS 加载后立刻给 <html> 加上 js 类。 */
html.js [data-reveal] {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 400ms var(--ease), transform 400ms var(--ease);
}

html.js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}