/* ==========================================================================
   开心体育赛事 · 共享站点样式 /assets/site.css
   赛场轨迹 × 家庭客厅 —— 三色分区、悬浮胶囊、数据叙事
   ========================================================================== */

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

/* ---------- 2. Tokens ---------- */
:root{
  /* 色彩系统 */
  --c-orange:#F26522;
  --c-orange-deep:#C64A12;
  --c-blue:#123A6B;
  --c-azure:#1E6FD9;
  --c-green:#1F9D55;
  --c-teal:#0B3B3C;
  --c-yellow:#FFC93C;
  --c-indigo:#3B2E7E;
  --c-wine:#8E2C3F;
  --c-cream:#FFF7EC;
  --c-mist:#EEF3F8;
  --c-ink:#14202E;
  --c-ink-soft:#46566A;
  --c-line:rgba(20,32,46,.12);
  --c-paper:#FFFFFF;

  /* 字体 */
  --font-display:system-ui,-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-serif:"Noto Serif SC","Source Han Serif SC","Songti SC",Georgia,"Times New Roman",serif;
  --font-body:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;

  /* 字号 */
  --fs-display:clamp(1.9rem,1.25rem + 2.7vw,3rem);
  --fs-h2:clamp(1.5rem,1.18rem + 1.4vw,2.125rem);
  --fs-h3:clamp(1.18rem,1.08rem + .5vw,1.5rem);
  --fs-h4:1.1875rem;
  --fs-body:1.0625rem;
  --fs-sm:.9375rem;
  --fs-xs:.8125rem;
  --fs-table:.875rem;

  /* 形状与节奏 */
  --r-capsule:999px;
  --r-card:22px;
  --r-soft:14px;
  --wrap-wide:1180px;
  --gutter:clamp(16px,4vw,40px);
  --header-offset:104px;
  --shadow-float:0 10px 28px -14px rgba(18,58,107,.32),0 2px 6px rgba(18,58,107,.07);
  --shadow-float-lg:0 20px 46px -20px rgba(18,58,107,.44);
  --shadow-card:0 1px 0 rgba(20,32,46,.04),0 20px 44px -32px rgba(18,58,107,.6);
  --ease:.22s ease;
}

/* ---------- 3. Base ---------- */
html{scroll-padding-top:calc(var(--header-offset) + 12px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

body{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.75;
  color:var(--c-ink);
  background-color:var(--c-cream);
  background-image:
    radial-gradient(circle at 6% -4%,rgba(242,101,34,.11),transparent 44%),
    radial-gradient(circle at 96% 2%,rgba(30,111,217,.10),transparent 40%),
    radial-gradient(circle at 50% 108%,rgba(31,157,85,.08),transparent 46%);
  background-repeat:no-repeat;
  background-attachment:fixed;
  min-height:100vh;
  overflow-x:hidden;
  padding-top:var(--header-offset);
  -webkit-font-smoothing:antialiased;
}

:focus-visible{outline:3px solid var(--c-azure);outline-offset:3px}
.site-footer :focus-visible{outline-color:var(--c-yellow)}

::selection{background:var(--c-yellow);color:var(--c-ink)}

#main-content{scroll-margin-top:calc(var(--header-offset) + 12px)}

/* ---------- 4. 容器与章节 ---------- */
.wrap{width:100%;max-width:calc(var(--wrap-wide) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:calc(720px + 2 * var(--gutter))}

.section{padding-block:clamp(48px,7vw,88px)}
.section--tight{padding-block:clamp(28px,4vw,50px)}
.section--dark{background:var(--c-blue);color:var(--c-cream)}
.section--teal{background:var(--c-teal);color:var(--c-cream)}
.section--indigo{background:var(--c-indigo);color:var(--c-cream)}
.section--mist{background:var(--c-mist)}

.flush-top{
  margin-top:calc(-1 * var(--header-offset));
  padding-top:calc(var(--header-offset) + clamp(24px,5vw,56px));
}

/* ---------- 5. 文本层级 ---------- */
.h-display{font-family:var(--font-display);font-weight:800;font-size:var(--fs-display);line-height:1.1;letter-spacing:-.02em}
.h-section{font-family:var(--font-display);font-weight:800;font-size:var(--fs-h2);line-height:1.18;letter-spacing:-.02em}
.h-sub{font-family:var(--font-display);font-weight:800;font-size:var(--fs-h3);line-height:1.3;letter-spacing:-.01em}
.h-card{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h4);line-height:1.4}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-serif);font-size:.84rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--c-orange-deep);margin-bottom:14px;
}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:currentColor;flex:none}
.section--dark .eyebrow,.section--teal .eyebrow,.section--indigo .eyebrow{color:var(--c-yellow)}

.lede{font-size:1.09rem;line-height:1.8;color:var(--c-ink-soft);max-width:62ch}
.section--dark .lede,.section--teal .lede,.section--indigo .lede,.site-footer .lede{color:rgba(255,247,236,.82)}
.text-muted{color:var(--c-ink-soft)}

/* ---------- 6. 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  padding:13px 26px;border-radius:var(--r-capsule);
  border:2px solid transparent;
  font-family:var(--font-display);font-weight:700;font-size:.98rem;line-height:1.2;
  letter-spacing:.01em;text-align:center;white-space:nowrap;
  transition:background-color var(--ease),color var(--ease),border-color var(--ease),transform var(--ease),box-shadow var(--ease);
}
.btn--primary{background:var(--c-orange);color:#fff;box-shadow:0 12px 26px -14px rgba(242,101,34,.95)}
.btn--primary:hover{background:var(--c-orange-deep);transform:translateY(-2px)}
.btn--ghost{border-color:currentColor;color:var(--c-blue)}
.btn--ghost:hover{background:var(--c-blue);border-color:var(--c-blue);color:var(--c-cream);transform:translateY(-2px)}
.section--dark .btn--ghost,.section--teal .btn--ghost,.section--indigo .btn--ghost,.site-footer .btn--ghost{color:var(--c-cream)}
.section--dark .btn--ghost:hover,.section--teal .btn--ghost:hover,.section--indigo .btn--ghost:hover,.site-footer .btn--ghost:hover{background:var(--c-cream);color:var(--c-blue);border-color:var(--c-cream)}
.btn--light{background:#fff;color:var(--c-blue)}
.btn--light:hover{background:var(--c-yellow);color:var(--c-ink);transform:translateY(-2px)}

/* ---------- 7. 面包屑 ---------- */
.breadcrumb{
  display:flex;flex-wrap:wrap;gap:6px 0;
  font-size:var(--fs-xs);color:var(--c-ink-soft);
  padding-block:18px 0;
}
.breadcrumb li{display:flex;align-items:center}
.breadcrumb li+li::before{content:"/";margin-inline:10px;color:var(--c-orange);font-weight:700}
.breadcrumb a{color:var(--c-azure);border-bottom:1px solid transparent;transition:border-color var(--ease)}
.breadcrumb a:hover{border-bottom-color:currentColor}
.breadcrumb [aria-current="page"]{color:var(--c-ink);font-weight:600}

/* ---------- 8. 网格 ---------- */
.grid{display:grid;gap:clamp(16px,2.2vw,26px)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--asym{grid-template-columns:1.45fr .85fr}

/* ---------- 9. 卡片 ---------- */
.card{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--c-paper);border-radius:var(--r-card);
  padding:clamp(20px,2.4vw,28px);
  box-shadow:var(--shadow-card);
  transition:transform var(--ease),box-shadow var(--ease);
}
.card::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:12%;
  background:var(--c-orange);z-index:-1;
  transform:translateY(100%);
  transition:transform .24s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-float-lg)}
.card:hover::after{transform:translateY(0)}
.card--tag-blue::after{background:var(--c-azure)}
.card--tag-green::after{background:var(--c-green)}
.card--tag-indigo::after{background:var(--c-indigo)}
.card--dark{background:var(--c-blue);color:var(--c-cream)}
.card--flat{box-shadow:0 0 0 1px var(--c-line)}

/* ---------- 10. 数据叙事件 ---------- */
.stat{display:flex;flex-direction:column;gap:4px}
.stat-num{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(2.1rem,1.55rem + 1.9vw,3.4rem);
  line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  color:var(--c-orange);
}
.stat-label{font-size:var(--fs-xs);color:var(--c-ink-soft);letter-spacing:.02em}
.section--dark .stat-num,.section--teal .stat-num,.section--indigo .stat-num{color:var(--c-yellow)}
.section--dark .stat-label,.section--teal .stat-label,.section--indigo .stat-label{color:rgba(255,247,236,.72)}

.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:var(--r-capsule);
  font-size:var(--fs-xs);font-weight:700;line-height:1.5;
  background:var(--c-mist);color:var(--c-blue);white-space:nowrap;
}
.chip--live{background:rgba(242,101,34,.15);color:var(--c-orange-deep)}
.chip--done{background:rgba(31,157,85,.15);color:#13703C}
.chip--soon{background:rgba(255,201,60,.32);color:#7A5600}
.chip--plain{background:transparent;color:var(--c-ink-soft);padding-inline:0}

.dot{width:9px;height:9px;border-radius:50%;background:currentColor;flex:none;display:inline-block}
.dot--live{background:var(--c-orange)}
.dot--done{background:var(--c-green)}
.dot--soon{background:var(--c-yellow)}
.dot--blue{background:var(--c-azure)}
.dot--wine{background:var(--c-wine)}

.legend{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:var(--fs-xs);color:var(--c-ink-soft)}
.section--dark .legend,.section--teal .legend,.section--indigo .legend{color:rgba(255,247,236,.75)}
.legend-item{display:inline-flex;align-items:center;gap:8px}

/* ---------- 11. 标签切换 ---------- */
.tabs{--tab-accent:var(--c-orange)}
.tablist{
  display:flex;flex-wrap:wrap;gap:6px;
  padding:6px;border-radius:var(--r-capsule);
  background:var(--c-mist);width:fit-content;max-width:100%;
}
.section--dark .tablist,.section--teal .tablist,.section--indigo .tablist{background:rgba(255,247,236,.12)}
.tab{
  padding:9px 18px;border-radius:var(--r-capsule);
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-table);
  color:var(--c-blue);white-space:nowrap;
  transition:background-color .18s ease,color .18s ease;
}
.section--dark .tab,.section--teal .tab,.section--indigo .tab{color:var(--c-cream)}
.tab:hover{background:rgba(18,58,107,.08)}
.section--dark .tab:hover,.section--teal .tab:hover,.section--indigo .tab:hover{background:rgba(255,247,236,.16)}
.tab[aria-selected="true"]{background:var(--tab-accent);color:#fff}
.tabpanel{padding-top:22px}

/* ---------- 12. 链接微交互 ---------- */
.link-slide{
  position:relative;display:inline-block;
  color:var(--c-azure);font-weight:600;padding-bottom:2px;
  transition:color var(--ease);
}
.link-slide::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:currentColor;transform:scaleX(0);transform-origin:left center;
  transition:transform var(--ease);
}
.link-slide:hover::after,.link-slide:focus-visible::after{transform:scaleX(1)}
.link-slide:hover{color:var(--c-orange-deep)}
.section--dark .link-slide,.section--teal .link-slide,.section--indigo .link-slide,.site-footer .link-slide{color:var(--c-yellow)}

/* ---------- 13. 图片容器基座 ---------- */
.media{
  position:relative;display:block;overflow:hidden;isolation:isolate;
  border-radius:var(--r-card);background:var(--c-mist);
  aspect-ratio:16/9;
}
.media>img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .5s ease}
.media:hover>img{transform:scale(1.035)}
.media--wide{aspect-ratio:21/9}
.media--square{aspect-ratio:1/1}
.media--portrait{aspect-ratio:4/5}
.media--round{border-radius:50%}
.media--tint::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,58,107,0) 42%,rgba(18,58,107,.62) 100%);
}
.media-caption{font-size:var(--fs-xs);color:var(--c-ink-soft);margin-top:10px;line-height:1.6}
.section--dark .media-caption,.section--teal .media-caption,.section--indigo .media-caption{color:rgba(255,247,236,.7)}

/* ---------- 14. 跳过链接 ---------- */
.skip-link{
  position:fixed;top:-80px;left:50%;transform:translateX(-50%);
  z-index:200;padding:11px 22px;border-radius:var(--r-capsule);
  background:var(--c-ink);color:var(--c-cream);
  font-size:var(--fs-sm);font-weight:700;
  transition:top .2s ease;
}
.skip-link:focus{top:12px}

/* ---------- 15. 顶部悬浮胶囊导航 ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:90;
  padding:14px var(--gutter) 0;
  pointer-events:none;
}
.header-rail{
  position:relative;pointer-events:auto;
  display:flex;align-items:center;gap:12px;
  width:100%;max-width:var(--wrap-wide);margin-inline:auto;
}

.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:120;
  pointer-events:none;overflow:hidden;
}
.scroll-progress>span{
  display:block;height:100%;width:100%;
  transform:scaleX(0);transform-origin:left center;
  background:linear-gradient(90deg,var(--c-orange),var(--c-yellow) 48%,var(--c-green) 100%);
  will-change:transform;
}

.brand{
  display:inline-flex;align-items:center;gap:11px;
  padding:9px 20px 9px 11px;border-radius:var(--r-capsule);
  background:rgba(255,247,236,.95);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:var(--shadow-float);
  transition:box-shadow var(--ease),transform var(--ease),background-color var(--ease);
  flex:none;
}
.brand:hover{transform:translateY(-1px);background:#fff}
.brand-mark{
  position:relative;flex:none;width:36px;height:36px;border-radius:50%;
  background:conic-gradient(from 140deg,var(--c-orange),var(--c-yellow),var(--c-green),var(--c-azure),var(--c-orange));
  display:grid;place-items:center;
}
.brand-mark::after{content:"";width:13px;height:13px;border-radius:50%;background:var(--c-cream)}
.brand-text{display:flex;flex-direction:column;line-height:1.16;min-width:0}
.brand-name{
  font-family:var(--font-display);font-weight:800;font-size:1.05rem;
  letter-spacing:-.01em;color:var(--c-ink);white-space:nowrap;
}
.brand-tagline{
  font-family:var(--font-serif);font-size:.7rem;letter-spacing:.02em;
  color:var(--c-orange-deep);white-space:nowrap;
}

.capsule-nav{
  flex:1 1 auto;min-width:0;
  padding:6px;
  background:rgba(255,247,236,.95);
  border:1px solid rgba(255,255,255,.8);
  border-radius:var(--r-capsule);
  box-shadow:var(--shadow-float);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  transition:box-shadow var(--ease);
}
.capsule-nav ul{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2px}

.nav-link{
  position:relative;display:flex;align-items:center;justify-content:center;
  padding:9px clamp(6px,.9vw,14px);border-radius:var(--r-capsule);
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(.84rem,.62rem + .34vw,.95rem);
  color:var(--c-ink);white-space:nowrap;
  transition:background-color var(--ease),color var(--ease),box-shadow var(--ease);
}
.nav-link::after{
  content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:2px;
  background:var(--c-orange);transform:scaleX(0);transform-origin:left center;
  transition:transform var(--ease);
}
.nav-link:hover{background:var(--c-mist)}
.nav-link:hover::after{transform:scaleX(1)}
.nav-link[aria-current="page"]{
  background:var(--c-orange);color:#fff;
  box-shadow:0 8px 18px -10px rgba(242,101,34,1);
}
.nav-link[aria-current="page"]::after{display:none}

.header-tools{display:flex;align-items:center;gap:8px;flex:none}
.tool-link{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 17px;border-radius:var(--r-capsule);
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-xs);
  background:var(--c-blue);color:#fff;
  box-shadow:var(--shadow-float);
  transition:background-color var(--ease),color var(--ease),border-color var(--ease),transform var(--ease),box-shadow var(--ease);
}
.tool-link:hover{background:var(--c-azure);transform:translateY(-1px)}
.tool-link--fav{background:#fff;color:var(--c-orange-deep);border:2px solid rgba(242,101,34,.4)}
.tool-link--fav:hover{background:var(--c-orange);color:#fff;border-color:var(--c-orange)}
.tool-dot{
  position:relative;flex:none;width:13px;height:13px;
  border:2px solid currentColor;border-radius:50%;
}
.tool-dot--search::after{
  content:"";position:absolute;right:-5px;bottom:-4px;
  width:7px;height:2px;border-radius:2px;background:currentColor;
  transform:rotate(45deg);
}
.tool-dot--fav{background:currentColor;border-color:currentColor}
.tool-label{white-space:nowrap}

.nav-toggle{
  display:none;place-items:center;
  width:46px;height:46px;border-radius:50%;
  background:var(--c-blue);color:#fff;
  box-shadow:var(--shadow-float);flex:none;
  transition:background-color var(--ease),box-shadow var(--ease);
}
.nav-toggle:hover{background:var(--c-azure)}
.nav-toggle-bars{
  position:relative;display:block;width:20px;height:2px;border-radius:2px;
  background:currentColor;transition:background-color .18s ease;
}
.nav-toggle-bars::before,.nav-toggle-bars::after{
  content:"";position:absolute;left:0;width:20px;height:2px;border-radius:2px;
  background:currentColor;transition:transform var(--ease);
}
.nav-toggle-bars::before{top:-6px}
.nav-toggle-bars::after{top:6px}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{transform:translateY(-6px) rotate(-45deg)}

.site-header[data-scrolled] .brand,
.site-header[data-scrolled] .capsule-nav,
.site-header[data-scrolled] .tool-link,
.site-header[data-scrolled] .nav-toggle{
  box-shadow:0 16px 36px -16px rgba(18,58,107,.46),0 2px 8px rgba(18,58,107,.08);
}

/* ---------- 16. 页脚 ---------- */
.site-footer{
  position:relative;isolation:isolate;overflow:hidden;
  margin-top:clamp(48px,6vw,88px);
  background:linear-gradient(180deg,#0B3B3C 0%,#0B3B3C 58%,#082B2C 100%);
  color:#E7F1EF;
}
.site-footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:6px;
  background:linear-gradient(90deg,var(--c-orange) 0%,var(--c-yellow) 26%,var(--c-green) 54%,var(--c-azure) 78%,var(--c-indigo) 100%);
}
.footer-orbit{
  position:absolute;top:-140px;right:-110px;width:400px;height:400px;
  border-radius:50%;border:1px solid rgba(255,201,60,.22);pointer-events:none;z-index:0;
}
.footer-orbit::after{
  content:"";position:absolute;inset:58px;border-radius:50%;
  border:1px dashed rgba(242,101,34,.34);
}
.site-footer>.wrap{position:relative;z-index:1}

.footer-top{
  display:grid;grid-template-columns:minmax(230px,1fr) 2.15fr;
  gap:clamp(30px,4vw,64px);
  padding-block:clamp(46px,6vw,76px) clamp(26px,3.4vw,42px);
}
.footer-brand-name{
  display:block;font-family:var(--font-display);font-weight:800;
  font-size:1.35rem;letter-spacing:-.01em;color:#fff;
}
.footer-brand-line{
  font-family:var(--font-serif);font-size:.94rem;color:var(--c-yellow);margin-top:6px;
}
.footer-note{
  margin-top:16px;max-width:34ch;
  font-size:.9rem;line-height:1.8;color:rgba(231,241,239,.7);
}

.footer-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
.footer-col-title{
  position:relative;padding-bottom:11px;margin-bottom:14px;
  font-family:var(--font-serif);font-size:.95rem;font-weight:600;
  letter-spacing:.09em;color:#fff;
}
.footer-col-title::after{
  content:"";position:absolute;left:0;bottom:0;width:26px;height:3px;border-radius:3px;
  background:var(--c-orange);
}
.footer-links{display:flex;flex-direction:column;gap:9px}
.footer-links a{
  position:relative;display:inline-block;width:fit-content;
  font-size:.9rem;color:rgba(231,241,239,.78);
  transition:color .18s ease;
}
.footer-links a::after{
  content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;
  background:var(--c-yellow);transform:scaleX(0);transform-origin:left center;
  transition:transform .2s ease;
}
.footer-links a:hover{color:var(--c-yellow)}
.footer-links a:hover::after{transform:scaleX(1)}

.footer-contact{
  display:grid;grid-template-columns:auto 1fr;
  gap:8px clamp(20px,3vw,44px);align-items:start;
  padding-block:clamp(26px,3.4vw,40px);
  border-top:1px solid rgba(231,241,239,.16);
  border-bottom:1px solid rgba(231,241,239,.16);
}
.footer-contact-title{
  grid-column:1;font-family:var(--font-serif);font-size:.95rem;
  font-weight:600;letter-spacing:.09em;color:var(--c-yellow);
}
.contact-list{
  grid-column:2;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:12px 26px;
}
.contact-list li{display:flex;flex-direction:column;gap:3px;font-size:.92rem}
.contact-key{
  font-family:var(--font-serif);font-size:.72rem;letter-spacing:.12em;
  color:rgba(231,241,239,.55);
}
.contact-list a{
  color:#fff;width:fit-content;
  border-bottom:1px solid rgba(255,201,60,.45);
  transition:color .18s ease,border-color .18s ease;
}
.contact-list a:hover{color:var(--c-yellow);border-bottom-color:var(--c-yellow)}
.contact-note{
  grid-column:2;font-size:.84rem;line-height:1.7;color:rgba(231,241,239,.6);
}

.footer-bottom{background:rgba(0,0,0,.24);padding-block:20px}
.footer-bottom-inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px 26px;font-size:.84rem;color:rgba(231,241,239,.62);
}
.footer-legal{display:flex;flex-wrap:wrap;gap:8px 22px}
.footer-legal a{color:rgba(231,241,239,.82);transition:color .18s ease}
.footer-legal a:hover{color:var(--c-yellow)}
.footer-icp{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.footer-copy{font-variant-numeric:tabular-nums}

/* ---------- 17. 响应式 ---------- */
@media (max-width:1080px){
  :root{--header-offset:92px}
  .brand-tagline{display:none}
  .header-rail{justify-content:space-between}
  .nav-toggle{display:grid}
  .tool-label{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  }
  .tool-link{padding:13px;gap:0}
  .capsule-nav{
    position:absolute;top:calc(100% + 10px);left:0;right:0;
    padding:12px;border-radius:28px;
    background:var(--c-cream);
    box-shadow:var(--shadow-float-lg);
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
  }
  .capsule-nav[data-open]{opacity:1;visibility:visible;transform:translateY(0)}
  .capsule-nav ul{grid-template-columns:1fr;gap:4px}
  .nav-link{
    justify-content:flex-start;padding:13px 18px;border-radius:16px;
    font-size:1rem;
  }
  .nav-link::after{display:none}
  .nav-link[aria-current="page"]{background:var(--c-orange)}
  .footer-top{grid-template-columns:1fr}
}

@media (max-width:900px){
  .grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--asym{grid-template-columns:1fr}
}

@media (max-width:760px){
  .footer-contact{grid-template-columns:1fr;gap:10px}
  .footer-contact-title,.contact-list,.contact-note{grid-column:1}
  .footer-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px}
  .footer-bottom-inner{justify-content:flex-start}
}

@media (max-width:600px){
  :root{--header-offset:84px}
  .site-header{padding-top:10px}
  .brand{padding:7px 14px 7px 9px}
  .brand-mark{width:32px;height:32px}
  .brand-name{font-size:.98rem}
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
  .footer-orbit{width:280px;height:280px;top:-100px;right:-100px}
}

/* ---------- 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;
  }
  .card:hover{transform:none}
  .beside-img,.media:hover>img{transform:none}
}

/* ---------- 19. 打印 ---------- */
@media print{
  .site-header,.site-footer,.skip-link,.scroll-progress{display:none!important}
  body{padding-top:0;background:#fff}
}