/*
 * Braaimate design system for GeneratePress.
 * Version 1.1.0. Companion to design/design-blueprint.md.
 *
 * Contents
 *  1. Tokens
 *  2. Base typography and GeneratePress overrides
 *  3. Header and navigation
 *  4. Buttons
 *  5. Utilities: eyebrow, section, dark band
 *  6. Signature component: the swap card
 *  7. Content cards
 *  8. Homepage: hero and the three-step ladder
 *  9. Recipe components
 * 10. Roundup and review components
 * 11. Category hub components
 * 12. Newsletter and footer
 * 13. Focus, motion, accessibility
 * 14. Responsive
 */

/* 1. Tokens ---------------------------------------------------- */

:root {
	--bm-charcoal: #26221e;
	--bm-charcoal-soft: #332e28;
	--bm-paper: #faf6ef;
	--bm-bone: #f0e8da;
	--bm-ember: #e8551c;
	--bm-ember-deep: #b84311;
	--bm-ember-bright: #ff6b2e; /* small text accents on charcoal only */
	--bm-veld: #57613a;
	--bm-smoke: #6e675c;

	--bm-display: "Bricolage Grotesque", "Arial Narrow", Arial, sans-serif;
	--bm-serif: "Source Serif 4", Georgia, serif;

	--bm-radius: 14px;
	--bm-radius-pill: 100px;
	--bm-space: 8px;
	--bm-section: 112px;
	--bm-content: 720px;
	--bm-wide: 1200px;

	--bm-shadow-soft: 0 2px 8px rgba(38, 34, 30, 0.06), 0 12px 32px rgba(38, 34, 30, 0.07);
	--bm-shadow-deep: 0 4px 12px rgba(38, 34, 30, 0.1), 0 24px 56px rgba(38, 34, 30, 0.14);

	/* Film grain for dark surfaces, tiny inline SVG noise */
	--bm-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 2. Base typography and GeneratePress overrides ---------------- */

body {
	background-color: var(--bm-paper);
	color: var(--bm-charcoal);
	font-family: var(--bm-serif);
	font-size: 18px;
	line-height: 1.68;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--bm-ember);
	color: var(--bm-paper);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.page-header h1 {
	font-family: var(--bm-display);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.015em;
	color: var(--bm-charcoal);
}

h1, .entry-title { font-size: 46px; font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: 34px; font-weight: 800; margin-top: 2em; }
h3 { font-size: 23px; }

.entry-content > p,
.entry-content > ul,
.entry-content > ol {
	max-width: var(--bm-content);
}

.entry-content > p.has-large-font-size {
	font-size: 22px;
	line-height: 1.5;
	color: var(--bm-charcoal);
}

a {
	color: var(--bm-ember-deep);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 0.15s ease;
}

a:hover {
	color: var(--bm-charcoal);
}

.entry-meta,
.posted-on,
.byline {
	font-family: var(--bm-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bm-smoke);
}

blockquote,
.wp-block-quote {
	border-left: 3px solid var(--bm-ember);
	background: var(--bm-bone);
	padding: 28px 36px;
	font-style: italic;
	font-size: 19px;
	border-radius: 0 var(--bm-radius) var(--bm-radius) 0;
	max-width: var(--bm-content);
}

figure img,
.wp-block-image img {
	border-radius: var(--bm-radius);
}

/* 3. Header and navigation -------------------------------------- */

.site-header {
	background-color: var(--bm-paper);
	border-bottom: 1px solid rgba(38, 34, 30, 0.1);
}

.site-header .inside-header {
	padding-top: 26px;
	padding-bottom: 26px;
}

.main-title,
.site-header .main-title a {
	font-family: var(--bm-display);
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--bm-charcoal);
}

.site-description {
	font-family: var(--bm-serif);
	font-style: italic;
	font-size: 14px;
	color: var(--bm-smoke);
}

.main-navigation {
	background-color: transparent;
}

.main-navigation .main-nav ul li a {
	font-family: var(--bm-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bm-charcoal);
	padding-left: 16px;
	padding-right: 16px;
	transition: color 0.15s ease;
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item > a {
	color: var(--bm-ember-deep);
}

/* Header newsletter CTA: give the last menu item this class in
   Appearance, Menus, CSS Classes field. */
.main-navigation .main-nav ul li.bm-nav-cta > a {
	background: var(--bm-charcoal);
	color: var(--bm-paper);
	border-radius: var(--bm-radius-pill);
	padding-left: 24px;
	padding-right: 24px;
	margin-left: 12px;
	transition: background-color 0.2s ease;
}

.main-navigation .main-nav ul li.bm-nav-cta > a:hover {
	background: var(--bm-ember-deep);
	color: var(--bm-paper);
}

/* 4. Buttons ----------------------------------------------------- */

.wp-block-button__link,
.bm-btn {
	font-family: var(--bm-display);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
	border-radius: var(--bm-radius-pill);
	padding: 16px 32px;
	background-color: var(--bm-charcoal);
	color: var(--bm-paper);
	border: 1.5px solid var(--bm-charcoal);
	box-shadow: 0 1px 2px rgba(38, 34, 30, 0.18);
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.wp-block-button__link:hover,
.bm-btn:hover {
	background-color: var(--bm-charcoal-soft);
	color: var(--bm-paper);
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(38, 34, 30, 0.22);
}

.is-style-outline .wp-block-button__link,
.bm-btn--outline {
	background-color: transparent;
	color: var(--bm-charcoal);
	border: 1.5px solid var(--bm-charcoal);
	box-shadow: none;
}

.is-style-outline .wp-block-button__link:hover,
.bm-btn--outline:hover {
	background-color: var(--bm-charcoal);
	color: var(--bm-paper);
}

/* Outline buttons sitting on dark surfaces */
.bm-hero .is-style-outline .wp-block-button__link,
.bm-band .is-style-outline .wp-block-button__link {
	color: var(--bm-paper);
	border-color: rgba(250, 246, 239, 0.55);
}

.bm-hero .is-style-outline .wp-block-button__link:hover,
.bm-band .is-style-outline .wp-block-button__link:hover {
	background-color: var(--bm-paper);
	color: var(--bm-charcoal);
	border-color: var(--bm-paper);
}

/* Ember button, for dark bands and money CTAs only */
.bm-btn--ember .wp-block-button__link,
.bm-btn--ember {
	background-color: var(--bm-ember-deep);
	border-color: var(--bm-ember-deep);
	color: var(--bm-paper);
	box-shadow: 0 2px 10px rgba(232, 85, 28, 0.35);
}

.bm-btn--ember .wp-block-button__link:hover,
.bm-btn--ember:hover {
	background-color: var(--bm-ember-bright);
	border-color: var(--bm-ember-bright);
	color: var(--bm-charcoal);
	box-shadow: 0 6px 20px rgba(232, 85, 28, 0.45);
}

/* Arrow nudge: add the arrow as text inside the button label */
.wp-block-button__link .bm-arrow,
.bm-btn .bm-arrow {
	display: inline-block;
	margin-left: 8px;
	transition: transform 0.25s ease-out;
}

.wp-block-button__link:hover .bm-arrow,
.bm-btn:hover .bm-arrow {
	transform: translateX(4px);
}

/* 5. Utilities --------------------------------------------------- */

.bm-eyebrow {
	font-family: var(--bm-display);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bm-veld);
	margin-bottom: 16px;
}

.bm-eyebrow::before {
	content: "";
	display: inline-block;
	width: 26px;
	height: 2px;
	background: var(--bm-ember);
	vertical-align: middle;
	margin-right: 12px;
	margin-top: -2px;
}

.bm-section {
	padding-top: var(--bm-section);
	padding-bottom: var(--bm-section);
}

/* Dark story band: a brand moment on charcoal, lit from below by
   an ambient ember glow and finished with film grain */
.bm-band {
	background-color: var(--bm-charcoal);
	background-image: radial-gradient(90% 70% at 50% 115%, rgba(232, 85, 28, 0.2), transparent 70%);
	color: var(--bm-paper);
	position: relative;
	overflow: hidden;
}

.bm-band::after,
.bm-hero::after,
.bm-newsletter::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--bm-grain);
	opacity: 0.05;
	pointer-events: none;
}

.bm-band h1, .bm-band h2, .bm-band h3, .bm-band p {
	color: var(--bm-paper);
}

.bm-band h2 {
	font-size: 40px;
	max-width: 22ch;
}

.bm-band .bm-eyebrow {
	color: var(--bm-ember-bright);
}

.bm-band a {
	color: var(--bm-paper);
}

/* 6. Signature component: the swap card ------------------------- */

.bm-swap {
	display: grid;
	grid-template-columns: 1fr 60px 1fr;
	align-items: stretch;
	border-radius: var(--bm-radius);
	overflow: hidden;
	max-width: var(--bm-content);
	margin: 36px 0;
	box-shadow: var(--bm-shadow-soft);
}

.bm-swap__sa {
	background: var(--bm-charcoal);
	color: var(--bm-paper);
	padding: 28px;
}

.bm-swap__arrow {
	background: var(--bm-ember);
	color: var(--bm-charcoal);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--bm-display);
	font-size: 28px;
	font-weight: 800;
}

.bm-swap__au {
	background: var(--bm-bone);
	color: var(--bm-charcoal);
	padding: 28px;
}

.bm-swap__label {
	font-family: var(--bm-display);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.65;
	margin-bottom: 8px;
}

.bm-swap__item {
	font-family: var(--bm-display);
	font-size: 22px;
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.01em;
	margin: 0;
}

/* The wry one-liner rendered as a sibling below the card */
.bm-swap-note {
	font-family: var(--bm-serif);
	font-style: italic;
	font-size: 15px;
	color: var(--bm-smoke);
	max-width: var(--bm-content);
	margin: -22px 0 36px;
}

/* Swap grid for hub and homepage strips */
.bm-swap-grid .bm-swap {
	max-width: none;
	margin: 0;
}

.bm-swap-grid .bm-swap-note {
	margin: 14px 0 0;
}

/* Narrow grid columns: smaller item type so words never break */
.bm-swap-grid .bm-swap__item {
	font-size: 18px;
	overflow-wrap: normal;
}

/* 7. Content cards ----------------------------------------------- */

.bm-card {
	background: #fffdf8;
	border: 1px solid rgba(38, 34, 30, 0.08);
	border-radius: var(--bm-radius);
	overflow: hidden;
	height: 100%;
	box-shadow: 0 1px 3px rgba(38, 34, 30, 0.05);
	transition: box-shadow 0.25s ease;
}

.bm-card:hover {
	box-shadow: var(--bm-shadow-deep);
}

.bm-card img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	width: 100%;
	border-radius: 0;
	transition: filter 0.25s ease;
}

.bm-card:hover img {
	filter: brightness(1.06);
}

.bm-card__body {
	padding: 28px;
}

.bm-card__type {
	font-family: var(--bm-display);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bm-veld);
	margin-bottom: 10px;
}

.bm-card__title,
.bm-card h3 {
	font-size: 21px;
	font-weight: 800;
	letter-spacing: -0.01em;
	margin: 0 0 10px;
}

.bm-card__title a,
.bm-card h3 a {
	color: var(--bm-charcoal);
	text-decoration: none;
}

.bm-card:hover .bm-card__title a,
.bm-card:hover h3 a {
	text-decoration: underline;
	text-decoration-thickness: 2.5px;
	text-decoration-color: var(--bm-ember);
	text-underline-offset: 4px;
}

.bm-card__dek {
	font-size: 16px;
	line-height: 1.55;
	color: var(--bm-charcoal);
	margin: 0 0 14px;
}

.bm-card__meta {
	font-size: 13px;
	color: var(--bm-smoke);
}

/* 8. Homepage: hero and ladder ----------------------------------- */

.bm-hero {
	background-color: var(--bm-charcoal);
	background-image: radial-gradient(80% 90% at 15% 120%, rgba(232, 85, 28, 0.28), transparent 65%);
	color: var(--bm-paper);
	padding-top: 140px;
	padding-bottom: 140px;
	position: relative;
	overflow: hidden;
}

.bm-hero h1 {
	font-size: clamp(52px, 6.6vw, 96px);
	font-weight: 800;
	line-height: 0.96;
	letter-spacing: -0.03em;
	color: var(--bm-paper);
	max-width: 13ch;
	animation: bm-rise 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.bm-hero p {
	font-size: 21px;
	line-height: 1.55;
	color: rgba(250, 246, 239, 0.88);
	max-width: 44ch;
	animation: bm-rise 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) 0.12s both;
}

.bm-hero .bm-eyebrow {
	color: var(--bm-ember-bright);
}

.bm-hero .wp-block-buttons {
	animation: bm-rise 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both;
}

.bm-hero img {
	box-shadow: var(--bm-shadow-deep);
}

@keyframes bm-rise {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Three-step ladder, adapted from the meater.com step structure */
.bm-ladder .bm-ladder__step {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
	padding: 64px 0;
	border-bottom: 1px solid rgba(38, 34, 30, 0.12);
}

.bm-ladder .bm-ladder__step:last-child {
	border-bottom: none;
}

.bm-ladder h3 {
	font-size: 32px;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0 0 14px;
}

.bm-ladder p {
	font-size: 18px;
	max-width: 42ch;
}

.bm-ladder img {
	border-radius: var(--bm-radius);
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	box-shadow: var(--bm-shadow-soft);
}

.bm-ladder .bm-ladder__step:nth-child(even) img {
	order: -1;
}

/* 9. Recipe components -------------------------------------------- */

/* Meta bar, adapted from the ooni.com recipe meta row */
.bm-meta-bar {
	display: flex;
	flex-wrap: wrap;
	border-top: 1px solid rgba(38, 34, 30, 0.14);
	border-bottom: 1px solid rgba(38, 34, 30, 0.14);
	padding: 18px 0;
	margin: 28px 0 36px;
	max-width: var(--bm-content);
}

.bm-meta-bar__item {
	font-family: var(--bm-display);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bm-veld);
	padding: 0 28px;
	border-left: 1px solid rgba(38, 34, 30, 0.14);
}

.bm-meta-bar__item:first-child {
	padding-left: 0;
	border-left: none;
}

.bm-meta-bar__item strong {
	display: block;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--bm-charcoal);
	margin-top: 2px;
}

/* Two-column recipe body with sticky ingredients on desktop */
.bm-recipe-layout {
	display: grid;
	grid-template-columns: 340px 1fr;
	gap: 64px;
	align-items: start;
	max-width: var(--bm-wide);
}

.bm-ingredients {
	position: sticky;
	top: 96px;
	background: var(--bm-bone);
	border-top: 3px solid var(--bm-ember);
	border-radius: var(--bm-radius);
	padding: 32px;
	box-shadow: 0 1px 3px rgba(38, 34, 30, 0.06);
}

.bm-ingredients h2,
.bm-ingredients h3 {
	margin-top: 0;
	font-size: 21px;
}

.bm-ingredients ul {
	margin: 0;
	padding-left: 20px;
	font-size: 16px;
}

.bm-ingredients li {
	margin-bottom: 10px;
}

.bm-method ol {
	max-width: var(--bm-content);
	padding-left: 28px;
}

.bm-method li {
	margin-bottom: 24px;
	padding-left: 8px;
}

.bm-method li::marker {
	font-family: var(--bm-display);
	font-weight: 800;
	font-size: 20px;
	color: var(--bm-ember-deep);
}

/* Equipment module, adapted from the ooni.com equipment section.
   Commerce links live here and nowhere inside the method. */
.bm-equipment {
	background: var(--bm-bone);
	border-radius: var(--bm-radius);
	padding: 36px;
	margin-top: 56px;
	max-width: var(--bm-content);
}

.bm-equipment h2 {
	margin-top: 0;
	font-size: 23px;
}

.bm-equipment ul {
	padding-left: 20px;
	margin-bottom: 0;
}

.bm-equipment li {
	margin-bottom: 10px;
}

/* 10. Roundup and review components ------------------------------- */

.bm-table table,
.entry-content .bm-table table {
	border-collapse: collapse;
	width: 100%;
	font-size: 16px;
}

.bm-table th {
	font-family: var(--bm-display);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: left;
	color: var(--bm-paper);
	background: var(--bm-charcoal);
	padding: 14px 18px;
}

.bm-table td {
	padding: 14px 18px;
	border-bottom: 1px solid var(--bm-bone);
	vertical-align: top;
	transition: background-color 0.15s ease;
}

.bm-table tr:nth-child(even) td {
	background: var(--bm-bone);
}

.bm-table tbody tr:hover td {
	background: #f7efe0;
}

.bm-table .bm-pick td,
.bm-table tbody .bm-pick:hover td {
	background: var(--bm-paper);
	border-top: 2px solid var(--bm-ember);
	border-bottom: 2px solid var(--bm-ember);
	font-weight: 600;
}

.bm-badge {
	display: inline-block;
	background: var(--bm-ember-deep);
	color: var(--bm-paper);
	font-family: var(--bm-display);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: var(--bm-radius-pill);
	padding: 4px 14px;
	margin-left: 6px;
}

/* Verdict panel at the top of reviews */
.bm-review {
	background: var(--bm-bone);
	border-left: 4px solid var(--bm-ember);
	border-radius: 0 var(--bm-radius) var(--bm-radius) 0;
	padding: 36px;
	margin: 36px 0;
	max-width: var(--bm-content);
	box-shadow: 0 1px 3px rgba(38, 34, 30, 0.06);
}

.bm-review__verdict {
	font-family: var(--bm-display);
	font-size: 25px;
	font-weight: 800;
	letter-spacing: -0.01em;
	margin: 0 0 8px;
}

.bm-review__rating {
	font-family: var(--bm-display);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bm-ember-deep);
	margin-bottom: 18px;
}

.bm-proscons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	margin: 18px 0;
}

.bm-proscons .bm-proscons__label,
.bm-proscons h4 {
	font-family: var(--bm-display);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin: 0 0 10px;
}

.bm-proscons ul {
	margin: 0;
	padding-left: 18px;
	font-size: 15px;
}

.bm-proscons li {
	margin-bottom: 6px;
}

.bm-disclosure {
	font-size: 13px;
	font-style: italic;
	color: var(--bm-smoke);
	max-width: var(--bm-content);
}

/* 11. Category hub components -------------------------------------- */

.bm-hub-intro {
	max-width: var(--bm-content);
	font-size: 21px;
	line-height: 1.55;
}

.bm-hub-pillar {
	border: 2px solid var(--bm-charcoal);
	border-radius: var(--bm-radius);
	padding: 40px;
	margin: 40px 0;
	box-shadow: 6px 6px 0 var(--bm-ember);
}

.bm-hub-pillar h2 {
	font-size: 30px;
}

/* Large opening paragraph on recipe and roundup posts, via the
   body classes added in functions.php */
.bm-is-recipe .entry-content > p:first-of-type,
.bm-is-roundup .entry-content > p:first-of-type {
	font-size: 21px;
	line-height: 1.55;
}

/* 12. Newsletter and footer ----------------------------------------- */

.bm-newsletter {
	background: var(--bm-charcoal);
	background-image: radial-gradient(80% 80% at 85% 120%, rgba(232, 85, 28, 0.24), transparent 65%);
	color: var(--bm-paper);
	border-radius: calc(var(--bm-radius) + 6px);
	padding: 64px 56px;
	position: relative;
	overflow: hidden;
	box-shadow: var(--bm-shadow-deep);
}

.bm-newsletter h2,
.bm-newsletter p {
	color: var(--bm-paper);
}

.bm-newsletter h2 {
	margin-top: 0;
	font-size: 36px;
}

.site-footer {
	background-color: var(--bm-charcoal);
}

.footer-widgets {
	background-color: var(--bm-charcoal);
	color: rgba(250, 246, 239, 0.85);
	padding-top: 88px;
	padding-bottom: 56px;
}

.footer-widgets .widget-title {
	font-family: var(--bm-display);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bm-ember-bright);
	margin-bottom: 20px;
}

.footer-widgets a {
	color: rgba(250, 246, 239, 0.85);
	text-decoration: none;
}

.footer-widgets a:hover {
	color: var(--bm-paper);
	text-decoration: underline;
	text-decoration-color: var(--bm-ember);
}

.site-info {
	background-color: var(--bm-charcoal);
	color: var(--bm-bone);
	border-top: 1px solid rgba(250, 246, 239, 0.12);
	font-family: var(--bm-display);
	font-size: 13px;
	letter-spacing: 0.04em;
}

.site-info a {
	color: var(--bm-paper);
}

/* 13. Focus, motion, accessibility ----------------------------------- */

a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible,
input:focus-visible {
	outline: 3px solid var(--bm-ember);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.wp-block-button__link:hover,
	.bm-btn:hover {
		transform: none;
	}
}

/* 14. Responsive ------------------------------------------------------ */

@media (max-width: 968px) {
	.bm-recipe-layout {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.bm-ingredients {
		position: static;
	}

	.bm-band h2 {
		font-size: 32px;
	}
}

@media (max-width: 768px) {
	:root {
		--bm-section: 64px;
	}

	body {
		font-size: 17px;
	}

	h1, .entry-title { font-size: 34px; }
	h2 { font-size: 27px; }
	h3 { font-size: 20px; }

	.bm-hero {
		padding-top: 80px;
		padding-bottom: 80px;
	}

	.bm-hero h1 {
		font-size: clamp(42px, 11vw, 56px);
	}

	.bm-ladder .bm-ladder__step {
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 40px 0;
	}

	.bm-ladder .bm-ladder__step:nth-child(even) img {
		order: 0;
	}

	.bm-swap {
		grid-template-columns: 1fr 44px 1fr;
	}

	.bm-swap__sa,
	.bm-swap__au {
		padding: 18px;
	}

	.bm-swap__item {
		font-size: 17px;
	}

	.bm-swap__arrow {
		font-size: 20px;
	}

	.bm-meta-bar__item {
		padding: 6px 16px;
	}

	.bm-proscons {
		grid-template-columns: 1fr;
	}

	.bm-table {
		overflow-x: auto;
	}

	.bm-table th:first-child,
	.bm-table td:first-child {
		position: sticky;
		left: 0;
	}

	.bm-table td:first-child {
		background: var(--bm-paper);
	}

	.bm-table tr:nth-child(even) td:first-child {
		background: var(--bm-bone);
	}

	.bm-newsletter {
		padding: 40px 28px;
	}

	.bm-newsletter h2 {
		font-size: 28px;
	}

	.bm-hub-pillar {
		padding: 28px;
	}
}