/* Modular Toy: the maker's mark (the bar at the top of a page and the footer).
 *
 * Self-contained so it can go on any page, including a product site with its
 * own stylesheet: every rule is scoped to .mt-bar or .mt-footer, and it sets
 * its own font, sizing and list styles instead of relying on the page's. It
 * follows the page's --mt-* colour tokens when they are set, and falls back
 * to neutral dark ones when they are not.
 *
 *   <link rel="stylesheet" href="/assets/modulartoy-chrome.css">
 */

.mt-bar, .mt-footer {
    --_bg: var(--mt-bg, #0b0d10);
    --_line: var(--mt-line, #262b33);
    --_fg: var(--mt-fg, #eceae4);
    --_muted: var(--mt-muted, #a3a29c);
    --_faint: var(--mt-faint, #6f6e69);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
.mt-bar *, .mt-footer * { box-sizing: border-box; margin: 0; }
.mt-bar .mt-wrap, .mt-footer .mt-wrap { width: 100%; max-width: var(--mt-wrap, 1080px); margin: 0 auto; padding: 0 var(--mt-gutter, 20px); }

/* ── The maker's mark: bar ─────────────────────────────────────────── */
.mt-bar { border-bottom: 1px solid var(--_line); }
.mt-bar .mt-wrap { display: flex; align-items: center; gap: 20px; min-height: 56px; }
.mt-mark {
    font-size: 12px; font-weight: 800; letter-spacing: 0.26em; text-transform: uppercase;
    text-decoration: none; color: var(--_muted); white-space: nowrap;
}
.mt-mark:hover { color: var(--_fg); }
.mt-bar nav { margin-left: auto; align-items: center; display: flex; gap: 20px; font-size: 14px; }
.mt-bar nav a { color: var(--_muted); text-decoration: none; }
.mt-bar nav a:hover { color: var(--_fg); }
.mt-bar .mt-product-name { font-weight: 700; color: var(--_fg); font-size: 15px; }
@media (max-width: 640px) {
    .mt-bar nav a:not(.mt-keep) { display: none; }
}

/* ── The maker's mark: footer ──────────────────────────────────────── */
.mt-footer { border-top: 1px solid var(--_line); padding: 40px 0 48px; font-size: 14px; color: var(--_muted); }
.mt-footer .mt-wrap { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); gap: 28px; }
.mt-footer h4 { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--_faint); margin-bottom: 10px; }
.mt-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.mt-footer a { text-decoration: none; color: var(--_muted); }
.mt-footer a:hover { color: var(--_fg); }
.mt-footer .mt-mark { display: inline-block; margin-bottom: 8px; }
@media (max-width: 720px) { .mt-footer .mt-wrap { grid-template-columns: 1fr 1fr; } }