/*
Theme Name: Wrinklebottom Couture
Theme URI: https://www.wrinklebottom.com/
Description: Black-and-gold couture child theme for The Wrinklebottoms Sphynx & Donskoy cattery. Mobile-first, based on the brand's die-cut sticker identity: black ground, ornate gold frames, engraved serif display type.
Author: The Wrinklebottoms
Template: nisarg
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wrinklebottom-couture
*/

/* =========================================================================
   1. Tokens
   ========================================================================= */
:root {
	--wb-black: #000;
	--wb-ink: #0b0a0c;
	--wb-panel: #131117;
	--wb-panel-2: #1c1922;
	--wb-gold: #c9a227;
	--wb-gold-bright: #ecbd04;
	--wb-gold-pale: #f0dc9a;
	--wb-cream: #f4ecdd;
	--wb-muted: #b9ae9b;
	--wb-magenta: #e5308a;
	--wb-cyan: #17b3c4;
	--wb-gold-grad: linear-gradient(160deg, #f6e6a8 0%, #c9a227 38%, #8a6a12 62%, #e8cf76 100%);
	--wb-rule: rgba(201, 162, 39, .38);
	--wb-radius: 14px;
	--wb-shadow: 0 18px 44px rgba(0, 0, 0, .6);
	--wb-serif: "Cinzel", "Trajan Pro", Georgia, "Times New Roman", serif;
	--wb-body: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* =========================================================================
   2. Base — mobile first
   ========================================================================= */
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body,
body.light,
body.dark {
	background: var(--wb-black);
	color: var(--wb-cream);
	font-family: var(--wb-body);
	font-size: 16px;
	line-height: 1.62;
	overflow-x: hidden;
}

/* the ground the sticker sits on: black with a faint gold vignette */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background:
		radial-gradient(58% 42% at 50% 0%, rgba(201, 162, 39, .13), transparent 70%),
		radial-gradient(46% 38% at 8% 96%, rgba(229, 48, 138, .07), transparent 72%),
		radial-gradient(46% 38% at 94% 88%, rgba(23, 179, 196, .07), transparent 72%);
}

#page {
	position: relative;
	z-index: 1;
	background: transparent;
}

img,
svg,
video,
canvas,
iframe {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--wb-gold-bright);
	text-decoration: none;
	overflow-wrap: anywhere;
}

a:hover,
a:focus {
	color: var(--wb-gold-pale);
	text-decoration: underline;
}

p,
li,
dd,
figcaption,
blockquote {
	overflow-wrap: anywhere;
	word-break: break-word;
}

h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title {
	font-family: var(--wb-serif);
	color: var(--wb-gold-pale);
	letter-spacing: .02em;
	line-height: 1.22;
	text-wrap: balance;
}

h1 { font-size: 1.85rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.22rem; }
h4, h5, h6 { font-size: 1.06rem; }

/* engraved-gold headline treatment, as on the sticker's banner */
.entry-title,
.page-title,
.entry-content h2 {
	background: var(--wb-gold-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/* a hairline gold rule under section headings */
.entry-content h2 {
	position: relative;
	padding-bottom: .42em;
	margin-top: 2.1em;
}

.entry-content h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 84px;
	height: 2px;
	background: var(--wb-gold-grad);
	border-radius: 2px;
}

hr,
.entry-content hr {
	border: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--wb-rule), transparent);
	margin: 2.4em 0;
}

::selection {
	background: var(--wb-gold);
	color: #14100a;
}

/* keyboard focus stays visible on a dark ground */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.wb-btn:focus-visible {
	outline: 2px solid var(--wb-gold-bright);
	outline-offset: 2px;
}

/* =========================================================================
   3. Navigation bar
   ========================================================================= */
.main-navigation.navbar-fixed-top,
.main-navigation {
	background: rgba(6, 5, 8, .93);
	border: 0;
	border-bottom: 1px solid var(--wb-rule);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	backdrop-filter: saturate(140%) blur(10px);
}

.main-navigation .navbar-brand,
.navbar-brand {
	display: flex;
	align-items: center;
	gap: .55rem;
	height: auto;
	padding: 8px 0;
	font-family: var(--wb-serif);
	font-size: 1.02rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wb-gold-pale) !important;
}

.navbar-brand:hover { text-decoration: none; }

/* On a phone the fixed bar sits over the crest as soon as the page scrolls,
   which clipped the crown. Let the bar scroll away with the rest of the page. */
@media (max-width: 767px) {
	.main-navigation.navbar-fixed-top,
	.main-navigation {
		/* Relative rather than static: the bar still scrolls away with the page
		   so it cannot clip the crest, but it keeps a stacking context so the
		   open menu paints above the black hero instead of behind it. */
		position: relative;
		z-index: 1030;
	}
}

/* The parent theme separates the collapsed menu rows with thick white rules,
   which read as bars across the black bar. Hairline gold rules instead. */
@media (max-width: 767px) {
	.navbar-ex1-collapse .primary-menu > li > a,
	.navbar-ex1-collapse .primary-menu a {
		border-top: 0;
		border-bottom: 1px solid var(--wb-rule);
	}

	.navbar-ex1-collapse .primary-menu > li:last-child > a {
		border-bottom: 0;
	}
}

.navbar-brand {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
}

.navbar-brand .wb-brand-mark {
	display: block;
	width: auto;
	height: 52px;
	flex: none;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .8));
}

/* The crest is too detailed to read at nav size, so the wordmark carries the
   name beside it and only drops away on the narrowest phones. */
.wb-brand-word {
	font-family: var(--wb-serif);
	/* Scales with the bar so the name fills it instead of sitting small in the
	   corner, without ever crowding the menu toggle. */
	font-size: clamp(1.05rem, 4.4vw, 1.7rem);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wb-gold-pale);
	white-space: nowrap;
}

@media (max-width: 360px) {
	.navbar-brand:has(.wb-brand-mark) .wb-brand-word {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}
}

.primary-menu > li > a,
.navbar-ex1-collapse a {
	color: var(--wb-cream) !important;
	font-size: .95rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	min-height: 44px;
	display: flex;
	align-items: center;
}

.primary-menu > li > a:hover,
.primary-menu > li.current-menu-item > a,
.primary-menu > li.current_page_item > a {
	color: var(--wb-gold-bright) !important;
	background: transparent !important;
}

.primary-menu > li.current-menu-item > a,
.primary-menu > li.current_page_item > a {
	box-shadow: inset 0 -2px 0 var(--wb-gold);
}

.primary-menu .sub-menu,
.primary-menu ul {
	background: var(--wb-panel);
	border: 1px solid var(--wb-rule);
	border-radius: 10px;
	overflow: hidden;
}

.menu-toggle {
	background: transparent;
	border: 1px solid var(--wb-rule);
	border-radius: 10px;
	min-width: 44px;
	min-height: 44px;
}

.menu-toggle .icon-bar {
	background: var(--wb-gold-pale);
	display: block;
	width: 20px;
	height: 2px;
	border-radius: 2px;
	margin: 4px auto;
}

/* =========================================================================
   4. Site header / hero — the sticker, front and centre
   ========================================================================= */
/* The parent theme gives the header a fixed height and clips it, which cut the
   crown off the top of the lockup. Height comes from the contents instead. */
.site-header {
	/* Solid black, matching the artwork's own background, so the crest's edges
	   never read as a rectangle against the body gradient. */
	background: #000 !important;
	padding: 2.4rem 1rem .6rem;
	text-align: center;
	height: auto !important;
	min-height: 0;
	max-height: none;
	overflow: visible;
}

/* Nisarg absolutely positions the branding and vertically centres it inside a
   fixed-height header, which pushed the top of the lockup up behind the fixed
   navbar. Put it back in normal flow so the header grows to fit the artwork. */
.site-header .site-branding {
	position: static;
	width: 100%;
	max-width: 100%;
	top: auto;
	left: auto;
	right: auto;
	bottom: auto;
	transform: none;
	overflow: visible;
}

.site-header .home-link { overflow: visible; }

.site-branding .home-link { display: block; }

/* The lockup is flattened onto black (JPEG ringing made a transparent version
   halo), so it is blended rather than laid over the hero's near-black gradient,
   which would otherwise show the artwork's edges as a rectangle. */
.wb-hero-logo {
	display: block;
	width: min(78vw, 360px);
	margin: 0 auto .55rem;
	mix-blend-mode: lighten;
	filter: drop-shadow(0 14px 34px rgba(0, 0, 0, .75));
}

.site-title {
	font-size: 1.55rem;
	margin: 0;
	text-transform: uppercase;
	letter-spacing: .14em;
	background: var(--wb-gold-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.site-description {
	font-family: var(--wb-body);
	font-size: .92rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wb-muted);
	margin: .35rem 0 0;
}

/* the "est. 2021" ribbon lifted off the sticker's crown */
.wb-est {
	display: inline-block;
	margin-top: .7rem;
	padding: .28em 1.1em;
	font-family: var(--wb-serif);
	font-size: .74rem;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: #17120a;
	background: var(--wb-gold-grad);
	border-radius: 999px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
}

/* =========================================================================
   5. Content shell
   ========================================================================= */
.site-content {
	padding: 1.2rem 0 2.4rem;
}

.hentry,
.site-content .post,
.site-content .page,
article.post,
article.page,
#primary > article,
.no-results {
	background: linear-gradient(180deg, var(--wb-panel) 0%, #0f0d13 100%);
	border: 1px solid var(--wb-rule);
	border-radius: var(--wb-radius);
	box-shadow: var(--wb-shadow);
	padding: 1.35rem 1.1rem;
	margin-bottom: 1.6rem;
}

/* Nisarg justifies body copy, which opens ugly rivers at phone widths. */
.entry-content,
.entry-summary { text-align: left; }

.entry-header { margin-bottom: .8rem; }

.entry-title { margin: 0 0 .35rem; }

.entry-title a { color: inherit; }

.entry-meta,
.entry-footer,
.posted-on,
.byline,
.cat-links,
.tags-links,
.comments-link {
	color: var(--wb-muted);
	font-size: .86rem;
	letter-spacing: .04em;
}

.entry-meta a,
.entry-footer a { color: var(--wb-gold); }

.entry-content ul,
.entry-content ol { padding-left: 1.35rem; }

.entry-content li { margin-bottom: .4em; }

.entry-content strong { color: var(--wb-gold-pale); }

blockquote {
	border: 0;
	border-left: 3px solid var(--wb-gold);
	background: rgba(201, 162, 39, .07);
	border-radius: 0 10px 10px 0;
	padding: .9rem 1.1rem;
	margin: 1.6rem 0;
	color: var(--wb-cream);
	font-style: normal;
}

code,
pre,
.wp-block-code {
	background: #0a0910;
	border: 1px solid var(--wb-rule);
	border-radius: 10px;
	color: var(--wb-gold-pale);
}

/* hide the empty code blocks left in old page content */
.wp-block-code:has(code:empty) { display: none; }

table {
	width: 100%;
	border-collapse: collapse;
	font-size: .95rem;
}

table th,
table td {
	border: 1px solid var(--wb-rule);
	padding: .6rem .7rem;
	text-align: left;
}

table th {
	background: rgba(201, 162, 39, .12);
	color: var(--wb-gold-pale);
	font-family: var(--wb-serif);
}

/* =========================================================================
   6. Gold-framed imagery (the sticker's oval frame, generalised)
   ========================================================================= */
.post-thumbnail img,
.wp-block-image img,
.entry-content img,
.wp-post-image {
	border-radius: 12px;
}

.post-thumbnail,
.wp-block-image {
	position: relative;
}

.post-thumbnail img,
.wp-post-image {
	border: 1px solid var(--wb-rule);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
}

figcaption,
.wp-element-caption {
	color: var(--wb-muted);
	font-size: .85rem;
	text-align: center;
}

/* =========================================================================
   7. Buttons & forms
   ========================================================================= */
.wb-btn,
button,
input[type="button"],
input[type="submit"],
.wp-block-button__link,
.wp-element-button,
.button,
a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 44px;
	padding: .68rem 1.35rem;
	border: 0;
	border-radius: 999px;
	background: var(--wb-gold-grad);
	color: #17120a !important;
	font-family: var(--wb-body);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none !important;
	cursor: pointer;
	box-shadow: 0 8px 22px rgba(0, 0, 0, .5);
	transition: transform .16s ease, filter .16s ease;
}

.wb-btn:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.button:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
	color: #17120a !important;
}

.wb-btn--ghost,
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	border: 1px solid var(--wb-gold);
	color: var(--wb-gold-pale) !important;
	box-shadow: none;
}

/* 16px minimum stops iOS zooming the page on focus */
input,
select,
textarea,
button {
	font-size: 16px !important;
	font-family: var(--wb-body);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea {
	width: 100%;
	max-width: 100%;
	min-height: 44px;
	padding: .6rem .8rem;
	background: #0a0910;
	border: 1px solid var(--wb-rule);
	border-radius: 10px;
	color: var(--wb-cream);
}

input::placeholder,
textarea::placeholder { color: #7d7466; }

@supports (-webkit-touch-callout: none) {
	input:focus,
	select:focus,
	textarea:focus { font-size: 16px !important; }
}

label { color: var(--wb-muted); }

/* Jetpack ships its own colours for the contact form on the Contact page, so
   its submit button and fields are pulled back to the brand palette. */
.wp-block-jetpack-contact-form .wp-block-button__link,
.contact-form input[type="submit"],
.contact-form button[type="submit"] {
	background: var(--wb-gold-grad) !important;
	border: 0 !important;
	color: #17120a !important;
}

.contact-form label,
.grunion-field-label { color: var(--wb-gold-pale); }

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form select.select,
.contact-form textarea,
.entry-content .contact-form select {
	background: #0a0910 !important;
	border: 1px solid var(--wb-rule) !important;
	border-radius: 10px;
	color: var(--wb-cream) !important;
}

.contact-form select option { background: #0a0910; color: var(--wb-cream); }

.search-form,
.wp-block-search__inside-wrapper {
	display: flex;
	gap: .5rem;
	flex-wrap: wrap;
}

.wp-block-search__input { flex: 1 1 12rem; }

/* =========================================================================
   8. Sidebar & widgets
   ========================================================================= */
#secondary,
.widget-area {
	margin-top: 1.6rem;
}

/* Nisarg styles widgets through `#secondary .widget`, which outranks a plain
   `.widget` rule and left the sidebar as white cards on the dark theme. */
#secondary .widget,
.widget-area .widget,
.widget {
	background: var(--wb-panel);
	border: 1px solid var(--wb-rule);
	border-radius: var(--wb-radius);
	padding: 1.1rem;
	margin-bottom: 1.2rem;
}

#secondary .widget,
.widget-area .widget,
.widget,
.widget a { color: var(--wb-cream); }

.widget a { color: var(--wb-gold-pale); }

.widget-title,
.widget h2 {
	font-size: 1rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	margin: 0 0 .8rem;
}

.widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.widget li {
	padding: .42rem 0;
	border-bottom: 1px dashed rgba(201, 162, 39, .18);
}

.widget li:last-child { border-bottom: 0; }

/* =========================================================================
   9. Cast grid — "Meet the Wrinklebottoms"
   ========================================================================= */
.wb-cast {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin: 1.6rem 0;
	padding: 0;
	list-style: none;
}

.wb-cat {
	position: relative;
	background: linear-gradient(180deg, #17141c 0%, #0c0a10 100%);
	border: 1px solid var(--wb-rule);
	border-radius: var(--wb-radius);
	padding: 1.1rem;
	text-align: center;
	box-shadow: var(--wb-shadow);
}

.wb-cat::before {
	content: "";
	position: absolute;
	inset: 6px;
	border: 1px solid rgba(201, 162, 39, .22);
	border-radius: 10px;
	pointer-events: none;
}

.wb-cat__frame {
	width: 132px;
	height: 132px;
	margin: 0 auto .8rem;
	border-radius: 50%;
	padding: 5px;
	background: var(--wb-gold-grad);
	box-shadow: 0 10px 26px rgba(0, 0, 0, .6);
}

.wb-cat__frame img,
.wb-cat__frame .wb-cat__initial {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	background: #0a0910;
	font-family: var(--wb-serif);
	font-size: 2.6rem;
	color: var(--wb-gold-pale);
}

.wb-cat__name {
	font-family: var(--wb-serif);
	font-size: 1.16rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin: 0 0 .18rem;
	background: var(--wb-gold-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.wb-cat__role {
	display: block;
	font-size: .76rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--wb-gold);
	margin-bottom: .55rem;
}

.wb-cat__bio {
	font-size: .95rem;
	color: var(--wb-cream);
	margin: 0 0 .7rem;
}

.wb-cat__tag {
	display: inline-block;
	font-size: .8rem;
	letter-spacing: .04em;
	color: var(--wb-magenta);
}

/* =========================================================================
   10. Credential / trust strip (FeLV/FIV neg, HCM scanned, DNA tested)
   ========================================================================= */
.wb-creds {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .6rem;
	margin: 1.4rem 0;
	padding: 0;
	list-style: none;
}

.wb-creds li {
	background: rgba(201, 162, 39, .08);
	border: 1px solid var(--wb-rule);
	border-radius: 10px;
	padding: .7rem .6rem;
	text-align: center;
	font-size: .8rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wb-gold-pale);
}

/* =========================================================================
   11. Instagram / QR call-out
   ========================================================================= */
.wb-ig {
	display: grid;
	grid-template-columns: 1fr;
	justify-items: center;
	align-items: center;
	gap: 1.1rem;
	background: linear-gradient(180deg, #17141c 0%, #0b0a0e 100%);
	border: 1px solid var(--wb-rule);
	border-radius: var(--wb-radius);
	padding: 1.2rem;
	margin: 1.8rem 0;
	text-align: center;
}

/* Specific enough to beat the parent theme's `.entry-content img { width: auto }`,
   which otherwise let the QR render at its full intrinsic size. */
.wb-ig .wb-ig__qr {
	width: 168px;
	margin: 0 auto;
	border-radius: 12px;
	border: 1px solid var(--wb-rule);
}

.wb-ig h2 { margin-top: 0; }

/* =========================================================================
   12. Footer
   ========================================================================= */
.site-footer {
	background: #000;
	border-top: 1px solid var(--wb-rule);
	color: var(--wb-muted);
	padding: 1.8rem 1rem 2.4rem;
	text-align: center;
}

.site-footer a { color: var(--wb-gold); }

.wb-footer-mark {
	display: block;
	mix-blend-mode: lighten;
	width: min(60vw, 170px);
	margin: 0 auto 1rem;
	opacity: .95;
}

.wb-footer-tag {
	font-family: var(--wb-serif);
	letter-spacing: .18em;
	text-transform: uppercase;
	font-size: .78rem;
	color: var(--wb-gold);
	margin-bottom: .6rem;
}

.site-info {
	font-size: .82rem;
	line-height: 1.7;
}

/* =========================================================================
   13. WooCommerce
   ========================================================================= */
.woocommerce ul.products li.product,
.woocommerce div.product .woocommerce-tabs,
.woocommerce-page .woocommerce-message,
.woocommerce-info,
.woocommerce .cart_totals,
.woocommerce-checkout #payment {
	background: var(--wb-panel) !important;
	border: 1px solid var(--wb-rule) !important;
	border-radius: var(--wb-radius);
	color: var(--wb-cream);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce div.product .product_title {
	font-family: var(--wb-serif);
	color: var(--wb-gold-pale);
}

.woocommerce .price,
.woocommerce ul.products li.product .price {
	color: var(--wb-gold-bright) !important;
}

.woocommerce-info,
.woocommerce-message {
	border-top-color: var(--wb-gold) !important;
}

.woocommerce table.shop_table,
.woocommerce table.shop_table td,
.woocommerce table.shop_table th {
	border-color: var(--wb-rule) !important;
	color: var(--wb-cream);
}

/* =========================================================================
   14. Add to Home Screen panel
   ========================================================================= */
.wb-a2hs {
	background: var(--wb-panel);
	border: 1px solid var(--wb-rule);
	border-radius: var(--wb-radius);
	padding: 1.1rem;
	margin: 1.6rem 0;
}

.wb-a2hs h2 { margin-top: 0; }

.wb-a2hs ol { padding-left: 1.3rem; }

.wb-a2hs[hidden] { display: none; }

/* =========================================================================
   15. Monetisation furniture — sponsor slots, affiliate links, disclosures
   ========================================================================= */
.wb-ad {
	margin: 1.6rem auto;
	padding: .55rem;
	background: rgba(255, 255, 255, .022);
	border: 1px dashed rgba(201, 162, 39, .28);
	border-radius: 12px;
	text-align: center;
	/* keep any supplied creative inside the phone viewport */
	max-width: 100%;
	overflow: hidden;
}

.wb-ad__label {
	display: block;
	font-size: .64rem;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: #8d8577;
	margin-bottom: .45rem;
}

.wb-ad__body img,
.wb-ad__body iframe {
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	border-radius: 8px;
}

.wb-ad--header-leaderboard {
	margin: .8rem auto 0;
	max-width: 970px;
}

.wb-ad--footer-banner { max-width: 970px; }

.wb-ad--sidebar-sticky {
	position: sticky;
	top: 84px;
}

.wb-disclosure {
	display: block;
	background: rgba(23, 179, 196, .08);
	border: 1px solid rgba(23, 179, 196, .34);
	border-left: 3px solid var(--wb-cyan);
	border-radius: 0 10px 10px 0;
	padding: .8rem 1rem;
	margin: 0 0 1.5rem;
	font-size: .88rem;
	color: var(--wb-cream);
}

.wb-disclosure strong {
	color: var(--wb-cyan);
	letter-spacing: .06em;
	text-transform: uppercase;
	font-size: .8rem;
}

a.wb-affiliate:not(.wb-btn) {
	color: var(--wb-gold-bright);
	border-bottom: 1px dotted var(--wb-gold);
}

.wb-code {
	display: inline-block;
	padding: .1em .55em;
	background: rgba(229, 48, 138, .14);
	border: 1px solid rgba(229, 48, 138, .4);
	border-radius: 6px;
	font-size: .82rem;
	letter-spacing: .04em;
	color: #ff9ecb;
	white-space: nowrap;
}

.wb-code strong { color: #fff; }

/* front-page section headings are centred, since there is no sidebar to
   balance a left-aligned rule against */
.home .entry-content h2 { text-align: center; }

.home .entry-content h2::after {
	left: 50%;
	transform: translateX(-50%);
}

.home .entry-content > p:first-of-type {
	font-size: 1.12rem;
	text-align: center;
	max-width: 46rem;
	margin: 0 auto 1.6rem;
	color: var(--wb-cream);
}

.home .entry-content .wb-btn { margin: .2rem .3rem; }

.home .entry-content h2 + p { text-align: center; }

/* the front page reads as a landing page: no sidebar, no repeated page title */
.home .entry-header,
.home #secondary,
.home .widget-area {
	display: none;
}

.home #primary,
.home .content-area {
	width: 100%;
	max-width: none;
	float: none;
	margin: 0;
}

/* cattery groups: queens, studs, kittens */
.wb-castgroup { margin: 2.4rem 0; }

.wb-castgroup__title {
	text-align: center;
	margin-bottom: .3rem;
}

.wb-castgroup__title::after {
	left: 50%;
	transform: translateX(-50%);
}

.wb-cat__soon {
	font-style: italic;
	opacity: .65;
}

.wb-castgroup__note {
	text-align: center;
	max-width: 46rem;
	margin: 0 auto 1.4rem;
	color: var(--wb-muted);
	font-size: .95rem;
}

/* affiliate partner directory */
.wb-partners {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin: 1.6rem 0;
	padding: 0;
	list-style: none;
}

.wb-partner {
	background: linear-gradient(180deg, #17141c 0%, #0c0a10 100%);
	border: 1px solid var(--wb-rule);
	border-radius: var(--wb-radius);
	padding: 1.1rem;
	box-shadow: var(--wb-shadow);
}

.wb-partner__name {
	font-size: 1.1rem;
	letter-spacing: .06em;
	margin: 0 0 .2rem;
}

.wb-partner__name a { color: var(--wb-gold-pale); }

.wb-partner__handle {
	display: inline-block;
	font-size: .82rem;
	color: var(--wb-magenta);
	margin-bottom: .5rem;
}

.wb-partner__blurb {
	font-size: .93rem;
	margin: .2rem 0 .7rem;
}

.wb-partner__code { margin: 0 0 .5rem; }

.wb-partner__worn {
	font-size: .8rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wb-muted);
	margin: 0;
}

/* wide tables get a scroller rather than breaking the mobile layout */
.wb-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 1.2rem 0;
}

.wb-scroll table { min-width: 32rem; }

/* =========================================================================
   16. Larger screens
   ========================================================================= */
@media (min-width: 621px) {
	body { font-size: 17px; }

	h1 { font-size: 2.5rem; }
	h2 { font-size: 1.85rem; }
	h3 { font-size: 1.4rem; }

	.hentry,
	.site-content .post,
	.site-content .page,
	article.post,
	article.page,
	#primary > article,
	.no-results {
		padding: 2.2rem 2.1rem;
	}

	.site-title { font-size: 2.3rem; }

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

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

	.wb-creds { grid-template-columns: repeat(4, minmax(0, 1fr)); }

	.site-header { padding: 2.4rem 1rem .6rem; }
}

@media (min-width: 992px) {
	.wb-cast { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.navbar-brand .wb-brand-mark { height: 62px; }
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation: none !important;
		transition: none !important;
	}
}

/* Injected archive heading, matched to the page titles elsewhere. */
.wb-archive-head {
	margin: 0 0 1.6rem;
	text-align: center;
}

.wb-archive-head .page-title {
	font-family: var(--wb-serif);
	font-size: clamp(1.5rem, 5vw, 2.1rem);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wb-gold-pale);
}

/* -------------------------------------------------------------------------
   Affiliate blocks (Wrinklebottom Commerce)
   ---------------------------------------------------------------------- */

.wb-favourites {
	background: linear-gradient(180deg, #17141c 0%, #0b0a0e 100%);
	border: 1px solid var(--wb-rule);
	border-radius: var(--wb-radius);
	padding: 1.2rem;
	margin: 1.8rem 0;
	text-align: center;
}

.wb-favourites__title {
	font-family: var(--wb-serif);
	font-size: clamp(1.2rem, 4.4vw, 1.6rem);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wb-gold-pale);
	margin: 0 0 .5rem;
}

.wb-pick {
	border: 1px solid var(--wb-rule);
	border-left: 3px solid var(--wb-gold);
	border-radius: var(--wb-radius);
	background: var(--wb-panel);
	padding: 1rem 1.1rem;
	margin: 1.4rem 0;
}

.wb-pick__title {
	font-family: var(--wb-serif);
	font-size: 1.15rem;
	margin: 0 0 .4rem;
}

.wb-pick__cat,
.wb-amazon__note {
	font-size: .95rem;
	color: var(--wb-gold-pale);
}

a.wb-affiliate { color: var(--wb-gold-pale); }
a.wb-btn.wb-affiliate { color: #17120a; }

.wb-associate-note,
.wb-widget-note {
	font-size: .9rem;
	color: #9a927f;
	text-align: center;
	margin: 1rem auto 1.4rem;
	max-width: 60ch;
	padding: 0 1rem;
}

/* in-article recommendation block — a gold frame so it reads as an aside
   rather than as part of the argument of the piece */
.wb-reco {
	display: block;
	margin: 2rem 0;
	padding: 1.3rem 1.4rem;
	background: linear-gradient(180deg, rgba(201, 164, 76, .10), rgba(201, 164, 76, .03));
	border: 1px solid rgba(201, 164, 76, .45);
	border-radius: 4px;
}

.wb-reco__eyebrow {
	display: block;
	font-size: .78rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--wb-gold);
	margin-bottom: .35rem;
}

.wb-reco__name {
	margin: 0 0 .5rem;
	font-size: 1.25rem;
	color: var(--wb-gold-bright);
}

.wb-reco__blurb {
	margin: 0 0 .9rem;
	color: var(--wb-cream);
}

.wb-reco__code { margin: 0 0 .9rem; }
.wb-reco__cta { margin: 0; }

@media (max-width: 620px) {
	.wb-reco { padding: 1.1rem 1rem; }
	.wb-reco__cta .wb-btn { display: block; width: 100%; text-align: center; }
}

/* Comment-form checkboxes: keep the box and its label comfortably tappable on phones. */
.comment-form-cookies-consent,
.comment-subscription-form {
	display: flex;
	align-items: center;
	gap: .6rem;
	min-height: 44px;
}

/* The control itself is a full 44px touch target; padding plus a content-box
   background paint the visible tick box at 22px, so the target meets the mobile
   minimum without a giant checkbox in the row. Jetpack's subscribe boxes carry
   inline width/appearance, hence the !important. */
.comment-form input[type="checkbox"] {
	-webkit-appearance: none !important;
	appearance: none !important;
	box-sizing: border-box;
	flex: 0 0 auto;
	width: 44px !important;
	height: 44px !important;
	margin: 0 -11px;
	padding: 11px;
	border: 0;
	background-color: rgba(246, 230, 168, .1);
	background-origin: content-box;
	background-clip: content-box;
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
}

.comment-form input[type="checkbox"]:checked {
	background-color: var(--wb-gold);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2317120a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3.5 3.5L13 5'/%3E%3C/svg%3E");
	background-size: 14px 14px;
}

.comment-form input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--wb-gold-bright);
	outline-offset: -9px;
}

.comment-form-cookies-consent label,
.comment-subscription-form label {
	margin: 0;
	line-height: 1.4;
}

/* Nisarg gives the comments block and post navigation white cards, which left
   cream text on white below every journal post. Match the article panel. */
.post-comments,
.comments-area,
.post-comments .comments-area,
.posts-navigation .nav-links,
.post-navigation .nav-links,
.nav-previous,
.nav-next,
.next-post,
.prev-post {
	background: linear-gradient(180deg, var(--wb-panel) 0%, #0f0d13 100%);
	color: var(--wb-cream);
	box-shadow: none;
}

.post-comments,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	border: 1px solid var(--wb-rule);
	border-radius: var(--wb-radius);
	box-shadow: var(--wb-shadow);
}

.post-comments .comments-area {
	background: transparent;
	border: 0;
	padding: 0;
}

.next-post,
.prev-post,
.nav-previous,
.nav-next {
	background: transparent;
}

.next-post a,
.prev-post a,
.nav-previous a,
.nav-next a,
.nav-links .fa {
	color: var(--wb-gold-pale);
}

.comments-title,
.comment-reply-title,
.comment-author .fn,
.comment-author .fn a {
	font-family: var(--wb-serif);
	color: var(--wb-gold-pale);
}

.comment-metadata,
.comment-metadata a,
.comment-notes,
.comment-form label,
.no-comments,
.comments-area .comment-body,
.comments-area .comment-content { color: var(--wb-cream); }

.comment-metadata,
.comment-metadata a { color: var(--wb-muted); }

.comments-area > ol,
.comments-area > ul,
.comment-list { list-style: none; padding-left: 0; }

.comment-list .comment-body {
	border-bottom: 1px solid var(--wb-rule);
	padding: 1rem 0;
}

@media (max-width: 620px) {
	.post-comments { padding: 1.1rem 1rem; }
	.comments-area { padding: 0; }
}

/* Nisarg paints body copy #424242 for a white layout; on the couture panels that
   left every article and excerpt as dark grey on near-black. */
.entry-content,
.entry-summary,
.single-post-content,
.post-content,
.entry-content p,
.entry-content li,
.entry-content dd,
.entry-content dt,
.entry-content td,
.entry-content th,
.entry-content blockquote,
.entry-content figcaption,
.entry-summary p,
.page-content,
.page-content p,
.taxonomy-description,
.taxonomy-description p {
	color: var(--wb-cream);
}

.entry-content strong,
.entry-content b { color: var(--wb-gold-pale); }

.entry-content em,
.entry-content i { color: inherit; }

.entry-content a:not(.wb-btn) {
	color: var(--wb-gold-bright);
	text-decoration: underline;
	text-decoration-color: var(--wb-rule);
}

.entry-content a:not(.wb-btn):hover { text-decoration-color: var(--wb-gold-bright); }

/* Archive, tag, category and search headings plus their result links. */
.archive-page-title,
.archive-page-title > span,
.search-page-title,
.search-page-title span,
.page-title {
	font-family: var(--wb-serif);
	color: var(--wb-gold-pale);
}

.archive-page-title > span,
.search-page-title span { background: transparent; }

.entry-title a,
.entry-title a:visited,
.entry-header .entry-title a,
.entry-header .entry-title a:visited { color: var(--wb-gold-pale); }

.entry-title a:hover,
.entry-header .entry-title a:hover { color: var(--wb-gold-bright); }

.entry-meta,
.entry-meta a,
.entry-footer,
.entry-footer a,
.posted-on,
.byline,
.cat-links,
.tags-links { color: var(--wb-muted); }

.entry-meta a:hover,
.entry-footer a:hover { color: var(--wb-gold-bright); }

/* Nisarg prints its own "Browsed by / Tag:" banner above the archive H1, so the
   heading appeared twice. Keep the H1. */
.archive-page-title { display: none; }

/* The 404 section keeps Nisarg's white card, which hid the couture text on it. */
.error-404.not-found {
	background: linear-gradient(180deg, var(--wb-panel) 0%, #0f0d13 100%);
	border: 1px solid var(--wb-rule);
	border-radius: var(--wb-radius);
	box-shadow: var(--wb-shadow);
	padding: 1.6rem 1.2rem;
}

.error-404 .page-content,
.error-404 .page-content p { color: var(--wb-cream); }

/* =========================================================================
   Layout stability
   ========================================================================= */
/* Metric-matched fallbacks: the display serif and body sans load from Google
   with font-display: swap, and the raw fallbacks are enough taller that the
   swap reflowed the header. */
@font-face {
	font-family: "Cinzel Fallback";
	src: local("Georgia"), local("Times New Roman"), local("serif");
	size-adjust: 93%;
	ascent-override: 92%;
	descent-override: 24%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Jost Fallback";
	src: local("Helvetica Neue"), local("Arial"), local("sans-serif");
	size-adjust: 96%;
	ascent-override: 96%;
	descent-override: 24%;
	line-gap-override: 0%;
}

:root {
	--wb-serif: "Cinzel", "Cinzel Fallback", "Trajan Pro", Georgia, "Times New Roman", serif;
	--wb-body: "Jost", "Jost Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* The heading bar holds one or two lines of display type; reserving its height
   keeps the article below it from moving as fonts settle. */
.site-header { min-height: 150px; }

/* The parent theme sizes this spacer from JavaScript on window.ready, which
   dropped the whole page down ~75px after first paint. Declaring the fixed
   navbar's height per breakpoint means the reflow never happens. */
#cc_spacer { height: 78px; }

@media (min-width: 768px) and (max-width: 991px) {
	#cc_spacer { height: 166px; }
}

@media (min-width: 992px) {
	#cc_spacer { height: 132px; }
}

/* =========================================================================
   Answer-first blocks
   ========================================================================= */
.wb-answer {
	background: linear-gradient(180deg, var(--wb-panel-2) 0%, var(--wb-panel) 100%);
	border: 1px solid var(--wb-gold);
	border-left: 4px solid var(--wb-gold-bright);
	border-radius: var(--wb-radius);
	padding: 1.1rem 1.2rem;
	margin: 0 0 1.6rem;
}

.wb-answer__label {
	font-family: var(--wb-serif);
	font-size: 1rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wb-gold-bright);
	margin: 0 0 .5rem;
}

.wb-answer__text {
	color: var(--wb-cream);
	font-size: 1.05rem;
	line-height: 1.6;
	margin: 0;
}

.wb-faq {
	margin: 2.4rem 0 0;
	padding-top: 1.6rem;
	border-top: 1px solid var(--wb-rule);
}

.wb-faq__title {
	font-family: var(--wb-serif);
	color: var(--wb-gold-pale);
	margin: 0 0 1rem;
}

.wb-faq__list { margin: 0; }

.wb-faq__q {
	font-family: var(--wb-serif);
	color: var(--wb-gold-bright);
	font-size: 1.08rem;
	margin: 1.2rem 0 .35rem;
}

.wb-faq__a {
	color: var(--wb-cream);
	margin: 0;
	line-height: 1.6;
}

@media (max-width: 620px) {
	.wb-answer { padding: 1rem; }
	.wb-answer__text { font-size: 1rem; }
}

.wb-related {
	margin: 2.4rem 0 0;
	padding-top: 1.6rem;
	border-top: 1px solid var(--wb-rule);
}

.wb-related__title {
	font-family: var(--wb-serif);
	color: var(--wb-gold-pale);
	margin: 0 0 .9rem;
}

.wb-related__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .9rem;
}

.wb-related__list > li {
	background: var(--wb-panel);
	border: 1px solid var(--wb-rule);
	border-radius: var(--wb-radius);
	padding: .8rem .9rem;
}

.wb-related__list a {
	font-family: var(--wb-serif);
	color: var(--wb-gold-bright);
	display: block;
}

.wb-related__note {
	display: block;
	color: var(--wb-muted);
	font-size: .92rem;
	margin-top: .25rem;
}

@media (min-width: 768px) {
	.wb-related__list { grid-template-columns: 1fr 1fr; }
}



/* The parent theme paints the mobile menu button in its own teal, including on
   hover and while the menu is open. Keep it in the gold-on-black palette. */
.main-navigation .menu-toggle,
.main-navigation .menu-toggle:hover,
.main-navigation .menu-toggle:focus,
.main-navigation .menu-toggle:active,
.main-navigation .menu-toggle[aria-expanded="true"] {
	background: transparent;
	border: 1px solid var(--wb-gold);
	color: var(--wb-gold-pale);
	box-shadow: none;
}

.main-navigation .menu-toggle .icon-bar,
.main-navigation .menu-toggle:hover .icon-bar,
.main-navigation .menu-toggle:focus .icon-bar,
.main-navigation .menu-toggle[aria-expanded="true"] .icon-bar {
	background: var(--wb-gold-pale);
}

/* The parent theme's dark-scheme rules are more specific again. */
.dark .main-navigation .menu-toggle,
.dark .main-navigation .menu-toggle:hover,
.dark .main-navigation .menu-toggle:focus,
.dark .main-navigation .menu-toggle:active,
.dark .main-navigation .menu-toggle[aria-expanded="true"] {
	background: transparent;
	color: var(--wb-gold-pale);
}

.dark .main-navigation .menu-toggle .icon-bar,
.dark .main-navigation .menu-toggle:hover .icon-bar,
.dark .main-navigation .menu-toggle:focus .icon-bar {
	background: var(--wb-gold-pale);
}

/* Below 768px the navigation sits in normal flow, so the parent theme's spacer
   for the fixed navbar is dead height — and with the admin bar shifting the
   page down it pushed the nav over the top of the crest. */
@media (max-width: 767px) {
	#cc_spacer {
		display: none;
	}
}

/* In flow the navbar needs no admin-bar offset; WordPress's .admin-bar rule
   pushed it 46px down over the top of the crest for logged-in visitors. */
@media (max-width: 767px) {
	.admin-bar .main-navigation.navbar-fixed-top,
	.main-navigation.navbar-fixed-top {
		top: 0;
	}
}