/* 书剑个人网站 · 共用样式（左舷深墨蓝 + 右舷米白纸面）
   配色参考 imwenzi.com：亮色只作底纹/色块，深色才作文字 */

:root{
  --sea-deep:#0A222D; --sea-mid:#0E3441; --sea-line:rgba(148,196,205,.16);
  --foam:#9CC8D1; --foam-bright:#D8ECEF;
  --paper:#F4F0E6; --paper-deep:#EBE4D2; --card:#FBF9F2;
  --ink:#1A1F33; --ink-soft:#4A4F66; --ink-muted:#7A7A88; --rule:#D8D2BE;
  --teal:#10697A; --teal-deep:#0B4B58; --signal:#C2571B;
  --lemon:#D4F23A; --lemon-soft:#E8FA9A;
  --lilac:#C9A8FF; --lilac-deep:#8E6CD0; --lilac-soft:#E9DDFB;
  --mint:#7FD1B9; --mint-deep:#2E8B72; --mint-soft:#E4F4EE;
  --rose:#FFB8D1; --rose-deep:#B4471C; --rose-soft:#FBE3D6;
  --serif:"Songti SC","Noto Serif SC","STSong","SimSun",serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Segoe UI",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,"Cascadia Mono",monospace;
  --rail-w:clamp(280px,25vw,440px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.75;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
li{list-style:none}
button{font:inherit;border:none;background:none;cursor:pointer;color:inherit}
img{display:block;max-width:100%}
::selection{background:var(--lemon);color:var(--ink)}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.mono{font-family:var(--mono)}
.grain{position:fixed;inset:0;z-index:99;pointer-events:none;opacity:.14;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E")}
.layout{display:flex;min-height:100vh}

/* 左舷 · 固定个人介绍面板 */
.rail{position:fixed;top:0;left:0;bottom:0;width:var(--rail-w);background:radial-gradient(120% 90% at 20% 0%,var(--sea-mid) 0%,var(--sea-deep) 62%);color:var(--foam-bright);overflow:hidden;z-index:2}
.rail::after{content:"";position:absolute;top:0;right:0;bottom:0;width:12px;background-image:repeating-linear-gradient(to bottom,transparent 0 18px,var(--sea-line) 18px 19px)}
.rail-inner{position:relative;z-index:2;height:100%;padding:clamp(28px,4vh,48px) clamp(28px,3vw,44px);display:flex;flex-direction:column;gap:clamp(12px,1.8vh,20px);overflow-y:auto;scrollbar-width:none}
.rail-inner::-webkit-scrollbar{display:none}
.rail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.avatar{position:relative;width:92px;height:92px;flex:none;border-radius:50%;background:var(--sea-mid);border:1px solid var(--sea-line);display:grid;place-items:center;font-family:var(--serif);font-size:38px;color:var(--foam-bright)}
.seal{position:absolute;right:-2px;bottom:-2px;width:30px;height:30px;background:var(--signal);color:var(--card);font-size:15px;display:grid;place-items:center;border-radius:3px;font-family:var(--serif)}
.rail-est{font-size:10px;letter-spacing:.22em;color:var(--foam);opacity:.75;writing-mode:vertical-rl;line-height:1.7}
.rail-identity{margin-top:clamp(14px,3vh,32px)}
.rail-name{font-family:var(--serif);font-size:clamp(56px,5.4vw,84px);font-weight:700;line-height:1.04;letter-spacing:.06em;color:var(--foam-bright)}
.rail-title{margin-top:14px;display:inline-block;font-size:12px;letter-spacing:.1em;color:var(--foam);border:1px solid var(--sea-line);padding:6px 14px;border-radius:99px;width:max-content}
.rail-tagline{margin-top:18px;font-family:var(--serif);font-size:clamp(17px,1.35vw,21px);line-height:1.8;color:var(--foam)}
.rail-meta{margin-top:auto;border-top:1px solid var(--sea-line);padding-top:clamp(14px,2.4vh,26px);display:grid;gap:10px;font-size:12px;color:var(--foam)}
.rail-meta li{display:flex;gap:12px;align-items:baseline}
.rail-meta .k{font-size:10px;letter-spacing:.16em;color:var(--foam);opacity:.6;min-width:56px;font-family:var(--mono)}
.rail-meta .hot{font-size:13px}
.rail-meta .hot .k{color:var(--signal);opacity:1}
.rail-meta code{font-family:var(--mono);font-size:12.5px;color:var(--foam-bright);border-bottom:1px dashed var(--sea-line)}
.rail-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:8px;flex-wrap:wrap;row-gap:10px}
.rail-status{font-size:11px;letter-spacing:.16em;color:var(--foam)}
.rail-status i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--signal);margin-right:8px}
.rail-social{display:flex;gap:8px}
.rail-social a{width:34px;height:34px;border-radius:50%;border:1px solid var(--sea-line);display:grid;place-items:center;font-size:11px;color:var(--foam);font-family:var(--mono);transition:color .2s,border-color .2s,background .2s}
.rail-social a:hover{color:var(--sea-deep);background:var(--foam-bright);border-color:var(--foam-bright)}

/* 右舷 · 纸面内容区 */
.content{margin-left:var(--rail-w);flex:1;min-width:0;padding:0 clamp(28px,6vw,110px) 72px}
.site-nav{display:flex;align-items:center;gap:clamp(8px,1.1vw,15px);flex-wrap:wrap;border-bottom:1px solid var(--rule);padding:16px 0}
.nav-link{font-size:13px;color:var(--ink-soft);padding-bottom:5px;border-bottom:2px solid transparent;white-space:nowrap;transition:color .2s,border-color .2s}
.nav-link i{font-family:var(--mono);font-style:normal;font-size:11px;letter-spacing:.08em;margin-right:6px;color:var(--ink-muted)}
.nav-link:hover{color:var(--teal)}
.nav-link.active{color:var(--teal);border-bottom-color:var(--teal)}
.nav-link.active i{color:var(--teal)}
.nav-tail{margin-left:auto;font-size:11px;color:var(--ink-soft);letter-spacing:.1em;font-family:var(--mono)}

/* 首页首屏 */
.page-hero{padding-top:clamp(44px,7vh,80px)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--ink-muted)}
.eyebrow .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--lilac-deep);margin-right:9px;vertical-align:middle}
.hero-title{font-family:var(--serif);font-size:clamp(34px,4.6vw,66px);line-height:1.3;letter-spacing:-.005em;margin-top:18px;font-weight:800}
mark{color:var(--ink);padding:0 .18em;border-radius:3px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hl-lemon{background:var(--lemon);color:#1A1F33;font-weight:700}
.hl-brand{background:var(--lilac-deep);color:var(--paper);font-weight:700}
.hl-ul{background:none;color:var(--ink);font-weight:600;border-bottom:2px solid var(--lilac-deep);border-radius:0;padding:0 1px 1px}
.hl-ul.warm{border-bottom-color:var(--rose-deep)}
.hl-lever{background:none;font-weight:700;border-bottom:2px solid currentColor;border-radius:0;padding:0 1px 1px}
.hl-lever.past{color:var(--lilac-deep)}
.hl-lever.now{color:var(--mint-deep)}
.hl-lever.next{color:var(--rose-deep)}
.hero-lines{margin-top:34px;display:grid;gap:13px;font-size:15px;line-height:1.9;color:var(--ink)}
.hero-note{margin-top:30px;border-left:3px solid var(--lilac-deep);padding-left:18px;display:grid;gap:11px;font-size:13.5px;line-height:1.95;color:var(--ink-soft)}
.time-tag{display:inline-block;margin-right:9px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;border:1px solid;border-radius:99px;padding:2px 9px;vertical-align:1px}
.time-tag.past{color:var(--lilac-deep);border-color:var(--lilac);background:var(--lilac-soft)}
.time-tag.now{color:var(--mint-deep);border-color:var(--mint);background:var(--mint-soft)}
.time-tag.next{color:var(--rose-deep);border-color:var(--rose);background:var(--rose-soft)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.btn{display:inline-block;font-size:13px;padding:11px 22px;border-radius:99px;transition:background .2s,color .2s,border-color .2s}
.btn-primary{background:var(--lemon);color:var(--ink);border:1px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.btn-primary:hover{background:var(--lemon-soft);border-color:var(--ink)}

/* 模块索引 */
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:52px}
.sec-head h2{font-family:var(--serif);font-size:22px;font-weight:700}
.sec-head a{font-size:12px;color:var(--teal)}
.module-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}
.module-card{display:block;background:var(--card);border:1px solid var(--rule);border-radius:6px;padding:20px;transition:border-color .2s}
.module-card:hover{border-color:var(--lilac-deep)}
.module-no{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--lilac-deep)}
.module-card h3{font-size:17px;font-weight:500;margin-top:8px}
.module-card p{font-size:13px;color:var(--ink-soft);line-height:1.7;margin-top:6px}
.module-card.wide{grid-column:span 2;display:flex;align-items:center;gap:18px}
.module-card.wide .go{margin-left:auto;font-size:12px;color:var(--teal);white-space:nowrap}
.module-card.wide h3{margin-top:6px}
.module-card:nth-child(2) .module-no{color:var(--mint-deep)}
.module-card:nth-child(3) .module-no{color:var(--rose-deep)}
.module-card:nth-child(4) .module-no{color:var(--teal)}
.module-card:nth-child(5) .module-no{color:var(--lilac-deep)}
.module-card:nth-child(6) .module-no{color:var(--mint-deep)}

/* 内页头部 */
.page-head{padding-top:clamp(38px,6vh,68px)}
.page-title{font-family:var(--serif);font-size:clamp(30px,3.8vw,50px);line-height:1.24;font-weight:800;margin-top:14px;letter-spacing:-.005em}
.page-lede{font-size:14.5px;line-height:1.92;color:var(--ink-soft);margin-top:16px;max-width:46em}
.page-body{margin-top:38px}
.crumb{display:flex;align-items:center;gap:8px;margin-top:26px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-muted)}
.crumb a{color:var(--teal)}

/* 内容块 */
.sec-title{border-top:1px solid var(--rule);padding-top:20px;display:flex;align-items:baseline;gap:10px}
.sec-no{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--lilac-deep)}
.sec-title h2{font-size:clamp(20px,2vw,26px);font-family:var(--serif);font-weight:700}
.sec-desc{font-size:13px;color:var(--ink-soft);margin-top:10px;max-width:44em}

.voyage{margin-top:22px}
.voyage li{display:flex;gap:20px;padding:18px 0;border-bottom:1px solid var(--rule)}
.v-date{font-family:var(--mono);font-size:12px;color:var(--rose-deep);font-weight:600;width:130px;flex:none;letter-spacing:.04em}
.v-body h3{font-size:16px;font-weight:500}
.v-body p{font-size:13.5px;color:var(--ink-soft);line-height:1.8;margin-top:6px}

.skill-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px}
.skill{background:var(--card);border:1px solid var(--rule);border-radius:6px;padding:20px}
.skill .mono{font-size:11px;color:var(--mint-deep);letter-spacing:.12em}
.skill h3{font-size:16px;font-weight:500;margin-top:8px}
.skill p{font-size:13px;color:var(--ink-soft);line-height:1.75;margin-top:8px}

.articles{margin-top:20px;border-top:1px solid var(--rule)}
.articles li{display:flex;align-items:baseline;gap:16px;padding:16px 2px;border-bottom:1px solid var(--rule);font-size:14px}
.articles .meta{font-family:var(--mono);font-size:11px;color:var(--ink-muted);min-width:74px;letter-spacing:.06em}
.articles .tag{font-family:var(--mono);font-size:11px;color:var(--lilac-deep);background:var(--lilac-soft);padding:2px 9px;border-radius:99px;margin-left:auto;white-space:nowrap}

.identity-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px}
.identity{background:var(--card);border:1px solid var(--rule);border-radius:6px;padding:18px}
.identity .mono{font-size:11px;color:var(--rose-deep);letter-spacing:.12em}
.identity h3{font-size:15px;font-weight:500;margin-top:8px}
.identity p{font-size:12.5px;color:var(--ink-soft);line-height:1.7;margin-top:6px}

.service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:22px}
.service{background:var(--card);border:1px solid var(--rule);border-radius:6px;padding:20px}
.service .mono{font-size:11px;color:var(--lilac-deep);letter-spacing:.12em}
.service h3{font-size:16px;font-weight:500;margin-top:8px}
.service p{font-size:13px;color:var(--ink-soft);line-height:1.75;margin-top:8px}

.contact-grid{display:grid;grid-template-columns:1fr 200px;gap:32px;margin-top:22px;align-items:start}
.contact-list{display:grid;gap:14px}
.contact-list li{display:flex;gap:14px;align-items:baseline;font-size:14px}
.contact-list .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--ink-muted);min-width:64px}
.contact-list code{font-family:var(--mono);font-size:14px;color:var(--teal);border-bottom:1px dashed var(--rule)}
.qr{aspect-ratio:1/1;border:1px dashed var(--rule);border-radius:6px;display:grid;place-items:center;text-align:center;font-size:12px;color:var(--ink-soft);line-height:1.8;padding:16px;background:var(--card)}
.note{font-size:12.5px;color:var(--ink-soft);line-height:1.8;margin-top:22px}

.site-foot{margin-top:72px;border-top:1px solid var(--rule);padding-top:20px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-soft)}
.site-foot a{color:var(--teal)}

@media (max-width:1100px){
  .skill-grid,.identity-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .layout{display:block}
  .rail{position:relative;width:100%;min-height:auto;top:auto;left:auto;bottom:auto}
  .rail::after{display:none}
  .rail-inner{padding:30px 22px 34px;gap:18px;overflow:visible}
  .rail-name{font-size:54px}
  .rail-est{writing-mode:horizontal-tb;text-align:right;line-height:1.8}
  .rail-meta{margin-top:8px}
  .rail-foot{margin-top:4px}
  .content{margin-left:0;padding:0 20px 48px}
  .site-nav{gap:14px;padding:12px 0}
  .nav-tail{display:none}
  .contact-grid{grid-template-columns:1fr}
  .qr{max-width:200px}
}
@media (max-width:600px){
  .hero-title{font-size:32px}
  .page-title{font-size:28px}
  .hero-lines{font-size:14px;gap:12px}
  .hero-note{font-size:13px;padding-left:14px;gap:10px}
  .time-tag{margin-right:6px;padding:1px 7px}
  .module-grid,.skill-grid,.identity-grid,.service-grid{grid-template-columns:1fr}
  .module-card.wide{grid-column:span 1;flex-wrap:wrap}
  .module-card.wide .go{margin-left:0;width:100%}
  .voyage li{flex-direction:column;gap:6px}
  .v-date{width:auto}
  .articles li{flex-wrap:wrap;gap:8px}
  .articles .tag{margin-left:0}
  .site-nav{gap:10px}
  .nav-link{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}

/* 内容与阅读层次 */
.skip-link{position:fixed;left:16px;top:-80px;z-index:110;background:var(--paper);padding:10px 20px}.skip-link:focus{top:12px}
.btn-secondary{border:1px solid var(--rule);background:transparent}.btn-secondary:hover{border-color:var(--teal);color:var(--teal)}
.hero-caption{margin-top:26px;color:var(--ink-muted);font-size:12px;letter-spacing:.04em}
.editor-section{margin-top:56px}.editor-section .sec-head{margin-top:0}
.editor-note{padding:28px;margin-top:24px;background:var(--card);border:1px solid var(--rule);border-radius:6px}
.editor-note .mono{font-size:11px;letter-spacing:.12em;color:var(--teal)}
.editor-note h3{font-family:var(--serif);font-size:23px;margin:12px 0}.editor-note p{font-size:14px;line-height:1.9;margin:10px 0;color:var(--ink-soft)}
.editor-note .btn{margin-top:16px}.editor-note hr{border:0;border-top:1px solid var(--rule);margin:26px 0}
.text-link{display:inline-block;margin-top:18px;color:var(--teal);font-size:13px;border-bottom:1px solid var(--rule)}
.muted{color:var(--ink-muted)!important}.status-label{font-size:11px;color:var(--teal);border:1px solid var(--rule);border-radius:20px;padding:3px 10px}
.about-preview{border-top:1px solid var(--rule);padding-top:30px}.about-preview h2{font-family:var(--serif);font-size:28px;margin:14px 0}.about-preview p:not(.eyebrow){font-size:14px;color:var(--ink-soft);max-width:44em}
.contact-panel{padding:34px;background:var(--card);border:1px solid var(--rule);border-radius:6px}.wechat-id{font-family:var(--mono);font-size:clamp(28px,4vw,44px);margin:12px 0 24px;color:var(--teal)}
.service strong{font-weight:500;color:var(--ink)}
.module-card:nth-child(n) .module-no,.skill .mono,.identity .mono,.v-date,.sec-no,.eyebrow .dot{color:var(--teal)}