/*
Theme Name: Link Clusters
Description: A theme for an SEO question site whose answers link to one another: the front page reads those links and draws every cluster they make as a seed head of dots, the most linked-to answer at its heart; choose one and all its answers are listed beside it. An answer reads in two columns, its rail showing its sections, its own cluster with the answer circled, and the answers that link to it and that it links to.
Version: 1.0.0
Requires at least: 6.0
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: link-clusters
*/

:root {
	--lkc-ground: #e7eedb;
	--lkc-paper: #f7faee;
	--lkc-field: #d9e3cc;
	--lkc-ink: #0f1d16;
	--lkc-ink-soft: #45524a;
	--lkc-link: #2c3fa6;
	--lkc-link-hover: #8a2c0d;
	--lkc-seed: #6c7a72;
	--lkc-seed-much: #2c3fa6;
	--lkc-hub: #c43d0b;
	--lkc-on-hub: #ffffff;
	--lkc-rule: #c9d4bd;
	--lkc-rule-strong: #68756c;
	--lkc-focus: #c43d0b;
	--lkc-head: "Segoe UI Variable Display", "Segoe UI", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
	--lkc-text: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
	--lkc-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme:dark) {
	:root {
		--lkc-ground: #0f1a14;
		--lkc-paper: #15201a;
		--lkc-field: #1b2a22;
		--lkc-ink: #e6f0e4;
		--lkc-ink-soft: #b0b7bf;
		--lkc-link: #a9c1ff;
		--lkc-link-hover: #ffb08a;
		--lkc-seed: #7f8b99;
		--lkc-seed-much: #a9c1ff;
		--lkc-hub: #ff8a52;
		--lkc-on-hub: #111417;
		--lkc-rule: #30373e;
		--lkc-rule-strong: #858e99;
		--lkc-focus: #ff8a52;
	}
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
body { margin: 0; background: var(--lkc-ground); color: var(--lkc-ink); font: 1.0625rem/1.65 var(--lkc-text); overflow-wrap: break-word; }
img, video, iframe { max-width: 100%; }
img { height: auto; }
a { color: var(--lkc-link); text-underline-offset: 3px; }
a:hover { color: var(--lkc-link-hover); }
:focus-visible { outline: 3px solid var(--lkc-focus); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--lkc-head); font-weight: 700; line-height: 1.18; letter-spacing: -0.01em; text-wrap: balance; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; white-space: nowrap; }
.lkc-hop:focus { position: fixed; top: 8px; left: 8px; z-index: 10; width: auto; height: auto; margin: 0; padding: 10px 14px; clip-path: none; background: var(--lkc-paper); color: var(--lkc-link); }
.lkc-plane { width: min(100% - 32px, 76rem); margin-inline: auto; }

/* The top bar */
.lkc-top { background: var(--lkc-paper); border-bottom: 1px solid var(--lkc-rule); }
.lkc-top-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; min-height: 64px; padding-block: 6px; }
.lkc-homelink { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--lkc-ink); font: 700 1.1875rem/1.2 var(--lkc-head); text-decoration: none; }
.lkc-homelink-mark { width: 30px; height: 30px; fill: var(--lkc-seed); }
.lkc-homelink-mark .lkc-homelink-lead { fill: var(--lkc-hub); }
.lkc-top-nav ul, .lkc-base-nav ul { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 0; padding: 0; list-style: none; }
.lkc-top-nav a, .lkc-base-nav a { display: inline-flex; align-items: center; min-height: 44px; }

/* The front page: what the site answers, under the lens */
.lkc-intro { padding-block: 32px 36px; }
.lkc-intro-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; }
.lkc-intro-h { margin: 0; font-size: clamp(1.875rem, 1.3rem + 2.4vw, 3.25rem); max-width: 20ch; }
.lkc-intro-say { margin: 14px 0 0; max-width: 44rem; font-size: 1.125rem; color: var(--lkc-ink-soft); }
.lkc-intro-count { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; font: 600 0.9375rem/1.2 var(--lkc-mono); }
.lkc-intro-count li { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; background: var(--lkc-paper); border: 1px solid var(--lkc-rule-strong); border-radius: 22px; }
.lkc-intro-count a { display: inline-flex; align-items: center; min-height: 44px; }
.lkc-intro-words .lkc-query { margin-top: 20px; max-width: 40rem; }
.lkc-intro-art { position: relative; justify-self: center; width: min(100%, 15rem); aspect-ratio: 1; }
.lkc-intro-art .lkc-seedhead { display: block; }
.lkc-lens { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; }
.lkc-lens-glass { stroke: var(--lkc-hub); stroke-width: 2.4; fill: var(--lkc-hub); fill-opacity: 0.06; }
.lkc-lens-grip { stroke: var(--lkc-ink); stroke-width: 6; stroke-linecap: round; }

/* The search bar */
.lkc-query { display: flex; align-items: stretch; background: var(--lkc-paper); border: 2px solid var(--lkc-rule-strong); border-radius: 28px; overflow: hidden; }
.lkc-query:focus-within { border-color: var(--lkc-focus); }
.lkc-query-box { flex: 1 1 0; width: 100%; min-width: 0; min-height: 52px; padding: 6px 4px 6px 20px; background: transparent; color: var(--lkc-ink); border: 0; font: inherit; }
.lkc-query-box:focus-visible { outline: none; }
.lkc-query-box::placeholder { color: var(--lkc-ink-soft); opacity: 1; }
.lkc-query-go { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; min-width: 52px; padding: 0 20px; background: var(--lkc-link); color: var(--lkc-paper); border: 0; font: 700 1rem/1 var(--lkc-text); cursor: pointer; }
.lkc-query-go:focus-visible { outline: 3px solid var(--lkc-focus); outline-offset: -5px; }
.lkc-query-glass { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }

/* Seed heads */
.lkc-seedhead { display: block; height: auto; margin-inline: auto; overflow: visible; }
.lkc-seedhead-rim { fill: var(--lkc-paper); stroke: var(--lkc-rule-strong); stroke-width: 1; }
.lkc-pip { fill: var(--lkc-seed); }
.lkc-pip-much { fill: var(--lkc-seed-much); }
.lkc-pip-lead { fill: var(--lkc-hub); }
.lkc-seedhead-ring { fill: none; stroke: var(--lkc-hub); stroke-width: 1.6; }
.lkc-seedhead-here { fill: none; stroke: var(--lkc-ink); stroke-width: 2.4; }

/* The clusters */
.lkc-meadow { padding-block: 32px 40px; background: var(--lkc-field); border-block: 1px solid var(--lkc-rule); }
.lkc-meadow-h { margin: 0; font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem); }
.lkc-meadow-say { margin: 10px 0 0; max-width: 52rem; color: var(--lkc-ink-soft); }
.lkc-beds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 12px; margin-top: 22px; }
.lkc-pick { position: absolute; top: 12px; left: 12px; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.lkc-bed { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 8px; min-height: 44px; padding: 12px 12px 10px; background: var(--lkc-paper); border: 1px solid var(--lkc-rule); border-radius: 12px; cursor: pointer; }
.lkc-bed:hover { border-color: var(--lkc-rule-strong); }
.lkc-bed-art { display: grid; place-items: center; }
.lkc-bed-art .lkc-twos { width: 100%; }
.lkc-twos { display: block; width: 100%; height: auto; }
.lkc-twos-tie { stroke: var(--lkc-seed); stroke-width: 1.6; }
.lkc-bed-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font: 600 0.9375rem/1.35 var(--lkc-text); color: var(--lkc-ink); }
.lkc-bed-n { font: 600 0.8125rem/1.2 var(--lkc-mono); color: var(--lkc-ink-soft); }
.lkc-bed:has(.lkc-pick:checked) { border-color: var(--lkc-hub); box-shadow: inset 0 0 0 2px var(--lkc-hub); }
.lkc-bed:has(.lkc-pick:checked) .lkc-bed-n { color: var(--lkc-ink); }
.lkc-bed:has(.lkc-pick:focus-visible) { outline: 3px solid var(--lkc-focus); outline-offset: 2px; }
.lkc-crop { display: none; grid-column: 1 / -1; padding: 18px 20px 20px; background: var(--lkc-paper); border: 1px solid var(--lkc-rule-strong); border-top: 4px solid var(--lkc-hub); border-radius: 12px; }
.lkc-bed:has(.lkc-pick:checked) + .lkc-crop { display: block; }
.lkc-crop-h { margin: 0; font-size: 1.25rem; }
.lkc-crop-n { margin: 6px 0 12px; font: 600 0.875rem/1.3 var(--lkc-mono); color: var(--lkc-ink-soft); }
.lkc-crop-list, .lkc-crop-twos { margin: 0; padding: 0; list-style: none; }
.lkc-crop-list li, .lkc-crop-twos li { padding-block: 2px 8px; border-top: 1px solid var(--lkc-rule); line-height: 1.4; }
.lkc-crop-list a, .lkc-crop-twos a { display: flex; align-items: center; min-height: 44px; padding-block: 8px; }
.lkc-crop-in { display: block; margin-top: -4px; font: 600 0.8125rem/1.2 var(--lkc-mono); color: var(--lkc-ink-soft); }
.lkc-crop-tie { display: block; width: 28px; height: 0; margin: 2px 0; border-top: 2px solid var(--lkc-seed); }

/* Lists of answers */
.lkc-newest { padding-block: 34px 42px; }
.lkc-newest-h { margin: 0; font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); }
.lkc-hits { margin: 16px 0 0; padding: 0; list-style: none; }
.lkc-hit { padding: 16px 0 18px; border-top: 1px solid var(--lkc-rule); break-inside: avoid; }
.lkc-hit-q { display: block; min-height: 44px; padding-block: 8px; font: 700 1.1875rem/1.3 var(--lkc-head); }
.lkc-hit-say { margin: 6px 0 0; color: var(--lkc-ink-soft); }
.lkc-hit-in { margin: 6px 0 0; font: 600 0.8125rem/1.2 var(--lkc-mono); color: var(--lkc-ink-soft); }
.lkc-listing { padding-block: 28px 40px; }
.lkc-listing-h { margin: 0 0 8px; font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); }
.lkc-listing-back a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.lkc-listing .lkc-query { margin-block: 12px 8px; max-width: 40rem; }
.lkc-nothing-yet { margin: 16px 0; font-size: 1.125rem; }
.pagination { margin-top: 24px; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 6px; }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; background: var(--lkc-paper); border: 1px solid var(--lkc-rule); border-radius: 22px; font: 600 0.9375rem/1 var(--lkc-mono); text-decoration: none; }
.pagination .page-numbers.current { background: var(--lkc-hub); color: var(--lkc-on-hub); border-color: var(--lkc-hub); }

/* One answer */
.lkc-qhead { padding-block: 22px 26px; background: var(--lkc-field); border-bottom: 1px solid var(--lkc-rule); }
.lkc-qhead-crumb { margin: 0; }
.lkc-qhead-crumb a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.lkc-qhead-h { margin: 4px 0 0; max-width: 34ch; font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.75rem); }
.lkc-qhead-chips { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 14px 0 0; padding: 0; list-style: none; font: 600 0.8125rem/1.2 var(--lkc-mono); }
.lkc-qhead-chips li { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; background: var(--lkc-paper); border: 1px solid var(--lkc-rule-strong); border-radius: 16px; }
.lkc-qbody { display: grid; gap: 28px; padding-block: 28px 36px; }
.lkc-qtext { min-width: 0; max-width: 44rem; }
.lkc-qtext > :first-child { margin-top: 0; }
.lkc-qtext p, .lkc-qtext ul, .lkc-qtext ol { margin-block: 0 1em; }
.lkc-qtext li { margin-bottom: 0.35em; }
.lkc-qtext h2 { margin: 1.7em 0 0.55em; font-size: 1.5rem; }
.lkc-qtext h3 { margin: 1.4em 0 0.5em; font-size: 1.25rem; }
.lkc-qtext .lkc-gist { padding: 14px 18px; background: var(--lkc-paper); border-left: 5px solid var(--lkc-hub); border-radius: 0 10px 10px 0; font-size: 1.1875rem; line-height: 1.6; }
.lkc-tablebox { max-width: 100%; overflow-x: auto; margin: 0 0 1.2em; }
.lkc-tablebox:focus-visible { outline-offset: 4px; }
.lkc-qtext table { width: 100%; margin: 0; border-collapse: collapse; font-size: 0.9688rem; line-height: 1.5; }
.lkc-qtext figure { margin: 0 0 1.2em; }
.lkc-qtext figure .lkc-tablebox { margin: 0; }
.lkc-qtext th { padding: 9px 12px; background: var(--lkc-field); color: var(--lkc-ink); border-bottom: 2px solid var(--lkc-rule-strong); text-align: left; vertical-align: bottom; }
.lkc-qtext td { padding: 9px 12px; border-bottom: 1px solid var(--lkc-rule); vertical-align: top; }
.lkc-qtext blockquote { margin: 0 0 1em; padding-left: 16px; border-left: 3px solid var(--lkc-rule-strong); }
.lkc-qtext code { font: 0.9em/1.4 var(--lkc-mono); }
.lkc-qtext pre { overflow-x: auto; padding: 12px 14px; background: var(--lkc-paper); border: 1px solid var(--lkc-rule); border-radius: 8px; }
.lkc-ownnote { color: var(--lkc-ink-soft); }
.lkc-pagesgo { font-weight: 600; }
.lkc-endnote { margin-top: 28px; padding: 16px 18px; background: var(--lkc-paper); border: 1px solid var(--lkc-rule); border-radius: 10px; color: var(--lkc-ink-soft); font-size: 0.9688rem; }
.lkc-qtext .lkc-endnote-h { margin: 0 0 6px; font-size: 1.0625rem; color: var(--lkc-ink); }
.lkc-endnote p { margin: 0; }

/* The rail beside an answer */
.lkc-flank { display: grid; gap: 14px; align-content: start; min-width: 0; }
.lkc-flank-box { padding: 14px 16px 16px; background: var(--lkc-paper); border: 1px solid var(--lkc-rule); border-radius: 12px; }
.lkc-flank-h { margin: 0 0 6px; font: 700 0.8125rem/1.3 var(--lkc-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--lkc-ink-soft); }
.lkc-flank-list { margin: 0; padding: 0; list-style: none; }
.lkc-flank-list li { border-top: 1px solid var(--lkc-rule); line-height: 1.35; }
.lkc-flank-list li:first-child { border-top: 0; }
.lkc-flank-list a { display: flex; align-items: center; min-height: 44px; padding-block: 8px; }
.lkc-flank-art { width: min(100%, 12rem); margin: 4px auto 10px; }
.lkc-flank-say { margin: 0; font-size: 0.9375rem; color: var(--lkc-ink-soft); }
.lkc-flank-lead { margin: 6px 0 0; line-height: 1.35; }
.lkc-flank-lead a { display: flex; align-items: center; min-height: 44px; padding-block: 8px; font-weight: 600; }

/* More from its cluster, newer and older */
.lkc-kin { padding-block: 28px 32px; background: var(--lkc-field); border-top: 1px solid var(--lkc-rule); }
.lkc-kin-h { margin: 0 0 12px; font-size: 1.375rem; }
.lkc-kin-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.lkc-kin-row a { display: flex; align-items: center; height: 100%; min-height: 44px; padding: 12px 14px; background: var(--lkc-paper); border: 1px solid var(--lkc-rule); border-radius: 10px; line-height: 1.35; }
.lkc-kin-all a { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; font-weight: 700; }
.lkc-nextdoor { padding-block: 24px; }
.lkc-nextdoor-in { display: grid; gap: 10px; }
.lkc-nextdoor-go { display: grid; gap: 4px; min-height: 44px; padding: 12px 16px; background: var(--lkc-paper); border: 1px solid var(--lkc-rule); border-radius: 10px; text-decoration: none; }
.lkc-nextdoor-tag { font: 600 0.8125rem/1.2 var(--lkc-mono); color: var(--lkc-ink-soft); }
.lkc-nextdoor-name { line-height: 1.35; text-decoration: underline; text-underline-offset: 3px; }
.lkc-remarks { padding-bottom: 32px; }

/* Plain pages and the missing page */
.lkc-leaf { padding-block: 28px 40px; }
.lkc-leaf-in { width: min(100% - 32px, 46rem); margin-inline: auto; padding-block: 28px 40px; }
.lkc-leaf .lkc-leaf-in { padding-block: 0; }
.lkc-leaf-text p { margin-block: 0 1em; }
.lkc-gohome { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* Comments */
.lkc-replies { max-width: 44rem; margin-top: 8px; }
.lkc-replies-h, .comment-reply-title { font-size: 1.3125rem; }
.lkc-replies-list { padding-left: 1.2em; }
.comment-form label { display: block; font-weight: 600; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { width: 100%; min-height: 44px; padding: 6px 10px; background: var(--lkc-paper); color: var(--lkc-ink); border: 1px solid var(--lkc-rule-strong); border-radius: 8px; font: inherit; }
.comment-form .submit { min-height: 44px; padding: 6px 18px; background: var(--lkc-link); color: var(--lkc-paper); border: 0; border-radius: 22px; font: 700 1rem/1.2 var(--lkc-text); cursor: pointer; }

/* The foot */
.lkc-base { padding-block: 24px 28px; background: var(--lkc-paper); border-top: 1px solid var(--lkc-rule); }
.lkc-base-in { display: grid; gap: 14px; }
.lkc-base-h { margin: 0 0 8px; font: 700 0.8125rem/1.3 var(--lkc-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--lkc-ink-soft); }
.lkc-base-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 0; padding: 0; list-style: none; }
.lkc-base-row a { display: flex; align-items: center; min-height: 44px; padding-block: 8px; font-size: 0.9375rem; line-height: 1.35; }
.lkc-base-year { margin: 0; font-size: 0.9375rem; color: var(--lkc-ink-soft); }

@media (max-width: 639px) {
	.lkc-base-nav ul { display: grid; grid-template-columns: 1fr 1fr; }
	.lkc-intro-art { order: -1; width: min(60%, 11rem); }
}

@media (min-width: 640px) {
	.lkc-beds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.lkc-base-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.lkc-nextdoor-in { grid-template-columns: 1fr 1fr; }
	.lkc-nextdoor-older { grid-column: 2; }
}

@media (min-width: 900px) {
	.lkc-intro-in { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
	.lkc-intro-art { width: min(100%, 22rem); }
}

@media (min-width: 1000px) {
	.lkc-beds { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.45fr); }
	.lkc-crop { grid-column: 4; grid-row: 1 / span 60; align-self: start; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
	.lkc-qbody { grid-template-columns: minmax(0, 44rem) minmax(17rem, 21rem); justify-content: space-between; column-gap: 48px; }
	.lkc-flank { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
	.lkc-newest .lkc-hits { columns: 2; column-gap: 40px; }
	.lkc-base-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (min-width: 1240px) {
	.lkc-beds { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.6fr); }
	.lkc-crop { grid-column: 5; }
}

@supports not selector(:has(*)) {
	.lkc-crop, .lkc-crop:nth-child(n) { display: block; grid-column: 1 / -1; grid-row: auto; position: static; max-height: none; }
}

@media print {
	.lkc-top, .lkc-base, .lkc-flank, .lkc-kin, .lkc-nextdoor, .lkc-replies, .pagination, .lkc-meadow { display: none; }
}