:root{
  --bg:#f7f3ec;
  --card:#fffdf8;
  --ink:#2f2923;
  --muted:#756b60;
  --accent:#9a5a2e;
  --brand:#7b421f;
  --line:#e8ded1;
  --shadow:rgba(70,44,22,.10);
  --reader-font-scale:1em;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Noto Sans TC","Source Han Sans TC","Microsoft JhengHei",sans-serif;
  line-height:1.7;
  font-size:var(--reader-font-scale);
}
.wrap{
  max-width:57.5em;
  margin:0 auto;
  padding:1.875em 1.125em 3.75em;
}
a{color:var(--brand);text-decoration:none;font-weight:800}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:"Noto Serif TC","Source Han Serif TC",serif;line-height:1.3}
img{max-width:100%}

/* ---------- reader 工具列（字級縮放） ---------- */
.reader-controls{
  position:fixed;
  top:1em;
  left:1em;
  z-index:9999;
  font-size:1em;
}
.reader-menu-button{
  width:2.75em;
  height:2.75em;
  border-radius:999px;
  border:.0625em solid rgba(80,55,35,.22);
  background:rgba(255,253,248,.94);
  box-shadow:0 .35em 1.2em rgba(70,44,22,.16);
  color:#6f3e20;
  font-size:1em;
  font-weight:800;
  cursor:pointer;
}
.reader-menu-panel{
  display:none;
  position:absolute;
  top:3.25em;
  left:0;
  min-width:13.5em;
  padding:.75em;
  border:.0625em solid rgba(80,55,35,.18);
  border-radius:1em;
  background:rgba(255,253,248,.98);
  box-shadow:0 .5em 1.5em rgba(70,44,22,.18);
}
.reader-controls.open .reader-menu-panel{display:block}
.reader-menu-panel a,
.reader-menu-panel button{
  display:block;
  width:100%;
  margin:.25em 0;
  padding:.65em .8em;
  border:.0625em solid var(--line);
  border-radius:.75em;
  background:#fffaf2;
  color:#6f3e20;
  text-align:left;
  text-decoration:none;
  font:inherit;
  font-weight:800;
  cursor:pointer;
}
.reader-menu-panel button:hover{background:#f6ead9}

/* ---------- 目錄頁 ---------- */
.hero{
  background:linear-gradient(135deg,#fff7ea,#f1dfc7);
  border:.0625em solid var(--line);
  border-radius:1.375em;
  padding:1.75em;
  box-shadow:0 .5em 1.5em var(--shadow);
}
.kicker{
  color:var(--accent);
  font-weight:700;
  letter-spacing:.08em;
  font-size:.92em;
}
.hero h1{margin:.2em 0 .25em;font-size:2.4em}
.meta{color:var(--muted);font-size:.95em}
.controls{
  display:flex;
  flex-wrap:wrap;
  gap:.6em;
  margin-top:1.2em;
}
.controls button{
  border:.0625em solid var(--line);
  border-radius:999px;
  background:#fffaf2;
  color:#6f3e20;
  padding:.62em 1em;
  font:inherit;
  font-weight:800;
  cursor:pointer;
}
.controls button:hover{background:#f6ead9}
.controls button.active{
  background:#7b421f;
  color:#fff;
  border-color:#7b421f;
}
.controls .sep{
  border-left:.0625em solid var(--line);
  margin:.3em .35em;
}

.panel{
  margin-top:1.375em;
  background:var(--card);
  border:.0625em solid var(--line);
  border-radius:1.125em;
  padding:1.375em 1.5em;
}
.panel h2{margin:0 0 .9em;color:#6f3e20;font-size:1.45em}
.panel h3{
  margin:.9em 0 .5em;
  color:var(--muted);
  font-size:1em;
  letter-spacing:.03em;
  border-bottom:.0625em dashed var(--line);
  padding-bottom:.3em;
}
.group:first-child h3{margin-top:0}
ul.items{list-style:none;margin:0;padding:0}
.item{padding:.875em 0;border-top:.0625em solid var(--line)}
.item:first-child{border-top:0}
.item-title{display:flex;flex-wrap:wrap;align-items:center;gap:.5em}
.item-title a{font-size:1.08em;line-height:1.4}
.tags{display:flex;flex-wrap:wrap;gap:.45em;margin-top:.45em}
.badge{
  display:inline-block;
  padding:.08em .6em;
  border-radius:999px;
  font-size:.78em;
  font-weight:800;
}
.badge.rec{background:#fbe3c9;color:#8a4c18;border:.0625em solid #f0c79a}
.badge.bear,.badge.jimmy{background:#efe6d6;color:#6f4a1f;border:.0625em solid #ddc9a4}
.badge.cat{background:#eee7dd;color:var(--muted);border:.0625em solid var(--line)}
.badge.date{background:transparent;color:var(--muted);border:.0625em solid var(--line)}
.empty{color:var(--muted);padding:.75em 0}

@media(max-width:40em){
  .hero h1{font-size:2em}
  .wrap{padding:4.2em .9em 3em}
  .panel{padding:1.1em}
}