/*
 * Blog index, single article, and the content pages.
 *
 * Same rule as the other stylesheets: every measurement is the mockup's, values
 * come from tokens.css, and nothing here declares a raw colour.
 */

/* =========================================================== blog index === */

.fms-blog__header {
	padding-block: 28px 44px;
	border-bottom: 1px solid var(--fms-border);
}

.fms-blog__header h1 {
	margin: 0 0 14px;
	font-size: var(--fms-size-h1);
	line-height: var(--fms-leading-heading);
}

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

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

.fms-blog {
	padding-block: 36px 88px;
}

/* The category chips. A tab that is a link, so each category has a URL. */
.fms-chips--tabs {
	gap: 10px;
	margin-bottom: 48px;
}

.fms-chip--tab {
	padding: 12px 24px 10px;
	border: 1px solid var(--fms-border);
	background: var(--fms-white);
	font-size: var(--fms-size-meta);
}

.fms-chip--tab.is-on {
	border-color: var(--fms-forest);
	background: var(--fms-forest);
	color: var(--fms-cream);
}

/* ------------------------------------------------------- the featured card */

.fms-afeature {
	display: grid;
	grid-template-columns: 648px 1fr;
	gap: 56px;
	align-items: center;
	overflow: hidden;
	margin-bottom: 56px;
	border: 1px solid var(--fms-border);
	border-radius: var(--fms-radius-card);
	background: var(--fms-white);
	box-shadow: var(--fms-shadow-card);
	color: var(--fms-ink);
	transition: border-color var(--fms-transition), box-shadow var(--fms-transition);
}

.fms-afeature:hover {
	border-color: var(--fms-brass);
	box-shadow: var(--fms-shadow-card-hover);
	color: var(--fms-ink);
}

.fms-afeature__art {
	display: block;
	height: 432px;
	overflow: hidden;
	background: var(--fms-sage);
}

.fms-afeature__art img,
.fms-afeature__art .fms-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fms-afeature__body {
	display: block;
	padding: 48px 56px 48px 0;
}

.fms-afeature__title {
	margin: 0 0 16px;
	font-size: var(--fms-size-h2);
	line-height: var(--fms-leading-heading);
	text-wrap: pretty;
}

.fms-afeature__excerpt {
	display: block;
	margin-bottom: 26px;
	font-size: var(--fms-size-lead);
	line-height: var(--fms-leading-lead);
	text-wrap: pretty;
}

.fms-afeature__cta {
	font-size: var(--fms-size-nav);
}

/* ------------------------------------------------------------ the card grid */

.fms-agrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--fms-gap-card);
}

.fms-acard {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--fms-border);
	border-radius: var(--fms-radius-card);
	background: var(--fms-white);
	box-shadow: var(--fms-shadow-card);
	color: var(--fms-ink);
	transition: border-color var(--fms-transition), box-shadow var(--fms-transition);
}

.fms-acard:hover {
	border-color: var(--fms-brass);
	box-shadow: var(--fms-shadow-card-hover);
	color: var(--fms-ink);
}

.fms-acard__art {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--fms-sage);
}

.fms-acard__art img,
.fms-acard__art .fms-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fms-acard__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 28px 28px 32px;
}

.fms-acard__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.fms-acard__tag {
	padding: 6px 13px 5px;
	border-radius: var(--fms-radius-pill);
	background: var(--fms-sage);
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-bold);
	font-size: 10px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fms-ink);
}

.fms-acard__read {
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-regular);
	font-size: var(--fms-size-small);
	color: var(--fms-muted);
}

.fms-acard__title {
	margin: 0 0 12px;
	font-size: 23px;
	line-height: 1.25;
	text-wrap: pretty;
}

.fms-acard__excerpt {
	display: block;
	margin-bottom: 22px;
	font-size: 16px;
	line-height: var(--fms-leading-lead);
	color: var(--fms-muted);
	text-wrap: pretty;
}

.fms-acard__cta {
	display: block;
	margin-top: auto;
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-medium);
	font-size: 14.5px;
	color: var(--fms-brass);
}

/* The featured card's chip is a size up, as the mockup draws it. */
.fms-afeature .fms-acard__tag {
	padding: 7px 15px 6px;
	font-size: 10.5px;
}

.fms-afeature .fms-acard__meta {
	gap: 14px;
	margin-bottom: 18px;
}

.fms-afeature .fms-acard__read {
	font-size: 13.5px;
}

.fms-blog__more {
	margin: 52px 0 0;
	text-align: center;
}

/* ======================================================== single article === */

.fms-article__head {
	padding-block: 28px 0;
}

.fms-article__intro {
	max-width: 1000px;
}

.fms-article__head h1 {
	margin: 0 0 24px;
	font-size: var(--fms-size-hero);
	line-height: var(--fms-leading-heading);
	text-wrap: pretty;
}

/* The standfirst sets to a shorter measure than the title above it. */
.fms-article__lead {
	max-width: 700px;
	margin: 0 0 32px;
	color: var(--fms-ink);
}

.fms-article__byline {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-bottom: 32px;
}

.fms-article__avatar {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--fms-sage);
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-medium);
	font-size: var(--fms-size-nav);
	color: var(--fms-ink);
}

.fms-article__avatar--large {
	width: 52px;
	height: 52px;
	font-size: 16px;
}

/* Renamed away from `fms-article__author`, which is the sidebar's card: the
 * byline's name was inheriting a white box and 26px of padding from it. */
.fms-article__byline-name {
	margin: 0;
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-medium);
	font-size: 15.5px;
	color: var(--fms-ink);
}

.fms-article__dates {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 2px 0 0;
	font-family: var(--fms-font-body);
	font-size: var(--fms-size-meta);
	color: var(--fms-muted);
}

.fms-article__hero {
	height: 560px;
	overflow: hidden;
	border-radius: var(--fms-radius-card);
	background: var(--fms-sage);
}

.fms-article__hero img,
.fms-article__hero .fms-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fms-article__main {
	padding-block: 64px 88px;
}

.fms-article__grid {
	display: grid;
	grid-template-columns: var(--fms-measure) minmax(0, 1fr);
	gap: 80px;
	align-items: start;
}

/* --------------------------------------------------------------- the prose
 * 17px at 1.7, which is the mockups' running text. Criterion 5's 16.5 at 1.55
 * is the lead and section intro measure, not this.
 */

/*
 * 17px at 1.55, which is what mockup 06 sets on the article body.
 *
 * This read --fms-leading-list, which is 2.1 and is the footer link leading:
 * the mockups use 2.1 on the stacked footer columns and nowhere else. The
 * article body was rendering at a 35.7px line, half again as loose as designed,
 * on every article. Caught by measuring criterion 5 rather than by reading.
 */
.fms-prose-article {
	font-size: var(--fms-size-article);
	line-height: var(--fms-leading-lead);
}

.fms-prose-article > * {
	max-width: 100%;
}

.fms-prose-article p {
	margin: 0 0 18px;
	text-wrap: pretty;
}

.fms-prose-article h2 {
	margin: 44px 0 18px;
	font-size: 30px;
	line-height: var(--fms-leading-heading);
	text-wrap: pretty;
}

.fms-prose-article h3 {
	margin: 32px 0 14px;
	font-size: var(--fms-size-h4);
	line-height: 1.25;
}

.fms-prose-article h2:first-child,
.fms-prose-article h3:first-child {
	margin-top: 0;
}

.fms-prose-article ul,
.fms-prose-article ol {
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

/* A brass dot on its own line rather than a marker, as drawn. */
.fms-prose-article ul li {
	position: relative;
	margin-bottom: 12px;
	padding-left: 19px;
	text-wrap: pretty;
}

.fms-prose-article ul li::before {
	content: "";
	position: absolute;
	top: 12px;
	left: 0;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--fms-brass);
}

.fms-prose-article ol {
	counter-reset: fms-step;
}

.fms-prose-article ol li {
	counter-increment: fms-step;
	position: relative;
	margin-bottom: 12px;
	padding-left: 28px;
}

.fms-prose-article ol li::before {
	content: counter(fms-step) ".";
	position: absolute;
	left: 0;
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-medium);
	color: var(--fms-brass);
}

/* The pull quote: a forest panel, not an indented italic. */
.fms-prose-article blockquote {
	margin: 36px 0;
	padding: 38px 42px;
	border: 0;
	border-radius: var(--fms-radius-card);
	background: var(--fms-forest);
	color: var(--fms-cream);
	font-family: var(--fms-font-heading);
	font-weight: var(--fms-weight-semibold);
	font-size: var(--fms-size-h4);
	line-height: 1.35;
}

.fms-prose-article blockquote p {
	margin: 0;
	color: var(--fms-cream);
}

.fms-prose-article blockquote cite {
	display: block;
	margin-top: 14px;
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-regular);
	font-size: var(--fms-size-meta);
	font-style: normal;
	color: var(--fms-cream-78);
}

.fms-prose-article img,
.fms-prose-article figure img {
	border-radius: var(--fms-radius-card);
}

.fms-prose-article figure {
	margin: 32px 0;
}

.fms-prose-article figcaption {
	margin-top: 10px;
	font-family: var(--fms-font-body);
	font-size: var(--fms-size-meta);
	color: var(--fms-muted);
}

.fms-prose-article a:not(.fms-button) {
	color: var(--fms-forest);
	text-decoration: underline;
	text-decoration-color: var(--fms-brass);
	text-underline-offset: 3px;
}

.fms-prose-article a:not(.fms-button):hover {
	color: var(--fms-brass);
}

/*
 * The in body product block is a card, not running text. Its name is a heading
 * with a price and a button beside it, so the underline that running text needs
 * only puts a rule under a product title. The same reasoning as the base rule:
 * a product card has its own shape.
 */
.fms-prose-article .fms-reach a:not(.fms-button) {
	text-decoration: none;
}

/* The standing medicines warning at the foot of every article. */
.fms-article__label {
	margin-top: 36px;
	padding: 30px 32px;
	border: 1px solid var(--fms-border);
	border-radius: var(--fms-radius-card);
	background: var(--fms-sage);
}

.fms-article__label p {
	margin: 0;
	font-size: var(--fms-size-nav);
	line-height: var(--fms-leading-lead);
	color: var(--fms-muted);
}

/* ---------------------------------------------------------- the sidebar */

.fms-article__side {
	display: flex;
	flex-direction: column;
	gap: 20px;
	position: sticky;
	top: calc(var(--fms-nav-h) + 20px);
}

.fms-article__toc,
.fms-article__author,
.fms-article__signup {
	padding: 26px 24px;
	border: 1px solid var(--fms-border);
	border-radius: var(--fms-radius-card);
	background: var(--fms-white);
}

.fms-article__toc ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.fms-article__toc a {
	display: flex;
	align-items: center;
	min-height: var(--fms-tap-min);
	padding: 9px 0;
	font-family: var(--fms-font-body);
	font-size: var(--fms-size-nav);
	line-height: 1.45;
	color: var(--fms-ink);
}

.fms-article__toc a:hover {
	color: var(--fms-brass);
}

.fms-article__author {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.fms-article__author-name {
	margin: 0 0 4px;
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-medium);
	font-size: 15.5px;
	color: var(--fms-ink);
}

.fms-article__author-bio {
	margin: 0;
	font-family: var(--fms-font-body);
	font-size: var(--fms-size-meta);
	line-height: var(--fms-leading-lead);
	color: var(--fms-muted);
}

.fms-article__signup {
	border-color: transparent;
	background: var(--fms-forest);
}

.fms-article__signup h2 {
	margin: 0 0 12px;
	font-size: 21px;
	line-height: 1.25;
	color: var(--fms-cream);
}

.fms-article__related {
	padding-block: 72px;
}

.fms-article__related .fms-band__header {
	text-align: left;
}

.fms-article__related .fms-band__header + * {
	margin-top: 36px;
}

/* ==================================== what we would reach for, in article === */

.fms-reach {
	margin: 44px 0;
	padding: 38px 36px;
	border: 1px solid var(--fms-border);
	border-top: 4px solid var(--fms-brass);
	border-radius: var(--fms-radius-card);
	background: var(--fms-white);
	box-shadow: var(--fms-shadow-card);
}

.fms-reach__title {
	margin: 0 0 8px;
	font-size: 27px;
	line-height: var(--fms-leading-heading);
}

.fms-reach__lead {
	margin: 0 0 22px;
	font-size: var(--fms-size-nav);
	line-height: var(--fms-leading-lead);
	color: var(--fms-muted);
}

.fms-reach__list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

.fms-reach__row {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 0;
	padding: 18px 20px;
	border: 1px solid var(--fms-border);
	border-radius: 12px;
	background: var(--fms-cream);
}

/* The prose rules add a bullet and a left indent to every li. Not to these. */
.fms-prose-article .fms-reach__row {
	padding-left: 20px;
}

.fms-prose-article .fms-reach__row::before {
	content: none;
}

.fms-reach__art {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	overflow: hidden;
	border-radius: 10px;
	background: var(--fms-white);
}

.fms-reach__art img,
.fms-reach__art .fms-placeholder {
	max-width: 72%;
	max-height: 72%;
	object-fit: contain;
}

.fms-reach__body {
	display: block;
	flex: 1;
	min-width: 0;
}

.fms-reach__brand {
	display: block;
	margin-bottom: 4px;
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-bold);
	font-size: 10.5px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fms-muted);
}

.fms-reach__name {
	margin: 0 0 5px;
	font-size: 19px;
	line-height: 1.25;
}

.fms-reach__name a {
	color: var(--fms-ink);
	text-decoration: none;
}

.fms-reach__name a:hover {
	color: var(--fms-brass);
}

.fms-reach__why {
	display: block;
	font-family: var(--fms-font-body);
	font-size: var(--fms-size-meta);
	line-height: var(--fms-leading-lead);
	color: var(--fms-muted);
}

.fms-reach__action {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	text-align: right;
}

.fms-reach__price {
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-medium);
	font-size: 16px;
	color: var(--fms-brass);
}

.fms-reach__gated {
	font-family: var(--fms-font-body);
	font-size: var(--fms-size-small);
	color: var(--fms-muted);
}

.fms-reach__button {
	padding: 12px 22px 10px;
	font-size: var(--fms-size-small);
	white-space: nowrap;
}

/* ========================================================= content pages === */

.fms-page__header {
	padding-block: 28px 44px;
	border-bottom: 1px solid var(--fms-border);
}

.fms-page__header h1 {
	margin: 0 0 14px;
	font-size: var(--fms-size-h1);
	line-height: var(--fms-leading-heading);
}

.fms-page__intro {
	max-width: var(--fms-measure);
	margin: 0;
}

.fms-page {
	padding-block: 56px 88px;
}

.fms-page__grid {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 64px;
	align-items: start;
}

.fms-page__nav {
	position: sticky;
	top: calc(var(--fms-nav-h) + 20px);
	padding: 14px;
	border: 1px solid var(--fms-border);
	border-radius: var(--fms-radius-card);
	background: var(--fms-white);
	box-shadow: var(--fms-shadow-card);
}

.fms-page__nav-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fms-page__nav-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: var(--fms-tap-min);
	padding: 15px 18px;
	border-radius: 10px;
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-medium);
	font-size: var(--fms-size-nav);
	color: var(--fms-ink);
}

.fms-page__nav-list a:hover {
	background: var(--fms-cream);
	color: var(--fms-ink);
}

.fms-page__nav-list .current-menu-item > a,
.fms-page__nav-list .current_page_item > a {
	background: var(--fms-sage);
	color: var(--fms-ink);
}

/* -------------------------------------------------------- the page's prose */

.fms-prose-page {
	min-width: 0;
	font-size: var(--fms-size-lead);
	line-height: var(--fms-leading-lead);
}

.fms-prose-page > *:first-child {
	margin-top: 0;
}

.fms-prose-page p {
	margin: 0 0 18px;
	text-wrap: pretty;
}

.fms-prose-page h2 {
	margin: 56px 0 24px;
	font-size: 32px;
	line-height: var(--fms-leading-heading);
	text-wrap: pretty;
}

.fms-prose-page h2:first-child {
	margin-top: 0;
}

.fms-prose-page h3 {
	margin: 32px 0 12px;
	font-size: 21px;
	line-height: 1.25;
}

.fms-prose-page ul,
.fms-prose-page ol {
	margin: 0 0 18px;
	padding-left: 22px;
}

.fms-prose-page li {
	margin-bottom: 10px;
}

.fms-prose-page li::marker {
	color: var(--fms-brass);
}

.fms-prose-page a:not(.fms-button) {
	color: var(--fms-forest);
	text-decoration: underline;
	text-decoration-color: var(--fms-brass);
	text-underline-offset: 3px;
}

.fms-prose-page a:not(.fms-button):hover {
	color: var(--fms-brass);
}

/*
 * A table block, drawn as the mockup's shipping table: a forest header row and
 * hairline rows under it. `overflow-x: auto` on the figure is what keeps a wide
 * table from making the page scroll sideways at 390px.
 */
.fms-prose-page figure.wp-block-table {
	margin: 0 0 44px;
	overflow-x: auto;
	border: 1px solid var(--fms-border);
	border-radius: var(--fms-radius-card);
	background: var(--fms-white);
}

.fms-prose-page .wp-block-table table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
}

.fms-prose-page .wp-block-table thead {
	border: 0;
	background: var(--fms-forest);
}

.fms-prose-page .wp-block-table th {
	padding: 16px 24px;
	border: 0;
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-bold);
	font-size: var(--fms-size-eyebrow);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: left;
	color: var(--fms-cream);
}

.fms-prose-page .wp-block-table td {
	padding: 18px 24px;
	border: 0;
	border-bottom: 1px solid var(--fms-border);
	font-family: var(--fms-font-body);
	font-size: 15.5px;
	text-align: left;
	color: var(--fms-ink);
}

.fms-prose-page .wp-block-table tr:last-child td {
	border-bottom: 0;
}

/*
 * The FAQ accordion is a core details block. Native, so it opens without
 * JavaScript, is keyboard operable and is announced correctly, which is three
 * things a hand-built accordion has to be given.
 */
.fms-prose-page .wp-block-details {
	margin: 0 0 12px;
	overflow: hidden;
	border: 1px solid var(--fms-border);
	border-radius: var(--fms-radius-card);
	background: var(--fms-white);
}

.fms-prose-page .wp-block-details[open] {
	border-color: var(--fms-brass);
}

.fms-prose-page .wp-block-details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: var(--fms-tap-min);
	padding: 24px 28px;
	cursor: pointer;
	font-family: var(--fms-font-heading);
	font-weight: var(--fms-weight-semibold);
	font-size: 19px;
	line-height: 1.3;
	color: var(--fms-ink);
	list-style: none;
}

/*
 * The FAQ questions were the only clickable things on that page with no hover
 * state: four rows that look like plain headings until you click one.
 */
.fms-prose-page .wp-block-details summary:hover {
	background: var(--fms-cream);
}

.fms-prose-page .wp-block-details summary:hover::after {
	border-color: var(--fms-brass);
}

.fms-prose-page .wp-block-details summary::-webkit-details-marker,
.fms-prose-page .wp-block-details summary::marker {
	display: none;
	content: "";
}

/* The chevron, drawn rather than imported, and rotated when the panel opens. */
.fms-prose-page .wp-block-details summary::after {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--fms-brass);
	border-bottom: 2px solid var(--fms-brass);
	transform: rotate(45deg) translateY(-2px);
	transition: transform var(--fms-transition);
}

.fms-prose-page .wp-block-details[open] summary::after {
	transform: rotate(225deg) translateY(-2px);
}

.fms-prose-page .wp-block-details > *:not(summary) {
	padding: 0 28px;
}

.fms-prose-page .wp-block-details > *:last-child:not(summary) {
	padding-bottom: 28px;
}

.fms-prose-page .wp-block-details p {
	font-size: 16px;
	color: var(--fms-muted);
}

/*
 * The three help cards. A columns block with the class `fms-help` on it, so an
 * editor builds them in Gutenberg and the theme only decides how they look.
 */
.fms-prose-page .fms-help {
	gap: 20px;
	margin-top: 24px;
}

.fms-prose-page .fms-help .wp-block-column {
	padding: 28px 26px;
	border: 1px solid var(--fms-border);
	border-top: 4px solid var(--fms-brass);
	border-radius: var(--fms-radius-card);
	background: var(--fms-white);
	box-shadow: var(--fms-shadow-card);
}

.fms-prose-page .fms-help h3 {
	margin: 0 0 8px;
	font-size: 19px;
	line-height: 1.25;
}

.fms-prose-page .fms-help p {
	margin: 0 0 10px;
	font-size: 15px;
	line-height: var(--fms-leading-lead);
	color: var(--fms-muted);
}

.fms-prose-page .fms-help p:last-child {
	margin-bottom: 0;
}

/* ============================================================ breakpoints === */

@media (max-width: 1100px) {
	.fms-afeature {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.fms-afeature__art {
		height: 340px;
	}

	.fms-afeature__body {
		padding: 32px 34px 36px;
	}

	.fms-agrid {
		grid-template-columns: repeat(2, 1fr);
	}

	.fms-article__grid,
	.fms-page__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.fms-article__side,
	.fms-page__nav {
		position: static;
	}

	.fms-article__hero {
		height: 380px;
	}
}

@media (max-width: 600px) {
	.fms-blog__header,
	.fms-page__header {
		padding-block: 20px 32px;
	}

	.fms-blog__header h1,
	.fms-page__header h1 {
		font-size: var(--fms-size-h1-m);
	}

	.fms-blog {
		padding-block: 24px var(--fms-band-y-m);
	}

	.fms-chips--tabs {
		gap: 8px;
		margin-bottom: 28px;
	}

	.fms-agrid {
		grid-template-columns: 1fr;
		gap: var(--fms-gap-card-m);
	}

	.fms-afeature {
		margin-bottom: 32px;
	}

	.fms-afeature__art {
		height: 227px;
	}

	.fms-afeature__body {
		padding: 26px 24px 30px;
	}

	.fms-afeature__title {
		font-size: var(--fms-size-h2-m);
	}

	.fms-acard__body {
		padding: 22px 22px 26px;
	}

	.fms-acard__title {
		font-size: 20px;
	}

	.fms-blog__more {
		margin-top: 32px;
	}

	/* ------------------------------------------------------------- article */

	.fms-article__head h1 {
		font-size: var(--fms-size-hero-m);
	}

	.fms-article__hero {
		height: 214px;
	}

	.fms-article__main {
		padding-block: 32px var(--fms-band-y-m);
	}

	.fms-prose-article h2 {
		margin-top: 32px;
		font-size: var(--fms-size-h1-m);
	}

	.fms-prose-article blockquote {
		padding: 26px 24px;
		font-size: var(--fms-size-h3-m);
	}

	.fms-article__label {
		padding: 22px 20px;
	}

	.fms-reach {
		margin: 32px 0;
		padding: 26px 22px;
	}

	.fms-reach__row {
		flex-wrap: wrap;
		gap: 14px;
	}

	.fms-reach__action {
		align-items: flex-start;
		width: 100%;
		text-align: left;
	}

	.fms-reach__button {
		width: 100%;
	}

	/* ---------------------------------------------------------------- page */

	.fms-page {
		padding-block: 24px var(--fms-band-y-m);
	}

	.fms-prose-page h2 {
		margin-top: 40px;
		font-size: var(--fms-size-h1-m);
	}

	.fms-prose-page .wp-block-table th,
	.fms-prose-page .wp-block-table td {
		padding: 14px 18px;
		white-space: nowrap;
	}

	.fms-prose-page .wp-block-details summary {
		padding: 20px 22px;
		font-size: 17px;
	}

	.fms-prose-page .wp-block-details > *:not(summary) {
		padding-inline: 22px;
	}

	.fms-prose-page .fms-help {
		margin-top: 16px;
	}
}

/*
 * The placeholder notice on the four content pages.
 *
 * Deliberately loud. These pages carry shipping, returns and FAQ wording that
 * FM Supplements has not supplied or approved, and that is contractual text
 * rather than design copy. It should be impossible to publish this site without
 * noticing. DECISIONS.md section E carries it as the first content task.
 */
.fms-placeholder-notice {
	margin: 0 0 32px;
	padding: 18px 22px;
	border: 1px solid var(--fms-brass);
	border-left-width: 4px;
	border-radius: var(--fms-radius-input);
	background: var(--fms-sage);
	font-family: var(--fms-font-body);
	font-size: var(--fms-size-meta);
	line-height: var(--fms-leading-lead);
	color: var(--fms-ink);
}

/* ------------------------------------------- the signup card's form, on forest */

.fms-article__signup .gform_wrapper .gfield_label,
.fms-article__signup .gform_wrapper .gform_required_legend {
	color: var(--fms-cream);
}

.fms-article__signup .gform_wrapper .gfield_description,
.fms-article__signup .gform_wrapper .ginput_counter {
	color: var(--fms-cream-78);
}

.fms-article__signup .gform_wrapper input[type="text"],
.fms-article__signup .gform_wrapper input[type="email"] {
	border: 0;
	border-radius: var(--fms-radius-pill);
	background: var(--fms-white);
	color: var(--fms-ink);
}

.fms-article__signup .gform_wrapper input[type="submit"],
.fms-article__signup .gform_wrapper .gform_button {
	width: 100%;
	background: var(--fms-brass);
	color: var(--fms-ink);
}

.fms-article__signup .gform_wrapper input[type="submit"]:hover,
.fms-article__signup .gform_wrapper .gform_button:hover {
	background: linear-gradient(var(--fms-white-15), var(--fms-white-15)), var(--fms-brass);
	color: var(--fms-ink);
}

/* ============================================================ blog banner === */

/*
 * The Advanced Functional Medicine blog promo. Not FM Supplements furniture:
 * the whole card links out to fmsupplements.com.au and the copy is in the third
 * person. See blocks/blog-banner.php, and assets/blog-banner/ for the version
 * that carries none of this stylesheet with it.
 */

.fms-banner {
	padding-block: 40px;
	border-top: 1px solid var(--fms-border);
}

.fms-banner__card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 48px;
	overflow: hidden;
	height: 264px;
	padding: 0 64px 0 200px;
	border: 1px solid var(--fms-border);
	border-radius: var(--fms-radius-card);
	background: var(--fms-sage);
	color: var(--fms-ink);
	transition: border-color var(--fms-transition);
}

.fms-banner__card:hover {
	border-color: var(--fms-brass);
	color: var(--fms-ink);
}

/* The leaf bleeds off the left edge at a tenth opacity. Decoration only. */
.fms-banner__leaf {
	position: absolute;
	top: 50%;
	left: -92px;
	width: 420px;
	height: 420px;
	flex: none;
	transform: translateY(-50%) rotate(-14deg) scaleX(-1);
	opacity: 0.1;
	fill: var(--fms-forest);
	pointer-events: none;
}

.fms-banner__logo {
	position: relative;
	flex: none;
	display: block;
	width: 280px;
}

.fms-banner__logo svg {
	display: block;
	width: 100%;
	height: auto;
}

.fms-banner__rule {
	position: relative;
	flex: none;
	display: block;
	width: 1px;
	height: 148px;
	background: var(--fms-border);
}

.fms-banner__copy {
	position: relative;
	display: block;
	flex: 1;
	max-width: 520px;
}

.fms-banner__heading {
	display: block;
	margin-bottom: 10px;
	font-family: var(--fms-font-heading);
	font-weight: var(--fms-weight-semibold);
	font-size: var(--fms-size-h3);
	line-height: var(--fms-leading-heading);
	color: var(--fms-ink);
	text-wrap: pretty;
}

.fms-banner__text {
	display: block;
	font-family: var(--fms-font-body);
	font-size: 15.5px;
	line-height: var(--fms-leading-lead);
	color: var(--fms-muted);
	text-wrap: pretty;
}

.fms-banner__action {
	position: relative;
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	margin-left: auto;
}

.fms-banner__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--fms-tap-min);
	padding: 16px 34px 14px;
	border-radius: var(--fms-radius-pill);
	background: var(--fms-forest);
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-medium);
	font-size: var(--fms-size-meta);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--fms-cream);
}

.fms-banner__card:hover .fms-banner__cta {
	background: linear-gradient(var(--fms-shade-22), var(--fms-shade-22)), var(--fms-forest);
}

.fms-banner__domain {
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-medium);
	font-size: var(--fms-size-meta);
	color: var(--fms-brass);
}

@media (max-width: 1100px) {
	.fms-banner__card {
		gap: 32px;
		padding: 0 40px 0 140px;
	}

	.fms-banner__logo {
		width: 200px;
	}

	.fms-banner__leaf {
		left: -140px;
	}
}

@media (max-width: 900px) {
	/* The card stacks, which is the mobile artboard's 342 by 380 shape. */
	.fms-banner__card {
		display: block;
		height: auto;
		padding: 30px 26px 32px;
		text-align: left;
	}

	.fms-banner__logo {
		width: 180px;
		margin-bottom: 22px;
	}

	.fms-banner__rule {
		display: none;
	}

	.fms-banner__copy {
		max-width: none;
		margin-bottom: 20px;
	}

	.fms-banner__heading {
		margin-bottom: 8px;
		font-size: var(--fms-size-h3-m);
	}

	.fms-banner__text {
		font-size: var(--fms-size-nav);
	}

	.fms-banner__action {
		display: block;
		margin-left: 0;
	}

	.fms-banner__cta {
		display: flex;
		width: 100%;
		min-height: 50px;
		padding: 16px 0 14px;
	}

	.fms-banner__domain {
		display: block;
		margin-top: 14px;
		font-size: 13.5px;
		text-align: center;
	}

	.fms-banner__leaf {
		top: auto;
		bottom: -120px;
		left: -120px;
		width: 320px;
		height: 320px;
		transform: rotate(-14deg) scaleX(-1);
	}
}

@media (max-width: 600px) {
	.fms-banner {
		padding-block: 28px;
	}
}