/* ===== 0. reset ===== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0}
img,svg,video{display:block;max-width:100%}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,figure{margin:0}
table{border-collapse:collapse;width:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ===== 1. tokens ===== */
:root{
  --deep:#0B3C4A;
  --navy:#123A5A;
  --paper:#F7F3EA;
  --orange:#E86A33;
  --yellow:#F2C14E;
  --red:#C44536;
  --turquoise:#2A9D8F;
  --wine:#7B2D3A;
  --indigo:#3B2F63;
  --line:#D9E2E3;
  --ink:#1A2328;
  --font-display:"Noto Sans SC","Source Han Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --font-body:var(--font-display);
  --font-data:"IBM Plex Mono","JetBrains Mono","SFMono-Regular",ui-monospace,monospace;
  --header-h:78px;
  --gutter:clamp(18px,4vw,48px);
  --wrap:1200px;
  --radius:3px;
}

/* ===== 2. 中文排版基底 ===== */
body{
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.75;
  letter-spacing:.01em;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
.display{font-family:var(--font-display);font-weight:900;line-height:.98;letter-spacing:.02em}
.display--xl{font-size:clamp(3rem,7vw,7.5rem)}
.display--lg{font-size:clamp(2rem,4.4vw,3.6rem)}
.display--md{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:800;line-height:1.15}
.eyebrow{font-family:var(--font-data);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;opacity:.72}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:2px}
.section--paper :focus-visible,.plate :focus-visible{outline-color:var(--wine)}

/* ===== 3. 跳转与主容器 ===== */
.skip-link{
  position:absolute;top:8px;left:8px;z-index:200;
  padding:10px 16px;background:var(--paper);color:var(--deep);
  font-weight:800;font-size:.85rem;letter-spacing:.06em;text-decoration:none;
  border-radius:2px;transform:translateY(-180%);
  transition:transform .2s ease;
}
.skip-link:focus-visible{transform:translateY(0)}
#main-content{padding-block-start:var(--header-h)}
body[data-hero="true"] #main-content{padding-block-start:0}

/* ===== 4. 头部 ===== */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:90;
  background:var(--navy);color:var(--paper);
  border-bottom:1px solid rgba(247,243,234,.16);
  box-shadow:0 10px 30px rgba(11,60,74,.22);
  transition:background-color .32s ease, box-shadow .32s ease, border-color .32s ease;
}
body[data-hero="true"] .site-header[data-scrolled="false"]{
  background:transparent;
  border-bottom-color:rgba(247,243,234,.24);
  box-shadow:none;
}
.site-header[data-scrolled="true"]{background:var(--navy);box-shadow:0 12px 34px rgba(11,60,74,.34)}
.header-band{
  position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,
    var(--turquoise) 0 22%,var(--yellow) 22% 44%,var(--orange) 44% 66%,
    var(--red) 66% 84%,var(--indigo) 84% 100%);
  opacity:.92;
}
.header-inner{
  position:relative;
  width:100%;max-width:var(--wrap);margin-inline:auto;
  height:var(--header-h);
  padding:0 var(--gutter);
  display:flex;align-items:center;gap:clamp(12px,2vw,30px);
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--paper);flex:none}
.brand__flag{display:grid;gap:3px;width:24px;transform:rotate(-8deg)}
.brand__flag i{display:block;height:4px;border-radius:1px;background:var(--paper)}
.brand__flag i:nth-child(1){width:100%;background:var(--yellow)}
.brand__flag i:nth-child(2){width:76%;background:var(--orange)}
.brand__flag i:nth-child(3){width:52%;background:var(--turquoise)}
.brand__text{display:flex;flex-direction:column;gap:1px;line-height:1.15}
.brand__name{font-size:1.04rem;font-weight:800;letter-spacing:.08em}
.brand__tagline{font-family:var(--font-data);font-size:.6rem;letter-spacing:.2em;opacity:.72}
.nav{display:flex;align-items:center;margin-left:auto}
.nav__list{display:flex;align-items:center;gap:clamp(6px,1.1vw,18px)}
.nav__link{
  position:relative;display:flex;flex-direction:column;gap:2px;
  padding:10px 6px 13px;text-decoration:none;color:var(--paper);
  font-size:.86rem;font-weight:600;letter-spacing:.05em;line-height:1.1;
  transition:color .2s ease,transform .2s ease;
}
.nav__index{font-family:var(--font-data);font-size:.6rem;letter-spacing:.16em;color:var(--yellow);opacity:.82}
.nav__link::after{
  content:"";position:absolute;left:6px;right:6px;bottom:5px;height:3px;
  background:var(--orange);transform:scaleX(0);transform-origin:left;
  transition:transform .26s ease,background-color .26s ease;
}
.nav__link:hover,.nav__link:focus-visible{transform:translateY(-1px)}
.nav__link:hover::after,.nav__link:focus-visible::after{transform:scaleX(1)}
.nav__link[aria-current="page"]{color:#fff}
.nav__link[aria-current="page"] .nav__index{color:var(--orange);opacity:1}
.nav__link[aria-current="page"]::after{transform:scaleX(1);background:var(--yellow)}
.nav__foot{display:none}
.header-actions{display:flex;align-items:center;gap:10px;flex:none}
.nav-toggle{
  display:none;align-items:center;gap:9px;
  padding:9px 12px;border:1px solid rgba(247,243,234,.46);border-radius:2px;
  color:var(--paper);font-size:.78rem;font-weight:700;letter-spacing:.16em;
  transition:background-color .2s ease,border-color .2s ease;
}
.nav-toggle:hover{background:rgba(247,243,234,.14)}
.nav-toggle__bars{display:grid;gap:4px;width:18px}
.nav-toggle__bars span{display:block;height:2px;background:currentColor;transition:transform .24s ease,opacity .24s ease}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.scroll-rail{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(247,243,234,.18);overflow:hidden}
.scroll-rail__bar{
  display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--yellow),var(--orange),var(--turquoise));
  transition:transform .12s linear;
}
body.is-nav-open{overflow:hidden}

/* ===== 5. 按钮 ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 22px;border:1px solid transparent;border-radius:var(--radius);
  font-size:.92rem;font-weight:800;letter-spacing:.06em;line-height:1.2;
  text-decoration:none;cursor:pointer;
  transition:transform .2s ease,background-color .2s ease,color .2s ease,border-color .2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--orange);color:var(--ink);box-shadow:0 5px 0 -2px rgba(196,69,54,.42)}
.btn--solid{background:var(--paper);color:var(--deep)}
.btn--ghost{background:transparent;color:var(--paper);border-color:rgba(247,243,234,.52)}
.btn--ghost:hover{background:rgba(247,243,234,.14)}
.btn--sm{padding:9px 15px;font-size:.8rem;letter-spacing:.1em}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.section--paper .btn--ghost,.plate .btn--ghost{color:var(--deep);border-color:rgba(11,60,74,.42)}

/* ===== 6. 分区与容器 ===== */
.section{position:relative;padding:clamp(48px,7vw,96px) var(--gutter)}
.section--paper{background:var(--paper);color:var(--ink)}
.section--deep{background:var(--deep);color:var(--paper)}
.section--wine{background:var(--wine);color:#fff}
.section--indigo{background:var(--indigo);color:#fff}
.section--orange{background:var(--orange);color:var(--ink)}
.section--slant{padding-block-start:calc(clamp(48px,7vw,96px) + 2.6vw);clip-path:polygon(0 2.6vw,100% 0,100% 100%,0 100%)}
.section--deep .chapter-tag__no,.section--wine .chapter-tag__no{color:var(--yellow)}
.section--paper .chapter-tag__no,.section--orange .chapter-tag__no{color:var(--wine)}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto}
.wrap--narrow{max-width:900px}
.wrap--tight{max-width:720px}
.section__head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px;
  margin-bottom:clamp(24px,3.4vw,44px);
}
.divider{height:1px;border:0;margin:0;background:var(--line)}
.section--deep .divider,.section--wine .divider,.section--indigo .divider{background:rgba(247,243,234,.24)}

/* ===== 7. 展签 / 索引 / 徽标 ===== */
.chapter-tag{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-data);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
}
.chapter-tag::before{content:"";width:26px;height:2px;background:currentColor;opacity:.7}
.chapter-tag__no{color:var(--yellow);font-weight:600}
.badge{
  display:inline-block;padding:4px 10px;border-radius:999px;
  font-size:.7rem;font-weight:700;letter-spacing:.12em;line-height:1.5;
  background:var(--indigo);color:#fff;
}
.badge--yellow{background:var(--yellow);color:var(--ink)}
.badge--red{background:var(--red);color:#fff}
.badge--turquoise{background:var(--turquoise);color:#102026}
.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;font-family:var(--font-data);font-size:.74rem;letter-spacing:.1em;opacity:.86}
.breadcrumb__item+.breadcrumb__item::before{content:"/";margin-right:8px;opacity:.5}
.ledger{display:grid;border-top:1px solid var(--line)}
.ledger__row{
  display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:baseline;
  padding:14px 4px;text-decoration:none;color:inherit;
  border-bottom:1px solid var(--line);
  transition:background-color .2s ease,transform .2s ease;
}
.ledger__row:hover{background:rgba(232,106,51,.09);transform:translateX(4px)}
.ledger__no{font-family:var(--font-data);font-size:.72rem;letter-spacing:.12em;color:var(--red)}
.ledger__meta{font-family:var(--font-data);font-size:.72rem;letter-spacing:.06em;color:var(--deep);opacity:.7}
.steps{display:grid;gap:8px}
.steps__item{
  display:block;padding:15px 18px;text-decoration:none;color:inherit;
  background:rgba(247,243,234,.08);border-left:3px solid var(--yellow);
  transition:transform .22s ease,background-color .22s ease;
}
.steps__item:hover{transform:translateX(6px);background:rgba(247,243,234,.16)}
.steps__item:nth-child(2){margin-left:5%}
.steps__item:nth-child(3){margin-left:10%}
.steps__item:nth-child(4){margin-left:15%}
.steps__item:nth-child(5){margin-left:20%}
.steps__item:nth-child(6){margin-left:25%}

/* ===== 8. 数据与卡片 ===== */
.score-strip{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  padding:16px 20px;background:var(--navy);color:var(--paper);
  border-left:6px solid var(--orange);
}
.score-strip__team{font-weight:800;letter-spacing:.04em;font-size:.95rem}
.score-strip__team--away{text-align:right}
.score-strip__score{
  font-family:var(--font-data);font-weight:600;letter-spacing:.08em;
  font-size:clamp(1.3rem,3vw,2rem);color:var(--yellow);line-height:1;
}
.stat-card{background:var(--paper);color:var(--ink);border:1px solid var(--line);border-top:4px solid var(--orange);padding:16px 18px}
.stat-card__value{font-family:var(--font-data);font-weight:600;line-height:1.1;font-size:clamp(1.5rem,3vw,2.2rem);color:var(--deep)}
.stat-card__label{font-size:.72rem;letter-spacing:.16em;color:var(--wine);margin-top:6px}
.plate{
  position:relative;background:var(--paper);color:var(--ink);
  border:1px solid var(--line);padding:20px;
  box-shadow:7px 7px 0 -2px rgba(11,60,74,.14);
}
.plate__label{
  display:inline-block;margin-bottom:12px;padding:3px 9px;
  font-family:var(--font-data);font-size:.66rem;letter-spacing:.16em;
  background:var(--yellow);color:var(--ink);
}
.grid{display:grid;gap:clamp(16px,2.4vw,28px)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--split{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}

/* ===== 9. 图片容器基础规则 ===== */
.image-frame{
  position:relative;overflow:hidden;border-radius:var(--radius);
  background:linear-gradient(160deg,var(--navy),var(--deep));
  border:1px solid rgba(11,60,74,.16);
  width:100%;
}
.image-frame img{width:100%;height:100%;object-fit:cover}
.image-frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(247,243,234,.16) 1px,transparent 1px);
  background-size:4px 4px;opacity:.55;
}
.image-frame--wide{aspect-ratio:16/9}
.image-frame--portrait{aspect-ratio:3/4}
.image-frame--square{aspect-ratio:1/1}
.image-frame__caption{
  position:absolute;left:0;bottom:0;z-index:2;
  padding:8px 14px;background:rgba(11,60,74,.86);color:var(--paper);
  font-family:var(--font-data);font-size:.72rem;letter-spacing:.12em;
}
.image-frame__label{
  position:absolute;top:10px;left:10px;z-index:2;
  padding:4px 9px;background:var(--yellow);color:var(--ink);
  font-family:var(--font-data);font-size:.66rem;letter-spacing:.14em;
}

/* ===== 10. 正文 ===== */
.prose{max-width:68ch;font-size:1.02rem;line-height:1.8}
.prose>*+*{margin-top:1.1em}
.prose h2{font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:800;line-height:1.2;letter-spacing:.02em}
.prose h3{font-size:1.18rem;font-weight:700;line-height:1.3}
.prose a{text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:3px}
.prose strong{font-weight:800}
.prose ul{display:grid;gap:.5em}
.prose li{position:relative;padding-left:1.25em}
.prose li::before{content:"";position:absolute;left:0;top:.72em;width:9px;height:2px;background:var(--orange)}

/* ===== 11. 显现协议 ===== */
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
[data-reveal].is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  .btn:hover,.steps__item:hover,.ledger__row:hover{transform:none}
  .scroll-rail__bar{transition:none}
}

/* ===== 12. 页脚 ===== */
.site-footer{position:relative;background:var(--deep);color:var(--paper);overflow:hidden}
.footer-bunting{display:flex;height:10px}
.footer-bunting__flag{flex:1;clip-path:polygon(0 0,100% 0,calc(100% - 9px) 100%,0 100%)}
.footer-bunting__flag--turquoise{background:var(--turquoise)}
.footer-bunting__flag--yellow{background:var(--yellow)}
.footer-bunting__flag--orange{background:var(--orange)}
.footer-bunting__flag--red{background:var(--red)}
.footer-bunting__flag--indigo{background:var(--indigo)}
.footer-steps{
  position:absolute;right:0;bottom:0;z-index:0;
  display:flex;align-items:flex-end;gap:0;pointer-events:none;
}
.footer-steps span{display:block;background:rgba(247,243,234,.07)}
.footer-steps span:nth-child(1){width:38px;height:38px}
.footer-steps span:nth-child(2){width:38px;height:76px}
.footer-steps span:nth-child(3){width:38px;height:114px}
.footer-steps span:nth-child(4){width:38px;height:152px;background:rgba(247,243,234,.05)}
.footer-inner{
  position:relative;z-index:1;
  width:100%;max-width:var(--wrap);margin-inline:auto;
  padding:clamp(40px,6vw,72px) var(--gutter) clamp(28px,4vw,44px);
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.7fr);
  gap:clamp(26px,5vw,70px);
}
.footer-masthead{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.footer-brand{font-size:clamp(1.5rem,3.2vw,2.3rem);font-weight:900;letter-spacing:.05em;line-height:1.05}
.footer-motto{font-family:var(--font-data);font-size:.72rem;letter-spacing:.2em;color:var(--yellow)}
.footer-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,34px)}
.footer-col__title{
  margin-bottom:14px;font-family:var(--font-data);font-size:.68rem;letter-spacing:.2em;
  color:var(--turquoise);text-transform:uppercase;
}
.footer-list{display:grid;gap:9px}
.footer-list a{
  color:rgba(247,243,234,.84);text-decoration:none;font-size:.88rem;letter-spacing:.03em;
  border-bottom:1px solid transparent;
  transition:color .2s ease,border-color .2s ease,padding-left .2s ease;
}
.footer-list a:hover,.footer-list a:focus-visible{color:#fff;border-bottom-color:var(--orange);padding-left:4px}
.footer-base{
  position:relative;z-index:1;
  width:100%;max-width:var(--wrap);margin-inline:auto;
  padding:22px var(--gutter) 40px;
  border-top:1px solid rgba(247,243,234,.2);
  display:grid;gap:7px;
  font-size:.82rem;color:rgba(247,243,234,.78);
}
.footer-contact{font-family:var(--font-data);letter-spacing:.04em;font-size:.78rem}
.footer-note{font-size:.8rem;color:rgba(242,193,78,.92)}
.footer-legal{font-size:.78rem;letter-spacing:.05em;margin-top:6px}
.footer-icp{color:var(--paper);text-decoration:none;border-bottom:1px solid rgba(247,243,234,.4)}
.footer-icp:hover{border-bottom-color:var(--orange)}

/* ===== 13. 响应式 ===== */
@media (max-width:1024px){
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-inner{grid-template-columns:1fr;gap:32px}
}
@media (max-width:960px){
  :root{--header-h:64px}
  .brand__tagline{display:none}
  .header-actions .btn--solid{display:none}
  .nav-toggle{display:inline-flex}
  .nav{
    position:fixed;left:0;right:0;top:var(--header-h);bottom:0;
    display:block;margin:0;padding:24px var(--gutter) 44px;
    background:var(--deep);overflow-y:auto;
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .28s ease,transform .28s ease,visibility .28s ease;
  }
  .nav[data-open="true"]{opacity:1;visibility:visible;transform:none}
  .nav__list{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .nav__link{
    flex-direction:row;align-items:baseline;gap:14px;
    padding:16px 10px;font-size:clamp(1.1rem,5vw,1.45rem);font-weight:800;
    border-bottom:1px solid rgba(247,243,234,.14);
  }
  .nav__link::after{display:none}
  .nav__item:nth-child(2) .nav__link{padding-left:26px}
  .nav__item:nth-child(3) .nav__link{padding-left:42px}
  .nav__item:nth-child(4) .nav__link{padding-left:58px}
  .nav__item:nth-child(5) .nav__link{padding-left:74px}
  .nav__item:nth-child(6) .nav__link{padding-left:90px}
  .nav__foot{display:flex;flex-direction:column;gap:12px;margin-top:26px}
  .nav__foot .btn{width:100%}
  .grid--split{grid-template-columns:1fr}
}
@media (max-width:720px){
  body{font-size:16px}
  .grid--2,.grid--3{grid-template-columns:1fr}
  .footer-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-steps{display:none}
  .section--slant{padding-block-start:calc(clamp(48px,7vw,96px) + 5vw)}
  .score-strip{grid-template-columns:1fr;text-align:left;gap:8px}
  .score-strip__team--away{text-align:left}
}
@media (max-width:480px){
  .footer-cols{grid-template-columns:1fr}
  .brand__name{font-size:.94rem;letter-spacing:.05em}
}