/* Dare Remachinda — blog styles.
   Loaded ONLY by blog.html and post.html, after assets/style.css, so every
   colour below is one of the navy/gold tokens declared in that file — there is
   no hardcoded hex here. Phone-first, same house rules as the rest of the
   site: readable measure, >=44px targets, visible focus, no colour-only
   meaning, and nothing that can force horizontal scroll.

   SURFACES: the page is WHITE (root aliases); .postcard and .blog-empty are
   NAVY surfaces and are listed in the SURFACE RE-POINT block in style.css, so
   their descendants get the on-navy text tokens. Add any NEW navy surface here
   to that same block. */

/* ── Blog index: the list of posts ──────────────────────────────────── */
.blog-list{display:grid;grid-template-columns:1fr;gap:18px;margin-top:4px}
@media(min-width:620px){.blog-list{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}}

.postcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;min-width:0}
.postcard:hover{border-color:rgba(212,160,23,.5)}
.postcard .cover{display:block;background:var(--band);aspect-ratio:16/9;overflow:hidden;margin:0}
.postcard .cover img{width:100%;height:100%;object-fit:cover;display:block}
.postcard .body{padding:18px;display:flex;flex-direction:column;flex:1;min-width:0}
.postcard .meta{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--gold-text);display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
.postcard .meta .dot{color:var(--muted)}
.postcard h2{font-family:var(--serif);font-weight:400;color:var(--ink);font-size:1.24rem;
  line-height:1.25;margin:9px 0 0;overflow-wrap:break-word}
.postcard h2 a{color:var(--ink)}
.postcard .excerpt{color:var(--muted);font-size:1rem;margin-top:10px;flex:1;overflow-wrap:break-word}
.postcard .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.postcard .more{margin-top:14px;font-weight:700;font-size:.9rem}
.postcard .more a{display:inline-flex;align-items:center;min-height:44px;padding:2px 0}

/* ── Loading / empty / error states (never leave a blank region) ─────── */
.blog-loading{color:var(--muted);font-size:1rem;padding:6px 0}
.blog-empty{background:var(--card);border:1px dashed var(--gold);border-radius:var(--radius);
  padding:22px;color:var(--muted);font-size:1rem;max-width:720px}
.blog-empty h2{font-family:var(--serif);font-weight:400;color:var(--ink);font-size:1.22rem;
  margin-bottom:8px}
.blog-empty p{margin-bottom:4px;overflow-wrap:break-word}
.blog-empty .actions{margin-top:16px}

/* ── Single post ────────────────────────────────────────────────────── */
.post-cover{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  margin:0 0 24px;background:var(--band)}
.post-cover img{display:block;width:100%;height:auto}
.post-body{max-width:70ch;font-size:1.06rem;line-height:1.75;color:var(--body);
  overflow-wrap:break-word}
.post-body p{margin:0 0 1.15em}
.post-body p:last-child{margin-bottom:0}
.post-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:26px;max-width:70ch}
.post-back{margin-top:28px;display:flex;flex-wrap:wrap;gap:10px}
.post-back .btn{margin:0}
.page-head .crumb{font-size:.85rem;margin-bottom:8px}
.page-head .crumb a{color:var(--gold-text)}