/* Article metadata component — the category · place eyebrow (.article-meta) and the
   author / format / date row (.article-meta-row) of an article header. Moved
   verbatim from the former monolithic style.css (Phase 1: no rule was edited). */

  .article-meta{display:flex;gap:18px;font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;margin-bottom:24px;}
  .article-meta .cat{color:var(--accent);}
  .article-meta .place{color:var(--nature);}

  /* author + date + read-time — replaces the old plain byline. The
     monogram uses the accent color rather than --heading/--surface so
     it reads correctly in both light and dark mode without extra rules. */
  .article-meta-row{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--border);margin-bottom:48px;}
  .meta-divider{width:1px;height:32px;background:var(--border);flex-shrink:0;}
  .meta-author{display:flex;align-items:center;gap:12px;}
  .author-avatar{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--accent);color:#FFFFFF;font-family:var(--sans);font-weight:700;font-size:13px;flex-shrink:0;letter-spacing:.02em;}
  .author-avatar.large{width:56px;height:56px;font-size:18px;}
  .author-name{font-family:var(--sans);font-weight:700;font-size:14px;color:var(--heading);line-height:1.3;}
  .author-role{font-family:var(--sans);font-size:12px;color:var(--nature);line-height:1.3;}
  /* Format sits here, quiet and secondary — never the same visual
     weight as the Theme eyebrow above the title. Omitted entirely for
     standard dispatches rather than labelled "Standard Story". */
  .meta-format-date{text-align:left;}
  .meta-format{font-family:var(--sans);font-weight:600;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--nature);margin-bottom:4px;}
  .meta-date{font-family:var(--sans);font-size:13px;color:#8a8d93;}

  @media (max-width:700px){
    /* mobile only — tablet keeps the desktop row layout above (there's
       enough width for it there); on a phone the author block, divider
       and format/date each get their own row, centered rather than
       left-aligned so a full-width stacked block reads calmer. */
    .article-meta-row{align-items:center;flex-direction:column;gap:14px;text-align:center;}
    .meta-author{flex-direction:column;text-align:center;}
    .meta-divider{width:32px;height:1px;}
    .meta-format-date{text-align:center;}
  }