/*
Theme Name: Automaton Army
Theme URI: https://automatonarmy.com/
Author: Joe Bunting
Description: automatonarmy.com's theme (from theme/starter): the Letter home page with the hit list, posts on white with a sidebar, Nunito in the logo's teal and orange. Replaces Divi. Plan: clients/automatonarmy/docs/homepage-and-theme-plan.md.
Version: 0.1.7
Requires at least: 6.5
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: automatonarmy
*/

/* ==========================================================================
   1. Tokens. One light scheme (no dark mode, no toggle).
   ========================================================================== */
:root {
	--cream: #faf5ef; --cream-deep: #f1e8dc; --white: #ffffff;
	--teal: #30a7a7; --teal-ink: #1d7a7a; --deep: #17605f; --deep-2: #124e4d;
	--orange: #f5a623; --orange-hover: #ffb942; --orange-ink: #a86a00;
	--ink: #2b2b2b; --ink-soft: #4f4f4f; --ink-faint: #6f6f6f;
	--font: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
	--step--1: clamp(0.85rem, 0.82rem + 0.12vw, 0.92rem);
	--step-0: clamp(1.06rem, 1.02rem + 0.2vw, 1.2rem);
	--step-1: clamp(1.27rem, 1.18rem + 0.4vw, 1.55rem);
	--step-2: clamp(1.55rem, 1.38rem + 0.8vw, 2.1rem);
	--step-3: clamp(1.9rem, 1.55rem + 1.6vw, 3rem);
	--step-4: clamp(2.3rem, 1.7rem + 3vw, 4.4rem);
	--band: clamp(3.5rem, 2.5rem + 5vw, 6.5rem);
	--wide: 72rem; --measure: 36rem; --radius: 10px;
}

/* ==========================================================================
   2. Base
   ========================================================================== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: var(--step-0); line-height: 1.65; color: var(--ink); background: var(--cream); }
body.single-post, body.page-template-default, body.blog, body.archive, body.search, body.error404 { background: var(--white); }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--teal-ink); text-underline-offset: 0.18em; }
h1, h2, h3, h4 { font-weight: 900; line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 1rem; color: var(--ink); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -0.01em; line-height: 1.25; }
p { margin: 0 0 1rem; }
.wrap { width: min(100% - 2.5rem, var(--wide)); margin-inline: auto; }
.narrow { width: min(100% - 2.5rem, 46rem); margin-inline: auto; }
.band { padding-block: var(--band); }
.band--white { background: var(--white); }
.band--cream { background: var(--cream); }
.eyebrow { font-size: var(--step--1); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-ink); margin: 0 0 0.75rem; }
.eyebrow a { color: inherit; text-decoration: none; }
.lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink-soft); max-width: var(--measure); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link:focus { position: fixed !important; top: 0.5rem; left: 0.5rem; width: auto; height: auto; clip: auto; padding: 0.6rem 1rem; background: #fff; color: var(--ink); z-index: 99; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
[hidden] { display: none !important; }

/* Buttons */
.button, .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; min-height: 3rem; padding: 0.7rem 1.4rem; border: 0; border-radius: 999px; background: var(--orange); color: var(--ink); font: 800 var(--step-0)/1.1 var(--font); text-decoration: none; cursor: pointer; }
.button:hover, .wp-block-button__link:hover { background: var(--orange-hover); color: var(--ink); }

/* ==========================================================================
   3. Masthead and footer
   ========================================================================== */
.masthead { background: var(--deep); }
.masthead .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.1rem; }
.masthead .logo { background: var(--cream); border-radius: var(--radius); padding: 0.35rem 0.6rem; display: block; }
.masthead .logo img { width: clamp(8.5rem, 7rem + 5vw, 11rem); }
.masthead nav ul { display: flex; align-items: center; gap: clamp(0.8rem, 0.4rem + 1.5vw, 2rem); list-style: none; margin: 0; padding: 0; font-weight: 700; }
.masthead nav a { color: #fff; text-decoration: none; }
.masthead nav a:hover { text-decoration: underline; }
/* The menu's last item (Free, or the fallback's guide link) is the orange button. */
.masthead .button, .masthead nav li:last-child a { display: inline-flex; align-items: center; min-height: 2.6rem; padding: 0.55rem 1.1rem; border-radius: 999px; background: var(--orange); color: var(--ink); font-weight: 800; font-size: var(--step--1); }
.masthead .button:hover, .masthead nav li:last-child a:hover { background: var(--orange-hover); text-decoration: none; }
@media (max-width: 40em) { .masthead nav ul li:not(:last-child) { display: none; } }

.site-footer { background: var(--deep-2); color: #d6e6e5; padding-block: 3rem; font-size: var(--step--1); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; }
.site-footer ul { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; list-style: none; margin: 0; padding: 0; }
.site-footer a { color: #fff; }

/* ==========================================================================
   4. The guide signup band (end of every page) and the Kit forms
   ========================================================================== */
.signup { background: var(--cream-deep); color: var(--ink); padding-block: var(--band); }
.signup .grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 52em) { .signup .grid { grid-template-columns: 1.2fr 1fr; gap: 4rem; } }
.signup .cover { width: min(19rem, 70vw); box-shadow: 0 1.5rem 3rem -1rem rgba(0,0,0,.45); border-radius: 4px; justify-self: center; }
/* Guide signups (Site Basics forms): the band's on one line where there's room, the
   sidebar's stacked like the Divi site's Kit form. Labels are for screen readers. */
.guide-form .joes-form__field label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.guide-form .joes-form__field, .guide-form .joes-form__actions { margin: 0; }
.guide-form .joes-form__status { font-weight: 700; color: var(--teal-ink); }
.guide-form .joes-form__status:empty { display: none; }
.guide-form--band .joes-form { display: flex; flex-wrap: wrap; gap: 0.75rem; max-width: 30rem; }
.guide-form--band .joes-form__field { flex: 1 1 14rem; }
.guide-form--band .joes-form__status, .guide-form--band .cf-turnstile, .guide-form--band [class*=turnstile] { flex: 1 1 100%; }
.guide-form--band input[type=email] { width: 100%; min-height: 3.3rem; padding: 0.7rem 1rem; border: 2px solid var(--ink); border-radius: var(--radius); font: 600 var(--step-0) var(--font); background: #fff; color: var(--ink); }
.guide-form--band button[type=submit] { min-height: 3.3rem; padding: 0.7rem 1.4rem; border: 0; border-radius: 999px; background: var(--orange); color: var(--ink); font: 800 var(--step-0)/1.1 var(--font); cursor: pointer; }
.guide-form--band button[type=submit]:hover { background: var(--orange-hover); }
.guide-form--side .joes-form { display: grid; gap: 0.75rem; }
.guide-form--side input[type=email] { width: 100%; padding: 12px; border: 1px solid #4c4c4c; border-radius: 4px; font: 15px var(--font); background: #fff; }
.guide-form--side button[type=submit] { width: 100%; min-height: 2.9rem; border: 0; border-radius: 4px; background: var(--teal); color: #fff; font: 600 15px var(--font); cursor: pointer; }
.guide-form--side button[type=submit]:hover { background: var(--teal-ink); }
.guide-form--side .joes-form__status { font-size: 1rem; }
.kit-form { display: flex; flex-wrap: wrap; gap: 0.75rem; max-width: 30rem; }
.kit-form input[type=email] { flex: 1 1 14rem; min-height: 3.3rem; padding: 0.7rem 1rem; border: 2px solid var(--ink); border-radius: var(--radius); font: 600 var(--step-0) var(--font); background: #fff; color: var(--ink); }
.fine { font-size: var(--step--1); color: var(--ink-faint); margin-top: 0.8rem; }
.kit-done { font-weight: 800; color: var(--teal-ink); }

/* ==========================================================================
   5. Home: the Letter (hero on deep teal), the hit list, guides, Joe's automaton
   ========================================================================== */
.hero { background: var(--deep); color: #eaf4f3; padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.hero .grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 52em) { .hero .grid { grid-template-columns: 1.4fr 1fr; gap: 4rem; } }
.hero h1 { color: #fff; font-size: var(--step-4); margin-bottom: 1.3rem; }
.hero h1 em { font-style: normal; color: var(--orange); }
.hero .lede { color: #cfe3e1; margin-bottom: 2rem; }
.hero .portrait { width: min(20rem, 70vw); aspect-ratio: 1; object-fit: cover; border-radius: 50%; justify-self: center; }

.hit-list .ask { max-width: 46rem; margin-bottom: 3.5rem; }
.hit-list .cols { display: grid; gap: 3.5rem; }
@media (min-width: 60em) { .hit-list .cols { grid-template-columns: 1.35fr 1fr; gap: 5rem; } }
.sub-label { font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.14em; color: var(--teal-ink); margin-bottom: 1.4rem; font-weight: 900; }

/* The task form (a Site Basics form, restyled) */
.task-form .joes-form { display: flex; flex-wrap: wrap; gap: 0.75rem; max-width: 44rem; align-items: flex-start; }
.task-form .joes-form__field { margin: 0; flex: 1 1 100%; }
.task-form .joes-form__field--text { flex: 1 1 100%; }
.task-form .joes-form__field--email { flex: 1 1 16rem; }
.task-form .joes-form__actions { margin: 0; flex: 0 0 auto; }
.task-form .joes-form__error { display: block; font-size: var(--step--1); color: #a32c1e; font-weight: 700; }
.task-form .joes-form__error:empty { display: none; }
.task-form .joes-form__field label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.task-form .joes-form input[type=text], .task-form .joes-form input[type=email] { width: 100%; min-height: 3.5rem; padding: 0.8rem 1.1rem; border: 2px solid var(--ink); border-radius: var(--radius); font: 600 var(--step-0) var(--font); background: #fff; color: var(--ink); }
.task-form .joes-form button[type=submit] { min-height: 3.5rem; padding: 0.7rem 1.4rem; border: 0; border-radius: 999px; background: var(--orange); color: var(--ink); font: 800 var(--step-0)/1.1 var(--font); cursor: pointer; }
.task-form .joes-form button[type=submit]:hover { background: var(--orange-hover); }
.task-form .joes-form__status { flex: 1 1 100%; font-weight: 700; color: var(--teal-ink); }
.task-form .joes-form__status:empty { display: none; }

/* Step one (built by site.js): the task and the button, on one line where there's room. */
.task-step { display: flex; flex-wrap: wrap; gap: 0.75rem; max-width: 44rem; }
.task-step input { flex: 1 1 18rem; min-height: 3.5rem; padding: 0.8rem 1.1rem; border: 2px solid var(--ink); border-radius: var(--radius); font: 600 var(--step-0) var(--font); background: #fff; color: var(--ink); }
.task-step .button { min-height: 3.5rem; }

/* Step two: first name and email in a window, centered (as every popup on Joe's sites). */
.task-modal { width: min(100% - 2rem, 30rem); border: 0; border-radius: 14px; padding: 2.2rem 1.6rem 1.8rem; background: var(--white); color: var(--ink); box-shadow: 0 2rem 4rem -1rem rgba(0,0,0,.45); }
.task-modal::backdrop { background: rgba(18, 40, 40, 0.55); }
.task-modal h2 { font-size: var(--step-2); margin: 0 2rem 0.6rem 0; }
.task-modal__task { font-weight: 800; color: var(--teal-ink); margin: 0 0 0.6rem; }
.task-modal__task::before { content: "\201C"; } .task-modal__task::after { content: "\201D"; }
.task-modal__why { color: var(--ink-soft); font-size: var(--step--1); margin: 0 0 1.2rem; }
.task-modal__close { position: absolute; top: 0.8rem; right: 0.8rem; width: 2.6rem; height: 2.6rem; border: 0; border-radius: 50%; background: var(--cream); font: 900 1.5rem/1 var(--font); color: var(--ink); cursor: pointer; }
.task-modal .joes-form { display: grid; gap: 0.75rem; max-width: none; }
.task-modal .joes-form__field, .task-modal .joes-form__actions { flex: none; margin: 0; }
.task-modal .joes-form__field--task, .task-modal [data-task-field] { display: none; }
.task-modal .joes-form button[type=submit] { width: 100%; }

/* The wall: a ranked list, space between items (no rules) */
.wall { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; }
.task { display: grid; grid-template-columns: 5.2rem 1fr; gap: 1.1rem; align-items: start; }
.wall--ranked { counter-reset: r; }
.wall--ranked .task { grid-template-columns: 2.6rem 5.2rem 1fr; }
.wall--ranked .task::before { counter-increment: r; content: counter(r); font-size: var(--step-3); font-weight: 900; color: var(--orange); line-height: 1; padding-top: 0.2rem; }
@media (max-width: 34em) { .wall--ranked .task { grid-template-columns: 5.2rem 1fr; } .wall--ranked .task::before { display: none; } }
.task .t { font-size: var(--step-1); font-weight: 800; line-height: 1.3; margin: 0.15rem 0 0.25rem; }
.task .why { margin: 0; color: var(--ink-soft); font-style: italic; }
.task .meta { margin: 0.2rem 0 0; font-size: var(--step--1); font-weight: 800; }
.metoo { display: grid; justify-items: center; gap: 0.1rem; width: 5.2rem; padding: 0.55rem 0.3rem 0.5rem; border: 2px solid var(--teal-ink); border-radius: var(--radius); background: transparent; color: var(--teal-ink); font: 800 var(--step--1)/1.1 var(--font); cursor: pointer; }
.metoo .n { font-size: var(--step-2); font-weight: 900; line-height: 1; }
.metoo[aria-pressed="true"] { background: var(--teal-ink); color: var(--white); }
.task.is-built .t { color: var(--teal-ink); }
.built-mark { display: grid; place-items: center; width: 5.2rem; min-height: 4.4rem; border-radius: var(--radius); background: var(--orange); color: var(--ink); font: 900 var(--step--1)/1.1 var(--font); text-transform: uppercase; letter-spacing: 0.08em; }

.guides { display: grid; gap: 2.5rem 2rem; margin-top: 2.5rem; }
@media (min-width: 46em) { .guides { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.guide img { aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); margin-bottom: 1rem; }
.guide h3 { margin-bottom: 0.4rem; }
.guide h3 a { color: var(--ink); text-decoration: none; }
.guide p { color: var(--ink-soft); font-size: var(--step--1); margin: 0; }

.automaton { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 52em) { .automaton { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.automaton figure { margin: 0; }
.automaton figure img { border-radius: var(--radius); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.automaton figcaption { font-size: var(--step--1); color: var(--ink-faint); margin-top: 0.6rem; }
.sign { font-weight: 900; color: var(--teal-ink); font-size: var(--step-1); }

/* ==========================================================================
   6. Posts: white page, a reading column, the sidebar
   ========================================================================== */
.post-head { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) 2rem; }
.post-head h1 { font-size: var(--step-4); max-width: 22ch; margin-bottom: 1.4rem; }
.byline { display: flex; align-items: center; gap: 0.8rem; font-size: var(--step--1); color: var(--ink-soft); font-weight: 600; margin: 0; }
.byline img { width: 2.6rem; height: 2.6rem; border-radius: 50%; object-fit: cover; }
.byline strong { color: var(--ink); }
.post-grid { display: grid; gap: 2rem; padding-bottom: var(--band); }
@media (min-width: 64em) { .post-grid { grid-template-columns: minmax(0, 44rem) 15rem; justify-content: space-between; gap: 4rem; } }

.prose { font-size: clamp(1.08rem, 1.03rem + 0.25vw, 1.22rem); line-height: 1.75; min-width: 0; }
.prose > * { margin: 0 0 1.25rem; }
.prose h2 { font-size: var(--step-3); margin: 3.2rem 0 1.1rem; }
.prose h3 { font-size: var(--step-2); font-weight: 800; margin: 2.4rem 0 0.8rem; }
.prose h4 { font-size: var(--step-1); font-weight: 800; margin: 1.8rem 0 0.6rem; }
.prose :is(h2, h3, h4, h5, h6, .anchor) { scroll-margin-top: 1.5rem; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: 0.55rem; }
.prose li::marker { color: var(--orange-ink); font-weight: 900; }
.prose img { border-radius: var(--radius); height: auto; }
.prose .aligncenter { margin-inline: auto; }
.prose .alignleft { float: left; margin: 0.3rem 1.5rem 1rem 0; max-width: 50%; }
.prose .alignright { float: right; margin: 0.3rem 0 1rem 1.5rem; max-width: 50%; }
.prose a { font-weight: 700; }
.prose strong { font-weight: 800; }
.prose iframe, .prose video { max-width: 100%; }
.prose .wp-caption, .prose figure { max-width: 100% !important; margin-inline: 0; }
.prose .wp-caption-text, .prose figcaption { font-size: var(--step--1); color: var(--ink-faint); }
.prose blockquote { margin-inline: 0; padding-left: 1.2rem; font-style: italic; color: var(--ink-soft); }
.prose table { border-collapse: collapse; width: 100%; font-size: var(--step--1); }
.prose th, .prose td { text-align: left; padding: 0.5rem 0.6rem; vertical-align: top; }
.prose th { font-weight: 800; }
.prose::after { content: ""; display: table; clear: both; }

.side { font-size: var(--step--1); display: grid; gap: 3rem; align-content: start; }
.side h2 { font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.14em; color: var(--teal-ink); margin-bottom: 0.9rem; }
.toc ol, .most-read ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.toc a { color: var(--ink-soft); text-decoration: none; font-weight: 600; line-height: 1.35; display: block; }
.toc a:hover, .toc a[aria-current] { color: var(--teal-ink); }
.toc a[aria-current] { font-weight: 800; }
.most-read ol { gap: 1.1rem; }
.most-read a { display: grid; grid-template-columns: 5rem 1fr; gap: 0.8rem; align-items: center; color: var(--ink); text-decoration: none; font-weight: 800; line-height: 1.3; }
.most-read img { aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; }
@media (min-width: 64em) { .side { order: 2; } .toc summary { display: none; } }
@media (max-width: 63.99em) {
	.side { order: -1; }
	.side > :not(.toc) { display: none; }
	.toc h2 { display: none; }
	.toc summary { cursor: pointer; font-weight: 800; list-style: none; display: inline-flex; gap: 0.6rem; align-items: center; min-height: 2.8rem; padding: 0.4rem 1.1rem; border: 2px solid var(--teal-ink); border-radius: 999px; color: var(--teal-ink); }
	.toc summary::-webkit-details-marker { display: none; }
	.toc summary::after { content: "+"; font-weight: 900; }
	.toc details[open] summary::after { content: "\2212"; }
	.toc details[open] ol { margin-top: 1rem; }
}

/* The sidebar signups, as the Divi site's Kit form (Joe) */
.side-optin { background: var(--cream); border: 1px solid #e3e3e3; border-radius: 10px; padding: 2.2rem 1.4rem 1.6rem; text-align: center; color: #4c4c4c; }
.side-optin .h { font-size: 1.85rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 1rem; color: #4c4c4c; }
.side-optin p { font-size: 1.05rem; line-height: 1.6; margin: 0 0 1.3rem; }
.side-optin input[type=email] { width: 100%; padding: 12px; border: 1px solid #4c4c4c; border-radius: 4px; font: 15px var(--font); margin-bottom: 0.75rem; background: #fff; }
.side-optin button { width: 100%; min-height: 2.9rem; border: 0; border-radius: 4px; background: var(--teal); color: #fff; font: 600 15px var(--font); cursor: pointer; }
.side-optin button:hover { background: var(--teal-ink); }
.side-optin .small { font-size: 13px; margin: 0.9rem 0 0; }
.side .sticky { position: sticky; top: 1.5rem; }
/* The second waits for its spot, fades in, then stays. Without JavaScript it simply shows. */
.js .side .sticky { opacity: 0; visibility: hidden; transform: translateY(0.6rem); transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s 0.5s; }
.js .side .sticky.is-shown { opacity: 1; visibility: visible; transform: none; transition: opacity 0.5s ease, transform 0.5s ease; }
@media (prefers-reduced-motion: reduce) { .js .side .sticky { transition: none; transform: none; } }

.ask-end { background: var(--cream); }
.ask-end h2 { max-width: 24ch; }

/* ==========================================================================
   7. Lists of posts (Guides, categories, search) and plain pages
   ========================================================================== */
.list-head { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) 2.5rem; }
.list-head h1 { font-size: var(--step-4); margin: 0; }
.list-head p { color: var(--ink-soft); margin: 1rem 0 0; max-width: var(--measure); }
.post-list { list-style: none; margin: 0; padding: 0 0 var(--band); display: grid; gap: 3rem 2rem; }
@media (min-width: 46em) { .post-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .post-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.post-card img { aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); margin-bottom: 1rem; }
.post-card h2 { font-size: var(--step-1); font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; margin-bottom: 0.4rem; }
.post-card h2 a { color: var(--ink); text-decoration: none; }
.post-card p { color: var(--ink-soft); font-size: var(--step--1); margin: 0; }
.post-card .eyebrow { margin-bottom: 0.4rem; }
.pagination, .nav-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; padding-bottom: var(--band); font-weight: 800; }
.page-numbers.current { color: var(--ink); }

.page-head { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) 1.5rem; }
.page-head h1 { font-size: var(--step-4); margin: 0; }
.page-body { padding-bottom: var(--band); }
.page-body .prose { max-width: 44rem; }
.searchform { display: flex; gap: 0.6rem; flex-wrap: wrap; max-width: 30rem; }
.searchform input[type=search] { flex: 1 1 12rem; min-height: 3rem; padding: 0.6rem 1rem; border: 2px solid var(--ink); border-radius: var(--radius); font: 600 1rem var(--font); }

/* Comments */
.comments { max-width: 44rem; padding-bottom: var(--band); }
.comment-list { list-style: none; padding: 0; }
.comment-list .children { list-style: none; padding-left: 1.5rem; }
.comment-body { margin-bottom: 2rem; }
.comment-meta { font-size: var(--step--1); color: var(--ink-faint); }
.comment-form textarea, .comment-form input[type=text], .comment-form input[type=email], .comment-form input[type=url] { width: 100%; padding: 0.7rem; border: 2px solid var(--ink); border-radius: var(--radius); font: 1rem var(--font); }
.comment-form .submit { min-height: 3rem; padding: 0.6rem 1.3rem; border: 0; border-radius: 999px; background: var(--orange); font: 800 1rem var(--font); cursor: pointer; }

/* Novashare's floating share bar sits over the text on phones and tablets (Joe: remove on
   mobile); the row of buttons above each post stays. */
@media (max-width: 63.99em) { .ns-buttons.ns-floating { display: none !important; } }

/* The guide popup (Joe's Popups, popups/guide.php): the cover beside the words on wide
   screens, above them on phones. */
.jp-guide { display: grid; gap: 1.5rem; align-items: center; font-family: var(--font); color: var(--ink); }
@media (min-width: 40em) { .jp-guide { grid-template-columns: 9rem 1fr; gap: 2rem; } }
.jp-guide__cover { width: 9rem; box-shadow: 0 1rem 2rem -0.8rem rgba(0,0,0,.45); border-radius: 3px; }
@media (max-width: 39.99em) { .jp-guide__cover { width: 6.5rem; } }
.jp-guide .jp__title { font-size: var(--step-2); font-weight: 900; line-height: 1.1; margin: 0 0 0.6rem; }
.jp-guide p { margin: 0 0 1rem; color: var(--ink-soft); }
.jp-guide__done { color: var(--teal-ink) !important; }
.guide-form--popup .joes-form { display: grid; gap: 0.75rem; }
.guide-form--popup .joes-form__field label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.guide-form--popup .joes-form__field, .guide-form--popup .joes-form__actions { margin: 0; }
.guide-form--popup input[type=email] { width: 100%; min-height: 3.2rem; padding: 0.7rem 1rem; border: 2px solid var(--ink); border-radius: var(--radius); font: 600 1rem var(--font); background: #fff; }
.guide-form--popup button[type=submit] { width: 100%; min-height: 3.2rem; border: 0; border-radius: 999px; background: var(--orange); color: var(--ink); font: 800 1rem var(--font); cursor: pointer; }
.guide-form--popup .joes-form__status:empty { display: none; }
dialog.jp[data-jp="guide"] { width: min(100% - 2rem, 42rem); max-width: none; }