:root{
  --bg:#fbf8f3; --bg2:#f4ede3; --bg3:#ece1d2; --white:#ffffff;
  --accent:#8a5d38; --accent2:#a47049; --accent-dim:rgba(138,93,56,.1); --accent-border:rgba(138,93,56,.28);
  --text:#2f2219; --muted:#6f5d4f; --muted2:#56443a;
  --border:rgba(74,52,36,.1); --border2:rgba(74,52,36,.18);
  --shadow:0 1px 2px rgba(74,52,36,.05),0 8px 24px rgba(74,52,36,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; background:var(--bg)}
body{margin:0; background:var(--bg); color:var(--text); font:16px/1.7 Outfit, "Segoe UI", system-ui, sans-serif; font-weight:300; padding-inline:clamp(16px,4vw,64px)}
a{color:var(--accent)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.bar{max-width:1120px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; gap:16px; padding-block:22px; border-bottom:1px solid var(--border)}
.logo{font-family:"Playfair Display", Georgia, serif; font-weight:700; color:var(--text); text-decoration:none; font-size:18px}
.logo span{color:var(--accent)}
.back{font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); text-decoration:none}
.back:hover{color:var(--accent)}
.eyebrow{display:flex; align-items:center; gap:12px; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:500; margin:0 0 16px}
.eyebrow::before{content:""; width:24px; height:1px; background:var(--accent)}
h1{font-family:"Playfair Display", Georgia, serif; font-weight:900; font-size:clamp(36px,5.5vw,60px); line-height:1.06; margin:0 0 18px; text-wrap:balance}
h1 em{color:var(--accent)}
.lede{color:var(--muted2); font-size:18px; max-width:62ch; margin:0}
footer{max-width:1120px; margin:0 auto; border-top:1px solid var(--border); padding-block:24px 40px; font-size:12.5px; color:var(--muted); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}

/* listing */
.list-main{max-width:1120px; margin:0 auto; padding-block:64px 96px; display:grid; gap:40px}
.filters{display:flex; flex-wrap:wrap; gap:8px}
.chip{font:inherit; font-size:13px; font-weight:400; padding:6px 14px; border:1px solid var(--border2); border-radius:2px; background:transparent; color:var(--muted2); cursor:pointer; transition:all .2s}
.chip:hover{border-color:var(--accent-border); color:var(--accent)}
.chip[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--bg)}
.posts{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr)); gap:24px}
.post-card{display:flex; flex-direction:column; gap:12px; background:var(--white); border:1px solid var(--border); border-radius:4px; padding:28px; box-shadow:var(--shadow); text-decoration:none; color:inherit; transition:transform .25s, border-color .25s}
.post-card:hover{transform:translateY(-3px); border-color:var(--accent-border)}
.post-card[hidden]{display:none}
.pc-meta{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; font-size:12px; color:var(--muted)}
.pc-tag{font-size:11px; padding:2px 9px; border-radius:2px; background:var(--accent-dim); border:1px solid var(--accent-border); color:var(--accent); letter-spacing:.06em; text-transform:uppercase; font-weight:500}
.pc-title{font-family:"Playfair Display", Georgia, serif; font-size:21px; font-weight:700; line-height:1.25; margin:0; color:var(--text)}
.pc-excerpt{margin:0; font-size:14.5px; color:var(--muted); flex:1}
.pc-more{font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:500; color:var(--accent)}
.empty{color:var(--muted); font-size:14px}

/* single post */
.post{max-width:720px; margin:0 auto; padding-block:64px 88px}
.post-meta{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; font-size:13px; color:var(--muted); margin:0 0 36px; padding-bottom:28px; border-bottom:1px solid var(--border)}
.post-body{font-size:17.5px; line-height:1.85; color:var(--muted2)}
.post-body h2{font-family:"Playfair Display", Georgia, serif; font-weight:700; font-size:28px; line-height:1.2; color:var(--text); margin:48px 0 12px}
.post-body h3{font-size:19px; font-weight:600; color:var(--text); margin:32px 0 8px}
.post-body p{margin:0 0 20px}
.post-body strong{color:var(--text); font-weight:500}
.post-body ul,.post-body ol{padding-left:22px; margin:0 0 20px}
.post-body li{margin-bottom:6px}
.post-body blockquote{margin:28px 0; padding:4px 0 4px 22px; border-left:2px solid var(--accent); font-family:"Playfair Display", Georgia, serif; font-style:italic; font-size:21px; line-height:1.5; color:var(--text)}
.post-body img{max-width:100%; height:auto; border:1px solid var(--border); border-radius:4px}
.post-body figure{margin:32px 0}
.post-body figcaption{font-size:13px; color:var(--muted); margin-top:8px}
.post-body pre{overflow-x:auto; max-width:100%}
.post-body code{font-family:"JetBrains Mono", ui-monospace, Consolas, monospace; font-size:.85em; background:var(--bg2); padding:1px 6px; border-radius:3px}
.post-foot{margin-top:56px; padding:32px; background:var(--white); border:1px solid var(--accent-border); border-radius:4px; box-shadow:var(--shadow)}
.post-foot p{margin:0 0 16px; color:var(--muted2)}
.btns{display:flex; gap:12px; flex-wrap:wrap}
.btn{padding:12px 22px; border-radius:2px; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; font-weight:600; background:var(--accent); color:var(--bg); box-shadow:0 4px 14px rgba(138,93,56,.2)}
.btn:hover{background:var(--accent2)}
.btn.ghost{background:transparent; color:var(--muted2); border:1px solid var(--border2); font-weight:400; box-shadow:none}
.btn.ghost:hover{border-color:var(--accent-border); color:var(--accent)}
@media (max-width:720px){ .list-main,.post{padding-block:40px 64px} .post-body{font-size:16.5px} .post-card{padding:22px} .post-body h2{font-size:24px} .post-body blockquote{font-size:19px} .post-foot{padding:22px} }
@media (max-width:480px){ .btns{flex-direction:column; align-items:stretch} .btn{text-align:center} .lede{font-size:16.5px} }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .post-card{transition:none} }