/* ============================================================
   德赢中心 /assets/site.css
   共享外壳：reset、变量、中文排版、页头、页脚、通用组件
   ============================================================ */

/* ---------- 1. 设计变量 ---------- */
:root{
  --ink:#0B1F3A;
  --ink-deep:#071528;
  --paper:#F4EFE4;
  --mist:#A9B8CC;
  --coral:#FF6B4A;
  --coral-deep:#C94A2E;
  --jade:#2EC4B6;
  --jade-deep:#146B66;
  --sand:#E8C468;
  --slate:#26364D;

  --paper-dim:rgba(244,239,228,.78);
  --mist-dim:rgba(169,184,204,.6);
  --line:rgba(169,184,204,.28);

  --font-display:"Source Han Sans SC","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --font-body:"Source Han Serif SC","Noto Serif SC","Songti SC",Georgia,"Times New Roman",serif;
  --font-label:Inter,"Helvetica Neue","PingFang SC",Arial,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --step-display:clamp(34px,6.4vw,64px);
  --step-h2:clamp(26px,3.6vw,36px);
  --step-h3:clamp(19px,2.2vw,24px);
  --step-body:17px;
  --step-small:14px;
  --step-label:12px;

  --wrap-max:1180px;
  --gutter:clamp(18px,4vw,56px);
  --space:clamp(16px,2.6vw,28px);
  --shadow-hard:6px 6px 0 var(--ink-deep);
  --shadow-lift:9px 9px 0 var(--ink-deep);
  --ease:cubic-bezier(.2,.8,.2,1);
  --dur:180ms;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body,h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd{margin:0;}
ul,ol{padding:0;list-style:none;}
img,svg{display:block;max-width:100%;}
button{font:inherit;color:inherit;}
[hidden]{display:none !important;}

/* ---------- 3. 基础排版 ---------- */
body{
  min-height:100vh;
  font-family:var(--font-body);
  font-size:var(--step-body);
  line-height:1.85;
  color:var(--paper);
  background-color:var(--ink);
  background-image:
    linear-gradient(to right,rgba(169,184,204,.055) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(169,184,204,.055) 1px,transparent 1px);
  background-size:88px 88px;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:900;
  line-height:1.14;
  letter-spacing:.01em;
  color:var(--paper);
}
h1{font-size:var(--step-display);line-height:1.06;letter-spacing:.04em;}
h2{font-size:var(--step-h2);}
h3{font-size:var(--step-h3);line-height:1.32;font-weight:700;}

p{max-width:40em;}
small,.small{font-size:var(--step-small);line-height:1.6;}
strong{color:var(--sand);font-weight:700;}

a{color:inherit;text-decoration:none;}
p a,li a,address a{
  color:var(--sand);
  border-bottom:1px solid var(--mist-dim);
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
p a:hover,li a:hover,address a:hover{color:var(--coral);border-bottom-color:var(--coral);}

address{font-style:normal;}
hr{border:0;height:2px;background:var(--slate);margin:clamp(24px,4vw,44px) 0;}

:focus-visible{outline:2px solid var(--sand);outline-offset:3px;}

/* ---------- 4. 工具类 ---------- */
.visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  padding:12px 18px;
  font-family:var(--font-label);font-size:13px;letter-spacing:.12em;
  background:var(--sand);color:var(--ink-deep);
  border:2px solid var(--ink-deep);box-shadow:var(--shadow-hard);
}
.skip-link:focus{position:fixed;left:12px;top:12px;}

.wrap{
  width:100%;
  max-width:var(--wrap-max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ---------- 5. 页头 ---------- */
.site-header{
  position:sticky;top:0;z-index:80;
  background:var(--ink);
  color:var(--paper);
  border-bottom:3px solid var(--coral);
  box-shadow:0 6px 0 rgba(7,21,40,.5);
}
.header-rail{
  background:var(--ink-deep);
  border-bottom:1px solid var(--line);
}
.rail-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;min-height:36px;
}
.rail-tag{
  display:flex;align-items:center;gap:9px;max-width:none;
  font-family:var(--font-label);font-size:11px;line-height:1.4;
  letter-spacing:.22em;text-transform:uppercase;color:var(--mist);
}
.rail-mark{display:block;flex:0 0 auto;width:8px;height:8px;background:var(--jade);}
.rail-links{
  display:flex;align-items:center;gap:clamp(12px,2vw,22px);
  font-family:var(--font-label);font-size:11px;line-height:1.4;letter-spacing:.16em;
}
.rail-links a{
  display:inline-block;padding-block:2px;
  color:var(--mist);border-bottom:1px solid transparent;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.rail-links a:hover{color:var(--coral);border-bottom-color:var(--coral);}

.masthead{position:relative;}
.masthead-inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:20px;
  padding-block:20px 12px;
}
.masthead-meta{
  display:flex;flex-direction:column;gap:2px;max-width:none;
  font-family:var(--font-mono);font-size:11px;line-height:1.5;
  letter-spacing:.16em;color:var(--mist-dim);
  transition:opacity var(--dur) var(--ease);
}
.masthead-meta span:first-child{color:var(--sand);}

.brand{
  display:inline-block;text-align:center;
  color:var(--paper);border-bottom:0;
}
.brand-mark{
  display:block;
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(30px,5.2vw,62px);line-height:1.02;
  letter-spacing:.1em;text-indent:.1em;
  transition:font-size var(--dur) var(--ease),color var(--dur) var(--ease),letter-spacing var(--dur) var(--ease);
}
.brand-line{
  display:block;margin-top:8px;
  font-family:var(--font-label);font-size:10px;line-height:1.4;
  letter-spacing:.34em;text-indent:.34em;color:var(--mist);
}
.brand:hover{border-bottom:0;}
.brand:hover .brand-mark{color:var(--sand);}

.masthead-action{
  display:flex;align-items:center;justify-content:flex-end;gap:10px;
}

.nav-toggle{
  display:none;align-items:center;gap:9px;
  padding:9px 12px;
  background:transparent;color:var(--paper);
  border:2px solid var(--mist);cursor:pointer;
  font-family:var(--font-label);font-size:11px;line-height:1.4;letter-spacing:.18em;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.nav-toggle:hover{border-color:var(--coral);color:var(--coral);}
.nav-toggle-text{display:inline-block;}
.nav-toggle-bars{display:flex;flex-direction:column;gap:3px;width:16px;}
.nav-toggle-bars span{
  display:block;height:2px;background:currentColor;
  transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease);
}
.site-header[data-open="true"] .nav-toggle-bars span:nth-child(1){transform:translateY(5px) rotate(45deg);}
.site-header[data-open="true"] .nav-toggle-bars span:nth-child(2){opacity:0;}
.site-header[data-open="true"] .nav-toggle-bars span:nth-child(3){transform:translateY(-5px) rotate(-45deg);}

.site-nav{
  background:var(--ink);
  border-top:2px solid var(--slate);
}
.nav-list{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(8px,2.2vw,30px);
}
.nav-list a{
  display:block;padding:13px 4px 11px;
  font-family:var(--font-label);font-size:12px;line-height:1.4;
  letter-spacing:.2em;color:var(--paper-dim);
  border-bottom:3px solid transparent;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.nav-list a:hover{color:var(--paper);border-bottom-color:var(--coral);}
.nav-list a[aria-current="page"]{color:var(--sand);border-bottom-color:var(--sand);}

.nav-foot{
  display:none;
  padding:16px var(--gutter) 22px;
  border-top:1px solid var(--line);
}

.scroll-progress{
  position:absolute;left:0;right:0;bottom:0;height:3px;
  background:rgba(169,184,204,.18);
  pointer-events:none;
}
.scroll-progress-bar{
  display:block;width:100%;height:100%;
  background:var(--jade);
  transform:scaleX(0);transform-origin:left center;
  transition:transform 80ms linear;
}

/* ---------- 6. 页脚 ---------- */
.site-footer{
  margin-top:clamp(48px,8vw,96px);
  padding-top:clamp(36px,5.5vw,64px);
  background:var(--ink-deep);
  color:var(--mist);
  border-top:6px solid var(--jade);
}
.footer-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,2fr);
  gap:clamp(28px,5vw,64px);
}
.footer-brand{min-width:0;}
.brand--footer{text-align:left;}
.brand--footer .brand-mark{
  font-size:clamp(26px,3.4vw,40px);letter-spacing:.12em;text-indent:.12em;
}
.brand--footer .brand-line{letter-spacing:.24em;text-indent:.24em;}
.footer-summary{
  margin-top:18px;max-width:32em;
  font-size:15px;line-height:1.9;color:var(--mist);
}
.footer-stamp{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:20px;padding:6px 10px;max-width:none;
  font-family:var(--font-mono);font-size:11px;line-height:1.5;letter-spacing:.16em;
  color:var(--sand);
  border:1px solid rgba(232,196,104,.45);
}
.footer-stamp::before{content:"";display:block;width:7px;height:7px;background:var(--coral);}

.footer-cols{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,3vw,34px);
}
.footer-col{min-width:0;}
.footer-col-title{
  display:flex;align-items:baseline;gap:8px;
  margin-bottom:14px;
  font-family:var(--font-label);font-size:11px;line-height:1.4;
  letter-spacing:.22em;font-weight:500;color:var(--paper);
}
.footer-col-title span{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
  color:var(--jade);font-weight:400;
}
.footer-links{display:flex;flex-direction:column;gap:9px;}
.footer-links a{
  display:inline-block;padding-bottom:2px;
  font-size:14px;line-height:1.6;color:var(--mist);
  border-bottom:1px solid transparent;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.footer-links a:hover{color:var(--coral);border-bottom-color:var(--coral);transform:translateX(3px);}

.footer-contact{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
  margin-top:clamp(28px,4.5vw,52px);
  padding-top:clamp(22px,3vw,32px);
  border-top:1px solid var(--line);
}
.contact-item{min-width:0;}
.contact-item--note{grid-column:1 / -1;}
.contact-label{
  display:block;margin-bottom:6px;
  font-family:var(--font-label);font-size:10px;line-height:1.4;
  letter-spacing:.24em;color:var(--jade);
}
.contact-value{
  max-width:none;
  font-family:var(--font-mono);font-size:13px;line-height:1.7;
  letter-spacing:.02em;color:var(--paper);word-break:break-word;
}
.contact-note{
  max-width:36em;
  font-size:13px;line-height:1.8;color:var(--mist);
}
.footer-base{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px;
  margin-top:clamp(24px,4vw,40px);
  padding-block:20px 26px;
  border-top:1px solid var(--line);
  font-family:var(--font-mono);font-size:11.5px;line-height:1.6;
  letter-spacing:.08em;color:var(--mist-dim);
}
.footer-base p{max-width:none;}

/* ---------- 7. 通用组件 ---------- */
/* 按钮 */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:12px 20px;
  font-family:var(--font-label);font-size:12px;line-height:1.4;
  letter-spacing:.14em;
  color:var(--paper);
  background:transparent;
  border:2px solid var(--mist);
  cursor:pointer;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease),background-color var(--dur) var(--ease),
             color var(--dur) var(--ease);
}
.btn:hover{transform:translate(-2px,-2px);}
.btn--sm{padding:8px 14px;font-size:11px;letter-spacing:.12em;}
.btn--coral{
  background:var(--coral);color:var(--ink-deep);
  border-color:var(--coral);box-shadow:4px 4px 0 var(--ink-deep);
}
.btn--coral:hover{
  background:var(--coral-deep);border-color:var(--coral-deep);color:var(--paper);
  box-shadow:6px 6px 0 var(--ink-deep);
}
.btn--ghost{
  border-color:var(--mist);color:var(--paper);
  box-shadow:4px 4px 0 var(--ink-deep);
}
.btn--ghost:hover{border-color:var(--coral);color:var(--coral);box-shadow:6px 6px 0 var(--ink-deep);}
.btn--sand{
  background:var(--sand);color:var(--ink-deep);
  border-color:var(--sand);box-shadow:4px 4px 0 var(--ink-deep);
}
.btn--sand:hover{box-shadow:6px 6px 0 var(--ink-deep);border-color:var(--paper);}
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;}

/* 标签 */
.tag{
  display:inline-flex;align-items:center;gap:.55em;
  padding:4px 10px;
  font-family:var(--font-label);font-size:11px;line-height:1.5;
  letter-spacing:.12em;color:var(--mist);
  border:1px solid var(--line);
  transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.tag::before{content:"";display:block;flex:0 0 auto;width:8px;height:8px;background:var(--jade);}
.tag:hover{transform:translateY(-2px);border-color:var(--coral);color:var(--paper);}
.tag--coral::before{background:var(--coral);}
.tag--jade::before{background:var(--jade);}
.tag--sand::before{background:var(--sand);}

/* 索引与标题 */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-label);font-size:11px;line-height:1.5;
  letter-spacing:.24em;text-transform:uppercase;color:var(--mist);
}
.eyebrow::before{content:"";display:block;width:24px;height:2px;background:var(--coral);}
.section-num{
  display:inline-block;
  font-family:var(--font-mono);font-size:13px;line-height:1.5;
  letter-spacing:.18em;color:var(--sand);
}
.lede{
  max-width:38em;
  font-size:clamp(17px,2vw,20px);line-height:1.8;
  color:var(--paper-dim);
}

/* 容错卡片 */
.card{
  position:relative;
  padding:var(--space);
  background:var(--slate);
  color:var(--paper);
  border:2px solid var(--line);
  box-shadow:var(--shadow-hard);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.card:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-lift);border-color:var(--coral);}
.card--paper{background:var(--paper);color:var(--ink);border-color:var(--ink-deep);}
.card--paper h2,.card--paper h3{color:var(--ink);}
.card--paper a{color:var(--jade-deep);border-bottom-color:rgba(20,107,102,.4);}
.card--paper a:hover{color:var(--coral-deep);border-bottom-color:var(--coral-deep);}

.panel{
  padding:var(--space);
  background:var(--paper);
  color:var(--ink);
  border:2px solid var(--ink-deep);
  box-shadow:var(--shadow-hard);
}
.panel h2,.panel h3{color:var(--ink);}
.panel a{color:var(--jade-deep);border-bottom:1px solid rgba(20,107,102,.4);}
.panel a:hover{color:var(--coral-deep);border-bottom-color:var(--coral-deep);}

/* 媒体容器（页面阶段放图片） */
.media-frame{
  position:relative;display:block;margin:0;
  aspect-ratio:16/10;
  background-color:var(--ink-deep);
  background-image:
    linear-gradient(rgba(46,196,182,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(46,196,182,.09) 1px,transparent 1px);
  background-size:26px 26px;
  border:2px solid var(--slate);
  box-shadow:var(--shadow-hard);
  overflow:hidden;
}
.media-frame img{width:100%;height:100%;object-fit:cover;}
.media-frame--wide{aspect-ratio:21/9;}
.media-frame--square{aspect-ratio:1/1;}
.media-frame--tall{aspect-ratio:4/5;}
.media-caption{
  display:block;margin-top:10px;
  font-family:var(--font-mono);font-size:12px;line-height:1.6;color:var(--mist);
}

/* 面包屑 */
.breadcrumb{padding-block:18px;}
.breadcrumb ol{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:12px;line-height:1.6;color:var(--mist);
}
.breadcrumb li{display:flex;align-items:center;gap:8px;}
.breadcrumb li:not(:last-child)::after{content:"/";color:var(--slate);}
.breadcrumb a{color:var(--mist);border-bottom:1px solid transparent;}
.breadcrumb a:hover{color:var(--coral);border-bottom-color:var(--coral);}
.breadcrumb [aria-current="page"]{color:var(--sand);}

/* 布局辅助 */
.grid{display:grid;gap:clamp(16px,2.5vw,28px);}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.split-asym{
  display:grid;
  grid-template-columns:minmax(220px,300px) minmax(0,1fr);
  gap:clamp(20px,4vw,48px);
  align-items:start;
}
.flow > * + *{margin-top:var(--flow,1.05em);}

/* 主题带 */
.section-band{
  padding-block:clamp(20px,3vw,32px);
  background:var(--ink-deep);
  border-block:2px solid var(--slate);
}
.section-band--jade{border-top:4px solid var(--jade);}
.section-band--coral{border-top:4px solid var(--coral);}

/* 时间线 */
.timeline{
  position:relative;
  padding-left:clamp(18px,2.4vw,26px);
  border-left:2px solid var(--slate);
}
.timeline > li{
  position:relative;
  padding-bottom:clamp(18px,2.4vw,26px);
}
.timeline > li::before{
  content:"";position:absolute;left:calc(-1 * clamp(18px,2.4vw,26px) - 7px);top:.55em;
  width:12px;height:12px;background:var(--jade);
  border:2px solid var(--ink-deep);
}
.timeline > li:last-child{padding-bottom:0;}
.timeline-date{
  display:inline-block;
  font-family:var(--font-mono);font-size:13px;line-height:1.6;
  letter-spacing:.04em;color:var(--sand);
}

/* 筛选 */
.filter-bar{display:flex;flex-wrap:wrap;gap:8px;}
.filter-btn{
  padding:7px 12px;
  font-family:var(--font-label);font-size:11px;line-height:1.5;letter-spacing:.14em;
  color:var(--mist);background:transparent;
  border:1px solid var(--slate);cursor:pointer;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),background-color var(--dur) var(--ease);
}
.filter-btn:hover{border-color:var(--jade);color:var(--paper);}
.filter-btn[aria-pressed="true"]{background:var(--jade);border-color:var(--jade);color:var(--ink-deep);}
.filter-status{
  font-family:var(--font-mono);font-size:12px;line-height:1.6;
  letter-spacing:.04em;color:var(--mist-dim);
}

/* ---------- 8. 响应式 ---------- */
@media (min-width:861px){
  .site-header[data-compact="true"] .header-rail{display:none;}
  .site-header[data-compact="true"] .masthead-inner{padding-block:10px 6px;}
  .site-header[data-compact="true"] .brand-mark{font-size:24px;letter-spacing:.14em;text-indent:.14em;}
  .site-header[data-compact="true"] .brand-line{display:none;}
  .site-header[data-compact="true"] .masthead-meta{opacity:0;}
  .site-header[data-compact="true"] .nav-list a{padding-block:9px 7px;}
}

@media (max-width:1000px){
  .footer-grid{grid-template-columns:1fr;}
}

@media (max-width:860px){
  .nav-toggle{display:inline-flex;}
  .masthead-inner{grid-template-columns:minmax(0,1fr) auto;padding-block:14px;gap:12px;}
  .masthead-meta{display:none;}
  .brand{text-align:left;}
  .brand-mark{font-size:clamp(26px,7vw,38px);letter-spacing:.08em;text-indent:.08em;}
  .brand-line{font-size:9px;letter-spacing:.22em;text-indent:.22em;}
  .masthead-action .btn--coral{display:none;}

  .site-nav{display:none;}
  .site-header[data-open="true"] .site-nav{display:block;}
  .nav-list{flex-direction:column;gap:0;padding-block:6px;}
  .nav-list a{
    padding:14px 0 14px 12px;
    font-size:13px;letter-spacing:.16em;
    border-bottom:1px solid var(--line);
    border-left:3px solid transparent;
  }
  .nav-list a:hover{border-left-color:var(--coral);border-bottom-color:var(--line);}
  .nav-list a[aria-current="page"]{
    border-left-color:var(--sand);
    border-bottom-color:var(--line);
  }
  .nav-foot{display:block;}

  .split-asym{grid-template-columns:1fr;}
  .footer-cols{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));}
  .footer-base{flex-direction:column;align-items:flex-start;}
}

@media (max-width:560px){
  :root{--step-body:16px;}
  .rail-tag{letter-spacing:.14em;font-size:10px;}
  .rail-links{font-size:10px;letter-spacing:.1em;}
  .btn{width:100%;}
  .btn--sm{width:auto;}
  .footer-contact{grid-template-columns:1fr;}
  .footer-stamp{font-size:10px;letter-spacing:.1em;}
}

/* ---------- 9. 动效偏好 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .btn:hover,.card:hover,.tag:hover,.footer-links a:hover{transform:none;}
  .scroll-progress-bar{transition:none;}
}