* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

/*** GHOST-SPECIFIC STYLES ***/
/* (Also anything else with .kg- or .gh-) */

.kg-width-full img,
.kg-width-wide img {
    /* required by gcsan to properly validate the theme */
}


/*** END GHOST-SPECIFIC STYLES ***/

html {
	background: black;
	/* Apple overscroll... */
	min-height: 100vh;
	/* TODO: Android/Chrome URL bar blank space... not sure it helps though */
}

body {
	background: linear-gradient(135deg, rgb(55 55 55) 0%, rgb(0 0 0) 50%, rgb(0 0 0) 55%, rgb(45 45 45) 100%) no-repeat;
	background-attachment: fixed; /* doesn't work on iOS Safari -- see @supports hack at the bottom to disable the gradient :( */
	background-size: 100% 100vh;
	/* TODO: attempting to fix URL bar blank space bug on Android/Firefox... */
	color: #dadada;
	position: relative;
	/* so footer stays at the bottom */
	padding: 40px 150px 20vw;
	z-index: 0;
	overflow-x: hidden;

	font-family: Newsreader, system-ui;
	font-size: 16px;
	line-height: 1.3;
}

.kintsugi-seam {
	z-index: -1;
}

p,
ul,
ol,
h3 {
	max-width: 800px;
	margin: 1.5em auto;
}

p,
ul,
ol {
	line-height: 1.5;
	font-family: Newsreader;
	font-size: 20px;
}

ul,
ol {
	padding-left: 2em;
}

p a,
h1 a,
h2 a,
h3 a,
ul a,
ol a {
	color: #f4e583;
	padding: 5px 3px;
}

p a:hover,
h1 a:hover,
h2 a:hover,
h3 a:hover,
ul a:hover,
ol a:hover {
	/* color: #ffd600; */
	background: #f4e583;
	color: black;
	text-decoration: none;
	border-radius: 8px 20px;
}

figcaption p {
	margin: 10px 0;
	font-size: 16px;
	text-align: center;
	max-width: none;
}

.center {
	margin-left: auto;
	margin-right: auto;
	justify-content: center;
}

#top-left-corner {
	position: absolute;
	width: 500px;
	top: -35px;
	left: -10px;
}

.obfuscated {
	display: none;
}

header nav,
h1,
h2,
h3,
.button,
.menu,
footer {
	font-family: Poppins;
}

header nav {
	display: flex;
	gap: 2em;
	align-items: center;
	justify-content: flex-end;
}

.menu {
	display: none;
	user-select: none;
	cursor: pointer;
	padding: .5em;
}

.icon {
	vertical-align: middle;
}

.wrapper {
	max-width: 1200px;
	margin: 0 auto;
}

main {
	margin: 25px auto 100px;
}

.logo-container {
	flex: 1;
	width: 100%;
	max-width: 300px;
}

h1 {
	font-family: Corinthia;
	font-weight: normal;
	font-size: 72px;
	color: #ddd;
	line-height: 1.25;
	text-align: center;
	flex: 1;
	margin-top: 20px;
}

h2 {
	text-align: center;
	font-size: 48px;
}

article h2 {
	margin: 2em 0 1em;
}

article section h2 {
	margin-top: 0;
	text-align: left;
}

h3 {
	font-size: 24px;
}

#footerbg {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: url(/assets/images/bottom.svg) no-repeat;
	background-position: left -15vw bottom -12vw;
	background-size: 120%;
}

header nav a,
.menu,
.primary,
.secondary {
	color: rgb(255 239 157);
	text-decoration: none;
	transition:
		transform .15s,
		box-shadow .15s,
		text-shadow .15s,
		border-color .15s;
}

header nav a:hover,
.menu:hover,
.primary:hover,
.secondary:hover {
	transform: scale(1.08);
	color: rgb(255 245 199);
	text-shadow: 0 0 10px gold;
}

header nav a:active {
	transform: scale(0.96);
}

header nav .dropdown-container {
	position: relative;
	display: block;
}

header nav .dropdown {
	position: absolute;
	max-width: 225px;
	box-shadow: 0 0 50px -5px #4f4f4f;
	background: rgba(0, 0, 0, .4);
	border-radius: 5px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	z-index: 1;
	overflow: hidden;
	visibility: hidden;
	transition: all .2s;
	top: 110%;
	opacity: 0;
	left: -1.25em;
	transform: scale(0.75) translateY(-1em);
}

.dropdown a {
	display: block;
	padding: 1em 1.5em;
	min-width: 150px;
	font-size: 90%;
	border-top: 1px solid #2d2b16;
}

.dropdown a:first-child {
	border-top: none;
}

.dropdown-container:hover .dropdown {
	visibility: visible;
	opacity: 1;
	transform: scale(1) translateY(0em);
}

header nav .button,
.primary,
.secondary {
	display: flex;
	flex-direction: column;
	border-radius: 5px;
	justify-content: center;
}

.primary {
	background: linear-gradient(135deg, rgb(255 223 71) 0%, rgb(250 242 204) 50%, rgb(246 212 51) 100%);
	color: #333;
	padding: .75rem 1.25rem;
	font-size: 95%;
	font-weight: 600;
	text-decoration: none;
}

.primary:hover {
	transform: scale(1.08);
	box-shadow: 0 0 25px -4px #ffec8a;
}

.primary:hover .button-text {
	background: #000 -webkit-gradient(linear, 100% 0, 0 0, from(#000000), color-stop(0.5, #ffffff), to(#ffd12e));
	background-position: -4rem top;
	background-repeat: no-repeat;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation-name: shimmer;
	animation-duration: 1.5s;
	animation-iteration-count: infinite;
	background-size: 4rem 100%;
}

.primary:active {
	transform: scale(0.95);
	box-shadow: 0 0 50px -4px #ffec8a;
}

.secondary {
	border: 1px solid rgb(116 109 74);
	padding: 0.3rem .75rem;
}

.secondary .title {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #9e997e;
	transition: .25s;
}

.secondary:hover {
	border-color: #d8c873;
	box-shadow: 0 0 40px #8f8231;
}

.secondary:hover .title {
	color: white;
}

.secondary:active {
	transform: scale(0.95);
	box-shadow: 0 0 25px #8f8231;
}

.button-container {
	display: flex;
	gap: 2em;
	margin: 2em auto;
}

main header {
	display: flex;
	align-items: center;
	gap: 2em;
}

@keyframes shimmer {
	0% {
		background-position: -4rem top;
	}

	50% {
		background-position: 12.5rem top;
	}

	100% {
		background-position: 12.5rem top;
	}
}

.shimmer-container {
	display: block;
	position: relative;
	width: 100%;
}

.shimmer-cover {
	background: linear-gradient(125deg, rgba(255, 222, 115, 1) 30%, rgba(255, 248, 221, 1) 50%, rgba(255, 222, 115, 1) 70%);
	background-size: 90%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	-webkit-mask: url(/assets/images/logo-white.svg);
	mask: url(/assets/images/logo-white.svg);
	transition: background-position .5s;
}

.shimmer-cover:hover {
	background-position: 1800% center;
}


@keyframes logoShimmerLoop {
	0% {
		background-position: 0 center;
	}

	20% {
		background-position: 1800% center;
	}

	50% {
		background-position: 1800% center;
	}

	70% {
		background-position: 0 center;
	}

	100% {
		background-position: 0 center;
	}
}

img,
video {
	border-radius: 10px;
	width: auto; /* necessary to combat ghost's width attributes, which like to stretch the image even on "regular" width setting */
	max-width: 100%;
	max-height: 450px;
	margin-left: auto;
	margin-right: auto;
	display: block;
}

/*
Ghost does weird stuff with video embeds; I cannot for the life of me understand why the video
container has a padding-bottom of, say, 56.36%, to push their custom controls to the bottom...
so we rework some of the annoying absolute positioning and cause the video embeds to honor size
preferences, so they're the same size as images, rather than 100% width, and this way they also
honor the max-height of images set above.
*/
.kg-width-regular.kg-video-card {
	text-align: center;
}
.kg-width-regular .kg-video-container {
	overflow: visible;
	height: auto;
	width: auto;
	display: inline-block;
	padding-bottom: 0 !important;
}
.kg-width-regular .kg-video-container video {
	position: initial;
	width: auto;
    height: auto;
    object-fit: initial;
}
.kg-width-regular .kg-video-player-container {
	bottom: 0px; /* is -1 otherwise for some reason?? */
}

/* Make Ghost's feature images of pages actually full size */
figure.gh-article-image img {
	width: 100%;
	object-fit: cover;
}

video {
	border: 2px solid #40403c;
	box-shadow: 0 0 100px -10px #535353;
	cursor: pointer;
}

.cover {
	width: 100%;
	object-fit: cover;
}

.cover.expanded {
	max-height: none;
}

/* .video-container {
	position: relative;
	cursor: pointer;
}

.video-container .play {
	position: absolute;
	margin: auto auto;
	top: 2vw;
	left: 2vw;
	width: 100%;
	max-width: 120px;
	opacity: 0;
	transition: opacity .4s;
}

.video-container:hover .play {
	opacity: 1;
} */

section img {
	max-height: 400px;
}

article,
.content {
	margin-top: 50px;
}

article section {
	/* modern clearfix! */
	/* display: flow-root; */

	display: flex;
	gap: 3em;
	align-items: center;
	margin: 5em auto;
}

/* classic clearfix!
article section:after {
	content: '';
	display: block;
	clear: both;
} */

section.vertical {
	flex-direction: column;
}

article>img,
article>video,
article>figure>img {
	margin-top: 3em;
	margin-bottom: 3em;
}

article section p {
	/* margin: 0; */
	flex: 1;
}

footer {
	text-align: center;
	color: #999;
}

@media (max-width: 1200px) {
	header {
		margin-top: 1em;
	}

	h1 {
		line-height: 1;
	}
}

@media (max-width: 1000px) {
	body {
		padding-left: 50px;
		padding-right: 50px;
	}

	header {
		text-align: right;
		position: relative;
	}

	.menu {
		display: inline-block;
	}

	header nav {
		margin-left: auto;
		margin-top: .5em;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 90%;
		max-width: 225px;
		box-shadow: 0 0 50px -5px #4f4f4f;
		background: rgba(0, 0, 0, .4);
		border-radius: 10px;
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		overflow: hidden;
		position: absolute;
		right: 0;
		z-index: 1;

		visibility: hidden;
		transition: all .2s;
		top: 100%;
		left: 0;
		opacity: 0;
		transform: scale(0.75) translateY(-100px);
	}

	header nav.shown {
		visibility: visible;
		opacity: 1;
		transform: scale(1) translateY(0em);
	}

	header nav a {
		text-align: center;
		padding: 1.25em;
		border-top: 1px solid #2d2b16;
	}

	header nav a:first-child {
		border-top: none;
	}

	header nav .button {
		margin: .5em 1em 1em;
	}

	header nav a:not(.button):hover {
		background: rgba(0, 0, 0, .2);
	}

	.shimmer-cover {
		animation: logoShimmerLoop 4s infinite;
	}

	main header {
		flex-direction: column;
		align-items: center;
	}

	article section {
		flex-direction: column;
	}

	.video-container .play {
		opacity: 1;
	}

}

@media (max-width: 700px) {
	h1 {
		font-size: 60px !important;
		word-wrap: break-word;
	}

	h2 {
		font-size: 40px;
	}

	.button-container {
		gap: .5em;
	}
}

/* iOS Safari doesn't support `background-attachment: fixed` so it looks super dumb !!! */
@supports (-webkit-touch-callout: inherit) {
	body {
		background: black;
	}
}