/*
 * Core design tokens, reset, typography, and shared components.
 * Aesthetic: Editorial medical classicism — warm paper, ink, oxblood accent.
 */

:root {
	/* Color — paper and ink */
	--paper:        #F5EFE3;
	--paper-2:      #ECE2CC;
	--paper-3:      #E3D6B8;
	--ink:          #141821;
	--ink-soft:     #2B3340;
	--ink-muted:    #5B5E67;
	--line:         rgba(20, 24, 33, 0.14);
	--line-strong:  rgba(20, 24, 33, 0.28);

	/* Color — accents */
	--oxblood:      #7A1F2B;
	--oxblood-dim:  #5A1720;
	--oxblood-ink:  #3D0E14;
	--copper:       #B5683C;
	--sage:         #4F6A5C;
	--gold:         #A8834E;

	/* Typography */
	--font-display: "Fraunces", ui-serif, "Iowan Old Style", Cambria, Georgia, serif;
	--font-body:    "Spectral", ui-serif, Georgia, "Times New Roman", serif;
	--font-sans:    "Commissioner", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

	/* Scale — base 18px, ratio 1.25 */
	--fs-xs:   0.72rem;
	--fs-sm:   0.82rem;
	--fs-base: 1rem;
	--fs-md:   1.18rem;
	--fs-lg:   1.44rem;
	--fs-xl:   1.8rem;
	--fs-2xl:  2.25rem;
	--fs-3xl:  2.82rem;
	--fs-4xl:  3.55rem;
	--fs-5xl:  4.6rem;
	--fs-6xl:  5.9rem;

	/* Spacing — base 4 */
	--s-1:  4px;
	--s-2:  8px;
	--s-3:  12px;
	--s-4:  16px;
	--s-5:  24px;
	--s-6:  32px;
	--s-7:  44px;
	--s-8:  56px;
	--s-9:  72px;
	--s-10: 96px;
	--s-11: 128px;
	--s-12: 160px;

	/* Layout */
	--wrap-wide: 1360px;
	--wrap:      1200px;
	--wrap-narrow: 880px;
	--gutter:    clamp(20px, 4vw, 56px);

	/* Motion */
	--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ease-io:  cubic-bezier(0.65, 0, 0.35, 1);
	--dur-fast: 160ms;
	--dur:      260ms;
	--dur-slow: 600ms;

	/* Shadows — ink strokes, not drop shadows (editorial) */
	--lift-1: 0 1px 0 0 var(--line-strong);
	--lift-2: 0 2px 0 0 var(--line-strong), 0 10px 30px -18px rgba(20,24,33,0.18);
	--lift-3: 0 2px 0 0 var(--ink), 0 28px 60px -30px rgba(20,24,33,0.32);

	/* Radii — subtle, editorial */
	--r-xs: 2px;
	--r-sm: 4px;
	--r-md: 8px;
	--r-lg: 16px;

	font-size: 17px;
}

@media (min-width: 900px) {
	:root { font-size: 18px; }
}
@media (min-width: 1400px) {
	:root { font-size: 18.5px; }
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: 1.62;
	color: var(--ink);
	background: var(--paper);
	font-feature-settings: "kern", "liga", "onum";
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	min-height: 100svh;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-6) 0; }

:focus-visible {
	outline: 2px solid var(--oxblood);
	outline-offset: 3px;
	border-radius: var(--r-xs);
}
::selection { background: var(--oxblood); color: var(--paper); }

/* Skip link */
.zj-skip {
	position: fixed; top: -40px; left: 12px; z-index: 999;
	background: var(--ink); color: var(--paper);
	padding: 8px 14px; font-family: var(--font-sans);
	font-size: var(--fs-sm); letter-spacing: 0.04em;
	transition: top var(--dur) var(--ease-out);
}
.zj-skip:focus { top: 12px; }

/* Screen-reader only */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}

/* Typography — display */
h1, .zj-h1, h2, .zj-h2, h3, .zj-h3, h4, .zj-h4 {
	font-family: var(--font-display);
	font-weight: 450;
	line-height: 1.08;
	letter-spacing: -0.01em;
	color: var(--ink);
	font-variation-settings: "opsz" 144;
	margin: 0 0 var(--s-4);
}
h1, .zj-h1 {
	font-size: clamp(2.4rem, 4.7vw, 4.4rem);
	font-weight: 350;
	line-height: 1.04;
	letter-spacing: -0.02em;
}
h2, .zj-h2 {
	font-size: clamp(1.8rem, 3.2vw, 2.8rem);
	line-height: 1.1;
	font-weight: 450;
}
h3, .zj-h3 {
	font-size: clamp(1.3rem, 1.8vw, 1.65rem);
	font-weight: 450;
	line-height: 1.2;
}
h4, .zj-h4 {
	font-size: var(--fs-md);
	font-weight: 500;
	line-height: 1.3;
}
p { margin: 0 0 var(--s-4); }
em, i { font-style: italic; font-family: var(--font-body); }
strong, b { font-weight: 600; }

/* Eyebrow — editorial dateline style */
.zj-eyebrow {
	font-family: var(--font-sans);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--oxblood);
	margin: 0 0 var(--s-4);
	display: flex;
	align-items: center;
	gap: 12px;
}
.zj-eyebrow::before {
	content: "";
	width: 32px; height: 1px;
	background: currentColor;
	flex: 0 0 auto;
}
.zj-eyebrow--center { justify-content: center; }
.zj-eyebrow--center::after {
	content: "";
	width: 32px; height: 1px;
	background: currentColor;
	flex: 0 0 auto;
}

/* Container */
.zj-container {
	width: 100%;
	max-width: var(--wrap);
	margin: 0 auto;
	padding-inline: var(--gutter);
}
.zj-container--wide { max-width: var(--wrap-wide); }
.zj-container--narrow { max-width: var(--wrap-narrow); }

/* Section */
.zj-section {
	padding-block: clamp(56px, 8vw, 128px);
	position: relative;
}
.zj-section--tight { padding-block: clamp(40px, 6vw, 88px); }
.zj-section--cream { background: var(--paper-2); }
.zj-section--ink {
	background: var(--ink);
	color: var(--paper);
}
.zj-section--ink h1, .zj-section--ink h2, .zj-section--ink h3, .zj-section--ink h4 { color: var(--paper); }
.zj-section--ink .zj-eyebrow { color: var(--copper); }
.zj-section--ink .zj-sec-head__text,
.zj-section--ink .zj-prose,
.zj-section--ink p { color: color-mix(in oklab, var(--paper) 78%, transparent); }

/* Page hero — shared across interior pages */
.zj-page-hero {
	padding-top: clamp(72px, 9vw, 132px);
	padding-bottom: clamp(40px, 5vw, 72px);
	border-bottom: 1px solid var(--line);
	position: relative;
}
.zj-page-hero__title {
	max-width: 22ch;
	margin: 0;
}
.zj-page-hero__lead {
	font-family: var(--font-body);
	font-size: clamp(1.1rem, 1.6vw, 1.38rem);
	max-width: 52ch;
	margin: var(--s-5) 0 0;
	color: var(--ink-soft);
	line-height: 1.55;
}

/* Section heading */
.zj-sec-head { margin-bottom: var(--s-8); max-width: 60ch; }
.zj-sec-head--center { margin-inline: auto; text-align: center; }
.zj-sec-head--center .zj-eyebrow { justify-content: center; }
.zj-sec-head--center .zj-eyebrow::after {
	content: "";
	width: 32px; height: 1px;
	background: currentColor;
	flex: 0 0 auto;
}
.zj-sec-head__title { margin: 0 0 var(--s-4); }
.zj-sec-head__text { font-size: var(--fs-md); color: var(--ink-soft); max-width: 52ch; margin: 0; }
.zj-sec-head--center .zj-sec-head__text { margin-inline: auto; }

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 22px;
	border-radius: 999px;
	font-family: var(--font-sans);
	font-size: 0.88rem;
	letter-spacing: 0.04em;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--dur) var(--ease-out),
	            color var(--dur) var(--ease-out),
	            transform var(--dur-fast) var(--ease-out),
	            border-color var(--dur) var(--ease-out);
	border: 1px solid transparent;
	white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary {
	background: var(--oxblood);
	color: var(--paper);
	border-color: var(--oxblood);
}
.btn--primary:hover { background: var(--oxblood-ink); border-color: var(--oxblood-ink); }
.btn--ghost {
	background: transparent;
	color: var(--ink);
	border-color: var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--light {
	background: var(--paper);
	color: var(--ink);
	border-color: var(--paper);
}
.btn--light:hover { background: var(--paper-2); }
.btn--text {
	padding: 14px 2px;
	color: var(--oxblood);
	border-bottom: 1px solid currentColor;
	border-radius: 0;
	background: transparent;
}
.btn--text:hover { color: var(--oxblood-ink); }
.btn--small { padding: 10px 18px; font-size: 0.82rem; }
.btn--full { width: 100%; justify-content: center; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }

/* Text link */
.zj-link {
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--font-sans);
	font-size: 0.88rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--oxblood);
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: 1px solid currentColor;
	transition: color var(--dur) var(--ease-out), gap var(--dur) var(--ease-out);
}
.zj-link:hover { color: var(--oxblood-ink); gap: 12px; }

/* Prose (blog content, book descriptions) */
.zj-prose {
	font-size: var(--fs-md);
	line-height: 1.72;
	color: var(--ink-soft);
	max-width: 65ch;
}
.zj-prose p + p { margin-top: var(--s-4); }
.zj-prose h2 { font-size: var(--fs-2xl); margin: var(--s-8) 0 var(--s-4); color: var(--ink); }
.zj-prose h3 { font-size: var(--fs-lg); margin: var(--s-6) 0 var(--s-3); color: var(--ink); }
.zj-prose a { color: var(--oxblood); text-decoration-color: rgba(122, 31, 43, 0.3); }
.zj-prose a:hover { text-decoration-color: currentColor; }
.zj-prose ul, .zj-prose ol { margin: var(--s-4) 0 var(--s-4) var(--s-5); }
.zj-prose ul { list-style: none; padding-left: 0; }
.zj-prose ul li { position: relative; padding-left: 24px; margin-bottom: 6px; }
.zj-prose ul li::before {
	content: ""; position: absolute; left: 0; top: 0.75em;
	width: 14px; height: 1px; background: var(--oxblood);
}
.zj-prose ol { list-style: decimal; padding-left: var(--s-5); }
.zj-prose ol li { margin-bottom: 6px; }
.zj-prose blockquote {
	border-left: 2px solid var(--oxblood);
	padding: var(--s-2) var(--s-5);
	margin: var(--s-6) 0;
	font-style: italic;
	font-size: 1.15em;
	color: var(--ink);
	font-family: var(--font-display);
	font-weight: 350;
}
.zj-prose img { margin: var(--s-6) 0; border-radius: var(--r-sm); }
.zj-prose .zj-drop::first-letter,
.zj-drop::first-letter {
	font-family: var(--font-display);
	font-size: 4.4em;
	font-weight: 600;
	line-height: 0.86;
	float: left;
	margin: 6px 12px 0 -2px;
	color: var(--oxblood);
	font-variation-settings: "opsz" 144;
}

/* Reveal on scroll */
.reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1; transform: none; transition: none; }
	html { scroll-behavior: auto; }
}

/* Pulse decorative SVG */
.zj-pulse {
	width: 100%;
	height: 32px;
	color: var(--copper);
	opacity: 0.85;
}

/* Blog layout (shared by archive, home, search) */
.zj-blog-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--s-8);
}
@media (min-width: 960px) {
	.zj-blog-layout {
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: var(--s-10);
	}
}

.zj-loop { display: flex; flex-direction: column; gap: var(--s-6); }
.zj-loop-card {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-4);
	padding-block: var(--s-5);
	border-bottom: 1px solid var(--line);
}
@media (min-width: 720px) {
	.zj-loop-card {
		grid-template-columns: 240px 1fr;
		gap: var(--s-6);
	}
}
.zj-loop-card__image { overflow: hidden; border-radius: var(--r-sm); align-self: start; }
.zj-loop-card__image img {
	transition: transform var(--dur-slow) var(--ease-out);
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}
.zj-loop-card:hover .zj-loop-card__image img { transform: scale(1.04); }
.zj-loop-card__title {
	font-size: clamp(1.3rem, 2vw, 1.55rem);
	margin: 6px 0 8px;
	font-weight: 450;
}
.zj-loop-card__title a {
	color: var(--ink);
	text-decoration: none;
	background-image: linear-gradient(to right, var(--oxblood), var(--oxblood));
	background-size: 0% 1px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
	padding-bottom: 2px;
}
.zj-loop-card__title a:hover { background-size: 100% 1px; color: var(--oxblood); }
.zj-loop-card__excerpt {
	font-size: var(--fs-base);
	color: var(--ink-soft);
	margin: 0 0 var(--s-3);
}

/* Post meta */
.zj-post-meta {
	font-family: var(--font-sans);
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-muted);
	margin: 0 0 var(--s-3);
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.zj-post-meta__cat { color: var(--oxblood); }

/* Aside / sidebar */
.zj-side { display: flex; flex-direction: column; gap: var(--s-6); position: sticky; top: 110px; }
.zj-side__block { border-top: 1px solid var(--line); padding-top: var(--s-4); }
.zj-side__title {
	font-family: var(--font-sans);
	font-size: 0.72rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ink-muted);
	margin: 0 0 var(--s-4);
}
.zj-side__list { display: flex; flex-direction: column; gap: 10px; }
.zj-side__list a {
	display: flex; justify-content: space-between; gap: 8px; align-items: baseline;
	text-decoration: none;
	color: var(--ink);
	font-family: var(--font-body);
	transition: color var(--dur) var(--ease-out);
}
.zj-side__list a span { font-size: 0.98rem; line-height: 1.4; }
.zj-side__list a em {
	font-style: normal;
	font-family: var(--font-sans);
	font-size: 0.72rem;
	color: var(--ink-muted);
	letter-spacing: 0.05em;
	flex: 0 0 auto;
}
.zj-side__list a:hover { color: var(--oxblood); }
.zj-side__list--cats li { font-family: var(--font-sans); font-size: 0.9rem; padding: 4px 0; }
.zj-side__list--cats a { display: inline; }
.zj-side__cta p { font-size: 0.95rem; color: var(--ink-soft); margin-bottom: var(--s-3); }

/* Book card component — shared across front, knjige, book detail pages */
.zj-book-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-6);
	align-items: stretch;
}
@media (min-width: 640px) {
	.zj-book-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); }
}
@media (min-width: 960px) {
	.zj-book-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-7); }
}
.zj-book {
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
	height: 100%;
}
.zj-book__cover {
	--cover-bg: var(--paper-2);
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--cover-bg);
	display: block;
	border-radius: 4px;
	padding: var(--s-4);
	border: 1px solid var(--line);
	transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.zj-section--cream .zj-book__cover { --cover-bg: var(--paper); }
.zj-book:hover .zj-book__cover {
	border-color: var(--ink);
	box-shadow: 0 24px 48px -28px rgba(20,24,33,0.28);
}
.zj-book__cover img {
	width: 100%; height: 100%;
	object-fit: contain;
	transition: transform var(--dur-slow) var(--ease-out);
}
.zj-book:hover .zj-book__cover img { transform: scale(1.03); }
.zj-book__badge {
	position: absolute;
	top: 14px; left: 14px;
	background: var(--paper);
	color: var(--oxblood);
	font-family: var(--font-sans);
	font-size: 0.68rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
	border: 1px solid var(--line);
	z-index: 2;
}
.zj-book__body { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.zj-book__meta {
	font-family: var(--font-sans);
	font-size: 0.74rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-muted);
	margin: 0;
}
.zj-book__title {
	font-size: clamp(1.3rem, 2vw, 1.6rem);
	font-weight: 450;
	margin: 0;
}
.zj-book__title a {
	color: var(--ink);
	text-decoration: none;
	transition: color var(--dur) var(--ease-out);
}
.zj-book__title a:hover { color: var(--oxblood); }
.zj-book__desc {
	font-size: 0.98rem;
	color: var(--ink-soft);
	margin: 0 0 var(--s-3);
	line-height: 1.55;
}
.zj-book__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
	margin-top: auto;
	padding-top: var(--s-2);
}

/* Cards grid (reusable) */
.zj-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--s-6);
	margin-top: var(--s-6);
}
.zj-card {
	padding: var(--s-5);
	background: var(--paper);
	border: 1px solid var(--line);
	transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.zj-section--cream .zj-card { background: var(--paper); }
.zj-card:hover { border-color: var(--ink); }
.zj-card__date {
	font-family: var(--font-sans);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-muted);
	margin-bottom: var(--s-2);
}
.zj-card__title {
	font-size: 1.22rem;
	margin: 0 0 var(--s-3);
	font-weight: 450;
}
.zj-card__title a {
	color: var(--ink);
	text-decoration: none;
	transition: color var(--dur) var(--ease-out);
}
.zj-card__title a:hover { color: var(--oxblood); }
.zj-card__excerpt {
	font-size: 0.96rem;
	color: var(--ink-soft);
	margin-bottom: var(--s-4);
}

/* Widget defaults inside sidebars */
.widget { margin-bottom: var(--s-6); }
.widget-title {
	font-family: var(--font-sans);
	font-size: 0.72rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ink-muted);
	margin: 0 0 var(--s-4);
	font-weight: 500;
}
.widget ul li { padding: 4px 0; font-size: 0.95rem; }
.widget ul li a { color: var(--ink); text-decoration: none; }
.widget ul li a:hover { color: var(--oxblood); }

/* Search widget input */
.zj-search {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--s-2);
	align-items: stretch;
}
.zj-search__label { display: block; }
.zj-search__input {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--line);
	background: var(--paper);
	font-family: var(--font-body);
	font-size: 0.96rem;
	color: var(--ink);
	border-radius: 999px;
	transition: border-color var(--dur) var(--ease-out);
}
.zj-search__input:focus { border-color: var(--oxblood); outline: none; }
.zj-search__btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 12px 18px;
	background: var(--ink); color: var(--paper);
	font-family: var(--font-sans); font-size: 0.82rem;
	letter-spacing: 0.04em;
	border-radius: 999px;
	transition: background var(--dur) var(--ease-out);
}
.zj-search__btn:hover { background: var(--oxblood); }

/* Live search dropdown — absolute overlay; does NOT push surrounding content */
.zj-sr-scope { position: relative; }
.zj-sr {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 120;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	box-shadow: 0 20px 48px -24px rgba(20,24,33,0.35);
	overflow: hidden;
	max-height: min(72vh, 640px);
	overflow-y: auto;
}
.zj-sr[hidden] { display: none; }
.zj-sr-state {
	margin: 0;
	padding: var(--s-4) var(--s-5);
	font-family: var(--font-sans);
	font-size: 0.88rem;
	color: var(--ink-muted);
	letter-spacing: 0.02em;
}
.zj-sr-state--err { color: var(--oxblood); }
.zj-sr-state--hint { color: var(--ink-muted); }

.zj-sr-list { display: flex; flex-direction: column; }
.zj-sr-item { border-bottom: 1px solid var(--line); }
.zj-sr-item:last-child { border-bottom: 0; }

.zj-sr-link {
	display: grid;
	grid-template-columns: 1fr;
	gap: 4px;
	padding: var(--s-4) var(--s-5);
	text-decoration: none;
	color: var(--ink);
	transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.zj-sr-link:hover,
.zj-sr-link:focus-visible {
	background: var(--paper-2);
	color: var(--ink);
	outline: none;
}
.zj-sr-meta {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	font-family: var(--font-sans);
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-muted);
	margin-bottom: 2px;
}
.zj-sr-badge {
	display: inline-flex; align-items: center;
	padding: 2px 8px;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 0.68rem;
	letter-spacing: 0.14em;
}
.zj-sr-badge--post { color: var(--oxblood); border-color: var(--oxblood); }
.zj-sr-badge--page { color: var(--sage); border-color: var(--sage); }
.zj-sr-date { letter-spacing: 0.06em; text-transform: none; font-size: 0.7rem; }
.zj-sr-title {
	font-family: var(--font-display);
	font-size: 1.02rem;
	font-weight: 500;
	line-height: 1.3;
	color: var(--ink);
}
.zj-sr-ex {
	font-family: var(--font-body);
	font-size: 0.88rem;
	color: var(--ink-soft);
	line-height: 1.45;
}
.zj-sr-hit {
	background: color-mix(in oklab, var(--oxblood) 14%, transparent);
	color: inherit;
	padding: 0 2px;
	border-radius: 2px;
}

.zj-sr-all {
	display: block;
	padding: var(--s-3) var(--s-5);
	text-align: center;
	font-family: var(--font-sans);
	font-size: 0.82rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oxblood);
	text-decoration: none;
	border-top: 1px solid var(--line);
	background: var(--paper-2);
	transition: background var(--dur) var(--ease-out);
}
.zj-sr-all:hover { background: var(--ink); color: var(--paper); }

/* Dropdown used in header search panel — pin width, spacing tweaks */
.zj-head__search .zj-sr { max-width: 720px; margin-inline: auto; margin-top: var(--s-3); }

/* Pagination */
.navigation.pagination,
.pagination.navigation { margin-top: var(--s-8); display: flex; justify-content: center; }
.nav-links { display: inline-flex; gap: var(--s-2); flex-wrap: wrap; justify-content: center; align-items: center; }
.nav-links .page-numbers {
	display: inline-flex;
	align-items: center; justify-content: center;
	min-width: 40px; height: 40px;
	padding: 0 12px;
	border: 1px solid var(--line);
	font-family: var(--font-sans);
	font-size: 0.88rem;
	text-decoration: none;
	color: var(--ink);
	transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
	border-radius: 999px;
}
.nav-links .page-numbers:hover,
.nav-links .current { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.nav-links .current { background: var(--oxblood); border-color: var(--oxblood); }
.nav-links .prev, .nav-links .next { padding: 0 18px; }

/* Form status */
.form-status {
	padding: var(--s-4) var(--s-5);
	margin-bottom: var(--s-5);
	border: 1px solid var(--line);
	border-left-width: 3px;
	background: var(--paper);
	font-family: var(--font-sans);
	font-size: 0.95rem;
}
.form-status--ok { border-left-color: var(--sage); }
.form-status--err { border-left-color: var(--oxblood); }
.form-status strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: 1rem; }

/* Flex util */
.zj-flex { display: flex; }
.zj-flex-col { display: flex; flex-direction: column; }

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