/*
Theme Name: Beauchamp Typewriter
Theme URI: https://www.beauchamp.me/techno
Author: J. F. Beauchamp
Description: A minimal, txt.io-informed document theme for the /techno blog.
Version: 0.1.0
Text Domain: beauchamp-typewriter
*/

:root {
	--paper: #ffffff;
	--paper-quiet: #fcfcfb;
	--ink: #232323;
	--gray: #6b6b6b;
	--rule: #999999;
	--rule-dark: #838383;
	--ribbon: #a40000;
	--focus: #fff1f1;
	--measure: 45rem;
	--wide: 54rem;
	--sidebar: 13rem;
}

* { box-sizing: border-box; }

html { background: var(--paper); }

body {
	margin: 0;
	color: var(--ink);
	background: var(--paper);
	font-family: "Courier New", Courier, Monaco, monospace;
	font-size: clamp(1rem, 0.96rem + 0.22vw, 1.1rem);
	line-height: 1.7;
	text-rendering: optimizeLegibility;
}

a {
	color: var(--ink);
	border-bottom: 1px solid var(--rule);
	text-decoration: none;
}

a:hover { color: var(--ribbon); }

:focus-visible {
	outline: 2px solid var(--ribbon);
	outline-offset: 3px;
	background: var(--focus);
	color: var(--ink);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 10;
	width: auto;
	height: auto;
	padding: 0.2rem 0.45rem;
	margin: 0;
	overflow: visible;
	clip: auto;
	background: var(--paper);
}

.site-shell {
	width: min(var(--measure), calc(100% - 3rem));
	margin: 0 auto;
	padding: 1.7rem 0 5rem;
}

.site-header { margin-bottom: clamp(3.75rem, 9vw, 6.5rem); }

.site-masthead-art {
	display: block;
	width: max-content;
	max-width: 100%;
	margin: 0;
	overflow: hidden;
	color: currentColor;
	font-family: "Courier New", Courier, Monaco, monospace;
	font-size: clamp(0.54rem, 2.5vw, 0.92rem);
	line-height: 1.14;
	white-space: pre;
}

.site-masthead-art::before,
.site-masthead-art::after { content: none !important; }

.masthead-domain-link { border-bottom: 0; }

.site-navigation { margin-top: 1.6rem; font-size: 0.8em; }

.menu,
.footer-menu,
.taxonomy-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.menu li + li::before,
.footer-menu li + li::before {
	content: "/";
	margin: 0 0.65rem;
	color: var(--rule);
}

.site-navigation a,
.footer-menu a,
.footer-navigation a,
.post-navigation a {
	border-bottom: 0;
}

.site-navigation a:hover,
.footer-menu a:hover,
.footer-navigation a:hover,
.post-navigation a:hover {
	border-bottom: 1px solid var(--rule);
}

.entry-header { margin-bottom: 3rem; }

.entry-title,
.entry-content h1,
.entry-content h2,
.entry-content h3 {
	position: relative;
	display: table;
	width: max-content;
	max-width: 100%;
	padding-bottom: 0.75em;
	font-size: 1em;
	line-height: 1.5;
}

.entry-title::after,
.entry-content h1::after,
.entry-content h2::after,
.entry-content h3::after {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	overflow: hidden;
	color: var(--rule-dark);
	line-height: 1;
	white-space: nowrap;
}

.entry-title {
	margin: 0 auto 2rem;
	font-weight: normal;
	letter-spacing: 0.16em;
	text-align: center;
	text-transform: uppercase;
}

.entry-title::after,
.entry-content h1::after,
.entry-content h2::after {
	content: "============================================================";
}

.entry-content h1 {
	margin: 3.65rem auto 1.55rem;
	font-weight: normal;
	letter-spacing: 0.16em;
	text-align: center;
	text-transform: uppercase;
}

.entry-content h2 {
	margin: 3.65rem 0 1.55rem;
	font-weight: bold;
	text-transform: uppercase;
}

.entry-content h3 {
	margin: 2.5rem 0 1rem;
	font-weight: bold;
	text-transform: uppercase;
}

.entry-content h3::after { content: "------------------------------------------------------------"; }

.entry-content h4,
.entry-content h5,
.entry-content h6 {
	font-size: 1em;
	line-height: 1.5;
}

.entry-content h4 {
	margin: 2.05rem 0 1rem;
	font-weight: bold;
	text-transform: uppercase;
}

.entry-content h5 {
	margin: 1.85rem 0 0.8rem;
	font-weight: bold;
}

.entry-content h6 {
	display: inline;
	margin: 1.45rem 0 0;
	font-style: italic;
	font-weight: normal;
}

.entry-content h6::after { content: ": "; }

.entry-content h6 + p {
	display: inline;
	margin: 0;
}

.entry-content h6 + p::after {
	display: block;
	content: "";
	margin-bottom: 1.45rem;
}

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 1rem 0 0;
	color: var(--gray);
	font-size: 0.78em;
	line-height: 1.55;
}

.entry-meta span + span::before {
	content: "/";
	margin: 0 0.55rem;
	color: var(--rule);
}

p { margin: 0 0 1.45rem; }
strong { font-weight: bold; }
em { font-weight: bold; font-style: italic; }

.entry-content ul,
.entry-content ol {
	margin: 0 0 1.45rem;
	padding-left: 1.55rem;
}

.entry-content ul { list-style: none; }

.entry-content ul > li { position: relative; }

.entry-content ul > li::before {
	position: absolute;
	right: calc(100% + 0.5rem);
	content: "-";
}

.entry-content ul ul { margin: 0.3rem 0 0; }
.entry-content ul ul > li::before { content: "-"; }
.entry-content li { padding: 0.18rem 0; }

blockquote,
.wp-block-quote {
	margin: 2.15rem 0;
	padding-left: clamp(1.15rem, 6vw, 2.5rem);
	border: 0;
}

blockquote p,
.wp-block-quote p { margin-bottom: 0.5rem; }

blockquote cite,
.wp-block-quote cite {
	color: var(--gray);
	font-size: 0.8em;
	font-style: normal;
}

:not(pre) > code {
	padding: 0 0.12em;
	color: var(--ink);
	background: var(--paper-quiet);
	border-bottom: 1px solid var(--rule);
	font-family: inherit;
	font-size: 0.9em;
	line-height: 1.4;
}

pre:not(.site-masthead-art) {
	position: relative;
	overflow-x: auto;
	margin: 2.3rem 0;
	padding: 1.2rem 0;
	border: 0;
	background: transparent;
	color: var(--ink);
	font-family: "Courier New", Courier, Monaco, monospace;
	font-size: 0.79em;
	line-height: 1.48;
	tab-size: 4;
	white-space: pre;
	scrollbar-width: thin;
	scrollbar-color: var(--rule) transparent;
}

pre::-webkit-scrollbar { height: 0.4rem; }

pre::-webkit-scrollbar-thumb { background: var(--rule); }

pre::-webkit-scrollbar-track { background: transparent; }

pre:not(.site-masthead-art):focus-visible { outline-offset: 2px; }

pre:not(.site-masthead-art)::before,
pre:not(.site-masthead-art)::after {
	display: block;
	width: 100%;
	overflow: hidden;
	color: var(--rule-dark);
	content: "================================================================";
	line-height: 1;
	white-space: nowrap;
}

pre:not(.site-masthead-art)::before { margin-bottom: 0.9rem; }
pre:not(.site-masthead-art)::after { margin-top: 0.9rem; }

pre:not(.site-masthead-art) code { font: inherit; }

.tok-comment { color: var(--gray); font-style: italic; }
.tok-keyword { color: var(--ribbon); font-weight: bold; }
.tok-string { color: var(--ink); font-style: italic; }
.tok-number,
.tok-operator { color: var(--gray); }
.tok-function { font-weight: bold; }

figure,
.wp-block-image,
.wp-block-gallery { margin: 2.7rem 0; }

img,
video,
iframe { max-width: 100%; height: auto; }

figcaption,
.wp-element-caption {
	margin-top: 0.75rem;
	color: var(--gray);
	font-size: 0.78em;
	line-height: 1.55;
}

.entry-content table,
.wp-block-table table {
	width: 100%;
	min-width: 34rem;
	border-collapse: collapse;
	font-size: 0.84em;
	line-height: 1.5;
}

.entry-content table,
.wp-block-table { overflow-x: auto; }

.entry-content th,
.entry-content td,
.wp-block-table th,
.wp-block-table td {
	padding: 0.55rem;
	border: 0;
	border-bottom: 1px solid var(--rule);
	text-align: left;
	vertical-align: top;
}

.entry-content thead th,
.wp-block-table thead th {
	border-top: 1px solid var(--rule-dark);
	font-weight: bold;
}

.entry-content tbody tr:last-child td,
.wp-block-table tbody tr:last-child td { border-bottom-color: var(--rule-dark); }

.entry-content th:first-child,
.entry-content td:first-child,
.wp-block-table th:first-child,
.wp-block-table td:first-child { padding-left: 0; }

.entry-content caption,
.wp-block-table figcaption {
	padding-top: 0.7rem;
	color: var(--gray);
	font-size: 0.78em;
	text-align: left;
}

.wp-block-table { border: 0; }

.entry-footer {
	margin: 3.4rem 0;
	color: var(--gray);
	font-size: 0.8em;
}

.entry-footer div + div { margin-top: 0.6rem; }
.entry-footer span { color: var(--ink); }

.post-list .entry-summary + .entry-summary { margin-top: 4.25rem; }
.entry-summary .entry-header { margin-bottom: 1.25rem; }
.entry-summary .entry-title {
	margin: 0;
	padding: 0;
	font-weight: bold;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
}
.entry-summary .entry-title::after { content: none; }
.entry-summary-content { margin-left: 0; }

.listing-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--sidebar);
	gap: 5.5rem;
	width: min(62rem, calc(100vw - 3rem));
	margin-left: 50%;
	transform: translateX(-50%);
	align-items: start;
}

.listing-main { min-width: 0; max-width: var(--measure); }

.blog-sidebar {
	width: var(--sidebar);
	min-width: 0;
	font-size: 0.8em;
	line-height: 1.55;
}

.blog-sidebar section + section { margin-top: 2.65rem; }

.sidebar-heading {
	display: inline-block;
	margin: 0;
	font-size: 1em;
	font-weight: bold;
	line-height: 1.4;
	text-transform: uppercase;
}

.sidebar-heading::after {
	display: block;
	max-width: 100%;
	overflow: hidden;
	color: var(--rule);
	content: "============";
	line-height: 1;
	white-space: nowrap;
}

.sidebar-heading-about::after { width: 5ch; }
.sidebar-heading-categories::after { width: 10ch; }
.sidebar-heading-archives::after { width: 8ch; }
.sidebar-heading a { border-bottom: 0; }
.sidebar-about-link { margin: 0; }

.sidebar-list {
	margin: 0.85rem 0 0;
	padding: 0;
	list-style: none;
}

.sidebar-list li { margin-top: 0.35rem; }

.typed-rule {
	display: block;
	width: 100%;
	max-width: 100%;
	height: 1em;
	overflow: hidden;
	color: var(--rule);
	line-height: 1;
	white-space: nowrap;
}

.typed-rule::before { content: "------------------------------------------------------------------------"; }

.archive-header { margin-bottom: 3rem; }
.archive-title {
	margin: 0;
	font-size: 1em;
	font-weight: bold;
	line-height: 1.5;
	text-transform: uppercase;
}
.archive-description { margin-top: 1rem; color: var(--gray); }

.navigation,
.posts-navigation,
.post-navigation,
.page-links {
	margin-top: 4.5rem;
	padding-top: 1.1rem;
}

.posts-navigation::before,
.post-navigation::before,
.site-footer::before {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	color: var(--rule);
	content: "----------------------------------------------------------------";
	line-height: 1;
	white-space: nowrap;
}

.post-navigation .nav-links,
.posts-navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1.4rem 2rem;
	margin-top: 1.1rem;
}

.post-navigation .nav-previous,
.post-navigation .nav-next,
.posts-navigation .nav-previous,
.posts-navigation .nav-next { flex: 1 1 16rem; }
.post-navigation .nav-next { text-align: right; }
.adjacent-label { display: block; color: var(--gray); font-size: 0.78em; }

.comments-area { margin-top: 4.5rem; }
.comments-title { font-size: 1em; text-transform: uppercase; }
.comment-list { margin: 2rem 0; padding-left: 1.55rem; }
.comment-list .comment-body { margin-bottom: 1.5rem; }
.comment-metadata { color: var(--gray); font-size: 0.78em; }

.search-form { margin: 1.5rem 0; }
.comment-form input,
.comment-form textarea,
.comment-form input[type="submit"] {
	border: 1px solid var(--rule-dark);
	border-radius: 0;
	background: var(--paper);
	color: var(--ink);
	font: inherit;
}
.comment-form input,
.comment-form textarea { max-width: 100%; padding: 0.35rem 0.45rem; }
.comment-form input[type="submit"] { padding: 0.35rem 0.65rem; cursor: pointer; }

.typed-search-form { width: 100%; min-width: 0; margin: 0; }

.typed-search-frame {
	display: grid;
	grid-template-rows: 1em auto 1em;
	width: 100%;
	min-width: 0;
}

.typed-search-input-line {
	display: grid;
	grid-template-columns: 1ch minmax(0, 1fr) 1ch;
	align-items: center;
	min-width: 0;
}

.typed-search-mark {
	display: block;
	color: var(--rule);
	line-height: 1.45;
	text-align: center;
	user-select: none;
}

.typed-search-form .search-field {
	display: block;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0.08em 0.45em;
	border: 0;
	border-radius: 0;
	outline: 0;
	appearance: none;
	background: transparent;
	color: var(--ink);
	font: inherit;
	line-height: 1.45;
}

.typed-search-form .search-field::placeholder { color: var(--gray); opacity: 1; }

.typed-search-form:has(.search-field:focus-visible) .typed-rule,
.typed-search-form:has(.search-field:focus-visible) .typed-search-mark { color: var(--ribbon); }

.typed-search-form .search-field:focus-visible {
	outline: 0;
	background: transparent;
	color: var(--ink);
}

.typed-search-action {
	margin: 0.62rem 0 0;
	text-align: right;
}

.typed-search-form .search-submit {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0;
	margin: -0.45rem 0;
	border: 0;
	border-radius: 0;
	outline: 0;
	background: transparent;
	color: var(--ink);
	font: inherit;
	text-decoration: underline;
	text-decoration-color: var(--rule);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.16em;
	cursor: pointer;
}

.typed-search-form .search-submit:hover,
.typed-search-form .search-submit:focus-visible {
	outline: 0;
	background: transparent;
	color: var(--ribbon);
	text-decoration-color: var(--rule);
}

.site-footer { margin-top: 5rem; padding-top: 1rem; }
.site-footer.has-listing-pagination::before { content: none; }
.footer-menu,
.footer-navigation .menu { font-size: 0.8em; }
.footer-note { margin: 1rem 0 0; color: var(--gray); font-size: 0.78em; }

.alignwide { width: min(var(--wide), calc(100vw - 3rem)); max-width: var(--wide); margin-left: 50%; transform: translateX(-50%); }
.alignfull { width: 100vw; max-width: 100vw; margin-left: 50%; transform: translateX(-50%); }

@media (max-width: 42rem) {
	.site-shell { width: min(var(--measure), calc(100% - 2rem)); padding-top: 1.2rem; }
	.post-navigation .nav-next { text-align: left; }
	.entry-content table,
	.wp-block-table table { font-size: 0.78em; }
}

@media (max-width: 63rem) {
	.listing-layout {
		grid-template-columns: minmax(0, 1fr) minmax(10rem, 12rem);
		gap: 3rem;
	}

	.blog-sidebar { width: 100%; }
}

@media (max-width: 48rem) {
	.listing-layout {
		display: block;
		width: 100%;
		margin-left: 0;
		transform: none;
	}

	.blog-sidebar {
		width: 100%;
		margin-top: 4rem;
		padding-top: 1.15rem;
		border-top: 1px solid var(--rule);
	}
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { scroll-behavior: auto; }
}

@media print {
	@page { margin: 16mm; }
	body { font-size: 10.5pt; line-height: 1.5; }
	.site-shell { width: 100%; padding: 0; }
	.skip-link,
	.site-navigation,
	.post-navigation,
	.posts-navigation,
	.site-footer { display: none; }
	.site-header { margin-bottom: 2.5rem; }
	a[href^="http"]::after { content: " <" attr(href) ">"; font-size: 0.78em; word-break: break-all; }
	pre,
	figure,
	table { break-inside: avoid; }
	pre { overflow: visible; }
	.tok-comment,
	.tok-keyword,
	.tok-string,
	.tok-number,
	.tok-operator { color: inherit; }
}