/* ==========================================================================
   加拿大品牌 · 中国区中文站  共享样式 /assets/site.css
   北境信息站：冷杉墨绿承重，枫叶红指向动作，冰蓝标识检索与更新
   ========================================================================== */

/* --- 1. 重置 --- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body,h1,h2,h3,h4,h5,p,ul,ol,li,figure,blockquote,dl,dd,fieldset,figure{margin:0;padding:0;}
ul,ol{list-style:none;}
img,picture,svg,video{display:block;max-width:100%;}
button{background:none;border:0;cursor:pointer;color:inherit;}
a{color:inherit;text-decoration:none;}
table{border-collapse:collapse;width:100%;}
[hidden]{display:none !important;}

/* --- 2. 设计变量 --- */
:root{
  --maple:#D32F2F;
  --maple-deep:#A81F1F;
  --fir:#1B3A2F;
  --fir-2:#2E5A47;
  --paper:#F7F4EF;
  --pulp:#E8E3DA;
  --ice:#7FB3D5;
  --ice-deep:#3E7CA6;
  --ink:#111814;
  --moss:#6B7A72;
  --line:rgba(27,58,47,.16);
  --line-strong:rgba(27,58,47,.34);
  --line-dark:rgba(247,244,239,.18);
  --shell:1240px;
  --pad-x:clamp(16px,4vw,40px);
  --gap:clamp(16px,2.2vw,32px);
  --dur:.24s;
  --font-sans:"Source Han Sans SC","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono","SFMono-Regular",Menlo,Consolas,"Courier New",monospace;
  --shadow-paper:8px 8px 0 var(--pulp),9px 9px 0 1px var(--line);
}

/* --- 3. 基础排版（中文优先） --- */
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:clamp(17px,1.15vw,19px);
  line-height:1.75;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-weight:900;line-height:1.14;letter-spacing:-.01em;color:var(--fir);}
h1{font-size:clamp(38px,6.2vw,104px);line-height:1.02;}
h2{font-size:clamp(26px,3.4vw,44px);}
h3{font-size:clamp(20px,1.8vw,26px);}
h4{font-size:clamp(17px,1.3vw,20px);}
p{max-width:34em;}
strong{font-weight:800;color:var(--fir);}
.mono{font-family:var(--font-mono);font-size:14.5px;letter-spacing:.01em;color:var(--fir);}
.links-inline{color:var(--ice-deep);border-bottom:1px solid currentColor;transition:color var(--dur);}
.links-inline:hover{color:var(--maple);}

/* --- 4. 布局骨架 --- */
.shell{width:100%;max-width:var(--shell);margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x);}
.section{padding:clamp(56px,8vw,104px) 0;}
.section--tight{padding:clamp(32px,4vw,56px) 0;}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);}
.col-12{grid-column:span 12;}
.col-8{grid-column:span 8;}
.col-6{grid-column:span 6;}
.col-4{grid-column:span 4;}
.col-3{grid-column:span 3;}

/* 横向主题带：冷杉底 + 渐变纹理遮罩 */
.band{position:relative;background:var(--fir);color:var(--paper);overflow:hidden;border-top:4px solid var(--maple);}
.band::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(115deg,rgba(247,244,239,.055) 0 1px,transparent 1px 17px),
    radial-gradient(120% 90% at 100% 0,rgba(127,179,213,.22),transparent 62%);
}
.band__inner{position:relative;padding:clamp(32px,5vw,64px) 0;}

/* 纸张叠层卡片 */
.paper{position:relative;background:#fff;border:1px solid var(--line);padding:clamp(18px,2.4vw,30px);box-shadow:var(--shadow-paper);}

/* 控制台 / 状态面板 */
.console{border:1px solid var(--fir-2);background:rgba(46,90,71,.06);padding:14px 16px;font-family:var(--font-mono);font-size:14.5px;}
.console__row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px dashed var(--line);}
.console__row:last-child{border-bottom:0;}
.console__key{color:var(--moss);}
.console__val{color:var(--fir);font-weight:700;}

/* 小标签与大号路标语 */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12.5px;letter-spacing:.14em;color:var(--ice-deep);text-transform:uppercase;}
.eyebrow::before{content:"";width:8px;height:8px;background:var(--maple);transform:rotate(45deg);}

.tag{display:inline-block;font-size:12px;line-height:1.5;letter-spacing:.06em;padding:3px 9px;border:1px solid currentColor;background:transparent;}
.tag--maple{color:var(--maple);background:rgba(211,47,47,.08);}
.tag--ice{color:var(--ice-deep);background:rgba(127,179,213,.18);}
.tag--rot{transform:rotate(-1.5deg);}

.vert-note{writing-mode:vertical-rl;font-size:13px;letter-spacing:.08em;color:var(--moss);font-family:var(--font-mono);}

/* 正文容器：28–34 字行宽 */
.prose{max-width:720px;font-size:clamp(17px,1.15vw,19px);line-height:1.75;}
.prose p+p{margin-top:1em;}
.prose h3{margin:1.6em 0 .6em;}
.prose ul{margin:1em 0;display:grid;gap:.5em;}
.prose li{position:relative;padding-left:18px;}
.prose li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:7px;background:var(--ice);transform:rotate(45deg);}

/* 按钮 */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 20px;font-size:15px;font-weight:800;letter-spacing:.02em;
  border:1px solid var(--fir);background:transparent;color:var(--fir);
  transition:background var(--dur),color var(--dur),border-color var(--dur),transform var(--dur);
}
.btn:hover{transform:translateY(-2px);}
.btn--maple{background:var(--maple);border-color:var(--maple);color:#fff;box-shadow:4px 4px 0 rgba(168,31,31,.22);}
.btn--maple:hover{background:var(--maple-deep);border-color:var(--maple-deep);}
.btn--ice{background:var(--ice);border-color:var(--ice);color:#0d2534;}
.btn--ice:hover{background:var(--ice-deep);border-color:var(--ice-deep);color:#fff;}
.btn--ghost{background:transparent;border-color:var(--line-strong);color:var(--fir);}
.btn--ghost:hover{border-color:var(--fir);background:var(--pulp);}

/* 面包屑 */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--font-mono);font-size:13px;color:var(--moss);}
.crumbs a{border-bottom:1px solid transparent;transition:color var(--dur),border-color var(--dur);}
.crumbs a:hover{color:var(--ice-deep);border-color:currentColor;}
.crumbs__sep{color:var(--line-strong);}

/* 图片容器（页面阶段放占位图） */
.media{position:relative;display:block;overflow:hidden;background:var(--pulp);border:1px solid var(--line);}
.media__img{width:100%;height:100%;object-fit:cover;}
.media--wide{aspect-ratio:21/9;}
.media--16x9{aspect-ratio:16/9;}
.media--4x3{aspect-ratio:4/3;}
.media--square{aspect-ratio:1/1;}
.media--texture{box-shadow:inset 0 0 0 1px var(--paper);}
.media--texture .media__img{opacity:.16;filter:grayscale(.3);}
.media__label{position:absolute;left:10px;top:10px;transform:rotate(-1.6deg);background:var(--paper);}
.media__caption{margin-top:8px;font-family:var(--font-mono);font-size:13px;color:var(--moss);}

/* 主题筛选（只筛选当前页面已有内容） */
.filter-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.filter-btn{
  padding:7px 14px;font-size:14px;font-weight:800;color:var(--fir);
  border:1px solid var(--line-strong);background:transparent;
  transition:background var(--dur),color var(--dur),border-color var(--dur),transform var(--dur);
}
.filter-btn:hover{border-color:var(--ice-deep);color:var(--ice-deep);transform:translateY(-2px);}
.filter-btn[aria-pressed="true"]{background:var(--fir);border-color:var(--fir);color:var(--paper);}
.filter-count{font-family:var(--font-mono);font-size:13px;color:var(--moss);}

/* --- 5. 命令栏 + 页头 --- */
.site-header{position:relative;z-index:60;}
.skip-link{
  position:absolute;left:var(--pad-x);top:-120px;z-index:200;
  background:var(--maple);color:#fff;padding:10px 16px;font-size:14px;font-weight:800;
  transition:top var(--dur);
}
.skip-link:focus{top:8px;}

.command-bar{
  position:sticky;top:0;z-index:60;
  background:var(--fir);color:var(--paper);
  border-bottom:1px solid var(--line-dark);
  transition:box-shadow var(--dur);
}
.site-header.is-scrolled .command-bar{box-shadow:0 10px 26px rgba(17,24,20,.32);}
.command-bar__inner{display:flex;align-items:center;gap:clamp(10px,1.6vw,24px);min-height:52px;}

.brand-lockup{display:flex;align-items:center;gap:9px;flex:0 0 auto;padding:6px 0;}
.brand-lockup__flag{width:10px;height:10px;background:var(--maple);transform:rotate(45deg);flex:0 0 auto;}
.brand-lockup__name{font-size:17px;font-weight:900;letter-spacing:.02em;color:#fff;}
.brand-lockup__region{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;color:var(--ice);border-left:1px solid var(--line-dark);padding-left:9px;}

.cmd-ticker{
  display:none;align-items:center;gap:8px;max-width:330px;
  font-size:13px;color:rgba(247,244,239,.76);
  opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity var(--dur) ease,transform var(--dur) ease;
}
.cmd-ticker__dot{width:7px;height:7px;background:var(--maple);flex:0 0 auto;}
.cmd-ticker__text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cmd-ticker__link{font-family:var(--font-mono);font-size:12.5px;color:var(--ice);border-bottom:1px solid currentColor;white-space:nowrap;}
.cmd-ticker__link:hover{color:#fff;}
.site-header.is-scrolled .cmd-ticker{opacity:1;transform:none;pointer-events:auto;}

.nav{margin-left:auto;}
.nav__list{display:flex;align-items:stretch;}
.nav__item{display:flex;}
.nav__link{
  position:relative;display:flex;align-items:center;gap:6px;
  height:52px;padding:0 11px;font-size:15px;font-weight:700;
  color:rgba(247,244,239,.78);
  transition:background var(--dur),color var(--dur);
}
.nav__link:hover{color:#fff;background:rgba(247,244,239,.08);}
.nav__index{font-family:var(--font-mono);font-size:11px;color:var(--ice);opacity:.85;}
.nav__link[aria-current="page"]{color:#fff;}
.nav__link[aria-current="page"] .nav__index{color:var(--maple);opacity:1;}
.nav__link[aria-current="page"]::before{
  content:"";position:absolute;left:1px;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--maple);
}
.nav__link[aria-current="page"]::after{
  content:"";position:absolute;left:11px;right:11px;bottom:0;height:3px;background:var(--maple);
}

.cmd-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto;}
.cmd-chip{
  display:inline-flex;align-items:center;padding:7px 12px;
  font-size:13.5px;font-weight:800;letter-spacing:.02em;
  border:1px solid var(--line-dark);color:rgba(247,244,239,.9);
  transition:background var(--dur),color var(--dur),border-color var(--dur),transform var(--dur);
}
.cmd-chip:hover{background:rgba(247,244,239,.14);transform:translateY(-2px);}
.cmd-chip--maple{background:var(--maple);border-color:var(--maple);color:#fff;}
.cmd-chip--maple:hover{background:var(--maple-deep);border-color:var(--maple-deep);}

.nav-toggle{display:none;align-items:center;gap:9px;padding:9px 11px;color:var(--paper);border:1px solid var(--line-dark);}
.nav-toggle__bars{position:relative;display:block;width:18px;height:2px;background:var(--paper);transition:background var(--dur);}
.nav-toggle__bars::before,.nav-toggle__bars::after{
  content:"";position:absolute;left:0;width:18px;height:2px;background:var(--paper);
  transition:transform var(--dur),top var(--dur);
}
.nav-toggle__bars::before{top:-6px;}
.nav-toggle__bars::after{top:6px;}
.nav-toggle__label{font-size:13px;font-weight:800;letter-spacing:.08em;}
.site-header[data-open] .nav-toggle__bars{background:transparent;}
.site-header[data-open] .nav-toggle__bars::before{top:0;transform:rotate(45deg);}
.site-header[data-open] .nav-toggle__bars::after{top:0;transform:rotate(-45deg);}

.announce-bar{background:var(--pulp);border-bottom:1px solid var(--line);}
.announce-bar__inner{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:10px 0;min-height:44px;}
.announce-bar__tag{
  background:var(--maple);color:#fff;font-size:12px;font-weight:800;letter-spacing:.1em;
  padding:3px 9px;transform:rotate(-1.4deg);flex:0 0 auto;
}
.announce-bar__text{flex:1 1 320px;font-size:14px;line-height:1.6;color:var(--fir);max-width:64ch;}
.announce-bar__link{font-family:var(--font-mono);font-size:13px;color:var(--ice-deep);border-bottom:1px solid currentColor;}
.announce-bar__link:hover{color:var(--maple);}

/* --- 6. 页脚 --- */
.site-footer{position:relative;background:var(--fir);color:rgba(247,244,239,.82);border-top:6px solid var(--maple);overflow:hidden;}
.site-footer::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(135deg,rgba(247,244,239,.05) 0 2px,transparent 2px 15px),
    radial-gradient(90% 70% at 0 100%,rgba(127,179,213,.16),transparent 60%);
}
.footer-main{
  position:relative;display:grid;gap:clamp(22px,3vw,40px);
  grid-template-columns:1.5fr repeat(4,minmax(0,1fr));
  padding:clamp(40px,6vw,72px) var(--pad-x) clamp(26px,4vw,44px);
  max-width:var(--shell);margin:0 auto;
}
.footer-brand__mark{font-size:24px;font-weight:900;color:#fff;letter-spacing:.02em;}
.footer-brand__line{margin-top:8px;font-family:var(--font-mono);font-size:13px;color:var(--ice);letter-spacing:.02em;max-width:none;}
.footer-brand__note{margin:14px 0 20px;font-size:13.5px;line-height:1.7;color:rgba(247,244,239,.64);max-width:32ch;}
.footer-col__title{
  font-size:13px;font-weight:800;letter-spacing:.16em;color:var(--ice);
  padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid var(--line-dark);
}
.footer-col__list{display:grid;gap:2px;}
.footer-link{
  display:inline-block;padding:5px 0;font-size:14.5px;color:rgba(247,244,239,.8);
  transition:color var(--dur),transform var(--dur);
}
.footer-link:hover{color:#fff;transform:translateX(2px);}
.footer-meta{position:relative;border-top:1px solid var(--line-dark);background:rgba(17,24,20,.3);}
.footer-meta__inner{display:grid;gap:6px;padding:22px var(--pad-x) 30px;max-width:var(--shell);margin:0 auto;}
.footer-meta__line{font-size:13.5px;color:rgba(247,244,239,.72);max-width:none;}
.footer-meta__legal{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.04em;color:rgba(247,244,239,.55);max-width:none;}

/* --- 7. 显现动效 --- */
.js [data-reveal]{opacity:0;transform:translateY(8px);transition:opacity var(--dur) ease,transform var(--dur) ease;}
.js [data-reveal].is-in{opacity:1;transform:none;}

/* --- 8. 焦点与可访问性 --- */
:focus-visible{outline:2px solid var(--maple);outline-offset:2px;}
.command-bar :focus-visible,.site-footer :focus-visible{outline-color:var(--ice);}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
  .btn:hover,.cmd-chip:hover,.filter-btn:hover,.footer-link:hover{transform:none !important;}
  .js [data-reveal]{opacity:1 !important;transform:none !important;}
  .cmd-ticker{transform:none !important;}
}

/* --- 9. 响应式 --- */
@media (max-width:1119px){
  .cmd-actions{display:none;}
  .cmd-ticker{display:none !important;}
}
@media (min-width:1120px){
  .cmd-ticker{display:flex;}
}
@media (max-width:1024px){
  .col-8,.col-4,.col-3,.col-6{grid-column:span 12;}
  .footer-main{grid-template-columns:repeat(2,minmax(0,1fr));}
  .footer-brand{grid-column:span 2;}
}
@media (max-width:900px){
  .nav-toggle{display:inline-flex;margin-left:auto;}
  .nav{
    position:fixed;left:0;right:0;top:52px;margin:0;
    background:var(--fir);border-top:1px solid var(--line-dark);
    padding:8px var(--pad-x) 22px;display:none;
    max-height:calc(100vh - 52px);overflow-y:auto;
    box-shadow:0 22px 44px rgba(17,24,20,.42);
  }
  .site-header[data-open] .nav{display:block;animation:navDrop var(--dur) ease;}
  .nav__list{flex-direction:column;}
  .nav__link{height:auto;padding:15px 4px 15px 16px;font-size:18px;border-bottom:1px solid var(--line-dark);}
  .nav__link[aria-current="page"]::after{left:4px;right:4px;height:2px;}
  .brand-lockup__region{display:none;}
  .announce-bar__inner{padding:9px 0;}
}
@keyframes navDrop{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
@media (max-width:620px){
  .footer-main{grid-template-columns:1fr;}
  .footer-brand{grid-column:span 1;}
  .brand-lockup__name{font-size:16px;}
  .nav-toggle__label{display:none;}
}