/* ==========================================================================
   Field Notes (site updates, Oct 2026): card + single page.
   ========================================================================== */

/* ---------- Shared: audience / topic lines ---------- */
.fn-lines {
	display: flex;
	flex-direction: column;
	font-family: "Basel Grotesk", Arial, sans-serif;
	font-size: 0.75rem;
	line-height: 1.45;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* The dash between audience and topics is a 9px rule (Figma), not the character. */
.fn-lines__dash {
	width: 0.5625rem;
	height: 1px;
	margin: 0.1875rem 0;
	overflow: hidden;
	font-size: 0;
	background: currentColor;
}

/* ---------- Card (Insights grid, recent posts, Home V2) ----------
   Oct 19 design: one colour block, with the Field Notes descriptor under a rule at the bottom
   (no logo strip). Field Notes take turns in three colours, counted among the Field Notes
   only, so posts in between and "Load More" keep the order: Charcoal, Warm Grey, Pale Stone,
   then again. Spacing is Figma's, converted from its trimmed text boxes (cap height to
   baseline) with the font metrics, so it measures the same in the browser. */
.thinking-card.fn-card {
	--fn-bg: #1A1A1A; /* Charcoal */
	--fn-fg: #FFFCF5;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 28.4375rem; /* 455px, as in Figma */
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--fn-bg);
	border-radius: 1rem;
	background: var(--fn-bg);
	color: var(--fn-fg);
	text-decoration: none;
}

.thinking-card.fn-card:nth-child(3n + 2 of .fn-card) { --fn-bg: #B9B2AE; --fn-fg: #1A1A1A; } /* Warm Grey */
.thinking-card.fn-card:nth-child(3n of .fn-card) { --fn-bg: #E5DFD7; --fn-fg: #1A1A1A; } /* Pale Stone */

.fn-card__top {
	display: flex;
	flex-direction: column;
	padding: 1.4288rem 1.125rem 0; /* 28px to the top of the number, 18px sides */
}

.thinking-card.fn-card .fn-card__number {
	margin: 0 0 0.6913rem; /* 24px from the number to the title */
	font-family: Tobias, Georgia, serif;
	font-size: 1.1847rem; /* 18.955px */
	font-weight: 400;
	line-height: 1.25;
	color: inherit;
}

/* The small raised "o" in "Nº" (cards and Field Note pages). */
.fn-no {
	font-size: 0.68em;
	line-height: 0;
	vertical-align: 0.42em;
}

.thinking-card.fn-card .fn-card__title {
	margin: 0 0 1.3856rem; /* 32px from the title to the lines */
	font-family: Tobias, Georgia, serif;
	font-size: 2.3125rem; /* 37px */
	font-weight: 400;
	line-height: 1.13;
	letter-spacing: -0.01em;
	color: inherit;
	text-wrap: pretty; /* as in Figma */
}

.fn-card__lines {
	gap: 0.375rem; /* 10px between the lines, cap to cap */
	font-size: 0.8125rem; /* 13px */
	line-height: 0.8125rem;
	letter-spacing: 0.01em;
}

.fn-card__bottom {
	margin: 0 1.125rem;
	padding: 0.6088rem 0 1.2338rem; /* 14px under the rule, 24px under the text */
	border-top: 1.25px solid currentColor;
}

.fn-card__intro {
	margin: 0;
	font-family: "Basel Grotesk", Arial, sans-serif;
	font-size: 0.90625rem; /* 14.5px */
	line-height: 1.15625rem; /* 18.5px */
	letter-spacing: 0.01em;
	text-wrap: pretty; /* as in Figma */
}


/* Home V2 Insights: a picked Field Note fills the same slot as the other card
   (the Webflow styles there set image widths, link underlines and text colours). */
.hv2-wf .home_insights-left-card.hv2-fn-card {
	padding: 0;
	align-items: stretch;
	border: 1px solid var(--fn-bg);
	background: var(--fn-bg);
	color: var(--fn-fg);
	text-decoration: none;
}

.hv2-wf .hv2-fn-card,
.hv2-wf .hv2-fn-card * { text-decoration: none; }
.hv2-wf .hv2-fn-card .fn-card__top,
.hv2-wf .hv2-fn-card .fn-card__number,
.hv2-wf .hv2-fn-card .fn-card__title,
.hv2-wf .hv2-fn-card .fn-card__lines,
.hv2-wf .hv2-fn-card .fn-card__bottom,
.hv2-wf .hv2-fn-card .fn-card__intro { color: var(--fn-fg); }
.hv2-wf .hv2-fn-card .fn-card__title { font-size: calc(2 * var(--wf-rem)); }

.hv2-wf .home_insights-left-card.hv2-fn-card .fn-card__top { padding: calc(1.375 * var(--wf-rem)) calc(1.125 * var(--wf-rem)) 0; }

/* ---------- Single Field Note ---------- */
.emo.fn-single {
	padding: calc(4.875rem + 2.5rem) 0 5rem; /* clears the fixed header (4.875rem on phones) */
	background: #FFFCF5;
	color: #1A1A1A;
}
@media screen and (min-width: 768px) {
	.emo.fn-single { padding-top: calc(5.375rem + 5rem); } /* fixed header (5.375rem from 768px) + 80px (Oct 19 Figma) */
}

.fn-single__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 3rem;
}

@media screen and (min-width: 992px) {
	.fn-single__grid {
		grid-template-columns: minmax(0, 40.25rem) minmax(0, 33.5rem);
		justify-content: space-between;
		align-items: start;
	}

	.fn-single__aside {
		position: sticky;
		top: 8rem;
	}
}

/* Oct 19 design: a rule, then "Field Note: Nº 001", the title and the lines. */
.fn-single__head {
	padding-top: 2.1788rem; /* 40px from the rule to the top of the number */
	border-top: 1px solid #1A1A1A;
}

.fn-single__number {
	margin: 0 0 0.5538rem; /* 14px to the title */
	font-family: Tobias, Georgia, serif;
	font-size: 1.1847rem; /* 18.955px */
	font-weight: 400;
	line-height: 1.25;
}

.fn-single__title {
	margin: 0.75rem 0 1.125rem; /* 18px to the lines */
	font-family: Tobias, Georgia, serif;
	font-size: 2.25rem;
	font-weight: 400;
	line-height: 1.0714;
	letter-spacing: -0.02em;
}
@media screen and (min-width: 768px) {
	.fn-single__title { font-size: 3.5rem; } /* Regular 56 / 60 */
}

.fn-single__lines {
	gap: 0.2rem; /* 8px between the lines, cap to cap */
	margin-bottom: 1.5394rem; /* 27px to the lead */
	font-family: "Basel Grotesk", Arial, sans-serif; /* Regular 12 / 13 */
	font-size: 0.75rem;
	line-height: 0.8125rem;
	letter-spacing: 0.01em;
}

.fn-single__lines .fn-lines__dash { margin: 0.27rem 0; } /* 10px either side, cap to cap */

.fn-single__lead {
	margin: 0;
	padding-bottom: 2.5rem;
	border-bottom: 1px solid #1A1A1A;
	font-size: 1.25rem;
	line-height: 1.3; /* Regular 20 / 26 */
	font-weight: 300; /* Regular */
}

.fn-single__body {
	padding: 2rem 0;
	font-size: 1.125rem;
	line-height: 1.33; /* Figma */
	font-weight: 300; /* Light, as on the blog posts (client, Oct 22; Figma had Regular) */
}

/* Pasted text can carry its own weight in spans; keep it Light, as the blog posts do. */
.fn-single__body p span { font-weight: 300 !important; }

.fn-single__body > :first-child { margin-top: 0; }
.fn-single__body > :last-child { margin-bottom: 0; }

/* Text styles for everything the editor toolbar makes, as on the blog posts: paragraphs,
   headings, bold / italic, bullet and numbered lists, quotes, links and rules. The theme
   sets p { line-height: 1.125 } and ul li { list-style: none } on every page, so sizes,
   line heights and bullets are set here directly. Text stays Regular 18 / 24 (Figma). */
.fn-single__body p,
.fn-single__body li {
	font-size: 1.125rem;
	line-height: 1.3333;
}
.fn-single__body p { margin: 0 0 1.125rem; } /* 18px between paragraphs */

.fn-single__body h2,
.fn-single__body h3,
.fn-single__body h4,
.fn-single__body h5,
.fn-single__body h6 { color: inherit; letter-spacing: 0; }
.fn-single__body h2 { margin: 2rem 0 1.125rem; font-family: Tobias, Georgia, serif; font-size: 1.625rem; font-weight: 400; line-height: 1.077; } /* Tobias 26 / 28 */
.fn-single__body h3 { margin: 1.75rem 0 0.75rem; font-family: "Basel Grotesk", Arial, sans-serif; font-size: 1.375rem; font-weight: 500; line-height: 1.09; } /* Medium 22 / 24 */
.fn-single__body h4 { margin: 1.5rem 0 0.5625rem; font-family: "Basel Grotesk", Arial, sans-serif; font-size: 1.25rem; font-weight: 500; line-height: 1.3; } /* Medium 20 / 26 */
.fn-single__body h5,
.fn-single__body h6 { margin: 1.125rem 0 0.5625rem; font-family: "Basel Grotesk", Arial, sans-serif; font-size: 1.125rem; font-weight: 500; line-height: 1.3333; }

.fn-single__body strong,
.fn-single__body b { font-weight: 500; } /* Medium, as on the blog posts */
.fn-single__body em,
.fn-single__body i { font-style: italic; }

/* Bullet and numbered lists (bold numbers, as on the blog posts) */
.fn-single__body ul,
.fn-single__body ol {
	margin: 0 0 1.125rem;
	padding-left: 1.25rem;
	list-style-position: outside;
}
.fn-single__body ul > li { list-style: disc; }
.fn-single__body ol > li { list-style: decimal; }
.fn-single__body ol > li::marker { font-weight: 700; }
.fn-single__body li {
	margin: 0 0 0.5625rem; /* 9px between items */
	padding: 0;
}
.fn-single__body li:last-child { margin-bottom: 0; }
.fn-single__body li::before { content: none; } /* no theme bullets on top */
.fn-single__body li > ul,
.fn-single__body li > ol { margin: 0.5625rem 0 0; }

/* Quote: as on the blog posts */
.fn-single__body blockquote,
.fn-single__body blockquote p {
	margin: 0 0 1.75rem;
	padding: 0;
	border: 0;
	font-family: Tobias, Georgia, serif;
	font-size: 2.1875rem; /* 35 / 39 */
	font-weight: 400;
	line-height: 2.4375rem;
	color: #34617E;
}
.fn-single__body blockquote p:last-child { margin-bottom: 0; }

.fn-single__body hr {
	height: 0;
	margin: 2rem 0;
	border: 0;
	border-top: 1px solid #1A1A1A;
}

/* Links (e.g. the Sources): underlined, yellow on hover, as on the blog posts; on phones,
   where there is no hover, always yellow (also as on the blog posts). */
.fn-single__body a {
	color: inherit;
	text-decoration: underline;
	background-color: #E8FF5E;
}
@media screen and (min-width: 949px) {
	.fn-single__body a { background-color: transparent; }
}
.fn-single__body a:hover,
.fn-single__body a:focus-visible { background-color: #E8FF5E; }

.fn-single__about {
	padding-top: 0.8125rem; /* 13px under the rule */
	border-top: 1.5px solid #1A1A1A;
	font-size: 1rem;
	line-height: 1.375; /* Regular 16 / 22 */
	font-weight: 400; /* Regular */
}

.fn-single__about p { margin: 0; }
.fn-single__about strong { font-weight: 700; } /* "Field Notes" in Bold (Figma) */

.fn-single__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1.8125rem; /* 29px under the about text */
}

.fn-single__download {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	color: #1A1A1A;
	font-size: 0.875rem;font-weight:500;
	text-decoration: none;
}

.fn-single__download:hover,
.fn-single__download:focus-visible { text-decoration: underline; text-underline-offset: 0.2em; }
.fn-single__download-icon svg { display: block; }

/* Opt-in card: the Home V2 card (home-v2.css) without its page background. */
.fn-optin.hv2-wf {
	height: auto;
	min-height: 0;
	background: transparent;
}

.fn-optin .hv2-fieldnotes {
	display: flex;
	flex-direction: column;
	border-radius: 1rem;
	overflow: hidden;
	background: #1A1A1A;
}

/* Oct 19 design: the Field Note page card differs a little from the homepage one. */
.fn-optin.hv2-wf .hv2-fieldnotes__body { padding: 2.875rem 2rem 2.6875rem; } /* 46 / 32 / 43 */
.fn-optin.hv2-wf .hv2-fieldnotes__heading {
	margin: 0 0 1.25rem; /* 20px to the form */
	font-size: 1.75rem; /* Tobias 28 / 34, "Opt in" in Basel Grotesk Bold */
	line-height: 2.125rem;
}
.fn-optin.hv2-wf .hv2-hs-form .legal-consent-container { margin-top: 1rem; } /* 44px under the email field */
.fn-optin.hv2-wf .hv2-hs-form .hs_submit { margin-top: 4.25rem; } /* 68px under the consent text */
.fn-optin.hv2-wf .hv2-fieldnotes__thanks { padding-top: 2.375rem; } /* 58px under the heading */

/* ---------- Share links (Theme Settings > Share links) ---------- */
.share-links {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.share-links__label {
	font-family: "Basel Grotesk", Arial, sans-serif;
	font-size: 0.875rem;
	font-weight: 500;
	color: #1A1A1A;
}

.share-links__list {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.share-links__list li { margin: 0; padding: 0; }
.share-links__list li::before { content: none; }

.share-links__link {
	display: block;
	transition: opacity 0.2s ease;
}

.share-links__link:hover,
.share-links__link:focus-visible { opacity: 0.7; }

.share-links__link img {
	display: block;
	width: 1.5rem; 
	height: 1.5rem;
	object-fit: contain;
}