/*
Theme Name: Forever Fledging
Theme URI: https://cherylkuckpdx.com/
Author: Prologic Web Solutions
Description: A custom theme built from the Forever Fledging HTML design — a dark, typographic writing journal with the Quiet / Bold / Fearless current accents. Every section, menu, sidebar card and e-mail is editable from the WordPress backend through ACF PRO.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: forever-fledging
Tags: blog, one-column, two-columns, right-sidebar, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready

The design system lives in assets/css/html-base.css, byte-for-byte the stylesheet
from the HTML build. This file only adds what WordPress brings to the page:
core markup classes, the editor's block output, comments, Contact Form 7 and the
few layout variants the dynamic templates need.
*/

/* ==========================================================
   Accessibility helpers WordPress expects
   ========================================================== */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	position: fixed !important;
	top: 16px;
	left: 16px;
	z-index: 1001;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	padding: 12px 20px;
	border-radius: 10px;
	background: var(--amber);
	color: var(--night);
	font-weight: 600;
}

/* ----------------------------------------------------------------------
   Search overlay.

   The base stylesheet sets `.field input` for the comment form further down
   the file than `.search-overlay input`. Both are the same specificity, so
   the comment-field treatment — cream fill, 14px radius, dark text — was
   winning here and the overlay showed a light box on a dark backdrop. These
   rules are scoped through .field to outrank it.
   ------------------------------------------------------------------- */
.search-overlay .field {
	/* No border on any side — the translucent fill alone gives the shape. */
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .07);
	padding: 8px 10px 8px 30px;
	gap: 10px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: box-shadow .35s, background .35s;
}

.search-overlay .field:focus-within {
	background: rgba(255, 255, 255, .11);
	box-shadow: 0 0 0 4px rgba(240, 180, 106, .16);
}

.search-overlay .field input,
.search-overlay .field input[type="search"] {
	width: auto;
	padding: 10px 0;
	border: 0;
	border-radius: 0;
	background: none;
	appearance: none;
	-webkit-appearance: none;
	color: var(--cream);
	font-family: var(--serif);
	font-size: clamp(22px, 3.6vw, 40px);
	line-height: 1.2;
}

.search-overlay .field input::placeholder {
	color: rgba(247, 240, 228, .32);
}

/* The pill itself shows focus, so the input skips the global focus ring and
   avoids drawing two rings inside one another. */
.search-overlay .field input:focus-visible {
	outline: none;
}

/* The native clear button renders dark-on-dark. */
.search-overlay input[type="search"]::-webkit-search-decoration,
.search-overlay input[type="search"]::-webkit-search-cancel-button,
.search-overlay input[type="search"]::-webkit-search-results-button {
	-webkit-appearance: none;
	appearance: none;
}

.search-overlay .field .go {
	flex-shrink: 0;
	width: 58px;
	height: 58px;
	padding: 0;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: linear-gradient(120deg, var(--amber), var(--amber-deep));
	color: var(--night);
	box-shadow: 0 14px 30px -12px rgba(240, 180, 106, .6);
	transition: transform .35s var(--ease), box-shadow .35s;
}

.search-overlay .field .go:hover {
	transform: scale(1.06);
	box-shadow: 0 18px 36px -12px rgba(240, 180, 106, .75);
}

.search-overlay .field .go svg {
	width: 24px;
	height: 24px;
}

.search-overlay p {
	text-align: center;
	margin-top: 20px;
}

.search-overlay label {
	text-align: center;
}

@media (max-width: 600px) {
	.search-overlay .field {
		padding-left: 20px;
	}

	.search-overlay .field .go {
		width: 48px;
		height: 48px;
	}

	.search-overlay .field .go svg {
		width: 20px;
		height: 20px;
	}
}

/* ----------------------------------------------------------------------
   Mobile navigation panel.

   The design file reveals the panel with `clip-path: circle(150%)` and parks
   it at `z-index: -1`. Both are fragile:

   * z-index:-1 puts a full-screen overlay *behind* page content. It only
     stays visible because `backdrop-filter` promotes it to its own layer —
     and the design file has no `-webkit-backdrop-filter`, which Safari
     needs, so that promotion never happens on iOS.
   * an animated `clip-path: circle()` with a percentage radius is the one
     part of this that Safari has historically got wrong.

   The result on iPhone was a menu button that toggled to a close icon with
   no menu behind it. Visibility here is driven by opacity/visibility, which
   every browser handles, and the panel sits above the page rather than
   below it. The staggered item animation is untouched.
   ------------------------------------------------------------------- */
@media (max-width: 1040px) {
	.main-nav {
		z-index: 1;
		clip-path: none;
		-webkit-clip-path: none;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-10px);
		background: rgba(10, 18, 34, .985);
		-webkit-backdrop-filter: blur(20px);
		backdrop-filter: blur(20px);
		transition: opacity .35s var(--ease), transform .45s var(--ease), visibility .35s;
	}

	body.menu-open .main-nav {
		clip-path: none;
		-webkit-clip-path: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	/* The logo and the close button stay reachable above the open panel. */
	.site-header .nav-wrap .brand,
	.site-header .nav-wrap .nav-actions {
		position: relative;
		z-index: 2;
	}

	/* THE actual cause of the broken mobile menu.
	   Once the page is scrolled, .site-header gains
	   `backdrop-filter: blur(16px) saturate(140%)`. A backdrop-filter — like
	   a transform — makes an element the containing block for its
	   `position: fixed` descendants. The full-screen menu panel lives inside
	   the header, so it was being trapped inside the ~68px header box and
	   the page showed straight through where the menu should be. At the very
	   top of the page the header has no backdrop-filter, which is why the
	   menu opened fine there and only failed after scrolling.

	   Both the filter and the hide transform are dropped while the menu is
	   open, so the panel is laid out against the viewport again. The header
	   needs no background of its own then — the opaque panel is behind it. */
	body.menu-open .site-header {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		transform: none;
		background: transparent;
		box-shadow: none;
	}

	/* Logged-in editors have the admin bar above the header. */
	body.admin-bar .main-nav {
		top: 32px;
	}
}

@media (max-width: 782px) {
	body.admin-bar .main-nav {
		top: 46px;
	}
}

/* The search overlay is missing the same prefix. */
.search-overlay {
	-webkit-backdrop-filter: blur(18px);
}

/* Once the preloader has faded it must not keep intercepting taps, even if a
   browser is slow to apply the visibility change. */
.preloader.done {
	pointer-events: none;
}

/* The admin bar is fixed, so push the fixed header below it. */
body.admin-bar .site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .site-header {
		top: 46px;
	}
}

/* ==========================================================
   Layout variants used by the dynamic templates
   ========================================================== */

/* Category filter links. Mirrors .filters from the base stylesheet; the class
   name differs so the HTML build's client-side filter never binds to these
   real archive links. */
.ff-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-bottom: 56px;
}

.blog-layout--full {
	grid-template-columns: minmax(0, 1fr);
}

/* The related strip sits on the light paper background. */
.related .section-title em {
	color: var(--amber-deep);
}

.article-grid--no-share {
	grid-template-columns: minmax(0, 760px) 1fr;
}

.article-grid--no-side {
	grid-template-columns: 80px minmax(0, 760px);
}

.article-grid--no-share.article-grid--no-side {
	grid-template-columns: minmax(0, 820px);
}

/* Pages */
.ff-page-grid {
	display: grid;
	grid-template-columns: minmax(0, 820px);
	justify-content: center;
	gap: 50px;
}

.ff-page-grid--sidebar {
	grid-template-columns: minmax(0, 1fr) 320px;
	justify-content: stretch;
}

/* "Narrow reading column" off: the text fills the container instead of
   sitting in an 820px band with wide empty margins either side. */
.ff-page-grid--wide {
	grid-template-columns: minmax(0, 1fr);
	justify-content: stretch;
}

/* A full-width measure is long, so the type opens up a little to keep the
   line count per paragraph sane. */
.ff-page-grid--wide .prose {
	font-size: 20px;
	line-height: 1.8;
}

.ff-page-grid--wide .prose .closing {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

/* Card-style list items read better in two columns once there is room. */
@media (min-width: 1000px) {
	.ff-page-grid--wide .prose > ul {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* An odd final item would sit alone in a half-width cell, so it spans. */
	.ff-page-grid--wide .prose > ul > li:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

.ff-page-thumb {
	margin: 0 0 40px;
	border-radius: 28px;
	overflow: hidden;
	box-shadow: var(--shadow-soft);
	border: 1px solid var(--line-dark);
}

.ff-page-thumb img {
	width: 100%;
	height: auto;
}

.ff-page-thumb .caption-card {
	margin: 0;
	border: 0;
	border-top: 1px solid var(--line-dark);
	border-radius: 0;
}

.ff-page-comments {
	border-radius: 0;
	margin-top: 0;
	padding-top: 0;
}

/* ----------------------------------------------------------------------
   Split page hero — title left, featured image right, as on the home page.
   .page-hero centres everything, so those rules are undone here.
   ------------------------------------------------------------------- */
.page-hero--split {
	text-align: left;
	padding: 170px 0 110px;
}

.page-hero--split .hero__grid {
	grid-template-columns: 1.05fr .95fr;
}

.page-hero--split h1 {
	font-size: clamp(44px, 6.4vw, 92px);
	margin: 18px 0 18px;
}

.page-hero--split p {
	margin: 0;
	max-width: 520px;
	text-align: left;
}

.page-hero--split .breadcrumb {
	justify-content: flex-start;
}

/* The hero image keeps its own proportions rather than the home page's. */
.page-hero--split .hero__frame img {
	aspect-ratio: 4 / 3;
}

.page-hero--split .float-badge--a {
	left: -28px;
	bottom: 26px;
	max-width: 280px;
}

.page-hero--split .float-badge--a small {
	display: block;
	line-height: 1.45;
	white-space: normal;
}

/* A split banner already ends on a straight edge, so the panel below meets it
   squarely instead of curving away at both top corners. */
.page-hero--split + .article-wrap {
	border-radius: 0;
	margin-top: 0;
}

@media (max-width: 960px) {
	.page-hero--split {
		text-align: center;
		padding: 150px 0 90px;
	}

	/* The base stylesheet stacks .hero__grid here; the rule above is more
	   specific, so the single column has to be restated. */
	.page-hero--split .hero__grid {
		grid-template-columns: 1fr;
	}

	.page-hero--split p {
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}

	.page-hero--split .breadcrumb {
		justify-content: center;
	}

	.page-hero--split .float-badge--a {
		left: 8px;
		bottom: 12px;
		max-width: min(280px, 72%);
		text-align: left;
	}
}

@media (max-width: 520px) {
	/* Too little room for a floating caption over the image. */
	.page-hero--split .float-badge--a {
		position: static;
		max-width: none;
		margin: 14px 0 0;
		animation: none;
	}
}

/* On a long page the subheads carry the structure, so they get a rule and a
   brand-gradient tick to break the column into readable chapters. Scoped to
   pages so ordinary post subheads stay quiet. */
.ff-page-body .prose h2,
.ff-page-body .prose h3,
.ff-page-body .prose h4 {
	position: relative;
	margin-top: 2.2em;
	padding-top: 1.15em;
	border-top: 1px solid var(--line-dark);
}

.ff-page-body .prose h2::before,
.ff-page-body .prose h3::before,
.ff-page-body .prose h4::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 64px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--blue), var(--amber));
}

.ff-page-body .prose h4 {
	font-size: clamp(24px, 2.4vw, 29px);
	font-weight: 500;
}

/* The first subhead follows body copy, so it needs less air above it. */
.ff-page-body .prose > :first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.ff-page-body .prose > :first-child::before {
	display: none;
}

/* Without a drop cap the opening paragraph becomes the lead instead — which
   also avoids a drop cap stranding itself beside a one-line paragraph. */
.ff-page-body .prose.ff-no-dropcap > p:first-of-type {
	font-family: var(--serif);
	font-size: clamp(21px, 2.1vw, 26px);
	line-height: 1.5;
	color: var(--ink);
	margin-bottom: 1.1em;
}

/* Images placed inside the editor content. The classic [caption] shortcode
   produces a bare 300px image, which looks adrift in a 760px column. */
.prose .wp-caption,
.prose figure.wp-block-image {
	background: #fff;
	border: 1px solid var(--line-dark);
	border-radius: 20px;
	padding: 10px;
	box-shadow: var(--shadow-soft);
	margin: 2.4em auto;
	max-width: 100%;
	width: fit-content;
}

.prose .wp-caption img,
.prose figure.wp-block-image img {
	border-radius: 13px;
	box-shadow: none;
	display: block;
}

.prose .wp-caption-text,
.prose figure.wp-block-image figcaption {
	margin: 12px 6px 6px;
	font-size: 13.5px;
	line-height: 1.55;
	font-style: normal;
	color: var(--ink-soft);
	text-align: center;
	max-width: 420px;
}

/* Aligned images sit in the margin with the copy running beside them. */
.prose .wp-caption.alignleft,
.prose figure.wp-block-image.alignleft {
	float: left;
	margin: .35em 2.4em 1.8em 0;
	max-width: min(340px, 42%);
}

.prose .wp-caption.alignright,
.prose figure.wp-block-image.alignright {
	float: right;
	margin: .35em 0 1.8em 2.4em;
	max-width: min(340px, 42%);
}

/* Block-level content starts its own band rather than squeezing in beside a
   floated image — otherwise the card-style lists wrap into the margin. */
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6,
.prose ul,
.prose ol,
.prose blockquote,
.prose table,
.prose pre,
.prose .closing {
	clear: both;
}

.welcome__grid--flip .welcome__media {
	order: 2;
}

.welcome__cta {
	margin-top: 6px;
}

/* Second line of copy inside an "explore" path card.
   Scoped through .path-card so it outranks `.path-card p { margin: 0 }`. */
.path-card .path-card__desc {
	margin: 10px 0 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--ink-soft);
	opacity: .82;
}

.ff-404-search {
	max-width: 520px;
	margin: 0 auto;
}

.ff-404-search .widget-search {
	background: #fff;
}

@media (max-width: 1100px) {
	.ff-page-grid--sidebar {
		grid-template-columns: minmax(0, 1fr);
	}

	.article-grid--no-share {
		grid-template-columns: minmax(0, 1fr);
	}

	.article-grid--no-side {
		grid-template-columns: 60px minmax(0, 1fr);
	}
}

/* ==========================================================
   Editor content (the .prose / .ff-rte reading column)
   ========================================================== */
.prose ul li,
.prose ol li {
	--c: var(--amber-deep);
}

.prose ol {
	list-style: none;
	counter-reset: ff-ol;
	padding: 0;
	margin: 0 0 1.6em;
	display: grid;
	gap: 14px;
}

.prose ol > li {
	counter-increment: ff-ol;
	position: relative;
	padding: 20px 22px 20px 62px;
	background: #fff;
	border-radius: 18px;
	border: 1px solid var(--line-dark);
	box-shadow: 0 10px 30px -20px rgba(27, 34, 54, .3);
	font-size: 17px;
	line-height: 1.7;
}

.prose ol > li::before {
	content: counter(ff-ol);
	position: absolute;
	left: 18px;
	top: 18px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--ink);
	color: var(--cream);
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 600;
}

/* Nested lists stay plain — the card treatment is for top-level points only. */
.prose li ul,
.prose li ol {
	display: block;
	margin: 12px 0 0;
	padding-left: 20px;
}

.prose li ul > li,
.prose li ol > li {
	background: none;
	border: 0;
	box-shadow: none;
	padding: 4px 0 4px 4px;
	border-radius: 0;
	list-style: disc;
	font-size: 16.5px;
}

.prose li ul > li::before,
.prose li ol > li::before {
	display: none;
}

.ff-no-dropcap > p:first-of-type::first-letter {
	font-family: inherit;
	float: none;
	font-size: inherit;
	line-height: inherit;
	padding: 0;
	color: inherit;
	font-weight: inherit;
}

.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
	font-family: var(--serif);
	color: var(--ink);
	line-height: 1.2;
	letter-spacing: -.01em;
	margin: 1.8em 0 .6em;
	font-weight: 600;
}

.prose h2 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 500; }
.prose h3 { font-size: clamp(24px, 2.6vw, 30px); }
.prose h4 { font-size: 22px; }
.prose h5 { font-size: 19px; }
.prose h6 { font-size: 17px; letter-spacing: .06em; text-transform: uppercase; font-family: var(--sans); color: var(--amber-deep); }

.prose a:not(.btn) {
	color: var(--amber-deep);
	background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
	transition: background-size .4s var(--ease), color .3s;
}

.prose a:not(.btn):hover {
	color: var(--ink);
	background-size: 0 1px;
}

.prose img {
	border-radius: 20px;
	box-shadow: var(--shadow-soft);
}

.prose figure {
	margin: 2em 0;
}

.prose figcaption,
.prose .wp-caption-text {
	margin-top: 12px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ink-soft);
	text-align: center;
	font-style: italic;
}

.prose hr,
.prose .wp-block-separator {
	border: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--line-dark) 20%, var(--line-dark) 80%, transparent);
	margin: 2.6em 0;
}

.prose table {
	width: 100%;
	border-collapse: collapse;
	margin: 2em 0;
	font-size: 16px;
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: var(--shadow-soft);
}

.prose th,
.prose td {
	padding: 14px 18px;
	text-align: left;
	border-bottom: 1px solid var(--line-dark);
}

.prose th {
	font-size: 12.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-soft);
	background: var(--paper);
}

.prose pre,
.prose .wp-block-code {
	background: var(--night-2);
	color: var(--cream);
	padding: 26px 28px;
	border-radius: 18px;
	/* Verse, not code. The Preformatted block is only ever used for poems
	   and lyrics on this site, so these boxes take the site's serif rather
	   than the browser's default monospace. Real code blocks are put back
	   to monospace further down: Gutenberg always wraps those in <code>
	   and Preformatted never does, which separates the two cleanly. */
	font-family: var(--serif);
	font-size: 17.5px;
	font-weight: 400;
	line-height: 1.7;
	margin: 2em 0;
	/* Verse keeps its own line breaks and indentation, but long lines wrap
	   instead of running off the side of a phone screen. */
	white-space: pre-wrap;
	overflow-wrap: break-word;
	overflow-x: auto;
}

/* Bold inside these dark panels — almost always a poem title.
   `.prose strong` paints bold in --ink (#1b2236), which is meant for body
   copy on the cream background. On the dark blue panel (#101b31) that is a
   1.1:1 contrast ratio, so the titles were effectively invisible. Amber is
   the accent the design already uses for emphasis on dark panels (see
   blockquotes) and gives 9.6:1 here. */
.prose pre strong,
.prose pre b,
.prose .wp-block-code strong,
.prose .wp-block-code b,
.prose .wp-block-verse strong,
.prose .wp-block-verse b {
	color: var(--amber);
	font-weight: 600;
	font-size: 1.1em;
	letter-spacing: .01em;
}

/* Italics in a poem stay in the panel's own cream, not the body ink. */
.prose pre em,
.prose pre i,
.prose .wp-block-verse em,
.prose .wp-block-verse i {
	color: inherit;
}

.prose code {
	font-size: .92em;
	background: rgba(27, 34, 54, .07);
	padding: .15em .45em;
	border-radius: 6px;
}

/* A genuine code block — Gutenberg wraps the contents in <code>, which a
   Preformatted poem never has — opts back out of the serif above. */
.prose pre code {
	background: none;
	padding: 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 14.5px;
}

.prose cite {
	display: block;
	margin-top: 12px;
	font-size: 14px;
	font-style: normal;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--amber);
}

.prose .wp-block-pullquote {
	border: 0;
	padding: 0;
}

/* Core alignment and caption classes */
.alignnone { margin: 2em 0; }
.aligncenter,
.wp-block-image.aligncenter { margin-left: auto; margin-right: auto; display: block; }
.alignleft { float: left; margin: .4em 1.8em 1.4em 0; max-width: 50%; }
.alignright { float: right; margin: .4em 0 1.4em 1.8em; max-width: 50%; }

.wp-caption { max-width: 100%; }
.wp-caption img { width: 100%; height: auto; }

.wp-block-image figcaption { margin-top: 12px; }

.alignwide { width: min(1040px, 100%); margin-left: auto; margin-right: auto; }
.alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); border-radius: 0; }

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin: 2em 0; }
.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-item { margin: 0; }
.gallery-item img { border-radius: 14px; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; }
.gallery-caption { font-size: 13px; color: var(--ink-soft); }

.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 2em 0; }

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 26px;
	border-radius: 999px;
	background: linear-gradient(120deg, var(--amber), var(--amber-deep));
	color: var(--night);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
}

.wp-block-embed,
.wp-block-video {
	margin: 2em 0;
}

.wp-block-embed iframe,
.wp-block-video video {
	width: 100%;
	border-radius: 18px;
}

.sticky .post-card__inner {
	border-color: rgba(224, 138, 60, .55);
}

/* Password form */
.post-password-form {
	display: grid;
	gap: 12px;
	max-width: 420px;
}

.post-password-form input[type="password"] {
	padding: 14px 18px;
	border-radius: 14px;
	border: 1px solid var(--line-dark);
	font: inherit;
}

.post-password-form input[type="submit"] {
	justify-self: start;
	padding: 14px 26px;
	border: 0;
	border-radius: 999px;
	background: var(--ink);
	color: var(--cream);
	font-weight: 600;
	cursor: pointer;
}

/* ==========================================================
   Comments
   ========================================================== */
.ff-comments {
	margin-top: 50px;
}

.ff-comments__title {
	font-family: var(--serif);
	font-size: clamp(26px, 3vw, 34px);
	font-weight: 500;
	margin: 0 0 24px;
	color: var(--ink);
}

.ff-comments__closed {
	color: var(--ink-soft);
	font-size: 15px;
}

.comment-list,
.comment-list .children {
	list-style: none;
	margin: 0 0 40px;
	padding: 0;
	display: grid;
	gap: 18px;
}

.comment-list .children {
	margin: 18px 0 0;
	padding-left: clamp(16px, 4vw, 42px);
	border-left: 2px solid var(--line-dark);
}

.ff-comment__inner {
	background: #fff;
	border: 1px solid var(--line-dark);
	border-radius: 22px;
	padding: 24px 26px;
	box-shadow: 0 10px 30px -24px rgba(27, 34, 54, .4);
}

.ff-comment__head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 14px;
}

.ff-comment__avatar img {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 3px #f4ead9;
}

.ff-comment__who strong {
	display: block;
	font-family: var(--serif);
	font-size: 19px;
	font-weight: 600;
	color: var(--ink);
}

.ff-comment__who time,
.ff-comment__who time a {
	font-size: 13px;
	color: var(--muted);
}

.ff-comment__body {
	color: #2a3146;
	font-size: 16.5px;
	line-height: 1.75;
}

.ff-comment__body p {
	margin: 0 0 1em;
}

.ff-comment__body p:last-child {
	margin-bottom: 0;
}

.ff-comment__moderation {
	margin: 0 0 12px;
	font-size: 13.5px;
	color: var(--amber-deep);
	font-weight: 600;
}

.ff-comment__foot {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--line-dark);
	display: flex;
	gap: 18px;
	align-items: center;
	font-size: 13.5px;
	font-weight: 600;
}

.ff-comment__foot a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--ink);
}

.ff-comment__foot a:hover {
	color: var(--amber-deep);
}

.ff-comment__foot svg {
	width: 14px;
	height: 14px;
}

/* The comment textarea leads the grid, as in the design. */
.form-grid .field.full {
	order: -1;
}

.comment-form .comment-reply-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 12px;
}

.ff-cancel-reply a {
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 600;
	color: var(--amber-deep);
}

.comment-form .logged-in-as {
	font-size: 14px;
	color: var(--ink-soft);
	margin: 0 0 20px;
}

.comment-form .form-actions button {
	margin-left: auto;
}

/* ==========================================================
   Contact Form 7
   ========================================================== */
.ff-form,
.wpcf7 {
	--ff-field-bg: #fff;
}

/* ----------------------------------------------------------------------
   Contact section: copy and a callout on one side, the form on the other.
   ------------------------------------------------------------------- */
.ff-contact {
	background: var(--paper);
	color: var(--ink);
	padding-top: clamp(40px, 5vw, 64px);
}

.ff-contact__grid {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
}

.ff-contact__grid--solo {
	grid-template-columns: minmax(0, 760px);
	justify-content: center;
}

.ff-contact .eyebrow,
.ff-contact .section-title em {
	color: var(--amber-deep);
}

.ff-contact .section-title {
	margin-bottom: 16px;
}

.ff-contact .section-lead {
	color: var(--ink-soft);
	margin: 0;
}

.ff-contact__aside {
	position: sticky;
	top: 110px;
}

/* The one thing a visitor must read before typing. */
.ff-note {
	display: flex;
	gap: 16px;
	margin-top: 30px;
	padding: 24px 26px;
	border-radius: 22px;
	background: linear-gradient(150deg, #0f1a30, #24304f);
	color: var(--cream);
	box-shadow: var(--shadow-soft);
}

.ff-note__icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 14px;
	display: grid;
	place-items: center;
	background: rgba(240, 180, 106, .18);
	color: var(--amber);
}

.ff-note__icon svg {
	width: 22px;
	height: 22px;
}

.ff-note strong {
	display: block;
	font-family: var(--serif);
	font-size: 20px;
	font-weight: 500;
	margin-bottom: 6px;
}

.ff-note p {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: rgba(247, 240, 228, .82);
}

.ff-points {
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
	display: grid;
	gap: 16px;
}

.ff-points li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.ff-points__icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 13px;
	display: grid;
	place-items: center;
	background: #fff;
	border: 1px solid var(--line-dark);
	color: var(--amber-deep);
	box-shadow: 0 8px 20px -14px rgba(27, 34, 54, .5);
}

.ff-points__icon svg {
	width: 19px;
	height: 19px;
}

.ff-points__body strong {
	display: block;
	font-size: 15.5px;
	font-weight: 600;
	color: var(--ink);
	line-height: 1.4;
}

.ff-points__body span {
	display: block;
	margin-top: 2px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--ink-soft);
}

@media (max-width: 900px) {
	.ff-contact__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.ff-contact__aside {
		position: static;
	}
}

.ff-form {
	background: #fff;
	border: 1px solid var(--line-dark);
	border-radius: 28px;
	padding: clamp(24px, 4vw, 42px);
	box-shadow: var(--shadow-soft);
	position: relative;
	overflow: hidden;
}

/* A thin brand rule along the top edge of the form card. */
.ff-form::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 4px;
	background: linear-gradient(90deg, var(--quiet), var(--amber), var(--fearless));
}

.prose .wpcf7,
.ff-form .wpcf7 {
	font-size: 16px;
}

/* A form dropped into page content gets the same card as the rest of the
   design, rather than sitting loose on the background. */
.prose .wpcf7 {
	display: block;
	margin: 2.4em 0 0;
	padding: clamp(24px, 4vw, 42px);
	background: #fff;
	border: 1px solid var(--line-dark);
	border-radius: 28px;
	box-shadow: var(--shadow-soft);
}

/* Two columns once there is room: the short fields pair up, the message and
   the submit row run the full width. */
@media (min-width: 680px) {
	.prose .wpcf7-form,
	.ff-form .wpcf7-form {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px 24px;
		align-items: start;
	}

	.prose .wpcf7-form > p,
	.ff-form .wpcf7-form > p {
		margin: 0;
	}

	.prose .wpcf7-form > p:has(textarea),
	.prose .wpcf7-form > p:has(input[type="submit"]),
	.prose .wpcf7-form > .wpcf7-response-output,
	.prose .wpcf7-form > .screen-reader-response,
	.ff-form .wpcf7-form > p:has(textarea),
	.ff-form .wpcf7-form > p:has(input[type="submit"]),
	.ff-form .wpcf7-form > .wpcf7-response-output,
	.ff-form .wpcf7-form > .screen-reader-response {
		grid-column: 1 / -1;
	}

	/* Browsers without :has() keep a single column rather than a broken grid. */
	@supports not selector(:has(*)) {
		.prose .wpcf7-form,
		.ff-form .wpcf7-form {
			display: block;
		}

		.prose .wpcf7-form > p,
		.ff-form .wpcf7-form > p {
			margin: 0 0 18px;
		}
	}
}

.wpcf7-form p {
	margin: 0 0 18px;
}

.wpcf7-form label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin-bottom: 8px;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form select,
.wpcf7-form textarea {
	width: 100%;
	padding: 15px 18px;
	border-radius: 14px;
	border: 1px solid var(--line-dark);
	background: var(--paper);
	font: inherit;
	font-size: 16px;
	color: var(--ink);
	outline: 0;
	transition: border-color .3s, box-shadow .3s;
}

.wpcf7-form textarea {
	min-height: 180px;
	resize: vertical;
}

.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
	border-color: var(--amber-deep);
	box-shadow: 0 0 0 4px rgba(240, 180, 106, .2);
}

.wpcf7-form .wpcf7-list-item {
	margin: 0 18px 0 0;
}

.wpcf7-form .wpcf7-list-item-label {
	text-transform: none;
	letter-spacing: 0;
	font-size: 15px;
	font-weight: 400;
	color: var(--ink);
}

.wpcf7-form input[type="submit"],
.wpcf7-form button[type="submit"] {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 30px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(120deg, var(--amber), var(--amber-deep));
	color: var(--night);
	font: inherit;
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	box-shadow: 0 14px 30px -10px rgba(240, 180, 106, .6);
	transition: transform .4s var(--ease), box-shadow .4s;
}

.wpcf7-form input[type="submit"]:hover,
.wpcf7-form button[type="submit"]:hover {
	transform: translateY(-3px);
	box-shadow: 0 20px 40px -12px rgba(240, 180, 106, .7);
}

.wpcf7-spinner {
	margin: 0 0 0 12px;
}

.wpcf7 form .wpcf7-response-output {
	margin: 22px 0 0;
	padding: 14px 18px;
	border: 1px solid var(--line-dark);
	border-left: 4px solid var(--amber-deep);
	border-radius: 12px;
	background: var(--paper);
	font-size: 15px;
	color: var(--ink);
}

.wpcf7 form.sent .wpcf7-response-output {
	border-left-color: #1a7f37;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
	border-left-color: var(--fearless);
}

.wpcf7-not-valid-tip {
	margin-top: 7px;
	font-size: 13.5px;
	color: #b32d2e;
}

/* ==========================================================
   Footer subscribe feedback
   ========================================================== */
.footer-sub .form-note[data-state="ok"] {
	color: #9fe0a8;
}

.footer-sub .form-note[data-state="error"] {
	color: var(--rose);
}

.footer-sub button[disabled] {
	opacity: .65;
	cursor: wait;
}

.share-rail a.is-copied {
	background: var(--amber);
	color: var(--night);
	border-color: var(--amber);
}

/* ==========================================================
   The unsubscribe confirmation page
   ========================================================== */
.ff-notice-card {
	max-width: 640px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid var(--line-dark);
	border-radius: 28px;
	padding: clamp(28px, 5vw, 48px);
	box-shadow: var(--shadow-soft);
	text-align: center;
}

.ff-notice-card h2 {
	font-family: var(--serif);
	font-size: clamp(26px, 3vw, 36px);
	font-weight: 500;
	margin: 0 0 12px;
	color: var(--ink);
}

.ff-notice-card p {
	margin: 0 0 22px;
	color: var(--ink-soft);
}

/* ==========================================================
   Small screens
   ========================================================== */
@media (max-width: 720px) {
	.alignleft,
	.alignright,
	.prose .wp-caption.alignleft,
	.prose .wp-caption.alignright,
	.prose figure.wp-block-image.alignleft,
	.prose figure.wp-block-image.alignright {
		float: none;
		margin: 2em auto;
		max-width: 100%;
	}

	.ff-page-grid {
		gap: 34px;
	}

	.comment-list .children {
		padding-left: 14px;
	}

	.ff-comment__inner {
		padding: 20px 18px;
	}
}

/* ==========================================================
   Spam notice shown on forms
   ========================================================== */
.ff-antispam-error {
	margin: 0 0 20px;
	padding: 14px 18px;
	border-radius: 14px;
	border: 1px solid rgba(233, 119, 106, .45);
	border-left: 4px solid var(--fearless);
	background: rgba(233, 119, 106, .09);
	color: #8d2b20;
	font-size: 14.5px;
	line-height: 1.6;
}

.footer-sub .ff-antispam-error,
.widget--dark .ff-antispam-error {
	background: rgba(233, 119, 106, .14);
	color: #ffd9d3;
}

form button[type="submit"][disabled],
form input[type="submit"][disabled] {
	opacity: .5;
	cursor: not-allowed;
	box-shadow: none;
	transform: none;
}

/* ff-poem-mobile — verse boxes ease off slightly on small screens. */
@media (max-width: 700px) {
	.prose pre,
	.prose .wp-block-code {
		padding: 22px 20px;
		font-size: 16.5px;
	}
}