@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

:root{
  --ink:#192617;
  --lime:#87ff71;
  --yellow:#ffce5c;
  --paper:#f5f7ea;
  --paper2:#fdfef4;
  --rail:208px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:17px;
  line-height:1.7;
  font-weight:400;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-image:radial-gradient(rgba(25,38,23,.14) 1px, transparent 1px);
  background-size:22px 22px;
  opacity:.55;
}
img{max-width:100%}

/* 顶部细条 */
.ticker{
  position:fixed;
  top:0;left:0;right:0;
  height:34px;
  z-index:60;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:repeating-linear-gradient(135deg,var(--lime) 0 16px,var(--yellow) 16px 32px);
  border-bottom:3px solid var(--ink);
}
.ticker span{
  font-size:16px;
  font-weight:600;
  letter-spacing:.3em;
  padding-left:16px;
  white-space:nowrap;
}

/* 左侧固定竖排导航 */
.rail{
  position:fixed;
  top:34px;left:0;bottom:0;
  width:var(--rail);
  z-index:55;
  background:var(--ink);
  padding:16px 14px;
  display:flex;
  flex-direction:column;
  gap:12px;
  border-right:3px solid var(--ink);
}
.mark{
  width:52px;height:52px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:var(--lime);
  color:var(--ink);
  font-weight:600;
  font-size:24px;
  text-decoration:none;
  border:3px solid var(--yellow);
  transform:rotate(-7deg);
  overflow:hidden;
}
.mark img{display:block;width:100%;height:100%;object-fit:cover}

.drawer{display:flex;flex-direction:column;gap:10px;min-height:0}
.drawer > summary{
  list-style:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:11px 16px;
  border-radius:999px;
  border:2px dashed var(--lime);
  color:var(--lime);
  font-size:16px;
  font-weight:600;
  letter-spacing:.14em;
}
.drawer > summary::-webkit-details-marker{display:none}
.drawer > summary::after{
  content:"";
  width:8px;height:8px;
  margin-left:9px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
}
.drawer[open] > summary::after{transform:rotate(-135deg) translateY(-2px)}

.pills{
  list-style:none;
  margin:10px 0 0;
  padding:0 2px 4px;
  display:grid;
  gap:8px;
  overflow-y:auto;
  max-height:calc(100vh - 250px);
}
.pill{
  display:block;
  padding:11px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  color:#e9f6df;
  text-decoration:none;
  font-size:16px;
  line-height:1.4;
  border:2px solid transparent;
  transition:background .18s,color .18s,transform .18s;
}
.pill:hover,.pill:focus-visible{
  background:var(--lime);
  color:var(--ink);
  border-color:var(--yellow);
  transform:translateX(3px);
}

/* 页面骨架 */
.page{
  margin-left:var(--rail);
  padding-top:34px;
  position:relative;
  z-index:1;
}

/* 主视觉 */
.hero{
  position:relative;
  overflow:hidden;
  background:var(--lime);
  clip-path:polygon(0 0,100% 0,100% 86%,0 100%);
  min-height:70vh;
  display:flex;
  align-items:center;
  gap:32px;
  padding:clamp(28px,6vw,64px) clamp(20px,5vw,64px) clamp(80px,10vw,120px);
}
.deco{position:absolute;inset:0;pointer-events:none;z-index:0}
.deco .s{position:absolute;display:block}
.s1{
  width:210px;height:210px;border-radius:50%;
  background:var(--yellow);border:4px dashed var(--ink);
  top:8%;right:6%;opacity:.92;
  animation:spin 28s linear infinite;
}
.s2{
  width:120px;height:120px;bottom:16%;left:3%;
  background:var(--ink);transform:rotate(18deg);
  clip-path:polygon(50% 0,100% 100%,0 100%);
  opacity:.85;
}
.s3{width:88px;height:88px;border:5px solid var(--ink);border-radius:50%;bottom:9%;right:24%}
.s4{
  width:150px;height:22px;top:11%;left:2%;
  background:repeating-linear-gradient(90deg,var(--ink) 0 8px,transparent 8px 18px);
  transform:rotate(-6deg);
  opacity:.85;
}
.hero-copy{position:relative;z-index:1;max-width:660px}
.badge{
  display:inline-block;
  margin:0 0 18px;
  padding:6px 16px;
  border-radius:999px;
  background:var(--ink);
  color:var(--lime);
  font-size:16px;
  font-weight:600;
  letter-spacing:.16em;
  transform:rotate(-3deg);
}
.hero h1{
  margin:0 0 18px;
  font-size:clamp(32px,5.6vw,62px);
  line-height:1.08;
  letter-spacing:-.025em;
  font-weight:600;
}
.lead{margin:0 0 28px;font-size:18px;line-height:1.65;max-width:44ch;color:#16220f}
.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:12px 28px;
  border-radius:999px;
  background:var(--ink);
  color:var(--lime);
  text-decoration:none;
  font-weight:600;
  font-size:16px;
  border:3px solid var(--ink);
  box-shadow:6px 6px 0 var(--yellow);
  transition:transform .16s,box-shadow .16s;
}
.cta:hover{transform:translate(-3px,-3px);box-shadow:11px 11px 0 var(--yellow)}
.hero-art{
  margin:0;
  position:relative;
  z-index:1;
  flex:0 0 auto;
  width:min(300px,32vw);
  border:4px solid var(--ink);
  border-radius:10px;
  overflow:hidden;
  background:var(--paper2);
  transform:rotate(3deg);
  box-shadow:10px 10px 0 rgba(25,38,23,.9);
}
.hero-art img{display:block;width:100%;height:auto}

/* 双栏 */
.cols{
  display:grid;
  grid-template-columns:206px minmax(0,1fr);
  gap:34px;
  max-width:1180px;
  margin:0 auto;
  padding:46px clamp(18px,4vw,56px) 56px;
}

/* 侧栏 */
.side{
  position:sticky;
  top:64px;
  align-self:start;
  background:var(--paper2);
  border:3px solid var(--ink);
  border-radius:10px;
  padding:14px 16px 18px;
  box-shadow:7px 7px 0 rgba(25,38,23,.14);
  transform:rotate(-1.2deg);
}
.side h2{margin:0;font-size:17px;letter-spacing:.14em;font-weight:600}
.side hr{border:0;border-top:3px solid var(--ink);margin:10px 0 12px}
.jump{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.jump a{
  display:block;
  padding:9px 4px;
  color:var(--ink);
  text-decoration:none;
  font-size:16px;
  border-bottom:2px dotted rgba(25,38,23,.35);
}
.jump li:last-child a{border-bottom:0}
.jump a:hover{background:var(--lime)}
.jump a.on{background:var(--yellow)}

/* 正文 */
main{min-width:0}
article{max-width:760px}
article > div{padding:36px 0;scroll-margin-top:96px}
article > div + div{border-top:3px dashed rgba(25,38,23,.3)}
article h2{
  position:relative;
  margin:0 0 8px;
  padding-left:24px;
  font-size:clamp(23px,3vw,33px);
  line-height:1.25;
  letter-spacing:-.015em;
  font-weight:600;
}
article h2::before{
  content:"";
  position:absolute;
  left:0;top:.42em;
  width:12px;height:12px;
  background:var(--yellow);
  border:3px solid var(--ink);
  transform:rotate(12deg);
}
article hr{border:0;border-top:3px solid var(--ink);width:88px;margin:0 0 18px}
article h3{font-size:20px;line-height:1.4;margin:26px 0 8px;letter-spacing:-.01em}
article p{margin:0 0 16px}
article ul,article ol{padding-left:24px;margin:0 0 18px}
article li{margin-bottom:8px}
article a{
  color:var(--ink);
  text-decoration:underline;
  text-decoration-thickness:3px;
  text-decoration-color:var(--lime);
}
article a:hover{background:var(--yellow);text-decoration-color:var(--ink)}
article strong{font-weight:600}
article img{height:auto;border-radius:10px;border:3px solid var(--ink)}
article blockquote{
  margin:0 0 18px;
  padding:14px 18px;
  background:var(--paper2);
  border-left:8px solid var(--lime);
  border-radius:10px;
}

/* 页脚 */
.foot{
  position:relative;
  z-index:1;
  background:var(--ink);
  color:#eaf6e1;
  border-top:8px solid var(--lime);
  padding:44px clamp(18px,4vw,56px) 26px;
}
.foot-cta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-bottom:28px;
  border-bottom:3px dashed rgba(255,255,255,.28);
}
.foot-big{
  margin:0;
  font-size:clamp(26px,4.6vw,48px);
  line-height:1.1;
  letter-spacing:-.02em;
  font-weight:600;
  color:var(--lime);
}
.cta-onink{background:var(--yellow);color:var(--ink);border-color:var(--yellow);box-shadow:6px 6px 0 var(--lime)}
.cta-onink:hover{box-shadow:11px 11px 0 var(--lime)}
.foot-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px 32px;
  padding:22px 0 0;
}
.foot address{font-style:normal;font-size:16px;font-weight:600;letter-spacing:.04em}
.foot-links{list-style:none;display:flex;flex-wrap:wrap;gap:6px 20px;margin:0;padding:0}
.foot-links a{
  display:inline-block;
  padding:10px 0;
  color:#eaf6e1;
  text-decoration:none;
  font-size:16px;
  border-bottom:2px dotted transparent;
}
.foot-links a:hover{color:var(--lime);border-bottom-color:var(--lime)}
.copy{
  margin:18px 0 0;
  padding-top:14px;
  border-top:2px dotted rgba(255,255,255,.24);
  font-size:16px;
  opacity:.8;
}

/* 进场 */
.js article > div{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.js article > div.in{opacity:1;transform:none}

@keyframes spin{to{transform:rotate(360deg)}}

/* 移动端 */
@media (max-width:900px){
  .rail{
    top:34px;left:0;right:0;bottom:auto;
    width:auto;height:62px;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    padding:8px 12px;
    border-right:0;
    border-bottom:3px solid var(--lime);
  }
  .mark{width:44px;height:44px;font-size:20px;border-radius:12px}
  .drawer{position:relative}
  .drawer > summary{min-height:44px;padding:10px 16px}
  .pills{
    position:absolute;
    right:0;
    top:calc(100% + 10px);
    min-width:236px;
    max-width:76vw;
    max-height:66vh;
    padding:10px;
    background:var(--ink);
    border:3px solid var(--lime);
    border-radius:16px;
    box-shadow:0 12px 0 rgba(25,38,23,.25);
    z-index:70;
  }
  .page{margin-left:0;padding-top:96px}
  .hero{
    min-height:0;
    flex-direction:column;
    align-items:flex-start;
    padding:30px 18px 62px;
    clip-path:polygon(0 0,100% 0,100% 92%,0 100%);
  }
  .hero-art{width:100%;max-width:340px;transform:rotate(1.5deg)}
  .s1{width:132px;height:132px;top:auto;bottom:8%;right:-22px}
  .s4{display:none}
  .cols{grid-template-columns:1fr;gap:22px;padding:26px 16px 40px}
  .side{position:static;transform:none}
  .jump{grid-template-columns:1fr 1fr;gap:2px 12px}
  article{max-width:none}
}
@media (max-width:560px){
  .ticker span{letter-spacing:.2em}
  .foot-row{flex-direction:column;align-items:flex-start}
  .foot-cta{gap:18px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js article > div{opacity:1;transform:none}
}

button[aria-expanded]{min-width:44px;min-height:44px}