/* 
Theme Name: Morenpress
Text Domain: Morenpress
Version: 1.0
Description: 2024 Design Refresh for Dan Moren's Website
Tags: dan-moren, author, podcaster
Author: Ste Grainer
Author URI: https://stegrainer.com
*/

*, *::before, *::after {
	box-sizing: border-box;
}

html {
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	height: 100%;
	width: 100%;
}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
	margin-block-start: 0;
	margin-block-end: 0;
}

ul[role='list'], ol[role='list'] {
	list-style: none;
}

body {
	min-height: 100vh;
	line-height: 1.5;
}

h1, h2, h3, h4, button, input, label {
	line-height: 1.1;
}

/* h1, h2, h3, h4 {
	text-wrap: balance;
} */

a:not([class]) {
	text-decoration-skip-ink: auto;
}

img, picture, figure {
	display: block;
	height: auto;
	margin: 0;
	max-width: 100%;
}

/* Inherit fonts for inputs and buttons */
input, button, textarea, select {
	font: inherit;
}

textarea:not([rows]) {
	min-height: 6em;
}

/* ==========================================================================
	CSS VARIABLES
========================================================================== */

:root {
	--dm-t-body: system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
	--dm-t-accent: "Montserrat", "Avenir Next", "Helvetica Neue", sans-serif;
	--dm-t-quote: "Besley", "Garamond", Georgia, serif;
	--dm-lh-tight: 1;
	--dm-lh-comfy: 1.25;
	--dm-lh-loose: 1.5;
	
	--dm-c-primary: hsla(123,38%,46%,1);
	--dm-c-accent: hsla(207,76%,56%,1);
	--dm-c-neutral-dark-grey: hsla(240,6%,21%,1);
	--dm-c-neutral-med-grey: hsla(240,3%,35%,1);
	--dm-c-neutral-mod-grey: hsla(240,2%,48%,1);
	--dm-c-neutral-light-grey: hsla(240,6%,81%,1);
	--dm-c-neutral-lighter-grey: hsla(240,10%,88%,1);
	--dm-c-neutral-off-white: hsla(240,27%,96%,1);
	--dm-c-neutral-white-100: hsla(0,0%,100%,1);
	--dm-c-neutral-black-100: hsla(0,0%,0%,1);
	--dm-c-neutral-white-75: hsla(0,0%,100%,0.75);
	--dm-c-neutral-black-75: hsla(0,0%,0%,0.75);
	--dm-c-neutral-white-50: hsla(0,0%,100%,0.5);
	--dm-c-neutral-black-50: hsla(0,0%,0%,0.5);
	--dm-c-neutral-white-25: hsla(0,0%,100%,0.25);
	--dm-c-neutral-black-25: hsla(0,0%,0%,0.25);
	--dm-c-neutral-white-10: hsla(0,0%,100%,0.1);
	--dm-c-neutral-black-10: hsla(0,0%,0%,0.1);
	--dm-c-neutral-white-0: hsla(0,0%,100%,0);
	--dm-c-neutral-black-0: hsla(0,0%,0%,0);
	
	--dm-c-body: var(--dm-c-neutral-white-100);
	--dm-c-text: var(--dm-c-neutral-dark-grey);
	--dm-c-bg-offset: var(--dm-c-neutral-black-10);
	--dm-c-reverse: var(--dm-c-neutral-black-100);
	--dm-c-action-reverse: var(--dm-c-neutral-white-100);
	--dm-c-link: var(--dm-c-accent);
	--dm-c-link-hover: var(--dm-c-neutral-dark-grey);
	--dm-c-link-visited: color-mix(in oklab, var(--dm-c-link) 67%, var(--dm-c-neutral-black-100) 33%);
	--dm-c-link-active: var(--dm-c-neutral-black-100);
	--dm-c-button-bg: var(--dm-c-primary);
	--dm-c-button-outline: var(--dm-c-neutral-black-25);
	--dm-c-selected: var(--dm-c-primary);
	--dm-c-bg-nav: var(--dm-c-primary);
	--dm-c-bg-hero: var(--dm-c-neutral-black-10);
	--dm-c-bg-subtle: var(--dm-c-neutral-black-10);
	--dm-c-bg-contrast: var(--dm-c-neutral-black-25);
	--dm-c-bg-shade: var(--dm-c-neutral-black-10);
	--dm-c-bg-darken: var(--dm-c-neutral-black-25);
	--dm-c-bg-tint: var(--dm-c-neutral-white-10);
	--dm-c-bg-lighten: var(--dm-c-neutral-white-25);
	
	--dm-g-subtle: linear-gradient(0deg, var(--dm-c-bg-shade) 0%, var(--dm-c-bg-tint) 100%);
	--dm-g-lighten: linear-gradient(0deg, var(--dm-c-neutral-white-0) 0%, var(--dm-c-neutral-white-25) 100%);
	--dm-g-darken: linear-gradient(0deg, var(--dm-c-neutral-black-0) 0%, var(--dm-c-neutral-black-25) 100%);
	--dm-g-dark: linear-gradient(0deg, var(--dm-c-neutral-dark-grey) 0%, var(--dm-c-neutral-med-grey) 100%);
	
	--dm-header-slant: 1px 1px 0 var(--dm-c-primary), 2px 2px 0 var(--dm-c-primary), 3px 3px 0 var(--dm-c-primary), 4px 4px 0 var(--dm-c-primary)/*, 5px 5px 0 var(--dm-c-primary), 6px 6px 0 var(--dm-c-primary) */;
	--dm-header-slant-hover: 1px 1px 0 var(--dm-c-primary), 2px 2px 0 var(--dm-c-primary), 3px 3px 0 var(--dm-c-primary), 4px 4px 0 var(--dm-c-primary), 5px 5px 0 var(--dm-c-primary), 6px 6px 0 var(--dm-c-primary), 7px 7px 0 var(--dm-c-primary) /*, 8px 8px 0 var(--dm-c-primary), 9px 9px 0 var(--dm-c-primary) */;
	--dm-nav-slant: 1px 1px 0 var(--dm-c-neutral-black-100), 2px 2px 0 var(--dm-c-neutral-black-100), 3px 3px 0 var(--dm-c-neutral-black-100);
	
	--dm-font-size-tiny: clamp(0.64rem, calc(0.58rem + 0.28vw), 0.80rem);
	--dm-font-size-small: clamp(0.80rem, calc(0.73rem + 0.35vw), 1.00rem);
	--dm-font-size-body: clamp(1.00rem, calc(0.91rem + 0.43vw), 1.25rem);
	--dm-font-size-h6: clamp(1.25rem, calc(1.14rem + 0.54vw), 1.56rem);
	--dm-font-size-h5: clamp(1.56rem, calc(1.43rem + 0.68vw), 1.95rem);
	--dm-font-size-h4: clamp(1.95rem, calc(1.78rem + 0.85vw), 2.44rem);
	--dm-font-size-h3: clamp(2.44rem, calc(2.23rem + 1.06vw), 3.05rem);
	--dm-font-size-h2: clamp(3.05rem, calc(2.79rem + 1.33vw), 3.82rem);
	--dm-font-size-h1: clamp(3.82rem, calc(3.48rem + 1.66vw), 4.77rem);
	
	--dm-space-4xl: clamp(4.81rem, calc(4.40rem + 2.07vw), 6.00rem); /* 96px */
	--dm-space-3xl: clamp(3.63rem, calc(3.32rem + 1.52vw), 4.50rem); /* 72px */
	--dm-space-2xl: clamp(2.38rem, calc(2.16rem + 1.09vw), 3.00rem); /* 48px */
	--dm-space-xl: clamp(1.63rem, calc(1.49rem + 0.65vw), 2.00rem); /* 32px */
	--dm-space-l: clamp(1.19rem, calc(1.08rem + 0.54vw), 1.50rem); /* 24px */
	--dm-space-xm: clamp(1.00rem, calc(0.91rem + 0.43vw), 1.25rem); /* 20px */
	--dm-space-m: clamp(0.81rem, calc(0.75rem + 0.33vw), 1.00rem); /* 16px */
	--dm-space-s: clamp(0.63rem, calc(0.58rem + 0.22vw), 0.75rem); /* 12px */
	--dm-space-xs: clamp(0.38rem, calc(0.33rem + 0.22vw), 0.50rem); /* 8px */
	--dm-space-2xs: clamp(0.19rem, calc(0.17rem + 0.11vw), 0.25rem); /* 4px */
	--dm-space-3xs: clamp(0.13rem, calc(0.13rem + 0.00vw), 0.13rem); /* 2px */
	--dm-space-single: 1px;
	--dm-space-none: 0;

	--dm-radius-circle: 50%;
	--dm-radius-lg: var(--dm-space-m);
	--dm-radius-md: var(--dm-space-xs);
	--dm-radius-md-left: var(--dm-space-xs) 0 0 var(--dm-space-xs);
	--dm-radius-md-right: 0 var(--dm-space-xs) var(--dm-space-xs) 0;
	--dm-radius-sm: var(--dm-space-2xs);
	--dm-radius-sm-left: var(--dm-space-2xs) 0 0 var(--dm-space-2xs);
	--dm-radius-sm-right: 0 var(--dm-space-2xs) var(--dm-space-2xs) 0;
	--dm-radius-none: 0;

	--dm-border-thick: var(--dm-space-2xs);
	--dm-border-med: var(--dm-space-3xs);
	--dm-border-thin: var(--dm-space-single);
	--dm-border-none: 0;

	--dm-opacity-100: 1;
	--dm-opacity-75: 0.75;
	--dm-opacity-50: 0.5;
	--dm-opacity-25: 0.25;
	--dm-opacity-0: 0;
}

/* ==========================================================================
	GENERAL
========================================================================== */

body {
	background: var(--dm-c-body);
	color: var(--dm-c-text);
	font-family: var(--dm-t-body);
	font-size: var(--dm-font-size-body);
	height: 100%;
	line-height: var(--dm-lh-loose);
	margin: 0;
	padding: 0;
	width: 100%;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--dm-t-accent);
	font-weight: 700;
	line-height: var(--dm-lh-tight);
	margin: 0 0 var(--dm-space-l);
}

h1, h2, h3 {
	font-weight: 900;
	letter-spacing: -1px;
}

p, main ol, main ul, figure {
	margin: 0 0 var(--dm-space-l);
}
blockquote {
	margin-bottom: var(--dm-space-l);
}
main ol, main ul {
	margin-left: var(--dm-space-xl);
	padding-left: 0;
}
h1 {
	font-size: var(--dm-font-size-h1);
}

h2 {
	font-size: var(--dm-font-size-h2);
}

h3 {
	font-size: var(--dm-font-size-h3);
}

h4 {
	font-size: var(--dm-font-size-h4);
}

h5 {
	font-size: var(--dm-font-size-h5);
}

h6 {
	font-size: var(--dm-font-size-h6);
}

blockquote {
	font-style: italic;
	position: relative;
}

blockquote::before {
	color: var(--dm-c-bg-contrast);
	content: '\275D';
	display: block;
	font-size: var(--dm-font-size-h5);
	left: calc(-1 * var(--dm-space-2xl));
	position: absolute;
	top: 0;
}

blockquote cite {
	display: block;
	font-size: var(--dm-font-size-body);
	font-style: normal;
}
blockquote cite::before {
	content: '\2014 \2009';
	display: inline-block;
}

blockquote.blurb {
	font-family: var(--dm-t-quote);
	font-weight: 400;
}

p.subtitle {
	font-size: var(--dm-font-size-h5);
}
p.intro {
	font-size: var(--dm-font-size-h6);
}
p.eyebrow {
	margin-bottom: 0;
	text-transform: uppercase;
}
.mute, figcaption, .wprss-feed-meta {
	font-family: var(--dm-t-body);
	font-size: 0.875em;
	font-weight: 300;
	opacity: 0.75;
}

a {
	color: var(--dm-c-link);
	transition: all 0.25s ease-in-out;
}

a:visited {
	color: var(--dm-c-link-visited);
	text-decoration-color: var(--dm-c-neutral-black-25);
}

a:hover, a:focus {
	color: var(--dm-c-link-hover);
	text-decoration-thickness: 0.2rem;
}

a:active {
	color: var(--dm-c-link-active);
	position: relative;
	top: var(--dm-space-single);
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	text-decoration-thickness: 0.0625rem;
}

.screen-reader-text {
	clip: rect(1px,1px,1px,1px);
	word-wrap: normal!important;
	border: 0;
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

hr {
	border: none;
	border-top: var(--dm-space-3xs) solid var(--dm-c-bg-shade);
	border-bottom: var(--dm-space-3xs) solid var(--dm-c-bg-tint);
	margin: 0;
	padding: 0;
}

.entry-content table {
	border-bottom: var(--dm-space-single) solid var(--dm-c-bg-contrast);
	margin-bottom: var(--dm-space-3xl);
	width: 100%;
}
.entry-content table tr {
	display: grid;
	margin: var(--dm-space-s) 0;
}
.entry-content thead tr {
	border-bottom: var(--dm-space-single) solid var(--dm-c-bg-contrast);
	margin: 0;
}
.entry-content thead th {
	text-align: left;
}
.entry-content table p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
	Form Fields
========================================================================== */

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="search"], textarea, select {
	-webkit-appearance: none;
	-webkit-border-radius: 0;
	border: none;
	border-radius: 0;
	box-shadow: inset 0 0 0 var(--dm-space-single) var(--dm-c-button-outline);
	color: var(--dm-c-neutral-dark-grey);
	display: block;
	margin: 0 0 var(--dm-space-l) 0;
	padding: var(--dm-space-xs);
	width: 100%;
}
input:has(+ .under-label), select:has(+ .under-label),
textarea:has(+ .under-label) {
	margin-bottom: 0;
}
label:has(> input[type="checkbox"]) {
	margin-bottom: var(--dm-space-l);
}


label {
	display: block;
}
.under-label {
	display: block;
	margin: var(--dm-space-3xs) 0 var(--dm-space-l);
}

.required {
	color: #c00;
	font-weight: bold;
}

div.wpforms-container-full .wpforms-form input.wpforms-field-medium,
div.wpforms-container-full .wpforms-form select.wpforms-field-medium,
div.wpforms-container-full .wpforms-form .wpforms-field-row.wpforms-field-medium {
	max-width: 100%;
}

/* ==========================================================================
	Layout
========================================================================== */

.page {
	display: grid;
	grid-template-rows: auto 1fr auto;
	min-height: 100%;
}

.hero {
	background: var(--dm-c-bg-hero);
	padding: var(--dm-space-xl) 0;
}
.hero :last-child {
	margin-bottom: 0;
}
.hero h5 {
	margin-bottom: 0;
}

.wrap {
	margin: 0 auto;
	max-width: 72rem;
	padding: var(--dm-space-l) 0;
	width: 90%;
}
.wrap.narrow {
	max-width: 48rem;
}

.notepad {
	background: var(--dm-c-bg-offset);
	border: 1px solid var(--dm-c-bg-offset);
	padding: var(--dm-space-m);
}

.columns, .book-grid {
	display: grid;
	gap: var(--dm-space-l);
}
.columns.tight {
	gap: 0;
}

.shop-list, .link-list, .media-list, .post-list, .buy-list, .series-list,
.book-meta .buy ul, .episode-list, .wp-block-categories-list {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}
.shop-list .button, .link-list .button {
	display: block;
	margin-right: 0;
}
div.post-list {
	margin-bottom: var(--dm-space-l);
}

.link-list img {
	margin-bottom: var(--dm-space-s);
}
.link-list h6 {
	margin-bottom: var(--dm-space-xs);
}

.media-list {
	display: grid;
	gap: var(--dm-space-l);
}
.wpra-item-list {
	margin: 0;
	padding: 0;
}
.media-list .wpra-item-list a {
	word-wrap: break-word;
}
.media-list a img, .series-list a img, .episode-list a img, .book-tease a img {
	display: block;
	margin-bottom: var(--dm-space-m);
	transition: all 0.25s ease-in-out;
}
.media-list a:hover img, .media-list a:focus img,
.series-list a:hover img, .series-list a:focus img,
.episode-list a:hover img, .episode-list a:focus img,
.book-tease a:hover img, .book-tease a:focus img {
	transform: scale(1.02) translateY(calc(-1 * var(--dm-space-2xs)));
	box-shadow: 0 var(--dm-space-xs) 0 -4px var(--dm-c-bg-darken);
}
.media-list a:active img, .series-list a:active img,
.episode-list a:active img, .book-tease a:active img {
	transform: scale(1) translateY(0);
}
.media-list h6, .series-list h4, .series-list p:last-child {
	margin-bottom: 0;
}
.media-list h6 a {
	text-decoration: none;
}
.media-list p:last-child {
	margin-bottom: 0;
}
.media-list .mute {
	display: block;
}

.post-list li, .wp-block-categories-list li {
	border-bottom: var(--dm-space-single) solid var(--dm-c-bg-offset);
	padding: var(--dm-space-2xs) 0;
}
.post-list li a, .wp-block-categories-list li a {
	display: block;
}

.buy-list {
	margin-bottom: 0;
}
.buy-list .button {
	margin-bottom: var(--dm-space-s);
}
.buy-list li {
	display: inline-block;
}

.series-list figure {
	grid-row: 1 / span 2;
	margin-bottom: 0;
}
.series-list > li {
	margin-bottom: var(--dm-space-l);
}
.book-meta .buy ul {
	margin-bottom: 0;
}
.book-meta .buy li {
	display: inline-block;
	margin: 0 var(--dm-space-xs) var(--dm-space-2xs) 0;
}

.episode-list .columns {
	gap: var(--dm-space-s);
}
.episode-list figure {
	margin-bottom: 0;
}
.episode-list div a {
	display: block;
}

article {
	margin-bottom: var(--dm-space-3xl);
}
article h4 {
	margin-bottom: var(--dm-space-2xs);
}
article .post-meta {
	margin-bottom: var(--dm-space-xl);
}
article .post-meta div {
	display: inline;
}

article h2, article h3 {
	font-size: var(--dm-font-size-h5);
}
.alignright {
	float: right;
	margin: 0 0 var(--dm-space-l) var(--dm-space-l);
}
.alignleft {
	float: left;
	margin: 0 var(--dm-space-l) var(--dm-space-l) 0;
}

.social {
	display: grid;
	gap: var(--dm-space-l);
	grid-template-columns: repeat(auto-fit, minmax(1rem,1fr));
	list-style: none;
	margin: 0 0 var(--dm-space-l);
	padding: 0;
	text-align: center;
}
.social a {
	display: block;
}
.social svg {
	height: auto;
	transition: all 0.25s ease-in-out;
	width: var(--dm-space-xl);
}
.social svg > path {
	fill: var(--dm-c-button-bg);
}
.social a:hover svg, .social a:focus svg {
	transform: scale(1.1) translateY(calc(-1 * var(--dm-space-2xs)));
}
.social a:hover svg > path, .social a:focus svg > path {
	fill: var(--dm-c-link-hover);
}
.social a:active svg {
	transform: scale(1) translateY(0);
}
.social a:active svg > path {
	fill: var(--dm-c-link-active);
}

.book-tease {
	margin-bottom: var(--dm-space-xl);
}

.book-tease h5 {
	margin-bottom: 0;
}

.breadcrumb {
	font-size: var(--dm-font-size-small);
}

.book-grid {
	grid-template-columns: 1fr 3fr;
	grid-template-rows: auto auto 1fr;
}
.book-grid > header  {
	grid-area: title;
}
.book-grid h2 {
	margin-bottom: 0;
}
.book-grid > figure {
	grid-area: cover;
	margin-bottom: 0;
}
.book-grid > .book-buy {
	grid-area: buy;
}
.book-grid > .book-details {
	grid-area: details;
}

.avatar img {
	border-radius: var(--dm-radius-circle);
}

/* ==========================================================================
	Header
========================================================================== */

header h1 {
	font-weight: 900;
	letter-spacing: -1px;
	margin: var(--dm-space-m);
	text-align: center;
	text-shadow: var(--dm-header-slant);
	text-transform: uppercase;
}
header h1 a {
	color: var(--dm-c-neutral-black-100);
	display: inline-block;
	text-decoration: none;
	transition: transform 0.15s ease-in, text-shadow 0.15s ease-in;
}
header h1 a:visited, header h1 a:hover, header h1 a:focus {
	color: var(--dm-c-neutral-black-100);
}
header h1 a:hover, header h1 a:focus {
	color: var(--dm-c-neutral-black-100);
	text-shadow: var(--dm-header-slant-hover);
	transform: translate(-3px, -3px);
}

header nav ul.main {
	background: var(--dm-c-bg-nav);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8rem,1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}
header nav ul.main a {
	background: linear-gradient(0deg, var(--dm-c-bg-shade) 0%, var(--dm-c-bg-tint) 100%);
	border-left: var(--dm-border-thin) solid var(--dm-c-bg-lighten);
	border-right: var(--dm-border-thin) solid var(--dm-c-bg-darken);
	display: block;
	font-weight: bold;
	padding: var(--dm-space-s) var(--dm-space-m);
	text-align: center;
	text-decoration: none;
}
header nav ul.main a:hover, header nav ul.main a:focus {
	background: var(--dm-c-bg-shade);
	transition: background 0.25s ease-in-out;
}
header nav ul.main li.current-menu-item a {
	background: var(--dm-c-bg-darken);
}
header nav ul.main a span, header nav ul.main a span {
	color: var(--dm-c-neutral-white-100);
	display: inline-block;
	font-family: var(--dm-t-accent);
	font-weight: 700;
	text-shadow: 0 0 0 var(--dm-c-neutral-black-0);
	transition: all 0.25s ease-in-out;
}

header nav ul.main a:hover span, header nav ul.main a:focus span {
	color: var(--dm-c-neutral-white-100);
	text-shadow: var(--dm-nav-slant);
	transform: translate(-3px, -3px);
}

header nav ul.sub {
	border-top: var(--dm-space-3xs) solid var(--dm-c-body);
	display: block;
	list-style: none;
	margin: 0;
	padding: 0 var(--dm-space-xs);
}
header nav ul.sub li {
	display: inline-block;
}
header nav ul.sub a {
	background: var(--dm-c-bg-subtle);
	border-radius: var(--dm-space-xl);
	display: block;
	margin: var(--dm-space-xs) var(--dm-space-3xs);
	padding: var(--dm-space-xs) var(--dm-space-m);
	text-decoration: none;
}
header nav ul.sub li.current-menu-item a {
	background: var(--dm-c-button-bg);
	color: var(--dm-c-action-reverse);
}
header nav ul.sub a:hover, header nav ul.sub a:focus {
	background: var(--dm-c-bg-contrast);
}
header nav ul.sub li.current-menu-item a:hover, header nav ul.sub li.current-menu-item a:focus {
	background: color-mix(in oklab, var(--dm-c-primary) 90%, var(--dm-c-neutral-black-100) 10%);
}

/* ==========================================================================
	Footer
========================================================================== */

footer {
	background: var(--dm-c-bg-shade);
	border-top: var(--dm-border-thin) solid var(--dm-c-bg-darken);
	font-size: 80%;
}

footer .columns {
	margin: 0 auto;
	max-width: 72rem;
	padding: var(--dm-space-l) 0;
	width: 90%;
}

footer .columns > div > :last-child {
	margin-bottom: 0;
}

footer nav ul {
	columns: 2;
}
footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
}
footer input[type="email"], footer .button {
	margin: 0;
	padding: var(--dm-space-2xs) var(--dm-space-s);
}

/* ==========================================================================
	Buttons
========================================================================== */

.button, div.wpforms-container-full .wpforms-form button[type=submit] {
	border: none;
	border-radius: var(--dm-radius-sm);
	display: inline-block;
	font-weight: 600;
	margin: 0 var(--dm-space-s) var(--dm-space-s) 0;
	padding: var(--dm-space-xs) var(--dm-space-m);
	text-decoration: none;
	transition: all 0.25s ease-in-out;
}

a.button:hover, a.button:focus {
	transform: scale(1.02) translateY(calc(-1 * var(--dm-space-2xs)));
}
a.button:active {
	transform: scale(1) translateY(0);
}

.button.primary, div.wpforms-container-full .wpforms-form button[type=submit] {
	background: var(--dm-c-button-bg);
	color: var(--dm-c-action-reverse);
}
a.button.primary:hover, a.button.primary:focus {
	box-shadow: 0 var(--dm-space-xs) 0 -4px var(--dm-c-bg-darken);
}
a.button.primary:active {
	box-shadow: 0 0 0 0 var(--dm-c-bg-shade);
}
button.button.primary:hover, button.button.primary:focus,
input.button.primary:hover, input.button.primary:focus,
div.wpforms-container-full .wpforms-form button[type=submit]:hover,
div.wpforms-container-full .wpforms-form button[type=submit]:focus {
	background: var(--dm-c-neutral-black-100);
	color: var(--dm-c-neutral-white-100);
	cursor: pointer;
}

.button.secondary {
	border: var(--dm-border-med) solid var(--dm-c-button-outline);
}

.ml-button-horizontal .button, .button-append .button {
	border-radius: var(--dm-radius-none) var(--dm-radius-sm) var(--dm-radius-sm) var(--dm-radius-none);
}

.button-append {
	margin-bottom: var(--dm-space-l);
}
.notepad .button-append {
	margin-bottom: 0;
}
.button-append input, .button-append button {
	margin: 0;
	width: 100%;
}

.post-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.post-nav div:first-child {
	text-align: left;
}
.post-nav div:last-child {
	text-align: right;
}
.post-nav a {
	min-width: 75%;
}

.bigfoot-footnote__container, .bigfoot-footnote__button, .bigfoot-footnote__button svg {
	display: inline-block;
}
.bigfoot-footnote__button {
	background: var(--dm-c-button-bg);
	border: none;
	border-radius: var(--dm-space-m);
	padding: var(--dm-space-xs) var(--dm-space-xs);
	margin: 0 var(--dm-space-2xs);
	transition: all 0.25s ease-in-out;
}
.bigfoot-footnote__button:hover, .bigfoot-footnote__button:focus {
	background: var(--dm-c-neutral-black-100);
	cursor: pointer;
}
.bigfoot-footnote__button svg {
	float: left;
	height: var(--dm-space-s);
	margin: 0 var(--dm-space-2xs);
	width: var(--dm-space-s);
}

/* ==========================================================================
	Footnote styles
========================================================================== */

.footnotes ol {
	font-size: var(--dm-font-size-small);
}
.footnotes ol, .post-nav {
	margin-top: var(--dm-space-l);
}

.littlefoot {
	--button-background-color: var(--dm-c-primary);
	--button-text-color: var(--dm-c-neutral-white-100);
	--button-active-background-color: var(--dm-c-link-active);
	--button-active-text-color: var(--dm-c-body);
	--button-border-radius: var(--dm-radius-lg);
	--button-height: var(--dm-space-l);
	--button-margin: 0 var(--dm-space-3xs);
	--button-padding:0 var(--dm-space-xs);
	--button-transition: background-color 0.25s ease, color 0.25s ease;
	--popover-background-color: var(--dm-c-neutral-off-white);
	--popover-text-color: var(--dm-c-neutral-dark-grey);
	--popover-border: 1px solid var(--dm-c-neutral-black-25);
	--popover-border-radius: var(--dm-radius-sm);
	--popover-max-height: calc(2.5 x var(--dm-space-3xl));
	--popover-max-width: 90%;
	--popover-horizontal-padding: var(--dm-space-m);
	--popover-vertical-padding: var(--dm-space-m);
	--popover-shadow: 0 0 var(--dm-space-l) var(--dm-c-neutral-black-25);
	--popover-transform-origin: 50% 0;
	--popover-transform: scale(0.1) translateZ(0);
	--popover-active-transform: scale(1) translateZ(0);
	--popover-transition: opacity 0.25s ease, transform 0.25s ease;
	--popover-width: 22em;
	--popover-scroll-indicator-color: var(--dm-c-neutral-dark-grey);
	--popover-tooltip-size: var(--dm-space-xs);
	position: relative;
}
.littlefoot__button {
	background-color: var(--button-background-color);
	border: 0;
	border: var(--button-border,0);
	border-radius: var(--button-border-radius);
	color: var(--button-text-color);
	cursor: pointer;
	display: inline-block;
	height: var(--button-height);
	margin: var(--button-margin);
	padding: var(--button-padding);
	position: relative;
	-webkit-text-decoration: none;
	text-decoration: none;
	top: -4px;
	transition: var(--button-transition);
	vertical-align: middle;
}
.littlefoot__button.is-active, .littlefoot__button:active, 
.littlefoot__button:focus, .littlefoot__button:hover {
	background-color: var(--button-active-background-color);
	color: var(--button-active-text-color);
}
.littlefoot__button svg {
	float: left;
	height: var(--dm-space-2xs);
}
.littlefoot__popover {
	border: var(--popover-border);
	border-radius: var(--popover-border-radius);
	box-shadow: var(--popover-shadow);
	margin: calc(var(--popover-tooltip-size) + var(--button-height)) 0;
	max-width: var(--popover-max-width);
	position: absolute;
	top: 0;
	transform: var(--popover-transform);
	transform-origin: var(--popover-transform-origin);
	transition: var(--popover-transition);
	width: var(--popover-width);
	z-index: 1;
}
.littlefoot__popover.is-above {
	bottom: 0;
	top: auto;
}
.littlefoot__popover.is-active {
	transform: var(--popover-active-transform);
}
.littlefoot__wrapper {
	position: relative;
	z-index: 1;
}
.littlefoot__content,.littlefoot__wrapper {
	border-radius: var(--popover-border-radius);
}
.littlefoot__content {
	-webkit-overflow-scrolling: touch;
	background-color: var(--popover-background-color);
	box-sizing: border-box;
	color: var(--popover-text-color);
	max-height: var(--popover-max-height);
	overflow: auto;
	padding: var(--popover-vertical-padding) var(--popover-horizontal-padding);
	width: 100%;
}
.littlefoot__content p:last-child {
	margin-bottom: 0;
}
.littlefoot__content img {
	max-width: 100%;
}
.littlefoot__content:focus {
	outline: none;
}
.is-scrollable {
	--arrow-x: calc(var(--popover-horizontal-padding)*-1);
	--arrow-y: calc(var(--popover-vertical-padding)/2);
}
.is-scrollable .littlefoot__content:after {
	bottom: 0;
	color: var(--popover-scroll-indicator-color);
	content: "\21E3";
	display: block;
	left: 0;
	opacity: 1;
	position: sticky;
	text-align: center;
	transform: translateX(var(--arrow-x)) translateY(var(--arrow-y));
	transition: var(--popover-transition);
	width: var(--popover-horizontal-padding)
}
.is-scrollable.is-fully-scrolled .littlefoot__content:after {
	opacity: 0;
}
.littlefoot__tooltip {
	--tooltip-margin: calc(var(--popover-tooltip-size)*-1);
	background-color: var(--popover-background-color);
	border: var(--popover-border);
	box-shadow: var(--popover-shadow);
	height: calc(var(--popover-tooltip-size)*2);
	margin-left: var(--tooltip-margin);
	position: absolute;
	transform: rotate(45deg);
	width: calc(var(--popover-tooltip-size)*2);
}
.is-below .littlefoot__tooltip {
	top: var(--tooltip-margin);
}
.is-above .littlefoot__tooltip {
	bottom: var(--tooltip-margin);
}

@media (max-width:767.98px) {
	.littlefoot__popover {
		border-radius: 0;
		border-width: 1px 0 0;
		bottom: 0 !important;
		left: 0 !important;
		margin: 0;
		max-width: 100%!important;
		position: fixed;
		right: 0 !important;
		top: auto !important;
		transform: translateY(100%);
		width: 100%;
	}
	.littlefoot__popover.is-active {
		transform: translateY(0);
	}
	.littlefoot__wrapper {
		border-radius: 0;
		max-width: 100%!important;
		transform: none;
	}
	.littlefoot__tooltip {
		display: none;
	}
}
@media not print {
	[rel="footnote"].littlefoot--print {
		display: none;
	}
}
@media print {
	.littlefoot__button, .littlefoot__popover {
		display:none;
	}
}

/* ==========================================================================
	Goodreads Fixes
========================================================================== */

#gr_add_to_books iframe {
	height: auto;
	width: 100%;
}

/* ==========================================================================
	MailerLite Fixes
========================================================================== */

#mlb2-8097613.ml-form-embedContainer .ml-form-embedWrapper {
	background: transparent !important;
}

#mlb2-8097613.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent p, #mlb2-8097613.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p, #mlb2-8097613.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent h4, #mlb2-8097613.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent h4 {
	color: var(--dm-c-text) !important;
}

.ml-form-horizontalRow {
	display: grid;
	grid-template-columns: 3fr 1fr;
}

.ml-form-formContent.horozintalForm .ml-form-horizontalRow .ml-input-horizontal,
.ml-form-formContent.horozintalForm .ml-form-horizontalRow .ml-button-horizontal {
	float: none !important;
	width: auto !important;
}

.ml-form-formContent.horozintalForm .ml-form-horizontalRow .horizontal-fields {
	float: none !important;
	padding-right: 0 !important;
}

.ml-button-horizontal .primary {
	border-radius: var(--dm-radius-none) var(--dm-radius-sm) var(--dm-radius-sm) var(--dm-radius-none) !important;
}

.ml-input-horizontal input {
	border-radius: var(--dm-radius-sm) var(--dm-radius-none) var(--dm-radius-none) var(--dm-radius-sm) !important;
}

.ml-mobileButton-horizontal {
  display: none;
}

/* ==========================================================================
	Stupid WordPress CSS "Fixes"
========================================================================== */

ul.wp-block-post-template {
	margin: 0;
	padding: 0;
}

.wp-block-categories-list .children {
	border-top: var(--dm-space-single) solid var(--dm-c-bg-offset);
	list-style: none;
	margin: var(--dm-space-2xs) 0 0;
	padding: 0;
}

.wp-block-categories-list .children li a::before {
	content: '\2023';
	display: inline-block;
	margin: 0 var(--dm-space-s);
	position: relative;
}

.wp-block-categories-list .children > li:last-child {
	border-bottom: none;
}

.bigfoot-footnote__container, .footnotes .littlefoot {
	display: none;
}

/* ==========================================================================
	Media Queries
========================================================================== */

@media screen and (max-width: 39.99rem) {
	h1 { font-size: var(--dm-font-size-h2); }
	h2 { font-size: var(--dm-font-size-h3); }
	h3 { font-size: var(--dm-font-size-h4); }
	h4 { font-size: var(--dm-font-size-h5); }
	h5 { font-size: var(--dm-font-size-h6); }
	h6 { font-size: var(--dm-font-size-body); }
	
	.columns {
		grid-template-columns: 1fr;
	}
	header nav ul.main {
		grid-template-columns: repeat(6, 1fr);
	}
	header nav ul.main li:nth-child(-1n + 2) {
		grid-column: span 3;
	}
	header nav ul.main li:nth-child(1n + 3) {
		grid-column: span 2;
	}
	header nav ul.main a {
		border-top: var(--dm-border-thin) solid var(--dm-c-bg-lighten);
		border-bottom: var(--dm-border-thin) solid var(--dm-c-bg-darken);
	}

	.shop-list {
		display: grid;
		column-gap: var(--dm-space-s);
		grid-template-columns: 1fr 1fr;
	}
	footer nav {
		order: -1;
	}
	
	.columns .mobile-first {
		order: -1;
	}
	.columns.button-append.three-one {
		grid-template-columns: 3fr 1fr;
	}
	form .columns {
		row-gap: 0;
	}
	.media-list > li {
		align-items: center;
		display: grid;
		gap: var(--dm-space-l);
		grid-template-columns: 1fr 2fr;
		justify-items: start;
	}
	
	.book.hero .one-three, .series-list .one-three, .one-three.book-tease,
	.episode-list .one-three {
		grid-template-columns: 1fr 3fr;
	}
	.book.hero .one-three > :last-child, .series-list .summary {
		grid-column: 1 / span 2;
	}
	
	.alignleft, .alignright {
		max-width: 50%;
	}
	
	.book-grid {
		grid-template-areas:
			"cover title"
			"buy buy"
			"details details";
	}
	
	.hero .intro {
		margin-bottom: var(--dm-space-xl);
	}
	.avatar {
		margin-bottom: 0;
	}
	.avatar img {
		margin: 0 auto;
		max-width: 50%;
	}
}

@media screen and (min-width: 40rem) {
	.columns.three-one {
		grid-template-columns: 3fr 1fr;
	}
	.columns.two-one {
		grid-template-columns: 2fr 1fr;
	}
	.columns.one-two {
		grid-template-columns: 1fr 2fr;
	}
	.columns.one-three {
		grid-template-columns: 1fr 3fr;
	}
	.series-list .one-three {
		grid-template-rows: auto 1fr;
	}
	.columns.two-two {
		grid-template-columns: 1fr 1fr;
	}
	.columns.three {
		grid-template-columns: 1fr 1fr 1fr;
	}
	.columns.four {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
	.media-list {
		grid-template-columns: repeat(2, minmax(7rem, 1fr));
	}
	.book.hero .book-cover {
		grid-row: 1 / span 2;
	}
	
	.book-grid {
		grid-template-areas:
			"title title"
			"cover details"
			"buy details";
	}
	
	/* .avatar {
		float: left;
		margin: 0 var(--dm-space-l) 0 calc(-1 * var(--dm-space-l));
		max-width: 33%;
	}
	.avatar img {
		margin-bottom: 0;
	} */
}

@media screen and (min-width: 40rem) and (max-width: 69.99rem) {
	footer .columns.four {
		grid-template-columns: 1fr 1fr;
	}
}

@media screen and (min-width: 50rem) {
	.media-list {
		grid-template-columns: repeat(3, minmax(10rem, 1fr));
	}
}

@media screen and (max-width: 59.99rem) {
	.entry-content table tr {
		grid-template-columns: 1fr 2fr;
		grid-template-rows: auto auto 1fr;
	}
	.entry-content table tr:has(> :nth-child(-n+3):last-child) {
		grid-template-columns: 1fr 1fr;
	}
	.entry-content table tr:has(> :nth-child(4):last-child) > :nth-child(n) {
		order: 1;
	}
	.entry-content table tr:has(> :nth-child(4):last-child) :last-child {
		grid-row: 1 / span 3;
		grid-column: 2;
	}
}

@media screen and (min-width: 60rem) {
	.media-list {
		grid-template-columns: repeat(4, minmax(10rem, 1fr));
	}
	.entry-content table tr:has(> :nth-child(-n+3):last-child) {
		grid-template-columns: 2fr 1fr 1fr;
	}
	.entry-content table tr {
		grid-template-columns: 1fr 1fr 1fr 2fr;
	}
}

@media screen and (min-width: 72rem) {
	.media-list {
		grid-template-columns: repeat(5, minmax(10rem, 1fr));
	}
}

@media screen and (prefers-color-scheme: dark) {
	:root {
		--dm-c-dark-primary: color-mix(in oklab, var(--dm-c-primary) 90%, var(--dm-c-neutral-white-100) 10%);
		--dm-c-dark-accent: color-mix(in oklab, var(--dm-c-accent) 80%, var(--dm-c-neutral-white-100) 20%);
		--dm-c-body: var(--dm-c-neutral-dark-grey);
		--dm-c-text: var(--dm-c-neutral-lighter-grey);
		--dm-c-bg-offset: var(--dm-c-neutral-white-10);
		--dm-c-reverse: var(--dm-c-neutral-black-100);
		--dm-c-action-reverse: var(--dm-c-neutral-white-100);
		--dm-c-link: var(--dm-c-dark-accent);
		--dm-c-link-visited: color-mix(in oklab, var(--dm-c-dark-accent) 50%, var(--dm-c-neutral-white-100) 25%); 
		--dm-c-link-hover: var(--dm-c-neutral-white-75);
		--dm-c-link-active: var(--dm-c-neutral-white-100);
		--dm-c-selected: var(--dm-c-dark-primary);
		--dm-c-button-bg: var(--dm-c-dark-primary);
		--dm-c-button-outline: var(--dm-c-neutral-white-25);
		--dm-c-bg-nav: var(--dm-c-dark-primary);
		--dm-c-bg-hero: var(--dm-c-neutral-black-25);
		--dm-c-bg-subtle: var(--dm-c-neutral-white-10);
		--dm-c-bg-contrast: var(--dm-c-neutral-white-25);
		
		--dm-g-dark: linear-gradient(0deg, var(--dm-c-neutral-black-100) 0%, var(--dm-c-neutral-dark-grey) 100%);
		
		--dm-header-slant: 1px 1px 0 var(--dm-c-dark-primary), 2px 2px 0 var(--dm-c-dark-primary), 3px 3px 0 var(--dm-c-dark-primary), 4px 4px 0 var(--dm-c-dark-primary), 5px 5px 0 var(--dm-c-dark-primary), 6px 6px 0 var(--dm-c-dark-primary);
		--dm-header-slant-hover: 1px 1px 0 var(--dm-c-dark-primary), 2px 2px 0 var(--dm-c-dark-primary), 3px 3px 0 var(--dm-c-dark-primary), 4px 4px 0 var(--dm-c-dark-primary), 5px 5px 0 var(--dm-c-dark-primary), 6px 6px 0 var(--dm-c-dark-primary), 7px 7px 0 var(--dm-c-dark-primary), 8px 8px 0 var(--dm-c-dark-primary), 9px 9px 0 var(--dm-c-dark-primary);
	}
	
	header h1 a, header h1 a:visited, header h1 a:hover, header h1 a:focus {
		color: var(--dm-c-neutral-white-100);
	}
	.button.secondary {
		color: var(--dm-c-dark-accent);
	}
	a:visited {
		text-decoration-color: var(--dm-c-link-visited);
	}
	
	.littlefoot__button:hover svg circle, .littlefoot__button:focus svg circle {
		fill: var(--dm-c-body);
	}
	.littlefoot__content a:visited {
		color: var(--dm-c-neutral-med-grey);
	}
	.littlefoot__content a:hover, .littlefoot__content a:focus {
		color: var(--dm-c-neutral-black-75);
	}
}