@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');

/* ── 变量 ─────────────────────────────────────────── */
:root {
  --c-green: #87ff71;
  --c-yellow: #ffce5c;
  --c-dark: #192617;
  --c-dark2: #0f1a0e;
  --c-mid: #2a3d28;
  --c-text: #e8f5e3;
  --c-muted: #7aad6e;
  --c-card-bg: #1e2e1c;
  --radius-card: 28px;
  --font-mono: 'Space Mono', 'Courier New', monospace;
  --scroll-offset: 80px;
  --transition-base: 0.25s cubic-bezier(0.4,0,0.2,1);
}

/* ── 重置 ─────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;font-size:17px;background:var(--c-dark);color:var(--c-text);}
body{font-family:var(--font-mono);line-height:1.7;overflow-x:hidden;}
img{display:block;max-width:100%;height:auto;}
a{color:var(--c-green);text-decoration:none;}
a:hover{text-decoration:underline;}
ul{list-style:none;}
h1,h2,h3,h4{line-height:1.25;font-weight:700;}

/* ── 顶部公告条 ──────────────────────────────────── */
.top-bar{
  background:var(--c-yellow);
  color:var(--c-dark);
  font-family:var(--font-mono);
  font-size:0.75rem;
  font-weight:700;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0.35rem 1.25rem;
  letter-spacing:0.04em;
  position:sticky;
  top:0;
  z-index:200;
  border-bottom:3px solid var(--c-dark);
}
.top-bar-deco{letter-spacing:0.2em;opacity:0.6;}

/* ── 品牌行 ────────────────────────────────────────── */
.brand-row{
  background:var(--c-dark2);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0.75rem 1.5rem;
  border-bottom:4px solid var(--c-green);
  position:sticky;
  top:calc(1.5rem + 6px);
  z-index:190;
}
.brand-link{display:flex;align-items:center;gap:0.6rem;}
.brand-text{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:1.35rem;
  color:var(--c-green);
  letter-spacing:0.06em;
}
.brand-logo{height:42px;width:auto;}

/* ── 汉堡按钮 ─────────────────────────────────────── */
.burger-btn{
  background:var(--c-green);
  border:3px solid var(--c-dark);
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:10px 12px;
  border-radius:4px;
  min-height:44px;
  min-width:44px;
  justify-content:center;
  align-items:center;
  transition:background var(--transition-base),transform var(--transition-base);
}
.burger-btn:hover{background:var(--c-yellow);transform:rotate(-5deg);}
.burger-bar{display:block;width:22px;height:3px;background:var(--c-dark);border-radius:2px;}

/* ── 导航辅助行 ──────────────────────────────────── */
.nav-row{
  background:var(--c-mid);
  padding:0.4rem 1.5rem;
  display:flex;
  align-items:center;
  gap:1rem;
  border-bottom:2px dashed var(--c-green);
  font-size:0.72rem;
  color:var(--c-muted);
  letter-spacing:0.08em;
}
.nav-row-deco{color:var(--c-yellow);}

/* ── 全屏遮罩菜单 ────────────────────────────────── */
.fullscreen-menu{
  position:fixed;
  inset:0;
  background:var(--c-dark2);
  z-index:500;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity 0.3s ease;
}
.fullscreen-menu[hidden]{display:none;}
.fullscreen-menu.is-open{opacity:1;}
.menu-close{
  position:absolute;
  top:1.5rem;
  right:1.5rem;
  background:var(--c-yellow);
  border:3px solid var(--c-dark);
  color:var(--c-dark);
  font-size:1.5rem;
  font-family:var(--font-mono);
  font-weight:700;
  cursor:pointer;
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  transition:transform var(--transition-base);
}
.menu-close:hover{transform:rotate(90deg);}

.menu-aside{z-index:1;}
.menu-nav{}
.menu-list{display:flex;flex-direction:column;gap:1.2rem;text-align:center;}
.menu-list li{overflow:hidden;}
.nav-link{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:clamp(1.3rem,4vw,2rem);
  color:var(--c-text);
  letter-spacing:0.05em;
  padding:0.6rem 1.5rem;
  display:inline-block;
  border:3px solid transparent;
  border-radius:8px;
  transition:color var(--transition-base),border-color var(--transition-base),background var(--transition-base),transform var(--transition-base);
  min-height:44px;
}
.nav-link:hover{
  color:var(--c-dark);
  background:var(--c-green);
  border-color:var(--c-dark);
  transform:skewX(-3deg);
  text-decoration:none;
}

/* 菜单装饰形状 */
.menu-deco-shapes{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.deco-tri{position:absolute;width:0;height:0;}
.deco-tri--1{
  border-left:80px solid transparent;
  border-right:80px solid transparent;
  border-bottom:140px solid var(--c-green);
  top:-20px;left:-20px;
  opacity:0.12;
  transform:rotate(30deg);
}
.deco-tri--2{
  border-left:60px solid transparent;
  border-right:60px solid transparent;
  border-top:110px solid var(--c-yellow);
  bottom:30px;right:40px;
  opacity:0.15;
  transform:rotate(-20deg);
}
.deco-circle--1{
  position:absolute;
  width:200px;height:200px;
  border-radius:50%;
  border:18px solid var(--c-yellow);
  bottom:-60px;left:10%;
  opacity:0.1;
}
.deco-zag{
  position:absolute;
  top:30%;right:-10px;
  width:40px;height:200px;
  background:repeating-linear-gradient(
    135deg,
    var(--c-green) 0px,
    var(--c-green) 10px,
    transparent 10px,
    transparent 20px
  );
  opacity:0.15;
}

/* ── Hero ─────────────────────────────────────────── */
.hero-section{
  min-height:45vh;
  background:var(--c-dark);
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
  border-bottom:4px solid var(--c-green);
}
.hero-inner{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:2.5rem 1.5rem;
  display:grid;
  grid-template-columns:1fr;
  gap:2rem;
  position:relative;
  z-index:2;
}
@media(min-width:700px){
  .hero-inner{grid-template-columns:1fr 1fr;align-items:center;}
}
.hero-collage{
  position:relative;
  height:200px;
  display:none;
}
@media(min-width:700px){.hero-collage{display:block;}}
.collage-block{
  position:absolute;
  border-radius:var(--radius-card);
  border:4px solid var(--c-dark);
}
.collage-block--a{
  width:55%;height:70%;
  background:var(--c-green);
  top:0;left:0;
  transform:rotate(-4deg);
  clip-path:polygon(0 0,100% 0,100% 85%,85% 100%,0 100%);
  mix-blend-mode:screen;
  opacity:0.85;
}
.collage-block--b{
  width:55%;height:70%;
  background:var(--c-yellow);
  bottom:0;right:0;
  transform:rotate(5deg);
  clip-path:polygon(15% 0,100% 0,100% 100%,0 100%,0 15%);
  mix-blend-mode:overlay;
  opacity:0.8;
}
.collage-block--c{
  width:30%;height:30%;
  background:var(--c-mid);
  top:50%;left:50%;
  transform:translate(-50%,-50%) rotate(12deg);
  border:3px dashed var(--c-green);
  border-radius:50%;
}
.hero-copy{text-align:center;}
@media(min-width:700px){.hero-copy{text-align:left;}}
.hero-h1{
  font-size:clamp(1.6rem,5vw,3rem);
  color:var(--c-green);
  letter-spacing:0.04em;
  margin-bottom:1rem;
  text-shadow:3px 3px 0 var(--c-dark2);
}
.hero-sub{
  font-size:0.95rem;
  color:var(--c-muted);
  margin-bottom:1.5rem;
  max-width:480px;
}
.hero-cta{
  display:inline-block;
  background:var(--c-yellow);
  color:var(--c-dark);
  font-family:var(--font-mono);
  font-weight:700;
  padding:0.75rem 2rem;
  border:3px solid var(--c-dark);
  border-radius:8px;
  font-size:0.95rem;
  letter-spacing:0.06em;
  min-height:44px;
  transition:background var(--transition-base),transform var(--transition-base),box-shadow var(--transition-base);
}
.hero-cta:hover{
  background:var(--c-green);
  transform:translate(-3px,-3px);
  box-shadow:5px 5px 0 var(--c-dark);
  text-decoration:none;
}

/* ── 锯齿分隔条 ──────────────────────────────────── */
.zag-divider{
  height:24px;
  background:
    repeating-linear-gradient(
      90deg,
      var(--c-yellow) 0px, var(--c-yellow) 24px,
      var(--c-green)  24px,var(--c-green)  48px
    );
  clip-path:polygon(
    0 0,calc(100% / 20) 100%,calc(2*100%/20) 0,
    calc(3*100%/20) 100%,calc(4*100%/20) 0,
    calc(5*100%/20) 100%,calc(6*100%/20) 0,
    calc(7*100%/20) 100%,calc(8*100%/20) 0,
    calc(9*100%/20) 100%,calc(10*100%/20) 0,
    calc(11*100%/20) 100%,calc(12*100%/20) 0,
    calc(13*100%/20) 100%,calc(14*100%/20) 0,
    calc(15*100%/20) 100%,calc(16*100%/20) 0,
    calc(17*100%/20) 100%,calc(18*100%/20) 0,
    calc(19*100%/20) 100%,100% 0
  );
  border:none;
}

/* ── 主内容布局 ──────────────────────────────────── */
.main-content{
  max-width:1200px;
  margin:0 auto;
  padding:2.5rem 1.5rem;
  display:grid;
  grid-template-columns:1fr;
  gap:2rem;
}
@media(min-width:900px){
  .main-content{
    grid-template-columns:1fr 260px;
    align-items:start;
  }
}
.content-article{
  min-width:0;
}
.content-section.page-content-wrap{
  /* div 直接子元素 */
}

/* ── 正文内样式 ──────────────────────────────────── */
.page-content-wrap h2{
  font-size:clamp(1.2rem,3vw,1.7rem);
  color:var(--c-green);
  margin-top:2.5rem;
  margin-bottom:0.5rem;
  letter-spacing:0.04em;
}
.page-content-wrap h2 + hr{
  border:none;
  border-top:3px solid var(--c-yellow);
  margin-bottom:1.25rem;
}
.page-content-wrap h3{
  font-size:1.05rem;
  color:var(--c-yellow);
  margin-top:1.8rem;
  margin-bottom:0.5rem;
}
.page-content-wrap h3 + hr{
  border:none;
  border-top:2px dashed var(--c-muted);
  margin-bottom:1rem;
}
.page-content-wrap p{
  margin-bottom:1rem;
  color:var(--c-text);
  font-size:1rem;
}
.page-content-wrap ul,.page-content-wrap ol{
  padding-left:1.4rem;
  margin-bottom:1rem;
}
.page-content-wrap ul li{list-style:disc;}
.page-content-wrap ol li{list-style:decimal;}
.page-content-wrap li{margin-bottom:0.4rem;}
.page-content-wrap a{color:var(--c-green);border-bottom:1px dashed var(--c-green);}
.page-content-wrap a:hover{color:var(--c-yellow);}
.page-content-wrap blockquote{
  border-left:5px solid var(--c-yellow);
  background:var(--c-card-bg);
  padding:1rem 1.25rem;
  margin:1.25rem 0;
  border-radius:0 var(--radius-card) var(--radius-card) 0;
  font-style:italic;
  color:var(--c-muted);
}
.page-content-wrap table{
  width:100%;border-collapse:collapse;margin-bottom:1.25rem;font-size:0.9rem;
}
.page-content-wrap th{
  background:var(--c-green);color:var(--c-dark);padding:0.5rem 0.8rem;text-align:left;
}
.page-content-wrap td{
  border:1px solid var(--c-mid);padding:0.5rem 0.8rem;
}
.page-content-wrap tr:nth-child(even) td{background:var(--c-card-bg);}

/* div 卡片式区块（正文里的 div） */
.page-content-wrap div{
  background:var(--c-card-bg);
  border-radius:var(--radius-card);
  border:3px solid var(--c-mid);
  border-bottom:5px solid var(--c-green);
  padding:1.75rem 1.5rem;
  margin-bottom:2rem;
  position:relative;
  overflow:hidden;
  transition:border-color var(--transition-base),transform var(--transition-base);
}
.page-content-wrap div:hover{
  border-color:var(--c-yellow);
  transform:translateY(-2px);
}
.page-content-wrap div::before{
  content:'';
  position:absolute;
  top:-18px;right:-18px;
  width:60px;height:60px;
  border:6px solid var(--c-yellow);
  border-radius:50%;
  opacity:0.2;
}

/* scroll-margin for sections */
div[id]{scroll-margin-top:var(--scroll-offset,80px);}

/* ── 侧边栏 ──────────────────────────────────────── */
.site-sidebar{
  background:var(--c-card-bg);
  border:3px solid var(--c-green);
  border-radius:var(--radius-card);
  padding:1.5rem 1.25rem;
  position:sticky;
  top:calc(var(--scroll-offset,80px) + 1rem);
  display:none;
}
@media(min-width:900px){.site-sidebar{display:block;}}
.sidebar-nav{}
.sidebar-list{display:flex;flex-direction:column;gap:0.5rem;}
.sidebar-link{
  display:block;
  font-family:var(--font-mono);
  font-size:0.82rem;
  color:var(--c-muted);
  padding:0.55rem 0.75rem;
  border-radius:8px;
  border:2px solid transparent;
  min-height:40px;
  display:flex;align-items:center;
  transition:background var(--transition-base),color var(--transition-base),border-color var(--transition-base);
  letter-spacing:0.03em;
}
.sidebar-link:hover{
  background:var(--c-green);
  color:var(--c-dark);
  border-color:var(--c-dark);
  text-decoration:none;
}
.sidebar-badge{
  margin-top:1.25rem;
  background:var(--c-yellow);
  color:var(--c-dark);
  font-weight:700;
  font-size:0.78rem;
  text-align:center;
  padding:0.5rem;
  border-radius:12px;
  letter-spacing:0.08em;
  transform:rotate(-2deg);
}

/* ── 页脚 ─────────────────────────────────────────── */
.site-footer{
  background:var(--c-dark2);
  border-top:4px solid var(--c-green);
  padding:3rem 1.5rem 2rem;
  display:grid;
  grid-template-columns:1fr;
  gap:2rem;
  margin-top:3rem;
}
@media(min-width:700px){
  .site-footer{grid-template-columns:1.5fr 1fr 1fr;}
}
.site-footer div{border:none;background:transparent;border-radius:0;padding:0;margin:0;}
.site-footer div:hover{transform:none;border-color:transparent;}
.site-footer div::before{display:none;}

.footer-brand-name{
  font-size:1.25rem;
  color:var(--c-green);
  margin-bottom:0.5rem;
}
.footer-brand-name + hr{
  border:none;
  border-top:3px solid var(--c-yellow);
  margin-bottom:1rem;
}
.footer-desc{font-size:0.85rem;color:var(--c-muted);}
.footer-deco{display:flex;gap:0.75rem;margin-top:1rem;align-items:center;}
.fdeco-tri{
  display:inline-block;
  width:0;height:0;
  border-left:14px solid transparent;
  border-right:14px solid transparent;
  border-bottom:22px solid var(--c-yellow);
  opacity:0.5;
}
.fdeco-tri--r{border-bottom-color:var(--c-green);}
.fdeco-dot{
  width:18px;height:18px;
  background:var(--c-muted);
  border-radius:50%;
  opacity:0.4;
}

.footer-nav-title{font-size:1rem;color:var(--c-yellow);margin-bottom:0.5rem;}
.footer-nav-title + hr{
  border:none;
  border-top:2px dashed var(--c-muted);
  margin-bottom:0.75rem;
}
.footer-nav-list{display:flex;flex-direction:column;gap:0.4rem;}
.footer-nav-link{
  font-size:0.85rem;
  color:var(--c-muted);
  padding:0.35rem 0;
  min-height:40px;
  display:flex;align-items:center;
  border-bottom:1px dashed var(--c-mid);
  transition:color var(--transition-base);
}
.footer-nav-link:hover{color:var(--c-green);text-decoration:none;}

.footer-copy-sec{}
.footer-copyright{font-size:0.8rem;color:var(--c-muted);margin-bottom:0.5rem;}
.footer-disclaimer{font-size:0.75rem;color:var(--c-mid);line-height:1.6;}

/* ── Scroll reveal ───────────────────────────────── */
@media(prefers-reduced-motion:no-preference){
  .reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity 0.55s ease,transform 0.55s ease;
  }
  .reveal.revealed{opacity:1;transform:none;}
}

/* ── Memphis 背景纹理 ────────────────────────────── */
.site-wrapper{
  background-image:
    radial-gradient(circle at 20% 80%, rgba(135,255,113,0.04) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255,206,92,0.04) 0%, transparent 50%);
}

/* ── 滚动条 ──────────────────────────────────────── */
::-webkit-scrollbar{width:8px;background:var(--c-dark2);}
::-webkit-scrollbar-thumb{background:var(--c-mid);border-radius:4px;}
::-webkit-scrollbar-thumb:hover{background:var(--c-green);}

/* ── 无障碍焦点 ──────────────────────────────────── */
:focus-visible{
  outline:3px solid var(--c-yellow);
  outline-offset:2px;
  border-radius:4px;
}

/* ── 移动端修正 ──────────────────────────────────── */
@media(max-width:480px){
  .top-bar{font-size:0.68rem;padding:0.3rem 0.8rem;}
  .brand-row{padding:0.6rem 1rem;}
  .brand-text{font-size:1.1rem;}
  .hero-h1{font-size:1.4rem;}
  .hero-section{min-height:auto;padding:1.5rem 0;}
  .hero-inner{padding:1.5rem 1rem;}
  .main-content{padding:1.5rem 1rem;}
  .page-content-wrap div{padding:1.25rem 1rem;}
  .site-footer{padding:2rem 1rem 1.5rem;}
  .nav-link{font-size:1.2rem;padding:0.5rem 1rem;}
}

/* ── hr 基础样式（内容区外的） ───────────────────── */
hr{
  border:none;
  border-top:2px solid var(--c-mid);
  margin:1rem 0;
}