/* =====================================================================
 * KlickKiste v3.0.0 — main.css
 * KOMPLETT NEU cinematic 3D rewrite.
 *
 * 1. Tokens & resets
 * 2. Typography
 * 3. Layout primitives
 * 4. Scroll progress + glass header + mobile drawer + search overlay
 * 5. Cinematic hero (split-letter rotateX entrance + mouse parallax + sparkles)
 * 6. Section reveals (clip-path inset wipe)
 * 7. Cover story
 * 8. Trending tag pills
 * 9. Editor strip + popular grid
 * 10. Author strip
 * 11. Trust strip
 * 12. 4-up category grid with gradient numerals
 * 13. Newsletter stage + confetti burst
 * 14. Testimonials
 * 15. Pinterest embed
 * 16. Sister network
 * 17. Versprechen
 * 18. FAQ
 * 19. Anchor pitch
 * 20. Cards / pin-cards
 * 21. Single article reading view
 * 22. Squiggle dividers
 * 23. Footer
 * 24. News bar + mobile pin
 * 25. WP block / form / a11y
 * 26. Reduced motion
 * 27. Responsive breakpoints
 * ===================================================================== */

/* =========================== 1. Tokens & reset =========================== */
:root {
	--kk-accent: #b14e30;
	--kk-accent-dark: #8a3a21;
	--kk-deep: #041f1c;
	--kk-cream: #fdf5e7;
	--kk-highlight: #e9b461;

	--kk-ink: #041f1c;
	--kk-ink-soft: rgba(var(--kk-deep-rgb), .68);
	--kk-ink-mute: rgba(var(--kk-deep-rgb), .48);

	--kk-paper: #fdf5e7;
	--kk-paper-2: #faeed8;
	--kk-paper-3: #fae3c4;
	--kk-line: rgba(var(--kk-accent-rgb), .16);
	--kk-line-strong: rgba(var(--kk-accent-rgb), .32);

	--kk-shadow-sm: 0 4px 14px rgba(var(--kk-deep-rgb), .08);
	--kk-shadow-md: 0 16px 44px rgba(var(--kk-deep-rgb), .12);
	--kk-shadow-lg: 0 32px 80px rgba(var(--kk-deep-rgb), .18);
	--kk-shadow-deep: 0 48px 120px rgba(var(--kk-deep-rgb), .22);

	/* v4 — escape AI-default Inter+Playfair pair. Bricolage Grotesque
	 * (variable, modern grotesk with personality) for display, Manrope
	 * for body (clean, mobile-readable), Caveat as brand script ornament.
	 * Lora kept as supporting serif for editorial pull-quotes only. */
	--kk-display: "Bricolage Grotesque", "Cabinet Grotesk", "Söhne", -apple-system, system-ui, sans-serif;
	--kk-sans:    "Manrope", "Outfit", "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--kk-script:  "Caveat", "Reenie Beanie", "Brush Script MT", cursive;
	--kk-mono:    ui-monospace, "JetBrains Mono", SFMono-Regular, monospace;
	/* --kk-serif aliased to --kk-display so every legacy "serif" headline
	 * automatically gets the new sans-display. True serif reserved for the
	 * .kk-quote / pull-quote class only (Lora explicitly declared there). */
	--kk-serif:   "Bricolage Grotesque", "Cabinet Grotesk", "Söhne", -apple-system, system-ui, sans-serif;
	--kk-true-serif: "Lora", "EB Garamond", Georgia, serif;

	/* v4 — radius scale collapsed from 7 ad-hoc values to 3 tokens.
	 * Cards = lg (20px). Buttons + pills = pill. Small UI = sm. */
	--kk-radius-sm:    8px;
	--kk-radius-md:   14px;  /* kept for backward-compat — prefer -sm or -lg */
	--kk-radius-lg:   20px;
	--kk-radius-pill: 999px;

	--kk-shell-x: clamp(20px, 5vw, 64px);
	--kk-shell-max: 1280px;
	--kk-narrow-max: 720px;

	--kk-ease: cubic-bezier(.16, 1, .3, 1);
	--kk-ease-soft: cubic-bezier(.4, 0, .2, 1);

	--kk-mx: 0;
	--kk-my: 0;
	--kk-scroll: 0;

	/* v5.5 Brand-Preset-Pipeline: RGB-Triplets speisen Glows/Linien/
	 * Schatten, Töne die Farbkacheln — Presets überschreiben alles. */
	--kk-accent-rgb: 177, 78, 46;
	--kk-highlight-rgb: 233, 180, 97;
	--kk-deep-rgb: 4, 31, 28;
	--kk-tone: #52685d;
	--kk-tone-2: #3d4f46;
	--kk-highlight-2: #c98e3e;
}

* { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Hard viewport seal: nothing (ads, embeds, breakout cards) may create
	 * sideways scroll. hidden = fallback for browsers without clip. */
	overflow-x: hidden;
	overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body {
	margin: 0;
	background: var(--kk-paper);
	color: var(--kk-ink);
	font-family: var(--kk-sans);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	overflow-x: clip;
	background-image:
		radial-gradient(1100px 700px at 80% -8%, rgba(var(--kk-accent-rgb), .12), transparent 60%),
		radial-gradient(900px 600px at -10% 18%, rgba(var(--kk-highlight-rgb), .08), transparent 60%);
	background-attachment: fixed;
}

a {
	color: var(--kk-accent-dark);
	text-decoration: none;
	transition: color .25s var(--kk-ease);
}
a:hover, a:focus-visible { color: var(--kk-accent); }
a:focus-visible {
	outline: 2px solid var(--kk-accent);
	outline-offset: 3px;
	border-radius: var(--kk-radius-sm);
}

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

button, input, select, textarea {
	font: inherit;
	color: inherit;
}

button { cursor: pointer; }

::selection { background: rgba(var(--kk-accent-rgb), .28); color: var(--kk-deep); }

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px; width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	word-wrap: normal !important;
}

.skip-link {
	background: var(--kk-deep);
	color: #fff;
	left: 50%;
	padding: 12px 20px;
	position: absolute;
	top: -200px;
	transform: translateX(-50%);
	transition: top .2s var(--kk-ease);
	z-index: 9999;
	border-radius: 0 0 var(--kk-radius-sm) var(--kk-radius-sm);
}
.skip-link:focus { top: 0; color: #fff; }

/* =========================== 2. Typography =========================== */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--kk-display);
	font-weight: 800;
	letter-spacing: -.025em;
	line-height: 1.08;
	margin: 0 0 .6em;
	color: var(--kk-deep);
	text-wrap: balance;          /* v4 — mandatory per impeccable §4.1 */
}
h1 { font-size: clamp(2.2rem, 5.4vw, 4.2rem); }   /* capped under 6rem */
h2 { font-size: clamp(1.8rem, 4vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
h4 { font-size: 1.12rem; }
p { margin: 0 0 1.1em; text-wrap: pretty; }
p, li { max-width: 75ch; }

.kk-eyebrow,
.kk-section-kicker {
	font-family: var(--kk-sans);
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--kk-accent-dark);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
}
.kk-eyebrow::before {
	content: "";
	display: inline-block;
	width: 28px;
	height: 2px;
	background: var(--kk-accent);
	border-radius: var(--kk-radius-sm);
}

.kk-script {
	font-family: var(--kk-script);
	font-weight: 700;
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	color: var(--kk-accent);
	display: block;
	line-height: 1;
}

.kk-section-head {
	max-width: 760px;
	margin: 0 auto 48px;
	text-align: center;
}
.kk-section-head h2 { margin: 0 0 .5em; }
.kk-section-head p { color: var(--kk-ink-soft); font-size: 1.06rem; }

/* =========================== 3. Layout =========================== */
.kk-main {
	display: block;
	min-height: 60vh;
	padding-top: 88px;
}
.kk-home-active .kk-main { padding-top: 0; }
.kk-home-wrap { display: block; }

.kk-shell {
	max-width: var(--kk-shell-max);
	margin: 0 auto;
	padding: 0 var(--kk-shell-x);
}

.kk-scene {
	position: relative;
	padding: clamp(64px, 9vw, 120px) var(--kk-shell-x);
	max-width: 100%;
}
.kk-scene > * { position: relative; z-index: 1; }
.kk-scene .layer { position: absolute; inset: 0; pointer-events: none; }
.kk-scene .layer.depth-4 {
	position: relative;
	max-width: var(--kk-shell-max);
	margin: 0 auto;
	z-index: 5;
	pointer-events: auto;
}
.kk-blob {
	position: absolute;
	width: 360px; height: 360px;
	border-radius: 50%;
	filter: blur(80px);
	opacity: .42;
	pointer-events: none;
}
.kk-blob-a { background: radial-gradient(circle, var(--kk-accent) 0%, transparent 70%); top: -10%; left: -10%; }
.kk-blob-c { background: radial-gradient(circle, var(--kk-highlight) 0%, transparent 70%); bottom: -10%; right: -10%; opacity: .3; }
.kk-blob-pink { background: radial-gradient(circle, #d98e6a 0%, transparent 70%); }

/* =========================== 4. Header / Drawer / Search — v3.3 cinematic =========================== */
.kk-progress {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: rgba(var(--kk-accent-rgb), .08);
	z-index: 1001;
	pointer-events: none;
}
.kk-progress-fill {
	display: block;
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, var(--kk-accent) 0%, var(--kk-accent-dark) 55%, var(--kk-highlight) 100%);
	box-shadow: 0 1px 12px rgba(var(--kk-accent-rgb), .6);
}

.kk-site-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 1000;
	background: rgba(253, 245, 234, .72);
	-webkit-backdrop-filter: blur(20px) saturate(1.5);
	backdrop-filter: blur(20px) saturate(1.5);
	border-bottom: 1px solid transparent;
	transition: transform .35s var(--kk-ease), background .25s var(--kk-ease), border-color .25s var(--kk-ease), box-shadow .25s var(--kk-ease);
	will-change: transform;
}
.kk-site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(var(--kk-accent-rgb), .04), transparent);
	pointer-events: none;
	opacity: 0;
	transition: opacity .4s var(--kk-ease);
}
.kk-site-header.is-scrolled {
	background: rgba(253, 245, 234, .92);
	border-bottom-color: var(--kk-line);
	box-shadow: 0 8px 30px rgba(var(--kk-deep-rgb), .08);
}
.kk-site-header.is-scrolled::before { opacity: 1; }
.kk-site-header.is-hidden { transform: translateY(-110%); }

.kk-header-shell {
	display: flex;
	align-items: center;
	gap: clamp(12px, 2vw, 28px);
	max-width: var(--kk-shell-max);
	margin: 0 auto;
	padding: 14px var(--kk-shell-x);
	transition: padding .25s var(--kk-ease);
	position: relative;
	z-index: 1;
}
.kk-site-header.is-scrolled .kk-header-shell { padding-top: 9px; padding-bottom: 9px; }

.kk-brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--kk-deep);
	font-family: var(--kk-serif);
	font-weight: 800;
	font-size: 1.45rem;
	letter-spacing: -.015em;
	flex-shrink: 0;
	transform-style: preserve-3d;
	perspective: 800px;
	transition: transform .35s var(--kk-ease), color .25s var(--kk-ease);
}
.kk-brand:hover { color: var(--kk-accent-dark); transform: translateY(-1px); }
.kk-brand-img { max-height: 42px; width: auto; display: block; }
.kk-site-header.is-scrolled .kk-brand-img { max-height: 34px; }
.kk-brand-glyph {
	display: inline-grid;
	place-items: center;
	width: 46px; height: 46px;
	border-radius: var(--kk-radius-md);
	background:
		radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .35), transparent 55%),
		linear-gradient(135deg, var(--kk-accent) 0%, var(--kk-accent-dark) 100%);
	color: #fff;
	font-weight: 900;
	font-size: 1.4rem;
	letter-spacing: 0;
	box-shadow:
		0 10px 28px rgba(var(--kk-accent-rgb), .4),
		inset 0 1px 0 rgba(255, 255, 255, .35),
		inset 0 -1px 0 rgba(0, 0, 0, .08);
	transition: transform .45s var(--kk-ease), box-shadow .35s var(--kk-ease), width .25s var(--kk-ease), height .25s var(--kk-ease);
	will-change: transform;
}
.kk-brand:hover .kk-brand-glyph {
	transform: rotate3d(1, 1, 0, 18deg) scale(1.08);
	box-shadow:
		0 16px 38px rgba(var(--kk-accent-rgb), .55),
		inset 0 1px 0 rgba(255, 255, 255, .45),
		inset 0 -1px 0 rgba(0, 0, 0, .12);
}
.kk-site-header.is-scrolled .kk-brand-glyph {
	width: 38px; height: 38px;
	border-radius: var(--kk-radius-md);
	font-size: 1.15rem;
}
.kk-brand-name { font-size: clamp(1.15rem, 1.6vw, 1.4rem); white-space: nowrap; }
.kk-site-header.is-scrolled .kk-brand-name { font-size: 1.05rem; }

.kk-nav {
	display: flex;
	justify-content: center;
	flex: 1 1 auto;
	min-width: 0;
}
.kk-nav-list {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 0;
	flex-wrap: nowrap !important;
	white-space: nowrap;
}
.kk-nav-list li {
	position: relative;
	flex: 0 0 auto;
	white-space: nowrap;
}
.kk-nav-list a,
.kk-nav-list a span,
.kk-nav-list li a {
	white-space: nowrap !important;
	text-wrap: nowrap !important;
	word-break: keep-all !important;
}
.kk-nav-list a {
	display: inline-flex;
	align-items: center;
	padding: 10px clamp(9px, 1.2vw, 16px);
	color: var(--kk-deep);
	font-weight: 500;
	font-size: clamp(.82rem, .95vw, .94rem);
	line-height: 1.2;
	border-radius: var(--kk-radius-pill);
	position: relative;
	overflow: hidden;
	transition: color .25s var(--kk-ease);
}
.kk-nav-list a::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(var(--kk-accent-rgb), .14), rgba(138, 58, 33, .08));
	border-radius: inherit;
	transform: scale(0.6);
	opacity: 0;
	transition: transform .35s var(--kk-ease), opacity .25s var(--kk-ease);
	pointer-events: none;
}
.kk-nav-list a::after {
	content: "";
	position: absolute;
	left: 50%; bottom: 5px;
	transform: translateX(-50%) scaleX(0);
	transform-origin: center;
	height: 2px; width: 22px;
	background: linear-gradient(90deg, var(--kk-accent), var(--kk-accent-dark));
	border-radius: var(--kk-radius-sm);
	transition: transform .35s var(--kk-ease);
}
.kk-nav-list a:hover::before,
.kk-nav-list a[aria-current="page"]::before { transform: scale(1); opacity: 1; }
.kk-nav-list a:hover::after,
.kk-nav-list a[aria-current="page"]::after { transform: translateX(-50%) scaleX(1); }
.kk-nav-list a:hover { color: var(--kk-accent-dark); }
.kk-nav-list a > span { position: relative; z-index: 1; }

.kk-header-tools {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}
.kk-tool-btn {
	display: inline-grid;
	place-items: center;
	width: 42px; height: 42px;
	background: transparent;
	border: 1px solid var(--kk-line);
	border-radius: 50%;
	color: var(--kk-deep);
	cursor: pointer;
	transition: background .2s var(--kk-ease), border-color .2s var(--kk-ease), transform .25s var(--kk-ease), color .2s var(--kk-ease);
}
.kk-tool-btn:hover {
	background: rgba(var(--kk-accent-rgb), .1);
	border-color: var(--kk-line-strong);
	color: var(--kk-accent-dark);
	transform: translateY(-2px) scale(1.05);
}
.kk-tool-btn:active { transform: translateY(0) scale(.98); }

.kk-header-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 22px;
	background: linear-gradient(135deg, var(--kk-accent) 0%, var(--kk-accent-dark) 100%);
	color: #fff;
	font-weight: 600;
	font-size: .92rem;
	border-radius: var(--kk-radius-pill);
	box-shadow:
		0 8px 24px rgba(var(--kk-accent-rgb), .35),
		inset 0 1px 0 rgba(255, 255, 255, .25),
		inset 0 -1px 0 rgba(0, 0, 0, .08);
	transition: transform .3s var(--kk-ease), box-shadow .3s var(--kk-ease);
	white-space: nowrap;
	position: relative;
	overflow: hidden;
}
.kk-header-cta::before {
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	left: -120%;
	width: 60%;
	background: linear-gradient(110deg, transparent, rgba(255, 255, 255, .35), transparent);
	transform: skewX(-18deg);
	transition: left .65s var(--kk-ease);
	pointer-events: none;
}
.kk-header-cta:hover::before { left: 130%; }
.kk-header-cta:hover {
	color: #fff;
	transform: translateY(-2px);
	box-shadow:
		0 16px 40px rgba(var(--kk-accent-rgb), .55),
		inset 0 1px 0 rgba(255, 255, 255, .4);
}
.kk-header-cta:active { transform: translateY(0); }
.kk-header-cta > span,
.kk-header-cta > svg { position: relative; z-index: 1; }

.kk-burger {
	display: none;
	width: 42px; height: 42px;
	background: transparent;
	border: 1px solid var(--kk-line);
	border-radius: 50%;
	position: relative;
	cursor: pointer;
	transition: background .2s var(--kk-ease), border-color .2s var(--kk-ease);
}
.kk-burger:hover { background: rgba(var(--kk-accent-rgb), .08); border-color: var(--kk-line-strong); }
.kk-burger span {
	position: absolute;
	left: 12px; right: 12px;
	height: 2px;
	background: var(--kk-deep);
	border-radius: var(--kk-radius-sm);
	transition: transform .35s var(--kk-ease), opacity .25s var(--kk-ease);
}
.kk-burger span:nth-child(1) { top: 14px; }
.kk-burger span:nth-child(2) { top: 20px; }
.kk-burger span:nth-child(3) { top: 26px; }
.kk-burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.kk-burger.is-open span:nth-child(2) { opacity: 0; }
.kk-burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Breakpoint: 7-item nav doesn't fit < 1100px → switch to drawer */
@media (max-width: 1100px) {
	.kk-nav { display: none; }
	.kk-burger { display: inline-block; }
}
@media (max-width: 720px) {
	.kk-header-shell { padding: 12px var(--kk-shell-x); gap: 10px; }
	.kk-header-cta span { display: none; }
	.kk-header-cta { padding: 0; width: 42px; height: 42px; justify-content: center; gap: 0; }
	.kk-brand-name { display: none; }
	.kk-brand-glyph { width: 42px; height: 42px; font-size: 1.25rem; border-radius: var(--kk-radius-md); }
}
@media (max-width: 480px) {
	.kk-header-tools { gap: 6px; }
	.kk-tool-btn, .kk-burger, .kk-header-cta { width: 40px; height: 40px; }
	.kk-tool-btn svg { width: 18px; height: 18px; }
}

.kk-mobile-drawer {
	position: fixed;
	top: 0; right: 0;
	width: min(380px, 92vw);
	height: 100dvh;
	background: linear-gradient(180deg, var(--kk-paper) 0%, var(--kk-paper-2) 100%);
	border-left: 1px solid var(--kk-line);
	box-shadow: -32px 0 60px rgba(var(--kk-deep-rgb), .25);
	transform: translateX(100%);
	transition: transform .5s cubic-bezier(.65, 0, .35, 1);
	z-index: 1100;
	display: flex;
	flex-direction: column;
	padding: 22px 22px max(22px, env(safe-area-inset-bottom)) 22px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}
.kk-mobile-drawer::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 100% 0%, rgba(var(--kk-accent-rgb), .12), transparent 50%),
		radial-gradient(circle at 0% 100%, rgba(var(--kk-highlight-rgb), .08), transparent 45%);
	pointer-events: none;
	z-index: 0;
}
.kk-mobile-drawer > * { position: relative; z-index: 1; }
.kk-mobile-drawer.is-open { transform: translateX(0); }
.kk-drawer-head {
	display: flex; align-items: center; justify-content: space-between;
	margin-bottom: 24px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--kk-line);
}
.kk-drawer-brand {
	font-family: var(--kk-serif);
	font-weight: 800;
	font-size: 1.5rem;
	color: var(--kk-deep);
	letter-spacing: -.01em;
}
.kk-drawer-close {
	width: 42px; height: 42px;
	background: transparent;
	border: 1px solid var(--kk-line);
	border-radius: 50%;
	display: inline-grid; place-items: center;
	color: var(--kk-deep);
	cursor: pointer;
	transition: background .2s var(--kk-ease), border-color .2s var(--kk-ease), transform .35s var(--kk-ease);
}
.kk-drawer-close:hover { background: rgba(var(--kk-accent-rgb), .08); border-color: var(--kk-line-strong); transform: rotate(90deg); }
.kk-drawer-list {
	list-style: none;
	padding: 0; margin: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.kk-drawer-list li {
	opacity: 0;
	transform: translateX(28px);
	transition: opacity .4s var(--kk-ease), transform .45s cubic-bezier(.16, 1, .3, 1);
	transition-delay: calc(var(--kk-i, 0) * 50ms);
}
.kk-mobile-drawer.is-open .kk-drawer-list li {
	opacity: 1;
	transform: translateX(0);
}
.kk-drawer-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 16px;
	min-height: 56px;
	font-family: var(--kk-serif);
	font-size: 1.35rem;
	font-weight: 600;
	color: var(--kk-deep);
	border-radius: var(--kk-radius-md);
	transition: background .25s var(--kk-ease), color .25s var(--kk-ease), padding-left .3s var(--kk-ease);
}
.kk-drawer-list a::after {
	content: "→";
	font-family: var(--kk-sans);
	font-size: 1rem;
	color: var(--kk-accent);
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity .25s var(--kk-ease), transform .25s var(--kk-ease);
}
.kk-drawer-list a:hover,
.kk-drawer-list a:focus {
	background: rgba(255, 255, 255, .6);
	color: var(--kk-accent-dark);
	padding-left: 24px;
}
.kk-drawer-list a:hover::after,
.kk-drawer-list a:focus::after { opacity: 1; transform: translateX(0); }
.kk-drawer-list a[aria-current="page"] { background: rgba(var(--kk-accent-rgb), .08); color: var(--kk-accent-dark); }
.kk-drawer-foot {
	margin-top: auto;
	padding-top: 22px;
	border-top: 1px solid var(--kk-line);
}
.kk-drawer-cta {
	display: block;
	text-align: center;
	padding: 16px 20px;
	min-height: 52px;
	background: linear-gradient(135deg, var(--kk-accent) 0%, var(--kk-accent-dark) 100%);
	color: #fff;
	border-radius: var(--kk-radius-pill);
	font-weight: 700;
	font-size: 1rem;
	box-shadow:
		0 10px 28px rgba(var(--kk-accent-rgb), .4),
		inset 0 1px 0 rgba(255, 255, 255, .25);
	transition: transform .3s var(--kk-ease), box-shadow .3s var(--kk-ease);
}
.kk-drawer-cta:hover {
	color: #fff;
	transform: translateY(-2px);
	box-shadow:
		0 16px 38px rgba(var(--kk-accent-rgb), .55),
		inset 0 1px 0 rgba(255, 255, 255, .4);
}

.kk-drawer-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(var(--kk-deep-rgb), .55);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	opacity: 0;
	pointer-events: none;
	transition: opacity .4s var(--kk-ease);
	z-index: 1050;
}
.kk-drawer-backdrop.is-visible { opacity: 1; pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
	.kk-brand-glyph,
	.kk-tool-btn,
	.kk-header-cta,
	.kk-drawer-cta,
	.kk-drawer-close { transition: none !important; }
	.kk-brand:hover .kk-brand-glyph { transform: none; }
	.kk-header-cta::before { display: none; }
	.kk-mobile-drawer { transition: opacity .2s linear; }
}

.kk-search-overlay {
	position: fixed;
	inset: 0;
	background: rgba(var(--kk-deep-rgb), .92);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
	opacity: 0;
	pointer-events: none;
	transition: opacity .35s var(--kk-ease);
	z-index: 1200;
	display: grid;
	place-items: center;
	padding: var(--kk-shell-x);
}
.kk-search-overlay.is-open { opacity: 1; pointer-events: auto; }
.kk-search-close {
	position: absolute;
	top: 24px; right: 24px;
	width: 44px; height: 44px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: 50%;
	color: #fff;
}
.kk-search-shell {
	max-width: 640px;
	width: 100%;
	color: #fff;
	transform: translateY(20px);
	transition: transform .45s var(--kk-ease);
}
.kk-search-overlay.is-open .kk-search-shell { transform: translateY(0); }
.kk-search-shell .kk-eyebrow { color: var(--kk-highlight); }
.kk-search-shell .kk-eyebrow::before { background: var(--kk-highlight); }
.kk-search-shell .search-form { display: flex; gap: 10px; margin: 12px 0 20px; }
.kk-search-shell .search-field {
	flex: 1;
	background: transparent;
	border: none;
	border-bottom: 2px solid rgba(255, 255, 255, .35);
	color: #fff;
	font-family: var(--kk-serif);
	font-size: clamp(1.6rem, 4vw, 2.4rem);
	padding: 12px 0;
	outline: none;
	transition: border-color .25s var(--kk-ease);
}
.kk-search-shell .search-field:focus { border-bottom-color: var(--kk-highlight); }
.kk-search-shell .search-field::placeholder { color: rgba(255, 255, 255, .4); }
.kk-search-shell .search-submit {
	padding: 12px 22px;
	background: var(--kk-highlight);
	color: var(--kk-deep);
	border: none;
	border-radius: var(--kk-radius-pill);
	font-weight: 700;
}
.kk-search-hint { color: rgba(255, 255, 255, .6); font-size: .92rem; }
.kk-kbd {
	display: inline-block;
	padding: 2px 8px;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: var(--kk-radius-sm);
	font-family: ui-monospace, SFMono-Regular, monospace;
	font-size: .82rem;
}

/* =========================== 5. Hero — v4 asymmetric editorial =========================== */
.kk-hero {
	position: relative;
	min-height: min(720px, 92dvh);
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(32px, 5vw, 80px);
	overflow: hidden;
	padding: 96px var(--kk-shell-x) 64px;
	background: var(--kk-paper);
}
.kk-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(800px 480px at 88% 18%, rgba(var(--kk-highlight-rgb), .12), transparent 60%),
		radial-gradient(700px 500px at 4% 92%, rgba(217, 142, 106, .10), transparent 55%);
	pointer-events: none;
	z-index: 0;
}
@media (max-width: 900px) {
	.kk-hero { grid-template-columns: 1fr; padding: 88px var(--kk-shell-x) 48px; min-height: auto; gap: 36px; }
}

.kk-hero-bg { display: none; }

.kk-hero-inner {
	position: relative;
	z-index: 2;
	max-width: 640px;
	text-align: left;
}

.kk-hero-collage {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	align-self: stretch;
	min-height: 460px;
}
.kk-hero-collage-card {
	position: relative;
	overflow: hidden;
	border-radius: var(--kk-radius-lg);
	background: var(--kk-paper-3);
	box-shadow: 0 24px 60px rgba(var(--kk-deep-rgb), .14);
	transition: transform .35s var(--kk-ease);
}
.kk-hero-collage-card img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}
.kk-hero-collage-card:nth-child(1) { transform: rotate(-2.5deg) translateY(8px); }
.kk-hero-collage-card:nth-child(2) { transform: rotate(1.5deg) translateY(-12px); }
.kk-hero-collage-card:nth-child(3) { transform: rotate(2deg) translateY(0); grid-column: span 2; max-height: 220px; }
.kk-hero-collage-card:hover { transform: rotate(0) translateY(0) scale(1.02); }
@media (max-width: 900px) {
	.kk-hero-collage { min-height: 300px; }
}

.kk-hero-eyebrow {
	font-family: var(--kk-script);
	font-size: clamp(1.5rem, 2.4vw, 2.1rem);
	color: var(--kk-accent-dark);
	display: inline-block;
	margin-bottom: 14px;
	line-height: 1;
}
.kk-hero-title {
	font-family: var(--kk-display);
	font-weight: 800;
	font-size: clamp(2.4rem, 5.6vw, 5.6rem);
	line-height: 1.04;
	letter-spacing: -.035em;
	color: var(--kk-deep);
	margin: 0 0 24px;
	text-wrap: balance;
}
.kk-hero-title em,
.kk-hero-title .kk-emphasis {
	font-style: italic;
	font-family: var(--kk-display);
	color: var(--kk-accent-dark);
	padding-bottom: .08em;
}
.kk-hero-title .kk-word { display: inline; opacity: 1; transform: none; }
.kk-hero-title.is-revealed .kk-word { opacity: 1; transform: none; }

.kk-underline {
	position: relative;
	display: inline-block;
	color: var(--kk-accent-dark);
	font-style: italic;
	font-family: var(--kk-display);
}
.kk-underline::after {
	content: "";
	position: absolute;
	left: -.05em; right: -.05em;
	bottom: .04em;
	height: .42em;
	background: var(--kk-highlight);
	opacity: .55;
	z-index: -1;
	border-radius: var(--kk-radius-sm);
	transform: skewX(-4deg);
}

.kk-hero-sub {
	max-width: 52ch;
	margin: 0 0 32px;
	font-size: clamp(1rem, 1.2vw, 1.15rem);
	line-height: 1.55;
	color: var(--kk-deep);
	opacity: .82;
	text-wrap: pretty;
}
.kk-hero-ctas {
	display: inline-flex;
	gap: 12px;
	flex-wrap: wrap;
}

/* Kill sparkles + parallax + color-cycle motion soup — gate behind opt-in class */
.kk-sparkle-deco { display: none; }
.kk-anim-color-cycle { animation: none !important; color: var(--kk-accent-dark); }

@media (prefers-reduced-motion: reduce) {
	.kk-hero-collage-card { transition: none; }
	.kk-hero-collage-card:nth-child(1),
	.kk-hero-collage-card:nth-child(2),
	.kk-hero-collage-card:nth-child(3) { transform: none; }
}

.kk-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: var(--kk-radius-pill);
	font-weight: 600;
	font-size: 1rem;
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: transform .25s var(--kk-ease), box-shadow .25s var(--kk-ease), background .25s var(--kk-ease), color .25s var(--kk-ease);
	will-change: transform;
}
.kk-btn-pill, .kk-cta-primary {
	background: linear-gradient(135deg, var(--kk-accent) 0%, var(--kk-accent-dark) 100%);
	color: #fff;
	box-shadow: 0 14px 38px rgba(var(--kk-accent-rgb), .42);
}
.kk-cta-primary:hover, .kk-btn-pill:hover {
	color: #fff;
	box-shadow: 0 20px 50px rgba(var(--kk-accent-rgb), .56);
}
.kk-btn-ghost, .kk-cta-ghost {
	background: rgba(255, 255, 255, .7);
	color: var(--kk-deep);
	border: 1px solid var(--kk-line-strong);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	padding: 14px 28px;
}
.kk-btn-ghost:hover, .kk-cta-ghost:hover {
	background: #fff;
	color: var(--kk-accent-dark);
}
.kk-btn-light {
	background: #fff;
	color: var(--kk-deep);
	box-shadow: var(--kk-shadow-md);
}
.kk-btn-light:hover { color: var(--kk-accent-dark); }

/* =========================== 6. Reveal =========================== */
.kk-reveal {
	opacity: 0;
	clip-path: inset(4% 0 4% 0 round 4px);
	transform: translateY(36px);
	transition: opacity .9s var(--kk-ease), clip-path .9s var(--kk-ease), transform .9s var(--kk-ease);
	will-change: opacity, clip-path, transform;
}
.kk-reveal.is-revealed {
	opacity: 1;
	clip-path: inset(0 round 4px);
	transform: translateY(0);
}

/* =========================== 7. Cover story =========================== */
.kk-cover-story {
	position: relative;
	margin: clamp(40px, 7vw, 90px) auto;
	max-width: 1320px;
	min-height: 540px;
	border-radius: var(--kk-radius-lg);
	overflow: hidden;
	display: grid;
	place-items: end start;
	color: #fff;
	padding: clamp(40px, 6vw, 80px);
	background: linear-gradient(135deg, var(--kk-deep) 0%, var(--kk-accent-dark) 100%);
	box-shadow: var(--kk-shadow-deep);
	isolation: isolate;
}
.kk-cover-story h1, .kk-cover-story h2, .kk-cover-story p { color: inherit; }
.kk-cover-story-img {
	position: absolute; inset: -8%;
	background-size: cover;
	background-position: center;
	opacity: .55;
	z-index: 0;
	transform: scale(1.06);
	transition: transform 1.6s var(--kk-ease);
	will-change: transform;
}
.kk-cover-story:hover .kk-cover-story-img { transform: scale(1.12); }
.kk-cover-story-gradient {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(var(--kk-deep-rgb), .15) 0%, rgba(var(--kk-deep-rgb), .55) 50%, rgba(var(--kk-deep-rgb), .9) 100%);
	z-index: 1;
}
.kk-cover-story-body {
	position: relative;
	z-index: 4;
	max-width: 720px;
}
.kk-cover-badge {
	display: inline-block;
	padding: 6px 14px;
	background: var(--kk-highlight);
	color: var(--kk-deep);
	border-radius: var(--kk-radius-pill);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .04em;
	margin-bottom: 14px;
}
.kk-cover-cat {
	display: inline-block;
	padding: 4px 12px;
	margin-left: 8px;
	border: 1px solid rgba(255, 255, 255, .35);
	color: #fff;
	border-radius: var(--kk-radius-pill);
	font-size: .82rem;
}
.kk-cover-title {
	font-size: clamp(2rem, 4.6vw, 3.4rem);
	color: #fff;
	margin-bottom: 18px;
}
.kk-cover-excerpt {
	font-size: 1.1rem;
	color: rgba(255, 255, 255, .82);
	margin-bottom: 26px;
}
.kk-cover-story .kk-cta-primary { color: #fff; }

/* =========================== 8. Trending =========================== */
.kk-trending {
	padding: clamp(20px, 4vw, 36px) var(--kk-shell-x);
}
.kk-trending-inner {
	max-width: var(--kk-shell-max);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	justify-content: center;
}
.kk-trending-label {
	color: var(--kk-ink-soft);
	font-weight: 600;
	margin-right: 8px;
}
.kk-pill {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	background: linear-gradient(135deg, var(--kk-accent) 0%, var(--kk-accent-dark) 100%);
	color: #fff;
	border-radius: var(--kk-radius-pill);
	font-weight: 500;
	font-size: .92rem;
	transition: transform .25s var(--kk-ease), box-shadow .25s var(--kk-ease);
	box-shadow: 0 6px 16px rgba(var(--kk-accent-rgb), .28);
}
.kk-pill:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 14px 30px rgba(var(--kk-accent-rgb), .42); }
.kk-pill-ghost {
	background: rgba(255, 255, 255, .85);
	color: var(--kk-accent-dark);
	border: 1px solid var(--kk-line-strong);
	box-shadow: var(--kk-shadow-sm);
}
.kk-pill-ghost:hover { color: var(--kk-accent-dark); background: #fff; }

/* =========================== 9. Editor strip & popular =========================== */
.kk-editor-strip,
.kk-popular {
	padding: clamp(40px, 6vw, 80px) var(--kk-shell-x);
}
.kk-editor-strip .kk-section-head,
.kk-popular .kk-section-head { text-align: center; }
.kk-editor-strip-grid,
.kk-popular-grid {
	max-width: var(--kk-shell-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 28px;
}

/* =========================== 10. Author strip (editorial masthead) =========================== */
.kk-author-strip {
	border-top: 1px solid var(--kk-line);
	border-bottom: 1px solid var(--kk-line);
	padding: clamp(24px, 4vw, 48px) var(--kk-shell-x);
	background: var(--kk-paper);
}
.kk-author-strip-inner {
	max-width: var(--kk-shell-max);
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: clamp(20px, 3vw, 40px);
	flex-wrap: wrap;
}
.kk-author-strip .kk-author-photo {
	flex: 0 0 auto;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--kk-paper-3);
	display: block;
	border: 0;
	transition: transform .35s var(--kk-ease);
}
.kk-author-strip .kk-author-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.kk-author-strip .kk-author-photo-initial {
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, var(--kk-accent), var(--kk-accent-dark));
	color: #fff;
	font-family: var(--kk-serif);
	font-weight: 800;
	font-size: 2rem;
}
.kk-author-strip .kk-author-photo:hover { transform: scale(1.04); }
.kk-author-signature {
	font-family: var(--kk-script);
	font-size: clamp(2rem, 3.4vw, 2.8rem);
	color: var(--kk-accent-dark);
	line-height: 1;
	margin: 0;
}
.kk-author-strip .kk-author-bio {
	flex: 1 1 280px;
	margin: 0;
	font-size: .98rem;
	color: var(--kk-deep);
	opacity: .82;
	max-width: 60ch;
	line-height: 1.55;
}
.kk-author-strip .kk-author-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--kk-accent-dark);
	font-weight: 600;
	font-size: .95rem;
	border-bottom: 2px solid transparent;
	transition: border-color .25s var(--kk-ease);
}
.kk-author-strip .kk-author-link:hover { border-bottom-color: var(--kk-accent-dark); }
@media (max-width: 720px) {
	.kk-author-strip-inner {
		flex-direction: column;
		text-align: center;
		align-items: center;
		gap: 14px;
	}
	/* In column direction `flex-basis: 280px` becomes the item's main-size
	 * (height) which created a 280px void below the signature. Reset to
	 * auto + cap natural width so bio sits tight against signature. */
	.kk-author-strip .kk-author-bio {
		flex: 0 1 auto;
		max-width: 38ch;
		font-size: 1rem;
		opacity: .92;
	}
	.kk-author-strip .kk-author-photo {
		width: 96px;
		height: 96px;
	}
	.kk-author-signature {
		font-size: clamp(2.4rem, 9vw, 3.2rem);
	}
	.kk-author-strip .kk-author-link {
		font-size: 1rem;
	}
}
@media (prefers-reduced-motion: reduce) {
	.kk-author-strip .kk-author-photo { transition: none; }
	.kk-author-strip .kk-author-photo:hover { transform: none; }
}

/* =========================== 11. Trust strip ===========================
 * Audit P0 #5 redesign: relocated out of hero flow and re-shaped as an
 * inline icon-row promise band. Sits between cover-story and trending
 * tag cloud. Four signals; each = 24x24 SVG + one-line label. Wraps on
 * narrow viewports. Static (no motion needed).
 */
.kk-trust-strip {
	background: var(--kk-paper-3);
	padding: clamp(28px, 4vw, 48px) var(--kk-shell-x);
	border-top: 1px solid var(--kk-line);
	border-bottom: 1px solid var(--kk-line);
}
.kk-trust-row {
	max-width: var(--kk-shell-max);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: clamp(24px, 4vw, 48px);
	list-style: none;
	padding: 0;
}
.kk-trust-item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--kk-sans);
	font-size: .95rem;
	color: var(--kk-deep);
}
.kk-trust-icon {
	width: 24px;
	height: 24px;
	color: var(--kk-accent-dark);
	flex-shrink: 0;
}

/* =========================== 12. Pinterest masonry category grid =========================== */
.kk-cat-masonry {
	padding: clamp(60px, 8vw, 100px) var(--kk-shell-x);
}
.kk-cat-masonry-grid {
	max-width: 1320px;
	margin: 0 auto;
	column-count: 2;
	column-gap: 16px;
}
@media (min-width: 720px) {
	.kk-cat-masonry-grid { column-count: 3; }
}
.kk-cat-tile {
	display: block;
	position: relative;
	break-inside: avoid;
	margin-bottom: 16px;
	border-radius: var(--kk-radius-lg);
	overflow: hidden;
	background: var(--kk-deep);
	box-shadow: var(--kk-shadow-md);
	transition: transform .35s var(--kk-ease), box-shadow .35s var(--kk-ease);
	text-decoration: none;
	color: inherit;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
}
.kk-cat-tile:hover {
	transform: scale(1.02);
	box-shadow: var(--kk-shadow-deep);
}
.kk-cat-tile:focus-visible {
	outline: 2px solid var(--kk-highlight);
	outline-offset: 2px;
}
.kk-cat-tile-img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}
.kk-cat-tile-img-empty {
	width: 100%;
	aspect-ratio: 4 / 5;
	background: linear-gradient(135deg, var(--kk-deep) 0%, var(--kk-accent-dark) 100%);
}
/* Varied tile aspect-ratios produce the Pinterest masonry feel. */
.kk-cat-tile:nth-child(3n+1) .kk-cat-tile-img { aspect-ratio: 4 / 5; }
.kk-cat-tile:nth-child(3n+2) .kk-cat-tile-img { aspect-ratio: 3 / 4; }
.kk-cat-tile:nth-child(3n+3) .kk-cat-tile-img { aspect-ratio: 5 / 6; }
.kk-cat-tile:nth-child(6n+4) .kk-cat-tile-img { aspect-ratio: 5 / 7; }
.kk-cat-tile:nth-child(6n+5) .kk-cat-tile-img { aspect-ratio: 2 / 3; }
.kk-cat-tile-overlay {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 20px;
	background: linear-gradient(180deg, transparent 0%, rgba(var(--kk-deep-rgb), .65) 100%);
	color: #fff;
	pointer-events: none;
}
.kk-cat-tile-name {
	font-family: var(--kk-display);
	font-weight: 900;
	font-size: clamp(1.4rem, 2.2vw, 1.9rem);
	line-height: 1.05;
	margin: 0 0 4px;
	color: #fff;
	text-shadow: 0 2px 8px rgba(0, 0, 0, .45);
	letter-spacing: -.01em;
}
.kk-cat-tile-count {
	margin: 0;
	font-size: .88rem;
	color: rgba(255, 255, 255, .9);
	text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
@media (prefers-reduced-motion: reduce) {
	.kk-cat-tile { transition: none; }
	.kk-cat-tile:hover { transform: none; }
}

/* =========================== 13. Newsletter =========================== */
.kk-newsletter,
.kk-newsletter-inline {
	position: relative;
	overflow: hidden;
	color: #fff;
}
.kk-newsletter-inline { padding: clamp(60px, 9vw, 120px) var(--kk-shell-x); }
.kk-newsletter-card {
	position: relative;
	max-width: 760px;
	margin: 0 auto;
	padding: clamp(40px, 6vw, 70px);
	background: linear-gradient(135deg, var(--kk-deep) 0%, var(--kk-accent-dark) 50%, var(--kk-accent) 100%);
	border-radius: var(--kk-radius-lg);
	color: #fff;
	box-shadow: var(--kk-shadow-deep);
	text-align: center;
	overflow: hidden;
	isolation: isolate;
}
.kk-newsletter-card::before {
	content: "";
	position: absolute; inset: 0;
	background:
		radial-gradient(600px 400px at 80% 10%, rgba(var(--kk-highlight-rgb), .25), transparent 60%),
		radial-gradient(500px 400px at 10% 100%, rgba(217, 142, 106, .35), transparent 60%);
	z-index: -1;
}
.kk-newsletter-card h2 { color: #fff; font-size: clamp(1.8rem, 3.8vw, 2.6rem); }
.kk-newsletter-card p { color: rgba(255, 255, 255, .85); }
.kk-newsletter-lead {
	display: inline-block;
	margin-top: 4px !important;
	padding: 8px 18px;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: var(--kk-radius-pill);
	font-size: .94rem;
}
.kk-card-tag {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	background: var(--kk-highlight);
	color: var(--kk-deep);
	border-radius: var(--kk-radius-pill);
	font-size: .82rem;
	font-weight: 700;
	margin-bottom: 16px;
}
.kk-newsletter-card .kk-card-tag { background: rgba(var(--kk-highlight-rgb), .92); }

.kk-nl-form,
.kk-nl-mini {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-width: 520px;
	margin: 24px auto 0;
	position: relative;
}
.kk-nl-form input[type="email"],
.kk-nl-mini input[type="email"] {
	flex: 1;
	min-width: 200px;
	padding: 14px 18px;
	border: 1px solid rgba(255, 255, 255, .25);
	background: rgba(255, 255, 255, .12);
	color: #fff;
	border-radius: var(--kk-radius-pill);
	outline: none;
	transition: border-color .25s var(--kk-ease), background .25s var(--kk-ease);
}
.kk-nl-form input[type="email"]::placeholder,
.kk-nl-mini input[type="email"]::placeholder { color: rgba(255, 255, 255, .55); }
.kk-nl-form input[type="email"]:focus,
.kk-nl-mini input[type="email"]:focus { background: rgba(255, 255, 255, .2); border-color: var(--kk-highlight); }
.kk-nl-form button,
.kk-nl-mini button {
	padding: 14px 24px;
	background: var(--kk-highlight);
	color: var(--kk-deep);
	border: none;
	border-radius: var(--kk-radius-pill);
	font-weight: 700;
	transition: transform .25s var(--kk-ease), box-shadow .25s var(--kk-ease);
}
.kk-nl-form button:hover,
.kk-nl-mini button:hover { box-shadow: 0 14px 30px rgba(var(--kk-highlight-rgb), .45); }
.kk-nl-msg {
	flex-basis: 100%;
	color: rgba(255, 255, 255, .92);
	font-size: .9rem;
	min-height: 1.2em;
	text-align: center;
}

.kk-confetti {
	position: absolute;
	pointer-events: none;
	z-index: 10;
	width: 8px; height: 14px;
	border-radius: var(--kk-radius-sm);
	opacity: 0;
}
.kk-confetti.is-firing { animation: kkConfetti 1.6s var(--kk-ease) forwards; }
@keyframes kkConfetti {
	0% { transform: translate3d(0, 0, 0) rotate(0); opacity: 1; }
	100% { transform: translate3d(var(--kk-cdx, 0), var(--kk-cdy, -200px), 0) rotate(var(--kk-cdr, 540deg)); opacity: 0; }
}

/* =========================== 14. Testimonials =========================== */
.kk-testimonials {
	padding: clamp(60px, 8vw, 100px) var(--kk-shell-x);
}
.kk-testimonials-grid {
	max-width: var(--kk-shell-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
}
.kk-testimonial {
	padding: 32px;
	background: #fff;
	border-radius: var(--kk-radius-lg);
	box-shadow: var(--kk-shadow-md);
	border: 1px solid var(--kk-line);
	transition: transform .35s var(--kk-ease), box-shadow .35s var(--kk-ease);
	position: relative;
	overflow: hidden;
}
.kk-testimonial:hover { transform: translateY(-6px); box-shadow: var(--kk-shadow-lg); }
.kk-testimonial::before {
	content: "\201C";
	position: absolute;
	top: -40px; left: 18px;
	font-family: var(--kk-serif);
	font-size: 8rem;
	color: var(--kk-paper-3);
	line-height: 1;
}
.kk-testimonial blockquote {
	margin: 0 0 16px;
	font-size: 1.05rem;
	color: var(--kk-ink);
	font-style: italic;
	position: relative;
	z-index: 1;
}
.kk-testimonial cite {
	color: var(--kk-accent-dark);
	font-weight: 600;
	font-style: normal;
}

/* =========================== 15. Pinterest embed =========================== */
.kk-pinterest-embed {
	max-width: var(--kk-shell-max);
	margin: 0 auto;
	padding: clamp(40px, 6vw, 80px) var(--kk-shell-x);
	text-align: center;
}

/* =========================== 16. Sister network =========================== */
.kk-sister-network {
	padding: clamp(60px, 8vw, 100px) var(--kk-shell-x);
	background: linear-gradient(180deg, var(--kk-paper) 0%, var(--kk-paper-3) 100%);
}
.kk-sister-grid {
	max-width: var(--kk-shell-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px;
}
.kk-sister-card {
	display: block;
	padding: 28px;
	background: #fff;
	border-radius: var(--kk-radius-md);
	border: 1px solid var(--kk-line);
	color: var(--kk-deep);
	transition: transform .35s var(--kk-ease), box-shadow .35s var(--kk-ease), border-color .35s var(--kk-ease);
}
.kk-sister-card:hover {
	color: var(--kk-deep);
	transform: translateY(-6px);
	box-shadow: var(--kk-shadow-md);
	border-color: var(--kk-line-strong);
}
.kk-sister-card h3 { font-size: 1.2rem; margin: 0 0 6px; }
.kk-sister-card p { color: var(--kk-ink-soft); font-size: .92rem; margin: 0; }

/* =========================== 17. Versprechen =========================== */
.kk-versprechen {
	padding: clamp(60px, 8vw, 100px) var(--kk-shell-x);
}
.kk-versprechen-list {
	max-width: 920px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 24px;
	list-style: none;
	padding: 0;
}
.kk-versprechen-list li {
	padding: 28px;
	background: var(--kk-paper-3);
	border-radius: var(--kk-radius-md);
	border-left: 2px solid var(--kk-line-strong);
	transition: transform .35s var(--kk-ease);
}
.kk-versprechen-list li:hover { transform: translateY(-4px); }
.kk-versprechen-list strong { display: block; color: var(--kk-deep); margin-bottom: 6px; }

/* =========================== 18. FAQ =========================== */
.kk-faq {
	padding: clamp(60px, 8vw, 100px) var(--kk-shell-x);
}
.kk-faq-list {
	max-width: 760px;
	margin: 0 auto;
}
/* v4.2 FAQ: native <details>/<summary>, single hairline between items
 * (no double-border per impeccable lists rule), custom plus-to-x rotation,
 * smooth grid-row body open via interpolate-size. */
.kk-faq-item {
	border-bottom: 1px solid var(--kk-line);
	padding: 22px 0;
}
.kk-faq-item:last-child { border-bottom: none; }
.kk-faq-item summary {
	font-family: var(--kk-display);
	font-size: clamp(1.1rem, 2.2vw, 1.32rem);
	letter-spacing: -.015em;
	color: var(--kk-deep);
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 18px;
	font-weight: 700;
	line-height: 1.3;
	transition: color .2s var(--kk-ease);
}
.kk-faq-item summary:hover { color: var(--kk-accent-dark); }
.kk-faq-item summary::-webkit-details-marker { display: none; }
.kk-faq-item summary::after {
	content: "";
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	background:
		linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat,
		linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat;
	color: var(--kk-accent);
	border: 1px solid var(--kk-line-strong);
	border-radius: 50%;
	transition: transform .35s var(--kk-ease), color .25s var(--kk-ease), border-color .25s var(--kk-ease);
	margin-top: 2px;
}
.kk-faq-item[open] summary::after {
	transform: rotate(45deg);
	color: var(--kk-accent-dark);
	border-color: var(--kk-accent);
}
.kk-faq-item-body {
	padding-top: 14px;
	color: var(--kk-ink-soft);
	line-height: 1.7;
	max-width: 68ch;
}
.kk-faq-item-body > :last-child { margin-bottom: 0; }
/* Smooth open via interpolate-size if supported; fallback is the default
 * instant snap which still looks fine. */
@supports (interpolate-size: allow-keywords) {
	.kk-faq-item {
		interpolate-size: allow-keywords;
	}
	.kk-faq-item-body {
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows .35s var(--kk-ease);
		padding-top: 0;
		overflow: hidden;
	}
	.kk-faq-item[open] .kk-faq-item-body {
		grid-template-rows: 1fr;
		padding-top: 14px;
	}
	.kk-faq-item-body > * { min-height: 0; }
}

/* =========================== 19. Anchor pitch =========================== */
.kk-anchor-pitch {
	padding: clamp(60px, 8vw, 100px) var(--kk-shell-x);
	text-align: center;
}
.kk-anchor-pitch-card {
	max-width: 720px;
	margin: 0 auto;
	padding: clamp(36px, 6vw, 60px);
	background: var(--kk-paper-3);
	border: 1px solid var(--kk-line);
	border-radius: var(--kk-radius-lg);
}

/* =========================== 20. Cards =========================== */
.kk-card-grid {
	max-width: var(--kk-shell-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 28px;
}
.kk-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: var(--kk-radius-lg);
	overflow: hidden;
	border: 1px solid var(--kk-line);
	box-shadow: var(--kk-shadow-sm);
	transition: transform .35s var(--kk-ease), box-shadow .35s var(--kk-ease), border-color .35s var(--kk-ease);
	position: relative;
}
.kk-card:hover {
	transform: translateY(-8px);
	box-shadow: var(--kk-shadow-deep);
	border-color: var(--kk-line-strong);
}
.kk-card-media {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--kk-paper-3);
}
.kk-card-media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .8s var(--kk-ease);
}
.kk-card:hover .kk-card-media img { transform: scale(1.06); }
.kk-card-body { padding: 20px 22px 26px; display: flex; flex-direction: column; gap: 10px; }
.kk-card-body h3 {
	font-size: 1.2rem;
	margin: 0 0 6px;
	line-height: 1.2;
	color: var(--kk-deep);
}
.kk-card-body h3 a { color: inherit; }
.kk-card-body h3 a:hover { color: var(--kk-accent-dark); }
.kk-card-meta {
	display: flex;
	gap: 8px;
	align-items: center;
	font-size: .82rem;
	color: var(--kk-ink-mute);
}
.kk-card-cat {
	display: inline-block;
	padding: 2px 10px;
	background: var(--kk-paper-3);
	color: var(--kk-accent-dark);
	border-radius: var(--kk-radius-pill);
	font-weight: 600;
	font-size: .78rem;
}

/* =========================== 21. Single article =========================== */
.kk-single-wrap {
	max-width: 1240px;
	margin: 0 auto;
	padding: 40px var(--kk-shell-x) 80px;
}
.kk-article-header {
	max-width: 800px;
	margin: 0 auto 48px;
	text-align: center;
}
.kk-article-header .entry-title {
	font-size: clamp(2rem, 5.4vw, 3.6rem);
	margin-bottom: 18px;
}
.kk-post-meta-top {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	align-items: center;
	font-size: .9rem;
	color: var(--kk-ink-soft);
}
.kk-meta-cat a { color: var(--kk-accent-dark); font-weight: 600; }
.kk-meta-dot { opacity: .5; }
.kk-bookmark {
	background: transparent;
	border: 1px solid var(--kk-line-strong);
	color: var(--kk-deep);
	padding: 4px 12px;
	border-radius: var(--kk-radius-pill);
	font-size: .82rem;
}
.kk-article-hero {
	max-width: 1100px;
	margin: 40px auto 0;
	border-radius: var(--kk-radius-lg);
	overflow: hidden;
	box-shadow: var(--kk-shadow-lg);
}
.kk-article-hero-img { width: 100%; height: auto; display: block; }

.kk-quick-answer {
	max-width: 760px;
	margin: 0 auto 28px;
	padding: 24px 28px;
	background: var(--kk-paper-3);
	border-radius: var(--kk-radius-md);
	border-left: 2px solid var(--kk-line-strong);
}
.kk-quick-answer p { margin: 6px 0 0; color: var(--kk-deep); font-size: 1.05rem; }

/* v4.2 TOC: inline card on mobile, sticky 240px sidebar on desktop with a
 * vertical reading-progress rail (dot + thin connecting line per item).
 * JS scroll-spy already toggles .is-active. */
.kk-toc {
	max-width: 760px;
	margin: 0 auto 36px;
	padding: 24px 28px;
	background: #fff;
	border: 1px solid var(--kk-line);
	border-radius: var(--kk-radius-lg);
	box-shadow: 0 4px 14px rgba(var(--kk-deep-rgb), .04);
}
.kk-toc-title {
	font-family: var(--kk-display);
	font-weight: 700;
	font-size: .82rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--kk-ink-mute);
	margin-bottom: 14px;
}
.kk-toc-list {
	list-style: none;
	padding: 0;
	margin: 0;
	counter-reset: kk-toc;
	position: relative;
}
.kk-toc-list li {
	counter-increment: kk-toc;
	position: relative;
	padding: 6px 0 6px 22px;
	line-height: 1.4;
}
/* Reading-progress rail: single thin line down the gutter, dot per item. */
.kk-toc-list::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 10px;
	bottom: 10px;
	width: 1px;
	background: var(--kk-line);
}
.kk-toc-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 14px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #fff;
	border: 1.5px solid var(--kk-line-strong);
	transition: background .25s var(--kk-ease), border-color .25s var(--kk-ease), transform .25s var(--kk-ease);
}
.kk-toc-list li:has(a.is-active)::before,
.kk-toc-list li.is-active::before {
	background: var(--kk-accent);
	border-color: var(--kk-accent);
	transform: scale(1.15);
}
.kk-toc-list a {
	color: var(--kk-ink-soft);
	font-size: .95rem;
	transition: color .2s var(--kk-ease), transform .25s var(--kk-ease);
	display: inline-block;
}
.kk-toc-list a:hover,
.kk-toc-list a.is-active {
	color: var(--kk-accent-dark);
	transform: translateX(2px);
}
.kk-toc-list a.is-active { font-weight: 600; color: var(--kk-deep); }

/* Desktop only: promote TOC to sticky 240px sidebar floated right of the
 * reading column. Single-post template grid handled via floats so existing
 * .entry-content / .kk-quick-answer flow stays intact. */
@media (min-width: 1100px) {
	.kk-toc {
		position: sticky;
		top: 100px;
		float: right;
		width: 240px;
		max-width: 240px;
		margin: 0 0 24px 32px;
		padding: 20px 22px;
		clear: right;
	}
	.kk-toc-list a { font-size: .9rem; }
}

.entry-content {
	max-width: 720px;
	margin: 0 auto;
	font-size: 1.08rem;
	line-height: 1.78;
	color: var(--kk-ink);
}
.entry-content > * { margin-bottom: 1.2em; }
/* v4.2: H1 already in article header; tighten H2/H3 rhythm so the reading
 * column doesn't get visually punctured by oversized subheads. Body p/li
 * inherit the global 75ch cap from section 2 (Typography). */
.entry-content h2 {
	margin-top: 2.2em;
	font-size: clamp(1.55rem, 3.4vw, 2.05rem);
	letter-spacing: -.02em;
	max-width: 28ch;
}
.entry-content h3 {
	margin-top: 1.7em;
	font-size: clamp(1.2rem, 2.2vw, 1.45rem);
	max-width: 32ch;
}
.entry-content img { border-radius: var(--kk-radius-md); margin: 1.6em auto; }
/* v4.4.1: the old "90vw full-bleed" breakout maths was inverted on phones
 * ((720px − 90vw)/2 is POSITIVE below 720px) and pushed every affiliate
 * card ~180px out of the right viewport edge — the source of the
 * horizontal wiggle. Mobile cards now simply fill the column and stack. */
@media (max-width: 720px) {
	.entry-content .kk-aff-card {
		grid-template-columns: 1fr;
		width: 100%;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
	.entry-content .kk-aff-card .kk-aff-img-link { max-width: 100%; }
}
.entry-content blockquote {
	border-left: 2px solid var(--kk-line-strong);
	background: var(--kk-paper-3);
	padding: 20px 24px;
	border-radius: 0 var(--kk-radius-md) var(--kk-radius-md) 0;
	margin: 1.6em 0;
	font-family: var(--kk-serif);
	font-style: italic;
	font-size: 1.18rem;
}
.entry-content iframe,
.entry-content embed,
.entry-content video { max-width: 100%; }
.entry-content a { font-weight: 600; border-bottom: 1px dashed var(--kk-line-strong); }
.entry-content a:hover { border-bottom-style: solid; }
.entry-content ul, .entry-content ol { padding-left: 1.4em; }
.entry-content li { margin-bottom: .5em; }

.kk-img-wrap { position: relative; display: block; }
.kk-img-pin {
	position: absolute;
	top: 14px; left: 14px;
	padding: 6px 12px;
	background: rgba(255, 255, 255, .9);
	color: var(--kk-accent-dark);
	border-radius: var(--kk-radius-pill);
	font-size: .82rem;
	font-weight: 600;
	opacity: 0;
	transition: opacity .25s var(--kk-ease);
}
.kk-img-wrap:hover .kk-img-pin { opacity: 1; }

.kk-aff-disclosure {
	max-width: 720px;
	margin: 0 auto 24px;
	padding: 14px 18px;
	background: var(--kk-paper-3);
	border-radius: var(--kk-radius-sm);
	font-size: .88rem;
	color: var(--kk-ink-soft);
	border: 1px solid var(--kk-line);
}

.kk-tags {
	max-width: 720px;
	margin: 28px auto;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	font-size: .88rem;
}
.kk-tags span { color: var(--kk-ink-soft); margin-right: 4px; }
.kk-tags a {
	display: inline-block;
	padding: 4px 12px;
	background: var(--kk-paper-3);
	color: var(--kk-accent-dark);
	border-radius: var(--kk-radius-pill);
	font-size: .82rem;
}

.kk-author-card {
	max-width: 760px;
	margin: 48px auto;
	padding: 32px;
	background: #fff;
	border-radius: var(--kk-radius-lg);
	border: 1px solid var(--kk-line);
	box-shadow: var(--kk-shadow-md);
	display: grid;
	grid-template-columns: 88px 1fr;
	gap: 24px;
	align-items: center;
}
.kk-author-photo {
	width: 88px; height: 88px;
	border-radius: 50%;
	overflow: hidden;
	border: 3px solid var(--kk-accent);
}
.kk-author-photo img { width: 100%; height: 100%; object-fit: cover; }
.kk-author-initials {
	width: 100%; height: 100%;
	display: grid; place-items: center;
	background: linear-gradient(135deg, var(--kk-accent), var(--kk-accent-dark));
	color: #fff;
	font-family: var(--kk-serif);
	font-size: 2.4rem;
	font-weight: 800;
}
.kk-author-body h3 { margin: 4px 0 6px; }
.kk-author-body p { margin: 0 0 10px; color: var(--kk-ink-soft); font-size: .96rem; }
.kk-author-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kk-author-link { color: var(--kk-accent-dark); font-weight: 600; }
.kk-author-icon {
	width: 32px; height: 32px;
	display: inline-grid; place-items: center;
	background: var(--kk-paper-3);
	color: var(--kk-accent-dark);
	border-radius: 50%;
}
@media (max-width: 600px) {
	.kk-author-card { grid-template-columns: 1fr; text-align: center; }
	.kk-author-photo { margin: 0 auto; }
	.kk-author-actions { justify-content: center; }
}

.kk-prevnext {
	max-width: 1100px;
	margin: 48px auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.kk-pn {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 16px;
	padding: 16px;
	background: #fff;
	border-radius: var(--kk-radius-md);
	border: 1px solid var(--kk-line);
	transition: transform .25s var(--kk-ease), box-shadow .25s var(--kk-ease);
	align-items: center;
	color: var(--kk-deep);
}
.kk-pn:hover { transform: translateY(-4px); box-shadow: var(--kk-shadow-md); color: var(--kk-deep); }
.kk-pn-next { grid-template-columns: 1fr 80px; text-align: right; }
.kk-pn-thumb {
	width: 80px; height: 80px;
	border-radius: var(--kk-radius-sm);
	background-size: cover;
	background-position: center;
}
.kk-pn-body span { display: block; font-size: .82rem; color: var(--kk-ink-mute); margin-bottom: 4px; }
.kk-pn-body b { font-family: var(--kk-serif); font-weight: 700; font-size: 1rem; color: var(--kk-deep); }
@media (max-width: 720px) {
	.kk-prevnext { grid-template-columns: 1fr; }
	.kk-pn-next { grid-template-columns: 80px 1fr; text-align: left; }
	.kk-pn-next .kk-pn-thumb { order: -1; }
}

.kk-related {
	max-width: var(--kk-shell-max);
	margin: 60px auto;
}
.kk-related .kk-section-title {
	text-align: center;
	margin-bottom: 36px;
	font-size: clamp(1.5rem, 3vw, 2.2rem);
}

/* v4.2 share-rail: vertical icon stack, 60px from left edge, hidden under
 * 1100px so it never overlaps the TOC sidebar or the reading column. */
.kk-share-rail {
	position: fixed;
	left: 60px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 12px;
	z-index: 50;
}
.kk-share-rail a,
.kk-share-copy {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	background: #fff;
	border: 1px solid var(--kk-line);
	border-radius: 50%;
	color: var(--kk-deep);
	box-shadow: var(--kk-shadow-sm);
	cursor: pointer;
	transition: transform .25s var(--kk-ease), color .25s var(--kk-ease), box-shadow .25s var(--kk-ease), background .25s var(--kk-ease);
}
.kk-share-rail a:hover,
.kk-share-copy:hover {
	transform: translateY(-3px);
	color: var(--kk-accent-dark);
	box-shadow: var(--kk-shadow-md);
	background: var(--kk-paper);
}
.kk-share-rail a:first-child:hover {
	background: #e60023;
	color: #fff;
	border-color: #e60023;
}
@media (max-width: 1100px) { .kk-share-rail { display: none; } }

.kk-mobile-pin {
	position: fixed;
	bottom: 22px; right: 22px;
	width: 52px; height: 52px;
	border-radius: 50%;
	display: none;
	place-items: center;
	background: var(--kk-accent);
	color: #fff;
	font-size: 1.4rem;
	box-shadow: var(--kk-shadow-md);
	z-index: 90;
}
@media (max-width: 720px) {
	.kk-single-active .kk-mobile-pin { display: grid; }
}

.kk-breadcrumb {
	max-width: 1240px;
	margin: 0 auto 24px;
	font-size: .88rem;
	color: var(--kk-ink-mute);
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}
.kk-breadcrumb a { color: var(--kk-accent-dark); }
.kk-bc-sep { color: var(--kk-ink-mute); }
.kk-bc-current { color: var(--kk-deep); font-weight: 500; }

/* =========================== 22. Squiggle =========================== */
.kk-divider-squiggle {
	max-width: 320px;
	margin: clamp(40px, 6vw, 80px) auto;
	color: var(--kk-accent);
	display: block;
	height: 28px;
}
.kk-divider-squiggle svg {
	width: 100%; height: 28px;
	display: block;
}
.kk-divider-squiggle svg path {
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
	animation: kkSquiggle 2.4s var(--kk-ease) forwards;
	animation-delay: .8s;
}
@keyframes kkSquiggle { to { stroke-dashoffset: 0; } }

/* =========================== 23. Footer =========================== */
.kk-site-footer {
	position: relative;
	background: linear-gradient(180deg, var(--kk-deep) 0%, #0d0524 100%);
	color: rgba(255, 255, 255, .85);
	padding: clamp(60px, 8vw, 120px) var(--kk-shell-x) 40px;
	margin-top: 60px;
	overflow: hidden;
	isolation: isolate;
}
.kk-site-footer::before {
	content: "";
	position: absolute; inset: 0;
	background:
		radial-gradient(900px 600px at 18% 0%, rgba(var(--kk-accent-rgb), .28), transparent 60%),
		radial-gradient(700px 500px at 85% 100%, rgba(217, 142, 106, .18), transparent 60%);
	z-index: -1;
}
.kk-site-footer h2, .kk-site-footer h3, .kk-site-footer h4, .kk-site-footer p { color: #fff; }
.kk-site-footer a { color: rgba(255, 255, 255, .8); }
.kk-site-footer a:hover { color: var(--kk-highlight); }

.kk-footer-inner {
	max-width: var(--kk-shell-max);
	margin: 0 auto;
	position: relative;
}
.kk-footer-sparkle {
	position: absolute;
	color: rgba(var(--kk-highlight-rgb), .35);
	pointer-events: none;
}
.kk-anim-float { animation: kkFloat 6s ease-in-out infinite; }

.kk-footer-cta {
	text-align: center;
	margin-bottom: 64px;
	max-width: 720px;
	margin-inline: auto;
}
.kk-footer-cta .kk-script { color: var(--kk-highlight); }
.kk-footer-cta h2 { font-size: clamp(1.8rem, 3.8vw, 2.8rem); margin: 12px 0 16px; }
.kk-footer-cta p { color: rgba(255, 255, 255, .78); margin-bottom: 28px; }

.kk-footer-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 40px;
	padding: 48px 0;
	border-top: 1px solid rgba(255, 255, 255, .12);
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.kk-footer-col h4 {
	font-family: var(--kk-sans);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--kk-highlight);
	margin-bottom: 18px;
}
.kk-footer-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.kk-footer-socials { display: flex; gap: 10px; margin-bottom: 20px; }
.kk-footer-socials a {
	width: 38px; height: 38px;
	display: grid; place-items: center;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 50%;
	transition: background .25s var(--kk-ease), transform .25s var(--kk-ease);
}
.kk-footer-socials a:hover { background: var(--kk-accent); transform: translateY(-3px); color: #fff; }

.kk-footer-network {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: center;
	padding: 28px 0;
	font-size: .88rem;
	color: rgba(255, 255, 255, .6);
}
.kk-footer-network-label { font-weight: 600; color: rgba(255, 255, 255, .7); }
.kk-footer-network a { padding: 4px 12px; border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--kk-radius-pill); }
.kk-footer-network a:hover { background: rgba(var(--kk-highlight-rgb), .1); border-color: var(--kk-highlight); color: var(--kk-highlight); }

.kk-footer-disclosure {
	max-width: 760px;
	margin: 28px auto 0;
	font-size: .82rem;
	color: rgba(255, 255, 255, .5);
	text-align: center;
}
.kk-footer-signature {
	text-align: center;
	margin: 36px 0 24px;
}
.kk-footer-signature .kk-script { color: var(--kk-highlight); font-size: 2rem; }

.kk-footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, .08);
	font-size: .84rem;
	color: rgba(255, 255, 255, .5);
	flex-wrap: wrap;
	gap: 12px;
}
.kk-footer-nav { list-style: none; padding: 0; margin: 0; display: flex; gap: 16px; }
.kk-footer-nav a { font-size: .84rem; }

/* =========================== 24. News bar =========================== */
.kk-news-bar {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translate(-50%, 200%);
	width: min(680px, 92vw);
	background: rgba(var(--kk-deep-rgb), .96);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	color: #fff;
	border-radius: var(--kk-radius-lg);
	box-shadow: var(--kk-shadow-deep);
	padding: 18px 24px;
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 14px;
	align-items: center;
	transition: transform .55s var(--kk-ease), visibility 0s .55s;
	z-index: 900;
	visibility: hidden;
	pointer-events: none;
}
.kk-news-bar.is-visible { transform: translate(-50%, 0); visibility: visible; pointer-events: auto; transition: transform .55s var(--kk-ease); }
.kk-news-bar-text strong { display: block; font-family: var(--kk-serif); font-size: 1.1rem; color: #fff; margin-bottom: 4px; }
.kk-news-bar-text { font-size: .88rem; color: rgba(255, 255, 255, .7); }
.kk-news-bar .kk-nl-mini { margin: 0; max-width: 320px; flex-wrap: nowrap; }
.kk-news-bar-close {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .2);
	color: #fff;
	border-radius: 50%;
	width: 32px; height: 32px;
	font-size: 1.2rem;
	line-height: 1;
}
@media (max-width: 720px) {
	.kk-news-bar { grid-template-columns: 1fr; padding: 16px 18px; bottom: 12px; }
	.kk-news-bar .kk-nl-mini { max-width: 100%; }
	.kk-news-bar-close { position: absolute; top: 8px; right: 8px; }
}

/* =========================== 25. WP / blocks / a11y =========================== */
.alignwide { max-width: 1100px; margin-inline: auto; }
.alignfull { max-width: 100%; }
.wp-block-image img { border-radius: var(--kk-radius-md); }
.wp-block-pullquote, .wp-block-quote {
	border-left: 2px solid var(--kk-line-strong);
	background: var(--kk-paper-3);
	padding: 20px 28px;
	border-radius: 0 var(--kk-radius-md) var(--kk-radius-md) 0;
	font-family: var(--kk-serif);
	font-style: italic;
}

.search-form { display: flex; gap: 8px; }
.search-form .search-field {
	padding: 12px 18px;
	border: 1px solid var(--kk-line);
	border-radius: var(--kk-radius-pill);
	background: #fff;
	flex: 1;
}
.search-form .search-submit {
	padding: 12px 22px;
	border: none;
	background: var(--kk-accent);
	color: #fff;
	border-radius: var(--kk-radius-pill);
	font-weight: 600;
}

.kk-archive-wrap,
.kk-category-wrap {
	max-width: var(--kk-shell-max);
	margin: 0 auto;
	padding: 40px var(--kk-shell-x) 80px;
}
.kk-archive-hero {
	text-align: center;
	margin-bottom: 48px;
}
.kk-archive-title { font-size: clamp(2rem, 5vw, 3.2rem); }
.kk-archive-meta { color: var(--kk-ink-mute); font-size: .94rem; }
.kk-archive-grid { margin-top: 40px; }

/* Category hero — full-bleed gradient banner (v3.3) */
.kk-category-hero {
	position: relative;
	overflow: hidden;
	border-radius: var(--kk-radius-lg);
	padding: clamp(48px, 7vw, 96px) clamp(24px, 5vw, 64px);
	margin: 0 0 clamp(32px, 5vw, 48px);
	background:
		linear-gradient(135deg, rgba(var(--kk-deep-rgb), .94), rgba(var(--kk-accent-rgb), .82)),
		radial-gradient(900px 500px at 80% 0%, rgba(var(--kk-highlight-rgb), .14), transparent 60%);
	background-size: cover;
	background-position: center;
	box-shadow: 0 22px 60px rgba(var(--kk-deep-rgb), .22);
	color: #fff;
	isolation: isolate;
	transform: translateZ(0);
}
.kk-category-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(600px 400px at 12% 80%, rgba(217, 142, 106, .22), transparent 60%),
		linear-gradient(135deg, rgba(var(--kk-deep-rgb), .18), rgba(var(--kk-accent-rgb), .25));
	mix-blend-mode: multiply;
	pointer-events: none;
	z-index: 0;
}
.kk-category-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle at 15% 22%, rgba(255, 255, 255, .35) 0, transparent 1.5px);
	background-size: 36px 36px;
	opacity: .25;
	pointer-events: none;
	z-index: 0;
}
.kk-category-hero-inner {
	position: relative;
	z-index: 1;
	max-width: 760px;
}
.kk-category-kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--kk-sans);
	font-size: .78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .14em;
	padding: 6px 14px;
	background: rgba(255, 255, 255, .15);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: var(--kk-radius-pill);
	color: var(--kk-highlight);
	margin-bottom: 18px;
}
.kk-category-kicker::before {
	content: "";
	display: inline-block;
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--kk-highlight);
	box-shadow: 0 0 12px var(--kk-highlight);
}
.kk-category-title {
	font-family: var(--kk-serif);
	font-size: clamp(2.4rem, 6vw, 4rem);
	font-weight: 800;
	line-height: 1.05;
	margin: 0 0 16px;
	color: #fff;
	letter-spacing: -.02em;
	text-shadow: 0 6px 24px rgba(0, 0, 0, .22);
	text-wrap: balance;
}
.kk-category-desc {
	font-size: clamp(1rem, 1.4vw, 1.12rem);
	line-height: 1.55;
	color: rgba(255, 255, 255, .92);
	margin: 0 0 14px;
	max-width: 60ch;
}
.kk-category-count {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: .94rem;
	font-weight: 500;
	color: rgba(255, 255, 255, .9);
	margin: 0;
}
.kk-category-count::before {
	content: "";
	display: inline-block;
	width: 28px;
	height: 2px;
	background: var(--kk-highlight);
	border-radius: var(--kk-radius-sm);
}

/* Filter row — sub-category chips */
.kk-filter-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 clamp(28px, 4vw, 40px);
	padding: 4px 0;
}
.kk-filter-chip {
	display: inline-flex;
	align-items: center;
	padding: 10px 18px;
	min-height: 40px;
	background: #fff;
	border: 1px solid var(--kk-line);
	border-radius: var(--kk-radius-pill);
	color: var(--kk-deep);
	font-size: .9rem;
	font-weight: 500;
	white-space: nowrap;
	transition: background .25s var(--kk-ease), border-color .25s var(--kk-ease), color .25s var(--kk-ease), transform .25s var(--kk-ease), box-shadow .25s var(--kk-ease);
}
.kk-filter-chip:hover {
	background: rgba(var(--kk-accent-rgb), .08);
	border-color: var(--kk-line-strong);
	color: var(--kk-accent-dark);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(var(--kk-accent-rgb), .15);
}
.kk-filter-chip.is-active {
	background: linear-gradient(135deg, var(--kk-accent) 0%, var(--kk-accent-dark) 100%);
	color: #fff;
	border-color: transparent;
	box-shadow: 0 10px 24px rgba(var(--kk-accent-rgb), .35);
}
.kk-filter-chip.is-active:hover { color: #fff; transform: translateY(-2px); }

@media (max-width: 720px) {
	.kk-category-hero { padding: 38px 22px; border-radius: var(--kk-radius-lg); }
	.kk-category-title { font-size: clamp(1.8rem, 8vw, 2.6rem); }
	.kk-filter-row { gap: 6px; }
	.kk-filter-chip { padding: 9px 14px; font-size: .85rem; min-height: 38px; }
}
.kk-archive-empty {
	max-width: 520px;
	margin: 80px auto;
	text-align: center;
}
.kk-pagination {
	margin: 60px auto 0;
	text-align: center;
}
.kk-pagination .page-numbers {
	display: inline-block;
	padding: 8px 14px;
	margin: 0 4px;
	border-radius: var(--kk-radius-sm);
	color: var(--kk-deep);
	border: 1px solid var(--kk-line);
	background: #fff;
	transition: all .25s var(--kk-ease);
}
.kk-pagination .page-numbers.current,
.kk-pagination .page-numbers:hover { background: var(--kk-accent); color: #fff; border-color: var(--kk-accent); }

.kk-pagelinks { margin: 24px 0; }

/* v4.2 affiliate card editorial polish. Base shell (.kk-aff-card) sets
 * the soft purple shadow, large radius, generous padding, font roles.
 * Per-style modifiers (.kk-aff-card-s1 ... s7) only change layout/order;
 * all sub-element styling (.kk-aff-title / .kk-aff-price / .kk-aff-cta /
 * .kk-aff-img) inherits from the base rules below so a writer change to
 * the card emitter never desyncs visuals. */
.kk-aff-card {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: clamp(16px, 2.4vw, 28px);
	align-items: start;
	padding: clamp(20px, 3vw, 32px);
	background: #fff;
	border: 1px solid var(--kk-line);
	border-radius: var(--kk-radius-lg);
	margin: 28px 0;
	box-shadow: 0 12px 32px rgba(var(--kk-deep-rgb), .10);
	position: relative;
	transition: transform .35s var(--kk-ease), box-shadow .35s var(--kk-ease);
}
.kk-aff-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 20px 48px rgba(var(--kk-deep-rgb), .14);
}
.kk-aff-card .kk-aff-img-link {
	display: block;
	overflow: hidden;
	border-radius: var(--kk-radius-md);
	background: var(--kk-paper-3);
	aspect-ratio: 4 / 3;
}
.kk-aff-card .kk-aff-img,
.kk-aff-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--kk-radius-md);
	transition: transform .6s var(--kk-ease);
}
.kk-aff-card:hover .kk-aff-img { transform: scale(1.04); }
.kk-aff-card .kk-aff-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}
.kk-aff-card .kk-aff-badge {
	position: absolute;
	top: 14px;
	right: 14px;
	padding: 3px 10px;
	background: rgba(var(--kk-deep-rgb), .82);
	color: #fff;
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	border-radius: var(--kk-radius-pill);
	z-index: 2;
}
.kk-aff-card .kk-aff-top-badge {
	display: inline-block;
	align-self: flex-start;
	padding: 4px 12px;
	background: var(--kk-highlight);
	color: var(--kk-deep);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	border-radius: var(--kk-radius-pill);
	margin-bottom: 2px;
}
.kk-aff-card .kk-aff-title {
	font-family: var(--kk-display);
	font-weight: 700;
	font-size: clamp(1.1rem, 2.2vw, 1.3rem);
	line-height: 1.25;
	letter-spacing: -.015em;
	margin: 0;
	color: var(--kk-deep);
	max-width: none;
}
.kk-aff-card .kk-aff-rating {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .92rem;
	color: var(--kk-ink-soft);
}
.kk-aff-card .kk-aff-stars {
	position: relative;
	display: inline-block;
	font-size: 1rem;
	line-height: 1;
	letter-spacing: 2px;
	background:
		linear-gradient(90deg, #ffb800 var(--r, 0%), rgba(var(--kk-deep-rgb), .14) var(--r, 0%));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.kk-aff-card .kk-aff-rating-value { font-weight: 700; color: var(--kk-deep); }
.kk-aff-card .kk-aff-reviews { color: var(--kk-ink-mute); font-size: .85rem; }
.kk-aff-card .kk-aff-price-row {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 2px;
}
.kk-aff-card .kk-aff-price {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	padding: 6px 14px;
	background: var(--kk-deep);
	color: #fff;
	font-family: var(--kk-mono);
	font-size: 1.06rem;
	font-weight: 700;
	letter-spacing: -.01em;
	border-radius: var(--kk-radius-sm);
}
.kk-aff-card .kk-aff-strike {
	font-family: var(--kk-mono);
	color: var(--kk-ink-mute);
	font-size: .92rem;
}
.kk-aff-card .kk-aff-desc {
	color: var(--kk-ink-soft);
	font-size: .98rem;
	line-height: 1.6;
	margin: 4px 0 6px;
	max-width: none;
}
.kk-aff-card .kk-aff-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 8px;
	padding: 12px 22px;
	background: linear-gradient(135deg, var(--kk-accent) 0%, var(--kk-accent-dark) 100%);
	color: #fff;
	font-family: var(--kk-display);
	font-weight: 700;
	font-size: .98rem;
	letter-spacing: -.005em;
	border-radius: var(--kk-radius-pill);
	box-shadow: 0 8px 20px rgba(138, 58, 33, .28);
	border: none;
	cursor: pointer;
	align-self: flex-start;
	transition: transform .25s var(--kk-ease), box-shadow .25s var(--kk-ease);
}
.kk-aff-card .kk-aff-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(138, 58, 33, .36);
	color: #fff;
}
.kk-aff-card .kk-aff-cta:active { transform: translateY(0); }
.kk-aff-card .kk-aff-disclose {
	display: block;
	margin-top: 10px;
	font-size: .74rem;
	color: var(--kk-ink-mute);
	line-height: 1.4;
	font-style: italic;
}

@media (max-width: 600px) {
	.kk-aff-card {
		grid-template-columns: 1fr;
		text-align: left;
	}
	.kk-aff-card .kk-aff-img-link { aspect-ratio: 16 / 10; }
	.kk-aff-card .kk-aff-cta {
		width: 100%;
		align-self: stretch;
	}
}

/* S1 Classic magazine: image left bleeds to card edges, title right. */
.kk-aff-card-s1 .kk-aff-img-link {
	margin: calc(clamp(20px, 3vw, 32px) * -1) 0 calc(clamp(20px, 3vw, 32px) * -1) calc(clamp(20px, 3vw, 32px) * -1);
	border-radius: var(--kk-radius-lg) 0 0 var(--kk-radius-lg);
	aspect-ratio: 3 / 4;
	height: 100%;
}
.kk-aff-card-s1 .kk-aff-img-link img,
.kk-aff-card-s1 .kk-aff-img {
	border-radius: var(--kk-radius-lg) 0 0 var(--kk-radius-lg);
}
@media (max-width: 600px) {
	.kk-aff-card-s1 .kk-aff-img-link {
		margin: calc(clamp(20px, 3vw, 32px) * -1) calc(clamp(20px, 3vw, 32px) * -1) 12px;
		border-radius: var(--kk-radius-lg) var(--kk-radius-lg) 0 0;
		aspect-ratio: 16 / 10;
	}
	.kk-aff-card-s1 .kk-aff-img-link img,
	.kk-aff-card-s1 .kk-aff-img {
		border-radius: var(--kk-radius-lg) var(--kk-radius-lg) 0 0;
	}
}

/* S2 Mini catalog: small square thumbnail, dense body. */
.kk-aff-card-s2 {
	grid-template-columns: 120px 1fr;
	gap: 18px;
	padding: clamp(16px, 2.4vw, 22px);
}
.kk-aff-card-s2 .kk-aff-img-link { aspect-ratio: 1; }
.kk-aff-card-s2 .kk-aff-title { font-size: 1.05rem; }

/* S3 Story card: image on top, body stacks below. */
.kk-aff-card-s3 {
	grid-template-columns: 1fr;
}
.kk-aff-card-s3 .kk-aff-img-link { aspect-ratio: 16 / 9; }

/* S4 List row: portrait thumbnail, body fills the rest. */
.kk-aff-card-s4 {
	grid-template-columns: 140px 1fr;
	gap: 20px;
}
.kk-aff-card-s4 .kk-aff-img-link { aspect-ratio: 3 / 4; }

/* S5 Pinterest pin: square, body overlays the bottom with a gradient. */
.kk-aff-card-s5 {
	grid-template-columns: 1fr;
	padding: 0;
	overflow: hidden;
	aspect-ratio: 2 / 3;
	max-width: 540px;
	margin-left: auto;
	margin-right: auto;
}
.kk-aff-card-s5 .kk-aff-img-link {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	border-radius: var(--kk-radius-lg);
	z-index: 0;
}
.kk-aff-card-s5 .kk-aff-body {
	position: relative;
	z-index: 1;
	margin-top: auto;
	padding: 28px 24px 22px;
	background: linear-gradient(180deg, transparent 0%, rgba(var(--kk-deep-rgb), .88) 60%, rgba(var(--kk-deep-rgb), .96) 100%);
	color: #fff;
	border-radius: 0 0 var(--kk-radius-lg) var(--kk-radius-lg);
}
.kk-aff-card-s5 .kk-aff-title,
.kk-aff-card-s5 .kk-aff-rating,
.kk-aff-card-s5 .kk-aff-rating-value,
.kk-aff-card-s5 .kk-aff-desc { color: #fff; }
.kk-aff-card-s5 .kk-aff-price {
	background: var(--kk-highlight);
	color: var(--kk-deep);
}
.kk-aff-card-s5 .kk-aff-pin-save {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	padding: 6px 12px;
	background: rgba(255, 255, 255, .92);
	color: var(--kk-accent-dark);
	font-size: .76rem;
	font-weight: 700;
	border-radius: var(--kk-radius-pill);
}
.kk-aff-card-s5 .kk-aff-disclose { color: rgba(255, 255, 255, .7); }
@media (max-width: 600px) {
	.kk-aff-card-s5 { aspect-ratio: 3 / 4; }
}

/* ============ Wave-8: affiliate card styles S6/S7 + lead styles L6/L7 ======
 * All colours pull from the per-article CSS-vars that writer.py's
 * _variant_wrapper_open() injects (--kk-accent, --kk-accent-dark,
 * --kk-bg-cream, --kk-highlight), so each variant is palette-scoped.
 * ----------------------------------------------------------------------- */

/* S6 — Magazine-Quote-Card: photo right, italic excerpt, large quote-mark,
 * price-strip pushed to the bottom of the body. */
.kk-aff-card-s6 {
	grid-template-columns: 1fr 150px;
	align-items: stretch;
	background: var(--kk-bg-cream, #fdf5ea);
	border-left: 2px solid var(--kk-line-strong);
}
.kk-aff-card-s6 .kk-aff-img-link { order: 2; }       /* photo to the right */
.kk-aff-card-s6 .kk-aff-body { order: 1; position: relative; padding-left: 34px; }
.kk-aff-card-s6 .kk-aff-quote-mark {
	position: absolute;
	left: -2px;
	top: -10px;
	font-family: Georgia, serif;
	font-size: 3.2rem;
	line-height: 1;
	color: var(--kk-accent, #c0584a);
	opacity: .55;
}
.kk-aff-card-s6 .kk-aff-desc { font-style: italic; color: var(--kk-accent-dark, #94372b); }
.kk-aff-card-s6 .kk-aff-price-row { order: 9; margin-top: 12px; }
@media (max-width: 600px) {
	.kk-aff-card-s6 { grid-template-columns: 1fr; }
	.kk-aff-card-s6 .kk-aff-img-link { order: 0; }
}

/* S7 — Tabbed-Spec-Card: photo on top, decorative top tabs, only the active
 * tab (Specs) is highlighted. Tabs are purely visual (aria-hidden). */
.kk-aff-card-s7 {
	grid-template-columns: 1fr;
	text-align: left;
}
.kk-aff-card-s7 .kk-aff-img-link { order: 0; }
.kk-aff-card-s7 .kk-aff-tabs {
	order: 1;
	display: flex;
	gap: 4px;
	margin: 6px 0 2px;
	border-bottom: 2px solid var(--kk-accent, #4a6fa5);
}
.kk-aff-card-s7 .kk-aff-tab {
	padding: 6px 14px;
	font-size: .82rem;
	font-weight: 600;
	color: var(--kk-accent-dark, #2f4d7a);
	background: transparent;
	border-radius: var(--kk-radius-sm) var(--kk-radius-sm) 0 0;
	opacity: .55;
}
.kk-aff-card-s7 .kk-aff-tab.is-active {
	color: #fff;
	background: var(--kk-accent, #4a6fa5);
	opacity: 1;
}
.kk-aff-card-s7 .kk-aff-body { order: 2; }

/* L6 — Stat-Hook lead: oversized accent number + bandwagon sub-line. */
.kk-lead-stat {
	display: flex;
	align-items: baseline;
	gap: 16px;
	margin: 0 0 28px;
	padding: 18px 22px;
	background: var(--kk-bg-cream, #fdf5ea);
	border-left: 2px solid var(--kk-line-strong);
	border-radius: var(--kk-radius-md, 14px);
}
.kk-lead-stat-num {
	font-family: var(--kk-font-display, Georgia, serif);
	font-size: clamp(2.6rem, 8vw, 4rem);
	font-weight: 900;
	line-height: 1;
	color: var(--kk-accent, #b14e30);
}
.kk-lead-stat-sub { margin: 0; font-size: 1.02rem; line-height: 1.5; }

/* L7 — Conversation lead: italic reader question, then the answer line. */
.kk-lead-convo {
	margin: 0 0 28px;
	padding: 18px 22px;
	background: var(--kk-bg-cream, #fdf5ea);
	border-left: 2px solid var(--kk-line-strong);
	border-radius: var(--kk-radius-md, 14px);
}
.kk-lead-convo-q {
	margin: 0 0 8px;
	font-family: var(--kk-font-display, Georgia, serif);
	font-size: 1.18rem;
	color: var(--kk-accent-dark, #8a3a21);
}
.kk-lead-convo-a { margin: 0; line-height: 1.6; }

/* =========================== 26. Reduced motion =========================== */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
	.kk-reveal { opacity: 1; clip-path: none; transform: none; }
	.kk-hero-title .kk-word { opacity: 1; transform: none; }
	.kk-sparkle-deco { display: none; }
}

/* =========================== 27. Responsive =========================== */
@media (max-width: 1024px) {
	.kk-cover-story { min-height: 460px; padding: 40px; }
}
@media (max-width: 720px) {
	body { font-size: 16px; }
	.kk-hero { padding-top: 120px; }
	.kk-hero-title { font-size: clamp(2.2rem, 11vw, 3.6rem); }
	.kk-cover-story { padding: 28px; min-height: 380px; }
	.kk-section-head { margin-bottom: 32px; }
	.kk-cat-tile { min-height: 320px; }
}

/* =========================== 28. Legacy template-part compat =========================== */

/* trust-strip pill variant removed in audit P0 #5 redesign; canonical
 * rules now live in section 11 above (icon-row layout). */

/* =========================== Sticker SVG component ===========================
 * Pinterest-native die-cut sticker shapes that replace the flat rounded-pill
 * labels. Rotation is set inline per instance via the --kk-rot custom prop
 * (computed from a hash of the label) so each sticker tilts a little differently.
 */
.kk-sticker {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--kk-display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	line-height: 1;
	transform: rotate(var(--kk-rot, -2deg));
	transition: transform .25s var(--kk-ease);
	filter: drop-shadow(0 6px 14px rgba(var(--kk-deep-rgb), .12));
}
.kk-sticker:hover { transform: rotate(0deg) scale(1.04); }
.kk-sticker svg { display: block; overflow: visible; }
.kk-sticker-star  { padding: 14px 22px; }
.kk-sticker-tape  { padding: 8px 18px; transform: rotate(var(--kk-rot, -3deg)); }
.kk-sticker-tag   { padding: 12px 24px 12px 32px; }
.kk-sticker-burst { padding: 18px 26px; }
.kk-sticker-polaroid { padding: 10px 16px; }
@media (prefers-reduced-motion: reduce) {
	.kk-sticker, .kk-sticker:hover { transform: rotate(0); transition: none; }
}

/* card layout used by content-card.php with .kk-card-img */
.kk-card-img {
	aspect-ratio: 4 / 5;
	background-size: cover; background-position: center;
	transition: transform .8s var(--kk-ease);
}
.kk-card:hover .kk-card-img { transform: scale(1.05); }
.kk-card-img-fallback {
	background: linear-gradient(135deg, var(--kk-paper-3), var(--kk-paper-2));
}
.kk-card-title {
	font-size: 1.15rem; margin: 6px 0 4px; color: var(--kk-deep);
	font-family: var(--kk-serif); line-height: 1.25;
}
.kk-card-tag {
	display: inline-block;
	padding: 4px 12px;
	background: var(--kk-paper-3);
	color: var(--kk-accent-dark);
	border-radius: var(--kk-radius-pill);
	font-weight: 600; font-size: .78rem;
	margin-bottom: 4px;
}
.kk-link-arrow,
.kk-link-arrow-sm {
	display: inline-block;
	color: var(--kk-accent-dark);
	font-weight: 600;
	margin-top: 6px;
	transition: transform .25s var(--kk-ease);
}
.kk-card:hover .kk-link-arrow,
.kk-card:hover .kk-link-arrow-sm { transform: translateX(4px); }

/* featured hero card */
.kk-featured-card {
	position: relative;
	display: block;
	min-height: 480px;
	border-radius: var(--kk-radius-lg);
	overflow: hidden;
	color: #fff;
	background: var(--kk-deep);
	padding: 40px;
	box-shadow: var(--kk-shadow-lg);
	transition: transform .35s var(--kk-ease), box-shadow .35s var(--kk-ease);
}
.kk-featured-card:hover { transform: translateY(-6px); box-shadow: var(--kk-shadow-deep); color: #fff; }
.kk-featured-img {
	position: absolute; inset: 0;
	background-size: cover; background-position: center;
	z-index: 1;
}
.kk-featured-card::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, transparent 30%, rgba(var(--kk-deep-rgb), .9) 100%);
	z-index: 2;
}
.kk-featured-body {
	position: absolute;
	left: 40px; right: 40px; bottom: 40px;
	z-index: 3;
}
.kk-featured-title { color: #fff; font-size: clamp(1.6rem, 3vw, 2.4rem); margin: 10px 0 8px; }
.kk-featured-excerpt { color: rgba(255, 255, 255, .8); margin-bottom: 14px; }
.kk-featured-card .kk-card-tag { background: var(--kk-highlight); color: var(--kk-deep); }

/* testimonials carousel (kk-tm-*) */
.kk-tm-carousel { max-width: var(--kk-shell-max); margin: 0 auto; }
.kk-tm-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
}
.kk-tm-card {
	margin: 0;
	padding: 32px;
	background: #fff;
	border-radius: var(--kk-radius-lg);
	border: 1px solid var(--kk-line);
	box-shadow: var(--kk-shadow-md);
	position: relative;
	overflow: hidden;
	transition: transform .35s var(--kk-ease), box-shadow .35s var(--kk-ease);
}
.kk-tm-card:hover { transform: translateY(-6px); box-shadow: var(--kk-shadow-lg); }
.kk-tm-card::before {
	content: "\201C";
	position: absolute;
	top: -50px; left: 14px;
	font-family: var(--kk-serif);
	font-size: 8rem;
	color: var(--kk-paper-3);
	line-height: 1;
}
.kk-tm-card blockquote {
	margin: 0 0 14px;
	font-size: 1.02rem;
	font-style: italic;
	color: var(--kk-ink);
	position: relative; z-index: 1;
}
.kk-tm-card figcaption b { display: block; color: var(--kk-deep); font-weight: 600; }
.kk-tm-card figcaption span { color: var(--kk-ink-mute); font-size: .88rem; }
.kk-tm-dots { display: none; }

/* promise grid (section-versprechen.php) */
.kk-promise { padding: clamp(60px, 8vw, 100px) var(--kk-shell-x); }
.kk-promise-grid {
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
}
.kk-promise-card {
	padding: 32px;
	background: var(--kk-paper-3);
	border-radius: var(--kk-radius-lg);
	border-left: 2px solid var(--kk-line-strong);
	transition: transform .35s var(--kk-ease), box-shadow .35s var(--kk-ease);
}
.kk-promise-card:hover { transform: translateY(-4px); box-shadow: var(--kk-shadow-md); }
.kk-promise-icon {
	display: inline-grid; place-items: center;
	width: 56px; height: 56px;
	background: #fff;
	border-radius: 50%;
	margin-bottom: 16px;
	font-size: 1.6rem;
	box-shadow: var(--kk-shadow-sm);
}
.kk-promise-card h3 { margin: 0 0 6px; }
.kk-promise-card p { color: var(--kk-ink-soft); margin: 0; }

/* anchor pitch card (section-anchor-pitch.php) */
.kk-anchor-card {
	max-width: 720px;
	margin: 0 auto;
	padding: clamp(40px, 6vw, 60px);
	background: linear-gradient(135deg, var(--kk-deep) 0%, var(--kk-accent-dark) 100%);
	color: #fff;
	border-radius: var(--kk-radius-lg);
	box-shadow: var(--kk-shadow-deep);
	text-align: center;
	position: relative;
	overflow: hidden;
}
.kk-anchor-card h2 { color: #fff; }
.kk-anchor-card p { color: rgba(255, 255, 255, .82); }
.kk-card-tag-gold { background: var(--kk-highlight) !important; color: var(--kk-deep) !important; }
.kk-anchor-form { max-width: 480px; }
.kk-blob-d.kk-blob-gold { background: radial-gradient(circle, var(--kk-highlight) 0%, transparent 70%); }

/* home FAQ dl/dt/dd accordion (section-faq.php uses native <dl>) */
.kk-home-faq { padding: clamp(60px, 8vw, 100px) var(--kk-shell-x); }
.kk-home-faq .kk-section-title { text-align: center; margin-bottom: 36px; }
dl.kk-faq {
	max-width: 760px;
	margin: 0 auto;
}
dl.kk-faq dt {
	font-family: var(--kk-serif);
	font-weight: 700;
	font-size: 1.18rem;
	color: var(--kk-deep);
	padding: 18px 0 8px;
	border-top: 1px solid var(--kk-line);
	cursor: pointer;
	position: relative;
	padding-right: 40px;
}
dl.kk-faq dt::after {
	content: "+";
	position: absolute;
	right: 0; top: 18px;
	width: 28px; height: 28px;
	display: grid; place-items: center;
	border: 1px solid var(--kk-line-strong);
	border-radius: 50%;
	color: var(--kk-accent);
	font-weight: 300; font-size: 1.4rem;
	transition: transform .3s var(--kk-ease);
}
dl.kk-faq dt.is-open::after { transform: rotate(45deg); }
dl.kk-faq dd {
	margin: 0 0 14px;
	color: var(--kk-ink-soft);
	padding-bottom: 6px;
	max-height: 0;
	overflow: hidden;
	transition: max-height .45s var(--kk-ease);
}
dl.kk-faq dd.is-open { max-height: 400px; padding-bottom: 18px; }
dl.kk-faq dt:first-of-type { border-top: none; }

/* sister-network cards on homepage (kk-sister-card defined above; sister-grid handled) */

/* cover-story blob/sparkle decor */
.kk-cover-story .kk-blob-a { background: radial-gradient(circle, rgba(var(--kk-highlight-rgb), .35) 0%, transparent 70%); top: -20%; left: -10%; }
.kk-cover-story .kk-sparkle {
	position: absolute;
	top: 14%; right: 12%;
	font-size: 2rem;
	z-index: 3;
	animation: kkFloat 4s ease-in-out infinite;
}

/* section-title used across many parts */
.kk-section-title {
	font-family: var(--kk-serif);
	font-weight: 800;
	font-size: clamp(1.7rem, 3.4vw, 2.6rem);
	margin: 0 0 .5em;
	letter-spacing: -.02em;
}

/* Pinterest embed inner wrap */
.kk-pin-iframe-wrap { border-radius: var(--kk-radius-md); overflow: hidden; box-shadow: var(--kk-shadow-md); margin-bottom: 24px; }
.kk-pin-follow { text-align: center; }
.kk-cta-secondary {
	display: inline-block;
	padding: 10px 22px;
	background: rgba(var(--kk-accent-rgb), .12);
	color: var(--kk-accent-dark);
	border-radius: var(--kk-radius-pill);
	font-weight: 600;
	transition: background .25s var(--kk-ease), transform .25s var(--kk-ease);
}
.kk-cta-secondary:hover { background: var(--kk-accent); color: #fff; transform: translateY(-2px); }

/* kk-snap-mobile (editor strip horizontal scroll on mobile) */
@media (max-width: 720px) {
	.kk-snap-mobile {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 16px;
		padding-bottom: 12px;
	}
	.kk-snap-mobile > * {
		flex: 0 0 80%;
		scroll-snap-align: start;
	}
}

/* magnetic-card alias used by content-featured */
.magnetic-card { transition: transform .35s var(--kk-ease), box-shadow .35s var(--kk-ease); }
.magnetic-card:hover { transform: translateY(-6px); }

/* parallax-img class noise from older templates */
.parallax-img { will-change: transform; }

/* fallback kk-anim-color-cycle no-op (left for class continuity) */
.kk-anim-color-cycle { color: inherit; }
.kk-noise { isolation: isolate; }

/* bookmark saved state */
.kk-bookmark.is-saved { background: var(--kk-accent); color: #fff; border-color: var(--kk-accent); }

/* =========================== 28. v4.3 PINK CINEMATIC 3D =========================== */

/* Hero FX layer: aurora + grain + sparkles live behind the hero content */
.kk-hero-fx {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
}
.kk-aurora {
	position: absolute;
	inset: -25%;
	background: conic-gradient(from 0deg at 50% 50%,
		rgba(var(--kk-accent-rgb), .22),
		rgba(var(--kk-highlight-rgb), .16),
		rgba(138, 58, 33, .18),
		rgba(217, 142, 106, .14),
		rgba(var(--kk-accent-rgb), .22));
	filter: blur(70px);
	opacity: .9;
	animation: kkAuroraSpin 26s linear infinite;
}
@keyframes kkAuroraSpin { to { transform: rotate(360deg); } }
.kk-grain {
	position: absolute;
	inset: 0;
	opacity: .05;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.5'/></svg>");
	background-size: 160px 160px;
}

/* Sparkles: re-enabled (were display:none), spin + pulse, JS adds parallax */
.kk-sparkle-deco {
	display: block;
	position: absolute;
	width: 34px; height: 34px;
	opacity: .85;
	animation: kkSparkleSpin 9s linear infinite, kkSparklePulse 3.2s ease-in-out infinite;
	filter: drop-shadow(0 2px 8px rgba(var(--kk-accent-rgb), .35));
}
.kk-sparkle-deco.kk-sparkle-sm { width: 22px; height: 22px; animation-duration: 12s, 4s; }
@keyframes kkSparkleSpin { to { rotate: 360deg; } }
@keyframes kkSparklePulse { 0%, 100% { opacity: .65; scale: 1; } 50% { opacity: 1; scale: 1.18; } }

/* 3D tilt + glare (JS sets transform; glare follows cursor) */
.kk-tilt {
	transform-style: preserve-3d;
	will-change: transform;
	transition: transform .35s var(--kk-ease);
	position: relative;
}
.kk-glare {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	z-index: 3;
	background: none;
}

/* Cursor glow orb */
#kk-glow {
	position: fixed;
	top: 0; left: 0;
	width: 440px; height: 440px;
	border-radius: 50%;
	pointer-events: none;
	z-index: 1;
	background: radial-gradient(circle, rgba(var(--kk-accent-rgb), .13), rgba(var(--kk-highlight-rgb), .06) 45%, transparent 65%);
	opacity: 0;
	transition: opacity .5s ease;
	will-change: transform;
}
#kk-glow.is-on { opacity: 1; }

/* Shine sweep on card imagery */
.kk-card-img,
.kk-cover-story-img,
.kk-hero-collage-card,
.kk-cat-tile { position: relative; overflow: hidden; }
.kk-card-img::after,
.kk-cover-story-img::after,
.kk-hero-collage-card::after {
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	left: -90%;
	width: 50%;
	background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .38), transparent);
	transform: skewX(-18deg);
	transition: left .7s ease;
	pointer-events: none;
	z-index: 2;
}
.kk-card:hover .kk-card-img::after,
.kk-cover-story:hover .kk-cover-story-img::after,
.kk-hero-collage-card:hover::after { left: 150%; }

/* Animated gradient-ink underlines on section headings */
.kk-section-head h2 { position: relative; padding-bottom: 14px; }
.kk-section-head h2::after {
	content: "";
	position: absolute;
	left: 50%; bottom: 0;
	transform: translateX(-50%);
	width: 88px; height: 4px;
	border-radius: var(--kk-radius-pill);
	background: linear-gradient(90deg, var(--kk-accent), var(--kk-highlight), var(--kk-accent-dark), var(--kk-accent));
	background-size: 240% 100%;
	animation: kkInk 6s ease infinite;
}
@keyframes kkInk { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }

/* Hero headline underline: animated gradient sweep */
.kk-underline::after {
	background: linear-gradient(90deg, var(--kk-accent), var(--kk-highlight), var(--kk-accent-dark), var(--kk-accent)) !important;
	background-size: 240% 100% !important;
	animation: kkInk 5s ease infinite;
}

/* Hero collage: gentle staggered float */
.kk-hero-collage-card { animation: kkCollageFloat 7s ease-in-out infinite; }
.kk-hero-collage-card:nth-child(2) { animation-delay: 1.2s; animation-duration: 8s; }
.kk-hero-collage-card:nth-child(3) { animation-delay: 2.4s; animation-duration: 9s; }
@keyframes kkCollageFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

/* Footer script line: handwritten wiggle */
.kk-footer-signature .kk-script {
	display: inline-block;
	transform: rotate(-2deg);
	animation: kkScriptSway 6s ease-in-out infinite;
}
@keyframes kkScriptSway { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(1.5deg); } }

@media (max-width: 720px) {
	.kk-sparkle-deco { display: none; }
	#kk-glow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.kk-aurora, .kk-sparkle-deco, #kk-glow { display: none !important; }
	.kk-hero-collage-card, .kk-underline::after, .kk-section-head h2::after, .kk-footer-signature .kk-script { animation: none !important; }
	.kk-tilt { transition: none; }
}

/* =========================== 29. v4.4 CYBERNETIC EDGE HEADER =========================== */
/* Floating dark glass pill navbar — deep plum, pink glow CTA, animated
 * light edge orbiting the border. Pure overrides over section 4. */

@property --kk-edge {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}

.kk-site-header,
.kk-site-header.is-scrolled {
	background: transparent;
	border-bottom: none;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
.kk-site-header::before { display: none; }

.kk-header-shell {
	position: relative;
	margin: 12px auto 0;
	max-width: min(1240px, calc(100% - 24px));
	padding: 10px 12px 10px 22px;
	background: linear-gradient(180deg, rgba(16, 30, 25, .92), rgba(11, 21, 17, .90));
	-webkit-backdrop-filter: blur(18px) saturate(1.4);
	backdrop-filter: blur(18px) saturate(1.4);
	border: 1px solid rgba(var(--kk-accent-rgb), .20);
	border-radius: var(--kk-radius-pill);
	box-shadow:
		0 18px 50px rgba(var(--kk-deep-rgb), .35),
		inset 0 1px 0 rgba(255, 255, 255, .07);
	transition: padding .25s var(--kk-ease), box-shadow .3s var(--kk-ease), background .3s var(--kk-ease);
}
.kk-site-header.is-scrolled .kk-header-shell {
	padding-top: 7px;
	padding-bottom: 7px;
	background: linear-gradient(180deg, rgba(14, 27, 22, .97), rgba(9, 18, 15, .96));
	box-shadow:
		0 14px 44px rgba(var(--kk-deep-rgb), .45),
		0 0 30px rgba(var(--kk-accent-rgb), .12),
		inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* Animated light edge orbiting the pill border */
.kk-header-shell::after {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 1.5px;
	background: conic-gradient(from var(--kk-edge),
		transparent 0%,
		rgba(var(--kk-accent-rgb), .95) 10%,
		rgba(var(--kk-highlight-rgb), .85) 18%,
		transparent 30%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	animation: kkEdgeOrbit 7s linear infinite;
	pointer-events: none;
	opacity: .85;
	z-index: 0;
}
@keyframes kkEdgeOrbit { to { --kk-edge: 360deg; } }

/* Brand: white name, glyph keeps the pink gradient cube */
.kk-brand,
.kk-brand-name { color: #fff; }
.kk-brand:hover { color: var(--kk-highlight); }
.kk-brand-glyph {
	box-shadow:
		0 10px 28px rgba(var(--kk-accent-rgb), .5),
		0 0 22px rgba(var(--kk-accent-rgb), .35),
		inset 0 1px 0 rgba(255, 255, 255, .35);
}

/* Nav links: soft white, pink hover pill */
.kk-nav-list a { color: rgba(255, 255, 255, .76); font-weight: 500; }
.kk-nav-list a:hover { color: #fff; }
.kk-nav-list a::before { background: linear-gradient(135deg, rgba(var(--kk-accent-rgb), .22), rgba(138, 58, 33, .14)); }
.kk-nav-list a::after { background: linear-gradient(90deg, var(--kk-accent), var(--kk-highlight)); }
.kk-nav-list a[aria-current="page"] { color: #fff; }

/* Tools: ghost-dark icon buttons */
.kk-tool-btn,
.kk-burger {
	border-color: rgba(255, 255, 255, .16);
	color: rgba(255, 255, 255, .88);
	background: rgba(255, 255, 255, .03);
}
.kk-tool-btn:hover,
.kk-burger:hover {
	background: rgba(var(--kk-accent-rgb), .18);
	border-color: rgba(var(--kk-accent-rgb), .45);
	color: #fff;
}
.kk-burger span { background: #fff; }

/* CTA: gradient pill with outer pink glow ("cybernetic" highlight) */
.kk-header-cta {
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, .10),
		0 8px 26px rgba(var(--kk-accent-rgb), .55),
		0 0 38px rgba(var(--kk-accent-rgb), .30),
		inset 0 1px 0 rgba(255, 255, 255, .30);
}
.kk-header-cta:hover {
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, .14),
		0 12px 36px rgba(var(--kk-accent-rgb), .65),
		0 0 52px rgba(var(--kk-accent-rgb), .45),
		inset 0 1px 0 rgba(255, 255, 255, .4);
}

/* Content clears the floating pill */
.kk-main { padding-top: 104px; }
.kk-home-active .kk-main { padding-top: 0; }
.kk-hero { padding-top: 120px; }

/* Mobile drawer: matching dark plum panel */
.kk-mobile-drawer {
	background: linear-gradient(180deg, #13241d 0%, #0c1714 100%);
	border-left: 1px solid rgba(var(--kk-accent-rgb), .22);
}
.kk-mobile-drawer::before {
	background:
		radial-gradient(circle at 100% 0%, rgba(var(--kk-accent-rgb), .16), transparent 50%),
		radial-gradient(circle at 0% 100%, rgba(var(--kk-highlight-rgb), .10), transparent 45%);
}
.kk-drawer-brand { color: #fff; }
.kk-drawer-close { border-color: rgba(255, 255, 255, .16); color: #fff; }
.kk-drawer-close:hover { background: rgba(var(--kk-accent-rgb), .18); border-color: rgba(var(--kk-accent-rgb), .45); }
.kk-drawer-head { border-bottom-color: rgba(255, 255, 255, .10); }
.kk-drawer-list a { color: rgba(255, 255, 255, .85); }
.kk-drawer-list a:hover,
.kk-drawer-list a:focus { background: rgba(var(--kk-accent-rgb), .12); color: #fff; }
.kk-drawer-list a[aria-current="page"] { background: rgba(var(--kk-accent-rgb), .16); color: #fff; }
.kk-drawer-list a::after { color: var(--kk-highlight); }
.kk-drawer-foot { border-top-color: rgba(255, 255, 255, .10); }

@media (max-width: 720px) {
	.kk-header-shell { max-width: calc(100% - 16px); margin-top: 8px; padding: 8px 10px 8px 16px; }
	.kk-main { padding-top: 92px; }
	.kk-hero { padding-top: 104px; }
}
@media (prefers-reduced-motion: reduce) {
	.kk-header-shell::after { animation: none; opacity: .4; }
}

/* =========================== 30. v4.5 SCROLL-PARALLAX + EDITORIAL =========================== */

/* Collage: scroll-parallax owns the motion now — the float animation also
 * animated `translate` and would fight the engine. Depth via JS speeds. */
.kk-hero-collage-card,
.kk-hero-collage-card:nth-child(2),
.kk-hero-collage-card:nth-child(3) { animation: none; will-change: translate, transform; }

/* Article hero: sealed frame so the parallax drift never shows edges */
.kk-article-hero { overflow: hidden; border-radius: var(--kk-radius-lg); }
.kk-article-hero-img { scale: 1.12; will-change: translate; }

/* Cover story → cinematic editorial banner (reference: premium palette hero) */
.kk-cover-story { min-height: min(560px, 72dvh); display: grid; align-items: end; }
.kk-cover-story-img {
	position: absolute;
	inset: -14% 0;
	background-size: cover;
	background-position: center;
	will-change: background-position;
}
.kk-cover-story-gradient {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(10deg, rgba(10, 20, 16, .92) 0%, rgba(var(--kk-deep-rgb), .55) 45%, rgba(var(--kk-deep-rgb), .10) 75%),
		radial-gradient(700px 320px at 12% 100%, rgba(var(--kk-accent-rgb), .28), transparent 60%);
}
.kk-cover-story-body { padding-bottom: clamp(28px, 4vw, 56px); }
.kk-cover-title {
	color: #fff;
	text-shadow: 0 4px 28px rgba(10, 20, 16, .6);
	font-size: clamp(2rem, 5vw, 3.6rem);
	max-width: 18ch;
}
.kk-cover-excerpt { color: rgba(255, 255, 255, .85); max-width: 52ch; }

/* Palette signature row — curated-palette chips like the reference banner */
.kk-palette-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 22px;
}
.kk-palette-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px 6px 8px;
	border-radius: var(--kk-radius-pill);
	background: rgba(255, 255, 255, .10);
	border: 1px solid rgba(255, 255, 255, .18);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: rgba(255, 255, 255, .9);
	font-size: .76rem;
	font-weight: 600;
	letter-spacing: .04em;
}
.kk-palette-chip i {
	width: 18px; height: 18px;
	border-radius: 50%;
	background: var(--chip);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 8px rgba(10, 20, 16, .35);
}
@media (max-width: 720px) {
	.kk-palette-row { gap: 6px; }
	.kk-palette-chip { font-size: .7rem; padding: 5px 11px 5px 6px; }
	.kk-palette-chip i { width: 14px; height: 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.kk-article-hero-img { scale: 1; }
	.kk-cover-story-img { inset: 0; }
}

/* =========================== 31. v4.5.1 PIN-OVERLAY-PILL =========================== */
/* Pinterest's signature gesture: the category tag rides ON the image as a
 * white pill (bottom-left), instead of sitting in the card body. */
.kk-tag-overlay {
	position: absolute;
	left: 10px;
	bottom: 10px;
	z-index: 3;
	background: rgba(255, 255, 255, .94);
	color: var(--kk-deep);
	padding: 6px 12px;
	border-radius: var(--kk-radius-pill);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .03em;
	box-shadow: 0 4px 14px rgba(var(--kk-deep-rgb), .22);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: transform .25s var(--kk-ease), background .25s var(--kk-ease);
}
.kk-card:hover .kk-tag-overlay {
	transform: translateY(-2px);
	background: #fff;
}

/* =========================== 32. v5.0 MOBILE PERFECTION PASS =========================== */

/* Performance: the 70px-blurred spinning aurora is a GPU hog on phones —
 * static warm wash instead. Grain stays (cheap). */
@media (max-width: 720px) {
	.kk-aurora { animation: none; opacity: .55; }
	/* Parallax engine is desktop-only now → undo its visual headrooms */
	.kk-article-hero-img { scale: 1; }
	.kk-cover-story-img { inset: 0; }
	/* Hero collage: tighter, no oversize tail card */
	.kk-hero-collage { min-height: 280px; gap: 10px; }
	/* Sections breathe but don't waste a viewport */
	.kk-cover-story { min-height: 420px; }
}

/* Safe areas: notch/home-indicator devices (Dynamic Island etc.) */
.kk-news-bar { bottom: max(16px, env(safe-area-inset-bottom)); }
.kk-mobile-pin {
	bottom: max(22px, calc(env(safe-area-inset-bottom) + 8px));
	right: max(22px, env(safe-area-inset-right));
}

/* Ultra-narrow (Galaxy Fold, iPhone SE zoomed): keep the pill intact */
@media (max-width: 360px) {
	.kk-header-shell { margin-top: 6px; max-width: calc(100% - 12px); padding: 7px 8px 7px 14px; gap: 6px; }
	.kk-brand-glyph { width: 38px; height: 38px; font-size: 1.1rem; }
	.kk-tool-btn, .kk-burger, .kk-header-cta { width: 38px; height: 38px; }
	.kk-main { padding-top: 84px; }
	.kk-hero { padding-top: 96px; }
}

/* =========================== 33. v5.1 WP CORE COMPLETENESS =========================== */
/* Required theme classes + Gutenberg coverage so EVERY WordPress feature
 * renders correctly (Theme-Review-Handbook checklist). */

/* Sticky posts: quiet editorial marker on the card */
.sticky .kk-card-title::before,
.kk-card.sticky .kk-card-title::before {
	content: "★ ";
	color: var(--kk-highlight);
}

/* Comment by the post author */
.bypostauthor > article,
.bypostauthor .comment-body {
	border-left: 2px solid var(--kk-line-strong);
	padding-left: 14px;
}

/* Captions */
.wp-caption { max-width: 100%; margin: 1.6em auto; }
.wp-caption img { display: block; margin: 0 auto; border-radius: var(--kk-radius-md); }
.wp-caption-text,
.wp-element-caption,
figcaption {
	font-size: .85rem;
	color: var(--kk-ink-mute);
	text-align: center;
	padding: 8px 4px 0;
}

/* Classic alignments */
.alignleft { float: left; margin: 6px 24px 16px 0; max-width: 50%; }
.alignright { float: right; margin: 6px 0 16px 24px; max-width: 50%; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
@media (max-width: 600px) {
	.alignleft, .alignright { float: none; margin: 1.2em auto; max-width: 100%; display: block; }
}

/* Wide / full alignments inside the 720px reading column */
.entry-content .alignwide {
	width: min(1100px, calc(100vw - 2 * var(--kk-shell-x)));
	max-width: none;
	margin-left: 50%;
	transform: translateX(-50%);
}
.entry-content .alignfull {
	width: calc(100vw - 2 * var(--kk-shell-x));
	max-width: none;
	margin-left: 50%;
	transform: translateX(-50%);
}

/* Galleries (classic + block) */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 1.6em 0; }
.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-item { margin: 0; }
.gallery-item img { border-radius: var(--kk-radius-sm); width: 100%; height: auto; }
.gallery-caption { font-size: .8rem; color: var(--kk-ink-mute); padding-top: 6px; }
@media (max-width: 600px) {
	.gallery, .gallery-columns-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Password-protected post form */
.post-password-form {
	background: var(--kk-paper-2);
	border: 1px solid var(--kk-line);
	border-radius: var(--kk-radius-lg);
	padding: 24px;
	max-width: 480px;
	margin: 2em auto;
}
.post-password-form input[type="password"] {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--kk-line-strong);
	border-radius: var(--kk-radius-pill);
	margin: 10px 0 14px;
	background: #fff;
}
.post-password-form input[type="submit"] {
	background: linear-gradient(135deg, var(--kk-accent), var(--kk-accent-dark));
	color: #fff;
	border: none;
	padding: 12px 26px;
	border-radius: var(--kk-radius-pill);
	font-weight: 600;
	cursor: pointer;
}

/* Comments pagination + reply navigation */
.comments-navigation,
.comment-navigation {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 24px 0;
}
.comments-navigation a,
.comment-navigation a {
	padding: 10px 18px;
	background: var(--kk-paper-2);
	border: 1px solid var(--kk-line);
	border-radius: var(--kk-radius-pill);
	font-weight: 600;
	font-size: .9rem;
}
.comments-navigation a:hover,
.comment-navigation a:hover { background: var(--kk-paper-3); }

/* Blocks: separator, table, quote-large, pullquote */
.entry-content hr,
.wp-block-separator {
	border: none;
	height: 2px;
	background: var(--kk-line);
	margin: 2.4em auto;
	max-width: 240px;
	border-radius: var(--kk-radius-pill);
}
.entry-content table,
.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: .95rem;
	margin: 1.6em 0;
}
.entry-content th, .entry-content td,
.wp-block-table th, .wp-block-table td {
	border: 1px solid var(--kk-line);
	padding: 10px 14px;
	text-align: left;
}
.entry-content th, .wp-block-table th { background: var(--kk-paper-2); }
.wp-block-pullquote {
	border-top: 2px solid var(--kk-line-strong);
	border-bottom: 2px solid var(--kk-line-strong);
	padding: 24px 0;
	font-family: var(--kk-true-serif);
	font-style: italic;
}

/* =========================== 34. v5.2 SECTION REWORK (pin-gerecht) =========================== */

/* Pins are 2:3 with baked-in text — show them UNCROPPED. */
.kk-card-img { aspect-ratio: 2 / 3; }

/* Category color tiles: zero photos, zero text collisions */
.kk-cat-color-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.kk-cat-color-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 180px;
	padding: 22px;
	border-radius: var(--kk-radius-lg);
	overflow: hidden;
	color: #fff;
	transition: box-shadow .3s var(--kk-ease);
}
.kk-cat-tone-0 { background: linear-gradient(150deg, var(--kk-accent), var(--kk-accent-dark)); }
.kk-cat-tone-1 { background: linear-gradient(150deg, var(--kk-tone), var(--kk-tone-2)); }
.kk-cat-tone-2 { background: linear-gradient(150deg, #21342c, var(--kk-deep)); }
.kk-cat-tone-3 { background: linear-gradient(150deg, #e9b461, var(--kk-highlight-2)); color: var(--kk-deep); }
.kk-cat-color-tile:hover { box-shadow: var(--kk-shadow-lg); color: inherit; }
.kk-cat-color-num {
	position: absolute;
	top: 14px; right: 18px;
	font-family: var(--kk-display);
	font-size: 2.4rem;
	font-weight: 800;
	opacity: .22;
	line-height: 1;
}
.kk-cat-color-name {
	margin: 0 0 4px;
	font-size: clamp(1.15rem, 1.8vw, 1.45rem);
	color: inherit;
}
.kk-cat-color-count { font-size: .82rem; opacity: .75; }
.kk-cat-color-arrow {
	position: absolute;
	bottom: 20px; right: 20px;
	font-size: 1.2rem;
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity .25s var(--kk-ease), transform .25s var(--kk-ease);
}
.kk-cat-color-tile:hover .kk-cat-color-arrow { opacity: 1; transform: translateX(0); }
@media (max-width: 900px) { .kk-cat-color-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) {
	.kk-cat-color-grid { gap: 10px; }
	.kk-cat-color-tile { min-height: 130px; padding: 16px; }
}

/* Author strip v2: substance instead of a sparse gap */
.kk-author-strip-v2 {
	background: linear-gradient(150deg, var(--kk-tone), var(--kk-tone-2));
	border-radius: var(--kk-radius-lg);
	max-width: var(--kk-shell-max);
	margin: 0 auto;
	padding: clamp(28px, 4vw, 48px);
	color: #fff;
}
.kk-author-strip-v2 .kk-author-strip-inner {
	display: grid;
	grid-template-columns: 104px 1fr;
	gap: 24px;
	align-items: center;
	max-width: 760px;
	margin: 0 auto;
}
.kk-author-strip-v2 .kk-author-photo {
	width: 104px; height: 104px;
	border-radius: 50%;
	overflow: hidden;
	border: 3px solid var(--kk-highlight);
	display: block;
}
.kk-author-strip-v2 .kk-author-photo img { width: 100%; height: 100%; object-fit: cover; }
.kk-author-strip-v2 .kk-author-photo-initial {
	width: 100%; height: 100%;
	display: grid; place-items: center;
	background: linear-gradient(135deg, var(--kk-accent), var(--kk-accent-dark));
	color: #fff; font-family: var(--kk-display); font-size: 2.6rem; font-weight: 800;
}
.kk-author-strip-v2 .kk-author-signature {
	font-family: var(--kk-script);
	font-size: 2.1rem;
	color: var(--kk-highlight);
	margin: 0 0 4px;
	line-height: 1;
}
.kk-author-strip-v2 .kk-author-tagline { font-weight: 600; margin: 0 0 6px; color: #fff; }
.kk-author-strip-v2 .kk-author-bio { color: rgba(255, 255, 255, .78); font-size: .95rem; margin: 0 0 14px; }
.kk-author-strip-v2 .kk-author-strip-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kk-author-strip-v2 .kk-author-icon {
	width: 38px; height: 38px;
	display: inline-grid; place-items: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	transition: background .25s var(--kk-ease), transform .25s var(--kk-ease);
}
.kk-author-strip-v2 .kk-author-icon:hover { background: var(--kk-accent); transform: translateY(-2px); }
@media (max-width: 600px) {
	.kk-author-strip-v2 .kk-author-strip-inner { grid-template-columns: 1fr; text-align: center; }
	.kk-author-strip-v2 .kk-author-photo { margin: 0 auto; }
	.kk-author-strip-v2 .kk-author-strip-actions { justify-content: center; }
}

/* Sister band: one slim row instead of 7 card walls */
.kk-sister-band {
	max-width: var(--kk-shell-max);
	margin: 0 auto;
	padding: clamp(24px, 3vw, 40px) var(--kk-shell-x);
	background: var(--kk-paper-2);
	border: 1px solid var(--kk-line);
	border-radius: var(--kk-radius-lg);
}
.kk-sister-band-inner { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.kk-sister-band-head { flex: 0 0 auto; }
.kk-sister-band-head h2 { margin: 4px 0 0; font-size: clamp(1.2rem, 2vw, 1.6rem); }
.kk-sister-pills { display: flex; gap: 10px; flex-wrap: wrap; flex: 1; min-width: 0; }
.kk-sister-pill {
	padding: 10px 18px;
	background: #fff;
	border: 1px solid var(--kk-line);
	border-radius: var(--kk-radius-pill);
	font-weight: 600;
	font-size: .92rem;
	color: var(--kk-deep);
	transition: border-color .25s var(--kk-ease), color .25s var(--kk-ease), transform .25s var(--kk-ease);
}
.kk-sister-pill:hover { border-color: var(--kk-accent); color: var(--kk-accent-dark); transform: translateY(-2px); }

/* Back to top */
.kk-back-to-top {
	position: fixed;
	bottom: max(24px, calc(env(safe-area-inset-bottom) + 10px));
	left: 22px;
	width: 46px; height: 46px;
	display: grid; place-items: center;
	background: var(--kk-deep);
	color: #fff;
	border: none;
	border-radius: 50%;
	box-shadow: var(--kk-shadow-md);
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transform: translateY(8px);
	transition: opacity .3s var(--kk-ease), transform .3s var(--kk-ease), background .25s var(--kk-ease);
	z-index: 80;
}
.kk-back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.kk-back-to-top:hover { background: var(--kk-accent); }

/* Load more (progressive enhancement; classic pagination = no-JS fallback) */
.kk-load-more {
	display: block;
	margin: 32px auto 0;
	padding: 14px 36px;
	background: linear-gradient(135deg, var(--kk-accent), var(--kk-accent-dark));
	color: #fff;
	border: none;
	border-radius: var(--kk-radius-pill);
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(var(--kk-accent-rgb), .35);
	transition: transform .25s var(--kk-ease), box-shadow .25s var(--kk-ease), opacity .2s;
}
.kk-load-more:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(var(--kk-accent-rgb), .45); }
.kk-load-more.is-loading { opacity: .6; cursor: progress; }
.kk-pagination.is-enhanced .nav-links { display: none; }

/* =========================== 35. v5.3 SECTION REWORK II =========================== */

/* BUGFIX: .kk-site-footer a (0-1-1) beat .kk-btn-light (0-1-0) →
 * white text on a white button. */
.kk-site-footer .kk-btn-light { color: var(--kk-deep); }
.kk-site-footer .kk-btn-light:hover { color: var(--kk-accent-dark); }

/* Cover v3: split editorial banner — matte panel + uncropped pin card */
.kk-cover-split {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: clamp(28px, 4vw, 64px);
	align-items: center;
	background:
		radial-gradient(560px 300px at 90% 0%, rgba(var(--kk-accent-rgb), .25), transparent 60%),
		linear-gradient(150deg, #1a2b24 0%, var(--kk-deep) 100%);
	border-radius: var(--kk-radius-lg);
	padding: clamp(28px, 5vw, 64px);
	overflow: hidden;
}
.kk-cover-kicker {
	display: block;
	font-family: var(--kk-script);
	font-size: 1.9rem;
	color: var(--kk-highlight);
	margin-bottom: 10px;
	transform: rotate(-1.5deg);
}
.kk-cover-split .kk-cover-cat { margin-bottom: 14px; }
.kk-cover-split .kk-cover-title {
	color: #fff;
	font-size: clamp(1.7rem, 3.6vw, 2.8rem);
	margin: 0 0 14px;
	max-width: 20ch;
}
.kk-cover-split .kk-cover-excerpt {
	color: rgba(255, 255, 255, .78);
	max-width: 46ch;
	margin: 0 0 22px;
}
.kk-cover-pin {
	display: block;
	justify-self: center;
	width: min(320px, 100%);
	aspect-ratio: 2 / 3;
	border-radius: var(--kk-radius-lg);
	overflow: hidden;
	box-shadow: 0 30px 70px rgba(0, 0, 0, .4);
	rotate: 2deg;
}
.kk-cover-pin img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 860px) {
	.kk-cover-split { grid-template-columns: 1fr; }
	.kk-cover-pin { width: min(260px, 80%); rotate: 0deg; }
}

/* Hero collage: 2 pins, uncropped, equal */
.kk-hero-collage { grid-template-columns: repeat(2, 1fr); min-height: 0; align-self: center; }
.kk-hero-collage-card { aspect-ratio: 2 / 3; min-height: 0; max-height: none; }
.kk-hero-collage-card:nth-child(3) { display: none; }
.kk-hero-collage-card img { position: static; }

/* Editor strip pin cards: image only, generous radius */
.kk-card-pin { background: transparent; box-shadow: none; border: none; }
.kk-card-pin .kk-card-img { border-radius: var(--kk-radius-lg); box-shadow: var(--kk-shadow-md); }
.kk-card-pin:hover .kk-card-img { box-shadow: var(--kk-shadow-lg); }

/* FAQ v2: card accordion instead of bare hairlines */
.kk-home-faq .kk-section-title { scroll-margin-top: 110px; }
.kk-faq dt {
	background: #fff;
	border: 1px solid var(--kk-line);
	border-radius: var(--kk-radius-md);
	box-shadow: var(--kk-shadow-sm);
	padding: 18px 60px 18px 20px;
	margin: 0 0 10px;
	font-weight: 700;
	color: var(--kk-deep);
	position: relative;
	cursor: pointer;
	transition: border-color .25s var(--kk-ease), box-shadow .25s var(--kk-ease);
}
.kk-faq dt:hover { border-color: var(--kk-line-strong); box-shadow: var(--kk-shadow-md); }
.kk-faq dt::after {
	content: "+";
	position: absolute;
	right: 16px; top: 50%;
	translate: 0 -50%;
	width: 30px; height: 30px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--kk-paper-3);
	color: var(--kk-accent-dark);
	font-size: 1.2rem;
	font-weight: 600;
	transition: rotate .3s var(--kk-ease), background .25s var(--kk-ease);
}
.kk-faq dt.is-open { border-color: var(--kk-line-strong); border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0; }
.kk-faq dt.is-open::after { rotate: 45deg; background: var(--kk-accent); color: #fff; }
.kk-faq dd {
	background: #fff;
	border: 1px solid var(--kk-line);
	border-top: none;
	border-radius: 0 0 var(--kk-radius-md) var(--kk-radius-md);
	margin: 0 0 10px;
	padding: 0 20px;
	max-height: 0;
	overflow: hidden;
	color: var(--kk-ink-soft);
	transition: max-height .35s var(--kk-ease), padding .25s var(--kk-ease);
}
.kk-faq dd.is-open { max-height: 400px; padding: 4px 20px 18px; }

/* Versprechen v2: white cards + tone icon tiles (peach-on-peach fixed) */
.kk-promise-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.kk-promise-card {
	background: #fff;
	border: 1px solid var(--kk-line);
	border-radius: var(--kk-radius-lg);
	box-shadow: var(--kk-shadow-sm);
	padding: 26px 24px;
	transition: transform .25s var(--kk-ease), box-shadow .25s var(--kk-ease);
}
.kk-promise-card:hover { transform: translateY(-3px); box-shadow: var(--kk-shadow-md); }
.kk-promise-icon {
	display: inline-grid;
	place-items: center;
	width: 52px; height: 52px;
	border-radius: var(--kk-radius-md);
	margin-bottom: 14px;
	background: linear-gradient(150deg, var(--kk-accent), var(--kk-accent-dark));
	color: #fff;
}
.kk-promise-card:nth-child(2) .kk-promise-icon { background: linear-gradient(150deg, var(--kk-tone), var(--kk-tone-2)); }
.kk-promise-card:nth-child(3) .kk-promise-icon { background: linear-gradient(150deg, #e9b461, var(--kk-highlight-2)); color: var(--kk-deep); }
.kk-promise-card h3 { font-size: 1.1rem; margin: 0 0 8px; }
.kk-promise-card p { font-size: .94rem; color: var(--kk-ink-soft); margin: 0; }
@media (max-width: 860px) { .kk-promise-grid { grid-template-columns: 1fr; } }

/* Testimonials v2: avatar chips, serif quotes, featured middle card */
.kk-tm-card {
	background: #fff;
	border: 1px solid var(--kk-line);
	border-radius: var(--kk-radius-lg);
	box-shadow: var(--kk-shadow-sm);
	padding: 26px 24px;
	margin: 0;
	position: relative;
}
.kk-tm-card::before {
	content: "„";
	position: absolute;
	top: 2px; left: 18px;
	font-family: var(--kk-script);
	font-size: 4rem;
	line-height: 1;
	color: var(--kk-accent);
	opacity: .35;
}
.kk-tm-card blockquote {
	margin: 18px 0 18px;
	font-family: var(--kk-true-serif);
	font-style: italic;
	font-size: 1.02rem;
	line-height: 1.6;
	color: var(--kk-ink);
	border: none;
	background: none;
	padding: 0;
}
.kk-tm-card figcaption { display: flex; align-items: center; gap: 12px; }
.kk-tm-avatar {
	flex: 0 0 auto;
	width: 42px; height: 42px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: linear-gradient(150deg, var(--kk-accent), var(--kk-accent-dark));
	color: #fff;
	font-weight: 700;
	font-family: var(--kk-display);
}
.kk-tm-meta b { display: block; color: var(--kk-deep); font-size: .92rem; }
.kk-tm-meta span { color: var(--kk-ink-mute); font-size: .8rem; }
.kk-tm-card:nth-child(2) {
	background: linear-gradient(150deg, var(--kk-tone), var(--kk-tone-2));
	border-color: transparent;
}
.kk-tm-card:nth-child(2) blockquote { color: rgba(255, 255, 255, .92); }
.kk-tm-card:nth-child(2)::before { color: var(--kk-highlight); opacity: .7; }
.kk-tm-card:nth-child(2) .kk-tm-meta b { color: #fff; }
.kk-tm-card:nth-child(2) .kk-tm-meta span { color: rgba(255, 255, 255, .65); }
.kk-tm-card:nth-child(2) .kk-tm-avatar { background: var(--kk-highlight); color: var(--kk-deep); }

/* =========================== 36. v5.4 HERO-DECK · SPOTLIGHT-STAGE · FAQ-CHAT =========================== */

/* ── HERO v5: 3D-Pin-Deck ─────────────────────────────────────────── */
.kk-hero-deck {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	min-height: 480px;
	perspective: 1200px;
}
.kk-deck-ring {
	position: absolute;
	width: min(420px, 90%);
	aspect-ratio: 1;
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 50%, transparent 58%, rgba(var(--kk-accent-rgb), .10) 59%, transparent 72%),
		conic-gradient(from 0deg, transparent, rgba(var(--kk-highlight-rgb), .35), transparent 30%);
	filter: blur(1px);
	animation: kkDeckRing 18s linear infinite;
}
@keyframes kkDeckRing { to { rotate: 360deg; } }
.kk-deck-stage {
	position: relative;
	width: min(380px, 86%);
	aspect-ratio: 2 / 3;
	transform-style: preserve-3d;
	/* Maus-Parallax: --kk-mx/--kk-my kommen aus main.js Modul 9 */
	transform:
		rotateY(calc(var(--kk-mx, 0) * 9deg))
		rotateX(calc(var(--kk-my, 0) * -7deg));
	transition: transform .25s var(--kk-ease-soft);
}
.kk-deck-card {
	position: absolute;
	inset: 0;
	border-radius: var(--kk-radius-lg);
	overflow: hidden;
	box-shadow: 0 30px 70px rgba(var(--kk-deep-rgb), .35);
	transform-style: preserve-3d;
	will-change: transform;
	animation: kkDeckIdle 9s ease-in-out infinite;
	transition: translate .4s var(--kk-ease), rotate .4s var(--kk-ease), box-shadow .4s var(--kk-ease);
}
.kk-deck-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kk-deck-card[style*="--i:0"] {
	rotate: -10deg;
	translate: -34% 4%;
	z-index: 1;
	animation-delay: 0s;
}
.kk-deck-card[style*="--i:1"] {
	rotate: 0deg;
	translate: 0 -2%;
	z-index: 3;
	animation-delay: 1.4s;
	box-shadow: 0 44px 90px rgba(var(--kk-deep-rgb), .42);
}
.kk-deck-card[style*="--i:2"] {
	rotate: 10deg;
	translate: 34% 4%;
	z-index: 2;
	animation-delay: 2.8s;
}
@keyframes kkDeckIdle {
	0%, 100% { margin-top: 0; }
	50% { margin-top: -12px; }
}
.kk-deck-card:hover {
	z-index: 4;
	translate: 0 -6%;
	rotate: 0deg;
	box-shadow: 0 50px 100px rgba(var(--kk-deep-rgb), .5);
}
@media (max-width: 900px) {
	.kk-hero-deck { min-height: 340px; }
	.kk-deck-stage { width: min(240px, 64%); transform: none; }
	.kk-deck-ring { width: min(320px, 96%); }
}

/* ── COVER v4: Spotlight-Stage ───────────────────────────────────── */
.kk-stage { text-align: center; }
.kk-stage-head { max-width: 720px; margin: 0 auto 8px; }
.kk-stage-kicker {
	display: inline-block;
	font-family: var(--kk-script);
	font-size: 1.9rem;
	color: var(--kk-accent-dark);
	transform: rotate(-1.5deg);
	margin-bottom: 6px;
}
.kk-stage-title { font-size: clamp(1.6rem, 3.4vw, 2.6rem); margin: 0 auto; max-width: 22ch; }
.kk-stage-floor {
	position: relative;
	display: grid;
	place-items: center;
	padding: clamp(28px, 4vw, 56px) 0 0;
}
.kk-stage-spot {
	position: absolute;
	bottom: 0;
	width: min(640px, 96%);
	height: 86%;
	background:
		radial-gradient(50% 100% at 50% 100%, rgba(var(--kk-highlight-rgb), .30), transparent 70%),
		conic-gradient(from 165deg at 50% -20%, transparent 42%, rgba(var(--kk-accent-rgb), .12) 50%, transparent 58%);
	border-radius: 0 0 50% 50% / 0 0 18% 18%;
	pointer-events: none;
}
.kk-stage-pinwrap { position: relative; display: grid; place-items: center; }
.kk-stage-ring {
	position: absolute;
	width: 132%;
	aspect-ratio: 1;
	border-radius: 50%;
	border: 2px dashed rgba(var(--kk-accent-rgb), .35);
	animation: kkDeckRing 30s linear infinite;
	pointer-events: none;
}
.kk-stage-pin {
	position: relative;
	display: block;
	width: min(300px, 70vw);
	aspect-ratio: 2 / 3;
	border-radius: var(--kk-radius-lg);
	overflow: hidden;
	box-shadow: 0 40px 90px rgba(var(--kk-deep-rgb), .35);
	z-index: 1;
}
.kk-stage-pin img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kk-stage-ribbon {
	position: absolute;
	top: 18px; left: -34px;
	z-index: 2;
	background: linear-gradient(135deg, var(--kk-accent), var(--kk-accent-dark));
	color: #fff;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: 7px 40px;
	rotate: -45deg;
	box-shadow: 0 4px 14px rgba(var(--kk-deep-rgb), .3);
}
.kk-stage-reflection {
	width: min(300px, 70vw);
	aspect-ratio: 5 / 1;
	margin-top: 6px;
	background-size: cover;
	background-position: top center;
	border-radius: var(--kk-radius-lg);
	transform: scaleY(-1);
	opacity: .18;
	-webkit-mask-image: linear-gradient(180deg, transparent, #000);
	mask-image: linear-gradient(180deg, transparent, #000);
	pointer-events: none;
}
.kk-stage-meta { position: absolute; inset: 0; pointer-events: none; }
.kk-stage-chip {
	position: absolute;
	background: #fff;
	border: 1px solid var(--kk-line);
	border-radius: var(--kk-radius-pill);
	box-shadow: var(--kk-shadow-md);
	padding: 8px 16px;
	font-size: .82rem;
	font-weight: 700;
	color: var(--kk-deep);
	animation: kkChipFloat 7s ease-in-out infinite;
}
.kk-stage-chip-l { left: 12%; top: 34%; rotate: -4deg; }
.kk-stage-chip-r { right: 12%; top: 56%; rotate: 3deg; animation-delay: 1.6s; }
@keyframes kkChipFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.kk-stage-foot { max-width: 560px; margin: 28px auto 0; }
.kk-stage-excerpt { color: var(--kk-ink-soft); margin: 0 0 20px; }
@media (max-width: 720px) {
	.kk-stage-chip-l { left: 2%; top: 20%; }
	.kk-stage-chip-r { right: 2%; top: 64%; }
	.kk-stage-ring { width: 118%; }
}

/* ── FAQ v3: Chat-Dialog ─────────────────────────────────────────── */
.kk-faq-chat { max-width: 680px; margin: 0 auto; }
.kk-chat-row { display: flex; margin-bottom: 14px; }
.kk-chat-q { justify-content: flex-end; }
.kk-chat-a { justify-content: flex-start; gap: 10px; align-items: flex-end; }
.kk-chat-bubble {
	max-width: 82%;
	padding: 14px 18px;
	font-size: .97rem;
	line-height: 1.55;
	box-shadow: var(--kk-shadow-sm);
}
.kk-chat-q .kk-chat-bubble {
	background: linear-gradient(135deg, var(--kk-accent), var(--kk-accent-dark));
	color: #fff;
	font-weight: 600;
	border-radius: var(--kk-radius-lg) var(--kk-radius-lg) var(--kk-radius-sm) var(--kk-radius-lg);
}
.kk-chat-a .kk-chat-bubble {
	background: #fff;
	border: 1px solid var(--kk-line);
	color: var(--kk-ink);
	border-radius: var(--kk-radius-lg) var(--kk-radius-lg) var(--kk-radius-lg) var(--kk-radius-sm);
}
.kk-chat-name {
	display: block;
	font-family: var(--kk-script);
	font-size: 1.25rem;
	color: var(--kk-accent-dark);
	line-height: 1;
	margin-bottom: 6px;
}
.kk-chat-avatar {
	flex: 0 0 36px;
	width: 36px; height: 36px;
	border-radius: 50%;
	overflow: hidden;
	display: grid; place-items: center;
	background: linear-gradient(150deg, var(--kk-tone), var(--kk-tone-2));
	color: #fff;
	font-weight: 700;
	border: 2px solid #fff;
	box-shadow: var(--kk-shadow-sm);
}
.kk-chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.kk-chat-cta { text-align: center; margin-top: 28px; }
/* Reveal-Stagger der Bubbles */
.kk-home-faq [data-reveal].is-revealed .reveal-card,
.kk-home-faq .reveal-card { transition-delay: var(--card-delay, 0ms); }

@media (prefers-reduced-motion: reduce) {
	.kk-deck-ring, .kk-stage-ring, .kk-deck-card, .kk-stage-chip { animation: none !important; }
	.kk-deck-stage { transform: none !important; }
}

/* =========================== 37. v5.6 BLUEPRINTS: HERO-VARIANTEN · COVER-VARIANTEN · FLAVORS =========================== */

/* ── Hero "split": ein großer Solo-Pin ── */
.kk-hero-v-split .kk-hero-solo { position: relative; display: grid; place-items: center; }
.kk-hero-solo-halo {
	position: absolute;
	width: min(440px, 92%);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(var(--kk-accent-rgb), .14), transparent 65%);
}
.kk-hero-solo-pin {
	position: relative;
	width: min(330px, 76%);
	aspect-ratio: 2 / 3;
	border-radius: var(--kk-radius-lg);
	overflow: hidden;
	box-shadow: 0 36px 80px rgba(var(--kk-deep-rgb), .35);
	rotate: 2deg;
}
.kk-hero-solo-pin img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Hero "mosaic": zentrierter Text + Pin-Reihe ── */
.kk-hero-v-mosaic { grid-template-columns: 1fr; text-align: center; padding-bottom: 48px; }
.kk-hero-inner-center { margin: 0 auto; text-align: center; }
.kk-hero-inner-center .kk-hero-ctas { justify-content: center; }
.kk-hero-mosaic {
	display: flex;
	justify-content: center;
	gap: clamp(12px, 2.5vw, 28px);
	margin-top: 36px;
}
.kk-mosaic-pin {
	width: clamp(120px, 22vw, 220px);
	aspect-ratio: 2 / 3;
	border-radius: var(--kk-radius-lg);
	overflow: hidden;
	box-shadow: 0 24px 56px rgba(var(--kk-deep-rgb), .28);
	animation: kkChipFloat 8s ease-in-out infinite;
}
.kk-mosaic-pin[style*="--i:0"] { rotate: -4deg; animation-delay: 0s; }
.kk-mosaic-pin[style*="--i:1"] { rotate: 2deg; translate: 0 -14px; animation-delay: 1.2s; }
.kk-mosaic-pin[style*="--i:2"] { rotate: 4deg; animation-delay: 2.4s; }
.kk-mosaic-pin img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Hero "editorial": reine Typo + Ghostword + Kategorie-Ticker ── */
.kk-hero-v-editorial { grid-template-columns: 1fr; text-align: center; min-height: min(640px, 86dvh); }
.kk-hero-title-xl { font-size: clamp(2.6rem, 7vw, 5.4rem); }
.kk-hero-ghostword {
	position: absolute;
	left: 50%; top: 52%;
	translate: -50% -50%;
	font-family: var(--kk-display);
	font-weight: 800;
	font-size: clamp(6rem, 22vw, 18rem);
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1px rgba(var(--kk-accent-rgb), .14);
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
}
.kk-hero-ticker {
	position: absolute;
	left: 0; right: 0; bottom: 22px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	font-size: .82rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.kk-hero-ticker a { color: var(--kk-ink-mute); font-weight: 600; }
.kk-hero-ticker a:hover { color: var(--kk-accent-dark); }
.kk-hero-ticker span { color: var(--kk-line-strong); }

/* ── Cover "wide": liegende weiße Editorial-Karte ── */
.kk-cwide {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: clamp(20px, 3vw, 40px);
	align-items: center;
	background: #fff;
	border: 1px solid var(--kk-line);
	border-radius: var(--kk-radius-lg);
	box-shadow: var(--kk-shadow-md);
	padding: clamp(18px, 2.5vw, 32px);
	color: var(--kk-ink);
}
.kk-cwide-pin { display: block; aspect-ratio: 2 / 3; border-radius: var(--kk-radius-md); overflow: hidden; }
.kk-cwide-pin img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kk-cwide-kicker { display: block; font-family: var(--kk-script); font-size: 1.6rem; color: var(--kk-accent-dark); margin-bottom: 6px; }
.kk-cwide-title { display: block; font-family: var(--kk-display); font-weight: 800; font-size: clamp(1.3rem, 2.6vw, 2rem); line-height: 1.15; margin: 8px 0; color: var(--kk-deep); }
.kk-cwide-excerpt { display: block; color: var(--kk-ink-soft); font-size: .96rem; margin-bottom: 12px; }
@media (max-width: 720px) { .kk-cwide { grid-template-columns: 1fr; } .kk-cwide-pin { max-width: 220px; margin: 0 auto; } }

/* ── Cover "panel": dunkles Split-Panel ── */
.kk-cpanel {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: clamp(28px, 4vw, 64px);
	align-items: center;
	background:
		radial-gradient(560px 300px at 90% 0%, rgba(var(--kk-accent-rgb), .25), transparent 60%),
		linear-gradient(150deg, var(--kk-tone-2) 0%, var(--kk-deep) 100%);
	border-radius: var(--kk-radius-lg);
	padding: clamp(28px, 5vw, 64px);
	overflow: hidden;
}
.kk-cpanel-kicker { display: block; font-family: var(--kk-script); font-size: 1.9rem; color: var(--kk-highlight); margin-bottom: 10px; rotate: -1.5deg; }
.kk-cpanel-title { color: #fff; font-size: clamp(1.7rem, 3.6vw, 2.8rem); margin: 12px 0 14px; max-width: 20ch; }
.kk-cpanel-excerpt { color: rgba(255, 255, 255, .78); max-width: 46ch; margin: 0 0 22px; }
.kk-cpanel-pin {
	display: block;
	justify-self: center;
	width: min(300px, 100%);
	aspect-ratio: 2 / 3;
	border-radius: var(--kk-radius-lg);
	overflow: hidden;
	box-shadow: 0 30px 70px rgba(0, 0, 0, .4);
	rotate: 2deg;
}
.kk-cpanel-pin img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 860px) { .kk-cpanel { grid-template-columns: 1fr; } .kk-cpanel-pin { width: min(240px, 78%); rotate: 0deg; } }

/* ── Kategorien "pills": große Ton-Pills ── */
.kk-cat-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.kk-cat-bigpill {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	padding: 16px 28px;
	border-radius: var(--kk-radius-pill);
	color: #fff;
	font-family: var(--kk-display);
	font-weight: 700;
	font-size: clamp(1rem, 1.8vw, 1.3rem);
	box-shadow: var(--kk-shadow-sm);
	transition: transform .25s var(--kk-ease), box-shadow .25s var(--kk-ease);
}
.kk-cat-bigpill:hover { transform: translateY(-3px) scale(1.03); box-shadow: var(--kk-shadow-md); color: #fff; }
.kk-cat-bigpill.kk-cat-tone-3 { color: var(--kk-deep); }
.kk-cat-bigpill.kk-cat-tone-3:hover { color: var(--kk-deep); }
.kk-cat-bigpill small { font-size: .72em; opacity: .7; font-family: var(--kk-sans); }
.kk-cat-bigpill.kk-cat-tone-0 { background: linear-gradient(150deg, var(--kk-accent), var(--kk-accent-dark)); }
.kk-cat-bigpill.kk-cat-tone-1 { background: linear-gradient(150deg, var(--kk-tone), var(--kk-tone-2)); }
.kk-cat-bigpill.kk-cat-tone-2 { background: linear-gradient(150deg, var(--kk-tone-2), var(--kk-deep)); }
.kk-cat-bigpill.kk-cat-tone-3 { background: linear-gradient(150deg, var(--kk-highlight), var(--kk-highlight-2)); }

/* ── Kategorien "strip": horizontale Snap-Reihe ── */
.kk-cat-strip {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 10px;
	-webkit-overflow-scrolling: touch;
}
.kk-cat-stripcard {
	scroll-snap-align: start;
	flex: 0 0 200px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 140px;
	padding: 18px;
	border-radius: var(--kk-radius-lg);
	color: #fff;
	position: relative;
	overflow: hidden;
}
.kk-cat-stripcard.kk-cat-tone-0 { background: linear-gradient(150deg, var(--kk-accent), var(--kk-accent-dark)); }
.kk-cat-stripcard.kk-cat-tone-1 { background: linear-gradient(150deg, var(--kk-tone), var(--kk-tone-2)); }
.kk-cat-stripcard.kk-cat-tone-2 { background: linear-gradient(150deg, var(--kk-tone-2), var(--kk-deep)); }
.kk-cat-stripcard.kk-cat-tone-3 { background: linear-gradient(150deg, var(--kk-highlight), var(--kk-highlight-2)); color: var(--kk-deep); }
.kk-cat-strip-name { font-family: var(--kk-display); font-weight: 800; font-size: 1.1rem; }

/* ── Testimonial "spotlight": eine große Stimme ── */
.kk-tm-spotlight { max-width: 680px; margin: 0 auto; text-align: center; }
.kk-tm-spotlight blockquote {
	font-family: var(--kk-true-serif);
	font-style: italic;
	font-size: clamp(1.2rem, 2.4vw, 1.6rem);
	line-height: 1.55;
	color: var(--kk-ink);
	border: none; background: none; padding: 0;
	margin: 0 0 22px;
}
.kk-tm-spotlight figcaption { display: flex; align-items: center; justify-content: center; gap: 12px; }

/* ── Autor "inline": minimal zentriert ── */
.kk-author-inline { text-align: center; max-width: 480px; margin: 0 auto; padding: 12px 0; }
.kk-author-inline-photo {
	display: inline-grid;
	place-items: center;
	width: 72px; height: 72px;
	border-radius: 50%;
	overflow: hidden;
	border: 3px solid var(--kk-accent);
	background: var(--kk-paper-3);
	font-family: var(--kk-display); font-weight: 800; font-size: 1.8rem; color: var(--kk-deep);
}
.kk-author-inline-photo img { width: 100%; height: 100%; object-fit: cover; }
.kk-author-inline-sig { font-family: var(--kk-script); font-size: 1.9rem; color: var(--kk-accent-dark); margin: 10px 0 2px; line-height: 1; }
.kk-author-inline-tag { color: var(--kk-ink-soft); font-size: .95rem; margin: 0 0 8px; }

/* ── FLAVORS: pro Blueprint eine eigene Anmutung ── */
.kk-flavor-sharp { --kk-radius-lg: 12px; --kk-radius-md: 8px; --kk-radius-sm: 4px; }
.kk-flavor-sharp .kk-eyebrow,
.kk-flavor-sharp .kk-section-kicker { letter-spacing: .3em; }
.kk-flavor-sharp .kk-section-head h2::after { width: 40px; height: 3px; border-radius: 0; }
.kk-flavor-sharp .kk-aurora, .kk-flavor-sharp .kk-sparkle-deco { display: none; }

.kk-flavor-glam { --kk-radius-lg: 26px; }
.kk-flavor-glam h1, .kk-flavor-glam h2 { letter-spacing: -.01em; font-weight: 700; }
.kk-flavor-glam .kk-section-kicker { color: var(--kk-highlight-2); }

.kk-flavor-warm .kk-scene { padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(48px, 7vw, 88px); }

.kk-flavor-clean .kk-aurora,
.kk-flavor-clean .kk-grain,
.kk-flavor-clean .kk-sparkle-deco,
.kk-flavor-clean #kk-glow { display: none !important; }
.kk-flavor-clean .kk-card { box-shadow: none; border: 1px solid var(--kk-line); }

@media (max-width: 900px) {
	.kk-hero-v-split { grid-template-columns: 1fr; }
	.kk-hero-solo-pin { width: min(240px, 70%); }
	.kk-hero-ghostword { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.kk-mosaic-pin { animation: none !important; }
}

/* =========================== 38. v5.8 AUDIT-FIXES =========================== */

/* Editor-Strip: echtes 3er-Grid (war nie definiert — Audit-Fund) */
.kk-card-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .kk-card-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .kk-card-grid-3 { grid-template-columns: 1fr; } }

/* Grid-Kinder: Text darf die Spalte nie sprengen */
.kk-author-strip-body,
.kk-cwide-body,
.kk-cpanel-body { min-width: 0; }