/* ============================================================
   site.css - shared site chrome (top navigation + footer)

   Single source of truth for the .mnav / .mfoot components that
   appear on every page. Load with:
       <link rel="stylesheet" href="/assets/site.css"/>

   Deliberately uses literal hex colours (not the per-page --token
   CSS variables) so the nav and footer render identically no matter
   which palette a page's :root defines. This is why it was safe to
   lift out of all 10 pages without any visual change.

   The CTA label #001533 and its hover fill #f6a085 are the literal
   values of --on-accent and --accent-hover in tokens.css. Keep the two
   files in step.

   The `.mnav-links a.here` selector is an (currently inert) hook for
   marking the active nav item; no page sets class="here" yet.

   `.skip` is the skip-to-content link every page carries as the first
   thing inside <body>. It sits off screen until it takes focus.

   The peach focus ring is the site's one keyboard indicator, 8.9:1 on
   navy. A page that puts a control on a coral surface overrides
   outline-color to navy in its own stylesheet, because peach on coral
   is too close to see.

   The footer column titles are h2 so that a page's heading order never
   skips a level. Every property a page's own h2 rule might set is
   declared in `.mfoot-col h2`, which is why that one rule is long. It
   matches what h6 computed to before: bold, 11px, and the line height
   it inherits from the page.

   See /ARCHITECTURE.md for the full rationale and the roadmap for
   unifying the base tokens next.
   ============================================================ */
:focus-visible{outline:2px solid #f6a085;outline-offset:2px}
.skip{position:fixed;top:-64px;left:10px;z-index:400;background:#f6a085;color:#001533;font-family:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14.5px;font-weight:600;padding:10px 18px;border-radius:9px;text-decoration:none;transition:top .15s}
.skip:focus{top:10px}
.mnav{position:sticky;top:0;z-index:300;background:#001533;border-bottom:1px solid transparent;transition:border-color .25s;font-family:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.mnav.stuck{border-bottom-color:rgba(238,241,236,0.10)}
.mnav-row{max-width:1200px;margin:0 auto;padding:12px 32px;display:flex;align-items:center;gap:36px}
.mnav-brand{display:inline-flex;flex-direction:column;align-items:flex-start;gap:5px;text-decoration:none}
.mnav-brand img{height:48px;width:auto;display:block}
.mnav-strap{font-size:11.5px;font-weight:500;letter-spacing:.02em;color:#b3c1d0;white-space:nowrap}
.mnav-links{display:flex;gap:28px;margin-left:auto}
.mnav-links a{font-size:14.5px;color:#95a9bf;text-decoration:none;transition:color .15s}
.mnav-links a:hover,.mnav-links a.here{color:#eef1ec}
.mnav-cta{font-size:14.5px;font-weight:600;padding:10px 18px;border-radius:9px;background:#ee5a34;color:#001533;text-decoration:none;white-space:nowrap;transition:background .15s}
.mnav-cta:hover{background:#f6a085}
.mnav-burger{display:none;background:transparent;border:0;color:#eef1ec;cursor:pointer;padding:6px;margin-left:auto;line-height:0}
.mnav-drawer{display:none;flex-direction:column;padding:2px 32px 20px}
.mnav-drawer a{font-size:16px;color:#eef1ec;text-decoration:none;padding:13px 0;border-top:1px solid rgba(238,241,236,0.08)}
.mnav-drawer .mnav-cta{align-self:flex-start;margin-top:16px;border-top:0;color:#001533}
.mnav.open .mnav-drawer{display:flex}
@media(max-width:860px){.mnav-row{padding-top:10px;padding-bottom:10px;gap:10px}.mnav-brand{gap:3px}.mnav-brand img{height:40px}.mnav-strap{font-size:11px}.mnav-links{display:none}.mnav-row>.mnav-cta{display:none}.mnav-burger{display:block}}
.mfoot{background:#001533;border-top:1px solid rgba(238,241,236,0.10);padding:56px 0 26px;font-family:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.mfoot-wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.mfoot-top{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:40px;margin-bottom:42px}
.mfoot-brand img{height:36px;width:auto;display:block}
.mfoot-brand p{font-family:"Bodoni Moda","Didot",Georgia,serif;font-style:italic;font-weight:500;font-size:14px;line-height:1;color:#f6a085;margin-top:8px}
.mfoot-col h2{font-family:"JetBrains Mono",ui-monospace,monospace;font-optical-sizing:auto;font-size:11px;font-weight:700;line-height:inherit;letter-spacing:0.16em;text-transform:uppercase;text-wrap:wrap;color:#7a8ea3;margin:0 0 14px}
.mfoot-col a{display:block;color:#95a9bf;font-size:14px;text-decoration:none;padding:5px 0}
.mfoot-col a:hover{color:#eef1ec}
.mfoot-bottom{max-width:1200px;margin:0 auto;padding:24px 32px 0;border-top:1px solid rgba(238,241,236,0.10);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;color:#7a8ea3}
.mfoot-bottom a{color:#7a8ea3;text-decoration:none}
.mfoot-bottom a:hover{color:#eef1ec}
@media(max-width:820px){.mfoot-top{grid-template-columns:1fr 1fr}.mfoot-brand{grid-column:1/-1}}
@media(max-width:520px){.mnav-row{padding-left:22px;padding-right:22px}.mnav-drawer{padding-left:22px;padding-right:22px}.mfoot-wrap,.mfoot-bottom{padding-left:22px;padding-right:22px}.mfoot-top{grid-template-columns:1fr}.mfoot-bottom{flex-direction:column;align-items:flex-start}}
@media(forced-colors:active){.mnav-brand img,.mfoot-brand img{forced-color-adjust:none;background-image:linear-gradient(#001533,#001533)}}