/* ==========================================================================
   Joseph Kamara Journal — design system  (Fable run)
   --------------------------------------------------------------------------
   Point of view: an engineering notebook. Prose is quiet system sans in
   graphite ink; the APPARATUS — dates, tags, labels, buttons — is monospaced,
   so the journal's chronological machinery carries the builder identity
   without any terminal cosplay. One accent: ink blue. Reading comfort beats
   visual interest everywhere they conflict.

   Colour architecture: theme.json palette slugs point at the custom
   properties below, so editor-chosen colours follow the scheme instead of
   baking a hex into content. The site is DARK-ONLY by decision (2026-08-19):
   the gold accent has no readable equivalent on a pale ground — the darkest
   usable gold reaches only 4.49:1 on parchment and reads brown — so a light
   scheme would have to abandon the brand colour. One scheme, no toggle, no
   [data-theme] branching. That is a deliberate trade: readers who prefer
   light pages get no choice here.

   Fonts: system stacks for prose. Fraunces — self-hosted in
   assets/fonts/, registered via theme.json fontFace so the editor sees it
   too — is the single webfont and is used on headings and the wordmark only.
   font-display: swap, so prose never waits on it. No CDN, no third-party
   request, ever.
   ========================================================================== */

/* --------------------------------- 1. Tokens — the only scheme (navy/gold) */
/* Every pair below was computed before use, not eyeballed. Ratios are against
   --jk-page unless noted; --jk-line is decorative and never bounds a control. */

:root {
	--jk-page: #1b2444;        /* space cadet, deepened — gold reads louder on it */
	--jk-ink: #f4f1e8;         /* 13.45:1 */
	--jk-muted: #b9bbc7;       /* 7.95:1 */
	--jk-accent: #ffd700;      /* 10.83:1 */
	--jk-accent-strong: #ffe45c; /* 11.94:1 — hover/active */
	--jk-surface: #151b35;     /* masthead + footer bands */
	--jk-line: #2e3a63;        /* decorative hairline only — never a control boundary */
	--jk-control: #7c88ae;     /* control boundaries; 4.33:1, clears the 3:1 floor */
	--jk-placeholder: #a9b0c4; /* 7.01:1 */
	--jk-selection: #3a4e86;   /* ink on it: 7.11:1 */
	--jk-focus: #ffd700;

	--jk-hair: 1px;
	color-scheme: dark;
}

/* ----------------------------------------------------------- 3. Base */

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	/* The brief forbids layout shift; without a reserved gutter the centred
	   column sits differently on scrolling vs non-scrolling pages. */
	scrollbar-gutter: stable;
}

body {
	background-color: var(--jk-page);
	color: var(--jk-ink);
	text-rendering: optimizeLegibility;
	font-synthesis-weight: none;
}

::selection {
	background-color: var(--jk-selection);
	color: var(--jk-ink);
}

/* Sticky footer. WordPress wraps every template in .wp-site-blocks — that
   wrapper, not body, is the flex container (a body-level rule matches nothing
   in a block theme). Prevents short pages stranding the footer mid-viewport. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.wp-site-blocks > footer,
.wp-site-blocks > .jk-footer {
	margin-top: auto;
}

/* ------------------------------------------- 4. Focus, skip link, motion */

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--jk-focus);
	outline-offset: 2px;
	border-radius: 2px;
}

.jk-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 0.6em 1em;
	background-color: var(--jk-page);
	color: var(--jk-accent);
	border: var(--jk-hair) solid var(--jk-control);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
}

.jk-skip:focus {
	left: var(--wp--preset--spacing--40);
	top: var(--wp--preset--spacing--30);
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ------------------------------------------------- 5. Long-form rhythm */

/* Headings bind DOWNWARD: clearly more air above than below, so a heading
   introduces rather than captions. Real class+element specificity on purpose —
   :where() zeroes out and loses to core's generated block-gap rules. */
.entry-content > :is(h2, h3, h4),
.jk-prose > :is(h2, h3, h4) {
	margin-top: var(--wp--preset--spacing--60);
	margin-bottom: var(--wp--preset--spacing--30);
}

:where(.entry-content, .jk-prose) > :where(p, ul, ol, pre, figure, blockquote) {
	margin-block: var(--wp--preset--spacing--40);
}

:where(.entry-content, .jk-prose) :where(ul, ol) {
	padding-inline-start: 1.35em;
}

:where(.entry-content, .jk-prose) :where(li + li) {
	margin-top: 0.3em;
}

/* Prose links: accent ink, modest underline that thickens on hover. */
:where(.entry-content, .jk-prose) a {
	text-underline-offset: 0.16em;
	text-decoration-thickness: 0.07em;
}

:where(.entry-content, .jk-prose) a:hover {
	color: var(--jk-accent-strong);
	text-decoration-thickness: 0.14em;
}

/* Inline code: apparatus voice, slightly reduced (mono runs visually large). */
:where(.entry-content, .jk-prose) :not(pre) > code {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.86em;
	background-color: var(--jk-surface);
	padding: 0.12em 0.34em;
	border-radius: 2px;
}

/* Code blocks scroll inside themselves — overflow belongs to the block,
   never to the page (that is gate G8). */
.wp-block-code {
	overflow-x: auto;
	max-width: 100%;
	border-left: 2px solid var(--jk-line);
}

.wp-block-code code {
	white-space: pre;
	tab-size: 2;
}

/* Quotation: a second voice, marked by a rule and muted apparatus for the
   citation — no size inflation, no italics theatrics. */
blockquote.wp-block-quote {
	border-inline-start: 2px solid var(--jk-control);
	padding-inline-start: 1em;
	font-style: normal;
}

blockquote.wp-block-quote cite {
	display: block;
	margin-top: 0.55em;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	color: var(--jk-muted);
}

/* Separator: a short flush-left tick, not a page-wide fence. Core centres
   constrained children with !important, so width tricks lose; instead the
   rule spans the column but only its left 3.5rem is inked via a gradient. */
hr.wp-block-separator {
	border: 0;
	height: var(--jk-hair);
	background: linear-gradient(to right, var(--jk-control) 0 3.5rem, transparent 3.5rem);
	margin-block: var(--wp--preset--spacing--60);
	opacity: 1;
}

img, figure img {
	max-width: 100%;
	height: auto;
}

figcaption {
	color: var(--jk-muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

/* A linked post title is an <a>, so theme.json's elements.link would paint it
   accent blue — a headline that reads as a hyperlink CTA (inherited lesson L11,
   confirmed live on this run's own render). Titles are ink; accent is earned on
   hover only. Underline stays off at rest for titles specifically — affordance
   on index rows is carried by the hover treatment plus the mono date rail. */
.wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.wp-block-post-title a:hover {
	color: var(--jk-accent);
	text-decoration: underline;
	text-underline-offset: 0.14em;
	text-decoration-thickness: 0.06em;
}

/* --------------------------------------------------- 6. Apparatus voice */

/* Anything carrying .jk-meta is machinery, not prose: mono, small, muted. */
.jk-meta,
.jk-meta a {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	color: var(--jk-muted);
}

.jk-meta a {
	text-decoration: none;
}

.jk-meta a:hover {
	color: var(--jk-accent);
	text-decoration: underline;
	text-underline-offset: 0.16em;
}

/* ------------------------------------------------- 7. Controls & forms */

.wp-block-search__input,
input[type="search"] {
	background-color: var(--jk-surface);
	color: var(--jk-ink);
	border: var(--jk-hair) solid var(--jk-control);
	border-radius: 2px;
	padding: 0.5em 0.7em;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
}

/* Authored per scheme; browser-default placeholder grey both ignores the
   theme and misses AA. Firefox dims via opacity — reset it. */
.wp-block-search__input::placeholder,
input[type="search"]::placeholder {
	color: var(--jk-placeholder);
	opacity: 1;
}

/* One button component in both schemes: outlined accent (theme.json sets it;
   this guards against core button styles reasserting a fill). */
.wp-block-search__button,
.wp-element-button {
	background-color: transparent;
	color: var(--jk-accent);
	border: var(--jk-hair) solid var(--jk-accent);
	border-radius: 2px;
	font-family: var(--wp--preset--font-family--mono);
}

.wp-block-search__button:hover,
.wp-element-button:hover {
	color: var(--jk-accent-strong);
	border-color: var(--jk-accent-strong);
	background-color: transparent;
}

/* ------------------------------------------------ 8. Masthead & footer */

.jk-masthead {
	background-color: var(--jk-surface);
	border-bottom: var(--jk-hair) solid var(--jk-line);
	padding-block: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--70);
}

.jk-masthead-row {
	gap: var(--wp--preset--spacing--40);
}

/* The wordmark is identity, not a heading — it ships as a <p> so every
   template owns its own single h1. Set in mono: the name is part of the
   notebook's apparatus, stamped on every page. */
.wp-block-site-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.01em;
}

.wp-block-site-title a {
	color: var(--jk-ink);
	text-decoration: none;
}

.wp-block-site-title a:hover {
	color: var(--jk-accent);
	text-decoration: underline;
	text-underline-offset: 0.16em;
}

.jk-masthead nav a,
.jk-masthead .wp-block-page-list a,
.jk-masthead .wp-block-home-link a {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	color: var(--jk-muted);
	text-decoration: none;
}

.jk-masthead nav a:hover {
	color: var(--jk-accent);
	text-decoration: underline;
	text-underline-offset: 0.16em;
}

/* Where you are: core marks the current item aria-current="page"; give it ink
   weight and the accent-tinted underline the titles use (pass-2 critique). */
.jk-masthead nav a[aria-current="page"] {
	color: var(--jk-ink);
	text-decoration: underline;
	text-decoration-color: var(--jk-accent);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.16em;
}

.jk-footer {
	border-top: var(--jk-hair) solid var(--jk-line);
	margin-top: var(--wp--preset--spacing--80);
	padding-block: var(--wp--preset--spacing--50);
}

.jk-footer p {
	margin: 0;
}

/* Colophon stacks identity above the writing line; the trilogy reference is
   apparatus, not an advertisement — .jk-meta already dresses the link. */
.jk-colophon > p + p {
	margin-top: 0.35em;
}

/* ------------------------------------------------- 9. Index & entry rows */

/* The site's rule: pages carry no dates. Search is the one listing where posts
   and pages mix, and WordPress dates both — hide the date on type-page rows so
   the About result cannot masquerade as a dated entry (pass-2 critique,
   confirmed: the type-page li rendered a post-date). Round 2 wrapped the date
   in the .jk-rail group (date · thread); pages have neither, so the whole rail
   goes, not just the date — an empty flex row would still hold its margin. */
.jk-entries .type-page .wp-block-post-date,
.jk-entries .type-page .jk-rail {
	display: none;
}

.jk-index-head {
	margin-bottom: var(--wp--preset--spacing--50);
}

.jk-index-head h1 {
	margin: 0 0 0.2em 0;
	font-size: var(--wp--preset--font-size--x-large);
}

.jk-tagline {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	color: var(--jk-muted);
}

/* core/post-template renders a <ul>; strip the affordance — semantics stay,
   bullets would fight the date rail. */
.jk-entries {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Date leads each entry: a mono rail down the page, tight to its title so the
   pair reads as one item. Uneven titles then cannot orphan their dates. Space
   between ENTRIES does the structural work — no dividers. */
.jk-entries > li {
	margin: 0 0 var(--wp--preset--spacing--60) 0;
}

.jk-entries > li:last-child {
	margin-bottom: 0;
}

/* The date rail is the one place the accent is spent by default. The index is
   a chronology, so the date is the spine — putting the gold there repeats it
   once per entry, at small mono sizes where a saturated colour is an accent
   rather than a shout. Everything else stays ink; nav is ink with a gold
   underline on the current page only. Measured 10.83:1 on --jk-page. */
.jk-entries .jk-meta {
	margin: 0 0 0.15em 0;
}

.jk-entries .jk-meta,
.jk-entries .jk-meta a,
.jk-entry-head .jk-meta,
.jk-entry-head .jk-meta a {
	color: var(--jk-accent);
}

.jk-entry-title {
	margin: 0 0 0.25em 0;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.3;
}

/* The index exists to be clicked into; a title that reads as a plain heading
   hides the journal's core action (pass-1 critique, confirmed at computed
   level: decoration was none). Resting affordance is a quiet accent-tinted
   underline; hover commits to full accent. */
.jk-entry-title a {
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--jk-accent) 40%, transparent);
	text-decoration-thickness: 0.05em;
	text-underline-offset: 0.22em;
	text-decoration-skip-ink: auto;
}

.jk-entry-title a:hover {
	text-decoration-color: currentColor;
}

.jk-entry-excerpt,
.jk-entry-excerpt p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--jk-muted);
}

.jk-pagination {
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--40);
	border-top: var(--jk-hair) solid var(--jk-line);
}

/* With one page of posts there are no prev/next links, and the group would
   render as an orphaned rule above the footer — seen in this run's own render.
   No links, no apparatus. */
.jk-pagination:not(:has(a)) {
	display: none;
}

.jk-pagination a,
.jk-pagination .wp-block-query-pagination-previous,
.jk-pagination .wp-block-query-pagination-next {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
}

/* --------------------------------------------------- 10. Single entry */

.jk-entry-head {
	margin-bottom: var(--wp--preset--spacing--60);
}

.jk-entry-head h1 {
	margin: 0 0 0.3em 0;
}

.jk-entry-head .jk-meta {
	gap: 0.6em;
}

.jk-entry-head .jk-meta p {
	margin: 0;
}

.jk-entry-foot {
	margin-top: var(--wp--preset--spacing--70);
	padding-top: var(--wp--preset--spacing--40);
	border-top: var(--jk-hair) solid var(--jk-line);
}

.jk-entry-foot .wp-block-post-terms {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	color: var(--jk-muted);
}

.jk-prevnext {
	margin-top: var(--wp--preset--spacing--40);
	gap: var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
}

.jk-prevnext a {
	text-decoration: none;
}

.jk-prevnext a:hover {
	text-decoration: underline;
	text-underline-offset: 0.16em;
}

/* ---------------------------------------------------- 11. Search & 404 */

.jk-search .wp-block-search__inside-wrapper {
	gap: 0.5em;
}

@media (max-width: 480px) {
	.jk-search .wp-block-search__input {
		min-width: 0;
	}
}

/* ------------------------------------------------------- 12. Patterns */

/* Pull quote: set on the ink rule, no size theatrics — repetition of text the
   reader already met must not shout. */
.jk-pull {
	margin-block: var(--wp--preset--spacing--60);
	padding: 0;
	border: 0;
	border-top: 2px solid var(--jk-control);
	border-bottom: 2px solid var(--jk-control);
	text-align: left;
}

.jk-pull blockquote {
	margin: 0;
	padding-block: var(--wp--preset--spacing--40);
}

.jk-pull p {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.4;
	margin: 0;
}

/* Aside: a margin note folded into the column — apparatus-adjacent, quieter
   than prose, marked by the decorative hairline (not the control token: this
   is typography, not a control boundary). */
.jk-aside {
	margin-block: var(--wp--preset--spacing--50);
	padding-inline-start: var(--wp--preset--spacing--40);
	border-inline-start: 2px solid var(--jk-line);
	color: var(--jk-muted);
	font-size: var(--wp--preset--font-size--small);
}

.jk-aside > :first-child { margin-top: 0; }
.jk-aside > :last-child { margin-bottom: 0; }

.jk-figure {
	margin-block: var(--wp--preset--spacing--50);
}

.jk-code-note {
	margin-top: calc(-0.4 * var(--wp--preset--spacing--40));
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	color: var(--jk-muted);
}

.jk-manual-entry {
	margin-block: var(--wp--preset--spacing--50);
}

.jk-now {
	margin-block: var(--wp--preset--spacing--60);
}

.jk-now h2 {
	margin-bottom: 0.15em;
}

/* Author note: closes an entry in the apparatus voice. Text only — no avatar,
   no third-party fetch. */
.jk-author {
	margin-top: var(--wp--preset--spacing--70);
	padding-top: var(--wp--preset--spacing--40);
	border-top: var(--jk-hair) solid var(--jk-line);
}

.jk-author p {
	margin: 0;
}

.jk-author-name {
	font-weight: 650;
	margin-top: 0.1em;
}

.jk-author-bio {
	margin-top: 0.35em;
	font-size: var(--wp--preset--font-size--small);
	color: var(--jk-muted);
}

.jk-author .jk-meta a {
	color: var(--jk-accent);
}

/* The Shelf: the trilogy as workbench facts. Book titles are prose-world
   objects (sans, ink); status and link slots are apparatus. The books sit
   inside a group, so the entry-content downward-binding heading rule does not
   reach them — the shelf owns its own rhythm. */
.jk-book {
	margin-block: var(--wp--preset--spacing--60);
}

.jk-shelf .jk-book:first-child {
	margin-top: var(--wp--preset--spacing--50);
}

.jk-book h2 {
	margin: 0 0 0.25em 0;
	font-size: var(--wp--preset--font-size--x-large);
}

.jk-book-status {
	margin: 0 0 0.7em 0;
}

.jk-book > p:not(.jk-meta) {
	margin-block: 0;
}

.jk-book-links {
	margin-top: 0.7em;
}