/*
Theme Name: Daily Nous
Description: Minimal Daily Nous child presentation layer for the maintained Anima LT parent theme.
Author: Daily Nous
Version: 0.19.70
Template: anima-lt
Text Domain: dailynous-anima
*/

/* Open Sans, self-hosted (assets/fonts/open-sans.woff2, license in
   assets/fonts/OPEN-SANS-LICENSE.txt — SIL Open Font License 1.1, free to
   redistribute), matching the same pattern Anima LT itself already uses
   for its own bundled fonts. A single variable-font file covers 400-700;
   confirmed via Wayback evidence that classic DN used Open Sans (see
   WAYBACK-DESIGN-ARCHAEOLOGY-SOURCE-EVIDENCE-2026-09-18.md). No remote
   font requests — nothing loaded from Google's servers at runtime. */
@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url("assets/fonts/open-sans.woff2") format("woff2");
}

@font-face {
	font-family: "Space Grotesk";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("../anima-lt/assets/fonts/space-grotesk.woff2") format("woff2");
}

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../anima-lt/assets/fonts/montserrat.woff2") format("woff2");
}

@font-face {
	font-family: "Quattrocento Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../anima-lt/assets/fonts/quattrocento-sans-400.woff2") format("woff2");
}

@font-face {
	font-family: "Quattrocento Sans";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../anima-lt/assets/fonts/quattrocento-sans-700.woff2") format("woff2");
}

@font-face {
	font-family: "Lora";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../anima-lt/assets/fonts/lora.woff2") format("woff2");
}

/* Justin's review (2026-09-24): "the standard typeface throughout the
   site... slightly smaller." Anima LT itself already anticipated a base
   scale-down (theme.json injects --font-size-base: 0.9375) but never
   actually wires that variable into anything -- confirmed unused via a
   full grep of the parent theme's CSS. Setting the real root font-size
   directly at the same 93.75% factor honors that original intent while
   actually taking effect. Percentage (not a fixed px value) so it still
   respects a visitor's own browser font-size preference. Every rem-based
   size already used throughout this stylesheet (card excerpts, dates,
   rail modules, etc.) scales proportionally from this one change. */
html {
	font-size: var(--dn-site-font-scale, 93.75%);
}

/* Deliberately small design foundation. Content, blocks, and normal visual
   settings remain owned by the WordPress Site Editor and the parent theme. */
:root {
	--dn-paper: #fff;
	--dn-ink: #111;
	--dn-rule: #d9d9d9;
	--dn-focus: #3979b9;
	/* Font/color audit (2026-09-23): the muted-secondary-text grey (page
	   dates, bylines, comment meta, icon colors, connector text) had
	   drifted into five near-duplicate hardcoded values scattered across
	   this file (#555 x7, plus one-off #666/#767676/#888/#a8a8a8) with no
	   single source of truth -- unlike --dn-ink/--dn-paper/--dn-rule/
	   --dn-focus above, which already had one. #555 was the dominant,
	   clearly-intentional value; promoted it to a real variable and
	   folded the one genuine duplicate (#666, the house-ad tagline) into
	   it. Left #767676 (disabled-state text), #888 (a small inline
	   glyph), and #a8a8a8 (deliberately lighter icon-count metadata)
	   alone -- each serves a distinct enough role that consolidating
	   them would lose a real (if subtle) distinction, not just remove
	   duplication. */
	--dn-muted: #555;
	--dn-rail-primary-weight: 500;
	--dn-rail-secondary-weight: 300;
	/* Rail-label accent colors -- ported from felt-poc after reviewing its
	   POC work (2026-09-20): a restrained colored left-border per module
	   type, not the fancier prism/shadow "flare" variants POC also has on
	   offer (kept those out; DN's aesthetic reads better quiet). Two
	   independent POC efforts (this one and Codex's now-disabled UAT
	   dn-uat-presentation.php) arrived at the same idea independently --
	   worth trusting as validated, not just an experiment. */
	--dn-accent-heap: #159767;
	--dn-accent-comments: #d7823e;
	--dn-accent-archives: #6b5b95;
	/* "Soft" variants are the readable-on-black hover/focus color for link
	   text inside a rail label (black background). Owner request
	   2026-09-22: once section colors become admin-selectable (see
	   dailynous_anima_section_colors_css() in functions.php, which
	   overrides the three base custom properties above via an inline
	   <style>), the soft variant must follow automatically rather than
	   staying a separately hardcoded color that could end up wrong/
	   unreadable against whatever base color gets picked. Derived with
	   color-mix() from each base color at the point of definition, so
	   overriding the base variable anywhere earlier in the cascade
	   (:root, inline admin <style>, wherever) automatically recalculates
	   these too -- no PHP-side color math, no second stored value. */
	--dn-accent-heap-soft: color-mix(in srgb, var(--dn-accent-heap) 55%, white);
	--dn-accent-comments-soft: color-mix(in srgb, var(--dn-accent-comments) 55%, white);
	--dn-accent-archives-soft: color-mix(in srgb, var(--dn-accent-archives) 55%, white);
	--dn-accent-default-soft: color-mix(in srgb, var(--dn-focus) 55%, white);
	--dn-primary-font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--dn-secondary-font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
	/* Anima LT's parent stylesheet has `a:hover, a:focus { color:
	   var(--theme-links-color) }` but never defines that custom property
	   anywhere (not in its own theme.json, not in ours, not in any
	   generated inline styles) -- an invalid/undefined value on every
	   hovered or focused link theme-wide, observed as card titles turning
	   white/disappearing on hover or click. Defining it ourselves, matching
	   the resting ink color, so hover/focus never shift color at all (the
	   card hover effect is a geometry-only overlay by design -- no
	   headline color shift). */
	--theme-links-color: var(--dn-ink);
}

body {
	background: var(--dn-paper);
	color: var(--dn-ink);
	/* Anima LT's Style Manager applies typography via
	   var(--current-font-family) through a blanket `*` selector (same
	   mechanism as the nav-uppercase fix), so the custom property itself
	   needs overriding, not just `font-family` directly. */
	--current-font-family: var(--dn-primary-font-family);
	font-family: var( --current-font-family );
	/* Anima LT sets `overflow: hidden auto` on body. Keep the intended
	   horizontal clipping without making body a vertical scroll container;
	   `overflow-x: hidden` plus `overflow-y: visible` computes Y back to
	   auto, so use `clip` on the X axis. */
	overflow-x: clip;
	overflow-y: visible;
}

/* Homepage/archive feed "Load more" — a single, conservative, dark button
   in place of numbered pagination, matching legacy evidence (a dark LOAD
   MORE control, not an elaborate infinite-scroll treatment). In-place
   accumulation (append, not replace) via assets/js/load-more.js, with the
   real href left in the markup as a no-JS fallback (see functions.php,
   dailynous_anima_enqueue_load_more, and templates/front-page.html /
   archive.html, where enhancedPagination is deliberately left off). */
.dn-load-more .wp-block-query-pagination-next {
	background: var(--dn-ink);
	color: var(--dn-paper);
	display: inline-block;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .04em;
	padding: .7rem 1.5rem;
	text-decoration: none;
	text-transform: uppercase;
}

.dn-load-more .wp-block-query-pagination-next:hover,
.dn-load-more .wp-block-query-pagination-next:focus-visible {
	background: var(--dn-focus);
	color: var(--dn-paper);
	-webkit-text-fill-color: var(--dn-paper);
}

.dn-load-more .wp-block-query-pagination-next[aria-busy="true"] {
	cursor: progress;
	opacity: .7;
}

/* Newly appended cards fade/slide in; scroll position itself needs no
   special handling since accumulation never moves or removes anything
   already on screen. */
.dn-load-more-enter {
	opacity: 0;
	transform: translateY(.5rem);
	transition: opacity .35s ease, transform .35s ease;
}

.dn-load-more-enter-active {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.dn-load-more-enter {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Screen-reader-only live region announcing how many stories were added
   (assets/js/load-more.js) -- standard visually-hidden pattern, not
   scoped to this feature alone in case it's reused elsewhere later. */
.dn-visually-hidden {
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

a {
	color: inherit;
	text-decoration-color: color-mix(in srgb, currentColor 38%, transparent);
	text-underline-offset: .13em;
}

a:hover,
a:focus-visible {
	text-decoration-thickness: .12em;
}

a:focus-visible {
	outline: 3px solid var(--dn-focus);
	outline-offset: 3px;
}

/* Link affordance review (owner request, 2026-09-21/22): inline links
   inside actual article prose had no child-theme color rule at all --
   the base `a { color: inherit }` above makes them render in plain body
   ink with just an underline, indistinguishable in color from
   surrounding text except for that underline. That doesn't match "the
   old Daily Nous light-blue convention" the review asked to check
   against. Fix: color inline content links with `--dn-focus`, the
   theme's own already-established "Daily Nous blue" (same value as
   theme.json's accent-blue swatch, already used for focus rings/rail
   accents/comment-link hover elsewhere) -- reusing the existing token
   rather than inventing a new blue. Scoped to `.wp-block-post-content`
   specifically so it doesn't touch titles, nav, cards, or rails, which
   each already have their own deliberate treatment reviewed elsewhere
   this session. Underline stays exactly as Anima's own default already
   renders it (no change needed there); hover gets the usual extra
   thickness for free via the a:hover rule above. */
.wp-block-post-content a {
	color: var(--dn-focus);
}

/* Bug found 2026-09-23 (owner report on the Recent Comments hover,
   traced further): Anima LT's parent stylesheet has a blanket
   `a:hover, a:focus { color: var(--theme-links-color);
   text-decoration-color: var(--theme-links-color); }`. We had to define
   --theme-links-color as var(--dn-ink) (black) earlier this session to
   fix a different bug (undefined variable made hover/focus text
   disappear). Side effect: any link that changes to a color on hover
   without also restating text-decoration-color gets its underline
   silently forced back to black by that parent rule, even while the
   text itself correctly turns blue -- a visible color/underline
   mismatch. Explicit currentColor here (and everywhere else this
   pattern recurs, below) overrides the parent's forced black. */
.wp-block-post-content a:hover,
.wp-block-post-content a:focus-visible {
	color: var(--dn-focus);
	text-decoration-color: currentColor;
}

/* Links should respond immediately enough to feel intentional, especially
   in the dense navigation/rail areas. Keep the transition short rather than
   removing the state change; reduced-motion users get no animation below. */
.dn-site-header a,
.dn-site-footer a,
.dn-rail-module a,
.wp-block-post-title a {
	transition: color .08s linear, background-color .08s linear,
		text-decoration-color .08s linear;
}

@media (prefers-reduced-motion: reduce) {
	.dn-site-header a,
	.dn-site-footer a,
	.dn-rail-module a,
	.wp-block-post-title a {
		transition: none;
	}
}

.wp-block-post-title a,
.wp-block-query .wp-block-post-title a,
.wp-block-post-featured-image a {
	text-decoration: none;
}

/* Anima LT's own style.css (not this child theme) applies a decorative
   gradient-text-clip effect to nearly every h1-h3 link on hover/focus:
   `:is(h1,h2,h3):not(.nb-card__title,.site-title) a:is(:hover,:focus)`
   with `background-clip: text` + `-webkit-text-fill-color: transparent`,
   reading its color from `--highlight-text-color-start`/`-end`. Daily
   Nous never defines those custom properties, so the gradient renders
   fully transparent -- the title doesn't just lose contrast, the text is
   genuinely invisible on hover/focus (confirmed via computed style: color
   is a normal ink value, but -webkit-text-fill-color is
   rgba(0,0,0,0)). `.wp-block-post-title` was never added to Anima's own
   exclusion list alongside `.nb-card__title`/`.site-title`, so this fires
   on every story-card title. Cancelling it here rather than inventing
   fake highlight colors the design was never meant to have. Selector
   matches Anima's own `:is(h1,h2,h3)` shape so this wins regardless of
   which heading level the post-title block renders as, and ties Anima's
   rule on specificity -- source order (this child stylesheet loads after
   the parent's) breaks the tie in this rule's favor, no !important
   needed. */
:is(h1, h2, h3).wp-block-post-title a:hover,
:is(h1, h2, h3).wp-block-post-title a:focus {
	background-image: none;
	-webkit-text-fill-color: currentColor;
}

.wp-block-post-template > li {
	border-bottom: 1px solid var(--dn-rule);
	padding-block: clamp(1rem, 2vw, 1.75rem);
	position: relative;
	transition: background-color .25s, color .25s;
}

/* Justin's review (2026-09-23, item A): "there was a greater difference
   in weight between the post titles (heavier) and the excerpt, date,
   and like/comment info (all lighter)" on OLD. The title is already
   bold (700, inherited from the theme's heading style); lightening the
   supporting text below widens that gap to match. */
.wp-block-post-template .wp-block-post-excerpt,
.wp-block-post-template .wp-block-post-date {
	font-weight: 300;
}

/* Justin's review (2026-09-23, item 14): "the typeface for the post
   excerpt on the content cards... slightly smaller." Gotcha: this
   block previously carried a `"fontSize":"small"` attribute in
   front-page.html, which renders as class `has-small-font-size` --
   WordPress's own global stylesheet declares that class's font-size
   with `!important`, which no theme-CSS specificity can beat without
   also using `!important`. Removed the attribute from the block
   instead (cleaner than fighting `!important` with more `!important`),
   so this plain rule is now the only thing setting its size. Same
   gotcha applied to the post-date block below for item 15. */
.wp-block-post-template .wp-block-post-excerpt {
	font-size: .8rem;
}

/* Justin's review (2026-09-23, item 15): "the typeface for the date...
   smaller and moved to below the excerpt, to the left of the likes and
   comments indicators." The date block moved in front-page.html into
   a shared row with .dn-card-engagement (see that file); this sizes it
   down and resets the standalone-paragraph spacing both blocks
   normally carry, since they're sharing one row now instead of each
   sitting on its own line. (Also had its own `"fontSize":"small"`
   attribute removed in front-page.html -- see the !important note
   above.) */
.dn-card-footer {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-top: .5rem;
}

.dn-card-footer .wp-block-post-date {
	font-size: .72rem;
	margin: 0;
}

.dn-card-footer .dn-card-engagement {
	margin: 0;
}

/* Icon-only engagement line (owner direction 2026-09-22): heart + like
   count, speech bubble + comment count, no words. Sits at the bottom of
   each card (see template block order) rather than between title and
   date. No hover-color handling needed here -- card hover stays a
   restrained outline now (see below), not a background invert, so this
   text never sits on a dark background.

   Font (owner follow-up, same day): a "cuter" secondary font, reusing
   whatever's already on the site rather than adding a new one. Anima LT's
   own theme.json designates Space Grotesk as its heading font, and it's
   already self-hosted at the parent theme's assets/fonts/space-grotesk.woff2
   -- no new font load, and it reads more geometric/playful than the Open
   Sans body copy, so it differentiates the count without a new brand
   decision. Setting `--current-font-family` (not just `font-family`)
   because Anima's Style Manager plugin applies typography through a
   blanket `*{font-family:var(--current-font-family)}` rule that beats a
   plain `font-family` declaration regardless of selector specificity --
   same override pattern used throughout this file for color/size. */
.dn-card-engagement {
	--current-font-family: var(--dn-secondary-font-family);
	--current-font-size: var(--dn-card-meta-size, .58rem);
	align-items: center;
	color: #a8a8a8;
	display: flex;
	font-family: var( --current-font-family );
	font-size: var(--current-font-size);
	font-variant-numeric: tabular-nums;
	gap: 1.25rem;
	letter-spacing: .01em;
	margin: .5rem 0 0;
	padding-left: .2rem;
}

.dn-card-engagement__item {
	--current-font-size: inherit;
	align-items: center;
	display: inline-flex;
	font-size: inherit;
	gap: .25rem;
	line-height: inherit;
}

.dn-card-engagement__count {
	--current-font-size: inherit;
	font-size: inherit;
	line-height: inherit;
}

/* The comment item is a real <a> now (2026-09-22, owner request: comment
   icon should link to the post's own comment section), not a plain
   <span> -- override the global `a` rule's default underline so it
   still reads as restrained metadata at rest, matching the like
   button beside it; hover/focus gets the same blue used for the like
   button's active state, consistent within this one metadata row. */
a.dn-card-engagement__item {
	color: inherit;
	text-decoration: none;
}

a.dn-card-engagement__item:hover,
a.dn-card-engagement__item:focus-visible {
	color: var(--dn-focus);
}

/* The like item is a real <button> now (2026-09-22, dn-post-likes REST
   wiring), not a plain <span> -- reset browser button chrome so it reads
   identically to the plain comment-count item beside it at rest.
   Interactive states (hover/focus/pressed) are deliberately restrained:
   this is metadata, not a primary call-to-action. */
.dn-card-engagement__like {
	background: transparent !important;
	background-color: transparent !important;
	border: 0;
	color: inherit;
	cursor: pointer;
	font: inherit;
	letter-spacing: inherit;
	padding: 0;
}

.dn-card-engagement__like:hover,
.dn-card-engagement__like:focus-visible {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--dn-focus);
}

.dn-card-engagement__like[aria-pressed="true"] {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--dn-focus);
}

.dn-card-engagement__like[aria-pressed="true"] svg path {
	fill: currentColor;
}

.dn-card-engagement__like[disabled] {
	cursor: default;
	opacity: .5;
}

html[data-wp-dark-mode-active] .dn-card-engagement,
html[data-wp-dark-mode-scheme="dark"] .dn-card-engagement,
body.wp-dark-mode-active .dn-card-engagement {
	color: #a8a8a8 !important;
}

html[data-wp-dark-mode-active] .dn-card-engagement a.dn-card-engagement__item,
html[data-wp-dark-mode-scheme="dark"] .dn-card-engagement a.dn-card-engagement__item,
body.wp-dark-mode-active .dn-card-engagement a.dn-card-engagement__item,
html[data-wp-dark-mode-active] .dn-card-engagement .dn-card-engagement__like,
html[data-wp-dark-mode-scheme="dark"] .dn-card-engagement .dn-card-engagement__like,
body.wp-dark-mode-active .dn-card-engagement .dn-card-engagement__like {
	color: inherit !important;
}

html[data-wp-dark-mode-active] .dn-card-engagement a.dn-card-engagement__item:hover,
html[data-wp-dark-mode-active] .dn-card-engagement a.dn-card-engagement__item:focus-visible,
html[data-wp-dark-mode-scheme="dark"] .dn-card-engagement a.dn-card-engagement__item:hover,
html[data-wp-dark-mode-scheme="dark"] .dn-card-engagement a.dn-card-engagement__item:focus-visible,
body.wp-dark-mode-active .dn-card-engagement a.dn-card-engagement__item:hover,
body.wp-dark-mode-active .dn-card-engagement a.dn-card-engagement__item:focus-visible,
html[data-wp-dark-mode-active] .dn-card-engagement .dn-card-engagement__like:hover,
html[data-wp-dark-mode-active] .dn-card-engagement .dn-card-engagement__like:focus-visible,
html[data-wp-dark-mode-scheme="dark"] .dn-card-engagement .dn-card-engagement__like:hover,
html[data-wp-dark-mode-scheme="dark"] .dn-card-engagement .dn-card-engagement__like:focus-visible,
body.wp-dark-mode-active .dn-card-engagement .dn-card-engagement__like:hover,
body.wp-dark-mode-active .dn-card-engagement .dn-card-engagement__like:focus-visible {
	color: var(--dn-focus) !important;
}

html[data-wp-dark-mode-active] .dn-card-engagement .dn-card-engagement__like,
html[data-wp-dark-mode-active] .dn-card-engagement .dn-card-engagement__like:hover,
html[data-wp-dark-mode-active] .dn-card-engagement .dn-card-engagement__like:focus-visible,
html[data-wp-dark-mode-active] .dn-card-engagement .dn-card-engagement__like[aria-pressed="true"],
html[data-wp-dark-mode-active] .dn-card-engagement button.dn-card-engagement__like.wp-element-button {
	--current-button-background-color: transparent !important;
	--theme-button-background-color: transparent !important;
	--theme-button-hover-background-color: transparent !important;
	--wp-dark-mode-bg--current-button-background-color: transparent !important;
	--wp-dark-mode-bg--theme-button-background-color: transparent !important;
	--wp-dark-mode-bg--theme-button-hover-background-color: transparent !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border-color: transparent !important;
	box-shadow: none !important;
}

html[data-wp-dark-mode-active] .dn-card-engagement .dn-card-engagement__like::before,
html[data-wp-dark-mode-active] .dn-card-engagement .dn-card-engagement__like::after {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	content: none !important;
}

@media (prefers-reduced-motion: no-preference) {
	.dn-card-engagement__like {
		transition: color .12s ease;
	}
}

/* Card hover: matches BETA's actual live CSS exactly (fetched and read
   directly, not guessed) -- a ::before overlay, not an outline. Starts
   invisible and very slightly scaled down; on hover it fades in and grows
   just past 100% (more horizontally than vertically), reading as a subtle
   "box expansion" rather than a static ring appearing. `inset: 0` makes it
   flush with the card's own box -- same extent as the border-bottom
   divider, satisfying the "should extend to as far as the current
   separator/borders are" request precisely, from the source of truth
   rather than an approximation. */
.wp-block-post-template > li::before {
	border: 1px solid var(--dn-rule);
	content: "";
	inset: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transform: scale(.99);
	transition: .25s;
}

@media (hover: hover) and (min-width: 900px) {
	@media (prefers-reduced-motion: no-preference) {
		.wp-block-post-template > li:hover::before,
		.wp-block-post-template > li:focus-within::before {
			opacity: 1;
			transform: scale(1.035, 1.0075);
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.wp-block-post-template > li:hover::before,
		.wp-block-post-template > li:focus-within::before {
			opacity: 1;
			transform: none;
		}
	}

	/* Reverted 2026-09-22: Justin prefers the old site's restrained
	   outline on card hover/focus over the full black-card invert tried
	   2026-09-21 (removed here, not just hidden -- see git history for
	   that version if it's ever wanted again). The ::before rule above is
	   the whole effect now: a flush 1px border that fades in and grows
	   just past 100% -- no background change, so there is no dark
	   background for text to disappear against, which also makes the
	   entire earlier black-on-black investigation moot going forward.
	   Title underline on hover/focus is kept as a small, separate legacy
	   affordance (the old site did this regardless of the black-invert
	   experiment), using the normal ink color, not forced white. */
	.wp-block-post-template > li:hover .wp-block-post-title a,
	.wp-block-post-template > li:focus-within .wp-block-post-title a {
		text-decoration: underline;
		text-decoration-color: currentColor;
		text-decoration-thickness: .1em;
		text-underline-offset: .15em;
	}
}

/* Homepage: left rail / content / right rail. DOM order is content, then
   left rail, then right rail (screen-reader/keyboard order stays
   content-first at every width); grid-area repositions visually only at
   widths where that's an actual improvement. Rails relocate via area
   reassignment — never display:none — per
   docs/DAILY-NOUS-VISUAL-DESIGN-SYSTEM-LIBRARY-2026-09-18.md's responsive
   contract (POC's equivalent hid its right rail below 1199px; documented
   there as a defect, not repeated here). */
.dn-home-layout {
	display: grid;
	gap: 2.5rem;
	/* Content, then both rails, stacked full-width -- content-first order
	   for a11y/keyboard, matching the documented responsive contract.
	   Rail elements stay in the DOM at every width (relocated via
	   grid-area, never display:none) so both "railleft"/"railright" must
	   be real named areas here too; leaving them out (as a prior version
	   of this rule did with a 3-cell "content content content" row on a
	   single-column track) makes the rails fall back to CSS Grid
	   auto-placement, which was corrupting the column layout at narrow
	   widths -- reported by the owner as cards "squished to the left". */
	grid-template-areas:
		"content"
		"railleft"
		"railright";
	grid-template-columns: minmax(0, 1fr);
	margin-inline: auto;
	max-width: 1920px;
	padding: 2.5rem 1.25rem 3rem;
}

/* Justin's review (2026-09-23, item 13): comparing to OLD (a Wayback
   capture), zooming out in the browser (100% -> 90% -> 80%) grew the
   outer margins and shrank the main content column instead of the
   reverse. Root cause: browser zoom changes the *effective CSS pixel*
   width of the viewport (zooming out packs more CSS px into the same
   physical screen) -- a `max-width` in px can't tell that apart from a
   genuinely wider monitor. At 1440px, an ordinary ~1440-1512px-wide
   laptop screen hits this cap already at or near 100% zoom, so any
   further zoom-out immediately starts padding the sides instead of
   growing the (already-fluid, minmax(0,1fr)) content column. Raised
   to 1920px, comfortably covering laptop zoom-out down to ~80% before
   the same effect reappears, while still capping the content column
   at a sane maximum on genuinely huge displays (unbounded width would
   create excessively long, harder-to-read lines at 100% zoom on a 4K+
   monitor -- a separate, real typographic concern, not just this
   zoom quirk). At >=1440px both rails are already a fixed 300px each
   (see the two rules below), so the extra room goes entirely to the
   fluid content column, not the rails. */

.dn-home-layout__content {
	grid-area: content;
	min-width: 0;
}

.dn-home-layout__rail {
	min-width: 0;
}

.dn-home-layout__rail--left {
	grid-area: railleft;
}

.dn-home-layout__rail--right {
	grid-area: railright;
}

@media (min-width: 600px) {
	.dn-home-layout {
		grid-template-areas:
			"content content"
			"railleft railright";
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 2rem 1.5rem;
	}
}

/* Owner-reported gap (2026-09-22): between 600px and 900px, both rails
   were relocating to a row *after the entire content column*, not just
   after the visible fold -- since the "content" grid-area's row height
   matches its own full intrinsic height (the whole 20-card feed), that
   meant scrolling past every single story before either rail became
   reachable at all. Functionally indistinguishable from hidden, even
   though nothing used display:none, and it didn't match this project's
   own documented responsive contract (DAILY-NOUS-VISUAL-DESIGN-SYSTEM-
   LIBRARY-2026-09-18.md: "selected rail modules deliberately relocate"
   at 600-899px, not "relocate below the entire feed"). Splits that range:
   left rail now stays beside content down to 700px (there's room -- a
   ~150-220px rail plus gap still leaves >400px of comfortable reading
   width even at 700px); right rail relocates to its own full-width row
   directly below that pair, not after the whole feed. Below 700px there
   isn't reliably enough width for a rail beside content without
   squeezing it, so that narrower band keeps the full stacked order from
   the 600px rule above. */
@media (min-width: 700px) and (max-width: 899px) {
	.dn-home-layout {
		grid-template-areas:
			"railleft content"
			"railright railright";
		grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
		gap: 2rem;
	}
}

@media (min-width: 900px) {
	.dn-home-layout {
		grid-template-areas: "railleft content railright";
		grid-template-columns: minmax(150px, 200px) minmax(0, 1fr) minmax(150px, 200px);
		gap: 2rem;
	}
}

@media (min-width: 1200px) and (max-width: 1439px) {
	.dn-home-layout {
		/* Grow the exterior support/ad rails smoothly toward the contracted
		   300px creative instead of causing a sharp 1200px squeeze. Keep one
		   readable center stream until the wide two-column breakpoint. */
		grid-template-columns: clamp(190px, 22vw, 300px) minmax(0, 1fr) clamp(190px, 22vw, 300px);
		gap: 1.5rem;
		padding-inline: 1.25rem;
	}
}

@media (min-width: 1440px) {
	.dn-home-layout {
		/* Justin U: full 300px exterior ad/support rails on wide desktop. */
		grid-template-columns: 300px minmax(0, 1fr) 300px;
		gap: 2rem;
		padding-inline: 1.5rem;
	}

	.dn-home-feed.wp-block-post-template {
		column-gap: 4rem;
	}
}

.dn-home-feed.wp-block-post-template {
	display: grid;
	grid-template-columns: 1fr;
}

/* Justin's review (2026-09-23): a common 13" laptop (1366/1280px-wide
   Chrome window, 100% zoom) showed one column, not two -- this grid had
   its own single hardcoded `min-width: 1440px` switch, completely
   disconnected from .dn-home-layout's own smoother rail ramp above
   (which already gives a comfortable 581px content column starting at
   1200px). Moved the two-column switch down to match -- confirmed live
   at 1200px with a real screenshot that two cards side by side isn't
   cramped at that content width. Kept a smaller 2rem gap through
   1200-1439px (the already-tuned 4rem gap below is sized for the wider
   722px column at >=1440px specifically, not this narrower range). */
@media (min-width: 1200px) {
	.dn-home-feed.wp-block-post-template {
		grid-template-columns: 1fr 1fr;
		column-gap: 2rem;
	}
}

/* Rail modules: black-bar white-uppercase label is the shared signature
   component for every rail module (matches the design library's "narrow
   black bar, small white uppercase label" rail-module spec). */
.dn-rail-module {
	margin-bottom: 2.5rem;
}

.dn-rail-label {
	background: var(--dn-ink);
	border-left: 4px solid var(--dn-focus);
	color: var(--dn-paper);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .06em;
	margin: 0 0 1rem;
	padding: .55rem .75rem;
	/* Owner found live 2026-09-22: only this <h2>'s own text rendered
	   uppercase; the <a> link inside it (the actual visible label text
	   for every linked rail heading -- Heap of Links, Archives, Latest
	   Comments) did not. Root cause: Anima LT's Style Manager applies
	   typography through a blanket `* { text-transform:
	   var(--current-text-transform); }` rule (documented already at
	   .dn-site-header__nav below). The plain `text-transform: uppercase`
	   here wins on this element itself (class selector beats universal),
	   but doesn't touch the custom property, so the <a> child's own match
	   against that same `*` rule still reads whatever
	   --current-text-transform is inherited from further up the tree
	   (Anima's site-wide default, "none") and loses. Setting the custom
	   property here too, so it inherits down into the link the same way
	   .dn-site-header__nav already does. */
	--current-text-transform: uppercase;
	text-transform: uppercase;
}

.dn-rail-label--heap {
	border-left-color: var(--dn-accent-heap);
}

.dn-rail-label--heap a:hover,
.dn-rail-label--heap a:focus-visible {
	color: var(--dn-accent-heap-soft);
	-webkit-text-fill-color: currentColor;
}

.dn-rail-label--comments {
	border-left-color: var(--dn-accent-comments);
}

.dn-rail-label--comments a:hover,
.dn-rail-label--comments a:focus-visible {
	color: var(--dn-accent-comments-soft);
	-webkit-text-fill-color: currentColor;
}

.dn-rail-label--archives {
	border-left-color: var(--dn-accent-archives);
}

.dn-rail-label--archives a:hover,
.dn-rail-label--archives a:focus-visible {
	color: var(--dn-accent-archives-soft);
	-webkit-text-fill-color: currentColor;
}

/* A clickable rail label (e.g. Heap of Links, which has a real destination
   page — most rail modules don't and stay plain text). */
.dn-rail-label a {
	color: inherit;
	display: block;
	text-decoration: none;
}

.dn-rail-label a:hover,
.dn-rail-label a:focus-visible {
	background-clip: border-box;
	background-image: none;
	color: var(--dn-accent-default-soft);
	-webkit-background-clip: border-box;
	-webkit-text-fill-color: currentColor;
	text-decoration: none;
}

/* Keep module-specific light accents after the higher-specificity Anima
   compatibility selector so each rail retains its own identity. `.dn-rail-
   label` renders as a heading block, so it's also caught by Anima's own
   blanket `:is(h1,h2,h3) a:is(:hover,:focus) { -webkit-text-fill-color:
   transparent }` gradient-clip rule (see the .wp-block-post-title fix
   below for the full explanation) -- `currentColor` here neutralizes that
   the same way, tracking whichever accent `color` this rule sets rather
   than hardcoding it a second time. Confirmed via live forced-colors
   emulation (2026-09-22): -webkit-text-fill-color: currentColor doesn't
   dynamically re-track the OS's forced link color the way `color` does
   (it snapshots the author-specified value instead, a genuine Chromium
   quirk) -- but that snapshot is this rule's own accent color, not
   transparent, so the text stays visible either way. An earlier attempt
   scoped -webkit-text-fill-color out of forced-colors mode entirely
   instead of setting it; that left Anima's transparent rule unopposed
   under forced-colors and made this text disappear, confirmed by the
   same live test -- worse than not touching it, so reverted. */
.wp-block-heading.dn-rail-label.dn-rail-label--heap a:hover,
.wp-block-heading.dn-rail-label.dn-rail-label--heap a:focus-visible {
	color: var(--dn-accent-heap-soft);
	-webkit-text-fill-color: currentColor;
}

.wp-block-heading.dn-rail-label.dn-rail-label--comments a:hover,
.wp-block-heading.dn-rail-label.dn-rail-label--comments a:focus-visible {
	color: var(--dn-accent-comments-soft);
	-webkit-text-fill-color: currentColor;
}

.wp-block-heading.dn-rail-label.dn-rail-label--archives a:hover,
.wp-block-heading.dn-rail-label.dn-rail-label--archives a:focus-visible {
	color: var(--dn-accent-archives-soft);
	-webkit-text-fill-color: currentColor;
}

/* The generic (non-heap/non-comments/non-archives) rail label never
   got the same higher-specificity twin above. Found live 2026-09-22: its
   plain `.dn-rail-label a:hover` rule loses to Anima's blanket gradient-
   clip rule on specificity, so its hover/focus text was painting fully
   transparent (rgba(0,0,0,0)) against the black rail bar -- invisible,
   not just wrong-colored. Same fix as heap/comments: match the compound
   selector shape to win, currentColor to track whichever accent color
   this rule sets. */
.wp-block-heading.dn-rail-label a:hover,
.wp-block-heading.dn-rail-label a:focus-visible {
	color: var(--dn-accent-default-soft);
	-webkit-text-fill-color: currentColor;
}

/* DN flair (owner-requested, ported from the working felt-poc/poc-mu
   prototype -- see functions.php's dailynous_anima_flair_* functions for
   the settings side). Two optional, mutually exclusive states selected
   via a body class; default is neither (no class, nothing changes). Both
   read each section's own already-established accent color
   (--dn-accent-heap/--dn-accent-comments/--dn-focus as the default) so a
   module's flair always matches its own identity color, never a fixed
   one-size color. Static outline/shadow only, no motion, so
   prefers-reduced-motion doesn't apply here -- nothing animates. */
.dn-flair-prism .dn-rail-label,
.dn-flair-shadow .dn-rail-label {
	position: relative;
}

.dn-flair-prism .dn-rail-label {
	--dn-flair-color: var(--dn-focus);
}

.dn-flair-prism .dn-rail-label--heap {
	--dn-flair-color: var(--dn-accent-heap);
}

.dn-flair-prism .dn-rail-label--comments {
	--dn-flair-color: var(--dn-accent-comments);
}

.dn-flair-prism .dn-rail-label--archives {
	--dn-flair-color: var(--dn-accent-archives);
}

.dn-flair-prism .dn-rail-label::after {
	border-bottom: 3px solid var(--dn-flair-color);
	border-right: 3px solid var(--dn-flair-color);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	transform: translate(3px, 3px);
	z-index: -1;
}

.dn-flair-shadow .dn-rail-label {
	--dn-flair-color: var(--dn-focus);
	box-shadow: 4px 4px 0 0 var(--dn-flair-color);
}

.dn-flair-shadow .dn-rail-label--heap {
	--dn-flair-color: var(--dn-accent-heap);
}

.dn-flair-shadow .dn-rail-label--comments {
	--dn-flair-color: var(--dn-accent-comments);
}

.dn-flair-shadow .dn-rail-label--archives {
	--dn-flair-color: var(--dn-accent-archives);
}

.dn-flair-prism .dn-site-header {
	box-shadow: inset 0 -3px 0 var(--dn-focus);
}

.dn-flair-shadow .dn-site-header {
	box-shadow: 4px 4px 0 0 var(--dn-focus);
}

/* Link Library's render_callback does not apply the block's className to
   its own output (a plugin quirk, not a WP standard) -- .dn-rail-heap
   never actually appears in the rendered HTML, so everything here targets
   Link Library's own native classes/structure instead (.linklist,
   .linklistcatname), scoped under .dn-rail-module so it can't collide
   with the Archives/Categories/Comments modules, which also use that
   wrapper class generically. */
.dn-rail-module .linklist {
	/* Same Style Manager --current-font-size cascade fix already applied
	   to .dn-rail-label (which turned out to be environment-specific --
	   identical theme files rendered differently on UAT vs. DEV). Applying
	   it here too per owner report 2026-09-21 (Justin item J: "Heap of
	   Links text is too large relative to the right sidebar") in case the
	   same cascade affects list content, not just the heading. */
	--current-font-size: 1rem;
	--current-line-height: 1.5;
	font-size: var(--current-font-size);
	line-height: var(--current-line-height);
}

/* Link Library prints its own category-name label inside the block output
   ("Heap of Links" again); redundant with the dn-rail-label heading above
   it, so hidden rather than shown twice. */
.dn-rail-module .linklistcatname {
	display: none;
}

.dn-rail-module .linklist ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Owner requested removing these separators 2026-09-20, then asked to
   hold off/reconsider a moment later, then confirmed keep -- 1px,
   var(--dn-rule) (#d9d9d9), same as before. */
.dn-rail-module .linklist li {
	border-bottom: 1px solid var(--dn-rule);
	font-weight: var(--dn-rail-secondary-weight);
	padding-block: .5rem;
}

.dn-safe-latest-comments,
.dn-safe-latest-comments__meta {
	font-weight: var(--dn-rail-secondary-weight);
}

/* Justin's review (2026-09-23, item A): "in the Heap of Links sidebar
   [I want a greater difference in weight between] their title
   (heavier) and their description (lighter)." Link Library prints the
   description as plain text directly in the <li>, after the </a>, with
   no wrapping element of its own to target -- so the description gets
   its weight from the <li> above (300, light) by inheritance, and this
   rule only needs to override the <a> itself to be heavier.

   Justin's follow-up review (2026-09-24 and 2026-09-26): the resulting
   700/600 read too heavy. The Heap quote/title and Latest Comments
   person name now share the same medium rail weight, while Heap
   descriptions and Latest Comments post/context text share the same
   light rail weight. */
.dn-rail-module .linklist li a,
.dn-safe-latest-comments__who {
	font-weight: var(--dn-rail-primary-weight);
}

.dn-rail-list {
	font-size: 1rem;
	line-height: 1.5;
	list-style: none;
	margin: 0;
	padding: 0;
}

.dn-rail-list li {
	border-bottom: 1px solid var(--dn-rule);
	padding-block: .5rem;
}

/* "All Links" line at the end of the Heap of Links rail module (owner
   direction 2026-09-21, Justin item N). */
.dn-rail-all-links {
	font-size: .85rem;
	font-weight: 700;
	margin: .75rem 0 0;
	text-transform: uppercase;
}

/* Archive-month dropdown (owner direction 2026-09-21, Justin item P).
   Disabled (grayed, not-allowed cursor) until assets/js/archives-dropdown.js
   removes the disabled attribute -- an honest signal rather than a
   silently-inert control when JS hasn't run. */
.dn-archive-dropdown {
	background: var(--dn-paper);
	border: 1px solid var(--dn-rule);
	color: var(--dn-ink);
	font-size: .9rem;
	margin-top: .75rem;
	max-width: 100%;
	padding: .5rem .6rem;
	width: 100%;
}

.dn-archive-dropdown:disabled {
	color: #767676;
	cursor: not-allowed;
}

/* Archives is now exactly truncated to 2 months via the
   dailynous/limited-archives block (functions.php), matching legacy
   evidence precisely — no scroll-cap needed anymore. */

.dn-rail-comments.wp-block-latest-comments {
	--current-font-size: 1rem;
	--current-line-height: 1.5;
	font-size: var(--current-font-size);
	line-height: var(--current-line-height);
	margin: 0;
}

/* Safe latest-comments excerpts can contain a long user-authored token or
   URL. Keep it inside the bounded ad/sidebar rail at every breakpoint. */
.dn-safe-latest-comments__excerpt,
.dn-safe-latest-comments__excerpt a {
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* Imported legacy posts sometimes carry classic WordPress caption markup
   with fixed pixel widths. Keep those images and captions inside the post
   column on narrow screens instead of letting them create horizontal scroll. */
.entry-content .wp-caption,
.entry-content .wp-caption img,
.entry-content .wp-caption-text {
	height: auto;
	max-width: 100%;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
	overflow-wrap: anywhere;
	word-break: break-word;
}

.entry-content h1 :is(strong, em),
.entry-content h2 :is(strong, em),
.entry-content h3 :is(strong, em),
.entry-content h4 :is(strong, em),
.entry-content h5 :is(strong, em),
.entry-content h6 :is(strong, em) {
	white-space: normal;
}

/* Justin's review (2026-09-23): simplify Recent Comments toward the old
   site's treatment. `<ol>` was semantically reasonable (chronological)
   but showed browser-default numbering nobody wanted -- list-style:none
   removes it without a markup change. Excerpt is hidden, not deleted,
   per the owner's own "just hide it for now" -- the PHP still computes
   and outputs it, so re-enabling later is a one-line CSS revert, not a
   rebuild. Commenter name+date is now one real link to their specific
   comment (get_comment_link() already resolves the exact #comment-N
   anchor when possible, falling back to the general discussion
   otherwise -- no extra logic needed); the old separate "Discussion"
   text link is gone, folded into that. Post title was already linked. */
.dn-safe-latest-comments {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Numbering was the only thing visually separating one entry from the
   next -- removing it above without adding something back made the
   list genuinely harder to read (confirmed by a live screenshot: items
   ran together with no visual break). A quiet divider restores that
   separation without reintroducing numbers. */
.dn-safe-latest-comments__item {
	border-bottom: 1px solid var(--dn-rule);
	margin-bottom: .6rem;
	padding-bottom: .6rem;
}

.dn-safe-latest-comments__item:last-child {
	border-bottom: 0;
	margin-bottom: 0;
	padding-bottom: 0;
}

.dn-safe-latest-comments__excerpt {
	display: none;
}

/* Justin's review (2026-09-23, item B): "the commenter names and post
   titles in the Recent Comments sidebar... are all underlined. I think
   we should get rid of all of that underlining." Supersedes the
   earlier permanent-underline-as-affordance decision below (kept as a
   comment there for the reasoning trail) -- hover color is still the
   click affordance. */
.dn-safe-latest-comments__who,
.dn-safe-latest-comments__post-link {
	color: inherit;
	text-decoration: none;
}

/* Keep the Latest Comments detail text aligned with the Heap description
   weight. The prominent pair is grouped above with the Heap title rule:
   `.dn-rail-module .linklist li a, .dn-safe-latest-comments__who`. */
.dn-safe-latest-comments__post-link,
.dn-safe-latest-comments__on {
	font-weight: var(--dn-rail-secondary-weight);
}

/* Plain connector text between "who" and the post title (owner
   request 2026-09-23: "add some context... John XX-YY-2026 'on' title
   post"), matching the same " on " pattern the public-comments-archive
   plugin already uses for the same information. Not a link -- inherits
   the surrounding muted rail text color, never the hover blue below. */
.dn-safe-latest-comments__on {
	color: var(--dn-muted);
}

/* Owner request: "on desktop it just turns blue on hover (the
   light-ish blue from old)" -- reuses --dn-focus, the same Daily Nous
   blue already established sitewide (search/comment-link focus rings,
   inline article-content links), rather than introducing a second
   blue.
   2026-09-23: tried removing the underline on hover and adding bold
   instead -- owner found the bold weight shift too jarring. Reverted
   to option (b) of two offered alternatives: keep the permanent
   underline as-is (matches the sitewide rail-link affordance
   convention -- Heap of Links and other rail lists use the same
   always-underlined pattern), never use bold, hover only changes
   color.
   2026-09-23 follow-up, real bug found (not just preference): owner
   reported the underline stayed black on hover while the text went
   blue. Root cause is Anima LT's own blanket `a:hover, a:focus {
   text-decoration-color: var(--theme-links-color) }` -- we had to set
   --theme-links-color to var(--dn-ink) (black) earlier this session to
   fix an unrelated bug (hover text disappearing), and that value wins
   here too since nothing had overridden text-decoration-color
   specifically. Explicit currentColor fixes it -- and the same forced-
   black bug turned out to affect every other custom hover color in
   this file that has a visible underline; fixed together below
   (.wp-block-post-content a, .dn-house-ad__body a, footer nav). */
.dn-safe-latest-comments__who:hover,
.dn-safe-latest-comments__who:focus-visible,
.dn-safe-latest-comments__post-link:hover,
.dn-safe-latest-comments__post-link:focus-visible {
	color: var(--dn-focus);
	text-decoration-color: currentColor;
}

.dn-rail-comments .wp-block-latest-comments__comment {
	border-bottom: 1px solid var(--dn-rule);
	list-style: none;
	padding-block: .6rem;
}

.dn-rail-comments .wp-block-latest-comments__comment-excerpt p {
	color: var(--dn-muted);
	font-size: .9em;
	margin: .2rem 0 0;
}

/* Archives module only (limited-archives, archives-dropdown) -- still
   carries the permanent underline decided 2026-09-22 (owner-reported:
   entries weren't clearly clickable). Heap of Links and Recent
   Comments used to share this rule too; both were split out below per
   Justin's 2026-09-23 review (item B), which asked specifically for
   those two to lose their underlining -- Archives wasn't mentioned, so
   left as-is rather than assumed. */
.dn-rail-list a {
	text-decoration: underline;
	text-underline-offset: .12em;
}

/* Justin's review (2026-09-23, item B): "the titles of the links in
   the Heap of Links sidebar... are all underlined. I think we should
   get rid of all of that underlining." Hover color remains the click
   affordance (see the shared a:hover rule near the top of this file). */
.dn-rail-module .linklist a,
.dn-rail-comments a {
	text-decoration: none;
}

.entry-content a,
#wpdcom .wpd-comment-text a {
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* Codex/owner report (2026-09-23): "some links still disappear or
   become unreadable on hover." Audited live -- this specific pair
   wasn't invisible, but removing the underline above (Justin's item B)
   left it with literally zero hover feedback: no color change (never
   had one) and no more underline-thickens-on-hover either, since
   there's no underline left to thicken. Real gap, not the reported
   symptom exactly, but the same root class of "hover treatment
   missing/broken" this audit asked to check for. Recent Comments'
   specific __who/__post-link links already have their own hover color
   (see below); this covers Heap of Links, which had none, plus any
   other stray link in either module not covered by a more specific
   rule. */
.dn-rail-module .linklist a:hover,
.dn-rail-module .linklist a:focus-visible,
.dn-rail-comments a:hover,
.dn-rail-comments a:focus-visible {
	color: var(--dn-focus);
}

/* Card titles keep the separate hover-only desktop treatment decided in
   v0.9.9 (an intentional restrained affordance for sighted mouse users,
   not the same "always visible" call just made for rail links above),
   but touch devices still need their own permanent version of it since
   `:hover` never fires there (owner-reported 2026-09-22, v0.10.0). This
   is that touch-only rule, now standalone since the rail-link version of
   the same pattern above is unconditional and no longer needs this media
   query. */
@media (hover: none) {
	.wp-block-post-title a {
		text-decoration: underline;
		text-underline-offset: .12em;
	}
}

/* Owner request (2026-09-23): load Advanced Ads with a real or fake ad,
   similar look/feel to OLD, instead of leaving this reserved but empty
   -- supersedes the original "empty geometry only, wait for Raptive"
   decision. The slot itself is now just a layout container; the visual
   box (border, content) lives on .dn-house-ad below, sized to the
   standard 300x250 "medium rectangle" this slot was always reserved
   for.
   2026-09-23 follow-up: owner asked to drop the "Advertisement" label
   bar entirely -- removed from both the ad's HTML content and the
   .dn-house-ad__label rule that styled it (no longer used anywhere). */
.dn-rail-ad-slot {
	margin-bottom: 1.25rem;
	min-height: 0;
}

.dn-rail-ad-slot img {
	display: block;
	height: auto;
	max-width: 100%;
}

.dn-rail-ad-pair {
	gap: .75rem;
	margin-block-start: .75rem;
}

.dn-rail-ad-pair .wp-block-column {
	min-width: 0;
}

.dn-rail-ad-pair p {
	margin: 0;
}

.dn-rail-ad-pair img {
	height: auto;
	max-width: 100%;
	width: 100%;
}

.dn-rail-ad-slot--right-stack {
	display: grid;
	gap: .75rem;
}

.dn-rail-ad-slot--right-stack > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.dn-rail-ad-slot--right-stack p {
	margin: 0;
}

.dn-rail-ad-slot--right-stack img {
	width: 100%;
}

.dn-end-post-ad-slot {
	margin-block: 2rem 1.25rem;
	text-align: center;
}

.dn-end-post-ad-slot > * {
	margin-inline: auto;
	max-width: 320px;
}

.dn-end-post-ad-slot img {
	display: block;
	height: auto;
	max-width: 100%;
}

.dn-house-ad {
	border: 1px solid var(--dn-rule);
	display: flex;
	flex-direction: column;
	height: 250px;
	max-width: 100%;
	width: 300px;
}

.dn-house-ad__body {
	align-items: center;
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: .4rem;
	justify-content: center;
	padding: 1rem;
	text-align: center;
}

.dn-house-ad__body strong {
	--current-font-family: var(--dn-secondary-font-family);
	font-family: var(--current-font-family);
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: .02em;
}

.dn-house-ad__body span {
	color: var(--dn-muted);
	font-size: .85rem;
}

.dn-house-ad__body a {
	color: var(--dn-focus);
	font-size: .82rem;
	text-decoration: underline;
	text-underline-offset: .12em;
}

.dn-house-ad__body a:hover,
.dn-house-ad__body a:focus-visible {
	text-decoration-color: currentColor;
	text-decoration-thickness: .12em;
}

/* Core block header: logo and navigation remain editable in Appearance →
   Editor. No menu data is stored in this stylesheet or child PHP. */
.dn-site-header {
	background: var(--dn-paper);
	border-bottom: 1px solid var(--dn-ink);
	color: var(--dn-ink);
}

/* Utility row: social links, RSS, and search — low visual weight, matching
   the classic Daily Nous masthead's outer-side utilities. Links are the
   site's real, current accounts (see About page); not decorative. */
.dn-site-header__utility {
	align-items: center;
	border-bottom: 1px solid var(--dn-rule);
	font-size: .68rem;
	letter-spacing: .04em;
	padding: .45rem 1.25rem;
	text-transform: uppercase;
}

.dn-site-header__social .wp-block-navigation-item__content,
.dn-site-header__rss .wp-block-navigation-item__content {
	color: var(--dn-muted);
	padding: .2rem .4rem;
	text-decoration: none;
}

.dn-site-header__social .wp-block-navigation-item__content:hover,
.dn-site-header__social .wp-block-navigation-item__content:focus-visible,
.dn-site-header__rss .wp-block-navigation-item__content:hover,
.dn-site-header__rss .wp-block-navigation-item__content:focus-visible {
	color: var(--dn-focus);
}

.dn-site-header__utility-right {
	align-items: center;
	gap: .5rem;
}

.dn-site-header__search,
.dn-site-header__search .wp-block-search__inside-wrapper {
	align-items: center;
}

/* Icon-only utility row (owner direction 2026-09-22: same minimized
   treatment on mobile as desktop, not just ≥900px). Each link's real text
   ("Twitter", "RSS", etc.) stays in the DOM -- font-size:0 hides it
   visually only, so it is still the accessible name for screen readers,
   and the link's own box (padding + min-width) still receives the global
   `a:focus-visible` outline (style.css:147) when tabbed to, so keyboard
   users get a visible focus indicator even though the label itself is
   invisible. */
.dn-site-header__social .wp-block-navigation-item__content,
.dn-site-header__rss .wp-block-navigation-item__content {
	--current-font-size: 0;
	font-size: 0;
	line-height: 1;
	min-width: 1.65rem;
	padding-inline: .3rem;
	text-align: center;
}

.dn-site-header__social .wp-block-navigation-item__label,
.dn-site-header__rss .wp-block-navigation-item__label {
	--current-font-size: 0;
	font-size: 0;
}

.dn-site-header__social .wp-block-navigation-item__content::before,
.dn-site-header__rss .wp-block-navigation-item__content::before {
	font-size: .9rem;
	font-weight: 700;
	line-height: 1;
}

.dn-site-header__social .wp-block-navigation-item:nth-child(1) .wp-block-navigation-item__content::before {
	content: "𝕏";
}

.dn-site-header__social .wp-block-navigation-item:nth-child(2) .wp-block-navigation-item__content::before {
	content: "f";
}

.dn-site-header__social .wp-block-navigation-item:nth-child(3) .wp-block-navigation-item__content::before {
	content: "✦";
}

.dn-site-header__social .wp-block-navigation-item:nth-child(4) .wp-block-navigation-item__content::before {
	content: "◎";
}

.dn-site-header__rss .wp-block-navigation-item__content::before {
	content: "◔";
}

/* Compact search at every width -- keeps the utility row on one line
   (with the icon glyphs above) instead of wrapping onto a second line,
   which is exactly the "excess vertical space" mobile failure mode this
   pass fixes. Expands on focus so the real input target isn't cramped
   once it's actually in use. */
.dn-site-header__search {
	max-width: 9rem;
}

.dn-site-header__search .wp-block-search__input {
	background: transparent;
	border-width: 1px;
	min-width: 0;
	opacity: 1;
	padding-inline: .4rem;
	transition: width .08s linear, opacity .08s linear;
	width: 6.25rem;
}

.dn-site-header__search .wp-block-search__inside-wrapper {
	background: transparent;
	border: 0;
}

.dn-site-header__search:focus-within {
	max-width: 12rem;
}

.dn-site-header__search:focus-within .wp-block-search__input {
	border-width: 1px;
	opacity: 1;
	padding-inline: .5rem;
	width: 9rem;
}

/* Anima LT's own style.css strips outline: 0 from form inputs broadly
   (confirmed 2026-09-22 by live keyboard-focus testing: this input
   computed to a genuine 0px outline, not just a hard-to-see one --
   nothing at all). Same fix pattern as the site-wide `a:focus-visible`
   rule, applied here since inputs aren't links and don't inherit it. */
.dn-site-header__search .wp-block-search__input:focus-visible {
	outline: 3px solid var(--dn-focus);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.dn-site-header__search .wp-block-search__input {
		transition: none;
	}
}

/* Justin R: compact desktop utility strip; labels remain accessible while
   icon/tooltips are evaluated separately. */
@media (min-width: 700px) {
	.dn-site-header__utility {
		font-size: .58rem;
		padding-block: .2rem;
	}

	.dn-site-header__social .wp-block-navigation-item__content,
	.dn-site-header__rss .wp-block-navigation-item__content {
		padding-block: .08rem;
	}

	.dn-site-header__search .wp-block-search__input,
	.dn-site-header__search .wp-block-search__button {
		height: 1.45rem;
	}
}

/* Justin R masthead refinement: on wide screens the classic Heap placement
   kept social controls to the left of the centered mark and RSS/search to its
   right. Keep the controls as real editable navigation/search blocks, but
   visually move the compact utility row alongside the masthead instead of
   consuming a separate full-width header band. (Icon conversion itself is
   unscoped above and applies at every width; this block is only the
   desktop-specific *positioning* -- pulling the row out of flow to sit
   beside the logo, which only makes sense once there's side space to sit
   in.) */
@media (min-width: 900px) {
	/* Same-line masthead (owner direction: social/RSS/search sit on the same
	   line as the logo, not a separate band). The previous approach used
	   position:absolute with a hardcoded `top: 8.25rem` guess at the brand
	   row's height -- that guess was tuned against whatever logo happened
	   to be active at the time, and broke (real overlap) once a real,
	   differently-proportioned logo was configured (2026-09-22, PROD
	   preview). Grid overlay instead: .dn-site-header__utility and
	   .dn-site-header__brand share the same grid cell (row 1), so the
	   row's height auto-sizes to whichever is taller -- almost always
	   brand, since it holds the logo -- regardless of that logo's actual
	   rendered height. No hardcoded offset to re-tune when the logo
	   changes. Utility is full-width with its own children pinned to the
	   far left/right via its existing space-between layout; brand is
	   `align:wide` (narrower, centered) with its own identity/tagline
	   already space-between internally -- so utility's icons sit outside
	   brand's centered zone rather than colliding with the logo. */
	.dn-site-header {
		display: grid;
	}

	.dn-site-header__utility,
	.dn-site-header__brand {
		grid-column: 1;
		grid-row: 1;
	}

	.dn-site-header__nav-wrap {
		grid-row: 2;
	}

	/* WordPress's alignfull helper applies a negative margin inside the
	   constrained header. The utility row is already positioned against the
	   header, so cancel that helper here; otherwise the left controls can be
	   clipped off-screen and the social items collapse into a vertical stack. */
	.dn-site-header > .dn-site-header__utility {
		box-sizing: border-box;
		margin-inline: 0;
		max-width: none;
		width: 100%;
	}

	/* Real bug found live 2026-09-22 (owner report: logo/title link "doesn't
	   work"): utility shares its grid row with brand and sits at a higher
	   z-index so its own icons/search stay clickable above the logo -- but
	   a flex container's box covers its FULL layout area, including the
	   empty space between/around its children, not just where its visible
	   content sits. That gave utility's own transparent middle an
	   invisible hit-area directly over the logo and title, at a higher
	   z-index, silently intercepting every click there before it could
	   reach the actual logo/title links underneath (confirmed via
	   elementFromPoint at the exact click coordinates -- the utility div,
	   not the link, was what actually received the click). pointer-events:
	   none on the shared row plus pointer-events: auto on its real
	   children (the two blocks below) makes only the icons/search
	   themselves clickable again, while clicks anywhere else in that row
	   fall through to whatever's actually underneath. */
	/* Owner report 2026-09-22: the social/RSS/search icons were vertically
	   centered against the WHOLE shared row -- which is as tall as the
	   logo, since the row auto-sizes to its tallest content -- making them
	   float near the logo's own vertical middle instead of visually
	   "sitting on the header" alongside the tagline. `align-items: center`
	   centers within the full row height, which happens to be
	   logo-height-dependent; a hardcoded pixel position would reintroduce
	   the exact per-logo-size fragility v0.18.0's grid-overlay fix was
	   written to avoid. Anchoring both to the same edge instead: the
	   tagline already sits near the row's bottom via brand's own
	   `justify-content: space-between` (identity block on one line,
	   tagline pushed to the next), so bottom-aligning utility here keeps
	   the icons level with the tagline regardless of how tall any given
	   logo renders -- both move together if the row grows or shrinks for
	   a reason unrelated to the tagline itself. The padding-bottom is
	   tuned against the tagline's own font-size/line-height (a fixed,
	   logo-independent value), not the row height.

	   Owner follow-up 2026-09-22: still sitting slightly high and not
	   quite level with each other. Two separate things going on:

	   1. Nudge down further -- reduced padding-bottom by ~10% (1rem ->
	      0.9rem) to bring the whole row's bottom-anchor point closer to
	      the tagline/nav band below it, per the owner's own suggested
	      fix.

	   2. Real second bug: RSS sat higher than the social icons even
	      though both are bottom-anchored to this same row. Root cause is
	      one level deeper -- .dn-site-header__utility-right (the RSS +
	      search wrapper) is its own nested flex container with
	      verticalAlignment:"center" in header.html, so *inside* that
	      wrapper RSS was vertically centered against the search field,
	      which is taller than RSS's own icon (it includes the button).
	      Centering against a taller sibling pushes the shorter one
	      (RSS) toward the middle of that extra height rather than
	      sharing its bottom edge -- the same category of bug the outer
	      row's align-items:center fix solved for social vs. the logo,
	      just recurring one container deeper. Fixed below by
	      bottom-aligning that inner wrapper too, so RSS shares the
	      search field's bottom edge instead of its center -- consistent
	      with how social already sits relative to the row. */
	.dn-site-header__utility {
		align-items: flex-end;
		border-bottom: 0;
		padding: .35rem 1.5rem .9rem;
		pointer-events: none;
		z-index: 2;
	}

	.dn-site-header__social,
	.dn-site-header__utility-right {
		pointer-events: auto;
	}

	.dn-site-header__utility-right {
		align-items: flex-end;
	}

	/* Owner follow-up 2026-09-23: search sits ~10px too high, but RSS/
	   social must not move at all. Search and RSS are flex siblings
	   sharing one bottom-anchored row (above) -- any change to spacing/
	   padding/alignment on that shared row would shift RSS too, which is
	   explicitly not wanted here. `position: relative` on search alone
	   is the correct isolated tool for this: it only repaints this one
	   element's own box lower on screen and does not participate in
	   layout at all, so it cannot move, resize, or reflow any sibling
	   (confirmed live: RSS/social boxes identical before and after). */
	.dn-site-header__search {
		position: relative;
		top: 10px;
	}

	.dn-site-header__brand {
		padding-inline: clamp(9rem, 18vw, 14rem);
		z-index: 1;
	}

	.dn-site-header__social,
	.dn-site-header__utility-right {
		max-width: 30%;
	}

	.dn-site-header__social {
		flex: 0 0 auto;
		gap: .1rem;
		max-width: none;
		white-space: nowrap;
		width: auto;
	}

	.dn-site-header__social .wp-block-navigation__container {
		flex-wrap: nowrap;
		width: auto;
	}
}

@media (min-width: 900px) and (prefers-reduced-motion: reduce) {
	.dn-site-header__utility {
		transition: none;
	}
}

.dn-site-header__search {
	margin-block: 0;
}

.dn-site-header__search .wp-block-search__input {
	border: 1px solid var(--dn-rule);
	box-sizing: border-box;
	font-size: .72rem;
	height: 1.7rem;
	padding-left: .5rem !important;
	padding-right: 2rem !important;
}

html[data-wp-dark-mode-active] .dn-site-header__search .wp-block-search__input,
html[data-wp-dark-mode-scheme="dark"] .dn-site-header__search .wp-block-search__input,
body.wp-dark-mode-active .dn-site-header__search .wp-block-search__input {
	box-sizing: border-box;
	padding-left: .5rem !important;
	padding-right: 2rem !important;
}

.dn-site-header__search .wp-block-search__button {
	background: none;
	border: none;
	color: var(--dn-muted);
	height: 1.7rem;
	line-height: 1;
	margin: 0 !important;
	min-width: 1.7rem !important;
	padding: .2rem .25rem .2rem .2rem !important;
	position: relative;
	right: 0;
	width: 1.7rem !important;
}

.dn-site-header__search .wp-block-search__button:hover,
.dn-site-header__search .wp-block-search__button:focus-visible {
	color: var(--dn-focus);
}

.dn-site-header__search .wp-block-search__button .search-icon {
	display: block !important;
	fill: currentColor;
	height: 1rem !important;
	transform: scale(.72);
	transform-origin: 50% 50%;
	width: 1rem !important;
}

.dn-site-header__search .wp-block-search__button .search-icon path {
	fill: currentColor;
}

.dn-header-search-hidden .dn-site-header__search {
	display: none;
}

.dn-header-social-normal-off .dn-site-header:not(.dn-scrolled) .dn-site-header__social,
.dn-header-rss-normal-off .dn-site-header:not(.dn-scrolled) .dn-site-header__rss {
	display: none;
}

@media (min-width: 700px) {
	.dn-header-search-header .dn-site-header__search {
		position: fixed;
		right: 4.7rem;
		top: .45rem;
		z-index: 44;
	}

	.dn-header-search-header .dn-site-header.dn-scrolled .dn-site-header__search {
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
		transform: none;
	}
}

.dn-dark-mode-hidden .wp-dark-mode-floating-switch {
	display: none !important;
}

.dn-dark-mode-corner .wp-dark-mode-floating-switch {
	display: flex !important;
}

.dn-dark-mode-header .wp-dark-mode-floating-switch,
.dn-dark-mode-footer .wp-dark-mode-floating-switch {
	align-items: center;
	bottom: auto !important;
	display: flex !important;
	height: 1.85rem !important;
	justify-content: center;
	position: fixed;
	right: .8rem !important;
	top: .5rem !important;
	width: 1.85rem !important;
	z-index: 45 !important;
}

.dn-dark-mode-header .wp-dark-mode-floating-switch {
	top: .5rem !important;
}

.dn-dark-mode-footer .wp-dark-mode-floating-switch {
	bottom: .65rem !important;
	top: auto !important;
}

.dn-dark-mode-header .wp-dark-mode-switch,
.dn-dark-mode-header .wp-dark-mode-switch-styled,
.dn-dark-mode-header .wp-dark-mode-switch-styled ._track,
.dn-dark-mode-header .wp-dark-mode-switch-styled ._icon,
.dn-dark-mode-footer .wp-dark-mode-switch,
.dn-dark-mode-footer .wp-dark-mode-switch-styled,
.dn-dark-mode-footer .wp-dark-mode-switch-styled ._track,
.dn-dark-mode-footer .wp-dark-mode-switch-styled ._icon {
	height: 1.85rem !important;
	min-height: 0 !important;
	min-width: 0 !important;
	width: 1.85rem !important;
}

.dn-dark-mode-header .wp-dark-mode-switch-styled,
.dn-dark-mode-footer .wp-dark-mode-switch-styled {
	--wp-dark-switch-scale: .45 !important;
}

.dn-dark-mode-header .wp-dark-mode-switch-styled ._track,
.dn-dark-mode-footer .wp-dark-mode-switch-styled ._track {
	align-items: center;
	background: var(--dn-ink) !important;
	border: 1px solid var(--dn-paper);
	border-radius: 999px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
	display: flex;
	justify-content: center;
}

.dn-dark-mode-header .wp-dark-mode-switch-styled svg,
.dn-dark-mode-footer .wp-dark-mode-switch-styled svg {
	display: block !important;
	height: 1.1rem !important;
	width: 1.1rem !important;
}

@media (max-width: 699px) {
	.dn-site-header__utility {
		font-size: .62rem;
		justify-content: center;
		padding: .4rem .75rem;
	}

	.dn-site-header__search .wp-block-search__input {
		width: 6rem;
	}

	.dn-dark-mode-header .wp-dark-mode-floating-switch {
		top: .45rem !important;
	}
}

.dn-site-header__brand {
	align-items: center;
	flex-direction: column;
	gap: .3rem;
	padding-block: 1rem .85rem;
}

.dn-site-header__identity {
	gap: 0;
}

.dn-site-header .wp-block-site-logo {
	flex: 0 0 auto;
	margin: 0;
}

.dn-site-header .wp-block-site-logo img {
	border-radius: 0;
	display: block;
	height: auto;
	/* Modest static reduction (176px -> 144px) per owner direction
	   (2026-09-21, Justin item M: "Header could be smaller"). */
	max-width: 144px;
	transition: max-width .25s ease;
}

/* Shrink-on-scroll (owner request, 2026-09-20/21 -- legacy referenced;
   assets/js/header-shrink.js toggles this class on the header itself after
   ~80px of scroll). Header stays in normal document flow, just takes less
   vertical space once scrolled. The utility controls leave with the tagline
   so the compact masthead does not retain a stranded icon row. */
.dn-site-header.dn-scrolled .dn-site-header__tagline {
	display: none;
}

@media (min-width: 700px) {
	.dn-site-header.dn-scrolled .wp-block-site-logo img {
		/* 144px at rest -> roughly one quarter while reading. */
		max-width: 36px;
	}

	.dn-site-header.dn-scrolled .dn-site-header__brand {
		/* Keep the compact mark visible without leaving a loose blank band
		   above it in the sticky/hover-revealed header state. */
		margin-block-start: 0;
		padding-block: .25rem .2rem;
	}

	.dn-site-header.dn-scrolled .dn-site-header__utility {
		display: none;
	}

	.dn-sticky-social-on .dn-site-header.dn-scrolled .dn-site-header__utility,
	.dn-sticky-rss-on .dn-site-header.dn-scrolled .dn-site-header__utility,
	.dn-sticky-search-on .dn-site-header.dn-scrolled .dn-site-header__utility {
		align-items: center;
		border-bottom: 0;
		box-sizing: border-box;
		display: flex;
		inset: 0 clamp(3.25rem, 8vw, 7rem) auto;
		justify-content: space-between;
		margin-inline: 0;
		max-width: none;
		min-height: 100%;
		padding: 0;
		pointer-events: none;
		position: absolute;
		transform: none;
		width: auto;
		z-index: 42;
	}

	.dn-site-header__social {
		transition: opacity .2s ease, transform .25s ease, visibility .2s ease;
	}

	.dn-site-header__utility-right {
		white-space: nowrap;
		transition: opacity .2s ease, transform .25s ease, visibility .2s ease;
	}

	.dn-site-header.dn-scrolled .dn-site-header__social {
		opacity: 0;
		pointer-events: none;
		transform: translateY(-.3rem);
		visibility: hidden;
	}

	.dn-sticky-social-on .dn-site-header.dn-scrolled .dn-site-header__social {
		opacity: 1;
		pointer-events: auto;
		transform: none;
		visibility: visible;
	}

	.dn-sticky-social-off .dn-site-header.dn-scrolled .dn-site-header__social {
		display: none;
	}

	.dn-site-header.dn-scrolled .dn-site-header__utility-right {
		opacity: 0;
		pointer-events: none;
		transform: translateY(-.3rem);
		visibility: hidden;
	}

	.dn-sticky-rss-on .dn-site-header.dn-scrolled .dn-site-header__utility-right,
	.dn-sticky-search-on .dn-site-header.dn-scrolled .dn-site-header__utility-right {
		align-items: center;
		opacity: 1;
		pointer-events: auto;
		transform: none;
		visibility: visible;
	}

	.dn-sticky-rss-off.dn-sticky-search-off .dn-site-header.dn-scrolled .dn-site-header__utility-right,
	.dn-sticky-rss-off .dn-site-header.dn-scrolled .dn-site-header__rss,
	.dn-sticky-search-off .dn-site-header.dn-scrolled .dn-site-header__search {
		display: none;
	}

	.dn-sticky-search-on.dn-header-search-hidden .dn-site-header.dn-scrolled .dn-site-header__search {
		display: block;
	}

	.dn-sticky-search-on .dn-site-header.dn-scrolled .dn-site-header__search {
		max-width: 9rem;
		position: static;
		top: auto;
	}

	.dn-sticky-search-on .dn-site-header.dn-scrolled .dn-site-header__search .wp-block-search__input {
		width: 6.25rem;
	}
}

.dn-site-header__brand {
	transition: padding-block .25s ease;
}

.dn-sticky-menu-toggle {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.dn-site-header .wp-block-site-logo img,
	.dn-site-header__brand,
	.dn-site-header__social {
		transition: none;
	}
}

/* Sticky mini-header (owner/Justin, 2026-09-23: "a tiny sticky site
   logo/home button at top while scrolling posts, with menu on hover,
   similar to OLD"). Builds on the existing shrink-on-scroll class from
   assets/js/header-shrink.js. A previous pass tried `position: sticky`,
   but the header is nested inside a short `header.wp-block-template-part`
   wrapper, so sticky clamps to that parent instead of the viewport and
   the header scrolls away. Use a fixed scrolled state instead, with a
   wrapper placeholder to prevent the document from jumping when the
   header leaves normal flow. Desktop-only (min-width 700px), matching the
   shrink rules' own scope; below that, the nav is already the mobile
   overlay menu. */
@media (min-width: 700px) {
	header.wp-block-template-part:has(.dn-site-header.dn-scrolled) {
		min-height: 54px;
	}

	.dn-site-header.dn-scrolled {
		background: var(--dn-paper);
		box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
		left: 0;
		position: fixed;
		right: 0;
		top: 0;
		width: auto;
		z-index: 40;
	}

	.dn-sticky-header-off .dn-site-header.dn-scrolled {
		position: relative;
	}

	.dn-sticky-menu-toggle {
		align-items: center;
		background: var(--dn-paper);
		border: 1px solid var(--dn-rule);
		border-radius: 0;
		color: var(--dn-ink);
		display: none;
		height: 2rem;
		justify-content: center;
		padding: .35rem;
		position: absolute;
		right: 3.2rem;
		top: 50%;
		transform: translateY(-50%);
		width: 2rem;
		z-index: 43;
	}

	.dn-sticky-menu-position-right-inside .dn-sticky-menu-toggle {
		right: .75rem;
	}

	.dn-sticky-menu-position-left-overhang .dn-sticky-menu-toggle {
		left: 3.2rem;
		right: auto;
	}

	.dn-sticky-menu-position-left-inside .dn-sticky-menu-toggle {
		left: .75rem;
		right: auto;
	}

	.dn-sticky-menu-toggle span {
		background: currentColor;
		display: block;
		height: 1px;
		position: absolute;
		transition: transform .16s ease, opacity .16s ease;
		width: 1rem;
	}

	.dn-sticky-menu-toggle span:nth-child(1) {
		transform: translateY(-.32rem);
	}

	.dn-sticky-menu-toggle span:nth-child(3) {
		transform: translateY(.32rem);
	}

	.dn-sticky-menu-toggle:hover,
	.dn-sticky-menu-toggle:focus-visible {
		border-color: var(--dn-focus);
		color: var(--dn-focus);
	}

	.dn-sticky-menu-click .dn-site-header.dn-scrolled .dn-sticky-menu-toggle {
		display: flex;
	}

	.dn-sticky-menu-off .dn-site-header.dn-scrolled .dn-sticky-menu-toggle {
		display: none;
	}

	.dn-sticky-menu-off .dn-site-header.dn-scrolled .dn-site-header__nav-wrap {
		display: none;
	}

	.dn-sticky-menu-click .dn-site-header.dn-scrolled.dn-nav-open .dn-sticky-menu-toggle span:nth-child(1) {
		transform: rotate(45deg);
	}

	.dn-sticky-menu-click .dn-site-header.dn-scrolled.dn-nav-open .dn-sticky-menu-toggle span:nth-child(2) {
		opacity: 0;
	}

	.dn-sticky-menu-click .dn-site-header.dn-scrolled.dn-nav-open .dn-sticky-menu-toggle span:nth-child(3) {
		transform: rotate(-45deg);
	}

	/* Collapsed by default once pinned -- absolutely positioned (no
	   layout impact while hidden) and overlaid below the compact bar
	   rather than pushing page content down when revealed, so hovering
	   to check the menu doesn't itself cause a scroll-jarring reflow.
	   Same opacity/transform/visibility transition already used above
	   for the utility row, not a new pattern. */
	.dn-site-header.dn-scrolled .dn-site-header__nav-wrap {
		background: var(--dn-paper);
		border-bottom: 1px solid var(--dn-ink);
		box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
		left: 0;
		opacity: 0;
		pointer-events: none;
		position: absolute;
		right: 0;
		top: 100%;
		transform: translateY(-.3rem);
		transition: opacity .2s ease, transform .25s ease, visibility .2s ease;
		visibility: hidden;
	}

	.dn-sticky-menu-hover .dn-site-header.dn-scrolled:hover .dn-site-header__nav-wrap,
	.dn-sticky-menu-hover .dn-site-header.dn-scrolled:focus-within .dn-site-header__nav-wrap,
	.dn-sticky-menu-click .dn-site-header.dn-scrolled.dn-nav-open .dn-site-header__nav-wrap,
	.dn-sticky-menu-always .dn-site-header.dn-scrolled .dn-site-header__nav-wrap {
		opacity: 1;
		pointer-events: auto;
		transform: translateY(0);
		visibility: visible;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dn-site-header.dn-scrolled .dn-site-header__nav-wrap {
		transition: none;
	}
}

/* Keep a semantic, linked site title available to assistive technology while
   the established Daily Nous mark provides the visible masthead identity. */
.dn-site-header .wp-block-site-title {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.dn-site-header .wp-block-site-title a {
	color: #000;
	text-decoration: none;
}

.dn-site-header__tagline {
	color: var(--dn-muted);
	font-size: .72rem;
	letter-spacing: .08em;
	margin: 0;
	text-align: center;
	text-transform: uppercase;
}

.dn-site-header__nav-wrap {
	background: #f6f6f6;
	border-top: 1px solid #d8d8d8;
	color: #111;
}

@media (min-width: 700px) {
	/* The parent theme adds a generic block margin above navigation. In this
	   masthead that creates an unintended empty strip below the subtitle and
	   utility icons. Let the lower band flow directly into the menu so the
	   centered logo occupies the real space between the viewport top and nav. */
	.dn-site-header__nav-wrap {
		margin-top: 0;
	}
}

.dn-site-header__nav {
	--current-font-family: var(--dn-secondary-font-family);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .025em;
	line-height: 1.2;
	padding: .4rem .75rem;
	/* Anima LT's Style Manager applies typography through a blanket
	   `* { text-transform: var(--current-text-transform); ... }` rule, so a
	   plain `text-transform` declaration here loses regardless of
	   specificity. Overriding the custom property it reads from, at equal
	   scope, works with the theme's own mechanism instead of fighting it. */
	--current-text-transform: uppercase;
	text-transform: uppercase;
}

.dn-site-header,
.dn-site-footer,
.dn-home-feed .wp-block-post-title,
.dn-search-feed .wp-block-post-title,
.dn-article h1,
.dn-article h2,
.dn-article h3,
.dn-rail-label,
.dn-safe-latest-comments__meta,
.dn-blogroll a,
.dn-rail-list a {
	--current-font-family: var(--dn-secondary-font-family);
	font-family: var(--current-font-family);
}

.dn-site-header__nav .wp-block-navigation-item__content {
	--current-text-transform: uppercase;
	color: #111;
	padding: .38rem .48rem;
	text-decoration: none;
	text-transform: uppercase;
}

.dn-site-header__nav .wp-block-navigation-item__content:hover,
.dn-site-header__nav .wp-block-navigation-item__content:focus-visible {
	background: #111;
	color: #fff;
	outline-offset: -2px;
	text-decoration: none;
}

.dn-site-header__nav .wp-block-navigation__responsive-container-open {
	color: #111;
}

.dn-site-header__nav .wp-block-navigation__responsive-container-close {
	color: #000;
}

/* Use available header width and let the core Navigation block wrap based on
   actual label lengths. This does not create or force a special second row. */
@media (min-width: 700px) {
	.dn-site-header__nav-wrap.is-layout-constrained > .dn-site-header__nav {
		box-sizing: border-box;
		flex: 1 1 100%;
		margin-inline: auto;
		max-width: min(100%, 1440px);
		width: 100%;
	}

	.dn-site-header__nav .wp-block-navigation__responsive-container-content,
	.dn-site-header__nav .wp-block-navigation__container {
		justify-content: center;
		width: 100%;
	}
}

@media (max-width: 699px) {
	.dn-site-header__brand {
		padding-block: .75rem .65rem;
	}

	.dn-site-header .wp-block-site-logo {
		width: 100px;
	}

	.dn-site-header .wp-block-site-logo img {
		max-width: 100px;
	}

	.dn-site-header__tagline {
		font-size: .58rem;
	}

	.dn-site-header__nav {
		padding: .25rem .75rem;
	}

	.dn-site-header__nav .wp-block-navigation__responsive-container {
		color: #000;
	}

	.dn-site-header__nav .wp-block-navigation__responsive-container-content {
		padding: 1.5rem;
	}

	.dn-site-header__nav .wp-block-navigation-item__content {
		color: #000;
		padding: .55rem 0;
	}
}

/* Compact native footer: no vendor/demo credit or placeholder destination. */
.dn-site-footer {
	background: var(--dn-ink);
	border-top: 3px solid var(--dn-focus);
	color: var(--dn-paper);
	padding: 0;
}

.dn-site-footer__row {
	gap: .5rem 1rem;
	max-width: 1320px;
	padding: 1rem 1.25rem;
}

.dn-site-footer__copyright {
	font-size: .8rem;
	margin: 0;
}

.dn-site-footer__nav {
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .025em;
}

.dn-site-footer__nav .wp-block-navigation-item__content {
	min-height: 44px;
	padding: .65rem .15rem;
	text-decoration: none;
}

/* Font/color audit (2026-09-23): this was a hardcoded one-off light
   blue for "readable link on a dark background" -- the exact same role
   --dn-accent-default-soft already exists for (see :root) and is
   already used in two other dark-background contexts. Switched to the
   shared variable instead of a second, slightly different light blue
   for the same job. */
.dn-site-footer__nav .wp-block-navigation-item__content:hover {
	color: var(--dn-accent-default-soft);
	text-decoration: underline;
	text-decoration-color: currentColor;
	text-decoration-thickness: .12em;
	text-underline-offset: .16em;
}

.dn-site-footer a:focus-visible {
	color: #fff;
	outline-color: var(--dn-accent-default-soft);
	text-decoration: underline;
	text-decoration-color: currentColor;
}

@media (max-width: 699px) {
	.dn-site-footer__row {
		justify-content: center;
		padding: 1rem;
	}

	.dn-site-footer__copyright {
		flex-basis: 100%;
		text-align: center;
	}

	.dn-site-footer__nav {
		justify-content: center;
		width: 100%;
	}
}

/* Article page layout: same two-rail frame as the homepage. DOM order stays
   content-first for screen readers/keyboard navigation; grid areas relocate
   the rails visually on wider screens. */
.dn-article-layout {
	display: grid;
	gap: 2.5rem;
	grid-template-areas:
		"content"
		"railleft"
		"railright";
	grid-template-columns: minmax(0, 1fr);
	margin-inline: auto;
	max-width: 1920px;
	padding: 2rem 1.25rem 3rem;
}

@media (min-width: 600px) {
	.dn-article-layout {
		grid-template-areas:
			"content content"
			"railleft railright";
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 2rem 1.5rem;
	}
}

@media (min-width: 700px) and (max-width: 899px) {
	.dn-article-layout {
		grid-template-areas:
			"railleft content"
			"railright railright";
		grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
		gap: 2rem;
	}
}

@media (min-width: 900px) {
	.dn-article-layout {
		grid-template-areas: "railleft content railright";
		grid-template-columns: minmax(150px, 200px) minmax(0, 1fr) minmax(150px, 200px);
		padding-inline: 1.75rem;
	}
}

@media (min-width: 1200px) and (max-width: 1439px) {
	.dn-article-layout {
		grid-template-columns: clamp(190px, 22vw, 300px) minmax(0, 1fr) clamp(190px, 22vw, 300px);
		gap: 1.5rem;
		padding-inline: 1.25rem;
	}
}

@media (min-width: 1440px) {
	.dn-article-layout {
		grid-template-columns: 300px minmax(0, 1fr) 300px;
		gap: 2rem;
		padding-inline: 1.5rem;
	}
}

.dn-article-layout__content {
	grid-area: content;
	min-width: 0;
}

.dn-article-layout__rail {
	min-width: 0;
}

.dn-article-layout__rail--left {
	grid-area: railleft;
}

.dn-article-layout__rail--right {
	grid-area: railright;
}

/* Article template (templates/single.html). Title area, byline/date, and
   footer taxonomy — see docs/ARTICLE-PAGE-CLEAN-ROOM-SPEC-2026-09-18.md
   sections 1-3 for the legacy behavior this reconstructs.
   .dn-article-category (the category label above the title) was
   removed 2026-09-23 per Justin's review (item 17: "remove... the
   category name [above the title]. It appears at the end with the
   tags, which is fine") -- deleted the now-unused rule along with the
   block in single.html rather than leave dead CSS. */

.dn-article-header .wp-block-post-title {
	margin-block: .35rem .5rem;
}

.dn-article-meta {
	align-items: center;
	color: var(--dn-muted);
	gap: .4rem;
}

.dn-article-meta > *:not(:first-child)::before {
	content: "\00B7";
	margin-inline-end: .4rem;
}

.dn-article-footer {
	border-top: 1px solid var(--dn-rule);
	gap: .75rem 1.5rem;
	margin-top: 2.5rem;
	padding-top: 1rem;
}

/* Discussion (comments). Numbered markers + a light connecting rule for
   replies are a deliberate modern equivalent of classic Daily Nous's
   comment timeline (spec section 4) — kept for character, not reproduced
   pixel-for-pixel. No avatar/Gravatar blocks are used anywhere here. */
.dn-discussion {
	border-top: 1px solid var(--dn-rule);
	margin-top: 2.5rem;
	padding-top: 1.5rem;
}

.dn-discussion .wp-block-comments-title {
	font-size: 1.1rem;
}

.wp-block-comment-template {
	counter-reset: dn-comment;
	list-style: none;
	margin: 0;
	padding: 0;
}

.wp-block-comment-template > li {
	counter-increment: dn-comment;
}

.wp-block-comment-template > li > .wp-block-comment-template {
	border-inline-start: 1px solid var(--dn-rule);
	margin-block-start: 1rem;
	padding-inline-start: 1.25rem;
}

.dn-comment {
	border-top: 1px solid var(--dn-rule);
	padding-block: 1.1rem;
}

.wp-block-comment-template > li:first-child > .dn-comment {
	border-top: none;
}

.dn-comment::before {
	color: #888;
	content: counter(dn-comment) ".";
	font-weight: 700;
	margin-inline-end: .4rem;
}

.dn-comment-meta {
	color: var(--dn-muted);
	gap: .4rem;
}

.dn-comment-meta > *:not(:first-child)::before {
	content: "\00B7";
	margin-inline-end: .4rem;
}

.dn-comment-actions {
	gap: 1rem;
	margin-top: .5rem;
}

.dn-comment-actions a {
	font-weight: 700;
	text-transform: uppercase;
	font-size: .72rem;
	letter-spacing: .04em;
}

@media (max-width: 699px) {
	.wp-block-comment-template > li > .wp-block-comment-template {
		padding-inline-start: .75rem;
	}
}


/* Homepage cards: zero inherited top margin and add responsive horizontal inset. */
.dn-home-feed > li {
	box-sizing: border-box;
	margin-block-start: 0;
	padding-inline: clamp(1rem, 2.5vw, 2rem);
}

/* Rail labels: keep Anima Style Manager custom-property typography from expanding h2 labels in environments with different stored theme settings. */
.dn-rail-label {
	--font-size: .78rem;
	--current-font-size: .78rem;
	--current-line-height: 1.2;
	font-size: var(--current-font-size);
	line-height: var(--current-line-height);
}

/* Superseded 2026-09-21 by the full-card black/white invert above (owner
   didn't see the DN-blue title-only version working as expected and
   asked for the full-card treatment instead -- kept as a comment, not
   silently deleted, so the reasoning trail isn't lost):
   .dn-home-feed .wp-block-post-title a:hover,
   .dn-home-feed .wp-block-post-title a:focus-visible,
   .dn-search-feed .wp-block-post-title a:hover,
   .dn-search-feed .wp-block-post-title a:focus-visible {
       color: var(--dn-focus);
   }
   The :root --theme-links-color fix (still in effect, see above) still
   does the real job of stopping every OTHER link from going invisible on
   hover; this card-hover rule was the one deliberate exception, now
   handled by the full-invert rules instead. */

/* Search cards use the same restrained geometry as the homepage feed. */
.dn-search-feed > li {
	box-sizing: border-box;
	margin-block-start: 0;
	padding-inline: clamp(1rem, 2.5vw, 2rem);
}

/* Posts hub lead story (owner, 2026-09-22): the single latest post,
   deliberately larger than the small excerpt cards in the feed below --
   bigger title, full-width image, a longer excerpt at the normal body
   size rather than the feed's "small" token. A rule (not a card border --
   this theme doesn't box cards) separates it from the H1/search/filters
   that now sit underneath it. */
.dn-posts-hub__lead {
	border-bottom: 1px solid var(--dn-ink);
	margin-bottom: 2rem;
	padding-bottom: 1.75rem;
}

.dn-posts-hub__lead-feed .wp-block-post-featured-image img {
	aspect-ratio: 21 / 9;
	object-fit: cover;
}

.dn-posts-hub__lead-title {
	/* Same Style Manager --current-font-size override pattern used
	   elsewhere in this file (e.g. .dn-rail-module .linklist above) --
	   the plugin's blanket cascade otherwise beats a plain font-size
	   declaration regardless of specificity. No !important needed. */
	--current-font-size: clamp(1.6rem, 4vw, 2.6rem);
	font-size: var(--current-font-size);
	line-height: 1.15;
}

.dn-posts-hub__lead .wp-block-post-excerpt {
	font-size: 1.05rem;
	line-height: 1.55;
	max-width: 46rem;
}

/* Posts hub: browse controls remain compact and text-first. */
.dn-posts-hub__content > h1 {
	border-bottom: 1px solid var(--dn-ink);
	font-size: clamp(1.7rem, 3vw, 2.4rem);
	margin: 0 0 1.25rem;
	padding-bottom: .6rem;
}

.dn-posts-hub__search {
	margin-bottom: 1.5rem;
}

.dn-posts-hub__search .wp-block-search__input {
	font-size: 1rem;
	min-height: 2.75rem;
	padding-inline: .75rem;
}

.dn-posts-hub__search .wp-block-search__button {
	min-height: 2.75rem;
}

.dn-posts-hub__filters {
	align-items: flex-start;
	border-bottom: 1px solid var(--dn-rule);
	gap: 1.5rem;
	margin-bottom: 1.75rem;
	padding-bottom: 1.25rem;
}

.dn-posts-hub__filter {
	box-sizing: border-box;
	flex: 1 1 16rem;
	min-width: 0;
}

.dn-posts-hub__filter h2 {
	font-size: .82rem;
	letter-spacing: .06em;
	margin: 0 0 .55rem;
	text-transform: uppercase;
}

.dn-posts-hub__filter .dn-rail-list {
	font-size: .92rem;
}

.dn-posts-hub__filter .dn-rail-list li {
	padding-block: .25rem;
}

.dn-posts-hub__filter > p {
	font-size: .85rem;
	font-weight: 700;
	margin: .55rem 0 0;
}

/* wpDiscuz comment-toolbar icon fix (owner-reported P0, 2026-09-21:
   "oversized arrows/plus/X icons"). Root cause confirmed in the rendered
   HTML: wpDiscuz's own "Share on X" icon is a raw inline
   `<svg viewBox="0 0 512 512">` with no width/height attributes at all --
   unlike every sibling icon (vote arrows, search, reply), which all carry
   explicit width="24" height="24". Without a size, the SVG falls back to
   filling its container's width, rendering the X mark at full column
   width. This targets exactly that broken case (`svg:not([width])`)
   without touching any of the already-correctly-sized sibling icons, and
   without editing wpDiscuz's own plugin files. */
.wpf-cta svg:not( [width] ),
#wpdcom .wpd-vote svg,
#wpdcom .wpd-filter svg {
	height: 1em;
	width: 1em;
}

/* Justin S: remove comment share-on-X without editing wpDiscuz. */
.wpd-comment-share {
	display: none;
}

/* Reader feedback after launch (Brian Weatherson, 2026-09-25): the
   wpDiscuz comment area had internally inconsistent typography. In
   particular, ".wpd-reply-to" rendered at 13px while its linked name
   inherited the page/body size, making the reply target read much larger
   than the label. Normalize the plugin's public comment chrome without
   changing the article/body scale. */
#wpdcom {
	--dn-comment-body-size: 1rem;
	--dn-comment-meta-size: .875rem;
	--dn-comment-control-size: .875rem;
}

#wpdcom .wpd-comment-author,
#wpdcom .wpd-comment-author a,
#wpdcom .wpd-comment-date,
#wpdcom .wpd-reply-to,
#wpdcom .wpd-reply-to a,
#wpdcom .wpd-reply-button {
	--current-font-size: var(--dn-comment-meta-size);
	font-size: var(--current-font-size);
	line-height: 1.45;
}

#wpdcom .wpd-reply-to a {
	font-size: inherit;
}

#wpdcom .wpd-comment-text,
#wpdcom .wpd-comment-text p,
#wpdcom .ql-editor {
	--current-font-size: var(--dn-comment-body-size);
	font-size: var(--current-font-size);
	line-height: 1.6;
}

#wpdcom input,
#wpdcom textarea,
#wpdcom .wpd-field {
	--current-font-size: var(--dn-comment-control-size);
	font-size: var(--current-font-size);
}

/* UAT wpDiscuz repair (2026-09-25/26): Anima/global block rules can leave
   wpDiscuz helpers behaving like full-width blocks: avatar columns stretch to
   the comment width, field icons become their own rows, and reply SVGs dwarf
   vote icons. Reset only wpDiscuz chrome so the plugin regains compact,
   internally consistent controls without changing article content. */
#wpdcom .wpd-thread-head {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem .85rem;
}

#wpdcom .wpd-thread-info,
#wpdcom .wpd-thread-filter,
#wpdcom .wpd-filter,
#wpdcom .wpdiscuz-sort-buttons {
	align-items: center;
	display: inline-flex;
	flex-wrap: wrap;
	gap: .35rem .55rem;
	height: auto;
	width: auto;
}

#wpdcom .wpd-comment-footer {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: .35rem .75rem;
	height: auto;
}

#wpdcom .wpd-comment-wrap {
	display: grid;
	gap: .75rem 1rem;
	grid-template-columns: 64px minmax(0, 1fr);
}

#wpdcom .wpd-comment-left,
#wpdcom .wpd-avatar {
	display: block;
	height: auto;
	margin: 0;
	max-width: 64px;
	width: 64px;
}

#wpdcom .wpd-comment-right {
	min-width: 0;
	width: auto;
}

#wpdcom .wpd-avatar img,
#wpdcom img.avatar {
	border-radius: 50%;
	display: block;
	height: 64px;
	max-height: 64px;
	max-width: 64px;
	object-fit: cover;
	width: 64px;
}

#wpdcom .wpd-field-comment .wpd-avatar:empty,
#wpdcom .wpd-field-comment .wpd-avatar:not( :has( img ) ) {
	display: none;
}

#wpdcom .wpdiscuz-item.wpd-has-icon {
	position: relative;
}

#wpdcom .wpdiscuz-item.wpd-has-icon .wpd-field-icon {
	align-items: center;
	color: var(--dn-muted);
	display: inline-flex;
	font-size: .875rem;
	height: 2.45rem;
	justify-content: center;
	left: .75rem;
	pointer-events: none;
	position: absolute;
	top: 0;
	width: 1.1rem;
}

#wpdcom .wpdiscuz-item.wpd-has-icon .wpd-field {
	padding-left: 2.2rem !important;
}

#wpdcom .wpd-field-icon i,
#wpdcom .wpd_label i,
#wpdcom .wpd-reply-button svg {
	display: inline-block;
	font-size: .875rem;
	height: 1em;
	line-height: 1;
	max-height: 1em;
	max-width: 1em;
	width: 1em;
}

#wpdcom .wpd-reply-button {
	align-items: center;
	display: inline-flex;
	gap: .25rem;
	height: auto;
	line-height: 1.25;
	width: auto;
}

#wpdcom .wpd-vote,
#wpdcom .wpd-vote-up,
#wpdcom .wpd-vote-down,
#wpdcom .wpd-vote-result {
	align-items: center;
	display: inline-flex;
	font-size: var(--dn-comment-control-size);
	height: auto;
	line-height: 1;
	width: auto;
}

#wpdcom .wpd-vote {
	gap: .25rem;
}

#wpdcom .wpd-vote svg {
	display: block;
	max-height: 1em;
	max-width: 1em;
}

@media (max-width: 699px) {
	#wpdcom .wpd-comment-wrap {
		gap: .5rem .75rem;
		grid-template-columns: 48px minmax(0, 1fr);
	}

	#wpdcom .wpd-comment-left,
	#wpdcom .wpd-avatar {
		max-width: 48px;
		width: 48px;
	}

	#wpdcom .wpd-avatar img,
	#wpdcom img.avatar {
		height: 48px;
		max-height: 48px;
		max-width: 48px;
		width: 48px;
	}
}

/* Sticky header anchor offsets: links to #comments/#respond and direct
   comment permalinks should land below the fixed compact masthead instead
   of tucking the target under it. */
#comments,
#respond,
#wpdcom,
#wpdcom .wpd-comment,
[id^="comment-"] {
	scroll-margin-top: 20rem;
}

@media (max-width: 699px) {
	#comments,
	#respond,
	#wpdcom,
	#wpdcom .wpd-comment,
	[id^="comment-"] {
		scroll-margin-top: 1rem;
	}

		/* WP Dark Mode placement is now a Customizer choice; only the
		   explicit hidden state suppresses the front-end control here. */
		.dn-dark-mode-hidden .wp-dark-mode-floating-switch {
			display: none !important;
		}
	}

/* wpDiscuz contrast fix (found during a hover/focus audit, 2026-09-23 --
   not hover-specific, present at rest too, so out of scope for that
   audit's own fix but flagged and addressed here). wpDiscuz's
   configured "Primary Color" (wc_options.thread_styles.primaryColor,
   #00B38F) is used consistently as this site's comment-widget accent --
   correctly high-contrast where it's a background (e.g. white text on
   this teal for the submit button), but guest commenters' names
   (`.wpd-blog-guest .wpd-comment-author`, the by far most common case on
   this site -- registered/logged-in commenters get a separate, already-
   safe #666666) use it as *text* directly on the white page background:
   2.68:1 contrast, below WCAG AA's 4.5:1 minimum for normal text.
   Darkened to the closest shade that clears AA with a small safety
   margin (4.91:1) rather than changing hue/brand -- still reads as the
   same teal. `body` prefix only to add one specificity level over
   wpDiscuz's own matching selector, without `!important`; the plugin
   file itself is never edited. */
body #wpdcom .wpd-blog-guest .wpd-comment-author,
body #wpdcom .wpd-blog-guest .wpd-comment-author a {
	color: #008066;
}

/* The dn-public-comments-archive plugin (first-party, powers /latest-
   comments/) ships no stylesheet of its own -- everything comes from
   here. Found via live mobile testing 2026-09-22: a real approved
   comment quoting a long unbroken URL forced the whole page 71px wider
   than the 390px viewport, since neither the comment body nor its links
   had any word-wrap rule. Real content will always occasionally include
   a long token like this (URLs, DOIs, etc.), so wrap on it rather than
   trust comment text to stay short. */
.dn-public-comments-archive__body,
.dn-public-comments-archive__body a {
	overflow-wrap: break-word;
	word-break: break-word;
}