/* =====================================================================
   mockup.css - the mock-up warning banner and the in-article notice.
   ===================================================================== */
:root { --mock-red: #b00020; --mock-red-light: #fdecee; }

/* fixed banner along the top of the page */
.mockup-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 99999;
  background: var(--mock-red); color: #fff; text-align: center;
  padding: 8px 12px; font: 700 14px/1.3 Arial, sans-serif; letter-spacing: .3px;
}
.mockup-banner-spacer { height: 36px; }   /* pushes the page down so the banner never covers it */
@media (max-width: 640px) { .mockup-banner { font-size: 12px; padding: 6px 10px; } .mockup-banner-spacer { height: 44px; } }

/* red box at the start of the article */
.mockup-notice {
  border: 2px solid var(--mock-red); background: var(--mock-red-light); color: var(--mock-red);
  padding: 10px 14px; margin: 12px 0; font-weight: 700;
}