header {
    top: 0;
    right: 0;
    left: 0;
    padding: 1rem 1rem calc(1rem - 8px);
    z-index: 100;
}

body[data-template='work'] header,
body[data-template='architects'] header,
body[data-template='references'] header,
body[data-template='about'] header {
    min-height: 2.75rem;
    max-height: 2.75rem;
    overflow: hidden;
}

/* LOGO */
#header-logo {
    grid-column: 1/2;
    display: flex !important;
    width: fit-content;
    transform: translate(-4px, -5.5px);
}

#header-logo .--point {
    width: 10px;
    height: 10px;
    margin: 0 2px;
    background: black;
    transform: translateY(1.5px);
}
@media only screen and (min-width: 768px) {
    #header-logo {grid-column: 1/13;}
    #header-logo .--point {
        width: 9px;
        height: 9px;
        margin: 0 1.7px 0 2px;
        transform: translateY(1.2px);
    }
}




/* NAV */
#header-pages {
    grid-column: 2/-1;
    column-gap: 0;
    transform: translate(4px, -4px);
}
#header-pages a:not(:last-of-type) {margin-right: .5rem;}
@media only screen and (min-width: 768px) {
    #header-pages {
        grid-column: 13/-1;
        justify-content: flex-start;
        column-gap: 1rem;
        transform: translate(-4px, -4px);
    }

    #header-pages a {
        margin-right: 0 !important;
        grid-column: span 3;
    }
}
@media only screen and (min-width: 1024px) {
    #header-pages a {grid-column: span 2;}
}




/* 
ATLAS
*/
#header-atlas--view {transform: translate(-4px, -4px);}
#header-atlas--view > *:not(:last-child) {margin-right: .5rem;}

#header-atlas--extra {
    column-gap: 0;
    transform: translate(4px, -4px);
}
#header-atlas--extra > *:not(:last-child) {margin-right: .5rem;}

@media only screen and (min-width: 768px) {
    #header-atlas--view {grid-column: 1/13;}
    #header-atlas--extra {
        grid-column: 13/-1;
        column-gap: 1rem;
        transform: translate(-4px, -4px);
    }

    #header-atlas--extra > * {
        margin-right: 0 !important;
        grid-column: span 3;
    }
}
@media only screen and (min-width: 1024px) {
    #header-atlas--view>*:not(:last-child) {margin-right: 1rem;}
    #header-atlas--extra > * {grid-column: span 2;}
}



/* 
ATLAS NAVS
*/
.header-atlas--navs {
    top: var(--h_atlas-m);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 150;
}
.header-atlas--navs[data-show='false'] {display: none;}

.header-atlas--navs > * {grid-column: span 3;}

.h-atlas-filter--button {
    color: var(--c-gray);
    transition: 200ms ease-in-out;
}
#header-atlas--filters[data-view="authorship"] #h_atlas-filter-authorship {color: black;}
#header-atlas--filters[data-view="country"] #h_atlas-filter-country {color: black;}
#header-atlas--filters[data-view="ogUse"] #h_atlas-filter-ogUse {color: black;}
#header-atlas--filters[data-view="prevUse"] #h_atlas-filter-prevUse {color: black;}
#header-atlas--filters[data-view="newUse"] #h_atlas-filter-newUse {color: black;}
#header-atlas--filters[data-view="fDate"] #h_atlas-filter-fDate {color: black;}

#header-atlas--filters[data-filter="authorship"]:not([data-view="authorship"]) #h_atlas-filter-authorship {text-decoration: underline;}
#header-atlas--filters[data-filter="country"]:not([data-view="country"]) #h_atlas-filter-country {text-decoration: underline;}
#header-atlas--filters[data-filter="ogUse"]:not([data-view="ogUse"]) #h_atlas-filter-ogUse {text-decoration: underline;}
#header-atlas--filters[data-filter="prevUse"]:not([data-view="prevUse"]) #h_atlas-filter-prevUse {text-decoration: underline;}
#header-atlas--filters[data-filter="newUse"]:not([data-view="newUse"]) #h_atlas-filter-newUse {text-decoration: underline;}
#header-atlas--filters[data-filter="fDate"]:not([data-view="fDate"]) #h_atlas-filter-fDate {text-decoration: underline;}


.h_atlas-filter--list {display: none;}
#header-atlas--filters[data-view="authorship"] #h_atlas-filter_list-authorship {display: block; animation: hAtlasListAni 200ms ease-in-out forwards;}
#header-atlas--filters[data-view="country"] #h_atlas-filter_list-country {display: block; animation: hAtlasListAni 200ms ease-in-out forwards;}
#header-atlas--filters[data-view="ogUse"] #h_atlas-filter_list-ogUse {display: block; animation: hAtlasListAni 200ms ease-in-out forwards;}
#header-atlas--filters[data-view="prevUse"] #h_atlas-filter_list-prevUse {display: block; animation: hAtlasListAni 200ms ease-in-out forwards;}
#header-atlas--filters[data-view="newUse"] #h_atlas-filter_list-newUse {display: block; animation: hAtlasListAni 200ms ease-in-out forwards;}
#header-atlas--filters[data-view="fDate"] #h_atlas-filter_list-fDate {display: block; animation: hAtlasListAni 200ms ease-in-out forwards;}
@keyframes hAtlasListAni {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

#header-atlas--filters[data-filter="authorship"] #h_atlas-filter_list-authorship a:not(.--active) {color: var(--c-gray);}
#header-atlas--filters[data-filter="country"] #h_atlas-filter_list-country a:not(.--active) {color: var(--c-gray);}
#header-atlas--filters[data-filter="ogUse"] #h_atlas-filter_list-ogUse a:not(.--active) {color: var(--c-gray);}
#header-atlas--filters[data-filter="prevUse"] #h_atlas-filter_list-prevUse a:not(.--active) {color: var(--c-gray);}
#header-atlas--filters[data-filter="newUse"] #h_atlas-filter_list-newUse a:not(.--active) {color: var(--c-gray);}
#header-atlas--filters[data-filter="fDate"] #h_atlas-filter_list-fDate a:not(.--active) {color: var(--c-gray);}

.h_atlas-filter--list a {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.h_atlas-filter--list a .--counter {
    display: inline-block;
    min-width: max-content;
}


/* SORTING */
#header-atlas--sorting a {
    grid-column: 1/-1;
    width: fit-content;
    transition: 200ms ease-in-out;
}
#header-atlas--sorting[data-sort="title-asc"] #h_atlas-sorting-title_asc,
#header-atlas--sorting[data-sort="title-desc"] #h_atlas-sorting-title_desc,
#header-atlas--sorting[data-sort="authorship-asc"] #h_atlas-sorting-authorship_asc,
#header-atlas--sorting[data-sort="authorship-desc"] #h_atlas-sorting-authorship_desc,
#header-atlas--sorting[data-sort="country-asc"] #h_atlas-sorting-country_asc,
#header-atlas--sorting[data-sort="country-desc"] #h_atlas-sorting-country_desc,
#header-atlas--sorting[data-sort="newest-oldest"] #h_atlas-sorting-newest_oldest,
#header-atlas--sorting[data-sort="oldest-newest"] #h_atlas-sorting-oldest_newest {color: black !important;}

@media only screen and (min-width: 768px) {
    #header-atlas--filters {
        left: calc(50vw - .5rem);
        background: white;
        padding-top: 0 !important;
    }

    #header-atlas--sorting {
        left: calc(50vw - .5rem);
        background: white;
        padding-top: 0 !important;
    }
}

@media only screen and (min-width: 1024px) {
    .header-atlas--navs {top: var(--h_atlas-d);}
    #header-atlas--filters {right: calc(calc(calc(calc(100vw - 25rem) / 24) * 8) + 8rem);}
    #header-atlas--sorting {
        left: calc(calc(calc(calc(100vw - 25rem) / 24) * 14) + 14rem);
        right: calc(calc(calc(calc(100vw - 25rem) / 24) * 6) + 6rem);
    }
}

@media (hover: hover) {
    .header-atlas--navs .h-atlas-filter--button,
    .header-atlas--navs a,
    .h_atlas-filter--list a {transition: 200ms ease-in-out;}

    .header-atlas--navs:hover .h-atlas-filter--button,
    .header-atlas--navs:hover a,
    .h_atlas-filter--list:hover a:not(.--active) {color: var(--c-gray);}

    .header-atlas--navs .h-atlas-filter--button:hover,
    .header-atlas--navs a:hover,
    .h_atlas-filter--list a:hover {color: black !important;}
}




/* 
TABLE
*/
@media only screen and (min-width: 768px) {
    #header-atlas--table {
        grid-column: 1/-1;
        margin: 1rem -1rem -4px;
        padding: 0 1rem .5rem;
        border-bottom: 1px solid black;
    }

    #header-atlas--table .--id {grid-column: 1/3;}
    #header-atlas--table .--work {grid-column: 3/13;}
    #header-atlas--table .--authorship {grid-column: 13/-5;}
    #header-atlas--table .--contstruction {grid-column: -5/-1;}
}
@media only screen and (min-width: 1024px) {
    #header-atlas--table .--id {grid-column: 1/2;}
    #header-atlas--table .--work {grid-column: 2/7;}
    #header-atlas--table .--authorship {grid-column: 7/13;}
    #header-atlas--table .--country {grid-column: 13/15;}
    #header-atlas--table .--project {grid-column: 15/17;}
    #header-atlas--table .--contstruction {grid-column: 17/19;}
    #header-atlas--table .--oguse {grid-column: 19/22;}
    #header-atlas--table .--newuse {grid-column: 22/-1;}
}