/*
 * Natalia Recipes - pattern pages, Pinterest buttons, pattern cards, listings and post content
 * (contract C3 markup). Loaded after style.css. Colours come from the --nr-* palette defined in
 * style.css (fallback values below are the same palette, so this file also works on its own).
 * Text on coral / blush / sand / papaya is always the dark ink; walnut is the heading/link colour.
 */

:root {
	--cpt-ink: var(--nr-ink, #3F250E);
	--cpt-walnut: var(--nr-walnut, #724319);
	--cpt-walnut-deep: var(--nr-walnut-deep, #5B3614);
	--cpt-coral: var(--nr-coral, #D88180);
	--cpt-coral-deep: var(--nr-coral-deep, #86504F);
	--cpt-blush: var(--nr-blush, #F7B1B0);
	--cpt-blush-soft: var(--nr-blush-soft, #FCE4E3);
	--cpt-papaya: var(--nr-papaya, #FEEAC7);
	--cpt-paper: var(--nr-paper, #FFF8EB);
	--cpt-sand: var(--nr-sand, #CAD182);
	--cpt-sand-soft: var(--nr-sand-soft, #EAEDCD);
	--cpt-neutral: var(--nr-neutral, #F3EEE6);
	--cpt-line: color-mix(in srgb, var(--cpt-ink) 22%, transparent);
	--cpt-muted: color-mix(in srgb, var(--cpt-ink) 78%, transparent);
	--cpt-radius: var(--dp-radius, 25px);
	--cpt-border: var(--dp-border, 2.4px solid var(--cpt-ink));
	--cpt-shadow: var(--dp-shadow-card, 5px 6px 0 var(--cpt-ink));
	--cpt-heading: var(--dp-font-heading, 'Oswald', 'Arial Narrow', sans-serif);
	--cpt-body: var(--dp-font-body, 'Karla', -apple-system, sans-serif);
	--cpt-pin-red: #E60023;
	--cpt-pin-red-deep: #AD081B;
	--cpt-sticky-top: calc(var(--header-h, 96px) + var(--admin-bar-h, 0px) + 24px);
	--hero-max-h: min(78vh, 720px);
	--icon-bulb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 0-3.5 10.9c.5.4.8 1 .8 1.6h5.4c0-.6.3-1.2.8-1.6A6 6 0 0 0 12 3z'/%3E%3C/svg%3E");
	--icon-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9.5l5 5m0-5l-5 5'/%3E%3C/svg%3E");
	--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%233F250E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- Breadcrumbs (Rank Math) */
.rank-math-breadcrumb { margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: var(--cpt-ink); }
.rank-math-breadcrumb p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; }
.rank-math-breadcrumb a { color: var(--cpt-walnut); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; display: inline-block; padding: 4px 0; }
.rank-math-breadcrumb a:hover { color: var(--cpt-ink); }
.rank-math-breadcrumb .separator { color: var(--cpt-muted); }
.rank-math-breadcrumb .last { color: var(--cpt-muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- Pattern header + hero */
.cpt-single { padding-bottom: 8px; }
.pattern-intro { margin-bottom: 8px; }
.pattern-title {
	font-size: clamp(30px, 6.2vw, 54px);
	line-height: 1.04;
	margin: 0 0 12px;
	overflow-wrap: break-word;
	hyphens: manual;
}
.pattern-byline { margin: 0 0 18px; font-size: 15px; color: var(--cpt-ink); }
.pattern-byline a { color: var(--cpt-walnut); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.pattern-byline__sep { margin: 0 6px; }

.pattern-hero-figure {
	position: relative;
	margin: 0 auto 20px;
	width: min(100%, calc(var(--hero-max-h) * var(--hero-ar, 1.5)));
}
.pattern-hero-figure .pattern-hero,
img.pattern-hero {
	display: block;
	width: 100%;
	height: auto;
	max-height: var(--hero-max-h);
	object-fit: cover;
	border-radius: var(--cpt-radius);
	border: var(--cpt-border);
	box-shadow: var(--cpt-shadow);
	background: var(--cpt-papaya);
}

.pattern-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.pattern-badges a.badge { text-decoration: none; }
.pattern-badges a.badge:hover { text-decoration: underline; text-underline-offset: 3px; }
.badge--topic { background: var(--cpt-sand-soft); color: var(--cpt-ink); }
a.badge--topic:hover { background: var(--cpt-sand); color: var(--cpt-ink); }

ul.feature-badges { list-style: none; padding: 0; margin: 8px 0 24px; }
.feature-badge strong { display: block; font-family: var(--cpt-heading); text-transform: uppercase; letter-spacing: .02em; font-size: 15px; color: var(--cpt-ink); }
.feature-badge p { margin: 2px 0 0; font-size: 15px; color: var(--cpt-ink); }

@media (min-width: 960px) {
	.pattern-intro--portrait {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(300px, 42%);
		grid-template-rows: auto auto auto 1fr;
		grid-template-areas: "head hero" "actions hero" "badges hero" "features hero";
		column-gap: 44px;
		align-items: start;
	}
	.pattern-intro--portrait .pattern-header { grid-area: head; }
	.pattern-intro--portrait .action-bar { grid-area: actions; }
	.pattern-intro--portrait .pattern-hero-figure { grid-area: hero; width: 100%; margin: 0 0 20px; }
	.pattern-intro--portrait .pattern-badges { grid-area: badges; }
	.pattern-intro--portrait .feature-badges { grid-area: features; grid-template-columns: 1fr; gap: 16px; margin-top: 4px; }
	.pattern-intro--portrait .pattern-title { font-size: clamp(34px, 4vw, 52px); }
}

/* ---------------------------------------------------------------- Action bar */
.action-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 22px; }
.action-bar .action-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px; padding: 0 18px; margin: 0;
	border: 1.6px solid var(--cpt-ink); border-radius: 999px;
	background: #fff; color: var(--cpt-ink);
	font: 700 13px/1 var(--cpt-heading); letter-spacing: .04em; text-transform: uppercase;
	text-decoration: none; cursor: pointer; box-shadow: none;
	transition: background-color .15s ease, transform .15s ease;
}
.action-bar .action-btn:hover { background: var(--cpt-papaya); color: var(--cpt-ink); transform: translateY(-1px); }
.action-bar .action-btn svg { flex: none; }
.action-bar .action-btn--jump { background: var(--cpt-ink); color: var(--cpt-papaya); border-color: var(--cpt-ink); }
.action-bar .action-btn--jump:hover { background: var(--cpt-walnut-deep); color: #fff; }
@media (max-width: 479px) {
	.action-bar { gap: 8px; }
	.action-bar .action-btn { padding: 0 14px; }
	.action-bar .btn-pinterest { padding: 0 16px 0 12px; }
}

/* ---------------------------------------------------------------- Save to Pinterest (buttons + card) */
.btn-pinterest {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px; padding: 0 20px 0 14px;
	border: 0; border-radius: 999px;
	background: var(--cpt-pin-red); color: #fff;
	font: 700 15px/1 var(--cpt-body); letter-spacing: .01em; text-transform: none;
	text-decoration: none; white-space: nowrap; cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
	transition: background-color .15s ease, transform .15s ease;
}
a.btn-pinterest, a.btn-pinterest:visited { color: #fff; text-decoration: none; }
a.btn-pinterest:hover, a.btn-pinterest:focus-visible { background: var(--cpt-pin-red-deep); color: #fff; text-decoration: none; transform: translateY(-1px); }
.btn-pinterest:focus-visible { outline: 3px solid var(--cpt-ink); outline-offset: 2px; }
.btn-pinterest .pinterest-icon { width: 20px; height: 20px; flex: none; }

.pin-card {
	display: grid;
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	gap: 28px;
	align-items: center;
	margin: 44px 0;
	padding: 24px;
	border-radius: var(--cpt-radius);
	border: var(--cpt-border);
	background: var(--cpt-blush-soft);
	color: var(--cpt-ink);
}
.pin-card__media { margin: 0; }
.pin-card__image { display: block; width: 100%; height: auto; border-radius: 16px; border: 1.6px solid var(--cpt-ink); background: #fff; }
.pin-card__kicker { margin: 0 0 6px; font: 700 12px/1.2 var(--cpt-heading); letter-spacing: .12em; text-transform: uppercase; color: var(--cpt-coral-deep); }
.pin-card__title { margin: 0 0 10px; font-size: clamp(24px, 3.4vw, 34px); color: var(--cpt-ink); }
.pin-card__text { margin: 0 0 18px; font-size: 16px; }
.pin-card:not(:has(.pin-card__media)) { grid-template-columns: 1fr; }
@media (max-width: 640px) {
	.pin-card { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 18px; padding: 20px 18px; }
	.pin-card__media { width: min(100%, 260px); }
}

/* ---------------------------------------------------------------- "Save" buttons on images (pin.js) */
.pin-wrap { position: relative; display: block; max-width: 100%; }
.pin-btn {
	position: absolute; top: 10px; left: 10px; z-index: 3;
	display: inline-flex; align-items: center; gap: 6px;
	min-height: 44px; min-width: 44px; padding: 0 16px 0 12px;
	border-radius: 999px; background: var(--cpt-pin-red); color: #fff;
	font: 700 15px/1 var(--cpt-body); text-decoration: none; text-transform: none; letter-spacing: 0;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
	transition: opacity .15s ease, transform .15s ease, background-color .15s ease;
}
.pin-wrap > .pin-btn, .pin-wrap > .pin-btn:visited { color: #fff; text-decoration: none; }
.pin-wrap > .pin-btn:hover { background: var(--cpt-pin-red-deep); color: #fff; text-decoration: none; }
.pin-btn:focus-visible { opacity: 1; outline: 3px solid #fff; outline-offset: 0; box-shadow: 0 0 0 6px var(--cpt-pin-red); }
.pin-btn__icon { width: 20px; height: 20px; flex: none; }
.pin-wrap--hero .pin-btn { top: 16px; left: 16px; }
.pin-wrap--small .pin-btn { display: none; }
@media (hover: hover) and (pointer: fine) {
	.pin-wrap .pin-btn { opacity: 0; transform: translateY(-4px); }
	.pin-wrap:hover .pin-btn, .pin-wrap:focus-within .pin-btn { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- Layout: content + right rail */
.pattern-layout { display: block; margin-top: 24px; }
.pattern-main { min-width: 0; }
.pattern-rail { display: none; }
.pattern-main .toc-mobile { display: block; margin: 0 0 28px; }
.toc-mobile label { display: block; margin: 0 0 6px; font: 700 13px/1.2 var(--cpt-heading); letter-spacing: .06em; text-transform: uppercase; color: var(--cpt-ink); }
.toc-select {
	width: 100%; max-width: 420px; min-height: 48px; padding: 10px 44px 10px 16px;
	font: inherit; font-size: 16px; color: var(--cpt-ink);
	border: 2px solid var(--cpt-ink); border-radius: 14px;
	background: #fff var(--icon-chevron) right 14px center / 18px 18px no-repeat;
	appearance: none; -webkit-appearance: none; cursor: pointer;
}
@media (min-width: 1100px) {
	.pattern-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; }
	.pattern-main .toc-mobile { display: none; }
	.pattern-rail { display: block; position: sticky; top: var(--cpt-sticky-top); }
	.pattern-rail .toc { display: block; position: static; margin: 0 0 24px; }
}
.pattern-rail .toc { padding: 22px 22px 18px; }
.toc__title { margin: 0 0 8px; font: 700 15px/1.2 var(--cpt-heading); letter-spacing: .04em; text-transform: uppercase; color: var(--cpt-ink); }
.pattern-rail .toc ul { list-style: none; margin: 0; padding: 0; }
.pattern-rail .toc a { display: block; padding: 8px 0 8px 12px; margin-left: -2px; border-left: 3px solid transparent; color: var(--cpt-ink); opacity: 1; font-size: 15px; font-weight: 600; text-decoration: none; }
.pattern-rail .toc a:hover { color: var(--cpt-walnut); }
.pattern-rail .toc a.is-active { color: var(--cpt-walnut); border-left-color: var(--cpt-coral); }

/* ---------------------------------------------------------------- Post content (contract C3) */
.entry-content { font-size: 17px; line-height: 1.7; color: var(--cpt-ink); }
.entry-content > * { margin-top: 0; }
.entry-content p { margin: 0 0 1.05em; }
.entry-content .lead { font-size: 19px; font-weight: 500; line-height: 1.6; }
.entry-content a { color: var(--cpt-walnut); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.entry-content a:hover { color: var(--cpt-ink); }
.entry-content h2 {
	font-size: clamp(24px, 3.4vw, 34px);
	line-height: 1.12;
	margin: 1.8em 0 .6em;
	padding-top: 1.2em;
	background: repeating-linear-gradient(90deg, var(--cpt-line) 0 10px, transparent 10px 18px) top left / 100% 3px no-repeat;
}
.entry-content > h2:first-child { margin-top: 0; padding-top: 0; background: none; }
.entry-content h3 { font-size: clamp(18px, 2.2vw, 21px); line-height: 1.2; margin: 1.4em 0 .5em; }
.entry-content ul, .entry-content ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.entry-content li { margin: .4em 0; }
.entry-content ol > li::marker { font-weight: 700; color: var(--cpt-coral-deep); }
.entry-content strong { color: inherit; }

/* figures */
.entry-content figure { margin: 1.6em 0; }
.entry-content .cpt-figure, .entry-content .wp-block-image { max-width: 640px; margin-left: auto; margin-right: auto; }
.entry-content .cpt-figure img, .entry-content .wp-block-image img {
	display: block; max-width: 100%; height: auto; margin: 0 auto;
	border-radius: 18px; border: var(--cpt-border); box-shadow: var(--cpt-shadow); background: var(--cpt-papaya);
}
.entry-content figcaption { margin-top: 10px; font-size: 14px; text-align: center; color: var(--cpt-muted); }

/* gallery strip (why-love) */
.entry-content .gallery-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 1.4em 0 1.8em; }
.entry-content .gallery-strip > * { margin: 0; min-width: 0; max-width: none; border: 0; border-radius: 0; box-shadow: none; aspect-ratio: auto; cursor: auto; transition: none; }
.entry-content .gallery-strip > *:hover { transform: none; }
.entry-content .gallery-strip img {
	display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
	border-radius: 16px; border: 1.6px solid var(--cpt-ink); box-shadow: none; cursor: zoom-in;
	transition: transform .2s ease;
}
.entry-content .gallery-strip img:hover { transform: scale(1.02); }
.entry-content .gallery-strip img:focus-visible { outline: 3px solid var(--cpt-walnut); outline-offset: 3px; }
@media (max-width: 599px) {
	.entry-content .gallery-strip {
		display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin;
	}
	.entry-content .gallery-strip > * { flex: 0 0 72%; scroll-snap-align: start; }
}
/* 1 image: one larger 4:5 image (content width up to 520px); 2 images: side by side at every width.
   Class from the renderer (gallery-strip--1/--2/--many); :has() covers content rendered before it. */
.entry-content .gallery-strip.gallery-strip--1 { display: block; max-width: 520px; margin-left: auto; margin-right: auto; overflow: visible; padding-bottom: 0; }
.entry-content .gallery-strip:has(> :only-child) { display: block; max-width: 520px; margin-left: auto; margin-right: auto; overflow: visible; padding-bottom: 0; }
.entry-content .gallery-strip > :only-child { flex: none; width: 100%; }
.entry-content .gallery-strip.gallery-strip--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; padding-bottom: 0; max-width: 640px; margin-left: auto; margin-right: auto; }
.entry-content .gallery-strip:has(> :first-child:nth-last-child(2)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; padding-bottom: 0; max-width: 640px; margin-left: auto; margin-right: auto; }
.entry-content .gallery-strip > :first-child:nth-last-child(2), .entry-content .gallery-strip > :first-child:nth-last-child(2) ~ * { flex: none; }

/* materials */
.entry-content .materials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 20px; margin: 1.2em 0 1.6em; }
.entry-content .materials-grid .card { padding: 20px 22px; }
.entry-content .materials-title { margin: 0 0 10px; font-size: 17px; letter-spacing: .03em; color: var(--cpt-ink); }
.entry-content .materials-grid ol.numbered-list { list-style: decimal-leading-zero; margin: 0; padding: 0 0 0 2.5em; }
.entry-content .numbered-list li {
	margin: 0; padding: 7px 0 7px 4px; border-bottom: 1px dashed var(--cpt-line); font-size: 16px; line-height: 1.5;
}
.entry-content .numbered-list li:last-child { border-bottom: 0; }
.entry-content .numbered-list li::marker { font-family: var(--cpt-heading); font-weight: 700; font-size: 15px; color: var(--cpt-coral-deep); }

/* the free pattern card */
.entry-content #pattern-card {
	display: block; position: relative; overflow: visible; margin: 1em 0 1.8em;
	padding: clamp(18px, 4vw, 32px); transform: none;
}
.entry-content #pattern-card:hover { transform: none; box-shadow: var(--cpt-shadow); }
.entry-content #pattern-card .badges-row { margin: 0 0 14px; }
.entry-content #pattern-card [data-open-modal] { min-height: 44px; margin: 0 0 18px; }
.entry-content #pattern-card .progress-track { margin: 4px 0 8px; }
.entry-content #pattern-card .progress-track__fill { background: var(--cpt-coral); }
.entry-content .progress-label { margin: 0 0 8px; font-size: 14px; font-weight: 700; }
.entry-content .pattern-part {
	margin: 1.5em 0 .5em; padding-bottom: 8px;
	border-bottom: 3px solid var(--cpt-papaya);
	font-size: clamp(17px, 2.2vw, 20px); color: var(--cpt-ink);
}
.entry-content .progress-label + .pattern-part { margin-top: 1em; }
.entry-content ol.rounds { list-style: none; margin: 0 0 .6em; padding: 0; }
.entry-content .round-item {
	display: block; position: relative; margin: 2px 0; padding: 8px 10px 8px 34px;
	border-radius: 12px; line-height: 1.55; font-size: 16.5px; cursor: auto; color: var(--cpt-ink);
	text-decoration: none; background: none;
}
.entry-content .round-item[data-round-id]::before {
	content: ''; position: absolute; left: 12px; top: 1.05em;
	width: 9px; height: 9px; border-radius: 50%; background: var(--cpt-coral);
}
.entry-content .round-label { color: var(--cpt-walnut); font-weight: 700; }
/* interactive (JS on) */
.entry-content .is-tracking .round-item[data-round-id] { padding: 0; }
.entry-content .is-tracking .round-item[data-round-id]::before { content: none; }
.entry-content .round-item__toggle {
	display: block; position: relative; padding: 10px 12px 10px 48px;
	border-radius: 12px; cursor: pointer; user-select: text;
	transition: background-color .12s ease;
}
.entry-content .round-item__toggle::before {
	content: ''; position: absolute; left: 12px; top: 11px; width: 22px; height: 22px; box-sizing: border-box;
	border: 2px solid var(--cpt-walnut); border-radius: 7px; background: #fff;
}
.entry-content .round-item__toggle:hover { background: var(--cpt-paper); }
.entry-content .round-item__toggle:focus-visible { outline: 3px solid var(--cpt-walnut); outline-offset: 0; }
.entry-content .round-item.is-checked { color: var(--cpt-ink); text-decoration: none; }
.entry-content .round-item.is-checked .round-item__toggle { color: var(--cpt-muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--cpt-ink) 55%, transparent); }
.entry-content .round-item.is-checked .round-item__toggle::before { background: var(--cpt-walnut) var(--icon-check) center / 16px 16px no-repeat; border-color: var(--cpt-walnut); }
.entry-content .round-item.is-checked .round-label { color: inherit; }
/* tips inside the pattern */
.entry-content .round-item--info {
	margin: 10px 0; padding: 12px 14px 12px 48px;
	background: var(--cpt-papaya); border: 1.6px solid color-mix(in srgb, var(--cpt-ink) 40%, transparent);
	border-radius: 12px; font-size: 15.5px; cursor: default;
}
.entry-content .round-item--info::before {
	content: ''; position: absolute; left: 14px; top: 12px; width: 22px; height: 22px;
	background-color: var(--cpt-walnut);
	-webkit-mask: var(--icon-bulb) center / contain no-repeat; mask: var(--icon-bulb) center / contain no-repeat;
}

/* mistakes / notes */
.entry-content .mistake-list, .entry-content .note-list { list-style: none; margin: 1em 0 1.6em; padding: 0; }
.entry-content .mistake-list li, .entry-content .note-list li {
	position: relative; margin: 0 0 10px; padding: 12px 16px 12px 50px;
	border-radius: 14px; border: 1.6px solid var(--cpt-line); line-height: 1.55;
}
.entry-content .mistake-list li { background: var(--cpt-blush-soft); }
.entry-content .note-list li { background: var(--cpt-sand-soft); }
.entry-content .mistake-list li::before, .entry-content .note-list li::before {
	content: ''; position: absolute; left: 16px; top: 13px; width: 22px; height: 22px;
}
.entry-content .mistake-list li::before { background-color: var(--cpt-coral-deep); -webkit-mask: var(--icon-x) center / contain no-repeat; mask: var(--icon-x) center / contain no-repeat; }
.entry-content .note-list li::before { background-color: var(--cpt-walnut); -webkit-mask: var(--icon-bulb) center / contain no-repeat; mask: var(--icon-bulb) center / contain no-repeat; }

/* abbreviations */
.abbr-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 8px 14px; margin: 1em 0 1.6em; padding: 0; }
.abbr-list > div { display: flex; align-items: baseline; gap: 12px; margin: 0; padding: 9px 14px; border-radius: 12px; background: var(--cpt-paper); border: 1px solid var(--cpt-line); }
.abbr-list dt { flex: none; min-width: 3.4em; font: 700 15px/1.35 var(--cpt-heading); letter-spacing: .02em; color: var(--cpt-walnut); }
.abbr-list dd { margin: 0; font-size: 15.5px; line-height: 1.45; color: var(--cpt-ink); }

/* FAQ (base look comes from style.css .faq-item) */
.entry-content .faq-list { display: grid; gap: 12px; margin: 1em 0 .5em; }
.entry-content .faq-item summary { min-height: 44px; }
.entry-content .faq-item summary:focus-visible { outline: 3px solid var(--cpt-walnut); outline-offset: -3px; border-radius: 18px; }
.entry-content .faq-item > p { color: var(--cpt-ink); }

/* WordPress content classes */
.entry-content .alignleft { float: left; margin: .3em 1.4em 1em 0; }
.entry-content .alignright { float: right; margin: .3em 0 1em 1.4em; }
.entry-content .aligncenter { margin-left: auto; margin-right: auto; }
.entry-content .wp-block-table, .entry-content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.entry-content td, .entry-content th { padding: 8px 12px; border: 1px solid var(--cpt-line); }
.entry-content::after { content: ''; display: table; clear: both; }

/* ---------------------------------------------------------------- Author box, related */
.author-box.card { display: flex; align-items: flex-start; gap: 18px; margin: 40px 0; padding: 24px; background: #fff; }
.author-box__photo { flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2.4px solid var(--cpt-ink); }
.author-box p.author-box__kicker { margin: 0 0 4px; font: 700 12px/1.2 var(--cpt-heading); letter-spacing: .12em; text-transform: uppercase; color: var(--cpt-coral-deep); }
.author-box__name { margin: 0 0 6px; font-size: 22px; }
.author-box__name a { color: var(--cpt-ink); text-decoration: none; }
.author-box__name a:hover { color: var(--cpt-walnut); text-decoration: underline; }
.author-box__bio { margin: 0 0 10px; font-size: 15.5px; line-height: 1.55; opacity: 1; color: var(--cpt-ink); }
.author-box__link { font-weight: 700; color: var(--cpt-walnut); text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding: 4px 0; }

.related-patterns { margin: 48px 0 8px; }
.related-patterns > h2 { font-size: clamp(24px, 3.4vw, 34px); margin-bottom: 20px; }
.related-patterns .related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 24px; justify-content: stretch; }
.related-patterns .related-grid > * { max-width: none; flex: none; }
.related-patterns__more { margin: 20px 0 0; font-weight: 700; }
.related-patterns__more a { color: var(--cpt-walnut); }

/* ---------------------------------------------------------------- Pattern cards (4:5) */
article.pattern-card { position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
article.pattern-card .pattern-card__media { margin: 0; overflow: hidden; border-bottom: var(--cpt-border); border-radius: 22px 22px 0 0; background: var(--cpt-papaya); }
article.pattern-card .pattern-card__image { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border: 0; border-radius: 0; }
article.pattern-card .pattern-card__body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 20px; }
article.pattern-card .pattern-card__meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
article.pattern-card .pattern-card__meta .badge { padding: 6px 12px; font-size: 12px; box-shadow: none; }
article.pattern-card .pattern-card__title { margin: 0; font-size: 19px; line-height: 1.2; text-transform: none; letter-spacing: 0; }
article.pattern-card .pattern-card__title a { color: var(--cpt-ink); text-decoration: none; }
article.pattern-card .pattern-card__title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
article.pattern-card:hover .pattern-card__title a { color: var(--cpt-walnut); text-decoration: underline; text-underline-offset: 3px; }
article.pattern-card .pattern-card__title a:focus-visible { outline: none; }
article.pattern-card:focus-within { outline: 3px solid var(--cpt-walnut); outline-offset: 4px; }
article.pattern-card .pattern-card__excerpt { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--cpt-ink); opacity: 1; }

/* ---------------------------------------------------------------- Listings: header, pills, search, pagination */
.archive-header { margin-bottom: 8px; }
.archive-title { font-size: clamp(32px, 6vw, 60px); line-height: 1.04; margin: 0 0 12px; overflow-wrap: break-word; }
.archive-description { max-width: 70ch; font-size: 17px; color: var(--cpt-ink); }
.archive-description p { margin: 0 0 .8em; }

.topic-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 22px 0 14px; }
.topic-links__label { font: 700 13px/1.2 var(--cpt-heading); letter-spacing: .06em; text-transform: uppercase; color: var(--cpt-ink); margin: 0; }
.topic-links__list { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.filter-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.topic-link, .filter-pill {
	display: inline-flex; align-items: center; gap: 6px; flex: none;
	min-height: 44px; padding: 0 18px;
	border: 1.6px solid var(--cpt-ink); border-radius: 999px;
	background: #fff; color: var(--cpt-ink);
	font: 700 13px/1 var(--cpt-heading); letter-spacing: .04em; text-transform: uppercase;
	text-decoration: none; white-space: nowrap; cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.topic-link:hover, .filter-pill:hover { background: var(--cpt-papaya); color: var(--cpt-ink); }
.topic-link.is-active, .filter-pill.is-active, .topic-link[aria-current], .filter-pill[aria-current] { background: var(--cpt-ink); color: var(--cpt-papaya); border-color: var(--cpt-ink); }
.topic-link__count { font: 700 12px/1 var(--cpt-body); opacity: .85; }
@media (max-width: 767px) {
	.topic-links { display: block; }
	.topic-links__label { display: block; margin-bottom: 8px; }
	.topic-links__list {
		flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
		margin: 0; padding: 2px 2px 8px; scrollbar-width: thin;
	}
	.topic-links__list > * { scroll-snap-align: start; }
	.filter-pills { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; padding: 2px 2px 8px; scrollbar-width: thin; }
}

.pattern-search { display: flex; gap: 8px; align-items: stretch; max-width: 480px; margin: 0 0 10px; }
.pattern-search .search-box { flex: 1; min-width: 0; max-width: none; min-height: 48px; font: inherit; font-size: 16px; color: var(--cpt-ink); }
.search-box { font: inherit; color: var(--cpt-ink); }
.search-box::placeholder { color: var(--cpt-muted); opacity: 1; }
.search-submit {
	flex: none; min-height: 48px; padding: 0 20px; border: 2px solid var(--cpt-ink); border-radius: 999px;
	background: var(--cpt-ink); color: var(--cpt-papaya);
	font: 700 13px/1 var(--cpt-heading); letter-spacing: .04em; text-transform: uppercase; cursor: pointer;
}
.search-submit:hover { background: var(--cpt-walnut-deep); color: #fff; }
.pattern-count { margin: 6px 0 0; min-height: 1.5em; font-size: 14px; font-weight: 700; color: var(--cpt-muted); }
.pattern-grid[aria-busy="true"] { opacity: .55; transition: opacity .15s ease; }
.pattern-grid > .pattern-grid__empty { flex: 1 1 100%; max-width: none; text-align: center; padding: 40px 0; }

.pagination { flex-wrap: wrap; align-items: center; gap: 8px; }
.pagination > a, .pagination > span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 14px; }
.pagination .pagination__gap { border: 0; min-width: 24px; padding: 0; }
.pagination .current { background: var(--cpt-ink); color: var(--cpt-papaya); border-color: var(--cpt-ink); }

/* ---------------------------------------------------------------- Dialogs (abbreviations, lightbox) */
dialog.cpt-dialog {
	width: min(92vw, 560px); max-width: none; max-height: 86vh; margin: auto; padding: 0;
	border: var(--cpt-border); border-radius: var(--cpt-radius);
	background: #fff; color: var(--cpt-ink); box-shadow: var(--cpt-shadow); overflow: hidden;
}
dialog.cpt-dialog::backdrop { background: rgba(43, 25, 9, .62); }
.cpt-dialog__panel { max-height: 86vh; overflow: auto; padding: 22px 24px 24px; overscroll-behavior: contain; }
.cpt-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.cpt-dialog__title { margin: 0; font-size: 26px; color: var(--cpt-ink); }
.cpt-dialog__close {
	flex: none; min-height: 44px; padding: 0 18px; border: 1.6px solid var(--cpt-ink); border-radius: 999px;
	background: var(--cpt-papaya); color: var(--cpt-ink);
	font: 700 13px/1 var(--cpt-heading); letter-spacing: .04em; text-transform: uppercase; cursor: pointer;
}
.cpt-dialog__close:hover { background: var(--cpt-blush); }
.cpt-dialog__close:focus-visible { outline: 3px solid var(--cpt-walnut); outline-offset: 2px; }
.cpt-dialog .abbr-list { margin: 0; }
dialog.cpt-lightbox { width: min(94vw, 980px); }
.cpt-lightbox__img { display: block; width: 100%; height: auto; max-height: calc(86vh - 110px); object-fit: contain; border-radius: 14px; background: var(--cpt-paper); }
html.cpt-dialog-open { overflow: hidden; }

/* ---------------------------------------------------------------- Ad slots (reserved height, labelled) */
.cpt-ad { display: block; clear: both; min-height: 280px; margin: 40px auto; text-align: center; }
.cpt-ad__label { display: block; margin: 0 0 6px; font-size: 11px; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--cpt-muted); }
.pattern-rail .cpt-ad { margin: 0; }

/* ---------------------------------------------------------------- Motion + print */
@media (prefers-reduced-motion: reduce) {
	.pin-btn, .btn-pinterest, .action-bar .action-btn, article.pattern-card, article.pattern-card .pattern-card__image,
	.entry-content .gallery-strip img, .topic-link, .filter-pill { transition: none !important; transform: none !important; }
}

@media print {
	.rank-math-breadcrumb, .action-bar, .pin-btn, .btn-pinterest, .pin-card, .pattern-rail, .toc-mobile,
	.related-patterns, .author-box, .cpt-ad, .newsletter-signup, .entry-content [data-open-modal],
	dialog, .pattern-badges a.badge--topic { display: none !important; }
	.pattern-layout, .pattern-intro--portrait { display: block !important; }
	.pattern-hero-figure { width: auto !important; max-width: 45%; margin: 0 0 12pt; }
	img.pattern-hero, .entry-content img { box-shadow: none !important; }
	.entry-content { font-size: 11.5pt; line-height: 1.5; }
	.entry-content h2 { background: none; padding-top: 0; margin-top: 1.2em; break-after: avoid; }
	.entry-content h3, .entry-content .pattern-part { break-after: avoid; }
	.entry-content #pattern-card { box-shadow: none; border: 1px solid #000; }
	.entry-content .round-item, .entry-content .round-item--info, .entry-content .mistake-list li, .entry-content .note-list li { break-inside: avoid; }
	.entry-content .round-item__toggle::before, .entry-content .round-item[data-round-id]::before { border-color: #000; }
	.entry-content .gallery-strip { display: grid !important; grid-template-columns: repeat(3, 1fr); overflow: visible; }
	.entry-content .gallery-strip--1 { grid-template-columns: minmax(0, 320px); justify-content: center; }
	.entry-content .gallery-strip--2 { grid-template-columns: repeat(2, 1fr); }
	.entry-content .gallery-strip > * { flex: none; }
	.entry-content .faq-item p { display: block; }
	.entry-content a { color: #000; }
}