*,*::before,*::after{box-sizing:border-box}body,button,input,optgroup,select,textarea,figure,blockquote{margin:0}html{-webkit-text-size-adjust:100%}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:inline-block;vertical-align:middle;max-width:100%;height:auto}input,button,textarea,select{font:inherit}textarea{resize:vertical;min-height:100px}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}ul,ol{padding:0 0 0 1.2em}nav ul{margin:0;padding:0;list-style:none}:root{--color-yellow:var(--wp--preset--color--dark-accent);--base-color:var(--wp--preset--color--white);--text-color:var(--wp--preset--color--nblack);--muted-outline-color:rgba(var(--wp--custom--nblack-rgb), 0.2)}.hidden{display:none}html{background:var(--wp--preset--color--nblack);font-size:18px}body{-webkit-font-smoothing:antialiased;background-color:var(--base-color);color:var(--text-color);--curve-mask:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='70' height='21.194' version='1.1' viewBox='0 0 70 21.194' xml:space='preserve'%3e%3cpath class='st0' d='m28.272 12.222c-8.554-4.8657-14.588-12.222-28.272-12.222v21.194l70-0.0056c-23.053 0.2-34.804-5.0284-41.728-8.9672z'/%3e%3c/svg%3e");
}

/* 31/07/2024 'pretty' is not standard, so fallback to regular wrap.
 * Specificity should override this everywhere that no-wrap is required.
 * Much better than a JS solution...
 */
.wp-block-cover,
main .wp-block-list li,
p {
	text-wrap: wrap;
	text-wrap: pretty;
}

.wp-block-image.aligncenter {
	display: block;
}

.wp-block-image.aligncenter img {
	display: block;
	margin: 0 auto;
}

.alignleft {
	float: left;
	margin: 0 20px 20px 0;
}

.alignright {
	float: right;
	margin: 0 0 20px 20px;
}

.alignwide {
	position: relative;
	left: calc(-0.5 * var(--wp--custom--h-inset));
	width: calc(100% + var(--wp--custom--h-inset));
}

.alignfull {
	position: relative;
	margin-inline: calc(-1 * var(--wp--custom--h-inset));
	padding-inline: var(--wp--custom--h-inset);
}

.wp-block-image.alignfull {
	padding-left: 0;
	padding-right: 0;
}

.wp-caption {
	text-align: center;
	font-size: .8em;
}

#skipToMainContent {
	position: fixed;
	top: 10px;
	left: -300px;
	z-index: 1000;
	transition: left 0.2s ease-in-out 2s;
}

#skipToMainContent:focus,
#skipToMainContent:active {
	left: 10px;
	transition: left 0.2s ease-in-out 0s;
}

#content {
	padding-left: var(--wp--custom--h-inset);
	padding-right: var(--wp--custom--h-inset);
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: top;
}

/*
::-webkit-scrollbar
::-webkit-scrollbar-button
::-webkit-scrollbar-track
::-webkit-scrollbar-track-piece  
::-webkit-scrollbar-thumb
::-webkit-scrollbar-corner
::-webkit-resizer

:horizontal
:vertical
:decrement
:increment
:start
:end
:double-button
:single-button
:no-button
:corner-present
:window-inactive
*/
::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}

::-webkit-scrollbar-track {
	background: #ddd;
}

::-webkit-scrollbar-thumb {
	background: #AAA;
}

a[href^=tel] {
	color: inherit;
	text-decoration: none;
}


.videoWrap {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}

.videoWrap iframe,
.videoWrap object,
.videoWrap embed,
.videoWrap video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

body:has(.menuCover.show) {
	overflow: hidden;
	height: 100%;
}

input[type=submit],
button {
	cursor: pointer;
}

button {
	color: currentColor;
}

a.button {
	display: flex;
	gap: 0.5rem;
	border-radius: 0.25rem;
	padding: 0.75rem 1rem;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

a.button.dark {
	background-color: var(--wp--preset--color--nblack);
}

a .inline-fa {
	height: 1em;
	aspect-ratio: 1;
	fill: currentColor;
	margin-left: 0.25em;
}

a .inline-fa.sm {
	height: 0.7em;
	vertical-align: baseline;
}

/* override the really really dumb base style */
.wp-block-file:not(.wp-element-button) {
    font-size: 1em;
}

.wp-block-file__button {
	background-color: var(--text-color) ! important;
	color: var(--base-color) ! important;
}

/* ninja forms style overrides */

.nf-form-content {
	padding: 0 ! important;
	margin-top: 2rem ! important;
}

.nf-field-container.html-container {
	margin-bottom: 0 ! important;
}

.nf-help {
	color: var(--text-color) ! important;
}

.jBox-content {
	color: var(--wp--preset--color--nblack) ! important; /* always make it grey */
}

.nf-form-content input[type=submit] {
	transition: unset ! important;
	background-color: var(--wp--preset--color--primary);
	border: 1px solid;
	color: var(--wp--preset--color--white);
	border-radius: 0.25rem;
}

.nf-form-content h2 {
	margin: 0;
}

/* Custom tags are display inline by default. Force block for styling */
nf-field {
	display: block;
	margin-block: 1rem;
}

/* Fluent Forms Overrides */
.choices__list.choices__list--dropdown,
.choices__list.choices__list--single .choices__item.choices__item--selectable {
    color: var(--wp--preset--color--nblack) ! important;
}

select.ff-el-form-control:not([size]):not([multiple]) {
    height: unset;
}

.fluentform .info-box {
    margin-bottom: 1.5rem;
    border: 0.25rem solid var(--text-color);
    padding-inline: 1rem;
    box-shadow: 4px var(--muted-outline-color);
}

.fluentform .info-box h3 {
    text-transform: uppercase;
    font-size: 1.5em;
    color: var(--text-color);
}

.ff_tc_checkbox {
    padding-right: 1em;
}

.ff_tc_checkbox input {
    scale: 1.5;
}

.ff-btn {
	cursor: pointer;
	border-radius: 0.5em;
	border: 2px solid var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	padding: 0.5em 0.75em;
	display: inline-flex;
	column-gap: 0.375em;
	align-items: center;
	justify-content: space-between;
	text-decoration: none;
}

/* IG overrides. Specificity sucks because sheet load order */
body #sb_instagram #sbi_load .sbi_follow_btn {
	margin: 0 ! important;
}

#sb_instagram .sbi_follow_btn svg {
	margin-right: 0.25rem ! important;
}

#breadcrumbs {
	margin-block: 1.5rem;
}

#breadcrumbs a {
	display: inline-flex;
	gap: 0.4rem;
	margin-right: 0.6rem;
}

#breadcrumbs a::after {
	content: '';
	border-top: 2px solid;
	border-right: 2px solid;
	width: 0.5rem;
	height: 0.5rem;
	align-self: center;
	transform: rotate(45deg);
}

a[target="_blank"]::after {
    content: "\f08e";
    font-family: 'Font Awesome 6 Free';
    font-weight: 600;
	margin-left: 0.25rem;
}

.is-style-arrow a::after {
	content: "\f105";
	font-family: 'Font Awesome 6 Free';
	font-weight: 600;
	margin-left: 0.25rem;
}

/* move this out when the builder is a custom block */
#project--builder-section > * {
	max-width: 600px;
}

/* super hacky, removes the black band if the last block is a cover */
main >.wp-block-cover.is-style-multiply:last-child {
	margin-bottom: -7rem;
}

@media (max-width: 781px) {
	html {
		font-size: 14px;
	}
	
	main >.wp-block-cover.is-style-multiply:last-child {
		margin-bottom: -4rem;
	}
}

@media (min-width: 500px) {
	.alignwide {
		position: relative;
		left: -60px;
		width: calc(100% + 120px);
	}
}

@media (prefers-color-scheme: dark) {
	body {
		--base-color: var(--wp--preset--color--nblack);
		--text-color: var(--wp--preset--color--white);
		--muted-outline-color: rgba(255, 255, 255, 0.2);
		--wp--preset--color--light-accent: var(--color-yellow);
	}
}

@media (min-width: 782px) {
	.wp-block-columns.reverse {
		flex-direction: row-reverse;
	}
}
.paddedArea > .has-background:where(:not(p), :not(hr))
{
	padding-top: var(--wp--custom--v-pad);
	padding-bottom: var(--wp--custom--v-pad);
}

.paddedArea > :not(:where(.has-background,.wp-block-cover)) + :where(.has-background,.wp-block-cover),
.paddedArea > :where(.has-background,.wp-block-cover) + :not(:where(.has-background,.wp-block-cover)),
.paddedArea > :first-child:not(:where(.has-background,.wp-block-cover))
{
	margin-top: var(--wp--custom--v-pad);
}

.paddedArea > :last-child:not(:where(.has-background,.wp-block-cover))
{
	margin-bottom: var(--wp--custom--v-pad);
}

/* Columns */
.wp-block-columns
{
	margin-bottom: var(--wp--custom--v-pad);
}

/* :where(.wp-block-columns:not(.is-not-stacked-on-mobile)) > .wp-block-column + .wp-block-column
{
	margin-top: var(--wp--custom--v-pad);
} */

.wp-block-column > :first-child
{
	margin-top: 0;
}

.wp-block-column > :last-child
{
	margin-bottom: 0;
}

@media (min-width: 600px)
{
	.wp-block-column + .wp-block-column
	{
		margin-top: unset;
	}
}
/* Columns End */

/* Ensure images fill to the edges when they should */
.alignfull.is-image-fill > .wp-block-media-text__media
{
	margin-left: calc(-1 * var(--wp--custom--h-inset));
	margin-right: calc(-1 * var(--wp--custom--h-inset));
}

/* Remove top background when stacked on mobile */
.wp-block-media-text:where(.has-background) > .wp-block-media-text__media
{
	margin-top: calc(-1 * var(--wp--custom--v-pad));
	margin-bottom: calc(-1 * var(--wp--custom--v-pad));
}

.wp-block-media-text:where(:not(.has-background), .alignfull) > .wp-block-media-text__content
{
	padding: 0;
}

@media(min-width: 601px)
{
	/* Make media fill properly when background padding is applied */
	.wp-block-media-text.has-background.is-image-fill > .wp-block-media-text__media
	{
		height: calc(100% + 2 * var(--wp--custom--v-pad));
	}

	/* START make media fill correctly when alignfull is applied */
	.wp-block-media-text.alignfull.is-image-fill:not(.has-media-on-the-right) > .wp-block-media-text__media
	{
		margin-right: 0;
	}

	.wp-block-media-text.alignfull.is-image-fill.has-media-on-the-right > .wp-block-media-text__media
	{
		margin-left: 0;
	}
	/* END */

	.wp-block-media-text.has-background:not(.has-media-on-the-right) > .wp-block-media-text__content
	{
		padding-left: 0;
	}

	.wp-block-media-text.has-background.has-media-on-the-right > .wp-block-media-text__content
	{
		padding-right: 0;
	}

	/* START Make no crop media go to edge in align full */
	.wp-block-media-text.alignfull:not(.has-media-on-the-right) > .wp-block-media-text__media
	{
		margin-left: calc(-1 * var(--wp--custom--h-inset));
	}
	.wp-block-media-text.alignfull.has-media-on-the-right > .wp-block-media-text__media
	{
		margin-right: calc(-1 * var(--wp--custom--h-inset));
	}
	/* END */
}

@media (max-width: 600px)
{
	/* Ensure stacked media has gap underneath */
	.is-stacked-on-mobile:where(.has-background) > .wp-block-media-text__media
	{
		margin-bottom: 0
	}
}


/* START Make sure media content vertical padding is consistent  */
.wp-block-media-text__content > :first-child
{
	margin-top: 0;
}

.wp-block-media-text__content > :last-child
{
	margin-bottom: 0;
}
/* END */

.nav-links {
	display: flex;
	gap: 0.5em;
	justify-content: center;
	margin-top: 1rem;
}

.nav-links .prev,
.nav-links .next {
	display: flex;
	gap: 0.5em;
}

.nav-links .prev::before,
.nav-links .next::after {
	content: "";
	border-top: 2px solid;
	border-right: 2px solid;
	width: 0.5rem;
	height: 0.5rem;
	align-self: center;
	transition: transform 0.2s ease;
}

.nav-links .prev::before {
	transform: rotate(-135deg);
}

.nav-links .next::after {
	transform: rotate(45deg);
}
.siteHeader {
	--height: 5.5rem;
	padding: 20px var(--wp--custom--h-inset);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	position: sticky;
	top: calc(-1 * var(--height));
	z-index: 10000;
	border-bottom: 1px solid var(--muted-outline-color);
	background-color: var(--base-color);
	color: var(--text-color);
	height: var(--height);
	transition: top 0.3s ease;
}

.siteHeader::after {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: calc(var(--height) / 2);
	z-index: -1;
}

.siteHeader:hover {
	top: var(--wp-admin--admin-bar--height, 0);
}

#showMenu {
	background: none;
	padding: 0;
	border: 0;
}

/*********************

Start Menu

*********************/
.menuCover {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0);
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 9999999;
	display: grid;
	justify-content: end;
	align-items: start;
	padding-right: 290px;
	background-color: var(--wp--preset--color--black);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s linear, visibility 0s ease 0.3s;
}

.menuCover:where(.show) {
	opacity: 0.5;
	visibility: visible;
	transition: opacity 0.3s linear, visibility 0s ease;
}

#hideMenu {
	background: none;
	border: none;
	height: 100%;
	width: 100vw;
	position: relative;
	padding: 0;
}

#hideMenu::before,
#hideMenu::after {
	content: "";
	position: absolute;
	top: 15px;
	right: 5px;
	height: 2px;
	width: 20px;
	background: var(--wp--preset--color--white);
	transform: rotate(45deg);
}

#hideMenu::after {
	transform: rotate(-45deg);
}

#mainMenu,
#mainMenu .sub-menu.depth-0 {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0);
	bottom: 0;
	right: 0;
	width: 290px;
	overflow-y: auto;
	overflow-x: hidden;
	background-color: var(--base-color);
	z-index: 9999999;
	transform: translateX(100%);
	transition: transform ease-in-out 0.3s;
}

#mainMenu {
	--menu-padding: 1.5rem;
	padding: var(--menu-padding);
}

#mainMenu p {
	margin: 0;
}

#mainMenu .menu {
	display: flex;
	flex-direction: column;
	gap: 1rem 2.5rem;
}

#mainMenu .sub-menu.depth-0 {
	display: flex;
	flex-direction: column;
	top: 0;
}

#mainMenu .sub-menu.depth-0 > *:not(:last-child) {
	border-bottom: 1px solid;
}

#mainMenu .sub-menu.depth-0 .sub-menu {
	list-style: initial;
	padding-left: 1.2em;
}

.menuCover.show ~ #mainMenu,
#mainMenu .menu-title:where(.show) ~ .sub-menu {
	transform: translateX(0)
}


#mainMenu .sub-menu.depth-0 > .menu-item {
	padding: var(--menu-padding);
}

#mainMenu .sub-menu .menu-title {
	font-weight: bold;
	margin-bottom: 0.5rem;
}

#mainMenu .menu-link,
#mainMenu .menu-title {
	display: block;
	text-decoration: none;
	cursor: pointer
}

#mainMenu .menu-title {
	display: flex;
	gap: 0.5rem;
	justify-content: space-between;
}

#mainMenu .menu > .menu-item > .menu-title::after {
	content: '';
	border-top: 2px solid;
	border-right: 2px solid;
	width: 0.5rem;
	height: 0.5rem;
	align-self: center;
	transition: transform 0.2s ease;
	transform: rotate(45deg);
}

.closeSubMenu button {
	background: none;
	color: inherit;
	border: none;
	border-radius: 0;
	padding: calc(var(--menu-padding) / 2) var(--menu-padding);
	justify-content: start;
	width: 100%;
}

.closeSubMenu button::before {
    content: '';
    border-top: 2px solid;
    border-right: 2px solid;
    width: 0.5rem;
    height: 0.5rem;
    align-self: center;
    transition: transform 0.2s ease;
    transform: rotate(225deg);
}

#mainMenu .sub-menu .menu-item.mega-menu-end {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/*********************

End Menu

*********************/

@media (min-width: 1024px) {

	#showMenu,
	.menuCover,
	.closeSubMenu {
		display: none;
	}

	.menuCover.show ~ #mainMenu,
	#mainMenu {
		position: static;
		background: none;
		height: auto;
		width: auto;
		overflow: visible;
		transform: none;
		padding: 0;
	}

	#mainMenu .menu {
		flex-direction: row;
	}
	
	#mainMenu .sub-menu.depth-0 {
		position: absolute;
		height: auto;
		width: fit-content;
		top: calc(100% + 1px);
		bottom: unset;
		left: var(--wp--custom--h-inset);
		right: var(--wp--custom--h-inset);
		margin-left: auto;
		transform: none;
		box-shadow: 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.25);
		background: rgba(var(--wp--custom--nblack-rgb), 0.97);
		color: var(--wp--preset--color--white);
		
		/* a better hack */
		display: grid;
		grid-template-columns: auto auto auto 1fr;
		padding-block: var(--menu-padding);
		gap: var(--menu-padding) 0;
	}

	#mainMenu .menu-title:where(:not(.show)) ~ .sub-menu.depth-0 {
		display: none;
	}
	
	#mainMenu .sub-menu.depth-0 > .menu-item {
		margin: calc(-1 * var(--menu-padding)) 0;
	}

	#mainMenu .sub-menu.depth-0 > .menu-item:not(:last-child) {
		border-right: 1px solid var(--wp--preset--color--white);
		border-bottom: none;
	}

	#mainMenu .sub-menu .menu-item.mega-menu-end {
		background: rgba(var(--wp--custom--primary-rgb), 0.97);
		border-right: none;
		grid-row: 1 / span 3;
		grid-column: 4;
		justify-content: flex-end;
	}

	#mainMenu .menu > .menu-item > .menu-title::after {
		transform: rotate(135deg);
	}

	#mainMenu .menu > .menu-item > .menu-title.show::after {
		transform: rotate(-45deg);
	}

}

@media (hover: hover) {
	#mainMenu .menu-link:hover,
	#mainMenu .menu-title:hover {
		text-decoration: underline;
	}
}
.siteFooter {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	padding: var(--wp--custom--v-pad) 0 0;
	display: grid;
	grid-template-columns: var(--wp--custom--h-inset) 1fr var(--wp--custom--h-inset);
	position: relative;
	margin-top: calc(3rem + var(--wp--custom--v-pad));
}

.siteFooter::before,
.siteFooter::after {
	content: "";
	position: absolute;
	bottom: calc(100% - 1px);
	height: 3rem;
	background-color: inherit;
}

.siteFooter::before {
	left: 0;
	width: calc(var(--wp--custom--h-inset) + 180px);
}

.siteFooter::after {
	-webkit-mask: var(--curve-mask);
	-webkit-mask-size: cover;
	-webkit-mask-repeat: no-repeat;
	mask: var(--curve-mask);
	mask-size: cover;
	mask-repeat: no-repeat;
	width: 180px;
	left: calc(var(--wp--custom--h-inset) + 179px);
}

.siteFooter > .part {
	grid-column: 2
}

.copyright {
	grid-column: 1/-1;
	padding: 1.5em var(--wp--custom--h-inset);
	box-shadow: 0 900px 0 900px var(--wp--preset--color--nblack);
}

.siteFooter [class^=wp-image] {
	vertical-align: -3px;
}

/*************
Menu
****************/

.siteFooter .footer-menus {
	border-style: solid;
	border-width: 1px;
	border-top: none;
	border-bottom: none;
	padding-inline: 1.5rem;
}

.siteFooter .wp-block-navigation li {
	display: list-item;
	list-style: disc;
	margin-left: 1.2em;
}

@media (max-width: 781px) {
	.siteFooter .footer-menus {
		padding-inline: unset;
		border: none;
	}
	
	.siteFooter {
		margin-top: var(--wp--custom--v-pad);
	}
	
	.siteFooter::before,
	.siteFooter::after {
		display: none;
	}
}
.featured
{
	background: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--large);
	position: relative;
	padding: 2rem var(--wp--custom--h-inset);
}

.attachment-featured.size-featured
{
	mix-blend-mode: multiply;
	position: absolute;
	inset: 0;
	object-fit: cover;
	height: 100%;
	width: 100%;
}

.featured h1
{
	color: var(--wp--preset--color--white);
	position: relative;
	text-transform: uppercase;
	margin-block: 0;
	padding-block: 0.5em;
	line-height: 1;
	font-family: var(--wp--preset--font-family--heading);
}

.card-grid {
	position: relative;
	display: grid;
	grid-gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(min(350px, 100%), 1fr));
}

.card-grid .card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	border-radius: 0.25rem;
	box-shadow: 0 0 0.25rem 1px var(--muted-outline-color);
	overflow: hidden;
}

.card-grid .card img {
	width: 100%;
	height: 300px;
	object-fit: contain;
	padding: 2rem;
}

.card-grid .card img.cover {
	object-fit: cover;
	padding: unset;
}

.card-grid .card .card-content {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: 0.75rem 1rem;
}

.card-grid .card .card-content h3 {
	margin-block: 0;
}

.card-grid .card .card-content .tags {
	opacity: 0.75;
}

.card-grid .card .card-content > *:last-child {
	margin-bottom: 0;
}

.card-grid .card .builder {
	color: var(--wp--preset--color--primary);
	font-size: 0.875em;
	margin-top: auto;
}

@media (hover: hover) {
	.card-grid .card:hover {
		transition: box-shadow 0.1s;
		box-shadow: 0 0 0px 3px var(--wp--preset--color--primary);
	}
}
body:has(dialog.modal[open]) {
	overflow: hidden;
}

#project--grid-section {
	display: grid;
	gap: 1rem;
}

#project--article-title {
	margin: 0;
}

#project--article > *:first-child {
	margin-top: 0;
}

#project--article > *:last-child {
	margin-bottom: 0;
}

#project--grid-section .wp-block-gallery {
	justify-content: center;
	gap: 1rem;
}

.wp-block-gallery img,
#project--grid-section .zoom {
	transition: box-shadow 0.1s ease;
}

.wp-block-gallery img:hover,
#project--grid-section .zoom:hover {
	cursor: zoom-in;
	box-shadow: 0 0 0px 4px var(--wp--preset--color--primary);
	z-index: 3;
}

.pill-list {
	display: inline-flex;
	gap: 0.5em;
	align-items: center;
	flex-wrap: wrap;
	margin-block: 0;
}

a.pill {
	text-decoration: none;
	border: 1px solid;
	border-radius: 50px;
	padding: 0.375em 1em;
}

/* modal dialog gallery */
dialog.modal {
	--page-margin: 2rem;
	overflow: visible;
	border: none;
	background: unset;
	animation-direction: normal;
	animation-timing-function: ease;
	animation-duration: 0.5s;
	display: grid;
	grid-template-areas:
		"prev a next"
		"count count count";
	grid-template-columns: auto 1fr auto;
	text-align: center;
	color: var(--wp--preset--color--white);
}

dialog.modal div.full-gallery {
	grid-area: a;
	background-color: transparent;
	display: flex;
	max-height: 75dvh;
}

dialog.modal div.full-gallery > * {
	display: none;
	justify-content: center;
	align-content: center;
}

dialog.modal div.full-gallery > *[active] {
	display: block;
	height: 100%;
	width: auto;
}

dialog.modal div.full-gallery img {
	height: 100%;
	width: auto;
	object-fit: contain;
}

dialog.modal button.prev {
	position: fixed;
	bottom: 0;
	left: 0;
}

dialog.modal button.next {
	position: fixed;
	bottom: 0;
	right: 0;
}

dialog.modal button.prev,
dialog.modal button.next {
	border: none;
	border-radius: unset;
	background: unset;
	display: flex;
	justify-content: center;
	padding: 1rem;
}

dialog.modal .page-count {
	grid-area: count;
	margin-top: 1rem;
	margin-inline: auto;
}

dialog.modal form {
	position: fixed;
	top: 0;
	right: 0;
}

dialog.modal button.close {
	display: block;
	background: unset;
	border: unset;
	width: 2rem;
	aspect-ratio: 1;
	padding: 0;
	outline: none;
	box-shadow: none;
}

dialog.modal:not([open]) {
    pointer-events: none;
    display: none;
}

dialog.modal::backdrop {
	background: rgba(0, 0, 0, 0.8);
}

dialog.modal figure {
	background-position: 50% 50%;
	position: relative;
	overflow: hidden;
	cursor: zoom-in;
}

/* mobile hack */
@media screen and (min-width: 782px) {
	dialog.modal figure img:hover {
		opacity: 0;
	}
}

dialog.modal figure img {
	transition: opacity 0.3s;
}

@media screen and (min-width: 1024px) {
	#project--grid-section {
		--_gallery-gap: 1rem;
		grid-template-areas:
			"image title"
			"image article"
			"gallery article"
			"x article";grid-template-columns:calc((100px * 6) + (var(--_gallery-gap) * 5)) auto;grid-template-rows:auto auto auto 1fr;gap:0 2rem}#project--article-title{grid-area:title}#project--article{grid-area:article}#project--featured-image{grid-area:image}#project--grid-section .wp-block-gallery{grid-area:gallery;justify-content:flex-start;gap:var(--_gallery-gap);margin-top:var(--_gallery-gap)}#project--grid-section .wp-block-gallery>a:first-child{display:none}dialog.modal button.prev,dialog.modal button.next{width:8rem}dialog.modal button.prev{position:static;grid-area:prev;justify-content:flex-end}dialog.modal button.next{position:static;grid-area:next;justify-content:flex-start}dialog.modal div.full-gallery{max-height:85vh;max-height:85dvh}}