/*
Theme Name: Savoring Tales
Theme URI: https://savoringtales.com/
Description: Kadence child theme for Savoring Tales. Two content worlds - kitchen equipment roundups and recipes - given equal weight and their own templates, on one measured design system.
Author: Anees Studio
Template: kadence
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: st-child
*/

/* ==========================================================================
   Design tokens

   Every colour, size and space in this file comes from here. The palette was
   chosen against the site's own subject rather than the category default:
   food blogs almost universally reach for a cream ground with a terracotta
   accent, which now reads as a template rather than a choice, and terracotta
   sits in the same warm band as the food it appears beside.

   Enamel blue is the colour of a Dutch oven. Against the reds, browns and
   golds of food photography it separates instead of blending. Brass is held
   back for one job only - rank and rating - so that "Best Overall" actually
   carries weight.
   ========================================================================== */

:root {
	/* ground and ink */
	--st-paper:      #FBFAF8;   /* page ground: warm, but less yellow than cream */
	--st-surface:    #FFFFFF;
	--st-sunk:       #F4F1EC;   /* spec blocks, table headers, alternating bands */
	--st-ink:        #1A1714;   /* warm charcoal, never pure black */
	--st-ink-2:      #4A443C;   /* body copy */
	--st-ink-3:      #6E6659;   /* meta, captions - still 4.5:1 on paper */
	--st-line:       #E4E0D8;
	--st-line-2:     #CFC8BB;

	/* accents */
	--st-enamel:     #1F4E5F;
	--st-enamel-2:   #163B49;
	--st-enamel-wash:#EAF1F3;
	--st-on-enamel:  #FFFFFF;
	--st-brass:      #9C6F26;
	--st-brass-wash: #F7F0E1;

	/* type */
	--st-display: "Fraunces", Georgia, "Times New Roman", serif;
	--st-body:    "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--st-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	/* space: a 4px base, doubling where it matters */
	--st-1: 4px;  --st-2: 8px;  --st-3: 12px; --st-4: 16px; --st-5: 24px;
	--st-6: 32px; --st-7: 48px; --st-8: 64px; --st-9: 96px;

	/* measure and width */
	--st-maxw:    1180px;
	--st-measure: 66ch;
}

/* ==========================================================================
   Base
   ========================================================================== */

body {
	background: var(--st-paper);
	color: var(--st-ink);
	font-family: var(--st-body);
	font-size: 18px;          /* the single most important number here - see below */
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/*
 * 18px is not a preference, it is what the five sites measured all landed on
 * or above: Sally's 20px, Budget Bytes 18px, The Spruce Eats 18px. The old
 * theme set 14px in #C0C0C0, which failed contrast and made a 3,000-word
 * review hard work. Body size never shrinks on small screens; only headings do.
 */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--st-display);
	color: var(--st-ink);
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: -0.012em;
	text-wrap: balance;
}

h1 { font-size: 48px; line-height: 1.06; letter-spacing: -0.02em; }
h2 { font-size: 28px; }
h3 { font-size: 21px; line-height: 1.3; }
h4 { font-size: 18px; line-height: 1.35; }

a { color: var(--st-enamel); }

.st a:focus-visible,
.st button:focus-visible {
	outline: 2px solid var(--st-enamel);
	outline-offset: 2px;
}

/* Images never exceed their column. On 3,275 attachments of mixed provenance
   this is the one rule that stops a stray inline width from breaking a page. */
.st img { max-width: 100%; height: auto; }

/* A shared label style: uppercase mono, used for departments, ranks and
   eyebrows. Mono is the system stack - it costs nothing to download and reads
   as native, which suits a site whose subject is measurements. */
.st-label {
	font-family: var(--st-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--st-enamel);
	display: inline-block;
}

.st-wrap { max-width: var(--st-maxw); margin-inline: auto; padding-inline: var(--st-5); }
@media (max-width: 767px) { .st-wrap { padding-inline: var(--st-4); } }

/* ==========================================================================
   Buttons
   ========================================================================== */

.st-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--st-2);
	min-height: 48px;
	padding: 0 var(--st-5);
	background: var(--st-enamel);
	color: var(--st-on-enamel);
	font-family: var(--st-body);
	font-weight: 600;
	font-size: 16px;
	text-decoration: none;
	border: 0;
	border-radius: 0;
	transition: background .15s ease;
}
.st-btn:hover, .st-btn:focus { background: var(--st-enamel-2); color: var(--st-on-enamel); }

.st-btn--ghost {
	background: transparent;
	color: var(--st-ink);
	border: 1px solid var(--st-line-2);
}
.st-btn--ghost:hover, .st-btn--ghost:focus { background: var(--st-sunk); color: var(--st-ink); }

/* ==========================================================================
   Post card

   Flat by decision, not omission. Not one of the five sites measured - Sally's,
   RecipeTin, Budget Bytes, Serious Eats, The Spruce Eats - puts a radius or a
   shadow on a card. The photograph is the object; a border around it is noise.
   ========================================================================== */

.st-card { display: grid; gap: var(--st-3); }

.st-card__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--st-sunk);
}

/*
 * 1:1 is a measured decision. Of 600 featured images sampled: 45% are 2:3
 * portrait (896x1344), 25% square (500x500), 23% are 4:3 (1024x768). A 3:2
 * landscape card - what most competitors use - would cut the portrait
 * majority in half. Square costs at most a third of any one source and lets
 * all three shapes sit in one calm grid.
 *
 * object-fit does the cropping in the browser, so none of the 3,275
 * attachments needs regenerating.
 */
.st-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}
.st-card:hover .st-card__media img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
	.st-card__media img, .st-card:hover .st-card__media img { transition: none; transform: none; }
}

.st-card__body { display: grid; gap: var(--st-2); }

.st-card__title {
	font-family: var(--st-display);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.st-card__title a { color: var(--st-ink); text-decoration: none; }
.st-card__title a:hover { color: var(--st-enamel); }

.st-card__meta { font-family: var(--st-mono); font-size: 11px; letter-spacing: .06em; color: var(--st-ink-3); }

/* ==========================================================================
   Section furniture
   ========================================================================== */

.st-section { padding-block: var(--st-8); }
.st-section--sunk { background: var(--st-sunk); }

.st-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--st-4);
	margin-bottom: var(--st-6);
	padding-bottom: var(--st-4);
	border-bottom: 1px solid var(--st-line);
}
.st-section__head h2 { margin: 0; font-size: 28px; }
.st-section__head .st-more {
	font-family: var(--st-mono); font-size: 12px; letter-spacing: .08em;
	text-transform: uppercase; color: var(--st-enamel); text-decoration: none; white-space: nowrap;
}
.st-section__head .st-more:hover { text-decoration: underline; }

.st-grid { display: grid; gap: var(--st-5); }
.st-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.st-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/*
 * Two columns on phones, not one. A square thumbnail at 2-up is still 163px
 * wide on a 375px screen - large enough to judge a pan by - and it halves how
 * far the reader scrolls to see the same number of posts.
 */
@media (max-width: 1023px) { .st-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) {
	.st-grid--3, .st-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--st-4); }
	.st-card__title { font-size: 15px; -webkit-line-clamp: 3; }
	.st-section { padding-block: var(--st-7); }
	.st-section__head h2 { font-size: 23px; }
}

/* ==========================================================================
   Hero - two doors

   Not a photograph with a headline over it. The question a first-time visitor
   arrives with is "what is this site", and on a site that is 90% equipment
   guides and 10% recipes the honest answer is both. Two panels of equal width
   answer it in one glance and cost no image weight above the fold.
   ========================================================================== */

.st-hero { padding-block: var(--st-7) var(--st-6); }
/* This is the page's h1 - the front page has no title band, so the opening
   line carries the heading. Sized as a lede, not as a 48px headline. */
.st-hero__lede {
	font-family: var(--st-display);
	font-size: 26px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: normal;
	color: var(--st-ink);
	max-width: 26ch;
	margin: 0 0 var(--st-6);
	text-wrap: balance;
}
.st-hero__doors { display: grid; grid-template-columns: 1fr 1fr; gap: var(--st-4); }

.st-door {
	display: grid;
	align-content: start;
	gap: var(--st-2);
	padding: var(--st-6);
	background: var(--st-enamel);
	color: var(--st-on-enamel);
	text-decoration: none;
	min-height: 260px;
	transition: background .18s ease;
}
.st-door:hover, .st-door:focus { background: var(--st-enamel-2); color: var(--st-on-enamel); }
.st-door--alt { background: var(--st-ink); }
.st-door--alt:hover, .st-door--alt:focus { background: #26221D; }

.st-door__count {
	font-family: var(--st-mono); font-size: 11px; letter-spacing: .12em;
	text-transform: uppercase; color: rgba(255,255,255,.7);
}
.st-door__name {
	font-family: var(--st-display); font-size: 38px; font-weight: 600;
	line-height: 1.05; letter-spacing: -.02em;
}
.st-door__desc {
	font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.82);
	max-width: 32ch; margin-top: var(--st-2);
}
.st-door__go {
	font-family: var(--st-mono); font-size: 12px; letter-spacing: .08em;
	text-transform: uppercase; margin-top: var(--st-4);
}

@media (max-width: 767px) {
	.st-hero { padding-block: var(--st-6) var(--st-5); }
	.st-hero__lede { font-size: 21px; margin-bottom: var(--st-5); }
	/* Stacked, not side by side: two 163px panels would make the type unreadable. */
	.st-hero__doors { grid-template-columns: 1fr; gap: var(--st-3); }
	.st-door { padding: var(--st-5); min-height: 0; }
	.st-door__name { font-size: 30px; }
	.st-door__desc { font-size: 15px; }
}

/* ==========================================================================
   Department grid - the homepage's real front door
   ========================================================================== */

.st-depts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--st-4); }
@media (max-width: 1023px) { .st-depts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .st-depts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--st-3); } }

.st-dept {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--st-enamel);
	text-decoration: none;
}
.st-dept img {
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: cover;
	opacity: .58;
	transition: transform .5s ease, opacity .3s ease;
}
.st-dept:hover img { transform: scale(1.05); opacity: .45; }
@media (prefers-reduced-motion: reduce) { .st-dept img, .st-dept:hover img { transition: none; transform: none; } }

.st-dept__body {
	position: absolute; inset: auto 0 0 0;
	padding: var(--st-4);
	display: grid; gap: 2px;
	background: linear-gradient(to top, rgba(22,59,73,.92), rgba(22,59,73,0));
}
.st-dept__name {
	font-family: var(--st-display); font-size: 17px; font-weight: 600;
	color: #fff; line-height: 1.2;
}
.st-dept__count {
	font-family: var(--st-mono); font-size: 11px; letter-spacing: .08em;
	text-transform: uppercase; color: rgba(255,255,255,.82);
}
@media (max-width: 767px) { .st-dept__name { font-size: 15px; } .st-dept__body { padding: var(--st-3); } }

/* ==========================================================================
   Article - the roundup template

   Single column, no sidebar. The Spruce Eats runs its roundups at 581px of
   text inside a 1265px page and gives up the sidebar entirely; with 19 buy
   buttons on a page, a competing column of widgets only costs conversions.
   ========================================================================== */

.st-article .entry-content,
.st-page .entry-content {
	max-width: var(--st-measure);
	margin-inline: auto;
	font-size: 18px;
	line-height: 1.7;
	color: var(--st-ink-2);
}

.st-article .entry-content > p { margin-block: 0 var(--st-5); }

/* Direct children only. A blanket .entry-content h2 leaks into every component
   that happens to sit inside the content - related cards, product picks - and
   silently resizes their titles. */
.st-article .entry-content > h2,
.st-page .entry-content > h2 {
	font-size: 28px;
	margin-block: var(--st-8) var(--st-4);
	padding-top: var(--st-5);
	border-top: 1px solid var(--st-line);
}
.st-article .entry-content > h3,
.st-page .entry-content > h3 {
	font-size: 21px;
	margin-block: var(--st-6) var(--st-3);
}

.st-article .entry-content > ul,
.st-article .entry-content > ol { margin-block: 0 var(--st-5); padding-left: var(--st-5); }
.st-article .entry-content li { margin-bottom: var(--st-2); }

/* Prose links only: underline what a reader is meant to click inside a
   sentence, and leave component links alone. */
.st-article .entry-content :is(p, li, td, th, blockquote) a:not([class*="st-"]),
.st-page .entry-content :is(p, li, td, th, blockquote) a:not([class*="st-"]) {
	color: var(--st-enamel);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.st-article .entry-content blockquote {
	margin: var(--st-6) 0;
	padding: var(--st-4) var(--st-5);
	border-left: 3px solid var(--st-brass);
	background: var(--st-brass-wash);
	font-size: 17px;
}
.st-article .entry-content blockquote p:last-child { margin-bottom: 0; }

/* Images inside the article: honour the author's centring, never overflow. */
.st-article .entry-content img { margin-inline: auto; }
.st-article .entry-content figure { margin: var(--st-6) 0; }
.st-article .entry-content figcaption {
	font-size: 14px; color: var(--st-ink-3); margin-top: var(--st-2);
	font-family: var(--st-body);
}

/* Article head */
.st-article__head { padding-block: var(--st-7) var(--st-5); }
.st-article__head .st-label { margin-bottom: var(--st-3); }
.st-article__head h1 { margin: 0 0 var(--st-4); max-width: 20ch; }
.st-article__byline {
	display: flex; flex-wrap: wrap; gap: var(--st-4);
	font-family: var(--st-mono); font-size: 12px; letter-spacing: .04em;
	color: var(--st-ink-3); text-transform: uppercase;
}
.st-article__byline strong { color: var(--st-ink); font-weight: 500; }

@media (max-width: 767px) {
	.st-article .entry-content, .st-page .entry-content { font-size: 18px; }  /* holds */
	h1, .st-article__head h1 { font-size: 34px; line-height: 1.1; }
	.st-article .entry-content > h2, .st-page .entry-content > h2 { font-size: 23px; margin-top: var(--st-7); }
	.st-article .entry-content > h3, .st-page .entry-content > h3 { font-size: 19px; }
}

/* ==========================================================================
   Breadcrumb, disclosure, table of contents
   ========================================================================== */

.st-crumbs {
	font-family: var(--st-mono); font-size: 12px; letter-spacing: .05em;
	color: var(--st-ink-3); padding-block: var(--st-4);
	display: flex; flex-wrap: wrap; gap: var(--st-2); align-items: center;
}
.st-crumbs a { color: var(--st-ink-3); text-decoration: none; }
.st-crumbs a:hover { color: var(--st-enamel); text-decoration: underline; }
.st-crumbs span[aria-hidden] { color: var(--st-line-2); }

.st-disclosure {
	max-width: var(--st-measure); margin: 0 auto var(--st-6);
	padding: var(--st-3) var(--st-4);
	background: var(--st-sunk);
	border-left: 3px solid var(--st-line-2);
	font-size: 14px; line-height: 1.5; color: var(--st-ink-3);
}
.st-disclosure a { color: var(--st-ink-2); }

.st-toc {
	max-width: var(--st-measure); margin: 0 auto var(--st-7);
	border: 1px solid var(--st-line); background: var(--st-surface);
	padding: var(--st-5);
}
.st-toc__title { font-family: var(--st-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--st-ink-3); margin-bottom: var(--st-3); }
.st-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--st-2); counter-reset: toc; }
.st-toc li { counter-increment: toc; display: grid; grid-template-columns: 2.2em 1fr; align-items: baseline; }
.st-toc li::before { content: counter(toc, decimal-leading-zero); font-family: var(--st-mono); font-size: 11px; color: var(--st-ink-3); }
.st-toc a { color: var(--st-ink); text-decoration: none; font-size: 16px; line-height: 1.45; }
.st-toc a:hover { color: var(--st-enamel); text-decoration: underline; }

/* ==========================================================================
   Product pick - the repeating unit of a roundup
   ========================================================================== */

.st-pick {
	max-width: var(--st-measure); margin: var(--st-7) auto;
	border: 1px solid var(--st-line-2); background: var(--st-surface);
	padding: var(--st-5); display: grid; gap: var(--st-3);
}
.st-pick__rank {
	font-family: var(--st-mono); font-size: 12px; letter-spacing: .12em;
	text-transform: uppercase; color: var(--st-brass);
}
.st-pick h3 { margin: 0; font-size: 22px; }
.st-pick__specs {
	display: grid; grid-template-columns: auto 1fr; gap: var(--st-2) var(--st-5);
	margin: var(--st-2) 0; font-size: 15px;
}
.st-pick__specs dt {
	font-family: var(--st-mono); font-size: 11px; letter-spacing: .06em;
	text-transform: uppercase; color: var(--st-ink-3); padding-top: 3px;
}
.st-pick__specs dd { margin: 0; color: var(--st-ink-2); font-variant-numeric: tabular-nums; }

/*
 * Buy button: 56px tall on every screen.
 *
 * The Spruce Eats drops its buy buttons to 38px on a phone, which is under the
 * 44px minimum for a touch target. Most of this site's readers arrive on a
 * phone with a purchase in mind; the button is the whole point of the page and
 * it does not shrink.
 *
 * !important is here because a decade of pasted affiliate markup carries inline
 * styles, and there are 610 posts of it.
 */
.st-buy,
.st-article .entry-content a[href*="amazon."]:not(:has(img)):not([class*="st-"]) {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: var(--st-4);
	min-height: 56px !important;
	padding: var(--st-3) var(--st-5) !important;
	background: var(--st-enamel) !important;
	color: var(--st-on-enamel) !important;
	font-family: var(--st-body) !important;
	font-weight: 600 !important;
	font-size: 16px !important;
	text-decoration: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	width: 100%;
	max-width: 460px;
	margin-block: var(--st-4);
	transition: background .15s ease;
}
.st-buy:hover,
.st-article .entry-content a[href*="amazon."]:not(:has(img)):not([class*="st-"]):hover {
	background: var(--st-enamel-2) !important;
}
.st-buy__price { font-family: var(--st-mono); font-weight: 500; white-space: nowrap; }

/* Inside a comparison table an affiliate link should stay compact. */
.st-article .entry-content table a[href*="amazon."] {
	min-height: 44px !important;
	padding: var(--st-2) var(--st-3) !important;
	font-size: 14px !important;
	justify-content: center;
	margin-block: 0;
}

/* Comparison tables */
.st-article .entry-content table {
	width: 100%; border-collapse: collapse; margin-block: var(--st-6);
	font-size: 15px;
}
.st-article .entry-content :is(th, td) {
	padding: var(--st-3) var(--st-4); border-bottom: 1px solid var(--st-line);
	text-align: left; vertical-align: top;
}
.st-article .entry-content th {
	font-family: var(--st-mono); font-size: 11px; letter-spacing: .08em;
	text-transform: uppercase; color: var(--st-ink-3); font-weight: 500;
	background: var(--st-sunk);
}
/* A wide table scrolls inside itself; the page never scrolls sideways. */
.st-table-scroll { overflow-x: auto; margin-block: var(--st-6); }
.st-table-scroll table { margin-block: 0; }

/* ==========================================================================
   Archive
   ========================================================================== */

.st-archive__head { padding-block: var(--st-7) var(--st-5); border-bottom: 1px solid var(--st-line); margin-bottom: var(--st-7); }
.st-archive__head h1 { margin: 0 0 var(--st-3); font-size: 40px; }
.st-archive__count { font-family: var(--st-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--st-ink-3); }
.st-archive__desc { max-width: var(--st-measure); margin: var(--st-4) 0 0; color: var(--st-ink-2); font-size: 17px; }

.st-chips { display: flex; flex-wrap: wrap; gap: var(--st-2); margin-top: var(--st-5); }
.st-chip {
	display: inline-flex; align-items: center; min-height: 36px;
	padding: 0 var(--st-4); background: var(--st-surface);
	border: 1px solid var(--st-line-2); color: var(--st-ink);
	font-size: 14px; text-decoration: none;
}
.st-chip:hover { background: var(--st-enamel); border-color: var(--st-enamel); color: var(--st-on-enamel); }
.st-chip__n { font-family: var(--st-mono); font-size: 11px; color: var(--st-ink-3); margin-left: var(--st-2); }
.st-chip:hover .st-chip__n { color: rgba(255,255,255,.75); }

@media (max-width: 767px) { .st-archive__head h1 { font-size: 30px; } }

/* ==========================================================================
   Advertising

   Slots are part of the layout, not an afterthought. Each reserves its height
   so that filling it does not push the article down - that shift is what
   wrecks CLS on ad-funded sites.
   ========================================================================== */

.st-ad {
	display: flex; align-items: center; justify-content: center;
	margin-block: var(--st-7);
	background: var(--st-sunk);
	position: relative;
}
.st-ad::before {
	content: "Advertisement";
	position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
	font-family: var(--st-mono); font-size: 9px; letter-spacing: .12em;
	text-transform: uppercase; color: var(--st-ink-3);
}
.st-ad--leader { min-height: 106px; }             /* 728x90 + label */
.st-ad--inline { min-height: 266px; max-width: var(--st-measure); margin-inline: auto; }
@media (max-width: 767px) { .st-ad--leader { min-height: 116px; } }  /* 320x100 */

/* ==========================================================================
   Forms

   Measured on the contact page at 375px: six of ten fields were under 44px.
   The 16px font size is not cosmetic - iOS zooms the whole page in when a
   focused input is smaller than that, which on a form is disorienting.
   ========================================================================== */

.st input[type="text"],
.st input[type="email"],
.st input[type="url"],
.st input[type="tel"],
.st input[type="number"],
.st input[type="search"],
.st input[type="password"],
.st select,
.st textarea {
	width: 100%;
	min-height: 48px;
	padding: var(--st-3) var(--st-4);
	font-family: var(--st-body);
	font-size: 16px;
	line-height: 1.5;
	color: var(--st-ink);
	background: var(--st-surface);
	border: 1px solid var(--st-line-2);
	border-radius: 0;
}
.st textarea { min-height: 140px; padding-block: var(--st-3); }

.st input:focus, .st select:focus, .st textarea:focus {
	outline: 2px solid var(--st-enamel);
	outline-offset: 1px;
	border-color: var(--st-enamel);
}

.st input[type="submit"],
.st button[type="submit"],
.st .wpcf7-submit {
	width: auto;
	min-height: 56px;
	padding-inline: var(--st-6);
	background: var(--st-enamel);
	color: var(--st-on-enamel);
	font-family: var(--st-body);
	font-weight: 600;
	font-size: 16px;
	border: 0;
	cursor: pointer;
}
.st input[type="submit"]:hover,
.st .wpcf7-submit:hover { background: var(--st-enamel-2); }

.st label { display: block; font-weight: 500; margin-bottom: var(--st-2); font-size: 15px; }
.st .wpcf7 p { margin-bottom: var(--st-4); }

/* The search field and its button in Kadence's header drawer. */
.st .search-toggle-open-container input[type="search"] { min-height: 48px; }
.st .search-form button,
.st .kadence-search-modal button,
.st form[role="search"] button { min-height: 44px; min-width: 44px; font-size: 16px; }

/* ==========================================================================
   Containing AdSense

   Measured on a 375px phone, a guide page scrolled sideways to 1200px. None of
   it was our markup: AdSense had sized four slots at desktop width - two of
   them inside the article - and Auto Ads had injected a 1188px "related
   searches" block below the footer.

   Two layers. The rules below make the ad fit its column, which is what should
   happen; the clip on .site is the backstop for whatever Google injects next,
   since the markup arrives after our stylesheet has had its say.
   ========================================================================== */

.st ins.adsbygoogle {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	overflow: hidden;
}
.st ins.adsbygoogle > div,
.st ins.adsbygoogle iframe,
.st [id^="aswift_"] {
	max-width: 100% !important;
}

/* Auto Ads' related-search block, injected outside any container of ours. */
.st [class*="google-aiuf"],
.st [class*="goog-rentr"],
.st .google-anno-skip {
	max-width: 100% !important;
	box-sizing: border-box;
}

/*
 * clip, not hidden: hidden makes the element a scroll container, which breaks
 * position:sticky on the header. clip contains the overflow without that.
 */
.st .site,
.st #wrapper {
	overflow-x: clip;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.st-footer { background: var(--st-ink); color: #C9C1B4; padding-block: var(--st-8) var(--st-6); margin-top: var(--st-9); }
.st-footer a { color: #E7E1D6; text-decoration: none; }
.st-footer a:hover { color: #fff; text-decoration: underline; }
.st-footer__cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--st-6); }
@media (max-width: 900px) { .st-footer__cols { grid-template-columns: repeat(2, 1fr); gap: var(--st-5); } }
@media (max-width: 520px) { .st-footer__cols { grid-template-columns: 1fr; } }
.st-footer h3 { font-family: var(--st-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #8E877B; margin: 0 0 var(--st-3); font-weight: 500; }
.st-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--st-2); }
.st-footer li { font-size: 15px; }
.st-footer__about p { font-size: 15px; line-height: 1.6; margin: 0; color: #A79F92; max-width: 34ch; }
.st-footer__bottom {
	margin-top: var(--st-7); padding-top: var(--st-5); border-top: 1px solid #332E27;
	display: flex; flex-wrap: wrap; gap: var(--st-4); justify-content: space-between;
	font-family: var(--st-mono); font-size: 11px; letter-spacing: .05em; color: #8E877B;
}

/* ==========================================================================
   Recipes - the other 150 posts

   A recipe reader is cooking, not shopping. Same type system, different
   furniture: the card is the destination, so it is given a ground of its own.
   ========================================================================== */

.st-recipe .wprm-recipe-container,
.st-article .wprm-recipe-container {
	border: 1px solid var(--st-line-2) !important;
	background: var(--st-surface) !important;
	max-width: var(--st-measure);
	margin-inline: auto;
}
.st-recipe .wprm-recipe-name,
.st-article .wprm-recipe-name { font-family: var(--st-display) !important; }
.st-recipe .wprm-recipe-header,
.st-article .wprm-recipe-header {
	font-family: var(--st-mono) !important;
	letter-spacing: .08em; text-transform: uppercase; font-size: 12px !important;
}

/*
 * The card's own buttons ship green from WP Recipe Maker's "chic" template.
 * Green is not in this palette and the card is the one thing on a recipe page
 * a reader is meant to act on, so it takes the accent like every other button.
 */
.st .wprm-recipe-print,
.st .wprm-recipe-jump,
.st .wprm-jump-to-recipe-shortcode,
.st .wprm-print-recipe-shortcode,
.st .wprm-recipe-link {
	background-color: var(--st-enamel) !important;
	border-color: var(--st-enamel) !important;
	color: var(--st-on-enamel) !important;
	font-family: var(--st-body) !important;
	font-weight: 600 !important;
	border-radius: 0 !important;
	min-height: 44px;
	display: inline-flex !important;
	align-items: center;
	gap: var(--st-2);
}
.st .wprm-recipe-print:hover,
.st .wprm-recipe-jump:hover { background-color: var(--st-enamel-2) !important; }

/* Ratings keep the brass, the one place rank is expressed. */
.st .wprm-recipe-rating .wprm-rating-star-full svg * { fill: var(--st-brass) !important; }

.st-jump { display: flex; flex-wrap: wrap; gap: var(--st-2); max-width: var(--st-measure); margin: 0 auto var(--st-6); }
.st-jump .st-btn { min-height: 44px; font-size: 14px; padding-inline: var(--st-4); }

/* ==========================================================================
   Living with Kadence

   The theme wraps post content in .entry-content-wrap and gives it 24px of
   side padding. Our own .st-wrap adds 16px on top of that, so a card image on
   a 375px phone came out 140px wide instead of the 163px the grid was designed
   for. One gutter, one owner: on pages built out of st-sections, Kadence's
   padding is zeroed and .st-wrap keeps it.
   ========================================================================== */

.st-home .entry-content-wrap,
.entry-content-wrap:has(> .entry-content > .st-section),
.entry-content-wrap:has(> .entry-content > .st-hero) {
	padding-inline: 0;
}

/* Kadence's own container padding on archive pages, same reasoning. */
.st-archive .content-container.site-container { padding-inline: 0; }

/* ==========================================================================
   Touch targets

   Everything a finger has to hit is at least 44px tall. Measured on a 375px
   viewport, three things were under it: the section "see all" links at 19px,
   the category chips at 36px, and Kadence's own menu button at 31px.
   ========================================================================== */

.st-section__head .st-more {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: var(--st-2);
	margin-right: calc(var(--st-2) * -1);
}

.st-chip { min-height: 44px; padding-inline: var(--st-4); }

.st { --kadence-toggle-min: 44px; }
.st .menu-toggle-open,
.st .drawer-toggle,
.st .search-toggle-open {
	min-height: 44px;
	min-width: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/*
 * The whole card is the target, not just the words.
 *
 * A three-line title is a 39px strip in the middle of a 200px card. Stretching
 * the title's link over the card makes the image, the label and the gaps
 * clickable too, without adding a second link for a screen reader to announce.
 */
.st-card { position: relative; }
.st-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.st-card__media { position: relative; z-index: 0; }

/* ==========================================================================
   Utility
   ========================================================================== */

.st-visually-hidden {
	position: absolute !important; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.st-skip:focus {
	position: fixed; top: var(--st-3); left: var(--st-3); z-index: 999;
	background: var(--st-enamel); color: var(--st-on-enamel);
	padding: var(--st-3) var(--st-4); width: auto; height: auto; clip: auto;
}