:root{
--paper:#fdfbf7;
--paper-2:#f5f5f5;
--ink:#1a1a1a;
--rule:#dcd7ce;
--mute:#57534b;
--sans:"Outfit","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
--serif:"Songti SC",Georgia,"Times New Roman",serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
margin:0;
background:var(--paper);
color:var(--ink);
font-family:var(--serif);
font-size:17px;
line-height:1.75;
transition:none;
}
body::after{
content:"";
position:fixed;
inset:0;
z-index:120;
pointer-events:none;
opacity:.26;
mix-blend-mode:multiply;
background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration:none}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.skip{position:absolute;left:12px;top:-70px;z-index:70;background:var(--ink);color:var(--paper);padding:12px 16px;font-family:var(--sans);font-size:16px}
.skip:focus{top:12px}

/* 底部固定条 */
.bar{
position:fixed;
left:0;right:0;bottom:0;
z-index:60;
display:grid;
grid-template-columns:1fr auto 1fr auto;
align-items:center;
gap:6px;
padding:8px 12px calc(8px + env(safe-area-inset-bottom));
background:var(--paper);
border-top:3px solid var(--ink);
}
.bar-list{display:flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none;min-width:0;overflow-x:auto;scrollbar-width:none}
.bar-list::-webkit-scrollbar{display:none}
.bar-list-l{justify-content:flex-end}
.bar-list-r{justify-content:flex-start}
.bar-list a{
display:inline-flex;align-items:center;
min-height:44px;padding:0 8px;
font-family:var(--sans);font-size:16px;font-weight:500;
white-space:nowrap;border-bottom:2px solid transparent;
}
.bar-list a:hover,.bar-list a:focus-visible{background:var(--paper-2);border-bottom-color:var(--ink)}
.brand{
justify-self:center;
display:inline-flex;align-items:center;min-height:44px;
padding:0 12px;
border:2px solid var(--ink);
font-family:var(--sans);font-weight:900;font-size:17px;letter-spacing:.14em;
white-space:nowrap;
}
.burger{
display:inline-flex;align-items:center;gap:8px;
min-height:44px;padding:0 10px;
background:var(--paper);border:2px solid var(--ink);
color:var(--ink);font-family:var(--sans);font-size:16px;
cursor:pointer;
}
.burger-lines{position:relative;display:block;width:18px;height:2px;background:var(--ink)}
.burger-lines::before,.burger-lines::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink)}
.burger-lines::before{top:-6px}
.burger-lines::after{top:6px}

html.menu-open{overflow:hidden}
html.menu-open body{overflow:hidden}
html.menu-open .bar{
top:0;bottom:0;
display:grid;
grid-template-columns:1fr auto;
align-content:start;
gap:0 10px;
padding:14px 14px 40px;
overflow-y:auto;
background:var(--paper);
border-top:none;
}
html.menu-open .brand{order:-2;justify-self:start}
html.menu-open .burger{order:-1;justify-self:end}
html.menu-open .burger-lines{background:transparent}
html.menu-open .burger-lines::before{top:0;transform:rotate(45deg)}
html.menu-open .burger-lines::after{top:0;transform:rotate(-45deg)}
html.menu-open .bar-list{grid-column:1/-1;flex-direction:column;align-items:stretch;overflow:visible;gap:0}
html.menu-open .bar-list-l{margin-top:20px;border-top:3px solid var(--ink)}
html.menu-open .bar-list a{min-height:54px;padding:0;font-size:22px;font-weight:700;border-bottom:1px solid var(--rule);justify-content:flex-start}

/* 头部区块 */
main{position:relative;z-index:1}
.hero{
position:relative;
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:center;
gap:28px;
min-height:70vh;
max-width:1180px;
margin:0 auto;
padding:56px 24px 44px;
overflow:hidden;
border-bottom:3px solid var(--ink);
}
.hero-copy{position:relative;z-index:1;max-width:54ch}
.hero-h1{
margin:0 0 12px;
font-family:var(--sans);font-weight:900;
font-size:clamp(30px,5.6vw,58px);
line-height:1.06;letter-spacing:-.015em;
}
.hero-brand{margin:0 0 14px;font-family:var(--sans);font-weight:500;font-size:16px;letter-spacing:.34em}
.subtitle{margin:0;font-size:17px;line-height:1.7;color:var(--mute);max-width:46ch}
.hero-fig{margin:0;position:relative;z-index:1}
.hero-fig img{width:200px;border:3px solid var(--ink)}
.ghost{
position:absolute;right:-6px;bottom:-22px;z-index:0;
font-family:var(--sans);font-weight:900;
font-size:clamp(90px,22vw,220px);line-height:.72;letter-spacing:-.05em;
color:transparent;-webkit-text-stroke:2px var(--rule);
pointer-events:none;user-select:none;
}

/* 正文骨架 */
.wrap{
display:grid;
grid-template-columns:216px minmax(0,1fr);
gap:44px;
align-items:start;
max-width:1180px;
margin:0 auto;
padding:40px 24px 72px;
}
.rail{position:sticky;top:24px;border-top:3px solid var(--ink);padding-top:12px}
.rail-h2{margin:0;font-family:var(--sans);font-weight:900;font-size:16px;letter-spacing:.26em}
.rail .subtitle{font-size:16px;margin:2px 0 14px}
.rail-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.rail-list li{border-bottom:1px solid var(--rule)}
.rail-list a{display:flex;align-items:center;min-height:44px;padding:0;font-family:var(--sans);font-size:16px}
.rail-list a:hover{background:var(--paper-2);padding-left:8px;border-left:3px solid var(--ink)}

.col{min-width:0}
.prose{font-size:17px;line-height:1.85;max-width:68ch}
.prose article{padding:26px 0 34px;border-bottom:3px solid var(--ink);scroll-margin-top:20px;scroll-margin-bottom:130px}
.prose article:first-child{padding-top:0}
.prose h2{
margin:0 0 10px;
font-family:var(--sans);font-weight:900;
font-size:clamp(22px,3vw,30px);line-height:1.18;letter-spacing:-.01em;
}
.prose h3{margin:26px 0 8px;font-family:var(--sans);font-size:19px;line-height:1.3}
.prose h2+p,.prose h3+p{margin-top:0}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px}
.prose li{margin:0 0 8px}
.prose a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.prose a:hover{background:var(--ink);color:var(--paper);text-decoration:none}
.prose img{border:3px solid var(--ink);margin:18px 0}
.prose blockquote{margin:20px 0;padding:4px 0 4px 18px;border-left:6px solid var(--ink);color:var(--mute)}
.prose blockquote p:last-child{margin-bottom:0}
.prose hr{border:none;border-top:1px solid var(--rule);margin:24px 0}
.prose table{width:100%;border-collapse:collapse;margin:0 0 18px}
.prose th,.prose td{border:1px solid var(--rule);padding:8px 10px;text-align:left}

/* 页脚 */
.foot{
position:relative;z-index:1;
margin-top:24px;
border-top:3px solid var(--ink);
background:var(--paper-2);
padding:40px 24px calc(128px + env(safe-area-inset-bottom));
}
.foot-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;max-width:1180px;margin:0 auto}
.foot address{font-family:var(--sans);font-style:normal;font-weight:900;font-size:22px;letter-spacing:.12em}
.foot-form{margin-top:18px;max-width:340px}
.foot-form label{display:block;margin-bottom:6px;font-family:var(--sans);font-size:16px;letter-spacing:.2em}
.foot-row{display:flex}
.foot-row input{
flex:1 1 auto;min-width:0;min-height:46px;padding:0 12px;
border:2px solid var(--ink);border-radius:0;
background:var(--paper);color:var(--ink);
font-family:var(--sans);font-size:16px;
}
.foot-row button{
flex:0 0 auto;min-height:46px;padding:0 18px;
border:2px solid var(--ink);border-left:none;border-radius:0;
background:var(--ink);color:var(--paper);
font-family:var(--sans);font-size:16px;cursor:pointer;
}
.foot-row button:hover{background:var(--paper);color:var(--ink)}
.foot-b ul{list-style:none;margin:0;padding:0;columns:2;column-gap:24px}
.foot-b li{break-inside:avoid}
.foot-b a{display:flex;align-items:center;min-height:40px;border-bottom:1px solid var(--rule);font-family:var(--sans);font-size:16px}
.foot-b a:hover{background:var(--ink);color:var(--paper)}
.copy{
max-width:1180px;margin:30px auto 0;padding-top:14px;
border-top:1px solid var(--rule);
font-family:var(--sans);font-size:16px;letter-spacing:.08em;
}

@media (max-width:860px){
.hero{grid-template-columns:1fr;min-height:62vh;padding:40px 18px 34px;gap:18px}
.hero-fig{order:2}
.hero-fig img{width:150px}
.ghost{bottom:-16px}
.wrap{grid-template-columns:1fr;gap:26px;padding:28px 18px 56px}
.rail{position:static}
.rail-list{columns:2;column-gap:16px;border-top:1px solid var(--rule)}
.rail-list li{border-bottom:1px solid var(--rule)}
.rail-list a{padding:0 4px}
.foot{padding:32px 18px calc(130px + env(safe-area-inset-bottom))}
.foot-grid{grid-template-columns:1fr;gap:26px}
.bar{padding:6px 10px calc(6px + env(safe-area-inset-bottom));gap:4px}
.bar-list a{padding:0 6px}
.prose article{padding:22px 0 30px}
}
@media (max-width:430px){
.brand{font-size:16px;letter-spacing:.08em;padding:0 9px}
.burger{padding:0 10px}
.foot-b ul{columns:1}
}

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

button[aria-expanded]{min-width:44px;min-height:44px}