/**
 * @file page-frame.css
 * @author Jouni Miikki
 * SPDX-License-Identifier: MIT
 * @description The page itself: a wide paper column, or a narrow one for reading, or a loading state. Drawn by
 *   components/PageFrame.js. Reads only the tokens in theme.css and the shapes in poster.css; a page
 *   never styles it from outside.
 * @usage Linked from public/spa.html in the component block, whose order keeps the order these
 *   rules had when they were one sheet.
 * @version-history
 *   v1.0.0 — 2026-09-23 — Moved unchanged from css/parts*.css (UI consolidation phase 1, a move).
 */

.poster-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 2.75rem 2.75rem 0;
  color: var(--text);
  font-family: var(--font-showroom-body);
  position: relative;
}
body:has(.poster-page) .page-content { background: var(--bg); }
@media (max-width: 900px) {
  .poster-page { padding: 1.5rem 1.1rem 0; }
}
.poster-page-loading { display: flex; justify-content: center; padding: 4rem 0; }
@media (max-width: 560px) {
  .poster-page { padding: 1.25rem 1rem 0; }
}
/* ── The whole record: the full window, day by day, and the archive under it ── */
/* Narrower than the home. This page is read top to bottom, and a line of running text across a
   wide screen is one a reader loses their place in. */
.poster-page--narrow { max-width: 46rem; }