/*
Theme Name: Plain Text
Theme URI: https://michaelhussey.com/
Author: Michael Hussey
Author URI: https://michaelhussey.com/
Description: Ultra-minimal, text-only theme. One typeface, one size, the whole archive on the home page.
Version: 1.0.0
Requires at least: 5.9
Tested up to: 6.8
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: plain-text
*/

:root {
	--ink: #111111;
	--dim: #666666;
	--rule: #dddddd;
	--paper: #ffffff;
	--link: #0000ee;
	--mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	--serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--mono);
	font-size: 15px;
	line-height: 1.65;
	overflow-x: hidden;
}

@supports (overflow-x: clip) {
	body { overflow-x: clip; }
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.65; }
p { margin: 0; }

a {
	color: var(--link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
a:hover,
a:focus-visible { background: var(--ink); color: var(--paper); text-decoration: none; outline: none; }

/* Linked images don't get the inverse-video hover. */
a:has(img):hover,
a:has(img):focus-visible { background: none; }
a:has(img):focus-visible img { outline: 2px solid var(--ink); outline-offset: 2px; }

.dim { color: var(--dim); }
.plain { list-style: none; margin: 0; padding: 0; }

/* Layout */
.wrap {
	max-width: 680px;
	margin: 0 auto;
	padding: 72px 20px 96px;
	display: flex;
	flex-direction: column;
	gap: 48px;
}
.single .wrap,
.page .wrap { gap: 40px; }
.site-main { display: flex; flex-direction: column; gap: 48px; }
.single .site-main,
.page .site-main { gap: 40px; }

.site-header { display: flex; flex-direction: column; gap: 16px; }
.site-nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.intro p + p { margin-top: 16px; }

/* Home: the full archive */
.section { display: flex; flex-direction: column; gap: 4px; }
.section > h2 { margin-bottom: 4px; }
.section h2 .dim { font-weight: 400; }
.year { display: grid; grid-template-columns: 4ch minmax(0, 1fr); column-gap: 2ch; padding-top: 8px; }
.post-row { display: grid; grid-template-columns: 5ch minmax(0, 1fr); column-gap: 2ch; }
.indent { padding-left: 6ch; }

.site-footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	border-top: 1px solid var(--rule);
	padding-top: 16px;
	color: var(--dim);
}

/* Posts and pages */
.article { display: flex; flex-direction: column; gap: 24px; }
.featured { margin: 0; }
.featured img { display: block; width: 100%; height: auto; }
.featured figcaption { margin-top: 8px; color: var(--dim); }

.entry { line-height: 1.7; }
.entry::after { content: ""; display: table; clear: both; }
.entry > * { margin-top: 0; margin-bottom: 0; }
.entry > * + * { margin-top: 16px; }
.entry h2, .entry h3, .entry h4, .entry h5, .entry h6 { margin-top: 32px; }
.entry ul, .entry ol { padding-left: 3ch; }
.entry li + li { margin-top: 4px; }
.entry blockquote { margin-left: 0; margin-right: 0; padding-left: 3ch; color: #333333; }
.entry blockquote p + p { margin-top: 16px; }
.entry hr { border: 0; border-top: 1px solid var(--rule); margin: 32px 0; }
.entry pre { overflow-x: auto; padding: 12px 2ch; background: #f6f6f6; font-family: var(--mono); font-size: 15px; line-height: 1.5; }
.entry code, .entry kbd, .entry samp { font-family: var(--mono); font-size: 15px; }
.entry table { border-collapse: collapse; display: block; overflow-x: auto; max-width: 100%; }
.entry th, .entry td { text-align: left; vertical-align: top; padding: 4px 2ch 4px 0; border-bottom: 1px solid var(--rule); }
.entry th { font-weight: 600; }

/* Images and media: column width by default, wide/full break out of the column. */
.entry img, .entry video, .entry picture { max-width: 100%; height: auto; }
.entry iframe, .entry embed, .entry object { max-width: 100%; }
.entry figure,
.entry .wp-caption { margin: 24px 0; max-width: 100%; }
.entry figure img,
.entry .wp-caption img { display: block; }
.entry figcaption,
.entry .wp-caption-text,
.entry .wp-element-caption { margin-top: 8px; color: var(--dim); font-size: 15px; text-align: left; }

.entry .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.entry .alignleft { float: left; max-width: 50%; margin: 4px 2ch 12px 0; }
.entry .alignright { float: right; max-width: 50%; margin: 4px 0 12px 2ch; }
.entry .alignwide { clear: both; width: min(1040px, calc(100vw - 40px)); max-width: none; margin-left: 50%; transform: translateX(-50%); }
.entry .alignfull { clear: both; width: 100vw; max-width: none; margin-left: 50%; transform: translateX(-50%); }
.entry .alignwide img,
.entry .alignfull img { width: 100%; }

.entry .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 24px 0; }
.entry .gallery-item { margin: 0; }
.entry .gallery-item img { display: block; width: 100%; height: auto; }
.entry .gallery br { display: none; }
.entry .gallery-caption { color: var(--dim); }

@media (max-width: 560px) {
	.entry .alignleft,
	.entry .alignright { float: none; display: block; max-width: 100%; margin: 24px 0; }
}

/* Older / newer */
.post-nav { display: flex; flex-direction: column; border-top: 1px solid var(--rule); padding-top: 16px; }
.nav-row { display: grid; grid-template-columns: 6ch minmax(0, 1fr); column-gap: 2ch; }
.children-list { margin-top: 8px; }

/* Comments */
.comments { display: flex; flex-direction: column; gap: 16px; border-top: 1px solid var(--rule); padding-top: 16px; }
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-list .children { list-style: none; margin: 0; padding-left: 3ch; }
.comment-list li { margin-top: 16px; }
.comment-list > li:first-child { margin-top: 0; }
.comment-meta { color: var(--dim); }
.comment-body p + p { margin-top: 8px; }
.reply { margin-top: 4px; }
.comment-respond { display: flex; flex-direction: column; gap: 12px; }
.comment-reply-title small { font-weight: 400; margin-left: 1ch; }
.comment-form { display: flex; flex-direction: column; gap: 12px; }
.comment-form p { margin: 0; }
.comment-form label { display: block; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	font: inherit;
	color: var(--ink);
	background: var(--paper);
	border: 1px solid #8a8a8a;
	border-radius: 0;
	padding: 8px 1ch;
}
.comment-form input:focus,
.comment-form textarea:focus { outline: 2px solid var(--ink); outline-offset: 0; }
.comment-form .comment-form-cookies-consent { display: flex; gap: 1ch; align-items: baseline; }
.comment-form .comment-form-cookies-consent label { display: inline; }

button,
input[type="submit"] {
	font: inherit;
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--ink);
	border-radius: 0;
	padding: 8px 2ch;
	min-height: 44px;
	cursor: pointer;
}
button:hover,
button:focus-visible,
input[type="submit"]:hover,
input[type="submit"]:focus-visible { background: var(--ink); color: var(--paper); }

/* Optional serif body for posts (Customizer > Plain Text). */
.body-serif .entry,
.body-serif .comment-body { font-family: var(--serif); font-size: 18px; }

/* Accessibility */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	background: var(--paper);
	clip: auto !important;
	clip-path: none;
	color: var(--ink);
	display: block;
	height: auto;
	left: 8px;
	top: 8px;
	padding: 8px 2ch;
	width: auto;
	z-index: 100000;
	outline: 2px solid var(--ink);
}

@media print {
	a { color: inherit; }
	.site-nav, .post-nav, .comments { display: none; }
}