@import url('https://fonts.cdnfonts.com/css/trajan-pro');
@font-face {
    font-family: HeldaneTextRegular;
    src: url("HeldaneTextRegular.otf") format("opentype");
}

:root { --hdr: 150px; }

BODY		{
			margin: 0px;
			overflow-x: hidden;
            background-color: rgb(255, 255, 255);
			}

TOPHEADER		{
			position: absolute;
			width: 100vw;
			top: 0px;
			left: 0px;
            height: var(--hdr);
			display: flex;
			flex-wrap: nowrap;
			gap: 80px;
			justify-content: center;
            align-items: center;
            font-family: 'Trajan Pro', 'Times New Roman', serif;
            letter-spacing: 3px;
            z-index: 1;/*on top of big cursor*/
            background-color: white;
            box-sizing: border-box;
			}

TOPHEADER IMG  {
            max-width: 100%;
            max-height: var(--hdr);
            border:none;
            }

TOPHEADER div  {
            text-align: center;
            }

TOPHEADER DIV a    {
                text-decoration: none;
                color:black;
                }

FEATURE {
        position: relative;
        display: table-cell;
        top: var(--hdr);
        width: 100vw;
        height: calc(100vh - var(--hdr));
        background-color: rgba(0, 0, 0, 0.773);
        font-family: 'HeldaneTextRegular', Georgia, sans-serif;
        display: flex;
        align-items: center;
        justify-content: center;
        height: -moz-calc(100vh - var(--hdr));
        height: -webkit-calc(100vh - var(--hdr));
        height: -o-calc(100vh - var(--hdr));
        height: calc(100vh - var(--hdr));
        overflow-y: auto;
        overflow-x: hidden;
        }
.poster {
        background-color: #538B23;
        width: 100vw;
        padding: 0px;
        }
FEATURE img {
            width: 100%;
            image-rendering: pixelated;
            image-rendering: -moz-crisp-edges;
            image-rendering: crisp-edges;
            border: none;
            }
FEATURE P   {
            margin: 0;
            padding: 20px;
            width: calc(100%-40);
            background-color: white;
            text-align: center;
            }
FEATURE P a {
            color:black;
            }

#cursor {
        position:absolute;
        pointer-events: none;
        visibility: hidden;/*made visible in script*/
        }
#cursor IMG    {
                image-rendering: pixelated;
                image-rendering: -moz-crisp-edges;
                image-rendering: crisp-edges;
                }

.currentView SPAN  {
        /*border-top: 1px rgb(136, 136, 136) dashed;*/
                background-color: rgb(255, 247, 94);
                padding:5px;
                }

EXHIBITIONS     {
                position: absolute;
                display: table-cell;
                top: var(--hdr);
                left: 0px;
                width: 100vw;
                padding: 0px 100px 0px 100px;
                font-family: 'HeldaneTextRegular', georgia, sans-serif;
	            height: -moz-calc(100vh - var(--hdr));
		        height: -webkit-calc(100vh - var(--hdr));
		        height: -o-calc(100vh - var(--hdr));
		        height: calc(100vh - var(--hdr));
		        overflow-y: auto;
		        overflow-x: hidden;
		        box-sizing: border-box;
            }

EXHIBITIONS H2, H3, H4  {
                        margin: 0;
                        font-weight: 300;
                        }

EXHIBITIONS H2  {
                /*border-bottom: 1px dotted rgba(128, 128, 128, 0.425);*/
                color: rgb(0, 0, 0);
                margin-top: 100px;
                margin-left: -100px;
                width: 100vw;
                font-weight: 100;
                font-size: 15px;
                font-family: sans-serif;
                }

EXHIBITIONS H3  {
                font-weight: 100;
                font-size: 400%;
                letter-spacing: .02em;
                line-height: 80%;
                margin-top: 44px;
                margin-bottom: 10px;
                }

EXHIBITIONS H4  {
                font-family: sans-serif;
                font-weight: 100;
                font-size: 13px;
                letter-spacing: 1.5px;
                text-transform: uppercase;
                color: rgba(0, 0, 0, 0.55);
                }

EXHIBITIONS SHOW       {
                        display: block;
                        margin-top: 70px;
                        }

EXHIBITIONS SHOW:first-of-type {
                                margin-top: 20px;
                                }

EXHIBITIONS .hero       {
                        display: block;
                        width: 100vw;
                        margin-left: -100px;
                        margin-top: 20px;
                        aspect-ratio: 16 / 9;
                        background-color: rgb(223, 219, 217);
                        overflow: hidden;
                        }

EXHIBITIONS .hero img  {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        object-position: center;
                        display: block;
                        }

EXHIBITIONS .filmstrip  {
                        display: flex;
                        flex-wrap: wrap;
                        gap: 6px;
                        width: 100vw;
                        margin-left: -100px;
                        margin-top: 6px;
                        }

EXHIBITIONS .filmstrip .frame,
EXHIBITIONS .filmstrip .more    {
                                display: block;
                                width: 130px;
                                height: 86px;
                                background-color: rgb(223, 219, 217);
                                overflow: hidden;
                                }

EXHIBITIONS .filmstrip .frame img      {
                                        width: 100%;
                                        height: 100%;
                                        object-fit: cover;
                                        object-position: center;
                                        display: block;
                                        }

EXHIBITIONS .filmstrip .more    {
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                text-align: center;
                                font-family: sans-serif;
                                font-size: 11px;
                                letter-spacing: .05em;
                                text-transform: uppercase;
                                color: rgba(0, 0, 0, 0.5);
                                text-decoration: none;
                                }

ABOUT {
     position: relative;
     display: table-cell;
     top: var(--hdr);
     width: calc( 100vw - 200px);
     max-width: 800px;
     padding: 0px 100px 0px 100px;
     font-family: 'HeldaneTextRegular', georgia, sans-serif;
     line-height: 24px;
     font-weight: 100;
     font-size: 17px;
     overflow-y: auto;
     overflow-x: hidden;
     text-align: justify;
        }

ABOUT BLURB     {
     
                }

ABOUT IMG       {
                width: 100%;
                }
            
ABOUT A {
        color: black;
        }

ABOUT h2    {
            margin-top: 20px;
            margin-bottom:0px;

            font-family: 'Trajan Pro', 'Times New Roman', serif;
            font-weight: 500;
            }

ABOUT IMG       {
                display: block;
                margin-bottom: 10px;
                }

ABOUT .bio      {
                margin: 0 0 22px 0;
                }

ABOUT .bio:first-of-type    {
                margin-top: 40px;
                }

ABOUT .docLinks {
                display: flex;
                justify-content: center;
                gap: 16px;
                margin-top: 44px;
                padding-top: 34px;
                border-top: 1px solid rgba(0, 0, 0, 0.12);
                }

ABOUT .docLinks a   {
                font-family: 'Trajan Pro', 'Times New Roman', serif;
                font-size: 13px;
                font-weight: 400;
                letter-spacing: 3px;
                text-transform: uppercase;
                color: black;
                text-decoration: none;
                padding: 8px 16px;
                transition: background-color 0.15s ease;
                }

ABOUT .docLinks a:hover {
                background-color: rgb(255, 247, 94);
                }

#muizeval	{
			/* hidden for bots */
			visibility: collapse;
			}

CONTACT {
        position: relative;
        display: table-cell;
        top: var(--hdr);
        width: calc( 100vw - 200px);
        max-width: 640px;
        padding: 0px 100px 0px 100px;
        font-family: 'HeldaneTextRegular', georgia, sans-serif;
        line-height: 24px;
        font-weight: 100;
        font-size: 17px;
        text-align: center;
        box-sizing: border-box;
        }

CONTACT A       {
                color: black;
                }

CONTACT .intro  {
                margin: 40px 0px 60px 0px;
                }

CONTACT .subscribe {
                    margin: 0px 0px 60px 0px;
                    padding-bottom: 44px;
                    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
                    }

CONTACT .subscribe H3  {
                        font-family: 'Trajan Pro', 'Times New Roman', serif;
                        font-size: 15px;
                        font-weight: 500;
                        letter-spacing: 3px;
                        text-transform: uppercase;
                        margin: 0px 0px 26px 0px;
                        }

CONTACT .subscribe P   {
                        margin: 0px 0px 14px 0px;
                        }

CONTACT input[type="email"],
CONTACT input[type="text"]     {
                                width: 100%;
                                max-width: 280px;
                                padding: 8px 4px;
                                border: none;
                                border-bottom: 1px solid black;
                                background: transparent;
                                font-family: 'HeldaneTextRegular', georgia, sans-serif;
                                font-size: 15px;
                                text-align: center;
                                }

CONTACT input[type="button"]   {
                                margin-top: 20px;
                                font-family: 'Trajan Pro', 'Times New Roman', serif;
                                font-size: 13px;
                                font-weight: 400;
                                letter-spacing: 3px;
                                text-transform: uppercase;
                                color: black;
                                background: transparent;
                                border: 1px solid black;
                                padding: 10px 26px;
                                cursor: pointer;
                                transition: background-color 0.15s ease;
                                }

CONTACT input[type="button"]:hover     {
                                        background-color: rgb(255, 247, 94);
                                        }

CONTACT H2      {
                font-family: 'Trajan Pro', 'Times New Roman', serif;
                font-weight: 500;
                font-size: 15px;
                letter-spacing: 1px;
                margin: 0px 0px 0px 0px;
                }

CONTACT .archive        {
                        margin-top: 30px;
                        padding: 50px 60px 30px 60px;
                        background-color: rgb(223, 219, 217);
                        }

CONTACT .archiveEntry  {
                        margin: 0px 0px 20px 0px;
                        }

CONTACT .archiveDate   {
                        display: block;
                        font-family: sans-serif;
                        font-weight: 100;
                        font-size: 12px;
                        letter-spacing: 2px;
                        text-transform: uppercase;
                        color: rgba(0, 0, 0, 0.5);
                        margin-bottom: 4px;
                        }

CONTACT .archiveEntry A        {
                                color: rgb(52, 56, 203);
                                text-decoration: none;
                                }

/* ---------- mobile ----------
   Below 980px the fixed-header/absolute-panel desktop layout (TOPHEADER
   pinned at top, everything else positioned "top: var(--hdr)" to clear it)
   is abandoned in favor of normal document flow: the header just wraps to
   as many rows as it needs and whatever follows stacks after it. This is
   what keeps every page — front page, exhibitions, about, contact, work/
   series pages (css/pages.css has the matching block) — visually
   consistent instead of each one guessing a fixed header height. 980px
   (not the usual 700px "mobile" cutoff) is the point below which the desktop
   TOPHEADER's one-row flex nav (logo + 4 links, 80px gap, ~940px wide) no
   longer fits — below it, this block's wrapping layout takes over instead
   of the row getting squeezed. */
@media (max-width: 980px) {
    BODY { overflow-x: hidden; }

    TOPHEADER {
        position: static;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 6px 16px;
        width: 100%;
        height: auto;
        padding: 12px 14px;
        letter-spacing: 1px;
        font-size: 11px;
    }
    TOPHEADER DIV:first-child { flex-basis: 100%; }
    TOPHEADER IMG { max-height: 52px; }

    FEATURE, EXHIBITIONS, ABOUT, CONTACT {
        position: static;
        top: auto;
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 0;
        overflow: visible;
    }
    EXHIBITIONS, ABOUT, CONTACT { display: block; }
    FEATURE { min-height: 55vh; padding: 20px 0; box-sizing: border-box; }
    FEATURE.imgfeature img { max-height: 70vh; }

    EXHIBITIONS, ABOUT, CONTACT { padding: 0px 20px 40px 20px; box-sizing: border-box; }
    EXHIBITIONS H2 {
        margin-top: 50px;
        margin-left: 0;
        width: 100%;
    }
    EXHIBITIONS H3 { font-size: 240%; }
    EXHIBITIONS SHOW { margin-top: 46px; }
    EXHIBITIONS .hero {
        width: 100%;
        margin-left: 0;
        margin-top: 16px;
    }
    EXHIBITIONS .filmstrip {
        width: 100%;
        margin-left: 0;
    }
    EXHIBITIONS .filmstrip .frame,
    EXHIBITIONS .filmstrip .more {
        width: 100px;
        height: 66px;
    }
}

CONTACT .archiveEntry A:hover  {
                                text-decoration: underline;
                                }