:root{
--cream:#f5e6c8;
--tan:#d4a574;
--ink:#262117;
--muted:#6f5f47;
--line:rgba(38,33,23,.22);
--font:"Space Grotesk",system-ui,-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
*,*::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:var(--font);
font-size:17px;
line-height:1.75;
overflow-x:hidden;
}
body::before{
content:"";
position:fixed;
inset:0;
z-index:0;
pointer-events:none;
background:
radial-gradient(58vw 42vh at 88% -6%,rgba(212,165,116,.55),transparent 62%),
radial-gradient(46vw 34vh at -8% 28%,rgba(255,216,155,.42),transparent 66%),
radial-gradient(52vw 46vh at 104% 92%,rgba(212,165,116,.28),transparent 60%);
filter:blur(2px);
}
[hidden]{display:none!important}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0 0 14px}
::selection{background:var(--tan);color:var(--ink)}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 胶片颗粒 */
.grain{
position:fixed;
inset:0;
z-index:40;
pointer-events:none;
opacity:.2;
mix-blend-mode:multiply;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}

/* 顶部品牌行 */
.masthead{
position:relative;
z-index:2;
display:flex;
flex-wrap:wrap;
gap:12px;
align-items:center;
justify-content:space-between;
max-width:1180px;
margin:0 auto;
padding:16px clamp(16px,4vw,40px);
border-bottom:3px solid var(--ink);
}
.brand{
display:inline-flex;
align-items:center;
gap:10px;
min-height:44px;
padding:4px 0;
font-size:clamp(20px,3vw,26px);
font-weight:700;
letter-spacing:.2em;
text-decoration:none;
}
.brand::after{
content:"";
width:38px;
height:15px;
background:var(--tan);
border:2px solid var(--ink);
}
.brand:hover::after{background:var(--ink)}

/* 搜索 */
.lookup{
display:flex;
border:2px solid var(--ink);
background:var(--cream);
min-width:0;
max-width:100%;
}
.lookup input{
border:0;
background:transparent;
font:inherit;
font-size:16px;
color:var(--ink);
padding:8px 12px;
width:132px;
min-width:0;
}
.lookup input::placeholder{color:var(--muted)}
.lookup input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--tan)}
.lookup button{
border:0;
border-left:2px solid var(--ink);
background:var(--ink);
color:var(--cream);
font:inherit;
font-size:16px;
font-weight:600;
letter-spacing:.08em;
padding:0 14px;
min-height:44px;
cursor:pointer;
transition:background .18s,color .18s;
}
.lookup button:hover{background:var(--tan);color:var(--ink)}

/* 主栅格 */
.wrap{
position:relative;
z-index:2;
display:grid;
grid-template-columns:242px minmax(0,1fr);
gap:clamp(24px,5vw,64px);
align-items:start;
max-width:1180px;
margin:0 auto;
padding:clamp(20px,4vw,44px) clamp(16px,4vw,40px) 84px;
}

/* 左侧栏 */
.rail{
display:flex;
flex-direction:column;
gap:14px;
min-width:0;
position:sticky;
top:26px;
}
.rail-title{
margin:0;
font-size:13px;
font-weight:700;
letter-spacing:.32em;
text-transform:uppercase;
}
.subtitle{
margin:0;
font-size:15px;
line-height:1.65;
color:var(--muted);
max-width:34ch;
}
.rail nav{min-width:0;max-width:100%}
.rail nav ul{
list-style:none;
margin:0;
padding:0;
display:grid;
gap:3px;
}
.rail nav li{animation:fadeUp .5s both}
.rail nav li:nth-child(1){animation-delay:.04s}
.rail nav li:nth-child(2){animation-delay:.08s}
.rail nav li:nth-child(3){animation-delay:.12s}
.rail nav li:nth-child(4){animation-delay:.16s}
.rail nav li:nth-child(5){animation-delay:.2s}
.rail nav li:nth-child(6){animation-delay:.24s}
.rail nav li:nth-child(7){animation-delay:.28s}
.rail nav a{
display:flex;
align-items:center;
min-height:44px;
padding:6px 12px;
font-size:16px;
line-height:1.4;
text-decoration:none;
background:rgba(212,165,116,.26);
border-left:3px solid transparent;
transition:background .18s,color .18s,border-color .18s,transform .18s;
}
.rail nav a:hover{
background:var(--ink);
color:var(--cream);
border-left-color:var(--tan);
transform:translateX(2px);
}

/* 正文 */
.stage{min-width:0}
.reel{min-width:0;animation:fadeUp .55s both}
.hero{
position:relative;
display:flex;
align-items:center;
gap:clamp(12px,3vw,26px);
min-height:45vh;
padding:clamp(20px,4vw,40px) clamp(14px,3vw,32px);
border:3px solid var(--ink);
background-image:radial-gradient(var(--tan) 1.1px,transparent 1.1px);
background-size:20px 20px;
overflow:hidden;
}
.hero::after{
content:"";
position:absolute;
inset:-10% -20%;
pointer-events:none;
background:linear-gradient(112deg,transparent 52%,rgba(255,222,166,.75) 74%,rgba(212,165,116,.25) 86%,transparent 100%);
animation:leak 9s ease-in-out infinite alternate;
}
.hero-ico{
position:relative;
z-index:1;
flex:0 0 auto;
display:grid;
place-items:center;
width:62px;
height:62px;
background:var(--tan);
border:3px solid var(--ink);
color:var(--ink);
}
.hero h1{
position:relative;
z-index:1;
margin:0;
font-size:clamp(2rem,7.4vw,4.3rem);
font-weight:700;
line-height:1.06;
letter-spacing:-.02em;
transition:transform .28s ease;
}
.hero:hover h1{transform:skewX(-2.5deg)}

.reel section{
padding:clamp(24px,4vw,44px) 0;
border-bottom:2px solid var(--line);
scroll-margin-top:84px;
}
.reel section:last-child{border-bottom:0}
.reel h2{
display:inline-block;
margin:0 0 16px;
padding:6px 14px;
background:var(--ink);
color:var(--cream);
font-size:clamp(19px,2.5vw,25px);
line-height:1.4;
letter-spacing:.02em;
}
.reel h3{
margin:22px 0 10px;
font-size:18px;
letter-spacing:.02em;
}
.reel ul,.reel ol{margin:0 0 16px;padding-left:1.25em}
.reel li{margin-bottom:6px}
.reel a{
color:#7c4a1b;
text-decoration:underline;
text-decoration-thickness:1px;
text-underline-offset:3px;
transition:background .16s,color .16s;
}
.reel a:hover{background:var(--tan);color:var(--ink)}
.reel strong,.reel b{font-weight:700}
.reel blockquote{
margin:0 0 16px;
padding:12px 16px;
border-left:4px solid var(--tan);
background:rgba(212,165,116,.22);
}
.reel img{border:3px solid var(--ink);filter:sepia(.16) saturate(.9);margin-bottom:16px}
.reel table{width:100%;border-collapse:collapse;margin-bottom:16px;font-size:16px}
.reel th,.reel td{border:2px solid var(--line);padding:8px 10px;text-align:left}
.reel code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;background:rgba(38,33,23,.1);padding:1px 5px}

/* 页脚 */
.colophon{
position:relative;
z-index:2;
display:grid;
grid-template-columns:1.5fr 1fr 1fr;
gap:clamp(20px,4vw,48px);
align-items:start;
background:var(--ink);
color:var(--cream);
padding:clamp(28px,5vw,56px) clamp(16px,4vw,40px);
}
.colophon section{min-width:0}
.colophon a{color:var(--cream);text-decoration:none}
.f-brand a{
display:inline-block;
padding:4px 0;
font-size:clamp(34px,9vw,74px);
font-weight:700;
line-height:.95;
letter-spacing:-.03em;
transition:color .2s;
}
.f-brand a:hover{color:var(--tan)}
.f-nav ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.f-nav a{
display:flex;
align-items:center;
min-height:44px;
font-size:16px;
border-bottom:1px solid rgba(245,230,200,.22);
transition:color .16s,padding-left .16s;
}
.f-nav a:hover{color:var(--tan);padding-left:6px}
.f-meta{
display:flex;
flex-wrap:wrap;
gap:10px;
align-items:center;
justify-content:space-between;
}
.f-meta p{margin:0;font-size:15px;letter-spacing:.06em;color:rgba(245,230,200,.78)}
.f-meta a{
display:inline-flex;
align-items:center;
min-height:44px;
padding:0 12px;
font-size:15px;
border:2px solid rgba(245,230,200,.55);
transition:border-color .16s,color .16s;
}
.f-meta a:hover{border-color:var(--tan);color:var(--tan)}

@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes leak{from{transform:translateX(-5%) skewX(-3deg)}to{transform:translateX(5%) skewX(3deg)}}

@media (max-width:760px){
body{font-size:16px}
.wrap{grid-template-columns:minmax(0,1fr);gap:20px;padding-top:16px;padding-bottom:56px}
.rail{
position:static;
order:1;
gap:10px;
padding-bottom:14px;
border-bottom:2px solid var(--line);
}
.rail-title{order:1}
.rail nav{order:2;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.rail nav ul{display:flex;gap:8px}
.rail nav a{
white-space:nowrap;
border-left:0;
border-bottom:3px solid transparent;
padding:8px 12px;
}
.rail nav a:hover{transform:none;border-bottom-color:var(--tan)}
.subtitle{order:3;max-width:none}
.hero{min-height:34vh;padding:20px 14px;gap:12px}
.hero-ico{width:50px;height:50px}
.hero-ico svg{width:24px;height:24px}
.hero h1{font-size:clamp(1.9rem,9vw,2.9rem)}
.colophon{grid-template-columns:minmax(0,1fr)}
.lookup input{width:120px}
}

@media (max-width:400px){
.masthead{padding:12px 16px}
.lookup{width:100%}
.lookup input{flex:1 1 auto;width:auto}
}

@media (prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important}
html{scroll-behavior:auto}
}

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