h1{margin:0 0 12px}
:root{
  --bg: #f7f7fb;
  --surface: #ffffff;
  --muted: #6b7280;
  --accent: #2563eb;
  --soft-shadow: rgba(16,24,40,0.04);
}
body{font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background:var(--bg); color:#0f172a; margin:0}
.container{max-width:760px;margin:56px auto;padding:28px}
h1{margin:0 0 10px}
.site-title{font-size:1.6rem;letter-spacing:0.02em;margin-bottom:18px}
.posts{list-style:none;padding:0;margin:18px 0}
.posts li{background:var(--surface);padding:14px;border-radius:10px;margin-bottom:12px;border:1px solid rgba(15,23,42,0.04);box-shadow:0 6px 18px var(--soft-shadow)}
.posts a{color:var(--accent);text-decoration:none;font-weight:600}
.post{background:var(--surface);padding:28px;border-radius:12px;box-shadow:0 10px 30px var(--soft-shadow)}
.post .date{display:block;color:var(--muted);margin-bottom:12px}
.content img{max-width:100%}

/* Title style */
.handwritten{font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; font-size:2.2rem; line-height:1.05; color:var(--accent); margin:0 0 10px;font-weight:800;letter-spacing:-0.01em}

/* Keep things airy */
p{line-height:1.7;color:#0f172a}

.mood{margin-bottom:10px;color:var(--muted);font-weight:500}
.mood-pill{display:inline-block;padding:4px 8px;border-radius:999px;background:rgba(17,24,39,0.04);border:1px solid rgba(17,24,39,0.06);font-size:0.9rem}

/* Exact metadata block styling */
.meta-block{margin-bottom:14px;padding:10px 12px;background:transparent;border-left:3px solid rgba(37,99,235,0.12)}
.meta-line{color:var(--muted);font-weight:600;margin:4px 0}
.meta-line:first-child{color:var(--accent);font-weight:700}

@media (max-width:600px){.container{margin:20px auto;padding:14px}.handwritten{font-size:1.6rem}}

.back-link{margin-top:18px}
.back-link a{color:var(--accent);text-decoration:none}

/* Two-column layout for index and post with sidebar */
.layout{display:grid;grid-template-columns:1fr 340px;gap:30px;align-items:start}
.sidebar{background:var(--surface);padding:18px;border-radius:10px;border:1px solid rgba(15,23,42,0.04);box-shadow:0 6px 18px var(--soft-shadow);min-width:220px}
.about h3{margin:0 0 8px;font-size:1rem;color:var(--accent)}
.about p{margin:0;color:#0f172a}
@media (max-width:900px){.layout{grid-template-columns:1fr}.sidebar{order:2;min-width:auto}}

.contact{margin-top:16px}
.contact h3{margin:0 0 8px;font-size:1rem;color:var(--accent)}
.contact a{color:var(--accent);text-decoration:none;font-weight:600;word-break:break-all;display:inline-block;max-width:100%}
.contact p{margin:0;word-break:break-word;overflow-wrap: anywhere}