/*
Theme Name: Michael Guthrie
Theme URI: https://michaelguthrie.com
Author: artfusion
Author URI: https://michaelguthrie.com
Description: The michaelguthrie.com theme: a plain, quiet page for his writing, photographs and work. Made as a one-time copy of Ipsum (the WordPress 7.2 default theme by the WordPress team) and reshaped for one site.
Requires at least: 7.1
Tested up to: 7.1
Requires PHP: 7.4
Version: 3.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mguthrie
Update URI: false
Tags: one-column, full-site-editing, block-patterns, editor-style, featured-images
*/

@view-transition {
	navigation: auto;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::selection {
	background: var(--wp--preset--color--rule);
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
}

a {
	text-underline-offset: 0.14em;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--wp--preset--color--muted);
}

img {
	height: auto;
}

time,
.wp-block-post-date {
	font-variant-numeric: tabular-nums;
}

header.wp-block-template-part,
footer.wp-block-template-part {
	margin-block-start: 0 !important;
}

.wp-block-post-content p {
	text-wrap: pretty;
}

h1, h2, h3, .wp-block-post-title, .wp-block-query-title {
	text-wrap: balance;
}

/* Header and footer */

.mg-header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--60);
}

.mg-header .wp-block-site-title {
	margin: 0;
}

.mg-nav .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--30);
}

.mg-nav .current-menu-item > a {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.mg-footer {
	border-top: 1px solid var(--wp--preset--color--rule);
	margin-top: var(--wp--preset--spacing--80);
	padding-top: var(--wp--preset--spacing--30);
	padding-bottom: var(--wp--preset--spacing--60);
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
}

.mg-footer p {
	margin: 0;
}

.mg-footer a {
	color: inherit;
	text-decoration: none;
}

.mg-footer a:hover {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
}

.mg-footer__links {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	flex-wrap: wrap;
}

/* Home */

.mg-intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 112px;
	gap: var(--wp--preset--spacing--40);
	align-items: start;
	margin-bottom: var(--wp--preset--spacing--70) !important;
}

.mg-intro__portrait {
	margin: 0 !important;
	line-height: 0;
}

.mg-intro__portrait img {
	width: 112px;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 2px;
	display: block;
}

.mg-intro h1 {
	margin: 0 0 var(--wp--preset--spacing--30) !important;
}

.mg-intro p {
	margin: 0 !important;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.45;
	color: var(--wp--preset--color--muted);
	max-width: 32ch;
}

.mg-section {
	margin-top: 0 !important;
	margin-bottom: var(--wp--preset--spacing--70) !important;
}

.mg-label {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1em;
	font-family: var(--wp--preset--font-family--ui) !important;
	font-size: var(--wp--preset--font-size--small) !important;
	font-weight: 500 !important;
	color: var(--wp--preset--color--muted);
	letter-spacing: 0.01em;
	margin-top: 0 !important;
	margin-bottom: var(--wp--preset--spacing--30) !important;
	padding-bottom: var(--wp--preset--spacing--20);
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.mg-label a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.mg-label a:hover {
	text-decoration: underline;
}

.mg-more {
	margin-top: var(--wp--preset--spacing--30) !important;
	margin-bottom: 0 !important;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
}

/* Photograph grid */

.mg-photos {
	margin: 0 !important;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--20);
	padding: 0;
	list-style: none;
}

.mg-photos li {
	margin: 0;
	line-height: 0;
}

.mg-photos a {
	display: block;
	line-height: 0;
}

.mg-photos img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 2px;
	display: block;
}

.mg-photos__caption {
	margin-top: var(--wp--preset--spacing--20) !important;
	margin-bottom: 0 !important;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.mg-photos__caption a {
	color: var(--wp--preset--color--contrast);
}

/* Rows: dated lists */

.mg-rows .wp-block-post-template {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mg-rows .wp-block-post {
	display: grid;
	grid-template-columns: 6.5rem minmax(0, 1fr);
	column-gap: var(--wp--preset--spacing--30);
	row-gap: 0.2rem;
	align-items: start;
	padding: 0.75em 0;
	margin: 0;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.mg-rows .wp-block-post:first-child {
	padding-top: 0;
}

.mg-rows .wp-block-post-date,
.mg-rows .wp-block-post-terms {
	grid-column: 1;
	margin: 0;
	padding-top: 0.3em;
}

.mg-rows .wp-block-post-title {
	grid-column: 2;
	font-size: var(--wp--preset--font-size--medium);
	margin: 0;
}

.mg-rows--large .wp-block-post-title {
	font-size: var(--wp--preset--font-size--large);
}

.mg-rows .wp-block-post-excerpt {
	grid-column: 2;
	margin: 0;
}

.mg-rows .wp-block-post-excerpt__excerpt {
	margin: 0;
}

.mg-rows .wp-block-post-excerpt__more-text {
	display: none;
}

.mg-rows--numbered .wp-block-post-template {
	counter-reset: mg-piece -1;
}

.mg-rows--numbered .wp-block-post {
	counter-increment: mg-piece;
	grid-template-columns: 2.5rem 6.5rem minmax(0, 1fr);
}

.mg-rows--numbered .wp-block-post::before {
	content: counter(mg-piece, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	padding-top: 0.3em;
	font-variant-numeric: tabular-nums;
}

.mg-rows--numbered .wp-block-post-date {
	grid-column: 2;
}

.mg-rows--numbered .wp-block-post-title,
.mg-rows--numbered .wp-block-post-excerpt {
	grid-column: 3;
}

/* Archive grids */

.mg-grid .wp-block-post-template {
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30) !important;
}

.mg-grid .wp-block-post-featured-image {
	margin: 0 0 var(--wp--preset--spacing--20);
	line-height: 0;
}

.mg-grid .wp-block-post-featured-image img {
	aspect-ratio: 1;
	object-fit: cover;
	width: 100%;
}

.mg-grid .wp-block-post-title {
	font-size: var(--wp--preset--font-size--medium);
	margin: 0 0 0.15em;
}

.mg-grid .wp-block-post-date {
	display: block;
	margin: 0;
}

/* Single */

.mg-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	align-items: baseline;
	margin: 0 0 var(--wp--preset--spacing--30) !important;
}

.mg-facts {
	list-style: none;
	padding: 0 !important;
	margin: var(--wp--preset--spacing--40) 0;
}

.mg-facts li {
	display: grid;
	grid-template-columns: 7rem minmax(0, 1fr);
	gap: var(--wp--preset--spacing--30);
	padding: 0.5em 0;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.mg-facts strong {
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--muted);
}

.mg-overlay {
	min-height: 100vh;
}

@media (max-width: 781px) {
	.mg-intro {
		grid-template-columns: minmax(0, 1fr);
	}

	.mg-intro__portrait {
		order: -1;
	}

	.mg-rows .wp-block-post,
	.mg-rows--numbered .wp-block-post {
		grid-template-columns: minmax(0, 1fr);
	}

	.mg-rows .wp-block-post-date,
	.mg-rows .wp-block-post-terms,
	.mg-rows .wp-block-post-title,
	.mg-rows .wp-block-post-excerpt,
	.mg-rows--numbered .wp-block-post-date,
	.mg-rows--numbered .wp-block-post-title,
	.mg-rows--numbered .wp-block-post-excerpt {
		grid-column: 1;
	}

	.mg-rows--numbered .wp-block-post::before {
		display: none;
	}

	.mg-photos {
		gap: 6px;
	}

	.mg-facts li {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.2em;
	}
}

@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}
}