/* Verzi-Vici — "Zvezek": warm paper, verses on ruled lines, one orange accent. */

@font-face { font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/lora-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/lora-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Lora"; font-style: italic; font-weight: 400 700; font-display: swap; src: url(fonts/lora-latin-wght-italic.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lora"; font-style: italic; font-weight: 400 700; font-display: swap; src: url(fonts/lora-latin-ext-wght-italic.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap; src: url(fonts/source-sans-3-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap; src: url(fonts/source-sans-3-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
	--vv-paper: #fbf7ef;
	--vv-sheet: #fffdf8;
	--vv-ink: #2a2520;
	--vv-ink-2: #5e554c;
	--vv-line: #e7dcc9;
	--vv-rule: #e2d3bc;
	--vv-accent: #a84b07;        /* text and buttons, 5.3:1 on paper */
	--vv-accent-hover: #8a3d05;
	--vv-accent-soft: #f6e3cf;
	--vv-bar: #f07a12;           /* decorative only */
	--vv-serif: "Lora", Georgia, "Times New Roman", serif;
	--vv-sans: "Source Sans 3", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--vv-wrap: 1200px;
	--vv-radius: 6px;
}

/* ---------- base ---------- */
body.vv {
	background: var(--vv-paper);
	color: var(--vv-ink);
	font-family: var(--vv-sans);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
body.vv::before { /* thin accent bar on top, like the edge of a notebook */
	content: "";
	display: block;
	height: 4px;
	background: var(--vv-bar);
}
/* Link colour only inside our own templates; Elementor widgets keep their own colours. */
.vv-content a, .vv-archive-desc a, .vv-empty a, .vv-section-head a { color: var(--vv-accent); }
.vv-content a:hover, .vv-archive-desc a:hover, .vv-empty a:hover, .vv-section-head a:hover { color: var(--vv-accent-hover); }
.vv :focus-visible { outline: 3px solid var(--vv-bar); outline-offset: 2px; border-radius: 2px; }
.vv-wrap { max-width: var(--vv-wrap); margin: 0 auto; padding: 0 24px; }
.vv-narrow { max-width: 760px; }
.vv-icon { width: 22px; height: 22px; fill: currentColor; flex: none; }

.vv-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; padding: 0 20px;
	border-radius: 999px; border: 2px solid var(--vv-accent);
	background: var(--vv-accent); color: #fff !important;
	font: 600 16px/1 var(--vv-sans); text-decoration: none; white-space: nowrap;
	transition: background-color .15s, border-color .15s;
}
.vv-btn:hover { background: var(--vv-accent-hover); border-color: var(--vv-accent-hover); }
.vv-btn-light { background: transparent; border-color: #f2c79d; color: #fbe7d3 !important; }
.vv-btn-light:hover { background: #f2c79d; border-color: #f2c79d; color: var(--vv-ink) !important; }

.vv-iconbtn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	min-width: 44px; height: 44px; padding: 0 10px;
	border: 0; border-radius: 999px; background: transparent; color: var(--vv-ink);
	font: 600 16px/1 var(--vv-sans); cursor: pointer;
}
.vv-iconbtn:hover, .vv-iconbtn[aria-expanded="true"] { background: var(--vv-accent-soft); color: var(--vv-accent-hover); }

/* ---------- header ---------- */
.vv-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(251, 247, 239, .97);
	border-bottom: 1px solid var(--vv-line);
}
.admin-bar .vv-header { top: 32px; }
.vv-header-row { display: flex; align-items: center; gap: 32px; min-height: 120px; transition: min-height .2s; }
.vv-logo { display: block; flex: none; line-height: 0; }
.vv-logo img { height: 100px; width: auto; max-width: none; border-radius: 4px; transition: height .2s; }
.vv-logo-text { font: 700 28px/1 var(--vv-serif); color: var(--vv-ink); }
.vv-header.is-compact .vv-header-row { min-height: 72px; }
.vv-header.is-compact .vv-logo img { height: 56px; }

.vv-nav { flex: 1; }
.vv-menu { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0; padding: 0; list-style: none; }
.vv-menu a {
	display: block; padding: 10px 12px;
	color: var(--vv-ink); font-weight: 600; font-size: 17px; text-decoration: none;
	border-radius: 4px; position: relative;
}
.vv-menu a::after {
	content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px;
	background: var(--vv-bar); transform: scaleX(0); transform-origin: left; transition: transform .2s;
}
.vv-menu a:hover { color: var(--vv-ink); }
.vv-menu a:hover::after,
.vv-menu .current-menu-item > a::after,
.vv-menu .current-page-ancestor > a::after { transform: scaleX(1); }
.vv-menu .current-menu-item > a { color: var(--vv-accent); }
.vv-nav-search { display: none; }

.vv-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.vv-menu-toggle { display: none; }
.vv-when-open, .vv-menu-toggle[aria-expanded="true"] .vv-when-closed { display: none; }
.vv-menu-toggle[aria-expanded="true"] .vv-when-open { display: inline-flex; }

.vv-searchbar { border-top: 1px solid var(--vv-line); padding: 16px 0; background: var(--vv-paper); }
.vv-search { display: flex; gap: 8px; max-width: 640px; }
.vv-search input[type="search"] {
	flex: 1; min-width: 0; height: 48px; padding: 0 16px;
	border: 1px solid #cdbfa8; border-radius: 999px; background: #fff; color: var(--vv-ink);
	font: 400 17px var(--vv-sans);
}
.vv-search input[type="search"]:focus { border-color: var(--vv-accent); outline: 3px solid var(--vv-accent-soft); }
.vv-search button {
	height: 48px; padding: 0 22px; border: 0; border-radius: 999px;
	background: var(--vv-ink); color: #fff; font: 600 16px var(--vv-sans); cursor: pointer;
}
.vv-search button:hover { background: var(--vv-accent-hover); }

@media (max-width: 1100px) {
	.vv-header-row { gap: 16px; }
	.vv-menu a { padding: 10px 8px; font-size: 16px; }
	.vv-menu a::after { left: 8px; right: 8px; }
}

@media (max-width: 960px) {
	.vv-header-row { min-height: 84px; justify-content: space-between; }
	.vv-logo img { height: 64px; }
	.vv-header.is-compact .vv-header-row { min-height: 64px; }
	.vv-header.is-compact .vv-logo img { height: 48px; }
	.vv-menu-toggle { display: inline-flex; }
	.vv-search-toggle { display: none; }
	.vv-nav {
		display: none; position: absolute; left: 0; right: 0; top: 100%;
		background: var(--vv-paper); border-bottom: 1px solid var(--vv-line);
		padding: 8px 24px 24px; box-shadow: 0 12px 24px -16px rgba(42, 37, 32, .35);
		max-height: calc(100vh - 100px); overflow-y: auto;
	}
	.vv-nav.is-open { display: block; }
	.vv-menu { flex-direction: column; gap: 0; }
	.vv-menu li + li { border-top: 1px solid var(--vv-line); }
	.vv-menu a { padding: 14px 0; font-size: 19px; }
	.vv-menu a::after { display: none; }
	.vv-nav-search { display: block; margin-top: 16px; }
}
@media (max-width: 560px) {
	.vv-wrap { padding: 0 16px; }
	.vv-nav { padding: 8px 16px 20px; }
	.vv-btn-send { padding: 0 14px; font-size: 15px; }
	.vv-menu-label { display: none; }
	.vv-logo img { height: 56px; }
}
@media (max-width: 782px) { .admin-bar .vv-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .vv-header { top: 0; } }

/* ---------- shared bits ---------- */
.vv-main { padding: 48px 0 80px; }
.vv-kicker {
	display: inline-block; margin-bottom: 12px;
	color: var(--vv-accent); font: 700 13px/1.2 var(--vv-sans); letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
}
a.vv-kicker:hover { text-decoration: underline; }
.vv-title {
	margin: 0 0 12px; color: var(--vv-ink);
	font: 600 clamp(32px, 4.4vw, 48px)/1.12 var(--vv-serif); letter-spacing: -.01em;
}
.vv-meta { margin: 0; color: var(--vv-ink-2); font-size: 15px; }

/* ---------- single post ---------- */
.vv-entry-head { text-align: center; margin-bottom: 32px; }
.vv-paper {
	position: relative;
	background: var(--vv-sheet);
	border: 1px solid var(--vv-line);
	border-radius: var(--vv-radius);
	box-shadow: 0 1px 0 var(--vv-line), 0 18px 40px -28px rgba(42, 37, 32, .35);
	padding: 36px 56px 36px 72px;
}
.vv-paper::before { /* margin line of a school notebook */
	content: ""; position: absolute; top: 0; bottom: 0; left: 48px;
	width: 1px; background: #f0b9a0;
}
.vv-content {
	font: 400 21px/36px var(--vv-serif);
	color: var(--vv-ink);
	overflow-wrap: anywhere;
	min-height: 108px; /* even a one-line verse sits on a small sheet */
	/* rules run from the margin line to the right edge of the sheet */
	margin: 0 -56px 0 -24px;
	padding: 0 56px 0 24px;
	/* ruled lines: each 36px text line gets a rule just under its baseline */
	background-image: repeating-linear-gradient(to bottom, transparent 0 31px, var(--vv-rule) 31px 32px, transparent 32px 36px);
}
.vv-content > *:first-child { margin-top: 0; }
.vv-content > *:last-child { margin-bottom: 0; }
.vv-content p { margin: 0; } /* one paragraph = one ruled line; verses are stored line by line */
.vv-content img { display: block; max-width: 100%; height: auto; margin: 0 auto 36px; border-radius: 4px; background: #fff; }
.vv-content iframe, .vv-content video { display: block; max-width: 100%; margin: 0 auto 36px; }
.vv-content iframe[src*="youtube"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.vv-content h2, .vv-content h3 { font: 600 24px/36px var(--vv-serif); margin: 0 0 0; }
.vv-content a { text-decoration: underline; text-underline-offset: 3px; }
.vv-content > :last-child img:last-child, .vv-content > img:last-child { margin-bottom: 0; }

.vv-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; justify-content: center; }
.vv-tags a {
	display: inline-block; padding: 6px 14px; border-radius: 999px;
	background: var(--vv-accent-soft); color: var(--vv-accent-hover); font-size: 15px; text-decoration: none;
}
.vv-tags a:hover { background: #efd2b4; }

.vv-prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; }
.vv-prevnext a {
	display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; min-height: 44px;
	border: 1px solid var(--vv-line); border-radius: var(--vv-radius); background: var(--vv-sheet);
	text-decoration: none; transition: border-color .15s;
}
.vv-prevnext a:hover { border-color: var(--vv-accent); }
.vv-next { grid-column: 2; text-align: right; align-items: flex-end; }
.vv-pn-label { display: inline-flex; align-items: center; gap: 4px; color: var(--vv-ink-2); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.vv-pn-label .vv-icon { width: 18px; height: 18px; }
.vv-pn-title { color: var(--vv-ink); font: 600 18px/1.35 var(--vv-serif); }

.vv-more { margin-top: 72px; padding-top: 56px; border-top: 1px solid var(--vv-line); }
.vv-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.vv-section-head h2 { margin: 0; font: 600 28px/1.2 var(--vv-serif); color: var(--vv-ink); }
.vv-section-head a { font-weight: 600; }

@media (max-width: 640px) {
	.vv-main { padding: 32px 0 56px; }
	.vv-paper { padding: 28px 20px 28px 36px; }
	.vv-paper::before { left: 22px; }
	.vv-content { font-size: 19px; line-height: 32px; }
	.vv-content img, .vv-content iframe { margin-bottom: 32px; }
	.vv-content { min-height: 96px; margin: 0 -20px 0 -14px; padding: 0 20px 0 14px; background-image: repeating-linear-gradient(to bottom, transparent 0 27px, var(--vv-rule) 27px 28px, transparent 28px 32px); }
	.vv-prevnext { grid-template-columns: 1fr; }
	.vv-next { grid-column: 1; }
}

/* ---------- archives & cards ---------- */
.vv-archive-head { max-width: 820px; margin-bottom: 40px; }
.vv-archive-desc { color: var(--vv-ink-2); }
.vv-archive-head .vv-search { margin-top: 24px; }
.vv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.vv-chips a {
	display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px;
	border: 1px solid var(--vv-line); border-radius: 999px; background: var(--vv-sheet);
	color: var(--vv-ink); font-weight: 600; font-size: 15px; text-decoration: none;
}
.vv-chips a span { color: var(--vv-ink-2); font-weight: 400; }
.vv-chips a:hover { border-color: var(--vv-accent); color: var(--vv-accent); }

.vv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.vv-card {
	display: flex; flex-direction: column; position: relative;
	background: var(--vv-sheet); border: 1px solid var(--vv-line); border-radius: var(--vv-radius);
	overflow: hidden; transition: border-color .15s, transform .15s;
}
.vv-card:hover { border-color: #d9b48f; transform: translateY(-2px); }
.vv-card-img { display: block; aspect-ratio: 4 / 3; background: var(--vv-accent-soft); overflow: hidden; }
.vv-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vv-card-body { padding: 20px 22px 24px; }
.vv-card .vv-kicker { margin-bottom: 8px; font-size: 12px; }
.vv-card-title { margin: 0 0 10px; font: 600 21px/1.3 var(--vv-serif); }
.vv-card-title a { color: var(--vv-ink); text-decoration: none; }
.vv-card-title a::after { content: ""; position: absolute; inset: 0; } /* whole card clickable */
.vv-card:hover .vv-card-title a { color: var(--vv-accent); }
.vv-card-text { margin: 0; color: var(--vv-ink-2); font: italic 400 17px/1.6 var(--vv-serif); }

.vv-archive .pagination, .vv-archive .navigation .nav-links {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 48px;
}
.vv-archive .page-numbers {
	display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 8px;
	border: 1px solid var(--vv-line); border-radius: 999px; background: var(--vv-sheet);
	color: var(--vv-ink); font-weight: 600; text-decoration: none;
}
.vv-archive .page-numbers.current { background: var(--vv-ink); border-color: var(--vv-ink); color: #fff; }
.vv-archive .page-numbers.dots { border: 0; background: none; }
.vv-archive a.page-numbers:hover { border-color: var(--vv-accent); color: var(--vv-accent); }
.vv-empty { padding: 32px; border: 1px dashed #cdbfa8; border-radius: var(--vv-radius); background: var(--vv-sheet); max-width: 640px; }

.vv-404 .vv-search { margin: 32px auto 0; }

/* ---------- footer ---------- */
.vv-footer { background: var(--vv-ink); color: #d9cfc2; font-size: 16px; }
.vv-footer a { color: #f3e9dc; text-decoration: none; }
.vv-footer a:hover { color: #fff; text-decoration: underline; }
.vv-footer-grid {
	display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px;
	padding-top: 64px; padding-bottom: 48px;
}
.vv-footer-name { margin: 0 0 8px; color: #fff; font: 600 26px/1.2 var(--vv-serif); }
.vv-footer-about p { margin: 0 0 24px; max-width: 34ch; }
.vv-footer-h { margin: 0 0 4px; color: #fff; font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.vv-footer-h a { color: #f6b273; display: inline-block; padding: 12px 0; }
.vv-footer-h:not(:has(a)) { padding: 12px 0; }
.vv-footer ul { margin: 0; padding: 0; list-style: none; }
.vv-footer li { margin: 0; }
.vv-footer li a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.vv-fb .vv-icon { width: 20px; height: 20px; }
.vv-footer-bottom { border-top: 1px solid #4a423a; padding-top: 20px; padding-bottom: 28px; }
.vv-footer-bottom p { margin: 0; color: #b3a898; font-size: 14px; }
@media (max-width: 900px) { .vv-footer-grid { grid-template-columns: 1fr 1fr; } .vv-footer-about { grid-column: 1 / -1; } }
@media (max-width: 480px) { .vv-footer-grid { grid-template-columns: 1fr; gap: 32px; padding-top: 48px; } }

@media (prefers-reduced-motion: reduce) {
	.vv *, .vv *::after { transition: none !important; }
	.vv-card:hover { transform: none; }
}