/* ---------------------------------------------------------------- header --
   nightfall — what the whole bar becomes once the page has crossed */

/* Nightfall: the header follows the page down rather than sitting on it as a
   lit bar. Toggled from main.js when a dark region passes under the header. */

.is-night .logo-icon {
    background-color: var(--honey);
}

.is-night .logo-word {
    color: var(--night-ink);
}

.is-night .nav-btn {
    color: var(--night-ink-soft);
}

.is-night .nav-btn:hover {
    background: color-mix(in srgb, var(--honey) 16%, transparent);
    color: var(--lantern);
}

.site-header.is-night .nav-cta {
    border-color: color-mix(in srgb, var(--honey) 55%, transparent);
    color: var(--lantern);
}

.site-header.is-night .nav-cta:hover {
    background: color-mix(in srgb, var(--honey) 16%, transparent);
    border-color: var(--lantern);
}

.is-night .mobile-menu-toggle {
    border-color: var(--night-rule);
}

.is-night .mobile-menu-toggle span {
    background: var(--night-ink);
}

.is-night :focus-visible {
    outline-color: var(--lantern);
}

/* Grown moss at the root, the made lamp at the tip: the two sources in the
   order a reader meets them. It began in --creek, the same teal a reviewer
   caught on the stem — "both of this round's new ornaments are drawn in a
   colour that belongs to neither declared light source". */
.site-header.is-night .read-vein {
    --vine-root: color-mix(in oklab, var(--sage) 55%, transparent);
    --vine-mid: var(--honey);
    --vine-tip: var(--lantern);
}

.site-header.is-night .read-count {
    color: var(--night-ink-soft);
}

.site-header.is-night .read-at {
    color: var(--lantern);
}