/*
Theme Name:   How To Anon
Theme URI:    https://howtoanon.com/
Description:  GeneratePress child theme for howtoanon.com. Light/dark palette,
              system-font type system, and a dynamic homepage template.
              No web fonts, no images, no third-party requests.
Author:       How To Anon
Author URI:   https://howtoanon.com/
Template:     generatepress
Version:      1.0.0
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  hta
*/

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	/* Palette — cool "infrastructure paper", indigo accent. */
	--hta-bg:           #f5f7fa;
	--hta-surface:      #ffffff;
	--hta-surface-2:    #eef1f6;
	--hta-ink:          #15181e;
	--hta-muted:        #5f6772;
	--hta-rule:         #dce1e9;
	--hta-accent:       #4640c4;
	--hta-accent-soft:  #ecebfa;
	--hta-verified:     #1f7a55;
	--hta-flag:         #9a5b00;
	--hta-shadow:       0 1px 2px rgba(21, 24, 30, .05);

	/* Type — system stacks only. Zero font requests, zero swap shift. */
	--hta-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;
	--hta-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* Spacing scale */
	--hta-s1: .25rem;
	--hta-s2: .5rem;
	--hta-s3: .75rem;
	--hta-s4: 1rem;
	--hta-s5: 1.5rem;
	--hta-s6: 2rem;
	--hta-s7: 2.75rem;
	--hta-s8: 3.25rem;

	--hta-max:    1100px;
	--hta-pad:    1.25rem;
	--hta-radius: 6px;

	color-scheme: light;
}

html[data-theme="dark"] {
	--hta-bg:           #0f1217;
	--hta-surface:      #161a20;
	--hta-surface-2:    #1c212a;
	--hta-ink:          #e4e8ee;
	--hta-muted:        #8e96a3;
	--hta-rule:         #252b34;
	--hta-accent:       #a9a2ff;
	--hta-accent-soft:  #1d1c2e;
	--hta-verified:     #54bc8d;
	--hta-flag:         #d8a13f;
	--hta-shadow:       none;

	color-scheme: dark;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

body {
	background: var(--hta-bg);
	color: var(--hta-ink);
	font-family: var(--hta-sans);
	font-size: 1rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a { color: var(--hta-accent); }

p { text-wrap: pretty; }

:where(a, button, summary, input, [tabindex]):focus-visible {
	outline: 2px solid var(--hta-accent);
	outline-offset: 2px;
	border-radius: 3px;
}

/* ==========================================================================
   3. GeneratePress header, navigation, footer
   The child stylesheet is enqueued with 'generate-style' as a dependency,
   so it loads after GeneratePress' Customizer CSS and wins at equal
   specificity. No !important anywhere in this file.
   ========================================================================== */

.site-header {
	background: var(--hta-surface);
	border-bottom: 1px solid var(--hta-rule);
}

.site-header .inside-header {
	max-width: var(--hta-max);
	margin-inline: auto;
	padding: .875rem var(--hta-pad);
	display: flex;
	align-items: center;
	gap: var(--hta-s5);
}

.site-header .site-branding { margin-right: auto; padding: 0; }
.site-header .site-description { display: none; }

.site-header .main-title {
	font-family: var(--hta-mono);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1;
	margin: 0;
}

.site-header .main-title a {
	color: var(--hta-ink);
	text-decoration: none;
}

.main-navigation,
.main-navigation .inside-navigation {
	background: transparent;
	padding: 0;
}

/* The navigation may sit inside the header ("Float right") or as its own bar
   below it, depending on the Customizer. Style both so neither looks broken. */
.site-header + .main-navigation,
.main-navigation.navigation-stick {
	background: var(--hta-surface);
	border-bottom: 1px solid var(--hta-rule);
}

.site-header + .main-navigation .inside-navigation {
	max-width: var(--hta-max);
	margin-inline: auto;
	padding: .35rem var(--hta-pad);
}

.main-navigation .main-nav > ul { display: flex; align-items: center; gap: var(--hta-s5); }

.main-navigation .main-nav ul li a {
	font-family: var(--hta-mono);
	font-size: .8125rem;
	font-weight: 400;
	line-height: 1;
	color: var(--hta-muted);
	text-decoration: none;
	padding: .35rem 0;
	border-bottom: 1px solid transparent;
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item > a {
	color: var(--hta-ink);
	background: transparent;
	border-bottom-color: var(--hta-accent);
}

.main-navigation .menu-toggle {
	font-family: var(--hta-mono);
	font-size: .8125rem;
	color: var(--hta-ink);
	background: transparent;
	padding: .35rem 0;
}

.main-navigation ul ul {
	background: var(--hta-surface);
	border: 1px solid var(--hta-rule);
	border-radius: var(--hta-radius);
	box-shadow: var(--hta-shadow);
}

.main-navigation ul ul li a { padding: .5rem .875rem; }

/* Theme toggle -------------------------------------------------------- */

.hta-toggle {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-family: var(--hta-mono);
	font-size: .75rem;
	line-height: 1;
	color: var(--hta-muted);
	background: var(--hta-surface-2);
	border: 1px solid var(--hta-rule);
	border-radius: var(--hta-radius);
	padding: .35rem .6rem;
	margin-left: auto;
	cursor: pointer;
	flex: none;
}

/* Safety net. GeneratePress ships several containers that can wrap or hide
   header items depending on navigation layout and mobile breakpoints, and
   the exact rules differ between GP versions. These four declarations keep
   the toggle on screen wherever it lands. This is the only place in this
   file that uses !important, and it is deliberate: a theme switch the
   reader cannot find is worse than a specificity compromise. */
.inside-header .hta-toggle,
.menu-bar-items .hta-toggle,
.main-navigation .hta-toggle {
	display: inline-flex !important;
	visibility: visible !important;
	opacity: 1 !important;
	position: static !important;
}

.menu-bar-items { display: flex; align-items: center; }

.hta-toggle:hover { color: var(--hta-ink); border-color: var(--hta-muted); }
.hta-toggle svg { width: 14px; height: 14px; flex: none; }
.hta-toggle .hta-toggle__dark { display: none; }
html[data-theme="dark"] .hta-toggle .hta-toggle__dark { display: block; }
html[data-theme="dark"] .hta-toggle .hta-toggle__light { display: none; }

/* Footer -------------------------------------------------------------- */

.site-footer,
.footer-widgets,
.site-info {
	background: var(--hta-surface);
	color: var(--hta-muted);
}

.footer-widgets { border-top: 1px solid var(--hta-rule); }

.footer-widgets .inside-footer-widgets {
	max-width: var(--hta-max);
	margin-inline: auto;
	padding: var(--hta-s7) var(--hta-pad);
	gap: var(--hta-s6);
}

.footer-widgets .widget-title {
	font-family: var(--hta-mono);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hta-muted);
	margin-bottom: var(--hta-s3);
}

.footer-widgets .widget { font-size: .875rem; }
.footer-widgets .widget ul { list-style: none; margin: 0; padding: 0; }
.footer-widgets .widget li { margin-bottom: .4rem; border: 0; padding: 0; }

.footer-widgets .widget a {
	font-family: var(--hta-mono);
	font-size: .8125rem;
	color: var(--hta-muted);
	text-decoration: none;
}

.footer-widgets .widget a:hover { color: var(--hta-accent); }

.site-info {
	border-top: 1px solid var(--hta-rule);
	font-family: var(--hta-mono);
	font-size: .6875rem;
}

.site-info .inside-site-info {
	max-width: var(--hta-max);
	margin-inline: auto;
	padding: var(--hta-s4) var(--hta-pad);
}

.site-info a { color: var(--hta-muted); text-decoration: none; }
.site-info a:hover { color: var(--hta-accent); }

/* ==========================================================================
   4. Homepage template shell
   ========================================================================== */

.hta-main {
	max-width: var(--hta-max);
	margin-inline: auto;
	padding: 0 var(--hta-pad);
	width: 100%;
}

.hta-section {
	padding-block: var(--hta-s7);
	border-top: 1px solid var(--hta-rule);
}

.hta-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--hta-s4);
	margin-bottom: var(--hta-s5);
}

.hta-section h2 {
	font-family: var(--hta-mono);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -.01em;
	line-height: 1.3;
	color: var(--hta-ink);
	margin: 0;
}

.hta-count,
.hta-more {
	font-family: var(--hta-mono);
	font-size: .75rem;
	color: var(--hta-muted);
	white-space: nowrap;
}

.hta-more {
	color: var(--hta-accent);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.hta-more:hover { border-bottom-color: currentColor; }

/* ==========================================================================
   5. Intro and verification ledger
   ========================================================================== */

.hta-intro {
	padding-block: var(--hta-s8) var(--hta-s7);
	max-width: 62ch;
}

.hta-intro h1 {
	font-family: var(--hta-mono);
	font-size: clamp(1.5rem, 1.05rem + 2.1vw, 2.25rem);
	font-weight: 600;
	line-height: 1.24;
	letter-spacing: -.025em;
	margin: 0 0 var(--hta-s4);
	text-wrap: balance;
}

/* The lede comes from the page editor, so style the wrapper's children. */
.hta-lede { margin: 0 0 var(--hta-s6); }

.hta-lede p {
	font-size: 1.0625rem;
	color: var(--hta-muted);
	margin: 0 0 var(--hta-s4);
}

.hta-lede p:last-child { margin-bottom: 0; }
.hta-lede strong { color: var(--hta-ink); font-weight: 600; }
.hta-lede a { color: var(--hta-accent); }

.hta-ledger {
	display: flex;
	flex-wrap: wrap;
	border: 1px solid var(--hta-rule);
	border-radius: var(--hta-radius);
	background: var(--hta-surface);
	box-shadow: var(--hta-shadow);
	overflow: hidden;
}

.hta-ledger__item {
	display: flex;
	align-items: center;
	gap: .4rem;
	flex: 1 1 auto;
	font-family: var(--hta-mono);
	font-size: .75rem;
	color: var(--hta-muted);
	padding: .7rem var(--hta-s4);
	border-right: 1px solid var(--hta-rule);
}

.hta-ledger__item:last-child { border-right: 0; }

.hta-ledger__item b {
	color: var(--hta-ink);
	font-weight: 600;
	font-size: .8125rem;
	font-variant-numeric: tabular-nums;
}

.hta-ledger__item--flag b { color: var(--hta-flag); }

.hta-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--hta-verified);
	flex: none;
}

.hta-dot--flag { background: var(--hta-flag); }

.hta-note {
	font-size: .875rem;
	color: var(--hta-muted);
	margin: var(--hta-s3) 0 0;
}

/* ==========================================================================
   6. Start-here cards
   ========================================================================== */

.hta-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--hta-s5);
}

.hta-card {
	display: flex;
	flex-direction: column;
	gap: .625rem;
	background: var(--hta-surface);
	border: 1px solid var(--hta-rule);
	border-radius: var(--hta-radius);
	box-shadow: var(--hta-shadow);
	padding: var(--hta-s5) var(--hta-s5) var(--hta-s4);
	margin: 0;
}

.hta-card__kicker {
	font-family: var(--hta-mono);
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hta-accent);
}

.hta-card h3 {
	font-family: var(--hta-mono);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -.015em;
	margin: 0;
}

.hta-card h3 a { color: var(--hta-ink); text-decoration: none; }
.hta-card h3 a:hover { color: var(--hta-accent); }

.hta-card p {
	font-size: .9375rem;
	color: var(--hta-muted);
	margin: 0;
}

.hta-specs {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem .875rem;
	font-family: var(--hta-mono);
	font-size: .6875rem;
	color: var(--hta-muted);
	margin-top: auto;
	padding-top: .625rem;
	border-top: 1px solid var(--hta-rule);
}

.hta-stamp {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-family: var(--hta-mono);
	font-size: .6875rem;
	color: var(--hta-verified);
	white-space: nowrap;
}

.hta-stamp--flag { color: var(--hta-flag); }
.hta-stamp time { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   7. Guide index
   ========================================================================== */

.hta-index {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--hta-rule);
}

.hta-index li { border-bottom: 1px solid var(--hta-rule); margin: 0; }

.hta-row {
	display: grid;
	grid-template-columns: 6.5rem 6.75rem 1fr auto;
	align-items: baseline;
	gap: var(--hta-s4);
	padding: .875rem .5rem;
	text-decoration: none;
	color: inherit;
	transition: background-color .12s ease;
}

.hta-row:hover { background: var(--hta-surface-2); }

.hta-row__date {
	font-family: var(--hta-mono);
	font-size: .75rem;
	color: var(--hta-muted);
	font-variant-numeric: tabular-nums;
}

.hta-row__cat {
	font-family: var(--hta-mono);
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--hta-accent);
}

.hta-row__title {
	font-family: var(--hta-mono);
	font-size: .9375rem;
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: -.01em;
}

.hta-row:hover .hta-row__title { color: var(--hta-accent); }

/* ==========================================================================
   8. Topics and stack
   ========================================================================== */

.hta-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 var(--hta-s8);
	border-top: 1px solid var(--hta-rule);
}

.hta-split .hta-section { border-top: 0; }

.hta-list { list-style: none; margin: 0; padding: 0; }

.hta-list li {
	padding: var(--hta-s3) 0;
	border-bottom: 1px solid var(--hta-rule);
	margin: 0;
}

.hta-list li:last-child { border-bottom: 0; }

.hta-list__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--hta-s4);
}

.hta-list__name {
	font-family: var(--hta-mono);
	font-size: .9375rem;
	font-weight: 500;
	color: var(--hta-ink);
	text-decoration: none;
}

.hta-list__name:hover { color: var(--hta-accent); }

.hta-list__meta {
	font-family: var(--hta-mono);
	font-size: .6875rem;
	color: var(--hta-muted);
	white-space: nowrap;
}

.hta-list p { font-size: .875rem; color: var(--hta-muted); margin: .2rem 0 0; }

.hta-disclosure {
	font-size: .8125rem;
	color: var(--hta-muted);
	background: var(--hta-accent-soft);
	border: 1px solid var(--hta-rule);
	border-radius: var(--hta-radius);
	padding: .75rem .875rem;
	margin: 0 0 var(--hta-s5);
}

.hta-disclosure a { color: var(--hta-accent); }

/* Empty state — shown before the first guide is published. */
.hta-empty {
	font-family: var(--hta-mono);
	font-size: .8125rem;
	color: var(--hta-muted);
	background: var(--hta-surface-2);
	border: 1px dashed var(--hta-rule);
	border-radius: var(--hta-radius);
	padding: var(--hta-s5);
	margin: 0;
}

/* ==========================================================================
   9. Posts, pages, and the guide archive
   Everything GeneratePress renders through its own single.php / content.php —
   we never replaced those templates, only styled their standard classes.
   This is what was missing: the homepage got .hta-* classes, but a guide
   post or the Guides archive had no rules at all and fell back to
   GeneratePress' bare defaults.
   ========================================================================== */

.single .site-main,
.page:not(.home) .site-main,
.archive .site-main,
.blog .site-main,
.search .site-main {
	max-width: var(--hta-max);
	margin-inline: auto;
	padding: 0 var(--hta-pad);
}

.single article.post,
.page:not(.home) article.page,
.archive article.post,
.blog article.post,
.search article.post {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
	margin: 0 0 var(--hta-s7);
}

/* GeneratePress paints its Customizer "Content Background" colour (white by
   default) onto .inside-article specifically, not onto article.post — easy
   to miss because nothing in the admin UI names this element. Un-styled,
   the content stays white even after the theme switches to dark. */
.single .inside-article,
.page:not(.home) .inside-article,
.archive .inside-article,
.blog .inside-article,
.search .inside-article {
	background: transparent;
}

/* Entry header --------------------------------------------------------- */

.single .entry-header,
.page:not(.home) .entry-header {
	max-width: 68ch;
	margin: 0 auto;
	padding-top: var(--hta-s7);
}

.single .entry-title,
.page:not(.home) .entry-title {
	font-family: var(--hta-mono);
	font-size: clamp(1.375rem, 1.05rem + 1.4vw, 1.875rem);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.02em;
	color: var(--hta-ink);
	margin: 0 0 var(--hta-s3);
	text-wrap: balance;
}

.single .entry-meta,
.archive .entry-meta,
.blog .entry-meta {
	font-family: var(--hta-mono);
	font-size: .75rem;
	color: var(--hta-muted);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .3rem .6rem;
}

.single .entry-meta a,
.archive .entry-meta a,
.blog .entry-meta a { color: var(--hta-muted); text-decoration: none; }
.single .entry-meta a:hover,
.archive .entry-meta a:hover,
.blog .entry-meta a:hover { color: var(--hta-accent); }

/* The verification badge and back-link injected by hta_guide_meta(). */

.hta-guide-meta {
	max-width: 68ch;
	margin: var(--hta-s4) auto 0;
	padding: .7rem var(--hta-s4);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--hta-s3);
	background: var(--hta-surface);
	border: 1px solid var(--hta-rule);
	border-radius: var(--hta-radius);
	box-shadow: var(--hta-shadow);
}

.hta-guide-meta__back {
	font-family: var(--hta-mono);
	font-size: .75rem;
	color: var(--hta-muted);
	text-decoration: none;
}

.hta-guide-meta__back:hover { color: var(--hta-accent); }

/* Prose ------------------------------------------------------------------ */

.single .entry-content,
.page:not(.home) .entry-content {
	max-width: 68ch;
	margin: var(--hta-s6) auto 0;
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--hta-ink);
}

.entry-content > * + * { margin-top: var(--hta-s4); }

.entry-content h2 {
	font-family: var(--hta-mono);
	font-size: 1.3125rem;
	font-weight: 600;
	letter-spacing: -.015em;
	line-height: 1.4;
	color: var(--hta-ink);
	margin-top: var(--hta-s7) !important;
	margin-bottom: var(--hta-s2);
	scroll-margin-top: var(--hta-s5);
}

.entry-content h3 {
	font-family: var(--hta-mono);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -.01em;
	line-height: 1.4;
	color: var(--hta-ink);
	margin-top: var(--hta-s6) !important;
	margin-bottom: var(--hta-s2);
	scroll-margin-top: var(--hta-s5);
}

.entry-content h4 {
	font-family: var(--hta-sans);
	font-size: 1rem;
	font-weight: 700;
	color: var(--hta-ink);
	margin-top: var(--hta-s5) !important;
	margin-bottom: var(--hta-s1);
}

.entry-content p { color: var(--hta-ink); }

.entry-content a { color: var(--hta-accent); text-underline-offset: .15em; }

.entry-content strong { color: var(--hta-ink); font-weight: 700; }

.entry-content ul,
.entry-content ol {
	padding-left: 1.25em;
	color: var(--hta-ink);
}

.entry-content li + li { margin-top: .35em; }
.entry-content li > ul,
.entry-content li > ol { margin-top: .35em; }

.entry-content blockquote {
	margin: 0;
	padding: .25rem 0 .25rem var(--hta-s4);
	border-left: 3px solid var(--hta-accent);
	color: var(--hta-muted);
	font-size: 1rem;
}

.entry-content blockquote p:first-child { margin-top: 0; }

.entry-content code {
	font-family: var(--hta-mono);
	font-size: .875em;
	background: var(--hta-surface-2);
	border: 1px solid var(--hta-rule);
	border-radius: 4px;
	padding: .1em .35em;
}

.entry-content pre {
	font-family: var(--hta-mono);
	font-size: .8125rem;
	line-height: 1.6;
	background: var(--hta-surface-2);
	border: 1px solid var(--hta-rule);
	border-radius: var(--hta-radius);
	padding: var(--hta-s4);
	overflow-x: auto;
}

.entry-content pre code {
	background: none;
	border: 0;
	padding: 0;
	font-size: 1em;
}

.entry-content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--hta-radius);
	display: block;
}

.entry-content figure { margin: 0; }

.entry-content figcaption {
	font-family: var(--hta-mono);
	font-size: .75rem;
	color: var(--hta-muted);
	margin-top: .5rem;
	text-align: center;
}

.entry-content hr {
	border: 0;
	border-top: 1px solid var(--hta-rule);
	margin: var(--hta-s7) 0;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: .9375rem;
}

.entry-content th,
.entry-content td {
	border: 1px solid var(--hta-rule);
	padding: .5rem .75rem;
	text-align: left;
}

.entry-content th {
	font-family: var(--hta-mono);
	font-size: .75rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--hta-muted);
	background: var(--hta-surface-2);
}

/* Prev/next + comments -------------------------------------------------- */

.single .navigation.post-navigation,
.single #comments {
	max-width: 68ch;
	margin: var(--hta-s7) auto 0;
	padding-top: var(--hta-s6);
	border-top: 1px solid var(--hta-rule);
}

.single .post-navigation a {
	font-family: var(--hta-mono);
	font-size: .8125rem;
	color: var(--hta-accent);
	text-decoration: none;
}

.single #comments {
	font-family: var(--hta-sans);
}

.single .comments-title,
.single .comment-reply-title {
	font-family: var(--hta-mono);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--hta-ink);
	margin: 0 0 var(--hta-s4);
}

.single .comment-list { list-style: none; margin: 0; padding: 0; }

.single .comment-list article {
	padding: var(--hta-s4) 0;
	border-bottom: 1px solid var(--hta-rule);
}

.single .comment-author .fn {
	font-family: var(--hta-mono);
	font-size: .875rem;
	font-weight: 600;
	color: var(--hta-ink);
	font-style: normal;
}

.single .comment-metadata {
	font-family: var(--hta-mono);
	font-size: .6875rem;
	color: var(--hta-muted);
}

.single .comment-respond input[type="text"],
.single .comment-respond input[type="email"],
.single .comment-respond input[type="url"],
.single .comment-respond textarea {
	width: 100%;
	background: var(--hta-surface);
	color: var(--hta-ink);
	border: 1px solid var(--hta-rule);
	border-radius: var(--hta-radius);
	padding: .6rem .75rem;
	font-family: var(--hta-sans);
	font-size: .9375rem;
	margin-bottom: var(--hta-s3);
}

.single .comment-respond label {
	display: none; /* placeholders below carry the label; avoids duplicate text */
}

.single .comment-respond .form-submit input {
	width: auto;
	background: var(--hta-accent);
	color: var(--hta-surface);
	border: 0;
	font-family: var(--hta-mono);
	font-size: .8125rem;
	font-weight: 600;
	padding: .6rem 1.25rem;
	cursor: pointer;
}

.single .comment-notes,
.single .logged-in-as {
	font-size: .8125rem;
	color: var(--hta-muted);
}

/* Archive (the Guides page) --------------------------------------------- */

.archive .page-title,
.blog .page-title {
	font-family: var(--hta-mono);
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -.02em;
	padding-top: var(--hta-s6);
	margin-bottom: var(--hta-s5);
}

.archive .entry-summary,
.blog .entry-summary {
	color: var(--hta-muted);
	font-size: .9375rem;
	margin-top: .35rem;
}

.archive article.post,
.blog article.post {
	padding: var(--hta-s5) 0;
	border-bottom: 1px solid var(--hta-rule);
}

.archive .entry-title a,
.blog .entry-title a { color: var(--hta-ink); text-decoration: none; }
.archive .entry-title a:hover,
.blog .entry-title a:hover { color: var(--hta-accent); }

/* ==========================================================================
   10. Responsive (post/page content)
   ========================================================================== */

@media (max-width: 640px) {
	.hta-guide-meta { flex-direction: column; align-items: flex-start; }
	.entry-content { font-size: 1rem; }
}

/* ==========================================================================
   11. Responsive
   ========================================================================== */

@media (max-width: 880px) {
	.hta-split { grid-template-columns: 1fr; gap: 0; }
	.hta-split .hta-section + .hta-section { border-top: 1px solid var(--hta-rule); }
}

@media (max-width: 768px) {
	.site-header .inside-header { flex-wrap: wrap; gap: var(--hta-s3) var(--hta-s4); }
	.main-navigation { order: 3; flex: 1 1 100%; }
	.main-navigation .main-nav > ul { gap: var(--hta-s5); flex-wrap: wrap; }
	.hta-toggle { margin-left: 0; }
}

@media (max-width: 640px) {
	.hta-row {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: .35rem .875rem;
		padding: var(--hta-s4) .25rem;
	}

	.hta-row__title { order: -1; flex: 1 1 100%; font-size: 1rem; }

	.hta-ledger__item {
		flex: 1 1 100%;
		border-right: 0;
		border-bottom: 1px solid var(--hta-rule);
	}

	.hta-ledger__item:last-child { border-bottom: 0; }

	.hta-intro { padding-block: var(--hta-s6) var(--hta-s7); }
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* The toggle when it is appended into the primary <ul> as a menu item. */
.main-navigation .main-nav ul li.hta-toggle-item {
	display: flex;
	align-items: center;
}

.main-navigation .main-nav ul li.hta-toggle-item a { display: none; }