:root{
 --forest:#26231f;
 --forest-2:#514b43;
 --cream:#f1eee8;
 --paper:#faf8f3;
 --clay:#9d7654;
 --gold:#b49a72;
 --muted:#79736b;
 --line:rgba(38,35,31,.15);
 --serif:"Songti SC","STSong","Noto Serif SC",serif;
 --sans:"Microsoft YaHei","Noto Sans SC",sans-serif;
 --shadow:0 24px 70px rgba(38,35,31,.12)
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--forest);font-family:var(--sans);overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;z-index:99;pointer-events:none;opacity:.13;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='3' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{color:inherit}
img{display:block;width:100%}
.wrap{width:min(1420px,calc(100% - 64px));margin:auto}

.site-head{height:82px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:relative;z-index:10}

.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand-mark{width:38px;height:38px;object-fit:contain;flex:none}
.foot-brand{display:flex;align-items:center;gap:12px}
.foot-brand .brand-mark{width:34px;height:34px;filter:invert(1)}
.foot-brand-text{display:flex;flex-direction:column}
.foot-brand-text .foot-logo{font:28px var(--serif);letter-spacing:.16em;color:#fff}
.foot-brand-text p{margin:4px 0 0}
.brand-logo{display:block;width:auto;height:42px;max-width:280px;object-fit:contain}
.brand-stack{display:flex;flex-direction:column;min-width:0}
.brand-subtext{display:block;font:10px Georgia,serif;letter-spacing:.22em;margin-top:3px;color:var(--muted)}
.brand-logo-only{gap:0}
.foot-logo-image{display:block;height:42px;width:auto;max-width:280px;object-fit:contain;margin-bottom:10px}
@media(max-width:620px){.brand-logo{height:32px;max-width:200px}.foot-logo-image{height:34px;max-width:220px}}
.brand-orb{width:39px;height:39px;border:1px solid var(--forest);border-radius:50%;display:grid;place-items:center;font:19px Georgia,serif;position:relative}
.brand-orb::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--clay);position:absolute;right:-1px;top:5px}
.brand-cn{font:19px var(--serif);letter-spacing:.28em}
.brand-en{display:block;font:8px Georgia,serif;letter-spacing:.3em;margin-top:3px;color:var(--muted)}
.nav{display:flex;align-items:center;gap:32px;font-size:12px;letter-spacing:.12em}
.nav-link{position:relative}
.nav-link::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;border-bottom:1px solid;transition:.25s}
.nav-link:hover::after{right:0}
.pick-link{border:1px solid var(--forest);padding:10px 15px;display:flex;align-items:center;gap:9px;transition:.25s}
.pick-link:hover{background:var(--forest);color:#fff}
.pick-count{width:18px;height:18px;background:var(--clay);color:#fff;border-radius:50%;display:grid;place-items:center;font-size:10px}

.site-foot{background:#211f1c;color:rgba(255,255,255,.65);padding:62px 0}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:50px}
.foot-logo{font:36px var(--serif);letter-spacing:.25em;color:#fff}
.site-foot p{font:12px/2;color:rgba(255,255,255,.55)}
.foot-title{font-size:10px;letter-spacing:.25em;color:#c3a67b;margin-bottom:18px}
.foot-links{display:flex;flex-direction:column;gap:11px;font-size:12px}

.toast{position:fixed;z-index:150;left:50%;bottom:30px;transform:translate(-50%,18px);opacity:0;background:var(--forest);color:#fff;padding:12px 19px;box-shadow:var(--shadow);font-size:12px;transition:.25s;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:980px){
 .nav-link{display:none}
 .foot-grid{grid-template-columns:1fr 1fr}
 .foot-grid>div:first-child{grid-column:1/-1}
}

@media(max-width:620px){
 .site-head{height:70px}
 .brand-cn{font-size:16px}
 .pick-link{font-size:11px;padding:9px}
 .foot-grid{grid-template-columns:1fr}
 .foot-grid>div:first-child{grid-column:auto}
}

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

@media(max-width:620px){.brand-mark{width:32px;height:32px}.foot-brand .brand-mark{width:30px;height:30px}}
