/* ==========================================================================
   奇异果主站 · 共享样式表 /assets/site.css
   框架式导航 + Bento 分块 + 矿物色体系
   ========================================================================== */

:root{
  --c-ivory:#FBF8F0;
  --c-pulp:#3E9B57;
  --c-moss:#1C5334;
  --c-terrace:#2F6C85;
  --c-gold:#E1A03A;
  --c-terrace-soft:#8FB9C7;
  --c-peel:#7A4A28;
  --c-clay:#C4622D;
  --c-stone:#6B7269;
  --c-ink:#152C1F;

  --c-line:rgba(107,114,105,.34);
  --c-line-strong:var(--c-moss);
  --c-wash:rgba(62,155,87,.08);
  --c-wash-strong:rgba(62,155,87,.16);
  --c-surface:rgba(107,114,105,.13);
  --c-surface-2:rgba(143,185,199,.16);

  --font-display:'HarmonyOS Sans SC','Source Han Sans SC','PingFang SC',sans-serif;
  --font-body:'PingFang SC','Microsoft YaHei',sans-serif;
  --font-mono:'JetBrains Mono','IBM Plex Mono',ui-monospace,monospace;

  --topbar-h:64px;
  --rail-w:212px;
  --rail-pad:clamp(12px,1.5vw,20px);
  --gutter:clamp(16px,3.4vw,40px);
  --maxw:1220px;

  --r-sm:10px;
  --r-md:18px;
  --r-lg:28px;
  --gap:24px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  padding-top:var(--topbar-h);
  padding-left:var(--rail-w);
  background:var(--c-ivory);
  color:var(--c-ink);
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
button{font:inherit}
ul,ol{margin:0;padding:0}
li{list-style:none}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
a{color:var(--c-terrace)}
[hidden]{display:none !important}
[id]{scroll-margin-top:calc(var(--topbar-h) + 18px)}

/* ---------- 排版 ---------- */
h1,h2,h3,h4,.display{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.16;
  color:var(--c-moss);
  margin:0 0 .5em;
}
h1{font-weight:900;font-size:clamp(2.6rem,6vw,5.2rem)}
h2{font-size:clamp(1.6rem,2.6vw,2.4rem);font-weight:900}
h3{font-size:1.25rem}
h4{font-size:1.0625rem}
.mono,.kicker,.chip,.footer__heading,.footer__contact,.footer__legal{
  font-family:var(--font-mono);
  letter-spacing:.04em;
}
.mono{font-size:.8125rem;color:var(--c-stone)}
.kicker{
  display:inline-block;
  font-size:.8125rem;
  color:var(--c-terrace);
  text-transform:none;
  margin:0 0 12px;
}
.lede{font-size:1.0625rem;color:#2C3A31;max-width:38em}
.section-title{margin:0 0 .6em}

/* ---------- 焦点可及性 ---------- */
:focus-visible{outline:2px solid var(--c-gold);outline-offset:2px;border-radius:4px}
.skip-link{
  position:absolute;top:-100px;left:12px;z-index:200;
  padding:10px 18px;border-radius:0 0 var(--r-sm) var(--r-sm);
  background:var(--c-moss);color:var(--c-ivory);
  font-family:var(--font-mono);font-size:.8125rem;text-decoration:none;
}
.skip-link:focus{top:0}

/* ==========================================================================
   头部：顶部横梁 + 左侧竖轨
   ========================================================================== */
.site-header{position:relative;z-index:70}

.topbar{
  position:fixed;top:0;left:0;right:0;height:var(--topbar-h);z-index:70;
  display:flex;align-items:center;gap:14px;
  padding-left:var(--rail-pad);padding-right:var(--gutter);
  background:var(--c-ivory);
  border-bottom:1.5px solid var(--c-line-strong);
}
.brand{
  display:flex;align-items:center;gap:12px;
  flex:0 0 auto;width:calc(var(--rail-w) - var(--rail-pad));
  padding-right:14px;margin-right:16px;
  border-right:1.5px solid var(--c-line-strong);
  text-decoration:none;color:var(--c-moss);
}
.brand__mark{flex:0 0 auto;line-height:0}
.brand__text{display:flex;flex-direction:column;min-width:0}
.brand__name{
  font-family:var(--font-display);font-weight:900;
  font-size:1.0625rem;letter-spacing:-.01em;line-height:1.25;
}
.brand__domain{font-size:.6875rem;color:var(--c-stone);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.topbar__readout{
  display:flex;align-items:center;gap:8px;margin:0 0 0 auto;
  padding:5px 12px;border:1.5px solid var(--c-line);border-radius:999px;
  background:var(--c-wash);
  white-space:nowrap;
}
.topbar__code{color:var(--c-peel);font-size:.75rem}
.topbar__sep{color:var(--c-terrace-soft)}
.topbar__label{font-size:.8125rem;color:var(--c-moss);font-weight:500}
.topbar__state{font-size:.6875rem;color:var(--c-stone)}
.status-dot{
  width:7px;height:7px;border-radius:50%;flex:0 0 auto;
  background:var(--c-pulp);
  box-shadow:0 0 0 3px rgba(62,155,87,.18);
  animation:dotPulse 2.4s ease-in-out infinite;
}
@keyframes dotPulse{0%,100%{opacity:1}50%{opacity:.45}}

.nav-toggle{
  display:none;align-items:center;gap:9px;
  padding:8px 14px;border:1.5px solid var(--c-moss);border-radius:999px;
  background:var(--c-ivory);color:var(--c-moss);cursor:pointer;
  font-family:var(--font-display);font-weight:700;font-size:.875rem;
  transition:background-color .18s ease;
}
.nav-toggle:hover{background:var(--c-wash)}
.nav-toggle__bars{display:inline-flex;flex-direction:column;gap:3px;width:16px}
.nav-toggle__bars i{display:block;height:2px;background:var(--c-moss);border-radius:2px;transition:transform .18s ease,opacity .18s ease}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.nav-toggle__text{white-space:nowrap}

.topbar__progress{
  position:absolute;left:0;right:0;bottom:-1.5px;height:3px;
  background:var(--c-gold);
  transform:scaleX(0);transform-origin:0 50%;
}

.rail{
  position:fixed;top:var(--topbar-h);left:0;bottom:0;width:var(--rail-w);z-index:60;
  display:flex;flex-direction:column;
  padding:22px var(--rail-pad) 18px;
  background:var(--c-ivory);
  border-right:1.5px solid var(--c-line-strong);
  transition:opacity .18s ease,transform .18s ease;
}
.rail__caption{margin:0 0 12px;font-size:.6875rem;color:var(--c-stone)}
.rail__list{flex:1 1 auto;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.rail__link{
  display:flex;align-items:baseline;gap:10px;
  padding:10px 12px;
  border-left:3px solid transparent;
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  color:var(--c-moss);text-decoration:none;
  font-size:.9375rem;font-weight:500;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
.rail__link:hover{background:var(--c-wash)}
.rail__link .rail__num{font-size:.75rem;color:var(--c-stone);flex:0 0 auto}
.rail__link[aria-current="page"]{
  background:var(--c-wash-strong);
  border-left-color:var(--c-gold);
  font-weight:700;
}
.rail__link[aria-current="page"] .rail__num{color:var(--c-peel)}
.rail__cta{
  display:block;margin:16px 4px 12px;
  padding:12px 14px;
  border:1.5px solid var(--c-moss);border-radius:var(--r-sm);
  background:rgba(225,160,58,.16);
  color:var(--c-moss);text-decoration:none;
  font-family:var(--font-display);font-weight:700;font-size:.875rem;
  text-align:center;
  transition:background-color .18s ease,color .18s ease;
}
.rail__cta:hover{background:var(--c-moss);color:var(--c-ivory)}
.rail__foot{margin:0;font-size:.6875rem;color:var(--c-stone);border-top:1.5px solid var(--c-line);padding-top:12px}

/* ==========================================================================
   页脚
   ========================================================================== */
.site-footer{
  margin-top:clamp(48px,7vw,96px);
  padding:clamp(36px,5vw,64px) var(--gutter) 24px;
  background:var(--c-surface);
  border-top:3px solid var(--c-moss);
  color:#243528;
}
.footer__grid{
  max-width:var(--maxw);margin-inline:auto;
  display:grid;gap:clamp(24px,3vw,36px);
  grid-template-columns:1.5fr 1fr 1fr 1.3fr;
  padding-bottom:clamp(24px,3vw,36px);
}
.footer__col{min-width:0}
.footer__brand{
  font-family:var(--font-display);font-weight:900;font-size:1.25rem;
  color:var(--c-moss);margin:0 0 8px;letter-spacing:-.02em;
}
.footer__claim{margin:0 0 12px;font-size:1rem;color:var(--c-moss);max-width:24em}
.footer__note{margin:0;font-size:.8125rem;color:#4A564C;max-width:26em;line-height:1.7}
.footer__heading{
  font-size:.6875rem;color:var(--c-stone);
  margin:0 0 12px;padding-bottom:8px;
  border-bottom:1.5px solid var(--c-line);
  font-weight:500;
}
.footer__list{display:flex;flex-direction:column;gap:8px}
.footer__link{
  color:#243528;text-decoration:none;font-size:.9375rem;
  border-bottom:1.5px solid transparent;
  transition:color .18s ease,border-color .18s ease;
}
.footer__link:hover{color:var(--c-pulp);border-bottom-color:var(--c-pulp)}
.footer__contact{margin:0 0 8px;font-size:.8125rem;color:var(--c-moss);word-break:break-word}
.footer__contact + .footer__note{margin-top:10px}
.footer__bar{
  max-width:var(--maxw);margin-inline:auto;
  display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;justify-content:space-between;
  padding-top:18px;
  border-top:1.5px dashed var(--c-line);
}
.footer__legal{margin:0;font-size:.8125rem;color:var(--c-stone)}
.footer__icp{margin:0;font-size:.8125rem;color:var(--c-peel);text-align:right}

/* ==========================================================================
   布局与容器
   ========================================================================== */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(36px,6vw,76px)}
.section--tight{padding-block:clamp(22px,3.5vw,42px)}
.stack{display:flex;flex-direction:column;gap:16px}

.grid{display:grid;gap:var(--gap)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.bento__focus{grid-column:span 2;grid-row:span 2}
.bento__wide{grid-column:span 2}

/* ==========================================================================
   基础组件
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:999px;
  border:1.5px solid transparent;
  font-family:var(--font-display);font-weight:700;font-size:.9375rem;
  text-decoration:none;cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
.btn--primary{background:var(--c-pulp);border-color:var(--c-pulp);color:#FFFFFF}
.btn--primary:hover{background:var(--c-moss);border-color:var(--c-moss)}
.btn--gold{background:var(--c-gold);border-color:var(--c-gold);color:#3A2305}
.btn--gold:hover{background:#C98A28;border-color:#C98A28}
.btn--ghost{background:transparent;border-color:var(--c-moss);color:var(--c-moss)}
.btn--ghost:hover{background:var(--c-wash)}

.card{
  background:#FFFFFF;
  border:1.5px solid var(--c-line);
  border-radius:var(--r-md);
  padding:clamp(18px,2.4vw,28px);
  min-width:0;
}
.card--wash{background:var(--c-wash);border-color:rgba(62,155,87,.3)}
.card--ink{background:var(--c-moss);border-color:var(--c-moss);color:var(--c-ivory)}
.card--ink h2,.card--ink h3,.card--ink h4{color:var(--c-ivory)}
.card__title{margin:0 0 10px;font-family:var(--font-display);font-weight:700;font-size:1.0625rem;color:var(--c-moss)}
.card--ink .card__title{color:var(--c-ivory)}

.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:999px;
  border:1.5px solid currentColor;
  font-size:.75rem;line-height:1.6;
  background:transparent;
}
.chip--pulp{color:var(--c-pulp)}
.chip--terrace{color:var(--c-terrace)}
.chip--clay{color:var(--c-clay)}
.chip--peel{color:var(--c-peel)}
.chip--stone{color:var(--c-stone)}

.breadcrumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:.8125rem;letter-spacing:.04em;
  color:var(--c-stone);margin:0 0 20px;
}
.breadcrumbs li{display:flex;align-items:center;gap:8px}
.breadcrumbs li + li::before{content:"/";color:var(--c-terrace-soft)}
.breadcrumbs a{color:var(--c-terrace);text-decoration:none}
.breadcrumbs a:hover{border-bottom:1.5px solid currentColor}
.breadcrumbs [aria-current="page"]{color:var(--c-moss)}

/* 分段控件（可访问标签页） */
[data-tabs]{display:block}
[data-tabs] [role="tablist"],
.tabs__list{
  display:flex;flex-wrap:wrap;gap:6px;
  border-bottom:1.5px solid var(--c-line);
  margin:0 0 22px;
}
[role="tab"]{
  appearance:none;background:transparent;
  border:1.5px solid transparent;border-bottom:none;
  border-radius:var(--r-sm) var(--r-sm) 0 0;
  padding:10px 18px;margin-bottom:-1.5px;
  font-family:var(--font-display);font-weight:700;font-size:.9375rem;
  color:var(--c-stone);cursor:pointer;
  transition:color .18s ease,background-color .18s ease,border-color .18s ease;
}
[role="tab"]:hover{color:var(--c-moss);background:var(--c-wash)}
[role="tab"][aria-selected="true"]{
  background:var(--c-ivory);
  border-color:var(--c-moss);
  color:var(--c-moss);
}
[role="tabpanel"]{padding-top:4px}
[role="tabpanel"]:focus-visible{outline:2px solid var(--c-gold);outline-offset:4px}

/* 图片容器（页面阶段填充 img） */
.media{
  position:relative;overflow:hidden;
  border:1.5px solid var(--c-line);
  border-radius:var(--r-md);
  background:var(--c-surface-2);
  min-width:0;
}
.media img{width:100%;height:100%;object-fit:cover}
.media--square{aspect-ratio:1/1}
.media--4x3{aspect-ratio:4/3}
.media--3x2{aspect-ratio:3/2}
.media--16x9{aspect-ratio:16/9}
.media--tall{aspect-ratio:3/4}
.media--bleed{border-radius:var(--r-lg)}
.media__caption{
  margin:8px 0 0;
  font-family:var(--font-mono);font-size:.75rem;letter-spacing:.04em;color:var(--c-stone);
}
.media__tag{
  position:absolute;left:12px;bottom:12px;
  padding:4px 10px;border-radius:999px;
  background:var(--c-ivory);border:1.5px solid var(--c-moss);
  font-family:var(--font-mono);font-size:.6875rem;color:var(--c-moss);
}

/* 渐显 */
html.js-reveal [data-reveal]{
  opacity:0;transform:translateY(10px);
  transition:opacity .5s ease,transform .5s ease;
}
html.js-reveal [data-reveal].is-revealed{opacity:1;transform:none}

/* ==========================================================================
   响应式
   ========================================================================== */
@media (max-width:1180px){
  .footer__grid{grid-template-columns:1fr 1fr;gap:28px}
  .footer__col--brand{grid-column:1 / -1}
}
@media (max-width:1024px){
  :root{--topbar-h:58px;--rail-pad:16px}
  body{padding-left:0}
  .topbar{padding-left:var(--gutter);padding-right:var(--gutter);gap:12px}
  .brand{width:auto;border-right:0;padding-right:0;margin-right:0}
  .brand__domain{display:none}
  .topbar__readout{margin-left:auto}
  .nav-toggle{display:inline-flex}
  .rail{
    top:var(--topbar-h);left:0;right:0;bottom:auto;width:auto;z-index:65;
    max-height:calc(100vh - var(--topbar-h));
    overflow-y:auto;
    padding:14px var(--rail-pad) 16px;
    border-right:0;
    border-bottom:1.5px solid var(--c-line-strong);
    box-shadow:0 20px 34px -24px rgba(21,44,31,.55);
  }
  .rail[data-open="true"]{opacity:1;visibility:visible;transform:none}
  .rail[data-open="false"]{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px)}
  .rail__list{overflow:visible;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
  .rail__cta{margin:16px 0 0}
  .rail__foot{display:none}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento__focus{grid-column:span 2;grid-row:auto}
  .grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .footer__icp{text-align:left}
  .footer__bar{flex-direction:column;align-items:flex-start}
  .topbar__readout{padding:4px 10px}
  .topbar__label{display:none}
}
@media (max-width:560px){
  .rail__list{grid-template-columns:1fr}
  .nav-toggle__text{display:none}
  .brand__name{font-size:1rem}
  .bento{grid-template-columns:1fr}
  .bento__focus,.bento__wide{grid-column:span 1}
}

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