/* DaFont Tools: site-wide styles. Loaded on every front-end page. */

:root {
	/* Type Specimen design system (Phase G5a). Use these everywhere, not literal colours. */
	--daf-ink: #14284B;
	--daf-coral: #F2545B;
	--daf-coral-dark: #C93C44;
	--daf-paper: #FBF7F1;
	--daf-saffron: #FFC24B;
	--daf-text: #1E2230;
	--daf-muted: #5B6475;
	--daf-line: #E8E1D6;
	--daf-radius: 12px;
	--daf-shadow: 0 6px 20px rgba(20, 40, 75, .08);
	/* Old names, kept so existing rules keep working. */
	--daf-accent: var(--daf-coral);
	--daf-accent-strong: var(--daf-coral-dark);
	--daf-soft: var(--daf-paper);
}



/* Phone header: compact bar, logo about 40px tall, menu left, search right (767px and below). */
@media (max-width: 767px) {
	:is(.td-header-mobile-wrap, .td-header-mobile-sticky-wrap) .vc_row {
		display: flex !important;
		align-items: center !important;
		height: 58px !important;
		margin: 0 !important;
	}
	:is(.td-header-mobile-wrap, .td-header-mobile-sticky-wrap) .vc_column,
	:is(.td-header-mobile-wrap, .td-header-mobile-sticky-wrap) .wpb_wrapper {
		height: 58px !important;
		margin: 0 !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
	:is(.td-header-mobile-wrap, .td-header-mobile-sticky-wrap) .vc_column {
		display: flex !important;
		align-items: center !important;
		width: 100% !important;
	}
	:is(.td-header-mobile-wrap, .td-header-mobile-sticky-wrap) .wpb_wrapper {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}
	:is(.td-header-mobile-wrap, .td-header-mobile-sticky-wrap) .tdb_mobile_menu,
	:is(.td-header-mobile-wrap, .td-header-mobile-sticky-wrap) .tdb_mobile_search,
	:is(.td-header-mobile-wrap, .td-header-mobile-sticky-wrap) .tdb_header_logo {
		height: 58px !important;
		margin: 0 !important;
		display: flex !important;
		align-items: center !important;
	}
	:is(.td-header-mobile-wrap, .td-header-mobile-sticky-wrap) .tdb_mobile_menu .tdb-block-inner,
	:is(.td-header-mobile-wrap, .td-header-mobile-sticky-wrap) .tdb_mobile_search .tdb-block-inner {
		height: 58px !important;
		display: flex !important;
		align-items: center !important;
	}
	:is(.td-header-mobile-wrap, .td-header-mobile-sticky-wrap) .tdb_header_logo {
		position: absolute;
		left: 50%;
		top: 0 !important;
		transform: translateX(-50%);
		width: auto !important;
	}
	:is(.td-header-mobile-wrap, .td-header-mobile-sticky-wrap) .tdb_header_logo img.tdb-logo-img {
		height: 40px !important;
		width: auto !important;
	}
	/* Menu and search sit at the bar's edges, so the search icon cannot wrap onto a second row. */
	:is(.td-header-mobile-wrap, .td-header-mobile-sticky-wrap) .tdb_mobile_menu {
		position: absolute !important;
		top: 0 !important;
		left: 4px !important;
		width: 58px !important;
		margin: 0 !important;
	}
	:is(.td-header-mobile-wrap, .td-header-mobile-sticky-wrap) .tdb_mobile_search {
		position: absolute !important;
		top: 0 !important;
		right: 4px !important;
		left: auto !important;
		width: 58px !important;
		margin: 0 !important;
	}

	/* Off-canvas menu: the theme sets 35px text on fixed 42px rows, so long names overlapped. */
	#td-mobile-nav .menu-item {
		height: auto !important;
	}
	#td-mobile-nav .menu-item > a {
		height: auto !important;
		min-height: 42px;
		padding-top: 8px !important;
		padding-bottom: 8px !important;
		font-size: 22px !important;
		line-height: 1.35 !important;
		white-space: normal !important;
	}
}

/* Related Fonts cards (single post, bottom): same height, 16:9 image cropped to fill, title at most 2 lines. */
.tdb_single_related .tdb_module_related.td_module_wrap {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	padding-bottom: 0 !important;
	margin-bottom: 9px !important;
}
.tdb_single_related .tdb_module_related .td-module-container {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	height: auto;
}
.tdb_single_related .tdb_module_related .td-image-wrap {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}
.tdb_single_related .tdb_module_related .entry-thumb {
	display: block;
	width: 100%;
	height: 100%;
	background-size: cover !important;
	background-position: center;
}
.tdb_single_related .tdb_module_related .td-module-meta-info {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}
.tdb_single_related .tdb_module_related .entry-title {
	display: -webkit-box;
	min-height: 2lh;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

/* Creative Fabrica shelf (injected by the Cloudflare Worker): never wider than its column, scrolls inside itself. */
.pd-cf-shelf {
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	overflow: hidden;
}
.pd-cf-shelf *,
.pd-cf-shelf *::before,
.pd-cf-shelf *::after {
	box-sizing: border-box;
}
.pd-cf-shelf__track {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Post and page text: readable sans, 18px desktop / 17px phone. */
/* H1 and H2 keep the serif: 40px desktop, 30px phone (H1). */
body.single-post .tdb_title .tdb-title-text {
	font-size: 30px !important;
	line-height: 1.2 !important;
}
@media (min-width: 1024px) {
	body.single-post .tdb_title .tdb-title-text { font-size: 40px !important; }
}

body:is(.single-post, .page) :is(.tdb_single_content, .td-page-content, .td-post-content) {
	color: var(--daf-text);
}
body:is(.single-post, .page) :is(.tdb_single_content, .td-page-content, .td-post-content) p,
body:is(.single-post, .page) :is(.tdb_single_content, .td-page-content, .td-post-content) li,
body:is(.single-post, .page) :is(.tdb_single_content, .td-page-content, .td-post-content) td {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
	font-size: 17px !important;
	line-height: 1.7;
	color: var(--daf-text);
}
@media (min-width: 1024px) {
	body:is(.single-post, .page) :is(.tdb_single_content, .td-page-content, .td-post-content) p,
	body:is(.single-post, .page) :is(.tdb_single_content, .td-page-content, .td-post-content) li,
	body:is(.single-post, .page) :is(.tdb_single_content, .td-page-content, .td-post-content) td {
		font-size: 18px !important;
	}
}
body:is(.single-post, .page) :is(.tdb_single_content, .td-page-content, .td-post-content) p {
	max-width: 72ch;
	margin: 0 0 1em;
}
body:is(.single-post, .page) :is(.tdb_single_content, .td-page-content, .td-post-content) ul,
body:is(.single-post, .page) :is(.tdb_single_content, .td-page-content, .td-post-content) ol {
	line-height: 1.6;
}
body:is(.single-post, .page) :is(.tdb_single_content, .td-page-content, .td-post-content) li {
	margin-bottom: 0.4em;
}
body:is(.single-post, .page) :is(.tdb_single_content, .td-page-content, .td-post-content) a:hover {
	color: var(--daf-coral-dark);
	text-decoration: underline;
	text-decoration-color: var(--daf-coral);
}
body:is(.single-post, .page) :is(.tdb_single_content, .td-page-content, .td-post-content) h2 {
	margin-top: 1.6em;
	font-size: 24px;
	line-height: 1.25;
}
body:is(.single-post, .page) :is(.tdb_single_content, .td-page-content, .td-post-content) h3 {
	font-size: 19px;
	line-height: 1.3;
}
@media (min-width: 1024px) {
	body:is(.single-post, .page) :is(.tdb_single_content, .td-page-content, .td-post-content) h2 { font-size: 28px; }
	body:is(.single-post, .page) :is(.tdb_single_content, .td-page-content, .td-post-content) h3 { font-size: 21px; }
}
body:is(.single-post, .page) :is(.tdb_single_content, .td-page-content, .td-post-content) img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	border-radius: 8px;
}
/* Single posts, desktop: the sidebar column (the one with the guides list) stays in view while the article scrolls. */
@media (min-width: 1024px) {
	body.single-post .td-theme-wrap {
		overflow: clip !important;
	}
	body.single-post .vc_row > .vc_column:has(> .wpb_wrapper > .wpb_text_column) {
		position: sticky;
		top: 80px;
		align-self: start;
	}
}

/* G2 polish: one meta line under the H1, breadcrumb, category chips. */
body.single-post .tdb_title {
	margin-bottom: 8px !important;
}
body.single-post .tdb_single_author,
body.single-post .tdb_single_date,
body.single-post .tdb_single_reading_time {
	display: inline-block !important;
	vertical-align: top !important;
	white-space: nowrap !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 14px !important;
	line-height: 20px !important;
	height: 20px !important;
	color: #666 !important;
}
body.single-post .tdb_single_author *,
body.single-post .tdb_single_modified_date *,
body.single-post .tdb_single_reading_time * {
	color: #666 !important;
	font-size: 14px !important;
}
body.single-post .tdb_single_date::before,
body.single-post .tdb_single_reading_time::before {
	content: "\00B7\00A0";
	margin-right: 6px;
	color: #666;
}
body.single-post .tdb_single_featured_image {
	margin-top: 16px !important;
}
body.single-post .tdb-breadcrumbs,
body.single-post .tdb-breadcrumbs a,
body.single-post .tdb-breadcrumbs span {
	font-size: 13px !important;
	color: #666 !important;
}
body.single-post .tdb_single_categories a {
	display: inline-flex !important;
	align-items: center;
	height: 24px !important;
	margin: 0 6px 6px 0 !important;
	padding: 0 10px !important;
	font-size: 12px !important;
	line-height: 24px !important;
}
body.single-post .tdb-breadcrumbs .tdb-bread-sep {
	display: inline-block;
	width: auto;
	height: auto;
	margin: 0 6px;
}
body.single-post .tdb-breadcrumbs .tdb-bread-sep::before {
	content: "\203A";
	color: #666;
	font-size: 13px;
}
body.single-post .tdb-breadcrumbs .tdb-bread-sep svg {
	display: none;
}
/* The main column starts at the same left edge as the H1, breadcrumb and image. */
body.single-post .tdb_single_content .tdb-block-inner {
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: 100% !important;
}
@media (max-width: 767px) {
	body.single-post .tdb_single_author,
	body.single-post .tdb_single_date,
	body.single-post .tdb_single_reading_time,
	body.single-post .tdb_single_author *,
	body.single-post .tdb_single_date *,
	body.single-post .tdb_single_reading_time * {
		font-size: 13px !important;
	}
}

/* Meta items are inline, so the separator and the text share one line. */
body.single-post .tdb_single_author .tdb-block-inner,
body.single-post .tdb_single_date .tdb-block-inner,
body.single-post .tdb_single_reading_time .tdb-block-inner {
	display: inline !important;
	line-height: 20px !important;
	position: static !important;
}

/* Phase G3: homepage blocks (server-rendered by DAF_Home). Serif headings, coral accent, white background. */
.daf-home {
	max-width: 1140px;
	margin: 0 auto;
	padding: 24px 20px 40px;
	color: var(--daf-text);
}
.daf-home h1,
.daf-home h2 {
	font-family: "Cormorant Garamond", Georgia, serif;
	color: var(--daf-ink);
	line-height: 1.2;
}
.daf-home h1 {
	margin: 0 0 12px;
	font-size: 40px;
}
.daf-home h2 {
	margin: 0 0 16px;
	font-size: 28px;
}
.daf-hero__intro {
	max-width: 72ch;
	margin: 0 0 20px;
	font-size: 17px;
	line-height: 1.7;
	color: #444;
}
.daf-section {
	margin: 40px 0 0;
}
.daf-section--ad {
	margin-top: 32px;
}
.daf-section--ad .daf-ad {
	min-height: 280px;
}
.daf-search {
	display: flex;
	max-width: 640px;
	margin: 0 0 16px;
}
.daf-search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 52px;
	padding: 0 16px;
	border: 2px solid var(--daf-line);
	border-right: 0;
	border-radius: 8px 0 0 8px;
	font-size: 17px;
}
.daf-search input[type="search"]:focus {
	outline: none;
	border-color: var(--daf-coral);
}
.daf-search button {
	height: 52px;
	padding: 0 22px;
	border: 2px solid var(--daf-coral);
	border-radius: 0 8px 8px 0;
	background: var(--daf-coral);
	color: #fff;
	font-size: 16px;
	cursor: pointer;
}
.daf-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.daf-chips a {
	display: inline-block;
	padding: 6px 14px;
	border: 1px solid var(--daf-line);
	border-radius: 999px;
	color: var(--daf-text);
	font-size: 14px;
	text-decoration: none;
}
.daf-chips a:hover {
	border-color: var(--daf-coral);
	color: var(--daf-coral-dark);
}
.daf-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.daf-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	color: var(--daf-text);
	text-decoration: none;
}
.daf-card__img {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 8px;
	background: var(--daf-paper);
}
.daf-card__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.daf-card__chip {
	align-self: flex-start;
	margin-top: 10px;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--daf-paper);
	color: var(--daf-coral-dark);
	font-size: 12px;
}
.daf-card__title {
	display: -webkit-box;
	margin-top: 6px;
	overflow: hidden;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
.daf-card:hover .daf-card__title {
	color: var(--daf-coral-dark);
}
.daf-grid--tiles {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}
.daf-tile {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px;
	border: 1px solid var(--daf-line);
	border-radius: 8px;
	color: var(--daf-text);
	text-decoration: none;
}
.daf-tile:hover {
	border-color: var(--daf-coral);
}
.daf-tile__name {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 20px;
	line-height: 1.2;
}
.daf-tile__count {
	color: var(--daf-muted);
	font-size: 13px;
}
.daf-grid--tools {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.daf-tool-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px;
	border: 1px solid var(--daf-line);
	border-radius: 8px;
	color: var(--daf-text);
	text-decoration: none;
}
.daf-tool-card:hover {
	border-color: var(--daf-coral);
}
.daf-tool-card__name {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 22px;
	line-height: 1.2;
}
.daf-tool-card__text {
	color: var(--daf-muted);
	font-size: 15px;
	line-height: 1.5;
}
@media (max-width: 1023px) {
	.daf-grid--cards,
	.daf-grid--tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.daf-grid--tools {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 639px) {
	.daf-home {
		padding: 20px 16px 32px;
	}
	.daf-home h1 {
		font-size: 30px;
	}
	.daf-home h2 {
		font-size: 24px;
	}
	.daf-grid--cards,
	.daf-grid--tiles,
	.daf-grid--tools {
		grid-template-columns: minmax(0, 1fr);
	}
	.daf-search button {
		padding: 0 14px;
	}
}

/* Phase G3: at most three category chips on a single post (the rest are hidden, not removed). */
body.single-post .tdb_single_categories a:nth-of-type(n+4) {
	display: none !important;
}

/* Phase G3 (1.4.2): category and search archives. Same card grid as the homepage. */
.daf-archive {
	max-width: 1140px;
	margin: 0 auto;
	padding: 24px 20px 40px;
	color: var(--daf-text);
}
.daf-archive-head h1 {
	margin: 0 0 8px;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 40px;
	line-height: 1.2;
	color: var(--daf-ink);
}
.daf-archive-intro {
	margin: 0 0 28px;
	max-width: 72ch;
	font-size: 17px;
	line-height: 1.6;
	color: #444;
}
.daf-archive .daf-grid--archive {
	margin-top: 8px;
}
.daf-grid__ad {
	grid-column: 1 / -1;
	min-height: 280px;
}
.daf-card__img--text {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: #fde3e4;
	text-align: center;
}
.daf-card__img--text span {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 24px;
	line-height: 1.2;
	color: #8a1c24;
}
.daf-archive-empty-wrap {
	max-width: 640px;
}
.daf-archive-empty {
	margin: 0 0 16px;
	font-size: 17px;
	color: #444;
}
.daf-pager {
	margin: 36px 0 0;
}
.daf-pager ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.daf-pager .page-numbers {
	display: inline-block;
	min-width: 40px;
	padding: 8px 14px;
	border: 1px solid var(--daf-line);
	border-radius: 8px;
	color: var(--daf-text);
	font-size: 15px;
	text-align: center;
	text-decoration: none;
}
.daf-pager a.page-numbers:hover {
	border-color: var(--daf-coral);
	color: var(--daf-coral-dark);
}
.daf-pager .page-numbers.current {
	border-color: var(--daf-coral);
	background: var(--daf-coral);
	color: #fff;
}
@media (max-width: 639px) {
	.daf-archive {
		padding: 20px 16px 32px;
	}
	.daf-archive-head h1 {
		font-size: 30px;
	}
}
/* Pagination: keep the row layout even when the theme styles lists as boxes. */
.daf-pager ul,
.daf-pager ul.page-numbers {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	list-style: none !important;
}
.daf-pager li {
	display: block;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
}
.daf-pager .page-numbers {
	margin: 0 !important;
}

/* ---- Phase G5a: Type Specimen design system ---------------------------------------------------- */

/* Single post title: ink, with the final "Font" in coral and a highlighter stroke. */
body.single-post .tdb-title-text {
	color: var(--daf-ink) !important;
}
.daf-h1-accent {
	color: var(--daf-coral);
	background: linear-gradient(transparent 62%, rgba(242, 84, 91, .18) 0);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* H2 in post content: numbered like a specimen sheet (01, 02...). Tool and shelf headings are not numbered. */
.tdb_single_content,
.td-post-content {
	counter-reset: daf-h2;
}
body:is(.single-post, .page) :is(.tdb_single_content, .td-post-content) h2 {
	counter-increment: daf-h2;
	position: relative;
	margin: 2em 0 .6em;
	padding-bottom: .35em;
	border-bottom: 1px solid var(--daf-line);
	color: var(--daf-ink);
}
body:is(.single-post, .page) :is(.tdb_single_content, .td-post-content) h2::before {
	content: counter(daf-h2, decimal-leading-zero);
	display: inline-block;
	margin-right: .6em;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .7em;
	letter-spacing: .08em;
	color: var(--daf-coral-dark);
	vertical-align: middle;
}
.daf-tool h2,
.daf-cf h2 {
	counter-increment: none !important;
}
.daf-tool h2::before,
.daf-cf h2::before {
	content: none !important;
}
body:is(.single-post, .page) :is(.tdb_single_content, .td-post-content) h3 {
	color: var(--daf-coral-dark);
}

/* Quick answer box (the class is added by DAF_Design; phase H uses it). */
.daf-answer {
	position: relative;
	margin: 1.4em 0;
	padding: 18px 20px 16px;
	background: var(--daf-paper);
	border-left: 4px solid var(--daf-ink);
	border-radius: var(--daf-radius);
}
.daf-answer::before {
	content: "Quick answer";
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--daf-coral-dark);
}
.daf-answer > strong:first-child {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

/* Inline font-name pill (style only; content uses it in a later phase). */
.daf-pill {
	display: inline-block;
	padding: 2px 10px;
	border: 1px solid var(--daf-line);
	border-radius: 999px;
	background: var(--daf-paper);
	color: var(--daf-ink);
	font-size: .9em;
	line-height: 1.5;
}

/* Featured image in single posts: rounded, shadowed, inside the column. */
body.single-post .tdb_single_featured_image .tdb-block-inner {
	border-radius: var(--daf-radius);
	box-shadow: var(--daf-shadow);
	overflow: hidden;
}

/* Lists, tables, blockquotes in content. */
:is(.tdb_single_content, .td-post-content) ul > li::marker {
	color: var(--daf-coral);
}
:is(.tdb_single_content, .td-post-content) table th {
	background: var(--daf-paper);
}
:is(.tdb_single_content, .td-post-content) blockquote {
	margin: 1.4em 0;
	padding: 12px 18px;
	background: var(--daf-paper);
	border-left: 4px solid var(--daf-coral);
	border-radius: 0 var(--daf-radius) var(--daf-radius) 0;
}

/* Buttons: primary (download) is coral-dark so white text passes WCAG AA (white on #F2545B is 3.4:1). */
:is(.tdb_single_content, .td-post-content) .wp-block-button__link,
:is(.tdb_single_content, .td-post-content) .daf-dl {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	min-height: 46px;
	padding: 10px 22px;
	border: 2px solid var(--daf-coral-dark);
	border-radius: 999px;
	background: var(--daf-coral-dark);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	box-shadow: var(--daf-shadow);
	transition: transform .15s ease, background-color .15s ease;
}
:is(.tdb_single_content, .td-post-content) .wp-block-button__link:hover,
:is(.tdb_single_content, .td-post-content) .daf-dl:hover {
	transform: translateY(-1px);
	background: #A82F36;
	border-color: #A82F36;
}
:is(.tdb_single_content, .td-post-content) .daf-dl::before {
	content: "\2193";
	font-weight: 700;
}
:is(.tdb_single_content, .td-post-content) .daf-dl[data-daf-format]::after {
	content: attr(data-daf-format);
	margin-left: 6px;
	padding: 2px 7px;
	border-radius: 6px;
	background: rgba(255, 255, 255, .2);
	font-size: 11px;
	letter-spacing: .06em;
}
:is(.tdb_single_content, .td-post-content) .is-style-outline .wp-block-button__link,
:is(.tdb_single_content, .td-post-content) .daf-btn-secondary {
	background: transparent;
	border-color: var(--daf-ink);
	color: var(--daf-ink);
	box-shadow: none;
}
:is(.tdb_single_content, .td-post-content) .is-style-outline .wp-block-button__link:hover,
:is(.tdb_single_content, .td-post-content) .daf-btn-secondary:hover {
	background: var(--daf-ink);
	color: #fff;
}
/* External links get a ↗ mark (shelf links are excluded: they are sponsored). */
:is(.tdb_single_content, .td-post-content) a[target="_blank"]:not([rel*="sponsored"])::after {
	content: " \2197";
}
/* Focus: a visible saffron outline on every interactive element. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.daf-btn:focus-visible {
	outline: 3px solid var(--daf-saffron);
	outline-offset: 2px;
}

/* Creative Fabrica shelf (server-side, DAF_CF_Shelf). Paper, ink title, coral call to action. */
.daf-cf {
	box-sizing: border-box;
	margin: 32px 0;
	padding: 22px 22px 18px;
	background: var(--daf-paper);
	border: 1px solid var(--daf-line);
	border-radius: var(--daf-radius);
	box-shadow: var(--daf-shadow);
	color: var(--daf-text);
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
}
.daf-cf * {
	box-sizing: border-box;
}
.daf-cf__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}
.daf-cf__eyebrow {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--daf-coral-dark);
}
.daf-cf__title {
	margin: 4px 0 4px !important;
	padding: 0 !important;
	border: 0 !important;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 26px !important;
	line-height: 1.2;
	color: var(--daf-ink) !important;
}
.daf-cf__copy {
	margin: 0;
	font-size: 15px;
	color: var(--daf-muted);
}
.daf-cf__store {
	display: inline-block;
	padding: 8px 16px;
	border-radius: 999px;
	background: var(--daf-coral-dark);
	color: #fff !important;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none !important;
}
.daf-cf__store:hover {
	background: #A82F36;
}
.daf-cf__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(200px, 42%);
	gap: 14px;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scroll-snap-type: inline mandatory;
	padding: 2px 2px 12px;
	max-width: 100%;
}
.daf-cf__card {
	display: flex;
	flex-direction: column;
	scroll-snap-align: start;
	background: #fff;
	border: 1px solid var(--daf-line);
	border-radius: var(--daf-radius);
	overflow: hidden;
	color: var(--daf-text);
	text-decoration: none !important;
	transition: transform .15s ease;
}
.daf-cf__card:hover {
	transform: translateY(-2px);
}
.daf-cf__img {
	display: block;
	aspect-ratio: 3 / 2;
	background: var(--daf-paper);
}
.daf-cf__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.daf-cf__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 14px 14px;
}
.daf-cf__name {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 20px;
	line-height: 1.2;
	color: var(--daf-ink);
}
.daf-cf__meta {
	font-size: 12px;
	color: var(--daf-muted);
}
.daf-cf__cta {
	margin-top: 6px;
	font-size: 14px;
	font-weight: 700;
	color: var(--daf-coral-dark);
}
.daf-cf__disclosure {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--daf-muted);
}
@media (max-width: 639px) {
	.daf-cf {
		padding: 18px 16px 14px;
	}
	.daf-cf__track {
		grid-auto-columns: minmax(170px, 72%);
	}
}

/* Content buttons (G5a fix): one rule that beats the theme's own .wp-block-button rules.
   Primary and download buttons: coral-dark with white text (AA). Hover: ink. Outline buttons: ink. */
body:is(.single-post, .page) :is(.tdb_single_content, .td-post-content) .wp-block-button a.wp-block-button__link.daf-dl,
body:is(.single-post, .page) :is(.tdb_single_content, .td-post-content) .wp-block-button:not(.is-style-outline) a.wp-block-button__link {
	background: var(--daf-coral-dark) !important;
	border-radius: 999px !important;
	border-color: var(--daf-coral-dark) !important;
	color: #fff !important;
}
body:is(.single-post, .page) :is(.tdb_single_content, .td-post-content) .wp-block-button a.wp-block-button__link.daf-dl:hover,
body:is(.single-post, .page) :is(.tdb_single_content, .td-post-content) .wp-block-button:not(.is-style-outline) a.wp-block-button__link:hover {
	background: var(--daf-ink) !important;
	border-color: var(--daf-ink) !important;
	color: #fff !important;
}
body:is(.single-post, .page) :is(.tdb_single_content, .td-post-content) .wp-block-button.is-style-outline a.wp-block-button__link {
	background: transparent !important;
	border-color: var(--daf-ink) !important;
	color: var(--daf-ink) !important;
}
body:is(.single-post, .page) :is(.tdb_single_content, .td-post-content) .wp-block-button.is-style-outline a.wp-block-button__link:hover {
	background: var(--daf-ink) !important;
	color: #fff !important;
}

/* Links in post and page text: coral-dark (AA on paper), with an underline on hover. */
body:is(.single-post, .page) :is(.tdb_single_content, .td-page-content, .td-post-content) a:not(.wp-block-button__link):not(.daf-dl):not(.daf-cf__card):not(.daf-cf__store) {
	color: var(--daf-coral-dark);
}
body:is(.single-post, .page) :is(.tdb_single_content, .td-page-content, .td-post-content) a:not(.wp-block-button__link):not(.daf-dl):hover {
	text-decoration: underline;
	text-decoration-color: var(--daf-coral);
}

/* ---- Phase G5b: homepage v4 (classic character + type-to-preview hero) ---------------------------- */

body.home .td-theme-wrap {
	overflow: clip !important;
}
.daf-home4 {
	max-width: 1140px;
	margin: 0 auto;
	padding: 28px 20px 48px;
	color: var(--daf-text);
}
.daf-home4 h1,
.daf-home4 h2 {
	font-family: "Cormorant Garamond", Georgia, serif;
	color: var(--daf-ink);
	line-height: 1.15;
}
.daf-home4 h1 {
	margin: 0 0 10px;
	font-size: 42px;
	text-align: center;
}
.daf-home4 h2 {
	margin: 0 0 16px;
	font-size: 30px;
}
.daf-home4__intro {
	max-width: 66ch;
	margin: 0 auto 22px;
	text-align: center;
	color: var(--daf-muted);
	font-size: 17px;
	line-height: 1.6;
}
.daf-home4__sec {
	margin-top: 44px;
}
.daf-home4__more {
	margin: 14px 0 0;
	font-weight: 700;
}
.daf-home4__more a {
	color: var(--daf-coral-dark);
}

/* Hero: the type-to-preview input and eight tiles (fixed height so nothing shifts). */
.daf-hero4 {
	margin: 0 auto;
	max-width: 960px;
}
.daf-hero4__label {
	display: block;
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--daf-coral-dark);
}
.daf-hero4__input {
	box-sizing: border-box;
	width: 100%;
	min-height: 64px;
	padding: 10px 18px;
	border: 2px solid var(--daf-line);
	border-radius: var(--daf-radius);
	background: #fff;
	font-size: 26px;
	color: var(--daf-ink);
}
.daf-hero4__input:focus {
	outline: 3px solid var(--daf-saffron);
	outline-offset: 2px;
}
.daf-hero4__tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin-top: 14px;
}
.daf-tile4 {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 128px;
	padding: 12px 14px;
	border-radius: var(--daf-radius);
	background: var(--tile-bg);
	color: var(--tile-fg);
	text-decoration: none !important;
	overflow: hidden;
	box-shadow: var(--daf-shadow);
}
.daf-tile4__text {
	display: block;
	font-size: 34px;
	line-height: 1.1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.daf-tile4__name {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	opacity: .9;
}
.daf-tile4:hover {
	transform: translateY(-2px);
}

/* Trending mosaic: one large card (title over a gradient) and four small ones. */
.daf-trend-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	grid-template-rows: auto auto;
	gap: 16px;
}
.daf-trend {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--daf-radius);
	background: var(--daf-paper);
	color: var(--daf-ink);
	text-decoration: none !important;
	box-shadow: var(--daf-shadow);
}
.daf-trend--big {
	grid-row: 1 / span 2;
	color: #fff;
}
.daf-trend__img {
	display: block;
	aspect-ratio: 16 / 9;
}
.daf-trend--big .daf-trend__img {
	height: 100%;
	aspect-ratio: auto;
}
.daf-trend__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.daf-trend__title {
	display: block;
	padding: 10px 12px 12px;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 19px;
	line-height: 1.2;
}
.daf-trend--big .daf-trend__title {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 60px 22px 20px;
	font-size: 34px;
	background: linear-gradient(transparent, rgba(20, 40, 75, .92));
}

/* Latest fonts list (two columns) and the sidebar. */
.daf-home4__split {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 36px;
	align-items: start;
	margin-top: 44px;
}
.daf-lrows {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 22px;
}
.daf-lrow {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	color: var(--daf-text);
	text-decoration: none !important;
	min-width: 0;
}
.daf-lrow__img {
	flex: 0 0 120px;
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: 8px;
	overflow: hidden;
	background: var(--daf-paper);
}
.daf-lrow__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.daf-lrow__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.daf-lrow__title {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 19px;
	line-height: 1.2;
	color: var(--daf-ink);
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.daf-lrow__date {
	font-size: 12px;
	color: var(--daf-muted);
}
.daf-home4__side {
	position: sticky;
	top: 80px;
	align-self: start;
}
.daf-home4__side .daf-ad {
	min-height: 280px;
	margin: 0 0 24px;
}
.daf-popular {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
	counter-reset: daf-pop;
}
.daf-popular li {
	counter-increment: daf-pop;
	display: flex;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid var(--daf-line);
}
.daf-popular li::before {
	content: counter(daf-pop, decimal-leading-zero);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 14px;
	color: var(--daf-coral-dark);
	min-width: 26px;
}
.daf-popular a {
	color: var(--daf-ink);
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 18px;
	line-height: 1.25;
	text-decoration: none;
}
.daf-home4__tools {
	margin: 0;
	padding: 0;
	list-style: none;
}
.daf-home4__tools li {
	padding: 6px 0;
}
.daf-home4__tools a {
	color: var(--daf-coral-dark);
	font-weight: 600;
}
.daf-home4 .daf-ad--mid,
.daf-home4 .daf-home4__mid {
	margin: 36px 0 0;
}

/* Free font tools strip: six tiles with their own accent. */
.daf-tools4 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}
.daf-tool4 {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px;
	border-radius: 14px;
	background: #fff;
	border: 1px solid var(--daf-line);
	border-top: 6px solid var(--tool-accent);
	box-shadow: var(--daf-shadow);
	color: var(--daf-text);
	text-decoration: none !important;
}
.daf-tool4__glyph {
	font-size: 54px;
	line-height: 1;
	color: var(--tool-accent);
}
.daf-tool4__name {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 22px;
	color: var(--daf-ink);
}
.daf-tool4__text {
	font-size: 15px;
	line-height: 1.5;
	color: var(--daf-muted);
}

/* Browse by style: twelve tiles, each name in a hosted font. */
.daf-styles4 {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}
.daf-style4 {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px;
	border-radius: var(--daf-radius);
	border: 1px solid var(--daf-line);
	background: var(--daf-paper);
	color: var(--daf-ink);
	text-decoration: none !important;
	min-height: 96px;
}
.daf-style4:hover {
	border-color: var(--daf-coral);
}
.daf-style4__name {
	font-size: 26px;
	line-height: 1.1;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.daf-style4__count {
	font-size: 12px;
	color: var(--daf-muted);
}

@media (max-width: 1023px) {
	.daf-home4__split {
		grid-template-columns: minmax(0, 1fr);
	}
	.daf-home4__side {
		position: static;
	}
	.daf-tools4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.daf-styles4 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.daf-hero4__tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 639px) {
	.daf-home4 {
		padding: 20px 16px 36px;
	}
	.daf-home4 h1 {
		font-size: 30px;
	}
	.daf-home4 h2 {
		font-size: 24px;
	}
	.daf-hero4__input {
		font-size: 20px;
		min-height: 56px;
	}
	.daf-tile4 {
		height: 104px;
	}
	.daf-tile4__text {
		font-size: 26px;
	}
	.daf-lrows,
	.daf-tools4,
	.daf-styles4 {
		grid-template-columns: minmax(0, 1fr);
	}
	.daf-trend-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
	.daf-trend--big {
		grid-column: 1 / -1;
		grid-row: auto;
	}
	.daf-trend--big .daf-trend__img {
		aspect-ratio: 16 / 9;
	}
}
/* Homepage v4 sidebar: a compact list, so the sticky column has room to move beside the latest list. */
.daf-lrows {
	gap: 18px 22px;
}
.daf-lrow {
	padding: 6px 0;
}
.daf-popular li {
	padding: 5px 0;
}
.daf-popular a {
	font-size: 16px;
}
.daf-home4__tools {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.daf-home4__tools li {
	padding: 0;
}
.daf-home4__tools a {
	display: inline-block;
	padding: 4px 10px;
	border: 1px solid var(--daf-line);
	border-radius: 999px;
	background: var(--daf-paper);
	font-size: 14px;
}
.daf-popular a {
	display: block;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.daf-home4__side h2 {
	margin: 0 0 10px;
	font-size: 24px;
}
.daf-popular li {
	line-height: 1.25;
	align-items: baseline;
}
.daf-popular a {
	line-height: 1.25;
}
.daf-home4__side .daf-popular,
.daf-home4__side .daf-popular li,
.daf-home4__side .daf-home4__tools,
.daf-home4__side .daf-home4__tools li {
	margin-left: 0 !important;
	padding-left: 0 !important;
}
.daf-home4__side .daf-popular li {
	margin-bottom: 0 !important;
}
.daf-home4__side .daf-home4__tools li {
	margin: 0 !important;
}

/* G5c: homepage fixes. Reserved ad height stays; the extra margin around it is cut to 24px. */
.daf-home4 .daf-ad {
	margin: 0 auto 24px !important;
}
.daf-home4__side .daf-ad {
	margin: 0 0 24px !important;
}
.daf-home4 .daf-ad + .daf-home4__sec,
.daf-home4 .daf-ad + .daf-home4__split {
	margin-top: 24px;
}
/* Hero tiles: long text shrinks to fit (home-hero.js); at phone width the tiles become one swipe row. */
.daf-tile4__text {
	white-space: normal;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.daf-hero4__swipe {
	display: none;
	margin: 6px 0 0;
	font-size: 12px;
	color: var(--daf-muted);
	text-align: right;
}
@media (max-width: 767px) {
	.daf-hero4__tiles {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 10px;
		padding-bottom: 6px;
		-webkit-overflow-scrolling: touch;
	}
	.daf-tile4 {
		flex: 0 0 42%;
		scroll-snap-align: start;
		height: 112px;
	}
	.daf-hero4__swipe {
		display: block;
	}
}

/* Evidence figure on the font pages (Task 7): the image scales to the column; the caption stays small. */
.daf-evidence {
	margin: 24px 0;
}
.daf-evidence img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: 12px;
	border: 1px solid #EAEAEA;
}
.daf-evidence figcaption {
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.5;
	color: #5b5b5b;
}

/* 1.12.3: 24px clear space above and below every ad wrapper, so no ad touches a link, thumbnail or share icon.
   The output-ad rules in tool-pages.css (data-placement tool_after_output / tool_bottom, 150px from the controls)
   are excluded and keep their own spacing. */
.daf-ad:not([data-placement="tool_after_output"]):not([data-placement="tool_bottom"]),
body .td-a-rec {
	margin-top: 24px;
	margin-bottom: 24px;
}