/* ============================================================
   威哥指南 · 共享样式 /assets/site.css
   墨黑基底 · 钨钢分区 · 暖纸档案 · 铜色铭牌
   ============================================================ */

:root{
  --ink:#0D0F12;
  --steel:#23272C;
  --plate:#1A1E23;
  --line:#6C7278;
  --paper:#F1E9DA;
  --paper-2:#E6DCC8;
  --paper-3:#DCD1B9;
  --amber:#FF7A18;
  --cyan:#1FD1C4;
  --copper:#B87333;
  --red:#D0432C;
  --white:#F7F4EE;
  --fog:#8FA3B0;

  --font-display:"Oswald","Barlow Condensed","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --font-body:"Inter","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-mono:"JetBrains Mono","Roboto Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --wrap:1280px;
  --gutter:clamp(18px,4vw,48px);
  --col-gap:24px;
  --space:clamp(64px,9vw,140px);
  --hairline:1px solid rgba(184,115,51,.45);
  --hairline-cool:1px solid rgba(108,114,120,.32);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:150px}
body{
  margin:0;
  background:var(--ink);
  color:var(--white);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.75;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{display:block;max-width:100%;height:auto}
h1,h2,h3,h4,h5{margin:0 0 .5em;font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;line-height:1.08}
h1{font-size:clamp(40px,5.4vw,64px)}
h2{font-size:clamp(22px,2.6vw,28px)}
h3{font-size:clamp(18px,2vw,22px)}
p{margin:0 0 1.2em}
p:last-child{margin-bottom:0}
ul,ol{margin:0 0 1.2em;padding-left:1.1em}
a{color:var(--cyan);text-decoration:none;transition:color .18s ease}
a:hover{color:var(--amber)}
button{font:inherit;color:inherit}
hr{border:0}

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

/* ---------- utilities ---------- */
.mono{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;line-height:1.6;color:var(--fog)}
.eyebrow{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber);margin:0 0 14px;
}
.rule{height:1px;background:rgba(184,115,51,.45);border:0;margin:0}
.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}

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

/* ---------- grid ---------- */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--col-gap)}
.col-3{grid-column:span 3}
.col-4{grid-column:span 4}
.col-5{grid-column:span 5}
.col-6{grid-column:span 6}
.col-7{grid-column:span 7}
.col-8{grid-column:span 8}
.col-9{grid-column:span 9}

/* ---------- sections ---------- */
.section{padding:var(--space) 0}
.section--ink{background:var(--ink);color:var(--white)}
.section--steel{background:var(--steel);color:var(--white)}
.section--paper{background:var(--paper);color:#191C20}
.section--paper .mono{color:#5A6167}
.section--paper .eyebrow{color:#9A4A00}
.section--paper a{color:#0B6F69}
.section--paper a:hover{color:#9A4A00}
.section--paper h1,.section--paper h2,.section--paper h3{color:#101316}

/* ---------- 编号章节 ---------- */
.chapter{display:grid;grid-template-columns:minmax(80px,auto) 1fr;gap:clamp(16px,3vw,44px);align-items:start}
.chapter__num{
  font-family:var(--font-display);font-weight:900;font-size:clamp(56px,9vw,140px);
  line-height:.8;letter-spacing:-.03em;color:var(--amber);margin:0;
}
.chapter__body{min-width:0}
.section--paper .chapter__num{color:#B85500}

/* ---------- 铭牌 ---------- */
.plate{
  position:relative;background:var(--plate);
  border:1px solid rgba(184,115,51,.55);
  box-shadow:inset 0 1px 0 rgba(247,244,238,.06),inset 0 0 0 4px rgba(13,15,18,.55);
  padding:clamp(18px,2.4vw,30px);
}
.plate__label{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;
  color:var(--cyan);margin:0 0 8px;
}
.plate__value{
  font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3.4vw,40px);
  letter-spacing:-.02em;line-height:1.05;margin:0;color:var(--white);
}

/* ---------- 纸张叠层 ---------- */
.paper{
  position:relative;z-index:0;background:var(--paper);color:#191C20;
  border:1px solid rgba(184,115,51,.45);
  padding:clamp(24px,3vw,42px);
  margin-bottom:18px;
}
.paper::before,.paper::after{content:"";position:absolute;z-index:-1}
.paper::before{inset:12px -12px -12px 12px;background:var(--paper-2);border:1px solid rgba(184,115,51,.35)}
.paper::after{inset:22px -22px -22px 22px;background:var(--paper-3);border:1px solid rgba(184,115,51,.25)}
.paper .mono{color:#5A6167}

/* ---------- 标签 ---------- */
.tag{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;line-height:1.4;
  padding:4px 9px;border:1px solid currentColor;background:transparent;color:var(--fog);
}
.tag--amber{color:var(--amber)}
.tag--cyan{color:var(--cyan)}
.tag--copper{color:var(--copper)}
.tag--red{color:var(--red)}
.tag--steel{color:var(--fog)}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:13px;letter-spacing:.08em;line-height:1;
  padding:14px 22px;border:1px solid var(--copper);background:transparent;color:var(--white);
  text-decoration:none;cursor:pointer;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.btn:hover{transform:translateY(-2px);border-color:var(--amber);color:var(--amber)}
.btn--primary{background:var(--amber);border-color:var(--amber);color:#141414}
.btn--primary:hover{background:#ff8c37;border-color:#ff8c37;color:#141414}
.btn--ghost{border-color:rgba(108,114,120,.6);color:var(--white)}
.btn--ghost:hover{border-color:var(--cyan);color:var(--cyan)}

/* ---------- 面包屑 ---------- */
.breadcrumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  list-style:none;margin:0;padding:0;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--fog);
}
.breadcrumbs li{display:flex;align-items:center;gap:10px}
.breadcrumbs li+li::before{content:"/";color:var(--line)}
.breadcrumbs a{color:var(--fog)}
.breadcrumbs a:hover{color:var(--cyan)}
.breadcrumbs [aria-current="page"]{color:var(--amber)}

/* ---------- 图片容器 ---------- */
.media-frame{
  position:relative;display:block;width:100%;overflow:hidden;
  background:var(--steel);border:1px solid rgba(184,115,51,.45);
}
.media-frame > img,.media-frame > picture > img{display:block;width:100%;height:100%;object-fit:cover}
.media-frame--wide{aspect-ratio:16/9}
.media-frame--tall{aspect-ratio:3/4}
.media-frame--square{aspect-ratio:1/1}
.media-frame__caption{font-family:var(--font-mono);font-size:12px;color:var(--fog);padding:10px 0 0;margin:0}
.media-frame__chip{
  position:absolute;left:0;bottom:0;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;
  padding:6px 10px;background:var(--ink);color:var(--cyan);
  border-top:1px solid var(--copper);border-right:1px solid var(--copper);
}

/* ---------- 对比表 ---------- */
.ledger{width:100%;border-collapse:collapse;font-size:15px;line-height:1.6}
.ledger th,.ledger td{padding:12px 10px;text-align:left;border-bottom:1px solid rgba(108,114,120,.35);vertical-align:top}
.ledger th{font-family:var(--font-mono);font-size:12px;font-weight:400;letter-spacing:.06em;color:var(--fog)}
.ledger tbody tr:hover{background:rgba(31,209,196,.06)}
.section--paper .ledger th{color:#5A6167}
.section--paper .ledger th,.section--paper .ledger td{border-bottom-color:rgba(108,114,120,.4)}

/* ---------- 可展开条目 ---------- */
.fold{border-top:1px solid rgba(108,114,120,.35)}
.fold__head{
  display:flex;align-items:baseline;gap:16px;width:100%;
  padding:18px 0;background:none;border:0;text-align:left;cursor:pointer;
  transition:color .18s ease;
}
.fold__head:hover{color:var(--cyan)}
.fold__title{font-family:var(--font-display);font-weight:700;font-size:clamp(18px,2.1vw,22px);letter-spacing:-.01em}
.fold[data-open="true"] .fold__head{color:var(--amber)}
.fold__panel{padding:0 0 22px;animation:foldIn .22s ease both}
.fold__panel[hidden]{display:none}
@keyframes foldIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ---------- 显现 ---------- */
html.js-on [data-reveal]{opacity:0;transform:translateY(14px)}
html.js-on [data-reveal][data-revealed="true"]{
  opacity:1;transform:none;
  transition:opacity .5s ease,transform .5s ease;
}

/* ============================================================
   页头
   ============================================================ */
.skip-link{
  position:fixed;top:-70px;left:16px;z-index:200;
  padding:11px 18px;background:var(--amber);color:#141414;
  font-family:var(--font-mono);font-size:13px;letter-spacing:.06em;text-decoration:none;
  transition:top .18s ease;
}
.skip-link:focus{top:12px;color:#141414}

.site-header{
  position:sticky;top:0;z-index:80;
  background:var(--ink);
  color:var(--white);
  border-bottom:1px solid rgba(184,115,51,.55);
  box-shadow:0 24px 44px -34px rgba(0,0,0,.95);
}

.masthead{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:16px;
  width:100%;max-width:var(--wrap);margin:0 auto;
  padding:clamp(12px,1.6vw,22px) var(--gutter) 10px;
  transition:padding .24s ease;
}
.masthead__brand{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(28px,4.4vw,46px);line-height:1;letter-spacing:-.02em;
  color:var(--white);text-decoration:none;
  transition:font-size .24s ease,color .18s ease;
}
.masthead__brand:hover{color:var(--amber)}
.masthead__meta{margin:0;padding-bottom:6px;transition:opacity .2s ease,visibility .2s ease}
.masthead__meta--left{text-align:left;color:var(--fog)}
.masthead__meta--right{
  justify-self:end;text-align:right;
  color:var(--cyan);
  border:1px solid rgba(184,115,51,.6);
  padding:4px 9px;
  background:rgba(184,115,51,.08);
}
.site-header[data-scrolled="true"] .masthead{padding-top:8px;padding-bottom:8px}
.site-header[data-scrolled="true"] .masthead__brand{font-size:clamp(21px,2.6vw,30px)}
.site-header[data-scrolled="true"] .masthead__meta{opacity:0;visibility:hidden}

.nav-band{border-top:1px solid rgba(108,114,120,.28)}
.site-nav{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.site-nav__list{
  display:flex;justify-content:center;align-items:center;
  gap:clamp(14px,3vw,42px);list-style:none;margin:0;padding:0;
}
.site-nav__list a{
  position:relative;display:inline-block;
  padding:14px 2px 13px;
  font-size:15px;font-weight:500;letter-spacing:.02em;
  color:rgba(247,244,238,.72);text-decoration:none;
  transition:color .18s ease;
}
.site-nav__list a::after{
  content:"";position:absolute;left:0;right:0;bottom:8px;height:2px;
  background:var(--amber);transform:scaleX(0);transform-origin:left;
  transition:transform .2s ease;
}
.site-nav__list a:hover{color:var(--white)}
.site-nav__list a:hover::after{transform:scaleX(1)}
.site-nav__list a[aria-current="page"]{color:var(--white)}
.site-nav__list a[aria-current="page"]::after{transform:scaleX(1)}

.nav-toggle{
  display:none;align-items:center;gap:8px;
  background:transparent;border:1px solid rgba(184,115,51,.6);
  color:var(--white);font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;
  padding:10px 13px;cursor:pointer;
}
.nav-toggle__mark{display:inline-block;font-size:14px;color:var(--amber);transition:transform .2s ease}
.nav-toggle[aria-expanded="true"] .nav-toggle__mark{transform:rotate(45deg)}

.scroll-meter{height:2px;background:rgba(108,114,120,.25);overflow:hidden}
.scroll-meter__bar{display:block;height:100%;width:0;background:var(--copper)}

/* ============================================================
   页脚
   ============================================================ */
.site-footer{
  margin-top:clamp(64px,8vw,120px);
  background:var(--ink);color:var(--white);
  border-top:1px solid rgba(184,115,51,.55);
}
.site-footer__inner{
  width:100%;max-width:var(--wrap);margin:0 auto;
  padding:clamp(40px,6vw,72px) var(--gutter) clamp(26px,3vw,38px);
}
.footer-grid{
  display:grid;grid-template-columns:1.5fr 1fr 1.4fr 1fr;
  gap:clamp(24px,3.4vw,44px);
}
.footer-col{min-width:0}
.footer-col + .footer-col{
  border-left:1px solid rgba(184,115,51,.35);
  padding-left:clamp(16px,2vw,28px);
}
.footer-brand{
  font-family:var(--font-display);font-weight:900;font-size:clamp(24px,3vw,34px);
  letter-spacing:-.02em;line-height:1;margin:0 0 12px;color:var(--white);
}
.footer-line{font-size:15px;line-height:1.7;color:rgba(247,244,238,.7);margin:0 0 14px}
.footer-title{
  font-family:var(--font-mono);font-size:12px;font-weight:400;letter-spacing:.14em;
  color:var(--copper);margin:0 0 14px;
}
.footer-list{list-style:none;margin:0;padding:0;font-size:14px;line-height:1.9}
.footer-list li{margin-bottom:6px}
.footer-list a{color:rgba(247,244,238,.72);text-decoration:none}
.footer-list a:hover{color:var(--cyan)}
.footer-list--contact li{display:flex;flex-wrap:wrap;gap:8px;color:rgba(247,244,238,.82)}
.footer-key{color:var(--fog);flex:0 0 auto;min-width:56px}
.footer-note{font-size:13px;line-height:1.8;color:var(--fog);margin:14px 0 0;max-width:34em}
.footer-meta{color:var(--fog);margin:10px 0 0}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width:1024px){
  .grid{gap:20px}
  .col-3,.col-4,.col-6{grid-column:span 6}
  .col-5,.col-7,.col-8,.col-9{grid-column:span 12}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .footer-col + .footer-col{border-left:0;padding-left:0}
  .footer-col:nth-child(even){border-left:1px solid rgba(184,115,51,.3);padding-left:24px}
}

@media (max-width:760px){
  html{scroll-padding-top:120px}
  body{font-size:16px}
  .masthead{grid-template-columns:1fr;justify-items:center;gap:4px;text-align:center;padding-bottom:12px}
  .masthead__meta{display:none}
  .masthead__brand{font-size:30px}
  .site-header[data-scrolled="true"] .masthead__brand{font-size:24px}
  .nav-band{display:block}
  .nav-toggle{display:inline-flex;margin:10px var(--gutter)}
  .site-nav{display:none;padding-bottom:8px}
  .site-nav[data-open="true"]{display:block}
  .site-nav__list{
    justify-content:flex-start;gap:0;
    overflow-x:auto;white-space:nowrap;
    -webkit-overflow-scrolling:touch;
    padding:0 var(--gutter) 8px;
  }
  .site-nav__list li{flex:0 0 auto}
  .site-nav__list a{padding:12px 14px}
  .site-nav__list a::after{bottom:6px}
  .chapter{grid-template-columns:1fr;gap:10px}
  .chapter__num{font-size:64px}
  .paper::before,.paper::after{display:none}
}

@media (max-width:640px){
  .grid{grid-template-columns:1fr;gap:18px}
  .col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9{grid-column:1 / -1}
  .footer-grid{grid-template-columns:1fr;gap:28px}
  .footer-col:nth-child(even){border-left:0;padding-left:0}
  .footer-col + .footer-col{border-top:1px solid rgba(184,115,51,.3);padding-top:22px}
  .btn{width:100%;justify-content:center}
}

/* ============================================================
   动效降级
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    transition-duration:.001ms !important;
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
  }
  html.js-on [data-reveal]{opacity:1;transform:none}
  .btn:hover{transform:none}
}