/*
Theme Name: MCM Knuth
Theme URI: https://dennisonpro.info
Author: David Dennison
Description: A minimal block theme for long-form writing. Semantic HTML templates, one stylesheet, and no JavaScript by default.
Version: 1.0.0
Requires at least: 6.8
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mcm-knuth
*/

 /* Typography */
 @font-face {
	font-family: Syne;
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("fonts/syne-latin-wght-normal.woff2") format("woff2");
 }

 @font-face {
	font-family: "Old Standard TT";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/old-standard-tt-latin-400-normal.woff2") format("woff2");
 }

  @font-face {
	font-family: "Old Standard TT";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/old-standard-tt-latin-400-italic.woff2") format("woff2");
 }

  @font-face {
	font-family: "Old Standard TT";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("fonts/old-standard-tt-latin-700-normal.woff2") format("woff2");
 }

 @font-face {
	font-family: "Courier Prime";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/courier-prime-latin-400-normal.woff2") format("woff2");
 }

  @font-face {
	font-family: "Courier Prime";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("fonts/courier-prime-latin-700-normal.woff2") format("woff2");
 }

:root {
	--page-max: 60rem;
	--page-background-autumn: #91453F; /** Dunn-Edwards 1945 Red Craft DET 423 */
	--page-background-light: #FFFDFC;
	--text-light: #FFFDFC;
	--text-dark: #000000;
	--rule-dark: #585858;
}


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

* {
	margin: 0;
	padding: 0;
}


/* HTML Defaults */

body {
	font-family: "Old Standard TT", Georgia, serif;
	background: var(--page-background-autumn);
	color: var(--text-light);
}

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

a {
	color: inherit;
	text-decoration-line: underline;
 	text-decoration-color: transparent;
	text-underline-offset: 0.5rem;
}

a:hover,
a:focus-visible {
	text-decoration: underline;
	text-decoration-color: inherit;
	text-underline-offset: 0.5rem;
}

@media (prefers-reduced-motion: no-preference) {
  a {
    transition: text-decoration-color 0.50s ease;
  }
}

h1,
h2,
h3,
h4,
h5{
	font-family: Syne, Helvetica, Arial, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
 }

 /* Site Wide */

.site-header {
	flex-shrink: 0;
}

.site-header .site-header__title {
	width: 100%;
	max-width: var(--page-max);
	margin-inline: auto;
	margin-top: 1rem;
	font-family: Syne, Helvetica, Arial, sans-serif;
	font-weight: 700;
	font-size: 3rem;
	text-transform: uppercase;

	/* Aligns the text to the bottom of the line. */
	text-box: trim-end cap alphabetic;
}

.site-header .site-header__hero {
	min-height: 5rem;
	max-height: 10vh;
	max-height: 10dvh;
	overflow: hidden;
}

.site-header .site-header__hero img {
	width: 100%;
}

.site-footer {
	width: 100%;
	max-width: var(--page-max);
	margin-inline: auto;
	padding: 2rem 0 1rem 0;
	text-align: center;
}


/* Landing Page */

.home .wp-site-blocks {
	display:flex;
	flex-direction: column;
	height: 100vh;
	height: 100dvh;

	/** Compensates for the height of the WordPress toolbar that appears when logged in. */
	height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}

.home .landing {
	flex: 1;
	margin-top: 10vh;
	margin-top: 10dvh;
}

.home .landing__title {
	width: 100%;
	max-width: var(--page-max);
	margin-inline: auto;

	/* Scales the text with the size of the window. */
	font-size: clamp(2.5rem, 1rem + 3vw, 6rem);

	/* Aligns the text to the bottom of the line. */
	text-box: trim-end cap alphabetic;
}

.home .landing__hero {
	max-height: 40vh;
	max-height: 40dvh;
	overflow: hidden;
}

.home .landing__hero img {
	width: 100%;
}

.home .landing__enter {
	display: block;
	width: 100%;
	max-width: var(--page-max);
	margin-inline: auto;
	font-family: Syne, Helvetica, Arial, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	text-align: right;

	/* Scales the text with the size of the window. */
	font-size: clamp(1rem, 1rem + 1.5vw, 3rem);

	/* Aligns the text to the top of the line. */
	text-box: trim-start cap alphabetic;
}


/* Posts Page */

.blog .wp-site-blocks {
	display:flex;
	flex-direction: column;
	height: 100vh;
	height: 100dvh;

	/** Compensates for the height of the WordPress toolbar that appears when logged in. */
	height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}

.blog .site-main {
	flex: 1;
	width: 100%;
	max-width: var(--page-max);
	margin-inline: auto;
	background: var(--page-background-light);
	color: var(--text-dark);
 }

.blog .site-main__title {
	margin-top: 3rem;
	text-align: right;
 }

.blog .wp-block-post-template {
	list-style:	none;
}

.blog .site-post {
	display: flex;
	flex-wrap:	wrap;
	align-items:center;
	margin-top: 3rem;
}

.blog .wp-block-post-title {
	flex: 1 1 30rem;
	margin-bottom: 0.25rem;
}

.blog .wp-block-post-date {
	font-family: Syne, Helvetica, Arial, sans-serif;
	font-weight: 400;
	text-transform: uppercase;
}

.blog .wp-block-post-excerpt {
	flex-basis: 100%;
	margin-top: 0.75rem;
}

.blog .site-footer {
	background: var(--page-background-light);
	color: var(--text-dark);
}

/* Single Post */

.single-post .wp-site-blocks {
	display:flex;
	flex-direction: column;
	height: 100vh;
	height: 100dvh;

	/** Compensates for the height of the WordPress toolbar that appears when logged in. */
	height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}

.single-post .site-main {
	flex: 1;
	width: 100%;
	max-width: var(--page-max);
	margin-inline: auto;
	background: var(--page-background-light);
	color: var(--text-dark);
}

.single-post .wp-block-post-date {
	font-family: Syne, Helvetica, Arial, sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	margin-top: 1rem;
}

.single-post .wp-block-post-title {
	margin-top: 2rem;
	text-align: right;
}

.single-post .site-footer {
	background: var(--page-background-light);
	color: var(--text-dark);
}

.single-post h1,
.single-post h2,
.single-post h3,
.single-post h4,
.single-post h5,
.single-post h6 {
	margin-top: 2rem;
}

.single-post .entry-content a {
	font-weight: bold;
	text-underline-offset: 0.25rem;
}

.single-post .entry-content a:hover,
.single-post .entry-content a:focus-visible {
	text-underline-offset: 0.25rem;
}

.single-post p {
	margin: 1rem 1rem 0 1rem;
}

.single-post p + p {
	text-indent: 1rem;
}

.single-post ul,
.single-post ol {
	margin-top: 1rem;
	padding-inline-start: 40px;
}

.single-post pre {
	margin: 1rem 2rem 0 2rem;
}

.single-post .wp-block-quote {
	margin-inline: 2rem;
	border-left: 2px solid var(--rule-dark);
}

.single-post .wp-block-table {
	margin-top: 1rem;
	margin-inline: 2rem;
	width: calc(100% - 4rem);
}

.single-post table {
	width: 100%;
	border-collapse: collapse;
}

.single-post table .has-text-align-left {
	text-align: left;
}

.single-post table .has-text-align-center {
	text-align: center;
}

.single-post table .has-text-align-right {
	text-align: right;
}

/* Column headers are always centered, whatever the column's own alignment. */
.single-post table thead th,
.single-post table thead th[class] {
	text-align: center;
}

.single-post table thead tr {
	border-bottom: 1px solid var(--text-dark);
}

.single-post table thead th,
.single-post table tbody td {
	padding: 0.25rem 1rem;
	border-right: 1px solid var(--text-dark);
}

.single-post table thead th:last-child,
.single-post table tbody td:last-child {
	border: none;
}

.single-post .wp-block-table figcaption {
	margin-top: 0.50rem;
	font-size: 0.9rem;
	font-style: italic;
}

/* Table alignment mirrors the images: wide, full, centered, and floated. */
.single-post .wp-block-table.alignwide {
	margin-inline: 1rem;
	width: calc(100% - 2rem);
}

.single-post .wp-block-table.alignfull {
	margin-inline: 0;
	width: 100%;
}

.single-post .wp-block-table.aligncenter {
	width: fit-content;
	max-width: calc(100% - 4rem);
	margin-inline: auto;
}

.single-post .wp-block-table.alignleft,
.single-post .wp-block-table.alignright {
	width: auto;
	max-width: 50%;
	margin-bottom: 1rem;
}

.single-post .wp-block-table.alignleft {
	float: left;
	margin-inline: 2rem 1.5rem;
}

.single-post .wp-block-table.alignright {
	float: right;
	margin-inline: 1.5rem 2rem;
}

@media (max-width: 40rem) {
	.single-post .wp-block-table.alignleft,
	.single-post .wp-block-table.alignright {
		float: none;
		max-width: calc(100% - 4rem);
		margin-inline: 2rem;
	}
}

.single-post .wp-block-image {
	margin-top: 1rem;
	margin-inline: 2rem;
	width: calc(100% - 4rem);
}

/* Contain floats so they never spill out of the article. */
.single-post .wp-block-post-content {
	display: flow-root;
}

/* Wide and full relax the default 2rem inset. Full spans the white panel. */
.single-post .wp-block-image.alignwide {
	margin-inline: 1rem;
	width: calc(100% - 2rem);
}

.single-post .wp-block-image.alignfull {
	margin-inline: 0;
	width: 100%;
}

/* Centered: shrink-wrap so the caption matches the image width. */
.single-post .wp-block-image.aligncenter {
	width: fit-content;
	max-width: calc(100% - 4rem);
	margin-inline: auto;
}

/* Floated: text wraps around the image. */
.single-post .wp-block-image.alignleft,
.single-post .wp-block-image.alignright {
	width: auto;
	max-width: 50%;
	margin-bottom: 1rem;
}

.single-post .wp-block-image.alignleft {
	float: left;
	margin-inline: 2rem 1.5rem;
}

.single-post .wp-block-image.alignright {
	float: right;
	margin-inline: 1.5rem 2rem;
}

/* A heading starts below any float rather than wrapping beside it. */
.single-post h1,
.single-post h2,
.single-post h3,
.single-post h4,
.single-post h5,
.single-post h6 {
	clear: both;
}

/* On narrow screens a 50% float is too cramped, so stack it. */
@media (max-width: 40rem) {
	.single-post .wp-block-image.alignleft,
	.single-post .wp-block-image.alignright {
		float: none;
		max-width: calc(100% - 4rem);
		margin-inline: 2rem;
	}
}

.single-post .wp-block-image figcaption {
	margin-top: 0.50rem;
	font-size: 0.9rem;
	font-style: italic;
}

.single-post .wp-block-footnotes {
	clear: both;
	margin-top: 1rem;
	padding-top: 2rem;
	font-size: 0.9rem;
	border-top: 2px solid var(--rule-dark);
}

.single-post .wp-block-footnotes li {
	margin-top: 1rem;
}

/* 404 Page */

.error404 .wp-site-blocks {
	display:flex;
	flex-direction: column;
	height: 100vh;
	height: 100dvh;

	/** Compensates for the height of the WordPress toolbar that appears when logged in. */
	height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}

.error404 > .wp-site-blocks > .wp-block-group {
	flex: 1;
	width: 100%;
	max-width: var(--page-max);
	margin-inline: auto;
	background: var(--page-background-light);
	color: var(--text-dark);
}

.error404 .wp-block-heading {
	margin-top: 3rem;
	text-align: right;
 }

 .error404 p {
	margin: 1rem 1rem 0 1rem;
}
.error404 .site-footer {
	background: var(--page-background-light);
	color: var(--text-dark);
}