:root{
--red:#E63329;
--ink:#111111;
--cream:#F7F1E3;
--soft:#EFE6D2;
--muted:#6E6558;
--pad:clamp(1.25rem,4vw,4rem);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
margin:0;
background:var(--cream);
color:var(--ink);
font-family:'Rubik','Outfit',system-ui,-apple-system,'Segoe UI','Noto Sans SC',sans-serif;
font-size:17px;
line-height:1.7;
font-weight:400;
}
h1,h2,h3,h4{
font-family:'Outfit','Rubik',system-ui,sans-serif;
font-weight:700;
line-height:1.12;
letter-spacing:-.015em;
margin:0;
}
img{display:block;max-width:100%;height:auto}
p{margin:0 0 1rem}
a{color:var(--red)}
a:focus-visible{outline:3px solid var(--red);outline-offset:2px}
div[id],[id]{scroll-margin-top:84px}

/* 侧栏导航 */
.site-nav{
position:fixed;
top:0;left:0;bottom:0;
width:220px;
display:flex;
flex-direction:column;
gap:1.1rem;
padding:1.4rem 1rem 1.6rem;
background:var(--ink);
color:var(--cream);
z-index:30;
overflow-y:auto;
}
.brand{
display:flex;
align-items:center;
justify-content:center;
width:52px;height:52px;
flex:0 0 52px;
background:var(--red);
color:var(--cream);
text-decoration:none;
font-family:'Outfit',sans-serif;
font-weight:700;
font-size:18px;
line-height:1;
letter-spacing:-.02em;
}
.brand img{width:100%;height:100%;object-fit:cover}
.brand:hover{background:var(--cream);color:var(--ink)}
.site-nav ol{
list-style:none;
margin:0;padding:0;
display:flex;
flex-direction:column;
gap:.12rem;
}
.site-nav li{
display:flex;
align-items:center;
gap:.5rem;
}
.site-nav li::before{
content:"";
width:7px;height:7px;
flex:0 0 7px;
background:var(--red);
transition:transform .16s ease;
}
.site-nav li:hover::before{transform:scale(1.9)}
.site-nav li a{
flex:1 1 auto;
display:flex;
align-items:center;
min-height:44px;
padding:.35rem .5rem;
color:var(--cream);
text-decoration:none;
font-size:16px;
font-weight:500;
line-height:1.25;
border-left:3px solid transparent;
transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.site-nav li a:hover{background:var(--red);color:var(--cream);border-left-color:var(--cream)}
.site-nav a:focus-visible{outline:3px solid var(--cream);outline-offset:-3px}

/* 主体 */
main{display:block}
main > div{
padding:3.2rem var(--pad);
border-top:3px solid var(--ink);
}
main > div:nth-of-type(even){background:var(--soft)}

.hero{
border-top:0;
min-height:100vh;
min-height:100svh;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:2.4rem;
padding:4rem var(--pad) 3rem;
background:var(--ink);
color:var(--cream);
text-align:center;
}
.hero-copy{max-width:900px}
.hero h1{
font-size:clamp(2.05rem,7vw,4.5rem);
line-height:1.02;
letter-spacing:-.03em;
margin:0 auto;
max-width:22ch;
}
.hero .subtitle{
margin:1.2rem auto 0;
max-width:46ch;
color:#CBC1AF;
font-size:clamp(1rem,1.8vw,1.15rem);
line-height:1.6;
font-weight:400;
}
.hero-figure{
margin:0;
width:100%;
max-width:880px;
background:var(--red);
align-self:stretch;
}
.hero-figure .hero-img{
width:100%;
aspect-ratio:16/9;
object-fit:cover;
}

/* 正文排版 */
main h2{
font-size:clamp(1.45rem,3.4vw,2.15rem);
border-left:10px solid var(--red);
padding-left:.7rem;
margin-bottom:.55rem;
}
main h3{font-size:clamp(1.15rem,2.2vw,1.4rem);margin:1.7rem 0 .5rem}
main p.subtitle{
color:var(--muted);
font-size:1.02rem;
font-weight:500;
margin:0 0 1.5rem;
}
main ul,main ol{pargin:0}
main ul,main ol{margin:0 0 1.2rem;padding-left:1.4rem}
main li{margin:0 0 .45rem}
main li::marker{color:var(--red);font-weight:700}
main strong{font-weight:700}
main blockquote{
margin:1.6rem 0;
padding:1rem 1.2rem;
border-left:8px solid var(--red);
background:var(--soft);
}
main blockquote p:last-child{margin:0}
main figure{margin:1.8rem 0}
main figcaption{font-size:.95rem;color:var(--muted);margin-top:.6rem}
main table{
width:100%;
border-collapse:collapse;
display:block;
overflow-x:auto;
font-size:.97rem;
margin:0 0 1.4rem;
}
main th,main td{border:2px solid var(--ink);padding:.5rem .7rem;text-align:left}
main th{background:var(--ink);color:var(--cream)}
main hr{border:0;border-top:3px solid var(--ink);margin:2rem 0}
main a{text-decoration:underline;text-underline-offset:3px;font-weight:500}

/* 侧边栏 */
.site-aside{
background:var(--ink);
color:var(--cream);
padding:1.4rem 1.2rem 1.2rem;
margin:2.2rem 1.25rem;
}
.site-aside h2{
font-size:1.05rem;
background:var(--red);
color:var(--cream);
display:inline-block;
padding:.2rem .7rem;
border-left:0;
margin:0;
letter-spacing:.02em;
}
.site-aside .subtitle{
color:#AFA695;
font-size:.95rem;
font-weight:500;
margin:.9rem 0 1rem;
}
.site-aside ol{
list-style:none;
margin:0;
padding:0;
border-top:2px solid #2e2e2e;
}
.site-aside li{border-bottom:2px solid #2e2e2e;margin:0}
.site-aside li a{
display:flex;
align-items:center;
min-height:42px;
padding:.4rem .2rem;
color:var(--cream);
text-decoration:none;
font-size:.98rem;
font-weight:500;
transition:background .16s ease,color .16s ease,padding-left .16s ease;
}
.site-aside li a:hover{background:var(--red);color:var(--cream);padding-left:.6rem}
.site-aside .to-top{margin:1rem 0 0}
.site-aside .to-top a{
display:inline-flex;
align-items:center;
min-height:40px;
color:var(--red);
font-weight:700;
text-decoration:none;
font-size:.98rem;
}
.site-aside .to-top a:hover{color:var(--cream)}

/* 页脚 */
footer{
display:grid;
grid-template-columns:1fr auto auto;
align-items:end;
gap:1.4rem;
padding:2.6rem var(--pad);
background:var(--ink);
color:var(--cream);
border-top:10px solid var(--red);
}
footer p,footer small{margin:0}
.foot-brand{
font-family:'Outfit','Rubik',sans-serif;
font-weight:700;
font-size:clamp(2.2rem,8vw,4.8rem);
line-height:.86;
letter-spacing:-.03em;
color:var(--red);
}
.foot-link a{
display:inline-flex;
align-items:center;
min-height:32px;
padding:.2rem 0;
color:var(--cream);
text-decoration:none;
border-bottom:2px solid var(--red);
font-weight:500;
}
.foot-link a:hover{color:var(--red)}
.foot-copy{color:#9E9584;font-size:.95rem}

/* 动效 */
.js main > div,.js .site-aside{
opacity:0;
transform:translateY(18px);
transition:opacity .45s ease,transform .45s ease;
}
.js .is-in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto}
.js main > div,.js .site-aside{opacity:1;transform:none;transition:none}
}

/* 宽屏两栏 */
@media (min-width:1000px){
body{padding:0 0 0 220px}
main{
display:grid;
grid-template-columns:minmax(0,1fr) 300px;
align-items:start;
}
.hero{grid-column:1 / -1}
.site-aside{
grid-column:2;
grid-row:2 / span 99;
align-self:start;
position:sticky;
top:1.6rem;
margin:3.2rem 1.4rem 3.2rem 0;
}
}

/* 窄屏 */
@media (max-width:999px){
body{padding-top:62px}
.site-nav{
top:0;left:0;right:0;bottom:auto;
width:auto;
flex-direction:row;
align-items:center;
gap:.5rem;
padding:.45rem .6rem;
overflow:visible;
}
.brand{width:42px;height:42px;flex:0 0 42px;font-size:15px}
.site-nav ol{
flex-direction:row;
flex:1 1 auto;
min-width:0;
overflow-x:auto;
gap:.15rem;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
}
.site-nav ol::-webkit-scrollbar{display:none}
.site-nav li{flex:0 0 auto}
.site-nav li::before{display:none}
.site-nav li a{
border-left:0;
border-bottom:3px solid transparent;
padding:.4rem .6rem;
white-space:nowrap;
font-size:16px;
justify-content:center;
}
.site-nav li a:hover{border-bottom-color:var(--cream)}
.hero{
min-height:0;
padding:2.6rem 1.25rem 2rem;
gap:1.8rem;
}
.hero h1{font-size:clamp(1.9rem,8.5vw,2.6rem);max-width:16ch}
.hero .subtitle{font-size:1rem}
.hero-figure{max-width:none}
main > div{padding:2.4rem 1.25rem}
main h2{font-size:1.5rem}
.site-aside{margin:1.6rem 1.25rem}
footer{
grid-template-columns:1fr;
gap:.9rem;
padding:2rem 1.25rem;
border-top-width:8px;
}
.foot-brand{font-size:clamp(2.4rem,16vw,3.4rem)}
}

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