:root{
--ink:#000;
--paper:#fff;
--gutter:clamp(1.1rem,4vw,3.2rem);
--rail:252px;
--strip:36px;
}
*,*::before,*::after{box-sizing:border-box}
html{
scroll-behavior:smooth;
-webkit-text-size-adjust:100%;
text-size-adjust:100%;
}
body{
margin:0;
background:var(--paper);
color:var(--ink);
font:400 17px/1.72 "Source Sans 3","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
letter-spacing:.012em;
}
img{display:block;max-width:100%;height:auto;filter:grayscale(1) contrast(1.06)}
a{color:inherit}
h1,h2,h3{
margin:0;
font-family:"Bebas Neue","Source Sans 3","PingFang SC","Microsoft YaHei",sans-serif;
font-weight:700;
line-height:1;
letter-spacing:-.01em;
}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.strip :focus-visible,.hero :focus-visible{outline-color:var(--paper)}

/* 顶部细条 */
.strip{
position:fixed;
top:0;left:0;right:0;
height:var(--strip);
z-index:60;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 var(--gutter);
background:var(--ink);
color:var(--paper);
}
.strip-k{
font-size:16px;
font-weight:500;
letter-spacing:.3em;
line-height:1;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.strip-top{
display:inline-flex;
align-items:center;
min-height:var(--strip);
padding:0 .2rem;
color:var(--paper);
text-decoration:none;
font-size:16px;
letter-spacing:.1em;
border-bottom:2px solid transparent;
}
.strip-top:hover{border-bottom-color:var(--paper)}

/* 左侧固定竖排栏 */
.rail{
position:fixed;
top:var(--strip);
bottom:0;
left:0;
width:var(--rail);
z-index:50;
display:flex;
flex-direction:column;
gap:1.5rem;
padding:1.5rem 1.15rem;
background:var(--paper);
border-right:2px solid var(--ink);
overflow-y:auto;
}
.brand{
display:flex;
align-items:center;
gap:.55rem;
padding-bottom:.7rem;
border-bottom:6px solid var(--ink);
text-decoration:none;
font-family:"Bebas Neue","Source Sans 3","PingFang SC",sans-serif;
font-size:1.42rem;
font-weight:700;
line-height:1.02;
letter-spacing:.03em;
}
.brand-img{width:44px;height:44px;object-fit:cover}
.pills{display:flex;flex-direction:column;gap:.5rem}
.pill{
display:flex;
align-items:center;
min-height:44px;
padding:.45rem 1rem;
border:2px solid var(--ink);
border-radius:999px;
text-decoration:none;
font-size:16px;
font-weight:600;
letter-spacing:.02em;
transition:background .18s ease,color .18s ease,transform .18s ease;
}
.pill:hover,.pill:focus-visible{background:var(--ink);color:var(--paper);transform:translateX(4px)}

main,.foot{margin-left:var(--rail)}
main{padding-top:var(--strip)}

/* 首屏 */
.hero{
position:relative;
display:flex;
align-items:flex-end;
height:45vh;
min-height:300px;
overflow:hidden;
background:var(--ink);
}
.hero-fig{
position:absolute;
inset:-10% 0;
margin:0;
z-index:0;
}
.hero-img{
width:100%;
height:100%;
object-fit:cover;
transform:scale(1.06);
will-change:transform;
}
.hero-mask{
position:absolute;
inset:0;
z-index:1;
background:linear-gradient(92deg,rgba(0,0,0,.86),rgba(0,0,0,.34) 62%,rgba(0,0,0,.6));
}
.hero-h1{
position:relative;
z-index:2;
max-width:22ch;
margin:0;
padding:0 var(--gutter) clamp(1.1rem,4vh,2.4rem);
color:var(--paper);
font-size:clamp(2rem,5.4vw,4.5rem);
line-height:.94;
letter-spacing:-.025em;
animation:rise .85s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes rise{
from{opacity:0;transform:translateY(22px)}
to{opacity:1;transform:none}
}

/* 正文区：左aside + 右正文 */
.stage{
display:grid;
grid-template-columns:1fr;
gap:var(--gutter);
padding:clamp(1.4rem,4vw,3rem) var(--gutter) clamp(2rem,5vw,4rem);
}
@media (min-width:1000px){
.stage{
grid-template-columns:216px minmax(0,1fr);
gap:clamp(2rem,5vw,4.6rem);
}
}
.railnav nav{position:sticky;top:calc(var(--strip) + 1.4rem)}
.railnav ul{
list-style:none;
margin:0;
padding:0;
border-top:3px solid var(--ink);
}
.railnav li{border-bottom:1px solid var(--ink)}
.railnav a{
display:flex;
align-items:center;
min-height:44px;
padding:.35rem .1rem;
text-decoration:none;
font-size:16px;
font-weight:600;
transition:background .16s ease,color .16s ease,padding .16s ease;
}
.railnav a:hover,.railnav a:focus-visible{background:var(--ink);color:var(--paper);padding-left:.6rem}

.article{max-width:66ch;min-width:0}
.art-h2{
font-family:"Source Sans 3","PingFang SC",sans-serif;
font-size:1rem;
letter-spacing:.34em;
font-weight:700;
border-top:3px solid var(--ink);
padding-top:.7rem;
}
.subtitle{
margin:.85rem 0 2.2rem;
font-size:clamp(1.05rem,1.7vw,1.3rem);
line-height:1.58;
font-weight:500;
}

/* 正文片段 */
.content>section{
margin:0 0 clamp(2rem,5vw,3.4rem);
padding-top:1.5rem;
border-top:2px solid var(--ink);
scroll-margin-top:calc(var(--strip) + 1rem);
transition:opacity .55s ease,transform .55s ease;
}
.content>section.pending{opacity:0;transform:translateY(18px)}
.content>section:first-child{border-top:0;padding-top:0}
.content h2{
font-size:clamp(1.6rem,3.1vw,2.5rem);
line-height:1.05;
letter-spacing:-.015em;
margin:0 0 .8rem;
}
.content h3{font-size:1.3rem;line-height:1.25;margin:1.7rem 0 .5rem}
.content p{margin:0 0 1.1rem}
.content ul,.content ol{margin:0 0 1.2rem;padding-left:1.25rem}
.content li{margin:.35rem 0}
.content a{
text-decoration:underline;
text-decoration-thickness:2px;
text-underline-offset:3px;
}
.content a:hover{background:var(--ink);color:var(--paper);text-decoration:none}
.content blockquote{
margin:1.9rem 0;
padding:.6rem 0 .6rem 1.3rem;
border-left:9px solid var(--ink);
font-size:1.16rem;
line-height:1.5;
font-weight:600;
}
.content blockquote p:last-child{margin-bottom:0}
.content figure{margin:1.9rem 0}
.content figcaption{
margin-top:.5rem;
padding-top:.45rem;
border-top:1px solid var(--ink);
font-size:16px;
line-height:1.5;
}
.content hr{border:0;border-top:2px solid var(--ink);margin:2rem 0}
.content>section:first-child>p:first-of-type::first-letter{
float:left;
padding:.06em .12em 0 0;
font-size:3.9em;
line-height:.78;
font-weight:700;
}

/* 页脚 */
.foot{
display:grid;
grid-template-columns:1fr;
gap:1.9rem;
border-top:5px solid var(--ink);
padding:2.3rem var(--gutter) 3rem;
}
.foot address{
font-style:normal;
font-size:1.15rem;
font-weight:700;
line-height:1.3;
letter-spacing:.02em;
}
.foot .copy{
margin:1.1rem 0 0;
font-size:16px;
font-weight:400;
letter-spacing:.05em;
}
.foot nav dl{
display:grid;
grid-template-columns:1fr auto;
gap:.05rem 1rem;
margin:0;
}
.foot dt,.foot dd{margin:0}
.foot dt a,.foot dd a,.foot-list a{
display:inline-flex;
align-items:center;
min-height:40px;
text-decoration:none;
font-size:16px;
padding:.15rem 0;
}
.foot dt a:hover,.foot dd a:hover,.foot-list a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.foot dd a{font-weight:700}
.foot-list{list-style:none;margin:0;padding:0}

@media (min-width:1000px){
.foot{grid-template-columns:1.1fr 1.15fr 1fr;gap:clamp(1.6rem,4vw,3rem)}
}

/* 移动端 */
@media (max-width:999px){
:root{--strip:44px;--rail:0px}
.strip{position:sticky;top:0}
.rail{
position:static;
width:auto;
border-right:0;
border-bottom:2px solid var(--ink);
padding:1rem var(--gutter) 1.2rem;
gap:1.1rem;
overflow:visible;
}
.brand{border-bottom-width:4px;font-size:1.3rem}
.pills{flex-direction:row;flex-wrap:wrap;gap:.45rem}
.pill{min-height:44px;padding:.4rem .85rem;font-size:16px}
.pill:hover{transform:none}
main,.foot{margin-left:0}
main{padding-top:0}
.hero{height:42vh;min-height:264px}
.stage{padding-top:1.6rem}
.railnav nav{position:static}
.railnav ul{display:grid;grid-template-columns:1fr 1fr;border-top:2px solid var(--ink)}
.railnav li{border-bottom:1px solid var(--ink)}
.railnav li:nth-child(odd){border-right:1px solid var(--ink)}
.railnav a{padding:.35rem .55rem;font-size:16px}
.article{max-width:none}
.content>section:first-child>p:first-of-type::first-letter{font-size:3.2em}
}

@media (max-width:420px){
.strip-k{letter-spacing:.2em}
.hero-h1{font-size:2rem}
}

@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.hero-h1{animation:none}
.content>section{transition:none}
.content>section.pending{opacity:1;transform:none}
.hero-img{transform:none}
.pill,.railnav a{transition:none}
}

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