/* Palette: a placeholder until the blog has its own artwork (standard §13) -- ink navy for
   headings and buttons, warm paper behind the text, one amber accent for the date badge.
   Set on a reading column: posts are prose, and long lines are what makes prose tiring. */
:root {
  --bl-ink: #1c2530;
  --bl-navy: #1f3a5f;
  --bl-navy-dark: #152a45;
  --bl-amber: #c77d1a;
  --bl-muted: #667085;
  --bl-paper: #faf8f4;
  --bl-card: #ffffff;
  --bl-line: #e6e1d8;
  --bl-red: #b3261e;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--bl-ink);
  background: var(--bl-paper);
}

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 1.2em 16px 2em;
}

h1, h2 { color: var(--bl-navy-dark); line-height: 1.25; }
a { color: var(--bl-navy); }

.blog-head { text-align: center; margin: 1em 0 2em; }
.blog-head h1 { font-size: 1.8em; margin: 0 0 0.3em; }
.tagline { color: var(--bl-muted); margin: 0 0 1em; }

.notice {
  background: #eaf3ea;
  border: 1px solid #c9e0c9;
  padding: 0.6em 0.9em;
  border-radius: 8px;
}
.error { color: var(--bl-red); font-weight: 600; }
.empty { text-align: center; color: var(--bl-muted); }
.hint { color: var(--bl-muted); font-size: 0.85em; margin: 0.3em 0 0; }

/* ---- the list ---- */

.post-list { display: grid; gap: 1.2em; }

.post-card {
  background: var(--bl-card);
  border: 1px solid var(--bl-line);
  border-radius: 12px;
  overflow: hidden;
}
.post-card-link { display: block; color: inherit; text-decoration: none; }
.post-card-link:hover h2 { text-decoration: underline; }
.post-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.post-card-text { padding: 0.9em 1.1em 1.1em; }
.post-card h2 { font-size: 1.25em; margin: 0.2em 0 0.4em; }
.excerpt { margin: 0; color: #3d4652; line-height: 1.5; }

.post-date { color: var(--bl-muted); font-size: 0.85em; margin: 0; }
.badge {
  display: inline-block;
  margin-left: 0.5em;
  padding: 0.05em 0.5em;
  border-radius: 999px;
  background: var(--bl-amber);
  color: #fff;
  font-size: 0.85em;
}

/* ---- one post ---- */

.back-link { margin: 0 0 1em; font-size: 0.9em; }

.post-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  margin-bottom: 1em;
}
.post h1 { font-size: 1.9em; margin: 0.2em 0 0.6em; }
.post-body { font-size: 1.08em; line-height: 1.7; }
.post-body h2 { font-size: 1.25em; margin: 1.6em 0 0.4em; }
.post-body p { margin: 0 0 1em; }
.post-body a { overflow-wrap: anywhere; }

.admin-actions {
  display: flex;
  gap: 0.6em;
  margin-top: 2em;
  padding-top: 1em;
  border-top: 1px solid var(--bl-line);
}
.admin-actions form { margin: 0; }

/* ---- buttons and the form ---- */

.btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.2em;
  border: none;
  border-radius: 8px;
  background: var(--bl-navy);
  color: #fff;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--bl-navy-dark); }
.btn-danger { background: var(--bl-red); }
.btn-danger:hover { background: #8f1e18; }

.edit-form label { display: block; font-weight: 600; margin: 1.2em 0 0.3em; }
.edit-form label.check { font-weight: normal; margin: 0.5em 0; }
.edit-form input[type=text],
.edit-form input[type=date],
.edit-form textarea {
  width: 100%;
  padding: 0.6em 0.7em;
  border: 1px solid #cfc8bb;
  border-radius: 8px;
  background: #fff;
  font: inherit;
}
.edit-form textarea { line-height: 1.5; resize: vertical; }
.edit-image { display: block; max-width: 240px; height: auto; border-radius: 8px; }

.site-footer {
  text-align: center;
  padding: 1em 16px 3em;
  color: var(--bl-muted);
  font-size: 0.85em;
}
.site-footer a { color: var(--bl-ink); }