/*
Theme Name: Vertical Hold
Theme URI: https://vdeviance.online
Author: VDeviance
Author URI: https://vdeviance.online
Description: A fixed "glyph sidebar" newsroom theme — the three-pane reading room of the classic Sidebar theme rebuilt in the Vertical Hold terminal visual language with the editorial tooling of the Raster Feedback Terminal family: dark/schematic display modes, warm-amber legible terminal text, subtitles, review scores, footnotes & sources, author boxes, related posts and word counts. Based on the Sidebar theme by ThemesKult (defunct; MIT — https://github.com/themeskult/sidebar-theme), with thanks to its authors. Content moves freely between this theme and any Raster Feedback Terminal theme — same meta keys and shortcodes.
Version: 2.0.1
Requires at least: 5.9
Tested up to: 6.7
Requires PHP: 7.4
License: MIT
License URI: https://opensource.org/licenses/MIT
Text Domain: vertical-hold
Tags: blog, news, one-column, two-columns, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ==========================================================================
   Design tokens are loaded first from inc/css/fl-tokens.css (dark terminal
   by default; html.fl-schematic flips to the light schematic blueprint).
   This file only builds chrome on top of those --color-* / --font-* variables.
   ========================================================================== */

:root {
	--rail-w:   84px;
	--panel-w:  300px;
	--panel-w-lg: 260px;
	--gutter:   40px;
	--color-panel: var(--color-surface);
	--content-max: 1600px; /* ultrawide shim — reading column stops growing past this */
}

html {
	height: 100%;
	-webkit-text-size-adjust: 100%;
	scrollbar-gutter: stable;
}

body {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.65;
	background: var(--color-bg);
	color: var(--color-text);
	word-wrap: break-word;
	overflow-wrap: break-word;
	text-align: left;
}

img, video, embed, object, iframe {
	max-width: 100%;
}

img {
	height: auto;
}

::selection {
	background: var(--color-accent);
	color: var(--color-darker);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	line-height: 1.25;
	color: var(--color-text);
	margin: 1.4em 0 0.5em;
}

p {
	margin-bottom: 1.1em;
}

a {
	color: var(--color-accent);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

button, input, select, textarea {
	font-family: var(--font-body);
}

/* Screen-reader utilities */
.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-color: var(--color-surface);
	clip: auto !important;
	clip-path: none;
	color: var(--color-text);
	display: block;
	font-size: 0.9rem;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 12px 16px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 99999;
}

/* ==========================================================================
   Rail — fixed far-left glyph sidebar
   ========================================================================== */

.vh-skip-link {
	position: absolute;
	left: -9999px;
}

.vh-skip-link:focus {
	left: calc(var(--rail-w) + 8px);
	top: 8px;
	background: var(--color-darker);
	border: 1px solid var(--color-border-bright);
	color: var(--color-text);
	padding: 8px 14px;
	z-index: 100000;
}

.vh-rail {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: var(--rail-w);
	z-index: 500;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: var(--color-darker);
	border-right: 1px solid var(--color-border);
}

.vh-rail-brand {
	padding: 18px 0 14px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.vh-brand-img {
	display: block;
	width: 44px;
	height: 44px;
}

.vh-brand-img--dark {
	display: none;
}

html.fl-schematic .vh-brand-img--light {
	display: none;
}

html.fl-schematic .vh-brand-img--dark {
	display: block;
}

.vh-brand--custom .fl-site-logo {
	max-width: calc(var(--rail-w) - 20px);
	height: auto;
}

/* Nav — one glyph button per primary-menu item */
.vh-nav {
	flex: 1;
	min-height: 0;
	width: 100%;
	overflow: visible;
}

@media (min-width: 901px) and (max-height: 660px) {
	/* Short viewports: the rail scrolls. Labels are still reachable on
	   focus (they sit above the nav box there), just not on hover. */
	.vh-nav {
		overflow-y: auto;
		overflow-x: hidden;
	}
}

.vh-nav-list {
	list-style: none;
	margin: 0;
	padding: 6px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.vh-nav-item {
	position: relative;
	width: 100%;
}

.vh-nav-link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 52px;
	color: var(--color-nav-text);
	text-decoration: none;
	transition: color var(--transition), background var(--transition);
}

.vh-nav-link:hover,
.vh-nav-link:focus-visible,
.vh-nav-link--current {
	color: var(--color-accent);
	background: linear-gradient(90deg, transparent 0, rgba(128, 128, 128, 0.07) 46%, transparent 100%);
	outline: none;
}

.vh-nav-link--current {
	box-shadow: inset calc(var(--rail-w) * -0.02) 0 0 var(--color-accent);
}

.vh-nav-link .vh-glyph {
	transition: transform var(--transition);
}

.vh-nav-link:hover .vh-glyph {
	transform: scale(1.12);
}

.vh-nav-monogram {
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* Tooltip label (desktop): slides out to the right of the rail on hover */
.vh-nav-text {
	position: absolute;
	left: 100%;
	top: 50%;
	transform: translate(6px, -50%);
	padding: 6px 12px;
	background: var(--color-bg);
	border: 1px solid var(--color-border-bright);
	color: var(--color-text);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 30;
	transition: opacity var(--transition), transform var(--transition);
}

.vh-nav-text::before {
	content: "";
	position: absolute;
	right: 100%;
	top: 50%;
	transform: translateY(-50%);
	border: 5px solid transparent;
	border-right-color: var(--color-border-bright);
}

.vh-nav-item:hover .vh-nav-text,
.vh-nav-link:hover + .vh-nav-text,
.vh-nav-link:focus-visible ~ .vh-nav-text,
.vh-nav-item:focus-within .vh-nav-text {
	opacity: 1;
	visibility: visible;
	transform: translate(10px, -50%);
}

/* Rail footer — search, mode toggle, clock, credit */
.vh-rail-foot {
	width: 100%;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 10px 0 16px;
}

.vh-search-open {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--color-nav-text);
	cursor: pointer;
	transition: color var(--transition), transform var(--transition);
}

.vh-search-open:hover {
	color: var(--color-accent);
	transform: scale(1.1);
}

/* Mode toggle (rail variant) — small pill switch with label underneath */
.fl-mode-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--color-muted);
	cursor: pointer;
}

.fl-mode-toggle .track {
	position: relative;
	width: 38px;
	height: 20px;
	border: 1px solid var(--color-border-bright);
	border-radius: 10px;
	background: var(--color-bg);
	transition: background var(--transition), border-color var(--transition);
	flex-shrink: 0;
}

.fl-mode-toggle .track::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--color-nav-text);
	transition: transform var(--transition), background var(--transition);
}

html.fl-schematic .fl-mode-toggle .track::after {
	transform: translateX(18px);
	background: var(--color-accent);
}

.fl-mode-toggle:hover .track {
	border-color: var(--color-accent);
}

.fl-mode-toggle--rail {
	flex-direction: column;
	gap: 7px;
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.14em;
}

.fl-mode-toggle--rail .track {
	margin: 0 auto;
}

.vh-clock {
	font-size: 0.66rem;
	line-height: 1.4;
	letter-spacing: 0.08em;
	color: var(--color-muted);
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.vh-rail-credit {
	font-size: 0.6rem;
	line-height: 1.5;
	color: var(--color-muted);
	text-align: center;
	padding: 0 6px;
	word-break: break-word;
}

.vh-rail-credit a,
.vh-rail-credit--tiny {
	color: var(--color-muted);
}

.vh-rail-credit--tiny {
	display: block;
	font-size: 0.55rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.75;
}

.vh-rail-credit--tiny:hover {
	color: var(--color-accent);
	opacity: 1;
}

.vh-nav-toggle {
	display: none;
}

/* ==========================================================================
   Posts panel — fixed middle pane listing every post
   ========================================================================== */

.vh-panel {
	position: fixed;
	top: 0;
	bottom: 0;
	left: var(--rail-w);
	width: var(--panel-w);
	z-index: 400;
	display: flex;
	flex-direction: column;
	background: var(--color-panel);
	border-right: 1px solid var(--color-border);
}

.vh-panel-head {
	flex-shrink: 0;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding: 14px 16px 10px;
	border-bottom: 2px solid var(--color-border);
}

.vh-panel-title {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	font-family: var(--font-heading);
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-text);
}

.vh-panel-title-count {
	color: var(--color-muted);
}

.sidebar-posts {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	list-style: none;
	margin: 0;
	padding: 0;
	scrollbar-width: thin;
}

.vh-panel-item a {
	display: block;
	padding: 11px 16px 11px 18px;
	border-left: 2px solid transparent;
	border-bottom: 1px solid var(--color-border);
	text-decoration: none;
	transition: background var(--transition), border-color var(--transition);
}

.vh-panel-item a:hover {
	background: rgba(128, 128, 128, 0.08);
}

.vh-panel-item .title {
	display: block;
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--color-sidebar-text);
}

.vh-panel-item a:hover .title {
	color: var(--color-accent);
}

.vh-panel-item .meta {
	display: block;
	margin-top: 3px;
	font-size: 0.68rem;
	letter-spacing: 0.03em;
	color: var(--color-muted);
}

.vh-panel-item .words {
	white-space: nowrap;
}

.vh-panel-item.current-post a {
	border-left-color: var(--color-accent);
	background: linear-gradient(90deg, rgba(51, 255, 138, 0.06), transparent 70%);
}

html.fl-schematic .vh-panel-item.current-post a {
	background: linear-gradient(90deg, rgba(20, 112, 63, 0.08), transparent 70%);
}

.vh-panel-item.current-post .title {
	color: var(--color-accent);
}

.vh-panel-foot {
	flex-shrink: 0;
	padding: 8px 16px;
	border-top: 2px solid var(--color-border);
	font-size: 0.64rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-muted);
}

/* ==========================================================================
   Reading room — home & single: rail + panel fixed, reader scrolls
   ========================================================================== */

body.home,
body.single {
	height: 100%;
	overflow: hidden;
}

#main {
	margin-left: var(--rail-w);
	min-height: 100vh;
}

body.home #main,
body.single #main {
	margin-left: 0;
}

body.home #primary.content-area,
body.single #primary.content-area {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: calc(var(--rail-w) + var(--panel-w));
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	background: var(--color-bg);
	scrollbar-width: thin;
}

/* Full bleed by default — the article spans the whole reading pane. The
   --content-max shim (see Responsive) re-caps it only once the pane would
   grow past comfortable prose widths (ultrawide monitors). */
body.home .site-content,
body.single .site-content {
	max-width: none;
	margin: 0;
	padding: 0;
}

/* ==========================================================================
   Static flow — pages, archives, search, 404 (rail only, no panel)
   ========================================================================== */

body:not(.home):not(.single) .site-content {
	max-width: none;
	margin: 0;
	padding: 56px 48px 120px;
}

/* ==========================================================================
   Reading column typography
   ========================================================================== */

.vh-post {
	background: var(--color-bg);
}

/* Featured image / cover */
.fl-post-thumbnail {
	position: relative;
	margin: 0 0 26px;
	line-height: 0;
	background: var(--color-darker);
}

.fl-post-thumbnail img {
	width: 100%;
	height: auto;
	display: block;
	border-bottom: 1px solid var(--color-border);
}

/* Fallback featured-image watermark — only emitted by
   inc/featured-image-watermark.php when the host has no GD/Imagick, so the
   transparent overlay is positioned over the thumbnail in markup instead of
   being composited into the served file. */
.vh-wm-wrap {
	position: relative;
	display: block;
	line-height: 0;
}

.vh-wm-overlay {
	position: absolute;
	inset: 0;
	display: block;
	background-position: center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	pointer-events: none;
}

.fl-image-meta {
	position: absolute;
	left: 10px;
	bottom: 10px;
	max-width: calc(100% - 20px);
	padding: 5px 11px;
	background: rgba(10, 12, 14, 0.84);
	border: 1px solid var(--color-border);
	color: #e8dcc8;
	font-size: 0.72rem;
	line-height: 1.45;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.fl-image-meta::before {
	content: "◇ ";
	color: var(--color-accent);
}

html.fl-schematic .fl-image-meta {
	background: rgba(247, 248, 242, 0.92);
	color: var(--color-muted);
}

/* Post header */
.vh-post-header {
	padding: 6px var(--gutter) 0;
}

.vh-post-title {
	font-family: var(--font-heading);
	font-size: 2rem;
	line-height: 1.15;
	margin: 0 0 12px;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--color-border-bright);
}

.vh-post-subtitle {
	font-size: 1.05rem;
	line-height: 1.5;
	font-style: italic;
	color: var(--color-muted);
	margin: 0 0 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--color-border);
}

.vh-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 22px;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--color-border-bright);
	font-size: 0.78rem;
	letter-spacing: 0.03em;
	color: var(--color-muted);
}

.vh-byline-label {
	font-weight: 800;
	letter-spacing: 0.12em;
	font-size: 0.64rem;
	text-transform: uppercase;
	color: var(--color-muted);
}

.vh-byline-author a {
	color: var(--color-text);
	font-weight: 700;
}

.vh-byline-author a:hover {
	color: var(--color-accent);
}

.vh-byline-sep {
	color: var(--color-mid);
}

.vh-byline-read {
	color: var(--color-muted);
}

/* Article body */
.entry-content {
	padding: 0 var(--gutter) 20px;
}

.vh-prose {
	font-size: 1.02rem;
	line-height: 1.8;
}

.vh-prose > *:first-child {
	margin-top: 0;
}

.vh-prose p {
	margin: 0 0 1.3em;
}

.vh-prose a {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.vh-prose a:hover {
	color: var(--color-accent-hover);
}

.vh-prose h2,
.vh-prose h3,
.vh-prose h4 {
	margin: 1.6em 0 0.55em;
}

.vh-prose h2 {
	font-size: 1.45rem;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--color-border);
}

.vh-prose h3 {
	font-size: 1.2rem;
}

.vh-prose h4 {
	font-size: 1.05rem;
}

.vh-prose ul,
.vh-prose ol {
	margin: 0 0 1.3em;
	padding-left: 1.8em;
}

.vh-prose li {
	margin-bottom: 0.45em;
}

.vh-prose blockquote {
	margin: 1.6em 0;
	padding: 14px 20px;
	border-left: 3px solid var(--color-accent);
	background: var(--color-surface);
	font-style: italic;
	color: var(--color-text);
}

.vh-prose blockquote cite {
	display: block;
	margin-top: 8px;
	font-size: 0.8rem;
	font-style: normal;
	color: var(--color-muted);
}

.vh-prose pre {
	margin: 1.6em 0;
	padding: 16px;
	background: var(--color-darker);
	border: 1px solid var(--color-border);
	overflow-x: auto;
	font-size: 0.9rem;
	line-height: 1.55;
}

.vh-prose code,
.vh-prose kbd {
	font-family: var(--font-mono);
	font-size: 0.9em;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	padding: 1px 5px;
}

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

.vh-prose hr {
	border: 0;
	border-top: 1px dashed var(--color-border-bright);
	margin: 2.4em 0;
}

.vh-prose table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.6em 0;
	font-size: 0.9rem;
}

.vh-prose th,
.vh-prose td {
	border: 1px solid var(--color-border);
	padding: 8px 12px;
	text-align: left;
}

.vh-prose th {
	background: var(--color-surface);
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-size: 0.75rem;
}

.vh-prose img {
	max-width: 100%;
	height: auto;
}

.vh-prose .alignleft {
	float: left;
	margin: 0.4em 1.4em 0.8em 0;
}

.vh-prose .alignright {
	float: right;
	margin: 0.4em 0 0.8em 1.4em;
}

.vh-prose .aligncenter {
	display: block;
	margin: 1.4em auto;
}

.vh-prose .wp-caption {
	max-width: 100%;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	padding: 6px 6px 2px;
}

.vh-prose .wp-caption-text,
.vh-prose .wp-caption .wp-caption-text,
.vh-prose figcaption {
	font-size: 0.76rem;
	line-height: 1.5;
	color: var(--color-muted);
	text-align: center;
	padding: 6px 4px;
}

.vh-prose .gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 8px;
	margin: 1.6em 0;
}

.vh-prose .gallery-item {
	margin: 0;
}

/* Page-break pagination inside the article */
.fl-post-pages {
	margin: 2em 0 0;
	font-size: 0.85rem;
}

.fl-post-pages span,
.fl-post-pages a {
	margin-right: 6px;
}

.fl-post-pages .current {
	color: var(--color-accent);
	font-weight: 800;
}

/* oEmbed wrapper */
.fl-embed-container {
	position: relative;
	margin: 1.6em 0;
}

.fl-embed-container iframe,
.fl-embed-container object,
.fl-embed-container embed {
	display: block;
	max-width: 100%;
}

/* ==========================================================================
   End-matter components (shared Raster Feedback Terminal classes)
   ========================================================================== */

/* Review box */
.fl-review-box {
	margin: 10px var(--gutter) 0;
	padding: 18px 16px;
	background: var(--color-dark);
	border-left: 4px solid var(--color-accent);
}

.fl-review-box-title {
	font-family: var(--font-heading);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-muted);
	margin: 0 0 12px;
}

.fl-review-rating {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.fl-review-stars {
	font-size: 1.3rem;
	line-height: 1;
	letter-spacing: 2px;
}

.fl-review-stars .star-filled { color: var(--color-warn); }
.fl-review-stars .star-empty  { color: var(--color-mid); }

.fl-review-score {
	font-family: var(--font-heading);
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--color-text);
}

.fl-review-verdict {
	font-size: 0.9rem;
	color: var(--color-muted);
	line-height: 1.6;
	margin: 0;
}

/* Author box */
.fl-author-box {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	margin: 24px var(--gutter) 0;
	padding: 20px 16px;
	background: var(--color-surface);
	border-top: 2px solid var(--color-border-bright);
	border-bottom: 2px solid var(--color-border-bright);
}

.fl-author-avatar {
	flex-shrink: 0;
	width: 72px;
	height: 72px;
}

.fl-author-avatar img {
	width: 72px;
	height: 72px;
	border: 2px solid var(--color-border-bright);
	object-fit: cover;
	object-position: center top;
	display: block;
}

.fl-author-name {
	font-family: var(--font-heading);
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-muted);
	display: block;
	margin-bottom: 4px;
}

.fl-author-title {
	font-size: 1.1rem;
	margin: 0 0 8px;
}

.fl-author-bio {
	font-size: 0.88rem;
	color: var(--color-muted);
	line-height: 1.55;
	margin: 0;
}

.fl-author-links {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 10px 0 0;
	padding: 0;
}

.fl-author-links-item a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.74rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-muted);
	text-decoration: none;
}

.fl-author-links-item a:hover {
	color: var(--color-accent);
}

.fl-author-link-icon {
	flex-shrink: 0;
	width: 13px;
	height: 13px;
}

/* Article meta grid */
.fl-article-meta {
	margin: 24px var(--gutter) 0;
	padding: 16px;
	background: var(--color-surface);
	border-top: 2px solid var(--color-border-bright);
	border-bottom: 2px solid var(--color-border-bright);
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 14px;
	align-items: baseline;
	font-size: 0.85rem;
}

.fl-article-meta-label {
	font-size: 0.66rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 800;
	color: var(--color-muted);
	white-space: nowrap;
}

.fl-article-meta-value {
	color: var(--color-text);
}

.fl-article-meta-value a {
	color: var(--color-accent);
}

.fl-article-meta-value a:hover {
	text-decoration: underline;
}

.fl-edit-link {
	font-size: 0.75rem;
	opacity: 0.6;
}

/* Ad block */
.fl-ad {
	margin: 24px var(--gutter) 0;
}

.fl-ad-incontent {
	background: var(--color-surface);
	border: 1px dashed var(--color-border-bright);
	padding: 16px;
	text-align: center;
	font-size: 0.85rem;
	color: var(--color-muted);
}

/* Footnotes & citations end-matter */
.fl-footnotes-citations-wrap {
	margin: 24px var(--gutter) 0;
	padding: 20px 24px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
}

.fl-footnotes-title,
.fl-citations-title {
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-muted);
	margin: 0 0 10px;
}

.fl-citations-title {
	margin-top: 20px;
}

.fl-footnotes-list,
.fl-citations-list {
	list-style: none;
	counter-reset: fl-list-counter;
	margin: 0;
	padding: 0;
}

.fl-footnotes-item,
.fl-citations-item {
	counter-increment: fl-list-counter;
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 0.88rem;
	line-height: 1.55;
	padding: 6px 0;
	border-bottom: 1px solid var(--color-border);
}

.fl-footnotes-item:last-child,
.fl-citations-item:last-child {
	border-bottom: none;
}

.fl-footnotes-item::before,
.fl-citations-item::before {
	content: "[" counter(fl-list-counter) "]";
	flex-shrink: 0;
	font-weight: 700;
	color: var(--color-accent);
	font-variant-numeric: tabular-nums;
}

.fl-footnotes-text,
.fl-citations-text {
	flex: 1;
	color: var(--color-text);
}

.fl-citations-link {
	color: var(--color-accent);
	text-decoration: none;
}

.fl-citations-link:hover {
	text-decoration: underline;
}

.fl-citations-meta {
	display: block;
	font-size: 0.82em;
	color: var(--color-muted);
	margin-top: 2px;
}

.fl-footnotes-back,
.fl-citations-back {
	flex-shrink: 0;
	color: var(--color-muted);
	text-decoration: none;
	font-size: 1.1em;
	padding: 0 4px;
}

.fl-footnotes-back:hover,
.fl-citations-back:hover {
	color: var(--color-accent);
}

/* Inline footnote/citation markers */
.fl-footnote-marker,
.fl-citation-marker {
	font-size: 0.72em;
	line-height: 1;
}

.fl-footnote-marker a,
.fl-citation-marker a {
	color: var(--color-accent);
	text-decoration: none;
	font-weight: 700;
	padding: 0 1px;
}

.fl-footnote-marker a:hover,
.fl-footnote-marker a:focus-visible,
.fl-citation-marker a:hover,
.fl-citation-marker a:focus-visible {
	text-decoration: underline;
}

.fl-citation-marker--broken {
	color: var(--color-bad);
	font-weight: 700;
	cursor: help;
}

/* Footnote hover preview — pure CSS via data attribute */
.fl-footnote-marker a {
	position: relative;
}

.fl-footnote-marker a::after {
	content: attr(data-fl-footnote-preview);
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(-6px);
	width: max-content;
	max-width: 280px;
	background: var(--color-darker);
	border: 1px solid var(--color-border-bright);
	color: var(--color-text);
	font-size: 0.82rem;
	font-weight: 400;
	line-height: 1.4;
	text-align: left;
	padding: 8px 12px;
	box-shadow: var(--shadow-md);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.15s ease, transform 0.15s ease;
	z-index: 20;
}

.fl-footnote-marker a:hover::after,
.fl-footnote-marker a:focus-visible::after {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(-10px);
}

/* ==========================================================================
   Post-to-post navigation (single)
   ========================================================================== */

.vh-post-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 0 var(--gutter);
	border-top: 2px solid var(--color-border-bright);
}

.vh-post-nav a {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 20px;
	color: var(--color-text);
	text-decoration: none;
	transition: background var(--transition), color var(--transition);
	height: 100%;
	box-sizing: border-box;
}

.vh-post-nav-next a {
	align-items: flex-end;
	text-align: right;
}

.vh-post-nav a:hover {
	color: var(--color-accent);
	background: rgba(128, 128, 128, 0.05);
}

.vh-post-nav-label {
	font-size: 0.64rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.vh-post-nav-title {
	font-size: 0.92rem;
	font-weight: 700;
	line-height: 1.35;
}

/* ==========================================================================
   Comments
   ========================================================================== */

.vh-comments {
	margin: 48px var(--gutter) 0;
}

.vh-comments-title {
	font-size: 1rem;
	letter-spacing: 0.06em;
	margin: 0 0 20px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--color-border-bright);
}

.vh-comment-list {
	list-style: none;
	margin: 0 0 30px;
	padding: 0;
}

.vh-comment-list .children {
	list-style: none;
	margin: 0;
	padding-left: 40px;
}

.vh-comment {
	margin: 0 0 18px;
}

.vh-comment-body {
	display: flex;
	gap: 14px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	padding: 14px;
}

.vh-comment--pingback {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	padding: 8px 14px;
	font-size: 0.85rem;
}

.vh-comment-avatar {
	flex-shrink: 0;
}

.vh-comment-avatar img {
	display: block;
	border: 1px solid var(--color-border-bright);
}

.vh-comment-main {
	flex: 1;
	min-width: 0;
}

.vh-comment-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 6px;
	font-size: 0.8rem;
}

.vh-comment-author {
	font-weight: 800;
	color: var(--color-text);
}

.vh-comment-author a {
	color: var(--color-text);
}

.vh-comment-author a:hover {
	color: var(--color-accent);
}

.vh-comment-mod {
	color: var(--color-warn);
	font-size: 0.74rem;
}

.vh-comment-time {
	color: var(--color-muted);
	font-size: 0.74rem;
}

.vh-comment-text {
	font-size: 0.95rem;
	line-height: 1.7;
}

.vh-comment-text p {
	margin-bottom: 0.8em;
}

.vh-comment-reply {
	margin-top: 8px;
	font-size: 0.78rem;
	font-weight: 700;
}

.vh-comment-nav {
	display: flex;
	justify-content: space-between;
	margin: 0 0 18px;
	font-size: 0.85rem;
}

.vh-comments-closed {
	font-style: italic;
	color: var(--color-muted);
}

/* Comment form */
.vh-comments .comment-respond {
	margin-top: 30px;
	padding-top: 18px;
	border-top: 2px solid var(--color-border-bright);
}

.vh-comments .comment-reply-title {
	font-size: 1rem;
	margin: 0 0 14px;
}

.vh-comments .comment-form label {
	display: block;
	margin: 0 0 4px;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.vh-comments .comment-form input[type="text"],
.vh-comments .comment-form input[type="email"],
.vh-comments .comment-form input[type="url"],
.vh-comments .comment-form textarea {
	width: 100%;
	box-sizing: border-box;
	background: var(--color-bg);
	border: 1px solid var(--color-border-bright);
	color: var(--color-text);
	padding: 9px 12px;
	font-size: 0.92rem;
	margin-bottom: 14px;
}

.vh-comments .comment-form input:focus,
.vh-comments .comment-form textarea:focus {
	outline: none;
	border-color: var(--color-accent);
}

.vh-comments .comment-form .submit {
	background: transparent;
	border: 1px solid var(--color-accent);
	color: var(--color-accent);
	padding: 9px 22px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.78rem;
	cursor: pointer;
	transition: background var(--transition), color var(--transition);
}

.vh-comments .comment-form .submit:hover {
	background: var(--color-accent);
	color: var(--color-darker);
}

.vh-comments .comment-form .comment-form-cookies-consent {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 8px 0 14px;
}

.vh-comments .comment-form .comment-form-cookies-consent label {
	margin: 0;
	font-size: 0.8rem;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
}

.vh-comments .must-log-in,
.vh-comments .logged-in-as {
	font-size: 0.85rem;
	color: var(--color-muted);
}

/* ==========================================================================
   Archive / search rows
   ========================================================================== */

.vh-archive-head {
	margin: 0 0 34px;
}

.vh-archive-kicker {
	margin: 0 0 6px;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.vh-archive-title {
	font-size: 1.7rem;
	margin: 0 0 10px;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--color-border-bright);
}

.vh-archive-desc {
	color: var(--color-muted);
	font-size: 0.9rem;
	margin: 0;
}

.vh-row {
	margin: 0 0 26px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--color-border);
}

.vh-row-title {
	font-size: 1.3rem;
	margin: 0 0 6px;
	line-height: 1.3;
}

.vh-row-title a {
	color: var(--color-text);
}

.vh-row-title a:hover {
	color: var(--color-accent);
}

.vh-row-subtitle {
	color: var(--color-muted);
	font-style: italic;
	font-size: 0.95rem;
	margin: 0 0 8px;
}

.vh-row-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	color: var(--color-muted);
}

.vh-row-meta a {
	color: var(--color-muted);
}

.vh-row-meta a:hover {
	color: var(--color-accent);
}

.vh-row-excerpt {
	font-size: 0.95rem;
	line-height: 1.7;
	color: var(--color-muted);
	margin-top: 10px;
}

.vh-row-excerpt p {
	margin-bottom: 0;
}

.vh-row-excerpt a {
	color: var(--color-accent);
}

/* Paging */
.vh-paging {
	display: flex;
	justify-content: space-between;
	margin: 40px 0 0;
	padding-top: 16px;
	border-top: 2px solid var(--color-border-bright);
	font-weight: 800;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
}

/* 404 & no-results */
.vh-404 .vh-archive-head {
	margin-bottom: 20px;
}

.vh-404-list {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 2;
	column-gap: 30px;
}

.vh-404-list li {
	margin-bottom: 8px;
	font-size: 0.9rem;
}

.vh-404-list li a {
	color: var(--color-text);
}

.vh-404-list li a:hover {
	color: var(--color-accent);
}

/* Inline search forms (vh-search-form = WP searchform.php template;
   fl-search-form = the Feedback-loop search form for parity) */
.vh-search-form,
.fl-search-form {
	display: flex;
	gap: 10px;
	margin: 22px 0;
}

.vh-search-input,
.fl-search-input {
	flex: 1;
	min-width: 0;
	background: var(--color-bg);
	border: 1px solid var(--color-border-bright);
	color: var(--color-text);
	padding: 9px 12px;
	font-size: 0.95rem;
}

.vh-search-input:focus,
.fl-search-input:focus {
	outline: none;
	border-color: var(--color-accent);
}

.vh-search-submit,
.fl-search-btn {
	background: transparent;
	border: 1px solid var(--color-accent);
	color: var(--color-accent);
	padding: 8px 18px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.76rem;
	cursor: pointer;
	flex-shrink: 0;
	transition: background var(--transition), color var(--transition);
}

.vh-search-submit:hover,
.fl-search-btn:hover {
	background: var(--color-accent);
	color: var(--color-darker);
}

/* ==========================================================================
   Full-screen terminal search overlay
   ========================================================================== */

.vh-search-overlay {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background: var(--color-bg);
	padding: 24px;
}

.vh-search-overlay[hidden] {
	display: none;
}

.vh-search-overlay-form {
	width: 100%;
	max-width: 680px;
}

.vh-search-overlay-label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.vh-search-caret {
	color: var(--color-accent);
	animation: vh-blink 1.1s steps(1) infinite;
}

@keyframes vh-blink {
	0%, 60% { opacity: 1; }
	61%, 100% { opacity: 0; }
}

.vh-search-overlay-row {
	display: flex;
	gap: 12px;
}

.vh-search-field {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: 0;
	border-bottom: 2px solid var(--color-border-bright);
	color: var(--color-text);
	font-size: 1.6rem;
	line-height: 1.4;
	padding: 6px 2px;
}

.vh-search-field:focus {
	outline: none;
	border-bottom-color: var(--color-accent);
}

.vh-search-submit {
	font-size: 0.9rem;
	padding: 10px 26px;
}

.vh-search-hint {
	margin: 16px 0 0;
	font-size: 0.74rem;
	color: var(--color-muted);
	letter-spacing: 0.05em;
}

.vh-search-close {
	position: absolute;
	top: 18px;
	right: 18px;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--color-border);
	color: var(--color-nav-text);
	cursor: pointer;
	transition: color var(--transition), border-color var(--transition), transform var(--transition);
}

.vh-search-close:hover {
	color: var(--color-accent);
	border-color: var(--color-accent);
	transform: rotate(90deg);
}

/* Mobile "go to…" dropdown (injected by js/site.js) */
.vh-select-wrap {
	display: none;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1160px) {
	:root {
		--panel-w: var(--panel-w-lg);
		--gutter:   24px;
	}

	body:not(.home):not(.single) .site-content {
		padding-left: 30px;
		padding-right: 30px;
	}
}

/* Ultrawide shim — the reading column is full-bleed until the pane would
   grow past --content-max, then it re-centres at that cap so prose never
   runs absurdly long on 2560px+ monitors. Home/single panes lose the rail
   (84px) and panel (300px), so the cap binds at 1600 + 84 + 300 = 1984px;
   static pages (rail only, and their 48px page padding sits outside the
   content-box cap) bind at 1600 + 84 + 96 = 1780px. Cover images still
   bleed out to the true pane edges. */

@media (min-width: 1985px) {
	body.home .site-content,
	body.single .site-content {
		max-width: var(--content-max);
		margin: 0 auto;
	}

	body.home .fl-post-thumbnail,
	body.single .fl-post-thumbnail {
		width: calc(100vw - var(--rail-w) - var(--panel-w));
		margin-left: calc((var(--content-max) - 100vw + var(--rail-w) + var(--panel-w)) / 2);
	}
}

@media (min-width: 1781px) {
	body:not(.home):not(.single) .site-content {
		max-width: var(--content-max);
		margin: 0 auto;
	}
}

@media (max-width: 900px) {
	/* Full mobile restructure: rail becomes a top bar, panel is replaced by
	   the "go to…" dropdown injected by site.js, reader flows normally. */
	:root {
		--rail-w: 0px;
		--panel-w: 0px;
		--gutter:  16px;
	}

	html, body {
		height: auto;
	}

	body {
		overflow: auto !important;
	}

	#main,
	body.home #main,
	body.single #main {
		margin-left: 0;
	}

	body.home #primary.content-area,
	body.single #primary.content-area {
		position: static;
		overflow: visible;
	}

	/* Rail → top bar */
	.vh-rail {
		position: relative;
		width: 100%;
		height: auto;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		border-right: 0;
		border-bottom: 1px solid var(--color-border);
		gap: 4px;
		padding: 8px 12px;
		box-sizing: border-box;
	}

	.vh-rail-brand {
		padding: 0;
		margin-right: auto;
	}

	.vh-brand-img {
		width: 36px;
		height: 36px;
	}

	.vh-brand--custom .fl-site-logo {
		max-width: 180px;
	}

	/* Nav collapses below the bar until toggled */
	.vh-nav {
		flex-basis: 100%;
		order: 3;
		display: none;
		max-height: calc(100vh - 70px);
		overflow-y: auto;
	}

	body.vh-nav-open .vh-nav {
		display: block;
	}

	.vh-nav-list {
		align-items: stretch;
		padding: 4px 0;
	}

	.vh-nav-link {
		justify-content: flex-start;
		gap: 14px;
		height: 46px;
		padding: 0 16px;
		box-sizing: border-box;
	}

	.vh-nav-link--current {
		box-shadow: inset 3px 0 0 var(--color-accent);
	}

	.vh-nav-text {
		position: static;
		transform: none;
		opacity: 1;
		visibility: visible;
		background: none;
		border: 0;
		padding: 0;
		font-size: 0.82rem;
		text-transform: none;
		letter-spacing: 0.04em;
		pointer-events: auto;
	}

	.vh-nav-text::before {
		display: none;
	}

	.vh-nav-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		margin-left: 0;
		background: transparent;
		border: 1px solid var(--color-border);
		color: var(--color-nav-text);
		cursor: pointer;
		order: 3;
		flex-shrink: 0;
	}

	body.vh-nav-open .vh-nav-toggle {
		color: var(--color-accent);
		border-color: var(--color-accent);
	}

	.vh-rail-foot {
		order: 2;
		width: auto;
		flex-direction: row;
		align-items: center;
		gap: 10px;
		padding: 0;
		margin-left: auto;
		flex-shrink: 0;
	}

	.vh-search-open {
		width: 42px;
		height: 42px;
	}

	.fl-mode-toggle--rail {
		flex-direction: row;
	}

	.fl-mode-toggle--rail .track {
		margin: 0;
	}

	.vh-clock,
	.vh-rail-credit,
	.vh-rail-credit--tiny {
		display: none;
	}

	/* Panel is replaced by the dropdown */
	.vh-panel {
		position: static;
		display: none;
		width: 100%;
	}

	.vh-select-wrap {
		display: block;
		padding: 10px 14px;
		border-bottom: 1px solid var(--color-border);
		background: var(--color-panel);
	}

	.vh-select-wrap select {
		width: 100%;
		background: var(--color-bg);
		border: 1px solid var(--color-border-bright);
		color: var(--color-text);
		padding: 9px 10px;
		font-size: 0.88rem;
	}

	.vh-select-wrap select:focus {
		outline: none;
		border-color: var(--color-accent);
	}

	/* Reader flows normally */
	body.home .site-content,
	body.single .site-content,
	body:not(.home):not(.single) .site-content {
		max-width: none;
		padding: 0 0 90px;
	}

	.vh-post-header {
		padding-top: 14px;
	}

	.vh-post-title {
		font-size: 1.6rem;
	}

	body:not(.home):not(.single) .site-content {
		padding: 24px 16px 80px;
	}

	.vh-archive-title {
		font-size: 1.4rem;
	}
}

@media (max-width: 480px) {
	.fl-image-meta {
		position: static;
		max-width: none;
		white-space: normal;
		border: 0;
		border-bottom: 1px solid var(--color-border);
	}

	.vh-404-list {
		columns: 1;
	}

	.vh-post-nav {
		grid-template-columns: 1fr;
	}

	.vh-post-nav-next a {
		align-items: flex-start;
		text-align: left;
		border-top: 1px solid var(--color-border);
	}

	.vh-search-field {
		font-size: 1.15rem;
	}

	.vh-search-overlay-row {
		flex-direction: column;
	}

	.vh-comment-list .children {
		padding-left: 14px;
	}

	.fl-author-box {
		flex-direction: column;
	}

	.fl-author-avatar {
		width: 56px;
		height: 56px;
	}

	.fl-author-avatar img {
		width: 56px;
		height: 56px;
	}
}

/* Print — the rail and panel are chrome, not content */
@media print {
	.vh-rail,
	.vh-panel,
	.vh-search-overlay,
	.vh-select-wrap,
	.vh-post-nav {
		display: none !important;
	}

	#main,
	body.home #main,
	body.single #main,
	body.home #primary.content-area,
	body.single #primary.content-area {
		position: static;
		margin: 0;
		overflow: visible;
	}

	body {
		overflow: visible !important;
	}

	body:not(.home):not(.single) .site-content,
	body.home .site-content,
	body.single .site-content {
		max-width: none;
		padding: 0;
	}

	.fl-post-thumbnail img,
	.vh-prose img {
		border: 1px solid #999;
	}
}