/* ============================================================
   Shared chrome for every page: the page container and the one
   site footer.

   These rules must live in a real stylesheet, not in a <style>
   tag inside the page body: on the homepage and the admin SPA the
   footer is rendered inside the Vue root, and Vue's in-DOM template
   compiler drops <style> elements it finds there.
   ============================================================ */

/* ── page container ── */
.page-wrap { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; }
.read-wrap { width: 100%; max-width: 768px; margin-left: auto; margin-right: auto; }
@media (min-width: 860px) { .page-wrap { padding-left: 20px; padding-right: 20px; } }

/* ── sticky footer: the page is a column, the footer takes the slack ── */
html, body { height: auto; }
body { min-height: 100vh; display: flex; flex-direction: column; }
body > #app, body > main { flex: 1 0 auto; }

/* ── the one site footer ── */
.site-footer { margin-top: auto; flex: none; background: #10225A; color: #E7EAF6; }
.site-footer .meander { display: block; width: 100%; height: 14px; object-fit: cover; }
.site-footer .foot { padding-top: 28px; padding-bottom: 20px; display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
.site-footer .foot-brand { display: flex; gap: 12px; align-items: center; color: inherit; min-width: 0; text-decoration: none; }
.site-footer .foot-brand img { width: 40px; height: 40px; flex: none; }
.site-footer .foot-brand .n { display: block; font-family: 'Prompt', sans-serif; font-size: 16px; font-weight: 600; color: #fff; line-height: 1.35; }
.site-footer .foot-brand .c { display: block; font-size: 13px; color: #C6CDE6; }
.site-footer .foot-links { display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: 14px; }
.site-footer .foot-links a { color: #E7EAF6; font-weight: 600; text-decoration: none; }
.site-footer .foot-links a:hover { color: #C9A24C; }
.site-footer .foot-copy { padding-top: 12px; padding-bottom: 18px; font-size: 12px; color: #9FA9CB;
  border-top: 1px solid rgba(231, 234, 246, .14); display: flex; flex-wrap: wrap; gap: 4px 20px; justify-content: space-between; }
.site-footer .foot-dev { color: #8792B8; }
@media (max-width: 700px) {
  .site-footer .foot { padding-top: 22px; padding-bottom: 16px; gap: 14px; }
  .site-footer .foot-links { width: 100%; gap: 4px 18px; font-size: 13px; }
}