@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew:wght@300;400;500;700&display=swap');

:root{
  --g:#87ff71;
  --y:#ffce5c;
  --ink:#192617;
  --paper:#f2ffe8;
  --paper2:#ddf9cd;
  --mint:#eafff0;
  --line:3px;
}

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

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  max-width:100%;
  overflow-x:hidden;
  overflow-x:clip;
}

body{
  margin:0;
  max-width:100%;
  overflow-x:hidden;
  overflow-x:clip;
  font-family:'Noto Sans Hebrew',system-ui,-apple-system,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
  font-size:17px;
  line-height:1.7;
  color:var(--mint);
  background-color:var(--ink);
  background-image:radial-gradient(rgba(135,255,113,.17) 1.5px, transparent 1.6px);
  background-size:22px 22px;
}

img{max-width:100%}

a{color:inherit}

/* ---------- 顶部细条 ---------- */
.ticker{
  background:var(--y);
  color:var(--ink);
  border-bottom:var(--line) solid var(--ink);
  overflow:hidden;
  max-width:100%;
  font-weight:700;
  letter-spacing:.1em;
  font-size:16px;
}
.ticker-in{
  display:flex;
  align-items:center;
  gap:16px;
  width:max-content;
  padding:4px 0;
  white-space:nowrap;
}
.tick-dot{
  width:12px;height:12px;
  background:var(--ink);
  flex:none;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}

/* ---------- 页头 ---------- */
.mast{
  position:sticky;
  top:0;
  z-index:30;
  display:flex;
  align-items:center;
  gap:12px;
  max-width:100%;
  padding:9px 14px;
  background:var(--ink);
  border-bottom:var(--line) solid var(--g);
}

.logo{
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border:3px solid var(--ink);
  border-radius:10px;
  background:var(--y);
  overflow:hidden;
  text-decoration:none;
  transform:rotate(-4deg);
}
.logo:focus-visible{outline:3px solid var(--g);outline-offset:3px}
.logomark{width:100%;height:100%;object-fit:cover;display:block;border-radius:0}
.logotext{font-weight:700;color:var(--ink);font-size:20px;line-height:1}
.glyph{
  display:block;
  width:100%;
  height:100%;
  background:var(--ink);
  clip-path:polygon(50% 12%,90% 88%,10% 88%);
}

.navwrap{
  flex:1;
  min-width:0;
  overflow-x:auto;
  scrollbar-width:none;
}
.navwrap::-webkit-scrollbar{display:none}

.navlist{
  display:flex;
  gap:8px;
  margin:0;
  padding:3px 2px;
  list-style:none;
}

.navlist a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 16px;
  border:2px solid var(--g);
  border-radius:999px;
  background:var(--ink);
  color:var(--g);
  font-weight:700;
  font-size:16px;
  white-space:nowrap;
  text-decoration:none;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.navlist a:hover,
.navlist a:focus-visible{
  background:var(--g);
  color:var(--ink);
  transform:rotate(-2deg);
}
.navlist li:first-child a{
  background:var(--y);
  color:var(--ink);
  border-color:var(--ink);
}

/* ---------- 头图 ---------- */
.hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:18px;
  align-items:center;
  max-width:1120px;
  margin:0 auto;
  padding:26px 18px 30px;
  min-height:45vh;
  overflow:hidden;
}

.hero-copy{
  position:relative;
  min-width:0;
  padding-left:4px;
}

.hero-copy .num{
  position:absolute;
  left:-6px;
  top:-34px;
  z-index:0;
  font-size:clamp(5rem,16vw,10rem);
  font-weight:700;
  line-height:.8;
  letter-spacing:-.05em;
  color:transparent;
  -webkit-text-stroke:2px rgba(255,206,92,.55);
  pointer-events:none;
}

.hero h1{
  position:relative;
  z-index:1;
  margin:0;
  font-size:clamp(1.85rem,5.2vw,3.2rem);
  line-height:1.18;
  color:var(--g);
  text-shadow:4px 4px 0 rgba(255,206,92,.28);
  transform:rotate(-1deg);
  overflow-wrap:break-word;
}

.collage{
  position:relative;
  margin:0;
  min-width:0;
  min-height:200px;
}
.collage::before{
  content:"";
  position:absolute;
  left:-4px;
  top:-12px;
  width:54px;
  height:54px;
  background:var(--y);
  clip-path:polygon(50% 0,100% 100%,0 100%);
  transform:rotate(-12deg);
  z-index:2;
}
.collage::after{
  content:"";
  position:absolute;
  right:6px;
  top:14px;
  width:44px;
  height:44px;
  border-radius:50%;
  border:4px dashed var(--g);
  z-index:2;
}

.collage-img{
  display:block;
  object-fit:cover;
  border:var(--line) solid var(--ink);
  border-radius:10px;
  background:var(--paper2);
}
.collage-img-1{
  width:74%;
  aspect-ratio:4/3;
  transform:rotate(-4deg);
}
.collage-img-2{
  position:absolute;
  right:0;
  bottom:-10px;
  width:52%;
  aspect-ratio:1/1;
  transform:rotate(5deg);
  border-color:var(--y);
}

/* ---------- 主体两栏 ---------- */
.stage{
  display:grid;
  grid-template-columns:236px minmax(0,1fr);
  gap:24px;
  max-width:1120px;
  margin:0 auto;
  padding:8px 18px 40px;
  align-items:start;
}

.rail{
  position:sticky;
  top:88px;
  min-width:0;
  background:var(--y);
  color:var(--ink);
  border:var(--line) solid var(--ink);
  border-radius:10px;
  padding:12px 12px 14px;
  transform:rotate(-.8deg);
}
.rail h2{
  margin:0 0 6px;
  font-size:1.05rem;
  line-height:1.4;
  color:var(--ink);
  letter-spacing:.02em;
  overflow-wrap:break-word;
}
.rail hr{
  margin:0 0 10px;
  border:0;
  border-top:3px dashed var(--ink);
}
.rail ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:1px;
}
.rail a{
  display:block;
  min-height:40px;
  padding:7px 6px;
  font-size:16px;
  font-weight:600;
  text-decoration:none;
  color:var(--ink);
  border-bottom:2px dotted rgba(25,38,23,.45);
}
.rail a:hover,
.rail a:focus-visible{
  background:var(--g);
  border-radius:7px;
  padding-left:11px;
}

/* ---------- 正文 ---------- */
.article{
  position:relative;
  min-width:0;
  max-width:100%;
  background:var(--paper);
  color:var(--ink);
  border:4px solid var(--ink);
  border-radius:10px;
  padding:22px 20px 34px;
  overflow-wrap:break-word;
  word-break:break-word;
}
.article::before{
  content:"";
  position:absolute;
  right:14px;
  top:-11px;
  width:70px;
  height:22px;
  background:var(--g);
  border:3px solid var(--ink);
  border-radius:6px;
  transform:rotate(3deg);
}

.article section{
  scroll-margin-top:96px;
  padding-top:26px;
  border-top:3px dotted rgba(25,38,23,.28);
}
.article section:first-child{
  padding-top:6px;
  border-top:0;
}

.article h2{
  margin:26px 0 4px;
  font-size:clamp(1.25rem,3.4vw,1.6rem);
  line-height:1.35;
  background:var(--g);
  color:var(--ink);
  border:3px solid var(--ink);
  border-radius:10px;
  padding:10px 14px;
  transform:rotate(-.7deg);
}
.article section:first-child h2{margin-top:8px}

.article h2 + hr{
  margin:8px 0 18px;
  border:0;
  border-top:4px dashed var(--y);
  width:58%;
}

.article h3{
  margin:22px 0 8px;
  font-size:1.15rem;
  line-height:1.4;
  color:var(--ink);
  border-left:8px solid var(--y);
  padding-left:10px;
}
.article h3 + hr{
  margin:6px 0 14px;
  border:0;
  border-top:3px dotted rgba(25,38,23,.4);
}

.article p,
.article li{
  font-size:1.0625rem;
  line-height:1.78;
}
.article p{margin:0 0 1.05em}
.article ul,
.article ol{margin:0 0 1.1em;padding-left:1.35em}
.article li{margin:0 0 .45em}

.article a{
  color:#136a2a;
  font-weight:600;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}
.article a:hover{background:var(--y);border-radius:4px}

.article strong{background:var(--y);padding:0 .18em;border-radius:4px}

.article blockquote{
  margin:0 0 1.2em;
  padding:10px 14px;
  border-left:8px solid var(--g);
  background:var(--paper2);
  border-radius:0 10px 10px 0;
}

.article figure{
  margin:0 0 1.2em;
  border:3px solid var(--ink);
  border-radius:10px;
  overflow:hidden;
  background:var(--paper2);
}
.article figure img{display:block;width:100%;height:auto}

.article table{
  display:block;
  max-width:100%;
  overflow-x:auto;
  border-collapse:collapse;
  margin:0 0 1.2em;
  font-size:1rem;
}
.article th,
.article td{
  border:2px solid rgba(25,38,23,.45);
  padding:7px 10px;
  text-align:left;
  vertical-align:top;
}
.article pre{
  max-width:100%;
  overflow-x:auto;
  background:var(--paper2);
  border:3px dotted rgba(25,38,23,.4);
  border-radius:10px;
  padding:10px 12px;
}
.article code{font-size:.95em}
.article iframe,
.article video{max-width:100%}

.article hr{
  border:0;
  border-top:3px dashed rgba(25,38,23,.45);
  margin:20px 0;
}

/* ---------- 页脚 ---------- */
.foot{
  border-top:6px solid var(--g);
  background:#101b0f;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr);
  gap:22px;
  max-width:1120px;
  margin:0 auto;
  padding:30px 18px 0;
}

.foot section{min-width:0}
.foot-a{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.logo-sm{transform:rotate(4deg)}
.fbrand{
  margin:0;
  font-weight:700;
  color:var(--g);
  font-size:1.05rem;
  line-height:1.4;
  overflow-wrap:break-word;
}

.subform{display:flex;gap:8px;flex-wrap:wrap}
.subform input{
  flex:1 1 150px;
  min-width:0;
  min-height:44px;
  padding:0 12px;
  font-size:16px;
  font-family:inherit;
  color:var(--ink);
  background:var(--mint);
  border:3px solid var(--g);
  border-radius:10px;
}
.subform input::placeholder{color:#4a5a45;font-size:16px}
.subform button{
  min-height:44px;
  padding:0 20px;
  font-family:inherit;
  font-size:16px;
  font-weight:700;
  color:var(--ink);
  background:var(--y);
  border:3px solid var(--ink);
  border-radius:10px;
  cursor:pointer;
  transition:transform .16s ease,background .16s ease;
}
.subform button:hover{background:var(--g);transform:rotate(-2deg)}

.fnav{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2px 12px;
}
.fnav a{
  display:flex;
  align-items:center;
  min-height:40px;
  font-size:16px;
  color:var(--g);
  text-decoration:none;
  border-bottom:2px dotted rgba(135,255,113,.35);
}
.fnav a:hover{background:var(--g);color:var(--ink);border-radius:6px;padding-left:8px}

.footbottom{
  grid-column:1 / -1;
  margin-top:16px;
  padding:14px 0 20px;
  border-top:2px dashed rgba(135,255,113,.4);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-align:center;
}
.copy{margin:0;font-size:16px;color:var(--mint)}
.totop{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 20px;
  border:2px solid var(--g);
  border-radius:999px;
  color:var(--g);
  font-size:16px;
  font-weight:700;
  text-decoration:none;
}
.totop:hover{background:var(--g);color:var(--ink)}

/* ---------- 动效 ---------- */
@keyframes tickmove{to{transform:translateX(-50%)}}
@keyframes popin{from{opacity:0;transform:scale(.88) rotate(-4deg)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:no-preference){
  .ticker-in{animation:tickmove 34s linear infinite}
  .navlist li{opacity:0;animation:popin .42s cubic-bezier(.2,.9,.3,1.4) forwards}
  .navlist li:nth-child(1){animation-delay:.04s}
  .navlist li:nth-child(2){animation-delay:.09s}
  .navlist li:nth-child(3){animation-delay:.14s}
  .navlist li:nth-child(4){animation-delay:.19s}
  .navlist li:nth-child(5){animation-delay:.24s}
  .navlist li:nth-child(6){animation-delay:.29s}
  .navlist li:nth-child(7){animation-delay:.34s}
  .article > section{opacity:0;animation:rise .5s ease forwards}
  .article > section:nth-child(1){animation-delay:.06s}
  .article > section:nth-child(2){animation-delay:.13s}
  .article > section:nth-child(3){animation-delay:.2s}
  .article > section:nth-child(4){animation-delay:.27s}
  .article > section:nth-child(5){animation-delay:.34s}
  .article > section:nth-child(6){animation-delay:.41s}
  .article > section:nth-child(7){animation-delay:.48s}
}

/* ---------- 断点 ---------- */
@media (max-width:860px){
  .hero{
    grid-template-columns:minmax(0,1fr);
    min-height:0;
    padding-top:32px;
    gap:22px;
  }
  .hero-copy .num{top:-30px}
  .collage{min-height:180px;margin-bottom:6px}
  .collage-img-1{width:66%}

  .stage{
    grid-template-columns:minmax(0,1fr);
    gap:16px;
  }
  .rail{
    position:static;
    transform:none;
  }
  .rail ul{
    grid-auto-flow:column;
    grid-auto-columns:max-content;
    overflow-x:auto;
    gap:6px;
    padding-bottom:2px;
    scrollbar-width:none;
  }
  .rail ul::-webkit-scrollbar{display:none}
  .rail a{
    border:2px solid var(--ink);
    border-radius:999px;
    padding:6px 12px;
  }

  .foot{
    grid-template-columns:minmax(0,1fr);
    gap:18px;
  }
}

@media (max-width:520px){
  body{font-size:17px}
  .hero{padding:26px 14px 26px}
  .stage{padding:8px 12px 32px}
  .article{padding:18px 15px 28px;border-width:3px}
  .article::before{display:none}
  .article h2{transform:none}
  .fnav{grid-template-columns:repeat(2,minmax(0,1fr))}
}

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