/* ===========================================================================
   The top bar and the wordmark.

   Its own file because two shells use it: the shared layout, and eol.html,
   which is self-contained. Both link this, so the bar cannot drift between
   them. It styles nothing else and relies on tokens both shells define.
   =========================================================================== */

.topbar{
  position:sticky;top:0;z-index:100;
  background:var(--bar);
  -webkit-backdrop-filter:saturate(1.6) blur(8px);
  backdrop-filter:saturate(1.6) blur(8px);
  border-bottom:1px solid var(--rule);
}

.topbar-inner{
  max-width:1120px;margin:0 auto;padding:11px 20px 12px;
  display:flex;flex-wrap:wrap;gap:8px 24px;
  align-items:center;justify-content:space-between;
}

/* Wordmark. The 2px rule repeats the masthead rule under every page title,
   so it stays under the type only: the shield sits outside .brand-type and
   the rhyme with the masthead survives.

   The mark scales with the viewport the way h1 does, so the bar does not
   read as a thin strip above a 44px page title at full width. The floors are
   the sizes it carried before 2026-09-01 and they are load-bearing: the bar
   fits on one line down to about 820px at those sizes, and pinning the larger
   type all the way down pushed the nav onto a second line 60px earlier. */
.brand{
  display:inline-flex;align-items:center;gap:clamp(11px,1.1vw,12px);
  line-height:1;text-decoration:none;
}
.brand:hover{text-decoration:none}
.brand-type{
  display:inline-block;
  border-bottom:2px solid var(--ink);padding-bottom:5px;
}
.brand:hover .brand-type{border-bottom-color:var(--accent)}

/* The shield, inline SVG from _includes/logo-mark.svg. Its two fills read
   these variables, so one file serves both themes and the navy, which is
   1.2:1 on the dark ground and therefore invisible, is only ever used on the
   light one. The light values are declared unconditionally, so a visitor whose
   OS setting is "system" resolves without a media query; the dark ones follow
   the same three-state pattern as the colour tokens in site.css.

   These are logo variables, not site tokens: --ink and --accent are both dark
   on the light palette, and painting the shield with them would collapse its
   two tones into one. Only the height is set and the width follows it, so
   replacing the artwork cannot change the height of the bar. */
.brand-mark{
  display:block;width:auto;height:clamp(34px,3.6vw,40px);flex:none;
  --logo-ink:#0D2547;--logo-accent:#4F8AB8;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand-mark{--logo-ink:#E3E9F1;--logo-accent:#7FB2E0}
}
:root[data-theme="dark"] .brand-mark{--logo-ink:#E3E9F1;--logo-accent:#7FB2E0}

.brand-name{
  font-family:Spectral,Georgia,serif;font-weight:700;font-size:clamp(19px,2vw,22px);
  letter-spacing:-.015em;color:var(--ink);
}
.brand-sub{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:clamp(9px,.9vw,10px);font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin-left:clamp(9px,.9vw,10px);
}
.brand:hover .brand-name{color:var(--ink)}

/* The nav scales with the wordmark for the same reason, and stops at the
   16px body size: a nav that outgrows running text starts competing with the
   page title. Its floor is the old fixed size, so the width at which the bar
   wraps to two lines is set by the floors alone and has not moved. */
.nav{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(20px,1.9vw,22px);font-size:clamp(14px,1.45vw,16px);
}
.nav a{color:var(--ink-3);text-decoration:none}
.nav a:hover{color:var(--accent);text-decoration:underline}
.nav a.active{color:var(--ink);font-weight:600}

.nav a.nav-cta{
  color:var(--accent);font-weight:600;text-decoration:none;
  border:1px solid var(--accent);border-radius:3px;
  padding:clamp(3px,.36vw,4px) clamp(11px,1.2vw,13px);
}
.nav a.nav-cta:hover{background:var(--accent-soft);text-decoration:none}

/* The sub-label stays visible at every width. Hiding it below 44em made the
   bar jump between one and two lines as the viewport narrowed: dropping it
   freed enough width for the nav to rejoin the wordmark, then the nav wrapped
   again a little further down without the label coming back. It shrinks with
   the name instead. */
@media (max-width:44em){
  .topbar-inner{padding:10px 18px}
  .brand{gap:9px}
  .brand-mark{height:28px}
  .brand-name{font-size:17px}
  .brand-sub{font-size:8.5px;letter-spacing:.14em;margin-left:7px}
  .nav{gap:14px;font-size:13.5px}
}

@media print{
  .topbar{display:none}

  /* The shield survives print on /eol/, as the letterhead. The print block in
     site.css forces the light palette by restating the :root tokens, but the
     logo variables are set on .brand-mark rather than on :root, so the dark
     rules above would otherwise still apply and a dark-theme visitor would
     print a near-white shield onto white paper. Restated here at the same
     specificity as those rules, and after them. */
  :root .brand-mark,
  :root[data-theme="dark"] .brand-mark,
  :root:not([data-theme="light"]) .brand-mark{--logo-ink:#0D2547;--logo-accent:#4F8AB8}
}