@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/inter-400.ttf") format("truetype");
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/inter-600.ttf") format("truetype");
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/inter-700.ttf") format("truetype");
}

html {
	scroll-behavior: smooth;
}

.page-template-default.page .site-content,
.page-template-default.page .content-area,
.page-template-default.page .site-main,
.page-template-default.page .inside-article {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

.page-template-default.page #page {
	width: 100%;
	max-width: none;
}

.page-template-default.page .entry-content {
	margin: 0;
}

.cow-guide {
	--cow-deep: #0d382b;
	--cow-green: #187d4b;
	--cow-teal: #087f83;
	--cow-leaf: #8bbf44;
	--cow-mist: #edf3ef;
	--cow-paper: #fbfcfa;
	--cow-ink: #142019;
	--cow-muted: #5f6d65;
	--cow-rule: #cfdbd3;
	margin: 0;
	max-width: none;
	color: var(--cow-ink);
	font-family: "Inter", "Segoe UI", Arial, sans-serif;
	overflow: hidden;
}

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

.page .site-main .cow-guide .wp-block-group__inner-container {
	width: 100%;
	max-width: none;
	padding: 0;
}

.cow-guide h1,
.cow-guide h2,
.cow-guide p,
.cow-guide figure {
	margin-top: 0;
}

.cow-guide__inner {
	width: min(1170px, calc(100% - 40px));
	margin-inline: auto;
}

.cow-guide__hero {
	padding: 56px 0 60px;
	background: var(--cow-deep);
	color: #fff;
}

.cow-guide__hero-grid > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: minmax(0, .78fr) minmax(480px, 1.1fr);
	align-items: center;
	gap: clamp(44px, 6vw, 82px);
}

.cow-guide__hero-copy,
.cow-guide__hero-media,
.cow-guide__breed-body {
	min-width: 0;
}

.cow-guide__eyebrow,
.cow-guide__byline,
.cow-guide__number,
.cow-guide__facts-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .13em;
	line-height: 1.4;
	text-transform: uppercase;
}

.cow-guide__eyebrow {
	margin-bottom: 18px;
	color: #b9dc8e;
}

.cow-guide__hero h1 {
	max-width: 600px;
	margin-bottom: 22px;
	font-size: clamp(44px, 4.7vw, 64px);
	font-weight: 700;
	letter-spacing: -.045em;
	line-height: 1.02;
}

.cow-guide__hero-lede {
	max-width: 610px;
	margin-bottom: 22px;
	color: #dce8e2;
	font-size: 17px;
	line-height: 1.7;
}

.cow-guide__byline {
	margin-bottom: 0;
	color: #9fc9ba;
}

.cow-guide__hero-media {
	position: relative;
	margin-bottom: 0;
}

.cow-guide__hero-media::before {
	position: absolute;
	inset: 16px -16px -16px 16px;
	border: 1px solid rgba(139, 191, 68, .56);
	content: "";
}

.cow-guide__hero-media img {
	position: relative;
	display: block;
	width: 100%;
	height: 430px;
	background: #f3f1f1;
	object-fit: cover;
}

.cow-guide__intro {
	padding: 54px 0;
	background: var(--cow-paper);
}

.cow-guide__intro-content > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(310px, .44fr);
	gap: 64px;
	align-items: start;
}

.cow-guide__intro-copy h2 {
	margin-bottom: 20px;
	font-size: clamp(30px, 3vw, 42px);
	font-weight: 700;
	letter-spacing: -.032em;
	line-height: 1.08;
}

.cow-guide__intro-copy p {
	margin-bottom: 17px;
	font-size: 16px;
	line-height: 1.75;
}

.cow-guide__intro-copy p:last-child {
	margin-bottom: 0;
}

.cow-guide__summary {
	padding: 22px 24px;
	border-top: 3px solid var(--cow-teal);
	background: var(--cow-mist);
}

.cow-guide__summary p {
	margin-bottom: 14px;
	font-size: 14px;
	line-height: 1.65;
}

.cow-guide__summary p:last-child {
	margin-bottom: 0;
}

.cow-guide__index {
	padding: 44px 0;
	background: var(--cow-deep);
	color: #fff;
}

.cow-guide__index h2 {
	margin-bottom: 22px;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -.025em;
	line-height: 1.1;
}

.cow-guide__index-links {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px;
	margin-bottom: 0;
}

.cow-guide__index-links a {
	display: flex;
	align-items: center;
	min-height: 42px;
	padding: 8px 10px;
	border: 1px solid rgba(255, 255, 255, .2);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}

.cow-guide__index-links a:hover,
.cow-guide__index-links a:focus-visible {
	border-color: var(--cow-leaf);
	background: rgba(139, 191, 68, .14);
}

.cow-guide__list {
	padding: 8px 0 58px;
	background: #fff;
}

.cow-guide__breed {
	padding: 38px 0;
	border-top: 1px solid var(--cow-rule);
	scroll-margin-top: 110px;
}

.cow-guide__breed > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: 64px minmax(210px, .43fr) minmax(0, 1fr);
	gap: 30px;
	align-items: start;
}

.cow-guide__number {
	margin-bottom: 0;
	color: var(--cow-teal);
}

.cow-guide__breed h2 {
	margin-bottom: 0;
	font-size: clamp(24px, 2.2vw, 32px);
	font-weight: 700;
	letter-spacing: -.027em;
	line-height: 1.12;
}

.cow-guide__description {
	margin-bottom: 18px;
	color: var(--cow-muted);
	font-size: 16px;
	line-height: 1.72;
}

.cow-guide__breed-image {
	margin-bottom: 22px;
	background: var(--cow-mist);
	overflow: hidden;
}

.cow-guide__breed-image img {
	display: block;
	width: 100%;
	height: auto;
}

.cow-guide__description:last-child {
	margin-bottom: 0;
}

.cow-guide__facts {
	margin-top: 20px;
}

.cow-guide__facts > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	background: transparent;
}

.cow-guide__fact {
	min-width: 0;
	margin-bottom: 0;
	padding: 13px 15px;
	background: var(--cow-paper);
	border: 1px solid var(--cow-rule);
	font-size: 14px;
	line-height: 1.55;
}

.cow-guide__fact strong {
	display: block;
	margin-bottom: 4px;
	color: var(--cow-green);
	font-size: 11px;
	letter-spacing: .08em;
	line-height: 1.4;
	text-transform: uppercase;
}

.cow-guide__breed:nth-child(10n+1) {
	border-top-color: var(--cow-green);
}

.cow-guide a:focus-visible {
	outline: 3px solid var(--cow-leaf);
	outline-offset: 3px;
}

@media (max-width: 940px) {
	.cow-guide__hero-grid > .wp-block-group__inner-container,
	.cow-guide__intro-content > .wp-block-group__inner-container {
		grid-template-columns: 1fr;
	}

	.cow-guide__hero-media {
		max-width: 760px;
	}

	.cow-guide__index-links {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.cow-guide__breed > .wp-block-group__inner-container {
		grid-template-columns: 52px 210px minmax(0, 1fr);
		gap: 22px;
	}

	.cow-guide__facts > .wp-block-group__inner-container {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 680px) {
	.cow-guide__inner {
		width: min(100% - 32px, 1170px);
	}

	.cow-guide__hero {
		padding: 40px 0 46px;
	}

	.cow-guide__hero-grid > .wp-block-group__inner-container {
		gap: 34px;
	}

	.cow-guide__hero h1 {
		font-size: clamp(38px, 11vw, 46px);
	}

	.cow-guide__hero-media::before {
		inset: 9px -7px -9px 7px;
	}

	.cow-guide__hero-media img {
		height: auto;
	}

	.cow-guide__intro {
		padding: 40px 0;
	}

	.cow-guide__intro-content > .wp-block-group__inner-container {
		gap: 28px;
	}

	.cow-guide__intro-copy p {
		font-size: 15px;
	}

	.cow-guide__index {
		padding: 38px 0;
	}

	.cow-guide__index h2 {
		font-size: 27px;
	}

	.cow-guide__index-links {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cow-guide__index-links a {
		min-height: 46px;
	}

	.cow-guide__list {
		padding-bottom: 42px;
	}

	.cow-guide__breed {
		padding: 30px 0;
		scroll-margin-top: 84px;
	}

	.cow-guide__breed > .wp-block-group__inner-container {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.cow-guide__breed h2 {
		font-size: 27px;
	}

	.cow-guide__description {
		font-size: 15px;
	}

	.cow-guide__breed-image {
		margin-bottom: 18px;
	}

	.cow-guide__facts {
		margin-top: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}
