/*
Theme Name: Trivet
Theme URI: https://trivet.media
Author: Trivet Media
Author URI: https://trivet.media
Description: A beautiful, modern theme designed for food blogs. Features built-in recipe management with structured data, print-friendly recipe cards, and a cooking mode for step-by-step instructions.
Version: 1.0.0
Requires at least: 5.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: trivet
Tags: food-and-drink, blog, custom-menu, featured-images, theme-options, translation-ready

Trivet WordPress Theme, (C) 2024 Trivet Media
Trivet is distributed under the terms of the GNU GPL.
*/

/* CUSTOM PROPERTIES --------------------------------*/

* {

	/* brand colors */

	--brand-primary: #D9580D;
	--brand-secondary: #FF7729;
	--brand-tertiary: #0DD9D8;

	/* body */

	--body-background-color: #fff;

	/* fonts */

	--font-color: #222;
	--font-color-reverse: #fff;
	--font-body: 'Lora', serif;
	--font-display: 'Playfair Display', serif;
	--font-ui: 'Rubik', sans-serif;
	--font-accent: 'Architects Daughter', cursive;

	/* links */

	--link-color: var(--font-color);
	--link-underline-color: #C1D923;

	/* global header */

	--header-background-color: #fff;
	--header-background-img: none;
	--header-logo-aspect-ratio: ;
	--header-logo-color: var(--font-color);
	--header-logo-margin: 2rem 0;
	--header-logo-max-width: none;
	--header-logo-width: 80%;
	--nav-global-menu-align: center;
	--header-text-align: center;

	/* SINGLE LINE global header layout */

	/* --header-grid-config: 1fr 1fr 1fr 1fr;
	--header-grid-gap: 1rem;
	--header-grid-padding: 0 1rem;
	--header-logo-grid-start: A1;
	--header-logo-grid-end: A3;
	--header-logo-grid-justify: start;

	--nav-search-grid-start: A4;
	--nav-search-grid-end: ARM;
	--nav-search-grid-justify: end;
	--nav-search-grid-row: 1;

	--nav-social-grid-start: A3;
	--nav-social-grid-end: A3;
	--nav-social-grid-justify: end;
	--nav-social-grid-row: 1;

	--nav-global-menu-align: center;
	--nav-global-menu-justify: start;
	--nav-global-grid-start: BLM;
	--nav-global-grid-end: BRM;
	--nav-global-grid-row: 2; */

	/* LEFT global header layout */

	--header-grid-config: 4fr 1fr 1fr 1fr;
	--header-grid-gap: 0;
	--header-logo-grid-start: A1;
	--header-logo-grid-end: A2;
	--header-logo-grid-justify: start;

	--nav-search-grid-start: A4;
	--nav-search-grid-end: A4;
	--nav-search-grid-justify: end;
	--nav-search-grid-row: 1;

	--nav-social-grid-start: A3;
	--nav-social-grid-end: A3;
	--nav-social-grid-justify: center;
	--nav-social-grid-row: 1;

	--nav-global-menu-justify: start;
	--nav-global-grid-start: B1;
	--nav-global-grid-end: B4;
	--nav-global-grid-row: 2;

	/* CENTER global header layout */

	/* --header-grid-config-large: 1fr 2fr 2fr 1fr;
	--header-logo-grid-start: A2;
	--header-logo-grid-end: A3;
	--header-logo-grid-justify: center;

	--nav-search-grid-area: A4;
	--nav-search-grid-justify: end;

	--nav-social-grid-area: A1;
	--nav-social-grid-justify: start;

	--nav-global-menu-justify: center;
	--nav-global-grid-start: B1;
	--nav-global-grid-end: B4; */


	/* navigation */

	--nav-background-color: var(--body-background);
	--nav-border: 1px solid var(--border-color);
	--nav-border-radius: 0;
	--nav-border-width: 1px 0;
	--nav-font-size: 1.125rem;
	--nav-font-weight: 300;
	--nav-line-height: 3rem;
	--nav-link-color: var(--font-color);
	--nav-link-hover-color: var(--font-color);
	--nav-social-color: var(--font-color);
	--nav-social-color-hover: var(--link-underline-color);

	/* buttons */

	--button-background-color: var(--body-background-color);
	--button-border: 1px solid var(--link-underline-color);
	--button-border-radius: 0.25rem;
	--button-font-color: var(--font-color);
	--button-font-size: 1rem;
	--button-font-weight: 400;
	--button-hover-background-color: var(--link-underline-color);
	--button-hover-font-color: var(--font-color);

	/* borders */

	--border-color: #ddd;					        					  /* color definition */
	--border-radius-default: 0;												/* units rem | em | px */

	/* categories */

	--category-background-color: var(--body-background-color);			    /* color definition */
	--category-border: none;											    /* border rule unit-type-color */
	--category-divider: " / ";
	--category-font: var(--font-accent);
	--category-font-size: 1.25rem;										        /* units rem | em | px */
	--category-font-color: var(--brand-primary);							/* color definition */
	--category-padding: 0;
	--category-text-transform: none;                                        /* none | uppercase | lowercase */

	/* section headings */

	--section-label-font: var(--font-accent);								/* font declaration */
	--section-header-font-size: clamp(1.5rem, 5vw, 2.25rem);                /* unit rem | vx | em or clamp */
	--section-header-font-weight: 600;                                      /* number 100 - 900 */
	--section-header-text-align: left;                                      /* left | center | right */

	/* ads */

	--ad-background-color: #fafafa;								       /* color definition */

	/* recipe */

	--recipe-background-color: #FFF;                                      /* color definition */
	--recipe-counter-font: var(--font-accent);								/* font declaration */
	--recipe-counter-font-size: 2rem;							    		/* units rem | px */
	--recipe-counter-font-weight: 400;									    /* number 100 - 900 */
	--recipe-properties-font: var(--font-accent);
	--recipe-properties-font-size: 1.5rem;
	--recipe-properties-font-weight: 400;

	/* callouts */

	--callout-background-color: #fffff3;								  /* color definition */
	--callout-heading-font: var(--font-accent);								/* font declaration */
	--callout-heading-font-transform: none;							        /* none | uppercase | lowercase */

	/* slideshows */

	--slideshow-counter-font: var(--font-accent);
	--slideshow-counter-font-size: 2.5rem;
	--slideshow-counter-font-weight: 400;

	/* dimensions */

	--page-max-width: 75rem;												/* units rem | px */
	--grid-gap-default: 1rem;

}

@media screen and (min-width: 45rem) {

	* {

		--header-grid-config: 1fr 1fr 1fr 1fr;

		--slideshow-counter-font-size: 4rem;

	}

}

@media screen and (min-width: 60rem) {

	* {

		--grid-gap-default: 2rem;

	}

}


/* BASICS -------------------------------------------*/

html, * {
	box-sizing: border-box;
}

sup, sub {
	font-size: 0.625em;
	line-height: 1;
}

figure {
	margin: 0;
}

figcaption {
	font-size: 0.875rem;
	font-style: italic;
}

img, svg {
	max-width: 100%;
}

img {
	vertical-align: middle;
}

body {
	background-color: var(--body-background-color);
	font-family: var(--font-body);
	font-size: 100%;
	margin: 0;
}

a {
	color: var(--font-color);
	text-decoration-color: var(--link-underline-color);
	text-decoration-skip-ink: none;
	text-decoration-thickness: 0.125rem;
	transition: all 0.25s;
}

a:hover {
	text-decoration-thickness: 0.375rem;
}

h1 {
	font-family: var(--font-display);
}


/* AUTHOR AVATAR ------------------------------------*/

.author-avatar {
	background-color: #fff;
	border-radius: 50%;
	box-shadow: 0 0 0.125rem var(--link-underline-color);
	display: inline-block;
	height: 2.5rem;
	overflow: hidden;
	transition: box-shadow 0.5s;
	width: 2.5rem;
}

.author-avatar:hover {
	box-shadow: 0 0 0.75rem var(--link-underline-color);
}


/* STYLE GUIDE --------------------------------------*/

.style-guide-heading {
	border-bottom: 1px solid var(--border-color);
	font-family: var(--font-ui);
	font-size: 1rem;
	grid-column-end: -1;
	grid-column-start: 1;
	margin: 2rem 0;
	padding: 0.5rem 1rem;
	text-transform: uppercase;
}

.color-matrix {
	list-style-type: none;
	padding: 0 1rem;
	font-family: var(--font-ui);
}

.color-matrix li {
	display: flex;
	gap: 1rem;
	margin: 1rem 0;
}

.color-matrix-chip {
	border: 1px solid var(--border-color);
	display: block;
	flex-basis: 5rem;
	height: 5rem;
	width: 5rem;
}

.font-listings {
	font-size: 2rem;
	grid-column: 2 / 10;
	list-style-type: none;
	padding: 0 1rem;
}

.font-listings li {
	margin: 1.5rem 0;
	word-break: break-all;
}

.font-listings-label {
	display: block;
	font-family: var(--font-ui);
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
}

@media screen and (min-width: 45rem) {

	.color-matrix {
		display: grid;
		gap: 1rem;
		grid-column: 2 / 10;
		grid-template-columns: repeat(auto-fill, minmax(8rem,1fr));
		list-style-type: none;
	}

	.color-matrix li {
		display: block;
	}

	.color-matrix-chip {
		height: 0;
		padding-bottom: 100%;
		width: 100%;
	}

}

@media screen and (min-width: 60rem) {

	.color-matrix, .font-listings {
		padding: 0;
	}

}

/* FORMS --------------------------------------------*/

button, .button, input[type="submit"] {
	appearance: none;
	border: 2px solid var(--button-background-color);
	background-color: var(--button-background-color);
	border: var(--button-border);
	border-radius: var(--button-border-radius);
	color: var(--button-font-color);
	cursor: pointer;
	display: inline-block;
	font-family: var(--font-ui);
	font-size: var(--button-font-size);
	font-weight: var(--button-font-weight);
	line-height: 2em;
	-moz-appearance: none;
	padding: 0.5rem;
	text-decoration: none;
	transition: 0.25s all;
	-webkit-appearance: none;
}

.button-secondary {
	border-color: var(--brand-primary);
	background-color: transparent;
	color: var(--brand-primary);
}

button:hover, .button:hover, input[type="submit"]:hover {
	background-color: var(--button-hover-background-color);
	color: var(--button-hover-font-color);
}

.button-secondary:hover {
	color: #fff;
}

input[type="text"] {
	border: 1px solid #aaa;
	border-radius: var(--button-border-radius);
	font-family: var(--font-ui);
	font-size: 1rem;
	padding: 0.75rem;
}

/* STYLE GUIDE --------------------------------------*/

.utility-heading {

}


/* HEADER -------------------------------------------*/

.header-global {
	background-blend-mode: luminosity;
	background-color: var(--header-background-color);
	background-image: var(--header-background-img);
	background-size: 100%;
	display: grid;
	gap: 0;
	grid-template-areas:
		"ALM A1 A2 A3 A4 ARM"
		"BLM B1 B2 B3 B4 BRM";
	grid-template-columns: minmax(1rem, calc(50vw - (var(--page-max-width) * 0.5)))
		var(--header-grid-config)
		minmax(1rem, calc(50vw - (var(--page-max-width) * 0.5)));
	padding: var(--header-grid-padding);
	position: relative;
	text-align: var(--header-text-align);
	transition: all 0.25s;
}

.header-global-logo {
	display: inline-block;
	grid-column-end: var(--header-logo-grid-end);
	grid-column-start: var(--header-logo-grid-start);
	height: auto;
	margin: var(--header-logo-margin);
	max-height: var(--header-logo-max-height);
	max-width: var(--header-logo-max-width);
	width: var(--header-logo-width);
}

@supports (aspect-ratio: 1 / 1) {

	.header-global-logo {
		aspect-ratio: var(--header-logo-aspect-ratio);
		height: auto;
		max-width: none;
		object-fit: cover;
		overflow: hidden;
		width: 100%;
	}

}

.header-global-logo svg {
	color: initial;
	width: 100%;
}

@media screen and (min-width: 45rem) {

	.header-global {
		column-gap: var(--grid-gap-default);
	}

	.header-global-logo {
		grid-column-end: var(--header-logo-grid-end);
		grid-column-start: var(--header-logo-grid-start);
		justify-self: var(--header-logo-grid-justify);
	}

}

/* MAIN NAVIGATION ----------------------------------*/

.nav-global {
	background-color: var(--nav-background-color);
	border-radius: var(--nav-border-radius);
	display: block;
	font-family: var(--font-ui);
	grid-column-start: var(--nav-global-grid-start);
	grid-column-end: var(--nav-global-grid-end);
	grid-row: var(--nav-global-grid-row);
	margin: 0;
	max-height: 0;
	overflow: hidden;
	padding: 0;
	position: relative;
	width: 100%;
	z-index: 100;
}

#nav-global-toggle-check {
	height: 0;
	visibility: hidden;
	position: absolute;
	width: 0;
}

.nav-global-toggle {
	align-self: center;
	background-color: transparent;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-default);
	color: var(--font-color);
	cursor: pointer;
	display: inline-block;
	font-family: var(--font-ui);
	grid-area: A4;
	height: 2rem;
	justify-self: end;
	overflow: hidden;
	position: relative;
	text-indent: 100%;
	width: 2rem;
}

.nav-global-toggle:before, .nav-global-toggle:after {
	background-color: var(--font-color);
	content: "";
	display: inline-block;
	height: 0.1875rem;
	left: 0.3125rem;
	position: absolute;
	transition: all 0.25s;
	top: 0.5rem;
	width: 1.25rem;
}

.nav-global-toggle:after {
	box-shadow: 0 0.375rem 0 var(--font-color);
	opacity: 1;
	top: 0.875rem;
}

#nav-global-toggle-check:checked + .nav-global-toggle {

}

#nav-global-toggle-check:checked + .nav-global-toggle:before {
	background-color: var(--brand-secondary);
	border-radius: 0.125rem;
	left: 0.1825rem;
	top: 0.875rem;
	transform: rotate(45deg);
	width: 1.5rem;
}

#nav-global-toggle-check:checked + .nav-global-toggle:after {
	background-color: var(--brand-secondary);
	border-radius: 0.125rem;
	box-shadow: 0 0 0 var(--body-background-color);
	left: 0.1825rem;
	top: 0.875rem;
	transform: rotate(-45deg);
	width: 1.5rem;
}

#nav-global-toggle-check:checked ~ .nav-global {
	max-height: unset;
	opacity: 1;
}

.nav-global-menu {
	border-bottom: 0.5px dotted var(--border-color);
	display: block;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.nav-global-menu li {
	display: block;
	position: relative;
}

.nav-dropdown-menu {
	background-color: var(--nav-dropdown-background-color);
	padding: 0;
}

.nav-global-menu > li:hover .nav-dropdown-menu {
	display: block;
}

.nav-global-menu a {
	border-bottom: 0.5px dotted var(--border-color);
	color: var(--nav-link-color);
	display: block;
	font-size: var(--nav-font-size);
	font-weight: var(--nav-font-weight);
	line-height: var(--nav-line-height);
	padding: 0;
	text-decoration: none;
}

/* .nav-global-menu > li:contains() > a {
	font-weight: 700;
} */

.nav-global-menu a:hover {
	background-color: rgba(0,0,0,0.125);
}

@media screen and (min-width: 45rem) {

	.nav-global-toggle {
		display: none;
	}

	.nav-global-toggle:before, .nav-global-toggle:after {
		background-color: var(--brand-secondary);
		box-shadow: none;
		opacity: 0;
	}

	#nav-global-toggle-check:checked + .nav-global-toggle {
		background-size: 5%;
	}

	#nav-global-toggle-check:checked + .nav-global-toggle:before, #nav-global-toggle-check:checked + .nav-global-toggle:after {
		opacity: 1;
	}

	.nav-global {
		display: contents;
		grid-column-start: unset;
		grid-column-end: unset;
		grid-row: unset;
		max-height: none;
		overflow: visible;
		position: static;
	}

	.nav-global-menu {
		align-self: var(--nav-global-menu-align);
		background-color: var(--nav-background-color);
		border: var(--nav-border);
		border-width: var(--nav-border-width);
		border-radius: 0;
		display: flex;
		grid-column-start: var(--nav-global-grid-start);
		grid-column-end: var(--nav-global-grid-end);
		grid-row: var(--nav-global-grid-row);
		grid-row-end: ;
		grid-row-start: ;
		justify-content: var(--nav-global-menu-justify);
		margin: 0;
	}

	.nav-global-menu li {
		display: inline-block;
		position: static;
	}

	.nav-dropdown-menu {
		border: 0;
		left: 0;
		max-height: 0rem;
		overflow: hidden;
		position: absolute;
		text-align: center;
		top: 100%;
		transition: max-height 0.25s;
		width: 100%;
		z-index: 10;
	}

	.nav-global-menu > li:hover {
		background-color: var(--nav-dropdown-background-color);
	}

	.nav-global-menu > li:hover > .nav-dropdown-menu {
		max-height: 4rem;
	}

	.nav-global-menu a {
		border: none;
		color: var(--nav-link-color);
		display: inline-block;
		font-size: var(--nav-font-size);
		font-weight: var(--nav-font-weight);
		padding: 0 1rem;
		position: static;
	}

	.nav-global-menu a:hover {
		color: var(--nav-link-hover-color);
		transition: background-color 0.25s;
	}

}


/* SEARCH -------------------------------------------*/

.nav-global-search {
	display: block;
	margin: 1rem;
	max-width: var(--page-max-width);
	position: relative;
}

.nav-global-search fieldset {
	border: 0;
	display: flex;
	margin: 0;
	padding: 0;
}

.nav-global-search legend {
	font-size: 0.875rem;
	font-family: var(--font-body);
	padding: 0 0 0.5rem;
}

.nav-global-search input[type="text"] {
	padding: 0.5rem;
	width: 100%;
}

.nav-global-search input[type="submit"] {
	background-color: #fff;
	background-image: url(../img/icon_search.svg);
	background-position: center;
	background-repeat: no-repeat;
	border: none;
	bottom: 0.25rem;
	overflow: hidden;
	padding: 0;
	position: absolute;
	right: calc(0.25rem);
	border-right: .5rem solid #fff;
	border-left: .5rem solid #fff;
	text-indent: 100%;
	top: 0.25rem;
	width: 2rem;
}

@media screen and (min-width: 45rem) {

	.nav-global-search {
		align-self: center;
		background-color: transparent;
		border: 0;
		grid-column-end: var(--nav-search-grid-end);
		grid-column-start: var(--nav-search-grid-start);
		grid-row: var(--nav-search-grid-row);
		justify-self: var(--nav-search-grid-justify);
		margin: 0;
		overflow: hidden;
		padding: 0;
		position: relative;
		width: 100%;
	}

	.nav-global-search input[type="submit"] {
	}

}

/* SOCIAL NAVIGATION --------------------------------*/

.nav-social-menu {
	align-items: center;
	display: flex;
	gap: 1rem;
	justify-content: center;
	list-style-type: none;
	margin: 0;
	padding: 1rem;
	text-align: center;
}

.nav-social-menu li {
	display: inline-block;
}

.nav-social-link {
	color: var(--nav-social-color);
	display: inline-block;
	margin: 0;
	text-align: center;
}

.nav-social-link:hover {
	color: var(--nav-social-color-hover);
}

.nav-social-link svg {
	height: 1.5rem;
	width: 1.5rem;
}

.nav-social-link svg .st0 {
	fill: var(--font-color);
	transition: fill 0.25s;
}

.nav-social-link:hover svg .st0 {
	fill: var(--brand-primary);
}

@media screen and (min-width: 45rem) {

	.nav-social-menu {
		align-self: center;
		background-color: transparent;
		border: none;
		grid-column-end: var(--nav-social-grid-end);
		grid-column-start: var(--nav-social-grid-start);
		grid-row: var(--nav-social-grid-row);
		justify-self: var(--nav-social-grid-justify);
	}

	.nav-social {
		margin-right: 1rem;
	}
}


/* ARTICLE LAYOUT -----------------------------------*/

.article-main {
	margin: 0;
	/* max-width: var(--page-max-width); */
}

.article-header {
	text-align: center;
}

.article-header.article-header-full {
	max-width: none;
	position: relative;
}

.figure-block.figure-featured {
	margin: 0 0 1rem;
	max-width: none;
	width: 100%;
}

.article-header-full .figure-featured {
	height: 75vh;
	max-height: none;
	position: absolute;
	z-index: -1;
}

.article-header-full .figure-featured img {
	height: 100%;
	object-fit: cover;
	object-position: center;
	width: 100%;
}

.article-header-full .article-titling {
	align-items: center;
	background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0.5));
	display: flex;
	flex-direction: column;
	height: 75vh;
	justify-content: flex-end;
	padding-bottom: 5%;
}

.article-header-full .article-titling h1 {
	color: var(--font-color-reverse);
	font-size: clamp(2.5rem, 5vw, 4.5rem);
}

.article-category {
	list-style-type: none;
	padding: 0;
}

.article-category li {
	display: inline-block;
}

.article-category li:not(:first-child):before {
	content: var(--category-divider);
}

.article-category a {
	color: var(--brand-secondary);
	text-decoration: none;
}

.article-category a {
	background-color: var(--category-background-color);
	border: var(--category-border);
	color: var(--category-font-color);
	font-family: var(--category-font);
	font-size: var(--category-font-size);
	display: inline-block;
	height: 0;
	line-height: 0;
	padding: var(--category-padding);
}

.article-header-full .article-category a {
	color: var(--font-color-reverse);
}

.article-category a:hover {
	background-color: var(--brand-secondary);
}

.article-title {
	font-family: var(--font-display);
	font-size: 1.125rem;
	font-weight: var(--section-header-font-weight);
	line-height: 1.25em;
	margin: 0 0 0.5rem;
}

.article-header .article-title, .article-featured .article-title {
	font-size: 2rem;
	margin: 1rem;
	text-align: center;
}

.article-masthead {
	display: block;
	margin: 1rem;
	text-align: center;
}

.article-masthead-meta {
	font-family: var(--font-ui);
	font-size: 1rem;
	font-weight: 400;
}

.article-masthead .author-link {
	font-weight: 600;
}

.article-masthead .author-avatar {
	margin-bottom: 1rem;
}

.article-masthead .author-name {
	display: block;
	font-family: var(--font-ui);
}

.article-masthead-actions {
	margin: 0.5rem 0;
}

/* BASIC PAGE ---------------------------------------*/

.section-header {
	font-family: var(--font-display);
	margin: 0 1rem 1rem;
	padding: 1rem 0;
	text-align: var(--section-header-text-align);
}

.section-header h2 {
	font-family: var(--font-display);
	font-size: var(--section-header-font-size);
	font-weight: var(--section-header-font-weight);
	margin: 0 0 0.5rem;
}

.section-header p {
	font-size: 1.125rem;
	margin: 0.5rem 0;
}

.article-list {
	display: block;
	margin: 0 1rem 2rem;
	padding: 0;
}

.section-archive {
	margin: 4rem 0;
}

.article-listing {
	margin: 1rem 0;
}

.article-listing:last-of-type {
	border-bottom: none;
}

.article-listing-link {
	display: block;
	gap: 0;
}

.article-listing-link h1 {
	font-size: 1.25rem;
	margin: 0.5rem 0;
}

.article-listing-link figure {
	display: block;
	height: 0;
	margin: 0 0 0.25rem 0;
	overflow: hidden;
	padding-bottom: 100%;
	position: relative;
	width: 100%;
}

.article-listing-link figure img {
	left: 0;
	max-width: none;
	position: absolute;
	top: 0;
	transition: all 0.25s;
	width: 100%;
}

.article-listing-link:hover figure img {
	left: -5%;
	top: -5%;
	width: 110%;
}

.article-listing .article-category {
	color: var(--link-underline-color);
	margin: 0 0 0.25rem;
}

.article-description {
	font-size: 0.875rem;
	line-height: 1.5em;
	margin: 0 0 1rem;
}

.article-link {
	color: var(--link-underline-color);
	font-size: 0.875rem;
	margin: 0.5rem 0;
}

.article-list-footer {
	text-align: center;
}

@media screen and (min-width: 30rem) {

	.article-list {
		display: grid;
		gap: var(--grid-gap-default);
		grid-template-columns: repeat(2, 1fr);
		margin: 1rem;
	}

	.article-listing {
		margin: 0;
	}

}

@media screen and (min-width: 45rem) {

	.article-blog .section-archive, .section-header {
		grid-column: 2 / 10;
	}

	.article-list-footer {
		grid-column-end: -1;
		grid-column-start: 1;
	}

	.article-list {
		grid-template-columns: repeat(4, 1fr);
	}

	.article-listing {
		border-bottom: none;
		margin: 0;
		padding: 0;
	}

}

@media screen and (min-width: 60rem) {

	.article-blog .section-archive, .section-header {
		grid-column: 2 / 10;
	}

}

@media screen and (min-width: 75rem) {

	.section-header {
		margin: 0 auto 1rem;
	}

	.article-list {
		margin: 2rem auto;
	}

}


/* BODY TEXT BLOCKS ---------------------------------*/

.section-body {
	margin: 2rem 1rem;
}

.section-label {
	color: var(--brand-primary);
	font-family: var(--section-label-font);
	font-size: 1.25rem;
	font-weight: 900;
	margin: 2rem 0 0.75rem;
	text-align: center;
}

.section-body h3 {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-size: clamp(1.5rem, 5vw, 2.25rem);
	font-weight: var(--section-header-font-weight);
	line-height: 1.25;
	line-height: clamp(1.25, 3vw, 1.75);
	margin: 2rem 0;
	min-height: 0vw;
}

.section-body h4 {
	font-family: var(--font-display);
	font-size: 1.125rem;
	font-size: clamp(1rem, 3vw, 1.375rem);
	font-weight: 700;
	line-height: 1.375;
	line-height: clamp(1.375, 3vw, 1.5);
	min-height: 0vw;
}

.section-body p, .section-body ul, .section-body ol {
	font-size: 1.125rem;
	font-size: clamp(1rem, 3vw, 1.25rem);
	line-height: 1.5;
	line-height: clamp(1.5, 3vw, 1.75);
	margin: 1.5em 0;
	min-height: 0vw;
}

.section-body ul li, .section-body ol li {
	margin-bottom: 0.25em;
}

.section-body:last-of-type p:last-child {
	position: relative;
}

.section-body:last-of-type p:last-child:after {
/* 	background-color: var(--brand-tertiary);
	border-radius: 50%;
	content: "";
	display: inline-block;
	height: 1rem;
	margin: 0 0.5rem;
	width: 1rem;
	z-index: -1; */
}

.aside-disclaimer {
	background-color: var(--callout-background-color);
	border-radius: var(--border-radius-default);
	font-size: 0.875rem;
	font-style: italic;
	line-height: 1.5;
	margin: 2rem 1rem;
	padding: 1rem;
}

.aside-disclaimer span {
/* 	background-color: var(--link-underline-color); */
	font-weight: bold;
}

.aside-related {
	background-color: var(--callout-background-color);
	border-radius: var(--border-radius-default);
	margin: 1rem;
	max-width: 50%;
	padding: 1rem;
}

.aside-related h3 {
	font-family: var(--callout-heading-font);
	font-size: 1rem;
	margin: 0 0 0.75rem;
	text-transform: var(--callout-heading-font-transform);
}

.aside-related .article-listing-link h1 {
	font-size: 1.25rem;
}

@media screen and (min-width: 60rem) {

	.aside-related .article-listing-link {
		display: flex;
		gap: 1rem;
	}

	.aside-related .article-listing-image {
		height: auto;
		overflow: visible;
		padding-bottom: 0;
	}

	.aside-related .article-listing-image img {
		position: static;
	}

	.aside-related .article-listing-link:hover figure img {
		left: 0;
		top: 0;
		width: 100%;
	}

}

/* LINK LISTS --------------------------------------*/

.link-list ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.link-list li a {
	display: block;
	background-color: var(--callout-background-color);
	border-radius: var(--button-border-radius);
	border: var(--button-border);
	font-size: 1.2rem;
	line-height: 1.75;
	margin: 1rem 0;
	padding: 1rem;
	text-decoration: none;
}

.link-list li.strong-link a {
	text-decoration: none;
	font-size: 2rem;
	text-align: center;
}

.link-list li a span.title {
	display: block;
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: var(--link-underline-color);
	text-decoration-skip-ink: none;
	text-decoration-thickness: 0.125rem;
	transition: all 0.25s;
}

.link-list li a span.description {
	display: block;
	font-style: italic;
	text-decoration: none;
}

.link-list li a span.image {
	display: block;
	float: left;
	margin-right: 1rem;
	width: 10rem;
	height: 10rem;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	border-radius: var(--button-border-radius);
}

.link-list li a:hover span.title {
	text-decoration-thickness: 0.375rem;
}

.link-list li a:after {
  content: "";
  display: table;
  clear: both;
}

/* AD BLOCK --------------------------------------*/

.advertising-block {
	background-color: var(--ad-background-color);
	grid-column-end: -1;
	grid-column-start: 1;
	margin: 4rem 0;
	padding: 2rem 1rem 4rem;
	text-align: center;
}

.advertising-block h4 {
	color: #aaa;
	font-size: 0.75rem;
	letter-spacing: 0.125rem;
	margin: 0 0 1rem;
	text-transform: uppercase;
}


/* BASIC FIGURES ---------------------------------*/

.figure-block {
	margin: 0;
}

/* MULTI-IMAGE FIGUR------------------------------*/

.figure-block.figure-grid {
	display: grid;
	gap: 0.125rem;
	/* grid-auto-rows: calc(100vw / 4); */
	grid-column: 2 / span 6;
	grid-template-columns: repeat(2, 1fr);
	margin: 2rem 0;
}

.figure-grid figure {
	height: calc(100vw / 2);
	margin: 0;
}

.figure-grid figure img {
	height: 100%;
	object-fit: cover;
	object-position: center;
	width: 100%;
}

.figure-grid > figcaption {
	grid-column-end: -1;
	grid-column-start: 1;
}

.figure-grid figure:first-child:nth-last-child(1) {
	grid-column: span 2;
	grid-row: span 2;
	height: calc(100vw * 0.75);
}

.figure-grid figure:first-child:nth-last-child(3),
.figure-grid figure:first-child:nth-last-child(5) {
	grid-column: span 2;
	grid-row: span 2;
	height: calc(100vw / 2);
}

@media screen and (min-width: 45rem) {

	.article-header.article-header-spread {
		background-color: var(--recipe-background-color);
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, min-content);
		gap: var(--grid-gap-default);
		max-width: none;
		text-align: left;
	}

	.article-header-spread .figure-featured {
		grid-column: unset;
		grid-row: span 2;
		margin: 0;
		max-height: 90vh;
		max-width: none;
	}

	.article-header-spread .article-titling {
		align-items: flex-start;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		padding-right: 1rem;
		text-align: left;
	}

	.article-header-spread .article-title {
		align-self: end;
		margin: 1rem 0;
		text-align: left;
	}

	.article-header-spread .article-masthead {
		align-items: center;
		display: flex;
		margin: 0;
		padding: 1rem;
		text-align: left;
	}

	.article-header-spread .article-masthead {
		display: block;
		padding: 0 1rem 0 0;
	}

	.section-spread {
		align-items: center;
		display: flex;
		gap: var(--grid-gap-default);
		margin: 4rem auto;
		max-width: var(--page-max-width);
	}

	.section-spread > * {
		flex-basis: 50%;
	}

	.section-spread > .figure-block {
		margin: 0;
	}

	.section-spread > .section-body {
		margin: 0 1rem 0 0;
	}

}

@media screen and (min-width: 60rem) {

	.article-blog {
		align-items: start;
		display: grid;
		gap: var(--grid-gap-default);
		grid-template-columns:
			minmax(1rem, calc(50vw - (var(--page-max-width) * 0.5)))
			repeat(8,1fr)
			minmax(1rem, calc(50vw - (var(--page-max-width) * 0.5)));
	}

	.article-header {
		grid-column: 2 / 10;
	}

	.article-header-full {
		grid-column-end: -1;
		grid-column-start: 1;
	}

	.article-header .article-title, .article-featured .article-title {
		font-size: 3.5rem;
	}

	.article-header-full .article-masthead {
		border-top: 0;
		margin-top: 0;
	}

	.article-masthead {
		align-items: baseline;
		display: flex;
		margin: 0;
		padding: 1rem;
		text-align: left;
	}

	.article-masthead-author {
		border-right: 1px solid var(--border-color);
		margin-right: 1rem;
	}

	.article-header-spread .article-masthead-author {
		border-right: none;
		margin-right: none;
	}

	.article-masthead .author-avatar {
		height: 4rem;
		margin: 0 1rem 0 0;
		vertical-align: middle;
		width: 4rem;
	}

	.article-masthead .author-name {
		display: inline-block;
		margin: 0 1rem 0 0;
	}

	.article-masthead-actions {
		margin: 0 0 0 auto;
	}

	.section-body {
		grid-column: 3 / 8;
		margin: 0;
	}

	.link-list {
		grid-column: 2 / 10;
		margin: 2rem 0;
	}

	.figure-block {
		grid-column: 3 / 9;
		margin: 0;
	}

	.article-blog > .figure-block:not(.figure-grid) {
		display: grid;
		gap: var(--grid-gap-default);
		grid-template-columns: repeat(6, 1fr);
	}

	.article-blog > .figure-block:not(.figure-grid) img {
		grid-column: span 4;
	}

	.article-blog > .figure-block:not(.figure-grid) figcaption {
		grid-column: span 2;
	}

	.aside-disclaimer {
		grid-column: 8 / 10;
		margin: 0;
	}

	.aside-disclaimer p {
		margin: 0;
	}

	.aside-related {
		grid-column: 8 / 10;
		margin: 0;
		max-width: none;
	}

	.section-spread {
		grid-column: 2 / 10;
	}

	.figure-featured {
		margin: 0;
		max-height: 50vh;
		max-width: none;
		overflow: hidden;
	}

	.figure-featured img {
		height: 100%;
		object-fit: cover;
		object-position: center;
		width: 100%;
	}

	.figure-block.figure-grid {
		grid-column: 3 / 9;
		max-width: none;
	}

	.figure-grid figure {
		height: calc(var(--page-max-width) / 3);
		margin: 0;
		overflow: hidden;
	}

	.figure-grid figure:first-child:nth-last-child(1) {
		height: calc(var(--page-max-width) * 0.375);
	}

	.figure-grid figure:first-child:nth-last-child(3),
	.figure-grid figure:first-child:nth-last-child(5) {
		height: calc(var(--page-max-width) / 3);
	}

	.grid-left-medium {
		grid-column: 3 / span 2;
	}

	.grid-left-large {
		grid-column: 2 / span 3;
	}

	.grid-right-large {
		grid-column: 5 / span 3;
	}

}

@media screen and (min-width: 75rem) {

	.article-main {
		margin: 0 auto;
	}

}

/* VIDEO BLOCK ------------------------------------*/

.video-block {
	aspect-ratio: 16 / 9;
	margin: 2rem 1rem;
	position: relative;
}

.video-block iframe {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

@media screen and (min-width: 60rem) {

	.video-block {
		grid-column: 3 / 9;
		margin: 0;
	}

	.narrow-page .video-block {
		grid-column: 2 / 10;
		margin: 0;
	}
}

/* CAROUSEL BLOCK ---------------------------------*/

.section-label + h3 {
	margin-top: 0.75rem;
}

.carousel-block {
	margin: 0;
	position: relative;
}

.carousel-block-header {
	padding: 2rem 0 1rem;
	text-align: center;
}

.carousel-block-header h3 {
	font-family: var(--font-display);
	font-size: 1.75rem;
	font-weight: var(--section-header-font-weight);
	padding: 0 1rem;
}

.carousel-platen {
	background-color: var(--recipe-background-color);
	display: block;
}

.carousel-slide {
	counter-increment: list-item;
	flex: 0 0 100%;
	height: 90vh;
	position: relative;
	scroll-snap-align: center;
	width: 100%;
}

.carousel-content {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	height: 100%;
	left: 0;
	margin: 0;
	position: relative;
	top: 0;
	transition: opacity .5s ease-in-out;
	width: 100%;
}

.carousel-img {
	height: 50%;
	display: block;
	width: 100%;
}

.carousel-img img {
	height: 100%;
	object-fit: cover;
	object-position: center;
	width: 100%;
}

.carousel-caption {
	flex-basis: 50%;
	font-size: 1rem;
	font-style: normal;
	line-height: 1.4em;
	margin: 0;
	padding: 1rem;
}

.carousel-caption h4 {
	font-family: var(--font-display);
	font-size: 1.25rem;
	margin: 1rem 0 0.5rem;
}

.carousel-caption p {
	margin: 0.75rem 0;
}

.carousel-caption:before {
	color: var(--brand-primary);
	content: counter(list-item);
	display: block;
	font-family: var(--slideshow-counter-font);
	font-size: var(--slideshow-counter-font-size);
	font-weight: var(--slideshow-counter-weight);
	margin-bottom: 1rem;
	text-transform: uppercase;
	z-index: 100;
}

@media screen and (min-width: 45rem) {

	.carousel-block-header h3 {
		font-size: 2.75rem;
		padding: 0;
	}

	.carousel-slide {
		height: 80vh;
	}

	.carousel-content {
		flex-direction: row;
		gap: var(--grid-gap-default);
	}

	.carousel-img {
		height: 100%;
		width: 50%;
	}

	.carousel-caption {
		font-size: 1.375rem;
		padding: 2rem 2rem 2rem 0;
	}

	.carousel-caption h4 {
		font-size: 1.75rem;
	}

	.carousel-caption:before {
		margin-bottom: 2rem;
	}

}

@media screen and (min-width: 60rem) {

	.carousel-block {
		grid-column: 2 / 10;
	}

}


/* FLICKETY OPTIONS -------------------------------*/

.flickity-enabled:focus .flickity-viewport {
	outline: thin dotted;
	outline: 0.5rem auto var(--brand-primary);
}

.flickity-button {
	background-color: var(--brand-secondary);
	color: #fff;
}

.flickity-button:hover {
	background-color: var(--brand-primary);
}

.flickity-prev-next-button.previous, .flickity-prev-next-button.next  {
  bottom: 1rem;
  top: auto;
  transform: none;
}

.flickity-prev-next-button.previous {
	left: 1rem;
}

.flickity-prev-next-button.next {
	right: 1rem;
}

.flickity-enabled.is-fullscreen {
	background-color: var(--brand-secondary);
	background-blend-mode: multiply;
	padding-bottom: 2rem;
}

.flickity-enabled.is-fullscreen .carousel-slide {
	background-color: var(--recipe-background-color);
	height: 100%;
}

.flickity-enabled.is-fullscreen .flickity-prev-next-button.previous, .flickity-enabled.is-fullscreen .flickity-prev-next-button.next  {
	bottom: 3rem;
}

.flickity-fullscreen-button {
	right: 1rem;
	top: 1rem;
}

/* RECIPE VIEWS -----------------------------------*/

.article-recipe {
	background-color: var(--recipe-background-color);
	border: 1px solid var(--border-color);
	border-width: 1px 0;
	grid-column-end: -1;
	grid-column-start: 1;
	margin: 1rem 0.25rem;
	padding: var(--grid-gap-default);
}

.page-cook-view .article-recipe {
	border: none;
	margin: 0 0 2rem;
	max-width: none;
	padding: 0;
}

.recipe-header {
	display: block;
	text-align: center;
}

.page-cook-view .recipe-header {
	margin: 0 auto;
	max-width: var(--page-max-width);
	padding: 1rem;
}

.recipe-thumbnail {
	display: block;
	height: 12.225rem;
	margin: 1rem auto 2rem;
	overflow: hidden;
	width: 9rem;
}

/* .page-cook-view .recipe-thumbnail {
	display: block;
	height: auto;
	margin: 0 0 1rem;
	overflow: hidden;
	max-height: 40vh;
	width: auto;
} */

.recipe-thumbnail img {
	height: 100%;
	object-fit: cover;
	object-position: center;
	width: 100%;
}

.recipe-title {
	font-size: var(--section-header-font-size);
	font-weight: var(--section-header-font-weight);
	margin: 1rem 0;
}

.recipe-description {
	line-height: 1.5;
}

.recipe-rating {
	font-family: var(--font-ui);
	font-size: 0.875rem;
	margin: 1rem 0 2rem;
}

.recipe-rating b {
	color: var(--brand-primary);
	display: block;
	font-size: 1.5rem;
	margin: 0.5rem 0;
}

.recipe-properties {
	border-bottom: 0.5px solid #ddd;
	clear: left;
	margin: 2rem 0;
	text-align: left;
}

.page-cook-view .recipe-properties {
	flex-basis: 100%;
	margin: 1rem 0 4rem;
}

.recipe-properties div {
	align-items: baseline;
	border-top: 0.5px solid #ddd;
	gap: 1rem;
	padding: .25rem 0;
	vertical-align: baseline;
}

.recipe-properties dt {
	color: #444;
	flex-basis: 20%;
	font-family: var(--font-ui);
	font-size: 0.875rem;
	margin-bottom: 0.25rem;
	text-align: left;
	text-transform: uppercase;
}

.recipe-properties dd {
	font-family: var(--recipe-properties-font);
	font-size: var(--recipe-properties-font-size);
	font-weight: var(--recipe-properties-font-weight);
	margin: 0;
	padding: 0.25rem 0;
}

.recipe-properties dd b {
	/* color: var(--brand-secondary);
	font-family: var(--font-display);
	font-size: 2rem;
	font-variant-numeric: tabular-nums; */
}

.recipe-main {
	gap: var(--grid-gap-default);
	display: flex;
	flex-wrap: wrap;
	justify-content: stretch;
}

.page-cook-view .recipe-main {
	display: block;
	gap: 0;
	padding-bottom: 4rem;
	top: 0;
}

.recipe-ingredients {
	flex-grow: 1;
	font-size: 0.875rem;
}

.recipe-directions {
	flex-grow: 1;
}

.page-cook-view .recipe-ingredients, .page-cook-view .recipe-directions {
	padding: 1rem;
	position: relative;
}

#recipe-ingredients-check {
	visibility: hidden;
}

.recipe-ingredients-toggle {
	background-color: var(--brand-secondary);
	border-bottom: 1px solid var(--border-color);
	border-radius: 0.25rem;
	color: #fff;
	display: block;
	font-family: var(--font-ui);
	font-size: 1rem;
	font-weight: bold;
	line-height: 4rem;
	margin: 0;
	padding: 0 1rem;
	position: sticky;
	text-transform: uppercase;
	top: 1rem;
	z-index: 100;
}

.recipe-ingredients-toggle:before {
	content: "Show ";
}

#recipe-ingredients-check:checked ~ .recipe-ingredients {
	background-color: var(--body-background-color);
	border-bottom: 1px solid var(--border-color);
	max-height: 100vh;
	overflow: auto;
	padding-top: 5rem;
	position: sticky;
	top: 0;
	z-index: 50;
}

#recipe-ingredients-check:checked ~ .recipe-directions .recipe-ingredients-toggle:before {
	content: "Hide ";
}

.recipe-main h2 {
	background-color: var(--recipe-background-color);
	border-bottom: 1px solid var(--border-color);
	display: block;
	font-family: var(--font-ui);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 4rem;
	margin: 0 0 1.5rem;
	text-transform: uppercase;
}

.recipe-main h2:before {
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	display: inline-block;
	height: 2.25rem;
	vertical-align: middle;
	width: 3rem;
}

.recipe-ingredients h2:before {
	background-image: url(../img/noun_ingredient_1521439.svg);
}

.recipe-directions h2.directions:before {
	background-image: url(../img/noun_chopping_block_1521432.svg);
}

.recipe-directions h2.notes:before {
	background-image: url(../img/icon_note-pad.svg);
}

.recipe-ingredients h3 {
	font-family: var(--font-ui);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.25rem;
	text-transform: uppercase;
}

.recipe-directions h3 {
	font-family: var(--font-ui);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.5rem;
	margin-top: 1.5em;
	text-transform: none;
}

.page-cook-view .recipe-directions h3 {
	font-size: 1.5rem;
}

.recipe-directions li {
	line-height: 1.5em;
	margin-bottom: 1em;
}

.recipe-ingredients-list {
	list-style-type: none;
	margin-bottom: 2rem;
	padding: 0;
}

.recipe-ingredients-list li {
	column-gap: 1rem;
	display: flex;
	line-height: 1.5em;
	margin-bottom: 0.5em;
}

.ingredient-quantity {
	display: inline-block;
	text-align: right;
	width: 3rem;
}

.ingredient-name {
	display: inline-block;
	flex-grow: 1;
	width: 4rem;
}

.recipe-directions-steps {
	list-style-type: none;
	margin: 1rem 0 3rem;
	padding: 0;
}

.recipe-directions-steps li {
	counter-increment: item;
}

.page-cook-view .recipe-directions-steps li {
	display: block;
	font-size: 1.25em;
}

.recipe-directions-steps li::before {
	color: var(--brand-primary);
	content: counter(item);
	display: block;
	font-family: var(--recipe-counter-font);
	font-size: var(--recipe-counter-font-size);
	font-weight: var(--recipe-counter-font-weight);
	margin-bottom: 0.5rem;
	text-transform: uppercase;
}

.page-cook-view .recipe-directions-steps li:before {
	flex: none;
	font-size: 2em;
	line-height: 2em;
}

@media screen and (min-width: 60rem) {

	html.page-cook-view {
		scroll-snap-type: y proximity;
	}

	.page-cook-view .header-global {
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	.article-recipe {
		border-width: 1px;
		margin: 2rem auto;
		max-width: var(--page-max-width);
	}

	.recipe-main {
		flex-wrap: nowrap;
	}

	.page-cook-view .recipe-header-content {
		margin-top: 2rem;
	}

	.recipe-title {
		font-size: 2.5rem;
	}

	.recipe-description {
		font-size: 1.125rem;
		margin: 1rem auto;
		max-width: calc(var(--page-max-width) * .66);
	}

	.page-cook-view .recipe-description {
	}

	.recipe-properties {
		column-count: 2;
	}

	.recipe-main {
		flex-wrap: nowrap;
	}

	.page-cook-view .recipe-main {
		display: flex;
		margin: 0 auto;
		max-width: var(--page-max-width);
	}

	#recipe-ingredients-check, .recipe-ingredients-toggle {
		display: none;
	}

	.recipe-ingredients {
		flex-basis: 33%;
		flex-grow: 0;
		font-size: 1rem;
	}

	.recipe-directions {
		flex-basis: 66%;
		flex-grow: 0;
		font-size: 1.125rem;
	}

	.page-cook-view .recipe-ingredients, .page-cook-view .recipe-directions {
		padding: 1rem;
		position: relative;
	}

	.page-cook-view .recipe-ingredients-content {
		max-height: 100vh;
		overflow: auto;
		position: sticky;
		position: -webkit-sticky;
		top: 0;
	}

	.page-cook-view .recipe-directions h2 {
		position: sticky;
		top: 0;
	}

	.page-cook-view .recipe-directions-steps li {
		display: block;
		font-size: clamp(1.25rem, 3vh, 2rem);
		line-height: 1.5;
		padding-bottom: 25vh;
	}

	.page-cook-view .recipe-directions h3 {
		scroll-margin: 6em;
		scroll-snap-margin: 6rem;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	.page-cook-view .recipe-directions-steps li:before {
		flex: none;
		font-size: 2em;
		line-height: 2em;
		scroll-margin: 1em;
		scroll-snap-margin: 1rem;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}
}

/* ARCHIVE PAGE -------------------------------------*/

.page-archive {
	margin: 0 auto;
}

.header-archive {
	margin: 0 1rem;
	text-align: center;
}

.header-archive h1 {
	font-size: 3rem;
}

.header-archive p {
	font-size: 1.25rem;
}

@media screen and (min-width: 60rem) {

	.header-archive {
		margin: 0 2rem;
	}

	.article-archive {
		display: grid;
		gap: 2rem;
		grid-column-end: -1;
		grid-column-start: 1;
		grid-template-columns: repeat(4, 1fr);
		margin: 2rem;
	}

	/* .article-archive-header, .article-archive-more {
		grid-column-end: -1;
		grid-column-start: 1;
	} */

}

@media screen and (min-width: 75rem) {

	.header-archive {
		margin: 0;
	}

	.article-archive {
		margin: 2rem 0;
	}

}

/* PAGINATION ---------------------------------------*/

.archive-pagination {
	margin: 2rem 0;
	text-align: center;
}

.archive-pagination ul {
	font-family: var(--font-display);
	font-size: 2rem;
	list-style-type: none;
	margin: 1rem 0;
	padding: 0;
}

.archive-pagination li {
	display: inline-block;
	margin: 0 0.5rem;
}

.archive-pagination li a {
	text-decoration: none;
}

.archive-pagination li.active {
	font-weight: 700;
}


/* HOME PAGE ----------------------------------------*/

.page-home {
}

.section-home-featured .article-listing:first-child .article-listing-link {
	display: block;
}

.section-home-featured .article-listing:first-child .article-listing-image {
	height: 0;
	margin-bottom: 1rem;
	overflow: hidden;
	padding-bottom: 75%;
}

.article-featured-link {
	margin: 2rem 0;
}

.section-about {
	background-color: #fafafa;
	border: 1px solid var(--border-color);
	border-width: 0.5px 0;
	padding: 2rem 0;
	text-align: center;
}

.section-about-avatar {
	border-radius: 50%;
	border: 0.25rem solid var(--brand-primary);
	display: block;
	margin: 1rem auto;
	max-width: 12rem;
	overflow: hidden;
	width: 50%;
}

.section-about-main {
	margin: 0 1rem;
}

.section-about h3 {
	font-family: var(--font-display);
	font-size: 1.25rem;
	margin: 0.5rem 0;
}

.section-about p {
	font-size: 0.875rem;
	line-height: 1.5em;
	margin: 1rem 0;
}

@media screen and (min-width: 60rem) {

	.page-home {
		margin: 0 auto;
	}

	.section-home-featured .article-listing-image {
		height: 0;
		margin-bottom: 1rem;
		overflow: hidden;
		padding-bottom: 66%;
	}

	.section-home-featured .article-listing:first-child {
		grid-column: 1 / span 3;
		grid-row: 1 / span 2;
	}

	.section-home-featured .article-listing:first-child .article-title {
		font-size: 3rem;
	}

	.section-home-featured .article-listing:first-child .article-description {
		font-size: 1.25rem;
	}

	.section-home-featured .article-listing:first-child .article-link {
		font-size: 1rem;
	}

	.section-about-main {
		align-items: center;
		display: flex;
		margin: 2rem auto;
		max-width: var(--page-max-width);
	}

	.section-about-avater {
		flex-basis: 25%;
	}

	.section-about-copy {
		flex-basis: 75%;
		text-align: left;
	}

	.section-about-copy h3 {
		font-size: 2rem;
	}

	.section-about-copy p {
		font-size: 1.25rem;
	}

}

/* WIDE PROMO BLOCK ---------------------------------*/

.wide-promo-block {
	background-color: var(--color-primary);
}

.wide-promo-container {
	display: grid;
	grid-template-rows: 50% 5% 35% 10%;
}

.wide-promo-container > * {
	grid-column: 1;
	padding: 0 1rem;
}

.wide-promo-container .figure-block {
	grid-row-end: -1;
	grid-row-start: 1;
	max-height: 90vh;
	padding: 0;
}

.wide-promo-container .figure-block img {
	height: 100%;
	object-fit: cover;
	object-position: center;
	width: 100%;
}

.wide-promo-container .article-category {
	grid-column: 1;
	grid-row: 2;
}

.wide-promo-container h1 {
	align-self: center;
	font-size: 2rem;
	font-size: clamp(1.5rem, 8vw, 3rem);
	font-weight: 900;
	grid-column: 1;
	grid-row: 3;
	margin: 0;
	padding: 1rem;
}

.wide-promo-container date {
	grid-column: 1;
	grid-row: 4;
}

.wide-promo-container a {
	background-color: rgba(0,0,0,0);
	color: #fff;
	text-decoration: none;
	transition: background-color 0.25s;
}

.wide-promo-container a:hover {
	background-color: rgba(0,0,0,0.25);
}

.wide-promo-container date {
	color: #fff;
}

@media screen and (min-width: 45rem) {

	.wide-promo-block {
		grid-column-end: -1;
		grid-column-start: 1;
		overflow: hidden;
	}

	.wide-promo-container {
		grid-template-columns: repeat(8, 1fr);
		grid-template-rows: 15% 70% 15%;
		margin: 0 auto;
		max-width: var(--page-max-width);
	}

	.wide-promo-container .figure-block {
		grid-column: 1 / 5;
		grid-row: 1 / 4;
		position: relative;
	}

	.wide-promo-container .figure-block:before {
		bottom: 0;
		box-shadow: 0 0 1rem rgba(0,0,0,0.25);
		content: "";
		left: 0;
		mix-blend-mode: multiply;
		position: absolute;
		right: 0;
		top: 0;
	}

	.wide-promo-container .article-category {
		grid-column: 8;
		grid-row: 1;
		text-align: right;
	}

	.wide-promo-container .article-date {
		color: #fff;
		font-family: var(--font-ui);
		grid-column: 8;
		grid-row: 3;
		text-align: right;
	}

	.wide-promo-container h1 {
		align-self: center;
		font-size: 5rem;
		font-size: clamp(4rem, 10vw, 7rem);
		font-weight: 900;
		grid-column-end: -1;
		grid-column-start: 4;
		grid-row: 2;
		z-index: 10;
	}

}

/* FOOTER -------------------------------------------*/

.footer-global {
	text-align: center;
	margin: 4rem 0 0;
	padding: 4rem 0;
}

.footer-global-trivet {
	margin: 4rem 0;
}

.footer-global-trivet figure {
	display: inline-block;
	height: 4rem;
	margin: 0;
	width: 4rem;
}