* { box-sizing:border-box; }
  body { background:var(--bg); color:var(--text); font:14px/1.5 'Inter',-apple-system,
         "Segoe UI",Roboto,Helvetica,sans-serif; margin:0; padding:24px 0 28px; }
  a { text-decoration:none; }
  .wrap { padding:16px; }
  @media (min-width:1100px){ .wrap{ padding:18px max(28px,calc((100vw - 1680px)/2)); } }
  .hm-head { display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px 22px; margin:10px 2px 16px; }
  .hm-head h1 { font-size:23px; margin:0; font-weight:800; letter-spacing:-.015em; }
  .hm-head .sub { color:var(--muted); font-size:12.5px; margin-top:5px; max-width:74ch; line-height:1.5; }
  .hm-foot { color:var(--muted); font-size:11px; margin:14px 2px 0; line-height:1.6; }
  /* Live-feed badge: populated by live.js when LIVE_FEED_LABEL is set.
     Hidden (no layout footprint) when the span is empty (no live feed). */
  .hm-live-badge { display:inline-flex; align-items:center; gap:5px;
    font-size:11px; color:var(--muted); font-weight:600;
    background:color-mix(in srgb,#d97706 14%,transparent);
    border:1px solid color-mix(in srgb,#d97706 35%,transparent);
    color:#b45309; border-radius:7px; padding:3px 9px; margin-top:6px;
    white-space:nowrap; align-self:flex-end; }
  .hm-live-badge:empty { display:none; }
  /* Hidden live-chg spans that live.js writes to (observer then recolors the tile) */
  .hm-live-chg { display:none !important; }