/* generated by THEKE — series, work and exhibition pages; edit THEKE, not this file */

@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;
			background-color: rgb(255, 255, 255);
			}

TOPHEADER	{
			position: absolute;
			width: 100vw;
			top: 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;
			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; }

WORKPAGE, SERIESPAGE	{
			position: absolute;
			display: block;
			top: var(--hdr);
			width: 100vw;
			height: calc(100vh - var(--hdr));
			padding-bottom: 80px;
			box-sizing: border-box;
			overflow-y: auto;
			overflow-x: hidden;
			font-family: 'HeldaneTextRegular', georgia, serif;
			text-align: center;
			}

NAVCRUMB	{
			display: block;
			font-family: sans-serif;
			font-weight: 100;
			font-size: 12px;
			letter-spacing: 3px;
			text-transform: uppercase;
			padding: 20px;
			}
NAVCRUMB A	{ color: black; text-decoration: none; }
NAVCRUMB A:hover	{ color: rgb(52, 56, 203); }

H3			{
			font-weight: 100;
			font-size: 400%;
			letter-spacing: .02em;
			line-height: 90%;
			margin: 40px 20px 30px 20px;
			}

.imgBox		{
			width: 100vw;
			background-color: rgb(223, 219, 217);
			padding: 40px 0px 40px 0px;
			}
.imgBox IMG	{
			max-width: min(1200px, calc(100vw - 120px));
			max-height: 75vh;
			border: 20px solid #fff;
			vertical-align: middle;
			}

.Drawing	{ background-color: #ffecb3; }
.DigitalSculpture	{ background-color: #c0d1c1; }
.Sculpture	{ background-color: #d1bbb4; }
.Rendering	{ background-color: #bdc6d4; }
.Website	{ background-color: #CFD8DC; }
.Video		{ background-color: #f3c2d2; }
.Software	{ background-color: #e5ebcf; }
[class~="3DModel"]	{ background-color: #d2f3f3; }
.Installation	{ background-color: #e0d4e8; }

TOMBSTONE	{
			display: inline-block;
			max-width: 500px;
			margin: 0px 20px 10px 20px;
			padding: 20px 30px 20px 30px;
			border: 20px solid #fff;
			font-size: 17px;
			font-weight: 100;
			line-height: 24px;
			}
DATE, MEDIUM, EDITION, DIMENSIONS, COLLECTION, AVAILFROM	{ display: block; }
DATE		{ font-size: 120%; }
COLLECTION	{ margin-top: 8px; color: rgba(0, 0, 0, 0.6); }
COLLECTION A	{ margin-left: 3px; }
AVAILFROM	{ margin-top: 8px; color: rgba(0, 0, 0, 0.6); }
AVAILFROM IMG	{ max-height: 16px; max-width: 100px; vertical-align: middle; margin-left: 4px; opacity: .8; }
AVAILFROM A		{ color: inherit; margin-left: 3px; }
.sold-dot	{
			display: inline-block;
			width: 8px;
			height: 8px;
			border-radius: 50%;
			background-color: #c0392b;
			margin-right: 8px;
			vertical-align: middle;
			}

.embedBox	{ margin-top: 30px; }
.embedBox IFRAME	{
			width: min(1200px, calc(100vw - 120px));
			height: 75vh;
			border: 20px solid #fff;
			background-color: white;
			vertical-align: middle;
			}

WORKLINK	{
			display: block;
			margin: 25px 20px 10px 20px;
			font-size: 17px;
			font-weight: 100;
			}
WORKLINK A	{ color: rgb(52, 56, 203); text-decoration: none; }
WORKLINK A:hover	{ text-decoration: underline; }

SECLABEL	{
			display: block;
			font-family: sans-serif;
			font-weight: 100;
			font-size: 12px;
			letter-spacing: 3px;
			text-transform: uppercase;
			margin: 50px 20px 20px 20px;
			}

EXHIBITED	{
			display: block;
			max-width: 620px;
			margin: 0px auto 10px auto;
			}
.exrow		{
			display: flex;
			align-items: center;
			justify-content: flex-start;
			text-align: left;
			gap: 25px;
			margin: 0px 30px 18px 30px;
			font-size: 17px;
			font-weight: 100;
			line-height: 24px;
			color: black;
			text-decoration: none;
			}
.exrow IMG	{
			width: 130px;
			height: 85px;
			object-fit: cover;
			flex-shrink: 0;
			border: 8px solid #fff;
			outline: 1px solid rgb(223, 219, 217);
			}
.exrow B	{ font-weight: normal; font-size: 120%; }
.exrow:hover B	{ color: rgb(52, 56, 203); }

PAGENAV		{
			display: flex;
			justify-content: space-between;
			gap: 40px;
			max-width: 900px;
			margin: 30px auto 0px auto;
			padding: 0px 40px 60px 40px;
			font-size: 17px;
			}
PAGENAV A	{ color: rgb(52, 56, 203); text-decoration: none; }
PAGENAV A:hover	{ text-decoration: underline; }

BLURB		{
			display: block;
			max-width: 600px;
			margin: 0px auto 50px auto;
			padding: 0px 30px 0px 30px;
			font-size: 17px;
			font-weight: 100;
			line-height: 24px;
			}
BLURB A		{ color: rgb(52, 56, 203); }

SERIESGRID	{
			display: grid;
			grid-template-columns: repeat(auto-fill, 250px);
			grid-auto-rows: auto;
			grid-auto-flow: dense;
			gap: 40px;
			justify-content: center;
			background-color: rgb(223, 219, 217);
			padding: 60px 20px 100px 20px;
			}

.tile		{
			display: block;
			margin: 10px;
			color: black;
			text-decoration: none;
			}
.tile THUMB	{
			display: block;
			height: 210px;
			border: 20px solid #fff;
			background-size: cover;
			background-position: top center;
			box-sizing: border-box;
			}
.tile TILELABEL	{
			display: block;
			padding: 10px 10px 0 10px;
			box-sizing: border-box;
			font-size: 14px;
			text-align: left;
			}
.tile TILELABEL B		{ font-weight: normal; }
.tile TILELABEL DATE	{ display: inline; font-size: 100%; }

/* below 980px, normal document flow replaces the fixed-header/absolute-panel
   desktop layout — matches css/AVRIEA.css's mobile block so every page type
   (front/exhibitions/about/contact there, work/series/show pages here)
   looks and behaves the same way on a phone. 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. */
@media (max-width: 980px) {
	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; }

	WORKPAGE, SERIESPAGE {
		position: static;
		top: auto;
		width: 100%;
		height: auto;
		overflow: visible;
		}
	H3 { font-size: 240%; margin: 30px 20px 24px 20px; }
	}