/*
Theme Name: ECB Cottage
Theme URI: https://easycrochetblanket.com
Description: Custom theme for easycrochetblanket.com, built from the Claude Design "Cottage" v2 mockup.
Author: Easy Crochet Blanket
Version: 0.8.13
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: ecb-cottage
*/

/* Tokens (from design/maquette.html) ------------------------------------ */

:root {
	--ink: #2e3328;
	--sage: #55624a;
	--sage-light: #c9d3b8;
	--sand: #d9c7a8;
	--linen: #e3d8c5;
	--cream: #faf6ee;
	--white: #fff;
	--text-soft: #46483d;
	--muted: #5b5a4e;
	--line: #e3d7c3;
	--line-soft: #ece3d3;
	--line-footer: #cdbfa6;
	--input-line: #c9b896;
	--field-line: #8f7c58; /* contact form field outline: 3.75:1 on cream (3:1 needed) */
	--error: #a3452e; /* terracotta, 5.65:1 on cream */
	--on-ink: #f3ede2;
	--btn-text: #f6f3ee;
	--placeholder: #717166; /* mockup #8a8a7c darkened to reach 4.5:1 on cream */

	--serif: "Young Serif", Georgia, serif;
	--sans: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--hand: "Caveat", cursive;

	--max: 1280px;
	--gutter: 64px;
}

/* Base ------------------------------------------------------------------ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

/* Footer stays at the bottom of the screen on short pages (404, empty search…). */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
	margin: 0;
	background: var(--white);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

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

/* The hidden attribute must win over display rules (filtered library cards, empty states). */
[hidden] {
	display: none !important;
}

a {
	color: var(--ink);
}

a:hover {
	color: var(--sage);
}

:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 3px;
	border-radius: 4px;
}

.on-ink :focus-visible {
	outline-color: var(--sage-light);
}

input::placeholder {
	color: var(--placeholder);
	opacity: 1;
}

.wrap {
	width: 100%;
	max-width: var(--max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 100;
	padding: 12px 20px;
	background: var(--ink);
	color: var(--btn-text);
	border-radius: 999px;
	font-weight: 500;
	text-decoration: none;
	transform: translateY(-200%);
}

.skip-link:focus {
	transform: none;
	color: var(--btn-text);
}

/* Top bar (Sunday Letter, shown only when the newsletter is enabled) ----- */

.topbar {
	background: var(--ink);
	color: var(--on-ink);
	font-size: 14px;
	padding-block: 11px;
}

.topbar .wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 8px;
	text-align: center;
}

.topbar a {
	color: var(--on-ink);
	text-underline-offset: 3px;
}

/* Header ---------------------------------------------------------------- */

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-block: 24px;
}

.brand {
	display: flex;
	flex-direction: column;
	text-decoration: none;
}

.brand-name {
	font-family: var(--serif);
	font-size: 26px;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.brand-tag {
	font-family: var(--hand);
	font-size: 19px;
	line-height: 1.2;
	color: var(--sage);
	margin-top: -2px;
}

.site-nav ul {
	display: flex;
	align-items: center;
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
	font-weight: 500;
}

.site-nav a {
	display: inline-block;
	padding-block: 6px;
	text-decoration: none;
}

.site-nav .nav-pill a {
	border: 1px solid var(--ink);
	border-radius: 999px;
	padding: 9px 18px;
}

.nav-toggle {
	display: none;
}

@media (max-width: 1100px) {
	.site-nav ul {
		gap: 20px;
	}
}

/* Mobile menu: the burger only takes over when JS is available. */
@media (max-width: 900px) {
	.header-inner {
		flex-wrap: wrap;
	}

	.js .nav-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin-right: -10px;
		padding: 0;
		background: none;
		border: 0;
		border-radius: 999px;
		color: var(--ink);
		cursor: pointer;
	}

	.nav-toggle-bars,
	.nav-toggle-bars::before,
	.nav-toggle-bars::after {
		display: block;
		width: 22px;
		height: 2px;
		background: currentColor;
		border-radius: 2px;
		transition: transform 0.2s ease, background-color 0.2s ease;
	}

	.nav-toggle-bars {
		position: relative;
	}

	.nav-toggle-bars::before,
	.nav-toggle-bars::after {
		content: "";
		position: absolute;
		left: 0;
	}

	.nav-toggle-bars::before {
		top: -7px;
	}

	.nav-toggle-bars::after {
		top: 7px;
	}

	.nav-toggle[aria-expanded="true"] .nav-toggle-bars {
		background: transparent;
	}

	.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before {
		transform: translateY(7px) rotate(45deg);
	}

	.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after {
		transform: translateY(-7px) rotate(-45deg);
	}

	.site-nav {
		flex-basis: 100%;
	}

	.js .site-nav:not(.is-open) {
		display: none;
	}

	.site-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		font-size: 17px;
	}

	.site-nav li {
		border-top: 1px solid var(--line);
	}

	.site-nav a {
		display: block;
		padding-block: 14px;
	}

	.site-nav .nav-pill {
		border-top: 0;
		padding-top: 12px;
	}

	.site-nav .nav-pill a {
		text-align: center;
		padding: 13px 18px;
	}
}

@media (max-width: 760px) {
	:root {
		--gutter: 24px;
	}

	.header-inner {
		padding-block: 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* Shared ------------------------------------------------------------------ */

.site-main {
	flex: 1 0 auto;
}

.button {
	display: inline-block;
	line-height: 1.25;
}

.button:hover {
	color: var(--btn-text); /* the mockup's global a:hover sage would drop to 2:1 on ink */
	background: #454b3d;
}

.button.button--lg {
	padding: 17px 30px;
}

.button.button--sand {
	background: var(--sand);
	color: var(--ink);
	padding: 16px 28px;
}

.button.button--sand:hover {
	color: var(--ink);
	background: var(--linen);
}

.text-link {
	font-weight: 500;
	font-size: 16px;
	text-underline-offset: 5px;
}

.on-ink {
	background: var(--ink);
	color: var(--on-ink);
}

.on-ink a {
	color: var(--on-ink);
}

.on-ink a:hover {
	color: var(--sage-light);
}

/* Fixed-size frames reserve the image space before it loads (no layout shift). */
.hero-media img,
.stitch-media img,
.about-frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Hero ---------------------------------------------------------------------- */

.hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 64px;
	align-items: center;
	padding-block: 32px 96px;
}

.hero-copy {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

.hero-hello {
	font-family: var(--hand);
	font-size: 32px;
	line-height: 1.2;
	color: var(--sage);
	transform: rotate(-2deg);
	transform-origin: left center;
}

.hero h1 {
	margin: 0;
	font-family: var(--serif);
	font-weight: 400;
	font-size: 72px;
	line-height: 1.04;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.hero-lede {
	margin: 0;
	max-width: 500px;
	font-size: 19px;
	line-height: 1.6;
	color: var(--text-soft);
	text-wrap: pretty;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 28px;
	margin-top: 8px;
}

.hero-perks {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 0;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	color: var(--muted);
}

.hero-perks li + li::before {
	content: "·";
	margin-inline: 10px;
}

.hero-media {
	position: relative;
	height: 620px;
}

.hero-media img {
	clip-path: inset(0 round 290px 290px 24px 24px);
}

/* "On my hook this week" card, overlapping the hero image */
.on-hook {
	position: absolute;
	left: -40px;
	bottom: 56px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-width: calc(100% + 20px);
	padding: 18px 22px;
	background: var(--cream);
	border-radius: 16px;
	box-shadow: 0 12px 30px rgba(46, 51, 40, 0.14);
	text-decoration: none;
}

.on-hook-label {
	font-family: var(--hand);
	font-size: 21px;
	line-height: 1.2;
	color: var(--sage);
}

.on-hook-title {
	font-family: var(--serif);
	font-size: 21px;
	line-height: 1.3;
}

.on-hook-meta {
	font-size: 13px;
	color: var(--muted);
}

/* Shared section heads ------------------------------------------------------- */

.section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px 40px;
}

.section-head > div {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.section-title {
	margin: 0;
	font-family: var(--serif);
	font-weight: 400;
	font-size: 46px;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.section-title--sm {
	font-size: 40px;
	letter-spacing: 0;
}

.text-link--sm {
	display: inline-block;
	padding-block: 2px; /* keeps the click target at 24px or more */
	font-size: 15px;
}

.button.button--sm {
	padding: 13px 24px;
	font-size: 15px;
}

/* Find your next blanket ------------------------------------------------------- */

.find {
	background: var(--cream);
	padding-block: 96px;
}

.find-inner {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.category-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}

.category-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
	text-decoration: none;
}

.category-frame {
	display: block;
	aspect-ratio: 3 / 4;
}

.category-frame img,
.feature-frame img,
.small-feature-frame img,
.pattern-frame img,
.pin img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.category-frame img {
	border-radius: 20px;
}

/* Title and count wrap instead of overlapping when the card gets narrow. */
.category-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 2px 12px;
}

.category-name {
	font-family: var(--serif);
	font-size: 22px;
	line-height: 1.25;
}

.category-count {
	font-size: 14px;
	color: var(--muted);
	white-space: nowrap;
}

.season-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	padding-top: 8px;
	border-top: 1px solid var(--line);
}

.season-label {
	margin-right: 6px;
	padding-top: 16px;
	font-family: var(--hand);
	font-size: 24px;
	line-height: 1.2;
	color: var(--sage);
}

.season-pill {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-top: 16px;
	padding: 10px 20px;
	border: 1px solid var(--sand);
	border-radius: 999px;
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
}

.season-count {
	font-size: 13px;
	font-weight: 400;
	color: var(--muted);
}

/* This week's favorites ----------------------------------------------------------- */

.favorites {
	padding-block: 96px;
}

.favorites-inner {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.favorites-inner > div:first-child {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.favorites-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 40px;
}

.feature {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.feature-frame {
	display: block;
	height: 520px;
	background: var(--cream);
	border-radius: 24px;
	overflow: hidden;
}

.feature-meta {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sage);
}

.feature-meta--sm {
	font-size: 12px;
}

.feature-title {
	margin: 0;
	font-family: var(--serif);
	font-weight: 400;
	font-size: 34px;
	line-height: 1.2;
}

.feature-excerpt {
	margin: 0;
	max-width: 560px;
	font-size: 17px;
	line-height: 1.6;
	color: var(--text-soft);
	text-wrap: pretty;
}

.feature .text-link {
	align-self: flex-start;
}

.small-features {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.small-feature {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	gap: 24px;
	align-items: center;
}

.small-feature-frame {
	display: block;
	height: 250px;
	background: var(--cream);
	border-radius: 20px;
	overflow: hidden;
}

.small-feature-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
}

.small-feature-title {
	margin: 0;
	font-family: var(--serif);
	font-weight: 400;
	font-size: 24px;
	line-height: 1.2;
}

.small-feature-body p {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--text-soft);
	text-wrap: pretty;
}

/* Pattern library -------------------------------------------------------------- */

.library {
	padding-block: 88px 104px;
	border-top: 1px solid var(--line-soft);
	scroll-margin-top: 16px;
}

.library-inner {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.library-intro {
	margin: 0;
	max-width: 380px;
	font-size: 16px;
	line-height: 1.55;
	color: var(--text-soft);
	text-wrap: pretty;
}

.library-grid {
	display: grid;
	grid-template-columns: 232px minmax(0, 1fr);
	gap: 56px;
	padding-top: 8px;
}

.filters {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.filters-toggle,
.filters-done {
	display: none;
}

.filters-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}

.filters-title {
	margin: 0;
	font-family: var(--serif);
	font-weight: 400;
	font-size: 26px;
	line-height: 1.2;
}

.filters-clear {
	font-size: 14px;
}

.filter-group {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.filter-label {
	margin-bottom: 6px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--line);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}

.filter-option {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 7px 0;
	font-size: 15px;
	color: #4f5249;
	text-decoration: none;
}

.filter-option[aria-pressed="true"] {
	color: var(--ink);
	font-weight: 600;
}

.filter-option.is-dim {
	opacity: 0.4;
}

.filter-box {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	border: 1px solid var(--ink);
	border-radius: 3px;
}

.filter-option[aria-pressed="true"] .filter-box {
	background: var(--ink);
}

.filter-name {
	flex: 1;
}

.filter-count {
	font-size: 13px;
	font-weight: 400;
	color: var(--muted);
}

.library-results {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

.library-count {
	font-size: 15px;
	color: var(--text-soft);
}

.pattern-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 36px 24px;
}

.pattern-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	text-decoration: none;
}

.pattern-frame {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	background: var(--cream);
	border-radius: 18px;
	overflow: hidden;
}

.pattern-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 5px 11px;
	background: var(--cream);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	color: var(--ink);
}

.pattern-title {
	margin-top: 4px;
	font-family: var(--serif);
	font-size: 20px;
	line-height: 1.25;
}

.pattern-meta {
	font-size: 14px;
	color: var(--muted);
}

.library-empty {
	padding: 40px;
	background: var(--cream);
	border-radius: 20px;
	text-align: center;
}

/* Find me on Pinterest ------------------------------------------------------------ */

.pinterest {
	padding-block: 0 104px;
}

.pinterest-inner {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.pin-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 14px;
}

.pin {
	display: block;
	aspect-ratio: 2 / 3;
	background: var(--cream);
	border-radius: 14px;
	overflow: hidden;
}

/* Start here ----------------------------------------------------------------- */

.learn {
	padding-block: 104px;
}

.learn-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
	gap: 72px;
}

.learn-intro {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.learn-hello {
	font-family: var(--hand);
	font-size: 30px;
	line-height: 1.2;
	color: var(--sage-light);
}

.learn-title {
	margin: 0;
	font-family: var(--serif);
	font-weight: 400;
	font-size: 52px;
	line-height: 1.08;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.learn-lede {
	margin: 0;
	max-width: 440px;
	font-size: 17px;
	line-height: 1.65;
	color: #e6dccb;
	text-wrap: pretty;
}

.needs {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 8px;
}

.needs-label {
	margin: 0;
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sand);
}

.needs ol {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.needs li {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid #454b3d;
	font-size: 16px;
	line-height: 1.5;
}

.needs-number {
	flex: 0 0 18px;
	font-family: var(--hand);
	font-size: 22px;
	color: var(--sage-light);
}

.learn-cta {
	display: flex;
	margin-top: 12px;
}

.stitch-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	align-content: start;
}

.stitch-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 22px;
	background: #394032;
	border-radius: 20px;
}

.stitch-media {
	height: 150px;
}

.stitch-media img {
	border-radius: 12px;
}

.stitch-name {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 4px 0 0;
	font-weight: 400;
}

.stitch-abbr {
	font-family: var(--serif);
	font-size: 34px;
	line-height: 1.2;
	color: var(--on-ink);
}

.stitch-full {
	font-family: var(--sans);
	font-size: 16px;
	font-weight: 500;
	color: #e6dccb;
}

.stitch-card p {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: #d9cfbd;
	text-wrap: pretty;
}

.stitch-card a {
	align-self: flex-start;
	padding-block: 4px;
	font-size: 14px;
	font-weight: 500;
	text-underline-offset: 4px;
}

/* About Zariah --------------------------------------------------------------- */

.about {
	padding-block: 104px;
}

.about-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: 80px;
	align-items: center;
}

.about-media {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
}

.about-frame {
	height: 600px;
}

.about-frame img {
	clip-path: inset(0 round 24px 24px 290px 290px);
}

.about-media figcaption {
	font-family: var(--hand);
	font-size: 22px;
	color: var(--sage);
	text-align: center;
}

.about-copy {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.about-hello {
	font-family: var(--hand);
	font-size: 38px;
	line-height: 1.2;
	color: var(--sage);
	transform: rotate(-2deg);
	transform-origin: left center;
}

.about h2 {
	margin: 0;
	font-family: var(--serif);
	font-weight: 400;
	font-size: 42px;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.about-copy p {
	margin: 0;
	font-size: 17px;
	line-height: 1.7;
	color: var(--text-soft);
	text-wrap: pretty;
}

.about-sign {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	margin-top: 8px;
}

.about-signature,
.entry-content .ecb-signature {
	font-family: var(--hand);
	font-size: 44px;
	line-height: 1.2;
}

/* Sections: tablet and mobile -------------------------------------------- */

@media (max-width: 1100px) {
	.hero-grid {
		gap: 32px;
	}

	.hero h1 {
		font-size: 58px;
	}

	.learn-grid,
	.about-grid {
		gap: 36px;
	}

	.small-feature {
		grid-template-columns: 140px minmax(0, 1fr);
		gap: 16px;
	}

	.small-feature-frame {
		height: 175px;
	}

	.library-grid {
		grid-template-columns: 190px minmax(0, 1fr);
		gap: 28px;
	}

	.pattern-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Tablet gutter only: the mobile 24px gutter (declared earlier) must keep winning below 761px. */
@media (min-width: 761px) and (max-width: 900px) {
	:root {
		--gutter: 40px;
	}
}

/* Tablet (same breakpoint as the burger menu): two-column sections become one column. */
@media (max-width: 900px) {
	.hero-grid,
	.favorites-grid,
	.learn-grid,
	.about-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.hero-media {
		height: 560px;
	}

	.on-hook {
		left: 16px;
		bottom: 32px;
		max-width: calc(100% - 32px);
	}

	.about-frame {
		height: 560px;
	}

	.small-feature {
		grid-template-columns: 200px minmax(0, 1fr);
		gap: 24px;
	}

	.small-feature-frame {
		height: 250px;
	}

	.section-head {
		flex-wrap: wrap;
		align-items: flex-start;
	}

	.category-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pin-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.hero-grid,
	.learn-grid,
	.about-grid,
	.favorites-grid,
	.library-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.on-hook {
		left: 12px;
		bottom: 24px;
		max-width: calc(100% - 24px);
	}

	.find,
	.favorites,
	.library {
		padding-block: 48px;
	}

	.pinterest {
		padding-block: 0 48px;
	}

	.section-head {
		flex-wrap: wrap;
		align-items: flex-start;
	}

	.section-title,
	.section-title--sm {
		font-size: 34px;
	}

	.category-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 16px;
	}

	/* Mockup bug fix: name and count stack instead of overlapping on narrow cards. */
	.category-row {
		flex-direction: column;
		align-items: flex-start;
	}

	.category-name {
		font-size: 20px;
	}

	.feature-frame {
		height: 360px;
	}

	.small-feature {
		grid-template-columns: 140px minmax(0, 1fr);
		gap: 16px;
	}

	.small-feature-frame {
		height: 175px;
	}

	.feature-title {
		font-size: 28px;
	}

	/* Filters: two columns of groups. With JS they fold behind the "Filter" button;
	   without JS they simply stay open. */
	.filters {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}

	.filters-head {
		grid-column: 1 / -1;
	}

	.js .filters {
		padding: 20px;
		background: var(--cream);
		border-radius: 20px;
	}

	.js .filters:not(.is-open) {
		display: none;
	}

	/* The toggle already says "Filter"; the panel keeps only "Clear all". */
	.js .filters-title {
		display: none;
	}

	.js .filters-head {
		justify-content: flex-end;
	}

	.js .filters-head:has(.filters-clear[hidden]) {
		display: none;
	}

	.js .filters-toggle {
		display: flex;
		align-items: center;
		gap: 10px;
		width: 100%;
		min-height: 48px;
		padding: 12px 20px;
		background: none;
		border: 1px solid var(--ink);
		border-radius: 999px;
		color: var(--ink);
		font: 500 16px var(--sans);
		cursor: pointer;
	}

	.filters-toggle-label {
		flex: 1;
		text-align: left;
	}

	.filters-active {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 24px;
		height: 24px;
		padding: 0 7px;
		background: var(--ink);
		border-radius: 999px;
		color: var(--btn-text);
		font-size: 13px;
		font-weight: 600;
	}

	.filters-chevron {
		width: 9px;
		height: 9px;
		margin: 0 4px 4px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		transition: transform 0.2s ease;
	}

	.filters-toggle[aria-expanded="true"] .filters-chevron {
		margin-bottom: -4px;
		transform: rotate(-135deg);
	}

	.js .filters-done {
		display: block;
		grid-column: 1 / -1;
		width: 100%;
	}

	.pattern-grid {
		gap: 28px 16px;
	}

	.pin-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hero-grid {
		padding-block: 16px 48px;
	}

	.hero h1 {
		font-size: 48px;
	}

	.hero-media {
		height: 480px;
	}

	.learn,
	.about {
		padding-block: 48px;
	}

	.learn-title,
	.about h2 {
		font-size: 34px;
	}

	.about-frame {
		height: 440px;
	}
}

/* Compact horizontal stitch cards: square photo on the left, text on the right. */
@media (max-width: 560px) {
	.stitch-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.stitch-card {
		display: grid;
		grid-template-columns: 96px minmax(0, 1fr);
		grid-template-rows: auto auto 1fr;
		column-gap: 16px;
		row-gap: 6px;
		padding: 16px;
	}

	.stitch-media {
		grid-row: 1 / span 3;
		width: 96px;
		height: 96px;
	}

	.stitch-name {
		margin: 0;
		flex-wrap: wrap;
		gap: 0 10px;
	}

	.stitch-abbr {
		font-size: 26px;
	}

	.stitch-full {
		font-size: 15px;
	}

	.stitch-card p {
		font-size: 14px;
		line-height: 1.5;
	}

	.stitch-card a {
		padding-block: 4px;
	}
}

/* Footer ---------------------------------------------------------------- */

.site-footer {
	background: var(--linen);
	padding-block: 80px 36px;
}

.site-footer .wrap {
	display: flex;
	flex-direction: column;
	gap: 64px;
}

.footer-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: 80px;
}

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

.footer-grid.no-newsletter .footer-links {
	max-width: 560px;
}

.newsletter {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.eyebrow {
	font-family: var(--hand);
	font-size: 26px;
	line-height: 1.2;
	color: var(--sage);
}

.newsletter-title {
	margin: 0;
	font-family: var(--serif);
	font-weight: 400;
	font-size: 38px;
	line-height: 1.2;
}

.newsletter p {
	margin: 0;
	max-width: 460px;
	font-size: 17px;
	line-height: 1.6;
	color: var(--text-soft);
}

.newsletter-form {
	display: flex;
	gap: 10px;
	max-width: 480px;
	margin-top: 8px;
}

.newsletter-form input {
	flex: 1;
	min-width: 0;
	font: 16px var(--sans);
	padding: 15px 20px;
	border-radius: 999px;
	border: 1px solid var(--input-line);
	background: var(--cream);
	color: var(--ink);
}

.newsletter-form button,
.button {
	font: 500 16px var(--sans);
	background: var(--ink);
	color: var(--btn-text);
	border: 0;
	border-radius: 999px;
	padding: 15px 26px;
	cursor: pointer;
	text-decoration: none;
}

.footer-links {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.footer-heading {
	margin: 0 0 12px;
	font-family: var(--sans);
	line-height: 1.5;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}

.footer-links ul {
	display: flex;
	flex-direction: column;
	gap: 6px; /* + 3px padding per link = the mockup's 12px rhythm, with 24px targets */
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-links a {
	display: inline-block;
	padding-block: 3px;
	font-size: 15px;
	text-decoration: none;
}

.footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px 24px;
	flex-wrap: wrap;
	padding-top: 24px;
	border-top: 1px solid var(--line-footer);
	font-size: 14px;
	color: var(--muted);
}

/* Copyright and legal links side by side (bandanacrochet.com layout), wrapping on small screens. */
.footer-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 24px;
}

.footer-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0 16px;
}

/* 24 px click targets, like the other footer links. */
.footer-legal a {
	display: inline-block;
	padding-block: 4px;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.footer-legal a:hover {
	color: var(--ink);
}

@media (max-width: 760px) {
	.site-footer {
		padding-block: 48px 32px;
	}

	.site-footer .wrap {
		gap: 40px;
	}

	.footer-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.footer-links ul {
		gap: 4px;
	}

	.footer-links a {
		display: inline-block;
		padding-block: 6px;
	}

	.footer-bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 560px) {
	.footer-links {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 32px;
	}
}

@media (max-width: 400px) {
	.newsletter-form {
		flex-direction: column;
	}
}

/* Coming soon (visitors, until launch) ------------------------------------ */

.coming-soon {
	min-height: 100vh;
	display: grid;
	place-items: center;
	background: var(--cream);
	padding: 48px var(--gutter);
	text-align: center;
}

.coming-soon main {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	max-width: 560px;
}

.coming-soon .brand-name {
	font-size: 30px;
}

.coming-soon .brand-tag {
	font-size: 22px;
}

.coming-soon h1 {
	margin: 24px 0 0;
	font-family: var(--serif);
	font-weight: 400;
	font-size: 52px;
	line-height: 1.08;
	letter-spacing: -0.02em;
}

.coming-soon p {
	margin: 0;
	font-size: 18px;
	line-height: 1.6;
	color: var(--text-soft);
}

@media (max-width: 760px) {
	.coming-soon h1 {
		font-size: 40px;
	}
}

/* Single post (Pinterest landing page) ------------------------------------- */

.print-only {
	display: none;
}

.article-header-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 56px;
	align-items: center;
	padding-block: 24px 64px;
}

.article-intro {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
}

.article-title {
	margin: 0;
	font-family: var(--serif);
	font-weight: 400;
	font-size: 52px;
	line-height: 1.08;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.article-byline {
	margin: 0;
	font-size: 15px;
	color: var(--muted);
}

.article-byline a {
	color: var(--ink);
	text-underline-offset: 3px;
	/* 24 px click target without moving anything: padding offset by an equal negative margin. */
	display: inline-block;
	padding-block: 3px;
	margin-block: -3px;
}

.article-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}

.article-badges li {
	padding: 7px 14px;
	background: var(--cream);
	border: 1px solid var(--sand);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
}

.article-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 8px;
}

.button.button--outline {
	background: none;
	color: var(--ink);
	box-shadow: inset 0 0 0 1px var(--ink);
}

.button.button--outline:hover {
	background: var(--cream);
	color: var(--ink);
}

.article-media {
	margin: 0;
	aspect-ratio: 4 / 5;
}

.article-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 24px;
}

/* Post content: comfortable reading width (~70 characters). */
.entry-content {
	max-width: 720px;
	margin-inline: auto;
	font-size: 17px;
	line-height: 1.7;
	color: var(--text-soft);
}

.entry-content > * {
	margin-block: 0 1.2em;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
	color: var(--ink);
	font-family: var(--serif);
	font-weight: 400;
	line-height: 1.2;
	scroll-margin-top: 16px;
}

.entry-content > h2 {
	margin-top: 1.6em;
	font-size: 30px;
}

.entry-content a {
	color: var(--ink);
	text-underline-offset: 3px;
}

.entry-content img {
	border-radius: 16px;
}

.entry-content figure {
	margin-inline: 0;
}

.entry-content figcaption {
	margin-top: 8px;
	font-size: 14px;
	color: var(--muted);
	text-align: center;
}

/* Pattern card (block pattern ecb/pattern-card) */
.ecb-pattern-card {
	margin-block: 48px;
	padding: 40px;
	background: var(--cream);
	border-radius: 24px;
	color: var(--ink);
	scroll-margin-top: 16px;
}

.ecb-pattern-card > * {
	margin-block: 0 1em;
}

.ecb-pattern-card > :last-child {
	margin-bottom: 0;
}

.ecb-pc-terms {
	display: inline-block;
	padding: 5px 12px;
	border: 1px solid var(--sand);
	border-radius: 999px;
	background: var(--white);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}

.ecb-pattern-card .ecb-pc-title {
	margin-top: 12px;
	font-size: 34px;
}

.ecb-pattern-card h3 {
	margin-top: 1.6em;
	padding-top: 1.2em;
	border-top: 1px solid var(--line);
	font-size: 24px;
}

.ecb-pattern-card h4 {
	margin-top: 1.2em;
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sage);
}

.ecb-pattern-card ul {
	padding-left: 1.3em;
}

/* Room for two- and three-digit row numbers ("10.", "100."). */
.ecb-pattern-card ol {
	padding-left: 2.4em;
}

.ecb-pattern-card li + li {
	margin-top: 6px;
}

.ecb-pattern-card .ecb-pc-abbr {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px 24px;
	padding-left: 0;
	list-style: none;
}

.ecb-pattern-card .ecb-pc-abbr li + li {
	margin-top: 0;
}

.ecb-pattern-card .ecb-pc-abbr strong {
	display: inline-block;
	min-width: 3.2em;
}

/* Row lists: no automatic numbers. Real patterns group rows ("Rows 3–98:", "Last row:"),
   so the bold "Row 1:" text is the only numbering. */
.ecb-pattern-card .ecb-pc-rows {
	padding-left: 0;
	list-style: none;
}

.ecb-pattern-card .ecb-pc-rows li + li {
	margin-top: 10px;
}

.ecb-pattern-card figure img {
	background: var(--white);
}

/* Author box */
.author-box-wrap {
	margin-block: 16px 72px;
}

.author-box {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 20px;
	align-items: start;
	max-width: 720px;
	margin-inline: auto;
	padding: 28px;
	background: var(--cream);
	border-radius: 24px;
}

.author-photo {
	width: 96px;
	height: 96px;
}

.author-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 25%;
	border-radius: 50%;
}

.author-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.author-hello {
	font-family: var(--hand);
	font-size: 28px;
	line-height: 1.1;
	color: var(--sage);
}

.author-text p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--text-soft);
}

/* Similar patterns */
.related {
	padding-block: 72px 96px;
	background: var(--cream);
}

.related-inner {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.related .pattern-frame {
	background: var(--linen);
}

@media (max-width: 900px) {
	.article-header-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
		padding-block: 8px 40px;
	}

	.article-title {
		font-size: 40px;
	}

	/* Keep the buttons reachable without scrolling past a huge image. */
	.article-media {
		max-height: 70vh;
		max-height: 70svh;
		aspect-ratio: 4 / 5;
	}
}

@media (max-width: 760px) {
	.article-title {
		font-size: 34px;
	}

	/* Both buttons on one row so the image starts higher. */
	.article-actions {
		flex-wrap: nowrap;
		gap: 10px;
	}

	.article-actions .button {
		flex: 1 1 auto;
		padding-inline: 14px;
		text-align: center;
		white-space: nowrap;
	}

	.ecb-pattern-card {
		margin-inline: -8px;
		padding: 24px 16px;
	}

	.ecb-pattern-card ul {
		padding-left: 1.1em;
	}

	.ecb-pattern-card .ecb-pc-title {
		font-size: 28px;
	}

	.ecb-pattern-card h3 {
		font-size: 22px;
	}

	.author-box {
		grid-template-columns: 72px minmax(0, 1fr);
		gap: 16px;
		padding: 20px;
	}

	.author-photo {
		width: 72px;
		height: 72px;
	}

	.related {
		padding-block: 48px;
	}

	.related-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.ecb-pattern-card .ecb-pc-abbr {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Pages ------------------------------------------------------------------ */

/* Narrower reading column than posts: 65 to 75 characters per line on desktop. */
.page-article {
	--page-measure: 620px;
}

.page-article .entry-content {
	max-width: var(--page-measure);
}

.entry-content .ecb-signature {
	color: var(--ink);
}

.page-header {
	padding-block: 32px 28px;
}

.page-title {
	max-width: var(--page-measure, 720px);
	margin: 0 auto;
	font-family: var(--serif);
	font-weight: 400;
	font-size: 52px;
	line-height: 1.08;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.page-media {
	max-width: calc(var(--page-measure) + 2 * var(--gutter));
	margin: 0 auto 40px;
}

.page-media img {
	display: block;
	width: 100%;
	max-height: 560px;
	object-fit: cover;
	object-position: center 15%; /* crop from the bottom first: portraits keep the head */
	border-radius: 24px;
}

.page-article .entry-content {
	padding-bottom: 88px;
}

.page-article .entry-content > h2 {
	padding-top: 1.2em;
	border-top: 1px solid var(--line);
}

.page-article .entry-content > h2:first-child,
.page-article .entry-content > p:empty:first-child + h2 {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* Empty paragraphs of the page skeletons (texts are written separately) take no space. */
.entry-content > p:empty {
	display: none;
}

.ecb-email {
	font-weight: 500;
}

/* Contact form ([ecb_contact_form], ecb-core), in the style of the Sunday Letter form. */
.ecb-contact {
	margin-block: 0 1.6em;
}

.ecb-contact-form {
	display: grid;
	gap: 20px;
	padding: 32px;
	background: var(--cream);
	border-radius: 24px;
}

.entry-content .ecb-contact-form p {
	margin: 0;
}

.ecb-field {
	display: grid;
	gap: 8px;
}

.ecb-field label {
	font-weight: 500;
	font-size: 16px;
	color: var(--ink);
}

.ecb-field input,
.ecb-field textarea {
	width: 100%;
	min-height: 48px;
	font: 16px/1.5 var(--sans);
	padding: 12px 18px;
	border: 1px solid var(--field-line);
	border-radius: 16px;
	background: var(--white);
	color: var(--ink);
}

.ecb-field textarea {
	resize: vertical;
	min-height: 160px;
}

.ecb-field input:focus-visible,
.ecb-field textarea:focus-visible {
	outline-offset: 2px;
}

.ecb-field [aria-invalid="true"] {
	border: 2px solid var(--error);
}

.ecb-field-error,
.ecb-contact-alert {
	color: var(--error);
	font-size: 15px;
	font-weight: 500;
}

.ecb-contact-privacy {
	font-size: 15px;
	color: var(--text-soft);
}

.ecb-contact-actions .button {
	border: 0;
	cursor: pointer;
	min-height: 48px;
}

.ecb-contact-actions .button:disabled {
	opacity: 0.7;
	cursor: progress;
}

.entry-content .ecb-contact-alert,
.entry-content .ecb-contact-status {
	margin: 0 0 16px;
	padding: 14px 18px;
	border-radius: 16px;
	line-height: 1.5;
}

.ecb-contact-alert {
	background: #fbeee9;
	border-left: 4px solid var(--error);
}

.entry-content .ecb-contact-status {
	background: var(--cream);
	border-left: 4px solid var(--sage);
	color: var(--ink);
	font-weight: 500;
}

.ecb-contact-status:focus {
	outline: none;
}

@media (max-width: 760px) {
	.ecb-contact-form {
		padding: 20px 16px;
	}

	.ecb-contact-actions .button {
		width: 100%;
	}
}

@media (max-width: 760px) {
	.page-header {
		padding-block: 16px 20px;
	}

	.page-title {
		font-size: 38px;
	}

	.page-media {
		margin-bottom: 28px;
	}

	.page-media img {
		max-height: 420px;
	}

	.page-article .entry-content {
		padding-bottom: 56px;
	}
}

/* Search ------------------------------------------------------------------ */

.search-page {
	padding-block: 40px 96px;
}

.search-inner {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.search-header {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 720px;
}

.search-title {
	margin: 0;
	font-family: var(--serif);
	font-weight: 400;
	font-size: 46px;
	line-height: 1.12;
	letter-spacing: -0.01em;
	overflow-wrap: anywhere;
}

/* Same look as the Sunday Letter form. */
.search-form {
	display: flex;
	gap: 10px;
	max-width: 560px;
	margin-top: 8px;
}

.search-form input {
	flex: 1;
	min-width: 0;
	font: 16px var(--sans);
	padding: 15px 20px;
	border-radius: 999px;
	border: 1px solid var(--input-line);
	background: var(--cream);
	color: var(--ink);
}

.search-form button {
	font: 500 16px var(--sans);
	background: var(--ink);
	color: var(--btn-text);
	border: 0;
	border-radius: 999px;
	padding: 15px 26px;
	cursor: pointer;
}

.search-form button:hover {
	background: #454b3d;
}

.search-count {
	margin: 4px 0 0;
	font-size: 15px;
	color: var(--text-soft);
}

.not-found-lede {
	margin: 0;
	max-width: 560px;
	font-size: 17px;
	line-height: 1.6;
	color: var(--text-soft);
	text-wrap: pretty;
}

.search-pages-title {
	margin: 0 0 12px;
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}

.search-pages ul {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.search-pages a {
	font-family: var(--serif);
	font-size: 22px;
	text-underline-offset: 4px;
}

.search-empty {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 720px;
	padding: 32px;
	background: var(--cream);
	border-radius: 24px;
}

.search-empty-lede {
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--text-soft);
}

.search-empty-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
}

.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--sand);
	border-radius: 999px;
	text-decoration: none;
}

.nav-links .page-numbers.current {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--btn-text);
}

@media (max-width: 760px) {
	.search-page {
		padding-block: 16px 56px;
	}

	.search-inner {
		gap: 28px;
	}

	.search-title {
		font-size: 34px;
	}

	.search-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.search-empty {
		padding: 24px 20px;
	}
}

@media (max-width: 400px) {
	.search-form button {
		padding-inline: 20px;
	}
}

/* Print: only the pattern card, with a small source header ---------------- */

@media print {
	@page {
		margin: 15mm;
	}

	body {
		display: block;
		min-height: 0;
		background: #fff;
		color: #000;
		font-size: 11pt;
	}

	.skip-link,
	.topbar,
	.site-header,
	.site-footer,
	.article-media,
	.article-actions,
	.article-byline,
	.author-box-wrap,
	.related,
	.entry-content > :not(.ecb-pattern-card) {
		display: none !important;
	}

	.print-only {
		display: block;
	}

	.wrap {
		max-width: none;
		padding: 0;
	}

	.article-header-grid {
		display: block;
		padding: 0 0 4mm;
		border-bottom: 1px solid #999;
	}

	.article-intro {
		gap: 3mm;
	}

	.article-title {
		font-size: 22pt;
		color: #000;
	}

	.article-badges li {
		padding: 1mm 3mm;
		background: none;
		border-color: #999;
		font-size: 9pt;
	}

	.print-source {
		margin: 0;
		font-size: 9pt;
		color: #333;
	}

	.entry-content {
		max-width: none;
		font-size: 11pt;
		line-height: 1.5;
		color: #000;
	}

	.ecb-pattern-card {
		margin: 6mm 0 0;
		padding: 0;
		background: none;
		border-radius: 0;
	}

	.ecb-pc-terms {
		background: none;
		border-color: #999;
		color: #000;
	}

	.ecb-pattern-card .ecb-pc-title {
		font-size: 18pt;
	}

	.ecb-pattern-card h3 {
		font-size: 14pt;
		border-top-color: #bbb;
		break-after: avoid;
		page-break-after: avoid;
	}

	/* A part title (Body, Border, Finishing…), its optional intro paragraph and its first
	   instruction always stay on the same page. */
	.ecb-pattern-card h4 {
		color: #000;
	}

	.ecb-pattern-card h4,
	.ecb-pattern-card h4 + p {
		break-after: avoid;
		page-break-after: avoid;
	}

	.ecb-pattern-card .ecb-pc-rows {
		padding-left: 0;
		list-style: none;
	}

	.ecb-pattern-card li,
	.ecb-pattern-card p {
		break-inside: avoid;
		page-break-inside: avoid;
		orphans: 3;
		widows: 3;
	}

	/* Images inside the card (stitch diagrams, charts) print at a sensible size, never split. */
	.ecb-pattern-card figure {
		max-width: 120mm;
		margin: 4mm 0;
		break-inside: avoid;
		page-break-inside: avoid;
	}

	.ecb-pattern-card figcaption {
		text-align: left;
		font-size: 9pt;
	}

	.ecb-pattern-card figure img {
		width: auto;
		max-width: 100%;
		max-height: 110mm;
		border-radius: 2mm;
	}

	.ecb-pattern-card a {
		color: #000;
		text-decoration: none;
	}
}