/* ==========================================================================
   加拿大 PC 中国站 — 全站共享样式 /assets/site.css
   母题：招牌标识 / 栏目索引带 / 纸张叠层 / 非对称编辑部版式
   ========================================================================== */

/* ---------- 1. 变量 ---------- */
:root{
  --ink:#101316;
  --slate:#2B3540;
  --steel:#5E7180;
  --mist:#F2F3F0;
  --paper:#E6E8E3;
  --line:#C9D0D2;
  --maple:#B3261E;
  --maple-deep:#7E1B16;
  --mist-blue:#AEBBC2;

  --font-display:"Barlow Condensed","DIN Condensed","Arial Narrow","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --font-body:"Inter","Noto Sans SC","PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono","Roboto Mono","SFMono-Regular","Courier New",monospace;

  --wrap:1240px;
  --gutter:clamp(20px,4.5vw,56px);
  --band-h:34px;
  --hair:1px solid var(--line);
  --ease:cubic-bezier(.22,.61,.36,1);
  --shell-hairline:rgba(242,243,240,.16);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body,h1,h2,h3,h4,h5,p,ul,ol,li,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse}
:focus-visible{outline:2px solid var(--maple);outline-offset:3px}
::selection{background:var(--maple);color:#fff}

/* ---------- 3. 中文排版与正文基底 ---------- */
body{
  background:var(--mist);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  font-weight:400;
  line-height:1.85;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:300;
  color:var(--ink);
  font-stretch:condensed;
  letter-spacing:-.02em;
  text-wrap:balance;
}
h1{font-size:clamp(3.2rem,7vw,7.5rem);line-height:.95}
h2{font-size:clamp(2rem,3.4vw,3.6rem);line-height:1.02}
h3{font-size:clamp(1.15rem,1.6vw,1.5rem);line-height:1.4;letter-spacing:.01em}
h4{font-size:1.05rem;line-height:1.5;letter-spacing:.02em;font-weight:400}

p{max-width:68ch}
.prose{max-width:68ch;font-size:1.02rem;line-height:1.85;color:var(--slate)}
.prose > * + *{margin-top:1.25em}
.prose h2,.prose h3{color:var(--ink)}
.prose h2{margin-top:2.2em}
.prose h3{margin-top:1.8em}
.prose ul{display:grid;gap:.5em;padding-left:1.1em;list-style:none}
.prose ul li{position:relative}
.prose ul li::before{
  content:"";
  position:absolute;left:-1.1em;top:.72em;
  width:9px;height:1px;background:var(--steel);
}
.prose strong{font-weight:600;color:var(--ink)}
.prose a{border-bottom:1px solid var(--maple);color:var(--ink)}

.lede{
  font-size:clamp(1.05rem,1.35vw,1.22rem);
  line-height:1.8;
  color:var(--slate);
  max-width:60ch;
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--steel);
  display:block;
  margin-bottom:1rem;
}

.rule{
  height:1px;
  background:var(--line);
  border:0;
  width:100%;
  margin-block:clamp(28px,4vw,52px);
}

.visually-hidden{
  position:absolute!important;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);clip-path:inset(50%);
  overflow:hidden;white-space:nowrap;
}

/* ---------- 4. 跳转链接 ---------- */
.skip-link{
  position:absolute;
  left:16px;top:-120px;
  z-index:300;
  padding:.75em 1.25em;
  background:var(--ink);
  color:var(--mist);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.12em;
  border-bottom:2px solid var(--maple);
  transition:top .18s var(--ease);
}
.skip-link:focus{top:0}

/* ---------- 5. 阅读进度 ---------- */
.scroll-progress{
  position:fixed;
  inset:0 0 auto 0;
  height:2px;
  z-index:120;
  pointer-events:none;
  background:transparent;
}
.scroll-progress__bar{
  display:block;
  width:100%;
  height:100%;
  background:var(--maple);
  transform:scaleX(0);
  transform-origin:left center;
}

/* ---------- 6. 页头：索引带 ---------- */
.site-header{
  position:relative;
  z-index:60;
  background:var(--mist);
}

.index-band{
  background:var(--ink);
  color:var(--mist-blue);
  height:var(--band-h);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.index-band__inner{
  height:100%;
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  overflow:hidden;
}
.index-band__label{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  color:var(--mist);
  white-space:nowrap;
}
.index-band__label::before{
  content:"";
  width:6px;height:6px;
  background:var(--maple);
  flex:none;
}
.index-band__meta{white-space:nowrap}
.index-band__meta--ver{color:var(--mist-blue)}
.index-band__meta--ver::before{
  content:"";
  display:inline-block;
  width:14px;height:1px;
  background:var(--maple);
  vertical-align:middle;
  margin-right:.7em;
}

/* ---------- 7. 页头：居中刊头 ---------- */
.masthead{
  background:var(--mist);
  border-bottom:var(--hair);
}
.masthead__inner{
  max-width:var(--wrap);
  margin-inline:auto;
  padding:clamp(18px,2.6vw,32px) var(--gutter);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:1rem;
}
.masthead__brand{
  grid-column:2;
  justify-self:center;
  text-align:center;
  min-width:0;
}
.masthead__logo{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  line-height:1;
}
.masthead__mark{
  flex:none;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.1em;
  color:#fff;
  background:var(--maple);
  padding:.4em .55em;
  line-height:1;
}
.masthead__wordmark{
  font-family:var(--font-display);
  font-stretch:condensed;
  font-size:clamp(1.35rem,2.6vw,2.05rem);
  font-weight:300;
  letter-spacing:.01em;
  color:var(--ink);
  white-space:nowrap;
}
.masthead__tagline{
  margin-top:.75rem;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.16em;
  color:var(--steel);
  max-width:none;
}
.masthead__issue{
  grid-column:3;
  justify-self:end;
  text-align:right;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  line-height:1.7;
  color:var(--steel);
  max-width:none;
}
.masthead__issue-num{
  display:block;
  color:var(--maple);
  font-weight:600;
  letter-spacing:.14em;
}

/* ---------- 8. 页头：移动导航按钮 ---------- */
.nav-toggle{
  grid-column:1;
  justify-self:start;
  display:none;
  align-items:center;
  gap:.55rem;
  padding:.55em .8em;
  border:var(--hair);
  background:var(--paper);
  color:var(--slate);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  transition:color .18s var(--ease),border-color .18s var(--ease);
}
.nav-toggle:hover{color:var(--maple);border-color:var(--maple)}
.nav-toggle__bars{
  position:relative;
  display:block;
  width:16px;height:1px;
  background:currentColor;
  flex:none;
  transition:background .18s var(--ease);
}
.nav-toggle__bars::before,
.nav-toggle__bars::after{
  content:"";
  position:absolute;
  left:0;
  width:16px;height:1px;
  background:currentColor;
  transition:transform .2s var(--ease);
}
.nav-toggle__bars::before{top:-5px}
.nav-toggle__bars::after{top:5px}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{transform:translateY(5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{transform:translateY(-5px) rotate(-45deg)}

/* ---------- 9. 页头：主导航 ---------- */
.main-nav{
  background:var(--mist);
  border-bottom:var(--hair);
}
.main-nav__list{
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:clamp(.75rem,2.4vw,2.6rem);
}
.main-nav__item{display:block}
.main-nav__link{
  position:relative;
  display:block;
  padding:15px 0 13px;
  font-size:.95rem;
  letter-spacing:.07em;
  color:var(--slate);
  transition:color .18s var(--ease);
}
.main-nav__link::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  background:var(--slate);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .2s var(--ease),background .2s var(--ease);
}
.main-nav__link:hover{color:var(--ink)}
.main-nav__link:hover::after{transform:scaleX(1);background:var(--steel)}
.main-nav__link[aria-current="page"]{color:var(--maple);font-weight:500}
.main-nav__link[aria-current="page"]::after{transform:scaleX(1);background:var(--maple)}

/* ---------- 10. 页脚 ---------- */
.site-footer{
  margin-top:clamp(64px,9vw,132px);
  background:var(--ink);
  color:var(--mist-blue);
  font-size:.94rem;
  line-height:1.75;
}
.footer__accent{
  height:3px;
  background:var(--maple-deep);
}
.footer__inner{
  max-width:var(--wrap);
  margin-inline:auto;
  padding:clamp(44px,6.5vw,84px) var(--gutter) clamp(24px,3.5vw,44px);
}
.footer__brand{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.75rem 1.1rem;
  padding-bottom:clamp(22px,3.5vw,36px);
  border-bottom:1px solid var(--shell-hairline);
}
.footer__mark{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.16em;
  color:var(--mist);
  background:var(--maple-deep);
  padding:.34em .6em;
  line-height:1;
}
.footer__wordmark{
  font-family:var(--font-display);
  font-stretch:condensed;
  font-size:clamp(1.45rem,2.8vw,2.15rem);
  font-weight:300;
  letter-spacing:.01em;
  color:var(--mist);
  line-height:1.1;
}
.footer__scope{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--steel);
}
.footer__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(26px,4vw,52px);
  padding-block:clamp(28px,4.5vw,48px);
  border-bottom:1px solid var(--shell-hairline);
}
.footer__col{min-width:0}
.footer__col-title{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--steel);
  margin-bottom:1.1rem;
  font-stretch:normal;
}
.footer__list{display:grid;gap:.55rem}
.footer__link{
  color:var(--mist-blue);
  border-bottom:1px solid transparent;
  transition:color .18s var(--ease),border-color .18s var(--ease);
}
.footer__link:hover{color:var(--mist);border-bottom-color:var(--maple)}
.footer__meta{display:grid;gap:.45rem}
.footer__meta-line{
  max-width:none;
  color:var(--mist-blue);
  font-size:.9rem;
  word-break:break-word;
}
.footer__meta-line > span{color:var(--mist)}
.copy-btn{
  justify-self:start;
  display:inline-flex;
  align-items:center;
  margin:.35rem 0 .75rem;
  padding:.4em .85em;
  border:1px solid rgba(174,187,194,.42);
  color:var(--mist-blue);
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.12em;
  transition:color .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease);
}
.copy-btn:hover{color:var(--mist);border-color:var(--maple);background:rgba(179,38,30,.16)}
.copy-btn.is-copied{color:#fff;border-color:var(--maple);background:var(--maple-deep)}
.footer__legal{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:baseline;
  gap:.5rem 1.5rem;
  padding-top:clamp(18px,3vw,28px);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--steel);
  line-height:1.9;
}
.footer__legal-item{max-width:none}

/* ---------- 11. 容器与网格 ---------- */
.container{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.grid{
  display:grid;
  gap:clamp(24px,3.4vw,48px);
  align-items:start;
}
.grid--5-7{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.grid--4-7{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
.stack{display:flex;flex-direction:column;gap:clamp(16px,2.2vw,28px)}
.stack--tight{gap:clamp(8px,1.2vw,14px)}
.stack--wide{gap:clamp(32px,5vw,64px)}

/* ---------- 12. 标签与按钮 ---------- */
.tag{
  display:inline-flex;
  align-items:center;
  gap:.45em;
  padding:.32em .7em;
  border:var(--hair);
  background:var(--paper);
  color:var(--slate);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.12em;
  line-height:1.4;
  white-space:nowrap;
}
.tag--accent{
  border-color:var(--maple);
  background:transparent;
  color:var(--maple);
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  padding:.8em 1.5em;
  border:1px solid var(--slate);
  background:transparent;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:.95rem;
  font-weight:500;
  letter-spacing:.04em;
  line-height:1.5;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease);
}
.btn::after{
  content:"→";
  font-family:var(--font-mono);
  font-size:.9em;
  line-height:1;
  transition:transform .2s var(--ease);
}
.btn:hover{background:var(--ink);border-color:var(--ink);color:var(--mist)}
.btn:hover::after{transform:translateX(3px)}
.btn--primary{
  background:var(--maple);
  border-color:var(--maple);
  color:#fff;
  font-weight:600;
}
.btn--primary:hover{background:var(--maple-deep);border-color:var(--maple-deep);color:#fff}
.btn--ghost{border-color:var(--line);color:var(--slate)}
.btn--ghost:hover{background:var(--paper);border-color:var(--steel);color:var(--ink)}

/* ---------- 13. 面包屑 ---------- */
.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.55em;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--steel);
  padding-block:clamp(16px,2.4vw,26px);
  border-bottom:var(--hair);
}
.breadcrumb__sep{color:var(--line)}
.breadcrumb__current{color:var(--ink)}
.breadcrumb a{transition:color .18s var(--ease)}
.breadcrumb a:hover{color:var(--maple)}

/* ---------- 14. 图片容器（页面阶段使用） ---------- */
.media{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--paper);
  border:var(--hair);
}
.media::after{
  content:"";
  position:absolute;
  right:0;bottom:0;
  width:22px;height:22px;
  background:var(--maple);
  clip-path:polygon(100% 0,100% 100%,0 100%);
  pointer-events:none;
}
.media__img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.media--wide{aspect-ratio:21/9}
.media--tall{aspect-ratio:3/4}
.media--square{aspect-ratio:1/1}
.media--placeholder{
  background-color:var(--paper);
  background-image:repeating-linear-gradient(135deg,transparent 0 10px,rgba(94,113,128,.13) 10px 11px);
}
.media__caption{
  display:block;
  margin-top:.7rem;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  line-height:1.7;
  color:var(--steel);
  max-width:60ch;
}

/* ---------- 15. 标签页（可访问切换） ---------- */
.tabs{display:block}
.tabs__list{
  display:flex;
  flex-wrap:wrap;
  gap:.25rem;
  border-bottom:var(--hair);
}
.tabs__tab{
  padding:.85em 1.05em;
  border-bottom:2px solid transparent;
  color:var(--steel);
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.12em;
  transition:color .18s var(--ease),border-color .18s var(--ease);
}
.tabs__tab:hover{color:var(--ink)}
.tabs__tab[aria-selected="true"]{
  color:var(--maple);
  border-bottom-color:var(--maple);
}
.tabs__panel{display:none;padding-top:clamp(18px,2.6vw,30px)}
.tabs__panel[data-active]{display:block}

/* ---------- 16. 显现 ---------- */
.reveal-ready{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .55s var(--ease),transform .55s var(--ease);
}
.reveal-ready.is-visible{
  opacity:1;
  transform:none;
}

/* ---------- 17. 响应式 ---------- */
@media (max-width:1024px){
  .grid{gap:clamp(20px,3vw,32px)}
  .grid--5-7,.grid--4-7{grid-template-columns:minmax(0,1fr)}
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:860px){
  .nav-toggle{display:inline-flex}
  .masthead__inner{
    grid-template-columns:minmax(0,1fr) auto;
    padding-block:16px;
    gap:.75rem;
  }
  .masthead__brand{
    grid-column:1;
    justify-self:start;
    text-align:left;
  }
  .nav-toggle{grid-column:2;justify-self:end}
  .masthead__issue{display:none}
  .masthead__tagline{margin-top:.6rem;font-size:10px;letter-spacing:.12em}

  .main-nav{display:none;border-top:var(--hair)}
  .main-nav[data-open]{display:block}
  .main-nav__list{
    flex-direction:column;
    justify-content:flex-start;
    gap:0;
    padding-inline:0;
  }
  .main-nav__item{border-bottom:1px solid var(--line)}
  .main-nav__item:last-child{border-bottom:0}
  .main-nav__link{
    padding:15px var(--gutter);
    font-size:1rem;
    letter-spacing:.08em;
  }
  .main-nav__link::after{
    left:0;top:0;right:auto;bottom:0;
    width:3px;height:auto;
    transform:scaleY(0);
    transform-origin:top center;
    transition:transform .2s var(--ease);
  }
  .main-nav__link:hover::after{transform:scaleY(1);background:var(--steel)}
  .main-nav__link[aria-current="page"]::after{transform:scaleY(1);background:var(--maple)}
}

@media (max-width:640px){
  body{font-size:16px}
  .index-band{font-size:10px;letter-spacing:.12em}
  .index-band__inner{gap:.6rem}
  .index-band__meta:not(.index-band__meta--ver){display:none}
  .footer__grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .footer__legal{flex-direction:column;gap:.35rem}
  .btn{width:100%;justify-content:space-between}
  .grid{gap:22px}
}

@media (max-width:380px){
  .masthead__mark{display:none}
  .masthead__wordmark{font-size:1.2rem}
}

/* ---------- 18. 动效偏好 ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .reveal-ready{opacity:1;transform:none}
  .main-nav__link::after{transition:none}
}