/**
 * Butterfields Obituaries - front end.
 *
 * One stylesheet, plain CSS, custom properties for the palette. Everything is
 * scoped under .bfo so it cannot leak into the theme, and the type stack
 * inherits the theme's own serif and sans where they are set.
 */

.bfo {
	/* Palette. Contrast checked at 4.5:1 or better against its background. */
	--bfo-ink: #2e2a26;
	--bfo-ink-soft: #574f47;
	--bfo-muted: #6d6459;
	--bfo-line: #e2ddd4;
	--bfo-hairline: #ebe7e0;
	--bfo-surface: #faf8f5;
	--bfo-surface-2: #f3efe9;
	--bfo-page: #ffffff;
	/*
	 * The house green, from the site's own header.
	 *
	 * It is a light colour - white on it measures 1.95:1, which is not
	 * readable - so anything sitting ON the green takes the dark ink
	 * (7.3:1), and green TEXT on a white ground uses the deepened version
	 * (6.2:1) instead. Both clear AA comfortably.
	 */
	--bfo-brand: #b9c138;
	--bfo-brand-ink: #2e2a26;
	--bfo-brand-deep: #5f661c;
	--bfo-brand-edge: #a3ab2c;
	--bfo-flame: #e8a33d;
	--bfo-flame-hot: #f6d08a;

	/*
	 * The house type. Both faces are already loaded by the theme, so naming
	 * them here costs no extra request.
	 *
	 * `--bfo-mono` was a monospace stack, used for the small lettered details
	 * - pill labels, counts, captions, field labels. It now points at Manrope
	 * as well; the letter-spacing and small caps those rules also set are what
	 * carried the effect, and they are untouched.
	 */
	--bfo-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--bfo-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--bfo-mono: var(--bfo-sans);

	--bfo-inner: 1180px;
	--bfo-radius: 8px;
	--bfo-cards: 3;

	/* Measured at runtime by archive.js; these are only the fallbacks. */
	--bfo-sticky-top: 0px;
	--bfo-scroll-offset: 96px;

	color: var(--bfo-ink);
	background: var(--bfo-page);
	/* Set rather than inherited, so a theme change cannot alter the notices. */
	font-family: var(--bfo-sans);
}

.bfo *,
.bfo *::before,
.bfo *::after {
	box-sizing: border-box;
}

.bfo-inner {
	max-width: var(--bfo-inner);
	margin: 0 auto;
	padding: 0 24px;
}

.bfo-hidden {
	display: none !important;
}

/* Defined here rather than relied on from the theme. Most themes ship this
   class, but the brief is explicit that nothing may depend on one. */
.bfo .screen-reader-text,
.bfo-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	word-wrap: normal;
}

.bfo .screen-reader-text:focus,
.bfo-sr-only:focus {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
}

/* Focus is always visible, and never removed. */
.bfo a:focus-visible,
.bfo button:focus-visible,
.bfo input:focus-visible,
.bfo textarea:focus-visible {
	outline: 2px solid var(--bfo-ink);
	outline-offset: 2px;
	border-radius: 3px;
}

/* ------------------------------------------------------------------ */
/* Shared type                                                         */
/* ------------------------------------------------------------------ */

.bfo-eyebrow {
	margin: 0 0 10px;
	font-family: var(--bfo-mono);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bfo-muted);
}

.bfo-display {
	margin: 0 0 14px;
	font-family: var(--bfo-serif);
	font-weight: 400;
	font-size: clamp(34px, 5vw, 46px);
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--bfo-ink);
}

.bfo-display-sm {
	margin: 0 0 18px;
	font-family: var(--bfo-serif);
	font-weight: 400;
	font-size: clamp(22px, 3vw, 28px);
	line-height: 1.2;
	color: var(--bfo-ink);
}

.bfo-lead {
	max-width: 62ch;
	margin: 0 0 24px;
	font-size: 17px;
	line-height: 1.65;
	color: var(--bfo-ink-soft);
}

.bfo-hairline {
	height: 1px;
	margin: 24px 0;
	border: 0;
	background: var(--bfo-hairline);
}

.bfo-textlink {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 14px;
	color: var(--bfo-brand-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.bfo-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 18px;
	border: 1px solid var(--bfo-line);
	border-radius: 999px;
	background: var(--bfo-surface);
	color: var(--bfo-ink);
	font-family: inherit;
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}

.bfo-button:hover {
	background: var(--bfo-surface-2);
}

.bfo-button-primary {
	border-color: var(--bfo-brand);
	background: var(--bfo-brand);
	color: var(--bfo-brand-ink);
}

.bfo-button-primary:hover {
	border-color: var(--bfo-brand-edge);
	background: var(--bfo-brand-edge);
	color: var(--bfo-brand-ink);
}

.bfo-button-primary:hover {
	background: #5b4a38;
}

/* ------------------------------------------------------------------ */
/* Archive: header band                                                */
/* ------------------------------------------------------------------ */

.bfo-header-band {
	padding: 56px 0 40px;
	border-bottom: 1px solid var(--bfo-line);
	background: var(--bfo-surface);
}

.bfo-search {
	display: flex;
	align-items: stretch;
	max-width: 620px;
	border: 1px solid var(--bfo-line);
	border-radius: 999px;
	background: #fff;
	overflow: hidden;
}

.bfo-search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 13px 20px;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 16px;
	color: var(--bfo-ink);
}

.bfo-search input[type="search"]:focus {
	outline: none;
}

.bfo-search:focus-within {
	outline: 2px solid var(--bfo-ink);
	outline-offset: 2px;
}

.bfo-search-button {
	flex: 0 0 auto;
	padding: 13px 24px;
	border: 0;
	background: var(--bfo-brand);
	color: var(--bfo-brand-ink);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.bfo-search-button:hover {
	background: #5b4a38;
}

/* ------------------------------------------------------------------ */
/* Archive: sticky date navigator                                      */
/* ------------------------------------------------------------------ */

.bfo-datenav {
	position: sticky;
	top: var(--bfo-sticky-top);
	z-index: 20;
	padding: 12px 0;
	border-bottom: 1px solid var(--bfo-line);
	background: var(--bfo-page);
	box-shadow: 0 1px 6px rgba(46, 42, 38, 0.05);
}

.bfo-navrow {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 4px 0;
}

.bfo-navlabel {
	flex: 0 0 56px;
	font-family: var(--bfo-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bfo-muted);
}

.bfo-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.bfo-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border: 1px solid var(--bfo-line);
	border-radius: 999px;
	background: #fff;
	font-family: var(--bfo-mono);
	font-size: 12px;
	line-height: 1.4;
	color: var(--bfo-ink-soft);
	cursor: pointer;
}

.bfo-pill:hover:not(:disabled) {
	border-color: var(--bfo-muted);
	background: var(--bfo-surface);
}

.bfo-pill.is-active {
	border-color: var(--bfo-brand);
	background: var(--bfo-brand);
	color: var(--bfo-brand-ink);
}

.bfo-pill-count {
	font-size: 11px;
	opacity: 0.6;
}

/* A month with nothing in it stays in place, dimmed, so the row never
   reflows as filters change. */
.bfo-pill:disabled,
.bfo-pill.is-empty {
	opacity: 0.32;
	cursor: default;
	pointer-events: none;
}

@media (max-width: 680px) {
	.bfo-datenav {
		position: static;
	}

	.bfo-navrow {
		flex-direction: column;
		gap: 6px;
	}

	.bfo-navlabel {
		flex: none;
	}
}

/* ------------------------------------------------------------------ */
/* Archive: result line                                                */
/* ------------------------------------------------------------------ */

.bfo-resultline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 0 4px;
}

.bfo-resulttext {
	margin: 0;
	font-family: var(--bfo-mono);
	font-size: 13px;
	color: var(--bfo-muted);
}

.bfo-count {
	color: var(--bfo-brand-deep);
	font-weight: 700;
}

.bfo-clear {
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--bfo-mono);
	font-size: 12px;
	color: var(--bfo-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.bfo-clear:hover {
	color: var(--bfo-ink);
}

/* ------------------------------------------------------------------ */
/* Archive: the feed                                                   */
/* ------------------------------------------------------------------ */

.bfo-feed {
	padding-bottom: 24px;
}

.bfo-yeargroup {
	scroll-margin-top: var(--bfo-scroll-offset);
	padding-top: 28px;
}

.bfo-monthblock {
	scroll-margin-top: var(--bfo-scroll-offset);
	padding-top: 18px;
}

.bfo-grouphead {
	display: flex;
	align-items: baseline;
	gap: 16px;
	margin: 0 0 18px;
	font-weight: 400;
}

.bfo-grouphead .bfo-rule {
	flex: 1 1 auto;
	height: 1px;
	background: var(--bfo-hairline);
}

.bfo-grouphead-year .bfo-groupname {
	font-family: var(--bfo-serif);
	font-size: clamp(28px, 4vw, 38px);
	line-height: 1;
	color: var(--bfo-ink);
}

.bfo-grouphead-month .bfo-groupname {
	font-family: var(--bfo-serif);
	font-size: 19px;
	color: var(--bfo-ink-soft);
}

.bfo-groupcount {
	flex: 0 0 auto;
	font-family: var(--bfo-mono);
	font-size: 12px;
	color: var(--bfo-muted);
}

.bfo-cards {
	display: grid;
	grid-template-columns: repeat(var(--bfo-cards), minmax(0, 1fr));
	gap: 20px;
	margin-bottom: 8px;
}

@media (max-width: 900px) {
	.bfo-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.bfo-cards {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------ */
/* Archive: card                                                       */
/* ------------------------------------------------------------------ */

.bfo-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--bfo-line);
	border-radius: var(--bfo-radius);
	background: #fff;
	overflow: hidden;
}

.bfo-card:hover {
	border-color: var(--bfo-muted);
}

.bfo-card-link {
	display: flex;
	flex-direction: column;
	gap: 0;
	color: inherit;
	text-decoration: none;
}

/*
 * Every card gets exactly the same picture frame, whatever shape the picture
 * inside it happens to be.
 *
 * The archive inherited from the old site is a mixture: four fifths landscape
 * stock graphics, a handful of true portrait photographs, and everything from
 * 189px to 899px wide. Sizing the frame to the picture made the grid ragged -
 * frames of 272px next to 483px, cards of 443px next to 654px.
 *
 * So the frame is fixed at 4:3 and the picture is fitted inside it whole.
 * Nothing is cropped - which matters when the picture is somebody's face -
 * and every card is the same height.
 */
.bfo-card-portrait {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	padding: 10px;
	background: linear-gradient(170deg, var(--bfo-surface) 0%, var(--bfo-surface-2) 100%);
	overflow: hidden;
}

.bfo-card-portrait img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 3px;
}

/* Most imported notices have no photograph - the old site used stock
   graphics - so this placeholder is the dominant visual on the archive. It is
   a quiet unlit candle rather than an avatar silhouette, which reads as
   deliberate rather than broken. */
.bfo-card-noportrait {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	/* The frame is a flex box, so say explicitly that this fills it. */
	align-self: stretch;
	flex: 1 1 auto;
	background: linear-gradient(170deg, var(--bfo-surface) 0%, var(--bfo-surface-2) 100%);
}

.bfo-card-noportrait::before,
.bfo-card-noportrait::after {
	content: "";
	position: absolute;
	left: 50%;
}

/* The candle body. Fixed dimensions, not percentages - a percentage height on
   a 3:4 card stretches it into a stick. */
.bfo-card-noportrait::before {
	top: calc(50% - 18px);
	width: 26px;
	height: 58px;
	margin-left: -13px;
	border-radius: 3px 3px 2px 2px;
	background: rgba(110, 98, 82, 0.13);
}

/* The wick, unlit. */
.bfo-card-noportrait::after {
	top: calc(50% - 27px);
	width: 2px;
	height: 9px;
	margin-left: -1px;
	border-radius: 1px;
	background: rgba(110, 98, 82, 0.26);
}

.bfo-card-body {
	display: block;
	padding: 16px 18px 14px;
}

.bfo-card-name {
	display: block;
	font-family: var(--bfo-serif);
	font-size: 20px;
	line-height: 1.25;
	color: var(--bfo-ink);
}

.bfo-card-span {
	display: block;
	margin-top: 6px;
	font-family: var(--bfo-mono);
	font-size: 12px;
	color: var(--bfo-muted);
}

.bfo-card-sub {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	color: var(--bfo-muted);
}

.bfo-card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding: 10px 14px 10px 12px;
	border-top: 1px solid var(--bfo-hairline);
	background: var(--bfo-surface);
}

.bfo-minicandle {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 11px;
	border: 1px solid var(--bfo-line);
	border-radius: 999px;
	background: #fff;
	font-family: var(--bfo-mono);
	font-size: 12px;
	color: var(--bfo-ink-soft);
	cursor: pointer;
}

.bfo-minicandle:hover:not(:disabled) {
	border-color: var(--bfo-flame);
}

.bfo-minicandle:disabled {
	opacity: 0.45;
	cursor: default;
}

.bfo-card-view {
	font-family: var(--bfo-mono);
	font-size: 12px;
	color: var(--bfo-muted);
	text-decoration: none;
}

/* The small flame on a candle button. Two paths: the body of the flame and
   a hotter core over the wick. */
.bfo-flame {
	display: inline-block;
	width: 9px;
	height: 9.75px;
	vertical-align: -1px;
	overflow: visible;
	transform-origin: 50% 88%;
	animation: bfo-flicker 2.6s ease-in-out infinite;
}

.bfo-flame-outer {
	fill: var(--bfo-flame);
}

.bfo-flame-core {
	fill: var(--bfo-flame-hot);
}

@keyframes bfo-flicker {
	0%, 100% { transform: scale(1) rotate(-1deg); opacity: 1; }
	40% { transform: scale(1.07, 0.95) rotate(1.5deg); opacity: 0.92; }
	70% { transform: scale(0.96, 1.05) rotate(-1.5deg); opacity: 0.97; }
}

/*
 * A flame is only lit while it is on screen.
 *
 * Every card carries one, and a year of this archive is nearly two hundred
 * cards: two hundred animations, each repainting every frame whether or not
 * anybody can see it. Measured on a throttled processor that held the page
 * at 20fps the whole way down; lighting only what is in view puts it back to
 * 60. `bfo-onscreen` is added and removed by candle.js, in one pass taken
 * each time the page comes to rest.
 *
 * Written as `animation-name` rather than the `animation` shorthand so that
 * the staggered durations and delays set on individual candles below are
 * left intact.
 */
.bfo-card .bfo-flame {
	animation-name: none;
}

.bfo-card.bfo-onscreen .bfo-flame {
	animation-name: bfo-flicker;
}

/*
 * And nothing flickers at all while the page is actually moving.
 *
 * Lighting only the visible flames fixes the steady cost, but an animation
 * also costs the element its own compositing layer, and that layer is
 * composited on every frame whether the animation is running or paused. So
 * this takes the animation off rather than pausing it: while the page moves
 * there are no layers to composite, and the dozen that come back when it
 * stops are made once, not continuously. Measured the same as a page with no
 * flames on it at all. The class is put on and taken off by candle.js.
 *
 * Written to outrank the rule above it on specificity rather than with
 * `!important`, so the reduced-motion block at the foot of this file still
 * has the last word.
 */
.bfo-isscrolling .bfo-card.bfo-onscreen .bfo-flame,
.bfo-isscrolling .bfo-bigcandle.is-lit .bfo-candle-flame {
	animation-name: none;
}

/* ------------------------------------------------------------------ */
/* Archive: loading and empty                                          */
/* ------------------------------------------------------------------ */

.bfo-sentinel {
	height: 1px;
	margin-top: 500px;
}

.bfo-loadstatus {
	margin: 0 0 48px;
	padding-top: 8px;
	font-family: var(--bfo-mono);
	font-size: 12px;
	color: var(--bfo-muted);
	text-align: center;
}

.bfo-empty,
.bfo-tributes-empty {
	padding: 56px 0;
	font-family: var(--bfo-sans);
	font-size: 20px;
	color: var(--bfo-muted);
	text-align: center;
}

.bfo-noscript {
	padding: 32px 0 56px;
}

.bfo-yearlist {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 0;
	list-style: none;
}

.bfo-yearlist a {
	display: inline-block;
	padding: 6px 14px;
	border: 1px solid var(--bfo-line);
	border-radius: 999px;
	font-family: var(--bfo-mono);
	font-size: 13px;
	color: var(--bfo-ink-soft);
	text-decoration: none;
}

/* ------------------------------------------------------------------ */
/* Single obituary                                                     */
/* ------------------------------------------------------------------ */

.bfo-single {
	padding: 32px 0 72px;
}

.bfo-breadcrumb {
	margin-bottom: 32px;
	font-family: var(--bfo-mono);
	font-size: 12px;
	color: var(--bfo-muted);
}

.bfo-breadcrumb a {
	color: var(--bfo-muted);
	text-decoration: none;
}

.bfo-breadcrumb a:hover {
	color: var(--bfo-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bfo-crumb-sep {
	margin: 0 8px;
	opacity: 0.5;
}

.bfo-crumb-current {
	color: var(--bfo-ink-soft);
}

.bfo-obit-header {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: 40px;
	align-items: start;
	margin-bottom: 56px;
}

@media (max-width: 780px) {
	.bfo-obit-header {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.bfo-obit-portrait {
		max-width: 260px;
	}
}

/* One picture on its own page, so there is no grid to line up with: it keeps
   its own shape rather than being forced into a frame and cropped. */
.bfo-obit-portrait {
	border: 1px solid var(--bfo-line);
	border-radius: var(--bfo-radius);
	background: linear-gradient(170deg, var(--bfo-surface) 0%, var(--bfo-surface-2) 100%);
	padding: 10px;
	overflow: hidden;
}

.bfo-obit-portrait img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	border-radius: 3px;
}

/* Nothing to show: keep the space so the header does not jump about. */
.bfo-obit-portrait .bfo-card-noportrait {
	aspect-ratio: 4 / 3;
}

.bfo-obit-name {
	font-size: clamp(34px, 6vw, 48px);
	line-height: 1.05;
	margin-bottom: 12px;
}

.bfo-knownas {
	margin: 0 0 10px;
	font-family: var(--bfo-serif);
	font-size: 17px;
	color: var(--bfo-ink-soft);
}

.bfo-obit-meta {
	margin: 0;
	font-family: var(--bfo-mono);
	font-size: 13px;
	color: var(--bfo-muted);
}

.bfo-obit-body {
	font-size: 16px;
	line-height: 1.7;
	color: var(--bfo-ink-soft);
}

.bfo-obit-body > p:first-of-type {
	font-family: var(--bfo-sans);
	font-size: 18px;
	line-height: 1.6;
	color: var(--bfo-ink);
}

.bfo-obit-body p {
	margin: 0 0 1em;
}

.bfo-section {
	margin-bottom: 56px;
}

.bfo-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.bfo-section-head .bfo-display-sm {
	margin-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* Arrangements                                                        */
/* ------------------------------------------------------------------ */

.bfo-arrangements-box {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	border: 1px solid var(--bfo-line);
	border-radius: var(--bfo-radius);
	overflow: hidden;
}

.bfo-arrangements-box.bfo-arrangements-nomap {
	grid-template-columns: 1fr;
}

@media (max-width: 780px) {
	.bfo-arrangements-box {
		grid-template-columns: 1fr;
	}
}

.bfo-arrangements-details {
	padding: 26px 28px;
}

.bfo-arrangements-map {
	position: relative;
	border-left: 1px solid var(--bfo-line);
	background: var(--bfo-surface-2);
}

@media (max-width: 780px) {
	.bfo-arrangements-map {
		border-left: 0;
		border-top: 1px solid var(--bfo-line);
	}
}

.bfo-map {
	width: 100%;
	height: 100%;
	min-height: 240px;
}

.bfo-map-fallback {
	padding: 24px;
	font-family: var(--bfo-mono);
	font-size: 13px;
	color: var(--bfo-muted);
}

.bfo-directions {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 500;
	padding: 6px 12px;
	border: 1px solid var(--bfo-line);
	border-radius: 999px;
	background: #fff;
	font-family: var(--bfo-mono);
	font-size: 12px;
	text-decoration: none;
}

.bfo-deflist {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 10px 22px;
	margin: 0;
}

.bfo-deflist dt {
	font-family: var(--bfo-mono);
	font-size: 11px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--bfo-muted);
	padding-top: 4px;
}

.bfo-deflist dd {
	margin: 0;
	font-family: var(--bfo-sans);
	font-size: 17px;
	line-height: 1.45;
	color: var(--bfo-ink);
}

.bfo-address {
	display: block;
	margin-top: 4px;
	font-family: inherit;
	font-size: 14px;
	color: var(--bfo-muted);
}

.bfo-calendar-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 26px;
}

/* ------------------------------------------------------------------ */
/* Candle wall and messages                                            */
/* ------------------------------------------------------------------ */

/*
 * Aligned from the top, not the bottom.
 *
 * Bottom-aligning made the length of the name decide how high the candle sat:
 * a two-line name pushed its candle up out of line with its neighbours. The
 * graphic is a fixed height, so aligning the tops puts every flame on one
 * line and lets the longer names run on underneath.
 */
/*
 * A wall of photographed candles, one card each: the picture, and the name
 * underneath it.
 *
 * A grid rather than the flex row it used to be, so every card in a row is the
 * same height whatever the length of the name. The track is worked out from
 * the wall's own width rather than the viewport, because this sits inside the
 * page's content column and a media query would be measuring the wrong box.
 */
.bfo-candlewall {
	display: grid;
	/*
	 * 132px is chosen so a phone gets two candles to a row rather than one
	 * enormous one, and a full-width page gets seven. Everything between
	 * follows from the wall's own width, with no breakpoint to keep in step.
	 */
	grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
	gap: 16px;
	padding: 24px;
	border: 1px solid var(--bfo-line);
	border-radius: var(--bfo-radius);
	background: var(--bfo-surface);
}

/*
 * The candles behind "+ n more" belong to the same grid, so the container
 * holding them steps out of the way. `display: contents` beats the browser's
 * own `[hidden]` rule on specificity, so hiding has to be restated.
 */
.bfo-candlewall-more {
	display: contents;
}

.bfo-candlewall-more[hidden] {
	display: none;
}

.bfo-candle {
	display: flex;
	flex-direction: column;
	margin: 0;
	border: 1px solid var(--bfo-line);
	border-radius: var(--bfo-radius);
	background: var(--bfo-page);
	overflow: hidden;
	text-align: center;
}

/*
 * The photographs are candlelight against near-black. The panel behind them
 * is darker still, so a picture that is slow to arrive does not flash a pale
 * box in the middle of a wall of night.
 */
.bfo-candle-photo {
	display: block;
	aspect-ratio: 1 / 1;
	background: #14110d;
	overflow: hidden;
}

.bfo-candle-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
	border-radius: 0;
}

/*
 * The parts of a drawn candle. The flame sits in its own group so the flicker
 * can be put on and taken off a single element, which is what the on-screen
 * and while-scrolling rules further down rely on.
 *
 * `transform-box: fill-box` is what makes a percentage transform-origin mean
 * "this shape", rather than the whole SVG viewport - without it the flame
 * swings around a point somewhere off near the candle's foot.
 */
.bfo-candle-flame {
	transform-box: fill-box;
	transform-origin: 50% 92%;
	animation: bfo-flicker 3.1s ease-in-out infinite;
}

.bfo-candle-wick {
	fill: none;
	stroke: #6f5f4a;
	stroke-width: 1.5;
	stroke-linecap: round;
}

.bfo-candle-wax {
	fill: #fffdf9;
}

.bfo-candle-body {
	fill: #f1e9db;
}

.bfo-candle-shine {
	fill: #fffdf9;
}

.bfo-candle-shade {
	fill: #ded3c1;
}

.bfo-candle-drip {
	fill: #fbf6ec;
}

.bfo-candle-name {
	flex: 1 1 auto;
	padding: 10px 10px 12px;
	font-family: var(--bfo-mono);
	font-size: 11px;
	line-height: 1.45;
	color: var(--bfo-muted);
	overflow-wrap: anywhere;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/*
 * A candle imported from the old site can have no name against it. Without
 * this the card keeps an empty white strip under the photograph.
 */
.bfo-candle-name:empty {
	display: none;
}

.bfo-candlewall-expand {
	margin: 14px 0 0;
	text-align: center;
}

.bfo-messages {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 28px;
}

@media (max-width: 780px) {
	.bfo-messages {
		grid-template-columns: 1fr;
	}
}

.bfo-message {
	padding: 20px 22px;
	border: 1px solid var(--bfo-line);
	border-radius: var(--bfo-radius);
	background: #fff;
}

.bfo-message-body {
	font-family: var(--bfo-sans);
	font-size: 16px;
	line-height: 1.6;
	color: var(--bfo-ink);
	overflow-wrap: anywhere;
}

.bfo-message-by {
	margin: 14px 0 0;
	font-family: var(--bfo-mono);
	font-size: 12px;
	color: var(--bfo-muted);
}

.bfo-closed {
	margin: 0;
	font-family: var(--bfo-sans);
	font-size: 16px;
	color: var(--bfo-muted);
}

/* ------------------------------------------------------------------ */
/* Share row                                                           */
/* ------------------------------------------------------------------ */

.bfo-share-row {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.bfo-share-label {
	font-family: var(--bfo-mono);
	font-size: 12px;
	color: var(--bfo-muted);
}

.bfo-fb-button {
	display: inline-flex;
	align-items: center;
	padding: 10px 18px;
	border-radius: 6px;
	background: #1877f2;
	color: #fff;
	font-size: 14px;
	text-decoration: none;
}

.bfo-fb-button:hover {
	background: #1465d8;
}

.bfo-canonical {
	margin: 18px 0 0;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.bfo-urlpill {
	padding: 6px 14px;
	border: 1px dashed var(--bfo-line);
	border-radius: 999px;
	background: var(--bfo-surface);
	font-family: var(--bfo-mono);
	font-size: 12px;
	color: var(--bfo-ink-soft);
	overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ */
/* Candle modal                                                        */
/* ------------------------------------------------------------------ */

.bfo-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: grid;
	place-items: center;
	padding: 20px;
	background: rgba(30, 27, 24, 0.55);
	overflow-y: auto;
}

.bfo-modal-overlay[hidden] {
	display: none;
}

.bfo-modal {
	width: 100%;
	max-width: 560px;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
}

.bfo-modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 22px;
	border-bottom: 1px solid var(--bfo-hairline);
}

.bfo-modal-title {
	margin: 0;
	font-family: var(--bfo-serif);
	font-weight: 400;
	font-size: 20px;
	color: var(--bfo-ink);
}

.bfo-modal-close {
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: var(--bfo-surface);
	font-size: 20px;
	line-height: 1;
	color: var(--bfo-ink-soft);
	cursor: pointer;
}

.bfo-modal-close:hover {
	background: var(--bfo-surface-2);
}

.bfo-modal-body {
	padding: 22px;
}

.bfo-modal-for {
	margin: 0 0 20px;
	font-family: var(--bfo-serif);
	font-size: 19px;
	color: var(--bfo-ink);
}

.bfo-modal-cols {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

@media (max-width: 520px) {
	.bfo-modal-cols {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.bfo-modal-candle {
		display: none;
	}
}

/* 1:2, matching the drawing's own proportions, so it is not letterboxed
   inside its box and drawn smaller than the space allows. */
.bfo-bigcandle {
	display: block;
	width: 46px;
	height: 92px;
	margin: 6px auto 0;
}

.bfo-bigcandle-svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* Unlit until the candle is actually lit, then it catches. */
.bfo-bigcandle .bfo-candle-flame {
	opacity: 0;
	transform: scale(0.4);
	transition: opacity 0.5s ease, transform 0.5s ease;
	animation: none;
}

.bfo-bigcandle.is-lit .bfo-candle-flame {
	opacity: 1;
	transform: scale(1);
	animation: bfo-flicker 3s ease-in-out infinite;
}

.bfo-field {
	margin: 0 0 16px;
}

.bfo-field label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--bfo-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bfo-muted);
}

.bfo-required {
	color: #8a3b3b;
}

.bfo-modal-form input[type="text"],
.bfo-modal-form textarea {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--bfo-line);
	border-radius: 6px;
	background: #fff;
	font-family: inherit;
	font-size: 16px;
	color: var(--bfo-ink);
	resize: vertical;
}

/* The honeypot: off-screen rather than display:none, which some bots skip. */
.bfo-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.bfo-modal-note {
	margin: 0 0 18px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--bfo-muted);
}

.bfo-modal-error {
	margin: 0 0 16px;
	padding: 10px 14px;
	border-radius: 6px;
	background: #fbf0f0;
	color: #7d3232;
	font-size: 14px;
}

.bfo-modal-submit {
	width: 100%;
	justify-content: center;
	padding: 14px 18px;
	font-size: 16px;
}

.bfo-modal-submit:disabled {
	opacity: 0.6;
	cursor: default;
}

.bfo-modal-thanks-text {
	margin: 0 0 20px;
	font-family: var(--bfo-sans);
	font-size: 17px;
	line-height: 1.6;
	color: var(--bfo-ink);
}

/* ------------------------------------------------------------------ */
/* Holding the line against the theme                                   */
/*                                                                      */
/* Themes style bare `button` and `a` elements, and if their stylesheet  */
/* loads after this one it wins on equal specificity - which is how the  */
/* filter pills ended up pink on this site. Re-asserting the component   */
/* styles with the `.bfo` scope raises specificity enough to hold,       */
/* without resorting to !important on everything.                       */
/* ------------------------------------------------------------------ */

.bfo .bfo-pill,
.bfo .bfo-pill:visited {
	border: 1px solid var(--bfo-line);
	border-radius: 999px;
	background: #fff;
	color: var(--bfo-ink-soft);
	font-family: var(--bfo-mono);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	box-shadow: none;
	padding: 5px 12px;
}

.bfo .bfo-pill:hover:not(:disabled) {
	border-color: var(--bfo-muted);
	background: var(--bfo-surface);
	color: var(--bfo-ink);
}

.bfo .bfo-pill.is-active {
	border-color: var(--bfo-brand);
	background: var(--bfo-brand);
	color: var(--bfo-brand-ink);
}

.bfo .bfo-pill:disabled,
.bfo .bfo-pill.is-empty {
	opacity: 0.32;
	background: #fff;
	border-color: var(--bfo-line);
	color: var(--bfo-ink-soft);
}

.bfo .bfo-clear,
.bfo .bfo-clear:visited {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-family: var(--bfo-mono);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--bfo-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bfo .bfo-clear:hover {
	background: none;
	color: var(--bfo-ink);
}

/*
 * The modal's close button was taking the theme's link colour - a strong pink
 * (#cc3366) on its text and its ring - which is how a dialog about a funeral
 * ended up with a hot pink X in the corner.
 */
.bfo .bfo-modal-close,
.bfo .bfo-modal-close:visited {
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--bfo-surface);
	color: var(--bfo-ink-soft);
	font-family: inherit;
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	box-shadow: none;
}

.bfo .bfo-modal-close:hover {
	background: var(--bfo-surface-2);
	color: var(--bfo-ink);
}

.bfo .bfo-textlink,
.bfo .bfo-textlink:visited {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font: inherit;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--bfo-brand-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bfo .bfo-textlink:hover {
	background: none;
	color: var(--bfo-ink);
}

.bfo .bfo-button-primary:hover,
.bfo .bfo-search-button:hover {
	border-color: var(--bfo-brand-edge);
	background: var(--bfo-brand-edge);
	color: var(--bfo-brand-ink);
}

/*
 * The modal's own fields. The theme's reset styles bare inputs, and at equal
 * specificity its stylesheet loads later and wins - which is what gave the
 * name box a heavy black outline.
 */
.bfo .bfo-modal-form input[type="text"],
.bfo .bfo-modal-form textarea {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--bfo-line);
	border-radius: 6px;
	background: #fff;
	box-shadow: none;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	color: var(--bfo-ink);
}

.bfo .bfo-modal-form input[type="text"]:focus,
.bfo .bfo-modal-form textarea:focus {
	border-color: var(--bfo-muted);
	outline: 2px solid var(--bfo-brand);
	outline-offset: 1px;
	box-shadow: none;
}

.bfo .bfo-modal-form textarea {
	min-height: 120px;
	resize: vertical;
}

/*
 * The name under a candle is a `figcaption`, and themes habitually italicise
 * those. Manrope ships no italic, so the browser synthesises a slant - and the
 * slant on the last letter then falls outside the box that the three-line
 * clamp is clipping, which is why names were losing their final character.
 */
.bfo .bfo-candle-name {
	font-family: var(--bfo-sans);
	font-size: 11px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0;
	text-align: center;
	text-transform: none;
	color: var(--bfo-muted);
}

.bfo .bfo-minicandle {
	border: 1px solid var(--bfo-line);
	border-radius: 999px;
	background: #fff;
	color: var(--bfo-ink-soft);
	font-family: var(--bfo-mono);
	font-size: 12px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	box-shadow: none;
	padding: 5px 11px;
}

.bfo .bfo-button {
	border: 1px solid var(--bfo-line);
	border-radius: 999px;
	background: var(--bfo-surface);
	color: var(--bfo-ink);
	font-family: inherit;
	font-size: 15px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	box-shadow: none;
}

.bfo .bfo-button-primary {
	border-color: var(--bfo-brand);
	background: var(--bfo-brand);
	color: var(--bfo-brand-ink);
}

.bfo .bfo-search-button {
	border: 0;
	border-radius: 0;
	background: var(--bfo-brand);
	color: var(--bfo-brand-ink);
	font-family: inherit;
	font-size: 15px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	box-shadow: none;
}

.bfo .bfo-card-link,
.bfo .bfo-card-link:hover,
.bfo .bfo-card-view {
	text-decoration: none;
	box-shadow: none;
}

/* ------------------------------------------------------------------ */
/* Reduced motion: the flicker and the smooth scrolling both stop.     */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.bfo *,
	.bfo *::before,
	.bfo *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	.bfo-flame,
	.bfo-candle-flame {
		animation: none !important;
	}

	.bfo-bigcandle.is-lit .bfo-candle-flame {
		opacity: 1;
		transform: scale(1);
	}
}