with class */
/* "vv-inline-subscribe" in the entry HTML. The theme JS */
/* (vv-normalizer.js) fills the marker with the banner markup */
/* on page load; on logged-in member pages the markers are */
/* removed instead. Visual treatment: white fill, 1px burgundy */
/* hairline on all four sides, italic Cormorant invitation on */
/* the left, burgundy Subscribe button on the right. */
/* ============================================================ */
.vv-inline-subscribe {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
background: #ffffff;
border: 1px solid var(--burgundy);
padding: 18px 22px;
margin: 36px 0;
}
.vv-inline-subscribe:empty {
display: none;
}
.vv-inline-subscribe-text {
font-family: var(--font-serif);
font-style: italic;
font-size: 17px;
line-height: 1.4;
color: var(--ink);
flex: 1 1 auto;
}
.vv-inline-subscribe-btn {
flex-shrink: 0;
background: var(--burgundy);
color: var(--cream);
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
padding: 9px 22px;
border: 1px solid var(--burgundy);
border-radius: 0;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease;
line-height: 1;
}
.vv-inline-subscribe-btn:hover {
background: var(--ink);
border-color: var(--ink);
}
/* ============================================================ */
/* ANSWER CAPSULE (added v1.0.38) */
/* A 40-60 word standalone abstract at the top of each entry. */
/* Sits between the pedestal and the verse block. Optimized for */
/* AI extraction (ChatGPT Search, Perplexity, Google AI */
/* Overviews) and for readers who want the entry's claim in */
/* one paragraph before the meditation. Author pastes content */
/* into an HTML card with class "vv-answer-capsule". */
/* ============================================================ */
.vv-answer-capsule {
margin: 28px 0 32px;
padding: 22px 0;
border-top: 1px solid rgba(26, 22, 18, 0.12);
border-bottom: 1px solid rgba(26, 22, 18, 0.12);
font-family: var(--font-serif);
font-style: italic;
font-size: 17px;
line-height: 1.6;
color: var(--ink-soft);
text-align: center;
}
.vv-answer-capsule p {
margin: 0;
}
.vv-answer-capsule p + p {
margin-top: 12px;
}
/* ============================================================ */
/* ORIGINAL-LANGUAGE TYPOGRAPHY (added v1.0.38) */
/* Spans wrapped by the JS normalizer with lang="grc" (Greek) */
/* or lang="hbo" (Hebrew). Visual treatment matches the */
/* publication's existing original-language register. No */
/* color shift; just ensures the right font stack and respects */
/* the established voice. */
/* ============================================================ */
[lang="grc"], .vv-lang-grc,
[lang="hbo"], .vv-lang-hbo {
font-family: 'Noto Serif', 'Noto Serif Hebrew', var(--font-serif);
font-feature-settings: "kern" on, "liga" on;
}
[lang="hbo"], .vv-lang-hbo {
direction: rtl;
unicode-bidi: isolate;
}
/* ============================================================ */
/* SHARE ROW (added v1.0.39) */
/* Quiet horizontal row at the foot of each entry, between the */
/* metadata footer and the subscribe block. Four targets: */
/* X, Facebook, Copy link, Email. Small caps Inter, 11px, */
/* letter-spaced, with small inline glyphs that sit lighter */
/* than the text. Burgundy on hover. Hairline rule above to */
/* separate from the entry body. See post.hbs for markup and */
/* main.js for the Copy link click handler. */
/* ============================================================ */
.vv-share {
padding-top: 28px;
margin-top: 32px;
border-top: 1px solid rgba(26, 22, 18, 0.15);
text-align: center;
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-faint);
}
.vv-share-label {
color: var(--ink-faint);
margin-right: 18px;
}
.vv-share-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--ink);
text-decoration: none;
margin: 0 8px;
transition: color 0.2s ease;
}
.vv-share-link:hover,
.vv-share-link:focus-visible {
color: var(--burgundy);
}
.vv-share-glyph {
vertical-align: -1px;
flex-shrink: 0;
}
.vv-share-sep {
color: #c4bdb4;
user-select: none;
}
/* Copied feedback state (v1.0.39).
When the user clicks Copy link, the JS handler swaps the label
to "Copied" for 1.5s, then reverts. The .vv-share-copy--copied
class is added/removed by the handler. */
.vv-share-copy--copied .vv-share-copy-label {
color: var(--burgundy);
}
/* ============================================================ */
/* ENTRY METADATA FOOTER (added v1.0.29) */
/* Entry number, testament, language, date — sits at the foot */
/* of the entry, above the subscribe block. */
/* ============================================================ */
.vv-entry-metadata {
text-align: center;
padding: 48px 0 28px;
border-top: 1px solid var(--rule);
margin-top: 48px;
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--ink-faint);
line-height: 1.8;
}
/* --- Verse Block (custom class) --- */
.verse-block {
margin: 48px 0 44px;
padding: 32px 0 30px;
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
text-align: center;
}
.verse-label {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--ink-faint);
margin-bottom: 28px;
}
.verse {
font-family: var(--font-serif);
font-size: 22px;
line-height: 1.55;
font-weight: 400;
color: var(--ink);
font-style: italic;
max-width: 620px;
margin: 0 auto;
}
.verse-word {
font-weight: 700;
font-style: normal;
}
.verse-word-hebrew {
font-style: normal;
color: var(--ink-soft);
font-size: 18px;
font-family: 'Noto Serif Hebrew', var(--font-serif), serif;
}
.verse-ref {
display: block;
margin-top: 28px;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.3em;
text-transform: uppercase;
font-style: normal;
color: var(--ink-faint);
}
/* --- Entry Body --- */
.entry-body {
font-family: var(--font-serif);
font-size: 19px;
line-height: 1.75;
color: var(--ink);
}
.entry-body p {
margin-bottom: 22px;
}
.entry-body > p:first-of-type::first-letter,
.entry-body .first-letter-drop::first-letter {
font-family: var(--font-serif);
font-size: 56px;
font-weight: 500;
float: left;
line-height: 0.9;
padding-right: 10px;
padding-top: 6px;
color: var(--accent);
}
.entry-body strong {
font-weight: 600;
color: var(--ink);
}
.entry-body em {
font-style: italic;
color: var(--ink-soft);
}
.entry-body h2 {
font-family: var(--font-serif);
font-weight: 500;
font-size: 26px;
margin: 40px 0 16px;
color: var(--ink);
}
.entry-body h3 {
font-family: var(--font-serif);
font-weight: 500;
font-size: 22px;
margin: 32px 0 12px;
color: var(--ink);
}
/* Blockquote in entry body.
The JS normalizer in main.js detects three patterns and adds classes:
- .vv-verse for verses (presence of
)
- .vv-keepsake for keepsake blocks (first line "MEDITATE ON THIS")
- .vv-prayer for prayer blocks (first line "A PRAYER")
Any blockquote that doesn't match these patterns gets the neutral default below.
*/
/* Neutral default for generic blockquotes - quiet, doesn't compete with verse/keepsake/prayer */
.entry-body blockquote {
margin: 32px 0;
padding: 4px 0 4px 24px;
border-left: 3px solid var(--rule);
font-family: var(--font-serif);
font-style: italic;
color: var(--ink-soft);
font-size: 19px;
line-height: 1.55;
}
/* === Verse block ===
White paper background with visible texture. A fine ink border frames the
white field on all four sides — the verse reads as a printed page. */
.entry-body blockquote.vv-verse {
display: block;
background-color: #ffffff;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: repeat;
border: 1px solid var(--ink);
padding: 44px 36px 42px;
margin: 48px 0 44px;
font-family: var(--font-serif);
color: var(--ink);
font-size: 22px;
line-height: 1.55;
font-style: normal;
text-align: center;
}
.entry-body .vv-verse-label {
display: block;
font-family: var(--font-sans);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--ink-faint);
margin-bottom: 28px;
line-height: 1.3;
}
.entry-body .vv-verse-text {
display: block;
font-family: var(--font-serif);
font-style: italic;
color: var(--ink);
font-size: 22px;
line-height: 1.55;
margin: 0 auto 28px;
max-width: 620px;
}
.entry-body .vv-verse-text strong {
font-weight: 700;
font-style: normal;
color: var(--ink);
font-family: 'Lora', 'Noto Serif', 'Noto Serif Hebrew', 'Georgia', serif;
}
.entry-body .vv-verse-ref {
display: block;
font-family: var(--font-sans);
font-weight: 500;
font-size: 11px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--ink-faint);
margin-top: 0;
}
/* === Keepsake block === */
.entry-body blockquote.vv-keepsake {
display: block;
background: #f1ebe0;
border: none;
border-left: 5px solid var(--gold);
padding: 32px 40px 36px;
margin: 44px 0;
text-align: center;
font-family: var(--font-serif);
font-style: normal;
color: var(--ink);
}
.entry-body .vv-keepsake-label {
display: block;
font-family: var(--font-sans);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--ink-faint);
margin-bottom: 20px;
line-height: 1.3;
}
.entry-body .vv-keepsake-text {
display: block;
font-family: var(--font-serif);
font-style: italic;
color: var(--ink);
font-size: 22px;
line-height: 1.45;
font-weight: 400;
}
/* === Prayer block === */
.entry-body blockquote.vv-prayer {
display: block;
background: #f3f3f1;
border: none;
border-left: 2px solid var(--rule);
padding: 24px 28px 26px;
margin: 44px 0;
text-align: left;
font-family: var(--font-serif);
font-style: normal;
color: var(--ink-soft);
}
.entry-body .vv-prayer-label {
display: block;
font-family: var(--font-sans);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--ink-faint);
margin-bottom: 18px;
line-height: 1.3;
}
.entry-body .vv-prayer-text {
display: block;
font-family: var(--font-serif);
font-style: italic;
color: var(--ink-soft);
font-size: 19px;
line-height: 1.55;
}
/* Fallback: if JS doesn't run, hide the
spacing inside blockquotes
so the content at least reads continuously rather than as spaced-out lines. */
.entry-body blockquote br {
display: block;
content: "";
margin: 0;
line-height: 0.3;
font-size: 0;
}
.entry-body ul, .entry-body ol {
margin: 0 0 22px 24px;
}
.entry-body li { margin-bottom: 8px; }
.entry-body img {
margin: 32px auto;
max-width: 100%;
height: auto;
}
.entry-body figure {
margin: 32px 0;
}
.entry-body figcaption {
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: 0.1em;
color: var(--ink-faint);
text-align: center;
margin-top: 8px;
}
/* --- Ghost Koenig Editor Card Classes --- */
/* These let editors set images and other cards to wide or full width */
.kg-width-wide {
position: relative;
width: 85vw;
max-width: 1040px;
margin-left: 50%;
transform: translateX(-50%);
}
.kg-width-full {
position: relative;
width: 100vw;
margin-left: 50%;
transform: translateX(-50%);
}
.kg-width-wide img,
.kg-width-full img {
width: 100%;
height: auto;
display: block;
}
/* Bookmark cards (link previews) */
/* File card — study-guide / printable downloads (added v1.0.41; hardened v1.0.44)
v1.0.44: removed the legacy duplicate .kg-file-card declaration that boxed
this card in padding and hid the gold stripe; raised selector specificity
to .kg-card.kg-file-card so the brand look always wins; scoped
--ghost-accent-color to gold so the download icon no longer depends on the
Ghost admin Brand accent color. */
.kg-card.kg-file-card {
width: 100%;
margin: 32px 0;
padding: 0;
background: none;
border-radius: 0;
/* override Ghost's injected accent so the download icon renders gold */
--ghost-accent-color: var(--gold);
}
.kg-card.kg-file-card .kg-file-card-container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
background: var(--cream-deep);
border: 1px solid var(--rule);
border-left: 4px solid var(--gold);
border-radius: 4px;
padding: 18px 22px;
text-decoration: none;
color: var(--ink);
transition: background 0.15s ease, border-color 0.15s ease;
}
.kg-card.kg-file-card .kg-file-card-container:hover {
background: #f1ebe0;
border-color: var(--gold);
border-left-color: var(--burgundy);
}
.kg-file-card-contents { flex: 1 1 auto; min-width: 0; }
.kg-file-card-title {
font-family: var(--font-serif);
font-weight: 500;
font-size: 18px;
line-height: 1.3;
color: var(--ink);
}
.kg-file-card-caption {
font-family: var(--font-serif);
font-style: italic;
font-size: 14px;
line-height: 1.45;
color: var(--ink-soft);
margin-top: 4px;
}
.kg-file-card-metadata {
font-family: var(--font-sans);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-faint);
margin-top: 10px;
}
.kg-file-card-filename,
.kg-file-card-filesize { display: inline; }
.kg-file-card-filesize::before {
content: "·";
margin: 0 8px;
color: var(--rule);
}
.kg-card.kg-file-card .kg-file-card-icon {
flex: 0 0 auto;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(168, 132, 58, 0.12);
color: var(--gold);
}
.kg-card.kg-file-card .kg-file-card-icon svg { width: 22px; height: 22px; color: var(--gold); }
.kg-card.kg-file-card .kg-file-card-container:hover .kg-file-card-icon {
background: var(--gold);
color: var(--cream);
}
.kg-card.kg-file-card .kg-file-card-container:hover .kg-file-card-icon svg { color: var(--cream); }
@media (max-width: 600px) {
.kg-card.kg-file-card .kg-file-card-container { padding: 15px 16px; gap: 14px; }
.kg-card.kg-file-card .kg-file-card-title { font-size: 16px; }
.kg-card.kg-file-card .kg-file-card-icon { width: 38px; height: 38px; }
}
.kg-bookmark-card {
width: 100%;
margin: 32px 0;
background: var(--cream-deep);
border: 1px solid var(--rule);
border-radius: 4px;
overflow: hidden;
}
.kg-bookmark-container {
display: flex;
text-decoration: none;
color: var(--ink);
}
.kg-bookmark-content {
flex: 2;
padding: 20px;
}
.kg-bookmark-title {
font-family: var(--font-serif);
font-weight: 500;
font-size: 18px;
margin-bottom: 6px;
color: var(--ink);
}
.kg-bookmark-description {
font-family: var(--font-sans);
font-size: 13px;
line-height: 1.5;
color: var(--ink-soft);
margin-bottom: 10px;
}
.kg-bookmark-metadata {
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: 0.05em;
color: var(--ink-faint);
display: flex;
align-items: center;
gap: 8px;
}
.kg-bookmark-icon {
width: 16px;
height: 16px;
}
.kg-bookmark-thumbnail {
flex: 1;
min-height: 140px;
max-height: 180px;
}
.kg-bookmark-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Gallery cards */
.kg-gallery-card {
margin: 32px 0;
}
.kg-gallery-container {
display: flex;
flex-direction: column;
gap: 12px;
}
.kg-gallery-row {
display: flex;
gap: 12px;
}
.kg-gallery-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Callout cards - used for verse block, keepsake, and prayer in posts */
.kg-callout-card {
display: block;
padding: 28px 36px 30px;
margin: 44px 0;
background: #f1ebe0;
border-left: 5px solid var(--gold);
font-family: var(--font-serif);
font-style: italic;
font-size: 20px;
line-height: 1.45;
color: var(--ink);
}
.kg-callout-card p {
margin: 0 0 4px 0;
font-style: italic;
line-height: 1.45;
}
.kg-callout-card p:last-child {
margin-bottom: 0;
}
/* When Ghost wraps a callout in a kg-callout-text div, target paragraphs inside it too */
.kg-callout-text > p {
margin: 0 0 4px 0;
line-height: 1.45;
}
.kg-callout-text > p:last-child {
margin-bottom: 0;
}
/* First paragraph in a callout = label (KING JAMES VERSION, MEDITATE ON THIS, A PRAYER, etc.)
This applies ONLY when the label is in its own tag. If editor places the label on the
same line as the body using
, the writer should add a paragraph break instead. */
.kg-callout-card p:first-child,
.kg-callout-text > p:first-child {
font-family: var(--font-sans);
font-style: normal;
font-weight: 600;
font-size: 11px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--ink-faint);
margin-bottom: 18px;
line-height: 1.3;
}
/* The verse/keepsake/prayer body text (paragraphs after the label) */
.kg-callout-card p:not(:first-child),
.kg-callout-text > p:not(:first-child) {
color: var(--ink);
font-size: 22px;
line-height: 1.45;
}
.kg-callout-card strong,
.kg-callout-text strong {
font-weight: 700;
font-style: normal;
color: var(--ink);
}
.kg-callout-emoji {
margin-right: 12px;
font-style: normal;
}
/* Toggle cards (collapsible sections) */
.kg-toggle-card {
margin: 32px 0;
padding: 0;
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
}
.kg-toggle-heading {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 0;
cursor: pointer;
}
.kg-toggle-heading-text {
font-family: var(--font-serif);
font-weight: 500;
font-size: 18px;
margin: 0;
}
.kg-toggle-content {
padding: 0 0 24px;
font-family: var(--font-serif);
font-size: 17px;
line-height: 1.7;
}
/* Button cards */
.kg-button-card {
text-align: center;
margin: 32px 0;
}
.kg-btn {
display: inline-block;
padding: 14px 32px;
background: var(--ink);
color: var(--cream);
font-family: var(--font-sans);
font-size: 12px;
letter-spacing: 0.2em;
text-transform: uppercase;
text-decoration: none;
border-radius: 2px;
transition: background 0.2s ease;
}
.kg-btn:hover {
background: var(--accent);
color: var(--cream);
}
/* Header cards */
.kg-header-card {
margin: 48px 0;
padding: 64px 24px;
text-align: center;
background: var(--cream-deep);
}
.kg-header-card h2,
.kg-header-card h3 {
font-family: var(--font-serif);
font-weight: 500;
margin-bottom: 12px;
}
.kg-header-card-text {
font-family: var(--font-serif);
font-style: italic;
color: var(--ink-soft);
}
/* Embed cards (YouTube, etc.) */
.kg-embed-card {
margin: 32px 0;
}
.kg-embed-card iframe {
width: 100%;
border: 0;
}
/* Code cards */
.kg-code-card {
margin: 32px 0;
}
.kg-code-card pre {
background: var(--cream-deep);
padding: 20px;
border-radius: 4px;
overflow-x: auto;
font-family: 'Courier New', monospace;
font-size: 14px;
line-height: 1.5;
}
/* Audio cards (file-card styling lives in the branded block above, v1.0.41/44) */
.kg-audio-card {
margin: 32px 0;
padding: 16px;
background: var(--cream-deep);
border-radius: 4px;
}
/* Mobile adjustments for wide/full images */
@media (max-width: 720px) {
.kg-width-wide,
.kg-width-full {
width: 100%;
margin-left: 0;
transform: none;
}
.kg-bookmark-container {
flex-direction: column;
}
.kg-bookmark-thumbnail {
width: 100%;
max-height: 200px;
}
}
/* --- Keepsake Block (custom class) --- */
.keepsake {
margin: 44px 0;
padding: 32px 40px 36px;
text-align: center;
background: #f1ebe0;
border-left: 5px solid var(--gold);
}
.keepsake-label {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--ink-faint);
margin-bottom: 20px;
}
.keepsake-text {
font-family: var(--font-serif);
font-size: 22px;
font-style: italic;
line-height: 1.45;
color: var(--ink);
font-weight: 400;
}
/* --- Prayer Block (custom class) --- */
.prayer {
margin: 44px 0;
padding: 24px 28px 26px;
background: #f3f3f1;
border-left: 2px solid var(--rule);
}
.prayer-label {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--ink-faint);
margin-bottom: 18px;
}
.prayer-text {
font-family: var(--font-serif);
font-style: italic;
font-size: 19px;
line-height: 1.55;
color: var(--ink-soft);
}
/* --- Collapsible References --- */
details.references {
margin: 56px 0 32px;
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
}
details.references summary {
list-style: none;
cursor: pointer;
padding: 24px 0;
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--ink-soft);
display: flex;
align-items: center;
justify-content: space-between;
transition: color 0.2s ease;
}
details.references summary:hover { color: var(--accent); }
details.references summary::-webkit-details-marker { display: none; }
details.references summary::after {
content: '+';
font-size: 18px;
font-weight: 300;
transition: transform 0.3s ease;
}
details.references[open] summary::after { content: '−'; }
details.references .ref-content {
padding: 0 0 32px;
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.7;
color: var(--ink-soft);
}
details.references .ref-content h4 {
font-family: var(--font-serif);
font-size: 17px;
font-weight: 600;
color: var(--ink);
margin: 24px 0 10px;
}
details.references .ref-content h4:first-child { margin-top: 8px; }
details.references .ref-content p { margin-bottom: 12px; }
details.references .ref-content a {
color: var(--accent);
border-bottom: 1px dotted var(--accent);
}
details.references .ref-content a:hover { border-bottom-style: solid; }
/* --- Work Behind This Entry (collapsible apparatus block) --- */
/* Collapsible details block in entry body.
Works whether the writer adds the .work-behind class or pastes a plain .
Recommended structure (paste in Ghost as an HTML card):
The Work Behind This Entry
... apparatus content ...
But these rules apply to any in the entry body.
*/
.entry-body details,
details.work-behind {
margin: 64px 0 32px;
padding: 0;
background: var(--cream-deep);
border-left: 3px solid var(--gold);
border-radius: 0;
}
.entry-body details summary,
details.work-behind summary {
list-style: none;
cursor: pointer;
padding: 22px 28px;
font-family: var(--font-serif);
font-size: 20px;
font-weight: 500;
color: var(--ink);
display: flex;
align-items: center;
justify-content: flex-start;
gap: 18px;
transition: color 0.2s ease;
/* Suppress default disclosure triangle in all engines */
-webkit-appearance: none;
}
.entry-body details summary:hover,
details.work-behind summary:hover { color: var(--accent); }
.entry-body details summary::-webkit-details-marker,
details.work-behind summary::-webkit-details-marker { display: none; }
.entry-body details summary::marker,
details.work-behind summary::marker { display: none; content: ''; }
.entry-body details summary::before,
details.work-behind summary::before {
content: '+';
font-size: 38px;
font-weight: 500;
color: var(--ink);
line-height: 1;
flex-shrink: 0;
transition: transform 0.3s ease;
}
.entry-body details[open] summary::before,
details.work-behind[open] summary::before { content: '−'; }
.entry-body details .wb-content,
details.work-behind .wb-content,
.entry-body details > *:not(summary) {
padding: 0 28px 28px;
font-family: var(--font-serif);
font-size: 17px;
line-height: 1.7;
color: var(--ink-soft);
}
.entry-body details .wb-content > p:first-child,
details.work-behind .wb-content > p:first-child {
font-style: italic;
color: var(--ink-faint);
padding-bottom: 16px;
margin-bottom: 16px;
border-bottom: 1px solid var(--rule);
}
.entry-body details .wb-content p,
details.work-behind .wb-content p {
margin-bottom: 14px;
}
details.work-behind .wb-content strong {
font-weight: 600;
color: var(--ink);
font-family: var(--font-serif);
}
details.work-behind .wb-content em {
font-style: italic;
}
details.work-behind .wb-content a {
color: var(--accent);
border-bottom: 1px dotted var(--accent);
}
details.work-behind .wb-content a:hover {
border-bottom-style: solid;
color: var(--ink);
}
/* --- Subscribe Block --- */
/* --- Subscribe Block · v1.0.36 redesign (Reading B) ---
Layout: italic headline → subheading → V-seal box + gap + Subscribe button box → fineprint
Aesthetic: white fill, hairline burgundy border, no cream, no gold left rule
The V-mark seal and the Subscribe button are each in their own framed object,
sitting side by side with a small gap. Reads as two stamps of approval.
The arc animation system from v1.0.19 is preserved unchanged.
*/
/* Minimal variant (About page): no copy, just the framed action row */
.subscribe-block--minimal {
padding: 0;
margin-top: 48px;
background: transparent;
border: none;
text-align: center;
}
.subscribe-block--minimal .sb-action {
display: inline-flex;
}
/* Full subscribe block (homepage + entry pages) */
.subscribe-block {
margin: 56px auto 0;
max-width: 640px;
padding: 40px 44px 32px;
background: #ffffff;
border: 1px solid var(--burgundy);
text-align: center;
}
.subscribe-block .sb-headline {
font-family: var(--font-serif);
font-size: 26px;
color: var(--ink);
margin: 0 auto 8px;
line-height: 1.35;
max-width: 560px;
}
.subscribe-block .sb-headline em {
font-style: italic;
}
.subscribe-block .sb-subhead {
font-family: var(--font-serif);
font-size: 17px;
color: var(--ink-soft);
margin: 0 auto 28px;
line-height: 1.5;
max-width: 560px;
font-style: normal;
}
/* Action row: V-seal box + gap + Subscribe button box (Reading B) */
.subscribe-block .sb-action {
display: inline-flex;
align-items: stretch;
gap: 12px;
margin: 0;
}
.subscribe-block .sb-seal {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: #ffffff;
border: 1px solid rgba(26, 22, 18, 0.2);
flex-shrink: 0;
}
.subscribe-block .sb-seal svg {
display: block;
}
.subscribe-block .subscribe-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 32px;
height: 48px;
background: var(--burgundy);
color: var(--cream);
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
border: 1px solid var(--burgundy);
border-radius: 0;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease;
line-height: 1;
}
.subscribe-block .subscribe-btn:hover {
background: var(--ink);
border-color: var(--ink);
}
.subscribe-block .sb-fineprint {
font-family: var(--font-sans);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-faint);
margin: 20px 0 0;
line-height: 1.5;
font-style: normal;
}
/* Animated arcs from v1.0.19 - unchanged.
Each arc fades in, holds, then fades out as it expands outward.
Stagger by 0.15s so they ripple in sequence from inside to outside. */
@keyframes vv-arc-pulse-1 {
0% { opacity: 0; transform: translateX(-4px) scale(0.85); }
20% { opacity: 1; transform: translateX(0) scale(1); }
70% { opacity: 1; transform: translateX(0) scale(1); }
100% { opacity: 0; transform: translateX(2px) scale(1.05); }
}
@keyframes vv-arc-pulse-2 {
0% { opacity: 0; transform: translateX(-4px) scale(0.85); }
35% { opacity: 0.85; transform: translateX(0) scale(1); }
70% { opacity: 0.85; transform: translateX(0) scale(1); }
100% { opacity: 0; transform: translateX(4px) scale(1.08); }
}
@keyframes vv-arc-pulse-3 {
0% { opacity: 0; transform: translateX(-4px) scale(0.85); }
50% { opacity: 0.65; transform: translateX(0) scale(1); }
70% { opacity: 0.65; transform: translateX(0) scale(1); }
100% { opacity: 0; transform: translateX(6px) scale(1.1); }
}
.subscribe-block .sb-arc {
transform-origin: 80px 60px;
}
.subscribe-block .sb-arc-1 {
animation: vv-arc-pulse-1 3.5s ease-out infinite;
}
.subscribe-block .sb-arc-2 {
animation: vv-arc-pulse-2 3.5s ease-out infinite 0.15s;
opacity: 0.85;
}
.subscribe-block .sb-arc-3 {
animation: vv-arc-pulse-3 3.5s ease-out infinite 0.3s;
opacity: 0.65;
}
/* Respect accessibility settings - no motion for readers with prefers-reduced-motion enabled */
@media (prefers-reduced-motion: reduce) {
.subscribe-block .sb-arc-1,
.subscribe-block .sb-arc-2,
.subscribe-block .sb-arc-3 {
animation: none;
}
.subscribe-block .sb-arc-1 { opacity: 1; transform: none; }
.subscribe-block .sb-arc-2 { opacity: 0.85; transform: none; }
.subscribe-block .sb-arc-3 { opacity: 0.65; transform: none; }
}
/* --- Footer --- */
.site-footer {
margin-top: 56px;
padding: 36px 24px;
background: var(--ink);
color: var(--cream);
text-align: center;
}
.site-footer .footer-title {
font-family: var(--font-serif);
font-weight: 500;
font-size: 22px;
letter-spacing: 0.02em;
margin-bottom: 8px;
}
.site-footer .footer-title em { font-style: italic; color: var(--gold); }
.site-footer p {
font-family: var(--font-sans);
font-size: 12px;
line-height: 1.7;
color: rgba(250, 247, 242, 0.6);
letter-spacing: 0.04em;
max-width: 440px;
margin: 0 auto 14px;
}
.site-footer .byline {
margin-top: 12px;
font-family: var(--font-serif);
font-style: italic;
font-size: 14px;
color: rgba(250, 247, 242, 0.75);
}
.site-footer .footer-nav {
margin-top: 18px;
}
.site-footer .footer-nav a {
font-family: var(--font-sans);
font-size: 10px;
letter-spacing: 0.25em;
text-transform: uppercase;
color: rgba(250, 247, 242, 0.5);
margin: 0 12px;
}
.site-footer .footer-nav a:hover { color: var(--gold); }
/* --- Pagination --- */
.pagination {
text-align: center;
padding: 32px 0 48px;
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: 0.25em;
text-transform: uppercase;
}
.pagination a, .pagination span {
color: var(--ink-soft);
margin: 0 16px;
}
.pagination a:hover { color: var(--accent); }
/* --- Page (about, etc.) --- */
.page-content {
font-family: var(--font-serif);
font-size: 19px;
line-height: 1.75;
color: var(--ink);
}
.page-content h1 {
font-family: var(--font-serif);
font-weight: 500;
font-size: 36px;
text-align: center;
margin: 48px 0 32px;
}
.page-content p { margin-bottom: 22px; }
.page-content h2 {
font-family: var(--font-serif);
font-weight: 500;
font-size: 26px;
margin: 40px 0 16px;
}
/* --- Archive Page --- */
.archive-list {
list-style: none;
margin: 48px 0;
}
.archive-item {
display: flex;
align-items: flex-start;
gap: 24px;
padding: 20px 0;
border-bottom: 1px solid var(--rule);
}
.archive-item-image {
flex-shrink: 0;
width: 80px;
height: 100px;
overflow: hidden;
background: var(--cream-deep);
}
.archive-item-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.archive-item-content { flex: 1; }
.archive-item-date {
font-family: var(--font-sans);
font-size: 10px;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--ink-faint);
margin-bottom: 6px;
}
.archive-item-title {
font-family: var(--font-serif);
font-weight: 500;
font-size: 22px;
line-height: 1.3;
}
.archive-item-title a {
color: var(--ink);
text-decoration: none;
}
.archive-item-title a:hover { color: var(--accent); }
/* --- Author Card --- */
.author-card {
text-align: center;
padding: 32px 0;
margin: 48px 0;
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
}
.author-name {
font-family: var(--font-serif);
font-style: italic;
font-size: 18px;
color: var(--ink);
margin-bottom: 4px;
}
.author-bio {
font-family: var(--font-sans);
font-size: 13px;
color: var(--ink-faint);
}
/* --- Tags --- */
.post-tags {
text-align: center;
margin: 24px 0;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.25em;
text-transform: uppercase;
}
.post-tags a {
color: var(--ink-soft);
margin: 0 8px;
}
.post-tags a:hover { color: var(--accent); }
/* --- Comments --- */
.post-comments {
margin: 48px 0;
padding-top: 32px;
border-top: 1px solid var(--rule);
}
/* --- Responsive --- */
@media (max-width: 720px) {
body { font-size: 17px; }
/* Homepage v1.0.32 · mobile */
.home-split-inner {
grid-template-columns: 1fr;
gap: 56px;
padding: 56px 24px 40px;
}
.hero-recruit-line { font-size: 22px; }
.hero-claim { font-size: 18px; }
.hero-disclaimer { font-size: 16px; }
.hero-conclusion { font-size: 16px; }
.hero-invitation { font-size: 18px; }
.home-featured-title { font-size: 36px; }
.home-featured-subt { font-size: 17px; }
/* v1.0.35: hairline subscribe mobile */
.hero-subscribe { margin-top: 28px; padding: 24px 20px 22px; }
.hero-subscribe-headline { font-size: 20px; }
.hero-subscribe-sub { font-size: 15px; margin-bottom: 18px; }
.hero-subscribe-row { flex-direction: column; gap: 14px; }
.hero-subscribe-btn { padding: 12px 22px; }
.home-four-elements { padding: 40px 24px 56px; }
.home-four-elements-eyebrow { margin-bottom: 32px; padding-top: 24px; }
.home-four-elements-grid {
grid-template-columns: 1fr 1fr;
gap: 28px;
}
.home-proverbs { padding: 56px 24px; }
.home-proverbs-inner {
grid-template-columns: 1fr;
gap: 32px;
text-align: center;
}
.home-proverbs-seal { margin: 0 auto; width: 60px; height: 60px; }
.home-proverbs-verse { font-size: 19px; }
.home-proverbs-claim { font-size: 18px; }
.home-proverbs-ref { margin-bottom: 24px; padding-bottom: 20px; }
.home-earlier-inner { padding: 40px 24px 64px; }
.home-earlier-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.home-earlier-title { font-size: 22px; }
/* Header collapses to centered stack on mobile */
.site-header { padding: 20px 20px 18px; }
.site-header-inner {
flex-direction: column;
align-items: center;
gap: 14px;
text-align: center;
}
.site-brand {
flex-direction: column;
align-items: center;
gap: 8px;
text-align: center;
}
.site-seal { width: 42px; height: 42px; }
.site-seal svg { width: 34px; height: 34px; }
.site-wordmark { align-items: center; }
.site-title-text { font-size: 26px; }
.site-tagline { font-size: 10px; letter-spacing: 0.24em; }
.site-nav ul { justify-content: center; }
.site-nav a { margin: 0 10px; font-size: 10px; }
/* Legacy fallback */
.site-logo img { height: 44px; }
.entry-title { font-size: 44px; margin: 36px 0 14px; }
.entry-subtitle { font-size: 18px; }
/* Pedestal (v1.0.29) */
.vv-pedestal { padding: 40px 0 36px; }
.vv-pedestal-word { font-size: 72px; margin-bottom: 24px; }
.vv-pedestal-line { font-size: 17px; }
.vv-pedestal-line .translit { font-size: 22px; }
.vv-pedestal-line .sep { margin: 0 8px; }
/* Inline painting (v1.0.29) */
.vv-painting-inline { margin: 32px 0 28px; }
/* Entry metadata footer (v1.0.29) */
.vv-entry-metadata { padding: 36px 0 22px; margin-top: 36px; font-size: 10px; letter-spacing: 0.25em; }
.verse { font-size: 19px; line-height: 1.5; }
.verse-block { margin: 36px 0 32px; padding: 24px 0 22px; }
.entry-body blockquote.vv-verse {
font-size: 19px;
line-height: 1.5;
padding: 32px 22px 30px;
margin: 36px 0 32px;
}
.entry-body .vv-verse-text {
font-size: 19px;
line-height: 1.5;
max-width: 100%;
}
.entry-body .vv-verse-label {
margin-bottom: 22px;
}
.entry-body .vv-verse-label,
.entry-body .vv-verse-ref {
letter-spacing: 0.25em;
}
.entry-body blockquote.vv-keepsake {
padding: 22px 24px 24px;
margin: 32px 0;
}
.entry-body .vv-keepsake-text { font-size: 19px; }
.entry-body .vv-keepsake-label { letter-spacing: 0.25em; margin-bottom: 16px; }
.entry-body blockquote.vv-prayer {
padding: 20px 22px 22px;
margin: 32px 0;
}
.entry-body .vv-prayer-text { font-size: 17px; }
.entry-body .vv-prayer-label { letter-spacing: 0.25em; margin-bottom: 14px; }
/* Generic blockquote mobile */
.entry-body blockquote {
font-size: 17px;
padding-left: 18px;
}
.kg-callout-card { padding: 22px 24px 24px; font-size: 18px; margin: 32px 0; }
.kg-callout-card p:not(:first-child),
.kg-callout-text > p:not(:first-child) { font-size: 19px; }
.entry-body { font-size: 17px; }
.entry-body > p:first-of-type::first-letter,
.entry-body .first-letter-drop::first-letter {
font-size: 44px;
}
.keepsake { padding: 22px 24px 24px; margin: 32px 0; }
.keepsake-text { font-size: 19px; }
.prayer { padding: 20px 22px 22px; margin: 32px 0; }
.prayer-text { font-size: 17px; }
details.work-behind summary { padding: 16px 20px; font-size: 17px; }
details.work-behind .wb-content { padding: 0 20px 20px; font-size: 16px; }
.page-content { font-size: 17px; }
.page-content h1 { font-size: 28px; margin: 32px 0 24px; }
.subscribe-block { padding: 32px 20px 28px; margin: 48px 0 0; max-width: 100%; }
.subscribe-block .sb-headline { font-size: 22px; }
.subscribe-block .sb-subhead { font-size: 16px; margin-bottom: 24px; }
.subscribe-block .sb-action { gap: 10px; }
.subscribe-block .sb-seal { width: 44px; height: 44px; }
.subscribe-block .sb-seal svg { width: 36px; height: 36px; }
.subscribe-block .subscribe-btn { height: 44px; padding: 0 28px; font-size: 11px; letter-spacing: 0.18em; }
.subscribe-block .sb-fineprint { font-size: 10px; margin-top: 18px; }
/* v1.0.37: inline subscribe mobile (stacks vertically on narrow screens) */
.vv-inline-subscribe {
flex-direction: column;
align-items: stretch;
gap: 14px;
padding: 18px 18px 20px;
margin: 32px 0;
}
.vv-inline-subscribe-text {
font-size: 16px;
text-align: center;
}
.vv-inline-subscribe-btn {
padding: 10px 22px;
align-self: center;
}
/* v1.0.38: answer capsule mobile */
.vv-answer-capsule {
font-size: 16px;
padding: 20px 0;
margin: 24px 0 28px;
text-align: left;
}
/* v1.0.39: share row mobile.
Label stacks above the link row so 4 labels fit comfortably. */
.vv-share {
padding-top: 24px;
margin-top: 28px;
font-size: 10px;
letter-spacing: 0.18em;
}
.vv-share-label {
display: block;
margin: 0 0 14px;
}
.vv-share-link {
margin: 0 6px;
}
.vv-share-sep {
margin: 0;
}
.archive-item { gap: 16px; }
.archive-item-image { width: 60px; height: 75px; }
.archive-item-title { font-size: 18px; }
}
/* --- Print --- */
@media print {
.site-header, .site-footer, .subscribe-block, details.references, details.work-behind { display: none; }
body { color: black; background: white; font-size: 12pt; }
.entry-body { font-size: 12pt; }
}
/* ============================================================ */
/* Top share row (v1.0.40) */
/* Compact, glyph-only variant of .vv-share. Sits under the */
/* subtitle. Text labels are visually hidden (the links keep */
/* their aria-label for screen readers); separators are dropped */
/* and the glyphs are bumped up a touch since they stand alone. */
/* ============================================================ */
.vv-share--top {
margin: 16px 0 0;
padding-top: 0;
border-top: none;
}
.vv-share--top .vv-share-link {
margin: 0 11px;
}
.vv-share--top .vv-share-link span {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.vv-share--top .vv-share-sep {
display: none;
}
.vv-share--top .vv-share-glyph {
width: 14px;
height: 14px;
}
/* Copy feedback: tint the glyph burgundy briefly on copy. Works for both */
/* rows; on the glyph-only top row it is the only visible signal. */
.vv-share-copy--copied .vv-share-glyph {
color: var(--burgundy);
}
/* ============================================================ */
/* Read-next carousel (v1.0.40) */
/* "More from VerseVoices" at the foot of each entry. A */
/* horizontal scroll/snap track of other entries. Touch users */
/* swipe; pointer users get the prev/next arrows. Arrows hide */
/* when the track is not overflowing (.vv-carousel--static is */
/* set by main.js). */
/* ============================================================ */
.vv-readnext {
padding: 44px 0 8px;
}
.vv-readnext-title {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-faint);
text-align: center;
margin-bottom: 26px;
}
.vv-carousel {
position: relative;
}
.vv-carousel-track {
display: flex;
gap: 20px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding: 4px 2px 14px;
}
.vv-carousel-track::-webkit-scrollbar {
display: none;
}
.vv-carousel-card {
flex: 0 0 auto;
width: 220px;
scroll-snap-align: start;
display: block;
text-decoration: none;
color: var(--ink);
background: var(--off-white);
border: 1px solid var(--rule);
transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.vv-carousel-card:hover {
border-color: var(--burgundy);
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(26, 22, 18, 0.08);
}
.vv-carousel-thumb {
aspect-ratio: 3 / 2;
background: var(--cream-deep);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.vv-carousel-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.vv-carousel-thumb-fallback {
font-family: var(--font-serif);
font-style: italic;
font-size: 42px;
color: var(--gold);
}
.vv-carousel-meta {
padding: 14px 16px 18px;
}
.vv-carousel-tag {
display: block;
font-family: var(--font-sans);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 8px;
}
.vv-carousel-card-title {
font-family: var(--font-serif);
font-size: 18px;
font-weight: 500;
line-height: 1.35;
color: var(--ink);
}
.vv-carousel-arrow {
position: absolute;
top: 33%;
transform: translateY(-50%);
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--rule);
background: var(--off-white);
color: var(--ink);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
transition: border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.vv-carousel-prev {
left: -10px;
}
.vv-carousel-next {
right: -10px;
}
.vv-carousel-arrow:hover {
border-color: var(--burgundy);
color: var(--burgundy);
}
.vv-carousel-arrow:disabled {
opacity: 0.25;
cursor: default;
border-color: var(--rule);
color: var(--ink);
}
.vv-carousel--static .vv-carousel-arrow {
display: none;
}
@media (max-width: 600px) {
.vv-carousel-arrow {
display: none;
}
.vv-carousel-card {
width: 72vw;
max-width: 280px;
}
.vv-readnext {
padding-top: 36px;
}
}
/* Verse Index page — lists all entries (added v1.0.42) */
.vi-head { text-align: center; margin: 16px 0 8px; }
.vi-kicker {
font-family: var(--font-sans); font-weight: 600; font-size: 11px;
letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold);
}
.vi-title {
font-family: var(--font-serif); font-weight: 400; font-size: 48px;
line-height: 1.05; letter-spacing: -0.01em; color: var(--ink); margin: 8px 0 6px;
}
.vi-sub {
font-family: var(--font-serif); font-style: italic; font-size: 20px;
color: var(--ink-soft); margin: 0 0 6px;
}
.vi-intro {
font-family: var(--font-serif); font-size: 16px; line-height: 1.6;
color: var(--ink-soft); max-width: 34em; margin: 6px auto 0;
}
.vi-count {
font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.22em;
text-transform: uppercase; color: var(--ink-faint); text-align: center; margin: 22px 0 4px;
}
.vi-list { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.vi-item { border-bottom: 1px solid var(--rule); }
.vi-link {
display: flex; align-items: center; gap: 18px; padding: 18px 4px;
text-decoration: none; color: var(--ink); transition: background 0.15s ease;
}
.vi-link:hover { background: var(--cream); }
.vi-thumb {
flex: 0 0 auto; width: 66px; height: 66px; border-radius: 3px;
background-size: cover; background-position: center; background-color: var(--cream-deep);
}
.vi-body { flex: 1 1 auto; min-width: 0; }
.vi-word {
display: block; font-family: var(--font-serif); font-weight: 400;
font-size: 30px; line-height: 1.08; color: var(--ink); transition: color 0.15s ease;
}
.vi-word--en { font-weight: 500; font-size: 24px; }
.vi-name {
display: block; font-family: var(--font-sans); font-weight: 600;
font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
color: var(--gold); margin-top: 7px;
}
.vi-entry-sub {
display: block; font-family: var(--font-serif); font-style: italic;
font-size: 14px; line-height: 1.5; color: var(--ink-soft); margin-top: 7px;
}
.vi-arrow {
flex: 0 0 auto; font-family: var(--font-serif); font-size: 20px;
color: var(--gold); opacity: 0.45; transition: opacity 0.15s ease, transform 0.15s ease;
}
.vi-link:hover .vi-word { color: var(--burgundy); }
.vi-link:hover .vi-arrow { opacity: 1; transform: translateX(3px); }
@media (max-width: 600px) {
.vi-title { font-size: 34px; }
.vi-sub { font-size: 17px; }
.vi-thumb { width: 54px; height: 54px; }
.vi-word { font-size: 24px; }
.vi-word--en { font-size: 20px; }
.vi-link { gap: 14px; }
}