/* 司马迁.skill · 落地页
   正文走系统栈，零外部请求。
   水印字自托管 Noto Serif SC 900 子集（列 / 傳 / 遷）。 */

@font-face{
  font-family:"Noto Serif SC WM";
  font-style:normal;
  font-weight:900;
  font-display:swap;
  src:url("./fonts/noto-serif-sc-900-wm.woff2") format("woff2");
  unicode-range:U+5217,U+50B3,U+9077;
}

:root{
  --c-bg:#e5e5e5;
  --c-surface:#ffffff;
  --c-surface-40:rgba(255,255,255,0.40);
  --c-ink:#1a1a1a;
  --c-ink-pure:#000;
  --c-btn:#47494b;
  --c-border:#575757;
  --c-border-soft:rgba(71,73,75,0.20);
  --c-border-strong:rgba(71,73,75,0.45);
  --c-muted:#5c5e60;
  --c-on-dark:#e5e5e5;
  --c-on-dark-60:rgba(229,229,229,0.60);
  --c-on-dark-80:rgba(229,229,229,0.80);
  --c-on-dark-border:rgba(255,255,255,0.18);
  --c-seal:#a8302d;
  --font-sans:"PingFang SC","Hiragino Sans GB","Source Han Sans SC",
              "Microsoft YaHei","WenQuanYi Micro Hei",ui-sans-serif,system-ui,sans-serif;
  --font-serif:"Source Han Serif SC","Source Han Serif CN",
               "Songti SC","STSong","SimSun","FangSong",Georgia,serif;
  --font-wm:"Noto Serif SC WM","Noto Serif SC","Source Han Serif SC",
            "Source Han Serif CN","Songti SC","STSong","SimSun",serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"PingFang SC",monospace;
  --container:1280px;
  --pad-x:24px;
  --pad-x-lg:48px;
  --section-pad:96px;
  --wm-mult:1;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--c-bg);color:var(--c-ink);font-family:var(--font-sans);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
::selection{background:var(--c-btn);color:var(--c-on-dark)}
button{font:inherit;cursor:pointer}

.container{max-width:var(--container);margin:0 auto;padding:0 var(--pad-x)}
@media(min-width:960px){.container{padding:0 var(--pad-x-lg)}}

.nav{position:relative;z-index:30;background:var(--c-bg);border-bottom:1px solid var(--c-border-soft)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:64px;max-width:var(--container);margin:0 auto;padding:0 var(--pad-x)}
@media(min-width:960px){.nav-inner{padding:0 var(--pad-x-lg);height:72px}}
.lockup{display:flex;align-items:baseline;gap:10px}
.lockup .mark{font-family:var(--font-serif);font-weight:700;font-size:18px;letter-spacing:.04em}
.lockup .tag{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--c-muted)}
.nav-links{display:none;gap:28px;font-size:13px;color:var(--c-muted)}
.nav-links a{transition:color .3s}
.nav-links a:hover{color:var(--c-ink)}
@media(min-width:760px){.nav-links{display:flex}}

.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--c-border-soft)}
.hero-wm{position:absolute;right:-32px;top:8%;font-family:var(--font-wm);font-weight:900;font-size:clamp(220px,32vw,460px);line-height:.9;letter-spacing:-.16em;color:rgba(0,0,0,.045);writing-mode:vertical-rl;pointer-events:none;user-select:none}
.hero-c{position:relative;z-index:1;max-width:880px;margin:0 auto;text-align:center;padding:104px 0 116px}
@media(min-width:960px){.hero-c{padding:140px 0 148px}}
.hero-c .badge{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--c-muted);border:1px solid var(--c-border-soft);background:var(--c-surface-40);padding:7px 14px;margin-bottom:40px}
.hero-c .badge .dot{width:6px;height:6px;border-radius:50%;background:#3f7d4e}
.hero-c h1{font-family:var(--font-serif);font-weight:700;font-size:clamp(46px,8vw,104px);line-height:.98;letter-spacing:-.03em;margin:0}
.hero-c h1 .ext{font-weight:500;color:var(--c-btn)}
.hero-c .slogan{font-family:var(--font-serif);font-size:clamp(24px,3.4vw,40px);font-weight:500;line-height:1.35;letter-spacing:-.01em;margin:34px 0 0}
.hero-c .slogan em{font-style:italic;font-weight:500;color:var(--c-btn)}
.hero-c .lead{font-family:var(--font-serif);font-size:clamp(16px,1.9vw,20px);font-weight:300;line-height:1.8;color:var(--c-muted);max-width:640px;margin:22px auto 0}
.hero-actions{display:flex;flex-wrap:wrap;gap:0;margin-top:36px}
.hero-c .hero-actions{justify-content:center;margin-top:48px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:500;font-size:14px;letter-spacing:.02em;padding:16px 26px;border:1px solid var(--c-btn);background:var(--c-btn);color:var(--c-on-dark);transition:background .3s,color .3s,border-color .3s;border-radius:0}
.btn:hover{background:var(--c-ink-pure);border-color:var(--c-ink-pure)}
.btn.ghost{background:transparent;color:var(--c-ink);border-color:var(--c-btn)}
.btn.ghost:hover{background:var(--c-btn);color:var(--c-on-dark)}
.btn.light{background:var(--c-bg);color:var(--c-ink);border-color:var(--c-bg)}
.btn.light:hover{background:#fff;border-color:#fff}
.btn.lg{padding:20px 32px}
.btn svg{width:16px;height:16px}

.section{padding:var(--section-pad) 0;border-bottom:1px solid var(--c-border-soft)}
.section-head{display:grid;grid-template-columns:1fr;gap:20px;margin-bottom:28px;align-items:end}
@media(min-width:960px){.section-head{grid-template-columns:auto 1fr auto;gap:48px}}
.section-q{font-family:var(--font-serif);font-weight:700;font-size:clamp(32px,5vw,56px);line-height:1.1;letter-spacing:-.02em;margin:0}
.section-q em{font-style:italic;font-weight:500;color:var(--c-btn)}
.section-lead{font-family:var(--font-serif);font-size:18px;color:var(--c-muted);line-height:1.75;max-width:560px;margin:0;font-weight:300}
.section-num{font-family:var(--font-serif);font-style:italic;font-weight:500;font-size:20px;color:var(--c-muted)}

.home-shot{display:block;width:100%;height:auto;border:1px solid var(--c-border-soft);background:#f7f7f4}
.home-caption{margin:12px 0 0;font-size:13px;color:var(--c-muted)}
.home-caption span{display:none}

.source-mock{margin-top:0}
.mock-md{background:#1a1a1a;color:#d4d4d4;padding:28px 32px;font-family:var(--font-mono);font-size:13px;line-height:1.95;border:1px solid var(--c-border-soft)}
.mock-md .md-h{color:#7ab2d4;font-weight:700}
.mock-md .md-list{color:#c89178}
.mock-md .md-quote{color:#7da46a;font-style:italic}
.mock-md .md-bold{color:#e2e2e2;font-weight:700}

.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}

.home-proj{position:relative;margin-top:36px}
.proj-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.proj-head h3{font-family:var(--font-serif);font-weight:700;font-size:22px;margin:0}
.style-links{display:flex;align-items:baseline;gap:10px;font-family:var(--font-serif);font-size:15px}
.style-links label{color:var(--c-muted);cursor:pointer;border:0;padding:0;background:none;font-weight:400}
.style-links .sep{color:var(--c-border-soft)}
.home-proj:has(#hp-cao:checked) label[for="hp-cao"],
.home-proj:has(#hp-ren:checked) label[for="hp-ren"]{color:var(--c-ink);font-weight:700;box-shadow:inset 0 -1px 0 currentColor}
.home-proj:has(#hp-cao:focus-visible) label[for="hp-cao"],
.home-proj:has(#hp-ren:focus-visible) label[for="hp-ren"]{outline:2px solid var(--c-btn);outline-offset:3px}
.shot-ren{color:inherit}
.home-frame .shot-cao,
.home-frame .shot-ren{display:none}
.home-proj:has(#hp-cao:checked) .shot-cao,
.home-proj:has(#hp-ren:checked) .shot-ren{display:block}
.home-proj:has(#hp-cao:checked) .cap-cao,
.home-proj:has(#hp-ren:checked) .cap-ren{display:inline}

.bio-stack{margin-top:36px;display:grid;gap:0;border:1px solid var(--c-border-soft)}
.bio-row{padding:28px 30px;background:rgba(255,255,255,.4)}
.bio-row + .bio-row{border-top:1px solid var(--c-border-soft)}
.bio-row h4{font-family:var(--font-serif);font-weight:700;font-size:20px;margin:0 0 12px;line-height:1.35}
.bio-row h4 span{display:block;margin-top:6px;font-size:13.5px;font-weight:400;color:var(--c-muted)}
@media(min-width:700px){
  .bio-row h4 span{display:inline;margin:0 0 0 12px}
}
.bio-row .sample{margin:0;font-family:var(--font-serif);font-size:15.5px;line-height:1.85;font-weight:400}

.fine-materials{margin-bottom:32px;padding:26px 28px;border:1px solid var(--c-border-soft);background:rgba(255,255,255,.45);display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:900px){.fine-materials{grid-template-columns:.9fr 1.4fr;align-items:start}}
.fine-materials h3{font-family:var(--font-serif);font-size:24px;line-height:1.2;margin:0 0 8px}
.fine-materials p{margin:0;color:var(--c-muted);font-size:14px;line-height:1.8;font-family:var(--font-serif)}
.fine-materials ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.fine-materials li{font-size:13.5px;line-height:1.7;border-bottom:1px solid var(--c-border-soft);padding-bottom:9px}
.fine-materials li:last-child{border-bottom:0;padding-bottom:0}
.fine-materials li::before{content:"—";color:var(--c-muted);margin-right:8px}

.fine-prompt{background:var(--c-btn);color:var(--c-on-dark);display:flex;flex-direction:column;border:1px solid var(--c-border-soft)}
.fine-prompt .head{padding:18px 28px;border-bottom:1px solid var(--c-on-dark-border);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--c-on-dark-60);display:flex;justify-content:space-between}
.fine-prompt .head .name{color:var(--c-on-dark-80)}
.fine-prompt textarea{border:0;background:transparent;color:var(--c-on-dark);font-family:var(--font-mono);font-size:14px;line-height:1.95;padding:24px 28px;outline:none;resize:none;width:100%;min-height:168px}
.fine-prompt .foot{display:flex;align-items:center;gap:14px;padding:18px 28px;border-top:1px solid var(--c-on-dark-border);flex-wrap:wrap}
.fine-prompt .copied{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--c-on-dark-60);opacity:0;transition:opacity .3s}
.fine-prompt .copied.show{opacity:1}
.fine-prompt .btn-light{background:var(--c-on-dark);color:var(--c-ink);border-color:var(--c-on-dark)}
.fine-prompt .btn-light:hover{background:#fff;border-color:#fff}

.update-steps{display:grid;grid-template-columns:1fr;border:1px solid var(--c-border-soft)}
@media(min-width:760px){.update-steps{grid-template-columns:repeat(3,1fr)}}
.update-step{padding:36px 32px;border-bottom:1px solid var(--c-border-soft)}
@media(min-width:760px){.update-step{border-bottom:0;border-right:1px solid var(--c-border-soft)}}
@media(min-width:760px){.update-step:last-child{border-right:0}}
.update-step .n{font-family:var(--font-serif);font-style:italic;font-size:36px;color:var(--c-muted);line-height:1;margin-bottom:18px}
.update-step h4{font-family:var(--font-serif);font-size:22px;margin:0 0 10px}
.update-step p{margin:0;font-size:14px;color:var(--c-muted);line-height:1.7}
.update-step code{font-family:var(--font-mono);background:rgba(71,73,75,.08);padding:1px 6px;font-size:12.5px}
.update-note{margin-top:28px;font-family:var(--font-serif);color:var(--c-muted);font-size:15px}

.closing{padding:96px 0;background:var(--c-btn);color:var(--c-on-dark);position:relative;overflow:hidden;border-top:1px solid var(--c-border-soft)}
.closing .closing-inner{position:relative;z-index:1;text-align:center;max-width:760px;margin:0 auto}
.closing h2{font-family:var(--font-serif);font-weight:700;font-size:clamp(34px,5vw,60px);line-height:1.12;letter-spacing:-.02em;margin:0 0 18px}
.closing h2 em{font-style:italic;font-weight:500;color:var(--c-on-dark-80)}
.closing p{font-family:var(--font-serif);font-weight:300;color:var(--c-on-dark-80);font-size:17px;line-height:1.8;margin:0 0 40px}
.closing .hero-actions{justify-content:center;margin-top:0}
.closing .btn.ghost{color:var(--c-on-dark);border-color:var(--c-on-dark-border)}
.closing .btn.ghost:hover{background:rgba(255,255,255,.08);color:#fff;border-color:var(--c-on-dark-60)}
.closing-wm{position:absolute;right:-28px;top:50%;transform:translateY(-50%);font-family:var(--font-wm);font-weight:900;font-size:clamp(180px,26vw,360px);line-height:.85;color:rgba(255,255,255,calc(.05 * var(--wm-mult)));pointer-events:none;user-select:none;letter-spacing:-.1em;writing-mode:vertical-rl}

.foot{padding:48px 0 56px;border-top:1px solid var(--c-border-soft);background:var(--c-btn);color:var(--c-on-dark)}
.foot-inner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:20px}
.foot .left{font-family:var(--font-serif);font-size:16px}
.foot .left b{font-weight:700}
.foot-links{display:flex;flex-wrap:wrap;gap:24px;font-size:13px;color:var(--c-on-dark-80)}
.foot-links a{transition:color .3s}
.foot-links a:hover{color:#fff}
.foot .right{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--c-on-dark-60)}

@media(max-width:760px){
  :root{--section-pad:64px}
  .hero-c{padding:64px 0 80px}
  .hero-c h1{font-size:48px}
  .section-q{font-size:36px}
  .section-head{margin-bottom:24px}
  .hero-actions{justify-content:stretch}
  .hero-actions .btn{flex:1 1 100%;margin-left:0 !important}
  .closing{padding:72px 0}
}