/* Publication date and view count, shared by the three articles under website/blog/ and the
   cards on website/blog/index.html. Authoring rules (dates, the count contract, structured data
   and the browser contract that checks them): website/BLOG-AUTHORING.md.
   Scope: .post-header / .post-meta and their children only — everything else stays in each
   page's own inline stylesheet. Colour tokens come from each page's inline :root, with a
   fallback so the file also works when a page is opened on its own. */
.post-header {
  margin: 0 0 1.75rem;
}

/* The dek keeps its own type; the shared header only tightens the gap above the metadata line. */
.post-header .dek {
  margin-bottom: 1rem;
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.7rem;
  margin: 0 0 1.25rem;
  color: var(--muted, #aeb8cb);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

/* Each item stays whole and readable: no fixed width, no clipping, no ellipsis. */
.post-meta > span {
  min-width: 0;
  overflow-wrap: break-word;
}

/* The separator between metadata items is decorative text, so it stays quiet. Written as a
   descendant selector because a count wrapper carries its own separator. */
.post-meta [aria-hidden="true"] {
  color: var(--line, #364157);
}

.post-meta time {
  font: inherit;
  color: inherit;
}

.post-meta .series {
  color: inherit;
}

/* The view count: a hidden wrapper until post-views.js has a valid count for it, then a normal
   metadata item — "0 views", "1 view", "1,234 views". The wrapper is a flex item of .post-meta,
   so its `hidden` attribute has to beat that display value explicitly; while it is hidden the
   count AND the separator it owns are both out of the layout, and nothing dangles. */
.post-meta .post-views[hidden] {
  display: none;
}

.post-meta .post-views,
.post-meta .post-views-count {
  color: inherit;
}