/* ===== Reset ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:100%;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:'Inter','Helvetica Neue',Arial,'PingFang SC','Microsoft YaHei',sans-serif;font-weight:400;line-height:1.6;color:#fff;background:#121212;min-height:100vh;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:none;outline:none}
button{cursor:pointer}
table{border-collapse:collapse;width:100%}
/* ===== CSS Variables ===== */
:root{--gold:#FFD700;--gold-dark:#FFA000;--gold-grad:linear-gradient(135deg,#FFD700,#FFA000);--crimson:#C62828;--crimson-dark:#B71C1C;--black:#121212;--black-light:#1E1E1E;--white:#fff;--blue:#2196F3;--red-warn:#FF5252;--gold-alpha:rgba(255,215,0,0.15);--font-heading:'Inter','Helvetica Neue',Arial,sans-serif;--font-body:'Inter','Helvetica Neue',Arial,'PingFang SC','Microsoft YaHei',sans-serif;--h1:4rem;--h2:3rem;--h3:2.25rem;--body:1rem;--lh:1.6;--scale:1.25;--space-xs:0.25rem;--space-sm:0.5rem;--space-md:1rem;--space-lg:2rem;--space-xl:3rem;--space-xxl:4rem;--nav-width:240px;--header-z:1000;--progress-z:1001;--max-width:1200px;--radius:4px;--border-fine:1px solid rgba(255,215,0,0.25);--shadow-card:0 4px 20px rgba(0,0,0,0.5),0 0 0 1px rgba(255,215,0,0.08);--shadow-elevate:0 12px 40px rgba(0,0,0,0.6),0 0 0 1px rgba(255,215,0,0.2)}
@media(max-width:768px){:root{--h1:2.5rem;--h2:2rem;--h3:1.5rem;--nav-width:100%}}
@media(min-width:769px)and (max-width:1024px){:root{--h1:3rem;--h2:2.25rem;--h3:1.75rem}}
/* ===== Typography ===== */
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:100;letter-spacing:0.02em;line-height:1.2}
h1{font-size:var(--h1);background:var(--gold-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
h2{font-size:var(--h2);color:var(--gold)}
h3{font-size:var(--h3);color:var(--white)}
p,li,span{font-size:var(--body);font-weight:400;color:rgba(255,255,255,0.88)}
.small-index{font-size:0.75rem;font-weight:600;color:var(--crimson);letter-spacing:0.1em;text-transform:uppercase}
/* ===== Skip Link ===== */
.skip-link{position:absolute;top:-100px;left:0;z-index:9999;padding:var(--space-sm) var(--space-md);background:var(--gold);color:#121212;font-weight:600;font-size:0.875rem;border-radius:0 0 var(--radius) 0;transition:top 0.2s}
.skip-link:focus{top:0;outline:2px solid var(--gold);outline-offset:2px}
/* ===== Mobile Header ===== */
.mobile-header{display:none;position:fixed;top:0;left:0;right:0;z-index:calc(var(--header-z)+1);background:#121212;border-bottom:var(--border-fine);padding:var(--space-sm) var(--space-md);align-items:center;justify-content:space-between;height:56px}
.mobile-brand{font-family:var(--font-heading);font-weight:700;font-size:1.25rem;background:var(--gold-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:0.05em}
.nav-toggle{display:flex;flex-direction:column;justify-content:center;align-items:center;width:40px;height:40px;gap:5px;padding:6px;border-radius:var(--radius);transition:background 0.2s}
.nav-toggle:hover,.nav-toggle:focus-visible{background:var(--gold-alpha)}
.nav-toggle__bar{display:block;width:24px;height:2px;background:var(--gold);border-radius:2px;transition:transform 0.3s,opacity 0.3s}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:768px){.mobile-header{display:flex}}
/* ===== Site Header (Sidebar) ===== */
.site-header{position:fixed;top:0;left:0;bottom:0;width:var(--nav-width);z-index:var(--header-z);background:#121212;border-right:1px solid rgba(255,215,0,0.12);display:flex;flex-direction:column;padding:var(--space-xl) var(--space-lg);transition:transform 0.35s cubic-bezier(0.22,1,0.36,1),opacity 0.35s}
.header__brand{margin-bottom:var(--space-xl);padding-bottom:var(--space-lg);border-bottom:var(--border-fine)}
.brand__logo{font-family:var(--font-heading);font-weight:700;font-size:1.5rem;background:var(--gold-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:block;letter-spacing:0.05em}
.brand__badge{display:inline-block;margin-top:var(--space-xs);padding:2px 8px;font-size:0.65rem;font-weight:600;color:#121212;background:var(--crimson);border-radius:2px;text-transform:uppercase;letter-spacing:0.05em}
.header__nav{flex:1;overflow-y:auto}
.nav__list{display:flex;flex-direction:column;gap:2px}
.nav__item{position:relative}
.nav__link{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);font-size:0.9rem;font-weight:400;color:rgba(255,255,255,0.7);border-radius:var(--radius);transition:all 0.25s;position:relative;overflow:hidden}
.nav__link::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:0;background:var(--gold-grad);border-radius:0 2px 2px 0;transition:height 0.3s}
.nav__link:hover,.nav__link:focus-visible{color:var(--white);background:var(--gold-alpha)}
.nav__link:hover::before,.nav__link:focus-visible::before{height:60%}
.nav__link[aria-current="page"]{color:var(--gold);background:rgba(255,215,0,0.08)}
.nav__link[aria-current="page"]::before{height:70%;background:var(--gold-grad)}
.nav__index{font-size:0.7rem;font-weight:600;color:var(--crimson);min-width:2.2em;letter-spacing:0.05em;opacity:0.7}
.nav__link[aria-current="page"] .nav__index{color:var(--gold);opacity:1}
.nav__label{font-weight:400;letter-spacing:0.02em}
/* "轨道" 垂直线 */
.nav__item::after{content:'';position:absolute;left:calc(var(--space-md)+1.1em);top:100%;width:1px;height:calc(100%+2px);background:rgba(255,215,0,0.1);pointer-events:none}
.nav__item:last-child::after{display:none}
.header__contact{margin-top:var(--space-lg);padding-top:var(--space-lg);border-top:var(--border-fine)}
.contact__label{display:block;font-size:0.65rem;font-weight:600;color:var(--crimson);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:var(--space-xs)}
.contact__email{font-size:0.8rem;color:var(--gold);transition:color 0.2s}
.contact__email:hover,.contact__email:focus-visible{color:var(--white);text-decoration:underline}
/* 移动端抽屉状态 */
@media(max-width:768px){.site-header{transform:translateX(-100%);opacity:0;width:85%;max-width:320px;box-shadow:4px 0 40px rgba(0,0,0,0.7)}
.site-header[data-open]{transform:translateX(0);opacity:1}
/* 遮罩层通过JS动态添加 */}
@media(min-width:769px){.site-header{transform:none;opacity:1}}
/* ===== Main Content Shift ===== */
#main-content{margin-left:var(--nav-width);padding:var(--space-xl) var(--space-xxl);min-height:100vh}
@media(max-width:768px){#main-content{margin-left:0;padding:var(--space-lg) var(--space-md);padding-top:calc(56px+var(--space-lg))}}
@media(min-width:769px)and (max-width:1024px){#main-content{padding:var(--space-lg) var(--space-xl)}}
/* ===== Site Footer ===== */
.site-footer{background:#0e0e0e;border-top:1px solid rgba(255,215,0,0.1);padding:var(--space-xxl) 0 0;margin-left:var(--nav-width)}
.footer__inner{display:grid;grid-template-columns:1.5fr 1fr 1.2fr;gap:var(--space-xl);max-width:var(--max-width);margin:0 auto;padding:0 var(--space-xl)}
.footer__title{font-size:1.25rem;font-weight:700;background:var(--gold-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:var(--space-sm)}
.footer__tagline{font-size:0.9rem;color:rgba(255,255,255,0.6);margin-bottom:var(--space-md)}
.footer__trust{font-size:0.75rem;color:rgba(255,255,255,0.45);line-height:1.7;max-width:380px}
.footer__heading{font-size:0.75rem;font-weight:600;color:var(--crimson);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:var(--space-md)}
.footer__link-list{display:flex;flex-direction:column;gap:var(--space-sm)}
.footer__link{font-size:0.9rem;color:rgba(255,255,255,0.7);transition:color 0.2s;padding:2px 0}
.footer__link:hover,.footer__link:focus-visible{color:var(--gold)}
.footer__contact p{font-size:0.85rem;color:rgba(255,255,255,0.65);margin-bottom:var(--space-xs)}
.footer__contact a{color:var(--gold);transition:color 0.2s}
.footer__contact a:hover{color:var(--white)}
.footer__bottom{border-top:1px solid rgba(255,215,0,0.08);margin-top:var(--space-xl);padding:var(--space-md) var(--space-xl);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-sm);max-width:var(--max-width);margin-left:auto;margin-right:auto}
.footer__bottom p{font-size:0.7rem;color:rgba(255,255,255,0.35)}
.footer__copyright{text-align:right}
@media(max-width:768px){.site-footer{margin-left:0}
.footer__inner{grid-template-columns:1fr;gap:var(--space-lg);padding:0 var(--space-md)}
.footer__bottom{flex-direction:column;text-align:center;padding:var(--space-md)}
}
@media(min-width:769px)and (max-width:1024px){.footer__inner{grid-template-columns:1fr 1fr;gap:var(--space-lg)}
}
/* ===== Scroll Progress ===== */
.scroll-progress{position:fixed;top:0;left:0;right:0;z-index:var(--progress-z);height:3px;background:transparent;pointer-events:none}
.scroll-progress__bar{height:100%;width:0%;background:var(--gold-grad);border-radius:0 2px 2px 0;transition:width 0.1s linear}
@media(max-width:768px){.scroll-progress{top:56px}}
/* ===== Back to Top ===== */
.back-to-top{position:fixed;bottom:var(--space-xl);right:var(--space-xl);z-index:var(--progress-z);width:44px;height:44px;border-radius:50%;background:var(--crimson);color:var(--white);font-size:1.25rem;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,0.5);opacity:0;transform:translateY(20px);transition:opacity 0.3s,transform 0.3s,background 0.2s;pointer-events:none}
.back-to-top.visible{opacity:1;transform:translateY(0);pointer-events:auto}
.back-to-top:hover,.back-to-top:focus-visible{background:var(--gold);color:#121212}
@media(max-width:768px){.back-to-top{bottom:var(--space-md);right:var(--space-md);width:40px;height:40px;font-size:1rem}}
/* ===== Button System ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:0.6em 1.6em;font-size:0.9rem;font-weight:600;border-radius:var(--radius);transition:all 0.25s;border:1px solid transparent;letter-spacing:0.03em}
.btn--gold{background:var(--gold-grad);color:#121212;border-color:var(--gold)}
.btn--gold:hover,.btn--gold:focus-visible{box-shadow:0 0 24px rgba(255,215,0,0.3);transform:translateY(-2px)}
.btn--outline{background:transparent;color:var(--gold);border-color:var(--crimson)}
.btn--outline:hover,.btn--outline:focus-visible{background:rgba(198,40,40,0.15);border-color:var(--gold);color:var(--gold)}
.btn--small{padding:0.4em 1em;font-size:0.75rem}
.btn--large{padding:0.8em 2.4em;font-size:1rem}
/* ===== Breadcrumb ===== */
.breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-xs);margin-bottom:var(--space-lg);font-size:0.8rem;color:rgba(255,255,255,0.5)}
.breadcrumb__item{display:flex;align-items:center;gap:var(--space-xs)}
.breadcrumb__item::after{content:'/';color:rgba(255,255,255,0.2);margin-left:var(--space-xs)}
.breadcrumb__item:last-child::after{display:none}
.breadcrumb__link{color:var(--gold);transition:color 0.2s}
.breadcrumb__link:hover{color:var(--white)}
.breadcrumb__item:last-child .breadcrumb__link{color:rgba(255,255,255,0.6);pointer-events:none}
/* ===== Content Container ===== */
.content-container{max-width:var(--max-width);margin:0 auto;padding:0 var(--space-md)}
/* ===== Grid System ===== */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--space-lg)}
.grid--compact{gap:var(--space-md)}
.grid__col--1{grid-column:span 1}
.grid__col--2{grid-column:span 2}
.grid__col--3{grid-column:span 3}
.grid__col--4{grid-column:span 4}
.grid__col--5{grid-column:span 5}
.grid__col--6{grid-column:span 6}
.grid__col--7{grid-column:span 7}
.grid__col--8{grid-column:span 8}
.grid__col--9{grid-column:span 9}
.grid__col--10{grid-column:span 10}
.grid__col--11{grid-column:span 11}
.grid__col--12{grid-column:span 12}
.grid__col--offset-1{margin-left:8.3333%}.grid__col--offset-2{margin-left:16.6667%}.grid__col--offset-3{margin-left:25%}.grid__col--offset-4{margin-left:33.3333%}
.grid__col--offset-5{margin-left:41.6667%}.grid__col--offset-6{margin-left:50%}.grid__col--offset-7{margin-left:58.3333%}.grid__col--offset-8{margin-left:66.6667%}
.grid__col--offset-9{margin-left:75%}.grid__col--offset-10{margin-left:83.3333%}.grid__col--offset-11{margin-left:91.6667%}
@media(max-width:768px){.grid{grid-template-columns:repeat(4,1fr);gap:var(--space-md)}
.grid__col--1,.grid__col--2,.grid__col--3,.grid__col--4,.grid__col--5,.grid__col--6,.grid__col--7,.grid__col--8,.grid__col--9,.grid__col--10,.grid__col--11,.grid__col--12{grid-column:span 4}
.grid__col--offset-1,.grid__col--offset-2,.grid__col--offset-3,.grid__col--offset-4,.grid__col--offset-5,.grid__col--offset-6,.grid__col--offset-7,.grid__col--offset-8,.grid__col--offset-9,.grid__col--offset-10,.grid__col--offset-11{margin-left:0}
}
@media(min-width:769px)and (max-width:1024px){.grid{grid-template-columns:repeat(8,1fr);gap:var(--space-md)}
.grid__col--1,.grid__col--2{grid-column:span 2}.grid__col--3,.grid__col--4{grid-column:span 4}.grid__col--5,.grid__col--6{grid-column:span 6}.grid__col--7,.grid__col--8,.grid__col--9,.grid__col--10,.grid__col--11,.grid__col--12{grid-column:span 8}
.grid__col--offset-1,.grid__col--offset-2,.grid__col--offset-3,.grid__col--offset-4,.grid__col--offset-5,.grid__col--offset-6,.grid__col--offset-7,.grid__col--offset-8,.grid__col--offset-9,.grid__col--offset-10,.grid__col--offset-11{margin-left:0}
}
/* ===== Card Component ===== */
.card{background:var(--black-light);border:1px solid rgba(255,215,0,0.1);border-radius:var(--radius);padding:var(--space-lg);box-shadow:var(--shadow-card);transition:transform 0.3s,box-shadow 0.3s,border-color 0.3s;position:relative}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-elevate);border-color:rgba(255,215,0,0.2)}
.card__index{position:absolute;top:var(--space-sm);right:var(--space-sm);font-size:0.65rem;font-weight:600;color:var(--crimson);background:rgba(198,40,40,0.12);padding:2px 8px;border-radius:2px;letter-spacing:0.05em}
.card__label{display:inline-block;font-size:0.65rem;font-weight:600;color:var(--gold);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:var(--space-sm);border-bottom:2px solid var(--crimson);padding-bottom:2px}
.card__title{font-size:1.25rem;font-weight:300;color:var(--white);margin-bottom:var(--space-sm)}
.card__summary{font-size:0.85rem;color:rgba(255,255,255,0.6);line-height:1.7}
.card--border-double{box-shadow:var(--shadow-card),inset 0 0 0 1px rgba(255,215,0,0.04)}
/* ===== Section Numbering ===== */
.section-number{display:flex;align-items:baseline;gap:var(--space-md);margin-bottom:var(--space-lg)}
.section-number__digit{font-size:4rem;font-weight:100;background:var(--gold-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;letter-spacing:-0.03em}
.section-number__title{font-size:1.5rem;font-weight:300;color:var(--white);letter-spacing:0.03em}
.section-number__sub{font-size:0.75rem;font-weight:600;color:var(--crimson);text-transform:uppercase;letter-spacing:0.1em;margin-left:auto}
@media(max-width:768px){.section-number__digit{font-size:2.5rem}
.section-number__title{font-size:1.1rem}
}
/* ===== Fine Borders & Print Details ===== */
.fine-border{border:1px solid rgba(255,215,0,0.08);position:relative}
.fine-border::after{content:'';position:absolute;top:3px;left:3px;right:3px;bottom:3px;border:1px solid rgba(255,215,0,0.04);pointer-events:none;border-radius:calc(var(--radius)-2px)}
/* ===== Tag / Label ===== */
.tag{display:inline-block;padding:2px 10px;font-size:0.65rem;font-weight:600;border-radius:2px;text-transform:uppercase;letter-spacing:0.06em}
.tag--gold{background:var(--gold);color:#121212}
.tag--crimson{background:var(--crimson);color:var(--white)}
.tag--blue{background:var(--blue);color:var(--white)}
.tag--outline{border:1px solid rgba(255,215,0,0.3);color:var(--gold);background:transparent}
/* ===== Data Highlight ===== */
.data-highlight{font-size:1.75rem;font-weight:100;background:var(--gold-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:inline-block;line-height:1.2}
.data-highlight--small{font-size:1.25rem}
.data-highlight--large{font-size:2.5rem}
/* ===== Table ===== */
.table-wrap{overflow-x:auto;margin:var(--space-lg) 0}
.table-wrap table{min-width:600px;border-collapse:collapse}
.table-wrap th,.table-wrap td{padding:var(--space-sm) var(--space-md);text-align:left;border-bottom:1px solid rgba(255,215,0,0.06);font-size:0.85rem}
.table-wrap th{font-weight:600;color:var(--gold);text-transform:uppercase;letter-spacing:0.05em;font-size:0.7rem;border-bottom:2px solid var(--crimson)}
.table-wrap tr:hover td{background:var(--gold-alpha)}
.table-wrap tr:nth-child(even) td{background:rgba(255,255,255,0.02)}
/* ===== Focus Visible ===== */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:2px}
/* ===== Reduced Motion ===== */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:0.01ms!important;animation-duration:0.01ms!important;scroll-behavior:auto!important}
.scroll-progress__bar{transition:none!important}
.card:hover{transform:none!important}
.back-to-top{transition:opacity 0.01ms,transform 0.01ms}
}
/* ===== Utility ===== */
.text-gold{color:var(--gold)}
.text-crimson{color:var(--crimson)}
.text-white{color:var(--white)}
.text-muted{color:rgba(255,255,255,0.45)}
.bg-black{background:#121212}
.bg-card{background:var(--black-light)}
.mt-sm{margin-top:var(--space-sm)}.mt-md{margin-top:var(--space-md)}.mt-lg{margin-top:var(--space-lg)}.mt-xl{margin-top:var(--space-xl)}
.mb-sm{margin-bottom:var(--space-sm)}.mb-md{margin-bottom:var(--space-md)}.mb-lg{margin-bottom:var(--space-lg)}.mb-xl{margin-bottom:var(--space-xl)}
.p-sm{padding:var(--space-sm)}.p-md{padding:var(--space-md)}.p-lg{padding:var(--space-lg)}.p-xl{padding:var(--space-xl)}
.text-center{text-align:center}
/* ===== Filter Button Group (共享结构，行为由页面JS增强) ===== */
.filter-group{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-bottom:var(--space-lg)}
.filter-btn{padding:0.4em 1.2em;font-size:0.75rem;font-weight:600;border:1px solid rgba(255,215,0,0.2);border-radius:var(--radius);background:transparent;color:rgba(255,255,255,0.6);transition:all 0.25s;text-transform:uppercase;letter-spacing:0.06em}
.filter-btn:hover,.filter-btn:focus-visible{border-color:var(--gold);color:var(--gold);background:var(--gold-alpha)}
.filter-btn[data-active]{background:var(--crimson);border-color:var(--crimson);color:var(--white)}
/* ===== Image Container Placeholder ===== */
.img-container{position:relative;overflow:hidden;background:var(--black-light);border:1px solid rgba(255,215,0,0.06);border-radius:var(--radius)}
.img-container::before{content:'';display:block;padding-bottom:56.25%}
.img-container img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
.img-container--portrait::before{padding-bottom:133%}
.img-container--square::before{padding-bottom:100%}
.img-container--dynamic::before{padding-bottom:var(--aspect-ratio,56.25%)}
/* ===== Responsive Breakpoint Helpers ===== */
@media(max-width:768px){.hide-mobile{display:none!important}}
@media(min-width:769px)and (max-width:1024px){.hide-tablet{display:none!important}}
@media(min-width:1025px){.hide-desktop{display:none!important}}