#main-header { position: fixed; top: 0; left: 0; width: 100%; display: flex; flex-direction: column; padding-top: 4rem; box-sizing: border-box; z-index: 100005; pointer-events: none; }

/* Desktop: hide APOLLO/MAGAZINE columns and marquee in search and grid mode */
@media (min-width: 901px) {
    body.search-open #col-apollo, body.grid-mode #col-apollo,
    body.search-open #col-magazine, body.grid-mode #col-magazine,
    body.search-open #col-archive,
    body.search-open .marquee-wrapper, body.grid-mode .marquee-wrapper {
        opacity: 0 !important; pointer-events: none !important; transition: 0.3s;
    }

    /* Keep the tag bar visible: limit search overlay height to not cover the footer */
    body.search-open #search-overlay {
        height: auto !important;
        bottom: 0 !important;
        top: 0 !important;
        padding-bottom: 10rem !important; /* enough room for the footer tag bar */
    }
}
.header-columns, #dashboard-wrapper { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 4fr) minmax(0, 1.5fr); width: 100%; margin: 0; padding: 0 5%; box-sizing: border-box; gap: 5rem; }
.header-columns > div { pointer-events: auto; }
.header-col, .side-column, #project-pile { display: flex; justify-content: center; align-items: center; width: 100%; position: relative; }
.center-col-flex { display: flex; flex-direction: column; align-items: center; width: 100%; }

.title-wrapper { display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
.menu-content { display: flex; align-items: center; padding-left: 1rem; padding-right: 1.5rem; position: relative; }

.title-anchor { position: relative; display: inline-flex; justify-content: center; align-items: center; }
/* Font is 4.6rem. Dropdown font is calibrated by JS to be max 1.2rem but capped to stay within title width. */
.big-header-title { font-size: 4.6rem; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; line-height: 1; white-space: nowrap; transition: opacity 0.2s; }
.menu-toggle { font-size: 4.6rem; font-weight: bold; line-height: 1; user-select: none; transition: 0.2s; display: inline-block; width: 5rem; text-align: center; padding: 0; box-sizing: border-box; }

.dropdown-menu { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 0.6rem; width: max-content; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); opacity: 0; pointer-events: none; transition: opacity 0.2s; white-space: nowrap; }
/* Base dropdown link size — JS will scale this up towards 1.2rem as far as possible */
.dropdown-menu .highlight-link { font-size: 1.2rem; padding: 0.3rem 0.6rem; }
.header-col.menu-open .big-header-title { opacity: 0; pointer-events: none; } 
.header-col.menu-open .dropdown-menu { opacity: 1; pointer-events: auto; } 

.title-wrapper:hover .menu-toggle { opacity: 0.6; }

/* FIX: Specific Hex Codes from Instagram Screenshot */
.plus-apollo { color: #A6BBD1; }
.plus-archive { color: #F1EED7; }
.plus-magazine { color: #B24F44; }

.marquee-wrapper { width: 100%; overflow: hidden; margin-top: 2.5rem; padding: 1rem 0; background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(0.8rem); pointer-events: auto; transition: opacity 0.3s; }
.marquee-track { display: inline-block; white-space: nowrap; font-size: 1.2rem; font-weight: bold; animation: scrolling-text 120s linear infinite; }
.marquee-track span { padding-right: 1rem; }
@keyframes scrolling-text { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

#main-footer { position: fixed; bottom: 0; left: 0; width: 100%; display: flex; justify-content: center; padding: 4rem 5%; box-sizing: border-box; z-index: 100005; opacity: 0; pointer-events: none; transition: opacity 0.5s; }
body.active-state #main-footer { opacity: 1; pointer-events: none; }
body.active-state #filter-bar { pointer-events: auto; }
body.active-state.history-open #main-footer { opacity: 0; pointer-events: none; }
#filter-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; max-width: 90rem; }
#filter-bar .highlight-link { background: transparent; backdrop-filter: none; box-shadow: none; }
.tag-filter { border: none; box-shadow: 0 0.4rem 1.5rem rgba(0,0,0,0.06); border-radius: 0.4rem; padding: 0.6rem 1.2rem; }