/* ============================================================
   EARTHNESS COMPONENTS LAYER
   ============================================================
   Page-specific section + UI styles, organised by section in
   the order they appear on the homepage. Loaded after base.css
   so it can extend (but never contradict) the base layer.

   Section order:
     1. Hero (.hero, .hero__*)
     2. Story (.story, .story__*)
     3. Section heads (.section-head, shared)
     4. Journal cards (.journal, .journal-card)
     5. Experiences cards (.experiences, .exp-card)
     6. Friends cards (.friends, .friend)
     7. Grow / plant cards (.grow, .plant)
     8. Stay band (.stay, .stay__*)
     9. Empty-state utility (.rail-empty)
     10. Reveal animation keyframes (fadeUp, scrollPulse, heroZoom)

   Lifted verbatim from index-final.html where the rule is
   identical; only structural changes are noted in comments.
   ============================================================ */


/* ============================================================
   1. HERO
   ============================================================ */
.hero {
	position: relative;
	height: 100vh;
	min-height: 600px;
	width: 100%;
	overflow: hidden;
}

.hero__image {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center 60%;
	background-color: var(--paper-warm); /* fallback if no image set yet */
	transform: scale(1.05);
	animation: heroZoom 12s ease-out forwards;
}

.hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.35) 0%,
		rgba(0, 0, 0, 0.05) 35%,
		rgba(0, 0, 0, 0.05) 60%,
		rgba(0, 0, 0, 0.55) 100%
	);
}

.hero__content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding-bottom: var(--s-9);
}

.hero__inner {
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 0 var(--gutter);
	width: 100%;
	color: var(--paper);
}

.hero__eyebrow {
	font-family: var(--sans);
	font-size: var(--fs-eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: var(--s-5);
	opacity: 0;
	animation: fadeUp 1s ease 0.4s forwards;
}

.hero__title {
	font-size: var(--fs-display);
	font-weight: 300;
	font-style: normal;
	line-height: 0.95;
	letter-spacing: -0.025em;
	max-width: 14ch;
	font-variation-settings: "opsz" 144;
	opacity: 0;
	animation: fadeUp 1.1s ease 0.6s forwards;
}

.hero__title em {
	font-style: italic;
	font-weight: 300;
}

.hero__meta {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	margin-top: var(--s-7);
	font-family: var(--sans);
	font-size: 0.8125rem;
	letter-spacing: 0.05em;
	color: rgba(255, 255, 255, 0.85);
	opacity: 0;
	animation: fadeUp 1s ease 0.9s forwards;
}

.hero__meta-line {
	width: 36px;
	height: 1px;
	background: rgba(255, 255, 255, 0.6);
}

.hero__scroll {
	position: absolute;
	bottom: var(--s-5);
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, 0.7);
	font-family: var(--sans);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	opacity: 0;
	animation: fadeUp 1s ease 1.4s forwards;
}

.hero__scroll::after {
	content: '';
	display: block;
	width: 1px;
	height: 24px;
	background: rgba(255, 255, 255, 0.6);
	margin: var(--s-3) auto 0;
	animation: scrollPulse 2.5s ease infinite;
}

.hero__coords {
	position: absolute;
	top: var(--s-9);
	right: var(--gutter);
	text-align: right;
	color: rgba(255, 255, 255, 0.85);
	font-family: var(--sans);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	line-height: 1.7;
	opacity: 0;
	animation: fadeUp 1s ease 1.1s forwards;
	z-index: 2;
}

.hero__coords-line {
	display: block;
	width: 28px;
	height: 1px;
	background: rgba(255, 255, 255, 0.6);
	margin: var(--s-3) 0 var(--s-3) auto;
}

.hero__coords-label {
	display: block;
	color: rgba(255, 255, 255, 0.55);
	margin-bottom: var(--s-1);
}

.hero__coords-value {
	display: block;
	font-family: var(--serif);
	font-size: 0.875rem;
	font-style: italic;
	text-transform: none;
	letter-spacing: 0;
	color: rgba(255, 255, 255, 0.95);
	font-variation-settings: "opsz" 36;
}

@media (min-width: 768px) {
	.hero__coords {
		top: var(--s-11);
	}
}


/* ============================================================
   2. STORY
   ============================================================ */
.story {
	padding: var(--s-11) 0 var(--s-10);
	background: var(--paper);
}

.story__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-8);
	align-items: start;
}

@media (min-width: 900px) {
	.story__grid {
		grid-template-columns: 5fr 7fr;
		gap: var(--s-9);
	}
}

.story__label {
	display: flex;
	align-items: center;
	gap: var(--s-4);
}

.story__label::before {
	content: '';
	width: 32px;
	height: 1px;
	background: var(--ink);
}

.story__heading {
	font-size: var(--fs-h1);
	font-weight: 300;
	margin-top: var(--s-6);
	font-variation-settings: "opsz" 144;
	max-width: 11ch;
}

.story__heading em {
	font-style: italic;
	font-weight: 300;
}

.story__body {
	max-width: var(--measure);
}

.story__lead {
	font-family: var(--serif);
	font-size: var(--fs-lead);
	font-weight: 400;
	line-height: 1.55;
	color: var(--ink);
	margin-bottom: var(--s-6);
	font-variation-settings: "opsz" 36;
}

.story__prose p {
	font-size: var(--fs-body);
	line-height: 1.75;
	color: var(--ink-soft);
	margin-bottom: var(--s-5);
}

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

.story__signature {
	margin-top: var(--s-7);
}

.story__signature-image {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	margin-bottom: var(--s-5);
	background: var(--paper-warm);
}

.story__signature-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.story__signature-text {
	font-family: var(--serif);
	font-style: italic;
	font-size: 1.0625rem;
	color: var(--ink);
	padding-top: var(--s-4);
	border-top: 1px solid var(--rule);
}

.story__signature-text small {
	display: block;
	font-family: var(--sans);
	font-style: normal;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--ink-mute);
	margin-top: var(--s-2);
}


/* ============================================================
   3. SECTION HEAD (shared by all rails)
   ============================================================ */
.section-head {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: var(--s-6);
	padding-bottom: var(--s-7);
	border-bottom: 1px solid var(--rule);
	margin-bottom: var(--s-8);
}

.section-head__title {
	font-size: var(--fs-h2);
	font-weight: 300;
	font-variation-settings: "opsz" 144;
	letter-spacing: -0.02em;
}

.section-head__title em { font-style: italic; }

.section-head__link {
	font-family: var(--sans);
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--ink);
	border-bottom: 1px solid var(--ink);
	padding-bottom: 2px;
	white-space: nowrap;
	transition: opacity 0.2s ease;
}

.section-head__link:hover { opacity: 0.6; }


/* ============================================================
   4. JOURNAL CARDS
   ============================================================ */
.journal {
	padding: var(--s-9) 0;
	background: var(--paper);
}

.journal__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-8);
}

@media (min-width: 700px) {
	.journal__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--s-7) var(--s-6);
	}
}

@media (min-width: 1100px) {
	.journal__grid {
		grid-template-columns: 1.4fr 1fr 1fr;
	}
	.journal__grid .journal-card:first-child {
		grid-row: span 2;
	}
}

.journal-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
}

.journal-card__image {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	margin-bottom: var(--s-5);
	background: var(--paper-warm);
}

.journal-card:first-child .journal-card__image {
	aspect-ratio: 4 / 5;
}

.journal-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.journal-card:hover .journal-card__image img { transform: scale(1.04); }

.journal-card__meta {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	margin-bottom: var(--s-3);
}

.journal-card__cat {
	font-family: var(--sans);
	font-size: var(--fs-eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--accent);
	font-weight: 500;
}

.journal-card__date {
	font-family: var(--sans);
	font-size: 0.75rem;
	color: var(--ink-mute);
}

.journal-card__date::before {
	content: '·';
	margin-right: var(--s-3);
	color: var(--ink-faint);
}

.journal-card__title {
	font-family: var(--serif);
	font-weight: 400;
	font-size: var(--fs-h4);
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin-bottom: var(--s-3);
	font-variation-settings: "opsz" 36;
}

.journal-card:first-child .journal-card__title {
	font-size: var(--fs-h2);
	font-weight: 300;
	font-variation-settings: "opsz" 144;
}

.journal-card__dek {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--ink-soft);
}

.journal-card:hover .journal-card__title {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}


/* ============================================================
   5. EXPERIENCES (Stories from the Land rail)
   ============================================================ */
.experiences {
	padding: var(--s-9) 0;
	background: var(--paper-warm);
}

.experiences__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-7);
}

@media (min-width: 600px) {
	.experiences__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1000px) {
	.experiences__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.exp-card {
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}

.exp-card__image {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	margin-bottom: var(--s-4);
	background: var(--paper);
}

.exp-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.exp-card:hover .exp-card__image img { transform: scale(1.03); }

.exp-card__meta {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	margin-bottom: var(--s-3);
}

.exp-card__date {
	font-family: var(--sans);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--ink-mute);
}

.exp-card__tag {
	font-family: var(--sans);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--accent);
	font-weight: 500;
}

.exp-card__tag::before {
	content: '·';
	margin-right: var(--s-3);
	color: var(--ink-faint);
}

.exp-card__title {
	font-family: var(--serif);
	font-weight: 400;
	font-size: 1.375rem;
	line-height: 1.2;
	margin-bottom: var(--s-3);
	font-variation-settings: "opsz" 36;
}

.exp-card__text {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--ink-soft);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-clamp: 2;
	overflow: hidden;
}

/* "Read story →" cue mirrors .story-card__more on the archive.
   Pinned to the bottom of the card via margin-top: auto so the
   links align across rows in the 3-up grid (cards stretch to
   tallest sibling's height by default). On mobile the cards
   collapse to one column and become auto-height, so the @media
   block below replaces the auto with a fixed top margin to keep
   the link reliably visible. */
.exp-card__more {
	font-family: var(--sans);
	font-size: var(--fs-eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-weight: 500;
	color: var(--accent);
	margin-top: auto;
	padding-top: var(--s-3);
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	transition: gap 0.2s ease;
}
.exp-card:hover .exp-card__more { gap: var(--s-3); }

@media (max-width: 768px) {
	.exp-card__more {
		margin-top: var(--s-4);
	}
}


/* ============================================================
   6. FRIENDS (homepage rail — square cards)
   ============================================================ */
.friends {
	padding: var(--s-9) 0;
	background: var(--paper);
}

.friends__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--s-6) var(--s-5);
}

@media (min-width: 700px) {
	.friends__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.friend {
	text-align: left;
	color: inherit;
	text-decoration: none;
}

.friend__image {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	margin-bottom: var(--s-4);
	border-radius: 2px;
	filter: grayscale(0.1);
	transition: filter 0.6s ease;
	background: var(--paper-warm);
}

.friend:hover .friend__image { filter: grayscale(0); }

.friend__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.friend__name {
	font-family: var(--serif);
	font-weight: 500;
	font-size: 1.0625rem;
	line-height: 1.2;
	margin-bottom: var(--s-1);
	letter-spacing: -0.005em;
}

.friend__name em { font-style: italic; font-weight: 400; }

.friend__role {
	font-family: var(--sans);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ink-mute);
}


/* ============================================================
   7. GROW / PLANT CARDS
   ============================================================ */
.grow {
	padding: var(--s-9) 0;
	background: var(--paper-warm);
}

.grow__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-7);
}

@media (min-width: 600px) {
	.grow__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1000px) {
	.grow__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.plant {
	display: flex;
	flex-direction: column;
}

.plant__image {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	margin-bottom: var(--s-4);
	background: var(--paper);
}

.plant__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.plant:hover .plant__image img { transform: scale(1.03); }

.plant__name {
	font-family: var(--serif);
	font-weight: 400;
	font-size: 1.125rem;
	line-height: 1.3;
	margin-bottom: var(--s-3);
	font-variation-settings: "opsz" 36;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
}

.plant__alt {
	font-family: var(--serif);
	font-weight: 400;
	font-style: normal;
	color: var(--ink);
}

.plant__divider {
	display: inline-block;
	width: 1px;
	height: 0.95em;
	background: var(--ink-faint);
	margin: 0 0.1rem;
	vertical-align: middle;
}

.plant__sci {
	font-style: italic;
	font-weight: 400;
	color: var(--ink-soft);
	font-size: 0.9375rem;
	font-variation-settings: "opsz" 36;
}

.plant__text {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--ink-soft);
}


/* ============================================================
   8. STAY BAND (dark inversion)
   ============================================================ */
.stay {
	padding: var(--s-10) 0;
	background: var(--ink);
	color: var(--paper);
}

.stay__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-7);
	align-items: center;
}

@media (min-width: 900px) {
	.stay__inner {
		grid-template-columns: 1fr 1fr;
		gap: var(--s-9);
	}
}

.stay__image {
	/* Deliberate spec deviation from index-final.html (mockup specs 4 / 3).
	   16 / 10 chosen to give the hospitality photo a more cinematic feel
	   on the homepage Stay band. Scope: homepage only — the Stay archive
	   page (.post-type-archive-stay .stay) is unaffected, see line ~2907.
	   v0.1.38 — Rahul. */
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.stay__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.stay__eyebrow {
	font-family: var(--sans);
	font-size: var(--fs-eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: rgba(255, 255, 255, 0.55);
	margin-bottom: var(--s-5);
}

.stay__title {
	font-size: var(--fs-h1);
	font-weight: 300;
	margin-bottom: var(--s-6);
	font-variation-settings: "opsz" 144;
	max-width: 12ch;
}

.stay__title em { font-style: italic; }

.stay__text {
	font-size: 1rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.75);
	margin-bottom: var(--s-7);
	max-width: 42ch;
}

.stay__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--s-4);
	font-family: var(--sans);
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--paper);
	padding-bottom: var(--s-2);
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
	transition: border-color 0.3s ease, gap 0.3s ease;
}

.stay__cta:hover {
	border-color: var(--paper);
	gap: var(--s-5);
}


/* ============================================================
   9. EMPTY-STATE PLACEHOLDER (rails with no posts yet)
   ============================================================
   Quiet placeholder shown when a homepage rail's WP_Query
   returns 0 posts — true on a fresh activation, before any
   content has been imported or written. Renders as a single
   centred italic line in the rail's color context.
   ============================================================ */
.rail-empty {
	font-family: var(--serif);
	font-style: italic;
	font-size: 1.0625rem;
	color: var(--ink-mute);
	text-align: center;
	padding: var(--s-7) 0;
	max-width: var(--measure);
	margin: 0 auto;
}


/* ============================================================
   10. ANIMATION KEYFRAMES used by hero entrance + scroll cue
   ============================================================ */
@keyframes heroZoom {
	to { transform: scale(1); }
}

@keyframes fadeUp {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes scrollPulse {
	0%, 100% { transform: scaleY(1); opacity: 0.4; transform-origin: top; }
	50%      { transform: scaleY(1); opacity: 1; }
}

/* Reduced-motion: disable hero entrance animations entirely. */
@media (prefers-reduced-motion: reduce) {
	.hero__image,
	.hero__eyebrow,
	.hero__title,
	.hero__meta,
	.hero__coords,
	.hero__scroll {
		animation: none;
		opacity: 1;
		transform: none;
	}
}


/* ============================================================
   ============================================================
   COMMIT 4C — PHILOSOPHY, CONTACT, STORIES ARCHIVE, JOURNAL ARCHIVE
   ============================================================
   Page-header pattern (shared) + Philosophy essay/founder/pull
   quote/break/closing + Contact form/details/channels/map +
   Stories count-strip/featured/grid/closing + Journal search
   panel/cat tabs/featured (scoped)/post-card/pagination.
   ============================================================ */


/* ============================================================
   11. PAGE HEADER (shared — Philosophy, Contact, Stories, Journal)
   ============================================================
   Each page's header is a max-width container with a 1fr layout
   on mobile that splits into 8fr/4fr (Philosophy/Contact) or
   7fr/5fr (Journal) on wide screens. The title-row variant
   (Journal) puts the H1 alongside the tools row.
   ============================================================ */
.page-header {
	/* Top padding compensates for the theme's absolute-positioned
	   .site-header (v0.1.37). Mockups use sticky nav, so their
	   visible top gap is (nav content) + --s-10. We replicate
	   that by adding --s-6 (~2rem ≈ nav content height) to the
	   absolute-flow's --s-10 start. Homepage uses .hero__title, not
	   .page-header, so it is unaffected. Journal archive overrides
	   this rule below. */
	padding: calc(var(--s-10) + var(--s-6)) 0 var(--s-9);
}

.page-header__inner {
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 0 var(--gutter);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-8);
	align-items: end;
}

@media (min-width: 1100px) {
	.page-header__inner {
		grid-template-columns: 8fr 4fr;
		gap: var(--s-9);
	}
}

.page-header__label {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	margin-bottom: var(--s-5);
}

.page-header__label::before {
	content: '';
	width: 32px;
	height: 1px;
	background: var(--ink);
}

.page-header__title {
	font-family: var(--serif);
	/* Interior pages use a smaller display scale than the homepage
	   .hero__title (which consumes --fs-display directly at 7.5rem).
	   All mockups for philosophy, friends, stories, what-we-grow,
	   contact, single-stay use 4 / 5 / 5.75 rem. Journal archive
	   overrides these below with its own scale. */
	font-size: 4rem;
	font-weight: 300;
	font-variation-settings: "opsz" 144;
	letter-spacing: -0.025em;
	line-height: 0.98;
	max-width: 16ch;
}

@media (min-width: 768px) {
	.page-header__title { font-size: 5rem; }
}

@media (min-width: 1200px) {
	.page-header__title { font-size: 5.75rem; }
}

.page-header__title em { font-style: italic; }

.page-header__intent {
	font-family: var(--serif);
	font-size: 1.375rem;
	font-weight: 300;
	line-height: 1.45;
	color: var(--ink-soft);
	font-style: italic;
	font-variation-settings: "opsz" 36;
	max-width: 28rem;
}

/* Journal variant: header has a bottom border and a title-row
   (so the H1 sits next to the search/RSS buttons) with a
   narrower grid split. */
.is-archive-journal .page-header {
	padding: calc(var(--s-10) + var(--s-6)) 0 var(--s-8);
	border-bottom: 1px solid var(--rule);
}

@media (min-width: 1100px) {
	.is-archive-journal .page-header__inner {
		grid-template-columns: 7fr 5fr;
		gap: var(--s-9);
	}
}

.page-header__title-row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--s-5);
}

@media (min-width: 600px) {
	.page-header__title-row {
		flex-direction: row;
		align-items: center;
	}
}

.is-archive-journal .page-header__title {
	font-size: 3rem;
	white-space: nowrap;
	max-width: none;
	line-height: 0.95;
}

@media (min-width: 600px) {
	.is-archive-journal .page-header__title { font-size: 4rem; }
}

@media (min-width: 1100px) {
	.is-archive-journal .page-header__title { font-size: 4.75rem; }
}

@media (min-width: 1400px) {
	.is-archive-journal .page-header__title { font-size: 5.75rem; }
}

.is-archive-journal .page-header__intent {
	max-width: 36rem;
}


/* ============================================================
   12. PHILOSOPHY — hero image, essay body, founder portraits,
       pull quotes, image break, closing
   ============================================================ */
.hero-img {
	margin-bottom: var(--s-10);
}
.hero-img__inner {
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 0 var(--gutter);
}
.hero-img__frame {
	aspect-ratio: 21 / 9;
	overflow: hidden;
	background: var(--paper-warm);
}
.hero-img__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hero-img__caption {
	font-family: var(--sans);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ink-mute);
	margin-top: var(--s-3);
	display: flex;
	align-items: center;
	gap: var(--s-3);
}
.hero-img__caption::before {
	content: '';
	width: 16px;
	height: 1px;
	background: var(--ink-mute);
}

/* ----- Essay body ----- */
.essay {
	padding-bottom: 0;
}
/* The final essay block immediately before the closing band
   gets the big bottom padding so there's breathing room. */
.essay:has(+ .closing) {
	padding-bottom: var(--s-10);
}

.essay__inner {
	max-width: var(--measure);
	margin: 0 auto;
	padding: 0 var(--gutter);
	font-family: var(--serif);
	font-size: var(--fs-prose);
	line-height: 1.75;
	color: var(--ink);
	font-variation-settings: "opsz" 16;
}

.essay__inner p {
	margin-bottom: var(--s-5);
}
.essay__inner p:last-child { margin-bottom: 0; }

/* Drop cap on any paragraph with class .has-dropcap — editors
   add the class in the wysiwyg via the "Additional CSS class"
   field. Falls through safely if not present. */
.essay__inner > p.has-dropcap::first-letter {
	font-family: var(--serif);
	font-size: 4.5em;
	font-weight: 400;
	font-variation-settings: "opsz" 144;
	float: left;
	line-height: 0.85;
	padding-right: 0.08em;
	padding-top: 0.08em;
	margin-bottom: -0.1em;
	color: var(--ink);
}

/* Section eyebrow inside the essay — quiet visual landmark. */
.essay__section {
	margin-top: var(--s-9);
	margin-bottom: var(--s-6);
	display: flex;
	align-items: center;
	gap: var(--s-4);
}
.essay__section::before {
	content: '';
	flex: 0 0 32px;
	height: 1px;
	background: var(--ink-mute);
}
.essay__section span {
	font-family: var(--sans);
	font-size: var(--fs-eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--ink-mute);
	font-weight: 500;
}

/* Founder eyebrow — italic Fraunces, named intro before bio text. */
.essay__founder {
	margin-top: var(--s-8);
	margin-bottom: var(--s-4);
	font-family: var(--serif);
	font-style: italic;
	font-size: 1.375rem;
	font-weight: 400;
	font-variation-settings: "opsz" 36;
	color: var(--ink);
}

/* Founder portrait — its own section, wider than essay measure
   so the image can breathe beyond the 38rem prose column. */
.essay-portrait {
	margin: var(--s-7) 0 0;
}
.essay-portrait__inner {
	max-width: 56rem;
	margin: 0 auto;
	padding: 0 var(--gutter);
}
.essay-portrait__frame {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--paper-warm);
}
.essay-portrait__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* When a portrait section is followed directly by an essay
   block (founder bio), pull the next eyebrow up close. */
.essay-portrait + .essay .essay__founder {
	margin-top: var(--s-5);
}

/* ----- Pull quote — breaks the measure on desktop ----- */
.essay__pullquote {
	margin: var(--s-9) calc(-1 * var(--s-7));
	padding: var(--s-6) 0;
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	font-family: var(--serif);
	font-style: italic;
	font-size: 1.875rem;
	line-height: 1.25;
	font-weight: 300;
	font-variation-settings: "opsz" 144;
	letter-spacing: -0.015em;
	color: var(--ink);
	text-align: center;
}
.essay__pullquote cite {
	display: block;
	margin-top: var(--s-4);
	font-style: normal;
	font-family: var(--sans);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--ink-mute);
	font-weight: 500;
}

@media (max-width: 700px) {
	.essay__pullquote {
		margin: var(--s-8) 0;
		font-size: 1.5rem;
	}
}

/* ----- Full-width image breaks within the essay ----- */
.essay-break {
	margin: var(--s-10) 0;
}
.essay-break__inner {
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 0 var(--gutter);
}
.essay-break__frame {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--paper-warm);
}
.essay-break__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.essay-break__caption {
	font-family: var(--sans);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ink-mute);
	margin-top: var(--s-3);
	display: flex;
	align-items: center;
	gap: var(--s-3);
}
.essay-break__caption::before {
	content: '';
	width: 16px;
	height: 1px;
	background: var(--ink-mute);
}


/* ============================================================
   13. CLOSING — shared base + Philosophy newsletter/follow-up +
       Stories quote/CTA variants
   ============================================================
   Both Philosophy and Stories use the .closing class for a band
   that comes at the very end of the page. Philosophy fills it
   with newsletter + follow-up links (2-column), Stories fills it
   with a centred quote + CTA. Shared base covers .closing and
   .closing__inner; per-page overrides below.
   ============================================================ */
.closing {
	background: var(--paper-warm);
	padding: var(--s-10) 0;
	border-top: 1px solid var(--rule);
}

.closing__inner {
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 0 var(--gutter);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-9);
}

/* Philosophy variant: 2-column on desktop (newsletter left, links right) */
@media (min-width: 900px) {
	.page-philosophy-php .closing__inner,
	.closing__inner:has(.closing__followups) {
		grid-template-columns: 7fr 5fr;
		gap: var(--s-10);
		align-items: start;
	}
}

.closing__label {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	margin-bottom: var(--s-4);
}
.closing__label::before {
	content: '';
	width: 32px;
	height: 1px;
	background: var(--ink);
}

.closing__heading {
	font-family: var(--serif);
	font-size: 2.25rem;
	font-weight: 300;
	font-variation-settings: "opsz" 144;
	letter-spacing: -0.02em;
	line-height: 1.05;
	margin-bottom: var(--s-5);
	max-width: 16ch;
}
.closing__heading em { font-style: italic; }

.closing__intent {
	font-family: var(--serif);
	font-style: italic;
	font-size: 1.0625rem;
	line-height: 1.55;
	color: var(--ink-soft);
	margin-bottom: var(--s-6);
	max-width: 32rem;
}

/* Newsletter form used inside closing band (Philosophy variant).
   Scoped to form.newsletter (not .closing .newsletter) so the
   <div class="newsletter"> wrapper added in 0.1.25 around the
   MailPoet shortcode does NOT inherit the border-bottom — that
   was drawing a duplicate underline below the bridge's own
   underline (the 0.1.25/26 double-line bug on Philosophy).
   The MailPoet bridge in base.css now handles all styling for
   the shortcode-rendered form. These rules remain only as a
   reference / fallback if the form is ever rendered as a
   native <form class="newsletter"> again. */
.closing form.newsletter {
	display: flex;
	align-items: stretch;
	gap: 0;
	max-width: 28rem;
	border-bottom: 1px solid var(--ink);
	padding-bottom: var(--s-2);
}
.closing form.newsletter input {
	flex: 1;
	border: 0;
	background: transparent;
	font-family: var(--serif);
	font-size: 1.0625rem;
	color: var(--ink);
	padding: var(--s-3) 0;
	outline: none;
}
.closing form.newsletter input::placeholder {
	color: var(--ink-mute);
	font-style: italic;
}
.closing form.newsletter button {
	background: none;
	border: 0;
	font-family: var(--sans);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-weight: 500;
	color: var(--ink);
	padding: var(--s-3) 0 var(--s-3) var(--s-4);
	cursor: pointer;
	transition: color 0.2s ease;
}
.closing form.newsletter button:hover { color: var(--accent); }

/* Philosophy follow-up list */
.closing__followups {
	display: flex;
	flex-direction: column;
	gap: var(--s-5);
}
.closing__follow-eyebrow {
	font-family: var(--sans);
	font-size: var(--fs-eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--ink-mute);
	font-weight: 500;
	margin-bottom: var(--s-3);
}
.closing__followups ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.closing__followups li {
	border-top: 1px solid var(--rule);
}
.closing__followups li:last-child { border-bottom: 1px solid var(--rule); }
.closing__followups a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--s-4) 0;
	font-family: var(--serif);
	font-size: 1.125rem;
	color: var(--ink);
	transition: color 0.2s ease;
	font-variation-settings: "opsz" 36;
}
.closing__followups a:hover { color: var(--accent); }
.closing__followups a span:last-child {
	font-family: var(--sans);
	font-size: 0.875rem;
	color: var(--ink-mute);
	transition: transform 0.2s ease, color 0.2s ease;
}
.closing__followups a:hover span:last-child {
	color: var(--accent);
	transform: translateX(4px);
}

/* Stories variant: centred quote + CTA only */
.is-archive-stories .closing {
	padding: var(--s-9) 0;
	text-align: center;
}
.is-archive-stories .closing__inner {
	grid-template-columns: 1fr;
	display: block;
}
.closing__line {
	font-family: var(--serif);
	font-style: italic;
	font-size: 1.5rem;
	font-weight: 300;
	font-variation-settings: "opsz" 144;
	line-height: 1.35;
	color: var(--ink);
	max-width: 38rem;
	margin: 0 auto var(--s-6);
}
.closing__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--s-3);
	font-family: var(--sans);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-weight: 500;
	color: var(--ink);
	padding-bottom: 4px;
	border-bottom: 1px solid var(--ink);
	transition: color 0.2s ease, border-color 0.2s ease;
}
.closing__cta:hover { color: var(--accent); border-bottom-color: var(--accent); }


/* ============================================================
   14. CONTACT — hero, two-column form/details, map
   ============================================================ */

/* Contact hero (bordered paper-warm band with a framed image) */
.page-template-page-contact .hero,
.hero.hero--contact {
	width: 100%;
	background: var(--paper-warm);
	overflow: hidden;
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	height: auto;
	min-height: 0;
	animation: none;
}
.page-template-page-contact .hero__frame {
	width: 100%;
	aspect-ratio: 21 / 9;
	overflow: hidden;
}
.page-template-page-contact .hero__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 60%;
	display: block;
}
@media (max-width: 700px) {
	.page-template-page-contact .hero__frame { aspect-ratio: 3 / 2; }
}

.contact {
	padding: var(--s-9) 0 var(--s-10);
}
.contact__inner {
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 0 var(--gutter);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-9);
}
@media (min-width: 900px) {
	.contact__inner {
		grid-template-columns: 7fr 5fr;
		gap: var(--s-10);
	}
}

/* ----- Form column (left) ----- */
.contact__form-block {
	max-width: 36rem;
}
.contact__form-eyebrow {
	font-family: var(--sans);
	font-size: var(--fs-eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--ink-mute);
	font-weight: 500;
	margin-bottom: var(--s-3);
	display: flex;
	align-items: center;
	gap: var(--s-4);
}
.contact__form-eyebrow::before {
	content: '';
	width: 24px;
	height: 1px;
	background: var(--ink);
}
.contact__form-title {
	font-family: var(--serif);
	font-size: 2rem;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.015em;
	font-variation-settings: "opsz" 96;
	margin-bottom: var(--s-4);
}
.contact__form-title em { font-style: italic; }
.contact__form-lead {
	font-family: var(--serif);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--ink-soft);
	margin-bottom: var(--s-7);
	font-variation-settings: "opsz" 24;
}
.contact__form-placeholder {
	font-family: var(--serif);
	font-size: 1rem;
	color: var(--ink-mute);
	padding: var(--s-5) 0;
	border-top: 1px dashed var(--rule);
	border-bottom: 1px dashed var(--rule);
}

/* Fluent Forms overrides — match the Final's .contact-form styling */
.contact__form-block .fluentform .ff-el-group { margin-bottom: var(--s-6); }
.contact__form-block .fluentform .ff-el-input--label label {
	font-family: var(--sans);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--ink-mute);
	font-weight: 500;
}
.contact__form-block .fluentform input[type="text"],
.contact__form-block .fluentform input[type="email"],
.contact__form-block .fluentform input[type="tel"],
.contact__form-block .fluentform textarea {
	font-family: var(--serif);
	font-size: 1.125rem;
	line-height: 1.5;
	color: var(--ink);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--ink-faint);
	border-radius: 0;
	padding: var(--s-3) 0;
	font-variation-settings: "opsz" 24;
	width: 100%;
	outline: none;
	transition: border-color 0.2s ease;
	box-shadow: none;
}
.contact__form-block .fluentform input:focus,
.contact__form-block .fluentform textarea:focus {
	border-bottom-color: var(--accent);
	box-shadow: none;
}
.contact__form-block .fluentform button[type="submit"],
.contact__form-block .fluentform .ff-btn-submit {
	display: inline-flex;
	align-items: center;
	gap: var(--s-3);
	font-family: var(--sans);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-weight: 500;
	color: var(--paper);
	background: var(--accent);
	border: 1px solid var(--accent);
	border-radius: 0;
	padding: var(--s-4) var(--s-6);
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease;
}
.contact__form-block .fluentform button[type="submit"]:hover,
.contact__form-block .fluentform .ff-btn-submit:hover {
	background: var(--ink);
	border-color: var(--ink);
}

/* ----- Details column (right) ----- */
.contact__details {
	display: flex;
	flex-direction: column;
	gap: var(--s-7);
}
.contact-block {
	padding-top: var(--s-6);
	border-top: 1px solid var(--rule);
}
.contact-block:first-child {
	padding-top: 0;
	border-top: 0;
}
.contact-block__label {
	font-family: var(--sans);
	font-size: var(--fs-eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--accent);
	font-weight: 500;
	margin-bottom: var(--s-4);
	display: flex;
	align-items: center;
	gap: var(--s-3);
}
.contact-block__label::before {
	content: '';
	width: 16px;
	height: 1px;
	background: var(--accent);
}
.contact-block__address {
	font-family: var(--serif);
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--ink);
	font-variation-settings: "opsz" 24;
	margin: 0;
}
.contact-block__address strong {
	font-weight: 500;
}

.contact-channels {
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
}
.contact-channel {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-4);
	font-family: var(--serif);
	font-size: 1.0625rem;
	line-height: 1.4;
	font-variation-settings: "opsz" 24;
	padding-bottom: var(--s-4);
	border-bottom: 1px solid var(--rule);
}
.contact-channel:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}
.contact-channel__label {
	color: var(--ink-mute);
	font-style: italic;
	font-size: 0.9375rem;
	flex-shrink: 0;
}
.contact-channel__value {
	color: var(--ink);
	text-align: right;
	transition: color 0.2s ease;
}
.contact-channel__value:hover { color: var(--accent); }

.contact-block__note {
	font-family: var(--serif);
	font-style: italic;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--ink-soft);
	font-variation-settings: "opsz" 24;
}

/* ----- Map ----- */
.map {
	background: var(--paper-warm);
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
}
.map__inner {
	max-width: var(--max-w);
	margin: 0 auto;
	padding: var(--s-9) var(--gutter);
}
.map__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--s-4);
	margin-bottom: var(--s-6);
}
.map__title {
	font-family: var(--serif);
	font-size: 2rem;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.015em;
	font-variation-settings: "opsz" 96;
}
.map__title em { font-style: italic; }
.map__link {
	display: inline-flex;
	align-items: center;
	gap: var(--s-3);
	font-family: var(--sans);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-weight: 500;
	color: var(--ink);
	padding-bottom: 4px;
	border-bottom: 1px solid var(--ink);
	transition: color 0.2s ease, border-color 0.2s ease;
}
.map__link:hover {
	color: var(--accent);
	border-bottom-color: var(--accent);
}
.map__frame {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 1px solid var(--rule);
	background: var(--paper);
	overflow: hidden;
}
.map__frame iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	/* Subtle grayscale so the map recedes into the Earthness
	   palette instead of fighting it with Google's bright colors. */
	filter: grayscale(0.2) contrast(0.96);
}
@media (max-width: 700px) {
	.map__frame { aspect-ratio: 4 / 5; }
}


/* ============================================================
   15. STORIES ARCHIVE — count strip, featured (scoped), grid
   ============================================================ */
.count-strip {
	background: var(--paper);
	padding: var(--s-5) 0;
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
}
.count-strip__inner {
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 0 var(--gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--s-4);
}
.count-strip__count {
	font-family: var(--sans);
	font-size: var(--fs-eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--ink-mute);
	font-weight: 500;
}
.count-strip__count strong {
	color: var(--ink);
	font-weight: 600;
}
.count-strip__note {
	font-family: var(--serif);
	font-style: italic;
	font-size: 0.9375rem;
	color: var(--ink-soft);
	font-variation-settings: "opsz" 36;
}

/* Featured card (Stories variant) — image left + body right,
   5/6 portrait on mobile, 4/3 landscape on desktop. Scoped via
   body class so the Journal .featured variant doesn't collide. */
.is-archive-stories .featured {
	padding: var(--s-9) 0 var(--s-10);
}
.is-archive-stories .featured__inner {
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 0 var(--gutter);
}
.is-archive-stories .featured__card {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-7);
	align-items: stretch;
	color: inherit;
	text-decoration: none;
}
@media (min-width: 900px) {
	.is-archive-stories .featured__card {
		grid-template-columns: 7fr 5fr;
		gap: var(--s-8);
		align-items: center;
	}
}
.is-archive-stories .featured__image {
	position: relative;
	aspect-ratio: 5 / 6;
	overflow: hidden;
	background: var(--paper-warm);
	border: 1px solid var(--rule);
}
@media (min-width: 900px) {
	.is-archive-stories .featured__image {
		aspect-ratio: 4 / 3;
	}
}
.is-archive-stories .featured__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.is-archive-stories .featured__card:hover .featured__image img {
	transform: scale(1.025);
}
.is-archive-stories .featured__badge {
	position: absolute;
	top: var(--s-5);
	left: var(--s-5);
	background: var(--paper);
	color: var(--accent);
	font-family: var(--sans);
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	padding: var(--s-2) var(--s-4);
	border: 1px solid var(--accent);
}
.is-archive-stories .featured__body {
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
}
.is-archive-stories .featured__meta {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	font-family: var(--sans);
	font-size: var(--fs-eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-weight: 500;
}
.is-archive-stories .featured__cat { color: var(--accent); }
.is-archive-stories .featured__date {
	color: var(--ink-mute);
	display: inline-flex;
	align-items: center;
	gap: var(--s-3);
}
.is-archive-stories .featured__date::before {
	content: '';
	width: 16px;
	height: 1px;
	background: var(--ink-faint);
}
.is-archive-stories .featured__title {
	font-family: var(--serif);
	font-size: clamp(2rem, 4vw, 3.25rem);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.02em;
	font-variation-settings: "opsz" 96;
	margin: var(--s-2) 0 var(--s-3);
}
.is-archive-stories .featured__title em { font-style: italic; }
.is-archive-stories .featured__card:hover .featured__title {
	color: var(--accent);
	transition: color 0.3s ease;
}
.is-archive-stories .featured__caption {
	font-family: var(--serif);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--ink-soft);
	font-variation-settings: "opsz" 24;
	max-width: 36rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-clamp: 2;
	overflow: hidden;
}

/* Stories grid */
.stories {
	padding: 0 0 var(--s-10);
}
.stories__inner {
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 0 var(--gutter);
}
.stories__divider {
	display: flex;
	align-items: center;
	gap: var(--s-5);
	margin-bottom: var(--s-8);
}
.stories__divider::before,
.stories__divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--rule);
}
.stories__divider span {
	font-family: var(--sans);
	font-size: var(--fs-eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--ink-mute);
	font-weight: 500;
	white-space: nowrap;
}
.stories__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-8) var(--s-7);
}
@media (min-width: 700px) {
	.stories__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
	.stories__grid { grid-template-columns: repeat(3, 1fr); }
}

.story-card {
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}
.story-card__image {
	aspect-ratio: 5 / 6;
	overflow: hidden;
	background: var(--paper-warm);
	margin-bottom: var(--s-5);
	border: 1px solid var(--rule);
}
.story-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.story-card:hover .story-card__image img { transform: scale(1.03); }

.story-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	flex: 1 1 auto;
}
.story-card__meta {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	font-family: var(--sans);
	font-size: var(--fs-eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-weight: 500;
	margin-bottom: var(--s-1);
}
.story-card__cat { color: var(--accent); }
.story-card__date {
	color: var(--ink-mute);
	display: inline-flex;
	align-items: center;
	gap: var(--s-3);
}
.story-card__date::before {
	content: '';
	width: 12px;
	height: 1px;
	background: var(--ink-faint);
}
.story-card__title {
	font-family: var(--serif);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.015em;
	font-variation-settings: "opsz" 36;
	color: var(--ink);
	transition: color 0.2s ease;
}
.story-card:hover .story-card__title { color: var(--accent); }
.story-card__caption {
	font-family: var(--serif);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--ink-soft);
	font-variation-settings: "opsz" 16;
	margin-top: var(--s-2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-clamp: 2;
	overflow: hidden;
}
.story-card__more {
	font-family: var(--sans);
	font-size: var(--fs-eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-weight: 500;
	color: var(--accent);
	margin-top: auto;
	padding-top: var(--s-3);
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	transition: gap 0.2s ease;
}
.story-card:hover .story-card__more { gap: var(--s-3); }

/* Mobile: ensure the read-more link has guaranteed breathing room.
   On single-column mobile the cards are auto-height, so margin-top:
   auto inside .story-card__body has no slack to push into and the
   link can collapse against the caption clamp's last visible line.
   Force a minimum visual gap and explicit display so the link
   reliably appears below the 2-line clamp. */
@media (max-width: 768px) {
	.story-card__more {
		margin-top: var(--s-4);
		display: inline-flex !important;
	}
}
.featured__more {
	font-family: var(--sans);
	font-size: var(--fs-eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-weight: 500;
	color: var(--accent);
	margin-top: var(--s-4);
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	transition: gap 0.2s ease;
}
.featured__card:hover .featured__more { gap: var(--s-3); }


/* ============================================================
   16. JOURNAL ARCHIVE — search panel, cat tabs, featured (scoped),
       posts grid, pagination
   ============================================================ */

/* ----- RSS link + search toggle (header tools) ----- */
.rss-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--ink-faint);
	border-radius: 50%;
	color: var(--ink-soft);
	transition: all 0.2s ease;
	flex-shrink: 0;
}
.rss-link:hover {
	background: var(--ink);
	color: var(--paper);
	border-color: var(--ink);
}
.rss-link svg { width: 14px; height: 14px; fill: currentColor; }

.header-tools {
	display: inline-flex;
	align-items: center;
	gap: var(--s-3);
	align-self: end;
	margin-bottom: 0.6em;
}

.search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--ink-faint);
	border-radius: 50%;
	color: var(--ink-soft);
	background: transparent;
	cursor: pointer;
	transition: all 0.2s ease;
	flex-shrink: 0;
	padding: 0;
}
.search-toggle:hover {
	background: var(--ink);
	color: var(--paper);
	border-color: var(--ink);
}
.search-toggle svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}

/* ----- Search panel (modal, slides down) ----- */
.search-panel {
	position: fixed;
	top: 73px;
	left: 0;
	right: 0;
	background: var(--paper);
	border-bottom: 1px solid var(--rule);
	z-index: 45;
	transform: translateY(-100%);
	opacity: 0;
	transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.35s ease;
	pointer-events: none;
}
.search-panel.is-open {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}
.search-panel__inner {
	max-width: var(--max-w);
	margin: 0 auto;
	padding: var(--s-7) var(--gutter);
	display: flex;
	align-items: center;
	gap: var(--s-5);
}
.search-panel__field {
	flex: 1;
	display: flex;
	align-items: center;
	gap: var(--s-4);
	border-bottom: 1px solid var(--ink);
	padding-bottom: var(--s-3);
	flex-wrap: wrap;
}
.search-panel__field svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: var(--ink);
	stroke-width: 2;
	flex-shrink: 0;
}
.search-panel__input {
	flex: 1;
	border: 0;
	background: transparent;
	font-family: var(--serif);
	font-size: 1.5rem;
	font-weight: 300;
	color: var(--ink);
	font-variation-settings: "opsz" 36;
	outline: none;
	padding: 0;
	min-width: 0;
}
.search-panel__input::placeholder {
	color: var(--ink-mute);
	font-style: italic;
}
.search-panel__close {
	background: none;
	border: 0;
	font-family: var(--sans);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ink-mute);
	cursor: pointer;
	padding: var(--s-2) var(--s-3);
	transition: color 0.2s ease;
}
.search-panel__close:hover { color: var(--ink); }

.search-panel__hint {
	font-family: var(--sans);
	font-size: 0.6875rem;
	color: var(--ink-mute);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin-top: var(--s-3);
	padding-left: 34px;
	width: 100%;
}

/* ----- Category tabs (sticky below header) ----- */
.cat-tabs {
	background: var(--paper);
	border-bottom: 1px solid var(--rule);
	padding: var(--s-5) 0;
	position: sticky;
	top: 73px;
	z-index: 40;
}
.cat-tabs__inner {
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 0 var(--gutter);
	display: flex;
	align-items: center;
	gap: var(--s-3);
	overflow-x: auto;
	scrollbar-width: none;
}
.cat-tabs__inner::-webkit-scrollbar { display: none; }

.cat-tab {
	font-family: var(--sans);
	font-size: 0.8125rem;
	color: var(--ink-mute);
	padding: var(--s-3) var(--s-4);
	border-radius: 999px;
	white-space: nowrap;
	transition: all 0.2s ease;
	border: 1px solid transparent;
}
.cat-tab:hover {
	color: var(--ink);
	background: var(--paper-warm);
}
.cat-tab.is-active {
	color: var(--paper);
	background: var(--ink);
	border-color: var(--ink);
	font-weight: 500;
}
.cat-tab__count {
	margin-left: var(--s-2);
	opacity: 0.5;
	font-size: 0.6875rem;
}

/* ----- Featured (Journal variant) — 21/9 cinematic ----- */
.is-archive-journal .featured {
	padding: var(--s-9) 0;
	background: var(--paper);
}
.is-archive-journal .featured__inner {
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 0 var(--gutter);
}
.is-archive-journal .featured__card {
	display: block;
	position: relative;
	text-decoration: none;
	color: inherit;
}
.is-archive-journal .featured__image {
	aspect-ratio: 21 / 9;
	overflow: hidden;
	background: var(--paper-warm);
	position: relative;
}
.is-archive-journal .featured__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.is-archive-journal .featured__card:hover .featured__image img {
	transform: scale(1.03);
}
.is-archive-journal .featured__badge {
	position: absolute;
	top: var(--s-5);
	left: var(--s-5);
	background: var(--paper);
	color: var(--ink);
	padding: var(--s-2) var(--s-4);
	font-family: var(--sans);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-weight: 500;
	z-index: 2;
}
.is-archive-journal .featured__body {
	margin-top: var(--s-6);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-5);
}
@media (min-width: 900px) {
	.is-archive-journal .featured__body {
		grid-template-columns: 5fr 7fr;
		gap: var(--s-8);
		align-items: start;
	}
}
.is-archive-journal .featured__meta {
	display: flex;
	align-items: center;
	gap: var(--s-3);
}
.is-archive-journal .featured__cat {
	font-family: var(--sans);
	font-size: var(--fs-eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--accent);
	font-weight: 500;
}
.is-archive-journal .featured__date {
	font-family: var(--sans);
	font-size: 0.75rem;
	color: var(--ink-mute);
}
.is-archive-journal .featured__date::before {
	content: '·';
	margin-right: var(--s-3);
	color: var(--ink-faint);
}
.is-archive-journal .featured__title {
	font-family: var(--serif);
	font-size: var(--fs-h1);
	font-weight: 300;
	line-height: 1.04;
	letter-spacing: -0.02em;
	font-variation-settings: "opsz" 144;
	margin-top: var(--s-3);
	max-width: 18ch;
}
.is-archive-journal .featured__title em { font-style: italic; }
.is-archive-journal .featured__card:hover .featured__title {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
}
.is-archive-journal .featured__dek {
	font-family: var(--serif);
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--ink-soft);
	font-variation-settings: "opsz" 36;
	margin-top: var(--s-2);
}
.is-archive-journal .featured__byline {
	font-family: var(--sans);
	font-size: 0.75rem;
	color: var(--ink-mute);
	margin-top: var(--s-5);
	padding-top: var(--s-4);
	border-top: 1px solid var(--rule);
}
.is-archive-journal .featured__byline strong {
	color: var(--ink);
	font-weight: 500;
}

/* ----- Grid of posts ----- */
.grid-section {
	padding: 0 0 var(--s-9);
	background: var(--paper);
}
.grid-section__inner {
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 0 var(--gutter);
}
.grid-section__head {
	font-family: var(--sans);
	font-size: var(--fs-eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--ink-mute);
	padding-top: var(--s-7);
	padding-bottom: var(--s-6);
	border-top: 1px solid var(--rule);
	margin-bottom: var(--s-7);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--s-4);
}
.grid-section__count { color: var(--ink-faint); }

.posts-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-8) var(--s-6);
}
@media (min-width: 600px) {
	.posts-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
	.posts-grid { grid-template-columns: repeat(3, 1fr); }
}

.post-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
}
.post-card__image {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	margin-bottom: var(--s-5);
	background: var(--paper-warm);
}
.post-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.post-card:hover .post-card__image img { transform: scale(1.04); }

.post-card__meta {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	margin-bottom: var(--s-3);
	flex-wrap: wrap;
}
.post-card__cat {
	font-family: var(--sans);
	font-size: var(--fs-eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--accent);
	font-weight: 500;
}
.post-card__date {
	font-family: var(--sans);
	font-size: 0.75rem;
	color: var(--ink-mute);
}
.post-card__date::before {
	content: '·';
	margin-right: var(--s-3);
	color: var(--ink-faint);
}
.post-card__author {
	font-family: var(--sans);
	font-size: 0.75rem;
	color: var(--ink-mute);
}
.post-card__author::before {
	content: '·';
	margin-right: var(--s-3);
	color: var(--ink-faint);
}
.post-card__title {
	font-family: var(--serif);
	font-weight: 400;
	font-size: 1.375rem;
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin-bottom: var(--s-3);
	font-variation-settings: "opsz" 36;
}
.post-card:hover .post-card__title {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}
.post-card__dek {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--ink-soft);
}

/* First non-featured card in the grid (is-recent) — 2-col span,
   side-by-side layout on wide screens for more editorial weight. */
@media (min-width: 1000px) {
	.post-card.is-recent {
		grid-column: span 2;
		flex-direction: row;
		gap: var(--s-7);
		align-items: start;
	}
	.post-card.is-recent .post-card__image {
		flex: 0 0 50%;
		aspect-ratio: 4 / 3;
		margin-bottom: 0;
	}
	.post-card.is-recent .post-card__body {
		flex: 1;
		padding-top: var(--s-3);
	}
	.post-card.is-recent .post-card__title {
		font-size: 1.75rem;
		line-height: 1.15;
		margin-bottom: var(--s-4);
	}
	.post-card.is-recent .post-card__dek {
		font-size: 1rem;
		line-height: 1.6;
		margin-bottom: var(--s-3);
	}
}

/* ----- Pagination ----- */
.pagination {
	padding: var(--s-8) 0 var(--s-10);
	background: var(--paper);
}
.pagination__inner {
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 0 var(--gutter);
	border-top: 1px solid var(--rule);
	padding-top: var(--s-7);
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--s-2);
	flex-wrap: wrap;
}
.page-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 var(--s-3);
	font-family: var(--sans);
	font-size: 0.875rem;
	color: var(--ink-mute);
	border: 1px solid transparent;
	transition: all 0.2s ease;
	border-radius: 2px;
	text-decoration: none;
}
.page-link:hover {
	color: var(--ink);
	background: var(--paper-warm);
}
.page-link.is-current {
	color: var(--paper);
	background: var(--ink);
	border-color: var(--ink);
	font-weight: 500;
	cursor: default;
}
.page-link.is-current:hover { background: var(--ink); }
.page-link--prev,
.page-link--next {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--ink);
	padding: 0 var(--s-4);
}
.page-link--prev[aria-disabled="true"],
.page-link--next[aria-disabled="true"] {
	color: var(--ink-faint);
	pointer-events: none;
}
.page-link__sep {
	color: var(--ink-faint);
	padding: 0 var(--s-2);
	display: inline-flex;
	align-items: center;
	height: 40px;
}


/* ============================================================
   17. COMMIT 4C — REDUCED MOTION OVERRIDES
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.search-panel {
		transition: opacity 0.1s ease;
		transform: none;
	}
	.is-archive-stories .featured__card:hover .featured__image img,
	.is-archive-journal .featured__card:hover .featured__image img,
	.story-card:hover .story-card__image img,
	.post-card:hover .post-card__image img {
		transform: none;
	}
}


/* ============================================================
   ============================================================
   COMMIT 4D — FRIENDS ARCHIVE, PLANT ARCHIVE, STAY ARCHIVE,
              SINGLE JOURNAL, COMMENTS
   ============================================================
   - Friends archive editorial alternating layout (.friend, .is-flipped)
   - Plant archive scoped overrides (homepage .plant card stays intact)
   - Stay archive two-column (.stay__story + .enquire sticky panel),
     .building sections, .designed-by attribution, .map (already in 4c)
   - Single Journal: progress bar, article header, article hero,
     article body 3-column, drop cap, footnote markers/inline/side,
     pull quote, figure, tags, share, author bio, footnotes ordered
     list, related posts grid, comments
   ============================================================ */


/* ============================================================
   18. FRIENDS ARCHIVE — alternating editorial layout
   ============================================================
   The homepage .friends grid (commit 4b) uses 4-column small
   square cards. The archive uses wide editorial blocks with
   alternating image side. We need to override the homepage's
   .friend rules but only inside the post-type-archive context,
   so I scope these by body class.
   ============================================================ */
.post-type-archive-friend .friends {
	padding: var(--s-10) 0;
	background: var(--paper);
}
.post-type-archive-friend .friends__inner {
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 0 var(--gutter);
}
.post-type-archive-friend .friends__grid {
	/* Reset the homepage 4-col grid — archive uses block-level
	   alternating layout, not a grid. */
	display: block;
}

.post-type-archive-friend .friend {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-6);
	margin-bottom: var(--s-10);
	text-align: left;
	color: inherit;
	text-decoration: none;
}
.post-type-archive-friend .friend:last-child { margin-bottom: 0; }

@media (min-width: 900px) {
	.post-type-archive-friend .friend {
		grid-template-columns: 6fr 5fr;
		gap: var(--s-9);
		align-items: center;
	}
	.post-type-archive-friend .friend.is-flipped {
		grid-template-columns: 5fr 6fr;
	}
	.post-type-archive-friend .friend.is-flipped .friend__image {
		order: 2;
	}
	.post-type-archive-friend .friend.is-flipped .friend__body {
		order: 1;
	}
}

.post-type-archive-friend .friend__image {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--paper-warm);
	margin-bottom: 0;
	border-radius: 0;
	filter: none;
}
.post-type-archive-friend .friend__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.post-type-archive-friend .friend:hover .friend__image img {
	transform: scale(1.02);
}

.post-type-archive-friend .friend__body {
	display: flex;
	flex-direction: column;
}

.friend__role {
	font-family: var(--sans);
	font-size: var(--fs-eyebrow);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--accent);
	margin-bottom: var(--s-4);
	display: flex;
	align-items: center;
	gap: var(--s-3);
}
.friend__role::before {
	content: '';
	width: 24px;
	height: 1px;
	background: var(--accent);
}

.post-type-archive-friend .friend__name {
	font-family: var(--serif);
	font-size: 2.25rem;
	font-weight: 300;
	font-variation-settings: "opsz" 144;
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin-bottom: var(--s-5);
}
.post-type-archive-friend .friend__name em { font-style: italic; }

@media (min-width: 1200px) {
	.post-type-archive-friend .friend__name { font-size: 2.75rem; }
}

.friend__bio {
	font-family: var(--serif);
	font-size: var(--fs-prose);
	line-height: 1.7;
	color: var(--ink-soft);
	font-variation-settings: "opsz" 16;
}
.friend__bio p { margin-bottom: var(--s-4); }
.friend__bio p:last-child { margin-bottom: 0; }
.friend__bio em { font-style: italic; }

.friend__link {
	margin-top: var(--s-5);
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	font-family: var(--sans);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ink);
	font-weight: 500;
	border-bottom: 1px solid var(--ink-faint);
	padding-bottom: 4px;
	align-self: flex-start;
	transition: all 0.2s ease;
}
.friend__link:hover {
	color: var(--accent);
	border-bottom-color: var(--accent);
}
.friend__link span:last-child {
	transition: transform 0.2s ease;
}
.friend__link:hover span:last-child {
	transform: translateX(3px);
}


/* ============================================================
   19. PLANT ARCHIVE — scoped overrides
   ============================================================
   The homepage .plant card (commit 4b) is small + simple. The
   archive card adds a .plant__role accent badge, a .plant__name-row
   container, and uses larger typography. Scoped via body class.
   ============================================================ */
.post-type-archive-plant .plants {
	padding: var(--s-9) 0 var(--s-10);
	background: var(--paper);
}
.post-type-archive-plant .plants__inner {
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 0 var(--gutter);
}
.post-type-archive-plant .plants__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-8) var(--s-7);
}
@media (min-width: 700px) {
	.post-type-archive-plant .plants__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
	.post-type-archive-plant .plants__grid { grid-template-columns: repeat(3, 1fr); }
}

.post-type-archive-plant .plant__image {
	aspect-ratio: 4 / 5;
	background: var(--paper-warm);
	margin-bottom: var(--s-5);
	border: 1px solid var(--rule);
}

.plant__role {
	font-family: var(--sans);
	font-size: var(--fs-eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--accent);
	font-weight: 500;
	margin-bottom: var(--s-3);
	display: flex;
	align-items: center;
	gap: var(--s-3);
}
.plant__role::before {
	content: '';
	width: 16px;
	height: 1px;
	background: var(--accent);
}

.post-type-archive-plant .plant__name {
	font-family: var(--serif);
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 1.15;
	letter-spacing: -0.015em;
	font-variation-settings: "opsz" 36;
	margin-bottom: var(--s-3);
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}

.plant__name-row {
	display: flex;
	align-items: baseline;
	gap: var(--s-3);
	flex-wrap: wrap;
	row-gap: var(--s-2);
}
.plant__common {
	display: inline;
}
.post-type-archive-plant .plant__alt {
	font-family: var(--sans);
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--ink-mute);
	letter-spacing: 0.04em;
	text-transform: none;
}
.post-type-archive-plant .plant__sci {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: 0.95rem;
	color: var(--ink-soft);
	font-variation-settings: "opsz" 36;
	display: inline-flex;
	align-items: baseline;
	gap: var(--s-3);
}
.post-type-archive-plant .plant__sci::before {
	content: '';
	display: inline-block;
	width: 1px;
	height: 0.9em;
	background: var(--ink-faint);
	flex-shrink: 0;
}

.post-type-archive-plant .plant__text {
	font-family: var(--serif);
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--ink-soft);
	font-variation-settings: "opsz" 16;
	margin-top: var(--s-2);
}


/* ============================================================
   20. STAY ARCHIVE — two-column with sticky enquire panel
   ============================================================
   Note: this is a NEW .stay block scope (post-type-archive-stay)
   that doesn't conflict with the homepage .stay band (commit 4b)
   because the homepage version is dark-inverted and inside .stay
   only on the front page, while the archive version is light and
   only inside post-type-archive-stay. Different contexts, both
   work without explicit scoping — but I'll be careful.
   ============================================================ */
.post-type-archive-stay .stay {
	padding: var(--s-9) 0 var(--s-10);
	background: var(--paper);
	color: var(--ink); /* override the homepage dark-inversion */
}
.post-type-archive-stay .stay__inner {
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 0 var(--gutter);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-9);
	align-items: start;
}
@media (min-width: 1000px) {
	.post-type-archive-stay .stay__inner {
		grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
		gap: var(--s-10);
	}
}

/* LEFT: editorial story column */
.stay__story {
	max-width: 42rem;
	min-width: 0;
}

.stay__intro {
	padding-bottom: var(--s-9);
	margin-bottom: var(--s-9);
	border-bottom: 1px solid var(--rule);
}
.stay__intro-lead {
	font-family: var(--serif);
	font-size: 1.5rem;
	font-weight: 300;
	line-height: 1.45;
	color: var(--ink);
	font-style: italic;
	font-variation-settings: "opsz" 72;
	margin-bottom: var(--s-5);
}
.stay__intro-prose p {
	font-family: var(--serif);
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--ink-soft);
	font-variation-settings: "opsz" 24;
	margin-bottom: var(--s-4);
}
.stay__intro-prose p:last-child { margin-bottom: 0; }
.stay__intro-prose em { font-style: italic; }

/* Building sections */
.building {
	padding-bottom: var(--s-9);
	margin-bottom: var(--s-9);
	border-bottom: 1px solid var(--rule);
}
.building:last-of-type {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: 0;
}
.building__label {
	font-family: var(--sans);
	font-size: var(--fs-eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--accent);
	font-weight: 500;
	margin-bottom: var(--s-4);
	display: flex;
	align-items: center;
	gap: var(--s-3);
}
.building__label::before {
	content: '';
	width: 24px;
	height: 1px;
	background: var(--accent);
}
.building__title {
	font-family: var(--serif);
	font-size: 2.25rem;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-variation-settings: "opsz" 96;
	margin-bottom: var(--s-5);
}
.building__title em { font-style: italic; }

.building__lead {
	font-family: var(--serif);
	font-size: 1.1875rem;
	line-height: 1.55;
	color: var(--ink);
	font-style: italic;
	font-variation-settings: "opsz" 36;
	margin-bottom: var(--s-6);
	font-weight: 300;
}

.building__portrait {
	margin: var(--s-7) 0;
	background: var(--paper-warm);
	border: 1px solid var(--rule);
}
.building__portrait img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}
.building__portrait-caption {
	font-family: var(--serif);
	font-style: italic;
	font-size: 0.875rem;
	color: var(--ink-mute);
	padding: var(--s-3) var(--s-5);
	border-top: 1px solid var(--rule);
	font-variation-settings: "opsz" 16;
	background: var(--paper);
}

.building__prose p {
	font-family: var(--serif);
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--ink-soft);
	font-variation-settings: "opsz" 24;
	margin-bottom: var(--s-4);
}
.building__prose p:last-child { margin-bottom: 0; }
.building__prose em { font-style: italic; }
.building__prose strong { color: var(--ink); font-weight: 500; }

.building__details {
	margin-top: var(--s-7);
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}
.building__detail {
	display: flex;
	align-items: baseline;
	gap: var(--s-4);
	padding: var(--s-4) 0;
	border-top: 1px solid var(--rule);
}
.building__detail:last-child { border-bottom: 1px solid var(--rule); }
.building__detail-label {
	flex-shrink: 0;
	width: 9rem;
	font-family: var(--sans);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--ink-mute);
	font-weight: 500;
}
.building__detail-value {
	font-family: var(--serif);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--ink);
	font-variation-settings: "opsz" 24;
}
.building__detail-value em { font-style: italic; color: var(--ink-soft); }

/* Studio PERA attribution block */
.designed-by {
	margin-top: var(--s-9);
	background: var(--paper-warm);
	padding: var(--s-7);
	border: 1px solid var(--rule);
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}
.designed-by__label {
	font-family: var(--sans);
	font-size: var(--fs-eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--ink-mute);
	font-weight: 500;
}
.designed-by__name {
	font-family: var(--serif);
	font-size: 1.625rem;
	font-weight: 400;
	font-variation-settings: "opsz" 36;
}
.designed-by__name em { font-style: italic; }
.designed-by__text {
	font-family: var(--serif);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--ink-soft);
	font-variation-settings: "opsz" 24;
}
.designed-by__link {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	font-family: var(--sans);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-weight: 500;
	color: var(--ink);
	padding-bottom: 3px;
	border-bottom: 1px solid var(--ink);
	align-self: flex-start;
	transition: color 0.2s ease, border-color 0.2s ease;
	margin-top: var(--s-3);
}
.designed-by__link:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* RIGHT: sticky enquire panel */
.enquire {
	position: relative;
	min-width: 0;
}
@media (min-width: 1000px) {
	.enquire {
		position: sticky;
		top: calc(80px + var(--s-5));
	}
}
.enquire__card {
	background: var(--paper);
	border: 1px solid var(--rule);
	padding: var(--s-7);
}
.enquire__status {
	display: inline-flex;
	align-items: center;
	gap: var(--s-3);
	font-family: var(--sans);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--accent);
	font-weight: 500;
	margin-bottom: var(--s-5);
	padding: var(--s-2) var(--s-4);
	background: var(--paper-warm);
	border: 1px solid var(--rule);
}
.enquire__status::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent);
	flex-shrink: 0;
}
.enquire__title {
	font-family: var(--serif);
	font-size: 1.625rem;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.015em;
	font-variation-settings: "opsz" 72;
	margin-bottom: var(--s-3);
}
.enquire__title em { font-style: italic; }
.enquire__lead {
	font-family: var(--serif);
	font-size: 1rem;
	line-height: 1.55;
	color: var(--ink-soft);
	margin-bottom: var(--s-6);
	font-variation-settings: "opsz" 24;
}
.enquire__form {
	display: flex;
	flex-direction: column;
	gap: var(--s-5);
}
.enquire__field {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}
.enquire__label {
	font-family: var(--sans);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--ink-mute);
	font-weight: 500;
}
.enquire__label-aside {
	font-family: var(--serif);
	font-style: italic;
	font-size: 0.75rem;
	text-transform: none;
	letter-spacing: 0;
	color: var(--ink-faint);
	margin-left: 0.4em;
}
.enquire__input,
.enquire__textarea,
.enquire__select {
	font-family: var(--serif);
	font-size: 1rem;
	line-height: 1.4;
	color: var(--ink);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--ink-faint);
	padding: var(--s-3) 0;
	border-radius: 0;
	font-variation-settings: "opsz" 24;
	width: 100%;
	outline: none;
	transition: border-color 0.2s ease;
	-webkit-appearance: none;
}
.enquire__select {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%238a8a8a' stroke-width='1.5' d='M1 1l5 5 5-5'/></svg>");
	background-repeat: no-repeat;
	background-position: right 0 center;
	padding-right: 1.5rem;
}
.enquire__textarea {
	resize: vertical;
	min-height: 5rem;
}
.enquire__input::placeholder, .enquire__textarea::placeholder {
	color: var(--ink-faint);
	font-style: italic;
}
.enquire__input:hover, .enquire__textarea:hover, .enquire__select:hover { border-bottom-color: var(--ink-mute); }
.enquire__input:focus, .enquire__textarea:focus, .enquire__select:focus { border-bottom-color: var(--accent); }

.enquire__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-3);
	margin-top: var(--s-3);
	font-family: var(--sans);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-weight: 500;
	color: var(--paper);
	background: var(--accent);
	border: 1px solid var(--accent);
	padding: var(--s-4) var(--s-6);
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease;
	width: 100%;
}
.enquire__submit:hover { background: var(--ink); border-color: var(--ink); }

/* ============================================================
   Fluent Forms skinning — only when Fluent renders inside the
   enquire panel (.enquire__form--ff wrapper). Selectors are scoped
   so they never bleed onto Fluent forms elsewhere on the site
   (e.g. the Contact page Fluent form keeps its own styling).
   ============================================================ */
.enquire__form--ff .fluentform { margin: 0; }
.enquire__form--ff .ff-el-form-control,
.enquire__form--ff .ff-el-group { margin-bottom: var(--s-5); }
.enquire__form--ff .ff-el-group:last-child { margin-bottom: 0; }

/* Labels */
.enquire__form--ff .ff-el-input--label label,
.enquire__form--ff label.ff-el-input--label {
	font-family: var(--sans);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--ink-mute);
	font-weight: 500;
	margin-bottom: var(--s-2);
	display: block;
	padding: 0;
}
.enquire__form--ff .ff-el-is-required.asterisk-right label::after,
.enquire__form--ff .ff-el-is-required label .ff-el-is-required-mark {
	color: var(--accent);
}

/* Inputs, textareas, selects */
.enquire__form--ff input[type="text"],
.enquire__form--ff input[type="email"],
.enquire__form--ff input[type="tel"],
.enquire__form--ff input[type="url"],
.enquire__form--ff input[type="number"],
.enquire__form--ff textarea,
.enquire__form--ff select {
	font-family: var(--serif);
	font-size: 1rem;
	line-height: 1.4;
	color: var(--ink);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--ink-faint);
	padding: var(--s-3) 0;
	border-radius: 0;
	font-variation-settings: "opsz" 24;
	width: 100%;
	outline: none;
	transition: border-color 0.2s ease;
	-webkit-appearance: none;
	box-shadow: none;
	min-height: 0;
	height: auto;
}
.enquire__form--ff select {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%238a8a8a' stroke-width='1.5' d='M1 1l5 5 5-5'/></svg>");
	background-repeat: no-repeat;
	background-position: right 0 center;
	padding-right: 1.5rem;
	appearance: none;
	-moz-appearance: none;
}
.enquire__form--ff textarea {
	resize: vertical;
	min-height: 5rem;
}
.enquire__form--ff input::placeholder,
.enquire__form--ff textarea::placeholder {
	color: var(--ink-faint);
	font-style: italic;
}
.enquire__form--ff input:hover,
.enquire__form--ff textarea:hover,
.enquire__form--ff select:hover {
	border-bottom-color: var(--ink-mute);
}
.enquire__form--ff input:focus,
.enquire__form--ff textarea:focus,
.enquire__form--ff select:focus {
	border-bottom-color: var(--accent);
	box-shadow: none;
}

/* Submit button */
.enquire__form--ff .ff-btn,
.enquire__form--ff button[type="submit"],
.enquire__form--ff input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-3);
	margin-top: var(--s-3);
	font-family: var(--sans);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-weight: 500;
	color: var(--paper);
	background: var(--accent);
	border: 1px solid var(--accent);
	padding: var(--s-4) var(--s-6);
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease;
	width: 100%;
	border-radius: 0;
	box-shadow: none;
	height: auto;
	min-height: 0;
	line-height: 1;
}
.enquire__form--ff .ff-btn:hover,
.enquire__form--ff button[type="submit"]:hover,
.enquire__form--ff input[type="submit"]:hover {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--paper);
}

/* Validation + success messages */
.enquire__form--ff .ff-el-input--content .error,
.enquire__form--ff .text-danger,
.enquire__form--ff .ff-el-form-check-label.error {
	font-family: var(--serif);
	font-style: italic;
	font-size: 0.8125rem;
	color: var(--accent);
	margin-top: var(--s-2);
}
.enquire__form--ff .ff-message-success,
.enquire__form--ff .ff_submit_success {
	font-family: var(--serif);
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--ink-soft);
	background: transparent;
	border: 0;
	border-left: 2px solid var(--accent);
	padding: var(--s-3) 0 var(--s-3) var(--s-4);
	margin: 0;
}

.enquire__divider {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	margin: var(--s-6) 0 var(--s-5);
	font-family: var(--sans);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--ink-mute);
}
.enquire__divider::before, .enquire__divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--rule);
}

.enquire__whatsapp {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-3);
	font-family: var(--sans);
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--ink);
	padding: var(--s-4) var(--s-6);
	transition: background 0.2s ease, color 0.2s ease;
	width: 100%;
	text-decoration: none;
}
.enquire__whatsapp:hover { background: var(--ink); color: var(--paper); }

.enquire__legal {
	font-family: var(--serif);
	font-style: italic;
	font-size: 0.8125rem;
	color: var(--ink-mute);
	margin-top: var(--s-5);
	line-height: 1.55;
	font-variation-settings: "opsz" 16;
	text-align: center;
}

/* Stay archive map intro paragraph (small variation on Contact map) */
.post-type-archive-stay .map__intro {
	font-family: var(--serif);
	font-style: italic;
	font-size: 1rem;
	color: var(--ink-soft);
	max-width: 36rem;
	margin: 0 0 var(--s-5);
}


/* ============================================================
   21. SINGLE JOURNAL — long-form essay layout
   ============================================================ */

/* Reading-progress bar — fixed across the very top of the viewport.
   Filled by progress-bar.js (commit 4e). */
.progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	z-index: 100;
	background: transparent;
	pointer-events: none;
}
.progress__bar {
	height: 100%;
	width: 0;
	background: var(--accent);
	transition: width 0.05s linear;
}

/* Article header (quiet — header above hero pattern) */
.article-header {
	padding: var(--s-9) 0 var(--s-7);
}
.article-header__inner {
	max-width: 48rem;
	margin: 0 auto;
	padding: 0 var(--gutter);
}
.article-header__crumb {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	margin-bottom: var(--s-6);
	font-family: var(--sans);
	font-size: 0.75rem;
	color: var(--ink-mute);
}
.article-header__crumb a { color: var(--ink-mute); transition: color 0.2s ease; }
.article-header__crumb a:hover { color: var(--ink); }
.article-header__crumb-sep { color: var(--ink-faint); }

.article-header__cat {
	display: inline-block;
	font-family: var(--sans);
	font-size: var(--fs-eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--accent);
	font-weight: 500;
	margin-bottom: var(--s-5);
}

.article-header__title {
	font-family: var(--serif);
	font-size: var(--fs-display);
	font-weight: 300;
	line-height: 1.02;
	letter-spacing: -0.025em;
	font-variation-settings: "opsz" 144;
	margin-bottom: var(--s-6);
}
.article-header__title em { font-style: italic; }

.article-header__alt {
	font-family: var(--serif);
	font-style: normal;
	font-size: 0.5em;
	color: var(--ink-mute);
	font-weight: 400;
}

.article-header__dek {
	font-family: var(--serif);
	font-size: 1.375rem;
	font-weight: 300;
	line-height: 1.4;
	color: var(--ink-soft);
	font-variation-settings: "opsz" 36;
	font-style: italic;
	max-width: 36rem;
	margin-bottom: var(--s-7);
}

.byline {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	padding-top: var(--s-5);
	border-top: 1px solid var(--rule);
	font-family: var(--sans);
	font-size: 0.8125rem;
	flex-wrap: wrap;
}
.byline__author { font-weight: 500; color: var(--ink); }
.byline__date, .byline__read { color: var(--ink-mute); }
.byline__sep { color: var(--ink-faint); }

/* Article hero image (full-bleed under quiet header) */
.article-hero {
	margin: var(--s-7) 0 0;
}
.article-hero__inner {
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 0 var(--gutter);
}
.article-hero__image {
	background: var(--paper-warm);
	margin: 0;
	text-align: center;
}
.article-hero__image img {
	display: block;
	max-width: 100%;
	max-height: 80vh;
	width: auto;
	height: auto;
	margin: 0 auto;
}
.article-hero__caption {
	font-family: var(--sans);
	font-size: 0.75rem;
	color: var(--ink-mute);
	padding-top: var(--s-3);
	max-width: var(--measure);
	margin: 0 auto;
	font-style: italic;
}

/* Article body — 3-column layout on desktop for side notes */
.article {
	padding: var(--s-9) 0 var(--s-10);
}
.article__inner {
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 0 var(--gutter);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-8);
}
@media (min-width: 1100px) {
	.article__inner {
		grid-template-columns: 1fr minmax(0, var(--measure)) 1fr;
		gap: var(--s-7);
		align-items: start;
	}
	.article__prose {
		grid-column: 2 / 3;
	}
}

.article__prose {
	font-family: var(--serif);
	font-size: var(--fs-prose);
	line-height: 1.75;
	color: var(--ink);
	font-variation-settings: "opsz" 16;
	max-width: var(--measure);
	margin: 0 auto;
}

/* Drop cap on first paragraph if it has class .lead */
.article__prose > p.lead::first-letter {
	font-family: var(--serif);
	font-size: 4.5rem;
	font-weight: 400;
	font-variation-settings: "opsz" 144;
	float: left;
	line-height: 0.85;
	padding: 0.4rem 0.6rem 0 0;
	color: var(--ink);
}

.article__prose > p {
	margin-bottom: var(--s-5);
}
.article__prose > p.lead {
	font-size: 1.1875rem;
	line-height: 1.6;
}

.article__prose > h2 {
	font-family: var(--serif);
	font-size: 1.75rem;
	font-weight: 400;
	line-height: 1.2;
	font-variation-settings: "opsz" 36;
	margin-top: var(--s-8);
	margin-bottom: var(--s-5);
	letter-spacing: -0.01em;
}
.article__prose > h3 {
	font-family: var(--serif);
	font-size: 1.25rem;
	font-weight: 500;
	margin-top: var(--s-7);
	margin-bottom: var(--s-3);
	font-variation-settings: "opsz" 36;
}
.article__prose a {
	color: var(--ink);
	border-bottom: 1px solid var(--ink-faint);
	transition: border-color 0.2s ease;
}
.article__prose a:hover { border-color: var(--ink); }
.article__prose em { font-style: italic; }
.article__prose strong { font-weight: 500; }

/* Footnote markers (inline reference inside body) — emitted by
   earthness_journal_footnotes() filter from [fn:N] markers */
.fn-ref {
	font-family: var(--sans);
	font-size: 0.625em;
	vertical-align: super;
	line-height: 0;
	margin-left: 1px;
	color: var(--accent);
	font-weight: 500;
	border: 0;
	padding: 0 2px;
	cursor: pointer;
	background: transparent;
	text-decoration: none;
}
.fn-ref:hover { background: var(--paper-warm); }

/* Side footnote (visible on wide screens, in the right rail) */
.fn-side {
	position: absolute;
	left: calc(100% + var(--s-6));
	top: 0;
	width: 16rem;
	font-family: var(--sans);
	font-size: 0.75rem;
	line-height: 1.55;
	color: var(--ink-soft);
	padding-top: 0.2rem;
}
.fn-side__num {
	font-weight: 500;
	color: var(--accent);
	margin-right: 0.4rem;
}
.fn-anchor {
	position: relative;
}
@media (max-width: 1099px) {
	.fn-side { display: none; }
}

/* Inline footnote (mobile/tablet — expanded after the paragraph
   when the user taps the marker) */
.fn-inline {
	display: none;
	font-family: var(--sans);
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--ink-soft);
	background: var(--paper-warm);
	border-left: 2px solid var(--accent);
	padding: var(--s-4);
	margin: var(--s-4) 0;
}
.fn-inline.is-open { display: block; }
.fn-inline__num {
	font-weight: 500;
	color: var(--accent);
	margin-right: 0.4rem;
}
@media (min-width: 1100px) {
	.fn-inline { display: none !important; }
}

/* Pull quote (inside the article) */
.pullquote {
	margin: var(--s-8) 0;
	padding: 0;
	border: 0;
	position: relative;
}
.pullquote__text {
	font-family: var(--serif);
	font-size: 2rem;
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--ink);
	font-variation-settings: "opsz" 144;
	font-style: italic;
	border-top: 1px solid var(--ink);
	border-bottom: 1px solid var(--rule);
	padding: var(--s-6) 0 var(--s-5);
	margin: 0;
}
.pullquote__text::before {
	content: '“';
	font-size: 1em;
	line-height: 0;
	vertical-align: -0.1em;
	margin-right: 0.05em;
	color: var(--ink);
}
.pullquote__text::after {
	content: '”';
	font-size: 1em;
	line-height: 0;
	vertical-align: -0.1em;
	margin-left: 0.05em;
	color: var(--ink);
}
.pullquote__share {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	padding: var(--s-3) 0 0;
	font-family: var(--sans);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ink-mute);
}
.pullquote__share-label {
	margin-right: var(--s-2);
}
.pullquote__share a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid var(--rule);
	color: var(--ink);
	transition: background 0.2s ease, border-color 0.2s ease;
}
.pullquote__share a:hover {
	background: var(--ink);
	color: var(--paper);
	border-color: var(--ink);
}
.pullquote__share svg {
	width: 13px;
	height: 13px;
	fill: currentColor;
}
@media (min-width: 1100px) {
	.pullquote {
		margin-left: -4rem;
		margin-right: -4rem;
	}
	.pullquote__text { font-size: 2.5rem; }
}

/* Article figure (inline image that breaks the prose measure on wide screens) */
.article__figure {
	margin: var(--s-8) 0;
}
.article__figure img { width: 100%; }
.article__figure figcaption {
	font-family: var(--sans);
	font-size: 0.75rem;
	color: var(--ink-mute);
	margin-top: var(--s-3);
	font-style: italic;
}
@media (min-width: 1100px) {
	.article__figure {
		margin-left: -4rem;
		margin-right: -4rem;
	}
}

/* Tags + share footer */
.article__footer {
	max-width: var(--measure);
	margin: var(--s-9) auto 0;
	padding: var(--s-7) var(--gutter) 0;
	border-top: 1px solid var(--rule);
}

.tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin-bottom: var(--s-7);
	align-items: center;
}
.tags__label {
	font-family: var(--sans);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ink-mute);
	margin-right: var(--s-3);
}
.tag {
	display: inline-block;
	font-family: var(--sans);
	font-size: 0.75rem;
	padding: var(--s-2) var(--s-4);
	border: 1px solid var(--rule);
	color: var(--ink);
	border-radius: 999px;
	transition: background 0.2s ease, border-color 0.2s ease;
	text-decoration: none;
}
.tag:hover { background: var(--paper-warm); border-color: var(--ink-mute); }

.share-end {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	margin-bottom: var(--s-8);
}
.share-end__label {
	font-family: var(--sans);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ink-mute);
}
.share-end__icons { display: flex; gap: var(--s-3); }
.share-end__icons a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--rule);
	color: var(--ink);
	transition: all 0.2s ease;
}
.share-end__icons a:hover {
	background: var(--ink);
	color: var(--paper);
	border-color: var(--ink);
}
.share-end__icons svg { width: 15px; height: 15px; fill: currentColor; }

/* Author bio block */
.author-bio {
	display: flex;
	gap: var(--s-5);
	align-items: flex-start;
	padding: var(--s-7) 0;
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	margin-bottom: var(--s-9);
}
.author-bio__image {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	background: var(--paper-warm);
}
.author-bio__image img { width: 100%; height: 100%; object-fit: cover; }
.author-bio__name {
	font-family: var(--serif);
	font-size: 1.25rem;
	font-weight: 500;
	margin-bottom: var(--s-2);
	font-variation-settings: "opsz" 36;
}
.author-bio__role {
	font-family: var(--sans);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ink-mute);
	margin-bottom: var(--s-3);
}
.author-bio__text {
	font-family: var(--serif);
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--ink-soft);
	font-style: italic;
	font-variation-settings: "opsz" 36;
}

/* Footnotes ordered list (anchor target for in-body markers) */
.footnotes {
	max-width: var(--measure);
	margin: 0 auto var(--s-6);
	padding: 0 var(--gutter);
}
.footnotes__title {
	font-family: var(--sans);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ink-mute);
	margin-bottom: var(--s-5);
	padding-bottom: var(--s-3);
	border-bottom: 1px solid var(--rule);
}
.footnotes ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: fn;
}
.footnotes li {
	counter-increment: fn;
	position: relative;
	padding-left: 2.2rem;
	margin-bottom: var(--s-4);
	font-family: var(--sans);
	font-size: 0.8125rem;
	line-height: 1.65;
	color: var(--ink-soft);
}
.footnotes li::before {
	content: counter(fn);
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 500;
	color: var(--accent);
}
.footnotes a { color: var(--ink); border-bottom: 1px solid var(--ink-faint); }


/* ============================================================
   22. RELATED POSTS (single-journal)
   ============================================================ */
.related {
	padding: var(--s-9) 0;
	background: var(--paper-warm);
	border-top: 1px solid var(--rule);
}
.related__head {
	max-width: var(--max-w);
	margin: 0 auto var(--s-7);
	padding: 0 var(--gutter);
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: var(--s-6);
	padding-bottom: var(--s-7);
	border-bottom: 1px solid var(--rule);
}
.related__title {
	font-size: var(--fs-h2);
	font-weight: 300;
	font-variation-settings: "opsz" 144;
	letter-spacing: -0.02em;
}
.related__title em { font-style: italic; }
.related__link {
	font-family: var(--sans);
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--ink);
	border-bottom: 1px solid var(--ink);
	padding-bottom: 2px;
	white-space: nowrap;
	text-decoration: none;
}
.related__grid {
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 0 var(--gutter);
	display: grid;
	gap: var(--s-7);
	grid-template-columns: 1fr;
}
@media (min-width: 700px) {
	.related__grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-7) var(--s-6); }
}
.rel-card {
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}
.rel-card__image {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	margin-bottom: var(--s-4);
	background: var(--paper);
}
.rel-card__image img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.rel-card:hover .rel-card__image img { transform: scale(1.04); }
.rel-card__cat {
	font-family: var(--sans);
	font-size: var(--fs-eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--accent);
	font-weight: 500;
	margin-bottom: var(--s-2);
}
.rel-card__title {
	font-family: var(--serif);
	font-weight: 400;
	font-size: 1.25rem;
	line-height: 1.25;
	margin-bottom: var(--s-3);
	font-variation-settings: "opsz" 36;
}
.rel-card__dek {
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--ink-soft);
}


/* ============================================================
   23. COMMENTS (single-journal only)
   ============================================================ */
.comments {
	padding: var(--s-6) 0 var(--s-9);
	background: var(--paper);
}
.comments__inner {
	max-width: var(--measure);
	margin: 0 auto;
	padding: 0 var(--gutter);
}
.comments__title {
	font-family: var(--serif);
	font-size: 1.75rem;
	font-weight: 400;
	font-variation-settings: "opsz" 36;
	margin-bottom: var(--s-6);
}
.comments__title em { font-style: italic; }
.comments__count {
	font-family: var(--sans);
	font-size: 0.8125rem;
	color: var(--ink-mute);
	margin-bottom: var(--s-7);
}
.comment {
	display: flex;
	gap: var(--s-4);
	padding: var(--s-5) 0;
	border-top: 1px solid var(--rule);
	list-style: none;
}
.comment__avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--paper-warm);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--serif);
	font-size: 1rem;
	font-weight: 500;
	color: var(--ink-mute);
}
.comment__content {
	flex: 1;
	min-width: 0;
}
.comment__author {
	font-family: var(--sans);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--ink);
}
.comment__date {
	font-family: var(--sans);
	font-size: 0.75rem;
	color: var(--ink-mute);
	margin-left: var(--s-3);
}
.comment__body {
	font-family: var(--serif);
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--ink-soft);
	margin-top: var(--s-2);
	font-variation-settings: "opsz" 36;
}
.comment__body p { margin-bottom: var(--s-3); }
.comment__body p:last-child { margin-bottom: 0; }
.comment__reply {
	font-family: var(--sans);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ink-mute);
	margin-top: var(--s-3);
	display: inline-block;
	border-bottom: 1px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.comment__reply:hover { color: var(--ink); border-color: var(--ink); }

/* Comment form */
.comment-form {
	margin-top: var(--s-8);
	padding-top: var(--s-7);
	border-top: 1px solid var(--rule);
}
.comment-form__title {
	font-family: var(--serif);
	font-size: 1.25rem;
	font-weight: 400;
	margin-bottom: var(--s-5);
	font-variation-settings: "opsz" 36;
}
.comment-form input,
.comment-form textarea {
	width: 100%;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--ink-faint);
	font-family: var(--sans);
	font-size: 0.9375rem;
	color: var(--ink);
	padding: var(--s-3) 0;
	outline: none;
	transition: border-color 0.2s ease;
	margin-bottom: var(--s-5);
}
.comment-form input:focus,
.comment-form textarea:focus { border-color: var(--ink); }
.comment-form textarea {
	min-height: 120px;
	resize: vertical;
	font-family: var(--serif);
	line-height: 1.6;
}
.comment-form button,
.comment-form .submit {
	margin-top: var(--s-5);
	font-family: var(--sans);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	background: var(--ink);
	color: var(--paper);
	border: 0;
	padding: var(--s-4) var(--s-6);
	cursor: pointer;
	transition: opacity 0.2s ease;
}
.comment-form button:hover,
.comment-form .submit:hover { opacity: 0.85; }


/* ============================================================
   24. COMMIT 4D — REDUCED MOTION OVERRIDES
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.post-type-archive-friend .friend:hover .friend__image img,
	.post-type-archive-plant .plant:hover .plant__image img,
	.rel-card:hover .rel-card__image img {
		transform: none;
	}
	.progress__bar {
		transition: none;
	}
}

/* ============================================================
   STAY ARCHIVE — full-bleed hero override
   ------------------------------------------------------------
   The .hero-img component was originally built for Philosophy,
   where the 21:9 image sits inside the content column. On the
   Stay archive the Final mockup shows the hero as full-bleed
   edge-to-edge (matching how homepage .hero spans the viewport).
   Scope the override to the stay CPT archive body class so
   Philosophy stays content-width.

   On mobile portrait (<700px), a 21:9 strip becomes an
   uncomfortably thin letterbox — the Final switches to 3:2
   at that breakpoint, so we do the same here.
   ============================================================ */
.post-type-archive-stay .hero-img {
	margin-bottom: 0;
}
.post-type-archive-stay .hero-img__inner {
	max-width: none;
	margin: 0;
	padding: 0;
}
@media (max-width: 700px) {
	.post-type-archive-stay .hero-img__frame {
		aspect-ratio: 3 / 2;
	}
}


/* ============================================================
   404 — Page Not Found (v0.1.39)
   ============================================================
   Minimal wrapper around the existing .closing__followups list
   pattern. Keeps the page short and uncluttered — a 404 should
   feel like a brief redirection, not another full page.

   Narrower container than the page-header so the list feels
   intentional rather than stretched across the viewport.

   Spacing: s-9 top to echo the breathing room Philosophy has
   between its page-header and first section; s-10 bottom so
   the footer doesn't feel like it lands on top of the list.
   ============================================================ */
.not-found {
	padding: var(--s-9) 0 var(--s-10);
}
.not-found__inner {
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 0 var(--gutter);
}
.not-found__list {
	/* Constrain the list narrower than the intro prose.
	   Aligns with the .page-header__inner left-column column
	   so the eye tracks down without a jog. */
	max-width: 36rem;
	margin-bottom: var(--s-7);
}
.not-found__note {
	max-width: var(--measure);
	font-family: var(--sans);
	font-size: 0.9375rem;
	color: var(--ink-mute);
	line-height: 1.65;
	margin: 0;
}
.not-found__note a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.not-found__note a:hover {
	color: var(--accent);
}

/* Pagination row for the generic fallback (index.php). Only
   renders when the query spans multiple pages; nearly invisible
   on short sites. */
.not-found__pagination {
	display: flex;
	justify-content: space-between;
	gap: var(--s-5);
	margin-top: var(--s-7);
	font-family: var(--sans);
	font-size: 0.9375rem;
}
.not-found__pagination a {
	color: var(--ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.not-found__pagination a:hover { color: var(--accent); }


/* ============================================================
   Inline SVG arrow (v0.1.40)
   ============================================================
   Base class for the arrow helper earthness_arrow(). Sized by
   the SVG's width/height attributes; this rule just handles
   inline-flow, color inheritance, and optical alignment with
   the text baseline.

   Individual contexts can add their own fine-tuning (gap to
   label, hover translate, etc.) by selecting with a compound
   class, e.g. .section-head__link .arrow { … }.
   ============================================================ */
.arrow {
	display: inline-block;
	flex-shrink: 0;
	/* Explicit color inheritance; harmless where redundant.
	   stroke="currentColor" on the path does the actual work. */
	color: inherit;
	/* Arrow glyph sits slightly below the cap height; nudge up
	   to visually center with uppercase/small labels. Fine for
	   running text too — the shift is too small to notice. */
	transform: translateY(-1px);
	vertical-align: middle;
}

/* Hover animation for link contexts — subtle translate on
   the arrow to echo the 'go somewhere' affordance. Opt-in
   per component by combining selectors, e.g.
   .section-head__link:hover .arrow, .closing__cta:hover .arrow.
   Kept as a reusable pattern so we don't duplicate it. */
.section-head__link:hover .arrow,
.closing__cta:hover .arrow,
.designed-by__link:hover .arrow,
.related__link:hover .arrow,
.enquire__submit:hover .arrow,
.stay__cta:hover .arrow,
.not-found__list a:hover .arrow,
.closing__followups a:hover .arrow {
	transform: translate(2px, -1px);
	transition: transform 0.2s ease;
}