:root { --paper:#f2f4ee; --panel:#fbfcf8; --ink:#1d2a22; --muted:#5d6b61; --line:#d8ddd2; --ember:#c8641e; --ember-soft:#f6e3d3;
  --font-display:"Mitr","Anuphan","Noto Sans Thai",system-ui,sans-serif; --font-body:"Anuphan","Noto Sans Thai","Leelawadee UI","Thonburi",system-ui,sans-serif; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper:#121a15; --panel:#18221c; --ink:#e6ece4; --muted:#9aa89e; --line:#2c3a31; --ember:#f08a3c; --ember-soft:#3a2616; color-scheme:dark; } }
:root[data-theme="dark"] { --paper:#121a15; --panel:#18221c; --ink:#e6ece4; --muted:#9aa89e; --line:#2c3a31; --ember:#f08a3c; --ember-soft:#3a2616; color-scheme:dark; }
* { box-sizing: border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); font-size:16px; line-height:1.6; }
a { color:var(--ember); }
.top { background:var(--panel); border-bottom:1px solid var(--line); }
.top div, main, footer { max-width:860px; margin:0 auto; padding:12px 16px; }
.top a.brand { font-family:var(--font-display); font-weight:600; font-size:1.2rem; color:var(--ink); text-decoration:none; display:inline-flex; gap:8px; align-items:center; }
.top a.section { font-size:.88rem; color:var(--muted); text-decoration:none; margin-left:6px; }
.top a.section:hover { color:var(--ember); }
nav.crumbs { font-size:.85rem; color:var(--muted); margin-bottom:8px; }
nav.crumbs a { color:var(--muted); }
h1 { font-family:var(--font-display); font-weight:500; font-size:1.6rem; line-height:1.3; margin:0 0 4px; text-wrap:balance; overflow-wrap:anywhere; }
h2 { font-size:.8rem; letter-spacing:.06em; color:var(--muted); font-weight:600; margin:24px 0 8px; }
.sub { color:var(--muted); margin:0; }
.badge { display:inline-block; font-size:.8rem; padding:1px 10px; border-radius:999px; background:var(--ember-soft); margin-bottom:6px; }
.tags { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0; padding:0; list-style:none; }
.tags li { font-size:.84rem; padding:2px 10px; border-radius:6px; background:var(--panel); border:1px solid var(--line); }
.actions { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
.btn { display:inline-flex; align-items:center; padding:8px 14px; border-radius:10px; border:1px solid var(--line); background:var(--panel); color:var(--ink); text-decoration:none; font-size:.92rem; }
.btn.primary { background:var(--ember); border-color:var(--ember); color:#fff; }
.btn.line { background:#06c755; border-color:#06c755; color:#fff; }
.gallery { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; }
.gallery img { display:block; height:180px; width:auto; border-radius:8px; background:var(--panel); }
.credit, .note { font-size:.82rem; color:var(--muted); }
dl.kv { display:grid; grid-template-columns:110px 1fr; gap:6px 12px; margin:0; }
dl.kv dt { color:var(--muted); } dl.kv dd { margin:0; overflow-wrap:anywhere; }
blockquote { margin:0 0 8px; padding:10px 12px; background:var(--panel); border-radius:8px; }
blockquote cite { display:block; font-style:normal; font-size:.82rem; color:var(--muted); margin-top:4px; }
.season div { display:grid; grid-template-columns:110px 1fr; gap:8px; }
.season .m { color:var(--ember); font-weight:600; }
.safety { font-size:.86rem; background:var(--ember-soft); border-radius:8px; padding:10px 12px; }
.warn { border-left:3px solid var(--ember); padding-left:10px; }
ul.list { list-style:none; padding:0; margin:0; }
ul.list li { border-top:1px solid var(--line); padding:10px 0; }
ul.list li a { font-weight:600; text-decoration:none; overflow-wrap:anywhere; }
ul.list li span { display:block; color:var(--muted); font-size:.86rem; }
ul.cols { columns:3 180px; list-style:none; padding:0; margin:0; }
ul.cols li { padding:3px 0; break-inside:avoid; }
.srcs a { display:block; font-size:.82rem; overflow-wrap:anywhere; }
footer { color:var(--muted); font-size:.82rem; border-top:1px solid var(--line); margin-top:32px; }