/*
Theme Name: Roxane Gay
Theme URI: https://github.com/a8cteam51/roxane-gay/
Author: WordPress.com Special Projects Team
Author URI: https://wpspecialprojects.wordpress.com
Description: A custom theme designed and built for Roxane Gay
Requires at least: WordPress 5.5
Version: 0.0.1
License: GNU General Public License v2 or later
License URI: LICENSE
Template: varia-wpcom
Text Domain: roxanegay
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
The Bloggess is a child theme of Varia which is based on Underscores https://underscores.me/, (C) 2012-2019 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/

/**
 * From https://github.com/hankchizljaw/modern-css-reset
 */

/* Remove default padding */

ul[class],
ol[class] {
	padding: 0;
}

/* Remove default margin */

body,
h1,
h2,
h3,
h4,
p,
li,
figure,
figcaption,
blockquote,
dl,
dd {
	margin: 0;
}

/* Set core body defaults */

body {
	box-sizing: border-box;
	line-height: 1.55;
	min-height: 100vh;
	scroll-behavior: smooth;
	text-rendering: optimizeSpeed;
}

/* Box sizing rules */

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

/* Remove list styles on ul, ol elements with a class attribute */

/* stylelint-disable no-duplicate-selectors */

ul[class],
ol[class] {
	list-style: none;
}

/* stylelint-enable no-duplicate-selectors */

/* A elements that don't have a class get default styles */

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

/* Make images easier to work with */

img {
	display: block;
	height: auto;
	max-width: 100%;
}

/* Inherit fonts for inputs and buttons */

input,
button,
textarea,
select {
	font: inherit;
}

/* Remove animations and transitions for people that prefer not to see them */

@media (prefers-reduced-motion: reduce) {

	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

/* Wrap pre tag content */

pre {
	overflow-x: auto;
	white-space: pre-wrap;
	word-wrap: break-word;
}

/*--------------------------------------------------------------
  # MacOSX overflow
  # When a user has the scrollbar toggled always on it creates
  # a horizontal overflow when 100vw is used
--------------------------------------------------------------*/

body {
	overflow-x: hidden;
}

:root {
	--font-sans: "Mulish", sans-serif;
	--font-serif: "Source Serif Pro", serif;

	--font-size-default: 1rem;
	--font-size-body: 1.313rem;
	--font-size-just-bigger: 1.13rem;
	--font-size-large: 1.5rem;
	--font-size-larger: 3rem;

	--letter-spacing: 0.08em;

	--color-primary: #333;
	--color-accent: #c33276;
	--color-accent-light: #f5d8e6;

	--color-gray: #595959;
	--color-gray-light: #c4c4c4;
	--color-black: #000;
	--color-white: #fff;

	--drop-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);

	--spacing: 1.25rem;
	--spacing-tight: calc(var(--spacing) / 2);
	--spacing-loose: calc(var(--spacing) * 2);
	--spacing-looser: calc(var(--spacing) * 4);
	--spacing-huge: calc(var(--spacing) * 6);

	--gutter: var(--spacing);

	--max-width: 1080px;
	--max-content: 897px;
}

@media (max-width: 37.5em) {

:root {

		--spacing: 1rem;
}
	}

:root {

	--speed: 0.3s;
}

html {
	scroll-behavior: smooth;
}

body {
	color: #333;
	color: var(--color-primary);
	font-family: "Mulish", sans-serif;
	font-family: var(--font-sans);
	font-size: 1rem;
	font-size: var(--font-size-default);
	font-weight: 400;
	line-height: 1.65;
}

h1,
h2,
h3 {
	font-family: "Source Serif Pro", serif;
	font-family: var(--font-serif);
	font-weight: 900;
	line-height: 1.13;
	margin: 0.5em 0;
}

h1 {
	font-size: 3rem;
	font-size: var(--font-size-larger);
}

h2 {
	font-size: 2.25rem;
	margin-top: 1.75em;
}

h3 {
	font-size: 1.5rem;
	margin: 3em 0 0.5em;
}

h4,
h5,
h6 {
	font-family: "Mulish", sans-serif;
	font-family: var(--font-sans);
	font-weight: 900;
	margin: 3em 0 0.5em;
}

h4 {
	font-size: 1.313rem;
	letter-spacing: 0.08em;
	letter-spacing: var(--letter-spacing);
	text-transform: uppercase;
}

h5 {
	font-size: 1.13rem;
	font-size: var(--font-size-just-bigger);
	letter-spacing: 0.08em;
	letter-spacing: var(--letter-spacing);
	text-transform: uppercase;
}

h6 {
	font-size: 1rem;
	font-size: var(--font-size-default);
}

p,
ol,
ul {
	font-size: 1.313rem;
	font-size: var(--font-size-body);
	margin: 1.25em 0;
}

ol,
ul {
	padding-left: 0;
}

.entry-content li {
	margin-left: 1.25rem;
	margin-left: var(--spacing);
	margin-bottom: 0.25em;
}

strong {
	font-weight: 900;
}

.wp-block-image figcaption {
	font-size: 1rem;
	font-size: var(--font-size-default);
	font-style: italic;
	margin: 1em 0;
	text-align: center;
}

/* --- Links --- */

a {
	text-decoration: none;
	transition: color 0.3s ease;
	transition: color var(--speed) ease;
}

.site-content a,
.site-footer a {
	color: inherit;
	border-bottom: 2px dotted #c33276;
	border-bottom: 2px dotted var(--color-accent);
	font-weight: 700
}

.site-content a:hover, .site-footer a:hover {
		color: #c33276;
		color: var(--color-accent);
	}

/* stylelint-disable */

.site-footer a {
	font-weight: 900;
}

/* stylelint-enable */

:focus {
	outline: 2px dotted #c33276;
	outline: 2px dotted var(--color-accent);
}

/*--- Buttons ---*/

/* stylelint-disable */

.site-content .button,
.wp-block-button .wp-block-button__link,
input[type="submit"] {
	all: unset;
	background-color: #c33276;
	background-color: var(--color-accent);
	border: none;
	color: #fff;
	color: var(--color-white);
	cursor: pointer;
	display: block;
	font-weight: 900;
	padding: 1.25rem calc(1.25rem * 2);
	padding: var(--spacing) var(--spacing-loose);
	text-transform: uppercase;
	transition: all 0.3s ease;
	transition: all var(--speed) ease;
	max-width: -moz-max-content;
	max-width: max-content
}

.site-content .button:hover, .wp-block-button .wp-block-button__link:hover, input[type="submit"]:hover {
		background-color: #333;
		background-color: var(--color-primary);
		color: #fff;
		color: var(--color-white);
	}

.site-content .button:focus, .wp-block-button .wp-block-button__link:focus, input[type="submit"]:focus {
		outline: 2px solid #333;
		outline: 2px solid var(--color-primary);
		outline-offset: -2px;
	}

/* stylelint-enable */

/* --- Blockquote --- */

blockquote {
	font-weight: 700;
}

/* -- Image --- */

.site-content img {
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
	box-shadow: var(--drop-shadow);
}

.site {
	padding: 0 1.25rem;
	padding: 0 var(--gutter);
}

/*--------------------------------------------------------------
  # Site Header
--------------------------------------------------------------*/

.site-header {
	display: grid;
	grid-template: "branding main-nav social" / 1fr max-content max-content;
	margin: 0 auto calc(1.25rem * 6);
	margin: 0 auto var(--spacing-huge);
	padding-top: calc(1.25rem * 2);
	padding-top: var(--spacing-loose);
	position: relative;
	max-width: 1080px;
	max-width: var(--max-width)
}

@media (max-width: 55em) {

.site-header {
		display: flex;
		margin-bottom: calc(1.25rem * 2);
		margin-bottom: var(--spacing-loose)
}
	}

/* --- Site Branding --- */

.site-branding {
	grid-area: branding
}

@media (max-width: 55em) {

.site-branding {
		text-align: center;
		flex: 1
}
	}

.site-title {
	color: #333;
	color: var(--color-primary);
	font-family: "Source Serif Pro", serif;
	font-family: var(--font-serif);
	font-size: 1.5rem;
	font-size: var(--font-size-large);
	font-weight: 900;
	line-height: 1.2;
	margin: 0;
}

.site-title a {
		color: inherit;
		text-decoration: none
	}

.site-title a::after {
			content: ".";
			color: #c33276;
			color: var(--color-accent);
			transition: color 0.3s ease;
			transition: color var(--speed) ease;
		}

.site-title a:hover {
			color: #c33276;
			color: var(--color-accent)
		}

.site-title a:hover::after {
				color: #333;
				color: var(--color-primary);
			}

/* --- Main Navigation --- */

.main-navigation {
	grid-area: main-nav
}

@media (max-width: 55em) {

.main-navigation {
		width: 20vw
}
	}

.menu-primary-menu-container {
	background-color: #f5d8e6;
	background-color: var(--color-accent-light);
	display: none;
	z-index: 1
}

@media (max-width: 55em) {

.menu-primary-menu-container {
		flex-direction: column;
		margin-top: 1.25rem;
		margin-top: var(--spacing);
		position: relative;
		top: 1.25rem;
		top: var(--spacing);
		right: 0;
		left: calc(-80vw + 1.25rem);
		left: calc(-80vw + var(--gutter));
		width: 100vw
}
	}

@media (min-width: 55.01em) {

.menu-primary-menu-container {
		background-color: transparent;
		display: flex
}
	}

ul.main-menu {
	display: flex;
	font-size: 1.13rem;
	font-size: var(--font-size-just-bigger);
	margin: 0;
	padding: 0 1.25rem;
	padding: 0 var(--gutter);
	width: 100%
}

@media (max-width: 55em) {

ul.main-menu {
		display: block;
		padding: 1.25rem;
		padding: var(--spacing)
}
	}

ul.main-menu li {
		font-weight: 900
	}

@media (min-width: 55.01em) {

			ul.main-menu li + li {
				margin-left: 1.75rem;
			}
		}

@media (max-width: 55em) {

	ul.main-menu li {
			margin: calc(1.25rem / 2) 0;
			margin: var(--spacing-tight) 0;
	}

			ul.main-menu li a {
				border-bottom: 2px solid transparent;
				margin: 0 auto;
				width: 100%;
				max-width: -moz-max-content;
				max-width: max-content;
			}
		}

ul.main-menu li {
		/* stylelint-enable */
	}

/* stylelint-disable */

ul.main-menu li a {
			color: #333;
			color: var(--color-primary);
			text-decoration: none;
			transition: color 0.3s ease;
			transition: color var(--speed) ease
		}

@media (max-width: 55em) {
		ul.main-menu li a {
				display: block;
				text-align: center
		}
			}

@media (min-width: 55.01em) {
		ul.main-menu li a {
				display: flex
		}
			}

ul.main-menu li a:hover {
				border-bottom: 2px dotted;
				color: #c33276;
				color: var(--color-accent);
			}

ul.main-menu li.current-menu-item a {
			border-bottom: 2px dotted;
			color: #c33276;
			color: var(--color-accent);
		}

/* Sub menu */

.menu-item-has-children {
	position: relative;
}

.menu-item-has-children .sub-menu {
		margin: 0
	}

@media (min-width: 55.01em) {

	.menu-item-has-children .sub-menu {
			background-color: #fff;
			background-color: var(--color-white);
			border: 1px solid #c4c4c4;
			border: 1px solid var(--color-gray-light);
			box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
			box-shadow: var(--drop-shadow);
			display: none;
			padding: 1.25rem;
			padding: var(--spacing);
			position: absolute;
			top: calc(100% + 1.25rem);
			top: calc(100% + var(--spacing));
			left: calc(1.25rem * -1);
			left: calc(var(--spacing) * -1);
			width: -moz-max-content;
			width: max-content;
			z-index: 1
	}

			.menu-item-has-children .sub-menu::before {
				content: "";
				display: block;
				height: 1.25rem;
				height: var(--spacing);
				left: 0;
				position: absolute;
				top: calc(1.25rem * -1);
				top: calc(var(--spacing) * -1);
				width: 100%;
			}

			.menu-item-has-children .sub-menu::after {
				background-color: #fff;
				border: 1px solid #c4c4c4;
				border: 1px solid var(--color-gray-light);
				border-width: 1px 0 0 1px;
				content: "";
				display: block;
				height: 1.25rem;
				height: var(--spacing);
				left: 1.75rem;
				position: absolute;
				top: -11px;
				transform: rotate(45deg);
				width: 1.25rem;
				width: var(--spacing);
			}

			.menu-item-has-children .sub-menu a:hover {
				border: none;
				text-decoration: underline;
			}
		}

.menu-item-has-children .sub-menu li {
			font-size: 1.13rem;
			font-size: var(--font-size-just-bigger);
			font-weight: 400;
			margin: 0;
		}

.menu-item-has-children:hover > .sub-menu, .menu-item-has-children:focus > .sub-menu {
			display: flex;
			flex-direction: column;
		}

/* Mobile toggle */

#toggle-menu .close {
	display: none;
}

.dropdown-icon {
	padding: 0 0.5em;
}

#toggle-menu {
	background-color: transparent;
	color: #333;
	color: var(--color-primary);
	cursor: pointer;
	display: flex;
	justify-content: flex-end;
	margin-top: 7px
}

@media (min-width: 55.01em) {

#toggle-menu {
		display: none
}
	}

#toggle-menu .open {
		--color-toggle: var(--color-primary);
		background: linear-gradient(to bottom, var(--color-toggle) 2px, #fff 2px, #fff 6px, var(--color-toggle) 6px, var(--color-toggle) 8px, #fff 8px, #fff 12px, var(--color-toggle) 12px);
		background: linear-gradient(to bottom, var(--color-toggle) 2px, #fff 2px 6px, var(--color-toggle) 6px 8px, #fff 8px 12px, var(--color-toggle) 12px);
		background: linear-gradient(to bottom, var(--color-toggle) 2px, var(--color-white) 2px, var(--color-white) 6px, var(--color-toggle) 6px, var(--color-toggle) 8px, var(--color-white) 8px, var(--color-white) 12px, var(--color-toggle) 12px);
		background: linear-gradient(to bottom, var(--color-toggle) 2px, var(--color-white) 2px 6px, var(--color-toggle) 6px 8px, var(--color-white) 8px 12px, var(--color-toggle) 12px);
		display: block;
		height: 14px;
		position: relative;
		width: 22px
	}

#toggle-menu .open:hover {
			--color-toggle: var(--color-accent);
		}

/* stylelint-disable */

#toggle-menu .close {
	/* stylelint-enable */
		--color-toggle: var(--color-accent);
		height: 14px;
		margin-right: 8px;
		margin-top: 6px;
		position: relative;
		width: 22px
	}

#toggle-menu .close::before {
			background-color: var(--color-toggle);
			content: "";
			display: block;
			height: 2px;
			position: absolute;
			transform: rotate(45deg);
			width: 100%;
		}

#toggle-menu .close::after {
			background-color: var(--color-toggle);
			content: "";
			display: block;
			height: 2px;
			position: absolute;
			transform: rotate(-45deg);
			width: 100%;
		}

#toggle-menu .close:hover {
			--color-toggle: var(--color-primary);
		}

#toggle {

	/* stylelint-disable */
}

#toggle:focus ~ #toggle-menu {
			outline: 2px dotted;
		}

@media (min-width: 55.01em) {

		#toggle:checked ~ #toggle-menu {
				display: none
		}
			}

#toggle:checked ~ #toggle-menu .open {
				display: none;
			}

#toggle:checked ~ #toggle-menu .close {
				display: block;
			}

#toggle:checked ~ .menu-primary-menu-container {
			display: flex;
		}

#toggle {
	/* stylelint-enable */
}

/* --- Social Menu --- */

.social-navigation {
	grid-area: social
}

@media (max-width: 55em) {

.social-navigation {
		order: -1;
		width: 20vw
}
	}

.social-links-menu {
	display: flex;
	margin: 0;
}

/* stylelint-disable */

.social-links-menu li + li {
		margin-left: calc(1.25rem / 2);
		margin-left: var(--spacing-tight);
	}

/* stylelint-enable */

.social-links-menu svg {
		fill: #c33276;
		fill: var(--color-accent);
		transition: fill 0.3s ease;
		transition: fill var(--speed) ease
	}

.social-links-menu svg:hover {
			fill: #333;
			fill: var(--color-primary);
		}

/*--------------------------------------------------------------
  # Entry
--------------------------------------------------------------*/

.entry-content > * {
		margin-left: auto;
		margin-right: auto;
		max-width: 897px;
		max-width: var(--max-content);
	}

.entry-header > *, .entry-footer > * {
		margin-left: auto;
		margin-right: auto;
		max-width: 897px;
		max-width: var(--max-content);
	}

/*--------------------------------------------------------------
  # Site Footer
--------------------------------------------------------------*/

.site-footer {
	background-color: #333;
	background-color: var(--color-primary);
	color: #c4c4c4;
	color: var(--color-gray-light);
	margin-top: calc(1.25rem * 6);
	margin-top: var(--spacing-huge);
	padding: 1.25rem 1.25rem;
	padding: var(--spacing) var(--gutter)
}

.site-footer::before {
		background-image: url(./images/icon-bebe-elephant.png);
		background-repeat: no-repeat;
		background-size: contain;
		content: "";
		display: block;
		height: 55px;
		margin: 1.25rem auto;
		margin: var(--spacing) auto;
		width: 66px;
	}

/* stylelint-disable */

.site-footer a {
		color: inherit;
		border-bottom: 2px dotted
	}

.site-footer a:hover {
			color: #c33276;
			color: var(--color-accent);
		}

/* stylelint-enable */

.site-footer .site-info {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin: 0 auto;
		padding: 0 1.25rem;
		padding: 0 var(--gutter);
	}

.site-footer .powered::before,
		.site-footer .powered::after {
			content: "\2022";
			color: #c33276;
			color: var(--color-accent);
			display: inline-block;
			margin: 0 0.5em;
		}

.site-footer .social-navigation {
		display: inline-flex;
		order: 0;
		width: auto;
	}

/* stylelint-disable */

.site-footer .social-navigation a {
			border: none;
		}

/* stylelint-enable */

.site-footer .social-navigation svg {
			fill: #c4c4c4;
			fill: var(--color-gray-light)
		}

.site-footer .social-navigation svg:hover {
				fill: #c33276;
				fill: var(--color-accent);
			}

/*--------------------------------------------------------------
  # Entry meta
--------------------------------------------------------------*/

.entry-meta {
	color: #595959;
	color: var(--color-gray);
	font-size: 1.13rem;
	font-size: var(--font-size-just-bigger);
}

.entry-meta a {
		border-color: transparent;
		color: inherit;
		font-weight: inherit;
	}

.entry-meta .updated {
		display: none;
	}

/*--------------------------------------------------------------
  # Core blocks
--------------------------------------------------------------*/

/* --- Quotes --- */

.wp-block-quote {
	border-color: #c33276;
	border-color: var(--color-accent);
	border-style: dotted;
	border-width: 0 0 0 2px;
}

.wp-block-quote p {
		margin: 0
	}

.wp-block-quote p + p {
			margin-top: 1.25rem;
			margin-top: var(--spacing);
		}

.wp-block-quote cite {
		color: #333;
		color: var(--color-primary);
		display: block;
		font-size: 1.13rem;
		font-size: var(--font-size-just-bigger);
		margin-top: 1.25rem;
		margin-top: var(--spacing);
	}

.wp-block-pullquote {
	border-color: #c33276;
	border-color: var(--color-accent);
	border-style: dotted;
	border-width: 2px 0;
	margin-top: 1.25rem;
	margin-top: var(--spacing);
	padding: 1.25rem 0;
	padding: var(--spacing) 0;
	/* stylelint-enable */
}

/* stylelint-disable */

.wp-block-pullquote p {
		font-size: 1.5rem;
		font-size: var(--font-size-large);
		margin: 0
	}

.wp-block-pullquote p + p {
			margin-top: 1.25rem;
			margin-top: var(--spacing);
		}

/* --- wp-block-media-text --- */

.wp-block-media-text {
	grid-gap: calc(1.25rem * 2);
	gap: calc(1.25rem * 2);
	grid-gap: var(--spacing-loose);
	gap: var(--spacing-loose);
}

/* stylelint-disable */

.wp-block-media-text .wp-block-media-text__content {
		padding: 0;
	}

.wp-block-media-text__media {
	display: grid;
	grid-template-columns: 1.25rem 1fr;
	grid-template-columns: var(--spacing) 1fr
}

.wp-block-media-text__media::before {
		background-color: #c4c4c4;
		background-color: var(--color-gray-light);
		content: "";
		height: auto;
		margin: calc(1.25rem * 2) 0;
		margin: var(--spacing-loose) 0;
		min-width: 1.25rem;
		min-width: var(--spacing);
	}

@media (max-width: 600px) {
		#main .has-media-on-the-right .wp-block-media-text__media {
			grid-row: 1;
		}

		#main .has-media-on-the-right .wp-block-media-text__content {
			grid-row: 2;
		}
	}

#main .has-media-on-the-right .wp-block-media-text__media {
		grid-template-columns: 1fr 1.25rem;
		grid-template-columns: 1fr var(--spacing)
	}

#main .has-media-on-the-right .wp-block-media-text__media::before {
			order: 1;
		}

/* stylelint-enable */

/* --- Image style --- */

.wp-block-image.is-style-side-box-right,
	.wp-block-image.is-style-side-box-left {
		display: grid;
		grid-template-columns: minmax(auto, max-content) 1.25rem;
		grid-template-columns: minmax(auto, max-content) var(--spacing);
		justify-content: center;
		max-width: 897px;
		max-width: var(--max-content)
	}

.wp-block-image.is-style-side-box-right.alignwide, .wp-block-image.is-style-side-box-left.alignwide {
			max-width: 1080px;
			max-width: var(--max-width);
		}

.wp-block-image.is-style-side-box-right::after, .wp-block-image.is-style-side-box-left::after {
			background-color: #c4c4c4;
			background-color: var(--color-gray-light);
			content: "";
			height: auto;
			margin: calc(1.25rem * 2) 0;
			margin: var(--spacing-loose) 0;
			min-width: 1.25rem;
			min-width: var(--spacing);
		}

.wp-block-image.is-style-side-box-left {
		grid-template-columns: 1.25rem minmax(auto, max-content);
		grid-template-columns: var(--spacing) minmax(auto, max-content)
	}

.wp-block-image.is-style-side-box-left::after {
			order: -1;
		}

/* --- Text style --- */

.is-style-topper {
	color: #c33276;
	color: var(--color-accent);
	font-family: "Mulish", sans-serif;
	font-family: var(--font-sans);
	font-size: 1.13rem;
	font-size: var(--font-size-just-bigger);
	font-weight: 900;
	letter-spacing: 0.08em;
	letter-spacing: var(--letter-spacing);
	text-transform: uppercase;
}

.is-style-topper + h2 {
		margin-top: 0.5em;
	}

/* --- Button style --- */

/* stylelint-disable */

.is-style-arrow .wp-block-button__link {
		/* stylelint-enable */
		all: unset;
		border-bottom: 2px dotted;
		color: #c33276;
		color: var(--color-accent);
		cursor: pointer;
		font-size: 1.313rem;
		font-size: var(--font-size-body);
		font-weight: 900;
		position: relative;
		transition: color 0.3s ease;
		transition: color var(--speed) ease
	}

.is-style-arrow .wp-block-button__link::after {
			bottom: 0.15em;
			content: " \2794";
			font-size: 0.85em;
			font-weight: 400;
			line-height: 1;
			margin-left: 0.25em;
			position: absolute;
		}

.is-style-arrow .wp-block-button__link:hover {
			background-color: transparent;
			color: #333;
			color: var(--color-primary);
		}

/*--------------------------------------------------------------
  # CoBlocks gallery carousel
--------------------------------------------------------------*/

#main .wp-block-coblocks-gallery-carousel button {
		--button-size: 32px;
		height: var(--button-size);
		width: var(--button-size);
		max-width: none
	}

#main .wp-block-coblocks-gallery-carousel button::after {
			background-color: #c33276;
			background-color: var(--color-accent);
			height: var(--button-size);
			width: var(--button-size);
		}

/*--------------------------------------------------------------
  # Books Recent block and section
--------------------------------------------------------------*/

.recent-books h2 {
		margin: calc(1.25rem * 2) 0;
		margin: var(--spacing-loose) 0;
	}

.recent-books .wp-block-button {
		margin: calc(1.25rem * 2) 0;
		margin: var(--spacing-loose) 0;
	}

.books-recent {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
	grid-gap: calc(1.25rem * 4);
	gap: calc(1.25rem * 4);
	grid-gap: var(--spacing-looser);
	gap: var(--spacing-looser);
	margin: calc(1.25rem * 1.5) auto;
	margin: calc(var(--spacing) * 1.5) auto;
	max-width: 1080px;
	max-width: var(--max-width);
}

.card-book .book-featured-image {
		height: 0;
		margin: 0 0 calc(1.25rem * 1.5);
		margin: 0 0 calc(var(--spacing) * 1.5);
		padding-bottom: 150%;
		position: relative
	}

.card-book .book-featured-image::after {
			background-color: transparent;
			content: "";
			height: 100%;
			left: 0;
			position: absolute;
			top: 0;
			transition: background-color 0.3s ease;
			transition: background-color var(--speed) ease;
			width: 100%;
		}

.card-book img {
		height: 100%;
		-o-object-fit: cover;
		   object-fit: cover;
		position: absolute;
		width: 100%;
	}

.card-book .book-title {
		display: block;
		font-size: 1.13rem;
		font-size: var(--font-size-just-bigger);
		font-weight: 900;
		line-height: 1.13;
		text-align: center;
		transition: color 0.3s ease;
		transition: color var(--speed) ease;
	}

.card-book a {
		border: none;
		display: flex;
		flex-direction: column;
		height: 100%
	}

.card-book a:hover .book-featured-image::after {
					background-color: rgba(195, 50, 118, 0.6);
				}

.card-book a:hover .book-title {
				color: #c33276;
				color: var(--color-accent);
			}

.card-book .book-date {
		color: #595959;
		color: var(--color-gray);
		font-weight: 400;
		margin-top: calc(1.25rem / 2);
		margin-top: var(--spacing-tight);
		text-align: center;
	}

.card-book.card-imprint {
		text-align: center;
		display: flex;
		flex-direction: column;
	}

.card-book.card-imprint .book-featured-image {
			display: flex;
		}

/*--------------------------------------------------------------
  # Home overrides
--------------------------------------------------------------*/

.home .entry-header {
		display: none;
	}

/*--------------------------------------------------------------
  # Archive and blog
--------------------------------------------------------------*/

.archive .site-main, .blog .site-main {
		margin-left: auto;
		margin-right: auto;
		max-width: 897px;
		max-width: var(--max-content);
	}

.archive .page-title, .blog .page-title {
		margin: calc(1.25rem * 6) 0 calc(1.25rem * 4);
		margin: var(--spacing-huge) 0 var(--spacing-looser);
	}

.archive .entry-title, .blog .entry-title {
		font-family: "Mulish", sans-serif;
		font-family: var(--font-sans);
		font-size: 1.313rem;
		font-size: var(--font-size-body);
	}

.archive .entry-content > *:first-child, .blog .entry-content > *:first-child {
			margin-top: calc(1.25rem / 2);
			margin-top: var(--spacing-tight);
		}

.blog article + article, .archive:not(.post-type-archive-book):not(.post-type-archive-imprint) article + article {
		border-top: 1px solid #c4c4c4;
		border-top: 1px solid var(--color-gray-light);
		margin-top: calc(1.25rem * 2);
		margin-top: var(--spacing-loose);
		padding-top: calc(1.25rem * 2);
		padding-top: var(--spacing-loose);
	}

/*--------------------------------------------------------------
  # Pagination and post nav
--------------------------------------------------------------*/

.nav-links {
	display: flex;
	font-size: 1.13rem;
	font-size: var(--font-size-just-bigger);
	justify-content: center;
	margin: 1.25rem 0 calc(1.25rem * 2);
	margin: var(--spacing) 0 var(--spacing-loose);
}

/* stylelint-disable */

.nav-links a {
		color: #c33276;
		color: var(--color-accent);
		font-weight: 900
	}

.nav-links a:hover {
			border-color: inherit;
			color: #333;
			color: var(--color-primary);
		}

/* stylelint-enable */

.nav-links .nav-previous,
	.nav-links .prev {
		margin-left: 1.25em;
		position: relative
	}

.nav-links .nav-previous::before, .nav-links .prev::before {
			bottom: 0.15em;
			color: #c33276;
			color: var(--color-accent);
			content: "\2794";
			display: inline-block;
			font-size: 0.85em;
			font-weight: 400;
			line-height: 1;
			left: -1.25em;
			margin-bottom: 4px;
			margin-right: 0.25em;
			position: absolute;
			transform: rotate(180deg);
		}

.nav-links .nav-previous:hover::before, .nav-links .prev:hover::before {
				color: #333;
				color: var(--color-primary);
			}

.nav-links .nav-next,
	.nav-links .next {
		margin-right: 1.25em;
		position: relative
	}

.nav-links .nav-next::before, .nav-links .next::before {
			content: "/";
			display: inline-block;
			margin: 0 calc(1.25rem / 2);
			margin: 0 var(--spacing-tight);
		}

.nav-links .nav-next::after, .nav-links .next::after {
			bottom: 0.15em;
			color: #c33276;
			color: var(--color-accent);
			content: "\2794";
			display: inline-block;
			font-size: 0.85em;
			font-weight: 400;
			line-height: 1;
			margin-bottom: 5px;
			margin-left: 0.25em;
			position: absolute;
			right: -1.25em;
		}

.nav-links .nav-next:hover::after, .nav-links .next:hover::after {
				color: #333;
				color: var(--color-primary);
			}

.nav-links .next::before {
		display: none;
	}

.nav-links .page-numbers {
		margin: 0 0.25em;
		padding: 0 0.25em;
	}

/*--------------------------------------------------------------
  # Books Archive
--------------------------------------------------------------*/

.post-type-archive-book .site-main {
		max-width: 1080px;
		max-width: var(--max-width);
	}

/* stylelint-disable */

.books-archive {
	display: grid;
	grid-gap: calc(1.25rem * 2);
	gap: calc(1.25rem * 2);
	grid-gap: var(--spacing-loose);
	gap: var(--spacing-loose);
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))
}

.books-archive.imprint-archive {
		grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
	}

.books-archive.imprint-archive article {
			justify-self: center;
			width: 100%;
		}

.books-archive article {
		margin-bottom: calc(1.25rem * 2);
		margin-bottom: var(--spacing-loose);
		max-width: 400px
	}

@media (max-width: 37.5em) {

	.books-archive article {
			max-width: 100%
	}
		}

/* stylelint-enable */

/*--------------------------------------------------------------
  # Imprint Archive
--------------------------------------------------------------*/

.post-type-archive-imprint .site-main {
		max-width: 1080px;
		max-width: var(--max-width);
	}

.post-type-archive-imprint .site-main small {
			font-size: 18px;
			display: block;
			font-weight: 400;
			font-family: "Mulish", sans-serif;
			font-family: var(--font-sans);
			color: #595959;
			color: var(--color-gray);
			padding-top: 1.25rem;
			padding-top: var(--spacing);
		}

.post-type-archive-imprint .site-main h2 {
			margin: calc(1.25rem / 2) 0 0;
			margin: var(--spacing-tight) 0 0;
		}

.post-type-archive-imprint .buy-the-book {
		justify-content: center;
		margin-top: auto;
		padding-top: 1.25rem;
		padding-top: var(--spacing);
	}

.post-type-archive-imprint .buy-the-book * {
			width: 100%;
			text-align: center;
		}

.post-type-archive-imprint .buy-the-book h4 {
			color: #c33276;
			color: var(--color-accent);
			border-top: 1px solid #c4c4c4;
			border-top: 1px solid var(--color-gray-light);
			border-bottom: 1px solid #c4c4c4;
			border-bottom: 1px solid var(--color-gray-light);
			cursor: pointer;
			padding: 1.25rem 0;
			padding: var(--spacing) 0
		}

.post-type-archive-imprint .buy-the-book h4::after {
				content: url("data:image/svg+xml,%3Csvg width='12' height='15' viewBox='0 0 12 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.45834 12.8333L1.66667 8.45833M6.45834 12.8333L6.45834 0.333336M6.45834 12.8333L10.8333 8.45833' stroke='%23C33276' stroke-width='2'/%3E%3C/svg%3E%0A");
				margin-left: 1.25rem;
				margin-left: var(--spacing);
				display: inline-block;
			}

.post-type-archive-imprint .buy-the-book h4.active {
				border-bottom: none
			}

.post-type-archive-imprint .buy-the-book h4.active::after {
					transform: rotate(180deg);
				}

.post-type-archive-imprint .buy-the-book h4.active + ul {
					display: block;
				}

.post-type-archive-imprint .buy-the-book ul {
			list-style: none;
			margin: 0;
			padding: 0;
			display: none;
		}

.post-type-archive-imprint .buy-the-book ul li {
				padding-top: calc(1.25rem / 2);
				padding-top: var(--spacing-tight);
				text-align: center;
			}

.post-type-archive-imprint .buy-the-book ul li a {
					border-bottom: 2px dotted #c33276;
					border-bottom: 2px dotted var(--color-accent);
					display: inline;
					width: auto;
				}

/*--------------------------------------------------------------
  # Single
--------------------------------------------------------------*/

.single-post .entry-footer {
		display: none;
	}

.single-post .nav-links {
		margin-top: calc(1.25rem * 4);
		margin-top: var(--spacing-looser);
	}

/*--------------------------------------------------------------
  # Books Single
--------------------------------------------------------------*/

.single-book .entry-content > *:first-child {
			border-bottom: 1px solid #c4c4c4;
			border-bottom: 1px solid var(--color-gray-light);
			padding-bottom: calc(1.25rem * 6);
			padding-bottom: var(--spacing-huge);
		}

.single-book .book-header .wp-block-column:first-child {
			margin-top: calc(1.25rem * 2);
			margin-top: var(--spacing-loose);
			order: 1
		}

@media (min-width: 600px) {
		.single-book .book-header .wp-block-column:first-child {
				margin-top: 0;
				order: 0;
				padding-right: 1.25rem;
				padding-right: var(--spacing)
		}
			}

.single-book h1 {
		margin: 0 0 calc(1.25rem / 2);
		margin: 0 0 var(--spacing-tight);
	}

.single-book .book-meta {
		color: #595959;
		color: var(--color-gray);
		font-size: 1.13rem;
		font-size: var(--font-size-just-bigger);
		margin: 0 0 calc(1.25rem * 2);
		margin: 0 0 var(--spacing-loose);
		text-transform: uppercase;
	}

.single-book .is-style-topper {
		font-size: 1.313rem;
		font-size: var(--font-size-body);
		margin-top: calc(1.25rem * 4);
		margin-top: var(--spacing-looser);
		margin-bottom: 1.25rem;
		margin-bottom: var(--spacing);
	}

.single-book .wp-block-quote {
		border: none;
		margin-top: calc(1.25rem * 2);
		margin-top: var(--spacing-loose);
		margin-bottom: calc(1.25rem * 2);
		margin-bottom: var(--spacing-loose);
		padding-left: 60px;
		position: relative
	}

.single-book .wp-block-quote::before {
			color: #c33276;
			color: var(--color-accent);
			content: "\201C";
			display: block;
			font-family: "Source Serif Pro", serif;
			font-family: var(--font-serif);
			font-size: 100px;
			font-weight: 900;
			left: 0;
			line-height: 1;
			position: absolute;
		}

.single-book .wp-block-quote p {
			font-weight: 400;
		}

.single-book .wp-block-quote cite {
			font-size: 1.13rem;
			font-size: var(--font-size-just-bigger);
		}

.single-book .entry-footer {
		border-top: 1px solid #c4c4c4;
		border-top: 1px solid var(--color-gray-light);
		margin: calc(1.25rem * 6) auto 0;
		margin: var(--spacing-huge) auto 0;
		padding-top: calc(1.25rem * 2);
		padding-top: var(--spacing-loose);
		max-width: 1080px;
		max-width: var(--max-width);
	}

/*--------------------------------------------------------------
  # In page navigation
--------------------------------------------------------------*/

.in-page-nav {
	font-size: 1rem;
	font-size: var(--font-size-default);
	margin-bottom: calc(1.25rem * 2);
	margin-bottom: var(--spacing-loose);
	/* stylelint-enable */
}

/* stylelint-disable */

.in-page-nav a {
		color: #c33276;
		color: var(--color-accent);
		font-weight: 900;
	}

.in-page-nav a + a {
			margin-left: 1.25rem;
			margin-left: var(--spacing);
		}

.in-page-nav a:hover {
			border-color: currentColor;
			color: #333;
			color: var(--color-primary);
		}

/*--------------------------------------------------------------
  # 404 page
--------------------------------------------------------------*/

.error404 .site, .search .site {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
	}

.error404 .site-header, .search .site-header {
		width: 100%;
	}

.error404 main, .search main {
		margin: 1.25rem auto;
		margin: var(--spacing) auto;
		max-width: 897px;
		max-width: var(--max-content);
	}

.error404 .site-footer, .search .site-footer {
		margin-top: auto;
	}

.not-found {
	text-align: center;
}

.not-found .search-form {
		display: flex;
		justify-content: center;
		margin: calc(1.25rem * 2) 0;
		margin: var(--spacing-loose) 0;
	}

.not-found .search-field {
		-webkit-appearance: none;
		   -moz-appearance: none;
		        appearance: none;
		border: 1px solid #595959;
		border: 1px solid var(--color-gray);
		height: 100%;
		margin: 0;
		padding: calc(1.25rem / 2);
		padding: var(--spacing-tight);
	}

/*--------------------------------------------------------------
  # Accessibility
--------------------------------------------------------------*/

/* --- Text meant only for screen readers. --- */

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

.hide-visually {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	padding: 0 !important;
	border: 0 !important;
	height: 1px !important;
	width: 1px !important;
	overflow: hidden;
}

/* --- Skip Link --- */

.skip-link {
	left: -9999rem;
	top: 0;
	z-index: 999999999;
}

.skip-link:focus {
	background: #f1f1f1;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	color: #0073aa;
	font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Segoe UI Symbol";
	font-size: 14px;
	font-weight: 700;
	left: 6px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 7px;
	z-index: 100000;
}

/*--------------------------------------------------------------
  # Alignments
--------------------------------------------------------------*/

.alignwide,
* > .alignwide {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	max-width: 1080px;
	max-width: var(--max-width);
}

.alignfull,
* > .alignfull {
	margin-left: calc(1.25rem * -1);
	margin-left: calc(var(--gutter) * -1);
	width: 100vw;
	max-width: 100vw;
}

/*--------------------------------------------------------------
  # Typography
--------------------------------------------------------------*/

.uppercase,
.is-style-uppercase {
	text-transform: uppercase;
}

/*--------------------------------------------------------------
  # Colors
--------------------------------------------------------------*/

/* --- Background colors --- */

.wp-block-group.has-background,
.has-background {
	margin-bottom: calc(1.25rem * 6);
	margin-bottom: var(--spacing-huge);
	margin-top: calc(1.25rem * 6);
	margin-top: var(--spacing-huge);
	padding: 1.25rem 1.25rem;
	padding: var(--spacing) var(--gutter);
}

.has-gray-dark-background-color {
	background-color: #333;
	background-color: var(--color-primary);
}

.has-accent-background-color {
	background-color: #c33276;
	background-color: var(--color-accent);
}

.has-accent-light-background-color {
	background-color: #f5d8e6;
	background-color: var(--color-accent-light);
}

.has-gray-background-color {
	background-color: #595959;
	background-color: var(--color-gray);
}

.has-black-background-color {
	background-color: #000;
	background-color: var(--color-black);
}

.has-white-background-color {
	background-color: #fff;
	background-color: var(--color-white);
}

/* --- Text colors --- */

.has-gray-dark-color {
	color: #333;
	color: var(--color-primary);
}

.has-accent-color {
	color: #c33276;
	color: var(--color-accent);
}

.has-accent-light-color {
	color: #f5d8e6;
	color: var(--color-accent-light);
}

.has-gray-color {
	color: #595959;
	color: var(--color-gray);
}

.has-black-color {
	color: #000;
	color: var(--color-black);
}

.has-white-color {
	color: #fff;
	color: var(--color-white);
}