:root{
  --bg:#fbf9f5;
  --ink:#0f3b3b;
  --muted:#6a8b8b;
  --accent:#ff7a3d; /* optional accent */
  --card:#ffffff;
  --shadow: 0 6px 18px rgba(15,59,59,0.08);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}

/* layout */
.container{max-width:980px;margin:0 auto;padding:20px}
.site-header{padding:18px 0 6px}
.brand{margin:0;font-size:1.6rem;letter-spacing:0.4px}
.tagline{margin:4px 0 0;color:var(--muted);font-size:0.95rem}

/* controls */
.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:18px 0}
.controls input[type="search"], .controls input[type="text"], .controls input, #search{
  padding:10px;border-radius:8px;border:1px solid rgba(15,59,59,0.12);min-width:200px;
}
#sort{padding:10px;border-radius:8px;border:1px solid rgba(15,59,59,0.12)}
.btn{padding:8px 12px;border-radius:8px;border:1px solid rgba(15,59,59,0.08);background:white;cursor:pointer}
.btn.primary{background:var(--accent);color:white;border:none}
.compose-panel{position:fixed;right:20px;bottom:20px;z-index:40;width:360px;background:var(--card);box-shadow:var(--shadow);border-radius:10px;padding:0;overflow:hidden;display:none}
.compose-panel[aria-hidden="false"]{display:block}
.compose-inner{padding:14px}
.compose-inner label{display:block;font-size:0.9rem;margin:8px 0}
.compose-inner input, .compose-inner textarea{width:100%;padding:8px;border-radius:6px;border:1px solid rgba(15,59,59,0.08)}
.compose-actions{display:flex;gap:8px;margin-top:8px;justify-content:flex-end}
.note{font-size:0.8rem;color:var(--muted);margin-top:8px}

/* grid */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:8px 0 44px}
.card{background:var(--card);border-radius:10px;overflow:hidden;box-shadow:var(--shadow);cursor:pointer;display:flex;flex-direction:column;height:100%}
.card .thumb{width:100%;height:140px;object-fit:cover;background:#eee}
.card .meta{padding:12px;flex:1;display:flex;flex-direction:column}
.title{margin:0 0 6px;font-size:1.05rem}
.sub{font-size:0.85rem;color:var(--muted);display:flex;gap:8px;align-items:center;margin-bottom:8px}
.summary{margin:0 0 8px;color:#334;}
.tags{margin-top:auto}
.tag{display:inline-block;background:rgba(15,59,59,0.06);padding:4px 8px;border-radius:999px;font-size:0.8rem;margin-right:6px;color:var(--muted)}

/* modal */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(10,10,10,0.45);z-index:50;padding:20px}
.modal[aria-hidden="false"]{display:flex}
.modal-inner{background:var(--card);border-radius:10px;max-width:900px;width:100%;max-height:90vh;overflow:auto;position:relative;padding:18px;box-shadow:0 18px 40px rgba(0,0,0,0.25)}
.modal-close{position:absolute;right:10px;top:10px;border:none;background:transparent;font-size:18px;cursor:pointer}
#fullEntry h2{margin:0 0 6px}
.entry-meta{color:var(--muted);margin-bottom:10px}
.entry-media{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.entry-media img, .entry-media video{max-width:48%;border-radius:8px}
.entry-content p{margin:8px 0}

/* tags UI */
.tag-filters{display:flex;gap:8px;flex-wrap:wrap}
.tag-button{padding:6px 10px;border-radius:999px;border:1px solid rgba(15,59,59,0.06);background:white;cursor:pointer}
.tag-button.active{background:var(--ink);color:white;border-color:transparent}

/* small screens */
@media (max-width:560px){
  .entry-media img, .entry-media video{max-width:100%}
  .compose-panel{width:94%;right:3%;bottom:10%}
}