/* bar.css: the eCopter.AI top bar, the same on every page of every host, including the two slide decks.
   Every rule is prefixed .ec- and sets its own font/colour so a page's own CSS cannot bend it. */
.ec-bar { display: block; margin: 0; padding: 0; background: #000; border-bottom: 1px solid #2b2521;
  font: 600 16px/1.2 "Public Sans", system-ui, sans-serif; letter-spacing: normal; text-transform: none; text-align: left; }
.ec-bar .ec-in { box-sizing: border-box; max-width: 1240px; margin: 0 auto; padding: 14px 16px; display: flex; align-items: center;
  justify-content: space-between; gap: 8px 28px; flex-wrap: wrap; }
.ec-bar .ec-brand { font: 800 30px/1 "Big Shoulders Display", "Arial Narrow", sans-serif; color: #efe9e1; text-decoration: none; white-space: nowrap; letter-spacing: .01em; }
.ec-bar .ec-brand i { font-style: normal; font-weight: 600; color: #ff6a2b; }
.ec-bar .ec-nav { display: flex; gap: 4px 22px; flex-wrap: wrap; margin: 0; padding: 0; }
.ec-bar .ec-nav a { color: #a69d92; text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; font: inherit; }
.ec-bar .ec-nav a:hover { color: #efe9e1; }
.ec-bar .ec-nav a[aria-current] { color: #efe9e1; border-bottom-color: #ff6a2b; }
.ec-bar a:focus-visible { outline: 2px solid #ffd27a; outline-offset: 3px; }
@media (max-width: 640px) {
  .ec-bar .ec-in { padding: 12px 16px 6px; }
  .ec-bar .ec-nav { width: 100%; justify-content: space-between; gap: 4px 12px; }
  .ec-bar .ec-nav a { white-space: nowrap; font-size: 15px; }
}