/*
Theme Name: Hiddenry
Theme URI: https://hiddenry.com/theme
Author: The Archivist
Author URI: https://hiddenry.com/
Description: The official archive theme for Hiddenry — a dark, bureaucratic, declassification-styled WordPress theme built for the Archive of 10,000 Hidden Patterns. Four content pillars (Hidden Logic, Hidden Mechanics, Hidden Numbers, Hidden Words), flexible entry media (video, image or both), intuition tests, member-only verdicts and comments, related-file discovery, collectible Vault cards and rank progression. Full Site Editing compatible.
Version: 1.1.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hiddenry
Tags: blog, education, one-column, two-columns, right-sidebar, custom-colors, custom-logo, custom-menu, featured-images, block-styles, full-site-editing, wide-blocks, translation-ready, accessibility-ready, dark-mode
*/

/* ==========================================================================
   HIDDENRY ARCHIVE — MASTER STYLESHEET
   --------------------------------------------------------------------------
   FILE INDEX
   00. Custom properties (design tokens)
   01. Reset & base
   02. Typography
   03. Accessibility utilities
   04. Layout primitives
   05. Buttons & form controls
   06. Site header / brand / navigation
   07. Search overlay & mobile drawer
   08. Archive status strip
   09. Pillar filter tabs
   10. Entry grid & entry cards (flip animation)
   11. Pagination & load more
   12. Single entry: hero, badge, breadcrumbs
   13. Intuition test module
   14. Video frame & content prose
   15. Vault card collection CTA
   16. Related entries & entry meta
   17. Page template & sidebar / widgets
   18. Comments
   19. Site footer
   20. WordPress core / block editor compatibility
   21. Keyframes & decorative effects
   22. Responsive breakpoints
   23. Reduced motion / high contrast
   24. Print styles
   25. Phase 2 — Vault, ranks, catalogue filters, leaderboard
   26. Section shells, body hooks, shortcode grid, video facade & 404
   27. Phase 3 — flexible media, verdict, sources, discovery, share, mobile
   ==========================================================================
   Naming convention: BEM-ish, namespaced with `hdn-`.
     Block:     .hdn-card
     Element:   .hdn-card__title
     Modifier:  .hdn-card--sealed
   ========================================================================== */

/* ==========================================================================
   00. CUSTOM PROPERTIES (DESIGN TOKENS)
   ========================================================================== */

:root {
	/* --- Core surfaces: deep archive vault ------------------------------ */
	--hdn-navy: #0a0e17;
	--hdn-navy-deep: #05070d;
	--hdn-charcoal: #1a1f2e;
	--hdn-charcoal-soft: #232939;
	--hdn-slate: #2f3648;
	--hdn-ash: #4a5266;

	/* --- Ink -------------------------------------------------------------- */
	--hdn-cream: #e8dcc8;
	--hdn-paper: #f2f2f0;
	--hdn-muted: #9aa1b1;
	--hdn-faint: #6b7386;

	/* --- Accents ---------------------------------------------------------- */
	--hdn-amber: #c9a227;
	--hdn-amber-bright: #f0c745;
	--hdn-amber-dim: #8a6f18;
	--hdn-red: #8b2500;
	--hdn-red-bright: #c1381a;

	/* --- Pillar signatures (locked to the channel's series colours) ------- */
	--hdn-pillar-logic: #7c5cff;
	--hdn-pillar-mechanics: #ff8a3d;
	--hdn-pillar-numbers: #00e5ff;
	--hdn-pillar-words: #f5c542;

	/* Active pillar accent — re-declared per card / per entry. */
	--hdn-accent: var(--hdn-amber);
	--hdn-accent-soft: rgba(201, 162, 39, 0.14);
	--hdn-accent-line: rgba(201, 162, 39, 0.35);

	/* --- Semantic aliases -------------------------------------------------- */
	--hdn-bg: var(--hdn-navy);
	--hdn-bg-raised: var(--hdn-charcoal);
	--hdn-bg-sunken: var(--hdn-navy-deep);
	--hdn-text: var(--hdn-cream);
	--hdn-text-strong: var(--hdn-paper);
	--hdn-border: rgba(232, 220, 200, 0.12);
	--hdn-border-strong: rgba(232, 220, 200, 0.28);
	--hdn-overlay: rgba(5, 7, 13, 0.88);

	/* --- Typography -------------------------------------------------------- */
	--hdn-font-serif: "Spectral", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif;
	--hdn-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--hdn-font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", "Courier New", monospace;

	--hdn-size-2xs: 0.6875rem;
	--hdn-size-xs: 0.75rem;
	--hdn-size-sm: 0.875rem;
	--hdn-size-base: 1.0625rem;
	--hdn-size-md: 1.1875rem;
	--hdn-size-lg: 1.375rem;
	--hdn-size-xl: 1.75rem;
	--hdn-size-2xl: 2.25rem;
	--hdn-size-3xl: clamp(2.25rem, 1.4rem + 3.4vw, 3.5rem);
	--hdn-size-4xl: clamp(2.75rem, 1.6rem + 4.8vw, 4.75rem);

	--hdn-leading-tight: 1.16;
	--hdn-leading-snug: 1.35;
	--hdn-leading-normal: 1.7;
	--hdn-tracking-stamp: 0.22em;
	--hdn-tracking-wide: 0.08em;

	/* --- Spacing scale ------------------------------------------------------ */
	--hdn-space-3xs: 0.25rem;
	--hdn-space-2xs: 0.5rem;
	--hdn-space-xs: 0.75rem;
	--hdn-space-sm: 1rem;
	--hdn-space-md: 1.5rem;
	--hdn-space-lg: 2.25rem;
	--hdn-space-xl: 3.5rem;
	--hdn-space-2xl: 5rem;
	--hdn-space-3xl: 7.5rem;

	/* --- Layout -------------------------------------------------------------- */
	--hdn-content-width: 44rem;
	--hdn-wide-width: 72rem;
	--hdn-gutter: clamp(1rem, 0.4rem + 2.4vw, 2.5rem);
	--hdn-header-height: 4.5rem;

	/* --- Shape, depth, motion ------------------------------------------------ */
	--hdn-radius-xs: 2px;
	--hdn-radius-sm: 3px;
	--hdn-radius-md: 5px;
	--hdn-radius-lg: 8px;

	--hdn-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
	--hdn-shadow-md: 0 10px 28px -12px rgba(0, 0, 0, 0.85);
	--hdn-shadow-lg: 0 28px 60px -22px rgba(0, 0, 0, 0.95);
	--hdn-glow: 0 0 0 1px var(--hdn-accent-line), 0 0 34px -8px var(--hdn-accent-soft);

	--hdn-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--hdn-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--hdn-speed-fast: 140ms;
	--hdn-speed: 260ms;
	--hdn-speed-slow: 620ms;

	/* --- Stacking order ------------------------------------------------------ */
	--hdn-z-base: 1;
	--hdn-z-sticky: 60;
	--hdn-z-header: 80;
	--hdn-z-drawer: 90;
	--hdn-z-overlay: 100;
	--hdn-z-toast: 120;

	/* --- Archival texture ----------------------------------------------------- */
	--hdn-grid-line: rgba(232, 220, 200, 0.028);
	--hdn-grid-size: 34px;

	color-scheme: dark;
}

/* Pillar scoping: any element carrying a pillar modifier re-binds --hdn-accent,
   so every nested component (badges, rules, buttons, glows) recolours itself. */
.hdn-pillar--logic,
.hdn--logic {
	--hdn-accent: var(--hdn-pillar-logic);
	--hdn-accent-soft: rgba(124, 92, 255, 0.16);
	--hdn-accent-line: rgba(124, 92, 255, 0.4);
}

.hdn-pillar--mechanics,
.hdn--mechanics {
	--hdn-accent: var(--hdn-pillar-mechanics);
	--hdn-accent-soft: rgba(255, 138, 61, 0.16);
	--hdn-accent-line: rgba(255, 138, 61, 0.4);
}

.hdn-pillar--numbers,
.hdn--numbers {
	--hdn-accent: var(--hdn-pillar-numbers);
	--hdn-accent-soft: rgba(0, 229, 255, 0.14);
	--hdn-accent-line: rgba(0, 229, 255, 0.38);
}

.hdn-pillar--words,
.hdn--words {
	--hdn-accent: var(--hdn-pillar-words);
	--hdn-accent-soft: rgba(245, 197, 66, 0.16);
	--hdn-accent-line: rgba(245, 197, 66, 0.4);
}

/* ==========================================================================
   01. RESET & BASE
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--hdn-header-height) + 1.5rem);
}

body {
	margin: 0;
	background-color: var(--hdn-bg);
	background-image:
		linear-gradient(var(--hdn-grid-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--hdn-grid-line) 1px, transparent 1px),
		radial-gradient(ellipse 90% 55% at 50% -10%, rgba(201, 162, 39, 0.07), transparent 70%);
	background-size: var(--hdn-grid-size) var(--hdn-grid-size), var(--hdn-grid-size) var(--hdn-grid-size), 100% 100%;
	background-attachment: fixed;
	color: var(--hdn-text);
	font-family: var(--hdn-font-sans);
	font-size: var(--hdn-size-base);
	line-height: var(--hdn-leading-normal);
	font-feature-settings: "kern" 1, "liga" 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	min-height: 100vh;
	overflow-x: hidden;
}

body.hdn-no-scroll {
	overflow: hidden;
}

img,
picture,
video,
canvas,
svg,
iframe {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
	border-style: none;
}

hr {
	height: 1px;
	margin: var(--hdn-space-lg) 0;
	border: 0;
	background: linear-gradient(90deg, transparent, var(--hdn-border-strong) 18%, var(--hdn-border-strong) 82%, transparent);
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--hdn-size-sm);
}

th,
td {
	padding: var(--hdn-space-2xs) var(--hdn-space-xs);
	border: 1px solid var(--hdn-border);
	text-align: left;
}

th {
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-xs);
	letter-spacing: var(--hdn-tracking-wide);
	text-transform: uppercase;
	color: var(--hdn-muted);
	background: rgba(232, 220, 200, 0.04);
}

::selection {
	background: var(--hdn-amber);
	color: var(--hdn-navy-deep);
}

/* Archival scrollbar */
::-webkit-scrollbar {
	width: 11px;
	height: 11px;
}

::-webkit-scrollbar-track {
	background: var(--hdn-navy-deep);
}

::-webkit-scrollbar-thumb {
	background: var(--hdn-slate);
	border: 3px solid var(--hdn-navy-deep);
	border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--hdn-amber-dim);
}

/* ==========================================================================
   02. TYPOGRAPHY
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6,
.hdn-h1,
.hdn-h2,
.hdn-h3 {
	margin: 0 0 var(--hdn-space-sm);
	font-family: var(--hdn-font-serif);
	font-weight: 600;
	line-height: var(--hdn-leading-tight);
	color: var(--hdn-text-strong);
	text-wrap: balance;
}

h1 { font-size: var(--hdn-size-3xl); letter-spacing: -0.015em; }
h2 { font-size: var(--hdn-size-2xl); letter-spacing: -0.01em; }
h3 { font-size: var(--hdn-size-xl); }
h4 { font-size: var(--hdn-size-lg); }
h5 { font-size: var(--hdn-size-md); }

h6 {
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-xs);
	font-weight: 500;
	letter-spacing: var(--hdn-tracking-stamp);
	text-transform: uppercase;
	color: var(--hdn-muted);
}

p {
	margin: 0 0 var(--hdn-space-sm);
}

a {
	color: var(--hdn-amber-bright);
	text-decoration: none;
	text-underline-offset: 0.22em;
	text-decoration-thickness: 1px;
	transition: color var(--hdn-speed-fast) var(--hdn-ease);
}

a:hover,
a:focus {
	color: var(--hdn-paper);
	text-decoration: underline;
}

strong,
b {
	font-weight: 700;
	color: var(--hdn-text-strong);
}

em,
i {
	font-style: italic;
}

small {
	font-size: var(--hdn-size-xs);
	color: var(--hdn-muted);
}

code,
kbd,
samp,
pre {
	font-family: var(--hdn-font-mono);
	font-size: 0.9em;
}

code {
	padding: 0.12em 0.4em;
	border: 1px solid var(--hdn-border);
	border-radius: var(--hdn-radius-xs);
	background: rgba(0, 0, 0, 0.4);
	color: var(--hdn-amber-bright);
}

pre {
	overflow-x: auto;
	padding: var(--hdn-space-sm);
	border: 1px solid var(--hdn-border);
	border-left: 3px solid var(--hdn-accent);
	border-radius: var(--hdn-radius-sm);
	background: var(--hdn-navy-deep);
	line-height: 1.55;
}

pre code {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
}

blockquote {
	position: relative;
	margin: var(--hdn-space-lg) 0;
	padding: var(--hdn-space-sm) var(--hdn-space-md);
	border-left: 2px solid var(--hdn-accent);
	background: linear-gradient(90deg, var(--hdn-accent-soft), transparent 70%);
	font-family: var(--hdn-font-serif);
	font-size: var(--hdn-size-md);
	font-style: italic;
	color: var(--hdn-text-strong);
}

blockquote cite {
	display: block;
	margin-top: var(--hdn-space-2xs);
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-xs);
	font-style: normal;
	letter-spacing: var(--hdn-tracking-wide);
	text-transform: uppercase;
	color: var(--hdn-muted);
}

ul,
ol {
	margin: 0 0 var(--hdn-space-sm);
	padding-left: 1.35rem;
}

li {
	margin-bottom: var(--hdn-space-3xs);
}

/* Monospace "stamp" label — the bureaucratic signature of the archive. */
.hdn-stamp {
	display: inline-block;
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
	font-weight: 500;
	letter-spacing: var(--hdn-tracking-stamp);
	text-transform: uppercase;
	color: var(--hdn-muted);
}

.hdn-stamp--accent {
	color: var(--hdn-accent);
}

.hdn-stamp--boxed {
	padding: 0.28em 0.7em;
	border: 1px solid var(--hdn-accent-line);
	border-radius: var(--hdn-radius-xs);
	color: var(--hdn-accent);
	background: var(--hdn-accent-soft);
}

.hdn-stamp--classified {
	position: relative;
	color: var(--hdn-red-bright);
	border-color: rgba(193, 56, 26, 0.5);
	background: rgba(139, 37, 0, 0.16);
}

/* Strikethrough "CLASSIFIED → DECLASSIFIED" motif. */
.hdn-stamp--struck {
	position: relative;
	color: var(--hdn-faint);
}

.hdn-stamp--struck::after {
	content: "";
	position: absolute;
	inset-inline: -4%;
	top: 50%;
	height: 1px;
	background: var(--hdn-red-bright);
	transform: rotate(-4deg);
}

.hdn-eyebrow {
	display: flex;
	align-items: center;
	gap: var(--hdn-space-2xs);
	margin-bottom: var(--hdn-space-2xs);
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
	letter-spacing: var(--hdn-tracking-stamp);
	text-transform: uppercase;
	color: var(--hdn-faint);
}

.hdn-eyebrow::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, var(--hdn-border-strong), transparent);
}

/* ==========================================================================
   03. ACCESSIBILITY UTILITIES
   ========================================================================== */

.screen-reader-text,
.hdn-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus,
.hdn-skip-link:focus {
	position: fixed !important;
	top: var(--hdn-space-sm);
	left: var(--hdn-space-sm);
	z-index: var(--hdn-z-toast);
	width: auto;
	height: auto;
	padding: var(--hdn-space-2xs) var(--hdn-space-sm);
	clip: auto;
	clip-path: none;
	border: 1px solid var(--hdn-amber);
	border-radius: var(--hdn-radius-sm);
	background: var(--hdn-charcoal);
	color: var(--hdn-amber-bright);
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-xs);
	letter-spacing: var(--hdn-tracking-wide);
	text-transform: uppercase;
	text-decoration: none;
}

:focus-visible {
	outline: 2px solid var(--hdn-amber-bright);
	outline-offset: 3px;
	border-radius: var(--hdn-radius-xs);
}

/* Mouse users keep a clean surface; keyboard users always get the ring. */
:focus:not(:focus-visible) {
	outline: none;
}

[hidden] {
	display: none !important;
}

/* ==========================================================================
   04. LAYOUT PRIMITIVES
   ========================================================================== */

.hdn-shell {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.hdn-shell > .hdn-main {
	flex: 1 0 auto;
}

.hdn-container {
	width: 100%;
	max-width: var(--hdn-wide-width);
	margin-inline: auto;
	padding-inline: var(--hdn-gutter);
}

.hdn-container--narrow {
	max-width: calc(var(--hdn-content-width) + var(--hdn-gutter) * 2);
}

.hdn-container--flush {
	max-width: none;
}

.hdn-section {
	padding-block: var(--hdn-space-xl);
}

.hdn-section--tight {
	padding-block: var(--hdn-space-lg);
}

.hdn-main {
	display: block;
	padding-bottom: var(--hdn-space-2xl);
}

/* Two-column shell used by page.php / single.php when a sidebar is active. */
.hdn-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--hdn-space-xl);
	align-items: start;
}

.hdn-layout--sidebar {
	grid-template-columns: minmax(0, 1fr) minmax(0, 19rem);
}

.hdn-layout__primary {
	min-width: 0;
}

.hdn-layout__aside {
	min-width: 0;
	position: sticky;
	top: calc(var(--hdn-header-height) + var(--hdn-space-sm));
}

/* Hairline divider with an archival tick in the middle. */
.hdn-rule {
	position: relative;
	height: 1px;
	margin-block: var(--hdn-space-lg);
	background: linear-gradient(90deg, transparent, var(--hdn-border-strong), transparent);
}

.hdn-rule::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 5px;
	height: 5px;
	background: var(--hdn-accent);
	transform: translate(-50%, -50%) rotate(45deg);
}

/* ==========================================================================
   05. BUTTONS & FORM CONTROLS
   ========================================================================== */

.hdn-btn,
button,
input[type="submit"],
input[type="button"],
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--hdn-space-2xs);
	padding: 0.72em 1.5em;
	border: 1px solid var(--hdn-border-strong);
	border-radius: var(--hdn-radius-sm);
	background: transparent;
	color: var(--hdn-text);
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-xs);
	font-weight: 500;
	letter-spacing: var(--hdn-tracking-wide);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition:
		border-color var(--hdn-speed) var(--hdn-ease),
		background-color var(--hdn-speed) var(--hdn-ease),
		color var(--hdn-speed) var(--hdn-ease),
		transform var(--hdn-speed-fast) var(--hdn-ease),
		box-shadow var(--hdn-speed) var(--hdn-ease);
}

.hdn-btn:hover,
.hdn-btn:focus-visible,
.wp-block-button__link:hover {
	border-color: var(--hdn-accent);
	background: var(--hdn-accent-soft);
	color: var(--hdn-text-strong);
	text-decoration: none;
	transform: translateY(-1px);
}

.hdn-btn:active {
	transform: translateY(0);
}

.hdn-btn--primary {
	border-color: var(--hdn-accent);
	background: var(--hdn-accent);
	color: var(--hdn-navy-deep);
	font-weight: 700;
}

.hdn-btn--primary:hover,
.hdn-btn--primary:focus-visible {
	background: var(--hdn-amber-bright);
	border-color: var(--hdn-amber-bright);
	color: var(--hdn-navy-deep);
	box-shadow: var(--hdn-glow);
}

.hdn-btn--ghost {
	border-color: transparent;
	color: var(--hdn-muted);
}

.hdn-btn--ghost:hover {
	color: var(--hdn-accent);
}

.hdn-btn--block {
	width: 100%;
}

.hdn-btn--icon {
	width: 2.6rem;
	height: 2.6rem;
	padding: 0;
	border-radius: var(--hdn-radius-sm);
}

.hdn-btn[disabled],
.hdn-btn[aria-disabled="true"] {
	opacity: 0.45;
	cursor: not-allowed;
	transform: none;
}

.hdn-btn__icon {
	width: 1em;
	height: 1em;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
textarea,
select {
	width: 100%;
	padding: 0.7em 0.9em;
	border: 1px solid var(--hdn-border);
	border-radius: var(--hdn-radius-sm);
	background: var(--hdn-navy-deep);
	color: var(--hdn-text-strong);
	font-family: var(--hdn-font-sans);
	font-size: var(--hdn-size-sm);
	transition: border-color var(--hdn-speed) var(--hdn-ease), box-shadow var(--hdn-speed) var(--hdn-ease);
}

input::placeholder,
textarea::placeholder {
	color: var(--hdn-faint);
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-xs);
	letter-spacing: 0.06em;
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--hdn-accent);
	box-shadow: 0 0 0 3px var(--hdn-accent-soft);
	outline: none;
}

label {
	display: block;
	margin-bottom: var(--hdn-space-3xs);
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-xs);
	letter-spacing: var(--hdn-tracking-wide);
	text-transform: uppercase;
	color: var(--hdn-muted);
}

/* WordPress default search form */
.search-form {
	display: flex;
	gap: var(--hdn-space-2xs);
}

.search-form .search-submit {
	flex: none;
}

/* ==========================================================================
   06. SITE HEADER / BRAND / NAVIGATION
   ========================================================================== */

.hdn-header {
	position: sticky;
	top: 0;
	z-index: var(--hdn-z-header);
	border-bottom: 1px solid var(--hdn-border);
	background: rgba(10, 14, 23, 0.86);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
}

.hdn-header::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: -1px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--hdn-amber-dim) 30%, var(--hdn-amber) 50%, var(--hdn-amber-dim) 70%, transparent);
	opacity: 0.55;
}

.hdn-header__inner {
	display: flex;
	align-items: center;
	gap: var(--hdn-space-md);
	min-height: var(--hdn-header-height);
}

/* --- Brand ---------------------------------------------------------------- */

.hdn-brand {
	display: flex;
	align-items: center;
	gap: var(--hdn-space-2xs);
	margin-right: auto;
	text-decoration: none;
}

.hdn-brand:hover {
	text-decoration: none;
}

.hdn-brand__mark {
	position: relative;
	display: grid;
	place-items: center;
	width: 2.2rem;
	height: 2.2rem;
	flex: none;
	border: 1px solid var(--hdn-amber-dim);
	border-radius: var(--hdn-radius-xs);
	background: var(--hdn-charcoal);
	color: var(--hdn-amber);
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-sm);
	font-weight: 700;
	letter-spacing: 0;
	overflow: hidden;
}

.hdn-brand__mark::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 40%, rgba(240, 199, 69, 0.28) 50%, transparent 60%);
	transform: translateX(-120%);
	transition: transform var(--hdn-speed-slow) var(--hdn-ease-out);
}

.hdn-brand:hover .hdn-brand__mark::after {
	transform: translateX(120%);
}

.hdn-brand__text {
	display: flex;
	flex-direction: column;
	line-height: 1.05;
}

.hdn-brand__name {
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-sm);
	font-weight: 700;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--hdn-cream);
	white-space: nowrap;
}

.hdn-brand__name em {
	font-style: normal;
	color: var(--hdn-amber);
}

.hdn-brand__tagline {
	margin-top: 3px;
	font-family: var(--hdn-font-mono);
	font-size: 0.5625rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--hdn-faint);
	white-space: nowrap;
}

.hdn-brand__logo img {
	max-height: 2.6rem;
	width: auto;
}

/* --- Primary navigation ---------------------------------------------------- */

.hdn-nav__list,
.hdn-nav ul {
	display: flex;
	align-items: center;
	gap: var(--hdn-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hdn-nav li {
	position: relative;
	margin: 0;
}

.hdn-nav a {
	position: relative;
	display: inline-block;
	padding: 0.35rem 0.1rem;
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hdn-muted);
	text-decoration: none;
	transition: color var(--hdn-speed) var(--hdn-ease);
}

.hdn-nav a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: var(--hdn-amber);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--hdn-speed) var(--hdn-ease-out);
}

.hdn-nav a:hover,
.hdn-nav a:focus-visible {
	color: var(--hdn-cream);
	text-decoration: none;
}

.hdn-nav a:hover::after,
.hdn-nav a:focus-visible::after {
	transform: scaleX(1);
	transform-origin: left;
}

.hdn-nav .current-menu-item > a,
.hdn-nav .current_page_item > a,
.hdn-nav .current-menu-ancestor > a {
	color: var(--hdn-amber);
}

.hdn-nav .current-menu-item > a::after,
.hdn-nav .current_page_item > a::after {
	transform: scaleX(1);
}

/* Dropdowns */
.hdn-nav .sub-menu {
	position: absolute;
	top: calc(100% + 0.85rem);
	left: -0.9rem;
	z-index: var(--hdn-z-drawer);
	display: block;
	min-width: 13rem;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: var(--hdn-space-2xs);
	border: 1px solid var(--hdn-border-strong);
	border-radius: var(--hdn-radius-sm);
	background: var(--hdn-charcoal);
	box-shadow: var(--hdn-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--hdn-speed) var(--hdn-ease), transform var(--hdn-speed) var(--hdn-ease), visibility var(--hdn-speed);
}

.hdn-nav li:hover > .sub-menu,
.hdn-nav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.hdn-nav .sub-menu a {
	display: block;
	padding: 0.5rem 0.7rem;
	border-radius: var(--hdn-radius-xs);
}

.hdn-nav .sub-menu a:hover {
	background: var(--hdn-accent-soft);
}

.hdn-nav .sub-menu a::after {
	display: none;
}

.hdn-header__actions {
	display: flex;
	align-items: center;
	gap: var(--hdn-space-2xs);
}

/* Vault rank chip in the header */
.hdn-rank-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.3rem 0.65rem;
	border: 1px solid var(--hdn-border-strong);
	border-radius: 99px;
	background: rgba(0, 0, 0, 0.35);
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hdn-muted);
	white-space: nowrap;
}

.hdn-rank-chip__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--hdn-amber);
	box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.18);
}

.hdn-rank-chip__count {
	color: var(--hdn-amber);
	font-weight: 700;
}

/* ==========================================================================
   07. SEARCH OVERLAY & MOBILE DRAWER
   ========================================================================== */

.hdn-menu-toggle {
	display: none;
	position: relative;
	width: 2.6rem;
	height: 2.6rem;
	padding: 0;
	border: 1px solid var(--hdn-border-strong);
	background: transparent;
}

.hdn-menu-toggle__bars,
.hdn-menu-toggle__bars::before,
.hdn-menu-toggle__bars::after {
	position: absolute;
	left: 50%;
	width: 18px;
	height: 1.5px;
	background: var(--hdn-cream);
	transition: transform var(--hdn-speed) var(--hdn-ease), opacity var(--hdn-speed-fast) var(--hdn-ease);
}

.hdn-menu-toggle__bars {
	top: 50%;
	transform: translate(-50%, -50%);
}

.hdn-menu-toggle__bars::before,
.hdn-menu-toggle__bars::after {
	content: "";
	left: 0;
}

.hdn-menu-toggle__bars::before { top: -6px; }
.hdn-menu-toggle__bars::after { top: 6px; }

.hdn-menu-toggle[aria-expanded="true"] .hdn-menu-toggle__bars {
	background: transparent;
}

.hdn-menu-toggle[aria-expanded="true"] .hdn-menu-toggle__bars::before {
	transform: translateY(6px) rotate(45deg);
	background: var(--hdn-amber);
}

.hdn-menu-toggle[aria-expanded="true"] .hdn-menu-toggle__bars::after {
	transform: translateY(-6px) rotate(-45deg);
	background: var(--hdn-amber);
}

/* Search panel drops out of the header like a filing drawer. */
.hdn-search-panel {
	display: grid;
	grid-template-rows: 0fr;
	overflow: hidden;
	border-top: 1px solid transparent;
	transition: grid-template-rows var(--hdn-speed) var(--hdn-ease-out), border-color var(--hdn-speed) var(--hdn-ease);
}

.hdn-search-panel.is-open {
	grid-template-rows: 1fr;
	border-top-color: var(--hdn-border);
}

.hdn-search-panel__inner {
	min-height: 0;
}

.hdn-search-panel__form {
	display: flex;
	gap: var(--hdn-space-2xs);
	align-items: center;
	padding-block: var(--hdn-space-sm);
}

.hdn-search-panel__field {
	flex: 1;
	border: 0;
	border-bottom: 1px solid var(--hdn-border-strong);
	border-radius: 0;
	background: transparent;
	font-family: var(--hdn-font-serif);
	font-size: var(--hdn-size-lg);
	padding-inline: 0;
}

.hdn-search-panel__field:focus {
	border-bottom-color: var(--hdn-amber);
	box-shadow: none;
}

/* Mobile drawer */
.hdn-drawer {
	position: fixed;
	inset: var(--hdn-header-height) 0 0 auto;
	z-index: var(--hdn-z-drawer);
	width: min(22rem, 86vw);
	padding: var(--hdn-space-lg) var(--hdn-space-md) var(--hdn-space-2xl);
	overflow-y: auto;
	border-left: 1px solid var(--hdn-border-strong);
	background: var(--hdn-charcoal);
	box-shadow: var(--hdn-shadow-lg);
	transform: translateX(101%);
	visibility: hidden;
	transition: transform var(--hdn-speed) var(--hdn-ease-out), visibility var(--hdn-speed);
}

.hdn-drawer.is-open {
	transform: translateX(0);
	visibility: visible;
}

.hdn-drawer ul {
	display: flex;
	flex-direction: column;
	gap: var(--hdn-space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hdn-drawer a {
	display: block;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--hdn-border);
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-sm);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--hdn-cream);
}

.hdn-drawer .sub-menu {
	position: static;
	padding-left: var(--hdn-space-sm);
	border: 0;
	background: none;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	transform: none;
}

.hdn-scrim {
	position: fixed;
	inset: 0;
	z-index: var(--hdn-z-overlay);
	background: var(--hdn-overlay);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--hdn-speed) var(--hdn-ease), visibility var(--hdn-speed);
}

.hdn-scrim.is-open {
	opacity: 1;
	visibility: visible;
}

.hdn-drawer.is-open {
	z-index: calc(var(--hdn-z-overlay) + 1);
}

/* ==========================================================================
   08. ARCHIVE STATUS STRIP
   ========================================================================== */

.hdn-status {
	border-bottom: 1px solid var(--hdn-border);
	background: var(--hdn-navy-deep);
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--hdn-faint);
}

.hdn-status__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--hdn-space-sm);
	min-height: 2.1rem;
	padding-block: 0.4rem;
}

.hdn-status__item {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.hdn-status__item + .hdn-status__item::before {
	content: "//";
	margin-right: 0.4rem;
	color: var(--hdn-slate);
}

.hdn-status__value {
	color: var(--hdn-cream);
}

.hdn-status__beacon {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--hdn-amber);
	animation: hdn-pulse 2.6s var(--hdn-ease) infinite;
}

.hdn-status__spacer {
	margin-left: auto;
}

/* ==========================================================================
   09. PILLAR FILTER TABS
   ========================================================================== */

.hdn-filters {
	position: sticky;
	top: var(--hdn-header-height);
	z-index: var(--hdn-z-sticky);
	margin-bottom: var(--hdn-space-lg);
	padding-block: var(--hdn-space-xs);
	background: linear-gradient(180deg, var(--hdn-navy) 62%, rgba(10, 14, 23, 0));
}

.hdn-filters__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hdn-space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hdn-filters__item {
	margin: 0;
}

.hdn-filters__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border: 1px solid var(--hdn-border);
	border-radius: 99px;
	background: rgba(26, 31, 46, 0.7);
	color: var(--hdn-muted);
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
	transition:
		color var(--hdn-speed) var(--hdn-ease),
		border-color var(--hdn-speed) var(--hdn-ease),
		background-color var(--hdn-speed) var(--hdn-ease);
}

.hdn-filters__btn::before {
	content: "";
	width: 7px;
	height: 7px;
	flex: none;
	border-radius: 1px;
	background: var(--hdn-accent);
	transform: rotate(45deg);
	opacity: 0.6;
	transition: opacity var(--hdn-speed) var(--hdn-ease), transform var(--hdn-speed) var(--hdn-ease);
}

.hdn-filters__btn:hover {
	color: var(--hdn-cream);
	border-color: var(--hdn-accent-line);
}

.hdn-filters__btn[aria-selected="true"],
.hdn-filters__btn.is-active {
	color: var(--hdn-navy-deep);
	border-color: var(--hdn-accent);
	background: var(--hdn-accent);
	font-weight: 700;
}

.hdn-filters__btn[aria-selected="true"]::before {
	background: var(--hdn-navy-deep);
	opacity: 1;
	transform: rotate(45deg) scale(1.1);
}

.hdn-filters__count {
	font-size: 0.625rem;
	opacity: 0.7;
}

/* Live region announcing "shown / total" after a filter change. */
.hdn-filters__status {
	flex: none;
	margin-left: auto;
	padding-left: var(--hdn-space-sm);
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hdn-faint);
	white-space: nowrap;
}

@media (max-width: 600px) {
	.hdn-filters__status {
		margin-left: 0;
		padding-left: 0;
	}
}

/* ==========================================================================
   10. ENTRY GRID & ENTRY CARDS (FLIP ANIMATION)
   ========================================================================== */

.hdn-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
	gap: var(--hdn-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hdn-grid--dense {
	grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
	gap: var(--hdn-space-sm);
}

.hdn-grid__item {
	margin: 0;
	min-width: 0;
}

.hdn-grid__item[hidden] {
	display: none;
}

/* Entrance choreography — files sliding out of a drawer. */
.hdn-grid__item {
	animation: hdn-file-in var(--hdn-speed-slow) var(--hdn-ease-out) both;
	animation-delay: calc(var(--hdn-index, 0) * 45ms);
}

/* --- The card ------------------------------------------------------------- */

.hdn-card {
	position: relative;
	height: 100%;
	perspective: 1400px;
}

.hdn-card__inner {
	position: relative;
	height: 100%;
	min-height: 20rem;
	transform-style: preserve-3d;
	transition: transform var(--hdn-speed-slow) var(--hdn-ease-out);
}

.hdn-card:hover .hdn-card__inner,
.hdn-card:focus-within .hdn-card__inner,
.hdn-card.is-flipped .hdn-card__inner {
	transform: rotateY(180deg);
}

.hdn-card__face {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	padding: var(--hdn-space-md);
	border: 1px solid var(--hdn-border);
	border-radius: var(--hdn-radius-md);
	background: linear-gradient(160deg, var(--hdn-charcoal), var(--hdn-navy) 78%);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	overflow: hidden;
	transition: border-color var(--hdn-speed) var(--hdn-ease), box-shadow var(--hdn-speed) var(--hdn-ease);
}

.hdn-card:hover .hdn-card__face {
	border-color: var(--hdn-accent-line);
	box-shadow: var(--hdn-shadow-md);
}

/* Corner tick marks — the archival registration crosses. */
.hdn-card__face::before,
.hdn-card__face::after {
	content: "";
	position: absolute;
	width: 12px;
	height: 12px;
	border: 1px solid var(--hdn-accent-line);
	opacity: 0;
	transition: opacity var(--hdn-speed) var(--hdn-ease);
}

.hdn-card__face::before {
	top: 8px;
	left: 8px;
	border-right: 0;
	border-bottom: 0;
}

.hdn-card__face::after {
	bottom: 8px;
	right: 8px;
	border-left: 0;
	border-top: 0;
}

.hdn-card:hover .hdn-card__face::before,
.hdn-card:hover .hdn-card__face::after {
	opacity: 1;
}

.hdn-card__face--back {
	transform: rotateY(180deg);
	justify-content: space-between;
	background:
		radial-gradient(120% 80% at 50% 0%, var(--hdn-accent-soft), transparent 60%),
		linear-gradient(200deg, var(--hdn-charcoal-soft), var(--hdn-navy-deep));
	border-color: var(--hdn-accent-line);
}

.hdn-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--hdn-space-2xs);
	margin-bottom: var(--hdn-space-sm);
}

.hdn-card__entry-no {
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
	letter-spacing: 0.18em;
	color: var(--hdn-faint);
}

.hdn-card__thumb {
	position: relative;
	margin: calc(var(--hdn-space-md) * -1) calc(var(--hdn-space-md) * -1) var(--hdn-space-sm);
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--hdn-navy-deep);
	border-bottom: 1px solid var(--hdn-border);
}

.hdn-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(0.55) contrast(1.06) brightness(0.82);
	transform: scale(1.01);
	transition: filter var(--hdn-speed-slow) var(--hdn-ease), transform var(--hdn-speed-slow) var(--hdn-ease-out);
}

.hdn-card:hover .hdn-card__thumb img {
	filter: grayscale(0) contrast(1) brightness(1);
	transform: scale(1.06);
}

.hdn-card__thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 45%, rgba(10, 14, 23, 0.9));
}

.hdn-card__thumb--empty {
	display: grid;
	place-items: center;
	background:
		repeating-linear-gradient(45deg, rgba(232, 220, 200, 0.03) 0 8px, transparent 8px 16px),
		var(--hdn-navy-deep);
}

.hdn-card__thumb--empty .hdn-stamp {
	position: relative;
	z-index: 1;
}

.hdn-card__title {
	margin: 0 0 var(--hdn-space-2xs);
	font-family: var(--hdn-font-serif);
	font-size: var(--hdn-size-lg);
	line-height: var(--hdn-leading-snug);
	color: var(--hdn-text-strong);
}

.hdn-card__title a {
	color: inherit;
	text-decoration: none;
}

.hdn-card__title a::after {
	/* Full-card click target without nesting interactive elements. */
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.hdn-card:hover .hdn-card__title {
	color: var(--hdn-accent);
}

.hdn-card__excerpt {
	margin: 0;
	font-size: var(--hdn-size-sm);
	line-height: 1.6;
	color: var(--hdn-muted);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hdn-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hdn-space-2xs);
	margin-top: auto;
	padding-top: var(--hdn-space-sm);
	border-top: 1px solid var(--hdn-border);
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--hdn-faint);
}

.hdn-card__insight {
	font-family: var(--hdn-font-serif);
	font-size: var(--hdn-size-md);
	font-style: italic;
	line-height: 1.45;
	color: var(--hdn-cream);
}

.hdn-card__insight::before {
	content: "\201C";
}

.hdn-card__insight::after {
	content: "\201D";
}

.hdn-card__progress {
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
	letter-spacing: 0.18em;
	color: var(--hdn-accent);
}

/* --- Pillar badge ---------------------------------------------------------- */

.hdn-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.25rem 0.6rem;
	border: 1px solid var(--hdn-accent-line);
	border-radius: var(--hdn-radius-xs);
	background: var(--hdn-accent-soft);
	color: var(--hdn-accent);
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.hdn-badge:hover {
	color: var(--hdn-navy-deep);
	background: var(--hdn-accent);
	text-decoration: none;
}

.hdn-badge::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 1px;
	background: currentColor;
	transform: rotate(45deg);
}

.hdn-badge--lg {
	padding: 0.4rem 0.9rem;
	font-size: var(--hdn-size-xs);
}

/* Sealed / locked entries */
.hdn-card--sealed .hdn-card__face {
	border-style: dashed;
	opacity: 0.72;
}

.hdn-card--sealed .hdn-card__title {
	filter: blur(3px);
	user-select: none;
}

.hdn-card--collected .hdn-card__face::before,
.hdn-card--collected .hdn-card__face::after {
	opacity: 1;
	border-color: var(--hdn-amber);
}

/* --- Explicit flip control -------------------------------------------------
   Hover reveals the back face on pointer devices, but touch has no hover and
   keyboards should not depend on :focus-within alone. This button is the
   accessible, always-available way to turn a card over. It sits above the
   card so it stays clickable regardless of which face is showing.
   -------------------------------------------------------------------------- */

.hdn-card__flip {
	position: absolute;
	right: var(--hdn-space-2xs);
	bottom: var(--hdn-space-2xs);
	z-index: 2;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 1px solid var(--hdn-border-strong);
	border-radius: 50%;
	background: rgba(10, 14, 23, 0.82);
	color: var(--hdn-muted);
	font-size: 0.9rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transition:
		opacity var(--hdn-speed) var(--hdn-ease),
		color var(--hdn-speed) var(--hdn-ease),
		border-color var(--hdn-speed) var(--hdn-ease),
		transform var(--hdn-speed) var(--hdn-ease-out);
}

.hdn-card:hover .hdn-card__flip,
.hdn-card:focus-within .hdn-card__flip,
.hdn-card__flip:focus-visible {
	opacity: 1;
}

.hdn-card__flip:hover {
	border-color: var(--hdn-accent);
	color: var(--hdn-accent);
	transform: rotate(180deg);
}

.hdn-card__flip[aria-pressed="true"] {
	border-color: var(--hdn-accent);
	color: var(--hdn-accent);
}

/* On touch screens the control is permanently visible — it is the only way in. */
@media (hover: none) {
	.hdn-card__flip {
		opacity: 1;
	}
}


/* ==========================================================================
   11. PAGINATION & LOAD MORE
   ========================================================================== */

.hdn-pagination {
	margin-top: var(--hdn-space-xl);
	padding-top: var(--hdn-space-md);
	border-top: 1px solid var(--hdn-border);
}

.hdn-pagination .nav-links,
.hdn-pagination__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--hdn-space-3xs);
}

.hdn-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: 0.6rem;
	border: 1px solid var(--hdn-border);
	border-radius: var(--hdn-radius-xs);
	background: rgba(26, 31, 46, 0.6);
	color: var(--hdn-muted);
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-xs);
	letter-spacing: 0.08em;
	text-decoration: none;
	transition: all var(--hdn-speed) var(--hdn-ease);
}

.hdn-pagination .page-numbers:hover {
	border-color: var(--hdn-amber);
	color: var(--hdn-amber-bright);
	text-decoration: none;
}

.hdn-pagination .page-numbers.current {
	border-color: var(--hdn-amber);
	background: var(--hdn-amber);
	color: var(--hdn-navy-deep);
	font-weight: 700;
}

.hdn-pagination .page-numbers.dots {
	border-color: transparent;
	background: none;
}

.hdn-loadmore {
	display: flex;
	justify-content: center;
	margin-top: var(--hdn-space-lg);
}

.hdn-loadmore__btn.is-loading {
	pointer-events: none;
	opacity: 0.6;
}

.hdn-loadmore__btn.is-loading::after {
	content: "";
	width: 0.85em;
	height: 0.85em;
	border: 1.5px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: hdn-spin 700ms linear infinite;
}

/* Empty state */
.hdn-empty {
	padding: var(--hdn-space-2xl) var(--hdn-space-md);
	border: 1px dashed var(--hdn-border-strong);
	border-radius: var(--hdn-radius-md);
	text-align: center;
	background: rgba(0, 0, 0, 0.22);
}

.hdn-empty__title {
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-sm);
	letter-spacing: var(--hdn-tracking-stamp);
	text-transform: uppercase;
	color: var(--hdn-red-bright);
}

/* ==========================================================================
   12. SINGLE ENTRY: HERO, BADGE, BREADCRUMBS
   ========================================================================== */

.hdn-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem;
	margin-bottom: var(--hdn-space-md);
	padding: 0;
	list-style: none;
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hdn-faint);
}

.hdn-breadcrumbs li {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

.hdn-breadcrumbs li + li::before {
	content: "/";
	color: var(--hdn-slate);
}

.hdn-breadcrumbs a {
	color: var(--hdn-muted);
	text-decoration: none;
}

.hdn-breadcrumbs a:hover {
	color: var(--hdn-amber);
}

.hdn-breadcrumbs [aria-current="page"] {
	color: var(--hdn-cream);
}

.hdn-entry-hero {
	position: relative;
	padding-block: var(--hdn-space-lg) var(--hdn-space-md);
	border-bottom: 1px solid var(--hdn-border);
	overflow: hidden;
}

.hdn-entry-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(70% 120% at 12% 0%, var(--hdn-accent-soft), transparent 62%);
	pointer-events: none;
}

.hdn-entry-hero__inner {
	position: relative;
}

.hdn-entry-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--hdn-space-2xs) var(--hdn-space-sm);
	margin-bottom: var(--hdn-space-sm);
}

.hdn-entry-hero__title {
	max-width: 22ch;
	margin: 0 0 var(--hdn-space-sm);
	font-size: var(--hdn-size-4xl);
	letter-spacing: -0.02em;
}

.hdn-entry-hero__standfirst {
	max-width: 54ch;
	margin: 0;
	font-family: var(--hdn-font-serif);
	font-size: var(--hdn-size-md);
	color: var(--hdn-muted);
}

.hdn-entry-hero__byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--hdn-space-sm);
	margin-top: var(--hdn-space-md);
	padding-top: var(--hdn-space-sm);
	border-top: 1px solid var(--hdn-border);
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hdn-faint);
}

/* CLASSIFIED → DECLASSIFIED transition mark */
.hdn-declass {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
	letter-spacing: var(--hdn-tracking-stamp);
	text-transform: uppercase;
}

.hdn-declass__from {
	position: relative;
	color: var(--hdn-faint);
}

.hdn-declass__from::after {
	content: "";
	position: absolute;
	left: -3%;
	right: -3%;
	top: 52%;
	height: 1px;
	background: var(--hdn-red-bright);
	transform: rotate(-3deg);
}

.hdn-declass__to {
	padding: 0.22em 0.6em;
	border: 1px solid var(--hdn-accent);
	border-radius: var(--hdn-radius-xs);
	color: var(--hdn-accent);
	transform: rotate(-1.4deg);
	animation: hdn-stamp-land 520ms var(--hdn-ease-out) both;
}

/* ==========================================================================
   13. INTUITION TEST MODULE
   ========================================================================== */

.hdn-intuition {
	position: relative;
	margin-block: var(--hdn-space-lg);
	padding: var(--hdn-space-md);
	border: 1px solid var(--hdn-accent-line);
	border-radius: var(--hdn-radius-md);
	background:
		radial-gradient(90% 120% at 100% 0%, var(--hdn-accent-soft), transparent 55%),
		var(--hdn-charcoal);
	box-shadow: var(--hdn-shadow-md);
}

.hdn-intuition::before {
	content: "";
	position: absolute;
	inset-inline: -1px;
	top: -1px;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--hdn-accent), transparent);
	border-radius: var(--hdn-radius-md) var(--hdn-radius-md) 0 0;
}

.hdn-intuition__label {
	margin-bottom: var(--hdn-space-2xs);
}

.hdn-intuition__question {
	margin: 0 0 var(--hdn-space-md);
	font-family: var(--hdn-font-serif);
	font-size: var(--hdn-size-xl);
	line-height: var(--hdn-leading-snug);
	color: var(--hdn-text-strong);
}

.hdn-intuition__options {
	display: grid;
	gap: var(--hdn-space-2xs);
	margin: 0 0 var(--hdn-space-sm);
	padding: 0;
	list-style: none;
	counter-reset: hdn-choice;
}

.hdn-intuition__options li {
	margin: 0;
}

.hdn-choice {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--hdn-space-xs);
	width: 100%;
	padding: var(--hdn-space-xs) var(--hdn-space-sm);
	border: 1px solid var(--hdn-border);
	border-radius: var(--hdn-radius-sm);
	background: rgba(10, 14, 23, 0.6);
	color: var(--hdn-text);
	font-family: var(--hdn-font-sans);
	font-size: var(--hdn-size-sm);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.5;
	text-align: left;
	text-transform: none;
	cursor: pointer;
	overflow: hidden;
	transition:
		border-color var(--hdn-speed) var(--hdn-ease),
		background-color var(--hdn-speed) var(--hdn-ease),
		transform var(--hdn-speed-fast) var(--hdn-ease);
}

.hdn-choice::after {
	/* Sweep highlight on hover */
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent 35%, var(--hdn-accent-soft) 50%, transparent 65%);
	transform: translateX(-100%);
	transition: transform var(--hdn-speed-slow) var(--hdn-ease-out);
	pointer-events: none;
}

.hdn-choice:hover {
	border-color: var(--hdn-accent-line);
	background: rgba(10, 14, 23, 0.9);
	transform: translateX(3px);
}

.hdn-choice:hover::after {
	transform: translateX(100%);
}

.hdn-choice__key {
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	flex: none;
	border: 1px solid var(--hdn-border-strong);
	border-radius: var(--hdn-radius-xs);
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-xs);
	font-weight: 700;
	color: var(--hdn-muted);
	transition: all var(--hdn-speed) var(--hdn-ease);
}

.hdn-choice:hover .hdn-choice__key {
	border-color: var(--hdn-accent);
	color: var(--hdn-accent);
}

.hdn-choice__text {
	padding-top: 0.15rem;
}

.hdn-choice[aria-pressed="true"],
.hdn-choice.is-selected {
	border-color: var(--hdn-accent);
	background: var(--hdn-accent-soft);
}

.hdn-choice[aria-pressed="true"] .hdn-choice__key,
.hdn-choice.is-selected .hdn-choice__key {
	border-color: var(--hdn-accent);
	background: var(--hdn-accent);
	color: var(--hdn-navy-deep);
}

.hdn-choice.is-correct {
	border-color: var(--hdn-pillar-numbers);
	background: rgba(0, 229, 255, 0.1);
}

.hdn-choice.is-correct .hdn-choice__key {
	border-color: var(--hdn-pillar-numbers);
	background: var(--hdn-pillar-numbers);
	color: var(--hdn-navy-deep);
}

.hdn-choice.is-incorrect {
	border-color: var(--hdn-red-bright);
	background: rgba(139, 37, 0, 0.16);
	animation: hdn-shake 380ms var(--hdn-ease);
}

.hdn-intuition__reveal {
	display: grid;
	grid-template-rows: 0fr;
	overflow: hidden;
	transition: grid-template-rows var(--hdn-speed-slow) var(--hdn-ease-out);
}

.hdn-intuition__reveal.is-open {
	grid-template-rows: 1fr;
}

.hdn-intuition__reveal-inner {
	min-height: 0;
}

.hdn-intuition__verdict {
	margin-top: var(--hdn-space-sm);
	padding: var(--hdn-space-sm);
	border-left: 2px solid var(--hdn-accent);
	background: rgba(0, 0, 0, 0.32);
	font-family: var(--hdn-font-serif);
	font-size: var(--hdn-size-base);
	color: var(--hdn-cream);
}

.hdn-intuition__hint {
	margin: 0;
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hdn-faint);
}

/* ==========================================================================
   14. VIDEO FRAME & CONTENT PROSE
   ========================================================================== */

.hdn-video {
	position: relative;
	margin-block: var(--hdn-space-lg);
	border: 1px solid var(--hdn-border-strong);
	border-radius: var(--hdn-radius-md);
	background: var(--hdn-navy-deep);
	overflow: hidden;
}

.hdn-video__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	width: 100%;
}

.hdn-video__frame iframe,
.hdn-video__frame video,
.hdn-video__frame object {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.hdn-video__placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	gap: var(--hdn-space-2xs);
	justify-items: center;
	text-align: center;
	background:
		repeating-linear-gradient(0deg, rgba(232, 220, 200, 0.022) 0 2px, transparent 2px 4px),
		radial-gradient(60% 90% at 50% 40%, var(--hdn-charcoal), var(--hdn-navy-deep));
}

.hdn-video__play {
	display: grid;
	place-items: center;
	width: 4rem;
	height: 4rem;
	border: 1px solid var(--hdn-accent);
	border-radius: 50%;
	color: var(--hdn-accent);
	background: rgba(0, 0, 0, 0.4);
	transition: transform var(--hdn-speed) var(--hdn-ease-out), box-shadow var(--hdn-speed) var(--hdn-ease);
}

.hdn-video__placeholder:hover .hdn-video__play {
	transform: scale(1.08);
	box-shadow: var(--hdn-glow);
}

.hdn-video__caption {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--hdn-space-2xs);
	padding: var(--hdn-space-2xs) var(--hdn-space-sm);
	border-top: 1px solid var(--hdn-border);
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hdn-faint);
}

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

.hdn-prose {
	max-width: var(--hdn-content-width);
	font-size: var(--hdn-size-md);
	line-height: var(--hdn-leading-normal);
}

.hdn-prose > * + * {
	margin-top: var(--hdn-space-sm);
}

.hdn-prose h2 {
	margin-top: var(--hdn-space-xl);
	padding-top: var(--hdn-space-2xs);
	border-top: 1px solid var(--hdn-border);
}

.hdn-prose h2::before {
	content: attr(data-index);
	display: block;
	margin-bottom: var(--hdn-space-3xs);
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
	letter-spacing: var(--hdn-tracking-stamp);
	color: var(--hdn-accent);
}

.hdn-prose h3 {
	margin-top: var(--hdn-space-lg);
}

.hdn-prose a {
	text-decoration: underline;
	text-decoration-color: var(--hdn-accent-line);
}

.hdn-prose a:hover {
	text-decoration-color: var(--hdn-accent);
}

.hdn-prose img,
.hdn-prose figure {
	margin-block: var(--hdn-space-lg);
	border-radius: var(--hdn-radius-sm);
}

.hdn-prose figcaption,
.wp-element-caption,
.wp-caption-text {
	margin-top: var(--hdn-space-2xs);
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hdn-faint);
	text-align: left;
}

/* Drop cap for the first paragraph of a declassified entry. */
.hdn-prose--dropcap > p:first-of-type::first-letter {
	float: left;
	margin: 0.08em 0.12em 0 0;
	font-family: var(--hdn-font-serif);
	font-size: 3.6em;
	line-height: 0.78;
	font-weight: 700;
	color: var(--hdn-accent);
}

/* ==========================================================================
   15. VAULT CARD COLLECTION CTA
   ========================================================================== */

.hdn-collect {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--hdn-space-md);
	margin-block: var(--hdn-space-xl);
	padding: var(--hdn-space-lg);
	border: 1px solid var(--hdn-accent-line);
	border-radius: var(--hdn-radius-md);
	background:
		radial-gradient(120% 140% at 0% 0%, var(--hdn-accent-soft), transparent 55%),
		linear-gradient(180deg, var(--hdn-charcoal), var(--hdn-navy-deep));
	overflow: hidden;
	text-align: center;
	justify-items: center;
}

.hdn-collect::after {
	content: "";
	position: absolute;
	inset: 6px;
	border: 1px dashed var(--hdn-border);
	border-radius: var(--hdn-radius-sm);
	pointer-events: none;
}

.hdn-collect__title {
	margin: 0;
	font-size: var(--hdn-size-xl);
}

.hdn-collect__insight {
	max-width: 40ch;
	margin: 0;
	font-family: var(--hdn-font-serif);
	font-style: italic;
	color: var(--hdn-muted);
}

.hdn-collect__meter {
	width: min(24rem, 100%);
}

.hdn-collect__bar {
	position: relative;
	height: 4px;
	border-radius: 99px;
	background: rgba(232, 220, 200, 0.1);
	overflow: hidden;
}

.hdn-collect__bar-fill {
	position: absolute;
	inset-block: 0;
	left: 0;
	width: var(--hdn-progress, 0%);
	background: linear-gradient(90deg, var(--hdn-amber-dim), var(--hdn-amber-bright));
	transition: width var(--hdn-speed-slow) var(--hdn-ease-out);
}

.hdn-collect__count {
	margin-top: var(--hdn-space-3xs);
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hdn-faint);
}

.hdn-collect__btn.is-collected {
	border-color: var(--hdn-amber);
	background: transparent;
	color: var(--hdn-amber);
	pointer-events: none;
}

.hdn-collect__btn.is-collected::before {
	content: "\2713";
	font-weight: 700;
}

/* Toast confirmation */
.hdn-toast {
	position: fixed;
	right: var(--hdn-space-sm);
	bottom: var(--hdn-space-sm);
	z-index: var(--hdn-z-toast);
	display: flex;
	align-items: center;
	gap: var(--hdn-space-2xs);
	max-width: min(22rem, calc(100vw - 2rem));
	padding: var(--hdn-space-xs) var(--hdn-space-sm);
	border: 1px solid var(--hdn-amber);
	border-radius: var(--hdn-radius-sm);
	background: var(--hdn-charcoal);
	box-shadow: var(--hdn-shadow-lg);
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hdn-cream);
	transform: translateY(140%);
	transition: transform var(--hdn-speed) var(--hdn-ease-out);
}

.hdn-toast.is-visible {
	transform: translateY(0);
}

/* ==========================================================================
   16. RELATED ENTRIES & ENTRY META
   ========================================================================== */

/* Shared label pair, used by the prev / next entry navigation below and by
   the related-file cards in section 27.7. The former sidebar related-list
   (.hdn-related, __title, __list, __link) was retired in 1.1.0 when related
   files moved to a full-width card grid; its rules were removed with it. */
.hdn-related__meta {
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hdn-faint);
}

.hdn-related__name {
	font-family: var(--hdn-font-serif);
	font-size: var(--hdn-size-base);
	line-height: var(--hdn-leading-snug);
}

/* Prev / next entry navigation */
.hdn-entry-nav {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
	gap: var(--hdn-space-sm);
	margin-top: var(--hdn-space-xl);
}

.hdn-entry-nav__link {
	display: grid;
	gap: var(--hdn-space-3xs);
	padding: var(--hdn-space-sm);
	border: 1px solid var(--hdn-border);
	border-radius: var(--hdn-radius-sm);
	color: var(--hdn-cream);
	text-decoration: none;
	transition: border-color var(--hdn-speed) var(--hdn-ease), background-color var(--hdn-speed) var(--hdn-ease);
}

.hdn-entry-nav__link:hover {
	border-color: var(--hdn-accent-line);
	background: var(--hdn-accent-soft);
	text-decoration: none;
}

.hdn-entry-nav__link--next {
	text-align: right;
}

.hdn-meta-list {
	display: grid;
	gap: var(--hdn-space-3xs);
	margin: 0;
	padding: 0;
}

.hdn-meta-list__row {
	display: grid;
	grid-template-columns: 8.5rem minmax(0, 1fr);
	gap: var(--hdn-space-2xs);
	padding-block: 0.35rem;
	border-bottom: 1px dotted var(--hdn-border);
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.hdn-meta-list__key {
	color: var(--hdn-faint);
}

.hdn-meta-list__val {
	color: var(--hdn-cream);
}

/* Tag cloud / entry tags */
.hdn-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hdn-space-3xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hdn-tags a,
.tagcloud a {
	display: inline-block;
	padding: 0.22rem 0.6rem;
	border: 1px solid var(--hdn-border);
	border-radius: 99px;
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs) !important;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hdn-muted);
	text-decoration: none;
}

.hdn-tags a:hover,
.tagcloud a:hover {
	border-color: var(--hdn-amber);
	color: var(--hdn-amber);
	text-decoration: none;
}

/* ==========================================================================
   17. PAGE TEMPLATE & SIDEBAR / WIDGETS
   ========================================================================== */

/*
 * Article shells.
 *
 * `.hdn-entry` (single.php) and `.hdn-page` (page.php) sit on the <article>
 * element. Their visual weight lives in the child blocks; the wrapper only has
 * to behave as a flow root so the first/last child margin never escapes and
 * collapses into the surrounding archive chrome.
 */
.hdn-entry,
.hdn-page {
	display: flow-root;
}

/*
 * Behaviour hooks — deliberately unstyled.
 *
 * `.hdn-singular` / `.hdn-archive`  body_class markers for scripts and plugins.
 * `.hdn-grid-empty`                 the "no results" node the pillar filter
 *                                   shows and hides (it borrows `.hdn-empty`
 *                                   for its appearance).
 * `.hdn-search-toggle`              the header search button (styled by
 *                                   `.hdn-btn--icon`; this class is the JS
 *                                   selector only).
 *
 * They are documented here so nobody "cleans up" the markup and silently
 * breaks the scripting contract.
 */

/* The drawer stacks navigation vertically, so the sliding underline the
   horizontal header nav draws under each item would read as a stray rule. */
.hdn-nav--drawer a::after {
	display: none;
}

.hdn-page-header,
.hdn-catalog-header {
	margin-bottom: var(--hdn-space-lg);
	padding-bottom: var(--hdn-space-md);
	border-bottom: 1px solid var(--hdn-border);
}

/* The catalogue heading carries its own rule below it, so it drops the border. */
.hdn-catalog-header {
	padding-bottom: var(--hdn-space-xs);
	border-bottom: 0;
}

.hdn-page-header__title {
	margin: 0;
}

.hdn-page-header__desc {
	max-width: 60ch;
	margin-top: var(--hdn-space-2xs);
	color: var(--hdn-muted);
}

.hdn-page-thumb {
	margin-bottom: var(--hdn-space-lg);
	border: 1px solid var(--hdn-border);
	border-radius: var(--hdn-radius-md);
	overflow: hidden;
}

.hdn-sidebar {
	display: grid;
	gap: var(--hdn-space-md);
}

.hdn-widget,
.widget {
	padding: var(--hdn-space-sm);
	border: 1px solid var(--hdn-border);
	border-radius: var(--hdn-radius-sm);
	background: rgba(26, 31, 46, 0.55);
	font-size: var(--hdn-size-sm);
}

.hdn-widget__title,
.widget-title,
.wp-block-heading.widget-title {
	margin: 0 0 var(--hdn-space-xs);
	padding-bottom: var(--hdn-space-3xs);
	border-bottom: 1px solid var(--hdn-border);
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
	font-weight: 600;
	letter-spacing: var(--hdn-tracking-stamp);
	text-transform: uppercase;
	color: var(--hdn-amber);
}

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

.widget li {
	padding-block: 0.3rem;
	border-bottom: 1px dotted var(--hdn-border);
}

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

.widget a {
	color: var(--hdn-cream);
	text-decoration: none;
}

.widget a:hover {
	color: var(--hdn-amber);
}

/* ==========================================================================
   18. COMMENTS
   ========================================================================== */

.hdn-comments {
	margin-top: var(--hdn-space-xl);
	padding-top: var(--hdn-space-md);
	border-top: 1px solid var(--hdn-border);
}

.hdn-comments__title,
.comments-title,
.comment-reply-title {
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-xs);
	letter-spacing: var(--hdn-tracking-stamp);
	text-transform: uppercase;
	color: var(--hdn-muted);
}

.comment-list {
	margin: 0 0 var(--hdn-space-lg);
	padding: 0;
	list-style: none;
}

.comment-list .comment,
.comment-list .pingback {
	margin-bottom: var(--hdn-space-sm);
	padding: var(--hdn-space-sm);
	border: 1px solid var(--hdn-border);
	border-radius: var(--hdn-radius-sm);
	background: rgba(0, 0, 0, 0.2);
}

.comment-list .children {
	margin-top: var(--hdn-space-sm);
	padding-left: var(--hdn-space-sm);
	border-left: 1px solid var(--hdn-border);
	list-style: none;
}

.comment-meta,
.comment-metadata {
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hdn-faint);
}

.comment-author .avatar {
	border-radius: 50%;
	border: 1px solid var(--hdn-border-strong);
}

.comment-form {
	display: grid;
	gap: var(--hdn-space-xs);
}

/* ==========================================================================
   19. SITE FOOTER
   ========================================================================== */

.hdn-footer {
	position: relative;
	margin-top: auto;
	border-top: 1px solid var(--hdn-border-strong);
	background: var(--hdn-navy-deep);
	font-size: var(--hdn-size-sm);
}

.hdn-footer::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: -1px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--hdn-amber-dim), transparent);
}

.hdn-footer__top {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
	gap: var(--hdn-space-lg);
	padding-block: var(--hdn-space-xl) var(--hdn-space-lg);
}

.hdn-footer__col {
	min-width: 0;
}

.hdn-footer__heading {
	margin-bottom: var(--hdn-space-xs);
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
	letter-spacing: var(--hdn-tracking-stamp);
	text-transform: uppercase;
	color: var(--hdn-amber);
}

.hdn-footer p {
	color: var(--hdn-muted);
}

.hdn-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hdn-footer li {
	padding-block: 0.22rem;
}

.hdn-footer a {
	color: var(--hdn-cream);
	text-decoration: none;
}

.hdn-footer a:hover {
	color: var(--hdn-amber);
	text-decoration: none;
}

/* Declassification schedule */
.hdn-schedule {
	display: grid;
	gap: var(--hdn-space-2xs);
}

.hdn-schedule__row {
	display: flex;
	align-items: baseline;
	gap: var(--hdn-space-2xs);
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hdn-muted);
}

.hdn-schedule__day {
	color: var(--hdn-amber);
	min-width: 4.5rem;
}

.hdn-schedule__dots {
	flex: 1;
	height: 1px;
	background: repeating-linear-gradient(90deg, var(--hdn-slate) 0 2px, transparent 2px 6px);
}

.hdn-schedule__value {
	color: var(--hdn-cream);
	text-align: right;
	max-width: 60%;
}

/* Footer navigation list */
.hdn-footer__menu {
	display: grid;
	gap: var(--hdn-space-3xs);
	list-style: none;
	margin: 0;
	padding: 0;
}

.hdn-footer__menu a {
	display: inline-block;
	color: var(--hdn-muted);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color var(--hdn-speed) var(--hdn-ease), border-color var(--hdn-speed) var(--hdn-ease);
}

.hdn-footer__menu a:hover,
.hdn-footer__menu a:focus-visible {
	color: var(--hdn-amber);
	border-bottom-color: var(--hdn-amber);
}

/* Footer widget areas — keep injected plugin markup inside the archive voice */
.hdn-footer__widgets {
	display: grid;
	gap: var(--hdn-space-xs);
	margin-top: var(--hdn-space-xs);
}

.hdn-footer__widgets .widget {
	margin: 0;
	font-size: var(--hdn-size-xs);
	color: var(--hdn-muted);
}

.hdn-footer__widgets .widget-title,
.hdn-footer__widgets h2,
.hdn-footer__widgets h3 {
	margin: 0 0 var(--hdn-space-2xs);
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--hdn-amber);
}

.hdn-footer__widgets ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--hdn-space-3xs);
}

.hdn-footer__widgets a {
	color: var(--hdn-muted);
	text-decoration: none;
}

.hdn-footer__widgets a:hover,
.hdn-footer__widgets a:focus-visible {
	color: var(--hdn-amber);
}

/* Archivist signature block */
.hdn-signature {
	display: flex;
	align-items: center;
	gap: var(--hdn-space-xs);
	padding: var(--hdn-space-xs) 0;
}

.hdn-signature__seal {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	flex: none;
	border: 1px solid var(--hdn-amber-dim);
	border-radius: 50%;
	color: var(--hdn-amber);
	font-family: var(--hdn-font-mono);
	font-size: 0.5625rem;
	letter-spacing: 0.14em;
	text-align: center;
	line-height: 1.1;
	transform: rotate(-8deg);
}

.hdn-signature__name {
	font-family: var(--hdn-font-serif);
	font-size: var(--hdn-size-md);
	font-style: italic;
	color: var(--hdn-cream);
}

.hdn-signature__role {
	display: block;
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
	font-style: normal;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hdn-faint);
}

/* Social links */
.hdn-social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hdn-space-2xs);
}

.hdn-social__link {
	display: grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	border: 1px solid var(--hdn-border);
	border-radius: var(--hdn-radius-xs);
	color: var(--hdn-muted);
	transition: all var(--hdn-speed) var(--hdn-ease);
}

.hdn-social__link:hover {
	border-color: var(--hdn-amber);
	color: var(--hdn-amber);
	transform: translateY(-2px);
}

.hdn-social__link svg {
	width: 1.05rem;
	height: 1.05rem;
	/* No `fill` here on purpose: the glyphs are stroke-drawn and carry their own
	   fill="none" / fill="currentColor" presentation attributes. A CSS fill would
	   beat the root <svg> attribute and flood every outline shape. */
}

.hdn-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--hdn-space-2xs) var(--hdn-space-sm);
	padding-block: var(--hdn-space-sm);
	border-top: 1px solid var(--hdn-border);
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--hdn-faint);
}

/* Back to top */
.hdn-totop {
	position: fixed;
	right: var(--hdn-space-sm);
	bottom: var(--hdn-space-sm);
	z-index: var(--hdn-z-sticky);
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var(--hdn-border-strong);
	border-radius: var(--hdn-radius-sm);
	background: rgba(26, 31, 46, 0.92);
	color: var(--hdn-cream);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity var(--hdn-speed) var(--hdn-ease), transform var(--hdn-speed) var(--hdn-ease), visibility var(--hdn-speed);
}

.hdn-totop.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.hdn-totop:hover {
	border-color: var(--hdn-amber);
	color: var(--hdn-amber);
}

/* ==========================================================================
   20. WORDPRESS CORE / BLOCK EDITOR COMPATIBILITY
   ========================================================================== */

.alignleft {
	float: left;
	margin: 0.35rem var(--hdn-space-md) var(--hdn-space-sm) 0;
}

.alignright {
	float: right;
	margin: 0.35rem 0 var(--hdn-space-sm) var(--hdn-space-md);
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

.alignwide {
	width: min(var(--hdn-wide-width), 100vw - var(--hdn-gutter) * 2);
	max-width: none;
	margin-inline: auto;
}

.alignfull {
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
}

.wp-caption {
	max-width: 100%;
}

.sticky .hdn-card__face {
	border-color: var(--hdn-amber);
}

.bypostauthor > .comment-body {
	border-left: 2px solid var(--hdn-amber);
}

.wp-block-quote,
.wp-block-pullquote {
	border-left: 2px solid var(--hdn-accent);
}

.wp-block-separator {
	border: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--hdn-border-strong), transparent);
}

.wp-block-code,
.wp-block-preformatted {
	border: 1px solid var(--hdn-border);
	border-radius: var(--hdn-radius-sm);
	background: var(--hdn-navy-deep);
	padding: var(--hdn-space-sm);
}

.wp-block-table table {
	border: 1px solid var(--hdn-border);
}

.wp-block-image img {
	border-radius: var(--hdn-radius-sm);
}

.wp-block-embed__wrapper {
	position: relative;
}

.wp-block-search__input {
	border-radius: var(--hdn-radius-sm);
}

.wp-block-latest-posts__post-title,
.wp-block-latest-comments__comment-link {
	color: var(--hdn-cream);
}

.wp-block-calendar table caption,
.wp-block-calendar th {
	color: var(--hdn-muted);
}

/* Editor + front-end shared block palette hooks (mirrors theme.json slugs). */
.has-archive-navy-background-color { background-color: var(--hdn-navy); }
.has-archive-charcoal-background-color { background-color: var(--hdn-charcoal); }
.has-archive-amber-background-color { background-color: var(--hdn-amber); }
.has-archive-amber-color { color: var(--hdn-amber); }
.has-archive-cream-color { color: var(--hdn-cream); }
.has-archive-red-color { color: var(--hdn-red); }

/* ==========================================================================
   21. KEYFRAMES & DECORATIVE EFFECTS
   ========================================================================== */

@keyframes hdn-pulse {
	0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(201, 162, 39, 0.5); }
	50% { opacity: 0.55; box-shadow: 0 0 0 6px rgba(201, 162, 39, 0); }
}

@keyframes hdn-spin {
	to { transform: rotate(360deg); }
}

@keyframes hdn-file-in {
	from { opacity: 0; transform: translateY(14px) scale(0.985); }
	to { opacity: 1; transform: none; }
}

@keyframes hdn-stamp-land {
	0% { opacity: 0; transform: rotate(-14deg) scale(2.1); }
	60% { opacity: 1; transform: rotate(-1.4deg) scale(0.96); }
	100% { opacity: 1; transform: rotate(-1.4deg) scale(1); }
}

@keyframes hdn-shake {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-5px); }
	40% { transform: translateX(5px); }
	60% { transform: translateX(-3px); }
	80% { transform: translateX(3px); }
}

@keyframes hdn-scan {
	from { transform: translateY(-100%); }
	to { transform: translateY(100%); }
}

/* Optional scanline sweep for hero surfaces. */
.hdn-scanlines {
	position: relative;
	overflow: hidden;
}

.hdn-scanlines::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 40%;
	background: linear-gradient(180deg, transparent, rgba(201, 162, 39, 0.05), transparent);
	animation: hdn-scan 7s linear infinite;
	pointer-events: none;
}

/* ==========================================================================
   22. RESPONSIVE BREAKPOINTS
   ========================================================================== */

@media (max-width: 1080px) {
	.hdn-layout--sidebar {
		grid-template-columns: minmax(0, 1fr) minmax(0, 16rem);
		gap: var(--hdn-space-lg);
	}
}

@media (max-width: 900px) {
	:root {
		--hdn-space-xl: 2.75rem;
		--hdn-space-2xl: 3.75rem;
	}

	.hdn-layout--sidebar {
		grid-template-columns: minmax(0, 1fr);
	}

	.hdn-layout__aside {
		position: static;
	}

	.hdn-nav--primary {
		display: none;
	}

	.hdn-menu-toggle {
		display: block;
	}

	.hdn-brand__tagline {
		display: none;
	}
}

@media (max-width: 720px) {
	:root {
		--hdn-header-height: 3.9rem;
	}

	.hdn-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.hdn-card__inner {
		min-height: 17rem;
	}

	/* Touch devices: hover-flip is unreliable, so the card only flips on tap. */
	.hdn-card:hover .hdn-card__inner {
		transform: none;
	}

	.hdn-card.is-flipped .hdn-card__inner {
		transform: rotateY(180deg);
	}

	.hdn-entry-hero__title {
		max-width: none;
	}

	.hdn-filters {
		margin-inline: calc(var(--hdn-gutter) * -1);
		padding-inline: var(--hdn-gutter);
	}

	.hdn-filters__list {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		padding-bottom: 2px;
	}

	.hdn-filters__list::-webkit-scrollbar {
		display: none;
	}

	.hdn-filters__btn {
		white-space: nowrap;
	}

	.hdn-meta-list__row {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.hdn-status__inner {
		font-size: 0.625rem;
		gap: var(--hdn-space-2xs);
	}

	.hdn-entry-nav__link--next {
		text-align: left;
	}
}

@media (max-width: 480px) {
	.hdn-collect {
		padding: var(--hdn-space-md) var(--hdn-space-sm);
	}

	.hdn-brand__name {
		font-size: var(--hdn-size-xs);
		letter-spacing: 0.22em;
	}

	.hdn-footer__bottom {
		justify-content: flex-start;
	}
}

@media (hover: none) {
	.hdn-card:hover .hdn-card__inner {
		transform: none;
	}
}

/* ==========================================================================
   23. REDUCED MOTION / HIGH CONTRAST / FORCED COLORS
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	/* Replace the 3D flip with a plain cross-fade so no information is lost. */
	.hdn-card__inner {
		transform: none !important;
	}

	.hdn-card__face--back {
		transform: none;
		opacity: 0;
		visibility: hidden;
		backface-visibility: visible;
	}

	.hdn-card:hover .hdn-card__face--back,
	.hdn-card:focus-within .hdn-card__face--back,
	.hdn-card.is-flipped .hdn-card__face--back {
		opacity: 1;
		visibility: visible;
	}

	.hdn-card__face--front {
		backface-visibility: visible;
	}
}

@media (prefers-contrast: more) {
	:root {
		--hdn-text: #ffffff;
		--hdn-muted: #cfd4de;
		--hdn-border: rgba(255, 255, 255, 0.4);
		--hdn-border-strong: rgba(255, 255, 255, 0.65);
	}

	a {
		text-decoration: underline;
	}
}

@media (forced-colors: active) {
	.hdn-card__face,
	.hdn-btn,
	.hdn-choice,
	.hdn-filters__btn {
		border: 1px solid CanvasText;
	}

	.hdn-brand__mark::after,
	.hdn-choice::after {
		display: none;
	}
}

/* ==========================================================================
   24. PRINT STYLES — "declassified hard copy"
   ========================================================================== */

@media print {
	:root {
		--hdn-text: #000;
		--hdn-text-strong: #000;
		--hdn-muted: #333;
	}

	body {
		background: #fff !important;
		color: #000 !important;
		font-size: 11.5pt;
	}

	.hdn-header,
	.hdn-status,
	.hdn-filters,
	.hdn-drawer,
	.hdn-scrim,
	.hdn-search-panel,
	.hdn-totop,
	.hdn-toast,
	.hdn-collect,
	.hdn-social,
	.hdn-video,
	.hdn-pagination,
	.hdn-loadmore,
	.hdn-comments,
	.hdn-layout__aside,
	.hdn-entry-nav,
	.hdn-menu-toggle {
		display: none !important;
	}

	.hdn-layout--sidebar {
		grid-template-columns: minmax(0, 1fr);
	}

	.hdn-card__inner {
		transform: none !important;
		min-height: 0;
	}

	.hdn-card__face {
		position: static;
		border: 1px solid #999;
		background: none !important;
		box-shadow: none;
	}

	.hdn-card__face--back {
		display: none;
	}

	a {
		color: #000 !important;
		text-decoration: underline;
	}

	.hdn-prose a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-family: monospace;
		font-size: 8.5pt;
		word-break: break-all;
	}

	.hdn-entry-hero,
	.hdn-prose {
		max-width: none;
	}

	.hdn-footer {
		border-top: 1px solid #999;
		background: none;
	}

	.hdn-prose h2,
	.hdn-prose h3 {
		break-after: avoid;
	}

	.hdn-prose p,
	blockquote,
	figure {
		break-inside: avoid;
	}
}



/* ==========================================================================
   25. PHASE 2 — VAULT, RANKS, CATALOGUE FILTERS, LEADERBOARD
   --------------------------------------------------------------------------
   Everything the Vault template, the Archive Catalog template and js/app.js
   need. Appended as a self-contained block: it carries its own breakpoints,
   reduced-motion rules and print overrides so it can be lifted out whole.
   ========================================================================== */

/* --------------------------------------------------------------------------
   25.1 Scripting hooks
   -------------------------------------------------------------------------- */

/* Set on <html> once app.js has booted. Anything that would trap content
   behind JavaScript must be gated on this class, never assumed. */
.hdn-js-ready .hdn-grid__item[hidden] {
	display: none;
}

/* The filter scripts hide items with the hidden attribute; grid items are
   display: grid children, which would otherwise ignore it. */
.hdn-grid__item[hidden],
.hdn-leaderboard__row[hidden] {
	display: none !important;
}

/* Buttons awaiting a REST round trip. */
.hdn-btn.is-loading,
.hdn-btn:disabled {
	cursor: progress;
	opacity: 0.62;
}

.hdn-btn.is-collected {
	cursor: default;
	border-color: var(--hdn-accent-line);
	color: var(--hdn-accent);
	background: var(--hdn-accent-soft);
	opacity: 1;
}

.hdn-toast--error {
	border-color: var(--hdn-red-bright);
	color: var(--hdn-paper);
	background: rgba(139, 37, 0, 0.92);
}

/* Login nudge revealed under the collect button for logged-out readers. */
.hdn-collect__login {
	margin-top: var(--hdn-space-2xs);
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
	letter-spacing: var(--hdn-tracking-wide);
	color: var(--hdn-muted);
}

.hdn-collect__login a {
	color: var(--hdn-accent);
}

.hdn-note {
	margin: var(--hdn-space-2xs) 0 0;
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
	letter-spacing: var(--hdn-tracking-wide);
	color: var(--hdn-faint);
}

/* --------------------------------------------------------------------------
   25.2 Rank badge
   -------------------------------------------------------------------------- */

.hdn-rank {
	display: flex;
	align-items: center;
	gap: var(--hdn-space-sm);
	padding: var(--hdn-space-sm) var(--hdn-space-md);
	border: 1px solid var(--hdn-accent-line);
	border-radius: var(--hdn-radius-md);
	background:
		linear-gradient(135deg, var(--hdn-accent-soft), transparent 62%),
		var(--hdn-charcoal);
	box-shadow: var(--hdn-shadow-md);
}

/* Each clearance level gets its own signature colour. */
.hdn-rank[data-rank="visitor"] {
	--hdn-accent: var(--hdn-faint);
	--hdn-accent-soft: rgba(107, 115, 134, 0.16);
	--hdn-accent-line: rgba(107, 115, 134, 0.4);
}

.hdn-rank[data-rank="resident"] {
	--hdn-accent: var(--hdn-pillar-numbers);
	--hdn-accent-soft: rgba(0, 229, 255, 0.12);
	--hdn-accent-line: rgba(0, 229, 255, 0.34);
}

.hdn-rank[data-rank="keeper"] {
	--hdn-accent: var(--hdn-pillar-logic);
	--hdn-accent-soft: rgba(124, 92, 255, 0.14);
	--hdn-accent-line: rgba(124, 92, 255, 0.36);
}

.hdn-rank[data-rank="curator"] {
	--hdn-accent: var(--hdn-pillar-mechanics);
	--hdn-accent-soft: rgba(255, 138, 61, 0.14);
	--hdn-accent-line: rgba(255, 138, 61, 0.36);
}

.hdn-rank[data-rank="archivist"] {
	--hdn-accent: var(--hdn-amber-bright);
	--hdn-accent-soft: rgba(240, 199, 69, 0.16);
	--hdn-accent-line: rgba(240, 199, 69, 0.42);
}

.hdn-rank__seal {
	display: grid;
	place-items: center;
	flex: none;
	width: 3.25rem;
	height: 3.25rem;
	border: 1px solid var(--hdn-accent-line);
	border-radius: 50%;
	font-family: var(--hdn-font-serif);
	font-size: var(--hdn-size-xl);
	font-weight: 700;
	color: var(--hdn-accent);
	background: var(--hdn-accent-soft);
	box-shadow: inset 0 0 0 3px rgba(5, 7, 13, 0.55);
}

.hdn-rank__body {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.hdn-rank__eyebrow,
.hdn-rank__step {
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
	letter-spacing: var(--hdn-tracking-stamp);
	text-transform: uppercase;
	color: var(--hdn-faint);
}

.hdn-rank__label {
	font-family: var(--hdn-font-serif);
	font-size: var(--hdn-size-lg);
	font-weight: 700;
	line-height: var(--hdn-leading-tight);
	color: var(--hdn-accent);
}

/* --------------------------------------------------------------------------
   25.3 Progress meter
   -------------------------------------------------------------------------- */

.hdn-progress {
	display: flex;
	flex-direction: column;
	gap: var(--hdn-space-3xs);
	width: 100%;
}

.hdn-progress__track {
	position: relative;
	height: 6px;
	overflow: hidden;
	border: 1px solid var(--hdn-border);
	border-radius: 999px;
	background: var(--hdn-navy-deep);
}

.hdn-progress__fill {
	display: block;
	height: 100%;
	width: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--hdn-amber-dim), var(--hdn-amber-bright));
	transition: width var(--hdn-speed-slow) var(--hdn-ease-out);
}

.hdn-progress__label {
	margin: 0;
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
	letter-spacing: var(--hdn-tracking-wide);
	text-transform: uppercase;
	color: var(--hdn-muted);
}

/* --------------------------------------------------------------------------
   25.4 Vault — logged-out gate
   -------------------------------------------------------------------------- */

.hdn-vault-gate {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--hdn-space-md);
	align-items: start;
	margin-top: var(--hdn-space-lg);
	padding: var(--hdn-space-lg);
	border: 1px solid var(--hdn-border);
	border-radius: var(--hdn-radius-md);
	background:
		repeating-linear-gradient(
			-45deg,
			rgba(232, 220, 200, 0.02) 0 12px,
			transparent 12px 24px
		),
		var(--hdn-charcoal);
}

.hdn-vault-gate__seal {
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	border: 1px dashed var(--hdn-accent-line);
	border-radius: 50%;
	font-size: var(--hdn-size-lg);
	background: var(--hdn-navy-deep);
}

.hdn-vault-gate__body > * + * {
	margin-top: var(--hdn-space-sm);
}

.hdn-vault-gate__list {
	margin: 0;
	padding-left: 1.1rem;
	color: var(--hdn-muted);
}

.hdn-vault-gate__list li + li {
	margin-top: var(--hdn-space-3xs);
}

.hdn-vault-gate__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hdn-space-2xs);
}

/* --------------------------------------------------------------------------
   25.5 Vault — the reader's own record
   -------------------------------------------------------------------------- */

.hdn-vault__head {
	display: grid;
	grid-template-columns: minmax(14rem, 22rem) 1fr;
	gap: var(--hdn-space-md);
	align-items: center;
	margin-top: var(--hdn-space-lg);
}

.hdn-vault__totals {
	display: flex;
	flex-direction: column;
	gap: var(--hdn-space-2xs);
	min-width: 0;
}

.hdn-vault__count {
	display: flex;
	align-items: baseline;
	gap: var(--hdn-space-2xs);
	margin: 0;
}

.hdn-vault__count strong {
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xl);
	font-weight: 600;
	line-height: 1;
	color: var(--hdn-amber-bright);
	font-variant-numeric: tabular-nums;
}

.hdn-vault__count span {
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
	letter-spacing: var(--hdn-tracking-stamp);
	text-transform: uppercase;
	color: var(--hdn-faint);
}

.hdn-vault__grid-title {
	margin-top: var(--hdn-space-xl);
}

.hdn-vault__grid {
	margin-top: var(--hdn-space-sm);
}

/* Masonry mode. js/app.js writes grid-row-end per item; the row unit and gap
   below must stay in sync with the ROW and GAP constants in that file. */
.hdn-grid[data-masonry] {
	grid-auto-rows: 8px;
	gap: 24px;
	align-items: start;
}

.hdn-grid[data-masonry] > .hdn-grid__item {
	align-self: start;
}

/* --------------------------------------------------------------------------
   25.6 Vault statistics
   -------------------------------------------------------------------------- */

.hdn-vault-stats {
	margin-top: var(--hdn-space-xl);
	padding: var(--hdn-space-md);
	border: 1px solid var(--hdn-border);
	border-radius: var(--hdn-radius-md);
	background: rgba(26, 31, 46, 0.55);
}

.hdn-vault-stats__title {
	margin-bottom: var(--hdn-space-sm);
}

.hdn-vault-stats__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	gap: var(--hdn-space-sm) var(--hdn-space-md);
	margin: 0 0 var(--hdn-space-sm);
	padding: 0;
	list-style: none;
}

.hdn-vault-stats__item {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--hdn-space-3xs) var(--hdn-space-2xs);
	align-items: baseline;
}

.hdn-vault-stats__label {
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
	letter-spacing: var(--hdn-tracking-wide);
	text-transform: uppercase;
	color: var(--hdn-accent);
}

.hdn-vault-stats__value {
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
	color: var(--hdn-muted);
	font-variant-numeric: tabular-nums;
}

.hdn-vault-stats__bar {
	grid-column: 1 / -1;
	display: block;
	height: 4px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--hdn-navy-deep);
}

.hdn-vault-stats__fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--hdn-accent);
	transition: width var(--hdn-speed-slow) var(--hdn-ease-out);
}

/* --------------------------------------------------------------------------
   25.7 Leaderboard
   -------------------------------------------------------------------------- */

.hdn-leaderboard {
	margin-top: var(--hdn-space-xl);
}

.hdn-leaderboard__list {
	margin: var(--hdn-space-sm) 0 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
	border: 1px solid var(--hdn-border);
	border-radius: var(--hdn-radius-md);
	overflow: hidden;
}

.hdn-leaderboard__row {
	display: grid;
	grid-template-columns: 2.5rem 1fr auto auto;
	gap: var(--hdn-space-2xs) var(--hdn-space-sm);
	align-items: center;
	padding: var(--hdn-space-2xs) var(--hdn-space-sm);
	background: rgba(26, 31, 46, 0.5);
}

.hdn-leaderboard__row + .hdn-leaderboard__row {
	border-top: 1px solid var(--hdn-border);
}

.hdn-leaderboard__row.is-you {
	background: var(--hdn-accent-soft);
	box-shadow: inset 3px 0 0 var(--hdn-amber);
}

.hdn-leaderboard__place {
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-sm);
	color: var(--hdn-faint);
	font-variant-numeric: tabular-nums;
}

.hdn-leaderboard__name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
	color: var(--hdn-text-strong);
}

.hdn-leaderboard__rank {
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
	letter-spacing: var(--hdn-tracking-wide);
	text-transform: uppercase;
	color: var(--hdn-muted);
}

.hdn-leaderboard__count {
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-sm);
	color: var(--hdn-amber-bright);
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   25.8 Catalogue filter form
   -------------------------------------------------------------------------- */

.hdn-catalog__intro {
	margin-top: var(--hdn-space-sm);
}

.hdn-catalog__tally {
	margin: var(--hdn-space-sm) 0 0;
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
	letter-spacing: var(--hdn-tracking-wide);
	text-transform: uppercase;
	color: var(--hdn-faint);
}

.hdn-catalog__tally strong {
	color: var(--hdn-amber-bright);
	font-variant-numeric: tabular-nums;
}

.hdn-catalog-filters {
	margin: var(--hdn-space-md) 0;
	padding: var(--hdn-space-sm) var(--hdn-space-md);
	border: 1px solid var(--hdn-border);
	border-radius: var(--hdn-radius-md);
	background: rgba(26, 31, 46, 0.55);
}

.hdn-catalog-filters__row {
	display: grid;
	grid-template-columns: minmax(12rem, 2fr) minmax(9rem, 1fr) auto;
	gap: var(--hdn-space-sm);
	align-items: end;
}

.hdn-catalog-filters__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hdn-space-2xs);
}

.hdn-field {
	display: flex;
	flex-direction: column;
	gap: var(--hdn-space-3xs);
	min-width: 0;
}

.hdn-field__label {
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
	letter-spacing: var(--hdn-tracking-stamp);
	text-transform: uppercase;
	color: var(--hdn-faint);
}

.hdn-field__input {
	width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--hdn-border-strong);
	border-radius: var(--hdn-radius-sm);
	font-family: var(--hdn-font-sans);
	font-size: var(--hdn-size-sm);
	color: var(--hdn-text);
	background: var(--hdn-navy-deep);
	transition: border-color var(--hdn-speed-fast) var(--hdn-ease);
}

.hdn-field__input:focus-visible {
	border-color: var(--hdn-amber);
	outline: 2px solid var(--hdn-amber);
	outline-offset: 2px;
}

select.hdn-field__input {
	appearance: none;
	padding-right: 2rem;
	background-image: linear-gradient(45deg, transparent 50%, var(--hdn-muted) 50%),
		linear-gradient(135deg, var(--hdn-muted) 50%, transparent 50%);
	background-position: calc(100% - 1rem) 55%, calc(100% - 0.65rem) 55%;
	background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
	background-repeat: no-repeat;
}

.hdn-filters__fallback {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hdn-space-2xs);
	margin: var(--hdn-space-2xs) 0 0;
	padding: 0;
	list-style: none;
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
}

/* --------------------------------------------------------------------------
   25.9 Load more & catalogue call to action
   -------------------------------------------------------------------------- */

.hdn-loadmore__hint {
	margin: var(--hdn-space-2xs) 0 0;
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
	letter-spacing: var(--hdn-tracking-wide);
	text-transform: uppercase;
	color: var(--hdn-faint);
}

.hdn-cta {
	margin-top: var(--hdn-space-xl);
	padding: var(--hdn-space-md);
	border: 1px solid var(--hdn-accent-line);
	border-radius: var(--hdn-radius-md);
	background: linear-gradient(135deg, var(--hdn-accent-soft), transparent 70%), var(--hdn-charcoal);
}

.hdn-cta__title {
	margin: 0 0 var(--hdn-space-sm);
	font-family: var(--hdn-font-serif);
	font-size: var(--hdn-size-md);
	color: var(--hdn-text-strong);
}

/* --------------------------------------------------------------------------
   25.10 WooCommerce wrapper (registered in inc/features.php)
   -------------------------------------------------------------------------- */

.hdn-woocommerce {
	padding-block: var(--hdn-space-lg);
}

.hdn-woocommerce .woocommerce-message,
.hdn-woocommerce .woocommerce-info {
	border-top-color: var(--hdn-amber);
	background: var(--hdn-charcoal);
	color: var(--hdn-text);
}

/* --------------------------------------------------------------------------
   25.11 Breakpoints
   -------------------------------------------------------------------------- */

@media (max-width: 60rem) {
	.hdn-catalog-filters__row {
		grid-template-columns: 1fr 1fr;
	}

	.hdn-catalog-filters__actions {
		grid-column: 1 / -1;
	}
}

@media (max-width: 46rem) {
	.hdn-vault__head {
		grid-template-columns: 1fr;
	}

	.hdn-vault-gate {
		grid-template-columns: 1fr;
	}

	.hdn-catalog-filters__row {
		grid-template-columns: 1fr;
	}

	.hdn-leaderboard__row {
		grid-template-columns: 2rem 1fr auto;
	}

	.hdn-leaderboard__rank {
		grid-column: 2 / -1;
		grid-row: 2;
	}

	.hdn-grid[data-masonry] {
		grid-auto-rows: auto;
	}

	.hdn-grid[data-masonry] > .hdn-grid__item {
		grid-row-end: auto !important;
	}
}

/* --------------------------------------------------------------------------
   25.12 Reduced motion & print
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.hdn-progress__fill,
	.hdn-vault-stats__fill {
		transition: none;
	}
}

@media print {
	.hdn-catalog-filters,
	.hdn-filters,
	.hdn-loadmore,
	.hdn-cta,
	.hdn-vault-gate__actions {
		display: none !important;
	}

	.hdn-rank,
	.hdn-vault-stats,
	.hdn-leaderboard__list {
		border: 1px solid #999;
		background: none;
	}
}


/* ==========================================================================
   26. SECTION SHELLS, BODY HOOKS, SHORTCODE, VIDEO FACADE & 404
   Small rules that finish off the Phase 2 templates: the catalogue/vault
   section wrappers, the body classes the theme adds, and the markup that
   third-party plugins (Yoast breadcrumbs) inject into our layout.
   ========================================================================== */

/* --- 26.1 Catalogue & Vault section shells -------------------------------- */

.hdn-catalog,
.hdn-vault {
	position: relative;
}

.hdn-catalog::before,
.hdn-vault::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent,
		var(--hdn-line-strong, rgba(255, 255, 255, 0.16)),
		transparent
	);
	pointer-events: none;
}

/* The closing call to action under the catalogue grid. */
.hdn-catalog__cta {
	margin-top: var(--hdn-space-xl);
}

/* --- 26.2 Filter field modifiers ------------------------------------------ */

/* The free-text search box is the widest control in the filter bar. */
.hdn-field--search {
	flex: 1 1 16rem;
	min-width: 12rem;
}

/* The clearance <select> only needs to fit its longest label. */
.hdn-field--level {
	flex: 0 1 12rem;
	min-width: 9rem;
}

@media (max-width: 640px) {
	.hdn-field--search,
	.hdn-field--level {
		flex: 1 1 100%;
	}
}

/* --- 26.3 Body class hooks ------------------------------------------------
   `hdn-no-sidebar` and `hdn-visitor` are added by hiddenry_body_classes().
   They carry no visual weight on their own — they exist so child themes and
   custom CSS can target layouts without sniffing templates — but the rules
   below give them a sensible default so the hooks are never dead. */

.hdn-no-sidebar .hdn-layout--sidebar {
	grid-template-columns: minmax(0, 1fr);
}

/* Logged-out readers never see the Vault chip count animate, so keep it calm. */
.hdn-visitor .hdn-rank-chip__dot {
	animation: none;
	opacity: 0.55;
}

/* --- 26.4 Yoast SEO breadcrumbs ------------------------------------------- */

.hdn-breadcrumbs-wrap {
	width: min(100% - 2 * var(--hdn-gutter, 1.25rem), var(--hdn-container, 76rem));
	margin-inline: auto;
	padding-top: var(--hdn-space-md);
}

.hdn-breadcrumbs-wrap .hdn-breadcrumbs {
	margin: 0;
}

/* --- 26.5 Admin: missing media notice -------------------------------------
   Printed inside the entry meta box when a card image URL cannot be resolved.
   Scoped so it never leaks into the front end. */

.wp-admin .hdn-admin-missing {
	display: inline-block;
	margin-top: 6px;
	padding: 2px 8px;
	border-radius: 3px;
	background: #fbeaea;
	color: #8a1f1f;
	font-size: 12px;
}


/* --- 26.6 [hiddenry_entries] shortcode ------------------------------------
   The grid an editor can drop into any page or post. It reuses .hdn-grid, so
   only the wrapper and its optional heading need rules of their own. */

.hdn-shortcode--entries {
	margin-block: var(--hdn-space-lg);
	clear: both;
}

.hdn-shortcode__title {
	margin: 0 0 var(--hdn-space-sm);
}

.hdn-shortcode--entries .hdn-grid {
	margin: 0;
}




/* --- 26.7 YouTube facade ---------------------------------------------------
   single.php renders a poster + play button instead of an iframe. js/app.js
   (initVideoFacades) replaces the facade with the real player on the first
   click, so no third party request is made until the reader asks for one. */

.hdn-video__facade {
	position: absolute;
	inset: 0;
	cursor: pointer;
	background: var(--hdn-navy-deep);
}

.hdn-video__facade img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.55;
	filter: saturate(0.7) contrast(1.05);
	transition: opacity var(--hdn-speed) var(--hdn-ease), transform var(--hdn-speed-slow) var(--hdn-ease-out);
}

.hdn-video__facade:hover img,
.hdn-video__facade:focus-within img {
	opacity: 0.75;
	transform: scale(1.02);
}

.hdn-video__facade .hdn-video__placeholder {
	background:
		repeating-linear-gradient(0deg, rgba(232, 220, 200, 0.022) 0 2px, transparent 2px 4px),
		radial-gradient(60% 90% at 50% 45%, rgba(11, 15, 20, 0.55), rgba(7, 10, 14, 0.85));
}

/* The play control is a real button so the keyboard reaches it. */
button.hdn-video__play {
	padding: 0;
	font: inherit;
	cursor: pointer;
	background: rgba(0, 0, 0, 0.45);
}

.hdn-video__facade:hover button.hdn-video__play,
button.hdn-video__play:hover,
button.hdn-video__play:focus-visible {
	transform: scale(1.08);
	box-shadow: var(--hdn-glow);
}

.hdn-video__facade.is-playing {
	cursor: default;
	background: #000;
}

.hdn-video__facade.is-playing iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {

	.hdn-video__facade img,
	button.hdn-video__play {
		transition: none;
	}

	.hdn-video__facade:hover img,
	.hdn-video__facade:focus-within img {
		transform: none;
	}
}




/* --- 26.8 404 — classification error ---------------------------------------
   404.php reuses the page header, the rule, the search form and the entry
   grid, so only the wrapper, the button row and the search block need rules. */

.hdn-404,
.hdn-comments__inner {
	display: flow-root;
}

.hdn-404__header {
	max-width: 56ch;
}

.hdn-404__search {
	display: grid;
	gap: var(--hdn-space-2xs);
	max-width: 34rem;
	margin-block: var(--hdn-space-md);
}

.hdn-404__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hdn-space-xs);
	margin-block: var(--hdn-space-md);
}

.hdn-404__title {
	margin-block: var(--hdn-space-md) var(--hdn-space-sm);
}

.hdn-404__grid {
	margin-bottom: var(--hdn-space-lg);
}




/* ==========================================================================
   27. PHASE 3 — FLEXIBLE MEDIA, VERDICT, SOURCES, DISCOVERY, SHARE, MOBILE
   --------------------------------------------------------------------------
   Everything added in 1.1.0. The rules below deliberately reuse the existing
   tokens and the existing component grammar (stamps, hairlines, mono labels)
   so the new blocks read as older parts of the same archive, not as bolt-ons.
   ========================================================================== */

/* --- 27.1 Media block shells ----------------------------------------------
   template-parts/entry-media.php prints one <figure> for every media shape.
   `.hdn-video` already supplies the frame, border and caption; these rules
   only handle what changes per shape. */

.hdn-media--none {
	border-style: dashed;
	border-color: var(--hdn-border);
	background: var(--hdn-bg-sunken);
}

.hdn-media--none .hdn-video__play {
	opacity: 0.25;
	font-size: var(--hdn-size-xl);
	color: var(--hdn-muted);
}

/* A still-only entry has no 16/9 contract to honour, so let the plate breathe. */
.hdn-media--image {
	background: var(--hdn-bg-sunken);
}

.hdn-media__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- 27.2 The plate (image-led entry) -------------------------------------
   One large atmospheric still, a light veil for legibility, the hidden part
   sitting on the image and an archival plate stamp in the corner. */

.hdn-plate {
	position: relative;
	display: block;
	min-height: clamp(16rem, 46vw, 30rem);
	overflow: hidden;
}

.hdn-plate__image {
	display: block;
	width: 100%;
	height: 100%;
	min-height: clamp(16rem, 46vw, 30rem);
	object-fit: cover;
	filter: saturate(0.82) contrast(1.04);
}

/* The veil is what keeps the quote readable over any photograph. */
.hdn-plate__veil {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		repeating-linear-gradient(0deg, rgba(232, 220, 200, 0.018) 0 2px, transparent 2px 4px),
		linear-gradient(180deg, rgba(7, 10, 14, 0.28) 0%, rgba(7, 10, 14, 0.08) 38%, rgba(7, 10, 14, 0.82) 100%);
}

.hdn-plate__quote {
	position: absolute;
	right: var(--hdn-space-md);
	bottom: var(--hdn-space-md);
	left: var(--hdn-space-md);
	max-width: 44ch;
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--hdn-font-serif);
	font-size: clamp(1.05rem, 2.4vw, var(--hdn-size-xl));
	line-height: var(--hdn-leading-snug);
	color: var(--hdn-paper);
	text-shadow: 0 1px 18px rgba(7, 10, 14, 0.75);
}

.hdn-plate__quote p {
	margin: 0;
}

.hdn-plate__stamp {
	position: absolute;
	top: var(--hdn-space-sm);
	left: var(--hdn-space-sm);
	padding: 0.28em 0.7em;
	border: 1px solid var(--hdn-accent-line);
	border-radius: var(--hdn-radius-xs);
	background: rgba(7, 10, 14, 0.62);
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
	letter-spacing: var(--hdn-tracking-stamp);
	text-transform: uppercase;
	color: var(--hdn-accent);
	backdrop-filter: blur(2px);
}

/* --- 27.3 Supporting plates (media_type = both) ---------------------------
   Stills filed alongside a reel. Numbered, quiet, never competing with it. */

.hdn-plate-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
	gap: var(--hdn-space-2xs);
	padding: var(--hdn-space-2xs);
	border-top: 1px solid var(--hdn-border);
	background: var(--hdn-bg-sunken);
}

.hdn-plate-grid__item {
	position: relative;
	margin: 0;
	border: 1px solid var(--hdn-border);
	border-radius: var(--hdn-radius-xs);
	background: var(--hdn-navy-deep);
	overflow: hidden;
}

.hdn-plate-grid__image {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	opacity: 0.88;
	transition: opacity var(--hdn-speed) var(--hdn-ease);
}

.hdn-plate-grid__item:hover .hdn-plate-grid__image {
	opacity: 1;
}

.hdn-plate-grid__caption {
	padding: 0.4em 0.7em;
	border-top: 1px solid var(--hdn-border);
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
	letter-spacing: var(--hdn-tracking-stamp);
	text-transform: uppercase;
	color: var(--hdn-faint);
}

/* --- 27.4 The hidden part (pull quote before the collect card) ------------ */

.hdn-insight {
	position: relative;
	margin-block: var(--hdn-space-xl);
	padding: var(--hdn-space-lg) var(--hdn-space-lg) var(--hdn-space-md);
	border-top: 1px solid var(--hdn-accent-line);
	border-bottom: 1px solid var(--hdn-accent-line);
	background: linear-gradient(180deg, var(--hdn-accent-soft), transparent 70%);
}

.hdn-insight__quote {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--hdn-font-serif);
	font-size: clamp(1.2rem, 3vw, var(--hdn-size-2xl));
	line-height: var(--hdn-leading-snug);
	color: var(--hdn-text-strong);
	text-wrap: balance;
}

.hdn-insight__quote p {
	margin: 0;
}

.hdn-insight__quote p::before {
	content: "\201C";
	margin-right: 0.08em;
	color: var(--hdn-accent);
}

.hdn-insight__quote p::after {
	content: "\201D";
	margin-left: 0.04em;
	color: var(--hdn-accent);
}

.hdn-insight__source {
	margin-top: var(--hdn-space-sm);
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
	letter-spacing: var(--hdn-tracking-stamp);
	text-transform: uppercase;
	color: var(--hdn-faint);
}

/* --- 27.5 Member verdict --------------------------------------------------
   Two restrained buttons inside the collect card. No thumbs, no colour
   explosion — the active side is marked with the pillar accent alone. */

.hdn-verdict {
	width: 100%;
	max-width: 34rem;
	margin-top: var(--hdn-space-sm);
	padding-top: var(--hdn-space-sm);
	border-top: 1px solid var(--hdn-border);
	text-align: center;
}

.hdn-verdict__label {
	margin: 0 0 var(--hdn-space-2xs);
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
	letter-spacing: var(--hdn-tracking-stamp);
	text-transform: uppercase;
	color: var(--hdn-faint);
}

.hdn-verdict__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hdn-space-2xs);
	justify-content: center;
}

.hdn-verdict__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	min-height: 2.75rem; /* 44px touch target. */
	padding: 0.55em 1.1em;
	border: 1px solid var(--hdn-border-strong);
	border-radius: var(--hdn-radius-sm);
	background: var(--hdn-bg-raised);
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
	letter-spacing: var(--hdn-tracking-stamp);
	text-transform: uppercase;
	color: var(--hdn-muted);
	cursor: pointer;
	transition:
		border-color var(--hdn-speed) var(--hdn-ease),
		color var(--hdn-speed) var(--hdn-ease),
		background-color var(--hdn-speed) var(--hdn-ease);
}

.hdn-verdict__btn:hover,
.hdn-verdict__btn:focus-visible {
	border-color: var(--hdn-accent-line);
	color: var(--hdn-text-strong);
}

.hdn-verdict__btn.is-active {
	border-color: var(--hdn-accent);
	background: var(--hdn-accent-soft);
	color: var(--hdn-accent);
}

.hdn-verdict__btn--down.is-active {
	border-color: var(--hdn-border-strong);
	background: var(--hdn-bg-sunken);
	color: var(--hdn-text-strong);
}

.hdn-verdict__count {
	padding-left: 0.6em;
	border-left: 1px solid var(--hdn-border);
	font-variant-numeric: tabular-nums;
	color: var(--hdn-faint);
}

.hdn-verdict__btn.is-active .hdn-verdict__count {
	color: inherit;
}

.hdn-verdict__note,
.hdn-verdict__prompt {
	margin: var(--hdn-space-2xs) 0 0;
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
	letter-spacing: 0.1em;
	color: var(--hdn-faint);
}

/* While the request is in flight the panel stays usable but visibly pending. */
.hdn-verdict.is-saving {
	opacity: 0.62;
}

.hdn-verdict--locked {
	border-top-color: var(--hdn-border);
}

.hdn-verdict__login {
	color: var(--hdn-accent);
	text-decoration: none;
	border-bottom: 1px solid var(--hdn-accent-line);
}

.hdn-verdict__login:hover {
	color: var(--hdn-accent-bright, var(--hdn-amber-bright));
}

/* --- 27.6 Sources & further reading (collapsible appendix) ---------------- */

.hdn-sources {
	margin-block: var(--hdn-space-lg);
	border: 1px solid var(--hdn-border);
	border-radius: var(--hdn-radius-sm);
	background: var(--hdn-bg-sunken);
}

.hdn-sources__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hdn-space-2xs);
	min-height: 2.75rem;
	padding: var(--hdn-space-2xs) var(--hdn-space-sm);
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
	letter-spacing: var(--hdn-tracking-stamp);
	text-transform: uppercase;
	color: var(--hdn-muted);
	cursor: pointer;
	list-style: none;
}

.hdn-sources__summary::-webkit-details-marker {
	display: none;
}

.hdn-sources__summary:hover {
	color: var(--hdn-accent);
}

.hdn-sources__count {
	padding: 0.16em 0.55em;
	border: 1px solid var(--hdn-border-strong);
	border-radius: var(--hdn-radius-xs);
	font-variant-numeric: tabular-nums;
	color: var(--hdn-faint);
}

.hdn-sources[open] .hdn-sources__summary {
	border-bottom: 1px solid var(--hdn-border);
	color: var(--hdn-accent);
}

.hdn-sources__list {
	margin: 0;
	padding: var(--hdn-space-sm) var(--hdn-space-sm) var(--hdn-space-sm) calc(var(--hdn-space-sm) + 1.4em);
	font-size: var(--hdn-size-sm);
	color: var(--hdn-muted);
}

.hdn-sources__item + .hdn-sources__item {
	margin-top: var(--hdn-space-3xs);
}

.hdn-sources__link {
	color: var(--hdn-text);
	text-decoration: none;
	border-bottom: 1px solid var(--hdn-border-strong);
}

.hdn-sources__link:hover {
	color: var(--hdn-accent);
	border-bottom-color: var(--hdn-accent-line);
}

/* --- 27.7 Related files --------------------------------------------------- */

.hdn-related-files {
	padding-block: var(--hdn-space-lg) 0;
	border-top: 1px solid var(--hdn-border);
}

.hdn-related-files__head {
	margin-bottom: var(--hdn-space-md);
}

.hdn-related-files__title {
	margin: 0;
	font-size: var(--hdn-size-lg);
}

.hdn-related-files__note {
	margin: var(--hdn-space-3xs) 0 0;
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
	letter-spacing: 0.1em;
	color: var(--hdn-faint);
}

/* --- 27.8 Circulate this file (share) ------------------------------------- */

.hdn-share {
	margin-block: var(--hdn-space-lg);
	padding: var(--hdn-space-md);
	border: 1px solid var(--hdn-border);
	border-radius: var(--hdn-radius-sm);
	background: var(--hdn-bg-raised);
}

.hdn-share__title {
	margin: 0 0 var(--hdn-space-sm);
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
	font-weight: 500;
	letter-spacing: var(--hdn-tracking-stamp);
	text-transform: uppercase;
	color: var(--hdn-faint);
}

.hdn-share__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--hdn-space-sm);
}

.hdn-share__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hdn-space-3xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hdn-share__link {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.5em 0.9em;
	border: 1px solid var(--hdn-border-strong);
	border-radius: var(--hdn-radius-xs);
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
	letter-spacing: var(--hdn-tracking-stamp);
	text-transform: uppercase;
	color: var(--hdn-muted);
	text-decoration: none;
	transition:
		border-color var(--hdn-speed) var(--hdn-ease),
		color var(--hdn-speed) var(--hdn-ease);
}

.hdn-share__link:hover,
.hdn-share__link:focus-visible {
	border-color: var(--hdn-accent-line);
	color: var(--hdn-accent);
}

.hdn-share__tools {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hdn-space-3xs);
}

.hdn-share__copy,
.hdn-share__native {
	min-height: 2.75rem;
	padding: 0.5em 0.9em;
	border: 1px solid var(--hdn-accent-line);
	border-radius: var(--hdn-radius-xs);
	background: var(--hdn-accent-soft);
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
	letter-spacing: var(--hdn-tracking-stamp);
	text-transform: uppercase;
	color: var(--hdn-accent);
	cursor: pointer;
	transition: background-color var(--hdn-speed) var(--hdn-ease);
}

.hdn-share__copy:hover,
.hdn-share__native:hover {
	background: var(--hdn-bg-sunken);
}

/*
 * The payload textarea carries the exact card text. It must stay in the DOM and
 * remain selectable for the execCommand fallback, so it is moved out of sight
 * rather than hidden with display:none.
 */
.hdn-share__payload {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	border: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	opacity: 0;
}

/* --- 27.9 Closing prompt -------------------------------------------------- */

.hdn-entry-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--hdn-space-sm);
	margin-block: var(--hdn-space-lg) var(--hdn-space-2xl);
	padding: var(--hdn-space-md);
	border: 1px solid var(--hdn-border);
	border-left: 2px solid var(--hdn-accent-line);
	border-radius: var(--hdn-radius-sm);
	background: var(--hdn-bg-sunken);
}

.hdn-entry-cta__heading {
	margin: 0;
	font-family: var(--hdn-font-serif);
	font-size: var(--hdn-size-md);
	color: var(--hdn-text-strong);
}

.hdn-entry-cta__text {
	max-width: 52ch;
	margin: var(--hdn-space-3xs) 0 0;
	font-size: var(--hdn-size-sm);
	color: var(--hdn-muted);
}

.hdn-entry-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hdn-space-2xs);
}

/* --- 27.10 Members-only annotation gate ----------------------------------- */

.hdn-comments__gate {
	margin-top: var(--hdn-space-md);
	padding: var(--hdn-space-md);
	border: 1px dashed var(--hdn-border-strong);
	border-radius: var(--hdn-radius-sm);
	background: var(--hdn-bg-sunken);
	text-align: center;
}

.hdn-comments__gate-line {
	margin: 0;
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hdn-faint);
}

.hdn-comments__gate-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hdn-space-2xs);
	justify-content: center;
	margin: var(--hdn-space-sm) 0 0;
}

.hdn-comments__gate-register {
	align-self: center;
	font-family: var(--hdn-font-mono);
	font-size: var(--hdn-size-2xs);
	letter-spacing: var(--hdn-tracking-stamp);
	text-transform: uppercase;
	color: var(--hdn-muted);
	text-decoration: none;
	border-bottom: 1px solid var(--hdn-border-strong);
}

.hdn-comments__gate-register:hover {
	color: var(--hdn-accent);
}

/* --- 27.11 Sticky collect bar (mobile only) -------------------------------
   Desktop readers always have the collect card in reach, so the bar is a
   narrow-viewport affordance only. js/app.js reveals it once the real collect
   panel scrolls away and retires it the moment the card is collected. */

.hdn-stickybar {
	display: none;
}

.hdn-stickybar[hidden] {
	display: none !important;
}

@media (max-width: 782px) {
	.hdn-stickybar:not([hidden]):not(.is-collected) {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: var(--hdn-z-sticky);
		display: block;
		border-top: 1px solid var(--hdn-accent-line);
		background: rgba(10, 14, 23, 0.92);
		backdrop-filter: blur(10px);
		animation: hdn-stickybar-in var(--hdn-speed) var(--hdn-ease-out) both;
	}

	.hdn-stickybar__inner {
		padding:
			var(--hdn-space-2xs)
			var(--hdn-gutter)
			calc(var(--hdn-space-2xs) + env(safe-area-inset-bottom, 0px));
	}

	.hdn-stickybar__btn {
		width: 100%;
		min-height: 2.75rem;
		justify-content: center;
	}

	/* Keep the last block clear of the bar. */
	.hdn-entry-cta {
		margin-bottom: calc(var(--hdn-space-3xl) + env(safe-area-inset-bottom, 0px));
	}
}

@keyframes hdn-stickybar-in {
	from {
		transform: translateY(100%);
	}

	to {
		transform: translateY(0);
	}
}

/* --- 27.12 Narrow-viewport refinements -----------------------------------
   Touch targets, the intuition test and the new panels on small screens. */

@media (max-width: 640px) {
	/* One tap zone per row: labels stop truncating and stay >= 44px. */
	.hdn-verdict__actions,
	.hdn-share__tools {
		flex-direction: column;
	}

	.hdn-verdict__btn,
	.hdn-share__copy,
	.hdn-share__native {
		justify-content: space-between;
		width: 100%;
	}

	.hdn-share__row {
		flex-direction: column;
		align-items: stretch;
	}

	.hdn-share__list {
		gap: var(--hdn-space-3xs);
	}

	.hdn-share__item,
	.hdn-share__link {
		flex: 1 1 auto;
		justify-content: center;
	}

	/* The intuition test: full-width answers, generous tap zones. */
	.hdn-intuition__options {
		grid-template-columns: minmax(0, 1fr);
	}

	.hdn-choice {
		min-height: 2.75rem;
		align-items: flex-start;
	}

	.hdn-insight,
	.hdn-share,
	.hdn-entry-cta {
		padding-inline: var(--hdn-space-sm);
	}

	.hdn-plate__quote {
		right: var(--hdn-space-sm);
		bottom: var(--hdn-space-sm);
		left: var(--hdn-space-sm);
	}

	.hdn-entry-cta {
		flex-direction: column;
		align-items: stretch;
	}

	.hdn-entry-cta__link {
		justify-content: center;
	}

	.hdn-plate-grid {
		grid-template-columns: repeat(auto-fill, minmax(min(9rem, 100%), 1fr));
	}
}

/*
 * Coarse pointers get the 44px floor everywhere, including inside prose links
 * that double as controls.
 */
@media (hover: none) and (pointer: coarse) {
	.hdn-verdict__btn,
	.hdn-share__link,
	.hdn-share__copy,
	.hdn-share__native,
	.hdn-sources__summary,
	.hdn-stickybar__btn {
		min-height: 2.75rem;
	}
}

/* --- 27.13 Reduced motion & print ---------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.hdn-stickybar:not([hidden]) {
		animation: none;
	}

	.hdn-plate-grid__image,
	.hdn-verdict__btn,
	.hdn-share__link,
	.hdn-share__copy {
		transition: none;
	}
}

@media print {
	.hdn-stickybar,
	.hdn-verdict,
	.hdn-share,
	.hdn-entry-cta,
	.hdn-comments__gate {
		display: none !important;
	}

	/* An appendix is worth printing — force it open. */
	.hdn-sources {
		border-color: #999;
	}

	.hdn-sources__list {
		display: block !important;
	}

	.hdn-plate__veil {
		display: none;
	}

	.hdn-plate__quote {
		position: static;
		color: #000;
		text-shadow: none;
	}
}