/* =========================================================
   Home看台 · 共享样式 /assets/site.css
   高原跑道主轴：深蓝底 + 奶油纸底 + 赤红/青柠点色
   ========================================================= */

:root{
  --hk-night:#0B1F33;
  --hk-plateau:#14406F;
  --hk-cream:#F5EFE3;
  --hk-ink:#1C1512;
  --hk-red:#D2371B;
  --hk-lime:#C8F14B;
  --hk-amber:#E3A33C;
  --hk-steel:#6E8CA8;
  --hk-stand:#D9D2C4;
  --hk-glass:rgba(255,255,255,.08);
  --hk-glass-line:rgba(255,255,255,.16);
  --hk-ink-soft:rgba(28,21,18,.68);
  --hk-ink-line:rgba(28,21,18,.14);
  --hk-cream-soft:rgba(245,239,227,.76);

  --hk-font-head:"Archivo Narrow","Oswald","Source Han Sans SC","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --hk-font-body:"Inter","Source Han Sans SC","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  --hk-font-data:"IBM Plex Mono","JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --hk-fs-12:12px;
  --hk-fs-14:14px;
  --hk-fs-18:18px;
  --hk-fs-24:24px;
  --hk-fs-34:clamp(25px,3.2vw,34px);
  --hk-fs-52:clamp(33px,5vw,52px);
  --hk-fs-76:clamp(40px,7.4vw,76px);

  --hk-shell-w:1240px;
  --hk-gutter:28px;
  --hk-radius:3px;
  --hk-ease:cubic-bezier(.2,.72,.3,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--hk-cream);
  color:var(--hk-ink);
  font-family:var(--hk-font-body);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  margin:0 0 .5em;
  font-family:var(--hk-font-head);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.1;
  color:inherit;
}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
a{color:inherit}
img,svg,video{max-width:100%;height:auto}
button{font:inherit;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
:target{scroll-margin-top:104px}
::selection{background:var(--hk-lime);color:var(--hk-ink)}

:focus-visible{outline:2px solid var(--hk-red);outline-offset:3px;border-radius:2px}
.hk-header :focus-visible,
.hk-footer :focus-visible,
.hk-section--night :focus-visible,
.hk-section--plateau :focus-visible{outline-color:var(--hk-lime)}

/* ---------- 跳转链接 ---------- */
.skip-link{
  position:absolute;top:-72px;left:16px;z-index:200;
  padding:10px 18px;
  background:var(--hk-lime);color:var(--hk-ink);
  font-size:14px;font-weight:700;text-decoration:none;
  border-radius:0 0 var(--hk-radius) var(--hk-radius);
  transition:top .2s var(--hk-ease);
}
.skip-link:focus{top:0}

/* ---------- 通用容器与分区 ---------- */
.hk-shell{width:min(var(--hk-shell-w),calc(100% - (var(--hk-gutter) * 2)));margin-inline:auto}
.hk-section{padding-block:clamp(56px,7vw,104px)}
.hk-section--tight{padding-block:clamp(28px,3.6vw,52px)}
.hk-section--night{background:var(--hk-night);color:var(--hk-cream)}
.hk-section--plateau{background:var(--hk-plateau);color:var(--hk-cream)}
.hk-section--night .hk-lead,.hk-section--plateau .hk-lead{color:var(--hk-cream-soft)}
.hk-section--night .hk-note,.hk-section--plateau .hk-note{color:rgba(245,239,227,.6)}

/* ---------- 版式层级 ---------- */
.hk-display{font-family:var(--hk-font-head);font-size:var(--hk-fs-76);font-weight:800;letter-spacing:-.03em;line-height:.95}
.hk-h1{font-size:var(--hk-fs-52)}
.hk-h2{font-size:var(--hk-fs-34)}
.hk-h3{font-size:var(--hk-fs-24);font-weight:700;letter-spacing:-.01em}
.hk-lead{font-size:var(--hk-fs-18);line-height:1.65;color:var(--hk-ink-soft);max-width:64ch}
.hk-note{font-size:var(--hk-fs-14);line-height:1.7;color:var(--hk-ink-soft)}

.hk-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--hk-font-data);font-size:var(--hk-fs-12);
  font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--hk-red);margin-bottom:14px;
}
.hk-eyebrow::before{content:"";width:22px;height:2px;background:currentColor}
.hk-eyebrow--night{color:var(--hk-lime)}
.hk-side-label{
  writing-mode:vertical-rl;
  font-family:var(--hk-font-data);font-size:var(--hk-fs-12);
  letter-spacing:.34em;color:var(--hk-steel);
}

.hk-data{
  font-family:var(--hk-font-data);font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}

/* ---------- 刻度与分隔 ---------- */
.hk-rule{height:1px;border:0;margin:0;background:var(--hk-ink-line)}
.hk-rule--night{background:rgba(255,255,255,.16)}
.hk-scale{
  height:14px;
  border-bottom:1px solid var(--hk-ink-line);
  background-image:repeating-linear-gradient(90deg,var(--hk-ink-line) 0 1px,transparent 1px 14px);
}
.hk-section--night .hk-scale{
  border-bottom-color:rgba(255,255,255,.16);
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.24) 0 1px,transparent 1px 14px);
}

/* ---------- 网格与 Bento ---------- */
.hk-grid{display:grid;gap:20px}
.hk-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.hk-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.hk-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.hk-grid--bento{grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.hk-span-2{grid-column:span 2}
.hk-span-3{grid-column:span 3}
.hk-span-4{grid-column:span 4}

/* ---------- 卡片 ---------- */
.hk-card{
  padding:22px;
  background:#FFFFFF;
  border:1px solid var(--hk-ink-line);
  border-radius:var(--hk-radius);
}
.hk-card--ink{background:var(--hk-ink);color:var(--hk-cream);border-color:transparent}
.hk-card--ink .hk-note{color:rgba(245,239,227,.62)}
.hk-card--glass{
  background:var(--hk-glass);
  border:1px solid var(--hk-glass-line);
  color:var(--hk-cream);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  transition:transform .24s var(--hk-ease),background-color .24s var(--hk-ease);
}
.hk-card--glass:hover{transform:translateY(-4px);background:rgba(255,255,255,.14)}
.hk-card--tick{border-left:4px solid var(--hk-red)}

/* ---------- 标签 ---------- */
.hk-tag{
  display:inline-block;padding:3px 9px;
  font-family:var(--hk-font-data);font-size:var(--hk-fs-12);letter-spacing:.08em;
  color:var(--hk-ink-soft);
  border:1px solid var(--hk-ink-line);border-radius:999px;
}
.hk-tag--live{background:var(--hk-lime);border-color:var(--hk-lime);color:var(--hk-ink);font-weight:700}
.hk-tag--hot{background:var(--hk-red);border-color:var(--hk-red);color:#fff;font-weight:700}

/* ---------- 按钮 ---------- */
.hk-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 17px;
  font-size:14px;font-weight:700;letter-spacing:.02em;
  text-decoration:none;white-space:nowrap;
  border:1px solid transparent;border-radius:var(--hk-radius);
  cursor:pointer;
  transition:background-color .2s var(--hk-ease),color .2s var(--hk-ease),transform .2s var(--hk-ease),border-color .2s var(--hk-ease);
}
.hk-btn--primary{background:var(--hk-red);color:#fff}
.hk-btn--primary:hover{background:#E6431F;transform:translateY(-1px)}
.hk-btn--ghost{border-color:rgba(255,255,255,.28);color:var(--hk-cream)}
.hk-btn--ghost:hover{border-color:var(--hk-lime);color:var(--hk-lime)}
.hk-btn--lime{background:var(--hk-lime);color:var(--hk-ink)}
.hk-btn--lime:hover{background:#D8FF63}
.hk-btn--dark{background:var(--hk-ink);color:var(--hk-cream)}
.hk-btn--dark:hover{background:var(--hk-plateau)}
.hk-btn--sm{padding:7px 12px;font-size:13px}

/* ---------- 面包屑 ---------- */
.hk-crumbs{margin:0 0 22px}
.hk-crumbs__list{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.hk-crumbs__item{
  font-family:var(--hk-font-data);font-size:var(--hk-fs-12);
  letter-spacing:.08em;color:var(--hk-ink-soft);
}
.hk-crumbs__link{text-decoration:none;border-bottom:1px solid var(--hk-ink-line)}
.hk-crumbs__link:hover{color:var(--hk-red);border-color:var(--hk-red)}
.hk-crumbs__sep{color:var(--hk-steel)}
.hk-crumbs__current{color:var(--hk-ink);font-weight:700}
.hk-section--night .hk-crumbs__item{color:rgba(245,239,227,.6)}
.hk-section--night .hk-crumbs__link{border-bottom-color:rgba(255,255,255,.24)}
.hk-section--night .hk-crumbs__current{color:var(--hk-cream)}

/* ---------- 图片容器（页面阶段放置 <img>） ---------- */
.hk-figure{
  position:relative;margin:0;overflow:hidden;
  background:var(--hk-plateau);
  border-radius:var(--hk-radius);
}
.hk-figure img{display:block;width:100%;height:100%;object-fit:cover}
.hk-figure--wide{aspect-ratio:16 / 9}
.hk-figure--tall{aspect-ratio:4 / 5}
.hk-figure--square{aspect-ratio:1 / 1}
.hk-figure--banner{aspect-ratio:21 / 9}
.hk-figure--offset{box-shadow:14px 14px 0 0 var(--hk-amber)}
.hk-figure__cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:12px 14px;
  background:linear-gradient(transparent,rgba(11,31,51,.88));
  color:var(--hk-cream);
  font-family:var(--hk-font-data);font-size:var(--hk-fs-12);letter-spacing:.1em;
}

/* ---------- 显现动效 ---------- */
.hk-js [data-reveal]{
  opacity:0;transform:translateY(18px);
  transition:opacity .44s var(--hk-ease),transform .44s var(--hk-ease);
}
.hk-js [data-reveal][data-revealed]{opacity:1;transform:translateY(0)}

/* =========================================================
   头部：左右分置 + 主轴刻度
   ========================================================= */
.hk-header{
  position:sticky;top:0;z-index:80;
  background:var(--hk-night);
  color:var(--hk-cream);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.hk-header::after{
  content:"";display:block;height:2px;
  background:linear-gradient(90deg,var(--hk-red) 0 22%,var(--hk-amber) 22% 36%,rgba(255,255,255,.1) 36% 100%);
}
.hk-header__inner{
  display:flex;align-items:center;gap:22px;
  width:min(1400px,calc(100% - (var(--hk-gutter) * 2)));
  margin-inline:auto;
  min-height:70px;padding:12px 0;
}
.hk-header__left{display:flex;align-items:center;gap:26px;min-width:0;flex:1 1 auto}
.hk-header__right{display:flex;align-items:center;gap:10px;margin-left:auto;flex:0 0 auto}

/* 品牌 */
.hk-brand{
  display:inline-flex;align-items:center;gap:11px;
  text-decoration:none;color:inherit;flex:0 0 auto;
}
.hk-brand__mark{
  display:flex;flex-direction:column;justify-content:center;gap:3px;
  width:28px;height:28px;padding:0 6px;
  background:var(--hk-red);border-radius:2px;flex:0 0 auto;
}
.hk-brand__mark i{display:block;height:3px;background:var(--hk-cream);border-radius:1px}
.hk-brand__text{display:flex;flex-direction:column;line-height:1.16;min-width:0}
.hk-brand__name{
  font-family:var(--hk-font-head);font-size:21px;font-weight:800;
  letter-spacing:-.01em;white-space:nowrap;color:var(--hk-cream);
}
.hk-brand__line{
  font-size:11px;letter-spacing:.14em;
  color:var(--hk-steel);white-space:nowrap;
}
.hk-brand--footer .hk-brand__name{font-size:23px}
.hk-brand--footer .hk-brand__line{color:var(--hk-steel)}

/* 主轴刻度 */
.hk-ticker{
  display:flex;align-items:center;gap:12px;
  flex:1 1 auto;min-width:120px;max-width:420px;
}
.hk-ticker__label{
  font-family:var(--hk-font-data);font-size:11px;font-weight:700;
  letter-spacing:.28em;color:var(--hk-steel);white-space:nowrap;
}
.hk-ticker__track{
  position:relative;display:block;flex:1 1 auto;min-width:56px;height:12px;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 1px,transparent 1px 11px);
  border-bottom:1px solid rgba(255,255,255,.16);
}
.hk-ticker__track::after{
  content:"";position:absolute;left:0;top:0;bottom:-1px;
  width:var(--hk-progress,0%);
  background-image:repeating-linear-gradient(90deg,var(--hk-lime) 0 1px,transparent 1px 11px);
  transition:width .16s linear;
}
.hk-ticker__value{
  font-family:var(--hk-font-data);font-size:11px;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--hk-lime);white-space:nowrap;
}

/* 导航 */
.hk-nav__list{display:flex;align-items:center;gap:2px}
.hk-nav__item{display:block}
.hk-nav__link{
  position:relative;display:block;
  padding:8px 11px;
  font-size:14px;font-weight:600;
  color:rgba(245,239,227,.78);
  text-decoration:none;border-radius:2px;
  transition:color .2s var(--hk-ease),background-color .2s var(--hk-ease);
}
.hk-nav__link:hover{color:var(--hk-cream);background:rgba(255,255,255,.08)}
.hk-nav__link[aria-current="page"]{color:var(--hk-cream)}
.hk-nav__link[aria-current="page"]::after{
  content:"";position:absolute;left:11px;right:11px;bottom:2px;height:2px;
  background:var(--hk-red);
}

/* 移动导航按钮 */
.hk-nav-toggle{
  display:none;align-items:center;gap:9px;
  padding:9px 13px;
  background:transparent;color:var(--hk-cream);
  border:1px solid rgba(255,255,255,.26);border-radius:var(--hk-radius);
  cursor:pointer;
  transition:border-color .2s var(--hk-ease),color .2s var(--hk-ease);
}
.hk-nav-toggle:hover{border-color:var(--hk-lime);color:var(--hk-lime)}
.hk-nav-toggle__bar{
  position:relative;display:block;width:16px;height:2px;
  background:currentColor;transition:background-color .22s var(--hk-ease);
}
.hk-nav-toggle__bar::before,
.hk-nav-toggle__bar::after{
  content:"";position:absolute;left:0;width:16px;height:2px;
  background:currentColor;
  transition:transform .22s var(--hk-ease),top .22s var(--hk-ease);
}
.hk-nav-toggle__bar::before{top:-5px}
.hk-nav-toggle__bar::after{top:5px}
.hk-nav-toggle__text{font-size:12px;font-weight:700;letter-spacing:.16em}
.hk-nav-toggle[aria-expanded="true"] .hk-nav-toggle__bar{background:transparent}
.hk-nav-toggle[aria-expanded="true"] .hk-nav-toggle__bar::before{top:0;transform:rotate(45deg)}
.hk-nav-toggle[aria-expanded="true"] .hk-nav-toggle__bar::after{top:0;transform:rotate(-45deg)}

/* =========================================================
   页脚
   ========================================================= */
.hk-footer{
  position:relative;
  background:var(--hk-night);
  color:rgba(245,239,227,.72);
}
.hk-footer__lane{
  height:8px;
  background-color:var(--hk-plateau);
  background-image:repeating-linear-gradient(90deg,var(--hk-red) 0 26px,transparent 26px 64px);
}
.hk-footer__inner{
  width:min(1400px,calc(100% - (var(--hk-gutter) * 2)));
  margin-inline:auto;
  padding:58px 0 0;
}
.hk-footer__top{
  display:grid;
  grid-template-columns:1.1fr 1.6fr 1.4fr;
  gap:38px;
}
.hk-footer__tagline{
  margin:18px 0 0;
  padding-left:14px;
  border-left:2px solid var(--hk-lime);
  font-size:14px;line-height:1.7;
  color:rgba(245,239,227,.8);
  max-width:30ch;
}
.hk-footer__cols{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;
}
.hk-footer__col{min-width:0}
.hk-footer__col-title{
  margin:0 0 14px;
  font-family:var(--hk-font-data);font-size:11px;font-weight:700;
  letter-spacing:.24em;color:var(--hk-amber);
}
.hk-footer__links{display:grid;gap:9px}
.hk-footer__link{
  display:inline-block;
  font-size:14px;color:rgba(245,239,227,.75);
  text-decoration:none;
  transition:color .2s var(--hk-ease),transform .2s var(--hk-ease);
}
.hk-footer__link:hover{color:var(--hk-lime);transform:translateX(3px)}

.hk-contact-list{display:grid;gap:12px}
.hk-contact-item{
  display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:start;
  font-size:13.5px;
}
.hk-contact-item__key{
  padding-top:2px;
  font-family:var(--hk-font-data);font-size:11px;letter-spacing:.14em;
  color:var(--hk-steel);
}
.hk-contact-item__val{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  color:rgba(245,239,227,.92);word-break:break-all;
}
.hk-copy{
  padding:2px 8px;
  font-size:11px;font-family:var(--hk-font-data);letter-spacing:.08em;
  color:var(--hk-steel);
  background:transparent;
  border:1px solid rgba(255,255,255,.24);border-radius:2px;
  cursor:pointer;
  transition:color .2s var(--hk-ease),border-color .2s var(--hk-ease);
}
.hk-copy:hover{color:var(--hk-lime);border-color:var(--hk-lime)}
.hk-copy[data-copied]{color:var(--hk-lime);border-color:var(--hk-lime)}
.hk-footer__note{
  margin:16px 0 0;
  font-size:12.5px;line-height:1.7;color:var(--hk-steel);
}
.hk-footer__bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;
  margin-top:48px;padding:22px 0 30px;
  border-top:1px solid rgba(255,255,255,.12);
  font-family:var(--hk-font-data);font-size:12px;letter-spacing:.06em;
  color:var(--hk-steel);
}
.hk-footer__legal{margin:0}
.hk-footer__meta{margin:0;color:rgba(200,241,75,.72)}

/* =========================================================
   断点
   ========================================================= */
@media (max-width:1180px){
  .hk-nav__link{padding:8px 8px;font-size:13.5px}
  .hk-header__left{gap:18px}
  .hk-ticker{max-width:260px}
}

@media (max-width:1023px){
  .hk-header__inner{flex-wrap:wrap;padding:10px 0;min-height:64px}
  .hk-nav-toggle{display:inline-flex}
  .hk-header__actions .hk-btn--ghost{display:none}
  .hk-ticker{display:none}

  .hk-nav{
    position:absolute;left:0;right:0;top:100%;
    display:none;
    padding:8px 0 18px;
    background:var(--hk-plateau);
    border-top:1px solid rgba(255,255,255,.14);
    border-bottom:1px solid rgba(255,255,255,.14);
    box-shadow:0 26px 44px rgba(11,31,51,.5);
  }
  .hk-nav[data-open]{display:block}
  .hk-nav__list{
    flex-direction:column;align-items:stretch;gap:0;
    width:min(var(--hk-shell-w),calc(100% - (var(--hk-gutter) * 2)));
    margin-inline:auto;
  }
  .hk-nav__link{
    padding:14px 4px;
    font-size:17px;
    border-bottom:1px solid rgba(255,255,255,.1);
  }
  .hk-nav__link[aria-current="page"]::after{
    left:auto;right:0;bottom:auto;top:50%;
    width:3px;height:18px;transform:translateY(-50%);
  }

  .hk-grid--3,.hk-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hk-grid--bento{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hk-span-3,.hk-span-4{grid-column:span 4}
  .hk-span-2{grid-column:span 2}

  .hk-footer__top{grid-template-columns:1fr 1fr;gap:32px}
  .hk-footer__brand{grid-column:1 / -1}
}

@media (max-width:639px){
  .hk-brand__line{display:none}
  .hk-brand__name{font-size:19px}
  .hk-btn{padding:9px 13px;font-size:13px}
  .hk-header__right{gap:8px}

  .hk-grid--2,.hk-grid--3,.hk-grid--4{grid-template-columns:1fr}
  .hk-grid--bento{grid-template-columns:1fr}
  .hk-span-2,.hk-span-3,.hk-span-4{grid-column:span 1}

  .hk-footer__top{grid-template-columns:1fr}
  .hk-footer__cols{grid-template-columns:1fr;gap:24px}
  .hk-footer__bottom{margin-top:34px}
}

@media (max-width:520px){
  :root{--hk-gutter:18px}
  .hk-brand__mark{width:24px;height:24px}
  .hk-nav-toggle__text{display:none}
}

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