/* =========================================================
   谈球吧官网 · 共享样式表 /assets/site.css
   堆叠面板 · 居中刊头 · 沙金细线赛程墙
   ========================================================= */

/* ---------- 1. reset ---------- */
*,
*::before,
*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body,
h1,h2,h3,h4,h5,p,figure,blockquote,dl,dd,ul,ol{ margin:0; }
ul,ol{ padding:0; list-style:none; }
img,svg,video{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; letter-spacing:inherit; }
a{ color:inherit; text-decoration:none; }
table{ border-collapse:collapse; }
hr{ border:0; }

/* ---------- 2. tokens ---------- */
:root{
  --ink:#08231D;
  --ink-deep:#031512;
  --panel:#103C32;
  --panel-2:#1B4B40;
  --gold:#C8A96E;
  --gold-soft:#E8D9B5;
  --orange:#FF6A1A;
  --orange-hi:#FF823F;
  --paper:#F3EFE4;
  --muted:#7D948A;
  --teal:#2FA58C;
  --teal-soft:#6FD6BD;

  --line:rgba(200,169,110,.26);
  --line-strong:rgba(200,169,110,.52);
  --line-soft:rgba(200,169,110,.14);
  --wash:rgba(200,169,110,.08);

  --font-display:"Barlow Condensed","DIN Condensed","Noto Sans SC","Source Han Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --font-body:"Noto Sans SC","Source Han Sans SC","PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --font-mono:"IBM Plex Mono","JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --shell:1360px;
  --gutter:clamp(16px,4vw,40px);
  --step-0:17px;
  --ease:cubic-bezier(.2,.6,.2,1);
}

/* ---------- 3. base / 中文排版 ---------- */
body{
  min-height:100vh;
  background-color:var(--ink);
  background-image:
    linear-gradient(to right, rgba(200,169,110,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(200,169,110,.05) 1px, transparent 1px);
  background-size:96px 96px, 96px 96px;
  color:var(--paper);
  font-family:var(--font-body);
  font-size:var(--step-0);
  font-weight:400;
  line-height:1.75;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection{
  background:var(--orange);
  color:var(--ink-deep);
}

:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--orange);
  outline-offset:2px;
  border-radius:0;
}

.mono{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:.05em;
}

.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ---------- 4. skip link ---------- */
.skip-link{
  position:fixed;
  top:10px;left:10px;
  z-index:200;
  transform:translateY(-240%);
  background:var(--orange);
  color:var(--ink-deep);
  font-family:var(--font-body);
  font-size:14px;
  font-weight:600;
  line-height:1;
  padding:13px 20px;
  border:1px solid var(--ink-deep);
  transition:transform .14s var(--ease);
}
.skip-link:focus,
.skip-link:focus-visible{
  transform:none;
  outline:2px solid var(--gold-soft);
  outline-offset:2px;
}

/* ---------- 5. site header ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:60;
  background:var(--ink);
  border-top:1px solid var(--line-soft);
}

.header-utility{
  display:grid;
  grid-template-rows:1fr;
  background:var(--ink-deep);
  border-bottom:1px solid var(--line-soft);
  opacity:1;
  transition:grid-template-rows .18s var(--ease), opacity .18s var(--ease);
}
.site-header[data-condensed="true"] .header-utility{
  grid-template-rows:0fr;
  opacity:0;
}

.header-utility__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:0;
  overflow:hidden;
  padding-block:8px;
}

.header-utility__note{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:12px;
  line-height:1.4;
  letter-spacing:.06em;
  color:var(--muted);
}

.header-utility__links{
  display:flex;
  align-items:center;
  gap:8px;
  flex:none;
}

.utility-link{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:0 10px;
  font-size:12px;
  font-family:var(--font-mono);
  letter-spacing:.08em;
  color:var(--gold-soft);
  border:1px solid transparent;
  transition:color .15s var(--ease), border-color .15s var(--ease), background-color .15s var(--ease);
}
.utility-link:hover{
  color:var(--paper);
  border-color:var(--line-strong);
}

.utility-link--accent{
  background:var(--orange);
  border-color:var(--orange);
  color:var(--ink-deep);
  font-weight:600;
}
.utility-link--accent:hover{
  background:var(--orange-hi);
  border-color:var(--orange-hi);
  color:var(--ink-deep);
}

/* 居中报头 */
.masthead{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:16px;
  padding-block:22px 16px;
  border-bottom:1px solid var(--line-soft);
}

.masthead__aside{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:12px;
  line-height:1.5;
  color:var(--muted);
}
.masthead__aside--end{ text-align:right; }

.masthead__brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding-inline:8px;
  text-align:center;
}

.masthead__brand-cn{
  font-family:var(--font-display);
  font-size:clamp(34px,5vw,52px);
  font-weight:800;
  line-height:1;
  letter-spacing:.08em;
  color:var(--paper);
  transition:font-size .18s var(--ease);
}
.masthead__brand:hover .masthead__brand-cn{ color:var(--gold-soft); }

.masthead__brand-en{
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:400;
  line-height:1;
  letter-spacing:.38em;
  color:var(--gold);
}

.site-header[data-condensed="true"] .masthead{ padding-block:10px 8px; }
.site-header[data-condensed="true"] .masthead__brand-cn{ font-size:clamp(24px,3.2vw,32px); }
.site-header[data-condensed="true"] .masthead__aside{ opacity:0; }

.masthead__aside{ transition:opacity .18s var(--ease); }

/* 栏目索引 */
.navbar{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  border-top:1px solid var(--line);
}

.navbar__label{
  position:absolute;
  left:var(--gutter);
  top:50%;
  transform:translateY(-50%);
  font-size:11px;
  letter-spacing:.24em;
  color:var(--muted);
  pointer-events:none;
}

.nav-toggle{
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  min-height:48px;
  padding:0;
  background:transparent;
  border:0;
  color:var(--gold-soft);
  cursor:pointer;
  text-align:left;
}
.nav-toggle__text{
  font-size:12px;
  letter-spacing:.2em;
}
.nav-toggle__bars{
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  width:22px;
  height:22px;
  flex:none;
}
.nav-toggle__bar{
  display:block;
  width:22px;
  height:1px;
  background:var(--gold);
  transition:transform .16s var(--ease), opacity .16s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:first-child{ transform:translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

.site-nav{ display:flex; justify-content:center; }

.nav-list{
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap:clamp(2px,1.6vw,26px);
  flex-wrap:wrap;
}

.nav-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:52px;
  padding:0 10px;
  font-size:clamp(13px,1.15vw,15px);
  letter-spacing:.06em;
  color:var(--gold-soft);
  transition:color .15s var(--ease);
}
.nav-link::after{
  content:"";
  position:absolute;
  left:10px;right:10px;bottom:12px;
  height:1px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .16s var(--ease), background-color .16s var(--ease);
}
.nav-link:hover{ color:var(--paper); }
.nav-link:hover::after{ transform:scaleX(1); }

.nav-link[aria-current="page"]{
  color:var(--paper);
  font-weight:600;
}
.nav-link[aria-current="page"]::after{
  height:2px;
  background:var(--orange);
  transform:scaleX(1);
}

/* 阅读进度线 */
.scroll-meter{
  height:2px;
  background:var(--line-soft);
  overflow:hidden;
}
.scroll-meter__bar{
  display:block;
  width:0;
  height:100%;
  background:linear-gradient(to right, var(--gold), var(--orange));
  transition:width .16s linear;
}

/* ---------- 6. site footer ---------- */
.site-footer{
  margin-top:clamp(48px,7vw,96px);
  background:var(--ink-deep);
  border-top:1px solid var(--line-strong);
  color:var(--paper);
}

.footer-top{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);
  gap:clamp(28px,4vw,64px);
  padding-block:clamp(36px,5vw,64px) clamp(28px,4vw,48px);
}

.footer-brand__mark{
  font-family:var(--font-display);
  font-size:clamp(30px,3.6vw,40px);
  font-weight:800;
  line-height:1;
  letter-spacing:.08em;
  color:var(--paper);
}

.footer-brand__line{
  margin-top:10px;
  font-family:var(--font-mono);
  font-size:12px;
  line-height:1.7;
  letter-spacing:.04em;
  color:var(--gold);
}

.footer-brand__note{
  margin-top:14px;
  max-width:34ch;
  font-size:15px;
  line-height:1.75;
  color:rgba(243,239,228,.78);
}

.footer-brand__cta{ margin-top:20px; }

.footer-cols{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2.4vw,32px);
}

.footer-col__title{
  margin-bottom:10px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.24em;
  color:var(--gold);
}

.footer-col__list{
  display:grid;
  gap:2px;
}

.footer-link{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  font-size:15px;
  color:rgba(243,239,228,.82);
  border-bottom:1px solid transparent;
  transition:color .15s var(--ease), border-color .15s var(--ease);
}
.footer-link:hover{
  color:var(--paper);
  border-bottom-color:var(--gold);
}

.footer-contact{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(20px,3vw,36px);
  padding-block:clamp(24px,3.5vw,40px);
  border-top:1px solid var(--line);
}

.contact-item{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
}

.contact-item__label{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.2em;
  color:var(--muted);
}

.contact-item__value{
  font-size:15px;
  line-height:1.7;
  color:var(--paper);
}

.contact-item__note{
  font-size:13px;
  line-height:1.65;
  color:var(--muted);
  max-width:36ch;
}

.copy-btn{
  display:inline-flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  min-height:44px;
  max-width:100%;
  padding:8px 12px;
  background:transparent;
  border:1px solid var(--line-strong);
  color:var(--paper);
  cursor:pointer;
  text-align:left;
  transition:border-color .15s var(--ease), background-color .15s var(--ease);
}
.copy-btn:hover{
  border-color:var(--gold);
  background:var(--wash);
}

.copy-btn__value{
  font-family:var(--font-mono);
  font-size:14px;
  line-height:1.4;
  letter-spacing:.02em;
  word-break:break-all;
}

.copy-btn__hint{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  color:var(--gold);
}
.copy-btn[data-copied="true"] .copy-btn__hint{ color:var(--teal-soft); }

.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px 24px;
  padding-block:16px 28px;
  border-top:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:12px;
  line-height:1.6;
  letter-spacing:.04em;
  color:var(--muted);
}
.footer-legal{ color:var(--gold-soft); }

/* ---------- 7. 通用按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:46px;
  padding:11px 20px;
  background:transparent;
  border:1px solid var(--gold);
  color:var(--paper);
  font-family:var(--font-body);
  font-size:15px;
  font-weight:600;
  letter-spacing:.04em;
  line-height:1.2;
  cursor:pointer;
  transition:background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.btn:hover{ background:var(--wash); }

.btn--ghost{
  border-color:var(--line-strong);
  font-weight:500;
  color:var(--gold-soft);
}
.btn--ghost:hover{
  border-color:var(--gold);
  color:var(--paper);
}

.btn--primary{
  background:var(--orange);
  border-color:var(--orange);
  color:var(--ink-deep);
  font-weight:700;
}
.btn--primary:hover{
  background:var(--orange-hi);
  border-color:var(--orange-hi);
  color:var(--ink-deep);
}

.btn__arrow{
  display:inline-block;
  font-family:var(--font-mono);
  transition:transform .16s var(--ease);
}
.btn:hover .btn__arrow{ transform:translateX(4px); }

/* ---------- 8. 面包屑 ---------- */
.breadcrumbs{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--muted);
}
.breadcrumbs a{ border-bottom:1px solid transparent; }
.breadcrumbs a:hover{
  color:var(--gold-soft);
  border-bottom-color:var(--gold);
}
.breadcrumbs__sep{
  color:rgba(200,169,110,.55);
}
.breadcrumbs [aria-current="page"]{ color:var(--gold-soft); }

/* ---------- 9. 堆叠面板 ---------- */
.panel{
  position:relative;
  background:var(--panel);
  border:1px solid var(--line);
  padding:clamp(18px,2.6vw,32px);
}

.panel--flat{ background:var(--panel-2); }

.panel--hover{
  transition:transform .16s var(--ease), border-color .16s var(--ease);
}
.panel--hover:hover{
  transform:translateY(-2px);
  border-color:var(--line-strong);
}

.panel__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px 16px;
  padding-bottom:12px;
  margin-bottom:18px;
  border-bottom:1px solid var(--line);
}

.panel__title{
  font-family:var(--font-display);
  font-size:clamp(20px,2.4vw,26px);
  font-weight:700;
  line-height:1.2;
  letter-spacing:.02em;
  color:var(--paper);
}

.section-rule{
  height:1px;
  border:0;
  margin:clamp(28px,4vw,48px) 0;
  background:linear-gradient(to right, var(--gold) 0 72px, var(--line) 72px 100%);
}

.eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.22em;
  line-height:1.4;
  color:var(--gold);
}
.eyebrow::before{
  content:"";
  flex:none;
  width:24px;
  height:1px;
  background:var(--orange);
}

/* ---------- 10. 标签与状态 ---------- */
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border:1px solid var(--line-strong);
  font-family:var(--font-mono);
  font-size:11px;
  line-height:1.4;
  letter-spacing:.14em;
  color:var(--gold-soft);
}
.tag--live{
  border-color:var(--orange);
  color:var(--orange);
}
.tag--ok{
  border-color:rgba(47,165,140,.6);
  color:var(--teal-soft);
}

.status-dot{
  display:inline-block;
  flex:none;
  width:7px;
  height:7px;
  background:var(--orange);
}
.status-dot--ok{ background:var(--teal); }

/* ---------- 11. 网格 ---------- */
.grid{
  display:grid;
  gap:clamp(16px,2.4vw,28px);
}
.grid--7-5{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
.grid--8-4{ grid-template-columns:minmax(0,8fr) minmax(0,4fr); }
.grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }

/* ---------- 12. 响应式图片容器 ---------- */
.media{
  position:relative;
  display:block;
  overflow:hidden;
  background:var(--panel-2);
  border:1px solid var(--line);
}
.media img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.92) contrast(1.02);
}
.media--wide{ aspect-ratio:16 / 9; }
.media--tall{ aspect-ratio:3 / 4; }
.media--square{ aspect-ratio:1 / 1; }

.media__caption{
  margin-top:8px;
  font-family:var(--font-mono);
  font-size:12px;
  line-height:1.6;
  letter-spacing:.06em;
  color:var(--muted);
}

.media__badge{
  position:absolute;
  left:0;
  bottom:0;
  padding:6px 10px;
  background:var(--ink-deep);
  border-top:1px solid var(--orange);
  border-right:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  color:var(--gold-soft);
}

/* ---------- 13. 长文 ---------- */
.prose{ max-width:76ch; }
.prose h2{
  font-family:var(--font-display);
  font-size:clamp(26px,3.4vw,38px);
  font-weight:700;
  line-height:1.16;
  letter-spacing:.02em;
  margin:1.6em 0 .6em;
}
.prose h3{
  font-size:clamp(18px,2.1vw,21px);
  font-weight:600;
  line-height:1.35;
  margin:1.5em 0 .5em;
  color:var(--gold-soft);
}
.prose p{ margin:0 0 1.1em; }
.prose a{
  color:var(--gold-soft);
  border-bottom:1px solid var(--line-strong);
}
.prose a:hover{
  color:var(--paper);
  border-bottom-color:var(--orange);
}
.prose ul,
.prose ol{
  display:grid;
  gap:8px;
  margin:0 0 1.2em;
}
.prose ul li{
  position:relative;
  padding-left:18px;
}
.prose ul li::before{
  content:"";
  position:absolute;
  left:0;
  top:.78em;
  width:8px;
  height:1px;
  background:var(--gold);
}
.prose ol{ counter-reset:item; }
.prose ol li{
  counter-increment:item;
  padding-left:26px;
  position:relative;
  font-family:inherit;
}
.prose ol li::before{
  content:counter(item,decimal-leading-zero);
  position:absolute;
  left:0;
  top:.1em;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--gold);
}
.prose strong{ font-weight:600; color:var(--paper); }
.prose code{
  font-family:var(--font-mono);
  font-size:.92em;
  padding:1px 5px;
  background:var(--panel-2);
  border:1px solid var(--line-soft);
}

/* ---------- 14. 折叠披露 ---------- */
details{
  border-top:1px solid var(--line);
}
details:last-of-type{
  border-bottom:1px solid var(--line);
}
summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:52px;
  padding:8px 0;
  cursor:pointer;
  font-weight:600;
  color:var(--paper);
  list-style:none;
}
summary::-webkit-details-marker{ display:none; }
summary::after{
  content:"+";
  flex:none;
  font-family:var(--font-mono);
  font-size:16px;
  line-height:1;
  color:var(--gold);
}
details[open] > summary::after{ content:"–"; }
summary:hover{ color:var(--gold-soft); }

/* ---------- 15. 平板 ---------- */
@media (max-width:1080px){
  .navbar__label{ display:none; }
  .masthead__aside{ font-size:11px; }
  .footer-top{
    grid-template-columns:minmax(0,1fr);
  }
}

/* ---------- 16. 手机 ---------- */
@media (max-width:900px){
  :root{ --step-0:16px; }

  .header-utility__inner{
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
    padding-block:10px;
  }
  .header-utility__links{ width:100%; }

  .masthead{
    grid-template-columns:minmax(0,1fr);
    padding-block:14px 12px;
  }
  .masthead__aside{ display:none; }
  .masthead__brand-cn{ font-size:clamp(30px,9vw,40px); }
  .masthead__brand-en{ font-size:9px; letter-spacing:.3em; }

  .navbar{
    display:block;
    padding-block:0;
    border-top:1px solid var(--line);
  }
  .nav-toggle{ display:flex; }

  .site-nav{
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:100%;
    z-index:70;
    background:var(--ink-deep);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line-strong);
  }
  .site-nav[data-open="true"]{ display:block; }

  .nav-list{
    flex-direction:column;
    align-items:stretch;
    gap:0;
    flex-wrap:nowrap;
  }
  .nav-link{
    min-height:52px;
    width:100%;
    padding:0 var(--gutter);
    border-bottom:1px solid var(--line-soft);
    font-size:15px;
  }
  .nav-link::after{
    left:var(--gutter);
    right:auto;
    width:24px;
    bottom:14px;
  }

  .footer-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }

  .grid--7-5,
  .grid--8-4,
  .grid--2,
  .grid--3{ grid-template-columns:minmax(0,1fr); }

  .panel{ padding:18px; }
}

@media (max-width:560px){
  .footer-cols{ grid-template-columns:minmax(0,1fr); }
  .copy-btn{ width:100%; }
}

/* ---------- 17. 减少动态 ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,
  *::before,
  *::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
  .panel--hover:hover{ transform:none; }
  .btn:hover .btn__arrow{ transform:none; }
  .skip-link{ transition:none; }
  .scroll-meter__bar{ transition:none; }
}