/** ================================================================ **\
  * ================================================================ *
  * Reset
  * ================================================================ *
\** ================================================================ **/

abbr, address, article, aside, audio, b, blockquote, body, canvas, caption, cite, code, dd, del, details, dfn, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, p, pre, q, samp, section, small, span, strong, sub, sup, summary, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
	background: transparent;
	border: 0;
	font-size: 100%;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}

body { line-height: 1; }

	html { font-size: 62.50%; }

/** ================================================================ **\
  * ================================================================ *
 * Colors
  * ================================================================ *
\** ================================================================ **/

:root {
	/** #Main **/
	--indigo--light: 			#d2cef3;
	--indigo--light--hover:		#bfb9ee;
	--indigo--light--active:	#aca5e9;
	--indigo:					#281e78;
	--indigo--hover:			#1e165a;
	--indigo--active:			#161041;
	--indigo--dark: 			#1e165a;
	--indigo--dark--hover:		#171145;
	--indigo--dark--active:		#100c31;
	--indigo--darker: 			#140f3d;
	/** #Accent **/
	--cyber--light: 			#fff9e0;
	--cyber--light--hover:		#fff4c7;
	--cyber--light--active:		#ffeFad;
	--cyber:					#ffd100;
	--cyber--hover:				#dbb400;
	--cyber--active:			#b89600;
	--cyber--dark: 				#c7a300;
	--cyber--dark--hover:		#a88a00;
	--cyber--dark--active:		#8a7100;
	/** #Monochrome **/
	--white: 					#ffffff;
	--white--hover:				#f8f8f6;
	--white--active:			#ecece8;
	--oatmeal--light: 			#f8f8f6;
	--oatmeal--light--hover:	#ecece8;
	--oatmeal--light--active:	#e1e1db;
	--oatmeal:					#f3f3f1;
	--oatmeal--hover:			#e5e5e0;
	--oatmeal--active:			#d7d7d1;
	--oatmeal--dark: 			#eeeeeb;
	--raisin--light: 			#686558;
	--raisin--light--hover:		#57544a;
	--raisin--light--active:	#49473f;
	--raisin:					#2e2d28;
	--raisin--hover:			#1e1d1a;
	--raisin--active:			#0e0e0c;
	--black:					#000000;
}


/** ================================================================ **\
  * ================================================================ *
 * Mobile
  * ================================================================ *
\** ================================================================ **/

/** ================================================================ **\
  * General [320px and up]
\** ================================================================ **/
:root { color-scheme: normal; }

::selection {
	background: var(--cyber);
}

html {
	height: 100%;
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body {
	background-color: var(--oatmeal--light);
	color: var(--raisin);
	margin: 0;
	min-height: 100%;
	padding: 0;
}

@supports (display: grid) and (grid-template-rows: 1fr) {
	body {
		display: grid;
		grid-template-rows: 1fr auto;
	}
}

a,
a:link,
a:visited {
	border-bottom: .2rem solid var(--raisin);
	color: var(--raisin);
	padding-bottom: 0;
	text-decoration: none;
	transition: all .2s ease-out;
}

a:focus,
a:hover,
a:active {
	border-color: var(--cyber);
	color: var(--indigo);
	padding-bottom: .2rem;
}

.svg__icon {
	vertical-align: middle;
	margin: 0 0 .2rem .4rem;
 }

.svg__icon--dark path { fill: var(--raisin); }

.svg__icon--light path { fill: var(--white); }

#tales-ebner { content: initial; }

	.wrapper { content: initial; }

		.header--page {
			background-color: var(--white);
			box-sizing: border-box;
			box-shadow: 0 -.8rem 0 0 var(--cyber) inset;
		}

			.header__title { content: initial; }

			.header__title--main {
				background: url(https://talesebner.com/images/logo.svg) no-repeat scroll 1.6rem 2rem / 19.2rem 3.2rem transparent;
				height: 8.4rem;
				margin: 0 auto;
				max-width: 76.8rem;
				overflow: hidden;
				padding: 0;
				text-indent: 100%;
				white-space: nowrap;
				width: 100vw;
			}

		.main {
			background: no-repeat scroll center center / cover transparent;
			background-image: url(https://talesebner.com/images/hero-mobile.png);
			background-image: image-set(
				url(https://talesebner.com/images/hero-mobile.webp),
				url(https://talesebner.com/images/hero-mobile.png)
			);
			box-shadow: 0 .05rem 0 0 var(--indigo--light) inset;
			margin: 0 auto;
			padding: 2.4rem 1.6rem;
		}

			.section { content: initial; }

			.main__section {
				margin: 0 auto;
				max-width: 72rem;
			}

				.article { content: initial; }

				.section__article {
					-webkit-backdrop-filter: blur(16px);
							backdrop-filter: blur(16px);
					background-color: rgba(255, 255, 255, .4);
					border-radius: 2rem;
					box-shadow: 0 0 0 .05rem var(--indigo--light) inset;
					display: block;
					margin: 0 0 0 auto;
					max-width: 42.8rem;
					padding: 3.4rem 1.6rem 1.6rem;
					text-align: right;
				}

				@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
					.section__article { background-color: rgba(255, 255, 255, .92); }
				}

				.section__article--card { content: initial; }

					.header { content: initial; }

					.article__header { content: initial; }

						.title { content: initial; }

						.header__title { content: initial; }

						.header__title--secondary {
							color: var(--indigo);
							font: 900 3.2rem / 3.6rem 'Roboto Slab', sans-serif;
						}

							.header__title--small {
								color: var(--raisin);
								display: inline-block;
								margin-top: .8rem;
								font-weight: 400;
							}

					.paragraph { content: initial; }

					.main .article__paragraph {
						font: 400 1.6rem / 2.4rem 'Roboto', sans-serif;
						margin: 2.1rem 0 1.7rem;
					}

					.list { content: initial; }

					.article__list { content: initial; }

						.item { content: initial; }

						.main .list__item {
							box-sizing: border-box;
							display: inline-block;
							margin: .8rem 0 0 1.2rem;
							position: relative;
						}

						.main .list__item:first-child {
							margin-left: 0;
						}

							.anchor { content: initial; }

							.item__anchor { content: initial; }

							.item__anchor--button,
							.item__anchor--button:link,
							.item__anchor--button:visited,
							.item__anchor--button:focus,
							.item__anchor--button:hover,
							.item__anchor--button:active {
								outline: 0 transparent;
							}

							.item__anchor--button,
							.item__anchor--button:link,
							.item__anchor--button:visited {
								background-color: var(--indigo);
								border-radius: .8rem;
								color: var(--white);
								display: inline-block;
								font: 400 1.6rem / 2rem 'Roboto', sans-serif;
								padding: 1.2rem 1.6rem;
								border: 0 none;
							}

							.item__anchor--button:focus {
								box-shadow: 0 0 0 .4rem var(--cyber);
							}

							.item__anchor--button:focus,
							.item__anchor--button:hover {
								background-color: var(--indigo--dark);
							}

							.item__anchor--button:active {
								background-color: var(--indigo--darker);
							}

								.item__anchor--button::after,
								.item__anchor--button:link::after,
								.item__anchor--button:visited::after {
									border: .2rem dotted transparent;
									border-radius: 1.2rem;
									bottom: -.8rem;
									content: '';
									display: block;
									left: -.8rem;
									position: absolute;
									right: -.8rem;
									top: -.8rem;
									transition: all .2s ease-out;
								}

								.item__anchor--button:focus::after,
								.item__anchor--button:hover::after,
								.item__anchor--button:active::after {
									border-color: var(--indigo);
									bottom: -.4rem;
									left: -.4rem;
									right: -.4rem;
									top: -.4rem;
								}

								.item__anchor.item__anchor--button:focus .svg__icon path,
								.item__anchor.item__anchor--button:hover .svg__icon path,
								.item__anchor.item__anchor--button:active .svg__icon path {
									fill: var(--white);
								}

		.description {
			font: 400 1.6rem / 2.4rem 'Roboto', sans-serif;
			margin: 4.3rem auto 5.5rem;
			max-width: 76.8rem;
		}

			.paragraph { content: initial; }

			.description__paragraph { margin: 0 1.6rem 2rem; }

			.description__paragraph:last-child { margin-bottom: 0; }

	.footer {
		box-sizing: border-box;
		font: 600 1.2rem / 1.6rem 'Roboto Slab', sans-serif;
		margin: 0 auto;
		max-width: 76.8rem;
		padding: 1.3rem 1.6rem 1.7rem;
		width: 100vw;
	}

	@supports (grid-row-start: initial) and (grid-row-end: initial) {
		.footer {
			grid-row-end: 3;
			grid-row-start: 2;
		}
	}

		.address { content: initial; }

			.list { content: initial; }

			.address__list { content: initial; }

				.item { content: initial; }

				.address .list__item {
					box-sizing: border-box;
					display: inline-block;
					margin: 0 1.6rem 1.2rem 0;
					position: relative;
				}

				.address .list__item:last-child { margin-right: 0; }

					.anchor,
					.anchor:link,
					.anchor:visited {
						font-weight: 600;
						outline: .2rem transparent dotted;
						outline-offset: .8rem;
					}

					.anchor:focus,
					.anchor:hover,
					.anchor:active {
						outline-color: var(--indigo);
						outline-offset: .2rem;
					}

					.anchor:focus .svg__icon path,
					.anchor:hover .svg__icon path,
					.anchor:active .svg__icon path {
						fill: var(--indigo);
					}

					.item__anchor { content: initial; }

		.text {
			color: var(--raisin--light);
			font-weight: 400;
		}

		.footer__text {
			display: inline-block;
			height: 2rem;
			margin-top: .4rem;
		}

		.footer__text--pronunciation { content: initial; }

			.icon { content: initial; }

			.pronunciation__icon { content: initial; }

			.pronunciation__icon--play,
			.pronunciation__icon--play:link,
			.pronunciation__icon--play:visited,
			.pronunciation__icon--play[aria-pressed="false"] {
				background: transparent;
				border: 0 none;
				border-radius: 2.4rem;
				box-sizing: border-box;
				cursor: pointer;
				float: right;
				height: 2.4rem;
				margin: -.2rem 0 0 .8rem;
				padding: .4rem 0 0 0;
				position: relative;
				text-align: center;
				text-decoration: none;
				width: 2.4rem;
			}

			.pronunciation__icon--play:focus-visible { outline: none; }

			.pronunciation__icon--play:focus,
			.pronunciation__icon--play:hover,
			.pronunciation__icon--play:active,
			.pronunciation__icon--play[aria-pressed="true"] {
				background-color: var(--cyber);
				outline: none;
			}

				.pronunciation__icon--play::after,
				.pronunciation__icon--play:link::after,
				.pronunciation__icon--play:visited::after,
				.pronunciation__icon--play[aria-pressed="false"]::after {
					border: .2rem dotted transparent;
					border-radius: 4rem;
					bottom: -.4rem;
					content: '';
					display: block;
					left: -.4rem;
					position: absolute;
					right: -.4rem;
					top: -.4rem;
					transition: all .2s ease-out;
				}

				.pronunciation__icon--play:focus::after,
				.pronunciation__icon--play:hover::after,
				.pronunciation__icon--play:active::after,
				.pronunciation__icon--play[aria-pressed="true"]::after {
					border-color: var(--indigo);
					bottom: 0;
					left: 0;
					right: 0;
					top: 0;
				}

		.footer__text--copyright { float: right; }

		.footer__text--copyright::after {
			background: url(https://talesebner.com/images/symbol.svg) no-repeat scroll center right / 1.6rem 1.6rem transparent;
			content: '';
			right: 0;
			height: 1.6rem;
			margin: 0;
			padding: 0 0 0 2.8rem;
			vertical-align: middle;
			width: 1.6rem;
		}


/** ================================================================ **\
  * Smartphones [375px and up]
\** ================================================================ **/
@media only screen and (min-width: 375px) {
			.header__title--main {
				background-position-y: 1.6rem;
				background-size: 24rem 4.2rem;
			}
						.header__title--secondary,
						.header__title--small {
							font-size: 4rem;
							line-height: 4.4rem;
						}

							.header__title--small { margin-top: .8rem; }

					.main .article__paragraph { margin-top: 2rem; }

				.section__article { padding-top: 3.5rem; }
		.description {
			font-size: 2rem;
			line-height: 2.8rem;
		}
}


/** ================================================================ **\
  * Accessibility
\** ================================================================ **/
.visually-hidden:not(:focus):not(:active) {
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.tabindex:focus { outline: none; }

.skip {
	box-sizing: border-box;
	margin: 0 auto;
	max-width: 76.8rem;
	position: relative;
	width: 100vw;
}

	.skip .screen-reader--focusable,
	.skip .screen-reader--focusable:link,
	.skip .screen-reader--focusable:visited {
		font: 600 1.6rem / 2rem 'Roboto Slab', sans-serif;
		opacity: 0;
		position: absolute;
	}

	.skip .screen-reader--focusable:focus,
	.skip .screen-reader--focusable:hover,
	.skip .screen-reader--focusable:active {
		background-color: var(--white);
		box-shadow: 0 0 0 0.8rem var(--white);
		display: inline-block;
		left: 2.4rem;
		opacity: 100%;
		outline: .2rem var(--indigo) dotted;
		outline-offset: .2rem;
		padding: 0 .4rem .2rem;
		position: absolute;
		top: 8.4rem;
		transition: .2s opacity ease-in;
		z-index: 100;
	}