/* ==========================================================================
   DHUV · Precision Atelier
   base.css — 设计令牌、重置、排版、工具类
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
    /* 石墨（深） */
    --ink: #0B0C0E;
    --ink-2: #131519;
    --ink-3: #1C1F24;
    --ink-4: #2A2E35;

    /* 骨白（浅） */
    --paper: #F4F0E8;
    --paper-2: #EDE8DD;
    --paper-3: #E2DBCC;

    /* 标定色 */
    --signal: #E8451F;
    --signal-dk: #C9350F;
    --copper: #A9714B;
    --copper-lt: #C69068;

    /* 文字 */
    --t1: #0B0C0E;
    --t2: #3C4046;
    --t3: #71767E;
    --t4: #9AA0A8;
    --ti1: #F4F0E8;
    --ti2: rgba(244, 240, 232, .70);
    --ti3: rgba(244, 240, 232, .44);

    /* 描边 */
    --line: rgba(11, 12, 14, .13);
    --line-2: rgba(11, 12, 14, .07);
    --line-d: rgba(244, 240, 232, .16);
    --line-d2: rgba(244, 240, 232, .08);

    /* 字体 */
    --f-display: "Instrument Serif", "Songti SC", "Noto Serif SC", Georgia, "Times New Roman", serif;
    --f-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

    /* 字号 */
    --fs-display: clamp(44px, 6.6vw, 104px);
    --fs-h1: clamp(34px, 4.2vw, 66px);
    --fs-h2: clamp(27px, 2.8vw, 44px);
    --fs-h3: clamp(20px, 1.5vw, 27px);
    --fs-h4: clamp(17px, .9vw, 20px);
    --fs-lg: clamp(16px, .55vw + 14px, 19px);
    --fs-base: clamp(15px, .3vw + 14px, 16.5px);
    --fs-sm: 13.5px;
    --fs-xs: 11.5px;

    /* 间距 · 8px 基线 */
    --s1: 8px;
    --s2: 16px;
    --s3: 24px;
    --s4: 32px;
    --s5: 48px;
    --s6: 64px;
    --s7: 96px;
    --s8: 128px;
    --s9: 176px;

    /* 容器 */
    --w-max: 1480px;
    --w-text: 74ch;
    --pad: clamp(20px, 4.4vw, 64px);
    --hdr: 76px;

    /* 动效 */
    --ease: cubic-bezier(.16, 1, .3, 1);
    --ease-io: cubic-bezier(.65, 0, .35, 1);
    --dur: .7s;
    --dur-s: .38s;

    /* 阴影 */
    --sh-1: 0 1px 2px rgba(11, 12, 14, .05);
    --sh-2: 0 18px 48px -22px rgba(11, 12, 14, .28);
}

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--hdr) + 24px);
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--t1);
    font-family: var(--f-sans);
    font-size: var(--fs-base);
    line-height: 1.72;
    font-feature-settings: "kern" 1, "liga" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

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

img {
    height: auto;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--f-display);
    font-weight: 400;
    line-height: 1.06;
    letter-spacing: -.022em;
    text-wrap: balance;
}

p {
    margin: 0 0 1.1em;
    text-wrap: pretty;
}

p:last-child {
    margin-bottom: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

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

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

input, textarea, select {
    font: inherit;
    color: inherit;
}

figure {
    margin: 0;
}

table {
    border-collapse: collapse;
    width: 100%;
}

hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: var(--s5) 0;
}

::selection {
    background: var(--signal);
    color: #fff;
}

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

/* 细滚动条 */
@supports (scrollbar-width: thin) {
    html {
        scrollbar-width: thin;
        scrollbar-color: var(--ink-4) transparent;
    }
}

::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--ink-4);
    border: 2px solid var(--paper);
    border-radius: 6px;
}

/* ---------- 3. 排版 ---------- */
.t-display {
    font-family: var(--f-display);
    font-size: var(--fs-display);
    line-height: .94;
    letter-spacing: -.035em;
}

.t-h1 { font-size: var(--fs-h1); line-height: 1.02; }
.t-h2 { font-size: var(--fs-h2); line-height: 1.1; }
.t-h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.015em; }
.t-h4 { font-size: var(--fs-h4); line-height: 1.3; letter-spacing: -.01em; }

.t-lead {
    font-size: var(--fs-lg);
    line-height: 1.62;
    color: var(--t2);
}

.t-body { color: var(--t2); }

.mono {
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    font-weight: 400;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}

.num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--copper);
}

.eyebrow::before {
    content: "";
    width: 28px;
    height: 1px;
    background: currentColor;
    flex: none;
}

.on-dark .eyebrow,
.dark .eyebrow {
    color: var(--copper-lt);
}

/* 正文内排版 */
.prose {
    font-size: var(--fs-base);
    line-height: 1.8;
    color: var(--t2);
}

.prose > * + * {
    margin-top: 1.1em;
}

.prose h2 {
    font-size: var(--fs-h3);
    margin-top: 2.2em;
    color: var(--t1);
}

.prose h3 {
    font-size: var(--fs-h4);
    font-family: var(--f-sans);
    font-weight: 600;
    letter-spacing: 0;
    margin-top: 1.9em;
    color: var(--t1);
}

.prose ul,
.prose ol {
    padding-left: 1.15em;
    list-style: none;
}

.prose li {
    position: relative;
    margin: .5em 0;
}

.prose ul > li::before {
    content: "";
    position: absolute;
    left: -1.15em;
    top: .72em;
    width: 7px;
    height: 1px;
    background: var(--copper);
}

.prose ol {
    counter-reset: li;
}

.prose ol > li::before {
    counter-increment: li;
    content: counter(li, decimal-leading-zero);
    position: absolute;
    left: -2.1em;
    top: .18em;
    font-family: var(--f-mono);
    font-size: 11px;
    color: var(--copper);
}

.prose strong {
    color: var(--t1);
    font-weight: 600;
}

.prose a {
    color: var(--t1);
    border-bottom: 1px solid var(--copper);
    transition: border-color var(--dur-s);
}

.prose a:hover {
    border-color: var(--signal);
    color: var(--signal);
}

.prose blockquote {
    margin: 1.8em 0;
    padding: 4px 0 4px 24px;
    border-left: 2px solid var(--signal);
    font-family: var(--f-display);
    font-size: var(--fs-h4);
    line-height: 1.5;
    color: var(--t1);
}

.prose img {
    width: 100%;
    margin: 1.8em 0;
    background: var(--paper-2);
}

.prose table {
    margin: 1.8em 0;
    font-size: var(--fs-sm);
}

.prose th,
.prose td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

.prose th {
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--t3);
    font-weight: 400;
}

/* ---------- 4. 工具类 ---------- */
.wrap {
    width: 100%;
    max-width: var(--w-max);
    margin-inline: auto;
    padding-inline: var(--pad);
}

.wrap-narrow {
    max-width: 1040px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip {
    position: fixed;
    top: -100px;
    left: 16px;
    z-index: 999;
    padding: 12px 20px;
    background: var(--ink);
    color: var(--ti1);
    transition: top .2s;
}

.skip:focus {
    top: 12px;
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--t1);
    position: relative;
    padding-bottom: 6px;
}

.link-arrow::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--copper);
    transform-origin: right;
    transition: transform var(--dur-s) var(--ease);
}

.link-arrow:hover::after {
    transform: scaleX(0);
}

.link-arrow svg {
    transition: transform var(--dur-s) var(--ease);
}

.link-arrow:hover svg {
    transform: translateX(4px);
}

.on-dark .link-arrow,
.dark .link-arrow {
    color: var(--ti1);
}

/* ---------- 5. 动效 ---------- */
html.js [data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity var(--dur) var(--ease),
        transform var(--dur) var(--ease);
    transition-delay: var(--d, 0ms);
}

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

html.js [data-reveal="fade"] {
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

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