/* =========================================================
   加拿大预测网 · 共享样式 /assets/site.css
   版本档案室 × 数据驾驶舱
   ========================================================= */

/* 1. Reset ------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{margin:0;background:var(--sand);color:var(--graphite);font-family:var(--font-body);font-size:16.5px;line-height:1.75;-webkit-font-smoothing:antialiased;}
img,svg,video{display:block;max-width:100%;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.22;letter-spacing:-.02em;color:var(--ink);}
p{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
button{font:inherit;color:inherit;background:none;border:0;}
a{color:var(--blue);text-underline-offset:.18em;}
a:hover{color:var(--maple);}
:focus-visible{outline:2px solid var(--maple);outline-offset:3px;border-radius:1px;}
::selection{background:#F6DAD6;color:var(--ink);}

/* 2. 变量 ------------------------------------------------- */
:root{
  --ink:#06224F;
  --blue:#0B3D91;
  --blue-slate:#3A5A8C;
  --maple:#D52B1E;
  --maple-deep:#A82218;
  --amber:#E08A3C;
  --sand:#F5F2EB;
  --paper:#FCFBF7;
  --graphite:#2B2F36;
  --stone:#6B7078;
  --ice:#EAF0F6;
  --moss:#4F6B57;
  --clay:#B4643C;

  --line:#DCD8CC;
  --line-cool:#C9D6E4;
  --hair:1px solid var(--line);
  --hair-cool:1px solid var(--line-cool);
  --shadow:0 1px 2px rgba(6,34,79,.08);
  --shadow-lift:0 18px 40px -28px rgba(6,34,79,.45);

  --wrap:1200px;
  --gutter:24px;

  --font-display:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --font-serif:"Source Han Serif SC","Noto Serif SC","Songti SC",Georgia,serif;
  --font-body:system-ui,-apple-system,"PingFang SC","Microsoft YaHei","Helvetica Neue",sans-serif;
  --font-mono:"JetBrains Mono","SFMono-Regular",Menlo,"Courier New",monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --header-h:64px;
}

/* 3. 排版与容器 ------------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);}
.mono{font-family:var(--font-mono);font-size:.86em;letter-spacing:.04em;font-variant-numeric:tabular-nums;}
.eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-slate);margin:0 0 14px;}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--maple);flex:0 0 auto;}
.section{padding:clamp(48px,7vw,96px) 0;}
.section--sand{background:var(--sand);}
.section--paper{background:var(--paper);}
.section--ice{background:var(--ice);}
.section--ink{background:var(--ink);color:rgba(252,251,247,.84);}
.section--ink h2,.section--ink h3{color:var(--paper);}
.section-title{font-size:clamp(26px,3.2vw,32px);margin:0 0 14px;}
.lede{font-family:var(--font-serif);font-size:clamp(17px,1.7vw,19.5px);line-height:1.72;color:var(--blue-slate);max-width:62ch;}
.section--ink .lede{color:rgba(252,251,247,.78);}
.stack>*+*{margin-top:16px;}
.divider{border:0;border-top:var(--hair);margin:32px 0;}
.tag{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;color:var(--stone);}

/* 4. 网格 ------------------------------------------------- */
.grid-12{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);}
.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-12{grid-column:span 12;}
.side-rail{position:sticky;top:calc(var(--header-h) + 48px);align-self:start;}

/* 5. 按钮 ------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border:1px solid transparent;border-radius:2px;font-family:var(--font-body);font-size:14px;font-weight:600;line-height:1;letter-spacing:.02em;text-decoration:none;cursor:pointer;transition:background-color .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);}
.btn--accent{background:var(--maple);border-color:var(--maple);color:var(--paper);}
.btn--accent:hover,.btn--accent:focus-visible{background:var(--maple-deep);border-color:var(--maple-deep);color:var(--paper);}
.btn--ink{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.btn--ink:hover,.btn--ink:focus-visible{background:var(--blue);border-color:var(--blue);color:var(--paper);}
.btn--line{background:transparent;border-color:var(--line-cool);color:var(--blue);}
.btn--line:hover,.btn--line:focus-visible{border-color:var(--blue-slate);background:var(--ice);color:var(--ink);}
.btn--ghost{background:transparent;border-color:rgba(252,251,247,.36);color:var(--paper);}
.btn--ghost:hover,.btn--ghost:focus-visible{border-color:var(--paper);color:var(--paper);}

/* 6. Skip link -------------------------------------------- */
.skip-link{position:absolute;left:14px;top:-64px;z-index:120;display:inline-block;padding:10px 16px;background:var(--paper);color:var(--ink);border:1px solid var(--maple);border-radius:2px;font-family:var(--font-mono);font-size:13px;letter-spacing:.04em;text-decoration:none;transition:top .18s var(--ease);}
.skip-link:focus{top:12px;color:var(--ink);}

/* 7. 头部命令栏 ------------------------------------------- */
.site-header{position:sticky;top:0;z-index:80;background:var(--ink);color:var(--paper);}
.hdr-bar{background:var(--ink);border-bottom:1px solid rgba(252,251,247,.14);}
.hdr-bar__inner{display:flex;align-items:center;gap:clamp(12px,3vw,36px);min-height:var(--header-h);padding-top:10px;padding-bottom:10px;}
.brand{display:inline-flex;align-items:center;gap:12px;flex:0 0 auto;color:var(--paper);text-decoration:none;}
.brand:hover{color:var(--paper);}
.brand__mark{display:inline-flex;align-items:center;justify-content:center;padding:4px 7px;border:1px solid rgba(224,138,60,.62);border-radius:2px;font-family:var(--font-mono);font-size:11.5px;font-weight:700;letter-spacing:.1em;color:var(--amber);}
.brand__text{display:flex;flex-direction:column;line-height:1.25;}
.brand__name{font-family:var(--font-display);font-size:16.5px;font-weight:700;letter-spacing:.01em;color:var(--paper);}
.brand__sub{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;color:rgba(252,251,247,.6);text-transform:uppercase;}
.hdr-status{display:flex;align-items:center;gap:8px;margin:0 0 0 auto;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;color:rgba(252,251,247,.72);}
.hdr-status__dot{width:6px;height:6px;flex:0 0 auto;border-radius:50%;background:var(--amber);box-shadow:0 0 0 3px rgba(224,138,60,.18);}
.hdr-status__text{white-space:nowrap;}
.hdr-actions{display:flex;align-items:center;gap:12px;margin-left:auto;}
.hdr-actions .btn--accent{padding:10px 15px;font-size:13.5px;}

/* 导航条 */
.site-nav{position:relative;background:var(--paper);border-bottom:var(--hair);box-shadow:0 1px 0 rgba(6,34,79,.04);}
.site-nav__inner{display:flex;align-items:center;justify-content:space-between;gap:18px;}
.nav-list{display:flex;align-items:stretch;flex-wrap:wrap;}
.nav-list__item{display:flex;}
.nav-list__item+.nav-list__item{border-left:1px solid var(--line);}
.nav-link{position:relative;display:inline-flex;align-items:baseline;gap:8px;padding:14px 18px;color:var(--graphite);font-size:14.5px;text-decoration:none;transition:color .18s var(--ease);}
.nav-link__idx{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;color:var(--stone);transition:color .18s var(--ease);}
.nav-link__label{white-space:nowrap;}
.nav-link::after{content:"";position:absolute;left:18px;right:18px;bottom:0;height:2px;background:var(--maple);transform:scaleX(0);transform-origin:0 50%;transition:transform .24s var(--ease);}
.nav-link:hover,.nav-link:focus-visible{color:var(--blue);}
.nav-link:hover::after,.nav-link:focus-visible::after{transform:scaleX(1);}
.nav-link[aria-current="page"]{color:var(--blue);font-weight:600;}
.nav-link[aria-current="page"]::after{transform:scaleX(1);}
.nav-link[aria-current="page"] .nav-link__idx{color:var(--maple);}
.nav-note{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;color:var(--stone);white-space:nowrap;}

/* 移动导航按钮 */
.nav-toggle{display:none;align-items:center;gap:9px;padding:9px 12px;border:1px solid rgba(252,251,247,.34);border-radius:2px;color:var(--paper);font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;cursor:pointer;transition:border-color .18s var(--ease),background-color .18s var(--ease);}
.nav-toggle:hover,.nav-toggle:focus-visible{border-color:var(--paper);background:rgba(252,251,247,.08);}
.nav-toggle__bars{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;width:16px;height:12px;}
.nav-toggle__bars span{display:block;height:1px;width:100%;background:currentColor;transition:transform .22s var(--ease),opacity .22s var(--ease);}
.nav-toggle__label{line-height:1;}

/* 滚动进度线 */
.hdr-progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--maple);transform:scaleX(0);transform-origin:0 50%;transition:transform .12s linear;}

/* 移动端头部状态 */
.site-header[data-open] .nav-toggle__bars span:first-child{transform:translateY(2.5px) rotate(45deg);}
.site-header[data-open] .nav-toggle__bars span:last-child{transform:translateY(-2.5px) rotate(-45deg);}

/* 8. 页脚 ------------------------------------------------- */
.site-footer{background:var(--ink);color:rgba(252,251,247,.8);border-top:2px solid var(--maple);}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;padding:clamp(40px,5vw,60px) 0 clamp(28px,4vw,44px);}
.footer-brand__line{margin:0 0 6px;font-family:var(--font-display);font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--paper);}
.footer-brand__sub{margin:0 0 14px;font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);}
.footer-brand__note{margin:0;max-width:28ch;font-size:13.5px;line-height:1.75;color:rgba(252,251,247,.66);}
.footer-col__title{margin:0 0 14px;font-family:var(--font-mono);font-size:11px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:rgba(252,251,247,.5);}
.footer-links{display:grid;gap:10px;}
.footer-link{display:inline-block;font-size:14px;color:rgba(252,251,247,.86);text-decoration:none;border-bottom:1px solid transparent;transition:color .18s var(--ease),border-color .18s var(--ease);}
.footer-link:hover,.footer-link:focus-visible{color:var(--paper);border-bottom-color:var(--amber);}
.footer-base{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:18px 32px;padding:22px 0 34px;border-top:1px solid rgba(252,251,247,.16);}
.footer-contact{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0;max-width:64ch;font-size:12.5px;color:rgba(252,251,247,.68);}
.footer-contact__item{display:inline-flex;align-items:baseline;gap:7px;}
.footer-contact__key{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;color:rgba(224,138,60,.92);}
.footer-legal{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;font-size:12px;color:rgba(252,251,247,.56);}
.footer-note{font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;color:rgba(252,251,247,.56);}
.footer-icp{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;color:rgba(252,251,247,.7);}
.footer-copy{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;}

/* 9. 通用组件 --------------------------------------------- */
.card{background:var(--paper);border:var(--hair);border-radius:2px;box-shadow:var(--shadow);padding:22px 22px 24px;transition:border-color .22s var(--ease),box-shadow .22s var(--ease);}
.card:hover{border-color:var(--line-cool);box-shadow:var(--shadow-lift);}
.card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 10px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--stone);}
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border:1px solid currentColor;border-radius:2px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;line-height:1.5;color:var(--blue-slate);}
.badge--red{color:var(--maple);}
.badge--moss{color:var(--moss);}
.badge--amber{color:var(--clay);}
.chip-group{display:flex;flex-wrap:wrap;gap:8px;}
.chip{padding:6px 11px;border:1px solid var(--line-cool);border-radius:2px;background:var(--paper);color:var(--blue);font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;cursor:pointer;transition:border-color .18s var(--ease),color .18s var(--ease),background-color .18s var(--ease);}
.chip:hover{border-color:var(--blue-slate);}
.chip[aria-pressed="true"]{border-color:var(--maple);color:var(--maple);background:#FDF2F0;}
.breadcrumb{padding:18px 0 0;}
.breadcrumb__list{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;color:var(--stone);}
.breadcrumb__item{display:inline-flex;align-items:center;gap:8px;}
.breadcrumb__item+.breadcrumb__item::before{content:"/";color:var(--line-cool);}
.breadcrumb__link{color:var(--blue-slate);text-decoration:none;}
.breadcrumb__link:hover,.breadcrumb__link:focus-visible{color:var(--maple);text-decoration:underline;}
.media-frame{position:relative;overflow:hidden;border:1px solid var(--line-cool);border-radius:2px;background-color:var(--ice);background-image:linear-gradient(rgba(11,61,145,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(11,61,145,.07) 1px,transparent 1px);background-size:28px 28px;aspect-ratio:16/10;}
.media-frame img,.media-frame svg{width:100%;height:100%;object-fit:cover;}
.media-frame--wide{aspect-ratio:21/9;}
.media-frame--square{aspect-ratio:1/1;}
.media-frame__caption{margin-top:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--stone);}
.table-archive{width:100%;border-collapse:collapse;font-size:14px;background:var(--paper);}
.table-archive th,.table-archive td{padding:12px 14px;text-align:left;border-bottom:var(--hair);vertical-align:top;}
.table-archive th{font-family:var(--font-mono);font-size:11px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-slate);background:var(--ice);}
.table-archive tbody tr:hover{background:#F8F6F0;}

/* 10. 显现动效 ------------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(12px);transition:opacity .32s var(--ease),transform .32s var(--ease);}
[data-reveal].is-revealed{opacity:1;transform:none;}

/* 11. 平板 ------------------------------------------------ */
@media (max-width:1024px){
  .hdr-status{display:none;}
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr;row-gap:28px;}
  .footer-brand{grid-column:1 / -1;}
}

/* 12. 移动端 ---------------------------------------------- */
@media (max-width:860px){
  :root{--gutter:18px;--header-h:60px;}
  .hdr-bar__inner{min-height:var(--header-h);gap:12px;}
  .brand__name{font-size:15.5px;}
  .hdr-actions .btn--accent{padding:9px 12px;font-size:12.5px;}
  .nav-toggle{display:inline-flex;}
  .site-nav{position:absolute;top:100%;left:0;right:0;background:var(--sand);border-bottom:var(--hair);box-shadow:0 22px 40px -30px rgba(6,34,79,.6);max-height:calc(100vh - 120px);overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s var(--ease);}
  .site-header[data-open] .site-nav{opacity:1;visibility:visible;transform:translateY(0);}
  .site-nav__inner{display:block;padding-top:6px;padding-bottom:18px;}
  .nav-list{flex-direction:column;}
  .nav-list__item+.nav-list__item{border-left:0;border-top:1px solid var(--line);}
  .nav-link{width:100%;padding:14px 2px;font-size:15px;}
  .nav-link::after{left:2px;right:auto;width:calc(100% - 4px);}
  .nav-note{display:none;}
  .col-4,.col-5,.col-6,.col-7,.col-8{grid-column:span 12;}
  .side-rail{position:static;top:auto;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:26px 20px;}
  .footer-base{flex-direction:column;align-items:flex-start;}
}

@media (max-width:560px){
  body{font-size:16px;}
  .footer-grid{grid-template-columns:1fr;}
  .footer-brand__note{max-width:none;}
  .hdr-actions{gap:8px;}
  .nav-toggle__label{display:none;}
  .hdr-actions .btn--accent{padding:9px 11px;}
}

/* 13. 减少动态 ------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  [data-reveal]{opacity:1 !important;transform:none !important;}
  .hdr-progress{transition:none;}
}