/* ============================================================
   EVERSOLE RUN FARM — shared site styles
   Link this from every page:  <link rel="stylesheet" href="eversole.css">

   Palette: paper #FAF8F4 | ink #241F1C | brand red #96322A
            pasture green #46543A | tan rule #B08A55
   ============================================================ */

:root {
	--paper:  #FAF8F4;
	--paper2: #F2EDE3;
	--ink:    #241F1C;
	--muted:  #5B554E;
	--red:    #96322A;
	--red-dk: #6E2119;
	--green:  #46543A;
	--tan:    #B08A55;
	--line:   #E2DCD1;
	--display: "Bitter", Georgia, "Times New Roman", serif;
	--body:    "Source Sans 3", "Segoe UI", Helvetica, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	font-family: var(--body);
	font-size: 1.06rem;
	line-height: 1.65;
	color: var(--ink);
	background: var(--paper);
}

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

a { color: var(--red); }
a:hover { color: var(--red-dk); }
a:focus-visible { outline: 3px solid var(--tan); outline-offset: 2px; }

h1, h2, h3, h6 { font-family: var(--display); color: var(--ink); }

.wrap { max-width: 1205px; margin: 0 auto; padding: 0 1.25rem; }
.prose { max-width: 66ch; }
.prose p { margin-bottom: 1.1rem; }

/* ---------- Header & navigation ---------- */
header.site-header {
	background: var(--ink);
	color: var(--paper);
	border-bottom: 4px solid var(--red);
}
.header-inner {
	max-width: 1205px;
	margin: 0 auto;
	padding: 0.75rem 1rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}
.brand {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	text-decoration: none;
	color: var(--paper);
}
.brand img { width: 78px; height: auto; }
.brand-name {
	font-family: var(--display);
	font-weight: 800;
	font-size: 1.35rem;
	line-height: 1.15;
	letter-spacing: 0.02em;
}
.brand-name small {
	display: block;
	font-family: var(--body);
	font-weight: 600;
	font-size: 0.72rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--tan);
	margin-top: 0.2rem;
}

nav { margin-left: auto; }
.nav-toggle {
	display: none;
	margin-left: auto;
	background: none;
	border: 2px solid var(--tan);
	border-radius: 6px;
	color: var(--paper);
	font: 600 1rem var(--body);
	padding: 0.45rem 0.9rem;
	cursor: pointer;
}
.nav-links {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
}
.nav-links a {
	display: block;
	padding: 0.55rem 0.8rem;
	color: var(--paper);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.95rem;
	border-radius: 5px;
	white-space: nowrap;
}
.nav-links a:hover,
.nav-links a:focus-visible { background: var(--red); color: #fff; }
.nav-links a[aria-current="page"] { background: var(--red); color: #fff; }

/* ---------- Carousel ----------
   Fixed-ratio frame + object-fit: cover means every photo
   displays at exactly the same size, whatever its original
   dimensions. */
.carousel {
	position: relative;
	max-width: 1205px;
	margin: 0 auto;
	aspect-ratio: 1205 / 436;
	overflow: hidden;
	background: var(--ink);
}
.carousel .slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1s ease;
}
.carousel .slide.active { opacity: 1; }
.carousel .slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.carousel-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	background: rgba(36, 31, 28, 0.55);
	color: #fff;
	border: none;
	font-size: 1.9rem;
	line-height: 1;
	padding: 0.55rem 0.85rem 0.7rem;
	cursor: pointer;
	border-radius: 6px;
	opacity: 0;
	transition: opacity 0.3s ease;
}
.carousel:hover .carousel-btn,
.carousel-btn:focus-visible { opacity: 1; }
.carousel-btn.prev { left: 0.75rem; }
.carousel-btn.next { right: 0.75rem; }
.carousel-btn:hover { background: var(--red); }

/* Title overlay used on interior pages */
.hero-scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(36,31,28,0) 45%, rgba(36,31,28,0.75) 100%);
}
.hero-copy {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 0 1.5rem 2rem;
	max-width: 1205px;
	margin: 0 auto;
	color: #fff;
	pointer-events: none;
}
.hero-copy .eyebrow { color: var(--tan); margin-bottom: 0.5rem; }
.hero-copy h1 {
	color: #fff;
	font-size: clamp(1.8rem, 4.5vw, 3rem);
	font-weight: 800;
	line-height: 1.15;
}
.hero-copy p {
	max-width: 52ch;
	color: rgba(255,255,255,0.92);
	margin-top: 0.4rem;
}

@media (max-width: 700px) {
	.carousel { aspect-ratio: 4 / 3; }
	.carousel-btn { opacity: 1; }
	.hero-copy { padding-bottom: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
	.carousel .slide { transition: none; }
	html { scroll-behavior: auto; }
}

/* ---------- Section rhythm ---------- */
section { padding: 3.5rem 0; }
section + section { border-top: 1px solid var(--line); }
.band { background: var(--paper2); }

.eyebrow {
	display: block;
	font-family: var(--body);
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--green);
	margin-bottom: 0.6rem;
}
h1.page-title {
	font-size: clamp(1.7rem, 4vw, 2.5rem);
	font-weight: 800;
	line-height: 1.2;
	margin-bottom: 0.5rem;
}
h2.section-title {
	font-size: clamp(1.6rem, 3.4vw, 2.3rem);
	font-weight: 800;
	line-height: 1.2;
	margin-bottom: 1.25rem;
}
h3 {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--red-dk);
	margin: 2rem 0 0.6rem;
}
.lead { font-size: 1.16rem; max-width: 60ch; }

.callout {
	border-left: 4px solid var(--tan);
	background: var(--paper2);
	padding: 1rem 1.25rem;
	margin: 1.5rem 0;
	border-radius: 0 6px 6px 0;
	max-width: 66ch;
}
.band .callout { background: #fff; }
.callout p { margin: 0; }

blockquote {
	margin: 1.4rem 0;
	padding: 0.25rem 0 0.25rem 1.35rem;
	border-left: 4px solid var(--tan);
	font-family: var(--display);
	font-style: italic;
	font-size: 1.12rem;
	color: var(--red-dk);
	max-width: 66ch;
}
blockquote cite {
	display: block;
	font-family: var(--body);
	font-style: normal;
	font-size: 0.9rem;
	color: var(--muted);
	margin-top: 0.5rem;
}

.split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 2.5rem;
	align-items: start;
}
.split .prose { max-width: none; }
.figure img { border-radius: 8px; border: 1px solid var(--line); }
.figure figcaption { font-size: 0.85rem; color: var(--muted); margin-top: 0.5rem; }

.thumb-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0.5rem 0 0.25rem; }
.thumb-row img { width: 150px; border-radius: 8px; border: 1px solid var(--line); }

/* ---------- Cards (cooking guides, contact, etc.) ---------- */
.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.25rem;
	margin-top: 1.25rem;
}
.card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 1.4rem 1.5rem;
}
.band .card { background: var(--paper); }

/* ---------- Buttons ---------- */
.btn {
	display: inline-block;
	padding: 0.65rem 1.4rem;
	border-radius: 6px;
	background: var(--red);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	letter-spacing: 0.5px;
	border: none;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(36, 31, 28, 0.2);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn:hover {
	background: var(--red-dk);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 4px 10px rgba(36, 31, 28, 0.3);
}

/* ---------- Disclaimer ---------- */
.disclaimer {
	border: 1px solid var(--line);
	background: #fff;
	color: var(--muted);
	font-size: 0.8rem;
	line-height: 1.55;
	border-radius: 8px;
	padding: 1.1rem 1.4rem;
	margin-top: 2rem;
	max-width: 900px;
}
.disclaimer strong { color: var(--ink); }
.disclaimer p + p { margin-top: 0.7rem; }

/* ---------- Footer ---------- */
footer {
	background: var(--ink);
	color: var(--paper);
	margin-top: 2.5rem;
	border-top: 4px solid var(--red);
}
.footer-inner {
	max-width: 1205px;
	margin: 0 auto;
	padding: 2rem 1.25rem;
	text-align: center;
}
footer h2 {
	color: var(--tan);
	font-size: 1rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	margin-bottom: 0.8rem;
}
footer p { margin: 0.25rem 0; }
footer a { color: #E8B08A; }
.ftr-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem 1.1rem;
	margin: 1.1rem 0 0;
}
.ftr-nav a { color: var(--paper); text-decoration: none; font-size: 0.92rem; }
.ftr-nav a:hover { color: #E8B08A; }
.ftr-note { margin-top: 1.4rem; font-size: 0.8rem; color: #A89E91; }

/* ---------- Mobile layout ---------- */
@media (max-width: 900px) {
	.nav-toggle { display: block; }
	nav { flex-basis: 100%; margin-left: 0; }
	.nav-links {
		display: none;
		flex-direction: column;
		gap: 0;
		padding: 0.5rem 0 0.75rem;
	}
	.nav-links.open { display: flex; }
	.nav-links a { padding: 0.7rem 0.5rem; font-size: 1.05rem; }
	.split { grid-template-columns: 1fr; gap: 1.75rem; }
	section { padding: 2.5rem 0; }
}