/* === Logo layout — edit values below ===
   Base gap + optional notch (safe-area). Logo heights at three breakpoints.
   After saving, bump ?v= on logo-vars.css in every .html file (search: logo-vars.css). */

:root {
    /* Space from top: base gap + iPhone notch / Dynamic Island when present */
    --logo-inset-top: calc(20px + env(safe-area-inset-top, 0px));
    --logo-height: 30px;
    --header-bar-height: var(--logo-height);
    --header-stack-height: calc(var(--logo-inset-top) + var(--header-bar-height));
}

@media (max-width: 768px) {
    :root {
        --logo-height: 26px;
    }
}

@media (max-width: 480px) {
    :root {
        --logo-height: 22px;
    }
}