@charset "UTF-8";

/*
 * AGFO Book Page 1.5.1
 * Every rule is scoped to .agfo-bp so the plugin cannot leak into the theme.
 * Sizes and colours come from CSS variables printed inline from the settings.
 */

.agfo-bp {
	--agfo-bp-accent: var(--agfo-primary, #a61e30);
	--agfo-bp-ink: #33383f;
	--agfo-bp-soft: #8a8f98;
	--agfo-bp-edge: #ece5d8;
	--agfo-bp-ornament: #c9b99b;
	--agfo-bp-title-lh: 1.25;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--agfo-bp-max, 820px);
	margin: 0 auto;
	padding: 48px 24px 64px;
}
.agfo-bp *, .agfo-bp *::before, .agfo-bp *::after { box-sizing: border-box; }

/* ── Archive header ─────────────────────────────────── */

.agfo-bp-head { text-align: center; margin-bottom: 44px; }
.agfo-bp-flourish { display: block; font-size: 26px; line-height: 1; color: var(--agfo-bp-accent); margin-bottom: 10px; }
.agfo-bp-cat {
	margin: 0 0 12px;
	font-family: var(--agfo-heading-font, Georgia, "Times New Roman", serif);
	font-size: clamp(32px, 5vw, 50px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: .4px;
	color: var(--agfo-heading, #1f2937);
}
.agfo-bp-desc {
	max-width: 640px;
	margin: 0 auto 10px;
	font-family: var(--agfo-heading-font, Georgia, serif);
	font-style: italic;
	font-size: 16.5px;
	line-height: 1.75;
	color: #5b5f66;
}
.agfo-bp-desc p { margin: 0; }
.agfo-bp-count { margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; color: var(--agfo-bp-soft); }
.agfo-bp-rule { display: block; width: 88px; height: 2px; margin: 20px auto 0; background: linear-gradient(90deg, transparent, var(--agfo-bp-accent), transparent); }

/* ── List and cards ─────────────────────────────────── */

.agfo-bp-list { display: flex; flex-direction: column; gap: 0; }
.agfo-bp-card {
	position: relative;
	background: var(--agfo-bp-bg, #fffdf8);
	border: 1px solid var(--agfo-bp-edge);
	border-radius: var(--agfo-bp-radius, 14px);
	overflow: hidden;
	box-shadow: 0 10px 32px rgba(31, 26, 18, .07);
	transition: box-shadow .25s ease, transform .25s ease;
}
.agfo-bp-archive .agfo-bp-card:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(31, 26, 18, .12); }
.agfo-bp-archive .agfo-bp-list > .agfo-bp-card:not(:last-child) { margin-bottom: 56px; }
.agfo-bp-archive .agfo-bp-list > .agfo-bp-card:not(:last-child)::after {
	content: "❦";
	position: absolute;
	left: 50%;
	bottom: -42px;
	transform: translateX(-50%);
	font-size: 17px;
	color: var(--agfo-bp-ornament);
	pointer-events: none;
}
.agfo-bp-prose.agfo-bp-archive .agfo-bp-list > .agfo-bp-card:not(:last-child)::after { content: "§"; }

.agfo-bp-band-link { display: block; text-decoration: none; }
.agfo-bp-band { position: relative; display: block; overflow: hidden; background: #efe9dd; }
.agfo-bp-band img { display: block; filter: saturate(.94); }

/*
 * Placements.
 *
 * band  — fixed height, cropped. The crop focus is a variable so a portrait
 *         keeps its face instead of being cut at dead centre.
 * full  — the whole image at its own ratio, no crop at all. The ratio is
 *         reserved up front so nothing shifts while it loads.
 * plate — square or portrait images, narrower and centred like a book plate,
 *         because a tall image at full width would dwarf the text.
 * hero  — the title sits on the image behind a veil.
 */
.agfo-bp-band-band { height: var(--agfo-bp-band, clamp(180px, 28vw, 250px)); }
.agfo-bp-band-band img { width: 100%; height: 100%; object-fit: cover; object-position: var(--agfo-bp-focal, 50% 30%); }
.agfo-bp-band-fade { position: absolute; inset: auto 0 0 0; height: 64px; background: linear-gradient(180deg, transparent, var(--agfo-bp-bg, #fffdf8)); }

.agfo-bp-band-full { height: auto; aspect-ratio: var(--agfo-bp-ratio, 16 / 9); background: transparent; }
.agfo-bp-band-full img { width: 100%; height: 100%; object-fit: contain; }

.agfo-bp-band-plate { height: auto; background: transparent; padding: 34px clamp(24px, 6vw, 64px) 0; text-align: center; }
.agfo-bp-band-plate img { width: auto; max-width: min(100%, 430px); height: auto; max-height: var(--agfo-bp-band, 66vh); margin: 0 auto; border-radius: 8px; box-shadow: 0 10px 30px rgba(31, 26, 18, .16); }

/*
 * An explicit height turns an uncropped placement into a cropped one, so it
 * takes the fixed height and the focal point exactly like a band does.
 */
.agfo-bp-band-capped { height: var(--agfo-bp-band, clamp(180px, 28vw, 250px)); aspect-ratio: auto; background: #efe9dd; padding: 0; }
.agfo-bp-band-capped img { width: 100%; max-width: none; height: 100%; max-height: none; object-fit: cover; object-position: var(--agfo-bp-focal, 50% 30%); border-radius: 0; box-shadow: none; }

.agfo-bp-band-hero { height: var(--agfo-bp-band, clamp(320px, 46vw, 520px)); }
.agfo-bp-band-hero img { width: 100%; height: 100%; object-fit: cover; object-position: var(--agfo-bp-focal, 50% 30%); }
.agfo-bp-hero-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 15, 11, .18) 0%, rgba(18, 15, 11, .30) 45%, rgba(18, 15, 11, .78) 100%); }
.agfo-bp-hero-text { position: absolute; inset: auto 0 0 0; padding: 0 clamp(22px, 6vw, 60px) clamp(26px, 4vw, 42px); text-align: center; }
.agfo-bp-hero-text .agfo-bp-title { color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }
.agfo-bp-hero-text .agfo-bp-meta { color: rgba(255, 255, 255, .86); margin-bottom: 0; }
.agfo-bp-img-hero .agfo-bp-body { padding-top: 34px; }

.agfo-bp-body { padding: 34px clamp(24px, 6vw, 64px) 40px; text-align: center; }
.agfo-bp-title {
	margin: 0 0 8px;
	font-family: var(--agfo-heading-font, Georgia, "Times New Roman", serif);
	font-size: clamp(23px, 3.2vw, 30px);
	font-weight: 700;
	line-height: var(--agfo-bp-title-lh, 1.25);
}

/*
 * Archive titles are clamped to a fixed number of lines AND reserve that
 * height, so a one-word title and a long one occupy the same space and the
 * cards line up. Disabled when the setting is 0 (.agfo-bp-tlines-0).
 */
.agfo-bp-archive:not(.agfo-bp-tlines-0) .agfo-bp-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--agfo-bp-title-lines, 2);
	line-clamp: var(--agfo-bp-title-lines, 2);
	overflow: hidden;
	min-height: calc(var(--agfo-bp-title-lines, 2) * var(--agfo-bp-title-lh, 1.25) * 1em);
}
.agfo-bp-archive:not(.agfo-bp-tlines-0) .agfo-bp-title a { display: block; }
.agfo-bp-title a { color: var(--agfo-heading, #1f2937); text-decoration: none; transition: color .2s; }
.agfo-bp-card:hover .agfo-bp-title a { color: var(--agfo-bp-accent); }
.agfo-bp-meta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0 0 22px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2.1px;
	text-transform: uppercase;
	color: #a09a8d;
}
.agfo-bp-dot { opacity: .6; }

/* ── Verse ──────────────────────────────────────────── */

.agfo-bp-verse { display: flex; flex-direction: column; gap: 2px; margin: 0 auto 26px; max-width: 560px; }
.agfo-bp-line {
	display: block;
	font-family: var(--agfo-heading-font, Georgia, "Times New Roman", serif);
	font-size: var(--agfo-bp-verse-size, 18.5px);
	line-height: 1.95;
	color: #3a3f46;
	text-wrap: balance;
}
.agfo-bp-ellipsis { display: block; margin-top: 8px; font-size: 20px; letter-spacing: 6px; color: #b9ac93; }
.agfo-bp-verse-full { gap: 0; margin-bottom: 6px; }
.agfo-bp-stanza { display: flex; flex-direction: column; gap: 2px; }
.agfo-bp-stanza + .agfo-bp-stanza { margin-top: 24px; }
.agfo-bp-section { display: block; margin: 6px 0 10px; font-size: 12px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: #b3a789; }

/* ── Prose card excerpt ─────────────────────────────── */

.agfo-bp-prose .agfo-bp-body { text-align: left; padding: 30px clamp(22px, 4vw, 44px) 34px; }
.agfo-bp-prose { --agfo-bp-title-lh: 1.3; }
.agfo-bp-prose .agfo-bp-title { font-size: clamp(21px, 2.8vw, 28px); }
.agfo-bp-prose .agfo-bp-meta { justify-content: flex-start; margin-bottom: 16px; letter-spacing: 1.6px; }
.agfo-bp-excerpt {
	margin: 0 0 22px;
	font-family: var(--agfo-prose-font, var(--agfo-body-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif));
	font-size: var(--agfo-bp-prose-size, 16.5px);
	line-height: 1.8;
	color: var(--agfo-bp-ink);
}
.agfo-bp-dropcap {
	float: left;
	margin: 6px 10px 0 0;
	font-family: var(--agfo-heading-font, Georgia, "Times New Roman", serif);
	font-size: 3.1em;
	line-height: .78;
	font-weight: 700;
	color: var(--agfo-bp-accent);
}
.agfo-bp-prose .agfo-bp-more { clear: both; }

/* ── Read more, pagination, empty ───────────────────── */

.agfo-bp-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 24px;
	border: 1px solid var(--agfo-bp-accent);
	border-radius: 999px;
	background: transparent;
	color: var(--agfo-bp-accent);
	font-size: 13.5px;
	font-weight: 800;
	letter-spacing: .6px;
	text-decoration: none;
	transition: background .2s, color .2s, box-shadow .2s;
}
.agfo-bp-more:hover { background: var(--agfo-bp-accent); color: #fff; box-shadow: 0 10px 24px rgba(31, 26, 18, .18); }

.agfo-bp-pagination { text-align: center; margin-top: 52px; }
.agfo-bp-pagination a, .agfo-bp-pagination span {
	display: inline-block;
	margin: 3px;
	padding: 10px 16px;
	border-radius: 999px;
	border: 1px solid #e2dccd;
	background: var(--agfo-bp-bg, #fffdf8);
	color: #3a3f46;
	text-decoration: none;
	font-weight: 700;
}
.agfo-bp-pagination .current, .agfo-bp-pagination a:hover { background: var(--agfo-bp-accent); border-color: var(--agfo-bp-accent); color: #fff; }

.agfo-bp-empty {
	text-align: center;
	padding: 70px 24px;
	background: var(--agfo-bp-bg, #fffdf8);
	border: 1px dashed #d9d2c2;
	border-radius: var(--agfo-bp-radius, 14px);
	font-family: var(--agfo-heading-font, Georgia, serif);
	font-style: italic;
	font-size: 17px;
	color: #6b7078;
}

/* ── Columns ────────────────────────────────────────── */

.agfo-bp-archive:not(.agfo-bp-cols-1) .agfo-bp-list {
	display: grid;
	grid-template-columns: repeat(var(--agfo-bp-cols, 1), minmax(0, 1fr));
	gap: 28px;
}
.agfo-bp-archive:not(.agfo-bp-cols-1) .agfo-bp-list > .agfo-bp-card:not(:last-child) { margin-bottom: 0; }
.agfo-bp-archive:not(.agfo-bp-cols-1) .agfo-bp-list > .agfo-bp-card:not(:last-child)::after { content: none; }
.agfo-bp-archive:not(.agfo-bp-cols-1) .agfo-bp-card { display: flex; flex-direction: column; }
.agfo-bp-archive:not(.agfo-bp-cols-1) .agfo-bp-body { flex: 1; display: flex; flex-direction: column; padding: 26px clamp(20px, 3vw, 34px) 30px; }
.agfo-bp-archive:not(.agfo-bp-cols-1) .agfo-bp-more { margin-top: auto; }
.agfo-bp-archive:not(.agfo-bp-cols-1) .agfo-bp-title { font-size: clamp(19px, 2.2vw, 24px); }
.agfo-bp-archive:not(.agfo-bp-cols-1) .agfo-bp-band-band,
.agfo-bp-archive:not(.agfo-bp-cols-1) .agfo-bp-band-capped { height: var(--agfo-bp-band, clamp(150px, 18vw, 200px)); }
.agfo-bp-poetry.agfo-bp-archive:not(.agfo-bp-cols-1) .agfo-bp-more { align-self: center; }

/* ── Single ─────────────────────────────────────────── */

.agfo-bp-single .agfo-bp-card:hover { transform: none; box-shadow: 0 10px 32px rgba(31, 26, 18, .07); }
.agfo-bp-single .agfo-bp-band-band,
.agfo-bp-single .agfo-bp-band-capped { height: var(--agfo-bp-band, clamp(220px, 34vw, 320px)); }
.agfo-bp-single .agfo-bp-flourish { font-size: 22px; margin-bottom: 12px; }
.agfo-bp-single .agfo-bp-title {
	font-size: clamp(27px, 3.8vw, 37px);
	display: block;
	-webkit-line-clamp: none;
	line-clamp: none;
	overflow: visible;
	min-height: 0;
}
.agfo-bp-single.agfo-bp-prose .agfo-bp-title,
.agfo-bp-single.agfo-bp-prose .agfo-bp-meta,
.agfo-bp-single.agfo-bp-prose .agfo-bp-flourish,
.agfo-bp-single.agfo-bp-prose .agfo-bp-close { text-align: center; justify-content: center; }
.agfo-bp-close { display: block; margin-top: 30px; font-size: 19px; color: var(--agfo-bp-ornament); }
.agfo-bp-after { width: 100%; max-width: var(--agfo-bp-max, 820px); margin: 0 auto; padding: 0 24px 56px; }

/* ── Article typography inside the card ─────────────── */

.agfo-bp-prose .agfo-bp-prose,
.agfo-bp .agfo-bp-prose {
	text-align: left;
	font-size: var(--agfo-bp-prose-size, 16.5px);
	line-height: 1.85;
	color: var(--agfo-bp-ink);
}
.agfo-bp-poetry .agfo-bp-prose { max-width: 620px; margin-left: auto; margin-right: auto; }
.agfo-bp-prose.has-dropcap > p:first-of-type::first-letter {
	float: left;
	margin: 8px 12px 0 0;
	font-family: var(--agfo-heading-font, Georgia, "Times New Roman", serif);
	font-size: 3.6em;
	line-height: .76;
	font-weight: 700;
	color: var(--agfo-bp-accent);
}
.agfo-bp .agfo-bp-prose p { margin: 0 0 1.15em; }
.agfo-bp .agfo-bp-prose h2,
.agfo-bp .agfo-bp-prose h3,
.agfo-bp .agfo-bp-prose h4 {
	font-family: var(--agfo-heading-font, Georgia, "Times New Roman", serif);
	color: var(--agfo-heading, #1f2937);
	line-height: 1.3;
	clear: both;
}
.agfo-bp .agfo-bp-prose h2 { margin: 1.9em 0 .6em; font-size: 1.5em; font-weight: 700; }
.agfo-bp .agfo-bp-prose h2::after { content: ""; display: block; width: 52px; height: 2px; margin-top: 12px; background: linear-gradient(90deg, var(--agfo-bp-accent), transparent); }
.agfo-bp .agfo-bp-prose h3 { margin: 1.6em 0 .5em; font-size: 1.26em; font-weight: 700; }
.agfo-bp .agfo-bp-prose h4 { margin: 1.4em 0 .45em; font-size: 1.1em; font-weight: 700; }
.agfo-bp .agfo-bp-prose ul,
.agfo-bp .agfo-bp-prose ol { margin: 0 0 1.15em; padding-left: 1.5em; }
.agfo-bp .agfo-bp-prose li { margin: 0 0 .5em; line-height: 1.8; }
.agfo-bp .agfo-bp-prose li::marker { color: var(--agfo-bp-accent); }
.agfo-bp .agfo-bp-prose blockquote {
	margin: 1.7em 0;
	padding: 4px 0 4px 22px;
	border-left: 3px solid var(--agfo-bp-accent);
	font-family: var(--agfo-heading-font, Georgia, serif);
	font-style: italic;
	font-size: 1.08em;
	line-height: 1.75;
	color: #4a5058;
}
.agfo-bp .agfo-bp-prose blockquote p:last-child { margin-bottom: 0; }
.agfo-bp .agfo-bp-prose figure,
.agfo-bp .agfo-bp-prose .wp-block-image { margin: 1.8em 0; clear: both; }
.agfo-bp .agfo-bp-prose img { max-width: 100%; height: auto; border-radius: 10px; box-shadow: 0 8px 24px rgba(31, 26, 18, .10); }
.agfo-bp .agfo-bp-prose figcaption,
.agfo-bp .agfo-bp-prose .wp-caption-text { margin-top: 9px; font-size: .82em; font-style: italic; color: var(--agfo-bp-soft); text-align: center; }
.agfo-bp .agfo-bp-prose a { color: var(--agfo-bp-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.agfo-bp .agfo-bp-prose a:hover { text-decoration-thickness: 2px; }
.agfo-bp .agfo-bp-prose hr { height: 0; border: 0; margin: 2.2em 0; text-align: center; overflow: visible; }
.agfo-bp .agfo-bp-prose hr::after {
	content: "§";
	display: inline-block;
	transform: translateY(-.62em);
	padding: 0 14px;
	background: var(--agfo-bp-bg, #fffdf8);
	font-size: 17px;
	color: #c2b79f;
}
.agfo-bp .agfo-bp-prose code,
.agfo-bp .agfo-bp-prose pre { font-family: Consolas, Monaco, monospace; font-size: .88em; background: rgba(31, 26, 18, .05); border-radius: 6px; }
.agfo-bp .agfo-bp-prose code { padding: 2px 6px; }
.agfo-bp .agfo-bp-prose pre { padding: 14px 16px; overflow-x: auto; margin: 0 0 1.3em; }
.agfo-bp .agfo-bp-prose table { width: 100%; margin: 1.6em 0; font-size: .94em; border-collapse: collapse; }
.agfo-bp .agfo-bp-prose th,
.agfo-bp .agfo-bp-prose td { border: 1px solid var(--agfo-bp-edge); padding: 10px 12px; text-align: left; }
.agfo-bp .agfo-bp-prose > *:last-child { margin-bottom: 0; }

/* ── Responsive ─────────────────────────────────────── */

@media (max-width: 1000px) {
	.agfo-bp-archive:not(.agfo-bp-cols-1) .agfo-bp-list { grid-template-columns: repeat(min(var(--agfo-bp-cols, 1), 2), minmax(0, 1fr)); }
}
@media (max-width: 700px) {
	.agfo-bp-archive:not(.agfo-bp-cols-1) .agfo-bp-list { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}
@media (max-width: 600px) {
	.agfo-bp { padding: 28px 16px 48px; }
	.agfo-bp-band-plate { padding: 26px 18px 0; }
	.agfo-bp-band-plate img { max-width: min(100%, 300px); max-height: 52vh; }
	.agfo-bp-band-hero { height: var(--agfo-bp-band, clamp(280px, 74vw, 380px)); }
	.agfo-bp-after { padding: 0 16px 40px; }
	.agfo-bp-body { padding: 26px 18px 32px; }
	.agfo-bp-line { font-size: var(--agfo-bp-verse-size-m, 16.5px); line-height: 1.85; }
	.agfo-bp-dropcap { font-size: 2.7em; }
	.agfo-bp-archive .agfo-bp-list > .agfo-bp-card:not(:last-child) { margin-bottom: 46px; }
	.agfo-bp-archive .agfo-bp-list > .agfo-bp-card:not(:last-child)::after { bottom: -36px; }
}