/* =============================================
   Mark Forrester — Additional CSS
   ============================================= */

/* --- Post grid cards: pin the 4:3 frame so a slow/failed image
       can never blow out the grid row. Scoped to the grid layout only —
       the homepage featured post keeps its own photo's native
       proportions instead of being cropped to match the grid. --- */
.is-layout-grid .wp-block-post .wp-block-post-featured-image {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	display: block;
}

.is-layout-grid .wp-block-post .wp-block-post-featured-image a,
.is-layout-grid .wp-block-post .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Cards end where their content ends, so a short title doesn't leave the
   white box trailing on past the date. */
.wp-block-post-template.is-layout-grid {
	align-items: start;
}

/* --- Post grid: on hover the photo grows a little and gives up a little of
       its colour, and nothing else happens — no sheen sweeping across it. /* The homepage tile field opts out of the 4:3 window above: with the packing
   doing the work, a photo keeps its own proportions whatever shape it is. */
.mf-tile-field.is-layout-grid .wp-block-post .wp-block-post-featured-image {
	aspect-ratio: auto;
}

.mf-tile-field.is-layout-grid .wp-block-post .wp-block-post-featured-image img {
	height: auto;
}

--- */
.wp-block-post .wp-block-post-featured-image {
	position: relative;
	/* Clip the hover zoom so it stays inside the card frame — applies to the
	   featured post too, which has no aspect-ratio of its own. */
	overflow: hidden;
}

.wp-block-post .wp-block-post-featured-image img {
	transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
		filter 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: transform;
}

.wp-block-post:hover .wp-block-post-featured-image img {
	transform: scale(1.045);
	filter: saturate(0.92);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-post .wp-block-post-featured-image img { transition: none; }
	.wp-block-post:hover .wp-block-post-featured-image img { transform: none; }
}

/* --- No rounded corners on photos --- */
.wp-block-post-featured-image img,
.wp-block-image img,
.wp-post-image {
	border-radius: 0 !important;
}

/* --- Courier Prime is the site's typed voice, but WordPress prints a font's
       @font-face rules only on pages whose block markup names that family.
       Only the front page does, so the blog stream, About, archives and every
       single post were quietly falling back to a system mono. Declaring the
       faces here loads them wherever the rules below use them and nowhere
       else: a browser only fetches a face it actually renders. --- */
@font-face {
	font-family: "Courier Prime";
	font-style: normal;
	font-weight: 400;
	font-display: fallback;
	src: url('https://fonts.wp.com/s/courierprime/v9/u-450q2lgwslOqpF_6gQ8kELWwNjW-_-tvg.woff2') format('woff2');
}
@font-face {
	font-family: "Courier Prime";
	font-style: normal;
	font-weight: 700;
	font-display: fallback;
	src: url('https://fonts.wp.com/s/courierprime/v9/u-4k0q2lgwslOqpF_6gQ8kELY7pMf-LVqvHoJXw.woff2') format('woff2');
}
@font-face {
	font-family: "Courier Prime";
	font-style: italic;
	font-weight: 400;
	font-display: fallback;
	src: url('https://fonts.wp.com/s/courierprime/v9/u-4n0q2lgwslOqpF_6gQ8kELawRpWs37pvjxPA.woff2') format('woff2');
}
@font-face {
	font-family: "Courier Prime";
	font-style: italic;
	font-weight: 700;
	font-display: fallback;
	src: url('https://fonts.wp.com/s/courierprime/v9/u-4i0q2lgwslOqpF_6gQ8kELawRR4-Lfq9PtNXyeAg.woff2') format('woff2');
}

/* --- Dates are metadata, and metadata is typed: every date on the site
       speaks in the voice of the creations card's stamp, so the card reads
       as part of the site rather than apart from it. --- */
.wp-block-post-date {
	font-family: var(--wp--preset--font-family--courier-prime), monospace !important;
	font-size: 0.8rem !important;
	font-weight: 400 !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #6b6a6a !important;
}
.wp-block-post-date time {
	color: inherit !important;
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
}

/* --- The single post puts the date and the comments link in one meta line,
       so the link joins them in that typed voice instead of switching family,
       size and line box halfway across the row. Only the single template
       renders this block, so nothing else on the site is affected. Its colour
       is left alone: it is a link, and links here are rose. --- */
.wp-block-post-comments-link {
	font-family: var(--wp--preset--font-family--courier-prime), monospace !important;
	font-size: 0.8rem !important;
	font-weight: 400 !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.wp-block-post-comments-link a {
	line-height: 1.45;
}

/* --- Pagination --- */
.wp-block-query-pagination {
	justify-content: flex-end !important;
	align-items: center;
	border-top: none;
	padding-top: 0;
	margin-top: 1.5rem !important;
	margin-bottom: 0 !important;
}
.wp-block-query-pagination-next,
.wp-block-query-pagination-previous {
	font-size: 0.75rem !important;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none !important;
	color: inherit;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	transition: gap 0.25s ease;
}
.wp-block-query-pagination-next:hover,
.wp-block-query-pagination-previous:hover { gap: 0.75em; }
.wp-block-query-pagination-next-arrow,
.wp-block-query-pagination-previous-arrow {
	display: inline-block;
	transition: transform 0.25s ease;
}
.wp-block-query-pagination-next:hover .wp-block-query-pagination-next-arrow { transform: translateX(4px); }
.wp-block-query-pagination-previous:hover .wp-block-query-pagination-previous-arrow { transform: translateX(-4px); }
@media (prefers-reduced-motion: reduce) {
	.wp-block-query-pagination-next,
	.wp-block-query-pagination-previous,
	.wp-block-query-pagination-next-arrow,
	.wp-block-query-pagination-previous-arrow { transition: none; }
}

/* --- Section label ("Latest posts"): quiet editorial eyebrow,
       so post titles lead the hierarchy --- */
.mf-section-label {
	font-family: var(--wp--preset--font-family--albert-sans) !important;
	font-size: 0.72rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.09em !important;
	text-transform: uppercase;
	color: #a8a5a0 !important;
	margin-top: 0 !important;
	margin-bottom: 1.75rem !important;
}

/* --- Front page: section label follows the featured post card, so it needs
       the same breathing room above it as it already has below --- */
.mf-featured-post-query + .mf-section-label {
	margin-top: 1.75rem !important;
}

/* --- Sidebar: tighten the logo/bio -> nav gap --- */
.site-sidebar > .wp-block-group > .wp-block-group:first-child {
	padding-bottom: 2rem !important;
}

/* --- Sidebar height: the theme forces min-height:100vh so the old
       space-between layout could pin socials to the bottom. We use
       flex-start now, so that only created dead space under the footer. --- */
.site-sidebar {
	min-height: 0 !important;
}

/* Trim the page's bottom gutter to match the sides --- */
.wp-site-blocks {
	padding-bottom: 32px !important;
}


/* --- Footer: reads as a footer, not a stray line of text.
       Kill the constrained global padding so the right edge lands on the
       same axis as the pagination, add a faint rule, drop to meta scale. --- */
.site-footer {
	margin-top: 1.5rem !important;
}

.site-footer > .wp-block-group.mf-footer {
	padding-left: 0 !important;
	padding-right: 0 !important;
	padding-top: 1.5rem !important;
	padding-bottom: 0 !important;
	border-top: 1px solid rgba(17, 17, 17, 0.09);
}

.site-footer .mf-footer-title,
.site-footer .mf-footer-title a {
	font-family: var(--wp--preset--font-family--albert-sans), sans-serif !important;
	font-size: 0.78rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em !important;
	color: #111 !important;
	text-decoration: none !important;
	margin: 0 !important;
	line-height: 1.4 !important;
}

.site-footer .mf-footer-tagline,
.site-footer .mf-footer-copy {
	font-family: var(--wp--preset--font-family--albert-sans), sans-serif !important;
	font-size: 0.78rem !important;
	font-weight: 400 !important;
	letter-spacing: 0.01em !important;
	color: #a8a5a0 !important;
	margin: 0 !important;
	line-height: 1.4 !important;
}

.site-footer .mf-footer-copy {
	font-variant-numeric: tabular-nums;
}

@media (max-width: 599px) {
	.site-footer > .wp-block-group.mf-footer { padding-top: 1.25rem !important; }
	.site-footer .mf-footer-title,
	.site-footer .mf-footer-tagline,
	.site-footer .mf-footer-copy { font-size: 0.74rem !important; }
}

/* --- Sidebar vertical rhythm --- */
.site-sidebar > .wp-block-group {
	justify-content: flex-start !important;
	gap: 0 !important;
	padding-bottom: 2rem !important;
}
.site-sidebar > .wp-block-group > .wp-block-group:nth-child(2) { margin-top: 40px !important; }
.site-sidebar > .wp-block-group > .wp-block-group:nth-child(3) { margin-top: 40px !important; }

/* --- Sidebar furniture on a tall window: the column stretches to the height of
       the main column, and the portrait pins to the window's top. The socials
       take all of the column's slack and so sit at its foot; the nav is held
       down on the window's own mid-line: its top sits at 50vh, and a
       translateY pulls it back up by half its own height, so its centre lands
       on the middle of the window whatever the window's height and whatever
       size the labels render at, since the type is fluid and the box has no
       fixed height to halve. Sticky only shifts a box down when
       its flow position is above the line, so the nav takes no auto margin
       here; the bottom offset is the fallback for a window too short to hold
       the line clear of the socials, where the two would otherwise close on
       each other, and the fixed 40px under the nav keeps a floor on that gap
       when there is no slack to share at all. Declared after the two margin
       rules above, because those have the same specificity and only source
       order decides between them. Desktop only: below 782px the sidebar stacks
       under the content, so there is no column to share out. --- */
@media (min-width: 782px) {
	/* The sidebar column only has to hold the longest thing in it, which is the
	   word "Investments". That width has to follow the nav's own type, because
	   the type is fluid: the fixed 208px the templates carry is the size the
	   label reaches at the very top of the ramp, so on every window below that
	   ceiling it reserves more than the word needs - and the narrower the
	   window, the bigger the share of the page it takes from the content.
	   Expressed off the preset the label is set in, the column keeps a small
	   clearance over the word at every width instead, and gives the rest back.
	   min-width is reset because a flex column's automatic minimum size is the
	   width of its own content, which would clamp the column straight back up
	   to the tagline's box. --- */
	.site-sidebar-col {
		flex-basis: calc(6.2 * var(--wp--preset--font-size--extra-large) + 8px) !important;
		min-width: 0 !important;
	}
	/* A short page leaves the sidebar column short too, and sticky travel is bounded
	   by that column rather than by the window: on the Contact page the links ran
	   out of room and floated in the middle of the page instead of holding the
	   window's middle and foot. Holding the masthead row to the height of the
	   window gives the sidebar a containing block that always covers it, so the
	   links keep the same positions on every page. */
	.wp-block-columns:has(.site-sidebar-col) {
		min-height: 100vh;
	}
	.site-sidebar,
	.site-sidebar > .wp-block-group {
		height: 100% !important;
	}
	/* The portrait rides the top of the window the way the nav rides its middle
	   and the socials its foot, so all three furniture pieces hold their
	   places down a long page instead of scrolling away with the content. Its
	   flow position already sits exactly on the root padding, so the pin takes
	   hold without the box moving at all: nothing jumps. Travel runs the whole
	   height of the stretched group above it, which is the full sidebar column,
	   so it stays pinned until the column's own foot arrives at the footer. */
	.site-sidebar > .wp-block-group > .wp-block-group:first-child {
		position: sticky;
		top: var(--wp--style--root--padding-top, 52px);
	}
	.site-sidebar > .wp-block-group > .wp-block-group:nth-child(2) {
		position: sticky;
		bottom: calc(var(--wp--style--root--padding-top, 52px) + 178px);
		margin-bottom: 40px !important;
	}
	.site-sidebar > .wp-block-group > .wp-block-group:nth-child(3) {
		position: sticky;
		bottom: calc(var(--wp--style--root--padding-top, 52px) + 12px);
		margin-top: auto !important;
	}
}

/* The mid-line needs a window with room for it: below roughly 664px tall the
   socials' fallback offset and this line would meet, so it is held back until
   there is clearance. */
@media (min-width: 782px) and (min-height: 700px) {
	.site-sidebar > .wp-block-group > .wp-block-group:nth-child(2) {
		top: 50vh;
		transform: translateY(-50%);
	}
}

/* --- Social links --- */
.wp-block-social-links.is-style-logos-only {
	margin-top: 1em !important;
	gap: 24px !important;
}
.wp-block-social-links.is-style-logos-only .wp-block-social-link {
	opacity: 0.45;
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.wp-block-social-links.is-style-logos-only .wp-block-social-link:hover {
	opacity: 1;
	transform: translateY(-2px);
}
.wp-block-social-links.is-style-logos-only .wp-social-link-instagram:hover { color: #e1306c !important; }
.wp-block-social-links.is-style-logos-only .wp-social-link-linkedin:hover { color: #0a66c2 !important; }
.wp-block-social-links.is-style-logos-only .wp-social-link-twitter:hover { color: #1da1f2 !important; }
.wp-block-social-links.is-style-logos-only .wp-block-social-link svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) {
	.wp-block-social-links.is-style-logos-only .wp-block-social-link { transition: none; }
}

/* --- Subscribe below socials --- */
.mf-sidebar-subscribe { margin-top: 1em !important; }

/* --- Logo wink --- */
.wp-block-site-logo a {
	display: inline-block;
	position: relative;
	transition: all 0.2s ease-in-out;
}
.wp-block-site-logo a:hover img {
	content: url('https://mark.blog/wp-content/uploads/2026/03/mark-blog-logo-hover-2.png');
}
body::after {
	position: absolute; width: 0; height: 0; overflow: hidden; z-index: -1;
	content: url('https://i0.wp.com/mark.blog/wp-content/uploads/2018/05/mark-blog-logo.png');
}



/* --- Title sizes, trimmed a little ------------------------------------
   Tiles and the title above a page or a post were both a size larger than
   they needed to be. Each comes down 10% off the preset it already uses,
   so they stay in step with the fluid scale instead of being pinned to a
   px value that would stop moving with the viewport.

   The :where() is load-bearing: a bare :not() would carry the specificity
   of its argument, tie with the tile rule below, and win on source order —
   sizing every tile off heading-1. Wrapped in :where() it counts for
   nothing, so the tile rule always wins and this one covers the rest.
   Archive and search titles are a different class and are left alone.  */
.wp-block-post-template .wp-block-post-title.has-large-font-size {
	font-size: calc(var(--wp--preset--font-size--large) * 0.9) !important;
}

.wp-block-post-title:not(:where(.wp-block-post-template .wp-block-post-title)) {
	font-size: calc(var(--wp--preset--font-size--heading-1) * 0.9) !important;
}

/* --- Fraunces display headings: optical tracking --- */
h1, h2, h3,
.wp-block-post-title,
.wp-block-heading {
	letter-spacing: -0.015em;
}

/* --- Social labels: kill the 7.8px trailing margin so the label text
       ends on the same right axis (x=246) as the nav, not 8px short --- */
.site-sidebar .wp-block-social-link-label {
	margin-right: 0 !important;
}

/* --- Sidebar micro-bio --- */


.mf-bio-link {
	color: #c9968e;
	text-decoration: none;
	white-space: nowrap;
}

.mf-bio-arrow {
	color: #c9968e;
	transition: transform 0.2s ease;
	display: inline-block;
}

.mf-bio-link:hover .mf-bio-arrow { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
	.mf-bio-arrow { transition: none; }
}


/* --- Desktop site padding --- */
.wp-site-blocks,
.has-global-padding {
	padding-left: 32px !important;
	padding-right: 32px !important;
}

/* --- Mobile site gutter: one 16px inset, not two stacked layers. --- */
@media (max-width: 599px) {
	.wp-site-blocks { padding-left: 16px !important; padding-right: 16px !important; }
	.has-global-padding { padding-left: 16px !important; padding-right: 16px !important; }
	.wp-site-blocks > .has-global-padding {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* --- Sidebar / content gutter --- */
@media (min-width: 782px) {
	.wp-block-columns.alignwide { gap: 56px !important; }
}

/* --- Sidebar nav: Fraunces is wider than the old serif, stop "Investments" wrapping --- */
.site-sidebar .wp-block-navigation-item__content {
	white-space: nowrap;
}

.site-sidebar .wp-block-navigation {
	flex-wrap: nowrap !important;
}

/* --- Active nav item --- */




/* --- Sidebar micro-bio: Fraunces italic epigraph under the portrait --- */
.mf-sidebar-bio {
	font-family: var(--wp--preset--font-family--fraunces), Georgia, serif !important;
	font-style: italic !important;
	font-size: 0.9rem !important;
	font-weight: 400 !important;
	line-height: 1.55 !important;
	letter-spacing: 0 !important;
	color: #8a8683 !important;
	text-align: right !important;
	max-width: 182px;
	margin: 1.75rem 0 0 auto !important;
	-webkit-hyphens: none;
	hyphens: none;
	text-wrap: pretty;
}

/* --- The portrait only speaks when his mouth is open: that line lives in a
       bubble that appears on hover, pointer devices only. The bubble and its
       tail are pseudo-elements sitting behind the text, so the paragraph
       keeps its exact box — the nav and the socials below it never move a
       pixel. The tail is aimed at the mouth (50% of the artwork's width, which
       lands 113px in from the right edge of the text box, now that the
       sidebar is aligned left and the portrait sits at the column's left edge).
       Touch devices have no hover, so there the line simply stays as it was. --- */
@media (hover: hover) and (pointer: fine) {
	.mf-sidebar-bio {
		position: relative;
		/* Lifted so the bubble's tail meets the dark of the mouth rather than the
		   teeth: in the open-mouth portrait the teeth run from 165px to 174px
		   down the page and the dark mouth from 175px to 183px, so the tail's
		   tip is put at 179 with the rim seven below it. Stacked above the
		   portrait so the bubble paints over it instead of under it — a negative
		   z-index child would otherwise fall behind a sibling. */
		top: -43px;
		z-index: 1;
		/* The bubble overlaps the bottom of the portrait, so it must not take
		   the pointer: without this the strip it covers stops answering to the
		   logo — no hover to open the bubble, and no click on the link home.
		   The line is speech, nothing to select. */
		pointer-events: none;
		opacity: 0;
		transition: opacity 0.16s ease-out;
		/* The bubble hugs its own line rather than being a box the line sits in.
		   Balancing splits the sentence into three even lines, so almost none of
		   the bubble is left empty at the right. The left margin is pinned
		   because the box is now narrower than the column, which leaves free
		   space for the inherited auto margin to take: uncorrected it would
		   slide the bubble - and the tail with it - off the mouth. */
		width: 185px !important;
		max-width: 185px !important;
		margin-left: 0 !important;
		text-wrap: balance;
		/* Inside the bubble the line is speech, not an epigraph: the prose
		   face rather than italic Fraunces, and left-aligned so the lines
		   start where the eye starts. Only the hover bubble changes — the
		   line under the portrait on touch devices keeps its own voice. */
		font-family: var(--wp--preset--font-family--albert-sans) !important;
		font-style: normal !important;
		font-size: 0.78rem !important;
		line-height: 1.45 !important;
		text-align: left !important;
		color: #3a3530 !important;
	}
	.mf-sidebar-bio::before {
		content: '';
		position: absolute;
		z-index: -1;
		inset: -13px -12px;
		/* Airmail blue. This is the site's own stamp-navy (#012169) let down to
		   about an eighth strength. The page, the portrait and the card are all warm
		   tones of the same pink, so a tint of the palette's one cool colour is what
		   separates the bubble from them rather than one more shade of the family.
		   Navy is also the complement of the rose the site uses as its primary, and
		   it is the colour of the BY AIR MAIL label on the postcard above, so the
		   bubble reads as a second piece of the same mail. The tail is cut from it
		   too, which is what lets the two meet. */
		background-color: #dde3ef;
		/* The bubble is a comment, not a card. The rounding is generous - nearly
		   a third of the bubble's height - and deliberately asymmetric: the tail
		   leaves the top edge about a third of the way along, and a comment
		   bubble's tightest corner is the one its tail is nearest, which is the
		   top left. The other three round off together, so the shape reads as
		   drawn rather than as a rectangle with softened corners. */
		border-radius: 10px 22px 22px 22px;
		/* No shadow. The bubble used to be lifted by one, but a shadow and a pale
		   ground are two answers to the same question, and colour does it better
		   here: it reads the same against the page as it does against the
		   portrait, where a shadow would have fallen across the artwork instead. */
	}
	.mf-sidebar-bio::after {
		content: '';
		position: absolute;
		top: -35px;
		left: 66px;
		width: 0;
		height: 0;
		border-left: 9px solid transparent;
		border-right: 9px solid transparent;
		border-bottom: 22px solid #dde3ef;
		pointer-events: none;
		/* The pointer just meets the mouth. The bubble's top edge sits 13px above
		   the paragraph, and the mouth in the artwork is the grin at 78-86% of the
		   image's height. On the rendered 130px portrait that is y 153-164, so a
		   22px tail from a base at -13px puts the apex at -35px, which is y 164
		   exactly - the bottom lip, the point where the mouth meets the chin,
		   rather than inside the grin as a longer tail was. The 6px nudge from
		   right: 113px to left: 66px centres it on the mouth at x 130, and
		   anchoring from the left keeps it there as the fluid sidebar column
		   changes width. Cut from the
		   bubble's own colour so the two meet seamlessly, and with no shadow of its
		   own: being a separate box from the bubble, any shadow it held would be
		   drawn over the bubble's paper as a second, overlapping shape - the
		   opposite of what a shadow is for. pointer-events: none is load-bearing
		   now that the tail lies over the portrait, which is the element the
		   bubble opens from - without it the tail would take the hover and the
		   bubble would flicker shut as the pointer crossed it. */
	}
	.site-sidebar .wp-block-site-logo:hover + .mf-sidebar-bio,
	.site-sidebar .wp-block-site-logo:focus-within + .mf-sidebar-bio {
		opacity: 1;
	}
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
	.mf-sidebar-bio { transition: none; }
}

/* --- Active nav item: colour + a dot in the right gutter.
       Absolutely positioned, so the right edge stays perfectly flush
       and the left edge is never broken. Echoes the About timeline dots. --- */
.site-sidebar .wp-block-navigation-item.current-menu-item > a {
	color: #c9968e !important;
}

.site-sidebar .wp-block-navigation-item.current-menu-item {
	position: relative;
}



.site-sidebar .wp-block-navigation-item.current-menu-item::after {
	content: '→';
	position: absolute;
	right: -25px;
	top: 50%;
	transform: translateY(-50%);
	color: #c9968e;
	font-family: var(--wp--preset--font-family--albert-sans), sans-serif;
	font-size: 0.6em;
	line-height: 1;
	font-style: normal;
	pointer-events: none;
}

/* --- Post grid card shadows --- */
@media (prefers-reduced-motion: reduce) {
	}

/* --- Mobile: post grid single column --- */
@media (max-width: 599px) {
	.wp-block-post-template.columns-3,
	.wp-block-post-template.columns-2 { grid-template-columns: 1fr !important; }
}

/* --- Mobile: condense header so space above/below the logo/menu row is
       equal and tighter (root page padding already adds 32px above) --- */
@media (max-width: 599px) {
	.site-header > .wp-block-group {
		padding-top: 0 !important;
		margin-bottom: 8px !important;
	}
}

/* --- Mobile: the page already owns the 16px outer gutter. Remove the
       header's extra inset so portrait and menu align with content. --- */
@media (max-width: 599px) {
	.site-header > .wp-block-group {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* --- Single post paper card --- */
body.single-post main.wp-block-group {
	background: transparent;
	padding: 2.5rem 2.75rem 3rem;
	margin-bottom: 2rem;
	box-shadow: none;
	border-radius: 0;
}
body.single-post .mf-post-card {
	background: #ffffff;
	border-radius: 2px;
	padding: 0 2.75rem 3rem;
	margin-left: -2.75rem;
	margin-right: -2.75rem;
	width: calc(100% + 5.5rem);
}
body.single-post .wp-block-post-featured-image {
	margin-left: -2.75rem;
	margin-right: -2.75rem;
	width: calc(100% + 5.5rem);
	max-width: calc(100% + 5.5rem);
	overflow: hidden;
	margin-top: 0;
}
body.single-post .wp-block-post-featured-image img {
	display: block; width: 100%; height: auto; border-radius: 0 !important;
}
body.single-post .wp-block-post-content .alignwide {
	margin-left: 0; margin-right: 0; width: 100%; max-width: 100%;
}
body.single-post main.wp-block-group > .wp-block-group:first-child {
	margin-left: -2.75rem;
	margin-right: -2.75rem;
	margin-top: -2.5rem;
	width: calc(100% + 5.5rem);
	max-width: calc(100% + 5.5rem);
	padding-bottom: 0;
}
body.single-post .wp-block-post-title { margin-bottom: 0.15rem !important; }
body.single-post main.wp-block-group > .wp-block-group:first-child > .wp-block-group { gap: 0.5rem !important; }
body.single-post .wp-block-post-comments-link { padding-top: 0 !important; padding-bottom: 0 !important; }

/* --- Single post: no featured image — flat white, no shadows --- */
body.single-post main.wp-block-group:not(:has(.wp-block-post-featured-image)) {
	background-color: #ffffff !important;
	padding-top: 0 !important;
	overflow: hidden;
}
body.single-post main.wp-block-group:not(:has(.wp-block-post-featured-image)) > .wp-block-group:first-child {
	margin-top: 0 !important;
	margin-left: -44px !important;
	margin-right: -44px !important;
	max-width: calc(100% + 88px) !important;
	width: calc(100% + 88px) !important;
	padding: 2.75rem 2.75rem 0 !important;
	background-color: #ffffff !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
body.single-post main.wp-block-group:not(:has(.wp-block-post-featured-image)) > .mf-post-card {
	padding-top: 1.25rem !important;
	margin-top: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* --- Mobile: single post layout --- */
@media (max-width: 599px) {
	body.single-post main.wp-block-group { padding: 1rem 1rem 2rem !important; }
	body.single-post .mf-post-card {
		margin-left: -1rem !important; margin-right: -1rem !important;
		width: calc(100% + 2rem) !important;
		padding-left: 1rem !important; padding-right: 1rem !important;
	}
	body.single-post .wp-block-post-featured-image {
		margin-left: -1rem !important; margin-right: -1rem !important;
		width: calc(100% + 2rem) !important; max-width: calc(100% + 2rem) !important;
	}
	body.single-post main.wp-block-group > .wp-block-group:first-child {
		margin-left: -1rem !important; margin-right: -1rem !important;
		margin-top: -1rem !important;
		width: calc(100% + 2rem) !important; max-width: calc(100% + 2rem) !important;
	}
	body.single-post .wp-block-post-content .wp-block-quote,
	body.single-post .wp-block-post-content .wp-block-pullquote {
		margin-left: 0 !important; margin-right: 0 !important; width: 100% !important;
	}
}

/* --- Blockquote: typography-only, no border --- */
.wp-block-quote {
	border: none !important; border-left: none !important;
	padding: 0.25rem 0 !important;
	margin-left: 1.5rem !important; margin-right: 1.5rem !important;
	margin-top: 2rem !important; margin-bottom: 2rem !important;
}
.wp-block-quote p {
	font-family: var(--wp--preset--font-family--fraunces), Georgia, serif !important;
	font-style: italic !important;
	font-size: 1.2rem !important;
	font-weight: 400 !important;
	line-height: 1.65 !important;
	color: #3a3530 !important;
	letter-spacing: 0.01em;
}
.wp-block-quote cite {
	font-family: var(--wp--preset--font-family--albert-sans), sans-serif !important;
	font-style: normal !important;
	font-size: 0.7rem !important;
	font-weight: 400 !important;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: #a8a5a0 !important;
	margin-top: 0.75rem !important;
	display: block;
}

/* --- Bio panel blob --- */







/* --- Sidebar subscribe: quiet outline button, not a black slab --- */
.jetpack-subscribe-floating-button { display: none !important; }

/* Hide the email field — button-only mode */
.mf-sidebar-subscribe input[type="email"],
.mf-sidebar-subscribe input[type="text"] {
	display: none !important;
}

.mf-sidebar-subscribe .wp-block-jetpack-subscriptions__form-elements,
.mf-sidebar-subscribe .wp-block-jetpack-subscriptions__container,
.mf-sidebar-subscribe form {
	display: flex;
	justify-content: flex-end;
	margin: 0;
}

/* Cover every element Jetpack may render the control as */
.mf-sidebar-subscribe button,
.mf-sidebar-subscribe button[type="submit"],
.mf-sidebar-subscribe input[type="submit"],
.mf-sidebar-subscribe .wp-block-button__link,
.mf-sidebar-subscribe .wp-block-jetpack-subscriptions__button,
.mf-sidebar-subscribe .mf-subscribe-btn {
	font-family: var(--wp--preset--font-family--albert-sans), sans-serif !important;
	font-size: 0.7rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.09em !important;
	text-transform: uppercase !important;
	color: #6b6a6a !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6a6a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2 7 10 6 10-6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: left 1em center !important;
	background-size: 13px 13px !important;
	border: 1px solid rgba(17, 17, 17, 0.18) !important;
	border-radius: 2px !important;
	padding: 0.62em 1.15em 0.62em 2.9em !important;
	min-height: 0 !important;
	line-height: 1.2 !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.mf-sidebar-subscribe button:hover,
.mf-sidebar-subscribe button[type="submit"]:hover,
.mf-sidebar-subscribe input[type="submit"]:hover,
.mf-sidebar-subscribe .wp-block-button__link:hover,
.mf-sidebar-subscribe .wp-block-jetpack-subscriptions__button:hover,
.mf-sidebar-subscribe .mf-subscribe-btn:hover {
	color: #c9968e !important;
	border-color: #c9968e !important;
	background-color: transparent !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9968e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2 7 10 6 10-6'/%3E%3C/svg%3E") !important;
}

@media (prefers-reduced-motion: reduce) {
	.mf-sidebar-subscribe button,
	.mf-sidebar-subscribe input[type="submit"] { transition: none; }
}

/* --- Nav overlay: subscribe + social left-align flush with nav items --- */
.wp-block-navigation__responsive-container.is-menu-open .mf-nav-overlay-subscribe .wp-block-jetpack-subscriptions__form-elements,
.wp-block-navigation__responsive-container.is-menu-open .mf-nav-overlay-subscribe .wp-block-jetpack-subscriptions__container {
	justify-content: flex-start !important;
}
.wp-block-navigation__responsive-container.is-menu-open .mf-nav-overlay-subscribe input[type="submit"] {
	margin-left: 0 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .mf-nav-overlay-social {
	margin-left: 0 !important;
	padding-left: 0 !important;
}

/* --- About page --- */
.entry-content .has-large-font-size.wp-block-paragraph { font-size: 1.15rem !important; line-height: 1.65; }
.mf-about-sidebar h4.wp-block-heading {
	font-size: 0.72rem !important;
	font-family: var(--wp--preset--font-family--albert-sans), sans-serif !important;
	font-weight: 600 !important;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: #a8a5a0;
	margin-bottom: 0.6rem !important;
	margin-top: 1.75rem !important;
}
.mf-about-sidebar h4.wp-block-heading:first-of-type { margin-top: 0.75rem !important; }
.mf-about-sidebar .wp-block-list,
.mf-about-sidebar .wp-block-paragraph { font-size: 1.05rem !important; line-height: 1.6 !important; }
.mf-about-sidebar .wp-block-list {
	margin-top: 0 !important; margin-bottom: 0 !important;
	padding-left: 1.1em !important; padding-bottom: 0 !important;
}
/* No box: the photo and the lists sit straight on the page, level with the
   timeline's own sheet. The margin absorbs the padding the box used to carry,
   so nothing moves but the box. */
.mf-about-sidebar.wp-block-column {
	background-color: transparent;
	padding: 0 !important;
	margin-top: 4.5rem;
	align-self: flex-start;
}
.mf-about-sidebar .wp-block-image {
	position: relative;
	margin: 0 0 1.5rem;
}
.mf-about-sidebar .wp-block-image img { display: block; width: 100%; border-radius: 1px 1px 0 0; }
.mf-about-sidebar .wp-block-image .wp-element-caption {
	position: absolute; bottom: 0; left: 0; right: 0; margin: 0;
	padding: 1.5rem 1rem 0.65rem;
	background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 100%);
	color: rgba(255,255,255,0.88);
	font-size: 0.7rem; letter-spacing: 0.03em; text-align: center; line-height: 1.4;
}

/* --- The whole section - its heading, its description, and the timeline below
       them - wears the front page's creations card: one sheet of warm cream
       stock, ruled at 26px, so the years read as entries written on paper. The
       sheet is hung on the column rather than on the timeline alone, so the
       heading and the description are printed on it too, in a single
       unbroken run of rules; the timeline inside it is left bare. The years
       are typed - Courier Prime at the stamp's size, tracking and colour -
       while the body stays in the reading face, since these are paragraphs
       rather than one-line glosses. The spine and its dots stay: they are what
       makes it a timeline rather than a list. --- */
/* Scoped to the column inside the post body, not the template's content
   column around it - that one also contains the timeline, and matching it
   would paper the whole page. */
.wp-block-post-content .wp-block-column:has(.mf-timeline) {
	background-color: #faf0d2 !important;
	background-image: repeating-linear-gradient(
		to bottom,
		transparent 0,
		transparent 25px,
		rgba(17, 17, 17, 0.08) 25px,
		rgba(17, 17, 17, 0.08) 26px
	);
	border-radius: 1px;
	padding: 2.25rem 1.75rem 1.75rem !important;
}
/* The heading and its description are the sheet's own label, so they sit close
   together above the entries instead of a block gap apart. */
.wp-block-post-content .wp-block-column:has(.mf-timeline) > .wp-block-heading + .wp-block-paragraph { margin-block-start: 0.7rem !important; }
.mf-timeline.wp-block-group {
	gap: 0 !important;
	margin-top: 2rem;
}
.mf-timeline .mf-timeline__item.wp-block-group {
	position: relative;
	padding: 0 0 2.25rem 1.5rem;
	border-left: 1px solid rgba(17, 17, 17, 0.16);
	gap: 0.25rem !important;
	list-style: none;
}
.mf-timeline .mf-timeline__item.wp-block-group:last-child { padding-bottom: 0; border-left-color: transparent; }
.mf-timeline .mf-timeline__item.wp-block-group::before {
	content: "";
	position: absolute; top: 0.4em; left: -4px;
	width: 7px; height: 7px;
	border-radius: 50%; background: #111;
	transition: background 0.2s ease;
}
.mf-timeline .mf-timeline__item.wp-block-group:hover::before { background: #c9968e; }
.mf-timeline .mf-timeline__year.wp-block-paragraph {
	font-family: var(--wp--preset--font-family--courier-prime), monospace !important;
	font-size: 0.8rem !important; font-weight: 400 !important;
	letter-spacing: 0.04em; text-transform: uppercase;
	color: var(--wp--preset--color--secondary); margin: 0 0 0.5rem !important; line-height: 1.45;
}
.mf-timeline .mf-timeline__body.wp-block-paragraph { font-size: 1.05rem; line-height: 1.65; color: #333; margin: 0 !important; }
.mf-timeline .mf-timeline__body a {
	color: #111;
	text-decoration-color: rgba(17, 17, 17, 0.3); text-underline-offset: 0.18em;
	transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.mf-timeline .mf-timeline__body a:hover { color: #c9968e; text-decoration-color: #c9968e; }
@media (prefers-reduced-motion: reduce) {
	.mf-timeline .mf-timeline__item.wp-block-group::before,
	.mf-timeline .mf-timeline__body a { transition: none; }
}

/* =============================================
   COMMENTS
   Post body is 19.1px — comments sit deliberately
   below that so the article keeps prominence.
   ============================================= */

/* --- Blob list: alternating warm tint --- */
.wp-block-comment-template > li .wp-block-group.has-background-background-color {
	background-color: transparent !important;
	margin-bottom: 0 !important;
}

.wp-block-comment-template {
	list-style: none !important;
	padding-left: 0 !important;
	margin: 0 !important;
}

.wp-block-comment-template > li {
	padding: 1.9rem 1.75rem 2.9rem !important;
	margin: 0 0 0.75rem !important;
}

.wp-block-comment-template > li:nth-child(odd) {
	background-color: #ece7df !important;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 130' preserveAspectRatio='none'%3E%3Cpath d='M8,10 C18,0 48,5 78,2 C108,-1 148,4 178,2 C194,1 201,10 199,24 C197,36 204,48 201,63 C198,76 205,90 200,104 C195,116 180,122 160,126 C140,130 112,133 84,131 C56,129 28,126 12,118 C0,112 -1,100 2,86 C5,72 -3,60 2,45 C6,30 -2,20 8,10 Z' fill='black'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 130' preserveAspectRatio='none'%3E%3Cpath d='M8,10 C18,0 48,5 78,2 C108,-1 148,4 178,2 C194,1 201,10 199,24 C197,36 204,48 201,63 C198,76 205,90 200,104 C195,116 180,122 160,126 C140,130 112,133 84,131 C56,129 28,126 12,118 C0,112 -1,100 2,86 C5,72 -3,60 2,45 C6,30 -2,20 8,10 Z' fill='black'/%3E%3C/svg%3E");
	-webkit-mask-size: 100% 100%; mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

.wp-block-comment-template > li:nth-child(even) {
	background-color: transparent !important;
}

/* --- Avatar --- */
.wp-block-avatar img {
	border-radius: 50% !important;
}

/* --- Author --- */
.wp-block-comment-author-name,
.wp-block-comment-author-name a {
	font-family: var(--wp--preset--font-family--albert-sans), sans-serif !important;
	font-size: 0.9rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.005em;
	color: #111 !important;
	text-decoration: none !important;
	line-height: 1.3 !important;
}

/* --- Date --- */
.wp-block-comment-date,
.wp-block-comment-edit-link {
	font-family: var(--wp--preset--font-family--albert-sans), sans-serif !important;
	font-size: 0.66rem !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #a8a5a0 !important;
}

.wp-block-comment-date a,
.wp-block-comment-edit-link a {
	color: inherit !important;
	text-decoration: none !important;
}

/* --- Body: 15px against the post's 19.1px --- */
.wp-block-comment-content {
	margin-top: 0.9rem !important;
	font-size: 0.94rem !important;
	line-height: 1.72 !important;
	color: #3d3a37 !important;
}

.wp-block-comment-content p {
	margin: 0 0 0.9em !important;
	font-size: inherit !important;
	line-height: inherit !important;
}

.wp-block-comment-content p:last-child { margin-bottom: 0 !important; }

.wp-block-comment-content a {
	color: inherit;
	text-decoration-color: rgba(17, 17, 17, 0.3);
	text-underline-offset: 0.18em;
}

.wp-block-comment-content a:hover { text-decoration-color: #c9968e; }

/* --- Reply link --- */
.wp-block-comment-reply-link a {
	font-family: var(--wp--preset--font-family--albert-sans), sans-serif !important;
	font-size: 0.66rem !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #a8a5a0 !important;
	text-decoration: none !important;
	transition: color 0.2s ease;
}

.wp-block-comment-reply-link a:hover { color: #c9968e !important; }

/* --- Comments title ("30 Comments") --- */
.wp-block-comments-title {
	font-family: var(--wp--preset--font-family--albert-sans), sans-serif !important;
	font-size: 0.72rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.09em !important;
	text-transform: uppercase;
	color: #a8a5a0 !important;
	margin: 0 0 1.75rem !important;
}

/* --- Reply form --------------------------------------------------
   The core h3#reply-title ships with margin:0 on all sides, which is
   why it collided with the comment above and the form below.        */
.comment-respond {
	margin-top: 3.25rem !important;
	padding-top: 2rem;
	border-top: 1px solid rgba(17, 17, 17, 0.09);
}

h3.comment-reply-title,
.comment-reply-title {
	font-family: var(--wp--preset--font-family--albert-sans), sans-serif !important;
	font-size: 0.72rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.09em !important;
	text-transform: uppercase;
	color: #a8a5a0 !important;
	line-height: 1.4 !important;
	margin: 0 0 1.5rem !important;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.9em;
}

/* "Cancel reply" — quiet sibling, not part of the heading */
.comment-reply-title small {
	font-size: 1em;
}

#cancel-comment-reply-link {
	font-family: var(--wp--preset--font-family--albert-sans), sans-serif !important;
	font-size: 0.66rem !important;
	font-weight: 400 !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #a8a5a0 !important;
	text-decoration: none !important;
	border-bottom: 1px solid rgba(17, 17, 17, 0.18);
	padding-bottom: 1px;
	transition: color 0.2s ease, border-color 0.2s ease;
}

#cancel-comment-reply-link:hover {
	color: #c9968e !important;
	border-color: #c9968e;
}

/* --- Fields --- */
.comment-respond .comment-form-comment,
.comment-respond .comment-form-author,
.comment-respond .comment-form-email,
.comment-respond .comment-form-url {
	margin-bottom: 1.1rem;
}

.comment-respond label {
	display: block;
	font-family: var(--wp--preset--font-family--albert-sans), sans-serif !important;
	font-size: 0.66rem !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #a8a5a0 !important;
	margin-bottom: 0.5rem;
}

.comment-respond textarea,
.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond input[type="url"] {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--wp--preset--font-family--albert-sans), sans-serif !important;
	font-size: 0.94rem !important;
	line-height: 1.6 !important;
	color: #3d3a37 !important;
	background: #ffffff;
	border: 1px solid rgba(17, 17, 17, 0.14) !important;
	border-radius: 2px !important;
	padding: 0.85rem 1rem !important;
	transition: border-color 0.2s ease;
}

.comment-respond textarea:focus,
.comment-respond input[type="text"]:focus,
.comment-respond input[type="email"]:focus,
.comment-respond input[type="url"]:focus {
	outline: none;
	border-color: #c9968e !important;
}

.comment-respond .comment-notes,
.comment-respond .form-submit + p,
.comment-respond .comment-form-cookies-consent label {
	font-size: 0.72rem !important;
	line-height: 1.6 !important;
	color: #a8a5a0 !important;
	text-transform: none;
	letter-spacing: 0;
}

/* --- Submit: same quiet outline as the sidebar subscribe --- */
.comment-respond .form-submit {
	margin: 1.4rem 0 0 !important;
}

.comment-respond input[type="submit"],
.comment-respond .wp-block-button__link {
	font-family: var(--wp--preset--font-family--albert-sans), sans-serif !important;
	font-size: 0.7rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.09em !important;
	text-transform: uppercase !important;
	color: #6b6a6a !important;
	background: transparent !important;
	border: 1px solid rgba(17, 17, 17, 0.18) !important;
	border-radius: 2px !important;
	padding: 0.62em 1.3em !important;
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.comment-respond input[type="submit"]:hover,
.comment-respond .wp-block-button__link:hover {
	color: #c9968e !important;
	border-color: #c9968e !important;
	background: transparent !important;
}

@media (prefers-reduced-motion: reduce) {
	.comment-respond input[type="submit"],
	.comment-respond textarea,
	.comment-respond input,
	#cancel-comment-reply-link,
	.wp-block-comment-reply-link a { transition: none; }
}

/* --- Akismet privacy notice: renders outside #respond, so it needs
       its own rule or it inherits full 19px body size --- */
.akismet_comment_form_privacy_notice {
	font-family: var(--wp--preset--font-family--albert-sans), sans-serif !important;
	font-size: 0.72rem !important;
	font-weight: 400 !important;
	line-height: 1.65 !important;
	color: #a8a5a0 !important;
	margin: 1.25rem 0 0 !important;
}

.akismet_comment_form_privacy_notice a {
	color: inherit !important;
	text-decoration-color: rgba(17, 17, 17, 0.25);
	text-underline-offset: 0.18em;
}

.akismet_comment_form_privacy_notice a:hover {
	color: #c9968e !important;
	text-decoration-color: #c9968e;
}


/* --- Post navigation (prev/next between the hatched rules) ---------
   The homepage pagination rule above also matches this nav (same block),
   which squashed its top gap to 24px while the bottom kept the theme's
   2em. Restore symmetry.                                              */
.wp-block-query-pagination:has(.wp-block-post-navigation-link) {
	margin-top: 2em !important;
	margin-bottom: 0 !important;
}

/* --- Safety net: CoBlocks hides elements at opacity:0 in CSS and
       relies on JS to reveal them. If that JS never fires the content
       is invisible. Keep everything visible by default.              --- */
.coblocks-animate {
	opacity: 1 !important;
}


/* --- Featured post: excerpt paragraph inherits global p margin-bottom, kills side-to-bottom padding balance --- */
.mf-featured-post .wp-block-post-excerpt__excerpt {
	margin-bottom: 0;
}

/* =============================================
   FRONT PAGE: masthead, creations, latest posts
   The front page is a landing page rather than the
   blog stream: a name and a short description, an
   index of work, then the four newest posts with a
   link through to the full blog.
   ============================================= */

/* --- Masthead: the name starts from the site's own label voice, the same
       .mf-section-label rule the "Latest posts" eyebrow uses. It then parts
       company with it: the name is the postcard's address, so it is set a
       step larger and in the card's ink rather than the eyebrow's grey, and
       this is the one place those two deliberately differ. The margin the
       label rule sets is overridden too, since it is wrong for something
       sitting inside a row. --- */
.mf-intro { margin-bottom: 0 !important; }
.mf-intro .mf-intro-name {
	margin: 0 !important;
	font-size: 0.85rem !important;
	color: #111 !important;
}

/* The name and the "longer version" link sit level in their row. Baseline
   alignment, not flex-start: the two are different faces at different
   sizes, and their boxes carry different leading (the link's paragraph
   keeps the body's 1.45 line-height, so its box has room above the text),
   which is what made the link look a shade low. Aligning the baselines is
   the one thing that puts the two lines of type on the same line, whatever
   the faces do inside their boxes. */
.mf-intro .mf-intro-head {
	align-items: baseline !important;
	/* The stamp pair is now the card's first child and floats at its top right,
	   which makes the name row the second - and so the card's block gap would
	   give it a top margin that pushes the name down out of the top corner. The
	   stamps and the name belong level, at the top of the card. */
	margin-block-start: 0 !important;
}

/* The description carries the page: the display serif again, a size between
   the body and the headings, and leading tight enough to hold it as one
   block. Nothing narrows the measure — no max-width and no text-wrap
   balancing, both of which stop the lines short of the edge — so every
   line but the last runs the full width of the column. The link is left
   out of this rule so the two never share a size. */
.mf-intro > .wp-block-paragraph:not(.mf-intro-more) {
	font-family: var(--wp--preset--font-family--fraunces), serif !important;
	font-size: clamp(1.45rem, 1.1rem + 1.05vw, 1.85rem) !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.01em !important;
	color: #3a3530 !important;
	margin: 0.75rem 0 0 !important;
}

/* --- Statement: the bio's voice, available anywhere. Registered as a block
       style from the Mark Tweaks plugin, so the treatment is something you
       pick from the Styles panel instead of a class buried in the markup. The
       About page's opening paragraphs wear it so they read in the front page
       bio's register; the front page bio itself could borrow it, but its own
       rule also carries that paragraph's postcard grid placement, so the two
       are kept apart rather than merged. No margin here on purpose: leading,
       tracking and colour are type, but the space around a paragraph is the
       page's business, and this rule has to be portable between pages. --- */
.is-style-statement {
	font-family: var(--wp--preset--font-family--fraunces), serif !important;
	font-size: clamp(1.45rem, 1.1rem + 1.05vw, 1.85rem) !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.01em !important;
	color: #3a3530 !important;
}

/* The link off the bio sits under the name in the address column, sharing
   its left edge, and is set in the same typed voice as the creations card's
   stamp — it is the second line of the address, so the two read as one
   register. Underlined, because unlike the stamp it goes somewhere. */
.mf-intro .mf-intro-more { margin: 0 !important; }

/* --- Section labels on the front page follow a section, so they need
       breathing room above as well as below. Declared after the shared
       .mf-section-label rule so it wins on source order. --- */
.mf-home-label { margin-top: 2.75rem !important; }

/* --- Creations: the card that sits in the stream beside the newest post.
       It borrows a post card's anatomy — a title where a post shows its
       own, a stamp where a post shows its date — and is set throughout in
       Courier Prime, the site's voice for anything typed: this card, and
       the date of every post. The heading is one of those labels rather
       than a title, so it wears the stamp's size and face and differs only
       in ink and a shade of weight — Courier Prime ships 400 and 700 and
       nothing between, so at this size the bold face is that shade.
       Uppercase because every other label on the page is: the masthead
       eyebrow, "Latest posts", and the stamp beside it. The line box is set
       to the stamp's as well: the block carries 1.2, which would leave the
       two labels about 2px apart on their baselines. --- */
.mf-creations-card h3 {
	letter-spacing: 0.04em !important;
	font-size: 0.8rem !important;
	line-height: 1.45 !important;
	font-weight: 700 !important;
	color: #111111 !important;
	text-transform: uppercase;
}
.mf-creations-card .mf-card-stamp {
	text-transform: uppercase;
	font-size: 0.8rem !important;
	letter-spacing: 0.04em;
}
/* The stamp is a link as well, and keeps the card's own colour doing it: the
   same quiet underline and the same rose on hover as the link off the bio,
   so the page's two metadata links read alike. Colour is stated rather than
   inherited so a visited stamp cannot fall back to the browser's purple. */
.mf-creations-card .mf-card-stamp a,
.mf-creations-card .mf-card-stamp a:visited {
	color: var(--wp--preset--color--secondary) !important;
	text-decoration-line: underline;
	text-decoration-color: rgba(107, 106, 106, 0.5);
	text-underline-offset: 0.18em;
	transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.mf-creations-card .mf-card-stamp a:hover {
	color: #c9968e !important;
	text-decoration-color: #c9968e;
}

/* --- The card's back is a sheet of cream paper: a yellow-tinged stock,
       warmer than the page behind it, ruled at 26px in a line faded almost
       to nothing, so the entries are written over the paper rather than
       divided by it. --- */
.mf-creations-card {
	background-color: #faf0d2 !important;
	background-image: repeating-linear-gradient(
		to bottom,
		transparent 0,
		transparent 25px,
		rgba(17, 17, 17, 0.08) 25px,
		rgba(17, 17, 17, 0.08) 26px
	);
}

/* The tile field holds the newest post, the creations card and the four tiles
   that follow as items of one grid, so a tile can be pulled up under a short
   one instead of leaving the space to a row. The row and both query wrappers
   pass their contents through and contribute no box of their own. */
.mf-tile-field { align-items: start !important; }
.mf-tile-field > .wp-block-columns,
.mf-tile-field .wp-block-column,
.mf-tile-field .wp-block-query,
.mf-tile-field .wp-block-post-template { display: contents; }
.mf-tile-field .mf-creations-card { display: flex; flex-direction: column; }
.mf-tile-field .mf-creations { display: flex; flex-direction: column; justify-content: flex-start; }
@media (max-width: 599px) {
	.mf-tile-field { grid-template-columns: 1fr !important; }
}

/* The investments page borrows this field for its six company tiles. Two run the
   full width with the photo beside the copy; the other four take one column each
   with the photo stacked above the logo and text. A photo fills its column edge to
   edge, and every logo is scaled into one box so no mark dwarfs the rest. */
.mf-tile-field .wp-block-media-text.is-style-mf-invest-wide { grid-column: 1 / -1; }
.mf-tile-field .wp-block-media-text:not(.is-style-mf-invest-wide) {
	grid-template-columns: 1fr !important;
}
.mf-tile-field .wp-block-media-text:not(.is-style-mf-invest-wide) > .wp-block-media-text__media {
	grid-column: 1;
	grid-row: 1;
	margin-bottom: 0;
}
.mf-tile-field .wp-block-media-text:not(.is-style-mf-invest-wide) > .wp-block-media-text__content {
	grid-column: 1;
	grid-row: 2;
}

/* One box height for every company mark, so a large logo such as Yebo Fresh's no
   longer dwarfs the others and the copy beneath every logo starts on the same line.
   Each mark keeps its own proportions; NicheStreem's wordmark is ten times wider
   than it is tall, so it stops at the column width and sits shallow in the box. */
.mf-tile-field .wp-block-media-text__content .wp-block-image img {
	height: 40px !important;
	width: auto !important;
	max-width: 100%;
	object-fit: contain;
	object-position: left center;
	margin: 0;
}

/* The backstory panel in the intro. Its copy sits in a narrow dark column, so it
   steps down a size from the body measure and loses the loose global leading —
   otherwise the panel reads as tall as the prose it is introducing. */
#backstory ~ p { line-height: 1.35; }

.mf-creation-row { gap: 0.5em !important; align-items: center !important; }
.mf-creation-row .wp-block-image {
	flex: 0 0 auto;
	margin: 0 !important;
}
.mf-creation-row .wp-block-image img {
	display: block;
	width: 32px;
	height: 32px !important;
	object-fit: contain;
	border-radius: 3px;
}
.mf-creation-name {
	margin: 0 !important;
	font-size: 0.95rem !important;
	line-height: 1.4 !important;
}
.mf-creation-gloss {
	margin: 0 !important;
	font-size: 0.875rem !important;
	line-height: 1.5 !important;
	color: #6b6a6a !important;
}
.mf-creations a,
.mf-intro-more a {
	color: #111 !important;
	font-weight: 400;
	text-decoration-line: underline;
	text-decoration-color: rgba(17, 17, 17, 0.3);
	text-underline-offset: 0.18em;
	transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
/* --- "The longer version" sits in the address column, directly under the
       name and sharing its left edge - so the two lines read as one address,
       both flush with the stamps above them. It is placed in the name's own
       cell and pushed down by a transform, the same way the name is. A row of
       its own would add the link's entire height below the message, which is
       what made the card stand taller than the message it carries. --- */
.mf-intro-more { text-align: left; }

.mf-intro-more a {
	font-family: var(--wp--preset--font-family--courier-prime), monospace !important;
	font-size: 0.8rem !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #6b6a6a !important;
	text-decoration-color: rgba(107, 106, 106, 0.5);
}
.mf-creations a:hover,
.mf-intro-more a:hover {
	color: #c9968e !important;
	text-decoration-color: #c9968e;
}

/* --- The homepage bio wears the same card as the tiles below it, at the width
       of the field's two columns, so the landing page reads as one assortment:
       a wide tile carrying the nameplate row and the statement, then the
       "Latest posts" label, then the stream. The paper is the tiles' own -
       white against the page's warm off-white - at their own 1px radius. Its
       inset is set deeper than the tiles' own, because this card carries a
       message rather than a title: the space above the writing and the space to
       its left are the same distance, which the tiles' tighter inset is too
       tight to give a display serif. --- */
.mf-intro {
	background-color: var(--wp--preset--color--background) !important;
	border-radius: 1px;
	padding: var(--wp--preset--spacing--40) !important;
}

/* --- The card is a postcard, so it is laid out like one. The message takes the
       left two-thirds and everything postal takes the right third: the stamp
       cluster at its top, and the name below it as the address, which is what
       the nameplate row becomes once the stamps hold the corner. That is also
       what keeps the message out from under the postage - no line of it can
       reach the right column at all. The right track is the cluster's own
       width, so the postage is untouched and none of its geometry has to be
       recomputed here.
       The address sits in the same cell as the stamps and is pushed below them
       by a transform rather than by grid rows: a row tall enough to reach under
       the stamps would have to be as tall as the message, which would carry the
       name hundreds of pixels down the card. The cluster's height is declared
       once, here, so the two stay in step. --- */
.mf-intro {
	--mf-pair-w: 156px;
	--mf-pair-h: 132px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--mf-pair-w);
	column-gap: 24px;
	row-gap: 0.75rem;
	align-items: start;
}
.mf-intro > .mf-stamp-pair {
	grid-area: 1 / 2;
	float: none;
	margin: 0;
}
.mf-intro > .mf-intro-head {
	grid-area: 1 / 2;
	align-self: start;
	/* Cleared of the stamps below them by a little more than their own height
	   suggests: the pair's box ends at 132, but the tilted Machin is drawn out
	   past it, so the offset is measured from the stamps' real foot.
	   The address block reads as one written unit, so the link's offset in the
	   rule further down repeats this same figure. */
	transform: translateY(calc(var(--mf-pair-h) + 23px));
}
.mf-intro > .mf-intro-more {
	grid-area: 1 / 2;
	align-self: start;
	/* The numbers are tied to the rule above: the name's box is exactly one line
	   at the 0.85rem set for it, and the 14px is the gap between the name and
	   this link. Change the name's size or its clearance from the stamps and
	   this offset has to follow.
	   This offset is a real margin rather than a transform, and that is the
	   whole point of it. The name rides on a transform, so it takes no space;
	   with the link on one too, nothing in the address column contributed any
	   height and the card was only ever as tall as the message. The wider the
	   window, the fewer lines the message sets, so the card got shorter while
	   the address stayed put - which is how the link came to sit on the card's
	   bottom edge. As a margin it counts, so the card is never shorter than
	   the words on it and the padding closes around the whole address. */
	margin-block-start: calc(var(--mf-pair-h) + 23px + 13.6px + 14px) !important;
}
/* The message runs the card's height and carries the postcard's printed line
   down its right edge - the hairline a bought postcard has between the writing
   and the address. It is held to the message's own height rather than the
   card's, so it reads as a ruled column and not as a border on the card.
   The line is this element's own end border, which leaves the text sitting
   flush against it, so an end padding holds the writing back the same distance
   the card holds it off the left: that centres the line in the whole gutter
   between the message and the address rather than jamming it onto the text.
   The inherited top margin is dropped here so the card's padding is the whole
   of the space above the message, which is what makes that match the left. --- */
.mf-intro > .wp-block-paragraph:not(.mf-intro-more) {
	grid-area: 1 / 1;
	margin-block-start: 0 !important;
	padding-inline-end: 24px;
	border-inline-end: 1px solid rgba(17, 17, 17, 0.09);
}

/* --- The postcard's stamps. The card is the postcard, so the cluster is stuck
       in its top right corner and floated there, letting the statement wrap
       around it the way writing wraps a stamp. The treatment both stamps share
       is the registered "Postage stamp" variation; the paper colour is each
       stamp's own palette slug - a South African green and a UK navy - which is
       why it is not part of the variation. The perforation is a dotted border
       in the card's own white, so the bites read as the card showing through.
       The cluster is a single row of two columns. The large stamp fills the
       left column from top to bottom; the right column holds the airmail label
       at its top and the small stamp just below it, the two meeting in a 3px
       overlap where the small stamp's top edge lies over the label's lower
       edge - the order stamps actually go on, each one stuck over the last
       rather than lined up beneath it. The label needs no layer of its own for
       that: the small stamp carries one instead, since the label comes later in
       the markup and would otherwise be painted over it. Gaps are 4px - snug,
       as if pressed on rather than spaced out. display and align-items are
       forced because the block carries a flex layout whose generated CSS would
       otherwise win. --- */
.mf-stamp-pair {
	float: right;
	display: grid !important;
	position: relative;
	/* Fixed tracks rather than auto, so the airmail label can be longer than the
	   column it belongs to and overhang it: justify-self: end holds its right
	   edge to the card's edge and the extra length reaches left, under the large
	   stamp, without widening the cluster or moving anything else. */
	grid-template-columns: 68px 84px;
	column-gap: 4px;
	row-gap: 4px;
	justify-content: end;
	align-items: start !important;
	margin: var(--wp--style--block-gap, 2rem) 0 0.9rem 1.4rem;
	/* The right column's two pieces meet in a 3px overlap, and the British
	   stamp now stands taller than the row the large stamp sets, so its foot
	   hangs below that row. An explicit height is what tells the float to
	   reserve room for it: the grid rows alone would size the cluster to the
	   large stamp, and the statement would close in under an overhanging
	   corner. The value is the stamp's bottom edge - 41.4 down plus 90.2 tall -
	   and is declared once, on the card, because the address line is positioned
	   from the same number. */
	height: var(--mf-pair-h);
}
.mf-stamp-pair .mf-stamp-gb { grid-area: 1 / 2; align-self: start; justify-self: end; }
/* The large stamp carries a layer of its own: the label is longer than its
   column and reaches under this stamp's right edge, and the label is the last
   child, so without a layer of its own the stamp would be painted over by it.
   Its layer sits above the small stamp's, so the stacking reads label, small
   stamp, large stamp - what is underneath is what went on first. */
.mf-stamp-pair .mf-stamp-art:not(.mf-stamp-gb) { grid-area: 1 / 1; z-index: 3; }
.is-style-mf-stamp {
	display: flex;
	align-items: center;
	justify-content: center;
	/* The theme gives every group with a background its default padding. Left
	   on, that padding is wider than the stamp itself, so with border-box the
	   box can never shrink to 68px: its content box collapses to nothing and
	   the country name breaks one letter per line. These are the large South
	   African stamp's measurements - 68 x 113.5 against its 278 x 464 artwork -
	   and the British stamp overrides them below. */
	padding: 0 !important;
	width: 68px;
	min-width: 68px;
	height: 113.5px;
	border: 3px dotted var(--wp--preset--color--background);
	border-radius: 2px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.is-style-mf-stamp p {
	margin: 0 !important;
	padding: 0 5px;
	/* A flex item inside the stamp, so it needs a definite measure of its own:
	   left to shrink it collapses to a single character and the country name
	   stacks one letter per line. */
	flex: 0 0 auto;
	width: 100%;
	box-sizing: border-box;
	font-family: var(--wp--preset--font-family--courier-prime) !important;
	font-size: 0.5rem !important;
	line-height: 1.3 !important;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: center;
}
/* --- The South African stamp carries real artwork: a 1995 Rugby World Cup stamp
       the site owner supplied. That box drops its palette colour and its drawn
       perforation border - the artwork has its own - and takes the artwork's own
       proportions, 278 x 464, so it is never cropped to fit a made-up shape.
       Both stamps share the new width so the pair stays symmetrical. The
       artwork's paper is white and so is the card, so its perforated edge reads
       as the card showing through, exactly as the drawn perforation does on the
       UK stamp beside it. The country name stays in the markup for screen
       readers and is hidden visually, since the artwork itself carries "RSA". --- */
.is-style-mf-stamp.mf-stamp-art {
	position: relative;
	border: 0;
	box-shadow: none;
	background: none !important;
}
.is-style-mf-stamp.mf-stamp-art .wp-block-image {
	margin: 0 !important;
	width: 100%;
	height: 100%;
}
.is-style-mf-stamp.mf-stamp-art img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.is-style-mf-stamp.mf-stamp-art .mf-stamp-name {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.mf-stamp-gb {
	/* The British stamp is a Machin definitive and the South African one a 1995
	   rugby commemorative: a small stamp and a large one, so the two are sized
	   differently rather than normalised. Each keeps its own aspect ratio -
	   76 x 90.2 here against the artwork's 300 x 356, and 68 x 113.5 against
	   278 x 464 for the other. A Machin is a small definitive, but at 81px tall
	   it read as a token beside the rugby stamp rather than its companion, so it
	   was stepped up until only the difference in proportion separates them. */
	width: 76px;
	min-width: 76px;
	height: 90.2px;
	/* Starts at the top of the right column and is pushed down by the label's
	   own height less the 3px the two overlap by, so its top edge lands over the
	   label's lower edge and stays there however long the label becomes. It is
	   turned a touch askew as well: a stamp pressed on by hand never sits
	   perfectly true, and one tilted stamp is what makes a cluster read as
	   placed rather than arranged. z-index puts it over the label, which comes
	   later in the markup and would otherwise win, but under the large stamp. */
	position: relative;
	z-index: 2;
	transform: translateY(41.4px) rotate(-2.5deg);
}

/* --- The airmail label, stuck in the top right corner: the piece the other two
       gather around rather than a mark struck across them. Its right edge is
       held to the card's edge and it runs longer than the column it sits in, so
       its left end reaches under the large stamp - a label put on over the edge
       of a stamp already there. Its height is never set: the artwork's own
       400 x 193 decides it, and an etiquette squeezed into a slot stops looking
       like one. --- */
.mf-postmark {
	grid-area: 1 / 2;
	align-self: start;
	justify-self: end;
	width: 92px;
	margin: 0 !important;
	pointer-events: none;
}
@media (max-width: 599px) {
	/* Phone postcard: the postage floats beside the name and opening lines.
	   Its artwork and offsets scale together to 72% of the desktop cluster;
	   actual box sizes (not a transform) reserve the correct wrapping space. */
	.mf-intro {
		display: flow-root;
		--mf-pair-h: 95.04px;
	}
	.mf-intro > .mf-intro-head {
		display: block;
		transform: none;
		margin-block-end: 16px !important;
	}
	.mf-intro .mf-intro-name {
		line-height: 1.35 !important;
	}
	.mf-intro > .wp-block-paragraph:not(.mf-intro-more) {
		font-size: 1.25rem !important;
		line-height: 1.25 !important;
		padding-inline-end: 0;
		border-inline-end: 0;
		margin-block: 0 !important;
	}
	.mf-intro > .mf-intro-more {
		clear: both;
		margin-block-start: 20px !important;
		margin-block-end: 0 !important;
	}
	.mf-intro > .mf-stamp-pair {
		float: right;
		width: 112.32px;
		grid-template-columns: 48.96px 60.48px;
		gap: 2.88px;
		margin: 0 0 16px 16px !important;
	}
	.mf-intro .is-style-mf-stamp {
		width: 48.96px;
		min-width: 48.96px;
		height: 81.72px;
	}
	.mf-intro .mf-stamp-gb {
		width: 54.72px;
		min-width: 54.72px;
		height: 64.944px;
		transform: translateY(29.808px) rotate(-2.5deg);
	}
	.mf-intro .mf-postmark {
		width: 66.24px;
	}
}

/* --- "All posts": the blog's pagination language (small caps meta text
       with the arrow in a disc), so the front page hands over to the
       stream in the same voice the stream's own pager uses. --- */
.mf-stream-more { margin: 1.75rem 0 0 !important; }
.mf-stream-more a {
	font-family: var(--wp--preset--font-family--albert-sans), sans-serif !important;
	font-size: 0.75rem !important;
	font-weight: 400 !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none !important;
	color: #111 !important;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	transition: gap 0.25s ease, color 0.2s ease;
}
.mf-stream-more a::after {
	content: '→';
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75em;
	height: 1.75em;
	border-radius: 50%;
	background: #111;
	color: #fff;
	line-height: 1;
	transition: background 0.2s ease;
}
.mf-stream-more a:hover { gap: 0.8em; color: #c9968e !important; }
.mf-stream-more a:hover::after { background: #c9968e; }

@media (max-width: 599px) {
	.mf-home-label { margin-top: 2.25rem !important; }
}

@media (prefers-reduced-motion: reduce) {
	.mf-creations a,
	.mf-intro-more a,
	.mf-stream-more a,
	.mf-creations-card .mf-card-stamp a,
	.mf-stream-more a::after { transition: none; }
}