/* ============================================================
   加拿大平台 · 共享样式 /assets/site.css
   北境数据站：冰原蓝底 + 北境红节点 + 枫叶金强调 + 纸张叠层
   ============================================================ */

/* ---------- 1. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,h5,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul,ol{list-style:none;padding:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,svg,video{display:block;max-width:100%}
table{border-collapse:collapse;width:100%}
input,select,textarea{font:inherit}

/* ---------- 2. 设计变量 ---------- */
:root{
  --c-red:#C8102E;
  --c-red-deep:#8C0A1F;
  --c-gold:#E0A32B;
  --c-gold-soft:#F6D79A;
  --c-ice:#1E4A63;
  --c-ice-deep:#143446;
  --c-ice-soft:#7FB0C9;
  --c-frost:#F2F6F8;
  --c-paper:#FBF9F5;
  --c-ink:#141619;
  --c-graphite:#4C5A66;
  --c-grid:#D5DDE2;
  --c-white:#FFFFFF;

  --f-display:"Noto Sans SC","Source Han Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --f-body:"Noto Sans SC","Source Han Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --f-mono:"JetBrains Mono","IBM Plex Mono","SFMono-Regular",ui-monospace,Menlo,Consolas,"Courier New",monospace;

  --gutter:clamp(18px,4.5vw,56px);
  --shell:1240px;
  --shell-narrow:840px;
  --shell-wide:1500px;
  --stack:clamp(56px,7.5vw,104px);
  --radius:2px;
  --shadow-sheet:0 1px 0 rgba(20,22,25,.04),0 24px 48px -34px rgba(20,22,25,.45);
  --t-fast:180ms cubic-bezier(.22,.61,.36,1);
  --t-base:400ms cubic-bezier(.22,.61,.36,1);
}

/* ---------- 3. 中文排版基座 ---------- */
body{
  background:var(--c-paper);
  color:var(--c-ink);
  font-family:var(--f-body);
  font-size:17px;
  font-weight:400;
  line-height:1.75;
  letter-spacing:.01em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:900;line-height:1.16;letter-spacing:-.02em;text-wrap:balance}
p{text-wrap:pretty}
::selection{background:var(--c-gold-soft);color:var(--c-ink)}

/* ---------- 4. 可访问焦点 ---------- */
:where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid var(--c-gold);
  outline-offset:3px;
  border-radius:var(--radius);
}

/* ---------- 5. 跳转链接 ---------- */
.skip-link{
  position:fixed;
  left:var(--gutter);
  top:-120px;
  z-index:120;
  padding:12px 18px;
  background:var(--c-ink);
  color:var(--c-gold);
  font-size:13px;
  letter-spacing:.08em;
  border-left:3px solid var(--c-red);
  border-radius:var(--radius);
  transition:top var(--t-fast);
}
.skip-link:focus{top:14px}

/* ============================================================
   6. 页头
   ============================================================ */
.site-header{
  position:sticky;
  top:0;
  z-index:60;
  background:linear-gradient(180deg,#1E4A63 0%,#173A4E 100%);
  color:var(--c-frost);
  border-bottom:1px solid rgba(242,246,248,.14);
  transition:background var(--t-fast),box-shadow var(--t-fast);
}
.site-header::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:linear-gradient(90deg,var(--c-red) 0 46%,var(--c-gold) 46% 54%,var(--c-ice-soft) 54% 100%);
}
.site-header[data-condensed]{
  background:var(--c-ice-deep);
  box-shadow:0 14px 30px -22px rgba(20,22,25,.85);
}
.site-header__inner{
  width:100%;
  max-width:var(--shell-wide);
  margin-inline:auto;
  padding:clamp(11px,1.5vw,16px) var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(16px,3vw,44px);
  transition:padding var(--t-fast);
}
.site-header[data-condensed] .site-header__inner{padding-block:7px}

/* 品牌 —— 画面左端 */
.brand{display:flex;align-items:center;gap:clamp(14px,2vw,26px);min-width:0}
.brand__mark{display:flex;align-items:center;gap:11px;min-width:0}
.brand__glyph{
  flex:0 0 auto;
  width:32px;height:32px;
  display:grid;place-items:center;
  background:var(--c-red);
  color:var(--c-gold-soft);
  border-radius:var(--radius);
  transition:width var(--t-fast),height var(--t-fast);
}
.brand__glyph svg{width:19px;height:19px}
.site-header[data-condensed] .brand__glyph{width:27px;height:27px}
.brand__text{display:block;min-width:0}
.brand__name{
  display:block;
  font-family:var(--f-display);
  font-weight:900;
  font-size:clamp(17px,1.9vw,20px);
  letter-spacing:-.01em;
  color:var(--c-white);
  white-space:nowrap;
}
.brand__sub{
  display:block;
  font-size:11px;
  letter-spacing:.14em;
  color:rgba(242,246,248,.62);
  white-space:nowrap;
}
.site-header[data-condensed] .brand__sub{display:none}
.brand__meta{
  display:none;
  align-items:center;
  gap:8px;
  padding:5px 11px;
  font-size:12px;
  letter-spacing:.1em;
  color:rgba(242,246,248,.72);
  background:rgba(20,22,25,.22);
  border:1px solid rgba(242,246,248,.16);
  border-radius:var(--radius);
}
.brand__pulse{
  width:7px;height:7px;border-radius:50%;
  background:var(--c-red);
  box-shadow:0 0 0 3px rgba(200,16,46,.24);
  animation:brand-pulse 2.4s ease-in-out infinite;
}
.brand__meta-num{font-family:var(--f-mono);color:var(--c-gold-soft);letter-spacing:.02em}
.site-header[data-condensed] .brand__meta{display:none}
@keyframes brand-pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* 移动端按钮 */
.nav-toggle{
  display:none;
  align-items:center;
  gap:10px;
  padding:9px 13px;
  font-size:13px;
  letter-spacing:.1em;
  color:var(--c-frost);
  border:1px solid rgba(242,246,248,.3);
  border-radius:var(--radius);
  transition:border-color var(--t-fast),background var(--t-fast);
}
.nav-toggle:hover{border-color:var(--c-gold);background:rgba(224,163,43,.12)}
.nav-toggle__box{display:grid;gap:4px;width:17px}
.nav-toggle__bar{
  display:block;height:2px;width:100%;
  background:currentColor;
  transition:transform var(--t-fast),opacity var(--t-fast);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* 栏目索引 —— 画面右端 */
.site-nav{min-width:0}
.site-nav__list{display:flex;align-items:center;gap:clamp(14px,1.9vw,30px)}
.site-nav__link{
  position:relative;
  display:inline-flex;
  align-items:baseline;
  gap:7px;
  padding:9px 1px;
  font-size:15px;
  font-weight:500;
  color:rgba(242,246,248,.82);
  transition:color var(--t-fast);
}
.site-nav__index{
  font-family:var(--f-mono);
  font-size:11px;
  font-variant-numeric:tabular-nums;
  color:var(--c-gold-soft);
  opacity:.82;
  transition:color var(--t-fast),opacity var(--t-fast);
}
.site-nav__link::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:3px;
  height:2px;
  background:var(--c-red);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform var(--t-fast);
}
.site-nav__link:hover{color:var(--c-white)}
.site-nav__link:hover::after{transform:scaleX(1)}
.site-nav__link:hover .site-nav__index{color:var(--c-gold);opacity:1}
.site-nav__link[aria-current="page"]{color:var(--c-white)}
.site-nav__link[aria-current="page"]::after{transform:scaleX(1)}
.site-nav__link[aria-current="page"] .site-nav__index{color:var(--c-gold);opacity:1}

/* 滚动进度 */
.header-rule{
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  background:rgba(242,246,248,.14);
}
.header-rule__bar{
  display:block;
  height:100%;width:100%;
  transform:scaleX(0);
  transform-origin:left center;
  background:linear-gradient(90deg,var(--c-red),var(--c-gold));
}

/* ============================================================
   7. 页脚
   ============================================================ */
.site-footer{
  margin-top:var(--stack);
  background:linear-gradient(180deg,#141619 0%,#1A2026 60%,#141B20 100%);
  color:rgba(242,246,248,.78);
  border-top:4px solid transparent;
}
.site-footer::before{
  content:"";
  display:block;
  height:4px;
  background:linear-gradient(90deg,var(--c-red) 0 30%,var(--c-gold) 30% 37%,var(--c-ice-soft) 37% 100%);
}
.site-footer .shell{padding-block:clamp(44px,5.5vw,76px) clamp(22px,3vw,32px)}
.footer__top{
  display:grid;
  grid-template-columns:minmax(190px,250px) 1fr;
  gap:clamp(28px,4vw,64px);
  padding-bottom:clamp(30px,4vw,52px);
}
.footer__brand{display:grid;gap:12px;align-content:start}
.footer__wordmark{
  font-family:var(--f-display);
  font-weight:900;
  font-size:21px;
  letter-spacing:-.01em;
  color:var(--c-white);
  padding-left:12px;
  border-left:3px solid var(--c-red);
}
.footer__tagline{font-size:13px;line-height:1.7;color:rgba(242,246,248,.6)}
.footer__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(22px,3vw,40px);
}
.footer__col{display:grid;gap:14px;align-content:start}
.footer__col-title{
  font-family:var(--f-display);
  font-size:12px;
  font-weight:700;
  letter-spacing:.16em;
  color:var(--c-ice-soft);
  text-transform:none;
}
.footer__list{display:grid;gap:9px}
.footer__item{font-size:14px;line-height:1.65}
.footer__link{
  color:rgba(242,246,248,.78);
  border-bottom:1px solid transparent;
  transition:color var(--t-fast),border-color var(--t-fast);
}
.footer__link:hover{color:var(--c-gold);border-color:var(--c-red)}
.footer__text{color:rgba(242,246,248,.6)}
.footer__text--mono{
  font-family:var(--f-mono);
  font-variant-numeric:tabular-nums;
  font-size:13px;
  letter-spacing:.01em;
  color:rgba(246,215,154,.85);
}
.footer__bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px 28px;
  padding-top:clamp(18px,2.4vw,26px);
  border-top:1px solid rgba(242,246,248,.14);
}
.footer__copy{font-size:13px;color:rgba(242,246,248,.5)}
.footer__copy [data-year]{font-family:var(--f-mono)}
.footer__utility{display:flex;flex-wrap:wrap;gap:20px}
.footer__utility .footer__link{font-size:13px;color:rgba(242,246,248,.66)}

/* ============================================================
   8. 版式容器与栅格
   ============================================================ */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.shell--narrow{max-width:var(--shell-narrow)}
.shell--wide{max-width:var(--shell-wide)}
.section{padding-block:var(--stack)}
.section--tight{padding-block:calc(var(--stack) * .58)}
.rule{height:1px;background:var(--c-grid);border:0}
.grid12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.u-3{grid-column:span 3}
.u-4{grid-column:span 4}
.u-5{grid-column:span 5}
.u-6{grid-column:span 6}
.u-7{grid-column:span 7}
.u-8{grid-column:span 8}
.u-9{grid-column:span 9}
.u-12{grid-column:span 12}

/* 章节标题组 */
.section-head{display:grid;gap:14px;max-width:760px}
.section-head__kicker{
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:.16em;
  color:var(--c-red);
}
.section-head__title{font-size:clamp(24px,3.2vw,44px)}
.section-head__note{font-size:15px;color:var(--c-graphite);max-width:62ch}

/* ============================================================
   9. 文字与数字
   ============================================================ */
.prose{max-width:68ch;font-size:17px;color:var(--c-ink)}
.prose > * + *{margin-top:18px}
.prose h2{font-size:clamp(20px,2.2vw,26px);margin-top:36px}
.prose h3{font-size:19px;margin-top:28px}
.prose p{color:var(--c-graphite)}
.prose ul{display:grid;gap:10px;padding-left:2px}
.prose li{position:relative;padding-left:22px;color:var(--c-graphite)}
.prose li::before{content:"";position:absolute;left:0;top:.68em;width:12px;height:2px;background:var(--c-red)}
.prose a{color:var(--c-red-deep);border-bottom:1px solid var(--c-gold-soft)}
.prose a:hover{border-color:var(--c-red)}
.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;letter-spacing:-.01em}
.num--sm{font-size:13px}
.num--lg{font-size:clamp(26px,3.4vw,40px);font-weight:600;line-height:1.1}
.num--xl{font-size:clamp(40px,6.4vw,64px);font-weight:700;line-height:1.02}
.num--gold{color:var(--c-gold)}
.num--red{color:var(--c-red)}

/* ============================================================
   10. 纸感卡片与标签
   ============================================================ */
.plate{
  position:relative;
  isolation:isolate;
  background:var(--c-white);
  border:1px solid var(--c-grid);
  padding:clamp(18px,2.6vw,30px);
  box-shadow:var(--shadow-sheet);
}
.plate::before{
  content:"";
  position:absolute;
  inset:8px -8px -8px 8px;
  z-index:-1;
  background:var(--c-frost);
  border:1px solid var(--c-grid);
}
.plate--flat::before{display:none}
.plate--gold::before{background:var(--c-gold-soft);border-color:#E3C68C}
.plate__cap{
  display:block;
  margin-top:14px;
  font-size:13px;
  color:var(--c-graphite);
}
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  font-size:12px;
  font-weight:500;
  letter-spacing:.1em;
  border:1px solid currentColor;
  border-radius:var(--radius);
  color:var(--c-ice);
}
.tag--gold{color:var(--c-ink);background:var(--c-gold-soft);border-color:var(--c-gold)}
.tag--ice{color:var(--c-ice);background:rgba(127,176,201,.16);border-color:rgba(127,176,201,.55)}
.tag--red{color:var(--c-white);background:var(--c-red);border-color:var(--c-red)}

/* ============================================================
   11. 按钮
   ============================================================ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:12px 22px;
  font-family:var(--f-body);
  font-size:15px;
  font-weight:500;
  letter-spacing:.04em;
  border:1px solid transparent;
  border-radius:var(--radius);
  cursor:pointer;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast),transform var(--t-fast);
}
.btn--primary{background:var(--c-red);color:var(--c-white)}
.btn--primary:hover{background:var(--c-red-deep);transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--c-ink);border-color:var(--c-ink)}
.btn--ghost:hover{background:var(--c-ink);color:var(--c-paper)}
.btn--light{background:transparent;color:var(--c-white);border-color:rgba(242,246,248,.55)}
.btn--light:hover{background:var(--c-white);color:var(--c-ice-deep);border-color:var(--c-white)}
.btn--sm{padding:8px 14px;font-size:13px}

/* ============================================================
   12. 面包屑
   ============================================================ */
.crumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px;
  font-size:13px;
  color:var(--c-graphite);
}
.crumbs__link{transition:color var(--t-fast)}
.crumbs__link:hover{color:var(--c-red)}
.crumbs__sep{color:var(--c-grid)}
.crumbs [aria-current="page"]{color:var(--c-ink);font-weight:500}

/* ============================================================
   13. 全宽数据带
   ============================================================ */
.data-band{
  background:var(--c-ice);
  color:var(--c-frost);
  padding-block:clamp(38px,5vw,72px);
}
.data-band--ink{background:var(--c-ink)}
.data-band--frost{background:var(--c-frost);color:var(--c-ink)}
.data-band h2,.data-band h3{color:var(--c-white)}
.data-band .section-head__note{color:rgba(242,246,248,.72)}

/* ============================================================
   14. 图片 / 图示容器（供页面阶段放置视觉）
   ============================================================ */
.media{--ratio:16 / 9;display:grid;gap:10px;margin:0}
.media__frame{
  position:relative;
  isolation:isolate;
  aspect-ratio:var(--ratio);
  background:var(--c-frost);
  border:1px solid var(--c-grid);
  overflow:hidden;
}
.media__frame::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(var(--c-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--c-grid) 1px,transparent 1px);
  background-size:32px 32px;
  opacity:.55;
}
.media__frame::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:44%;
  background:linear-gradient(180deg,rgba(30,74,99,0),rgba(30,74,99,.14));
}
.media__frame > img,
.media__frame > svg,
.media__frame > picture{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:cover;
}
.media__cap{font-size:13px;line-height:1.6;color:var(--c-graphite)}
.media--wide{--ratio:21 / 9}
.media--band{--ratio:32 / 9}
.media--tall{--ratio:4 / 5}
.media--square{--ratio:1 / 1}

/* ============================================================
   15. 进入视口显现（JS 可用时启用）
   ============================================================ */
.js-on [data-reveal]{
  opacity:0;
  transform:translateY(16px);
  transition:opacity var(--t-base),transform var(--t-base);
}
.js-on [data-reveal].is-in{opacity:1;transform:none}

/* ============================================================
   16. 响应式
   ============================================================ */
@media (min-width:1060px){
  .brand__meta{display:inline-flex}
}

@media (max-width:1100px){
  .site-nav__list{gap:clamp(10px,1.4vw,18px)}
  .site-nav__link{font-size:14px}
}

@media (max-width:900px){
  .nav-toggle{display:inline-flex}
  .site-nav{
    position:absolute;
    left:0;right:0;top:100%;
    padding:10px var(--gutter) 22px;
    background:var(--c-ice-deep);
    border-top:1px solid rgba(242,246,248,.16);
    border-bottom:1px solid rgba(242,246,248,.16);
    visibility:hidden;
    opacity:0;
    transform:translateY(-8px);
    transition:opacity var(--t-fast),transform var(--t-fast),visibility var(--t-fast);
  }
  .site-nav[data-open]{
    visibility:visible;
    opacity:1;
    transform:translateY(0);
  }
  .site-nav__list{flex-direction:column;align-items:stretch;gap:0}
  .site-nav__link{
    width:100%;
    padding:15px 2px;
    font-size:16px;
    border-bottom:1px solid rgba(242,246,248,.1);
  }
  .site-nav__link::after{bottom:0}
  .site-nav__item:last-child .site-nav__link{border-bottom:0}

  .footer__top{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid12 > [class*="u-"]{grid-column:span 12}
}

@media (max-width:600px){
  body{font-size:16px}
  .brand__sub{display:none}
  .nav-toggle__text{display:none}
  .footer__grid{grid-template-columns:1fr;gap:26px}
  .footer__bottom{flex-direction:column;align-items:flex-start}
  .footer__utility{gap:16px}
  .shell{padding-inline:18px}
}

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