/* ==========================================================================
   奇异果赛场 · 共享站点样式 /assets/site.css
   色彩：深墨绿 + 夜场墨 + 奇异果青绿 + 荧光黄绿 + 暖橙 + 奶油纸
   ========================================================================== */

:root{
  --ink:#0E2A22;
  --night:#081A15;
  --kiwi:#35C46A;
  --flesh:#8FE36B;
  --lime:#D8FF3E;
  --orange:#FF7A3D;
  --cream:#F6F0E2;
  --bone:#FFFDF6;
  --brown:#1E1712;
  --sage:#6F8A7E;
  --rule:#D9CDBB;
  --ember:#E44D2E;

  --wrap:1180px;
  --gutter:clamp(18px,4vw,56px);
  --cut:14px;

  --font-display:"Arial Narrow","Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC",sans-serif;
  --font-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Roboto Mono",monospace;
}

*,*::before,*::after{box-sizing:border-box;}

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

body{
  margin:0;
  background:var(--cream);
  color:var(--brown);
  font-family:var(--font-body);
  font-size:clamp(15px,0.5vw + 13.8px,17px);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4,p,figure,blockquote,ul,ol{margin:0;}
ul,ol{padding:0;}
img,svg{max-width:100%;display:block;}
button{font:inherit;color:inherit;}
a{color:inherit;}

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

:focus-visible{outline:3px solid var(--kiwi);outline-offset:3px;}
.site-header :focus-visible,
.site-footer :focus-visible{outline-color:var(--lime);}

.visually-hidden{
  position:absolute!important;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;
}

/* ---------- 基础容器 ---------- */
.wrap{
  width:min(100% - (2 * var(--gutter)),var(--wrap));
  margin-inline:auto;
}

.skip-link{
  position:fixed;top:12px;left:12px;z-index:200;
  transform:translateY(-180%);
  padding:11px 18px;
  background:var(--lime);color:var(--ink);
  font-weight:700;font-size:.9rem;letter-spacing:.04em;
  text-decoration:none;border-radius:2px;
  transition:transform .2s ease;
}
.skip-link:focus{transform:translateY(0);}

/* ---------- 页头：左右分置 + 胶囊轨道 ---------- */
.site-header{
  position:sticky;top:0;z-index:80;
  background:var(--ink);
  color:var(--bone);
  border-bottom:1px solid rgba(217,205,187,.22);
}

.site-header__inner{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:14px 22px;
  padding-block:13px;
}

.brand{
  order:1;
  display:flex;flex-direction:column;gap:3px;
  min-width:0;
  text-decoration:none;color:inherit;
}
.brand__mark{
  display:flex;align-items:center;gap:.45em;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.08rem,1.2vw + .82rem,1.45rem);
  letter-spacing:.02em;
  line-height:1;
  color:var(--bone);
}
.brand__mark::before{
  content:"";
  width:.62em;height:.62em;flex:0 0 auto;
  background:var(--kiwi);
  clip-path:polygon(50% 0,100% 34%,100% 66%,50% 100%,0 66%,0 34%);
}
.brand__note{
  padding-left:1.05em;
  font-family:var(--font-mono);
  font-size:.64rem;
  letter-spacing:.2em;
  color:var(--flesh);
  opacity:.85;
}

.nav-toggle{
  order:2;
  margin-left:auto;
  display:none;align-items:center;gap:9px;
  min-height:42px;padding:6px 13px;
  background:transparent;color:var(--bone);
  border:1px solid rgba(217,205,187,.36);
  border-radius:2px;
  cursor:pointer;
  transition:border-color .2s ease,background .2s ease;
}
.nav-toggle:hover{border-color:var(--lime);background:rgba(216,255,62,.08);}
.nav-toggle__bars{display:grid;gap:4px;width:18px;}
.nav-toggle__bars > span{display:block;height:2px;background:var(--lime);transition:transform .22s ease,opacity .22s 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);}
.nav-toggle__text{font-size:.76rem;font-weight:700;letter-spacing:.18em;}

.site-nav{
  order:3;
  display:flex;align-items:center;
  gap:clamp(14px,1.8vw,30px);
  margin-left:auto;
  min-width:0;
}

.nav-list{
  display:flex;align-items:center;
  gap:clamp(10px,1.4vw,24px);
  list-style:none;
}
.nav-link{
  position:relative;display:inline-block;
  padding:5px 1px;
  font-size:.9rem;font-weight:600;letter-spacing:.02em;
  color:rgba(255,253,246,.82);
  text-decoration:none;white-space:nowrap;
  transition:color .2s ease;
}
.nav-link::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;
  background:var(--kiwi);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .24s ease,background .24s ease;
}
.nav-link:hover,
.nav-link:focus-visible{color:var(--bone);}
.nav-link:hover::after,
.nav-link:focus-visible::after{transform:scaleX(1);}
.nav-link[aria-current="page"]{color:var(--lime);}
.nav-link[aria-current="page"]::after{transform:scaleX(1);height:3px;background:var(--lime);}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45em;
  min-height:44px;padding:0 20px;
  border:1px solid transparent;border-radius:2px;
  font-family:var(--font-body);
  font-size:.9rem;font-weight:700;letter-spacing:.03em;
  text-decoration:none;cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn--orange{background:var(--orange);color:var(--brown);}
.btn--orange:hover{background:#ff8f5c;color:var(--brown);}
.btn--ink{background:var(--ink);color:var(--bone);}
.btn--ink:hover{background:#154034;color:var(--bone);}
.btn--lime{background:var(--lime);color:var(--ink);}
.btn--lime:hover{background:#e4ff70;color:var(--ink);}
.btn--ghost{background:transparent;border-color:var(--rule);color:var(--ink);}
.btn--ghost:hover{border-color:var(--kiwi);background:rgba(53,196,106,.1);}
.btn--block{width:100%;}

.header-cta{flex:0 0 auto;min-height:40px;padding:0 16px;font-size:.84rem;}

/* ---------- 分联赛胶囊轨道 ---------- */
.league-bar{
  background:var(--night);
  border-top:1px solid rgba(217,205,187,.12);
}
.league-bar__inner{
  display:flex;align-items:center;gap:16px;
  padding-block:9px;
  min-width:0;
}
.league-bar__label{flex:0 0 auto;color:var(--sage);}

.index-label{
  font-family:var(--font-mono);
  font-size:.64rem;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--sage);
}

.league-rail{
  display:flex;align-items:center;gap:8px;
  flex:1 1 auto;min-width:0;
  list-style:none;
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
  scroll-snap-type:x proximity;
  padding-block:2px;
}
.league-rail::-webkit-scrollbar{display:none;}
.league-rail > li{flex:0 0 auto;scroll-snap-align:start;}

.chip{
  display:inline-flex;align-items:center;
  padding:6px 14px;
  border:1px solid rgba(143,227,107,.34);
  border-radius:999px;
  font-size:.8rem;font-weight:600;letter-spacing:.02em;
  color:rgba(246,240,226,.84);
  text-decoration:none;white-space:nowrap;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.chip:hover,
.chip:focus-visible{background:var(--kiwi);border-color:var(--kiwi);color:var(--night);}
.chip--all{background:rgba(53,196,106,.16);border-color:var(--kiwi);color:var(--lime);}
.chip--all:hover,
.chip--all:focus-visible{background:var(--lime);border-color:var(--lime);color:var(--ink);}

/* ---------- 滚动进度 ---------- */
.scroll-meter{
  position:absolute;left:0;right:0;bottom:0;
  height:3px;
  background:rgba(8,26,21,.55);
  overflow:hidden;
}
.scroll-meter__bar{
  display:block;height:100%;width:100%;
  background:linear-gradient(90deg,var(--kiwi),var(--lime));
  transform:scaleX(0);transform-origin:left center;
  transition:transform .12s linear;
}

/* ---------- 通用章节 ---------- */
.section{padding-block:clamp(44px,6vw,88px);}
.section--cream{background:var(--cream);}
.section--bone{background:var(--bone);}
.section--ink{background:var(--ink);color:var(--cream);}
.section--ink .section__title{color:var(--bone);}
.section--ink .section__lead{color:rgba(246,240,226,.76);}
.section--ink .eyebrow{color:var(--flesh);}

.section__head{
  display:grid;gap:14px;
  max-width:62ch;
  margin-bottom:clamp(24px,3.5vw,44px);
}
.section__head--row{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:18px;max-width:none;
}
.section__title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.85rem,4.4vw,3.5rem);
  line-height:1;
  letter-spacing:-.01em;
  color:var(--ink);
  text-wrap:balance;
}
.section__lead{
  max-width:58ch;
  font-size:1rem;
  line-height:1.75;
  color:var(--sage);
}
.eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--font-mono);
  font-size:.66rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--sage);
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--kiwi);flex:0 0 auto;}

.tick-rule{
  height:12px;border:0;margin:0;
  background-image:repeating-linear-gradient(to right,var(--rule) 0 1px,transparent 1px 16px);
  background-size:100% 7px;
  background-repeat:no-repeat;
  background-position:left top;
}

/* ---------- 网格 ---------- */
.grid{display:grid;gap:clamp(16px,2.4vw,32px);}
.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.15fr) minmax(0,.85fr);align-items:start;}
.grid > *{min-width:0;}

/* ---------- 切角面板与标签 ---------- */
.panel{
  position:relative;
  padding:clamp(18px,2.4vw,30px);
  background:var(--bone);
  color:var(--brown);
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
}
.panel--ink{background:var(--ink);color:var(--cream);}
.panel--lime{background:var(--lime);color:var(--ink);}

.tag{
  display:inline-flex;align-items:center;
  padding:3px 9px;border-radius:999px;
  background:rgba(53,196,106,.16);
  color:var(--ink);
  font-family:var(--font-mono);
  font-size:.66rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
}
.tag--lime{background:var(--lime);color:var(--ink);}
.tag--orange{background:var(--orange);color:var(--brown);}
.tag--ghost{background:transparent;border:1px solid var(--rule);color:var(--sage);}

/* ---------- 正文 ---------- */
.prose{
  max-width:68ch;
  color:var(--brown);
}
.prose > * + *{margin-top:1.05em;}
.prose h2{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.4rem,2.4vw,1.95rem);
  line-height:1.15;
  letter-spacing:-.01em;
  color:var(--ink);
  margin-top:1.7em;
}
.prose h3{
  font-size:1.1rem;font-weight:700;
  color:var(--ink);
  margin-top:1.5em;
}
.prose ul,.prose ol{
  list-style:disc;
  padding-left:1.2em;
  display:grid;gap:.4em;
}
.prose ol{list-style:decimal;}
.prose li::marker{color:var(--kiwi);}
.prose a{
  color:var(--ink);
  font-weight:600;
  text-decoration:underline;
  text-decoration-color:var(--kiwi);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}
.prose a:hover{text-decoration-color:var(--orange);}
.prose strong{color:var(--ink);}
.prose blockquote{
  border-left:3px solid var(--kiwi);
  padding-left:1em;
  font-family:var(--font-display);
  font-size:1.08rem;
  color:var(--ink);
}
.section--ink .prose{color:rgba(246,240,226,.84);}
.section--ink .prose h2,
.section--ink .prose h3,
.section--ink .prose strong{color:var(--bone);}

/* ---------- 面包屑 ---------- */
.breadcrumb{
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--sage);
}
.breadcrumb__list{display:flex;flex-wrap:wrap;align-items:center;gap:8px;list-style:none;}
.breadcrumb__item{display:flex;align-items:center;gap:8px;}
.breadcrumb__item + .breadcrumb__item::before{content:"/";color:var(--rule);}
.breadcrumb__link{
  color:var(--sage);text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .2s ease,border-color .2s ease;
}
.breadcrumb__link:hover,
.breadcrumb__link:focus-visible{color:var(--ink);border-bottom-color:var(--kiwi);}
.breadcrumb__current{color:var(--ink);font-weight:700;}

/* ---------- 图片容器基础规则 ---------- */
.media{
  position:relative;
  display:block;
  margin:0;
  overflow:hidden;
  background:
    repeating-linear-gradient(-45deg,rgba(53,196,106,.12) 0 10px,rgba(53,196,106,.03) 10px 20px),
    var(--bone);
}
.media--wide{aspect-ratio:16 / 9;}
.media--tall{aspect-ratio:3 / 4;}
.media--square{aspect-ratio:1 / 1;}
.media__img{width:100%;height:100%;object-fit:cover;}
.media__frame{
  position:absolute;inset:12px;
  border:1px solid rgba(216,255,62,.5);
  pointer-events:none;
}
.media__caption{
  margin-top:10px;
  font-family:var(--font-mono);
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--sage);
}

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

/* ---------- 页脚 ---------- */
.site-footer{
  position:relative;
  background:var(--ink);
  color:rgba(246,240,226,.78);
  padding-bottom:26px;
}
.footer-ticks{
  height:16px;
  border-top:1px solid rgba(217,205,187,.28);
  background-image:repeating-linear-gradient(to right,rgba(217,205,187,.45) 0 1px,transparent 1px 16px);
  background-size:100% 8px;
  background-repeat:no-repeat;
  background-position:left top;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.25fr;
  gap:clamp(24px,4vw,56px);
  padding-block:clamp(30px,4.5vw,52px);
}
.footer-brand{min-width:0;}
.footer-brand__mark{
  display:inline-flex;align-items:center;gap:.45em;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.4rem,2.6vw,1.9rem);
  line-height:1;
  letter-spacing:.02em;
  color:var(--bone);
  text-decoration:none;
}
.footer-brand__mark::before{
  content:"";width:.56em;height:.56em;
  background:var(--kiwi);
  clip-path:polygon(50% 0,100% 34%,100% 66%,50% 100%,0 66%,0 34%);
}
.footer-brand__note{
  margin:8px 0 14px;
  font-family:var(--font-mono);
  font-size:.68rem;letter-spacing:.2em;
  color:var(--kiwi);
}
.footer-brand__text{
  max-width:30ch;
  font-size:.9rem;line-height:1.75;
  color:rgba(246,240,226,.66);
}

.footer-col{min-width:0;}
.footer-col--contact{max-width:36ch;}
.footer-col__title{
  margin:0 0 14px;
  font-family:var(--font-mono);
  font-size:.68rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--flesh);
}
.footer-list{display:grid;gap:9px;list-style:none;}
.footer-list a{
  display:inline-block;
  font-size:.9rem;
  color:rgba(246,240,226,.78);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .2s ease,border-color .2s ease;
}
.footer-list a:hover,
.footer-list a:focus-visible{color:var(--lime);border-bottom-color:var(--lime);}

.contact-list{display:grid;gap:16px;list-style:none;}
.contact-list__key{
  display:block;margin-bottom:3px;
  font-family:var(--font-mono);
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sage);
}
.contact-list__value{
  display:block;
  font-size:.9rem;
  color:var(--bone);
  word-break:break-word;
}
.contact-list__value--mono{
  font-family:var(--font-mono);
  font-size:.86rem;
  letter-spacing:.02em;
}
.copy-btn{
  display:inline-flex;align-items:center;
  margin-top:6px;min-height:34px;padding:0 12px;
  background:transparent;
  border:1px solid rgba(143,227,107,.45);
  border-radius:2px;
  color:var(--flesh);
  font-size:.76rem;font-weight:700;letter-spacing:.06em;
  cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.copy-btn:hover,
.copy-btn:focus-visible{background:rgba(143,227,107,.16);color:var(--lime);border-color:var(--lime);}
.copy-btn[data-copied="true"]{background:var(--kiwi);border-color:var(--kiwi);color:var(--night);}

.contact-note{
  margin-top:14px;
  font-size:.78rem;line-height:1.7;
  color:rgba(246,240,226,.55);
}

.footer-bottom{
  display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;
  gap:12px 24px;
  padding-top:18px;
  border-top:1px solid rgba(217,205,187,.2);
  font-size:.78rem;
  color:rgba(246,240,226,.6);
}
.footer-legal{margin:0;}
.footer-icp{font-family:var(--font-mono);letter-spacing:.04em;}
.footer-bottom__links{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;}
.footer-bottom__links a{
  color:rgba(246,240,226,.7);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .2s ease,border-color .2s ease;
}
.footer-bottom__links a:hover,
.footer-bottom__links a:focus-visible{color:var(--lime);border-bottom-color:var(--lime);}

/* ---------- 平板 ---------- */
@media (max-width:1024px){
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr;}
  .footer-col--contact{grid-column:1 / -1;max-width:none;}
}

@media (max-width:960px){
  .nav-toggle{display:inline-flex;}
  .site-nav{
    display:none;
    flex-basis:100%;
    flex-direction:column;
    align-items:stretch;
    gap:16px;
    margin-left:0;
    padding-top:16px;
    border-top:1px solid rgba(217,205,187,.2);
  }
  .site-nav[data-open="true"]{display:flex;}
  .nav-list{
    flex-direction:column;
    align-items:stretch;
    gap:0;
    width:100%;
  }
  .nav-list > li{width:100%;}
  .nav-link{
    display:block;
    padding:13px 0;
    font-size:1.02rem;
    border-bottom:1px solid rgba(217,205,187,.14);
  }
  .nav-link::after{display:none;}
  .nav-link[aria-current="page"]{
    color:var(--lime);
    border-bottom-color:var(--lime);
  }
  .header-cta{width:100%;min-height:46px;font-size:.92rem;}
}

/* ---------- 手机 ---------- */
@media (max-width:860px){
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .grid--split{grid-template-columns:1fr;}
}

@media (max-width:720px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:26px 24px;}
  .footer-brand{grid-column:1 / -1;}
  .footer-col--contact{grid-column:1 / -1;}
}

@media (max-width:640px){
  .league-bar__label{display:none;}
  .league-bar__inner{padding-block:8px;}
  .site-header__inner{padding-block:11px;gap:10px 14px;}
  .brand__note{font-size:.6rem;letter-spacing:.16em;}
  .section__title{font-size:clamp(1.7rem,8vw,2.4rem);}
  .grid--2{grid-template-columns:1fr;}
}

@media (max-width:520px){
  .grid--3{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column;align-items:flex-start;}
  .panel{--cut:10px;}
}

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