/* ===================================================================
   多多28中文专区 — 共享样式表 /assets/site.css
   体系：奶油纸档案册 × 墨蓝诊断面板 × 1px 细线网格 × 等宽状态标签
   =================================================================== */

/* 1. 设计变量 ------------------------------------------------------- */
:root{
  --ink:#0A1A2A;
  --panel-blue:#12293C;
  --cream:#F5F0E4;
  --paper:#E8DFCB;
  --deep:#1B1917;
  --cream-inv:#F3EEE2;
  --orange:#D9481F;
  --celadon:#2E9C8B;
  --deep-teal:#1E6B60;
  --amber:#C99A2E;
  --slate:#6E7F8D;
  --pale-slate:#A9B6C0;

  --line:rgba(27,25,23,.18);
  --line-strong:rgba(27,25,23,.42);
  --line-inv:rgba(243,238,226,.22);
  --line-inv-soft:rgba(243,238,226,.13);

  --font-sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono","SFMono-Regular",ui-monospace,Menlo,Consolas,"Courier New",monospace;

  --gutter:clamp(16px,5vw,64px);
  --maxw:1440px;
  --ease:cubic-bezier(.2,.7,.3,1);
  --dur:200ms;
}

/* 2. Reset ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:112px}
body,h1,h2,h3,h4,h5,h6,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{max-width:100%}
button{font:inherit;color:inherit}
a{color:var(--ink);text-decoration:none}
a:hover{text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:4px}
table{border-collapse:collapse}
:where(a,button,summary,[tabindex]):focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* 3. 基础排版 ------------------------------------------------------- */
body{
  background-color:var(--cream);
  background-image:
    repeating-linear-gradient(to right, rgba(27,25,23,.042) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(to bottom, rgba(27,25,23,.042) 0 1px, transparent 1px 24px);
  color:var(--deep);
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.85;
  min-height:100vh;
}
h1,h2,h3,h4,h5,h6{font-weight:800;line-height:1.25;letter-spacing:-.01em}
h1{font-size:clamp(32px,4.6vw,56px);line-height:1.1;letter-spacing:-.02em}
h2{font-size:clamp(24px,3vw,40px)}
h3{font-size:clamp(20px,2.2vw,28px)}
h4{font-size:clamp(17px,1.8vw,22px)}
strong{font-weight:700}
.mono{font-family:var(--font-mono);font-size:.92em;letter-spacing:.02em}
.eyebrow{display:block;font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;color:var(--slate);margin-bottom:14px}
.display-1{font-size:clamp(34px,5.2vw,56px);line-height:1.08;letter-spacing:-.02em;font-weight:800;margin-bottom:24px}
.display-2{font-size:clamp(26px,3.4vw,40px);line-height:1.14;letter-spacing:-.015em;font-weight:800;margin-bottom:20px}
.lead{font-size:clamp(17px,1.5vw,19px);line-height:1.8;max-width:62ch;color:#302C27}
.prose{max-width:68ch}
.prose p + p{margin-top:16px}
.prose h2,.prose h3{margin:40px 0 16px}
.prose ul li{position:relative;padding-left:22px;margin-top:10px}
.prose ul li::before{content:"";position:absolute;left:0;top:.95em;width:12px;height:1px;background:var(--slate)}
.prose strong{color:var(--ink)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.full-bleed{width:100vw;margin-left:calc(50% - 50vw)}

/* 4. 跳转链接 ------------------------------------------------------- */
.skip-link{
  position:fixed;top:-80px;left:12px;z-index:400;
  padding:10px 18px;background:var(--orange);color:#fff;
  font-size:15px;font-weight:700;letter-spacing:.02em;
  transition:top var(--dur) var(--ease);
}
.skip-link:focus{top:12px;text-decoration:none}

/* 5. 页头 ----------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--cream);
  border-top:3px solid var(--ink);
  border-bottom:1px solid var(--line-strong);
}
.scroll-progress{
  position:absolute;left:0;bottom:-1px;
  display:block;width:100%;height:2px;
  background:var(--orange);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .12s linear;
  pointer-events:none;
}
.header-inner{
  display:flex;align-items:stretch;flex-wrap:nowrap;
  width:100%;max-width:var(--maxw);
  margin:0 auto;padding:0 var(--gutter);
  min-height:78px;
}
.brand-block{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.brand{display:inline-flex;align-items:baseline;gap:8px;text-decoration:none;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand-mark{font-size:23px;font-weight:800;letter-spacing:-.01em;line-height:1;padding-bottom:3px;border-bottom:2px solid var(--ink)}
.brand-sub{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;color:var(--slate);text-transform:uppercase}
.cert-badge{
  display:inline-flex;align-items:center;gap:7px;
  padding:3px 9px;border:1px solid rgba(30,107,96,.45);
  background:rgba(46,156,139,.09);color:var(--deep-teal);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;line-height:1.7;
  white-space:nowrap;
}
.status-strip{margin-inline:auto;display:flex;align-items:center;padding-inline:20px}
.status-strip__full{display:inline-flex;align-items:center;gap:12px}
.status-strip__item{display:inline-flex;align-items:baseline;gap:8px;white-space:nowrap}
.status-strip__label{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--slate)}
.status-strip__value{font-family:var(--font-mono);font-size:13px;letter-spacing:.02em;color:var(--ink);font-weight:700}
.status-strip__rule{display:inline-block;width:1px;height:16px;background:var(--line-strong)}
.status-strip__dot{flex:0 0 auto}
.status-strip__compact{
  display:none;
  padding:4px 10px;border:1px solid rgba(30,107,96,.4);
  background:rgba(46,156,139,.08);color:var(--deep-teal);
  font-size:11px;letter-spacing:.08em;white-space:nowrap;
}
.site-nav{display:flex;align-items:stretch;margin-left:0}
.nav-list{display:flex;align-items:stretch}
.nav-item{display:flex}
.nav-item + .nav-item{border-left:1px solid var(--line)}
.nav-link{
  position:relative;display:inline-flex;align-items:center;
  padding:0 16px;color:var(--deep);text-decoration:none;
  font-size:15px;letter-spacing:.01em;
  transition:color var(--dur) var(--ease),background-color var(--dur) var(--ease);
}
.nav-link::after{
  content:"";position:absolute;left:16px;right:16px;bottom:18px;height:2px;
  background:var(--orange);transform:scaleX(0);transform-origin:left center;
  transition:transform var(--dur) var(--ease);
}
.nav-link:hover{background:var(--paper);text-decoration:none}
.nav-link:hover::after{transform:scaleX(1)}
.nav-link[aria-current="page"]{color:var(--ink);font-weight:700;background:var(--paper)}
.nav-link[aria-current="page"]::after{transform:scaleX(1)}
.nav-toggle{
  display:none;align-items:center;gap:9px;align-self:center;
  padding:9px 12px;border:1px solid var(--line-strong);background:transparent;
  color:var(--ink);font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;
  cursor:pointer;z-index:130;border-radius:0;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.nav-toggle::before{
  content:"";width:14px;height:8px;
  border-top:2px solid currentColor;border-bottom:2px solid currentColor;
}
.nav-toggle:hover{background:var(--ink);color:var(--cream-inv);border-color:var(--ink)}
.nav-toggle__text{display:inline-block;min-width:2em;text-align:left}

/* 6. 页脚 ----------------------------------------------------------- */
.site-footer{
  position:relative;
  margin-top:clamp(48px,7vw,96px);
  background-color:var(--ink);
  background-image:repeating-linear-gradient(135deg, rgba(243,238,226,.05) 0 1px, transparent 1px 10px);
  color:var(--cream-inv);
  border-top:1px solid rgba(243,238,226,.2);
}
.site-footer::before{
  content:"";position:absolute;top:0;left:0;
  width:clamp(64px,12vw,200px);height:3px;background:var(--orange);
}
.footer-inner{width:100%;max-width:var(--maxw);margin:0 auto;padding:clamp(40px,5vw,64px) var(--gutter) 0}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1.25fr 1fr;gap:clamp(24px,3vw,48px)}
.footer-col{min-width:0}
.footer-brand{
  display:inline-flex;align-items:baseline;gap:9px;
  color:var(--cream-inv);font-size:24px;font-weight:800;letter-spacing:-.01em;
}
.footer-brand:hover{text-decoration:none;color:#fff}
.footer-brand__sub{font-family:var(--font-mono);font-size:11px;font-weight:400;letter-spacing:.18em;color:var(--pale-slate)}
.footer-badge{
  display:flex;align-items:center;gap:8px;width:fit-content;
  margin:16px 0 18px;padding:4px 10px;
  border:1px solid rgba(46,156,139,.5);color:var(--celadon);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
}
.footer-note{font-size:15px;line-height:1.8;color:var(--pale-slate);max-width:32ch}
.footer-heading{
  display:block;margin-bottom:18px;padding-top:14px;
  border-top:1px solid var(--line-inv);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;
  font-weight:700;color:var(--pale-slate);text-transform:uppercase;
}
.footer-links li{padding:9px 0;border-bottom:1px dashed var(--line-inv-soft)}
.footer-links li:last-child{border-bottom:0}
.footer-link{display:inline-block;font-size:15px;color:var(--cream-inv);text-decoration:none;transition:color var(--dur) var(--ease)}
.footer-link:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px}
.footer-links--meta li{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.version-key{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--pale-slate)}
.version-value{font-family:var(--font-mono);font-size:13px;color:var(--cream-inv);white-space:nowrap}
.footer-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.contact-list li:last-child{border-bottom:0}
.contact-item{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:10px 0;border-bottom:1px dashed var(--line-inv-soft);
}
.contact-key{flex:0 0 auto;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--pale-slate)}
.contact-value{font-size:15px;color:var(--cream-inv);text-align:right;word-break:break-word}
.copy-btn{
  margin-left:8px;padding:2px 8px;
  border:1px solid rgba(243,238,226,.35);background:transparent;
  color:var(--cream-inv);font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
  line-height:1.7;cursor:pointer;border-radius:0;
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.copy-btn:hover{background:rgba(243,238,226,.12);border-color:rgba(243,238,226,.7)}
.copy-btn[data-copied="true"]{border-color:var(--celadon);color:var(--celadon)}
.footer-legal{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
  margin-top:clamp(32px,4vw,52px);padding:20px 0 30px;
  border-top:1px solid var(--line-inv);
}
.legal-line{font-family:var(--font-mono);font-size:13px;letter-spacing:.02em;color:var(--pale-slate)}

/* 7. 通用容器与画板 ------------------------------------------------- */
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.board{
  position:relative;
  padding-block:clamp(36px,5.5vw,72px);
  border-top:1px solid var(--line-strong);
}
.board:first-of-type{border-top:0}
.board--ink{background:var(--panel-blue);color:var(--cream-inv);border-top:1px solid rgba(243,238,226,.16)}
.board--paper{background:var(--paper)}
.board-head{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:14px;
  margin-bottom:clamp(20px,3vw,32px);padding-bottom:12px;
  border-bottom:1px solid var(--line);
}
.board-num{font-family:var(--font-mono);font-size:13px;letter-spacing:.06em;color:var(--slate)}
.board-title{margin:0;font-size:clamp(22px,2.6vw,28px);font-weight:800;letter-spacing:-.01em}
.board-kicker{margin-left:auto;font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;color:var(--slate)}
.board--ink .board-title{color:var(--cream-inv)}
.board--ink .board-num,.board--ink .board-kicker{color:var(--pale-slate)}
.board--ink .board-head{border-bottom-color:var(--line-inv)}
.rot-note{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;color:var(--slate);
  writing-mode:vertical-rl;text-orientation:mixed;text-transform:uppercase;
}

/* 8. 网格 ----------------------------------------------------------- */
.grid{display:grid;gap:clamp(16px,2.4vw,24px)}
.grid--split{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.grid--halves{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--thirds{grid-template-columns:repeat(3,minmax(0,1fr))}

/* 9. 按钮 ----------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 22px;border:1px solid var(--ink);background:transparent;color:var(--ink);
  font-size:15px;font-weight:600;letter-spacing:.02em;line-height:1.5;
  border-radius:0;cursor:pointer;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.btn:hover{background:var(--ink);color:var(--cream-inv);text-decoration:none;border-color:var(--ink)}
.btn--primary{background:var(--orange);border-color:var(--orange);color:#fff}
.btn--primary:hover{background:#B93B18;border-color:#B93B18;color:#fff}
.btn--ghost{border-color:rgba(243,238,226,.42);color:var(--cream-inv);background:transparent}
.btn--ghost:hover{background:var(--cream-inv);border-color:var(--cream-inv);color:var(--ink)}
.btn--sm{padding:8px 14px;font-size:13px;letter-spacing:.04em}

/* 10. 状态标签与指示点 ---------------------------------------------- */
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--slate);flex:0 0 auto}
.dot--celadon{background:var(--celadon);box-shadow:0 0 0 3px rgba(46,156,139,.18)}
.dot--orange{background:var(--orange);box-shadow:0 0 0 3px rgba(217,72,31,.16)}
.dot--amber{background:var(--amber);box-shadow:0 0 0 3px rgba(201,154,46,.18)}
.dot--pale{background:var(--pale-slate)}
.tag{
  display:inline-flex;align-items:center;gap:8px;
  padding:3px 10px;border:1px solid var(--line-strong);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;line-height:1.8;
  color:var(--deep);background:transparent;white-space:nowrap;
  transition:border-width var(--dur) var(--ease),background-color var(--dur) var(--ease);
}
.tag--ok{border-color:var(--celadon);color:var(--deep-teal);background:rgba(46,156,139,.1)}
.tag--warn{border-color:var(--amber);color:#8A6516;background:rgba(201,154,46,.12)}
.tag--alert{border-color:var(--orange);color:#A83513;background:rgba(217,72,31,.1)}

/* 11. 面包屑 -------------------------------------------------------- */
.breadcrumbs{padding-block:18px;border-bottom:1px solid var(--line)}
.breadcrumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--slate)}
.breadcrumbs li{display:inline-flex;align-items:center;gap:8px}
.breadcrumbs li + li::before{content:"/";color:var(--pale-slate)}
.breadcrumbs a{color:var(--slate);text-decoration:none}
.breadcrumbs a:hover{color:var(--ink)}
.breadcrumbs [aria-current="page"]{color:var(--ink);font-weight:700}

/* 12. 图片容器基础规则 --------------------------------------------- */
.figure{
  display:flex;flex-direction:column;margin:0;
  border:1px solid var(--line-strong);background:var(--paper);
}
.figure__media{
  position:relative;display:block;width:100%;aspect-ratio:16 / 10;
  overflow:hidden;background:var(--paper);
}
.figure__media img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.94)}
.figure__cap{
  padding:10px 12px;border-top:1px solid var(--line);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--slate);
}
.figure--tall .figure__media{aspect-ratio:4 / 5}
.figure--wide .figure__media{aspect-ratio:21 / 9}
.figure--ink{border-color:var(--line-inv);background:var(--panel-blue)}
.figure--ink .figure__media{background:var(--ink)}
.figure--ink .figure__cap{border-top-color:var(--line-inv);color:var(--pale-slate)}

/* 13. 数据表格 ------------------------------------------------------ */
.data-table{width:100%;font-size:15px;border:1px solid var(--line-strong);background:rgba(255,255,255,.22)}
.data-table caption{
  padding-bottom:10px;text-align:left;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;color:var(--slate);
}
.data-table th,.data-table td{padding:11px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.data-table thead th{
  background:var(--paper);border-bottom:1px solid var(--line-strong);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;font-weight:700;color:var(--deep);
  white-space:nowrap;
}
.data-table tbody tr{transition:background-color var(--dur) var(--ease)}
.data-table tbody tr:hover{background:var(--paper)}
.data-table tbody tr:last-child td{border-bottom:0}

/* 14. 入场与动效 ---------------------------------------------------- */
[data-reveal]{transition:opacity 220ms var(--ease),transform 220ms var(--ease)}
[data-reveal].reveal-pending{opacity:0;transform:translateY(8px)}
[data-reveal].is-visible{opacity:1;transform:none}

/* 15. 响应式 -------------------------------------------------------- */
@media (max-width:1180px){
  .status-strip__full{display:none}
  .status-strip__compact{display:inline-flex}
  .nav-link{padding:0 12px;font-size:14px}
  .nav-link::after{left:12px;right:12px;bottom:16px}
}

@media (max-width:980px){
  html{scroll-padding-top:96px}
  .header-inner{min-height:66px;gap:12px}
  .brand-mark{font-size:20px;padding-bottom:2px}
  .brand-sub{display:none}
  .status-strip{padding-inline:0;margin-inline:auto}
  .nav-toggle{display:inline-flex;margin-left:0}
  .site-nav{
    position:fixed;top:0;right:0;bottom:0;left:auto;z-index:120;
    width:min(86vw,340px);
    display:block;overflow-y:auto;
    padding:88px 0 36px;
    background-color:var(--ink);
    background-image:repeating-linear-gradient(135deg, rgba(243,238,226,.05) 0 1px, transparent 1px 10px);
    border-left:1px solid var(--line-inv);
    transform:translateX(101%);
    transition:transform 220ms var(--ease);
  }
  .site-nav[data-open="true"]{transform:translateX(0)}
  .site-nav::before{
    content:"栏目索引 / INDEX";display:block;
    padding:0 24px 14px;margin-bottom:6px;
    border-bottom:1px solid var(--line-inv);
    font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;color:var(--pale-slate);
  }
  .nav-list{flex-direction:column;align-items:stretch}
  .nav-item + .nav-item{border-left:0;border-top:1px solid var(--line-inv-soft)}
  .nav-link{
    display:flex;width:100%;height:auto;padding:16px 24px;
    color:var(--cream-inv);font-size:17px;background:transparent;
  }
  .nav-link::after{left:24px;right:auto;width:44px;bottom:10px}
  .nav-link:hover{background:rgba(243,238,226,.08)}
  .nav-link[aria-current="page"]{background:rgba(217,72,31,.18);color:#fff}
  .grid--split,.grid--halves,.grid--thirds{grid-template-columns:minmax(0,1fr)}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-col--brand{grid-column:1 / -1}
}

@media (max-width:720px){
  body{font-size:16px;line-height:1.8}
  .brand-mark{font-size:19px}
  .cert-badge{display:none}
  .status-strip__compact{font-size:10px;letter-spacing:.06em;padding:3px 8px}
  .data-table{background:transparent;border:0}
  .data-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .data-table tr{display:block;border:1px solid var(--line-strong);margin-bottom:12px;background:rgba(255,255,255,.28)}
  .data-table td{display:flex;gap:12px;border:0;border-bottom:1px dashed var(--line);padding:8px 12px}
  .data-table td:last-child{border-bottom:0}
  .data-table td::before{
    content:attr(data-label);flex:0 0 92px;
    font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--slate);
  }
  .footer-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .contact-item{flex-wrap:wrap;justify-content:flex-start;gap:6px 10px}
  .contact-value{text-align:left}
  .footer-legal{flex-direction:column;gap:8px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal],
  [data-reveal].reveal-pending{opacity:1 !important;transform:none !important}
  .scroll-progress{transition:none}
}