/* Decaf — 暖茶咖词典风（米白底 + 咖啡棕 + 抹茶绿） */
:root {
  --bg: #f6f1e7;
  --bg-soft: #efe6d6;
  --ink: #2f241b;
  --ink-soft: #6b5a48;
  --coffee: #6b4a32;
  --coffee-deep: #4a3020;
  --matcha: #6f8f6f;
  --caramel: #c98a4b;
  --line: #ddd0bc;
  --card: #fbf7ef;
  --serif: Georgia, 'Times New Roman', 'Songti SC', serif;
  --sans: -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.7;
  font-size: 17px;
}
a { color: var(--coffee); text-decoration: none; }
a:hover { color: var(--matcha); }

/* 导航 */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 6vw;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  position: sticky; top: 0; z-index: 20;
}
.nav__brand {
  font-family: var(--serif); font-size: 26px; font-weight: 700;
  color: var(--coffee-deep); letter-spacing: .5px;
}
.nav__links { display: flex; align-items: center; gap: 22px; font-size: 15px; }
.nav__links a.is-active { color: var(--matcha); font-weight: 600; border-bottom: 2px solid var(--matcha); }
.langbtn { padding: 4px 12px; border: 1px solid var(--coffee); border-radius: 999px; }

/* hero */
.hero {
  padding: 72px 6vw 56px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-soft), var(--bg));
}
.hero__eyebrow { color: var(--caramel); font-size: 14px; letter-spacing: 3px; text-transform: uppercase; margin: 0 0 12px; }
.hero__title { font-family: var(--serif); font-size: clamp(32px, 5vw, 52px); margin: 0 0 16px; color: var(--coffee-deep); line-height: 1.15; }
.hero__lead { max-width: 640px; color: var(--ink-soft); font-size: 18px; margin: 0 0 28px; }
.hero__cta {
  display: inline-block; background: var(--coffee); color: #fff;
  padding: 12px 26px; border-radius: 8px; font-weight: 600;
}
.hero__cta:hover { background: var(--coffee-deep); color: #fff; }

.home__cats, .home__index, .list { padding: 48px 6vw 64px; }
.home__h { font-family: var(--serif); font-size: 26px; color: var(--coffee-deep); margin: 0 0 24px; }

/* 分类卡网格 */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.cat-card {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 20px; transition: transform .15s ease, box-shadow .15s ease;
}
.cat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(107,74,50,.12); }
.cat-card__code { font-family: ui-monospace, monospace; font-size: 12px; color: var(--matcha); letter-spacing: 1px; }
.cat-card__name { font-family: var(--serif); font-size: 19px; color: var(--coffee-deep); }
.cat-card__count { color: var(--ink-soft); font-size: 13px; }

/* 字母索引 */
.letter-group { margin-bottom: 28px; }
.letter-group__h { font-family: var(--serif); color: var(--caramel); font-size: 24px; margin: 0 0 12px; border-bottom: 1px dashed var(--line); padding-bottom: 4px; }
.letter-group__terms, .cat-group__terms { display: flex; flex-wrap: wrap; gap: 10px; }

/* 词条药丸 */
.term-pill {
  display: inline-flex; flex-direction: column; gap: 1px;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 14px;
}
.term-pill__en { font-family: var(--serif); color: var(--coffee-deep); font-size: 15px; }
.term-pill__zh { color: var(--ink-soft); font-size: 13px; }
.term-pill:hover { border-color: var(--coffee); }

/* 列表页 */
.list__title { font-family: var(--serif); font-size: 34px; color: var(--coffee-deep); margin: 0 0 8px; }
.list__intro { color: var(--ink-soft); max-width: 640px; margin: 0 0 36px; }
.cat-group { margin-bottom: 34px; }
.cat-group__h { font-family: var(--serif); font-size: 21px; color: var(--coffee-deep); margin: 0 0 12px; }
.cat-group__code { font-family: ui-monospace, monospace; font-size: 12px; color: var(--matcha); margin-right: 10px; letter-spacing: 1px; }

/* 词条详情 */
.term { padding: 32px 6vw 64px; max-width: 860px; }
.crumbs { color: var(--ink-soft); font-size: 14px; margin-bottom: 28px; }
.crumbs a { color: var(--coffee); }
.entry { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 40px 48px; }
.entry__head { border-bottom: 1px solid var(--line); padding-bottom: 24px; margin-bottom: 8px; }
.entry__code { font-family: ui-monospace, monospace; font-size: 13px; color: var(--matcha); }
.entry__term { font-family: var(--serif); font-size: 44px; color: var(--coffee-deep); margin: 8px 0 4px; line-height: 1.1; }
.entry__alt { color: var(--ink-soft); font-size: 18px; margin: 0 0 12px; }
.entry__cat { display: inline-block; font-size: 12px; color: #fff; background: var(--matcha); padding: 3px 10px; border-radius: 999px; letter-spacing: 1px; }
.entry__block { padding: 22px 0; border-bottom: 1px dashed var(--line); }
.entry__block:last-of-type { border-bottom: none; }
.entry__h { font-family: var(--serif); font-size: 15px; color: var(--caramel); text-transform: uppercase; letter-spacing: 2px; margin: 0 0 8px; }
.entry__p { font-size: 18px; margin: 0; color: var(--ink); }
.entry__p--use { font-style: italic; color: var(--ink-soft); }

.related { margin-top: 28px; background: var(--bg-soft); border-radius: 10px; padding: 20px 24px; }
.related__h { font-family: var(--serif); font-size: 16px; color: var(--coffee-deep); margin: 0 0 12px; }
.related__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }

/* 静态页 / 404 */
.static { padding: 48px 6vw 64px; max-width: 760px; }
.static__title { font-family: var(--serif); font-size: 34px; color: var(--coffee-deep); margin: 0 0 20px; }
.static__body p { color: var(--ink-soft); font-size: 17px; }
.nf { padding: 90px 6vw; text-align: center; }
.nf__code { font-family: var(--serif); font-size: 72px; color: var(--caramel); margin: 0; }
.nf__title { font-family: var(--serif); font-size: 26px; color: var(--coffee-deep); margin: 8px 0; }
.nf__desc { color: var(--ink-soft); margin: 0 0 24px; }
.nf__back { display: inline-block; background: var(--coffee); color: #fff; padding: 10px 22px; border-radius: 8px; }
.nf__back:hover { background: var(--coffee-deep); color: #fff; }

/* 页脚 */
.foot { border-top: 1px solid var(--line); padding: 36px 6vw; background: var(--bg-soft); }
.foot__brand { font-family: var(--serif); color: var(--coffee-deep); font-size: 15px; margin: 0 0 8px; }
.foot__links { color: var(--ink-soft); font-size: 14px; margin: 0; }
.foot__links a { color: var(--coffee); }

@media (max-width: 640px) {
  .entry { padding: 24px 20px; }
  .entry__term { font-size: 34px; }
  .nav__links { gap: 14px; font-size: 14px; }
}