@charset "UTF-8";
/* ============ 新浦京·会馆 Site Kit 共享样式 ============ */
/* ============ Reset & Variables ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0B1D3A;
  --surface:#122A4A;
  --surface-deep:#081426;
  --accent:#C9A86A;
  --accent-2:#E0C878;
  --warning:#8B2332;
  --text:#F0EAD6;
  --text-2:#A8B8C8;
  --border:#B8964A;
  --font-serif:"Source Han Serif SC","Noto Serif SC","SimSun","Songti SC",Georgia,serif;
  --font-sans:"Source Han Sans SC","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --max-w:1280px;
  --header-h:86px;
  --radius:2px;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  font-weight:400;
  font-size:16px;
  line-height:1.75;
  letter-spacing:.02em;
  min-height:100vh;
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(120px circle at 18% 12%,rgba(201,168,106,.07),transparent 60%),
    radial-gradient(180px circle at 82% 68%,rgba(201,168,106,.05),transparent 65%),
    linear-gradient(90deg,transparent calc(50% - 1px),rgba(201,168,106,.022) calc(50% - 1px),rgba(201,168,106,.022) calc(50% + 1px),transparent calc(50% + 1px));
  background-size:auto,auto,88px 88px;
}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul,ol{list-style:none}
h1,h2,h3,h4{font-family:var(--font-serif);font-weight:700;letter-spacing:.05em;line-height:1.35}
h1{font-size:clamp(2rem,4.5vw,3.2rem);color:var(--text)}
h2{color:var(--text);border-left:3px solid var(--accent);padding-left:.65em}
h3{font-family:var(--font-sans);font-weight:700}
h4{font-family:var(--font-sans)}
::selection{background:var(--accent);color:var(--bg)}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px;border-radius:2px}
#main-content{flex:1 0 auto;width:100%;scroll-margin-top:calc(var(--header-h) + 12px)}
#main-content:focus{outline:none}
::selection{background:var(--accent);color:var(--bg)}
::-webkit-scrollbar{width:10px;background:var(--surface-deep)}
::-webkit-scrollbar-thumb{background:var(--border);border:2px solid var(--surface-deep)}
/* ============ Skip Link ============ */
.skip-link{
  position:fixed;
  top:-80px;
  left:16px;
  z-index:3000;
  padding:10px 20px;
  background:var(--accent-2);
  color:var(--bg);
  font-weight:700;
  border-radius:var(--radius);
  box-shadow:0 0 0 4px rgba(11,29,58,.4);
  transition:top .2s ease;
}
.skip-link:focus{top:16px}
/* ============ Scroll Progress ============ */
.progress-bar{
  position:fixed;
  top:0;
  left:0;
  width:0;
  height:3px;
  z-index:2200;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  border-radius:0 3px 3px 0;
}
/* ============ Header ============ */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(11,29,58,.93);
  border-bottom:1px solid rgba(184,150,74,.34);
}
.site-header::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:2px;
  background:linear-gradient(90deg,rgba(201,168,106,0),var(--accent) 8%,rgba(201,168,106,.55) 28%,transparent 80%);
}
.header-inner{
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 clamp(16px,3vw,40px);
  height:var(--header-h);
  display:flex;
  align-items:center;
}
.header-brand{flex:0 0 auto;padding-right:22px}
.brand-link{display:flex;flex-direction:column;gap:4px}
.brand-name{
  font-family:var(--font-serif);
  font-size:1.42rem;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--text);
  line-height:1.1;
  white-space:nowrap;
}
.brand-sub{font-size:.66rem;letter-spacing:.28em;color:var(--text-2);white-space:nowrap}
.header-divider{
  width:1px;
  height:52px;
  align-self:center;
  background:linear-gradient(180deg,transparent,var(--accent) 18%,var(--accent) 82%,transparent);
  margin-right:16px;
}
.header-nav{margin-left:auto}
.nav-list{display:flex;gap:4px}
.nav-item{position:relative}
.nav-link{
  display:inline-block;
  position:relative;
  padding:10px 13px;
  font-size:.92rem;
  color:var(--text-2);
  letter-spacing:.06em;
  transition:color .28s ease;
  white-space:nowrap;
}
.nav-link::after{
  content:"";
  position:absolute;
  left:13px;
  right:13px;
  bottom:-2px;
  height:2px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .28s ease;
}
.nav-link:hover{color:var(--accent-2)}
.nav-link:hover::after,
.nav-link[aria-current="page"]::after{transform:scaleX(1)}
.nav-link[aria-current="page"]{color:var(--accent-2);font-weight:700}
.header-actions{margin-left:22px}
.phone-link{
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  padding:10px 16px;
  border:1px solid var(--border);
  color:var(--text);
  font-family:var(--font-serif);
  transition:background .28s ease,color .28s ease,border-color .28s ease;
}
.phone-label{
  font-size:.72rem;
  letter-spacing:.16em;
  color:var(--text-2);
  font-family:var(--font-sans);
}
.phone-number{font-size:.92rem;letter-spacing:.08em;font-weight:700}
.phone-link:hover{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.phone-link:hover .phone-label{color:rgba(11,29,58,.72)}
.nav-toggle{
  display:none;
  margin-left:auto;
  align-items:center;
  flex-direction:column;
  gap:5px;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:var(--radius);
}
.toggle-line{width:20px;height:2px;background:var(--accent);display:block}
.toggle-text{font-size:.66rem;color:var(--text-2);letter-spacing:.2em}
/* ============ Footer ============ */
.site-footer{
  flex-shrink:0;
  margin-top:auto;
  background:var(--surface-deep);
  border-top:2px solid var(--border);
  position:relative;
}
.site-footer::before{
  content:"";
  display:block;
  height:12px;
  border-top:1px solid rgba(201,168,106,.25);
  border-bottom:1px solid rgba(201,168,106,.18);
  background:linear-gradient(180deg,rgba(201,168,106,.08),transparent);
}
.footer-inner{
  max-width:var(--max-w);
  margin:0 auto;
  padding:56px clamp(20px,4vw,40px) 40px;
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,.8fr) minmax(0,1fr);
  gap:44px;
}
.footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.seal{
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--accent);
  border-radius:50%;
  font-family:var(--font-serif);
  font-size:.72rem;
  letter-spacing:.1em;
  color:var(--accent);
  transform:rotate(-8deg);
}
.footer-brand-name{
  font-family:var(--font-serif);
  font-size:1.8rem;
  letter-spacing:.14em;
  color:var(--text);
}
.footer-brand-sub{font-size:.7rem;letter-spacing:.26em;color:var(--text-2)}
.trust-note{
  max-width:38em;
  color:var(--text-2);
  font-size:.85rem;
  line-height:1.8;
  border-left:1px solid var(--border);
  padding-left:14px;
}
.footer-col{display:flex;flex-direction:column;gap:14px}
.footer-col-links{justify-content:flex-start}
.footer-col-contact{align-items:stretch}
.footer-title{
  font-size:.78rem;
  font-family:var(--font-sans);
  color:var(--accent);
  letter-spacing:.22em;
  text-transform:uppercase;
  padding-bottom:8px;
  border-left:0;
  padding-left:0;
  border-bottom:1px solid rgba(184,150,74,.25);
}
.footer-links{display:flex;flex-direction:column;gap:8px}
.footer-link{color:var(--text-2);font-size:.92rem;transition:color .25s ease,padding-left .25s ease}
.footer-link:hover{color:var(--accent-2);padding-left:4px}
.contact-list{display:flex;flex-direction:column;gap:12px}
.contact-line{display:flex;gap:12px;font-size:.88rem;color:var(--text-2);align-items:baseline}
.contact-label{min-width:34px;font-size:.72rem;color:var(--accent);letter-spacing:.14em}
.contact-text{color:var(--text-2)}
.footer-bottom{border-top:1px solid rgba(184,150,74,.18)}
.footer-bottom-inner{
  max-width:var(--max-w);
  margin:0 auto;
  padding:18px clamp(20px,4vw,40px);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:8px 20px;
  font-size:.8rem;
  color:var(--text-2);
  letter-spacing:.04em;
}
.footer-hotline{color:var(--text-2)}
/* ============ Layout & Section ============ */
.page-container{
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 clamp(20px,4vw,40px);
}
.section{padding:clamp(48px,7vw,96px) 0}
.section-label{
  display:inline-block;
  font-size:.74rem;
  letter-spacing:.28em;
  color:var(--accent);
  margin-bottom:12px;
  text-transform:uppercase;
}
.section-label::before{
  content:"";
  display:inline-block;
  width:26px;
  height:1px;
  background:var(--accent);
  margin-right:10px;
  vertical-align:middle;
}
.section-title{font-size:clamp(1.6rem,3.2vw,2.4rem);margin-bottom:12px}
.section-sub{color:var(--text-2);max-width:60ch;margin-bottom:24px}
/* ============ Grid ============ */
.grid{display:grid;gap:24px}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* ============ Editorial Asymmetry ============ */
.editorial-block{
  display:grid;
  grid-template-columns:240px minmax(0,1fr);
  gap:clamp(24px,5vw,72px);
  align-items:start;
}
.editorial-note{padding-top:8px}
.editorial-main{min-width:0}
/* ============ Card ============ */
.card{
  background:var(--surface);
  border:1px solid rgba(184,150,74,.5);
  padding:24px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02),0 12px 28px -10px rgba(0,0,0,.45);
  transition:border-color .3s ease,transform .3s ease;
}
.card:hover{border-color:var(--accent);transform:translateY(-2px)}
.card-title{font-size:1.12rem;margin-bottom:8px}
.card-text{color:var(--text-2);font-size:.92rem}
/* ============ Buttons ============ */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 26px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  font-family:var(--font-sans);
  font-size:.9rem;
  letter-spacing:.08em;
  transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.btn::after{
  content:"";
  position:absolute;
  inset:3px;
  border:1px solid rgba(201,168,106,.35);
  transition:opacity .3s ease;
  pointer-events:none;
}
.btn:hover::after{opacity:0}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--bg);font-weight:700}
.btn-primary:hover{background:var(--accent-2);border-color:var(--accent-2);color:var(--bg)}
.btn-ghost:hover{background:rgba(201,168,106,.12);border-color:var(--accent);color:var(--accent-2)}
/* ============ Breadcrumb ============ */
.breadcrumb{margin-bottom:28px;font-size:.84rem;color:var(--text-2)}
.breadcrumb-list{display:flex;flex-wrap:wrap;align-items:center}
.breadcrumb-item{display:flex;align-items:center}
.breadcrumb-item + .breadcrumb-item::before{content:"/";margin:0 8px;color:var(--border)}
.breadcrumb-link{color:var(--text-2)}
.breadcrumb-link:hover{color:var(--accent)}
.breadcrumb-item[aria-current="page"]{color:var(--accent-2)}
/* ============ Frame Window ============ */
.frame-window{
  position:relative;
  padding:clamp(28px,4vw,48px);
  border:1px solid var(--border);
  background:linear-gradient(135deg,rgba(18,42,74,.72),rgba(11,29,58,.5));
  box-shadow:0 18px 44px -22px rgba(0,0,0,.55);
}
.frame-window::before,
.frame-window::after{
  content:"";
  position:absolute;
  width:28px;
  height:28px;
  border-color:var(--border);
  border-style:solid;
  pointer-events:none;
}
.frame-window::before{top:-3px;left:-3px;border-width:3px 0 0 3px}
.frame-window::after{bottom:-3px;right:-3px;border-width:0 3px 3px 0}
.frame-index{
  position:absolute;
  top:12px;
  right:14px;
  font-size:.64rem;
  letter-spacing:.28em;
  color:var(--accent);
}
/* ============ Data Strip ============ */
.data-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.data-cell{
  background:var(--surface);
  border:1px solid rgba(184,150,74,.45);
  padding:18px 20px;
  position:relative;
}
.cell-index{display:block;font-size:.7rem;color:var(--accent);letter-spacing:.2em;margin-bottom:8px}
.cell-number{font-family:var(--font-serif);font-size:1.5rem;color:var(--accent-2)}
/* ============ Image Frame ============ */
.image-frame{
  position:relative;
  overflow:hidden;
  border:1px solid var(--border);
  background:linear-gradient(135deg,rgba(11,29,58,.4),rgba(18,42,74,.8));
  aspect-ratio:4/3;
}
.image-frame::after{
  content:"图片占位";
  position:absolute;
  right:10px;
  bottom:8px;
  font-size:.62rem;
  letter-spacing:.22em;
  color:var(--accent);
  background:rgba(11,29,58,.75);
  padding:4px 8px;
}
.image-frame img{width:100%;height:100%;object-fit:cover}
.image-frame.wide{aspect-ratio:16/7}
.image-frame.square{aspect-ratio:1/1}
/* ============ Table ============ */
.data-table{width:100%;border-collapse:collapse;font-size:.9rem}
.data-table th,.data-table td{border:1px solid rgba(184,150,74,.4);padding:12px 14px;text-align:left}
.data-table th{
  background:var(--surface);
  color:var(--accent);
  font-family:var(--font-sans);
  font-weight:700;
  letter-spacing:.14em;
}
.data-table td{color:var(--text-2)}
/* ============ Decor ============ */
.rule-gold{
  height:1px;
  border:0;
  background:linear-gradient(90deg,var(--accent),rgba(201,168,106,.1));
  margin:24px 0;
}
.meta-tag{
  display:inline-block;
  padding:3px 10px;
  border:1px solid rgba(201,168,106,.45);
  color:var(--accent);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.artifact-tag{
  display:inline-block;
  background:var(--surface);
  border:1px solid var(--border);
  border-top-width:2px;
  padding:6px 12px;
  font-size:.75rem;
  letter-spacing:.14em;
  color:var(--text);
  position:relative;
}
.artifact-tag::before{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  top:-3px;
  height:1px;
  background:var(--accent);
}
.vertical-note{
  writing-mode:vertical-rl;
  font-size:.74rem;
  letter-spacing:.3em;
  color:var(--text-2);
  line-height:1.4;
  padding-left:10px;
  border-left:1px solid var(--border);
}
/* ============ Filter Bar ============ */
.filter-bar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.filter-btn{
  padding:8px 18px;
  border:1px solid rgba(184,150,74,.6);
  background:transparent;
  color:var(--text-2);
  font-size:.84rem;
  letter-spacing:.08em;
  transition:all .25s ease;
}
.filter-btn:hover,
.filter-btn[aria-pressed="true"]{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--bg);
  font-weight:700;
}
/* ============ Responsive ============ */
@media (max-width:1020px){
  :root{--header-h:70px}
  .header-divider{height:44px}
  .brand-name{font-size:1.2rem}
  .nav-list{gap:0}
  .nav-link{padding:8px 10px;font-size:.86rem}
  .phone-number{font-size:.82rem}
  .grid-cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .editorial-block{grid-template-columns:180px minmax(0,1fr)}
}
@media (max-width:900px){
  .header-nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    display:none;
    background:var(--surface-deep);
    border-bottom:2px solid var(--border);
    box-shadow:0 18px 30px -12px rgba(0,0,0,.6);
  }
  .header-nav[data-open]{display:block}
  .nav-list{flex-direction:column;padding:14px 22px 20px;gap:2px}
  .nav-link{display:block;padding:12px 8px;border-bottom:1px solid rgba(184,150,74,.16)}
  .nav-link::after{display:none}
  .nav-link[aria-current="page"]{border-left:3px solid var(--accent);padding-left:12px}
  .header-actions{display:none}
  .nav-toggle{display:flex}
  .footer-inner{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
}
@media (max-width:640px){
  .grid-cols-2,
  .grid-cols-3,
  .data-strip{grid-template-columns:1fr}
  .editorial-block{grid-template-columns:1fr}
  .editorial-note{border-top:1px solid var(--border);padding-top:12px}
  .section{padding:40px 0}
  .footer-inner{grid-template-columns:1fr}
  .footer-bottom-inner{flex-direction:column;text-align:center}
}
/* ============ Motion ============ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;transition-duration:.001s !important}
  html{scroll-behavior:auto}
  .progress-bar{display:none}
}