/* FLUX canonical navigation — self-contained, namespaced .fn-*  (no dependency on style.css) */
#flux-nav { min-height: 46px; }
.fn { font-family: 'Courier New', Courier, monospace; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.55rem 1.1rem; border-bottom: 2px solid #000; background: #fff; color: #000; position: relative; }
.fn * { box-sizing: border-box; }
.fn-brand { font-weight: bold; letter-spacing: 0.14em; font-size: 13px; text-decoration: none; color: #000; margin-right: 0.6rem; }
.fn-burger { display: none; font-family: inherit; font-size: 11px; background: none; border: 1px solid #000; padding: 5px 9px; cursor: pointer; color: #000; }
.fn-bar { list-style: none; display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; flex-wrap: wrap; }
.fn-bar > li { position: relative; }
.fn-bar a, .fn-top { font-family: inherit; font-size: 11px; letter-spacing: 0.08em; text-decoration: none; color: #000; background: none; border: 1px solid #ccc; padding: 5px 9px; cursor: pointer; white-space: nowrap; display: inline-block; }
/* the dropdown toggles are <button>; strip native button metrics so they match the <a> items exactly */
.fn-top { margin: 0; line-height: inherit; vertical-align: middle; -webkit-appearance: none; appearance: none; }
.fn-bar > li > a { vertical-align: middle; }
.fn-bar a:hover, .fn-top:hover { border-color: #000; }
.fn-bar a.fn-on, .fn-top.fn-on { background: #000; color: #fff; border-color: #000; }
.fn-top[aria-expanded="true"] { border-color: #000; }
.fn-drop { list-style: none; margin: 0; padding: 0; position: absolute; top: 100%; left: 0; min-width: 190px; background: #fff; border: 1px solid #000; border-top: none; z-index: 60; display: none; }
.fn-has.fn-open .fn-drop { display: block; }
.fn-drop a { display: block; border: none; font-size: 11.5px; padding: 9px 12px; letter-spacing: 0.04em; white-space: nowrap; }
.fn-drop li + li a { border-top: 1px solid #eee; }
.fn-drop a:hover, .fn-drop a:focus { background: #000; color: #fff; outline: none; }

@media (max-width: 719px) {
  .fn { flex-wrap: wrap; }
  .fn-brand { margin-right: auto; }
  .fn-burger { display: inline-block; }
  .fn-bar { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 0; margin-top: 0.5rem; }
  .fn.fn-mobile-open .fn-bar { display: flex; }
  .fn-bar > li { width: 100%; }
  .fn-bar a, .fn-top { width: 100%; border: none; border-top: 1px solid #eee; padding: 13px 10px; font-size: 12px; text-align: left; }
  .fn-bar a.fn-on, .fn-top.fn-on { background: #000; color: #fff; }
  .fn-drop { position: static; border: none; min-width: 0; }
  .fn-drop a { padding: 12px 10px 12px 26px; background: #fafafa; }
  .fn-drop a:hover, .fn-drop a:focus { background: #000; color: #fff; }
}

/* One size on every page: line spacing, text size and box metrics are fixed here, so no page's own CSS (body
   line-height, font-size, button styles, iOS text inflation) can change the height of the bar or its buttons. */
.fn { line-height: 21px; font-size: 13px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; font-weight: normal; letter-spacing: normal; text-transform: none; }
.fn-brand { line-height: 21px; }
.fn-burger, .fn-bar a, .fn-top { line-height: 18px; height: auto; min-height: 0; margin: 0; font-weight: normal; text-transform: none; box-shadow: none; border-radius: 0; }
.fn-bar > li { line-height: 18px; margin: 0; padding: 0; }
.fn-drop a { line-height: 18px; }
/* page-independent spacing: px, not rem (rem follows each page's own root font size) */
.fn { gap: 8px; padding: 8.8px 17.6px; }
.fn-brand { margin-right: 9.6px; }
@media (max-width: 719px) { .fn-bar { margin-top: 8px; } }
/* phone: [MENU] sits at the right edge (the px spacing above must not cancel the mobile auto margin) */
@media (max-width: 719px) { .fn-brand { margin-right: auto; } .fn-burger { margin-left: auto; } }