/* ==========================================================================
   Kathy Rivera theme: component styles
   Colors, fonts and base typography come from theme.json; this file handles
   layout and the custom pieces. Every class is prefixed kr-.
   1. Tokens & base   2. WordPress resets   3. Shared pieces   4. Header/footer
   5. Homepage sections   6. Blog   7. Motion
   ========================================================================== */

/* 1. Tokens & base */
:root {
	--kr-ivory: var(--wp--preset--color--ivory);
	--kr-navy: var(--wp--preset--color--navy);
	--kr-emerald: var(--wp--preset--color--emerald);
	--kr-emerald-dark: var(--wp--preset--color--emerald-dark);
	--kr-lime: var(--wp--preset--color--lime);
	--kr-cobalt: var(--wp--preset--color--cobalt);
	--kr-coral: var(--wp--preset--color--coral);
	--kr-lavender: var(--wp--preset--color--lavender);
	--kr-plum: var(--wp--preset--color--plum);
	--kr-brick: var(--wp--preset--color--brick);
	--kr-slate: var(--wp--preset--color--slate);
	--kr-serif: var(--wp--preset--font-family--serif);
	--kr-label: var(--wp--preset--font-family--label);
	--kr-mono: var(--wp--preset--font-family--mono);

	--kr-max: 1240px;
	--kr-gutter: clamp(18px, 4vw, 48px);
	--kr-section: clamp(72px, 10vw, 128px);
	--kr-hairline: rgba(16, 29, 58, 0.14);
	--kr-hairline-dark: rgba(253, 252, 247, 0.22);
	--kr-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--kr-hatch-dark: repeating-linear-gradient(135deg, rgba(16, 29, 58, 0.07) 0 1px, transparent 1px 12px);
	--kr-hatch-light: repeating-linear-gradient(135deg, rgba(253, 252, 247, 0.08) 0 1px, transparent 1px 12px);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

::selection {
	background: var(--kr-lime);
	color: var(--kr-navy);
}

a:focus-visible,
button:focus-visible,
.wp-element-button:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--kr-ivory), 0 0 0 5px var(--kr-navy);
	border-radius: 6px;
}

/* 2. WordPress resets: homepage sections manage their own spacing */
.wp-site-blocks > * {
	margin-block: 0;
}

.kr-front .wp-block-post-content > *,
:root :where(.kr-header, .kr-footer, .kr-front) :where(.is-layout-flow, .is-layout-flex, .is-layout-constrained) > * {
	margin-block: 0;
}

.kr-front :is(h1, h2, h3, p, ul, ol, figure) {
	margin: 0;
}

/* 3. Shared pieces ------------------------------------------------------ */
.kr-container {
	max-width: var(--kr-max);
	margin-inline: auto;
	padding-inline: var(--kr-gutter);
}
/* Sections are "full width" blocks so the editor shows them edge to edge;
   keep the ones that are also containers at the content width. */
.kr-container.alignfull {
	max-width: var(--kr-max) !important;
	margin-inline: auto !important;
}

.kr-section {
	padding-block: var(--kr-section);
	scroll-margin-top: 80px;
}

.kr-h2 {
	font-family: var(--kr-serif);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.03;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.kr-lead {
	max-width: 52ch;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.65;
	color: var(--kr-slate);
	text-wrap: pretty;
}

.kr-label {
	font-family: var(--kr-label);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--kr-emerald-dark);
}

/* H2 + intro side by side, stacking on narrow screens */
.kr-split-head {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
	gap: 16px clamp(20px, 5vw, 72px);
	margin-bottom: clamp(40px, 6vw, 72px);
}
.kr-split-head > * {
	min-width: 0;
}

/* Buttons (base look comes from theme.json) */
.wp-block-buttons {
	gap: 12px;
}
.wp-element-button {
	transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.wp-block-button__link {
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 2px solid var(--kr-navy);
	background: transparent;
	color: var(--kr-navy);
	padding: 12px 26px;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--kr-lime);
	color: var(--kr-navy);
}
.wp-block-button.is-style-kr-lime > .wp-block-button__link {
	background: var(--kr-lime);
	color: var(--kr-navy);
	padding: 15px 30px;
	font-size: 17px;
}
.wp-block-button.is-style-kr-lime > .wp-block-button__link:hover {
	background: var(--kr-coral);
	color: var(--kr-navy);
}
.wp-block-button.is-style-kr-outline-light > .wp-block-button__link {
	border: 2px solid var(--kr-ivory);
	background: transparent;
	color: var(--kr-ivory);
	padding: 13px 28px;
	font-size: 17px;
}
.wp-block-button.is-style-kr-outline-light > .wp-block-button__link:hover {
	background: var(--kr-ivory);
	color: var(--kr-navy);
}

/* Full-width, stacked buttons are easier to tap on small phones */
@media (max-width: 479px) {
	.kr-front .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}
	.kr-front .wp-block-button,
	.kr-front .wp-block-button__link {
		width: 100%;
	}
}

/* Image frames: fixed shape, hatched placeholder until an image is added.
   In the editor, click the image inside a frame and choose Replace/Upload. */
.kr-media {
	position: relative;
	display: grid;
	place-items: center;
	overflow: hidden;
	background: var(--kr-media-bg, var(--kr-navy));
	color: var(--kr-media-fg, var(--kr-navy));
	--kr-caption: "[ image ]";
}
.kr-media::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--kr-hatch-dark);
	pointer-events: none;
}
.kr-media::after {
	content: var(--kr-caption);
	position: relative;
	padding: 0 24px;
	font-family: var(--kr-mono);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-align: center;
	pointer-events: none;
}
.kr-media:has(img[src])::before,
.kr-media:has(img[src])::after {
	display: none;
}
.kr-media .wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
}
.kr-media .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Editor: let the frame color and caption show through the empty image */
.kr-media .components-placeholder {
	position: relative;
	z-index: 1;
	min-height: 100%;
	background: transparent;
	box-shadow: none;
	color: inherit;
}
.kr-media .components-placeholder__illustration {
	display: none;
}
.kr-media--dark {
	--kr-media-fg: var(--kr-ivory);
}
.kr-media--dark::before {
	background: var(--kr-hatch-light);
}
.kr-media--lime { --kr-media-bg: var(--kr-lime); }
.kr-media--coral { --kr-media-bg: var(--kr-coral); }
.kr-media--lavender { --kr-media-bg: var(--kr-lavender); }
.kr-media--cobalt { --kr-media-bg: var(--kr-cobalt); }

/* 4. Header & footer ---------------------------------------------------- */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}
.kr-header {
	position: relative;
	isolation: isolate;
	border-bottom: 1px solid rgba(16, 29, 58, 0.08);
}
/* The blur sits on a background layer: a backdrop-filter on the header itself
   would trap the full-screen phone menu inside the header bar. */
.kr-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(253, 252, 247, 0.94);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.kr-nav {
	gap: 16px;
	padding-block: 6px;
	min-height: 60px;
}

.kr-brand {
	margin: 0;
	font-family: var(--kr-serif);
	font-size: 21px;
	line-height: 1.2;
}
.kr-brand a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-block: 8px;
	color: var(--kr-navy);
	text-decoration: none;
}
.kr-brand a::before {
	content: "✦" / "";
	display: grid;
	place-items: center;
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--kr-emerald);
	color: var(--kr-lime);
	font-size: 16px;
}

.kr-menu {
	font-size: 15px;
	font-weight: 500;
	gap: clamp(14px, 2.4vw, 30px);
}
.kr-menu .wp-block-navigation__container {
	gap: clamp(14px, 2.4vw, 30px);
}
.kr-menu .wp-block-navigation-item__content {
	padding-block: 12px;
	color: var(--kr-navy);
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 calc(100% - 9px);
	background-size: 0% 1.5px;
	transition: background-size 220ms ease, color 220ms ease;
}
.kr-menu .wp-block-navigation-item__content:hover,
.kr-menu .wp-block-navigation-item__content:focus-visible,
.kr-menu .wp-block-navigation-item__content[aria-current] {
	color: var(--kr-emerald);
	background-size: 100% 1.5px;
}
.kr-menu .kr-nav-cta > .wp-block-navigation-item__content {
	padding: 10px 20px;
	border-radius: 999px;
	background: var(--kr-navy);
	color: var(--kr-ivory);
	transition: background-color 200ms ease;
}
.kr-menu .kr-nav-cta > .wp-block-navigation-item__content:hover,
.kr-menu .kr-nav-cta > .wp-block-navigation-item__content:focus-visible {
	background: var(--kr-emerald);
	color: var(--kr-ivory);
}

/* Phone menu (core Navigation overlay) */
.kr-menu .wp-block-navigation__responsive-container-open {
	display: none;
}
@media (max-width: 599px) {
	.kr-menu .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border: 2px solid var(--kr-navy);
		border-radius: 50%;
		color: var(--kr-navy);
	}
}
.kr-menu .wp-block-navigation__responsive-container.is-menu-open {
	padding: 24px var(--kr-gutter);
	background: var(--kr-ivory);
	color: var(--kr-navy);
}
.kr-menu .is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 56px;
}
.kr-menu .is-menu-open .wp-block-navigation__container {
	width: 100%;
	gap: 0;
	align-items: stretch;
	font-size: 24px;
	font-family: var(--kr-serif);
}
.kr-menu .is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid rgba(16, 29, 58, 0.08);
}
.kr-menu .is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding-block: 16px;
	background-image: none;
}
.kr-menu .is-menu-open .kr-nav-cta {
	border-bottom: 0;
	padding-top: 24px;
}
.kr-menu .is-menu-open .kr-nav-cta > .wp-block-navigation-item__content {
	padding: 14px 20px;
	text-align: center;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 18px;
	font-weight: 600;
}
.kr-menu .wp-block-navigation__responsive-container-close {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
}

.kr-footer {
	padding: 0 var(--kr-gutter) 36px;
	background: var(--kr-navy);
	color: var(--kr-ivory);
}
.kr-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	max-width: var(--kr-max);
	margin-inline: auto;
	padding: 16px 28px;
	border: 1px solid var(--kr-hairline-dark);
	border-radius: 28px;
}
.kr-footer__motto {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--kr-serif);
	font-size: 18px;
}
.kr-footer__motto::before {
	content: "✦" / "";
	color: var(--kr-lime);
}
.kr-footer__tagline {
	font-family: var(--kr-mono);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(253, 252, 247, 0.82);
}
.kr-footer__copy {
	font-size: 14px;
	color: rgba(253, 252, 247, 0.82);
}
@media (max-width: 599px) {
	.kr-footer__bar {
		flex-direction: column;
		padding: 22px 20px;
		text-align: center;
	}
}
/* The blog has no contact section, so give the footer some room on top */
body:not(.home) .kr-footer {
	padding-top: 36px;
}

/* 5. Homepage sections --------------------------------------------------- */

/* Hero */
.kr-hero {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	align-items: center;
	gap: clamp(40px, 6vw, 88px);
	padding-top: clamp(40px, 7vw, 96px);
	padding-bottom: clamp(56px, 7vw, 96px);
	overflow-x: clip; /* the tag's entrance slides in from beyond the edge */
}
.kr-hero > * {
	min-width: 0;
}
.kr-hero__text {
	display: flex;
	flex-direction: column;
}
.kr-hero__hello {
	margin-bottom: 20px !important;
	font-size: clamp(24px, 6vw, 28px);
	font-weight: 600;
	line-height: 1.2;
	color: var(--kr-emerald);
}
.kr-hero__title {
	max-width: 12ch;
	font-family: var(--kr-serif);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--huge);
	line-height: 1.05;
	letter-spacing: -0.035em;
	text-wrap: balance;
}
.kr-hero__title em {
	color: var(--kr-emerald);
	font-weight: 500;
}
.kr-hero__lead {
	margin-top: 28px !important;
}
.kr-hero__actions {
	margin-top: 32px !important;
}
.kr-hero__visual {
	position: relative;
	justify-self: center;
	width: 100%;
	max-width: 460px;
}
.kr-media--arch {
	aspect-ratio: 4 / 5;
	border-radius: 240px 240px 24px 24px;
	--kr-caption: "[ hero illustration ]";
}
.kr-hero__tag {
	position: absolute !important;
	left: -12px;
	bottom: 40px;
	max-width: calc(100% + 12px);
	padding: 14px 20px;
	border-radius: 14px;
	background: var(--kr-lime);
	color: var(--kr-navy);
	font-family: var(--kr-serif);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(17px, 1.6vw, 20px);
	line-height: 1.4;
	box-shadow: 0 10px 30px rgba(16, 29, 58, 0.12);
	transform-origin: left center;
}
.kr-hero__tag::after {
	content: "✦" / "";
	display: inline-block;
	margin-left: 0.3em;
	font-style: normal;
}

/* Focus areas band */
.kr-band {
	background: var(--kr-cobalt);
	color: var(--kr-ivory);
}
.kr-band__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: 14px clamp(16px, 3vw, 40px);
	padding-block: clamp(24px, 3vw, 34px);
	list-style: none;
	font-family: var(--kr-serif);
	font-style: italic;
	font-size: clamp(20px, 1.9vw, 25px);
	line-height: 1.2;
}
.kr-band__list li {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}
.kr-band__list li::before {
	content: "✦" / "";
	font-style: normal;
	font-size: 14px;
	color: var(--kr-lime);
}

/* Approach */
.kr-approach__head {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.kr-approach__head .kr-h2 {
	max-width: 900px;
}
.kr-approach__head .kr-h2 em {
	color: var(--kr-emerald);
}
.kr-approach__intro {
	max-width: 62ch;
}
@media (min-width: 1024px) {
	.kr-approach__intro {
		max-width: 84ch;
	}
}
.kr-steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 36px 20px;
	margin-top: clamp(56px, 7vw, 88px) !important;
}
.kr-steps::before {
	content: "";
	display: none;
	position: absolute;
	left: 28px;
	right: 28px;
	top: 28px;
	height: 1.5px;
	background: rgba(16, 29, 58, 0.22);
	transform-origin: left center;
}
.kr-step {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}
.kr-step__num {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--kr-dot-bg);
	color: var(--kr-dot-fg);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
}
.kr-step:nth-child(6n + 1) { --kr-dot-bg: var(--kr-emerald); --kr-dot-fg: var(--kr-ivory); }
.kr-step:nth-child(6n + 2) { --kr-dot-bg: var(--kr-coral); --kr-dot-fg: var(--kr-navy); }
.kr-step:nth-child(6n + 3) { --kr-dot-bg: var(--kr-cobalt); --kr-dot-fg: var(--kr-ivory); }
.kr-step:nth-child(6n + 4) { --kr-dot-bg: var(--kr-lime); --kr-dot-fg: var(--kr-navy); }
.kr-step:nth-child(6n + 5) { --kr-dot-bg: var(--kr-lavender); --kr-dot-fg: var(--kr-navy); }
.kr-step:nth-child(6n + 6) { --kr-dot-bg: var(--kr-navy); --kr-dot-fg: var(--kr-lime); }
.kr-step__title {
	margin-top: 10px !important;
	font-family: var(--kr-serif);
	font-weight: 500;
	font-size: 23px;
	line-height: 1.2;
}
.kr-step p:not(.kr-step__num) {
	font-size: 16px;
	line-height: 1.55;
	color: var(--kr-slate);
}
/* Phones: center each step */
@media (max-width: 599px) {
	.kr-step {
		align-items: center;
		text-align: center;
	}
	.kr-step p:not(.kr-step__num) {
		max-width: 34ch;
	}
}

/* Selected work */
.kr-work {
	background: var(--kr-emerald);
	color: var(--kr-ivory);
}
.kr-work__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 32px;
	margin-bottom: 48px !important;
	padding-bottom: 24px;
	border-bottom: 1px solid rgba(253, 252, 247, 0.3);
}
.kr-work__head .kr-h2 {
	line-height: 1;
}
.kr-work__tagline {
	font-family: var(--kr-serif);
	font-style: italic;
	font-size: clamp(24px, 2.4vw, 30px);
	color: var(--kr-lime);
}
.kr-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 24px;
}
.kr-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border-radius: 24px;
	background: var(--kr-ivory);
	color: var(--kr-navy);
	scroll-margin-top: 96px;
	transition: transform 250ms ease, box-shadow 250ms ease;
}
@media (hover: hover) {
	.kr-card:hover {
		transform: translateY(-4px);
		box-shadow: 0 16px 32px rgba(6, 40, 34, 0.28);
	}
}
.kr-card--lime { --kr-media-bg: var(--kr-lime); --kr-eyebrow: var(--kr-emerald-dark); }
.kr-card--coral { --kr-media-bg: var(--kr-coral); --kr-eyebrow: var(--kr-brick); }
.kr-card--lavender { --kr-media-bg: var(--kr-lavender); --kr-eyebrow: var(--kr-plum); }
.kr-card__media {
	aspect-ratio: 16 / 10;
	--kr-caption: "[ project image ]";
}
.kr-card__index {
	position: absolute !important; /* !important beats the editor's block wrapper */
	z-index: 1;
	left: 20px;
	top: 18px;
	font-family: var(--kr-serif);
	font-size: 44px;
	line-height: 1.2;
	color: var(--kr-navy);
}
.kr-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 12px;
	padding: 28px;
}
.kr-card__eyebrow {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--kr-eyebrow, var(--kr-emerald-dark));
}
.kr-card__title {
	font-family: var(--kr-serif);
	font-weight: 500;
	font-size: clamp(23px, 2vw, 27px);
	line-height: 1.15;
}
.kr-card__title a {
	color: inherit;
	text-decoration: none;
}
.kr-card__text {
	font-size: 16px;
	line-height: 1.6;
	color: var(--kr-slate);
}
.kr-card__result {
	margin-top: auto !important;
	padding-top: 18px;
	border-top: 1px solid rgba(16, 29, 58, 0.1);
	font-size: 15px;
	font-weight: 600;
}

/* A few things I've learned */
.kr-learned {
	background: var(--kr-navy);
	color: var(--kr-ivory);
}
.kr-learned .kr-split-head {
	align-items: end;
}
.kr-learned .kr-h2 em {
	color: var(--kr-lime);
}
.kr-learned .kr-lead {
	color: rgba(253, 252, 247, 0.88);
}
.kr-lessons {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
	gap: 0 clamp(32px, 5vw, 72px);
}
.kr-lessons__col {
	min-width: 0;
}
.kr-lesson {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 4px 20px;
	padding: 28px 0 32px;
	border-top: 1px solid var(--kr-hairline-dark);
}
.kr-lesson__num {
	grid-row: span 2;
	padding-top: 7px;
	font-family: var(--kr-label);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.08em;
	color: var(--kr-lime);
}
.kr-lesson__title {
	font-family: var(--kr-serif);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.25;
	text-wrap: pretty;
}
.kr-lesson__text {
	max-width: 52ch;
	margin-top: 8px !important;
	font-size: 16px;
	line-height: 1.6;
	color: rgba(253, 252, 247, 0.8);
	text-wrap: pretty;
}

/* Illustrations */
.kr-illustrations .kr-split-head {
	align-items: last baseline;
	margin-bottom: 44px;
}
.kr-illustrations .kr-h2 {
	font-style: italic;
	line-height: 1;
	color: var(--kr-plum);
}
.kr-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 16px;
}
.kr-gallery .kr-media {
	aspect-ratio: 1;
	border-radius: 24px;
	--kr-caption: "[ illustration ]";
}
.kr-gallery .kr-media--featured {
	grid-row: span 2;
	aspect-ratio: auto;
	min-height: 400px;
	--kr-caption: "[ featured illustration ]";
}
.kr-gallery .kr-media--arch-small {
	border-radius: 120px 120px 24px 24px;
}
.kr-media--circle {
	border-radius: 50% !important;
}
/* Phones: featured piece full width, the four squares in a 2×2 grid */
@media (max-width: 559px) {
	.kr-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
	.kr-gallery .kr-media--featured {
		grid-row: auto;
		grid-column: 1 / -1;
		aspect-ratio: 4 / 5;
		min-height: 0;
	}
	.kr-gallery .kr-media--arch-small {
		border-radius: 999px 999px 18px 18px;
	}
	.kr-gallery .kr-media:not(.kr-media--circle, .kr-media--arch-small) {
		border-radius: 18px;
	}
	.kr-gallery .kr-media::after {
		padding: 0 8px;
		font-size: 10px;
	}
}

/* About */
.kr-about {
	background: var(--kr-lime);
	color: var(--kr-navy);
}
.kr-about__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
	align-items: center;
	gap: clamp(40px, 6vw, 96px);
}
.kr-about__grid > * {
	min-width: 0;
}
.kr-portrait {
	position: relative;
	justify-self: center;
	width: 100%;
	max-width: 420px;
}
.kr-portrait .kr-media {
	aspect-ratio: 1;
	--kr-caption: "[ headshot ]";
}
.kr-sticker-ideas {
	position: absolute;
	z-index: 2;
	left: clamp(-14px, -2vw, -6px);
	bottom: clamp(4px, 2vw, 16px);
	display: grid;
	place-items: center;
	width: clamp(96px, 24vw, 124px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--kr-coral);
	color: var(--kr-navy);
	font-family: var(--kr-mono);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.14em;
	line-height: 1.6;
	text-align: center;
	transform: rotate(-10deg);
}
.kr-sticker-flower {
	position: absolute;
	z-index: 3;
	right: 0;
	top: 8px;
	display: grid;
	place-items: center;
	width: clamp(72px, 18vw, 92px);
	aspect-ratio: 1;
	border: 1.5px solid var(--kr-navy);
	border-radius: 50%;
	background: var(--kr-ivory);
}
.kr-sticker-flower svg {
	width: 78%;
	height: auto;
	aspect-ratio: 1;
	overflow: visible;
}
.kr-petal,
.kr-flower-center {
	transform-box: view-box;
	transform-origin: 50px 50px;
}
.kr-petal {
	transform: rotate(var(--rot, 0deg));
}
.kr-about__text {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.kr-about__text .kr-h2 {
	font-size: clamp(38px, 5vw, 60px);
	letter-spacing: -0.02em;
}
.kr-about__copy {
	max-width: 58ch;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.65;
	text-wrap: pretty;
}
.kr-about__copy + .kr-about__copy {
	margin-top: -4px !important;
}
.kr-about__actions {
	padding-top: 6px;
}

/* Currently curious about */
.kr-curious .kr-split-head {
	align-items: start;
	gap: 20px clamp(20px, 5vw, 72px);
	margin-bottom: clamp(48px, 6vw, 80px);
}
.kr-curious .kr-h2 em {
	color: var(--kr-emerald);
	font-weight: 500;
}
.kr-curious__intro {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 56ch;
}
.kr-curious__intro .kr-lead {
	max-width: none;
}
.kr-curious__tagline {
	font-family: var(--kr-serif);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(21px, 1.9vw, 25px);
	line-height: 1.35;
}
.kr-curious__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	align-items: start;
	gap: clamp(36px, 4vw, 56px) clamp(28px, 4vw, 56px);
}
.kr-curious-module {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
	padding-top: 22px;
	border-top: 2px solid var(--kr-navy);
}
.kr-curious-module p:empty {
	display: none;
}
.kr-curious__note {
	font-size: 16px;
	line-height: 1.6;
	color: var(--kr-slate);
	text-wrap: pretty;
}
.kr-learning-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 0;
	list-style: none;
	counter-reset: kr-learning;
	font-family: var(--kr-serif);
	font-size: 25px;
	line-height: 1.2;
}
.kr-learning-list li {
	display: flex;
	align-items: baseline;
	gap: 14px;
	counter-increment: kr-learning;
}
.kr-learning-list li::before {
	content: counter(kr-learning, decimal-leading-zero);
	font-family: var(--kr-label);
	font-weight: 500;
	font-size: 12px;
	color: var(--kr-emerald-dark);
}
.kr-book__title {
	font-family: var(--kr-serif);
	font-style: italic;
	font-size: clamp(26px, 2.6vw, 34px);
	line-height: 1.15;
}
.kr-book__author {
	margin-top: -12px !important;
	font-size: 16px;
	font-weight: 600;
}
.kr-fact {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 6px !important;
	padding: 20px 22px;
	border-radius: 20px;
	background: var(--kr-lime);
	color: var(--kr-navy);
}
.kr-fact:has(.kr-fact__text:empty) {
	display: none;
}
.kr-fact__label {
	font-family: var(--kr-label);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.kr-fact__text {
	font-size: 16px;
	line-height: 1.55;
	text-wrap: pretty;
}
.kr-dot-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 0;
	list-style: none;
	font-size: 17px;
	line-height: 1.5;
}
.kr-dot-list li {
	display: flex;
	align-items: baseline;
	gap: 12px;
}
.kr-dot-list li::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--kr-emerald);
	transform: translateY(-3px);
}
.kr-curious__closing {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-top: clamp(48px, 6vw, 72px) !important;
	padding-top: 22px;
	border-top: 1px solid var(--kr-hairline);
	font-family: var(--kr-serif);
	font-style: italic;
	font-size: clamp(15px, 1.2vw, 17px);
}
.kr-curious__closing::before {
	content: "✦" / "";
	font-style: normal;
	color: var(--kr-emerald);
}

/* Contact */
.kr-contact {
	background: var(--kr-navy);
	color: var(--kr-ivory);
	padding-block: clamp(80px, 11vw, 136px);
}
.kr-contact__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 26px;
	text-align: center;
}
.kr-sparkles {
	display: flex;
	gap: 18px;
	font-size: 22px;
	color: var(--kr-lime);
}
.kr-sparkles span {
	display: inline-block;
}
.kr-contact .kr-h2 {
	max-width: 16ch;
	font-size: clamp(42px, 6.5vw, 88px);
	line-height: 1.02;
}
.kr-contact .kr-h2 em {
	color: var(--kr-lime);
}
.kr-contact .kr-lead {
	max-width: 56ch;
	line-height: 1.6;
	color: rgba(253, 252, 247, 0.9);
}
.kr-contact__actions {
	justify-content: center;
}

/* Wide layouts (≥1150px): 4-col band, 6-col steps, connecting line */
@media (min-width: 1150px) {
	.kr-band__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.kr-steps {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
	.kr-steps::before {
		display: block;
	}
}

/* 6. Blog ---------------------------------------------------------------- */
.kr-blog__head {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: clamp(40px, 6vw, 72px);
	padding-bottom: 28px;
	border-bottom: 1px solid var(--kr-hairline);
}
.kr-blog__head em,
.kr-latest .kr-h2 em,
.kr-substack .kr-h2 em,
.kr-404 .kr-h2 em {
	color: var(--kr-emerald);
}
.kr-blog__head .wp-block-term-description p {
	margin: 0;
}

.kr-post-grid {
	gap: clamp(28px, 3vw, 40px) 24px;
}
.kr-post-card {
	display: flex;
	flex-direction: column;
	gap: 0;
	height: 100%;
}
/* Posts without a featured image get a hatched color block, so rows line up */
.kr-post-card:not(:has(.kr-post-card__image))::before {
	content: "";
	display: block;
	aspect-ratio: 16 / 10;
	margin-bottom: 18px;
	border-radius: 20px;
	background: var(--kr-hatch-dark), var(--kr-card-color, var(--kr-lime));
}
.kr-post-grid > li:nth-child(3n + 2) .kr-post-card { --kr-card-color: var(--kr-coral); }
.kr-post-grid > li:nth-child(3n + 3) .kr-post-card { --kr-card-color: var(--kr-lavender); }
.kr-post-card__image {
	margin: 0 0 18px !important;
	overflow: hidden;
	border-radius: 20px;
	background: var(--kr-lavender);
}
.kr-post-card__image img {
	transition: transform 400ms var(--kr-ease);
}
@media (hover: hover) {
	.kr-post-card:hover .kr-post-card__image img {
		transform: scale(1.03);
	}
}
.kr-post-card > .kr-post-card__body {
	margin-top: 0 !important;
}
.kr-post-card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.kr-post-card__terms,
.kr-post-tags {
	font-family: var(--kr-label);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--kr-emerald-dark);
}
.kr-post-card__terms a,
.kr-post-tags a {
	color: inherit;
	text-decoration: none;
}
.kr-post-card__title {
	margin: 0;
	font-family: var(--kr-serif);
	font-weight: 500;
	font-size: clamp(23px, 2vw, 27px);
	line-height: 1.15;
}
.kr-post-card__title a {
	color: var(--kr-navy);
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 1.5px;
	transition: background-size 250ms ease;
}
.kr-post-card__title a:hover {
	background-size: 100% 1.5px;
}
.kr-post-card__excerpt {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--kr-slate);
}
.kr-post-card__excerpt .wp-block-post-excerpt__excerpt {
	margin: 0;
}
.kr-post-card__date {
	font-size: 14px;
	color: var(--kr-slate);
}
.kr-pagination {
	margin-top: clamp(40px, 6vw, 64px) !important;
	padding-top: 24px;
	border-top: 1px solid var(--kr-hairline);
	font-weight: 600;
}
.kr-pagination a {
	color: var(--kr-navy);
}

/* Single post & regular pages */
.kr-article__head {
	padding-inline: var(--kr-gutter);
}
.kr-article__head > * + * {
	margin-top: 14px !important;
}
.kr-article__title,
.kr-page__title {
	font-size: clamp(40px, 5.4vw, 64px);
	line-height: 1.05;
	letter-spacing: -0.025em;
	text-wrap: balance;
}
.kr-article__image {
	margin-block: clamp(32px, 5vw, 56px) !important;
	padding-inline: var(--kr-gutter);
}
.kr-article__image img {
	border-radius: 24px;
}
.kr-prose {
	padding-inline: var(--kr-gutter);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.7;
}
.kr-prose > * + :is(h2, h3, h4) {
	margin-top: 2.2em !important;
}
.kr-prose a {
	text-underline-offset: 3px;
}
.kr-prose img {
	border-radius: 16px;
}
.kr-article__footer > * + * {
	margin-top: 28px !important;
}
.kr-article__footer {
	margin-top: clamp(48px, 6vw, 72px) !important;
	padding-top: 28px;
	padding-inline: var(--kr-gutter);
	border-top: 1px solid var(--kr-hairline);
}
.kr-post-nav {
	gap: 20px 32px;
}
.kr-post-nav .wp-block-post-navigation-link {
	max-width: 30ch;
}
.kr-post-nav a {
	color: var(--kr-navy);
	font-family: var(--kr-serif);
	font-size: 21px;
	line-height: 1.25;
	text-decoration: none;
}
.kr-post-nav a:hover {
	color: var(--kr-emerald);
}
.kr-post-nav .post-navigation-link__label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--kr-label);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--kr-emerald-dark);
}
.kr-post-nav .wp-block-post-navigation-link.post-navigation-link-next {
	margin-left: auto;
	text-align: right;
}
.kr-page {
	padding-inline: var(--kr-gutter);
}

/* Search field */
.kr-search .wp-block-search__input {
	min-height: 48px;
	padding: 10px 18px;
	border: 2px solid var(--kr-navy);
	border-radius: 999px;
	background: transparent;
	font: inherit;
}
.kr-search .wp-block-search__button {
	margin-left: 8px;
}
.kr-404 {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* RSS (Substack) list */
.kr-rss {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 24px;
	padding: 0;
	list-style: none;
}
.kr-rss .wp-block-rss__item {
	padding-top: 20px;
	border-top: 2px solid var(--kr-navy);
}
.kr-rss .wp-block-rss__item-title a {
	font-family: var(--kr-serif);
	font-size: 23px;
	color: var(--kr-navy);
	text-decoration: none;
}

/* 7. Motion: only when the visitor hasn't asked for reduced motion -------- */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}

	.kr-hero__lead {
		animation: kr-gentle-rise 600ms ease-out 80ms both;
	}
	.kr-hero__actions {
		animation: kr-gentle-rise 600ms ease-out 160ms both;
	}
	.kr-hero__tag {
		animation: kr-tag-in 700ms var(--kr-ease) 450ms both;
	}
	.kr-hero__tag::after {
		animation: kr-star-pop 600ms var(--kr-ease) 1050ms both;
	}
	.kr-sparkles span {
		animation: kr-sparkle-drift 4s ease-in-out 2;
	}
	.kr-sparkles span + span {
		animation-delay: 1.2s;
	}

	/* Scroll reveal: js/main.js adds .kr-anim + .is-pending to elements below
	   the fold, then removes .is-pending when they scroll into view. */
	.kr-anim,
	.kr-anim .kr-step__num,
	.kr-anim.kr-steps::before,
	.kr-anim .kr-sticker-flower,
	.kr-anim .kr-petal,
	.kr-anim .kr-flower-center {
		transition:
			opacity var(--dur, 500ms) ease var(--delay, 0ms),
			transform var(--dur, 500ms) var(--kr-ease) var(--delay, 0ms);
	}
	.kr-anim.is-pending:not(.kr-reveal-group) {
		opacity: 0;
		transform: translateY(12px);
	}

	/* Approach: circles stagger in, then the line draws */
	.kr-anim .kr-step__num {
		--dur: 600ms;
	}
	.kr-anim .kr-step:nth-child(1) .kr-step__num { --delay: 480ms; --from: translateY(-16px) scale(0.8); }
	.kr-anim .kr-step:nth-child(2) .kr-step__num { --delay: 560ms; --from: translateY(14px) scale(0.8); }
	.kr-anim .kr-step:nth-child(3) .kr-step__num { --delay: 640ms; --from: translateY(-10px) scale(0.8); }
	.kr-anim .kr-step:nth-child(4) .kr-step__num { --delay: 720ms; --from: translateY(16px) scale(0.8); }
	.kr-anim .kr-step:nth-child(5) .kr-step__num { --delay: 800ms; --from: translateY(-14px) scale(0.8); }
	.kr-anim .kr-step:nth-child(6) .kr-step__num { --delay: 880ms; --from: translateY(12px) scale(0.8); }
	.kr-anim.is-pending .kr-step__num {
		opacity: 0;
		transform: var(--from);
	}
	.kr-anim.kr-steps::before {
		--dur: 900ms;
		--delay: 1000ms;
	}
	.kr-anim.is-pending.kr-steps::before {
		transform: scaleX(0);
	}

	/* About: badge scales in, petals open, center pops */
	.kr-anim .kr-sticker-flower {
		--dur: 600ms;
	}
	.kr-anim.is-pending .kr-sticker-flower {
		opacity: 0;
		transform: scale(0.5);
	}
	.kr-anim .kr-petal {
		--dur: 900ms;
	}
	.kr-anim.is-pending .kr-petal {
		transform: var(--from);
	}
	.kr-anim .kr-flower-center {
		--dur: 500ms;
		--delay: 1100ms;
	}
	.kr-anim.is-pending .kr-flower-center {
		opacity: 0;
		transform: scale(0);
	}

	/* Small stagger for cards and gallery tiles */
	.kr-cards > :nth-child(2),
	.kr-gallery > :nth-child(2),
	.kr-gallery > :nth-child(4) { --delay: 60ms; }
	.kr-cards > :nth-child(3),
	.kr-gallery > :nth-child(3),
	.kr-gallery > :nth-child(5) { --delay: 120ms; }
	.kr-about__text { --delay: 90ms; }
}

@keyframes kr-gentle-rise {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes kr-tag-in {
	0% { opacity: 0; transform: translateX(-28px) rotate(-7deg) scale(0.88); }
	60% { opacity: 1; transform: translateX(4px) rotate(1.5deg) scale(1.02); }
	100% { opacity: 1; transform: none; }
}
@keyframes kr-star-pop {
	0% { opacity: 0; transform: scale(0) rotate(-120deg); }
	70% { opacity: 1; transform: scale(1.35) rotate(20deg); }
	100% { opacity: 1; transform: none; }
}
@keyframes kr-sparkle-drift {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50% { transform: translateY(-4px) rotate(8deg); }
}

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