/* ===== 冠军白菜论 · 全站共享样式 /assets/site.css ===== */

:root{
  --green:#0F7A4E;
  --green-100:#E6F4EC;
  --green-900:#0A5334;
  --gold:#E0A21B;
  --sand:#FBEFD2;
  --hot:#E4502B;
  --hot-50:#FDE6DF;
  --ink:#14201B;
  --muted:#6E7F76;
  --canvas:#FAF9F4;
  --rule:#D8DED6;

  --maxw:1240px;
  --pad:clamp(16px,4vw,40px);

  --fs-h1:clamp(34px,5.4vw,62px);
  --fs-h2:clamp(26px,3.4vw,40px);
  --fs-h3:clamp(20px,2.2vw,26px);

  --font-head:"HarmonyOS Sans SC","Noto Sans SC","PingFang SC",system-ui,-apple-system,"Microsoft YaHei",sans-serif;
  --font-body:"Noto Sans SC","PingFang SC",system-ui,-apple-system,"Microsoft YaHei",sans-serif;
  --font-mono:"Roboto Mono",ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace;
}

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

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

body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

img,picture,svg{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul,ol{margin:0;padding:0;list-style:none;}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;}
h1,h2,h3,h4{
  margin:0;
  font-family:var(--font-head);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.15;
}
p{margin:0 0 1em;}

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

/* ---------- 工具类 ---------- */
.visually-hidden{
  position:absolute!important;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);clip-path:inset(50%);
  overflow:hidden;white-space:nowrap;
}
.is-hidden{display:none!important;}

.container{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.section{padding-block:clamp(48px,7vw,96px);}
.section--tint{background:var(--green-100);}

.kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--green);
  margin-bottom:12px;
}
.kicker::before{content:"";width:22px;height:2px;background:var(--gold);}

.section-head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:clamp(24px,3.4vw,44px);
}
.section-head__title{font-size:var(--fs-h2);max-width:22ch;}
.section-head__note{font-size:14.5px;color:var(--muted);max-width:52ch;margin:0;}

/* ---------- 框景 ---------- */
.frame{
  position:relative;
  padding:clamp(26px,4vw,52px) clamp(20px,4vw,48px);
  border:1px solid var(--rule);
  border-radius:4px 32px 4px 32px;
  background:var(--canvas);
}
.frame::before,
.frame::after{
  content:"";
  position:absolute;
  left:16px;right:16px;
  height:9px;
  pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--rule) 0 1px,transparent 1px 12px);
}
.frame::before{top:-5px;}
.frame::after{bottom:-5px;}
.frame__label{
  position:absolute;
  top:-14px;left:28px;
  padding:0 10px;
  background:var(--canvas);
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ---------- 标签 ---------- */
.tag{
  display:inline-block;
  padding:4px 11px;
  border-radius:999px;
  background:var(--green-100);
  color:var(--green-900);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.04em;
}
.tag-hot{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 10px;
  border-radius:999px;
  background:var(--hot-50);
  color:var(--hot);
  font-size:12px;
  font-weight:700;
  font-family:var(--font-mono);
  letter-spacing:.06em;
}
.tag-hot::before{
  content:"";
  width:6px;height:6px;
  border-radius:50%;
  background:var(--hot);
}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:12px 22px;
  border-radius:999px;
  font-family:var(--font-head);
  font-size:15px;
  font-weight:700;
  border:1.5px solid transparent;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.btn--gold{background:var(--gold);color:#231A05;}
.btn--gold:hover{background:#F0B62C;transform:translateY(-1px);}
.btn--green{background:var(--green);color:#fff;}
.btn--green:hover{background:var(--green-900);transform:translateY(-1px);}
.btn--ghost{border-color:var(--rule);background:var(--canvas);color:var(--ink);}
.btn--ghost:hover{border-color:var(--green);color:var(--green-900);}

/* ---------- 面包屑 ---------- */
.breadcrumb{padding-block:14px;font-size:13px;color:var(--muted);}
.breadcrumb__list{display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.breadcrumb__item + .breadcrumb__item::before{
  content:"/";
  margin-right:6px;
  color:var(--rule);
}
.breadcrumb__link{font-family:var(--font-mono);}
.breadcrumb__link:hover{color:var(--green);}

/* ---------- 正文 ---------- */
.prose{
  max-width:68ch;
  font-size:16.5px;
  line-height:1.78;
  color:var(--ink);
}
.prose > * + *{margin-top:1em;}
.prose h2{margin-top:1.8em;font-size:var(--fs-h3);}
.prose h3{margin-top:1.5em;font-size:18px;}
.prose ul{list-style:disc;padding-left:1.3em;}
.prose li + li{margin-top:.4em;}
.prose a{color:var(--green-900);border-bottom:1.5px solid var(--gold);}

/* ---------- 网格 ---------- */
.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--auto{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.grid--matrix{grid-template-columns:repeat(12,minmax(0,1fr));}
.gspan-4{grid-column:span 4;}
.gspan-6{grid-column:span 6;}
.gspan-8{grid-column:span 8;}

/* ---------- 数据卡 ---------- */
.stat-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:14px;
}
.stat{
  padding:16px 18px;
  border-radius:16px;
  background:var(--sand);
  border:1px solid rgba(224,162,27,.35);
}
.stat__num{
  font-family:var(--font-mono);
  font-size:clamp(22px,2.6vw,30px);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--green-900);
}
.stat__label{
  margin-top:6px;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ---------- 筛选药丸 ---------- */
.pill-group{display:flex;flex-wrap:wrap;gap:8px;}
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  border-radius:999px;
  border:1.5px solid var(--rule);
  background:var(--canvas);
  color:var(--ink);
  font-size:13.5px;
  font-weight:600;
  transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.pill:hover{border-color:var(--green);color:var(--green-900);}
.pill[aria-pressed="true"]{
  border-color:var(--gold);
  background:var(--sand);
  color:#4A3406;
}
.filter-empty{
  padding:26px;
  border:1px dashed var(--rule);
  border-radius:18px;
  background:var(--canvas);
  text-align:center;
  font-size:14.5px;
  color:var(--muted);
}

/* ---------- 图片容器 ---------- */
.media{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:6px 28px 6px 28px;
  background:
    radial-gradient(120% 100% at 10% 8%, rgba(15,122,78,.22), rgba(15,122,78,0) 58%),
    radial-gradient(90% 90% at 92% 88%, rgba(224,162,27,.28), rgba(224,162,27,0) 62%),
    var(--green-100);
}
.media::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.6;
  pointer-events:none;
  background-image:repeating-linear-gradient(90deg, rgba(216,222,214,.85) 0 1px, transparent 1px 46px);
}
.media > picture{
  position:relative;
  z-index:1;
  display:block;
  width:100%;height:100%;
}
.media > img,
.media > picture > img{
  position:relative;
  z-index:1;
  width:100%;height:100%;
  object-fit:cover;
}
.media--tall{aspect-ratio:3/4;}
.media--square{aspect-ratio:1/1;}
.media--wide{aspect-ratio:21/9;}
.media__caption{
  margin-top:10px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--muted);
}

/* ===================================================
   头部
   =================================================== */
.site-header{position:relative;z-index:80;background:var(--canvas);}

.skip-link{
  position:absolute;
  left:12px;top:-70px;
  z-index:200;
  padding:10px 18px;
  border-radius:0 0 12px 12px;
  background:var(--green-900);
  color:#fff;
  font-size:14px;
  font-weight:700;
  transition:top .2s ease;
}
.skip-link:focus{top:0;}

/* 上层品牌条 */
.brand-bar{background:var(--green-900);color:#DCEEE3;font-size:13.5px;}
.brand-bar__inner{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding:10px var(--pad);
  display:flex;
  align-items:center;
  gap:12px 22px;
  flex-wrap:wrap;
}
.brand-bar__lead{
  display:flex;
  align-items:center;
  gap:16px;
  flex:1 1 auto;
  min-width:0;
  flex-wrap:wrap;
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:#fff;
  font-family:var(--font-head);
  font-weight:800;
  letter-spacing:.02em;
}
.brand__mark{
  display:grid;
  place-items:center;
  width:26px;height:26px;
  border-radius:9px 9px 9px 3px;
  background:var(--gold);
  color:var(--green-900);
  font-size:14px;
  font-weight:800;
}
.brand__name{font-size:16px;}
.brand-bar__tag{margin:0;color:#B9D8C6;}
.brand-bar__meta{
  margin:0;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.02em;
  color:#B9D8C6;
}

/* 下层栏目条 */
.nav-bar{
  position:sticky;
  top:0;
  z-index:80;
  background:var(--canvas);
  border-bottom:1px solid var(--rule);
}
.nav-bar__inner{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding:11px var(--pad);
  transition:padding .26s ease;
}
.site-header.is-stuck .nav-bar__inner{padding-block:6px;}

.nav-bar__brand{
  display:none;
  font-family:var(--font-head);
  font-size:16.5px;
  font-weight:800;
  color:var(--green-900);
}

.nav{flex:1 1 auto;min-width:0;}
.nav__list{display:flex;align-items:center;gap:2px;flex-wrap:wrap;}
.nav__link{
  display:inline-block;
  padding:9px 14px;
  border-radius:999px;
  font-size:15px;
  font-weight:600;
  white-space:nowrap;
  transition:background .2s ease,color .2s ease;
}
.nav__link:hover{background:var(--green-100);color:var(--green-900);}
.nav__link[aria-current="page"]{background:var(--green);color:#fff;}

.nav-bar__tools{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
}

.region-switch{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 15px;
  border-radius:999px;
  border:1.5px solid var(--gold);
  background:var(--sand);
  color:var(--ink);
  font-family:var(--font-head);
  font-size:14px;
  font-weight:700;
  white-space:nowrap;
  transition:background .2s ease,color .2s ease;
}
.region-switch:hover{background:var(--gold);color:#231A05;}
.region-switch[aria-expanded="true"]{background:var(--gold);color:#231A05;}
.region-switch__dot{
  width:8px;height:8px;
  border-radius:50%;
  background:var(--hot);
}

.nav-toggle{
  display:none;
  align-items:center;
  gap:9px;
  padding:9px 14px;
  border-radius:999px;
  border:1.5px solid var(--rule);
  background:var(--canvas);
  font-family:var(--font-head);
  font-size:14px;
  font-weight:700;
}
.nav-toggle__bars{position:relative;display:block;width:18px;height:12px;}
.nav-toggle__bars::before,
.nav-toggle__bars::after{
  content:"";
  position:absolute;
  left:0;
  width:100%;height:2px;
  border-radius:2px;
  background:var(--ink);
  transition:transform .24s ease,background .24s ease;
}
.nav-toggle__bars::before{top:0;}
.nav-toggle__bars::after{bottom:0;}
.nav-toggle[aria-expanded="true"]{background:var(--green);border-color:var(--green);color:#fff;}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{transform:translateY(5px) rotate(45deg);background:#fff;}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{transform:translateY(-5px) rotate(-45deg);background:#fff;}

/* 区域面板 */
.region-panel{
  position:absolute;
  top:calc(100% + 1px);
  right:clamp(14px,4vw,40px);
  width:min(560px, calc(100vw - 28px));
  padding:20px 22px 24px;
  background:var(--canvas);
  border:1px solid var(--rule);
  border-radius:6px 6px 22px 22px;
  box-shadow:0 30px 60px -34px rgba(10,83,52,.55);
  z-index:90;
}
.region-panel[hidden]{display:none;}
.region-panel__title{
  margin:0 0 12px;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}
.region-panel__list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.region-panel__link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:11px 14px;
  border-radius:14px;
  border:1px solid transparent;
  background:var(--green-100);
  color:var(--green-900);
  font-size:14.5px;
  font-weight:600;
  transition:background .2s ease,border-color .2s ease;
}
.region-panel__link::after{
  content:"→";
  font-family:var(--font-mono);
  color:var(--muted);
}
.region-panel__link:hover{background:var(--sand);border-color:var(--gold);}

/* 滚动进度 */
.scroll-progress{
  position:absolute;
  left:0;bottom:-1px;
  width:100%;height:3px;
  transform:scaleX(0);
  transform-origin:0 50%;
  background:linear-gradient(90deg,var(--green),var(--gold));
  transition:transform .12s linear;
  pointer-events:none;
  z-index:2;
}

/* ===================================================
   页脚
   =================================================== */
.site-footer{
  margin-top:clamp(48px,7vw,96px);
  background:var(--green-900);
  color:#D9EDE1;
}
.site-footer__inner{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding:clamp(44px,6vw,76px) var(--pad) 28px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.15fr 1fr 1.35fr 1fr;
  gap:clamp(22px,3vw,44px);
}
.footer-col{min-width:0;}
.footer-col__title{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
  font-family:var(--font-mono);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
}
.footer-col__title::after{
  content:"";
  flex:1 1 auto;
  height:1px;
  background:rgba(224,162,27,.35);
}
.footer-list li + li{margin-top:1px;}
.footer-list a{
  display:inline-block;
  padding:6px 0;
  font-size:14.5px;
  color:#CFE7DA;
  transition:color .18s ease;
}
.footer-list a:hover{color:var(--gold);}
.footer-list--plain li{
  padding:6px 0;
  font-size:14.5px;
  color:#CFE7DA;
}
.footer-list--plain li:first-child{
  font-family:var(--font-mono);
  letter-spacing:.02em;
}

.footer-contact{display:grid;gap:12px;}
.footer-contact__row{display:grid;gap:3px;}
.footer-contact__k{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#8FBCA4;
}
.footer-contact__v{font-size:14.5px;line-height:1.6;color:#E4F3EA;}
.footer-contact__v--num{font-family:var(--font-mono);letter-spacing:.02em;}
.footer-note{
  margin:14px 0 0;
  font-size:13px;
  line-height:1.7;
  color:#8FBCA4;
}

.footer-base{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px 24px;
  margin-top:clamp(30px,4vw,52px);
  padding-top:20px;
  border-top:1px solid rgba(216,222,214,.18);
}
.footer-base__motto{
  margin:0;
  font-family:var(--font-head);
  font-size:14.5px;
  font-weight:700;
  color:#E4F3EA;
}
.footer-base__copy{
  margin:0;
  font-family:var(--font-mono);
  font-size:12.5px;
  color:#8FBCA4;
}

/* ===================================================
   回到顶部（JS 生成）
   =================================================== */
.to-top{
  position:fixed;
  right:clamp(14px,3vw,28px);
  bottom:clamp(14px,3vw,28px);
  width:46px;height:46px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--green-900);
  color:#fff;
  font-family:var(--font-mono);
  font-size:17px;
  box-shadow:0 14px 30px -14px rgba(10,83,52,.9);
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:opacity .24s ease,transform .24s ease,visibility .24s;
  z-index:70;
}
.to-top.is-visible{opacity:1;visibility:visible;transform:none;}
.to-top:hover{background:var(--green);}

/* ===================================================
   显现动画
   =================================================== */
html.js-ready [data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--reveal-delay,0ms);
}
html.js-ready [data-reveal].is-visible{opacity:1;transform:none;}

/* ===================================================
   响应式
   =================================================== */
@media (max-width:1080px){
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:960px){
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .gspan-4,.gspan-6,.gspan-8{grid-column:span 12;}
}

@media (max-width:940px){
  .nav-toggle{display:inline-flex;}
  .nav-bar__brand{display:inline-block;}

  .nav{
    position:absolute;
    top:100%;left:0;right:0;
    display:none;
    flex:none;
    padding:6px 0 14px;
    background:var(--canvas);
    border-top:1px solid var(--rule);
    box-shadow:0 24px 46px -30px rgba(10,83,52,.6);
    max-height:min(72vh,540px);
    overflow-y:auto;
  }
  .nav[data-open="true"]{display:block;}
  .nav__list{display:block;}
  .nav__item{border-bottom:1px solid var(--rule);}
  .nav__item:last-child{border-bottom:0;}
  .nav__link{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px var(--pad);
    border-radius:0;
    font-size:16px;
  }
  .nav__link::after{
    content:"→";
    font-family:var(--font-mono);
    font-size:13px;
    color:var(--muted);
  }
  .nav__link:hover{background:var(--green-100);}
  .nav__link[aria-current="page"]{background:var(--green-100);color:var(--green-900);}
  .nav__link[aria-current="page"]::after{color:var(--green);}
}

@media (max-width:720px){
  .brand-bar__tag{display:none;}
  .region-panel__list{grid-template-columns:1fr;}
}

@media (max-width:680px){
  body{font-size:16px;}
  .grid--2,.grid--3{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .brand-bar__meta{font-size:11.5px;}
  .region-switch{padding:7px 12px;font-size:13px;}
  .nav-toggle{padding:8px 12px;font-size:13px;}
  .frame{border-radius:4px 22px 4px 22px;}
}

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