/* **The site header, shared by the website and the flasher.**

   > ### **ONE COPY, LOADED BY BOTH.**
   >
   > The maintainer, 2026-09-07: *"Can we put the same navigation header on the flasher
   > website page so that it stays consistent with the rest of the site?"* These
   > rules used to live inside `site.css`, which the flasher cannot load: it is
   > built on beer.css, and `site.css` restyles `html`, `body` and `*`.
   >
   > They live here so there is ONE definition of the header. `site.css`
   > `@import`s this file, so every page that already linked `site.css` is
   > unchanged; the flasher links it directly alongside its own theme.
   >
   > It uses only custom properties BOTH themes define -- `--cyan`, `--ink`,
   > `--ink-soft`, `--line`, `--line-soft`, `--bg-deep`, `--grad`, `--sans`,
   > `--r-sm`, `--wrap`, `--narrow`. */

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--cyan); color: #04202a; padding: .7rem 1.1rem;
  border-radius: 0 0 var(--r-sm) 0; font-weight: 700;
}
.skip:focus { left: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.wrap.narrow { max-width: var(--narrow); }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(6, 8, 14, 0.78);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.nav-in {
  display: flex; align-items: center; gap: 1rem;
  height: 66px;
}
.brand { display: flex; align-items: center; gap: .6rem; margin-right: auto; flex: 0 0 auto; }
.brand:hover { text-decoration: none; }
.brand img { width: 30px; height: 30px; }
.brand span {
  font-weight: 800; font-size: 1.16rem; letter-spacing: -0.03em; color: #fff;
}
.brand span i {
  /* **[V] 2026-09-07: `font-family` is not optional here.** This header is also
     loaded by the flasher, and beer.css sets `i { font-family: var(--font-icon) }`
     for EVERY `<i>` on that page -- so "DTN" rendered as Material Symbols glyphs
     and the wordmark came out broken. On the site this changes nothing. */
  font-family: inherit;
  /* **[V] 2026-09-07: the family alone was not enough.** beer.css's `i` rule
     also forces `font-size: 1.5rem` and `font-feature-settings: "liga"`. At
     24px the glyphs outgrew the box `background-clip: text` paints through, so
     "DTN" rendered as partly-painted fragments -- the same broken wordmark,
     with the right font. Everything that rule touches is put back. */
  /* **[V] The one that actually clipped it.** beer.css also makes `i` an
     `inline-flex` icon box: measured 24x24 on the flasher against 36x21 on the
     site, while "DTN" needs 36px. `background-clip: text` can only paint inside
     that box, so the D and half the N were never drawn. */
  display: inline;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  font-feature-settings: normal;
  font-style: normal; background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.nav-links { display: none; align-items: center; gap: .15rem; }
.nav-links a {
  color: var(--ink-soft); font-size: .93rem; font-weight: 500;
  padding: .5rem .68rem; border-radius: var(--r-sm);
  white-space: nowrap;
}
.nav-links a:hover { color: #fff; background: rgba(255,255,255,.055); text-decoration: none; }
.nav-links a[aria-current="page"] { color: #fff; background: rgba(34,211,238,.1); }
.nav .btn { padding: .52rem 1rem; font-size: .9rem; }

.nav-toggle {
  margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 10px;
  background: rgba(255,255,255,.05); border: 1px solid var(--line);
  color: var(--ink); cursor: pointer;
}
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle .x { display: none; }
.nav-toggle[aria-expanded="true"] .x { display: block; }
.nav-toggle[aria-expanded="true"] .m { display: none; }

.nav-drawer {
  display: none;
  border-top: 1px solid var(--line-soft);
  background: var(--bg-deep);
  padding: .6rem 0 1.1rem;
}
.nav-drawer.open { display: block; }
.nav-drawer a {
  display: block; padding: .72rem .25rem; color: var(--ink-soft);
  border-bottom: 1px solid var(--line-soft); font-weight: 500;
}
.nav-drawer a:hover { color: #fff; text-decoration: none; }
.nav-drawer .btn { margin-top: 1rem; width: 100%; justify-content: center; }

@media (min-width: 1060px) {
  .nav-links { display: flex; }
  .nav-toggle { display: none; }
  .nav-drawer { display: none !important; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .82rem 1.4rem; border-radius: 999px;
  font: 700 .97rem/1 var(--sans); letter-spacing: -0.01em;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
  text-decoration: none !important; white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: var(--grad); color: #041016;
  box-shadow: 0 6px 24px -8px rgba(34,211,238,.7);
}
.btn-primary:hover { box-shadow: 0 10px 30px -8px rgba(34,211,238,.85); }
.btn-ghost {
  background: rgba(255,255,255,.04); color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(150,185,225,.28); }
.btn-quiet { background: transparent; color: var(--ink-soft); border-color: var(--line); }
.btn-quiet:hover { color: #fff; border-color: rgba(150,185,225,.3); }
.btn svg { width: 17px; height: 17px; }