:root{
  --bg:#d8b27f; --ink:#000; --ink-60: rgba(0,0,0,.65);
  --card:#fffaf3; --line: rgba(0,0,0,.12); --link:#3b2a18; --accent:#6a4623;
}
*{box-sizing:border-box} html,body{height:100%} html{scroll-behavior:smooth}
body{margin:0; font:16px/1.7 Georgia,'Times New Roman',serif; color:var(--ink);
  background: var(--bg) url('/assets/background.jpg') center/cover fixed no-repeat;}
body::before{content:''; position:fixed; inset:0; z-index:-1; background: rgba(216,178,127,.38);
  backdrop-filter: grayscale(20%) contrast(.96); pointer-events:none;}
a{color:var(--link); text-decoration:none} a:hover{color:var(--accent); text-decoration:underline}
.site{max-width:980px; margin:0 auto; padding:28px 20px 80px;}
.header{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px;}
.title{font:700 42px/1 Georgia,'Times New Roman',serif; letter-spacing:.3px; color:var(--ink);}
.nav a{margin-left:18px; font-weight:600; letter-spacing:.3px;}
.card{background:rgba(255,250,243,.93); border:1px solid var(--line); border-radius:14px; overflow:hidden; margin:22px 0; box-shadow:0 8px 30px rgba(0,0,0,.08);}
.card .pad{padding:18px 18px 22px;} .card h2{margin:0 0 8px; font-size:26px; line-height:1.25}
.meta{font-size:13px; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-60); margin-bottom:8px;}
.excerpt{ text-rendering:auto; -webkit-font-smoothing:antialiased; font-kerning:normal; letter-spacing:0; word-spacing:normal; hyphens:none; text-align:left; }
.cover{ width:100%; display:block; object-fit:cover; max-height:540px; }
/* Past Posts grid */
.grid{ display:grid; gap:18px; grid-template-columns: repeat(4, minmax(0,1fr)); }
.thumb{ background: rgba(255,250,243,.93); border:1px solid var(--line); border-radius:12px; overflow:hidden; text-decoration:none; color:inherit; }
.thumb img{ width:100%; height:200px; object-fit:cover; display:block } .thumb .t{ padding:12px; font-weight:600 }
.searchbar{ margin:10px 0 18px; display:flex; gap:10px } .searchbar input{ flex:1; padding:10px 12px; border:1px solid var(--line); border-radius:8px; font:16px Georgia,serif; }
.suggestions{ font-size:13px; color:var(--ink-60); margin-top:6px }
/* Single post */
.article{ background: rgba(255,250,243,.95); border:1px solid var(--line); border-radius:14px; padding:24px; }
.article h1{ margin:0 0 6px; font-size:36px; line-height:1.2 } .article .meta{ margin-bottom:16px }
.article img.cover{ width:100%; max-height:520px; object-fit:cover; border-radius:10px; margin:10px 0 18px }
/* images in body: thin black border */
.article .body img{ max-width:100%; height:auto; display:block; border:1px solid #000; padding:3px; margin: 16px auto; }
/* subheadings: grey smaller italic */
.article .body h2, .article .body h3{ color:#666; font-style:italic; }
.article .body h2{ font-size:22px } .article .body h3{ font-size:18px }
.footer{ margin-top:44px; padding:30px 0; color:var(--ink-60); font-size:14px; text-align:center; }
/* Lightbox */
.lb{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.85); z-index:1000; }
.lb.open{ display:flex } .lb-inner{ max-width:92vw; max-height:90vh; text-align:center }
.lb-img{ max-width:92vw; max-height:80vh; border:1px solid #000; background:#fff; padding:2px }
.lb-caption{ margin-top:.5rem; font-style:italic; color:#666; font-size:.9rem }
.lb-nav{ position:absolute; inset:0; display:flex; justify-content:space-between; align-items:center; pointer-events:none; }
.lb-btn{ pointer-events:all; background:rgba(255,255,255,.9); border:1px solid #000; padding:.35rem .55rem; font-family:Georgia,serif; cursor:pointer }
.lb-close{ position:absolute; top:14px; right:14px }
/* Editor/Admin */
.editor{ background: rgba(255,250,243,.96); border:1px solid var(--line); border-radius:14px; padding:18px; margin-bottom:20px }
.toolbar{ display:flex; flex-wrap:wrap; gap:8px; margin: 8px 0 12px; }
.toolbar button, .toolbar label{ font:600 14px Georgia,serif; padding:6px 10px; border:1px solid var(--line); background:#fff; cursor:pointer; border-radius:8px; }
.toolbar input[type=file]{ display:none } input.title{ width:100%; font:700 28px Georgia,serif; padding:10px 12px; border:1px solid var(--line); background:#fff; margin:6px 0 10px }
.editable{ min-height: 360px; padding:12px; border:1px solid var(--line); background:#fff; }
.actions{ display:flex; gap:10px; margin-top:12px } .actions button{ font:600 15px Georgia, serif; padding:10px 14px; border:1px solid var(--line); background:#fff; border-radius:8px; cursor:pointer; }
.row{ background: rgba(255,250,243,.95); border:1px solid var(--line); border-radius:12px; padding:12px; display:flex; align-items:center; gap:12px; }
.row img{ width:80px; height:60px; object-fit:cover; border:1px solid #000; } .row .grow{ flex:1 }
.badge{ font-size:12px; padding:3px 8px; border:1px solid var(--line); border-radius:999px; background:#fff }
.tabbar{ display:flex; gap:8px; margin: 10px 0 18px } .tabbar a{ padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:#fff } .tabbar a.active{ background:#efe7d6 }
/* Gallery thumbs inside post body */
.gallery{ display:flex; flex-wrap:wrap; gap:12px; margin: 1.25rem 0; }
.gallery .thumb{ position:relative; cursor:zoom-in; border:1px solid #000; padding:2px; background:#fff }
.gallery .thumb img{ display:block; height:120px; width:auto }
@media (max-width: 1200px){ .grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 900px){ .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){ .title{ font-size:34px } .grid{ grid-template-columns: 1fr; } }