/* ============================================================
   02-header.css  —  extracted from overturejourney.html
   ============================================================ */

html { scroll-padding-top: 84px; }
        #main-header {
            position: fixed; top: 0; left: 0; right: 0; z-index: 40;
            --h-fg: #ffffff; --h-fg-soft: rgba(255,255,255,.82);
            --h-chip: rgba(255,255,255,.12); --h-chip-line: rgba(255,255,255,.3);
            --h-mark: rgba(255,255,255,.16); --h-mark-fg: #ffffff;
            background-color: rgba(255,255,255,0);
            border-bottom: 1px solid rgba(255,255,255,0);
            box-shadow: 0 0 0 0 rgba(15,23,42,0);
            -webkit-backdrop-filter: blur(0px) saturate(100%);
            backdrop-filter: blur(0px) saturate(100%);
            transition: background-color .45s ease, border-color .45s ease, box-shadow .45s ease,
                        -webkit-backdrop-filter .45s ease, backdrop-filter .45s ease;
        }
        /* mica layer: soft top-lit sheen + fine grain, fades in with the glass */
        #main-header::before {
            content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
            background-image:
                linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.12) 100%),
                url("../images/patterns/noise-01.svg");
            background-size: 100% 100%, 160px 160px;
            transition: opacity .45s ease;
        }
        #main-header.is-scrolled {
            --h-fg: #0f172a; --h-fg-soft: #334155;
            --h-chip: rgba(255,255,255,.6); --h-chip-line: rgba(15,23,42,.14);
            --h-mark: #18305C; --h-mark-fg: #ffffff;
            background-color: rgba(255,255,255,.66);
            border-bottom-color: rgba(255,255,255,.6);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 1px 0 rgba(15,23,42,.06), 0 10px 28px -14px rgba(15,23,42,.32);
            -webkit-backdrop-filter: blur(22px) saturate(180%);
            backdrop-filter: blur(22px) saturate(180%);
        }
        #main-header.is-scrolled::before { opacity: 1; }

        #main-header .hdr-brand { color: var(--h-fg); transition: color .35s ease; }
        #main-header .hdr-tag   { color: var(--h-fg-soft); transition: color .35s ease; }
        #main-header .hdr-mark  { background: var(--h-mark); color: var(--h-mark-fg); border: 1px solid var(--h-chip-line);
                                  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color .35s ease, border-color .35s ease; }
        #main-header .hdr-link  { position: relative; color: var(--h-fg-soft); transition: color .25s ease; white-space: nowrap; }
        #main-header .hdr-link:hover { color: var(--h-fg); }
        #main-header .hdr-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: currentColor;
                                  transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
        #main-header .hdr-link:hover::after { transform: scaleX(1); }
        #main-header .hdr-chip  { background: var(--h-chip); color: var(--h-fg); border: 1px solid var(--h-chip-line);
                                  transition: background-color .35s ease, border-color .35s ease, color .35s ease; }
        #main-header .hdr-chip:hover { background: var(--h-chip-line); }
        #main-header :focus-visible { outline: 2px solid #1ebfbf; outline-offset: 3px; }

        @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
            #main-header.is-scrolled { background-color: rgba(255,255,255,.94); }
        }
        @media (prefers-reduced-transparency: reduce) {
            #main-header.is-scrolled { background-color: rgba(255,255,255,.97); -webkit-backdrop-filter: none; backdrop-filter: none; }
            #main-header.is-scrolled::before { opacity: 0; }
        }
        @media (prefers-reduced-motion: reduce) {
            #main-header, #main-header::before, #main-header .hdr-brand, #main-header .hdr-tag, #main-header .hdr-mark,
            #main-header .hdr-link, #main-header .hdr-link::after, #main-header .hdr-chip { transition: none; }
        }