/* The header on every page (home, timeline, memories). Markup:
   <nav class="site-nav" aria-label="Site"><span class="brand">NASCAR-Fans.com</span>
   <a href="/">Home</a><a href="/timeline">Timeline</a><a href="/memories">Fan memories</a></nav>
   Mark the current page with aria-current="page". The menu is 44px, then a 6px gap and the 14px checkered strip (64px). */
.site-nav {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 1.25rem;
    padding: 0 1.25rem;
    background: rgba(0, 0, 0, 0.92);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.95rem;
    position: relative;
    z-index: 1;
}
.site-nav .brand {
    margin-right: auto;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #fff;
}
.site-nav a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    color: #bbb;
    text-decoration: none;
}
.site-nav a:hover { color: #fff; }
/* The checkered-flag strip under the menu, the full width of the page. */
.site-nav::after {
    content: "";
    flex-basis: calc(100% + 2.5rem);
    height: 14px;
    margin: 6px -1.25rem 0;  /* a gap so the red current-page underline sits clear of the strip */
    background: repeating-conic-gradient(#f2f2f0 0 25%, #0b0b0c 0 50%) 0 0 / 14px 14px;
}
.site-nav a[aria-current="page"] {
    color: #fff;
    box-shadow: inset 0 -2px 0 #d01c1c;
}
.feb18 .site-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 #777; }
.feb18 .site-nav::after { opacity: 0.35; }