:root{
  --ink:#192617;
  --green:#87ff71;
  --yellow:#ffce5c;
  --paper:#f4ffec;
  --card:#ffffff;
  --soft:#efffdc;
  --muted:#3d5b3c;
  --pale:#e9ffdb;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:Karla,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  font-size:17px;
  line-height:1.75;
  color:var(--ink);
  background:var(--paper);
  background-image:radial-gradient(rgba(25,38,23,.14) 1px,transparent 1px);
  background-size:26px 26px;
  overflow-x:hidden;
}
h1,h2,h3{font-family:"Playfair Display SC","Songti SC",Georgia,"Times New Roman",serif;font-weight:700;line-height:1.14;margin:0 0 .6rem;letter-spacing:.01em}
p{margin:0 0 1rem}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:3px solid var(--green);outline-offset:2px}

/* 顶栏：品牌独占一行，菜单行平铺，右侧按钮 */
.topbar{background:var(--pale);border-bottom:3px solid var(--ink);position:relative;z-index:30}
.topbar::after{
  content:"";position:absolute;top:-16px;right:6%;width:74px;height:48px;pointer-events:none;
  background:var(--yellow);clip-path:polygon(0 0,100% 22%,70% 100%,0 72%);
}
.brandrow{max-width:1180px;margin:0 auto;padding:.85rem 1rem .35rem}
.brand{
  display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;
  font-family:"Playfair Display SC",Georgia,serif;font-size:1.55rem;line-height:1.2;
}
.brand .mark{width:28px;height:28px;flex:none;display:block;object-fit:cover;
  background:var(--green);border:2px solid var(--ink);border-radius:50%;transform:rotate(-9deg)}
.menurow{max-width:1180px;margin:0 auto;padding:0 1rem .7rem;display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .6rem}
.menu{display:flex;flex-wrap:wrap;gap:0 .45rem;flex:1 1 260px;min-width:0}
.navlink{
  display:inline-flex;align-items:center;min-height:40px;padding:.4rem .5rem;
  font-size:1rem;font-weight:600;text-decoration:none;border-bottom:3px solid transparent;
  transition:border-color .18s,color .18s,transform .18s;
}
.navlink:hover,.navlink:focus-visible{border-bottom-color:var(--green);transform:translateY(-2px)}
.cta{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:.55rem 1.15rem;background:var(--yellow);color:var(--ink);
  font-weight:700;font-size:1rem;text-decoration:none;
  border:2px solid var(--ink);border-radius:10px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);
  transition:background .18s,transform .18s;
}
.cta:hover{background:var(--green);transform:translate(-2px,-2px)}

/* 首屏 */
.hero{
  position:relative;overflow:hidden;
  min-height:70vh;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:clamp(2.4rem,7vw,4.4rem) 1rem clamp(4rem,11vw,6.5rem);
  background:var(--ink);color:var(--pale);
  clip-path:polygon(0 0,100% 0,100% 86%,0 100%);
}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.18) brightness(.5) saturate(1.3)}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(25,38,23,.45),rgba(25,38,23,.85));
}
.hero-shapes{position:absolute;inset:0;z-index:2;pointer-events:none;}
.hero-shapes .sh{position:absolute;display:block;mix-blend-mode:screen;opacity:.9}
.sh1{width:150px;height:150px;background:var(--green);clip-path:polygon(50% 0,100% 100%,0 100%);top:9%;left:-42px}
.sh2{width:112px;height:112px;border-radius:50%;background:var(--yellow);bottom:15%;right:-26px}
.sh3{width:124px;height:30px;background:var(--green);top:24%;right:9%;border-radius:20px;transform:rotate(-22deg)}
.sh4{width:22px;height:22px;border-radius:50%;background:var(--yellow);bottom:24%;left:15%}
.hero-inner{position:relative;z-index:3;max-width:820px}
.hero-h1{font-size:clamp(2.1rem,7.4vw,4.3rem);color:#f7ffec;margin:0 0 .6rem;text-shadow:3px 3px 0 rgba(25,38,23,.8)}
.hero-h1::after{content:"";display:block;width:110px;height:10px;margin:.85rem auto 0;background:var(--yellow);border-radius:4px;transform:rotate(-3deg)}
.hero-lead{max-width:48ch;margin:0 auto;color:#dcffcd;font-size:1.06rem}
.hero-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:52px;
  margin-top:1.5rem;padding:.8rem 1.9rem;background:var(--green);color:var(--ink);
  font-weight:700;font-size:1.05rem;text-decoration:none;
  border:2px solid #f7ffec;border-radius:10px;transform:rotate(-1.5deg);
  transition:transform .2s,background .2s;
}
.hero-btn:hover{background:var(--yellow);transform:rotate(0) scale(1.04)}

/* 主体：正文与右侧栏 */
.page{max-width:1180px;margin:0 auto;padding:clamp(1.6rem,4vw,3rem) 1rem 2.6rem;display:grid;gap:2rem;align-items:start}
.doc{min-width:0}
.doc [id]{scroll-margin-top:22px}
.doc > div{
  position:relative;background:var(--card);border:2px solid var(--ink);border-radius:10px;
  padding:clamp(1.1rem,2.6vw,2rem);margin:0 0 1.6rem;transition:transform .2s;
}
.doc > div:nth-child(even){border-style:dashed}
.doc > div::before{
  content:"";position:absolute;right:14px;top:-11px;width:26px;height:22px;background:var(--green);
  clip-path:polygon(50% 0,100% 100%,0 100%);transform:rotate(14deg);
}
.doc > div:hover{transform:translateY(-3px) rotate(-.25deg)}
.doc h2{font-size:clamp(1.4rem,3.4vw,2rem);display:inline-block}
.doc h2::after{content:"";display:block;width:70px;height:8px;margin-top:.45rem;background:var(--green);
  border:1px solid var(--ink);border-radius:3px;transform:rotate(-2deg)}
.doc h3{font-size:1.2rem;margin-top:1.4rem}
.subtitle{color:var(--muted);margin:0 0 1rem;font-size:1rem}
.doc ul,.doc ol{padding-left:1.25rem;margin:0 0 1rem}
.doc li{margin:.35rem 0}
.doc a{color:#12470f;text-decoration:none;border-bottom:2px dotted var(--green);font-weight:600}
.doc a:hover{border-bottom-style:solid;background:rgba(135,255,113,.4)}
.doc blockquote{margin:1rem 0;padding:.6rem 1rem;border-left:6px solid var(--yellow);background:#fbfee9}
.doc table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:1rem}
.doc th,.doc td{border:1px solid rgba(25,38,23,.4);padding:.5rem .6rem;text-align:left}
.doc pre{overflow-x:auto;padding:.8rem;background:#f2fbe6;border:2px dashed var(--ink);border-radius:10px}

.side{
  position:relative;border:2px dashed var(--ink);border-radius:10px;background:var(--soft);
  padding:1.1rem 1rem 1.1rem;
}
.side::before{
  content:"";position:absolute;left:-9px;top:-13px;width:34px;height:34px;background:var(--yellow);
  clip-path:polygon(50% 0,100% 100%,0 100%);transform:rotate(-12deg);
}
.side-h{font-size:1.18rem;margin:0 0 .2rem}
.side .subtitle{margin:0 0 .8rem;font-size:1rem}
.side-list{list-style:none;margin:0 0 1rem;padding:0}
.side-list a{
  display:block;min-height:40px;padding:.5rem .3rem;text-decoration:none;font-weight:600;
  border-bottom:1px dotted rgba(25,38,23,.45);transition:background .16s,padding-left .16s;
}
.side-list a:hover{background:var(--green);padding-left:.6rem}
.totop{
  display:block;text-align:center;min-height:44px;padding:.6rem;background:var(--ink);color:var(--pale);
  text-decoration:none;border-radius:10px;font-weight:700;transition:background .18s;
}
.totop:hover{background:#2b4229}

/* 页脚 */
.foot{background:var(--ink);color:var(--pale);border-top:7px solid var(--green);position:relative;overflow:hidden}
.foot::before{
  content:"";position:absolute;left:-30px;bottom:-30px;width:150px;height:150px;border-radius:50%;
  background:var(--yellow);opacity:.14;
}
.foot-cta{
  position:relative;max-width:1180px;margin:0 auto;text-align:center;
  padding:clamp(2rem,5vw,3.2rem) 1rem 1.7rem;border-bottom:2px dashed rgba(233,255,219,.35);
}
.foot-kicker{font-family:"Playfair Display SC",Georgia,serif;font-size:clamp(1.6rem,5vw,2.7rem);margin:0 0 1.1rem;color:var(--yellow)}
.foot-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:.75rem 1.9rem;
  background:var(--green);color:var(--ink);border:2px solid var(--pale);border-radius:10px;
  font-weight:700;font-size:1rem;text-decoration:none;transition:transform .2s,background .2s;
}
.foot-btn:hover{background:var(--yellow);transform:rotate(-1.5deg)}
.foot-row{
  position:relative;max-width:1180px;margin:0 auto;padding:1.3rem 1rem 1.7rem;
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
}
.foot-brand{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;font-weight:700;font-size:1rem}
.foot-brand .mark{width:24px;height:24px;flex:none;display:block;object-fit:cover;
  background:var(--yellow);border:2px solid var(--pale);border-radius:50%}
.foot-nav{min-width:0}
.foot-nav dl{display:flex;flex-wrap:wrap;gap:.1rem .4rem;margin:0;align-items:center}
.foot-nav dt{color:var(--green);font-size:1rem;letter-spacing:.08em}
.foot-nav dd{margin:0 .7rem 0 0}
.foot-nav a{
  display:inline-flex;align-items:center;min-height:40px;padding:.3rem .15rem;
  color:var(--pale);text-decoration:none;border-bottom:2px dotted rgba(233,255,219,.5);
}
.foot-nav a:hover{color:var(--green);border-bottom-style:solid}
.foot-copy{margin:0;width:100%;text-align:center;font-size:1rem;color:#c3e5b4}

@media (min-width:840px){
  .page{grid-template-columns:minmax(0,1fr) 288px;padding-top:3rem}
  .doc [id]{scroll-margin-top:150px}
  .topbar{position:sticky;top:0}
  .side{position:sticky;top:152px}
  .foot-copy{width:auto;text-align:right}
}

@media (max-width:520px){
  .hero{clip-path:polygon(0 0,100% 0,100% 92%,0 100%);min-height:66vh}
  .sh1{width:104px;height:104px;left:-32px}
  .sh3{width:90px;height:24px}
  .brand{font-size:1.32rem}
  .doc > div::before{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}
</style>

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