/* ==========================================================================
   谈球吧赛场 · 共享样式表 /assets/site.css
   1 reset  2 变量  3 排版  4 骨架  5 头部  6 导航  7 页脚
   8 通用组件  9 图片容器  10 动效与无障碍
   ========================================================================== */

/* 1 reset ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--ticker-h) + var(--utilbar-h) + 20px);
}
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,figure,figcaption,blockquote,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:0}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse}
[hidden]{display:none!important}

/* 2 变量 ---------------------------------------------------------------- */
:root{
  --ink:#0C1F1B;
  --carbon:#14171A;
  --teal-deep:#123B33;
  --cyan:#38E1D0;
  --orange:#FF7A33;
  --warm:#F4F0E6;
  --celadon:#9FB8B2;
  --mist:#FFD8BE;
  --line:#5A6866;

  --rail-w:96px;
  --ticker-h:38px;
  --utilbar-h:54px;
  --pad:clamp(16px,3.2vw,40px);
  --maxw:1240px;
  --measure:38em;

  --font-body:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC",-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  --fs-h1:clamp(34px,7vw,56px);
  --fs-h2:clamp(26px,4.4vw,44px);
  --fs-h3:clamp(21px,2.6vw,32px);
  --fs-h4:clamp(18px,2vw,24px);
  --fs-body:17px;
  --fs-small:15px;
  --fs-label:13px;
  --fs-data:16px;

  --dur:320ms;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* 3 排版 ---------------------------------------------------------------- */
body{
  padding-top:calc(var(--ticker-h) + var(--utilbar-h));
  background-color:var(--ink);
  background-image:
    repeating-linear-gradient(90deg,rgba(90,104,102,.10) 0 1px,transparent 1px 96px),
    repeating-linear-gradient(0deg,rgba(90,104,102,.07) 0 1px,transparent 1px 96px);
  color:var(--warm);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.75;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-weight:900;letter-spacing:-.01em;line-height:1.18}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
h4{font-size:var(--fs-h4);font-weight:800}
p{max-width:var(--measure)}
strong{font-weight:800;color:var(--warm)}
.mono,.eyebrow,.status-ticker__pct,time{font-family:var(--font-mono);letter-spacing:.04em}
.mono{font-variant-numeric:tabular-nums}
.caps{letter-spacing:.14em}
.eyebrow{
  font-size:var(--fs-label);
  letter-spacing:.14em;
  color:var(--cyan);
  text-transform:uppercase;
}
.lead{font-size:clamp(18px,1.6vw,21px);line-height:1.7;color:var(--celadon);max-width:var(--measure)}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* 4 骨架 ---------------------------------------------------------------- */
.shell{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
}
.section{padding-block:clamp(48px,7vw,96px)}
.section--tight{padding-block:clamp(32px,4vw,56px)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.gap-sm{gap:16px}
.gap-lg{gap:clamp(24px,3vw,40px)}
.col-span-3{grid-column:span 3}
.col-span-4{grid-column:span 4}
.col-span-5{grid-column:span 5}
.col-span-6{grid-column:span 6}
.col-span-7{grid-column:span 7}
.col-span-8{grid-column:span 8}
.col-span-12{grid-column:span 12}
.stack{display:flex;flex-direction:column;gap:clamp(12px,1.6vw,20px)}
.cluster{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.section-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;margin-bottom:clamp(20px,3vw,36px)}
.section-head__coord{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.12em;
  color:var(--cyan);
  border:1px solid rgba(56,225,208,.45);
  padding:3px 8px;
}
.section-head__title{font-size:var(--fs-h2);font-weight:900;letter-spacing:-.01em;line-height:1.16}
.section-head__note{font-size:var(--fs-small);color:var(--celadon);max-width:var(--measure)}

/* 5 头部 ---------------------------------------------------------------- */
.site-header{position:relative;z-index:50}

.skip-link{
  position:fixed;
  top:-120px;
  left:12px;
  z-index:120;
  padding:10px 16px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  background:var(--cyan);
  color:var(--ink);
  font-weight:800;
  font-size:14px;
  transition:top 160ms ease-out;
}
.skip-link:focus{top:8px}

.status-ticker{
  position:fixed;
  top:0;left:0;right:0;
  height:var(--ticker-h);
  z-index:70;
  background:var(--carbon);
  border-bottom:1px solid var(--line);
}
.status-ticker__inner{
  height:100%;
  display:flex;
  align-items:center;
  gap:12px;
  padding-inline:clamp(12px,2vw,20px);
}
.status-ticker__brand{display:inline-flex;align-items:center;gap:8px;min-height:28px}
.status-ticker__blip{
  width:10px;height:10px;
  background:var(--orange);
  box-shadow:0 0 0 3px rgba(255,122,51,.18);
}
.status-ticker__name{
  font-size:14px;
  font-weight:900;
  letter-spacing:.06em;
  color:var(--warm);
  white-space:nowrap;
}
.status-ticker__sep{
  width:1px;height:16px;
  background:var(--line);
  flex:0 0 auto;
}
.status-ticker__section{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  letter-spacing:.10em;
  color:var(--celadon);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.status-ticker__coord{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--cyan);
  border:1px solid rgba(56,225,208,.4);
  padding:1px 5px;
}
.status-ticker__track{
  flex:1 1 auto;
  min-width:40px;
  height:3px;
  background:rgba(90,104,102,.45);
  position:relative;
  overflow:hidden;
}
.status-ticker__bar{
  position:absolute;
  inset:0;
  transform:scaleX(0);
  transform-origin:0 50%;
  background:linear-gradient(90deg,var(--cyan),var(--orange));
}
.status-ticker__pct{
  font-size:11px;
  color:var(--celadon);
  min-width:32px;
  text-align:right;
}
.site-header .status-ticker__brand:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* 6 导航 ---------------------------------------------------------------- */
.index-rail{
  position:fixed;
  top:var(--ticker-h);
  left:0;
  bottom:0;
  width:var(--rail-w);
  z-index:60;
  display:flex;
  flex-direction:column;
  background:var(--carbon);
  border-right:1px solid var(--line);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.index-rail__list{display:flex;flex-direction:column}
.index-rail__item{display:block}
.index-rail__link{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  min-height:60px;
  padding:10px 10px 10px 18px;
  color:var(--celadon);
  border-top:1px solid rgba(90,104,102,.35);
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.index-rail__item:last-child .index-rail__link{border-bottom:1px solid rgba(90,104,102,.35)}
.index-rail__link::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:3px;
  background:transparent;
  transition:background-color var(--dur) var(--ease);
}
.index-rail__coord{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.12em;
  color:var(--cyan);
  position:relative;
  padding-bottom:2px;
}
.index-rail__coord::after{
  content:"";
  display:block;
  width:12px;
  height:1px;
  background:var(--line);
  margin-top:3px;
  transition:width var(--dur) var(--ease),background-color var(--dur) var(--ease);
}
.index-rail__label{font-size:12px;line-height:1.35;letter-spacing:.02em}
.index-rail__link:hover{background:var(--teal-deep);color:var(--warm)}
.index-rail__link:hover::before{background:var(--cyan)}
.index-rail__link:hover .index-rail__coord::after{width:36px;background:var(--cyan)}
.index-rail__link.is-active,
.index-rail__link[aria-current="page"]{background:var(--teal-deep);color:var(--warm)}
.index-rail__link.is-active::before,
.index-rail__link[aria-current="page"]::before{background:var(--cyan)}
.index-rail__link.is-active .index-rail__coord::after,
.index-rail__link[aria-current="page"] .index-rail__coord::after{width:36px;background:var(--cyan)}
.index-rail__foot{
  margin-top:auto;
  padding:14px 12px 18px 18px;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.08em;
  color:var(--line);
  line-height:1.6;
  max-width:none;
}

.util-bar{
  position:fixed;
  top:var(--ticker-h);
  left:0;
  right:0;
  height:var(--utilbar-h);
  z-index:65;
  display:flex;
  align-items:center;
  gap:14px;
  padding-inline:clamp(12px,2vw,20px);
  background:rgba(20,23,26,.94);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(8px);
}
.util-bar__toggle{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  min-width:44px;
  padding:0 12px;
  border:1px solid var(--line);
  color:var(--warm);
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  cursor:pointer;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.util-bar__toggle:hover{border-color:var(--cyan);color:var(--cyan)}
.util-bar__bars{
  position:relative;
  display:block;
  width:18px;
  height:2px;
  background:var(--cyan);
  transition:background-color var(--dur) var(--ease);
}
.util-bar__bars::before,
.util-bar__bars::after{
  content:"";
  position:absolute;
  left:0;
  width:18px;
  height:2px;
  background:inherit;
  transition:transform var(--dur) var(--ease);
}
.util-bar__bars::before{top:-6px}
.util-bar__bars::after{top:6px}
.util-bar__toggle[aria-expanded="true"] .util-bar__bars{background:var(--orange)}
.util-bar__toggle[aria-expanded="true"] .util-bar__bars::before{transform:translateY(6px) rotate(45deg)}
.util-bar__toggle[aria-expanded="true"] .util-bar__bars::after{transform:translateY(-6px) rotate(-45deg)}
.util-bar__toggle-text{white-space:nowrap}
.util-bar__tag{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  color:var(--line);
  white-space:nowrap;
}
.util-bar__actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
}

/* 7 页脚 ---------------------------------------------------------------- */
.site-footer{
  margin-top:clamp(48px,8vw,112px);
  background:var(--carbon);
  border-top:1px solid var(--line);
}
.site-footer__ticks{
  height:12px;
  background-image:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 24px);
  border-bottom:1px solid rgba(90,104,102,.5);
  position:relative;
}
.site-footer__ticks::after{
  content:"";
  position:absolute;
  left:0;top:-1px;
  width:96px;height:3px;
  background:var(--cyan);
}
.site-footer__inner{
  display:grid;
  grid-template-columns:1.6fr repeat(3,1fr) 1.5fr;
  gap:clamp(24px,3vw,44px);
  padding-block:clamp(36px,5vw,64px);
}
.site-footer__logo{
  display:inline-block;
  font-size:20px;
  font-weight:900;
  letter-spacing:.04em;
  color:var(--warm);
  border-bottom:2px solid var(--orange);
  padding-bottom:4px;
}
.site-footer__logo:hover{color:var(--cyan);border-bottom-color:var(--cyan)}
.site-footer__line{
  margin-top:16px;
  font-size:var(--fs-small);
  color:var(--celadon);
  max-width:26em;
}
.site-footer__meta{
  margin-top:10px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--line);
  max-width:none;
}
.site-footer__title{
  font-size:var(--fs-label);
  font-weight:800;
  letter-spacing:.16em;
  color:var(--cyan);
  margin-bottom:14px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(90,104,102,.5);
}
.site-footer__list{display:flex;flex-direction:column;gap:2px}
.site-footer__list a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:var(--fs-small);
  color:var(--celadon);
  transition:color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.site-footer__list a:hover{color:var(--warm);transform:translateX(3px)}
.site-footer__contact{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.site-footer__addr,
.site-footer__note{
  font-size:var(--fs-small);
  color:var(--celadon);
  max-width:24em;
}
.site-footer__note{font-size:var(--fs-label);color:var(--line);line-height:1.7}
.site-footer__base{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-block:20px 28px;
  border-top:1px solid rgba(90,104,102,.5);
}
.site-footer__copy{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--celadon);
  max-width:none;
}
.site-footer__legal{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:var(--fs-label)}
.site-footer__legal a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:var(--celadon);
  transition:color var(--dur) var(--ease);
}
.site-footer__legal a:hover{color:var(--cyan)}
.site-footer__legal span{color:var(--line)}

/* 8 通用组件 ------------------------------------------------------------ */
.btn{
  --btn-bg:transparent;
  --btn-fg:var(--warm);
  --btn-bd:var(--line);
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:0 16px;
  font-size:14px;
  font-weight:800;
  letter-spacing:.06em;
  white-space:nowrap;
  background:var(--btn-bg);
  color:var(--btn-fg);
  border:1px solid var(--btn-bd);
  cursor:pointer;
  transition:transform var(--dur) var(--ease),background-color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primary{--btn-bg:var(--orange);--btn-fg:var(--carbon);--btn-bd:var(--orange)}
.btn--primary:hover{--btn-bg:#ff8f52}
.btn--line{--btn-fg:var(--cyan);--btn-bd:rgba(56,225,208,.7)}
.btn--line:hover{--btn-bg:rgba(56,225,208,.12);--btn-bd:var(--cyan)}
.btn--quiet{--btn-fg:var(--celadon);--btn-bd:rgba(90,104,102,.7)}
.btn--quiet:hover{--btn-fg:var(--warm);--btn-bd:var(--warm)}

.panel{
  position:relative;
  background:var(--teal-deep);
  border:1px solid var(--line);
  padding:clamp(18px,2.4vw,28px);
  transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.panel::before,
.panel::after{
  content:"";
  position:absolute;
  width:14px;height:14px;
  border:0 solid var(--cyan);
  pointer-events:none;
}
.panel::before{top:-1px;left:-1px;border-top-width:2px;border-left-width:2px}
.panel::after{bottom:-1px;right:-1px;border-bottom-width:2px;border-right-width:2px}
.panel:hover{transform:translateY(-2px);border-color:rgba(56,225,208,.5)}
.panel--carbon{background:var(--carbon)}
.panel--flat{background:rgba(18,59,51,.45)}
.panel__coord{
  position:absolute;
  top:14px;right:16px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  color:var(--cyan);
}
.panel__title{font-size:var(--fs-h4);font-weight:900;margin-bottom:10px}
.panel__text{font-size:var(--fs-small);color:var(--celadon);max-width:32em}

.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 9px;
  font-size:var(--fs-label);
  letter-spacing:.10em;
  background:var(--mist);
  color:var(--carbon);
  font-weight:700;
}
.tag--line{background:transparent;color:var(--cyan);border:1px solid rgba(56,225,208,.5)}
.tag--alert{background:var(--orange);color:var(--carbon)}

.legend{display:flex;flex-wrap:wrap;gap:14px}
.legend__item{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-label);color:var(--celadon);letter-spacing:.08em}
.legend__dot{width:9px;height:9px;background:var(--cyan);flex:0 0 auto}
.legend__dot--orange{background:var(--orange)}
.legend__dot--line{background:var(--line)}

.data-strip{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:1px;
  background:rgba(90,104,102,.5);
  border:1px solid rgba(90,104,102,.5);
}
.data-strip__item{background:var(--carbon);padding:16px 18px}
.data-strip__num{
  display:block;
  font-family:var(--font-mono);
  font-size:clamp(22px,3vw,30px);
  letter-spacing:.02em;
  color:var(--orange);
  line-height:1.2;
}
.data-strip__label{display:block;margin-top:6px;font-size:var(--fs-label);letter-spacing:.10em;color:var(--celadon)}

.matrix{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:8px}
.matrix__cell{
  min-height:64px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  padding:10px;
  border:1px solid rgba(90,104,102,.6);
  background:rgba(18,59,51,.35);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--celadon);
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.matrix__cell:hover{border-color:var(--cyan);color:var(--warm)}
.matrix__cell--on{border-color:var(--orange);color:var(--warm)}

.timeline{position:relative;padding-left:24px}
.timeline::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:rgba(90,104,102,.6)}
.timeline__row{position:relative;padding-block:14px}
.timeline__dot{position:absolute;left:-24px;top:22px;width:11px;height:11px;background:var(--cyan);border:2px solid var(--carbon)}

.table{width:100%;font-size:var(--fs-small)}
.table th,.table td{padding:12px 14px;text-align:left;border-bottom:1px solid rgba(90,104,102,.5)}
.table th{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  color:var(--celadon);
  font-weight:500;
  white-space:nowrap;
}
.table tbody tr:hover{background:rgba(18,59,51,.55)}

.fold-group{border-top:1px solid rgba(90,104,102,.6)}
.fold{border-bottom:1px solid rgba(90,104,102,.6)}
.fold__trigger{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  min-height:56px;
  padding:14px 4px;
  font-size:var(--fs-body);
  font-weight:800;
  color:var(--warm);
  text-align:left;
  cursor:pointer;
  transition:color var(--dur) var(--ease);
}
.fold__trigger::before{
  content:"+";
  font-family:var(--font-mono);
  font-size:18px;
  color:var(--cyan);
  flex:0 0 auto;
}
.fold__trigger[aria-expanded="true"]::before{content:"−";color:var(--orange)}
.fold__trigger:hover{color:var(--cyan)}
.fold__panel{padding:0 4px 20px 34px;font-size:var(--fs-small);color:var(--celadon);max-width:var(--measure)}

.copy-chip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  max-width:100%;
  padding:8px 12px;
  background:rgba(18,59,51,.6);
  border:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--warm);
  cursor:pointer;
  text-align:left;
  transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease);
}
.copy-chip:hover{border-color:var(--cyan);background:rgba(18,59,51,.9)}
.copy-chip__key{
  font-family:var(--font-body);
  font-size:11px;
  letter-spacing:.14em;
  color:var(--celadon);
  flex:0 0 auto;
}
.copy-chip__val{overflow-wrap:anywhere}
.copy-chip[data-copied]::after{
  content:"已复制";
  font-family:var(--font-body);
  font-size:11px;
  letter-spacing:.08em;
  padding:2px 6px;
  background:var(--cyan);
  color:var(--ink);
  flex:0 0 auto;
}

.breadcrumb{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--celadon)}
.breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;max-width:none}
.breadcrumb li{display:inline-flex;align-items:center;gap:8px}
.breadcrumb li:not(:last-child)::after{content:"/";color:var(--line)}
.breadcrumb a{display:inline-flex;align-items:center;min-height:44px}
.breadcrumb a:hover{color:var(--cyan)}
.breadcrumb [aria-current="page"]{color:var(--warm)}

.prose{max-width:var(--measure)}
.prose>*+*{margin-top:1.15em}
.prose h2{font-size:var(--fs-h3);margin-top:2em}
.prose h3{font-size:var(--fs-h4);margin-top:1.6em}
.prose p{color:var(--celadon)}
.prose a{color:var(--cyan);border-bottom:1px solid rgba(56,225,208,.45)}
.prose a:hover{border-bottom-color:var(--cyan)}
.prose ul,.prose ol{display:flex;flex-direction:column;gap:8px}
.prose li{position:relative;padding-left:1.3em;color:var(--celadon)}
.prose li::before{content:"—";position:absolute;left:0;color:var(--cyan)}
.prose blockquote{
  border-left:2px solid var(--cyan);
  padding:6px 0 6px 18px;
  color:var(--warm);
  font-size:var(--fs-h4);
  font-weight:700;
}
.prose hr{border:0;border-top:1px solid rgba(90,104,102,.6);margin-block:2em}

/* 9 图片容器（页面阶段放入 img） --------------------------------------- */
.media-frame{
  position:relative;
  overflow:hidden;
  background:var(--carbon);
  border:1px solid var(--line);
  aspect-ratio:16/9;
}
.media-frame img{width:100%;height:100%;object-fit:cover;filter:saturate(.6) brightness(.72) contrast(1.06)}
.media-frame::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(12,31,27,0) 38%,rgba(12,31,27,.78) 100%);
  pointer-events:none;
}
.media-frame--wide{aspect-ratio:21/9}
.media-frame--tall{aspect-ratio:3/4}
.media-frame--square{aspect-ratio:1/1}
.media-frame__rule{
  position:absolute;
  left:0;right:0;top:50%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(56,225,208,.75),transparent);
  pointer-events:none;
}
.media-frame__label{
  position:absolute;
  left:12px;bottom:12px;
  z-index:2;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  color:var(--warm);
  background:rgba(20,23,26,.82);
  border-left:3px solid var(--orange);
  padding:4px 8px;
}
.media-figure{margin:0}
.media-figure figcaption{
  margin-top:10px;
  font-size:var(--fs-label);
  letter-spacing:.04em;
  color:var(--celadon);
}

/* 10 动效与无障碍 ------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(12px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.reveal.is-in{opacity:1;transform:none}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:2px;
}

/* 响应式 ---------------------------------------------------------------- */
@media (min-width:768px){
  :root{--ticker-h:40px;--utilbar-h:56px}
}
@media (min-width:1024px){
  body{padding-left:var(--rail-w)}
  .util-bar{left:var(--rail-w)}
  .util-bar__toggle{display:none}
}
@media (max-width:1023px){
  body{padding-left:0}
  .index-rail{
    top:auto;
    left:0;
    right:0;
    bottom:0;
    width:auto;
    max-height:78vh;
    border-right:0;
    border-top:1px solid var(--line);
    transform:translateY(110%);
    transition:transform 280ms var(--ease);
    box-shadow:0 -18px 40px rgba(0,0,0,.45);
  }
  .index-rail__list{flex-direction:column}
  .index-rail__link{flex-direction:row;align-items:baseline;gap:12px;min-height:52px;padding-left:20px}
  .index-rail__coord{padding-bottom:0}
  .index-rail__coord::after{display:none}
  .index-rail__foot{margin-top:0;padding:12px 20px 20px}
  [data-nav][data-open]{transform:translateY(0)}
  .site-header[data-open] .index-rail{transform:translateY(0)}
}
@media (max-width:1023px) and (min-width:768px){
  .site-footer__inner{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
  :root{--ticker-h:36px;--utilbar-h:52px;--fs-body:16px}
  .status-ticker__sep{display:none}
  .status-ticker__section{max-width:38%}
  .util-bar__tag{display:none}
  .util-bar__actions{gap:8px}
  .util-bar__actions .btn{padding:0 12px;font-size:13px;letter-spacing:.02em}
  .grid{grid-template-columns:repeat(4,1fr)}
  .col-span-3,.col-span-4,.col-span-5,.col-span-6,.col-span-7,.col-span-8,.col-span-12{grid-column:span 4}
  .site-footer__inner{grid-template-columns:1fr}
  .site-footer__base{flex-direction:column;align-items:flex-start}
  .copy-chip{width:100%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .reveal{opacity:1;transform:none}
  .btn:hover,.panel:hover{transform:none}
  .site-footer__list a:hover{transform:none}
}