/* Public web only. base.html excludes curator routes, embeds, native iOS and
   the archived homepage. Page templates must not restyle this header. */
body.rh-public {
    --rh-hover: #e5e0d7;
    --rh-button: #3f3c39;
    --rh-button-text: #f8f5ef;
    --rh-ink: #3f3c39;
    --rh-muted: #77716a;
    --rh-line: #d8d4cc;
    --rh-gutter: clamp(1.2rem, 4vw, 3rem);
    /* Own the canvas colour only; artist artwork/gradients remain intact. */
    background-color: var(--rh-paper);
    color: var(--rh-ink);
    font-family: var(--rh-sans);
    -webkit-font-smoothing: antialiased;
}
#rh-public-header {
    position: sticky;
    top: 0;
    z-index: 70;
    width: 100%;
    padding: 0;
    background: var(--rh-paper);
    background: color-mix(in srgb, var(--rh-paper) 94%, transparent);
    color: var(--rh-ink);
    text-align: left;
    flex-shrink: 0;
    font-family: var(--rh-sans);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
#rh-public-header .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 1280px;
    min-height: 72px;
    margin: 0 auto;
    padding: 0.65rem var(--rh-gutter);
    padding-top: max(0.65rem, env(safe-area-inset-top));
}
#rh-public-header .branding-link { display: flex; align-items: center; min-height: 44px; min-width: 44px; }
#rh-public-header .branding-logo { width: 22px; height: auto; max-width: none; }
#rh-public-header .header-actions {
    position: relative;
    top: auto;
    right: auto;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    transform: none;
}
#rh-public-header .header-actions .header-profile { display: inline-flex; align-items: center; justify-content: center; width: auto; flex-shrink: 0; min-width: 44px; min-height: 44px; padding: 0.5rem; color: var(--rh-ink); background: transparent; border-color: transparent; }
#rh-public-header .header-actions .header-guest-icon { width: 22px; height: 22px; }
#rh-public-header .header-menu { background: var(--rh-paper); color: var(--rh-ink); border: 1px solid var(--rh-line); border-radius: 6px; box-shadow: 0 12px 32px rgba(39,38,34,0.1); }
#rh-public-header .header-menu-link { min-height: 44px; color: var(--rh-ink); font-size: 0.8rem; letter-spacing: -0.015em; text-transform: none; }
#rh-public-header .header-menu-link:hover, #rh-public-header .header-menu-link:focus-visible { background: var(--rh-hover); color: var(--rh-ink); transform: none; }
#rh-public-header .header-menu-link--disabled { opacity: 0.45; }
.rh-public :is(a, button, input, summary, [tabindex]):focus-visible { outline: 2px solid var(--rh-muted); outline-offset: 4px; }
@media (max-width: 600px) {
    #rh-public-header .header-inner { min-height: 62px; padding-block: 0.4rem; padding-top: max(0.4rem, env(safe-area-inset-top)); }
    #rh-public-header .branding-logo { width: 20px; }
    #rh-public-header .header-actions { gap: 0.3rem; }
}

/* Theme selection stays with each page's existing dark-mode control. */
body.rh-public.dark-mode {
    --rh-ink: #f1ece2;
    --rh-muted: #aaa398;
    --rh-line: #363431;
    --rh-hover: #272522;
    --rh-button: #e2dcd2;
    --rh-button-text: #262421;
    color-scheme: dark;
}
body.rh-public.dark-mode #rh-public-header .branding-logo { filter: invert(1); }
#rh-public-header::after, #rh-public-header .header-bg { display: none; }
#rh-public-header :is(a, button):focus-visible { outline: 2px solid var(--rh-muted); outline-offset: 4px; }