/* 长尾内容页 —— 与游戏、与公开花园页同一套颜色语言，但排版是"能读下去的文章"。
   这些页面的读者是从搜索引擎来的陌生人：先给他真正想要的答案，再谈游戏。 */
* { box-sizing: border-box; }
body {
  margin: 0; color: #33302a; background: #f7f4ea;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
  line-height: 1.75; -webkit-font-smoothing: antialiased;
}
a { color: #3d6b34; }

.s-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 20px; background: #4a7c3f; color: #fff;
  position: sticky; top: 0; z-index: 10;
}
.s-brand { color: #fff; text-decoration: none; font-weight: 700; }
.s-play {
  background: #fff; color: #2f5a2a; text-decoration: none; font-weight: 700;
  padding: 6px 16px; border-radius: 999px; font-size: 0.88rem; white-space: nowrap;
}

.s-wrap { max-width: 760px; margin: 0 auto; padding: 26px 20px 40px; }
.s-crumb { font-size: 0.84rem; color: #6f6b60; margin-bottom: 10px; }
h1 { font-size: clamp(1.5rem, 5vw, 2.05rem); line-height: 1.3; margin: 0 0 12px; color: #24361f; }
h2 { font-size: 1.18rem; margin: 32px 0 10px; color: #2f4a28;
     border-top: 1px solid #e0dcc9; padding-top: 18px; }
.s-lede { font-size: 1.04rem; color: #46433a; }
.s-meta, .s-note { font-size: 0.9rem; color: #5f5a4e; }
.s-note { background: #fdf3e0; border: 1px solid #e6c98a; border-radius: 12px; padding: 10px 14px; }
code { background: #eae6d6; padding: 1px 6px; border-radius: 5px; font-size: 0.92em; }

/* 作物页头图：成熟株的真实画稿，与游戏里长出来的是同一个函数 */
.s-hero { display: flex; gap: 18px; align-items: flex-end; margin-bottom: 6px; }
.s-heroart { flex: 0 0 130px; }
.s-heroart svg { width: 130px; height: auto; display: block; }
.s-hero h1 { margin-bottom: 6px; }

.s-table { width: 100%; border-collapse: collapse; margin: 10px 0 6px; font-size: 0.94rem; }
.s-table th { text-align: left; padding: 9px 10px 9px 0; vertical-align: top;
  color: #4a463c; font-weight: 600; white-space: nowrap; border-bottom: 1px solid #e6e2d2; }
.s-table td { padding: 9px 0; border-bottom: 1px solid #e6e2d2; }
.s-table td span { display: block; font-size: 0.85rem; color: #6f6b60; font-weight: 400; }
.s-cal th { white-space: normal; }
.s-cal thead th { color: #6f6b60; font-size: 0.85rem; }

.s-facts { padding-left: 1.1em; }
.s-facts li { margin: 8px 0; }

/* 作物卡列表：图 + 名 + 分数 + 一句理由 */
.s-crops { list-style: none; padding: 0; margin: 12px 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.s-crop { background: #fffdf6; border: 1px solid #e2ddc9; border-radius: 14px;
  padding: 12px 14px; position: relative; }
.s-crop a { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.s-cropart { flex: 0 0 46px; }
.s-cropart svg { width: 46px; height: auto; display: block; }
.s-crop b { font-size: 1rem; }
.s-score { position: absolute; top: 10px; right: 12px; font-size: 0.8rem; font-weight: 700;
  color: #3d6b34; background: #e6f0dc; border-radius: 999px; padding: 1px 9px; }
.s-score.best { background: #4a7c3f; color: #fff; }
.s-eta { display: block; font-size: 0.85rem; color: #4a7c3f; margin-top: 6px; }
.s-why { display: block; font-size: 0.82rem; color: #6f6b60; }

.s-avoid { padding-left: 1.1em; font-size: 0.94rem; }
.s-avoid li { margin: 6px 0; }

.s-months, .s-citylist { list-style: none; padding: 0; margin: 10px 0;
  display: flex; flex-wrap: wrap; gap: 8px; }
.s-months li, .s-citylist li { background: #fffdf6; border: 1px solid #e2ddc9;
  border-radius: 999px; padding: 5px 14px; font-size: 0.9rem; }
.s-months li.on { background: #4a7c3f; color: #fff; border-color: #4a7c3f; }
.s-months a, .s-citylist a { text-decoration: none; }
.s-citylist.big li { font-size: 1rem; padding: 8px 18px; }

.s-src { margin-top: 26px; font-size: 0.82rem; color: #77726a; }

.s-foot { background: #eef1e4; border-top: 1px solid #dcdcc8; text-align: center;
  padding: 34px 20px 44px; }
.s-cta { display: inline-block; background: #4a7c3f; color: #fff; text-decoration: none;
  font-weight: 700; font-size: 1.05rem; padding: 14px 32px; border-radius: 999px;
  box-shadow: 0 6px 18px rgba(40, 70, 35, 0.28); }
.s-foot p { max-width: 34em; margin: 14px auto 10px; font-size: 0.9rem; color: #4e5647; }
.s-foot nav { font-size: 0.86rem; color: #6f6b60; }

@media (max-width: 480px) {
  .s-hero { flex-direction: column; align-items: flex-start; gap: 8px; }
  .s-heroart { flex: none; }
}