*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0}

:root{
  --brand-red:#D7263D;
  --stripe-white:#F8F9FA;
  --dusk:#3A2E5A;
  --dusk-light:#6A5ACD;
  --desert-gold:#F4A261;
  --dark-red:#A4161A;
  --pitch:#2A9D8F;
  --ink:#1A1A2E;
  --gray-bg:#F1F3F5;
  --font-score:Oswald,Impact,"Arial Narrow","Helvetica Neue",sans-serif;
  --font-head:"Noto Sans SC","PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
  --font-body:"Noto Sans SC","PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
  --font-mono:"JetBrains Mono","Courier New",Courier,monospace;
  --border-w:3px;
  --shadow-hard:6px 6px 0 rgba(26,26,46,.9);
  --shadow-soft:7px 7px 0 rgba(58,46,90,.18);
}

body{
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.7;
  font-weight:400;
  color:var(--ink);
  background:var(--stripe-white);
}
h1,h2,h3{font-family:var(--font-head);font-weight:700;line-height:1.28;color:var(--dusk)}
strong{font-weight:700}
:focus-visible{outline:3px solid var(--desert-gold);outline-offset:3px}

/* ===== 布局容器 ===== */
.shell{width:100%;max-width:1200px;margin-inline:auto;padding-inline:20px}
.section{padding-block:clamp(40px,7vw,86px)}
.section-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 16px;margin-bottom:clamp(20px,3vw,30px)}
.section-index{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.14em;color:var(--stripe-white);background:var(--dusk);border:2px solid var(--ink);padding:4px 9px}
.section-title{font-size:clamp(23px,3.4vw,36px);letter-spacing:-.01em}
.section-note{margin-left:auto;font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--dusk-light)}
.grid{display:grid;gap:clamp(16px,2.4vw,24px)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(228px,1fr))}

/* ===== 文本工具 ===== */
.lede{max-width:62ch;font-size:clamp(17px,2.1vw,21px);line-height:1.75;color:var(--dusk)}
.mono{font-family:var(--font-mono);letter-spacing:.04em}
.note{border-left:6px solid var(--desert-gold);background:var(--gray-bg);padding:14px 18px;font-size:14.5px;color:#3c3c52}
.score-num{font-family:var(--font-score);font-weight:700;line-height:.9;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.is-up{color:var(--desert-gold)}
.is-down{color:var(--dark-red)}
.prose{max-width:70ch;font-size:17px;line-height:1.85;color:#33334a}
.prose > * + *{margin-top:1em}
.prose h2{font-size:clamp(21px,2.6vw,27px);margin-top:1.8em}
.prose h3{font-size:18px;margin-top:1.5em}
.prose ul,.prose ol{padding-left:1.4em;list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin-block:.35em}
.prose a{color:var(--brand-red);text-decoration:underline;text-underline-offset:3px}
.prose strong{color:var(--dusk)}
.prose blockquote{border-left:6px solid var(--desert-gold);background:var(--gray-bg);padding:14px 18px;color:var(--dusk)}

/* ===== 卡片与标签 ===== */
.card{display:flex;flex-direction:column;gap:10px;background:var(--stripe-white);border:var(--border-w) solid var(--ink);box-shadow:var(--shadow-soft);padding:clamp(18px,2.4vw,24px)}
.card-title{font-size:19px;line-height:1.35}
.card-body{font-size:15.5px;line-height:1.72;color:#3c3c52}
.tag{display:inline-block;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;padding:3px 9px;background:var(--gray-bg);color:var(--dusk);border:2px solid var(--dusk-light)}
.tag--gold{background:var(--desert-gold);color:var(--ink);border-color:var(--ink)}
.tag--red{background:var(--brand-red);color:#fff;border-color:var(--dark-red)}

/* ===== 按钮 ===== */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;font-family:var(--font-head);font-size:15px;font-weight:700;text-decoration:none;border:var(--border-w) solid var(--ink);box-shadow:var(--shadow-hard);background:var(--stripe-white);color:var(--ink);cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,color .16s ease}
.btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 rgba(26,26,46,.9)}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 rgba(26,26,46,.9)}
.btn--primary{background:var(--brand-red);color:#fff}
.btn--primary:hover{background:var(--dark-red)}
.btn--ghost{background:transparent;color:var(--dusk);border-color:var(--dusk);box-shadow:6px 6px 0 rgba(58,46,90,.28)}

/* ===== 面包屑 ===== */
.breadcrumb{padding-top:18px}
.breadcrumb-list{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;letter-spacing:.04em}
.breadcrumb-item{display:inline-flex;align-items:center;gap:8px}
.breadcrumb-item + .breadcrumb-item::before{content:"/";color:var(--desert-gold)}
.breadcrumb-link{color:var(--dusk-light);text-decoration:none;border-bottom:1px solid transparent;transition:color .16s ease,border-color .16s ease}
.breadcrumb-link:hover{color:var(--brand-red);border-bottom-color:var(--brand-red)}
.breadcrumb-current{color:var(--dusk);font-weight:700}

/* ===== 图片容器 ===== */
.figure{display:flex;flex-direction:column;gap:10px}
.figure-media{position:relative;overflow:hidden;aspect-ratio:16/9;background:var(--gray-bg);border:var(--border-w) solid var(--ink);box-shadow:var(--shadow-soft)}
.figure-media > img{width:100%;height:100%;object-fit:cover}
.figure--wide .figure-media{aspect-ratio:21/9}
.figure--tall .figure-media{aspect-ratio:3/4}
.figure-cap{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;line-height:1.6;color:var(--dusk)}

/* ===== 跳转链接 ===== */
.skip-link{position:fixed;top:0;left:0;z-index:200;transform:translateY(-140%);background:var(--ink);color:#fff;font-family:var(--font-mono);font-size:13px;padding:10px 18px;text-decoration:none;transition:transform .18s ease}
.skip-link:focus{transform:translateY(0)}

/* ===== 页头 ===== */
.site-header{position:sticky;top:0;z-index:100;background:var(--dusk);color:var(--stripe-white);border-bottom:var(--border-w) solid var(--ink)}
.stripe-band{height:7px;background:repeating-linear-gradient(90deg,var(--brand-red) 0 22px,var(--stripe-white) 22px 44px)}
.header-inner{display:flex;align-items:center;gap:16px;min-height:68px;padding-block:10px}
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto;text-decoration:none;color:var(--stripe-white)}
.brand-mark{display:flex;gap:3px;width:46px;height:36px;padding:4px;background:var(--ink);border:2px solid var(--ink)}
.brand-bar{flex:1 1 0;background:var(--brand-red)}
.brand-bar:nth-child(2){background:var(--stripe-white)}
.brand-bar:nth-child(3){background:var(--brand-red)}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-name{font-size:17px;font-weight:700;letter-spacing:.02em}
.brand-sub{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--desert-gold)}
.nav-toggle{display:none;align-items:center;gap:9px;margin-left:auto;padding:9px 12px;border:2px solid rgba(248,249,250,.5);color:var(--stripe-white);font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;cursor:pointer;transition:border-color .16s ease,background-color .16s ease}
.nav-toggle:hover{border-color:var(--desert-gold);background:rgba(248,249,250,.08)}
.nav-toggle-box{display:inline-flex;flex-direction:column;justify-content:space-between;width:16px;height:13px}
.nav-toggle-box span{display:block;height:2px;background:currentColor;transition:transform .2s ease,opacity .2s ease}
.nav-toggle[aria-expanded="true"] .nav-toggle-box span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-box span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-box span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.nav-toggle-label{white-space:nowrap}
.primary-nav{margin-left:auto}
.nav-list{display:flex;align-items:center;gap:2px}
.nav-item{flex:0 0 auto}
.nav-link{display:flex;align-items:baseline;gap:7px;padding:9px 11px;font-size:14.5px;font-weight:500;color:rgba(248,249,250,.76);text-decoration:none;border-bottom:3px solid transparent;transition:color .18s ease,background-color .18s ease,border-color .18s ease}
.nav-link:hover{color:var(--stripe-white);background:rgba(248,249,250,.09)}
.nav-index{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;color:var(--desert-gold);opacity:.75}
.nav-link[aria-current="page"]{color:var(--stripe-white);font-weight:700;background:rgba(215,38,61,.3);border-bottom-color:var(--desert-gold)}
.nav-link[aria-current="page"] .nav-index{opacity:1}
.header-cta{flex:0 0 auto;padding:9px 16px;background:var(--brand-red);color:#fff;font-size:14px;font-weight:700;text-decoration:none;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--desert-gold);transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease}
.header-cta:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--desert-gold);background:var(--dark-red)}
.scroll-progress{position:absolute;left:0;bottom:-3px;display:block;width:0;height:3px;background:var(--desert-gold);z-index:2}

/* ===== 页脚 ===== */
.site-footer{margin-top:clamp(40px,6vw,80px);background:var(--dusk);color:rgba(248,249,250,.8);border-top:var(--border-w) solid var(--ink)}
.footer-stripe{height:8px;background:repeating-linear-gradient(90deg,var(--brand-red) 0 26px,var(--stripe-white) 26px 52px)}
.footer-inner{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.35fr;gap:clamp(20px,3.6vw,40px);padding-block:46px 34px}
.footer-brand{display:flex;flex-direction:column;gap:12px}
.footer-brand-mark{display:flex;gap:3px;width:44px;height:32px;padding:4px;background:var(--ink);border:2px solid var(--stripe-white)}
.footer-brand-mark span{flex:1 1 0;background:var(--brand-red)}
.footer-brand-mark span:nth-child(2){background:var(--stripe-white)}
.footer-brand-mark span:nth-child(3){background:var(--brand-red)}
.footer-brand-name{font-size:19px;font-weight:700;color:var(--stripe-white);letter-spacing:.02em}
.footer-tagline{font-size:14.5px;line-height:1.75;color:rgba(248,249,250,.72);max-width:34ch}
.footer-col{display:flex;flex-direction:column;gap:14px}
.footer-col-title{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--desert-gold);text-transform:uppercase}
.footer-links{display:flex;flex-direction:column;gap:9px}
.footer-link{display:inline-block;font-size:14.5px;color:rgba(248,249,250,.78);text-decoration:none;border-bottom:2px solid transparent;transition:color .16s ease,border-color .16s ease,transform .16s ease}
.footer-link:hover{color:var(--desert-gold);border-bottom-color:var(--desert-gold);transform:translateX(2px)}
.footer-contact .contact-list{display:flex;flex-direction:column;gap:12px}
.contact-item{display:flex;flex-direction:column;gap:2px}
.contact-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--dusk-light)}
.contact-value{font-size:14.5px;line-height:1.6;color:rgba(248,249,250,.86);word-break:break-word}
.footer-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;padding-block:18px 32px;border-top:2px solid rgba(248,249,250,.16);font-family:var(--font-mono);font-size:12px;letter-spacing:.03em;color:rgba(248,249,250,.62)}
.footer-copy{color:rgba(248,249,250,.8)}
.footer-icp{color:rgba(248,249,250,.62)}
.footer-meta{margin-left:auto;color:var(--desert-gold)}

/* ===== 滚动显现 ===== */
.js-reveal [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1)}
.js-reveal [data-reveal].is-in{opacity:1;transform:none}

/* ===== 响应式 ===== */
@media (max-width:1080px){
  .nav-toggle{display:inline-flex;order:3}
  .primary-nav{position:absolute;top:100%;left:0;right:0;display:none;margin-left:0;background:var(--dusk);border-top:2px solid rgba(248,249,250,.16);border-bottom:var(--border-w) solid var(--ink);box-shadow:0 14px 24px rgba(26,26,46,.28);padding-block:10px 14px}
  .primary-nav[data-open]{display:block}
  .nav-list{gap:0;overflow-x:auto;padding-inline:12px;-webkit-overflow-scrolling:touch}
  .nav-link{flex-direction:column;align-items:flex-start;gap:3px;padding:10px 14px;border-bottom:0;border-left:3px solid transparent;white-space:nowrap}
  .nav-link[aria-current="page"]{border-left-color:var(--desert-gold);border-bottom-color:transparent}
  .header-cta{display:none}
  .footer-inner{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1 / -1}
}
@media (max-width:640px){
  body{font-size:15px}
  .shell{padding-inline:16px}
  .brand-sub{display:none}
  .brand-name{font-size:16px}
  .header-inner{min-height:62px}
  .figure--wide .figure-media{aspect-ratio:16/9}
  .footer-inner{grid-template-columns:1fr;padding-block:36px 26px}
  .footer-meta{margin-left:0}
  .section-note{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}
