@charset "utf-8";

@font-face {
	font-family: 'HelveticaNeue';
	src: url('../fonts/HelveticaNeue-Heavy.otf');
	font-weight: 800;
	font-style: normal;
}
@font-face {
	font-family: 'HelveticaNeue';
	src: url('../fonts/HelveticaNeue-Black.otf');
	font-weight: 900;
	font-style: normal;
}

/* GLOBAL: INSTANTIATE
-------------------------------------------------------------------------------*/
:root {
	--color-black:   #000000;
	--color-navy:    #0A195C;
	--color-true:    #004EA2;
	--color-blue:    #007CC6;
	--color-cyan:    #00DEFF;
	--color-gold:    #FFE900;
	--color-hill:    #AAD257;
	--color-green:   #63B84A;
	--color-emerald: #26785C;
	--color-rose:    #A870B1;
	--color-red:     #E53345;
	--color-silver:  #CED2D5;
	--color-cloud:   #F4F4F4;
	--color-white:   #FFFFFF;
	--font-sans:     'helvetica-neue-lt-pro', Helvetica, Arial, sans-serif;
	--font-accent:   'HelveticaNeue', Helvetica, Arial, sans-serif;
	--font-md: clamp(18px, calc(17.23px + 0.15vw), 20px);
	--font-lg: clamp(20px, calc(16.92px + 0.62vw), 28px);
	--font-bg: clamp(26px, calc(19.85px + 1.23vw), 42px);
	--font-hg: clamp(28px, calc(21.08px + 1.38vw), 46px);
	--font-mg: clamp(40px, calc(24.62px + 3.08vw), 80px);
	--weight-base: 400;
	--weight-bold: 700;
	--width-slim: 750px;
	--width-wide: 1500px;
	--radius-sm: 2px;
	--radius-md: 10px;
	--radius-lg: 20px;
	--radius-full: 999px;
	--spacing-sm: 12px;
	--spacing-md: clamp(12px, 2.5vw, 25px);
	--spacing-lg: clamp(12px, 5vw, 50px);
	--spacing-xl: clamp(12px, 7.5vw, 75px);
	--motion: 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
	--line: 4px solid var(--color-white);
	--squeeze: -0.04em;
}
@media (prefers-reduced-motion: reduce) {
	* {
		animation: none !important;
		transition: none !important;
	}
}

/* GLOBAL: TYPOGRAPHY
-------------------------------------------------------------------------------*/
html {
	scroll-behavior: smooth;
	color: var(--color-slate);
	background-color: var(--color-lilac);
	line-height: 1.4;
}
body {
	font-family: var(--font-sans);
	font-size: 1em;
	font-weight: var(--weight-base);
	color: var(--color-navy);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: grayscale;
}
body, select, input, textarea {
	font-weight: var(--weight-base);
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-sans);
	line-height: 0.9;
	letter-spacing: var(--squeeze);
	font-weight: var(--weight-bold);
	text-wrap: balance;
	color: inherit;
}
[class*="heading"] {
	font-family: var(--font-sans);
	font-size: var(--font-mg);
	line-height: 0.9;
	font-family: var(--font-accent);
	font-weight: 900;
	text-transform: uppercase;
	color: var(--color-navy);
	margin-block: unset;
	max-width: 14ch;
}
[class*="-intro"] p {
	font-size: var(--font-md);
}
.text-invert .heading,
.text-invert .deck {
	color: var(--color-white);
}
p {
	text-wrap: pretty;
	line-height: 1.4;
	orphans: 3;
	widows: 3;
}
strong {
	font-weight: 700;
}
small {
	font-size: 12px;
}
ul {
	padding-inline-start: 1em;
	list-style: none;
	text-wrap: balance;
}
ul.list-deco {
	list-style: none;
	padding-inline-start: 0;
	margin-block-end: 2em;
}
ul.list-deco li {
	padding-left: 2.25ch;
	margin-block: 0.5em;
	position: relative;
}
ul.list-deco > li {
}
ul.list-deco li::before {
	position: absolute;
	content: "◦";
	color: #FFE800;
	font-size: 42px;
	line-height: .63em;
	left: 0;
}
ul.list-deco:last-child {
	margin-block-end: unset;
}
.list-reset {
	display: inline-flex;
	margin: 0;
	padding: 0;
	list-style: none;
}
h4 {
	margin-block-end: unset;
}
h4 + * {
	margin-block-start: 0.5em;
}

/* GLOBAL: LINKS
-------------------------------------------------------------------------------*/
::-moz-selection {
	background: #b3d4fc;
	text-shadow: none;
}
::selection {
	background: #b3d4fc;
	text-shadow: none;
}
a:link,
a:visited,
a:active {
	color: var(--color-navy);
}
a:not(.btn):hover {
	text-decoration: underline;
}
::-moz-selection {
	background: rgba(242, 228, 212, 0.5);
	text-shadow: none;
}
::selection {
	background: rgba(242, 228, 212, 0.5);
	text-shadow: none;
}
.btn {
	position: relative;
	display: inline-flex;
	place-items: center;
	cursor: pointer;
	padding: 0.8em 1em 0.6em 1em;
	line-height: 1;
	min-height: 48px;
	transition: all var(--motion);
	border-radius: var(--radius-sm);
	font-size: var(--font-md);
	font-family: var(--font-accent);
	font-weight: 800;
	background-color: var(--color-cyan);
	text-transform: uppercase;
	overflow: hidden;
	gap: 8px;
}
.btn svg {
	fill: currentColor;
	width: 18px;
	height: 18px;
	margin-top: -.5%;
}
.btn,
.btn:link,
.btn:visited {
	color: var(--color-navy);
	text-decoration: none;
}
.btn:hover {
	background-color: var(--color-gold);
	color: var(--color-navy);
}
.btn-hilite {
	color: var(--color-true) !important;
	background-color: var(--color-gold);
}
.btn-hilite:hover {
	background-color: var(--color-true);
	color: var(--color-gold) !important;
}

/* GLOBAL: CONTAINERS
-------------------------------------------------------------------------------*/
body {
	background-color: var(--color-white);
	overflow-x: hidden;
}
.container {
	display: flex;
	flex-flow: column;
	align-items: flex-start;
	margin-inline: auto;
	width: 100%;
	max-width: var(--width-wide);
	padding: var(--spacing-xl) var(--spacing-md);
	gap: 1em;
	z-index: 10;
	position: relative;
	overflow: visible;
}
main .container > div {
	width: 100%;
}
@media (min-width: 900px) {
	main .container {
		display: grid;
		grid-template-columns: 60% auto;
		grid-template-rows: auto auto;
		gap: unset;
	}
	[class*="-intro"]  {
		max-width: 90%;
		text-wrap: balance;	
	}
}
.box-white {
	background-color: var(--color-white);
	border-radius: var(--radius-sm);
	padding: calc( var(--spacing-md) * 1.25);
	color: var(--color-navy);
	box-shadow: 
		inset 0 0 0 1px var(--color-cyan),
		0 0 10px 10px #00000008;
	border: 11px solid var(--color-white);
	font-size: 120%;
}
.box-white h3 {
	text-transform: uppercase;
	color: var(--color-true);
	line-height: 1.3;
	margin-block-start: unset;
}

/* SECTION: HERO
-------------------------------------------------------------------------------*/
.header {
	position: relative;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-color: var(--color-blue);
}
.hero {
	display: grid;
	grid-template-rows: var(--spacing-sm) 1fr 1fr var(--spacing-sm);
	grid-template-columns: var(--spacing-sm) 1.75fr 1fr var(--spacing-sm);
	padding-block: unset;
	position: relative;
	height: clamp(500px, 65vw, 800px);
	aspect-ratio: 36 / 17;
	gap: unset;
	place-items: center;
}
.hero-logo {
	margin: unset;
	grid-area: 2 / 2 / -2 / -2;
	object-position: center;
	object-fit: contain;
	place-self: center;
	display: flex;
}
.hero-links {
	grid-area: 3 / 3 / -1 / -2;
	display: grid;
	gap: .5em;
	width: 100%;
}
@media (max-width: 800px) {
	.hero {
		height: unset;
		grid-template-rows: var(--spacing-lg) 1fr 1fr var(--spacing-lg);
		grid-template-columns: 1fr;
	}
	.hero-logo {
		grid-area: 2 / 1 / 3 / -1;		
	}
	.hero-links {
		grid-area: 3 / 1 / 4 / -1;
		max-width: 400px;
	}
}
.hero-links .btn {
	justify-content: start;
}
.hero-links .btn:not(.btn-hilite) {
	background-color: var(--color-white);
	color: var(--color-true);
}
.hero-links .btn:not(.btn-hilite) svg {
	fill: var(--color-cyan);
}
.hero-links {
	background-color: color-mix(in oklch, var(--color-cyan) 25%, transparent 75%);
	padding: var(--spacing-sm);
	border-radius: var(--radius-sm);
}
@media (min-width: 1200px) {
	.hero-links .btn {
		font-size: 135%;
		padding-inline: 18px;
	}
	.hero-links .btn svg {
		scale: 1.2;
	}
	.hero-links .btn-hilite {
		font-size: 180%;
	}
}
.hero-links .btn:not(.btn-hilite):hover {
	background-color: var(--color-true) !important;
	color: var(--color-gold) !important;
}
.hero-links .btn:not(.btn-hilite):hover svg {
	fill: var(--color-gold) !important;
}


/* SECTION: MAIN
-------------------------------------------------------------------------------*/
.tagline {
	background-color: var(--color-blue);
	border-top: var(--line);
	color: var(--color-white);
}
.tagline .container {
	display: flex;
	padding-block-end: unset;
	gap: unset;
}
@media (min-width: 600px) {
	.tagline .container {
		flex-flow: row;
		place-items: center;
		gap: var(--spacing-md);
		padding-block: var(--spacing-sm);
	}	
}
.tagline h2 {
	text-transform: uppercase;
	text-wrap: balance;
	line-height: 1;
	font-size: var(--font-bg);
	font-family: var(--font-accent);
	font-weight: 800;
}
.tagline img {
	max-width: 140px;
}
.exhibit {
	border-top: var(--line);
	color: var(--color-true);
}
.exhibit .container {
	padding-block: unset;
	align-items: center;
}
.exhibit-intro {
	padding-block-start: var(--spacing-xl);
	padding-block-end: var(--spacing-md);
	place-items: center;
}
.exhibit h2 {
	color: inherit;
}
@media (max-width: 899px) {
	.exhibit-info {
		position: relative;
		left: clamp(-50px, -5vw, -12px);
	}
}
.exhibit-event {
	background-color: var(--color-true);
	padding: var(--spacing-lg);
	padding-block-start: calc(var(--spacing-lg) * 2);
	color: var(--color-white);
	position: relative;
}
.exhibit-event::after {
	content: '';
	display: block;
	position: absolute;
	width: 100vw;
	height: 100%;
	top: 0;
	left: 100%;
	z-index: 1000;
	background-color: inherit;
}
.exhibit-event:not(:first-child) {
	border-top: var(--line);
}
.exhibit-event h3 {
	margin: unset;
	text-transform: uppercase;
	font-size: var(--font-hg);
	font-family: var(--font-accent);
	font-weight: 800;
}
.exhibit-event p {
	font-weight: bold;
	text-transform: uppercase;
	line-height: 1.1;
	margin-block-start: 6px;
	margin-block-end: 8px;
}
.exhibit-event p:first-child {
	font-size: var(--font-md);
	color: var(--color-gold);
}
.exhibit-event .btn {
	margin-block-start: 1em;
}
.showcase {
	background-color: var(--color-blue);
	background-image: 
		linear-gradient( 90deg, #005BAAEE 30%, #005BAA00 100% ),
		url('../images/texture-showcase.webp');
	background-size: cover;
	background-position: center;
	border-block-start: var(--line);
	color: var(--color-white);
}
.showcase .container {
	align-items: center;
}
.showcase-intro img {
	display: block;
	max-width: 200px;
	margin-block-end: var(--spacing-xl);
}
.details {
	background-color: var(--color-white);
}
.details .container {
	padding-block-end: unset;
}
.details-intro {
	margin-block-start: var(--spacing-lg);
	margin-block-end: var(--spacing-xl);
}
.details-intro h2,
.details-intro p {
	color: var(--color-true);
}
.details-intro .btn {
	margin-block-start: var(--spacing-md);
}



/* SECTION: FOOTER
-------------------------------------------------------------------------------*/
.footer {
	--_offset: clamp(40px, calc(22.86px + 8.57vw), 100px);
	position: relative;
	margin-block-start: var(--_offset);
	padding-block-end: var(--_offset);
	background-size: cover;
	background-position: center;
	background-image:
		linear-gradient(180deg, #FFFF 90px, #FFF0 90px),
		linear-gradient(180deg, #00166F00 65%, #00166FFF 95%),
		url('../images/texture-footer.webp');
}
.footer-left, 
.footer-right {
	position: absolute;
	max-width: clamp(110px, calc(40px + 17.5vw), 320px);
}
.footer-left {
	top: clamp(-80px, calc(22.86px + -11.43vw), 0px);
}
.footer-right {
	right: 0;
	bottom: 0;
}

/* SECTION: DEVELOPER
-------------------------------------------------------------------------------*/
.developer-link {
	position: relative;
	margin-inline: auto;
	display: grid;
	grid-template-rows: auto 2.5em;
	text-decoration: none !important;
	max-width: clamp(210px, calc(167.69px + 8.46vw), 320px);
	border: var(--spacing-sm) solid transparent;
	gap: var(--spacing-sm);
	padding-block-end: var(--spacing-md);
}
.developer-link img {
	grid-area: 1 / 1 / 2 / -1;
	position: relative;
	right: -12%;
	transform-origin: center bottom;
	transition: transform var(--motion);
}
.developer-link span {
	display: block;
	grid-area: 2 / 1 / -1 / -1;
	text-align: center;
	margin-inline: auto;
	line-height: 1.1;
	font-size: 85%;
	align-content: center;
	text-transform: uppercase;
	color: var(--color-white);
	font-family: var(--font-accent);
	font-weight: 900;
	transition: color var(--motion);
	text-wrap: nowrap;
}
@media (max-width: 400px) {
	.developer-link span {
		grid-area: unset;
		padding-top: var(--spacing-sm);
	}
}
.developer-link:hover span {
	color: var(--color-cyan);
}
.developer-link:hover img {
	transform: scale(1.05) !important;
}

/* SECTION: UPDATES
-------------------------------------------------------------------------------*/
.updates {
	--_abg: var(--color-true);
	--_atx: var(--color-white);
	--_hbg: var(--color-cyan);
	--_htx: var(--color-navy);
}
.updates .container {
	padding-block: calc(var(--overlap-footer) * 1.25);
}
.updates-box {
	--_gap: 6px;
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--width-slim);
	padding: var(--spacing-lg) var(--spacing-md);
	margin-inline: auto;
	margin-bottom: 30px;
	border-radius: var(--radius-sm);
	background-color: var(--color-navy);
	box-shadow: 0 3px 30px oklch(33% 10% 279deg / 50%);
}
.updates-box h2 {
	margin-block-start: unset;
	margin-block-end: 0.3em;
	line-height: 1.2;
	text-align: center;
	font-family: var(--font-accent);
	font-weight: 800;
	font-size: 175%;
	color: var(--color-white);
}
.updates-box h2 span {
	color: var(--color-green);
}
.updates-row {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-flow: row wrap;
}
.updates-box ul {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	gap: var(--_gap);
}
/* LINKS */
.updates-box a {
	position: relative;
	background: var(--_abg);
	color: var(--_atx);
	display: flex;
	align-items: center;
	justify-content: center;
	height: 60px;
	width: 60px;
	border-radius: var(--radius-sm);
	transition:
		background-color var(--motion),
		color var(--motion);
}
.updates-box svg {
	display: block;
	width: 24px;
	height: 24px;
	position: relative;
	z-index: 2;
	fill: var(--_atx);
}
.updates-box a:hover {
	background-color: var(--_hbg);
}
.updates-box a:hover svg {
	fill: var(--_htx);
}
/* KLAYVIO */
.updates form.klaviyo-form {
	max-width: 360px !important;
}
.updates form.klaviyo-form>div {
	min-height: auto !important;
	border-radius: 2px !important;
	background: white !important;
	padding: 6px !important;
}
@media (min-width: 400px) {
	.updates form.klaviyo-form>div {
		display: grid !important;
		grid-template-columns: 1fr 140px;
	}
}
.updates .klaviyo-form div {
	padding: 0 !important;
}
.updates form.klaviyo-form input[type="email"],
.updates form.klaviyo-form input[type="email"]::placeholder,
.updates form.klaviyo-form button {
	font-family: var(--font-sans) !important;
	height: 48px !important;
	border: 0px !important;
	box-sizing: border-box;
}
.updates form.klaviyo-form input[type="email"] {
	position: relative;
	margin-right: 6px !important;
}
.updates form.klaviyo-form input[type="email"]:hover {
	border: 0 !important;
}
.updates form.klaviyo-form button {
	display: grid;
	place-items: center;
	font-family: inherit !important;
	font-size: 16px !important;
	letter-spacing: 0 !important;
	font-family: var(--font-accent) !important;
	font-weight: 800 !important;
	border-radius: var(--radius-sm) !important;
	background-color: var(--_abg) !important;
	color: var(--_atx) !important;
	padding-top: 3px !important;
	transition:
		background-color var(--motion),
		color var(--motion);
}
.updates form.klaviyo-form button:hover {
	box-shadow: unset !important;
	background: var(--_hbg) !important;
	color: var(--_htx) !important;
}
.updates form.klaviyo-form p {
	opacity: 0.7;
}
.updates form.klaviyo-form>div>div:last-child {
	display: none !important;
}

/* SECTION: BOTTOM
-------------------------------------------------------------------------------*/
.bottom .container {
	max-width: 100%;
	gap: var(--spacing-md);
	color: var(--color-white);
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	max-width: min(75%, 800px);
}
.bottom p {
	width: 100%;
	font-size: 10px;
	line-height: 1.2;
	text-align: center;
	text-wrap: balance;
}
.bottom a {
	color: inherit;
}
.bottom a:hover {
	color: var(--color-cyan);
}
.bottom .logos {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-xl) var(--spacing-md);
}
.bottom .logos img {
	max-width: 120px;
	max-height: 90px;
	object-fit: contain;
}
.bottom-legal {
	display: flex;
	flex-flow: row wrap;
	gap: var(--spacing-md);
	align-items: center;
}
.bottom-legal img {
	margin-block: auto;
	max-height: 80px;
	max-width: 160px;
	object-fit: contain;
}


/* SUBMIT YOUR ART: popup modal wrapping the WP contest form in an iframe
-------------------------------------------------------------------------------*/
.s35-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: none;
}
.s35-modal.is-open {
	display: block;
}
.s35-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(10, 25, 92, 0.85);
}
.s35-modal__dialog {
	position: relative;
	width: min(92vw, 600px);
	height: min(90vh, 900px);
	margin: 5vh auto;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
	border-radius: var(--radius-md);
}
.s35-modal__frame {
	width: 100%;
	height: 100%;
	background: var(--color-navy);
	border-radius: var(--radius-md);
	overflow: hidden;
}
.s35-modal__close {
	position: absolute;
	top: -14px;
	right: -14px;
	z-index: 2;
	width: 36px;
	height: 36px;
	border: none;
	border-radius: var(--radius-full);
	background: var(--color-white);
	color: var(--color-navy);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.s35-modal__iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.s35-modal__hint {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	padding: 12px 16px;
	background: var(--color-gold);
	color: var(--color-navy);
	font-family: var(--font-accent);
	font-weight: 900;
	text-transform: uppercase;
	font-size: 14px;
	text-align: center;
	border-radius: 0 0 var(--radius-md) var(--radius-md);
	transform: translateY(100%);
	opacity: 0;
	transition: transform var(--motion), opacity var(--motion);
}
.s35-modal__hint.is-visible {
	transform: translateY(0);
	opacity: 1;
}
body.s35-modal-open {
	overflow: hidden;
}