*,:before,:after{margin:0;padding:0;box-sizing:border-box;}
:root{
  --bg:#faf8f5;--surface:#fff;--text:#2c2a28;--text-s:#8a8580;--text-l:#b5afa8;
  --accent:#c45d3e;--accent-soft:rgba(196,93,62,.08);--accent-h:#a84a2f;
  --brd:#e8e4df;--brd-l:#f0ece7;--warm:#f5f0ea;
  --serif:'Source Serif 4',Georgia,serif;
  --display:'Fraunces',Georgia,serif;
  --sans:'DM Sans',system-ui,sans-serif;
  --max-w:720px;--wide-w:960px;--tr:.3s ease;
}
html{scroll-behavior:smooth;}
body{font-family:var(--serif);background:var(--bg);color:var(--text);line-height:1.8;font-size:17px;min-height:100vh;min-height:100dvh;}

/* === HEADER === */
.site-header{
  padding:20px 32px;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--brd);position:sticky;top:0;z-index:50;
  backdrop-filter:blur(16px);background:rgba(255,255,255,.85);gap:16px;
}
.site-logo{font-family:var(--display);font-size:1.3rem;font-weight:700;color:var(--text);text-decoration:none;letter-spacing:-.5px;flex-shrink:0;}
.site-logo span{color:var(--accent);}
.site-nav{display:flex;gap:20px;align-items:center;flex-wrap:wrap;}
.site-nav a{font-family:var(--sans);font-size:.85rem;font-weight:500;color:var(--text-s);text-decoration:none;transition:color var(--tr);position:relative;white-space:nowrap;}
.site-nav a:hover{color:var(--accent);}
.site-nav a.active{color:var(--accent);}
.site-nav a.active::after{content:'';position:absolute;bottom:-4px;left:0;right:0;height:2px;background:var(--accent);border-radius:2px;}
.back-link{
  font-family:var(--sans);font-size:.8rem;font-weight:500;color:var(--text-s);
  text-decoration:none;display:inline-flex;align-items:center;gap:5px;
  padding:5px 12px;border:1px solid var(--brd);border-radius:8px;transition:all var(--tr);
}
.back-link:hover{border-color:var(--accent);color:var(--accent);}

/* mobile menu */
.mob-menu-btn{display:none;width:36px;height:36px;border:1px solid var(--brd);border-radius:8px;background:transparent;cursor:pointer;place-items:center;color:var(--text-s);}
.mob-menu-btn svg{width:20px;height:20px;}

/* === HERO === */
.hero{max-width:var(--wide-w);margin:0 auto;padding:60px 32px 50px;text-align:center;}
.hero h1{font-family:var(--display);font-size:2.8rem;font-weight:700;letter-spacing:-1.5px;line-height:1.15;margin-bottom:14px;}
.hero p{font-size:1.05rem;color:var(--text-s);max-width:500px;margin:0 auto;font-style:italic;font-weight:300;}

/* === FILTERS === */
.filter-bar{max-width:var(--wide-w);margin:0 auto;padding:0 32px 32px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap;}
.filter-btn{
  font-family:var(--sans);font-size:.8rem;font-weight:500;padding:6px 16px;
  border:1px solid var(--brd);border-radius:24px;background:transparent;
  color:var(--text-s);cursor:pointer;transition:all var(--tr);
}
.filter-btn:hover{border-color:var(--accent);color:var(--accent);}
.filter-btn.active{background:var(--accent);color:#fff;border-color:var(--accent);}

/* === POST GRID === */
.posts-grid{
  max-width:var(--wide-w);margin:0 auto;padding:0 32px 50px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;
}
.post-card{
  background:var(--surface);border:1px solid var(--brd-l);border-radius:12px;
  overflow:hidden;transition:all var(--tr);cursor:pointer;
  opacity:0;animation:fadeUp .5s ease forwards;
}
.post-card:nth-child(1){animation-delay:.05s;}.post-card:nth-child(2){animation-delay:.1s;}.post-card:nth-child(3){animation-delay:.15s;}.post-card:nth-child(4){animation-delay:.2s;}.post-card:nth-child(5){animation-delay:.25s;}.post-card:nth-child(6){animation-delay:.3s;}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.post-card:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,0,0,.06);border-color:var(--brd);}
.post-card-img{width:100%;height:180px;object-fit:cover;display:block;background:var(--warm);}
.post-card-body{padding:20px 22px 24px;}
.post-card-cat{font-family:var(--sans);font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent);margin-bottom:8px;}
.post-card-body h2{font-family:var(--display);font-size:1.15rem;font-weight:600;line-height:1.3;margin-bottom:6px;letter-spacing:-.3px;}
.post-card-body .excerpt{font-size:.88rem;color:var(--text-s);line-height:1.6;margin-bottom:10px;}
.post-card-footer{display:flex;justify-content:space-between;align-items:center;font-family:var(--sans);font-size:.76rem;color:var(--text-l);}

/* === SINGLE POST === */
.post-view{display:none;}
.post-view.active{display:block;}
.posts-listing.hidden{display:none;}
.post-header{max-width:var(--max-w);margin:0 auto;padding:50px 32px 28px;text-align:center;}
.post-header .post-cat{font-family:var(--sans);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:2px;color:var(--accent);margin-bottom:14px;display:inline-block;}
.post-header h1{font-family:var(--display);font-size:2.2rem;font-weight:700;letter-spacing:-1px;line-height:1.2;margin-bottom:10px;}
.post-header .post-meta{font-family:var(--sans);font-size:.82rem;color:var(--text-s);}
.post-header .post-meta span{margin:0 6px;color:var(--brd);}
.post-cover{max-width:var(--wide-w);margin:0 auto 36px;padding:0 32px;}
.post-cover img{width:100%;border-radius:12px;display:block;}
.post-content{max-width:var(--max-w);margin:0 auto;padding:0 32px 70px;}
.post-content p{margin-bottom:18px;}
.post-content h2{font-family:var(--display);font-size:1.4rem;font-weight:600;margin:36px 0 14px;letter-spacing:-.5px;}
.post-content h3{font-family:var(--display);font-size:1.15rem;font-weight:600;margin:28px 0 10px;}
.post-content blockquote{border-left:3px solid var(--accent);margin:24px 0;padding:4px 0 4px 22px;font-style:italic;color:var(--text-s);}
.post-content img{width:100%;border-radius:8px;margin:22px 0;}
.post-content .gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin:24px 0;}
.post-content .gallery img{height:180px;object-fit:cover;margin:0;cursor:pointer;transition:transform .3s;}
.post-content .gallery img:hover{transform:scale(1.02);}
.post-content .poem{font-style:italic;line-height:2.2;padding:22px 28px;margin:24px 0;background:var(--warm);border-radius:10px;border-left:3px solid var(--accent);}
.post-back-btn{font-family:var(--sans);font-size:.85rem;font-weight:500;color:var(--accent);text-decoration:none;display:inline-flex;align-items:center;gap:5px;cursor:pointer;border:none;background:none;padding:0;margin-bottom:20px;transition:color var(--tr);}
.post-back-btn:hover{color:var(--accent-h);}

/* === FOOTER === */
.site-footer{border-top:1px solid var(--brd);padding:36px 32px;text-align:center;font-family:var(--sans);font-size:.8rem;color:var(--text-l);}
.site-footer a{color:var(--accent);text-decoration:none;}
.site-footer a:hover{text-decoration:underline;}

/* === RESPONSIVE === */
@media(max-width:700px){
  .site-header{padding:14px 16px;flex-wrap:wrap;}
  .site-nav{gap:12px;}
  .site-nav a{font-size:.78rem;}
  .mob-menu-btn{display:grid;}
  .site-nav.collapsed{display:none;}
  .site-nav.expanded{display:flex;width:100%;justify-content:center;padding-top:8px;}
  .hero{padding:40px 16px 30px;}
  .hero h1{font-size:2rem;}
  .filter-bar,.posts-grid,.post-header,.post-content,.post-cover{padding-left:16px;padding-right:16px;}
  .post-header h1{font-size:1.6rem;}
  .posts-grid{grid-template-columns:1fr;gap:16px;}
  .post-content .gallery{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));}
}
@media(max-width:380px){
  .hero h1{font-size:1.7rem;}
  .filter-btn{padding:5px 12px;font-size:.74rem;}
}
@media(min-width:701px){
  .mob-menu-btn{display:none !important;}
}

.article-note{max-width:760px;margin:0 auto;padding:45px 28px 80px}.article-note h1{font:600 clamp(2rem,5vw,2.8rem)/1.2 var(--display);margin:28px 0 16px}.article-note h2{font:600 1.3rem var(--display);margin:30px 0 12px}.article-note p{margin-bottom:18px}.article-note a{color:var(--accent)}.article-note .byline{font: .8rem var(--sans);color:var(--text-s);margin:20px 0 35px}