:root {
	/* ╭───────────────────────────────╮ */
	/* │          COLOR GUIDE          │ */
	/* ╰───────────────────────────────╯ */
	/* 				PRIMARY

	Soft Blosson		Petals, nav icons		#eeb8cd
	Lilac				Logo pink				#c8a4c6
	Vintage Grape		Page links				#624260
	Palm Leaf			Logo green, leaves		#8b9d77
	Taupe Gray			Nav bar, text			#5e515d
	Thistle				Background				#c9bbc8
	Cool Steel			Footer					#7aa5b1
	Lavender Mist		Nav bar text			#efe7ee

					ACCENTS
					
	Slate Teal			Footer (dark)			#668a94
	Mauve Shadow								#4f424e
	Blue Slate									#577780

	*/

	--color-nav: #efe7ee;
	--color-nav-bg: #5e515d;
	--color-nav-icon: #eeb8cd;

	--color-bg-body: #c9bbc8;
	--color-bg-body-dk: #ae9cac;
	--color-text: #5e515d;
	--color-link: #624260;
	--color-link-active: #4f424e;
	--color-btn: #efe7ee;
	--color-btn-bg: #4f424e;
	--color-btn-hover: #fff;
	--color-btn-bg-hover: #5e515d;
	--color-accent-lt: #c8a4c6;
	--color-accent-md: #577780;
	--color-accent-md-pk: #b48baf;
	--color-accent-dk: #4f424e;

	--color-footer: #5e515d;
	--color-footer-bg: #7aa5b1;
	--color-footer-bg-dk: #668a94;
	--color-footer-link: #4f424e;
	--color-footer-link-active: #c9bbc8;
	--color-social: #5e515d;
	--color-social-hover: #c9bbc8;
	--button-highlight: linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
}

@font-face {
	font-family: "Dongle";
	src: url("/fonts/dongle-light.woff2") format("woff2");
	font-display: block;
	font-style: normal;
	font-weight: 300;
}

@font-face {
	font-family: "Dongle";
	src: url("/fonts/dongle-regular.woff2") format("woff2");
	font-display: block;
	font-style: normal;
	font-weight: 400;
}

@font-face {
	font-family: "Dongle";
	src: url("/fonts/dongle-bold.woff2") format("woff2");
	font-display: block;
	font-style: normal;
	font-weight: 700;
}

@font-face {
	font-family: "Grape Nuts";
	src: url("/fonts/grapenuts-regular.woff2") format("woff2");
	font-display: block;
	font-style: normal;
	font-weight: 400;
}

@font-face {
	font-family: "Nanum Pen Script";
	src: url("/fonts/nanumpenscript-regular.woff2") format("woff2");
	font-display: block;
	font-style: normal;
	font-weight: 400;
}

/* ╭───────────────────────────────╮ */
/* │           UTILITIES           │ */
/* ╰───────────────────────────────╯ */

.flex {
	display: flex;
}

.sr-only {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.korean-font {
	font-family: "Nanum Pen Script", sans-serif;
}

.content-archive h2.title-wraps {
	font-size: 1.35rem;
	line-height: 1;
}

.archive-modal-details h2.title-wraps {
	font-size: 2rem;
	line-height: 1;
}

/* ╭───────────────────────────────╮ */
/* │             BODY              │ */
/* ╰───────────────────────────────╯ */


html {
	scrollbar-gutter: stable;
}

body {
	background: linear-gradient(to top, var(--color-bg-body), var(--color-bg-body-dk));
	color: var(--color-text);
	font-family: "Dongle", sans-serif;
	font-size: 1.25em;
	font-weight: 400;
	line-height: 1em;
	margin: 0;
	min-height: 100vh;
}

a {
	text-decoration: none;
	color: var(--color-link);
}

.content-flex a:link,
.content-flex a:visited {
	color: var(--color-link);
}

.content-flex a:hover,
.content-flex a:active {
	color: var(--color-link-active);
}

h1,
h2 {
	margin: 0;
	padding: 0;
	color: var(--color-accent-dk);
}

.container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

main {
	flex: 1;
	margin: 0 auto;
	padding: 1rem 0;
	max-width: min(60vw, calc(100vw - 1.8rem));
}

.header-inner,
main, .footer-content {
	max-width: 1100px;
}

/* ╭───────────────────────────────╮ */
/* │          NAVIGATION           │ */
/* ╰───────────────────────────────╯ */

header {
	background:
		var(--button-highlight),
		var(--color-nav-bg);
	color: var(--color-nav);
	position: sticky;
	top: 0;
	width: 100%;
	z-index: 99;
}

.header-inner {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
	min-height: 4rem;
	padding: 0.25rem 0;
}

.brand {
	align-items: center;
	display: flex;
	gap: 0.5rem;
	transform: translateY(0.05em);
}

.site-icon {
	fill: var(--color-accent-lt);
	height: 2.4rem;
	transform: translateY(-0.35em);
	width: 2.5rem;
}

.site-name,
a.site-name:link,
a.site-name:visited  {
	font-size: 2.75em;
	line-height: 1;
	color: var(--color-nav);
	text-decoration: none;
}

.menu {
	flex-grow: 2;
	justify-content: flex-end;
	margin: 0 0.8rem 0 0;
}

.menu-panel {
	display: contents;
}

.menu-toggle {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 0.35rem;
	color: inherit;
	display: none;
	font-size: 1.6rem;
	justify-content: center;
	line-height: 1;
	padding: 0.45rem;
	transition: background-color 0.2s ease;
}

.gallery-link-hb {
	display: none;
}

.menu-group {
	align-items: center;
	display: flex;
	position: relative;
}

.menu-group::after {
	content: "";
	height: 0.55rem;
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 100%;
}

.menu-trigger,
.nav-link, 
.ripple-btn {
	border-radius: 0.35rem;
	display: inline-block;
	font-size: 1.6rem;
	line-height: 1;
	padding: 0.45rem 0.7rem;
	transition: background 0.2s ease;
}

.menu-trigger {
	align-items: center;
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	gap: 0.35rem;
}

.menu-chevron {
	display: inline-block;
	font-size: 0.5em;
	line-height: 1;
	transform: translateY(-0.1em);
	transform-origin: 50% 55%;
	transition: transform 0.5s ease;
	color: var(--color-nav-icon);
}

.menu-chevron-hb {
	display: none;
}

.menu-group.is-open .menu-trigger,
.nav-link:hover {
	background: rgba(239, 231, 238, 0.18);
}

.menu-group.is-open .menu-chevron {
	transform: rotate(180deg);
}

.submenu {
	background: #efe7ee;
	border-radius: 0.45rem;
	color: var(--color-text);
	display: none;
	min-width: 11rem;
	padding: 0.35rem;
	position: absolute;
	right: 0;
	top: calc(100% + 0.3rem);
	z-index: 100;
}

.menu-group.is-open .submenu {
	display: grid;
}

.submenu a {
	border-radius: 0.3rem;
	font-size: 1.4rem;
	line-height: 1;
	padding: 0.45rem 0.5rem;
	text-align: right;
	text-transform: uppercase;
	color: var(--color-nav-active);
}

.submenu a:hover {
	background: rgba(94, 81, 93, 0.12);
}

.ripple-btn {
	align-items: center;
	background:
		var(--button-highlight),
		var(--color-nav);
	color: var(--color-nav-bg);
	display: inline-flex;
	font-weight: 700;
	justify-content: center;
	line-height: 1;
	overflow: hidden;
	padding: 0.7rem 1rem 0.5rem 1rem;
	position: relative;
}

.ripple-btn:hover {
	background:
		var(--button-highlight),
		var(--color-bg-body);
	color: var(--color-accent-dk);
}

/* ╭───────────────────────────────╮ */
/* │             INTRO             │ */
/* ╰───────────────────────────────╯ */

.intro {
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	padding: 0;
	margin: 2rem 0 3rem 0;
	width: 100%;
	height: 340px;
	background-color: rgba(255, 255, 255, 0.15);
	align-items: center;
	box-sizing: border-box;
	border-radius: 1rem;
}

.intro-text {
	box-sizing: border-box;
	font-size: 1.5rem;
	padding: 1.5rem 2.5rem;
	flex: 1 1 auto;
	text-align: justify;
	height: 100%;
	margin: 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	line-height: 110%;
}

.content-intro {
	width: 100%;
	background-color: rgba(255, 255, 255, 0.15);
	box-sizing: border-box;
	border-radius: 1rem;
	padding: 2rem 3rem 1rem 3rem;
	margin: 1rem 0 3rem 0;
	font-size: 1.5rem;
	line-height: 110%;
	text-align: justify;
}

.intro-text h1 {
	font-family: "Grape Nuts", sans-serif;
	font-size: 2.5rem;
	margin: 0 0 2rem 1rem;
}

.intro-text p {
	margin: 0;
}

.intro-cta {
	display: flex;
	justify-content: center;
	margin-top: 1.25rem;
	width: 100%;
}

.intro-cta .ripple-btn {
	background:
		var(--button-highlight),
		var(--color-btn-bg);
	color: var(--color-btn);
}

.intro-cta .ripple-btn:hover {
	color: var(--color-btn-hover);
	background:
		var(--button-highlight),
		var(--color-btn-bg-hover);
}

.early-access-landing {
	align-items: center;
	display: flex;
	flex-direction: column;
	font-size: 1.8rem;
	justify-content: center;
	margin: 0 auto;
	max-width: 34rem;
	min-height: calc(100dvh - 4rem);
	padding: 2rem 1.25rem;
	text-align: center;
}

.early-access-logo {
	display: block;
	height: auto;
	margin: 0 auto 1.5rem;
	max-width: min(23rem, 88vw);
	width: 100%;
}

.early-access-landing p {
	margin: 0;
}

.early-access-light {
	color: rgba(94, 81, 93, 0.78);
}

.launch-countdown {
	margin: 0;
	width: 100%;
}

.launch-countdown-label {
	color: rgba(94, 81, 93, 0.78);
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
}

.launch-countdown-values {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0.5rem auto 0;
	max-width: 24rem;
}

.launch-countdown-unit {
	align-items: center;
	display: flex;
	flex-direction: column;
	line-height: 1;
	min-width: 0;
}

.launch-countdown-unit strong {
	color: var(--color-accent-dk);
	font-family: "Grape Nuts", sans-serif;
	font-size: 2.8rem;
	font-weight: 700;
	line-height: 0.9;
}

.launch-countdown-unit span {
	color: rgba(94, 81, 93, 0.78);
	font-size: 1.05rem;
	font-weight: 700;
	text-transform: uppercase;
}

.early-access-divider {
	background: rgba(94, 81, 93, 0.18);
	height: 1px;
	margin: 1.25rem 0;
	width: min(18rem, 72vw);
}

.early-access-panel {
	width: 100%;
}

.early-access-panel h1 {
	font-family: "Grape Nuts", sans-serif;
	font-size: 2.5rem;
	line-height: 1;
	margin: 0 0 0.75rem;
}

.early-access-panel p {
	line-height: 1;
}

.early-access-form {
	align-items: center;
	display: flex;
	gap: 0.75rem;
	justify-content: center;
	margin: 1rem auto 0;
	width: 100%;
}

.early-access-form input,
.early-access-form .ripple-btn {
	align-items: center;
	box-sizing: border-box;
	display: inline-flex;
	height: 2.5rem;
	justify-content: center;
}

.early-access-form input {
	background: var(--color-nav);
	border: 1px solid rgba(94, 81, 93, 0.18);
	border-radius: 0.35rem;
	color: var(--color-text);
	font: inherit;
	line-height: 1;
	min-width: 0;
	padding: 0.45rem 0.75rem 0.25rem;
	width: min(14rem, 100%);
}

.early-access-form input:focus,
.early-access-form input:focus-visible {
	border-color: rgba(98, 66, 96, 0.35);
	box-shadow: 0 0 0 0.16rem rgba(238, 184, 205, 0.28);
	outline: none;
}

.early-access-form .ripple-btn {
	background:
		var(--button-highlight),
		var(--color-btn-bg);
	border: 0;
	color: var(--color-btn);
	cursor: pointer;
	font: inherit;
	line-height: 1;
	padding: 0.45rem 1rem 0.25rem;
	white-space: nowrap;
}

.early-access-form .ripple-btn:hover {
	background:
		var(--button-highlight),
		var(--color-btn-bg-hover);
	color: var(--color-btn-hover);
}

.early-access-error {
	color: var(--color-accent-dk);
	font-weight: 400;
	font-size: 1.5rem;
	margin-top: 0.75rem !important;
}

.early-access-social-links {
	display: flex;
	gap: 1rem;
	justify-content: center;
	margin-top: 1.25rem !important;
}

.early-access-social-links a {
	color: var(--color-social);
	display: inline-flex;
	font-size: 1.4rem;
	text-decoration: none;
	transition:
		color 0.2s ease,
		transform 0.2s ease;
}

.early-access-social-links a:hover,
.early-access-social-links a:active {
	color: var(--color-social-hover);
	transform: translateY(-2px);
}

@media (max-width: 640px) {
	.early-access-landing {
		font-size: 1.45rem;
		min-height: calc(100dvh - 2rem);
		padding: 1.25rem 1rem;
	}

	.early-access-panel h1 {
		font-size: 2.2rem;
	}

	.launch-countdown-values {
		gap: 0.4rem;
	}

	.launch-countdown-unit strong {
		font-size: 2.25rem;
	}

	.launch-countdown-unit span {
		font-size: 0.9rem;
	}

	.early-access-form {
		flex-direction: column;
	}

	.early-access-form input,
	.early-access-form .ripple-btn {
		width: min(18rem, 100%);
	}
}

.ripple-effect {
	animation: ripple-animation 600ms cubic-bezier(0.4, 0, 0.2, 1);
	background: rgba(255, 255, 255, 1);
	border-radius: 50%;
	opacity: 0.25;
	pointer-events: none;
	position: absolute;
	transform: scale(0);
}

@keyframes ripple-animation {
	to {
		opacity: 0;
		transform: scale(1);
	}
}

.photostack {
	/* max-width: 440px; */		/* this */
	/* min-width: 400px; */		/* this */
	position: relative;
	flex: 0 0 auto;
	height: 100%;
	aspect-ratio: 4 / 3;
	margin-left: auto;
}

.photostack img {
	margin: 0 15px 0 auto;
	box-sizing: border-box;
	border: 10px solid #fff;
	border-radius: 2px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
	inset: 0;
	position: absolute;
	height: 100%;
	transition:
		transform 0.8s ease,
		box-shadow 0.8s ease;
}

.photostack img:nth-child(1) {
	transform: rotate(-4deg);
	z-index: 1;
}

.photostack img:nth-child(2) {
	transform: rotate(1deg);
	z-index: 2;
}

.photostack img:nth-child(3) {
	transform: rotate(4deg);
	z-index: 3;
}

.photostack-floorplan-trigger {
	cursor: zoom-in;
}

.photostack-floorplan-trigger:focus-visible {
	outline: 3px solid rgba(116, 93, 116, 0.45);
	outline-offset: 0.35rem;
}

.photostack:hover img {
	transform: rotate(1deg);
}

.photostack:hover img:nth-child(1),
.photostack:hover img:nth-child(2) {
	box-shadow: none;
}

/* ╭───────────────────────────────╮ */
/* │            CONTENT            │ */
/* ╰───────────────────────────────╯ */

.content-flex {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	margin: 1rem 0;
}

.content-box, .about-box {
	flex: 1 1 0;
	text-align: justify;
}

.more-link {
	float: right;
	margin: -0.75rem 0 0 0;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.more-link i {
	padding: 0 0 0.2rem 0;
}

.supertitle {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: "Dongle", sans-serif;
	font-size: 1.25rem;
	margin: 0 0 0.5rem 0;
	text-transform: uppercase;
}

.supertitle .fa-solid {
	color: var(--color-accent-md);
}

h1 {
	font-family: "Grape Nuts", sans-serif;
	font-size: 2rem;
	margin: 0;
}

.about-box {
	font-size: 1.5rem;
	gap: 1rem;
	align-items: center;
	margin-bottom: 2rem;
	
}

.about-img {
	flex: 0 0 370px;
	width: 370px;
}

.about-box img {
	border: 10px solid var(--color-nav-bg);
	border-radius: 0.35rem;
}

.about-img-fixed {
	flex: 0 0 370px;
	width: 370px;
}

.about-img-caption {
	color: #7a7078;
	font-size: 0.9rem;
	font-style: normal;
	letter-spacing: 0.06em;
	line-height: 1.15;
	margin: 0.65rem auto 0;
	max-width: 92%;
	text-align: center;
	text-transform: uppercase;
}

.about-img-fixed img {
	border: 10px solid var(--color-nav-bg);
	border-radius: 0.35rem;
	box-sizing: border-box;
	display: block;
	height: 250px;
	object-fit: cover;
	width: 370px;
}

.about-modal-trigger {
	cursor: zoom-in;
}

.about-modal-trigger:focus-visible {
	outline: 3px solid var(--color-link);
	outline-offset: 4px;
}

.about-text {
	padding: 0 2rem;
	line-height: 120%;
}

.admin-box, .mod-box, .team-box, .credits-box {
	margin: 0 auto;
	width: 70%;
	justify-content: space-around;
	gap: 2rem;
	align-items: center;
}

.mod-box, .team-box {
	width: 100%;
}

.admin, .mod {
	text-align: center;
}

.admin img, .mod img {
	max-width: 140px;
}

.admin h1, .mod h1 {
	margin: 0.5rem 0 0.5rem 0;
	text-align: center;
}

.admin p, .mod p {
	margin: 0.5rem 0 0 0;
	font-size: 1.5rem;
}

.credits-box {
	align-items: normal;
	width: 100%;
}

.credit-name {
	display: block;
	text-transform: uppercase;
	font-size: 1.25rem;
}

.curators ul, .credits ul {
	list-style-type: none;
	margin: 1rem 0 0 0;
  	padding: 0;
	text-align: center;
}

.curators div, .credits div {
	width: 100%;
	justify-content: space-around;
	gap: 1rem;
}

.curators h1, .credits h1 {
	text-align: center;
}

.curators li, .credits li {
	font-size: 1.5rem;
}

.curators li i, .credits li i {
	font-size: 0.6rem;
	color: var(--color-accent-md-pk);
}

.theme-box {
	display: flex;
	flex: 0 0 calc(50% - 1rem);
	max-width: calc(50% - 1rem);
	text-align: justify;
	gap: 1rem;
	box-sizing: border-box;
}

.theme-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  justify-content: flex-start;
}

.theme-icon img {
	max-width: 140px;
	max-height: 140px;
	border-radius: 0.35rem;
}

.theme-icon p {
	text-transform: uppercase;
	font-size: 0.9rem;
	line-height: 0.7rem;
	text-align: center;
	border-radius: 0.35rem;
	background-color: var(--color-nav-bg);
	color: #fff;
	padding: 0.7rem;
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
}

.theme-icon p b {
	font-weight: normal;
	color: var(--color-accent-lt);
}

.theme-icon .more-link {
	float: none;
	font-size: 1rem;
	margin-top: -0.5rem;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
}

.theme-info {
	padding: 0.5rem 0 0 0;
}

.theme-info h1 {
	line-height: 1.5rem;
	min-height: 3rem;
	display: flex;
  	align-items: center;
}

.theme-note,
.theme-curator-note,
.theme-archive-note {
	display: none;
}

.archive-menu {
	--archive-control-height: 2.65rem;
	align-items: center;
	background: rgba(255, 255, 255, 0.24);
	border: 1px solid rgba(239, 231, 238, 0.55);
	border-radius: 0.85rem;
	box-shadow: 0 0.6rem 1.6rem rgba(79, 66, 78, 0.08);
	box-sizing: border-box;
	display: grid;
	column-gap: 0.85rem;
	position: relative;
	row-gap: 0.45rem;
	grid-template-columns: minmax(10rem, 1.2fr) minmax(9rem, 0.9fr) minmax(10rem, 1fr) auto;
	margin-top: 1.25rem;
	padding: 0.75rem 1rem;
	width: 100%;
}

.archive-filter {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	justify-content: center;
	min-width: 0;
}

.archive-filter label {
	color: #7a7078;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

select,
.archive-filter input {
	background: var(--color-nav);
	border: 1px solid rgba(94, 81, 93, 0.1);
	border-radius: 0.35rem;
	box-sizing: border-box;
	color: var(--color-nav-bg);
	font-family: inherit;
	font-size: 1.25rem;
	height: var(--archive-control-height);
	line-height: 1;
	min-width: 0;
	padding: 0.5rem 0.75rem;
	width: 100%;
}

.archive-filter-actions {
	align-items: center;
	flex-direction: row;
	gap: 0.6rem;
	justify-content: flex-end;
}

.archive-filter-actions .ripple-btn {
	align-items: center;
	border: 0;
	box-sizing: border-box;
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: 1.25rem;
	height: var(--archive-control-height);
	justify-content: center;
	line-height: 1;
	min-height: 0;
	padding: 0 1rem;
	white-space: nowrap;
}

.archive-reset-btn {
	align-items: center;
	background:
		var(--button-highlight),
		var(--color-nav);
	border: 1px solid rgba(94, 81, 93, 0.1);
	border-radius: 0.35rem;
	box-sizing: border-box;
	color: var(--color-link);
	display: inline-flex;
	font-size: 1rem;
	height: var(--archive-control-height);
	justify-content: center;
	line-height: 1;
	min-width: var(--archive-control-height);
	transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.archive-reset-btn:hover,
.archive-reset-btn:active,
.archive-reset-btn:focus-visible {
	background:
		var(--button-highlight),
		var(--color-btn-bg);
	color: var(--color-btn);
	outline: none;
}

select option,
select optgroup {
	background: var(--color-nav);
	border: 0;
	color: var(--color-nav-bg);
}

select option:first-child {
	border-radius: 0.35rem 0.35rem 0 0;
}

select option:last-child {
	border-radius: 0 0 0.35rem 0.35rem;
}

select:focus,
select:focus-visible,
.archive-filter input:focus,
.archive-filter input:focus-visible {
	border-color: rgba(98, 66, 96, 0.35);
	box-shadow: 0 0 0 0.16rem rgba(238, 184, 205, 0.28);
	outline: none;
}

.archive-filter input::placeholder {
	color: rgba(94, 81, 93, 0.68);
}

@media (max-width: 900px) {
	.archive-menu {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.archive-filter-actions {
		justify-content: flex-start;
	}
}

@media (max-width: 520px) {
	.archive-menu {
		grid-template-columns: 1fr;
	}
}

.content-archive {
	--archive-panel-bg: rgba(255, 255, 255, 0.5);
	column-gap: clamp(0.75rem, 1.5vw, 1.25rem);
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
	row-gap: clamp(1rem, 2vw, 1.5rem);
	align-items: stretch;
}

.archive-item {
	border-radius: 0.35rem;
	box-sizing: border-box;
	color: var(--color-nav-bg);
	font-size: 1.25rem;
	block-size: clamp(17rem, 28vw, 19.5rem);
	padding: clamp(0.75rem, 1.8vw, 1rem);
	background: rgba(94, 81, 93, 0.1);
	text-align: center;
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
}

.archive-work-stage {
	align-items: center;
	block-size: 100%;
	display: flex;
	justify-content: center;
	min-block-size: 0;
}

.content-archive .archive-work {
	border: 10px solid var(--archive-panel-bg);
	border-radius: 0.35rem;
	box-sizing: border-box;
	cursor: pointer;
	max-width: min(100%, 200px);
	max-height: min(100%, 200px);
}

.archive-work:focus,
.archive-work:focus-visible {
	outline: none;
}

.archive-work-info {
	align-self: end;
	padding-top: 0.75rem;
}

@media (max-width: 360px) {
	.content-archive {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.archive-item {
		block-size: clamp(19rem, 78vw, 23rem);
	}

	.archive-work {
		max-height: min(100%, 300px);
		max-width: min(88vw, 300px);
	}
}

.content-archive h2 {
	color: var(--color-accent-dk);
	margin: 0 0 0.2rem;
	font-family: "Grape Nuts", sans-serif;
	font-size: 1.6rem;
}

.content-archive .fa-solid {
	margin: 0.5rem 0;
	font-size: 0.75rem;
}

.content-archive h3 {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 500;
}

.content-archive p {
	margin: 0.8rem 0 0 0;
	text-transform: uppercase;
	font-size: 0.92rem;
	letter-spacing: 0.04em;
	color: #7a7078;
}

.archive-load-more-wrap {
	align-items: center;
	display: flex;
	justify-content: center;
	margin: clamp(1.5rem, 4vw, 2.5rem) auto 0;
	max-width: min(100%, 34rem);
	position: relative;
}

.archive-load-more-wrap::before,
.archive-load-more-wrap::after {
	background: linear-gradient(to var(--archive-line-direction, right), transparent, rgba(94, 81, 93, 0.32));
	content: "";
	flex: 1 1 auto;
	height: 1px;
	max-width: 8rem;
}

.archive-load-more-wrap::after {
	--archive-line-direction: left;
}

.archive-load-more {
	background:
		var(--button-highlight),
		var(--color-nav-bg);
	border: 1px solid rgba(238, 184, 205, 0.46);
	box-shadow: 0 0.55rem 1.2rem rgba(79, 66, 78, 0.12);
	color: var(--color-nav);
	font-size: 1.45rem;
	margin: 0 clamp(0.7rem, 2vw, 1rem);
	min-width: 9.5rem;
	padding: 0.75rem 1.45rem 0.58rem;
	transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease;
	font-weight: 500;
}

.archive-load-more:hover,
.archive-load-more:focus-visible {
	background:
		var(--button-highlight),
		var(--color-nav-bg);
	border-color: rgba(200, 164, 198, 0.72);
	box-shadow: 0 0.7rem 1.35rem rgba(79, 66, 78, 0.18);
	color: var(--color-accent-lt);
	transform: translateY(-1px);
}

.archive-load-more.is-loading {
	opacity: 0.42;
	pointer-events: none;
	transform: none;
}

.content-join {
	margin: auto auto;
	width: 90%;
	gap: 3rem;
	align-items: center;
}

.join-cta {
	display: none;
}

.join-box p {
	text-align: justify;
	margin: 2rem 0 0 0;
}

discord-widget {
	font-family: "Noto Sans", sans-serif !important;
	margin-bottom: 2rem;
}

discord-widget ::-webkit-scrollbar-thumb {
    background: #efe7ee !important;
}

widget-header-count {
	color: #efe7ee;
}

discord-widget widget-body widget-member .widget-member-status {
    bottom: 0px !important;
    height: 5px !important;
    width: 5px !important;
}

widget-member-avatar {
	border-radius: 8px;
    width: 16px;
    height: 16px;
}

discord-widget widget-body widget-member widget-member-avatar img {
    height: 16px !important;
    width: 16px !important;
    border: 0 !important;
}

discord-widget widget-body widget-member widget-member-name {
    font-weight: 100 !important;
    height: auto !important;
    line-height: 1rem !important;
    padding: 0 0px 0 20px !important;
    left: 0px !important;
	font-family: "Noto Sans", "Helvetica Neue", sans-serif !important;
}

discord-widget widget-body widget-member widget-member-status-text {
	padding: 0 8px !important;
	max-width: 120px !important;
	font-size: 0.75rem !important;
	top: auto !important;
}

widget-footer-info {
	color: #4f424e;
	opacity: 1 !important;
}

/* ╭───────────────────────────────╮ */
/* │         ARCHIVE MODAL         │ */
/* ╰───────────────────────────────╯ */

.archive-modal {
	align-items: center;
	display: flex;
	inset: 0;
	justify-content: center;
	padding: 1.5rem;
	position: fixed;
	z-index: 300;
}

.archive-modal[hidden] {
	display: none;
}

.archive-modal-overlay {
	background: rgba(39, 28, 38, 0.5);
	inset: 0;
	position: absolute;
}

.archive-modal-content {
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.96), rgba(239, 231, 238, 0.96));
	border-radius: 1rem;
	box-shadow: 0 1.4rem 4rem rgba(53, 39, 52, 0.28);
	display: grid;
	grid-template-columns: minmax(0, 880px) minmax(340px, 1fr);
	height: min(920px, calc(100vh - 3rem));
	max-height: min(920px, calc(100vh - 3rem));
	max-width: min(1320px, calc(100vw - 3rem));
	overflow: hidden;
	position: relative;
	width: min(1320px, calc(100vw - 3rem));
	z-index: 1;
}

.archive-modal-content.is-swipe-leaving-left {
	opacity: 0;
	transform: translateX(-1rem);
	transition: opacity 140ms ease, transform 140ms ease;
}

.archive-modal-content.is-swipe-leaving-right {
	opacity: 0;
	transform: translateX(1rem);
	transition: opacity 140ms ease, transform 140ms ease;
}

.archive-modal-content.is-swipe-entering-left {
	opacity: 0;
	transform: translateX(-1rem);
	transition: none;
}

.archive-modal-content.is-swipe-entering-right {
	opacity: 0;
	transform: translateX(1rem);
	transition: none;
}

.archive-modal-content.is-swipe-settling {
	transition: opacity 160ms ease, transform 160ms ease;
}

@media (prefers-reduced-motion: reduce) {
	.archive-modal-content.is-swipe-leaving-left,
	.archive-modal-content.is-swipe-leaving-right,
	.archive-modal-content.is-swipe-entering-left,
	.archive-modal-content.is-swipe-entering-right,
	.archive-modal-content.is-swipe-settling {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

.archive-modal-close {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 100%;
	box-shadow: none;
	color: var(--color-accent-dk);
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: 0.9375rem;
	height: 2.25rem;
	justify-content: center;
	line-height: 1;
	min-height: 2.25rem;
	min-width: 2.25rem;
	padding: 0;
	position: absolute;
	right: 0.75rem;
	top: 0.5rem;
	width: 2.25rem;
	z-index: 2;
}

.archive-modal-close:focus,
.archive-modal-close:focus-visible {
	box-shadow: none;
	outline: none;
}

.archive-modal-nav {
	align-items: center;
	aspect-ratio: 1 / 1;
	background:
		var(--button-highlight),
		rgba(239, 231, 238, 0.92);
	border: 0;
	border-radius: 50%;
	box-shadow: 0 0.5rem 1.4rem rgba(53, 39, 52, 0.18);
	color: var(--color-accent-dk);
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 2.625rem;
	font-family: inherit;
	font-size: 1.25rem;
	height: 2.625rem;
	justify-content: center;
	line-height: 1;
	min-height: 2.625rem;
	min-width: 2.625rem;
	padding: 0;
	transform: translateY(-50%);
	width: 2.625rem;
}

.archive-modal-nav:hover {
	background:
		var(--button-highlight),
		rgba(255, 255, 255, 0.98);
}

.archive-modal-nav-prev {
	margin: 0 1.5rem 0 0;
}

.archive-modal-nav-next {
	margin: 0 0 0 1.5rem;
}

.archive-modal-flip {
	display: none;
}

.archive-modal-close-small {
	display: none;
}

.archive-modal-close i,
.archive-modal-nav i,
.archive-modal-flip i {
	display: block;
	line-height: 1;
}

.archive-modal-flip i {
	transform: rotate(90deg);
}

.archive-modal-artwork {
	align-items: center;
	background: rgba(200, 164, 198, 0.14);
	display: flex;
	flex-direction: column;
	gap: 1rem;
	justify-content: center;
	min-height: 0;
	padding: 2.5rem;
}

.archive-modal-image-frame {
	background: var(--color-nav);
	border-radius: 0.5rem;
	box-sizing: border-box;
	box-shadow: 0 1rem 2.8rem rgba(79, 66, 78, 0.15);
	cursor: zoom-in;
	display: flex;
	max-height: min(800px, calc(100vh - 8rem));
	max-width: min(800px, 100%);
	padding: 12px;
}

.archive-modal-artwork img {
	display: block;
	max-height: calc(min(800px, calc(100vh - 8rem)) - 24px);
	max-width: 100%;
	object-fit: contain;
	opacity: 1;
	transition: opacity 140ms ease;
}

.archive-modal-image-frame.is-loading img {
	opacity: 0;
}

.archive-modal-video-link {
	align-items: center;
	box-sizing: border-box;
	display: inline-flex;
	flex: 0 0 auto;
	font-size: 1.35rem;
	justify-content: center;
	line-height: 1;
	min-width: max-content;
	padding: 0.52rem 1rem;
	text-decoration: none;
	white-space: nowrap;
}

.archive-modal-video-link span {
	align-items: center;
	display: inline-flex;
	gap: 0.45rem;
	line-height: 1;
	transform: translateY(0.04em);
}

.archive-modal-video-link span i {
	display: block;
	line-height: 1;
}

.archive-modal-video-link[hidden] {
	display: none !important;
}

.archive-modal-details-video-link {
	align-self: center;
	display: none;
	font-size: 1.05rem;
	margin-top: 0.3rem;
	padding: 0.45rem 0.85rem;
	width: fit-content;
}

.archive-modal-content.is-artwork-expanded {
	overflow: visible;
}

.archive-modal.is-artwork-expanded .archive-modal-overlay {
	opacity: 0;
}

.archive-modal-content.is-artwork-expanded::before {
	background: rgba(39, 28, 38, 0.5);
	content: "";
	inset: 0;
	pointer-events: none;
	position: fixed;
	z-index: 3;
}

.archive-modal-content.is-artwork-expanded .archive-modal-image-frame {
	border-radius: 0.5rem;
	cursor: grab;
	height: var(--archive-expanded-height);
	left: 50%;
	max-height: none;
	max-width: none;
	position: fixed;
	touch-action: none;
	top: 50%;
	transform: translate(calc(-50% + var(--archive-pan-x, 0px)), calc(-50% + var(--archive-pan-y, 0px)));
	user-select: none;
	width: var(--archive-expanded-width);
	z-index: 5;
}

.archive-modal-content.is-artwork-expanded .archive-modal-image-frame:active {
	cursor: grabbing;
}

.archive-modal-content.is-artwork-expanded .archive-modal-artwork img {
	height: 100%;
	max-height: none;
	max-width: none;
	object-fit: fill;
	width: 100%;
}

.floorplan-modal .archive-modal-content {
	grid-template-columns: minmax(0, 1fr);
	height: min(860px, calc(100vh - 3rem));
	max-width: min(1120px, calc(100vw - 3rem));
	width: min(1120px, calc(100vw - 3rem));
}

.floorplan-modal .archive-modal-artwork {
	padding: clamp(1rem, 3vw, 2.5rem);
}

.floorplan-modal .archive-modal-image-frame {
	max-height: min(780px, calc(100vh - 7rem));
	max-width: 100%;
}

.floorplan-modal .archive-modal-artwork img {
	max-height: calc(min(780px, calc(100vh - 7rem)) - 24px);
}

.archive-modal-details {
	box-sizing: border-box;
	color: var(--color-text);
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
	overflow: hidden;
	padding: 3rem 2.5rem 2.5rem 2.5rem;
	width: 100%;
}

.archive-modal-details-top {
	flex: 0 0 auto;
}

.archive-modal-details-bottom {
	--archive-modal-text-bg: #f9f6f9;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: clamp(0.9rem, 1.6vh, 1.5rem);
	margin-top: 0;
	min-height: 0;
	overflow: hidden;
}

.archive-modal-info-box {
	flex: 0 0 auto;
}

.archive-modal-info-box > * {
	opacity: 1;
	transition: opacity 160ms ease;
}

.archive-modal-details-bottom.is-info-loading .archive-modal-info-box > *:not(.archive-modal-artist-line) {
	opacity: 0;
}

.archive-modal-details-bottom > *:not(.archive-modal-info-box) {
	opacity: 1;
	transition: opacity 160ms ease;
}

.archive-modal-details-bottom.is-loading > *:not(.archive-modal-info-box) {
	opacity: 0;
}

.archive-modal-details-bottom.is-loading .archive-modal-text-block:first-of-type {
	display: flex !important;
	min-height: clamp(8rem, 28vh, 14rem);
	opacity: 1;
}

.archive-modal-details-bottom.is-loading .archive-modal-text-block:first-of-type h4,
.archive-modal-details-bottom.is-loading .archive-modal-text-block:first-of-type p {
	opacity: 0;
}

.archive-modal-details-bottom.is-loading .archive-modal-text-block:first-of-type .archive-modal-text-scroll {
	background: rgba(249, 246, 249, 0.62);
}

.archive-modal-details h2 {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	font-family: "Grape Nuts", sans-serif;
	font-size: 2.4rem;
	line-height: 1;
	margin: 0 0 0.65rem;
}

.archive-modal-title-video-link {
	color: var(--color-link);
	display: none;
	font-size: 0.45em;
	line-height: 1;
	text-decoration: none;
	transform: translateY(-0.12em);
}

.archive-modal-title-video-link[hidden] {
	display: none !important;
}

.archive-modal-title-video-link:hover,
.archive-modal-title-video-link:active {
	color: var(--color-link-active);
}

.archive-modal-artist-line {
	align-items: center;
	display: flex;
	gap: 0.5rem;
	line-height: 1.7rem;
	margin: 0 0 0.35rem;
}

.archive-modal-details h3 {
	font-size: 1.7rem;
	font-weight: 500;
	line-height: 1.7rem;
	margin: 0;
}

.archive-modal-meta {
	color: #7a7078;
	font-size: 1.25rem;
	line-height: 1.25;
	min-height: 1.5625rem;
}

.archive-modal-social {
	align-items: center;
	align-self: center;
	color: var(--color-link);
	display: inline-flex;
	font-size: 0.9rem;
	height: 1.7rem;
	justify-content: center;
	line-height: 1;
	margin-top: 0;
	text-decoration: none;
	width: 0.9rem;
}

.archive-modal-social[hidden] {
	display: none !important;
}

.archive-modal-social i {
	display: block;
	line-height: 1;
	transform: translateY(-0.2rem);
}

.archive-modal-social:hover,
.archive-modal-social:active {
	color: var(--color-link-active);
}

.archive-modal-details h5 {
	color: #7a7078;
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.25;
	margin: 0.65rem 0 1.5rem;
	min-height: 1.25rem;
	text-transform: lowercase;
	font-style: italic;
}

.archive-modal-text-block + .archive-modal-text-block {
	margin-top: 0;
}

.archive-modal-text-block {
	box-sizing: border-box;
	display: flex;
	flex: 0 1 auto;
	flex-direction: column;
	max-height: 100%;
	min-height: 0;
	overflow: hidden;
	width: 100%;
}

.archive-modal-text-block[hidden] {
	display: none !important;
}

.archive-modal-text-scroll {
	background: var(--archive-modal-text-bg);
	border-radius: 0.75rem;
	box-sizing: border-box;
	flex: 1 1 auto;
	max-height: 100%;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	/* padding: 0.85rem 1rem 0.85rem 1rem; */
	padding: 1rem 0.85rem;
	scrollbar-gutter: stable both-edges;
	scrollbar-color: #efe7ee transparent;
	scrollbar-width: thin;
}

.archive-modal-text-block p {
	font-size: 1.25rem;
	margin: 0;
	text-align: justify;
	white-space: pre-line;
}

.archive-modal h4 {
	color: var(--color-accent-dk);
	font-size: 1.1rem;
	letter-spacing: 0.06em;
	margin: 0 0 0.55rem;
	text-transform: uppercase;
}

.archive-modal-text-scroll::-webkit-scrollbar {
	width: 0.45rem;
}

.archive-modal-text-scroll::-webkit-scrollbar-track {
	background: transparent;
}

.archive-modal-text-scroll::-webkit-scrollbar-thumb {
	background: #efe7ee;
	border-radius: 999px;
}

.archive-modal-label {
	align-self: end;
	box-sizing: border-box;
	color: #7a7078;
	font-size: 0.9rem;
	letter-spacing: 0.06em;
	line-height: 1.15;
	margin: auto 0 0;
	padding-top: 1.5rem;
	text-align: right;
	text-transform: uppercase;
}

.contact-section {
	margin: 0 auto;
	max-width: 54rem;
	width: 100%;
}

.contact-form,
.contact-thanks {
	background: rgba(255, 255, 255, 0.28);
	border: 1px solid rgba(239, 231, 238, 0.68);
	border-radius: 0.85rem;
	box-shadow: 0 0.8rem 2rem rgba(79, 66, 78, 0.08);
	box-sizing: border-box;
	width: 100%;
}

.contact-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: clamp(1rem, 3vw, 1.5rem);
}

.contact-thanks {
	margin-bottom: 1rem;
	padding: 1rem 1.25rem 0.85rem;
}

.contact-thanks h2 {
	color: var(--color-accent-dk);
	font-family: "Grape Nuts", sans-serif;
	font-size: 2.25rem;
	line-height: 1;
	margin: 0 0 0.2rem;
}

.contact-thanks p {
	font-size: 1.35rem;
	line-height: 1.1;
	margin: 0;
	text-align: left;
}

.contact-field-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contact-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-width: 0;
}

.contact-field label {
	color: #7a7078;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.contact-field input,
.contact-field textarea {
	background: var(--color-nav);
	border: 1px solid rgba(94, 81, 93, 0.13);
	border-radius: 0.35rem;
	box-sizing: border-box;
	color: var(--color-nav-bg);
	font-family: inherit;
	font-size: 1.35rem;
	line-height: 1.05;
	padding: 0.65rem 0.8rem 0.45rem;
	width: 100%;
}

.contact-field textarea {
	min-height: 12rem;
	resize: vertical;
}

.contact-field input:focus,
.contact-field input:focus-visible,
.contact-field textarea:focus,
.contact-field textarea:focus-visible {
	border-color: rgba(98, 66, 96, 0.38);
	box-shadow: 0 0 0 0.16rem rgba(238, 184, 205, 0.3);
	outline: none;
}

.contact-field span,
.contact-validation-summary {
	color: var(--color-accent-dk);
	font-size: 1.05rem;
	line-height: 1;
}

.contact-validation-summary:empty {
	display: none;
}

.contact-validation-summary ul {
	margin: 0;
	padding-left: 1.1rem;
}

.contact-honeypot {
	height: 0;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	width: 0;
}

.contact-actions {
	display: flex;
	justify-content: flex-end;
}

.contact-submit {
	border: 0;
	cursor: pointer;
	font: inherit;
	line-height: 1;
	padding: 0.65rem 1.2rem 0.45rem;
}

@media (max-height: 749px), (max-width: 1199px) {
	.archive-modal {
		--archive-modal-control-gap: clamp(0.8rem, 4dvw, 1.2rem);
		--archive-modal-control-icon: clamp(0.95rem, 3.6dvw, 1.15rem);
		--archive-modal-control-size: clamp(2.1rem, 7.5dvw, 2.45rem);
		--archive-modal-dock-space: clamp(3.9rem, 9dvh, 4.75rem);
		--archive-modal-dock-bottom: calc((var(--archive-modal-dock-space) - var(--archive-modal-control-size)) / 2);
		box-sizing: border-box;
		padding: clamp(3.6rem, 9dvh, 4.5rem) clamp(0.75rem, 4dvw, 1.5rem) var(--archive-modal-dock-space);
	}

	.archive-modal::after {
		background: rgba(239, 231, 238, 0.68);
		border-radius: 999px;
		box-shadow: 0 0.7rem 1.8rem rgba(53, 39, 52, 0.16);
		content: "";
		height: calc(var(--archive-modal-control-size) + 0.7rem);
		left: 50%;
		pointer-events: none;
		position: fixed;
		bottom: calc(var(--archive-modal-dock-bottom) - 0.35rem);
		transform: translateX(-50%);
		width: calc((var(--archive-modal-control-size) * 3) + (var(--archive-modal-control-gap) * 2) + 1rem);
		z-index: 3;
	}

	.archive-modal-content {
		background: transparent;
		border-radius: 0;
		box-shadow: none;
		display: block;
		height: auto;
		max-height: 100%;
		max-width: min(820px, 100%);
		overflow: visible;
		perspective: 1600px;
		width: fit-content;
	}

	.archive-modal.is-artwork-expanded .archive-modal-overlay {
		opacity: 1;
	}

	.archive-modal-content.is-artwork-expanded::before {
		content: none;
	}

	.archive-modal-artwork,
	.archive-modal-details {
		backface-visibility: hidden;
		box-sizing: border-box;
		height: 100%;
		inset: 0;
		position: absolute;
		transition: transform 360ms ease;
		width: 100%;
	}

	.archive-modal-content.is-flip-instant .archive-modal-artwork,
	.archive-modal-content.is-flip-instant .archive-modal-details {
		transition: none;
	}

	.archive-modal-artwork {
		background: transparent;
		box-shadow: none;
		height: auto;
		inset: auto;
		padding: 0;
		position: relative;
		width: auto;
	}

	.archive-modal-video-link {
		display: none !important;
	}

		.archive-modal-title-video-link:not([hidden]) {
			display: none;
		}

			.archive-modal-details-video-link:not([hidden]) {
				display: inline-flex !important;
				margin-left: auto;
				margin-right: auto;
				margin-top: 0.4rem;
			}

	.archive-modal-content.is-flipped .archive-modal-artwork {
		pointer-events: none;
		transform: rotateY(180deg);
	}

	.archive-modal-image-frame {
		background: var(--color-nav);
		border-radius: 0.5rem;
		box-shadow: 0 1rem 2.8rem rgba(79, 66, 78, 0.15);
		box-sizing: border-box;
		cursor: default;
		display: inline-grid;
		height: auto;
		max-height: 100%;
		max-width: calc(100dvw - clamp(0.75rem, 4dvw, 1.5rem) - clamp(0.75rem, 4dvw, 1.5rem));
		overflow: hidden;
		padding: 12px;
		place-items: center;
		width: fit-content;
	}

	.archive-modal-artwork img {
		border: 0;
		border-radius: 0;
		box-shadow: none;
		height: auto;
		max-height: calc(100dvh - clamp(3.6rem, 9dvh, 4.5rem) - clamp(3.9rem, 9dvh, 4.75rem) - 24px);
		max-width: calc(100dvw - clamp(0.75rem, 4dvw, 1.5rem) - clamp(0.75rem, 4dvw, 1.5rem) - 24px);
		object-fit: contain;
		width: auto;
	}

	.archive-modal-details {
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0.97), rgba(239, 231, 238, 0.97));
		border-radius: 1rem;
		box-shadow: 0 1.4rem 4rem rgba(53, 39, 52, 0.28);
		pointer-events: none;
		padding: clamp(1rem, 2.4dvh, 1.8rem) clamp(1rem, 3dvw, 2rem);
		transform: rotateY(180deg);
	}

	.archive-modal-content.is-flipped .archive-modal-details {
		pointer-events: auto;
		transform: rotateY(360deg);
	}

	.archive-modal-details h2 {
		font-size: clamp(1.65rem, 4.8dvw, 2.35rem);
		margin-bottom: 0.45rem;
	}

	.archive-modal-details h3 {
		font-size: clamp(1.15rem, 3.4dvw, 1.65rem);
		line-height: 1.1;
	}

		.archive-modal-meta,
		.archive-modal-text-block p {
			font-size: clamp(0.95rem, 2.6dvw, 1.18rem);
			line-height: 1rem;
		}

		.archive-modal-details h5 {
			font-size: clamp(0.85rem, 2.2dvw, 1rem);
			margin: 0.4rem 0 clamp(0.65rem, 1.6dvh, 1rem);
		}

		.archive-modal-details h5:has(+ .archive-modal-details-video-link:not([hidden])) {
			margin-bottom: 0.2rem;
		}

	.archive-modal h4 {
		font-size: clamp(0.85rem, 2.2dvw, 1rem);
		margin-bottom: 0.4rem;
	}

	.archive-modal-details-bottom {
		gap: clamp(0.55rem, 1.4dvh, 0.9rem);
	}

		.archive-modal-content.is-wide-artwork .archive-modal-details-bottom {
			align-content: start;
			align-items: start;
			display: grid;
			grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
			grid-template-rows: auto auto 1fr auto;
		}

		.archive-modal-content.is-wide-artwork .archive-modal-info-box {
			grid-column: 1 / -1;
			grid-row: 1;
		}

		.archive-modal-text-block {
			flex: 0 1 auto;
			max-height: 100%;
		}

		.archive-modal-content.is-wide-artwork .archive-modal-text-block {
			align-self: start;
			max-height: 100%;
		}

		.archive-modal-content.is-wide-artwork.is-note-hidden .archive-modal-details-bottom > .archive-modal-text-block:nth-child(2) {
			grid-column: 1 / -1;
		}

		.archive-modal-content.is-wide-artwork .archive-modal-label {
			grid-column: 1 / -1;
			grid-row: 4;
			justify-self: end;
		}

	.archive-modal-text-scroll {
		border-radius: 0.6rem;
		padding: 0.7rem;
	}

		.archive-modal-label {
			font-size: clamp(0.78rem, 1.6dvw, 0.95rem);
			letter-spacing: 0.06em;
			padding-top: clamp(0.45rem, 1.3dvh, 0.85rem);
		}

	.archive-modal-close,
	.archive-modal-flip {
		align-items: center;
		background:
			var(--button-highlight),
			rgba(255, 255, 255, 0.96);
		border: 0;
		border-radius: 999px;
		box-shadow: 0 0.45rem 1.1rem rgba(53, 39, 52, 0.2);
		color: var(--color-accent-dk);
		cursor: pointer;
		display: inline-flex;
		font-family: inherit;
		font-size: var(--archive-modal-control-icon);
		height: var(--archive-modal-control-size);
		justify-content: center;
		line-height: 1;
		position: fixed;
		top: clamp(0.45rem, 1.6dvh, 0.75rem);
		width: var(--archive-modal-control-size);
		z-index: 4;
	}

	.archive-modal-close-desktop {
		display: none;
	}

	.archive-modal-close-small {
		display: inline-flex;
	}

		.archive-modal-close {
			left: auto;
			right: var(--archive-modal-dock-bottom);
		}

		.archive-modal-flip {
			bottom: var(--archive-modal-dock-bottom);
			left: calc(50% - (var(--archive-modal-control-size) / 2));
			padding: 0;
			right: auto;
			top: auto;
		}

			.archive-modal-nav {
				background:
					var(--button-highlight),
					rgba(255, 255, 255, 0.96);
				box-shadow: 0 0.45rem 1.1rem rgba(53, 39, 52, 0.2);
			flex-basis: var(--archive-modal-control-size);
			font-size: var(--archive-modal-control-icon);
			height: var(--archive-modal-control-size);
			margin: 0;
			min-height: var(--archive-modal-control-size);
			min-width: var(--archive-modal-control-size);
			position: fixed;
			top: auto;
			transform: none;
			width: var(--archive-modal-control-size);
			z-index: 4;
		}

		.archive-modal-nav-prev {
			bottom: var(--archive-modal-dock-bottom);
			left: calc(50% - (var(--archive-modal-control-size) * 1.5) - var(--archive-modal-control-gap));
			margin: 0;
		}

			.archive-modal-nav-next {
				bottom: var(--archive-modal-dock-bottom);
				left: calc(50% + (var(--archive-modal-control-size) / 2) + var(--archive-modal-control-gap));
				margin: 0;
				right: auto;
			}
	}

	@media (max-width: 700px) {
		.archive-modal-content.is-short-preview {
			min-height: min(38rem, calc(100dvh - clamp(3.6rem, 9dvh, 4.5rem) - clamp(3.9rem, 9dvh, 4.75rem)));
			width: min(34rem, 100%);
		}

		.archive-modal-content.is-short-preview:not(.is-artwork-expanded) .archive-modal-artwork {
			align-items: center;
			display: flex;
			justify-content: center;
			min-height: inherit;
			width: 100%;
		}

		.archive-modal-content.is-short-preview:not(.is-artwork-expanded) .archive-modal-image-frame {
			max-width: 100%;
		}

		.archive-modal-content.is-short-preview:not(.is-artwork-expanded) .archive-modal-artwork img {
			max-width: calc(100dvw - clamp(0.75rem, 4dvw, 1.5rem) - clamp(0.75rem, 4dvw, 1.5rem) - 24px);
			min-width: 0;
		}

		.archive-modal-content.is-short-preview .archive-modal-details-bottom,
		.archive-modal-content.is-short-preview.is-wide-artwork .archive-modal-details-bottom {
			display: flex;
			flex-direction: column;
			gap: clamp(0.7rem, 1.8dvh, 1rem);
		}

		.archive-modal-content.is-short-preview .archive-modal-text-block,
		.archive-modal-content.is-short-preview.is-wide-artwork .archive-modal-text-block {
			flex: 0 1 auto;
			max-height: 100%;
		}

		.archive-modal-content.is-short-preview.is-wide-artwork .archive-modal-label {
			align-self: end;
			grid-column: auto;
			grid-row: auto;
			justify-self: auto;
		}
	}

	@media (orientation: landscape) and (max-height: 700px) {
		.archive-modal-content.is-narrow-landscape-preview {
			width: min(42rem, calc(100dvw - clamp(0.75rem, 4dvw, 1.5rem) - clamp(0.75rem, 4dvw, 1.5rem)));
		}

		.archive-modal-content.is-narrow-landscape-preview:not(.is-artwork-expanded) .archive-modal-artwork {
			align-items: center;
			display: flex;
			justify-content: center;
			width: 100%;
		}

		.archive-modal-content.is-narrow-landscape-preview:not(.is-artwork-expanded) .archive-modal-image-frame {
			max-width: 100%;
		}

		.archive-modal-content.is-narrow-landscape-preview:not(.is-artwork-expanded) .archive-modal-artwork img {
			max-width: calc(100dvw - clamp(0.75rem, 4dvw, 1.5rem) - clamp(0.75rem, 4dvw, 1.5rem) - 24px);
			min-width: 0;
		}
	}

	@media (max-height: 600px) and (min-width: 600px) {
		.archive-modal-details-bottom,
		.archive-modal-content.is-short-preview .archive-modal-details-bottom,
		.archive-modal-content.is-short-preview.is-wide-artwork .archive-modal-details-bottom {
			align-content: start;
			align-items: start;
			display: grid;
			grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
			grid-template-rows: minmax(0, 1fr) auto;
		}

		.archive-modal-text-block,
		.archive-modal-content.is-short-preview .archive-modal-text-block,
		.archive-modal-content.is-short-preview.is-wide-artwork .archive-modal-text-block {
			align-self: start;
			max-height: 100%;
			min-height: 0;
			overflow: hidden;
		}

			.archive-modal-label,
			.archive-modal-content.is-short-preview.is-wide-artwork .archive-modal-label {
				align-self: end;
				grid-column: 1 / -1;
				grid-row: 2;
				justify-self: end;
				line-height: 1.2;
				margin: 0.8rem 0.4rem 0.02rem 0;
			}
	}

	@media (max-height: 450px) and (min-width: 600px) {
		.archive-modal-details {
			display: grid;
			column-gap: clamp(0.45rem, 1.8dvh, 0.7rem);
			row-gap: clamp(0.85rem, 3dvh, 1.1rem);
			align-items: start;
			grid-template-columns: minmax(0, 1fr);
			grid-template-rows: auto minmax(0, 1fr) auto;
			min-height: 0;
			overflow: hidden;
			padding: clamp(0.75rem, 3dvh, 1rem) clamp(0.8rem, 2.2dvw, 1.25rem) 0;
		}

		.archive-modal-details-top {
			display: block;
			grid-row: 1;
			min-height: 0;
		}

		.archive-modal-details h2 {
			font-size: clamp(1.875rem, 6.6dvh, 2.625rem);
			margin: 0;
		}

		.archive-modal-info-box {
			align-self: start;
			background: transparent;
			border-radius: 0.6rem;
			box-sizing: border-box;
			grid-column: 1;
			max-height: 100%;
			min-height: 0;
			overflow: visible;
			padding: 0;
		}

		.archive-modal-artist-line {
			line-height: 1.2;
			margin-bottom: 0.25rem;
		}

		.archive-modal-details h3 {
			font-size: clamp(1.32rem, 5dvh, 1.75rem);
			line-height: 1.1;
		}

		.archive-modal-meta {
			font-size: clamp(1.1rem, 4dvh, 1.3rem);
		}

		.archive-modal-details h5 {
			font-size: clamp(0.98rem, 3.5dvh, 1.12rem);
			margin: 0.35rem 0 0;
		}

		.archive-modal-text-block,
		.archive-modal-content.is-short-preview .archive-modal-text-block,
		.archive-modal-content.is-short-preview.is-wide-artwork .archive-modal-text-block {
			align-self: start;
			max-height: 100%;
			min-height: 0;
		}

		.archive-modal-details-bottom,
		.archive-modal-content.is-wide-artwork .archive-modal-details-bottom,
		.archive-modal-content.is-short-preview .archive-modal-details-bottom,
		.archive-modal-content.is-short-preview.is-wide-artwork .archive-modal-details-bottom {
			align-items: start;
			row-gap: 0;
			display: grid;
			flex: 1 1 auto;
			grid-row: 2;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			grid-template-rows: minmax(0, 1fr) auto;
			max-height: 100%;
			min-height: 0;
			overflow: hidden;
			align-self: stretch;
		}

		.archive-modal-details-bottom > .archive-modal-info-box {
			align-self: start;
			grid-column: 1;
			grid-row: 1;
			max-height: 100%;
			min-height: 0;
			overflow: hidden;
		}

		.archive-modal-details-bottom > .archive-modal-text-block:nth-child(2),
		.archive-modal-content.is-wide-artwork .archive-modal-details-bottom > .archive-modal-text-block:nth-child(2) {
			grid-column: 2;
			grid-row: 1;
			max-height: 100%;
			min-height: 0;
		}

			.archive-modal-details-bottom > .archive-modal-text-block:nth-child(3),
			.archive-modal-content.is-wide-artwork .archive-modal-details-bottom > .archive-modal-text-block:nth-child(3) {
				grid-column: 3;
				grid-row: 1;
				max-height: 100%;
				min-height: 0;
			}

			.archive-modal-content.is-note-hidden .archive-modal-details-bottom > .archive-modal-text-block:nth-child(2),
			.archive-modal-content.is-wide-artwork.is-note-hidden .archive-modal-details-bottom > .archive-modal-text-block:nth-child(2) {
				grid-column: 2 / -1;
			}

		.archive-modal-details-bottom > .archive-modal-text-block .archive-modal-text-scroll {
			max-height: 100%;
			min-height: 0;
			overflow-y: auto;
		}

		.archive-modal-text-scroll {
			padding: 0.65rem;
		}

			.archive-modal-label,
			.archive-modal-content.is-wide-artwork .archive-modal-label,
			.archive-modal-content.is-short-preview.is-wide-artwork .archive-modal-label {
				grid-column: 1 / -1;
				grid-row: 2;
				align-self: end;
				justify-self: end;
				line-height: 1.2;
				margin: 1.7rem 0.4rem 0.02rem 0;
				padding-top: 0;
			}
	}

	@media (max-width: 600px) {
		.archive-modal-details h2 {
			font-size: clamp(1.9rem, 8dvw, 2.35rem);
		}

		.archive-modal-details h3 {
			font-size: clamp(1.3rem, 5.6dvw, 1.65rem);
			line-height: 1.15;
		}

		.archive-modal-meta {
			font-size: clamp(1.05rem, 4.3dvw, 1.18rem);
		}

		.archive-modal-text-block p {
			font-size: clamp(1.12rem, 4.7dvw, 1.28rem);
		}

		.archive-modal-details h5,
		.archive-modal h4 {
			font-size: clamp(0.95rem, 3.8dvw, 1rem);
		}

		.archive-modal-label {
			font-size: clamp(0.72rem, 3dvw, 0.86rem);
		}
	}

	@media (min-width: 700px) {
		.archive-modal-label {
			font-size: clamp(0.9rem, 1.2dvw, 1.05rem);
		}
	}

/* ╭───────────────────────────────╮ */
/* │             FOOTER            │ */
/* ╰───────────────────────────────╯ */

.archive-modal-content.has-both-text-blocks .archive-modal-details-bottom > .archive-modal-text-block {
	flex: 0 1 auto;
	max-height: 50%;
}

.archive-modal-details-bottom:has(> .archive-modal-text-block:nth-child(2):not([hidden])):has(> #archive-modal-note-block:not([hidden])) > .archive-modal-text-block {
	flex: 0 1 auto;
	max-height: 50%;
}

.archive-modal-content.is-wide-artwork .archive-modal-details-bottom:has(> #archive-modal-note-block[hidden]) > .archive-modal-text-block:nth-child(2) {
	grid-column: 1 / -1;
}

.archive-modal-details-bottom:has(> #archive-modal-note-block[hidden]) > .archive-modal-text-block:nth-child(2) {
	max-height: 100%;
}

@media (max-height: 450px) and (min-width: 600px) {
	.archive-modal-content.is-note-hidden .archive-modal-details-bottom > .archive-modal-text-block:nth-child(2),
	.archive-modal-content.is-wide-artwork.is-note-hidden .archive-modal-details-bottom > .archive-modal-text-block:nth-child(2),
	.archive-modal-content.is-wide-artwork .archive-modal-details-bottom:has(> #archive-modal-note-block[hidden]) > .archive-modal-text-block:nth-child(2) {
		grid-column: 2 / -1;
	}
}

@media (max-height: 749px), (max-width: 1199px) {
	.floorplan-modal::after {
		content: none;
	}

	.floorplan-modal .archive-modal-content {
		max-width: min(920px, 100%);
		width: fit-content;
	}

	.floorplan-modal .archive-modal-image-frame {
		cursor: zoom-in;
	}
}

footer {
	background: radial-gradient(transparent, transparent, rgba(37, 102, 113, 0.15)), linear-gradient(to top, var(--color-footer-bg-dk), var(--color-footer-bg));
	color: var(--color-footer);
	font-size: 1rem;
	isolation: isolate;
	overflow: visible;
	padding: 2rem 0 0;
	position: relative;
	text-align: center;
}

footer::before {
	-webkit-mask-image: radial-gradient(120% 60px at 50% 100%, transparent 55%, black 56%);
	-webkit-mask-repeat: no-repeat;
	background: inherit;
	clip-path: inset(35px 0 0 0);
	content: "";
	height: 80px;
	left: 0;
	mask-image: radial-gradient(120% 60px at 50% 100%, transparent 55%, black 56%);
	mask-repeat: no-repeat;
	position: absolute;
	top: -35px;
	width: 100%;
	z-index: 1;
}

.footer-content {
	margin: 0 auto;
	position: relative;
	z-index: 2;
}

footer ul {
	display: flex;
	gap: 1rem;
	justify-content: space-evenly;
	list-style: none;
	padding: 0 0 1rem;
	text-align: left;
}

footer ul > li:first-child {
	isolation: isolate;
	padding-top: 0.35rem;
	position: relative;
}

.footer-brand {
	position: relative;
	z-index: 2;
}

.footer-title {
	font-family: Dongle, sans-serif;
	font-size: 2.5rem;
	text-transform: none;
}

footer a,
footer a:visited {
	font-size: 1.15rem;
	text-transform: uppercase;
	color: var(--color-footer-link);
}

footer a:hover,
footer a:active {
	text-transform: uppercase;
	color: var(--color-footer-link-active);
}

.social-links {
	display: flex;
	gap: 1rem;
	justify-content: center;
}

.social {
	color: var(--color-social);
	fill: currentColor;
	height: 1.25rem;

	transition:
		transform 0.2s ease,
		color 0.2s ease;
}

.social:hover {
	color: var(--color-social-hover);
	transform: translateY(-2px);
}

/* ╭───────────────────────────────╮ */
/* │        FOOTER ANIMATION       │ */
/* ╰───────────────────────────────╯ */

.footer-animation {
	align-items: flex-end;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	margin-left: auto;
	margin-right: 0;
	margin-top: -3.25rem;
	width: 100%;
}

.leaves-container {
	display: grid;
	fill: #8b9d77;
	gap: 0.5rem;
	grid-template-columns: repeat(2, 2.85rem);
	grid-template-rows: repeat(2, 2.85rem);
	left: -1.5rem;
	line-height: 0;
	opacity: 0.9;
	pointer-events: none;
	position: absolute;
	top: -0.25rem;
	transform: scaleY(0.42) skewX(-20deg);
	transform-origin: left top;
	z-index: 1;

	grid-template-areas:
		"leaf-1 ."
		"leaf-2 leaf-3";
}

.leaves-svg {
	display: block;
	filter: drop-shadow(0 0.12rem 0.2rem rgba(83, 133, 148, 0.2));
	flex: 0 0 auto;
	height: auto;
	transform-box: fill-box;
	transform-origin: center;
	width: 2.85rem;
}

.leaves-svg:nth-child(1) {
	animation: leafSway1 6s ease-in-out infinite;
	width: 3rem;
}

.leaves-svg:nth-child(2) {
	animation: leafSway2 6s ease-in-out infinite;
	width: 2.6rem;
}

.leaves-svg:nth-child(3) {
	animation: leafSway3 6s ease-in-out infinite;
	width: 3.6rem;
}

.leaves-svg:nth-child(1) {
	grid-area: leaf-1;
}

.leaves-svg:nth-child(2) {
	grid-area: leaf-2;
}

.leaves-svg:nth-child(3) {
	grid-area: leaf-3;
}

.petal-svg {
	display: block;
	fill: #eeb8cd;
	height: 80px;
	overflow: visible;
	width: min(20rem, 40vw);
}

.petal {
	animation: sway 6s ease-in-out infinite;
	transform-box: fill-box;
	transform-origin: center;
}

.petal-2 {
	animation-delay: 1.2s;
}

.petal-3 {
	animation-delay: 2.4s;
}

@keyframes sway {
	0% {
		transform: rotate(-5deg) translateY(0px);
	}

	50% {
		transform: rotate(5deg) translateY(-9px);
	}

	100% {
		transform: rotate(-5deg) translateY(0px);
	}
}

@keyframes leafSway1 {
	0% {
		transform: rotate(-5deg) translate(0px, 0px);
	}

	50% {
		transform: rotate(5deg) translate(-2px, -9px);
	}

	100% {
		transform: rotate(-5deg) translate(0px, 0px);
	}
}

@keyframes leafSway2 {
	0% {
		transform: rotate(-5deg) translate(0px, 0px);
	}

	50% {
		transform: rotate(5deg) translate(0px, -8px);
	}

	100% {
		transform: rotate(-5deg) translate(0px, 0px);
	}
}

@keyframes leafSway3 {
	0% {
		transform: rotate(-5deg) translate(0px, 0px);
	}

	50% {
		transform: rotate(5deg) translate(2px, -9px);
	}

	100% {
		transform: rotate(-5deg) translate(0px, 0px);
	}
}

.petal-8 {
	animation: sway 6s ease-in-out infinite;
	animation-delay: 0.6s;
	transform-box: fill-box;
	transform-origin: center;
}

.ripple-container {
	--ripple-x: calc(50% - 83px);
	--ripple-y: 88%;
	align-self: flex-end;
	margin: 0;
	/* padding: 1rem 2rem; */
	padding: 0;
	perspective: 600px;
	position: relative;
	width: min(20rem, 40vw);
}

.ripple-svg {
	pointer-events: none;
}

.ripple-svg-anim {
	animation: ripple-svg-plane 6s ease-out infinite;
	animation-delay: -2.7s;
	transform-box: fill-box;
	transform-origin: center;
	will-change: transform, opacity;
}

.ripple-svg-ring {
	fill: none;
	opacity: 1;
	stroke: rgba(189, 255, 253, 0.82);
	stroke-width: 2px;
	filter: blur(0.15px);
}

@keyframes ripple-svg-plane {
	0%,
	54% {
		opacity: 0;
		transform: scale(0.1333) scaleY(0.38);
	}

	55% {
		opacity: 0.68;
		transform: scale(0.1333) scaleY(0.38);
	}

	75% {
		opacity: 0.14;
		transform: scale(1) scaleY(0.38);
	}

	90% {
		opacity: 0;
		transform: scale(1) scaleY(0.38);
	}

	100% {
		opacity: 0;
		transform: scale(1) scaleY(0.38);
	}
}

.ripple {
	--ripple-end-w: clamp(44px, 28%, 90px);
	--ripple-end-h: calc(var(--ripple-end-w) * 0.6667);
	--ripple-start-w: calc(var(--ripple-end-w) * 0.1333);
	--ripple-start-h: calc(var(--ripple-end-h) * 0.1333);
	animation: ripple-plane 6s ease-out infinite;
	animation-fill-mode: forwards;
	filter: blur(0.1px);
	height: var(--ripple-end-h);
	left: var(--ripple-x);
	mask-image: radial-gradient(ellipse at center, black 55%, rgba(0, 0, 0, 0.4) 70%, transparent 85%);
	mask-position: center;
	mask-size: 100% 100%;
	opacity: 0;
	position: absolute;
	top: var(--ripple-y);
	transform: translate(-50%, -50%) scaleY(0.38);
	transform-origin: center;
	width: var(--ripple-end-w);
}

.ripple-ring {
	border: 2px solid rgba(189, 255, 253, 0.82);
	border-radius: 50%;
	inset: 0;
	position: absolute;

	box-shadow:
		0 0 6px rgba(255, 255, 255, 0.2),
		inset 0 0 4px rgba(255, 255, 255, 0.16);
}

@keyframes ripple-plane {
	0%,
	54% {
		height: var(--ripple-start-h);
		opacity: 0;
		width: var(--ripple-start-w);
	}

	55% {
		height: var(--ripple-start-h);
		opacity: 0.68;
		width: var(--ripple-start-w);
	}

	75% {
		height: var(--ripple-end-h);
		opacity: 0.14;
		width: var(--ripple-end-w);
	}

	100% {
		opacity: 0;
	}
}

/* ╭───────────────────────────────╮ */
/* │          BREAKPOINTS          │ */
/* ╰───────────────────────────────╯ */

@media (max-width: 1199px) {
	.header-inner,
	main, .footer-content {
		max-width: 1000px;
		max-width: 90vw;
	}

	.content-flex {
		flex-direction: column;
		flex: auto auto;
	}

	.admin img, .mod img {
		max-width: 120px;
	}

	.theme-box {
		max-width: 100%;
	}

	.theme-icon img {
		max-width: 120px;
	}

	.theme-info h1 {
		margin: -1rem 0;
	}
	
	.theme-info br {
		display: none;
	}

	.theme-info p {
		background-color: rgba(255, 255, 255, 0.15);
		border-radius: 1rem;
		padding: 1.25rem 1rem;
		box-sizing: border-box;
	}
 }

@media (max-width: 1099px) {
	.intro-text {
		line-height: 100%;
	}
	.join-box p {
    margin: 1rem 0;
	}
 }

@media (max-width: 999px) {
	.intro-text {
		line-height: 90%;
		font-size: 1.4rem;
	}
	.admin-box, .mod-box h1 {
		font-size: 1.8rem;
	}
	.team-box h1 {
		font-size: 1.6rem;
	}
	.team-box li {
		font-size: 1.5rem;
	}
	.content-join {
		width: 100%;
	}
 }

@media (max-width: 899px) {
	.intro {
		height: 220px;
	}
	.intro-text {
		font-size: 1.3rem;
		line-height: 80%;
		padding: 0.5rem 1rem;
	}
	.intro-text h1 {
		margin: 0 0 1rem 1.5rem;
		font-size: 2rem;
	}
	.intro-cta {
		margin-top: 0.5rem;
	}
	.intro-cta .ripple-btn {
		font-size: 1.25rem;
		padding: 0.5rem 0.75rem 0.25rem 0.75rem;
	}
	p {
		margin: 0.5rem 0 1rem 0;
	}
	.admin-box, .mod-box {
		gap: 0.5rem;
	}
	.credits-box {
		width: 90%;
	}
	.team-box {
		flex-wrap: wrap;
		max-width: 700px;
		align-items: normal;
	}
	.admin img, .mod img {
		max-width: 100px;
	}
	.theme-icon img {
		max-width: 100px;
	}
	.theme-icon p {
		padding: 0.5rem;
	}
	.theme-info p {
		padding: 1rem;
	}
	.footer-content a {
		font-size: 1rem;
	}
	.join-box h1 {
		font-size: 1.5rem;
	}
 }

@media (max-width: 767px) {
	.header-inner .ripple-btn {
		display: none !important;
	}

	.theme-info br {
		display: none;
	}

		.about-box {
			flex-direction: column;
		}

		.about-img {
			flex-basis: auto;
			width: min(370px, 100%);
		}

		.about-img-fixed {
			aspect-ratio: 37 / 25;
			flex-basis: auto;
			height: auto;
			margin-bottom: 1.25rem;
			width: min(370px, 100%);
		}

		.about-modal-trigger {
			height: auto !important;
			width: min(370px, 100%) !important;
		}

		.about-img-right {
			order: -1;
		}
	.content-join {
		width: 90%;
		gap: 0;
	}
	.contact-field-grid {
		grid-template-columns: 1fr;
	}
	.contact-actions {
		justify-content: stretch;
	}
	.contact-submit {
		width: 100%;
	}
	.join-cta {
		display: block;
		margin: 0 0 1rem 0;
	}
	discord-widget {
		display: none !important;
	}

}

@media (max-width: 697px) {
	.content-flex {
		flex-direction: column;
	}
	.content-box {
		border-left: 6px solid rgba(255, 255, 255, 0.15);
		border-radius: 10px;
		padding: 0 0 0 10px;
		display: flex;
		gap: 1rem;
	}
	.content-box div:first-child {
		flex: 1;
	}
	.content-box div:last-child {
		flex: 2;
	}
	.content-box h1 {
		text-align: left;
	}
	.intro {
		position: relative;
		overflow: hidden;
	}
	.intro::before {
		content: "";
		position: absolute;
		inset: 0;
				background:
				linear-gradient(rgba(255,255,255,0.78), rgba(255,255,255,0.78)),
				url("/img/gallery_index.webp");
		background-size: cover;
		background-position: center;
		opacity: 0.5;
		z-index: -1;
	}
	.intro-text {
		height: 200px;
	}
	.photostack {
		display: none;
	}
	.admin-box, .mod-box {
		flex-wrap: wrap;
		width: 500px;
		gap: 2rem 0.5rem;
		justify-content: center;
		align-items: normal;
	}
	.admin p, .mod p {
		width: 150px;
		font-size: 1.5rem;
	}
	.theme-icon .more-link {
		font-size: 0.8rem;
	}
	.theme-info p {
		padding: 0.75rem;
	}
 }

@media (max-width: 599px) {
	.header-inner {
		min-height: auto;
		flex-wrap: wrap;
		max-width: 100%;
	}
	.brand {
		gap: 0;
	}
	.site-icon {
		height: 1.4rem;
		transform: translateY(-0.25em);
	}
	.site-name, a.site-name:link, a.site-name:visited {
		font-size: 2.5rem;
	}

	.menu-toggle {
		display: inline-flex;
	}

	.header-inner .menu {
		background: var(--color-accent-dk);
		display: grid;
		grid-template-rows: 0fr;
		margin: 0;
		opacity: 0;
		overflow: hidden;
		padding: 0;
		pointer-events: none;
		transform: translateY(-6px);
		transition:
			grid-template-rows 360ms cubic-bezier(0.2, 0.9, 0.2, 1),
			padding 360ms cubic-bezier(0.2, 0.9, 0.2, 1),
			opacity 180ms ease,
			transform 360ms cubic-bezier(0.2, 0.9, 0.2, 1);
		width: 100%;
		justify-content: center;
	}

	.header-inner .menu-panel {
		display: grid;
		gap: 0.35rem;
		justify-content: center;
		min-height: 0;
		overflow: hidden;
	}

	.header-inner.is-menu-open .menu {
		grid-template-rows: 1fr;
		opacity: 1;
		padding: 0.5rem;
		pointer-events: auto;
		transform: translateY(0);
	}

	.header-inner.is-menu-open .menu-group,
	.header-inner.is-menu-closing .menu-group {
		width: 100%;
		flex-direction: column;
	}

	.header-inner.is-menu-open .menu-group::after,
	.header-inner.is-menu-closing .menu-group::after {
		display: none;
	}

	.header-inner.is-menu-open .menu-trigger,
	.header-inner.is-menu-closing .menu-trigger {
		font-weight: 700;
		font-size: 1.4rem;
		background: transparent;
		padding: 0;
		display: none;
	}

	.menu-chevron-hb {		
		display: none;
	}

		.header-inner.is-menu-open .submenu,
		.header-inner.is-menu-closing .submenu {
			background: transparent;
			display: flex;
			flex-wrap: wrap;
			gap: 0;
			justify-content: center;
			position: static;
			padding: 0;
			width: 100%;
		}

	.header-inner.is-menu-open .submenu a,
	.header-inner.is-menu-closing .submenu a {
		align-items: center;
		display: inline-flex;
		padding: 0.25rem 0.25rem;
		color: var(--color-nav);
		font-size: 1.4rem;
		text-transform: none;
	}

	.header-inner.is-menu-open .submenu a:not(:last-child)::after,
	.header-inner.is-menu-closing .submenu a:not(:last-child)::after {
		content: "•";
		color: var(--color-accent-lt);
		margin-left: 0.5rem;
	}

	.header-inner.is-menu-open .menu-chevron,
	.header-inner.is-menu-closing .menu-chevron {
		display: none;
	}

	.header-inner.is-menu-open .menu-chevron-hb,
	.header-inner.is-menu-closing .menu-chevron-hb {
		display: none;
	}

	.header-inner.is-menu-open .gallery-link-hb,
	.header-inner.is-menu-closing .gallery-link-hb {
		display: inline-flex !important;
		justify-self: center;
		margin: 0 0 0.5rem 0;
		padding: 0.4rem 0.4rem 0.25rem 0.4rem;
		font-size: 1.5rem;
	}

	.site-menu.flex.menu, .site-menu.flex.submenu {
		width: 100%;
	}
	
	.intro {
		margin: 0.5rem 0 1.5rem 0;
	}

	.content-flex {
		gap: 0.5rem;
	}

	.content-box {
		border: 0;
		padding: 0 0 0 10px;
		display:contents;
		gap: 1rem;
	}

	.content-box div:first-child {
		flex: 1;
	}

	.content-box div:last-child {
		flex: 2;
	}

	.admin-box, .mod-box {
		margin-bottom: 1rem;
		width: 100%;
		gap: 1.8rem;
	}
	.admin-box img, .mod-box img {
		width: 100px;
	}
	.admin h1, .mod h1 {
		font-size: 1.5rem;
	}
	.admin p, .mod p {
		width: 100px;
		font-size: 1.25rem;
	}	
	.credits-box {
		flex-direction: column;
		margin-bottom: 1.5rem;
	}
	.theme-icon {
		display: none;
	}

	.theme-info h1 {		
		margin-left: 0.5rem;
	}

	.theme-info p {
		background-color: transparent;
		border-radius: 1rem;
		padding: 1.25rem 1rem;
		box-sizing: border-box;
	}

	.theme-info p {
		position: relative;
		padding: 1.25rem 1rem 0.5rem 1rem;
	}

	.theme-info p::before {
		content: "";
		position: absolute;
		inset: 0;
		opacity: 0.15;
		z-index: -1;
		border-radius: 1rem;
		box-sizing: border-box;
	}

	.theme-01 p::before {
		background:
		linear-gradient(rgba(255,255,255,0.75), rgba(255,255,255,0.75)),
			url("/img/theme_18th.png") center/cover,
		#fff;
	}

	.theme-02 p::before {
		background:
		linear-gradient(rgba(255,255,255,0.75), rgba(255,255,255,0.75)),
			url("/img/theme_bwg.png") center/cover,
		#fff;
	}

	.theme-03 p::before {
		background:
		linear-gradient(rgba(255,255,255,0.75), rgba(255,255,255,0.75)),
			url("/img/theme_monet.png") center/cover,
		#fff;
	}

	.theme-04 p::before {
		background:
		linear-gradient(rgba(255,255,255,0.75), rgba(255,255,255,0.75)),
			url("/img/theme_nana.png") center/cover,
		#fff;
	}

	.theme-05 p::before {
		background:
		linear-gradient(rgba(255,255,255,0.75), rgba(255,255,255,0.75)),
			url("/img/theme_ot8.png") center/cover,
		#fff;
	}

	.theme-06 p::before {
		background:
		linear-gradient(rgba(255,255,255,0.75), rgba(255,255,255,0.75)),
			url("/img/theme_w2e.png") center/cover,
		#fff;
	}

	.theme-07 p::before {
		background:
		linear-gradient(rgba(255,255,255,0.75), rgba(255,255,255,0.75)),
			url("/img/theme_general.png") center/cover,
		#fff;
	}

		.theme-curator-note {
			color: var(--color-accent-dk);
			display: block;
			font-size: 1rem;
			font-weight: 700;
			line-height: 1.05;
			padding: 0 0 0.65rem;
			text-align: left;
			text-transform: uppercase;
		}

		.theme-curator-note i {
			padding: 0 0.35rem 0 0;
		}

		.theme-archive-note {
			display: block;
			padding: 0.65rem 0 0;
			text-align: right;
		}

		.theme-archive-note a.more-link {
			float: none;
			margin: 0;
			color: var(--color-accent-md);
		}

	.footer-brand-li {
		display: none;
	}
 }

@media (min-width: 600px) {
	.menu-toggle,
	.menu-chevron-hb,
	.gallery-link-hb {
		display: none !important;
	}
}

@media (max-width: 480px) {	
	.theme-info h1 {
		font-size: 1.25rem;;
	}

	.about-img {
		text-align: center;
	}

	.about-img img {
		height: auto !important;
		width: 80% !important;
		margin: 0 auto;
	}

	.about-img-fixed img {
		height: 100% !important;
		width: 100% !important;
	}
 }

@media (max-width: 399px) {	
	.admin-box, .mod-box {
		gap: 0.5rem;
	}
	.admin-box img, .mod-box img {
		width: 80px;
	}
	.admin h1, .mod h1 {
		font-size: 1.5rem;
	}
	.admin p, .mod p {
		width: 90px;
		font-size: 1.25rem;
	}
 }


/* ╭───────────────────────────────╮ */
/* │         ACCESSIBILITY         │ */
/* ╰───────────────────────────────╯ */

@media (prefers-reduced-motion: reduce) {
	* {
		animation: none;
	}
}

@media (min-width: 768px) {
	.about-img-caption {
		font-size: 1rem;
	}

	.about-box .about-img-fixed {
		block-size: 250px !important;
		flex: 0 0 370px !important;
		inline-size: 370px !important;
		max-height: 250px !important;
		max-width: 370px !important;
		min-height: 250px !important;
		min-width: 370px !important;
		width: 370px !important;
	}

	.about-box .about-img-fixed > img.about-modal-trigger {
		aspect-ratio: 37 / 25 !important;
		flex: 0 0 auto !important;
		height: 100% !important;
		inline-size: 100% !important;
		max-height: 100% !important;
		max-width: 100% !important;
		min-height: 0 !important;
		min-width: 0 !important;
		width: 100% !important;
	}
}