/** ================================================================ **\
  * ================================================================ *
  * 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;
}

.item__anchor--external::after,
.item__anchor--external:link::after,
.item__anchor--external:visited::after {
	background: url(../images/external-link.svg) no-repeat scroll center center / 1.6rem 1.6rem transparent;
	content: '';
	display: inline-block;
	height: 1.6rem;
	margin-left: .4rem;
	vertical-align: middle;
	width: 1.6rem;
}

.item__anchor--external:focus::after,
.item__anchor--external:hover::after,
.item__anchor--external:active::after {
	background-image: url(../images/external-link-hover.svg);
}

.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 {
				color: var(--indigo);
				font: 900 4rem / 3.6rem 'Roboto Slab', sans-serif;
			}

			.header__subtitle {
				color: var(--raisin--light);
				display: block;
				font: 400 2rem / 2.8rem 'Roboto Slab', sans-serif;
			}

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

			.header__subtitle--main {
				margin: 0 auto;
				max-width: 72rem;
				padding: 0 1.6rem 1.6rem;
			}

		.main { content: initial; }

			.hero {
				background: no-repeat scroll center center / cover transparent;
				background-image: url(../images/hero-mobile.png);
				background-image: image-set(
					url(../images/hero-mobile.webp),
					url(../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 {
								font-size: 4rem;
								line-height: 4.4rem;
							}

							.header__subtitle--secondary { content: initial; }

								.header__title--secondary + .description__list,
								.header__subtitle--secondary + .description__list,
								.header__title--secondary + .description__paragraph,
								.header__subtitle--secondary + .description__paragraph { margin-top: 2.4rem; }

							.header__title--tertiary {
								color: var(--raisin);
								font-weight: 400;
								font-size: 2.8rem;
								line-height: 3.2rem;
								padding-top: 2.4rem;
							}

								.header__title--tertiary + .description__list,
								.header__subtitle--tertiary + .description__list,
								.header__title--tertiary + .description__paragraph,
								.header__subtitle--tertiary + .description__paragraph,
								.header__title--tertiary + .manifest__stanza,
								.header__subtitle--tertiary + .manifest__stanza { margin-top: 1.6rem; }

								.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: 2rem 0 1.6rem;
						}

						.list { content: initial; }

						.action__list { content: initial; }

							.item { content: initial; }

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

							.action__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.item__anchor--external,
								.item__anchor--button.item__anchor--external:link,
								.item__anchor--button.item__anchor--external:visited {
									padding-right: 1.2rem;
								}

								.item__anchor--button.item__anchor--external::after,
								.item__anchor--button.item__anchor--external:link::after,
								.item__anchor--button.item__anchor--external:visited::after,
								.item__anchor--button.item__anchor--external:focus::after,
								.item__anchor--button.item__anchor--external:hover::after,
								.item__anchor--button.item__anchor--external:active::after {
									background-image: url(../images/external-link-button.svg);
									margin-left: .8rem;
								}

									.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 2rem / 2.8rem 'Roboto', sans-serif;
				margin: 2.4rem auto 4.8rem;
				max-width: 72rem;
				padding: 0 1.6rem;
			}

				.paragraph { content: initial; }

				.description__paragraph { margin-bottom: 2.4rem; }

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

				.description__paragraph:has(+ .description__list) { margin-bottom: .8rem; }

				.list { content: initial; }

				.description__list { margin-bottom: 2.4rem; }

					.item { content: initial; }

					.list__item { margin: 0 0 .8rem 1.6rem; }

					.list__item:last-child { margin-bottom: 2.4rem; }

				.manifest { content: initial; }

					.stanza { content: initial; }

					.manifest__stanza { margin-bottom: 1.6rem; }

					.manifest__stanza--sestet { content: initial; }
					
					.manifest__stanza--quintain { content: initial; }
					
					.manifest__stanza--quatrain { content: initial; }
					
					.manifest__stanza--tercet { content: initial; }

					.manifest__stanza--couplet { content: initial; }

						.line { content: initial; }

						.stanza__line { display: block; }

	.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: 100%;
	}

	@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(../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 (max-width: 374px) {
			.header__title--main {
				background-position-y: 1.6rem;
				background-size: 19.2rem 3.2rem;
			}

						.header__title--secondary,
						.header__title--small {
							font-size: 3.2rem;
							line-height: 3.6rem;
						}

						.header__title--tertiary {
							font-size: 2.4rem;
							line-height: 2.8rem;
						}

				.section__article { padding-top: 3.6rem; }
}


/** ================================================================ **\
  * 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: 72rem;
	position: relative;
}

	.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;
	}