/* ==========================================================================
   亚美体育 · /assets/site.css
   共享层：reset / 变量 / 中文排版 / 头部 / 页脚 / 通用组件
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{margin:0;}
h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd{margin:0;}
ul,ol{padding:0;list-style:none;}
img,svg,video{display:block;max-width:100%;}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}
a{color:inherit;text-decoration:none;}
table{border-collapse:collapse;width:100%;}
b,strong{font-weight:700;}

:root{
  /* 色彩 */
  --c-field:#0B3D2E;
  --c-field-deep:#072A20;
  --c-teal:#00E5C3;
  --c-orange:#FF6B35;
  --c-amber:#FFB020;
  --c-paper:#F4F7F5;
  --c-mute:#7FA79B;
  --c-mute-ink:#3A6157;
  --c-line:#16342B;
  --c-ink:#04140F;
  --c-white:#FFFFFF;

  /* 字体 */
  --font-display:"DIN Condensed","Oswald","Arial Narrow","PingFang SC","Hiragino Sans GB","Source Han Sans SC","Noto Sans SC","Microsoft YaHei",sans-serif;
  --font-body:"PingFang SC","Hiragino Sans GB","Source Han Sans SC","Noto Sans SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --font-num:"DIN Alternate","Roboto Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* 字号 */
  --fs-display:clamp(48px,8vw,96px);
  --fs-title:clamp(26px,3.4vw,44px);
  --fs-h3:20px;
  --fs-body:16px;
  --fs-sm:14px;
  --fs-note:12px;
  --lh-body:1.75;

  /* 尺度 */
  --cut:12px;
  --wrap:1360px;
  --gut:clamp(20px,4vw,56px);
  --sec-gap:clamp(72px,10vw,160px);
  --bp-size:72px;
  --dur:.24s;
  --ease:cubic-bezier(.2,.7,.3,1);
  --grid-line:rgba(22,52,43,.95);
}

body{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--c-paper);
  background-color:var(--c-field);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

:focus-visible{outline:2px solid var(--c-teal);outline-offset:2px;}

/* ---------- 工具类 ---------- */
.wrap{
  width:min(var(--wrap),calc(100% - (var(--gut) * 2)));
  margin-inline:auto;
}
.blueprint{
  background-image:
    linear-gradient(to right,var(--grid-line) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid-line) 1px,transparent 1px);
  background-size:var(--bp-size) var(--bp-size);
}
.cut{
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%);
}
.hairline{border-top:1px solid var(--c-line);}
.stack > * + *{margin-top:var(--stack,16px);}
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.idx{
  font-family:var(--font-num);
  font-size:var(--fs-note);
  letter-spacing:.16em;
  color:var(--c-teal);
}
.note{
  font-size:var(--fs-note);
  line-height:1.6;
  letter-spacing:.06em;
  color:var(--c-mute);
}
.note--vertical{
  writing-mode:vertical-rl;
  text-orientation:mixed;
  letter-spacing:.32em;
  line-height:1;
}
.num{
  font-family:var(--font-num);
  font-variant-numeric:tabular-nums;
  font-weight:700;
  letter-spacing:-.01em;
}
.score{
  font-family:var(--font-num);
  font-variant-numeric:tabular-nums;
  font-weight:700;
  font-size:1.35em;
  line-height:1;
  color:var(--c-white);
}

/* ---------- 通用布局 ---------- */
.section{position:relative;padding-block:var(--sec-gap);}
.prose{max-width:38em;}
.prose p + p{margin-top:1em;}
.grid-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(16px,2vw,28px);}
.zone--paper{background:var(--c-paper);color:#0B1F19;}
.zone--paper .note{color:var(--c-mute-ink);}
.zone--paper .sec-head__idx{color:var(--c-mute-ink);}
.zone--paper .hairline,.zone--paper .sec-head{border-color:rgba(11,61,46,.18);}

.sec-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  padding-bottom:14px;
  border-bottom:1px solid var(--c-line);
  margin-bottom:clamp(24px,3vw,40px);
}
.sec-head__title{
  font-family:var(--font-display);
  font-size:var(--fs-title);
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.1;
}

/* ---------- 面板 / 卡片 ---------- */
.panel{
  position:relative;
  background:var(--c-field-deep);
  border:1px solid var(--c-line);
  padding:clamp(20px,2.4vw,32px);
}
.panel--cut{
  border:0;
  box-shadow:inset 0 0 0 1px var(--c-line);
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%);
}
.card{
  position:relative;
  background:var(--c-field-deep);
  padding:18px 20px;
  box-shadow:inset 0 0 0 1px var(--c-line);
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%);
}

/* ---------- 按钮 / 筛选胶囊 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:13px 22px;
  font-family:var(--font-display);
  font-size:var(--fs-sm);
  letter-spacing:.06em;
  color:var(--c-paper);
  background:transparent;
  border:1px solid var(--c-teal);
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.btn:hover{background:var(--c-teal);color:var(--c-ink);}
.btn--solid{background:var(--c-orange);border-color:var(--c-orange);color:var(--c-ink);}
.btn--solid:hover{background:var(--c-amber);border-color:var(--c-amber);}
.btn--ghost{border-color:var(--c-line);color:var(--c-mute);}
.btn--ghost:hover{background:var(--c-line);color:var(--c-paper);}
.btn:focus-visible,.chip:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--c-teal);}

.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  font-size:var(--fs-note);
  letter-spacing:.1em;
  color:var(--c-mute);
  background:transparent;
  border:1px solid var(--c-line);
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%);
  transition:background-color .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.chip:hover{color:var(--c-paper);border-color:var(--c-mute);}
.chip[aria-pressed="true"]{
  background:var(--c-teal);
  border-color:var(--c-teal);
  color:var(--c-ink);
  font-weight:700;
}

/* ---------- 面包屑 ---------- */
.crumbs{font-size:var(--fs-note);letter-spacing:.08em;color:var(--c-mute);}
.crumbs__list{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.crumbs__item{display:inline-flex;align-items:center;gap:8px;}
.crumbs__link{border-bottom:1px solid transparent;transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);}
.crumbs__link:hover{color:var(--c-teal);border-bottom-color:var(--c-teal);}
.crumbs__sep{color:var(--c-line);}
.crumbs__current{color:var(--c-paper);}

/* ---------- 数据表 ---------- */
.dtable{font-size:var(--fs-sm);}
.dtable caption{
  text-align:left;
  font-size:var(--fs-note);
  letter-spacing:.14em;
  color:var(--c-mute);
  padding-bottom:10px;
}
.dtable th{
  font-weight:400;
  font-size:var(--fs-note);
  letter-spacing:.14em;
  color:var(--c-mute);
  text-align:left;
  padding:10px 12px;
  border-bottom:1px solid var(--c-line);
  white-space:nowrap;
}
.dtable td{
  padding:12px;
  border-bottom:1px solid var(--c-line);
  vertical-align:baseline;
}
.dtable tbody tr:nth-child(odd){background:var(--c-ink);}
.dtable td.is-num{font-family:var(--font-num);font-variant-numeric:tabular-nums;}

/* ---------- 图片容器基础规则 ---------- */
.media{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:16 / 9;
  overflow:hidden;
  background:var(--c-ink);
  border:1px solid var(--c-line);
}
.media > img,
.media > picture{width:100%;height:100%;}
.media > img,
.media > picture > img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s var(--ease);
}
.media--wide{aspect-ratio:21 / 9;}
.media--tall{aspect-ratio:4 / 5;}
.media--square{aspect-ratio:1 / 1;}
.media--cut{
  border:0;
  box-shadow:inset 0 0 0 1px var(--c-line);
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%);
}
.media__tag{
  position:absolute;
  left:0;
  bottom:0;
  padding:6px 12px;
  font-size:11px;
  letter-spacing:.14em;
  background:var(--c-ink);
  color:var(--c-teal);
}

/* ---------- 跳至主要内容 ---------- */
.skip-link{
  position:fixed;
  left:16px;
  top:-120px;
  z-index:400;
  padding:12px 18px;
  font-size:var(--fs-sm);
  background:var(--c-teal);
  color:var(--c-ink);
  transition:top .18s var(--ease);
}
.skip-link:focus{top:16px;}

/* ==========================================================================
   头部：作为页面图纸的上边框
   ========================================================================== */
.site-head{
  position:sticky;
  top:0;
  z-index:120;
  background:var(--c-field);
  border-bottom:1px solid var(--c-line);
}
.site-head__grid{
  position:absolute;
  inset:0;
  opacity:.5;
  pointer-events:none;
}
.site-head__inner{
  position:relative;
  z-index:2;
  width:min(var(--wrap),calc(100% - (var(--gut) * 2)));
  margin-inline:auto;
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:"brand nav status";
  align-items:center;
  gap:clamp(16px,2.4vw,44px);
  min-height:78px;
}

/* 品牌 */
.brand{
  grid-area:brand;
  display:inline-flex;
  align-items:center;
  gap:12px;
}
.brand__mark{
  flex:0 0 26px;
  width:26px;
  height:26px;
  background:var(--c-teal);
  clip-path:polygon(0 0,100% 0,100% 62%,62% 100%,0 100%);
  transition:background-color var(--dur) var(--ease);
}
.brand:hover .brand__mark{background:var(--c-orange);}
.brand__text{display:flex;flex-direction:column;line-height:1.22;}
.brand__name{
  font-family:var(--font-display);
  font-size:21px;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--c-paper);
}
.brand__sub{
  font-size:11px;
  letter-spacing:.14em;
  color:var(--c-mute);
}

/* 导航 */
.nav{grid-area:nav;justify-self:center;}
.nav__list{
  display:flex;
  align-items:center;
  gap:clamp(6px,1.8vw,26px);
}
.nav__item{display:block;}
.nav__link{
  position:relative;
  display:block;
  padding:10px 2px;
  font-family:var(--font-display);
  font-size:15px;
  letter-spacing:.06em;
  color:var(--c-paper);
  white-space:nowrap;
  transition:color var(--dur) var(--ease);
}
.nav__link::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:2px;
  height:2px;
  background:var(--c-teal);
  transform:scaleX(0);
  transform-origin:0 50%;
  transition:transform var(--dur) var(--ease);
}
.nav__link:hover{color:var(--c-teal);}
.nav__link:hover::after,
.nav__link:focus-visible::after{transform:scaleX(1);}
.nav__link[aria-current="page"]{color:var(--c-teal);}
.nav__link[aria-current="page"]::after{transform:scaleX(1);background:var(--c-teal);}

/* 状态区 */
.head-status{
  grid-area:status;
  display:flex;
  align-items:center;
  gap:16px;
  font-size:var(--fs-note);
  letter-spacing:.08em;
  color:var(--c-mute);
}
.head-status__date{
  font-family:var(--font-num);
  color:var(--c-paper);
  letter-spacing:.06em;
  white-space:nowrap;
}
.head-status__league{
  padding-bottom:2px;
  border-bottom:1px solid var(--c-teal);
  color:var(--c-paper);
  transition:color var(--dur) var(--ease);
}
.head-status__league:hover{color:var(--c-teal);}
.head-status__count{white-space:nowrap;}
.head-status__count b{
  font-family:var(--font-num);
  font-size:15px;
  color:var(--c-teal);
  padding-inline:2px;
}

/* 移动导航按钮 */
.nav-toggle{
  grid-area:toggle;
  display:none;
  align-items:center;
  gap:10px;
  padding:9px 4px;
  color:var(--c-paper);
}
.nav-toggle__box{display:grid;gap:6px;width:22px;}
.nav-toggle__bar{
  display:block;
  height:2px;
  width:100%;
  background:var(--c-teal);
  transition:transform var(--dur) var(--ease);
}
.nav-toggle__label{
  font-size:var(--fs-note);
  letter-spacing:.16em;
  color:var(--c-mute);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:first-child{transform:translateY(4px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:last-child{transform:translateY(-4px) rotate(-45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle__label{color:var(--c-teal);}

/* 滚动进度：头部下沿的一条细线 */
.head-progress{
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  overflow:hidden;
  pointer-events:none;
}
.head-progress__bar{
  display:block;
  width:100%;
  height:100%;
  background:linear-gradient(90deg,var(--c-teal) 0%,var(--c-amber) 78%,var(--c-orange) 100%);
  transform:scaleX(0);
  transform-origin:0 50%;
}

/* ==========================================================================
   页脚：斜线轨迹 + 索引区
   ========================================================================== */
.site-foot{
  position:relative;
  background:var(--c-field-deep);
  color:var(--c-paper);
  border-top:1px solid var(--c-line);
  padding-bottom:clamp(24px,3vw,44px);
}
.site-foot__rule{
  position:relative;
  display:block;
  height:56px;
  overflow:hidden;
}
.site-foot__rule::before{
  content:"";
  position:absolute;
  left:-4%;
  top:30px;
  width:108%;
  height:1px;
  background:var(--c-line);
  transform:rotate(-2.2deg);
}
.site-foot__rule::after{
  content:"";
  position:absolute;
  left:0;
  top:20px;
  width:min(220px,22%);
  height:3px;
  background:var(--c-orange);
  transform:rotate(-2.2deg);
}
.site-foot__inner{
  width:min(var(--wrap),calc(100% - (var(--gut) * 2)));
  margin-inline:auto;
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.6fr;
  gap:clamp(24px,3vw,52px);
  padding-top:clamp(24px,3vw,40px);
}
.site-foot__brand{display:flex;flex-direction:column;gap:14px;}
.site-foot__brand .brand__name{font-size:22px;}
.site-foot__brand .brand__sub{color:var(--c-mute);}
.site-foot__line{
  font-family:var(--font-display);
  font-size:15px;
  letter-spacing:.08em;
  color:var(--c-teal);
}
.site-foot__brand .note{max-width:30em;}

.foot-title{
  font-family:var(--font-display);
  font-size:var(--fs-note);
  font-weight:700;
  letter-spacing:.24em;
  color:var(--c-mute);
  padding-bottom:12px;
  margin-bottom:14px;
  border-bottom:1px solid var(--c-line);
}
.foot-nav__list{display:grid;gap:4px;}
.foot-nav__item{display:flex;align-items:baseline;gap:12px;}
.foot-nav__no{
  font-family:var(--font-num);
  font-size:11px;
  letter-spacing:.12em;
  color:var(--c-mute);
}
.foot-nav__link{
  font-size:var(--fs-sm);
  color:var(--c-paper);
  padding:4px 0;
  border-bottom:1px solid transparent;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.foot-nav__link:hover{color:var(--c-teal);border-bottom-color:var(--c-teal);}

.foot-util{display:flex;flex-direction:column;align-items:flex-start;}
.foot-link{
  display:inline-block;
  font-family:inherit;
  font-size:var(--fs-sm);
  line-height:1.6;
  text-align:left;
  color:var(--c-paper);
  background:none;
  border:0;
  border-bottom:1px solid transparent;
  padding:5px 0;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.foot-link:hover{color:var(--c-teal);border-bottom-color:var(--c-teal);}
.foot-link[aria-pressed="true"]{color:var(--c-teal);}

.foot-contact__list{display:grid;gap:8px;margin-bottom:14px;}
.foot-contact__row{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:baseline;}
.foot-contact__k{
  font-size:11px;
  letter-spacing:.18em;
  color:var(--c-mute);
  white-space:nowrap;
}
.foot-contact__v{font-size:var(--fs-sm);color:var(--c-paper);word-break:break-word;}
.site-foot__base{
  width:min(var(--wrap),calc(100% - (var(--gut) * 2)));
  margin-inline:auto;
  margin-top:clamp(28px,3.4vw,48px);
  padding-top:16px;
  border-top:1px solid var(--c-line);
  display:flex;
  flex-wrap:wrap;
  gap:10px 28px;
  justify-content:space-between;
}
.site-foot__meta{
  font-size:var(--fs-note);
  letter-spacing:.08em;
  color:var(--c-mute);
}

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

/* ==========================================================================
   响应式
   ========================================================================== */
@media (max-width:1180px){
  .head-status__date{display:none;}
  .nav__list{gap:14px;}
}

@media (max-width:999px){
  .site-head{position:relative;}
  .site-head__inner{
    grid-template-columns:1fr auto;
    grid-template-areas:
      "brand toggle"
      "status status"
      "nav nav";
    row-gap:0;
    padding-top:14px;
    min-height:0;
  }
  .brand{padding-bottom:12px;}
  .nav-toggle{display:inline-flex;align-self:flex-start;margin-top:2px;}
  .head-status{
    width:100%;
    justify-content:space-between;
    gap:10px;
    padding:11px 0 12px;
    border-top:1px solid var(--c-line);
  }
  .head-status__date{display:inline-block;}
  .nav{
    justify-self:stretch;
    background:var(--c-ink);
    max-height:0;
    overflow:hidden;
    transition:max-height .3s var(--ease);
  }
  .nav[data-open]{
    max-height:76vh;
    overflow-y:auto;
    border-top:1px solid var(--c-line);
  }
  .nav__list{
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:6px 0 16px;
  }
  .nav__link{
    padding:15px 0;
    font-size:18px;
    border-bottom:1px solid var(--c-line);
  }
  .nav__link::after{display:none;}
  .nav__link[aria-current="page"]{
    color:var(--c-teal);
    padding-left:14px;
    border-left:2px solid var(--c-teal);
  }
  .foot-inner{grid-template-columns:1fr;}
  .site-foot__inner{grid-template-columns:1fr 1fr;}
  .site-foot__brand{grid-column:1 / -1;}
}

@media (max-width:640px){
  :root{--bp-size:48px;--sec-gap:64px;}
  .nav__link{font-size:16px;}
  .head-status{flex-wrap:wrap;}
  .site-foot__inner{grid-template-columns:1fr;}
  .site-foot__rule{height:42px;}
  .site-foot__rule::before{top:24px;}
  .site-foot__rule::after{top:15px;width:38%;}
  .site-foot__base{flex-direction:column;gap:8px;}
}

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