/* =========================================================
   奇异果体育 · 共享样式  /assets/site.css
   ========================================================= */

/* ---------- 1. 设计变量 ---------- */
:root{
  --kiwi-flesh:#6FBF2E;
  --kiwi-flesh-deep:#2C6E1B;
  --kiwi-skin:#7A5433;
  --kiwi-seed:#141310;
  --paper:#F7F2E5;
  --paper-grey:#E6DCC7;
  --paper-card:#FFFDF6;
  --neon:#2FD8C8;
  --alert:#FF7A21;
  --ink-green:#0E1A15;
  --mist:#CFE3C2;

  --rail-w:104px;
  --edge:1px solid rgba(122,84,51,.7);
  --edge-soft:1px dashed rgba(122,84,51,.55);

  --font-sans:"Noto Sans SC","Source Han Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;

  --shadow-paper:3px 4px 0 rgba(122,84,51,.20),7px 9px 0 rgba(122,84,51,.08);
  --shadow-paper-hover:2px 3px 0 rgba(122,84,51,.22),10px 13px 0 rgba(122,84,51,.13);
  --ease:cubic-bezier(.2,.7,.3,1);
}

/* ---------- 2. Reset 与基础排版 ---------- */
*,*::before,*::after{ box-sizing:border-box; }

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

body{
  margin:0;
  min-height:100vh;
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.75;
  font-weight:400;
  color:var(--kiwi-seed);
  background-color:var(--paper);
  background-image:
    repeating-linear-gradient(0deg, rgba(122,84,51,.026) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(122,84,51,.019) 0 1px, transparent 1px 5px);
}

h1,h2,h3,h4,h5{
  margin:0 0 .5em;
  font-weight:800;
  line-height:1.18;
  letter-spacing:-.02em;
  color:var(--kiwi-seed);
}
h1{ font-size:clamp(28px,4.4vw,48px); }
h2{ font-size:clamp(22px,3vw,34px); }
h3{ font-size:clamp(18px,2.2vw,24px); }

p{ margin:0 0 1em; }
ul,ol{ margin:0 0 1em; padding-left:1.2em; }
img,svg{ max-width:100%; }
main{ display:block; }
#main-content{ display:block; scroll-margin-top:24px; }

a{
  color:var(--kiwi-flesh-deep);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-decoration-color:rgba(44,110,27,.35);
  text-underline-offset:3px;
  transition:color .16s var(--ease), text-decoration-color .16s var(--ease);
}
a:hover{
  color:var(--kiwi-seed);
  text-decoration-color:var(--alert);
}

:focus-visible{
  outline:3px solid var(--neon);
  outline-offset:2px;
  border-radius:2px;
}

/* ---------- 3. 辅助类 ---------- */
.skip-link{
  position:fixed;
  top:8px; left:8px;
  z-index:200;
  transform:translateY(-180%);
  padding:10px 16px;
  background:var(--neon);
  color:var(--ink-green);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.1em;
  text-decoration:none;
  border:2px solid var(--ink-green);
  transition:transform .18s var(--ease);
}
.skip-link:focus{ transform:translateY(0); color:var(--ink-green); }

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

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

/* ---------- 4. 布局容器 ---------- */
.wrap{
  width:100%;
  max-width:1120px;
  margin:0 auto;
  padding:0 24px;
}
.wrap--narrow{ max-width:780px; }
.wrap--wide{ max-width:1320px; }

.section{ padding:48px 0; }

@media (min-width:901px){
  body{ padding-left:var(--rail-w); }
}
@media (max-width:900px){
  body{ padding-top:56px; }
  #main-content{ scroll-margin-top:72px; }
}

/* ---------- 5. 左侧轨道导航 ---------- */
.site-rail{
  position:fixed;
  top:0; left:0; bottom:0;
  width:var(--rail-w);
  z-index:80;
  display:flex;
  flex-direction:column;
  background-color:var(--ink-green);
  background-image:repeating-linear-gradient(90deg, rgba(47,216,200,.05) 0 1px, transparent 1px 18px);
  border-right:1px solid var(--kiwi-skin);
}

/* 品牌标记 */
.site-rail__brand{
  display:flex;
  align-items:center;
  text-decoration:none;
  color:var(--paper);
}
.site-rail__brand--stack{
  flex-direction:column;
  gap:8px;
  padding:20px 10px 16px;
  border-bottom:var(--edge-soft);
}
.site-rail__brand--compact{
  display:none;
  flex-direction:row;
  gap:8px;
  padding:0;
}

.brand-mark__slice{
  position:relative;
  flex:0 0 auto;
  width:44px; height:44px;
  border-radius:50%;
  background:var(--kiwi-flesh);
  border:3px solid var(--kiwi-skin);
  box-shadow:inset 0 0 0 2px rgba(247,242,229,.55);
}
.brand-mark__slice::before{
  content:"";
  position:absolute; inset:26%;
  border-radius:50%;
  background:var(--paper);
}
.brand-mark__slice::after{
  content:"";
  position:absolute; inset:7%;
  border-radius:50%;
  background:repeating-conic-gradient(from 0deg, rgba(20,19,16,.85) 0deg 2.4deg, transparent 2.4deg 30deg);
  -webkit-mask:radial-gradient(circle, transparent 0 32%, #000 34% 100%);
  mask:radial-gradient(circle, transparent 0 32%, #000 34% 100%);
}

.brand-mark__word{
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  line-height:1.25;
  text-align:center;
  color:var(--paper);
}
.brand-mark__season{
  font-family:var(--font-mono);
  font-size:9.5px;
  letter-spacing:.1em;
  color:rgba(47,216,200,.85);
}

/* 顶部移动栏（桌面隐藏） */
.site-rail__bar{ display:none; }

.site-rail__toggle{
  display:none;
  align-items:center;
  gap:7px;
  padding:7px 11px;
  background:var(--kiwi-flesh);
  color:var(--kiwi-seed);
  border:1px solid var(--kiwi-flesh-deep);
  border-radius:2px;
  cursor:pointer;
  transition:background .18s var(--ease);
}
.site-rail__toggle:hover{ background:var(--mist); }
.site-rail__toggle-bars{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  width:14px; height:10px;
}
.site-rail__toggle-bar{
  display:block;
  width:100%; height:2px;
  background:var(--kiwi-seed);
  transition:transform .2s var(--ease);
}
.site-rail__toggle-text{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  line-height:1;
}
.site-rail[data-open="true"] .site-rail__toggle-bar:first-child{ transform:translateY(4px) rotate(45deg); }
.site-rail[data-open="true"] .site-rail__toggle-bar:last-child{ transform:translateY(-4px) rotate(-45deg); }

/* 轨道主体 */
.site-rail__body{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:16px;
  padding:16px 8px 18px;
  overflow-y:auto;
  scrollbar-width:thin;
}

.site-rail__nav{ margin:auto 0; }
.site-rail__list{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.site-rail__link{
  position:relative;
  display:block;
  padding:9px 8px 9px 14px;
  font-size:14px;
  line-height:1.3;
  letter-spacing:.06em;
  color:rgba(247,242,229,.72);
  text-decoration:none;
  border-radius:2px;
  transition:background .18s var(--ease), color .18s var(--ease);
}
.site-rail__link::before{
  content:"";
  position:absolute;
  left:0; top:50%;
  width:3px; height:62%;
  background:var(--neon);
  transform:translateY(-50%) scaleY(0);
  transition:transform .2s var(--ease);
}
.site-rail__link:hover{
  background:rgba(111,191,46,.18);
  color:var(--paper);
}
.site-rail__link:hover::before{ transform:translateY(-50%) scaleY(1); }
.site-rail__link[aria-current="page"]{
  background:var(--kiwi-flesh);
  color:var(--kiwi-seed);
  font-weight:700;
}
.site-rail__link[aria-current="page"]::before{
  background:var(--ink-green);
  transform:translateY(-50%) scaleY(1);
}

.site-rail__foot{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-top:12px;
  border-top:var(--edge-soft);
}
.site-rail__season{
  margin:0;
  font-family:var(--font-mono);
  font-size:9.5px;
  letter-spacing:.1em;
  text-align:center;
  color:var(--neon);
}
.site-rail__cta{
  width:100%;
  padding:9px 6px;
  font-size:11px;
  letter-spacing:.06em;
}

/* ---------- 6. 按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 18px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.12em;
  text-decoration:none;
  color:var(--kiwi-seed);
  background:var(--paper);
  border:1px solid var(--kiwi-skin);
  border-radius:2px;
  box-shadow:2px 2px 0 var(--kiwi-skin);
  cursor:pointer;
  transition:background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.btn:hover{
  transform:translate(-1px,-1px);
  box-shadow:3px 3px 0 var(--kiwi-skin);
  color:var(--kiwi-seed);
}
.btn:active{
  transform:translate(1px,1px);
  box-shadow:1px 1px 0 var(--kiwi-skin);
}

.btn--kiwi{
  background:var(--kiwi-flesh);
  border-color:var(--kiwi-flesh-deep);
  color:var(--kiwi-seed);
  box-shadow:2px 2px 0 var(--kiwi-flesh-deep);
}
.btn--kiwi:hover{
  background:var(--alert);
  border-color:var(--alert);
  box-shadow:3px 3px 0 var(--kiwi-skin);
}

.btn--alert{
  background:var(--alert);
  border-color:var(--kiwi-seed);
  color:var(--kiwi-seed);
}

.btn--ghost{
  background:transparent;
  color:var(--paper);
  border-color:rgba(247,242,229,.45);
  box-shadow:none;
}
.btn--ghost:hover{
  background:rgba(47,216,200,.16);
  border-color:var(--neon);
  color:var(--paper);
  box-shadow:2px 2px 0 rgba(122,84,51,.9);
}

/* ---------- 7. 面包屑 ---------- */
.crumb{ padding:20px 0 4px; }
.crumb__list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  margin:0; padding:0;
  list-style:none;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
}
.crumb__item{
  display:flex;
  align-items:center;
  color:rgba(20,19,16,.55);
}
.crumb__item + .crumb__item::before{
  content:"//";
  margin:0 10px;
  color:var(--kiwi-skin);
}
.crumb__link{
  color:var(--kiwi-flesh-deep);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .16s var(--ease), border-color .16s var(--ease);
}
.crumb__link:hover{
  color:var(--kiwi-seed);
  border-bottom-color:var(--alert);
}
.crumb__current{
  color:var(--kiwi-seed);
  font-weight:700;
}

/* ---------- 8. 堆叠面板 ---------- */
.panel{
  position:relative;
  padding:28px 26px;
  background:var(--paper-card);
  border:var(--edge);
  box-shadow:var(--shadow-paper);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.panel::after{
  content:"";
  position:absolute;
  right:0; bottom:0;
  width:26px; height:26px;
  background:linear-gradient(135deg, transparent 50%, var(--paper-grey) 50%);
  pointer-events:none;
}
.panel:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-paper-hover);
}

.panel__label{
  display:inline-flex;
  align-items:center;
  margin-bottom:14px;
  padding:5px 16px 5px 10px;
  background:var(--ink-green);
  color:var(--neon);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  line-height:1.4;
  clip-path:polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.panel__title{
  margin:0 0 12px;
  font-size:clamp(20px,2.4vw,26px);
}

/* ---------- 9. 索引条与标签 ---------- */
.index-strip{
  display:flex;
  overflow-x:auto;
  scrollbar-width:thin;
  background:var(--paper-grey);
  border-top:var(--edge);
  border-bottom:var(--edge);
}
.index-strip__item{
  flex:0 0 auto;
  display:flex;
  align-items:baseline;
  gap:8px;
  padding:12px 20px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  color:rgba(20,19,16,.72);
  text-decoration:none;
  border-right:var(--edge-soft);
  transition:background .18s var(--ease), color .18s var(--ease);
}
.index-strip__item:last-child{ border-right:0; }
.index-strip__item:hover{
  background:var(--mist);
  color:var(--kiwi-seed);
}

.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 12px 3px 8px;
  background:var(--mist);
  color:var(--kiwi-seed);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  line-height:1.5;
  clip-path:polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.tag--alert{ background:var(--alert); }
.tag--neon{ background:var(--neon); }

/* ---------- 10. 数字与正文 ---------- */
.num{
  position:relative;
  display:inline-block;
  padding-left:12px;
  font-family:var(--font-mono);
  font-size:2.4em;
  font-weight:700;
  line-height:1;
  letter-spacing:-.02em;
  color:var(--kiwi-seed);
}
.num::before{
  content:"";
  position:absolute;
  left:0; top:8%; bottom:8%;
  width:3px;
  background:var(--neon);
}
.num--invert{ color:var(--paper); }
.num--invert::before{ background:var(--alert); }

.prose{
  max-width:38em;
  font-size:16px;
  line-height:1.75;
  color:var(--kiwi-seed);
}
.prose p{ margin:0 0 1em; }
.prose p:last-child{ margin-bottom:0; }

/* ---------- 11. 图片容器（供页面阶段放入占位） ---------- */
.figure{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:0;
}
.figure__frame{
  position:relative;
  overflow:hidden;
  aspect-ratio:16 / 10;
  background:var(--paper-grey);
  border:var(--edge);
  box-shadow:var(--shadow-paper);
}
.figure__frame > img,
.figure__frame > svg{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.figure__frame::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(118deg, rgba(14,26,21,0) 55%, rgba(14,26,21,.42) 100%);
}
.figure__cap{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  color:rgba(20,19,16,.6);
}
.figure--wide .figure__frame{ aspect-ratio:21 / 9; }
.figure--tall .figure__frame{ aspect-ratio:4 / 5; }
.figure--square .figure__frame{ aspect-ratio:1 / 1; }
.figure--dark .figure__frame{ background:var(--ink-green); }

/* ---------- 12. 页脚 ---------- */
.site-foot{
  position:relative;
  margin-top:64px;
  overflow:hidden;
  background-color:var(--ink-green);
  color:var(--paper);
}
.site-foot::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:repeating-linear-gradient(115deg, rgba(47,216,200,.055) 0 1px, transparent 1px 16px);
}
.site-foot__stripe{
  position:relative;
  height:8px;
  background:linear-gradient(90deg,
    var(--kiwi-flesh) 0 40%,
    var(--neon) 40% 54%,
    var(--alert) 54% 66%,
    var(--kiwi-skin) 66% 100%);
}

.site-foot__inner{
  position:relative;
  width:100%;
  max-width:1120px;
  margin:0 auto;
  padding:48px 24px 28px;
  display:flex;
  flex-direction:column;
  gap:40px;
}

.site-foot__cta{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:24px;
  align-items:end;
  padding-bottom:32px;
  border-bottom:1px solid rgba(122,84,51,.75);
}
.site-foot__kicker{
  margin:0 0 10px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  color:var(--neon);
}
.site-foot__title{
  margin:0;
  color:var(--paper);
  font-size:clamp(22px,3.4vw,32px);
  line-height:1.24;
}
.site-foot__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:flex-end;
}

.site-foot__grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1.2fr;
  gap:32px 28px;
}

.foot-col__title{
  margin:0 0 14px;
  padding-bottom:8px;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  color:var(--paper);
  border-bottom:var(--edge-soft);
}

.foot-list{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.foot-list__link{
  display:inline-block;
  font-size:14px;
  line-height:1.5;
  color:rgba(247,242,229,.75);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .18s var(--ease), border-color .18s var(--ease);
}
.foot-list__link:hover{
  color:var(--paper);
  border-bottom-color:var(--neon);
}

.foot-contact{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.foot-contact__line{
  margin:0;
  font-size:13.5px;
  line-height:1.6;
  color:rgba(247,242,229,.75);
}
.foot-contact__line .mono{
  color:var(--neon);
  font-size:12.5px;
}
.foot-contact__line--note{
  margin-top:4px;
  font-size:12px;
  color:rgba(247,242,229,.5);
}

.site-foot__bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-top:20px;
  border-top:1px solid rgba(122,84,51,.75);
}
.site-foot__copy{
  margin:0;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  color:rgba(247,242,229,.6);
}
.site-foot__legal{
  display:flex;
  gap:18px;
}
.site-foot__legal-link{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  color:rgba(247,242,229,.6);
  text-decoration:none;
  transition:color .18s var(--ease);
}
.site-foot__legal-link:hover{ color:var(--neon); }
.site-foot a:hover{ color:var(--paper); }

/* ---------- 13. 显现动画 ---------- */
.js [data-reveal]{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .22s var(--ease), transform .22s var(--ease);
}
.js [data-reveal][data-visible="true"]{
  opacity:1;
  transform:none;
}

/* ---------- 14. 响应式 ---------- */
@media (max-width:1080px){
  .site-foot__grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:900px){
  /* 轨道折叠为顶部栏 + 底部抽屉 */
  .site-rail{
    right:0; bottom:auto;
    width:auto; height:56px;
    flex-direction:row;
    align-items:center;
    background-image:none;
    border-right:0;
    border-bottom:1px solid var(--kiwi-skin);
  }
  .site-rail__bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    height:100%;
    padding:0 14px;
  }
  .site-rail__brand--stack{ display:none; }
  .site-rail__brand--compact{ display:flex; }
  .site-rail__brand--compact .brand-mark__slice{
    width:28px; height:28px;
    border-width:2px;
  }
  .site-rail__brand--compact .brand-mark__word{
    font-size:14px;
    letter-spacing:.06em;
    text-align:left;
  }
  .site-rail__toggle{ display:inline-flex; }

  .site-rail__body{
    position:fixed;
    left:0; right:0; bottom:0; top:auto;
    z-index:90;
    max-height:80vh;
    overflow-y:auto;
    padding:18px 16px calc(22px + env(safe-area-inset-bottom, 0px));
    background:var(--ink-green);
    border-top:3px solid var(--kiwi-flesh);
    transform:translateY(110%);
    visibility:hidden;
    transition:transform .28s var(--ease), visibility 0s linear .28s;
  }
  .site-rail__body[data-open="true"]{
    transform:translateY(0);
    visibility:visible;
    transition:transform .28s var(--ease), visibility 0s linear 0s;
  }

  .site-rail__nav{ margin:0; }
  .site-rail__list{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
  }
  .site-rail__link{
    padding:12px 12px 12px 16px;
    background:rgba(247,242,229,.06);
    border:1px solid rgba(122,84,51,.6);
  }
  .site-rail__foot{
    flex-direction:row;
    align-items:center;
    gap:12px;
    margin-top:16px;
  }
  .site-rail__season{ flex:1 1 auto; text-align:left; }
  .site-rail__cta{ width:auto; flex:0 0 auto; padding:10px 16px; }

  body[data-nav-open="true"]{ overflow:hidden; }

  .section{ padding:32px 0; }
  .site-foot__cta{
    grid-template-columns:1fr;
    align-items:start;
  }
  .site-foot__actions{ justify-content:flex-start; }
  .panel{ padding:22px 18px; }
}

@media (max-width:640px){
  .wrap{ padding:0 18px; }
  .site-foot__grid{ grid-template-columns:1fr; }
  .site-foot__inner{ padding:36px 18px 22px; }
  .num{ font-size:1.8em; }
}

/* ---------- 15. 降低动效 ---------- */
@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; transform:none; }
  .panel:hover{ transform:none; }
}