:root {
	--c-black: #100F0F;
	--c-white: #fffefa;
	--c-paper: #FFFCF0;

	--c-gray-50: #F2F0E5;
	--c-gray-100: #E6E4D9;
	--c-gray-150: #DAD8CE;
	--c-gray-200: #CECDC3;
	--c-gray-300: #B7B5AC;
	--c-gray-400: #9F9D96;
	--c-gray-500: #878580;
	--c-gray-600: #6F6E69;
	--c-gray-700: #575653;
	--c-gray-800: #403E3C;
	--c-gray-850: #343331;
	--c-gray-900: #282726;
	--c-gray-950: #1C1B1A;

	--c-red-50: #FFE1D5;
	--c-red-100: #FFCABB;
	--c-red-150: #FDB2A2;
	--c-red-200: #F89A8A;
	--c-red-300: #E8705F;
	--c-red-400: #D14D41;
	--c-red-500: #C03E35;
	--c-red-600: #AF3029;
	--c-red-700: #942822;
	--c-red-800: #6C201C;
	--c-red-850: #551B18;
	--c-red-900: #3E1715;
	--c-red-950: #261312;

	--c-orange-50: #FFE7CE;
	--c-orange-100: #FED3AF;
	--c-orange-150: #FCC192;
	--c-orange-200: #F9AE77;
	--c-orange-300: #EC8B49;
	--c-orange-400: #DA702C;
	--c-orange-500: #CB6120;
	--c-orange-600: #BC5215;
	--c-orange-700: #9D4310;
	--c-orange-800: #71320D;
	--c-orange-850: #59290D;
	--c-orange-900: #40200D;
	--c-orange-950: #27180E;

	--c-yellow-50: #FAEEC6;
	--c-yellow-100: #F6E2A0;
	--c-yellow-150: #F1D67E;
	--c-yellow-200: #ECCB60;
	--c-yellow-300: #DFB431;
	--c-yellow-400: #D0A215;
	--c-yellow-500: #BE9207;
	--c-yellow-600: #AD8301;
	--c-yellow-700: #8E6B01;
	--c-yellow-800: #664D01;
	--c-yellow-850: #503D02;
	--c-yellow-900: #3A2D04;
	--c-yellow-950: #241E08;

	--c-green-50: #EDEECF;
	--c-green-100: #DDE2B2;
	--c-green-150: #CDD597;
	--c-green-200: #BEC97E;
	--c-green-300: #A0AF54;
	--c-green-400: #879A39;
	--c-green-500: #768D21;
	--c-green-600: #66800B;
	--c-green-700: #536907;
	--c-green-800: #3D4C07;
	--c-green-850: #313D07;
	--c-green-900: #252D09;
	--c-green-950: #1A1E0C;

	--c-cyan-50: #DDF1E4;
	--c-cyan-100: #BFE8D9;
	--c-cyan-150: #A2DECE;
	--c-cyan-200: #87D3C3;
	--c-cyan-300: #5ABDAC;
	--c-cyan-400: #3AA99F;
	--c-cyan-500: #2F968D;
	--c-cyan-600: #24837B;
	--c-cyan-700: #1C6C66;
	--c-cyan-800: #164F4A;
	--c-cyan-850: #143F3C;
	--c-cyan-900: #122F2C;
	--c-cyan-950: #101F1D;

	--c-blue-50: #E1ECEB;
	--c-blue-100: #C6DDE8;
	--c-blue-150: #ABCFE2;
	--c-blue-200: #92BFDB;
	--c-blue-300: #66A0C8;
	--c-blue-400: #4385BE;
	--c-blue-500: #3171B2;
	--c-blue-600: #205EA6;
	--c-blue-700: #1A4F8C;
	--c-blue-800: #163B66;
	--c-blue-850: #133051;
	--c-blue-900: #12253B;
	--c-blue-950: #101A24;

	--c-purple-50: #F0EAEC;
	--c-purple-100: #E2D9E9;
	--c-purple-150: #D3CAE6;
	--c-purple-200: #C4B9E0;
	--c-purple-300: #A699D0;
	--c-purple-400: #8B7EC8;
	--c-purple-500: #735EB5;
	--c-purple-600: #5E409D;
	--c-purple-700: #4F3685;
	--c-purple-800: #3C2A62;
	--c-purple-850: #31234E;
	--c-purple-900: #261C39;
	--c-purple-950: #1A1623;

	--c-magenta-50: #FEE4E5;
	--c-magenta-100: #FCCFDA;
	--c-magenta-150: #F9B9CF;
	--c-magenta-200: #F4A4C2;
	--c-magenta-300: #E47DA8;
	--c-magenta-400: #CE5D97;
	--c-magenta-500: #B74583;
	--c-magenta-600: #A02F6F;
	--c-magenta-700: #87285E;
	--c-magenta-800: #641F46;
	--c-magenta-850: #4F1B39;
	--c-magenta-900: #39172B;
	--c-magenta-950: #24131D;

	--rad-1: 0.0625rem;
	--rad-2: 0.125rem;
	--rad-3: 0.1875rem;
	--rad-5: 0.3125rem;
	--rad-8: 0.5rem;
	--rad-13: 0.8125rem;
	--rad-21: 1.3125rem;
	--rad-34: 2.125rem;
	--rad-full: 100vw;
}

html {
	font-size: 100%;
}

body,
input {
	font-family: "Lexend", sans-serif;
	font-optical-sizing: auto;
	font-size: 1em;
	line-height: 1.25;
	font-weight: 375;
	color: var(--c-black);
}

body {
	margin: 0;
	background: var(--c-white);
}

* {
	transition:
		color 0.1s ease-in-out,
		border 0.2s ease-in-out,
		outline 0.1s ease-in-out,
		background 0.2s ease-in-out;
}

:focus {
	outline: none;
}

:focus-visible {
	outline: 0.1875rem solid var(--c-yellow-300);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	line-height: 1.25;
	margin: 1em 0 0.5em;
}

h1 {
	font-size: calc(1.25em + 2vw);
	font-weight: 450;
	line-height: 1.0625;
	letter-spacing: -1%;
}

h2 {
	font-size: calc(1.125em + 1vw);
	font-weight: 475;
	line-height: 1.125;
}

h3 {
	font-size: calc(1.0625em + 0.5vw);
	font-weight: 500;
}

h4 {
	font-size: calc(1em + 0.25vw);
	font-weight: 525;
	letter-spacing: 1%;
}

h5 {
	font-size: 1em;
	font-weight: 550;
	letter-spacing: 2%;
}

h6 {
	font-size: 0.75em;
	font-weight: 650;
	text-transform: uppercase;
	letter-spacing: 3%;
}

p,
ul,
ol {
	font-family: "Crimson Text", serif;
	font-size: calc(1.125em + 0.5vw);
	font-weight: 400;
	line-height: 1.25;
	margin: 0 0 1.25em;
}

ul,
ol {
	padding: 0 0 0 1.5em;
}

ul p,
ol p {
	font-size: inherit;
}

small,
.small {
	font-size: 0.875em;
}

strong {
	font-weight: 600;
}

hr {
	height: 0.0625rem;
	background: rgba(0, 0, 0, 0.2);
	border: none;
	margin: 2em 0;
}

.material-symbols-sharp {
	font-size: 1.25em;
	display: inline-block;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	direction: ltr;
	vertical-align: bottom;
}

/* ——————————— */
/* Interaction */
/* ——————————— */

a,
a:link,
a:visited {
	color: var(--c-blue-500);
	border-radius: var(--rad-2);
}

a:hover {
	color: var(--c-blue-400);
}

a:active {
	color: var(--c-blue-200);
}

a.solid {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	text-decoration: none;
	padding: 0.375em 0.625em;
	border-radius: var(--rad-8);
	color: var(--c-cyan-500);
	background: var(--c-white);
}

a.button {
	display: inline-flex;
	align-items: center;
	gap: 0.75em;
	font-size: 1.25rem;
	font-weight: 425;
	border: 0.1875rem solid var(--c-black);
	border-radius: var(--rad-13);
	color: var(--c-black);
	outline-offset: 0.1875rem;
}

a.solid.active,
a.solid.disabled,
a.button.disabled {
	cursor: default;
	pointer-events: none;
}

a.solid:hover,
a.solid:active,
a.solid.active {
	color: var(--c-white);
	background: var(--c-cyan-400);
}

a.button:hover,
a.button:active {
	color: var(--c-white);
	background: var(--c-black);
}

a.solid.disabled {
	color: var(--c-gray-400);
}

a.solid .icon,
a.button .icon {
	display: inline-flex;
}

a.solid .icon {
	width: 1.5em;
	height: 1.5em;
	margin: -0.375em;
}

a.button .icon {
	width: 2em;
	height: 2em;
	margin: -0.625em;
}

button {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	border: none;
	cursor: pointer;
}

button.icon {
	aspect-ratio: 1 / 1;
	padding: 0.25rem;
	background: var(--c-white);
	border-radius: var(--rad-8);
}

/* ————— */
/* Forms */
/* ————— */

::-webkit-input-placeholder {
	color: var(--c-gray-400);
}

::-moz-placeholder {
	color: var(--c-gray-400);
}

:-ms-input-placeholder {
	color: var(--c-gray-400);
}

::-ms-input-placeholder {
	color: var(--c-gray-400);
}

::placeholder {
	color: var(--c-gray-400);
}

input {
	max-width: 100%;
	padding: 0.25em 0.5em;
	background: var(--c-white);
	border: 0.125rem solid var(--c-gray-300);
	border-radius: var(--rad-8);
}

input:hover {
	border-color: var(--c-black);
}

input:focus-visible {
	outline-offset: 0.125rem;
}

/* ————— */
/* Utils */
/* ————— */

.hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.align-center {
	text-align: center;
	text-wrap: balance;
}

/* —————— */
/* Layout */
/* —————— */

main,
body > header,
body > footer {
	box-sizing: border-box;
	width: 100%;
	max-width: 82em;
	margin: 0 auto;
}

main {
	padding: 0 1.25em;
}

body > footer {
	padding: 2.5em calc(1.25em + 1.25vw);
	text-align: center;
}

/* —————— */
/* Header */
/* —————— */

#header {
	position: -webkit-sticky;
	position: sticky;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em 1em;
	top: 0;
	z-index: 2;
	padding: 1em 1em 1em 11em;
}

#logo {
	position: absolute;
	text-decoration: none;
	top: -1.25em;
	left: 0.25em;
	width: 10em;
	height: 10em;
	transform: rotate(-15deg);
	border-radius: var(--rad-full);
}

#logo:focus-visible {
	outline-offset: 0.125rem;
}

#logo svg {
	width: 100%;
	height: auto;
}

/* ———— */
/* Menu */
/* ———— */

#menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25em;
	margin-right: auto;
}

#search {
	max-width: 100%;
}

#menu-toggle {
	display: none;
	margin: -0.5rem;
}

#menu-toggle:hover {
	background: var(--c-yellow-50);
}

#menu-toggle[aria-expanded="true"] {
	color: var(--c-yellow-600);
}

#menu-toggle svg {
	width: 2.5rem;
	height: 2.5rem;
	margin-top: -0.125rem;
}

#menu-toggle[aria-expanded="false"] #menu-toggle-open,
#menu-toggle[aria-expanded="true"] #menu-toggle-closed {
	visibility: hidden;
}

#menu-toggle[aria-expanded="true"] #menu-toggle-open,
#menu-toggle[aria-expanded="false"] #menu-toggle-closed {
	visibility: visible;
}

@media (max-width: 560px) {
	#header {
		flex-direction: row-reverse;
		align-items: flex-start;
		gap: 0.75em 1em;
		padding: 1em;
	}

	#header::after {
		content: "";
		position: absolute;
		display: block;
		right: 0;
		bottom: 5.25em;
		left: 0;
		height: 100%;
		z-index: -1;
		background: var(--c-white);
	}

	#logo {
		top: auto;
		bottom: -3.5em;
		width: 8.5em;
		height: 8.5em;
	}
	
	#menu,
	#search {
		display: none;
	}

	#search,
	#search input {
		width: 100%;
	}

	#menu.expanded {
		display: flex;
		flex: 1;
		margin: 0;
	}

	#search.expanded {
		display: block;
		margin-bottom: 4.25em;
	}

	#menu-toggle {
		display: inline-block;
	}

}

/* ——————— */
/* Rainbow */
/* ——————— */

.rainbow a:nth-of-type(8n+1) {
	color: var(--c-magenta-600);
}

.rainbow a:nth-of-type(8n+1):hover,
.rainbow a:nth-of-type(8n+1):active,
.rainbow a.active:nth-of-type(8n+1) {
	color: var(--c-white);
	background: var(--c-magenta-500);
}

.rainbow a:nth-of-type(8n+2) {
	color: var(--c-blue-600);
}

.rainbow a:nth-of-type(8n+2):hover,
.rainbow a:nth-of-type(8n+2):active,
.rainbow a.active:nth-of-type(8n+2) {
	color: var(--c-white);
	background: var(--c-blue-500);
}

.rainbow a:nth-of-type(8n+3) {
	color: var(--c-green-600);
}

.rainbow a:nth-of-type(8n+3):hover,
.rainbow a:nth-of-type(8n+3):active,
.rainbow a.active:nth-of-type(8n+3) {
	color: var(--c-white);
	background: var(--c-green-500);
}

.rainbow a:nth-of-type(8n+4) {
	color: var(--c-orange-600);
}

.rainbow a:nth-of-type(8n+4):hover,
.rainbow a:nth-of-type(8n+4):active,
.rainbow a.active:nth-of-type(8n+4) {
	color: var(--c-white);
	background: var(--c-orange-500);
}

.rainbow a:nth-of-type(8n+5) {
	color: var(--c-purple-600);
}

.rainbow a:nth-of-type(8n+5):hover,
.rainbow a:nth-of-type(8n+5):active,
.rainbow a.active:nth-of-type(8n+5) {
	color: var(--c-white);
	background: var(--c-purple-500);
}

.rainbow a:nth-of-type(8n+6) {
	color: var(--c-cyan-600);
}

.rainbow a:nth-of-type(8n+6):hover,
.rainbow a:nth-of-type(8n+6):active,
.rainbow a.active:nth-of-type(8n+6) {
	color: var(--c-white);
	background: var(--c-cyan-500);
}

.rainbow a:nth-of-type(8n+7) {
	color: var(--c-yellow-600);
}

.rainbow a:nth-of-type(8n+7):hover,
.rainbow a:nth-of-type(8n+7):active,
.rainbow a.active:nth-of-type(8n+7) {
	color: var(--c-white);
	background: var(--c-yellow-500);
}

.rainbow a:nth-of-type(8n+8) {
	color: var(--c-red-600);
}

.rainbow a:nth-of-type(8n+8):hover,
.rainbow a:nth-of-type(8n+8):active,
.rainbow a.active:nth-of-type(8n+8) {
	color: var(--c-white);
	background: var(--c-red-500);
}

/* ————————— */
/* Postcards */
/* ————————— */

.postcards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
	gap: 2em;
	width: 100%;
}

a.postcard {
	box-sizing: border-box;
	text-decoration: none;
	position: relative;
	display: flex;
	align-items: flex-end;
	aspect-ratio: 2 / 3;
	max-width: 35em;
	overflow: hidden;
	color: var(--c-white);
	border-radius: var(--rad-13);
	box-shadow:
		inset 0 0 0 0.0625rem rgba(0, 0, 0, 0.04),
		0.0625rem 0.0625rem 0 0 var(--c-gray-200),
		0.125rem 0.078125rem 0 0 var(--c-gray-200),
		0.078125rem 0.125rem 0 0 var(--c-gray-200),
		0 0 0 0 rgba(0, 0, 0, 1);
	transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.postcard:hover {
	transform: translate(-0.25em, -0.5em);
	box-shadow:
		inset 0 0 0 0.0625rem rgba(0, 0, 0, 0.04),
		0.0625rem 0.0625rem 0 0 var(--c-gray-200),
		0.125rem 0.078125rem 0 0 var(--c-gray-200),
		0.078125rem 0.125rem 0 0 var(--c-gray-200),
		0.25em 0.5em 0.5em 0 rgba(0, 0, 0, 0.4);
}

.postcard img {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}

.postcard .title {
	font-size: calc(1.25em);
	font-weight: 425;
	text-align: center;
	text-wrap: balance;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	width: 100%;
	min-height: 33%;
	padding: 0 1rem 1.5rem;
	margin: 0;
	background: linear-gradient(
		0deg,
		rgba(0, 0, 0, 0.5) 0%,
		rgba(0, 0, 0, 0) 100%);
}

@media (max-width: 1124px) {
	.postcard .title {
		font-size: calc(0.875em + 0.375vw);
	}
}

@media (max-width: 845px) {
	.postcard .title {
		font-size: calc(0.75em + 1vw);
	}
}

@media (max-width: 566px) {
	.postcard .title {
		font-size: calc(0.625em + 3vw);
	}
}

/* ———————————— */
/* Post Content */
/* ———————————— */

#post {
	width: 100%;
	max-width: 40em;
	margin: 4em auto;
}

#post header {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}

#post header:not(#author) {
	gap: 1em;
	margin-bottom: 2em;
}

#post img {
	width: 100%;
	height: auto;
	margin: 0;
	border-radius: var(--rad-2);
}

#post header h1 {
	text-wrap: balance;
}

article#post header h1 {
	margin-bottom: 0;
}

#post header *:not(.avatar) img {
	margin: 2em 0;
}

#post footer {
	display: flex;
	justify-content: center;
	gap: 1em;
	margin: 2em 0;
}

.avatar {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	aspect-ratio: 1 / 1;
	width: 100%;
	max-width: 12em;
	overflow: hidden;
	border-radius: var(--rad-full);
}

.avatar img {
	position: absolute;
	z-index: -1;
	margin: 0;
	-o-object-fit: cover;
	   object-fit: cover;
}

#tags {
	font-size: 1.125em;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

@media (max-width: 560px) {
	#post img {
		width: calc(100% + 1.25em);
		margin: 0 -0.625em
	}
}

/* ————————— */
/* Feed Page */
/* ————————— */

#feed {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2.5em;
	padding: 0 1.25vw;
	margin-top: 1.25em;
}

#feed footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.25em;
}

#intro {
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 1em;
	width: 100%;
	max-width: 40em;
	margin-top: 4em;
}

#intro > * {
	text-wrap: balance;
  	margin: 0;
}