/* =========================================================
   华体汇中心 · /assets/site.css
   共享外壳：刊头、居中刊头导航、页脚、通用组件
   折角纸页 / 立体书签 / 索引标签 三种视觉语汇
   ========================================================= */

/* 1. 令牌 ------------------------------------------------- */
:root{
  --ink-900:#0B1B2B;
  --ink-700:#14304A;
  --jade-600:#0F7A6C;
  --jade-400:#45B3A2;
  --mist-050:#EAF5F2;
  --gold-500:#C79A3B;
  --gold-100:#F6ECD8;
  --orange-500:#F0603C;
  --paper-000:#FBF9F5;
  --gray-500:#5A6B7B;
  --line-200:#D7DDE2;

  --font-display:"Noto Serif SC","Source Han Serif SC","Songti SC","STSong",serif;
  --font-body:"Noto Sans SC","Source Han Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-mono:"JetBrains Mono","SFMono-Regular",Menlo,Consolas,"Courier New",monospace;

  --fs-12:12px; --fs-14:14px; --fs-16:16px; --fs-18:18px;
  --fs-24:24px; --fs-32:32px; --fs-48:48px; --fs-64:64px;

  --gutter:clamp(16px,4vw,40px);
  --width-page:1240px;
  --radius-s:6px; --radius-m:12px; --radius-l:20px;
  --shadow-s:0 1px 2px rgba(11,27,43,.06);
  --shadow-m:0 8px 24px rgba(11,27,43,.09);
  --shadow-l:0 18px 44px rgba(11,27,43,.16);
  --ease:cubic-bezier(.22,.61,.36,1);
  --header-h:150px;
}

/* 2. Reset ------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-16);
  line-height:1.8;
  color:var(--ink-700);
  background-color:var(--paper-000);
  background-image:radial-gradient(rgba(11,27,43,.055) 1px,transparent 1px);
  background-size:26px 26px;
  background-position:-1px -1px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg,video{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0}
table{border-collapse:collapse;width:100%}
a{color:var(--jade-600);text-decoration:none;transition:color .18s var(--ease)}
a:hover{color:var(--jade-400)}
:focus-visible{outline:2px solid var(--jade-600);outline-offset:3px;border-radius:var(--radius-s)}
::selection{background:var(--gold-100);color:var(--ink-900)}

/* 3. 排版与工具类 ----------------------------------------- */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:900;color:var(--ink-900);letter-spacing:-.01em;line-height:1.35}
h1{font-size:clamp(var(--fs-32),4.6vw,var(--fs-64))}
h2{font-size:clamp(var(--fs-24),2.8vw,var(--fs-32))}
h3{font-size:var(--fs-18)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.muted{color:var(--gray-500)}
.eyebrow{display:inline-block;font-family:var(--font-mono);font-size:var(--fs-12);letter-spacing:.22em;text-transform:uppercase;color:var(--jade-600)}
.lede{font-size:var(--fs-18);line-height:1.9;color:var(--ink-700);max-width:38ch}
.prose{max-width:40ch}
.prose p + p{margin-top:1em}
.rule{height:1px;background:var(--line-200);border:0;margin:0}
.badge{display:inline-block;font-family:var(--font-mono);font-size:var(--fs-12);padding:2px 8px;border:1px solid var(--line-200);border-radius:999px;color:var(--gray-500)}

/* 4. 版心与布局 ------------------------------------------- */
.container{width:min(var(--width-page),100% - (var(--gutter) * 2));margin-inline:auto}
.container--narrow{width:min(760px,100% - (var(--gutter) * 2));margin-inline:auto}
.section{padding-block:clamp(40px,6vw,80px)}
.section--tight{padding-block:clamp(24px,3vw,40px)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(24px,4vw,56px);align-items:start}
.split--reverse{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.split--even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.sticky-rail{position:sticky;top:calc(var(--header-h) + 16px)}
.grid{display:grid;gap:clamp(16px,2.4vw,28px)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* 5. 纸面组件：面板 / 卡片 / 折角 -------------------------- */
.panel{
  position:relative;
  background:#fff;
  border:1px solid var(--line-200);
  border-radius:var(--radius-m);
  padding:clamp(18px,2.4vw,28px);
  box-shadow:var(--shadow-s);
}
.card{
  position:relative;
  background:#fff;
  border:1px solid var(--line-200);
  border-radius:var(--radius-m);
  padding:clamp(16px,2vw,24px);
  box-shadow:var(--shadow-s);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);border-color:var(--jade-400)}
.card__kicker{font-family:var(--font-mono);font-size:var(--fs-12);letter-spacing:.16em;color:var(--gold-500)}
.card__title{font-family:var(--font-display);font-weight:900;font-size:var(--fs-18);color:var(--ink-900);margin-top:8px}
.card__body{margin-top:10px;font-size:var(--fs-14);color:var(--gray-500)}
.card__meta{margin-top:14px;font-family:var(--font-mono);font-size:var(--fs-12);color:var(--gray-500);display:flex;gap:12px;flex-wrap:wrap}
.has-fold{overflow:hidden}
.has-fold::after{
  content:"";
  position:absolute;
  top:0;right:0;
  width:30px;height:30px;
  background:linear-gradient(225deg,var(--paper-000) 0 48%,var(--line-200) 48% 54%,var(--gold-100) 54% 100%);
  box-shadow:-2px 2px 5px rgba(11,27,43,.09);
  border-end-start-radius:5px;
  pointer-events:none;
}
.callout{
  border-left:3px solid var(--jade-600);
  background:var(--mist-050);
  border-radius:0 var(--radius-m) var(--radius-m) 0;
  padding:16px 20px;
  font-size:var(--fs-14);
  color:var(--ink-700);
}
.callout--gold{border-left-color:var(--gold-500);background:var(--gold-100)}
.callout--jade{border-left-color:var(--jade-600);background:var(--mist-050)}

/* 6. 按钮 ------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 20px;
  border-radius:999px;
  border:1px solid var(--line-200);
  background:#fff;
  color:var(--ink-700);
  font-size:var(--fs-14);
  letter-spacing:.04em;
  cursor:pointer;
  transition:transform .16s var(--ease),background .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease);
}
.btn:hover{transform:translateY(-2px);border-color:var(--jade-400);color:var(--jade-600)}
.btn--primary{background:var(--orange-500);border-color:var(--orange-500);color:#fff}
.btn--primary:hover{background:#d84a28;border-color:#d84a28;color:#fff}
.btn--jade{background:var(--jade-600);border-color:var(--jade-600);color:#fff}
.btn--jade:hover{background:#0c6257;border-color:#0c6257;color:#fff}
.btn--ghost{background:transparent;border-color:var(--ink-900);color:var(--ink-900)}
.btn--ghost:hover{background:var(--ink-900);color:var(--paper-000)}

/* 7. 索引标签 --------------------------------------------- */
.index-tag{
  display:inline-block;
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:var(--fs-12);
  letter-spacing:.08em;
  color:var(--gold-500);
  background:var(--gold-100);
  border:1px solid rgba(199,154,59,.38);
  border-radius:var(--radius-s);
  padding:1px 7px;
  margin-inline-end:6px;
}
.tag-toggle{
  display:flex;align-items:center;gap:10px;
  width:100%;
  text-align:left;
  padding:10px 12px;
  border:1px solid var(--line-200);
  border-radius:var(--radius-s);
  background:#fff;
  cursor:pointer;
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.tag-toggle:hover{border-color:var(--jade-400);background:var(--mist-050)}
.tag-toggle[aria-expanded="true"]{border-color:var(--jade-600);background:var(--mist-050)}
.tag-toggle::after{
  content:"+";
  margin-inline-start:auto;
  font-family:var(--font-mono);
  color:var(--jade-600);
}
.tag-toggle[aria-expanded="true"]::after{content:"−"}
.tag-note{
  max-height:0;
  overflow:hidden;
  opacity:0;
  font-size:var(--fs-14);
  color:var(--gray-500);
  transition:max-height .24s var(--ease),opacity .24s var(--ease),margin .24s var(--ease);
}
.tag-note.is-open{max-height:9em;opacity:1;margin-top:10px}
.tag-group{display:grid;gap:8px}

/* 8. 立体书签 --------------------------------------------- */
.bookmark{
  position:relative;
  display:inline-flex;flex-direction:column;
  padding:10px 18px 14px;
  background:linear-gradient(180deg,var(--jade-600),#0c6257);
  color:#fff;
  border-radius:4px 4px 10px 10px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),50% 100%,0 calc(100% - 9px));
  box-shadow:0 6px 16px rgba(15,122,108,.26);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.bookmark:hover,.bookmark:focus-visible{transform:translateY(-4px);color:#fff;box-shadow:0 12px 24px rgba(15,122,108,.3)}
.bookmark__label{font-size:var(--fs-14);letter-spacing:.06em;white-space:nowrap}
.bookmark__note{
  position:absolute;
  top:calc(100% + 14px);
  left:50%;
  transform:translate(-50%,-4px);
  width:max-content;
  max-width:min(72vw,240px);
  padding:7px 11px;
  background:var(--ink-900);
  color:var(--paper-000);
  font-size:var(--fs-12);
  line-height:1.6;
  letter-spacing:0;
  border-radius:var(--radius-s);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s var(--ease),transform .2s var(--ease);
}
.bookmark:hover .bookmark__note,.bookmark:focus-visible .bookmark__note{opacity:1;transform:translate(-50%,0)}
.bookmark--cta{background:linear-gradient(180deg,var(--orange-500),#d84a28);box-shadow:0 6px 18px rgba(240,96,60,.32)}
.bookmark--cta:hover,.bookmark--cta:focus-visible{box-shadow:0 12px 26px rgba(240,96,60,.36)}

/* 9. 刊头 ------------------------------------------------- */
.skip-link{
  position:absolute;top:0;left:50%;
  transform:translate(-50%,-130%);
  z-index:200;
  padding:10px 18px;
  background:var(--ink-900);
  color:var(--paper-000);
  font-size:var(--fs-14);
  border-radius:0 0 var(--radius-s) var(--radius-s);
  transition:transform .18s var(--ease);
}
.skip-link:focus{transform:translate(-50%,0);color:var(--paper-000)}

.site-header{
  position:sticky;top:0;z-index:80;
  background:rgba(251,249,245,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-200);
}
.scroll-progress{
  position:absolute;left:0;bottom:-1px;
  height:2px;width:0;
  background:linear-gradient(90deg,var(--jade-600),var(--gold-500),var(--orange-500));
  transition:width .1s linear;
}
.masthead{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:16px;
  width:min(var(--width-page),100% - (var(--gutter) * 2));
  margin-inline:auto;
  padding:14px 0 10px;
}
.masthead__aside{display:flex;align-items:center;gap:10px;font-size:var(--fs-12)}
.masthead__aside--left{justify-content:flex-start}
.masthead__aside--right{justify-content:flex-end}
.utility-link{font-family:var(--font-mono);font-size:var(--fs-12);letter-spacing:.08em;color:var(--gray-500)}
.utility-link:hover{color:var(--jade-600)}
.utility-sep{color:var(--line-200)}
.masthead__brand{display:flex;flex-direction:column;align-items:center;text-decoration:none;text-align:center}
.masthead__brand-name{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(22px,2.6vw,34px);
  letter-spacing:.08em;
  color:var(--ink-900);
  line-height:1.2;
}
.masthead__brand-sub{
  font-family:var(--font-mono);
  font-size:var(--fs-12);
  letter-spacing:.24em;
  color:var(--gray-500);
  margin-top:2px;
}
.nav-toggle{
  display:none;
  align-items:center;gap:8px;
  padding:8px 12px;
  border:1px solid var(--line-200);
  border-radius:var(--radius-s);
  background:#fff;
  color:var(--ink-700);
  font-size:var(--fs-14);
  cursor:pointer;
}
.nav-toggle[aria-expanded="true"]{background:var(--mist-050);border-color:var(--jade-400);color:var(--jade-600)}
.nav-toggle__bars{position:relative;display:inline-block;width:16px;height:2px;background:currentColor}
.nav-toggle__bars::before,.nav-toggle__bars::after{content:"";position:absolute;left:0;width:16px;height:2px;background:currentColor}
.nav-toggle__bars::before{top:-5px}
.nav-toggle__bars::after{top:5px}
.nav-toggle__text{white-space:nowrap}

.site-nav{border-top:1px solid var(--line-200)}
.site-nav__list{
  display:flex;flex-wrap:wrap;justify-content:center;
  width:min(var(--width-page),100% - (var(--gutter) * 2));
  margin-inline:auto;
}
.site-nav__item{display:flex}
.site-nav__item + .site-nav__item{border-left:1px solid var(--line-200)}
.site-nav__link{
  position:relative;
  display:block;
  padding:12px 24px;
  font-size:var(--fs-16);
  letter-spacing:.1em;
  color:var(--ink-700);
}
.site-nav__link:hover{color:var(--jade-600);background:var(--mist-050)}
.site-nav__link[aria-current="page"]{color:var(--ink-900);font-weight:700}
.site-nav__link[aria-current="page"]::after{
  content:"";
  position:absolute;left:24px;right:24px;bottom:6px;height:3px;
  background:linear-gradient(90deg,var(--jade-600),var(--gold-500));
  border-radius:2px;
}

/* 10. 页脚 ------------------------------------------------ */
.site-footer{position:relative;margin-top:clamp(48px,7vw,96px);background:var(--ink-900);color:#DCE6EE}
.site-footer::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:100% 30px;
}
.site-footer__inner{
  position:relative;
  display:grid;
  grid-template-columns:1.1fr 1fr 1.35fr 1.15fr;
  gap:clamp(20px,3vw,44px);
  width:min(var(--width-page),100% - (var(--gutter) * 2));
  margin-inline:auto;
  padding:clamp(40px,5vw,64px) 0 32px;
}
.footer-col{display:flex;flex-direction:column;gap:14px}
.footer-col__title{
  font-family:var(--font-mono);
  font-size:var(--fs-12);
  font-weight:500;
  letter-spacing:.2em;
  color:var(--gold-500);
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.footer-brand{font-family:var(--font-display);font-weight:900;font-size:var(--fs-24);color:var(--paper-000);letter-spacing:.06em}
.footer-tagline{font-family:var(--font-mono);font-size:var(--fs-12);letter-spacing:.22em;color:var(--jade-400)}
.footer-meta{font-size:var(--fs-14);color:#9FB3C4}
.footer-meta--mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--gray-500)}
.footer-list{display:flex;flex-direction:column;gap:10px}
.footer-list--ruled .footer-list__item{padding-bottom:10px;border-bottom:1px dashed rgba(11,27,43,.18)}
.footer-list--ruled .footer-list__item:last-child{border-bottom:0;padding-bottom:0}
.footer-list__item{font-size:var(--fs-14);line-height:1.7;color:#C6D5E2}
.footer-link{color:#C6D5E2}
.footer-link:hover{color:var(--jade-400);text-decoration:underline;text-underline-offset:3px}
.footer-key{
  display:inline-block;
  min-width:3.5em;
  font-family:var(--font-mono);
  font-size:var(--fs-12);
  color:var(--gold-500);
  margin-inline-end:6px;
}
.footer-value{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--fs-14);color:#E4EDF4}
.footer-col--bookmark{
  position:relative;
  background:var(--gold-100);
  color:var(--ink-900);
  border-radius:var(--radius-m);
  padding:20px 20px 22px;
  box-shadow:var(--shadow-l);
}
.footer-col--bookmark::before{
  content:"";
  position:absolute;top:-9px;left:20px;
  width:44px;height:9px;
  background:var(--orange-500);
  border-radius:3px 3px 0 0;
}
.footer-col--bookmark .footer-col__title{color:var(--ink-700);border-bottom-color:rgba(11,27,43,.18)}
.footer-col--bookmark .footer-list__item{color:var(--ink-700)}
.footer-col--bookmark .index-tag{background:#fff;color:var(--gold-500)}
.site-footer__legal{
  position:relative;
  display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;align-items:center;
  width:min(var(--width-page),100% - (var(--gutter) * 2));
  margin-inline:auto;
  padding:18px 0 26px;
  border-top:1px solid rgba(255,255,255,.14);
  font-family:var(--font-mono);
  font-size:var(--fs-12);
  color:#8FA3B5;
}
.site-footer__legal-note{color:var(--gray-500)}

/* 11. 返回顶部 -------------------------------------------- */
.back-to-top{
  position:fixed;
  right:clamp(14px,3vw,28px);
  bottom:clamp(14px,3vw,28px);
  z-index:90;
  padding:12px 16px;
  background:linear-gradient(180deg,var(--jade-600),#0c6257);
  color:#fff;
  font-size:var(--fs-12);
  letter-spacing:.1em;
  border-radius:4px 4px 10px 10px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),50% 100%,0 calc(100% - 9px));
  box-shadow:0 8px 20px rgba(15,122,108,.3);
  opacity:0;transform:translateY(10px);pointer-events:none;
  cursor:pointer;
  transition:opacity .28s var(--ease),transform .28s var(--ease);
}
.back-to-top[data-visible]{opacity:1;transform:translateY(0);pointer-events:auto}
.back-to-top:hover{transform:translateY(-4px)}
.back-to-top__text{font-family:var(--font-mono)}

/* 12. 面包屑 ---------------------------------------------- */
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--font-mono);font-size:var(--fs-12);color:var(--gray-500);padding-block:14px}
.breadcrumb__item{color:var(--gray-500)}
.breadcrumb__item a{color:var(--gray-500)}
.breadcrumb__item a:hover{color:var(--jade-600)}
.breadcrumb__item[aria-current="page"]{color:var(--ink-900)}
.breadcrumb__sep{color:var(--line-200)}

/* 13. 图片容器（页面阶段放置占位图） ---------------------- */
.media{position:relative;display:block;width:100%;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--line-200);border-radius:var(--radius-m);background:var(--mist-050)}
.media--16x9{aspect-ratio:16/9}
.media--4x3{aspect-ratio:4/3}
.media--1x1{aspect-ratio:1/1}
.media img{width:100%;height:100%;object-fit:cover}
.media__caption{display:block;margin-top:8px;font-family:var(--font-mono);font-size:var(--fs-12);color:var(--gray-500)}
.media--map{background:linear-gradient(180deg,var(--mist-050),#dceee9)}

/* 14. 对照表 ---------------------------------------------- */
.table-scroll{overflow-x:auto;border:1px solid var(--line-200);border-radius:var(--radius-m);background:#fff}
.compare-table{min-width:640px;font-size:var(--fs-14)}
.compare-table caption{text-align:left;padding:14px 16px;font-family:var(--font-mono);font-size:var(--fs-12);color:var(--gray-500)}
.compare-table th,.compare-table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line-200)}
.compare-table thead th{
  position:sticky;top:0;
  background:var(--mist-050);
  font-family:var(--font-mono);
  font-size:var(--fs-12);
  letter-spacing:.1em;
  color:var(--ink-700);
}
.compare-table tbody tr:nth-child(even){background:#fafcfb}
.compare-table tbody tr{cursor:pointer;transition:background .16s var(--ease)}
.compare-table tbody tr:hover{background:var(--gold-100)}
.compare-table tbody tr.is-active{background:var(--mist-050);box-shadow:inset 3px 0 0 var(--jade-600)}
.compare-table tbody th{font-weight:600;color:var(--ink-900)}

/* 15. 时间带 ---------------------------------------------- */
.timeline{display:flex;gap:18px;overflow-x:auto;padding:24px 4px 18px;scroll-snap-type:x proximity;cursor:grab}
.timeline.is-dragging{cursor:grabbing;user-select:none}
.timeline__item{
  flex:0 0 clamp(200px,26vw,280px);
  scroll-snap-align:start;
  position:relative;
  padding:20px 18px;
  background:#fff;
  border:1px solid var(--line-200);
  border-radius:var(--radius-m);
  transition:transform .32s var(--ease),box-shadow .32s var(--ease);
}
.timeline__item:hover{transform:translateY(-4px);box-shadow:var(--shadow-m)}
.timeline__dot{display:block;width:10px;height:10px;border-radius:50%;background:var(--jade-600);box-shadow:0 0 0 4px var(--mist-050)}
.timeline__time{display:block;margin-top:12px;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--fs-24);color:var(--gold-500)}

/* 16. 章节索引 -------------------------------------------- */
.toc{display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--line-200)}
.toc__link{
  position:relative;
  padding:8px 14px;
  font-family:var(--font-mono);
  font-size:var(--fs-14);
  color:var(--gray-500);
}
.toc__link:hover{color:var(--jade-600);background:var(--mist-050)}
.toc__link[aria-current="true"]{color:var(--ink-900);background:var(--gold-100)}
.toc__link[aria-current="true"]::before{content:"";position:absolute;left:-1px;top:6px;bottom:6px;width:3px;background:var(--jade-600)}
[data-chapter]{scroll-margin-top:calc(var(--header-h) + 16px)}

/* 17. 显现 ------------------------------------------------ */
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
[data-reveal].is-visible{opacity:1;transform:none}

/* 18. 响应式 ---------------------------------------------- */
@media (max-width:1040px){
  .site-footer__inner{grid-template-columns:1fr 1fr}
}
@media (max-width:980px){
  :root{--header-h:120px}
  .split,.split--reverse,.split--even{grid-template-columns:minmax(0,1fr)}
  .sticky-rail{position:static}
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .masthead{grid-template-columns:auto 1fr;grid-template-areas:"brand actions" "utility utility";gap:10px;padding:12px 0}
  .masthead__brand{grid-area:brand;align-items:flex-start;text-align:left}
  .masthead__aside--right{grid-area:actions}
  .masthead__aside--left{
    grid-area:utility;
    justify-content:center;
    padding-top:8px;
    border-top:1px solid var(--line-200);
  }
  .nav-toggle{display:inline-flex}
  .site-nav{display:none;background:var(--paper-000)}
  .site-nav[data-open]{display:block;animation:navDrop .22s var(--ease)}
  .site-nav__list{flex-direction:column;width:100%}
  .site-nav__item + .site-nav__item{border-left:0;border-top:1px solid var(--line-200)}
  .site-nav__link{padding:14px 20px}
  .site-nav__link[aria-current="page"]::after{left:20px;right:auto;width:26px;bottom:9px}
  .bookmark--cta .bookmark__note{display:none}
  .bookmark{padding:9px 14px 13px}
  .bookmark__label{font-size:var(--fs-12)}
}
@keyframes navDrop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@media (max-width:760px){
  .grid--2,.grid--3{grid-template-columns:minmax(0,1fr)}
  .compare-table{min-width:520px}
  .footer-col--bookmark{padding:18px}
}
@media (max-width:640px){
  body{font-size:var(--fs-16)}
  .site-footer__inner{grid-template-columns:minmax(0,1fr);padding-top:36px}
  .site-footer__legal{flex-direction:column;align-items:flex-start}
  .masthead__brand-name{font-size:22px}
  .nav-toggle__text{display:none}
  .utility-link{font-size:11px}
  .back-to-top{padding:10px 13px}
}

/* 19. 可访问性 -------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{opacity:1;transform:none}
}
@media print{
  .site-header,.back-to-top,.timeline{display:none}
  body{background:#fff}
}