/* Spring Valley Turkey Farm — shared styles (Option B: Black and Tan) */

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

:root {
  --black: #1A1A1A;
  --tan: #D4A96A;
  --tan-dark: #B8904F;
  --off-white: #FAFAF7;
  --warm-gray: #F2F0EB;
  --text: #333333;
  --text-light: #6B6B6B;
  --border: #E2DFD8;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--off-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

/* NAV */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--black);
  padding: 0 1.5rem;
}

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.nav-brand {
  color: var(--off-white);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.nav-links {
  display: none;
  list-style: none;
  gap: 1.5rem;
  align-items: center;
}

.nav-links a {
  color: rgba(250, 250, 247, 0.75);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: color 0.2s ease;
}

.nav-links a:hover,
.nav-links a:focus { color: var(--off-white); }
.nav-links a[aria-current="page"] { color: var(--off-white); }

.nav-cta {
  display: inline-block;
  background: var(--tan);
  color: var(--black) !important;
  padding: 0.5rem 1.25rem;
  border-radius: 4px;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background 0.2s ease, transform 0.15s ease;
}

.nav-cta:hover { background: var(--tan-dark); }
.nav-cta:active { transform: scale(0.97); }

.nav-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--off-white);
  border-radius: 1px;
}

/* HERO */
.hero {
  position: relative;
  min-height: min(90vh, 780px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--black);
  overflow: hidden;
  text-align: center;
}

/* The photo runs at full strength - no dimming layer and no vignette over it
   (client: "keep that image, just remove the opaque overlay"). Legibility is
   carried by the artwork itself instead: the logo is dark red over the bright
   sun flare it sits on, and .btn-outline supplies its own dark pill. */
.hero-bg {
  position: absolute;
  inset: 0;
  background: url("images/banner-main.jpg?v=2") center / cover no-repeat;
  transform: scale(1.03);
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  padding: 4rem 1.5rem;
}

.hero-logo {
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 0 auto 2rem;
  display: block;
}

/* Homepage hero logo doubles as the h1. Neutralise the heading's default
   margin/size so wrapping it changes nothing visually. */
.hero-title {
  margin: 0;
  font-size: 0;
  line-height: 0;
  font-weight: inherit;
}

.btn-primary {
  display: inline-block;
  background: var(--tan);
  color: var(--black);
  padding: 0.875rem 2rem;
  border-radius: 30px;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.15s ease;
}

.btn-primary:hover { background: var(--tan-dark); }
.btn-primary:active { transform: translateY(1px); }

.btn-outline {
  display: inline-block;
  background: rgba(0, 0, 0, 0.55);
  color: var(--off-white);
  padding: 0.875rem 2rem;
  border-radius: 30px;
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.btn-outline:hover { background: var(--off-white); color: var(--black); }

/* PAGE HEADER (interior pages) */
.page-header {
  background: var(--black);
  padding: 3.5rem 1.5rem;
  text-align: center;
}

.page-header-photo {
  position: relative;
  background: var(--black) center / cover no-repeat;
}

.page-header-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 26, 0.68);
}

.page-header-photo > * { position: relative; z-index: 1; }

.page-header h1 {
  font-size: clamp(1.5rem, 4vw, 2.35rem);
  font-weight: 800;
  color: var(--off-white);
  line-height: 1.2;
  letter-spacing: 0.02em;
  max-width: 22ch;
  margin: 0 auto;
}

.page-header .subhead {
  margin-top: 1rem;
  color: var(--tan);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.page-header .subhead span { display: block; }

/* SECTIONS */
.section { padding: 4rem 1.5rem; }
.section-alt { background: var(--warm-gray); }

.inner {
  max-width: 900px;
  margin: 0 auto;
}

.inner-wide { max-width: 1100px; margin: 0 auto; }

.section h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--black);
  line-height: 1.15;
  margin-bottom: 1rem;
}

.section h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 0.5rem;
}

.section p {
  font-size: 1rem;
  color: var(--text-light);
  line-height: 1.75;
  max-width: 68ch;
}

.section p + p { margin-top: 1.25rem; }

.lede {
  font-size: 1.05rem;
  color: var(--text);
}

/* HOME INTRO */
.intro {
  background: var(--off-white);
  padding: 5rem 1.5rem 3.5rem;
  text-align: center;
}

.intro-inner { max-width: 780px; margin: 0 auto; }

.intro-rule {
  width: 56px;
  height: 3px;
  background: var(--tan);
  border-radius: 2px;
  margin: 0 auto 1.75rem;
}

.intro-mark {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 auto 1.75rem;
}

.intro h2 {
  font-size: clamp(1.85rem, 4.2vw, 2.7rem);
  font-weight: 800;
  color: var(--black);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
  text-wrap: balance;
}

.intro p {
  font-size: 1.1rem;
  color: var(--text-light);
  line-height: 1.8;
  max-width: 62ch;
  margin: 0 auto;
}

/* HOME FEATURE CARDS */
.features {
  background: var(--warm-gray);
  padding: 4rem 1.5rem 5rem;
}

.features-grid {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  gap: 1.75rem;
}

.feature-card {
  background: var(--off-white);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 10px 28px rgba(0,0,0,0.07);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.07), 0 20px 44px rgba(0,0,0,0.12);
}

.feature-card img {
  display: block;
  width: 100%;
  height: 210px;
  object-fit: cover;
}

.feature-card-body { padding: 1.85rem 1.75rem 2rem; }

.feature-card h2 {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--black);
  line-height: 1.25;
  margin-bottom: 0.85rem;
}

.feature-card p {
  font-size: 0.975rem;
  color: var(--text-light);
  line-height: 1.75;
}

@media (prefers-reduced-motion: reduce) {
  .feature-card { transition: none; }
  .feature-card:hover { transform: none; }
}

/* LISTS */
.list {
  list-style: none;
  margin: 1.5rem 0 0;
}

.list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.65rem;
  color: var(--text);
  font-size: 1rem;
}

.list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tan);
}

/* CARDS */
.card-grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
}

.card {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.75rem;
}

/* Bleeds past the card's 1.75rem padding. max-width must be cleared, or the
   global `img { max-width: 100% }` clamps it and the negative margins skew it left. */
.card-img {
  display: block;
  width: calc(100% + 3.5rem);
  max-width: none;
  margin: -1.75rem -1.75rem 1.5rem;
  height: 220px;
  object-fit: cover;
  border-radius: 6px 6px 0 0;
}

.card h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--black);
  margin-bottom: 1rem;
}

.card dl {
  margin: 0;
  font-size: 0.95rem;
}

.card dt {
  font-weight: 700;
  color: var(--black);
  margin-top: 1rem;
}

.card dd {
  margin: 0.25rem 0 0;
  color: var(--text-light);
  line-height: 1.7;
}

.price {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--black);
}

.sold-out {
  display: inline-block;
  background: var(--black);
  color: var(--tan);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.35rem 0.85rem;
  border-radius: 3px;
  margin-bottom: 0.75rem;
}

.pickup-note {
  font-size: 0.875rem;
  color: var(--text-light);
  margin-top: 0.75rem;
  line-height: 1.6;
}

/* HIGHLIGHT STRIP */
.strip {
  background: var(--warm-gray);
  padding: 2.5rem 1.5rem;
}

.strip-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  gap: 1.25rem;
  text-align: center;
}

.strip-item {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--black);
  line-height: 1.5;
}

/* VIDEO */
.video-section {
  background: var(--black);
  padding: 5rem 1.5rem;
}

.video-wrap {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

/* Absolute fill so the frame still sizes correctly if aspect-ratio is unsupported. */
.video-wrap iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Video facade: poster + play button that swaps in the real YouTube iframe on
   click. Keeps ~520 KB of YouTube player JS, 57 KB of its CSS and all four of
   its third-party cookies off the initial page load. The poster is served from
   /images so the page makes no third-party request at all until a click. */
.video-facade {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
}

.video-facade img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 48px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.7);
  transition: background 0.2s ease;
}

.video-play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
  border-style: solid;
  border-width: 10px 0 10px 17px;
  border-color: transparent transparent transparent #fff;
}

.video-facade:hover .video-play,
.video-facade:focus-visible .video-play {
  background: var(--tan-dark);
}

/* Fallback for browsers without aspect-ratio: classic padding-ratio box. */
@supports not (aspect-ratio: 16 / 9) {
  .video-wrap {
    height: 0;
    padding-bottom: 56.25%;
  }
}

/* MEDIA ROWS — alternating image / text */
.media-row {
  padding: 4rem 1.5rem;
  background: var(--off-white);
}

.media-row.alt { background: var(--warm-gray); }

.media-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  gap: 2rem;
  align-items: center;
}

.media-figure {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.10);
}

.media-figure img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
}

.media-text h2 {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 800;
  color: var(--black);
  line-height: 1.2;
  margin-bottom: 1rem;
}

.media-text p {
  font-size: 1rem;
  color: var(--text-light);
  line-height: 1.8;
}

.media-text p + p { margin-top: 1.15rem; }

/* CARD STACK — vertical cards beside a photo (reserve page) */
.card-stack {
  display: grid;
  gap: 1.25rem;
  align-content: start;
}

/* The stack is taller than the photo's natural height, so the figure
   stretches to match it and the image crops rather than leaving dead space. */
.stack-row .media-inner { align-items: stretch; }

/* Bias the crop upward — the subjects sit in the top two-thirds of the frame. */
.stack-row .media-figure img { object-position: center 30%; }

/* CALLOUT PANEL */
.callout {
  background: var(--black);
  padding: 4rem 1.5rem;
}

.callout-inner {
  max-width: 820px;
  margin: 0 auto;
  border-left: 4px solid var(--tan);
  padding-left: 1.75rem;
}

/* The band is black. A heading here inherits the near-black body colour and
   disappears, so it takes the same light treatment the paragraphs already
   have. Sized below `.section h2` - it leads a band, not a whole section. */
.callout h2 {
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  font-weight: 800;
  color: var(--off-white);
  line-height: 1.2;
  margin-bottom: 1rem;
}

.callout p {
  font-size: 1.075rem;
  color: rgba(250, 250, 247, 0.88);
  line-height: 1.85;
}

.callout p + p { margin-top: 1.25rem; }

/* ICON CARDS */
.icon-grid {
  max-width: 1140px;
  margin: 2.5rem auto 0;
  display: grid;
  gap: 1.5rem;
}

.icon-card {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.85rem 1.65rem;
}

.icon-card img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  margin-bottom: 1.1rem;
}

.icon-card h2,
.icon-card h3 {
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--black);
  line-height: 1.3;
  margin-bottom: 0.7rem;
}

.icon-card p {
  font-size: 0.95rem;
  color: var(--text-light);
  line-height: 1.75;
}

.icon-card p + p { margin-top: 0.9rem; }

/* PRODUCTS — reserve page offering, five equal items.
   Sits on .section-alt: the cards are off-white, so on the off-white body
   only their border would separate them and they read as weightless. */
.products-grid {
  max-width: 1160px;
  margin: 0 auto;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

.products-grid li {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--off-white);
  border: 1px solid var(--border);
  border-top: 3px solid var(--tan);
  border-radius: 10px;
  padding: 1.6rem 1.25rem;
  text-align: center;
  text-wrap: balance;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--black);
}

/* TWO-COLUMN LAYOUT (form + details) */
.split {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  gap: 3rem;
  align-items: start;
}

.panel {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 2rem 1.85rem;
}

.panel h2 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--black);
  margin-bottom: 1.25rem;
}

.panel-item { margin-bottom: 1.35rem; }
.panel-item:last-child { margin-bottom: 0; }

.panel-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tan-dark);
  margin-bottom: 0.3rem;
}

.panel-value {
  font-size: 1rem;
  color: var(--text);
  line-height: 1.6;
}

.panel-value a { color: var(--text); text-decoration: none; }
.panel-value a:hover { color: var(--tan-dark); }

/* RESERVATION BANNER */
.reservation {
  background: var(--tan);
  padding: 3rem 1.5rem;
  text-align: center;
}

.reservation h2 {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 800;
  color: var(--black);
  line-height: 1.15;
  margin-bottom: 0.75rem;
}

.reservation p {
  font-size: 1rem;
  font-weight: 600;
  color: var(--black);
  letter-spacing: 0.03em;
}

/* Reserve page: product cards run across the top of the reservation band,
   with the copy centred beneath them. Scoped to .reservation-inner so the
   raw-diet page's plain .reservation CTA band is unaffected. */
.reservation-inner {
  max-width: 1140px;
  margin: 0 auto;
}

/* Keeps the shared products-grid breakpoints: 5-up desktop, 2-up tablet
   (last card spanning), stacked on mobile. */
.reservation .products-grid {
  margin: 0 0 3rem;
}

/* Drop the tan top accent: it is invisible on the tan band, and a dark
   replacement reads as a heavy lid. Off-white on tan is contrast enough. */
.reservation .products-grid li {
  border-top: 1px solid var(--border);
}

/* The walk-in note under the turkey options. It qualifies the grid above it,
   not the reservation copy below, so the negative top margin pulls it up into
   the grid's 3rem gap. Two classes deep to beat `.reservation p` at (0,1,1),
   whose semibold letterspaced treatment is meant for a single short line. */
.reservation .products-note {
  max-width: 760px;
  margin: -2rem auto 2.75rem;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.7;
  color: rgba(26, 26, 26, 0.78);
}

/* Hold the copy to a readable measure - the band itself is much wider. */
.reservation-text {
  max-width: 720px;
  margin: 0 auto;
}

.reservation .reservation-lede {
  font-size: 1.1rem;
  margin-top: 0.25rem;
}

/* Long-form copy. The banner's default p is semibold and letterspaced, which
   is right for a single short line but reads heavy across a full paragraph.
   Scoped by specificity rather than !important so it stays overridable. */
.reservation .reservation-body {
  margin-top: 1.1rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.8;
  color: rgba(26, 26, 26, 0.82);
  text-align: left;
}

.reservation-cta {
  margin-top: 2rem;
}

/* Tan button on a tan band would vanish - invert it. */
.reservation-cta .btn-primary {
  background: var(--black);
  color: var(--tan);
}

.reservation-cta .btn-primary:hover {
  background: #000;
}

/* ACCENT IMAGE */
.accent-section {
  background: var(--off-white);
  padding: 0 1.5rem 4rem;
}

.accent-img-wrap {
  max-width: 900px;
  margin: 0 auto;
  border-radius: 6px;
  overflow: hidden;
}

.accent-img-wrap img {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  margin: 0 auto;
}

/* GALLERY */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.gallery-grid img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 6px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.gallery-grid a { display: block; overflow: hidden; border-radius: 6px; }

.gallery-grid a:hover img {
  transform: scale(1.04);
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}

/* Larger tiles on the dedicated gallery page. */
.gallery-grid.large { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; }
.gallery-grid.large img { height: 300px; }

@media (prefers-reduced-motion: reduce) {
  .gallery-grid img { transition: none; }
  .gallery-grid a:hover img { transform: none; }
}

.gallery-placeholder {
  border: 1px dashed var(--border);
  border-radius: 6px;
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--text-light);
  font-size: 0.95rem;
}

/* FORM */
.form {
  max-width: 560px;
  margin-top: 2rem;
}

.form-field { margin-bottom: 1.25rem; }

.form-field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: 0.4rem;
}

.form-field input,
.form-field textarea {
  width: 100%;
  font-family: var(--font);
  font-size: 1rem;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.75rem 0.9rem;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: 2px solid var(--tan);
  outline-offset: 1px;
  border-color: var(--tan);
}

.form-field textarea { min-height: 150px; resize: vertical; }

.form button {
  font-family: var(--font);
  border: none;
  cursor: pointer;
}

.form button[disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* Status line under the contact form's Send button. site.js writes the text
   and sets data-kind; with no message the element collapses so it never
   leaves a gap under the button. */
.form-status {
  margin-top: 1rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

.form-status:empty { display: none; }

.form-status[data-kind="pending"] { color: var(--text-light); }
.form-status[data-kind="success"] { color: #2E6B3E; font-weight: 600; }
.form-status[data-kind="error"]   { color: #A33227; font-weight: 600; }

/* CONTACT */
.contact {
  background: var(--black);
  padding: 4rem 1.5rem;
}

.contact-inner {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  gap: 2rem;
}

.contact h2 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--off-white);
  margin-bottom: 1.5rem;
}

.contact-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.contact-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tan);
}

.contact-value {
  font-size: 1rem;
  color: rgba(250, 250, 247, 0.85);
  line-height: 1.6;
}

.contact-value a {
  color: rgba(250, 250, 247, 0.85);
  text-decoration: none;
  transition: color 0.2s ease;
}

.contact-value a:hover { color: var(--tan); }

/* NEWSLETTER */
.newsletter {
  background: var(--black);
  border-top: 1px solid rgba(250, 250, 247, 0.08);
  padding: 3rem 1.5rem;
  text-align: center;
}

.newsletter h2 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--off-white);
  margin-bottom: 0.5rem;
}

.newsletter p {
  font-size: 0.95rem;
  color: rgba(250, 250, 247, 0.65);
  margin-bottom: 1.5rem;
}

.newsletter form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  max-width: 460px;
  margin: 0 auto;
}

.newsletter input {
  flex: 1 1 220px;
  font-family: var(--font);
  font-size: 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(250, 250, 247, 0.2);
  border-radius: 4px;
  background: rgba(250, 250, 247, 0.06);
  color: var(--off-white);
}

.newsletter input::placeholder { color: rgba(250, 250, 247, 0.45); }

.newsletter input:focus {
  outline: 2px solid var(--tan);
  outline-offset: 1px;
}

.newsletter button {
  font-family: var(--font);
  border: none;
  cursor: pointer;
}

/* SOCIAL */
.social {
  background: var(--black);
  padding: 2.5rem 1.5rem 0;
  text-align: center;
}

.social h2 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tan);
  margin-bottom: 1rem;
}

.social ul {
  list-style: none;
  display: flex;
  gap: 1.25rem;
  justify-content: center;
}

.social a {
  color: rgba(250, 250, 247, 0.75);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.2s ease;
}

.social a:hover { color: var(--tan); }

/* FOOTER */
.footer {
  background: var(--black);
  border-top: 1px solid rgba(250, 250, 247, 0.08);
  padding: 1.5rem;
  text-align: center;
}

.footer p {
  font-size: 0.8rem;
  /* 0.5, not 0.4: over --black this resolves to #8A8A88 = 5.03:1, which passes
     WCAG AA. At 0.4 it was #747472 = 3.72:1 and failed (Lighthouse a11y). */
  color: rgba(250, 250, 247, 0.5);
}

.footer-credit {
  margin-top: 0.4rem;
}

.footer-credit a {
  color: var(--tan);
  text-decoration: none;
}

.footer-credit a:hover {
  text-decoration: underline;
}

/* RESPONSIVE */
@media (min-width: 768px) {
  .nav-links { display: flex; }
  .nav-toggle { display: none; }

  .hero-content { padding: 5rem 3rem; }

  .section { padding: 5rem 2rem; }

  .features { padding: 5rem 2rem 6rem; }
  .features-grid { grid-template-columns: 1fr 1fr; }

  .card-grid { grid-template-columns: 1fr 1fr; }

  .media-row { padding: 5rem 2rem; }
  .media-inner { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
  /* Reversed rows put the photo on the right without changing DOM order. */
  .media-row.reverse .media-figure { order: 2; }

  .icon-grid { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1.15fr 0.85fr; }

  /* Five items divide evenly only by 1 or 5, so at tablet the last card
     spans both columns rather than leaving an orphan half-row. */
  .products-grid { grid-template-columns: 1fr 1fr; }
  .products-grid li:last-child { grid-column: span 2; }

  .strip-inner { grid-template-columns: repeat(4, 1fr); }

  .contact-inner {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 3rem;
  }

  .contact h2 {
    grid-column: 1 / -1;
    margin-bottom: 0.5rem;
  }
}

@media (min-width: 1024px) {
  .hero-content { padding: 5rem 4rem; }

  .features-grid { grid-template-columns: repeat(3, 1fr); }
  .icon-grid { grid-template-columns: repeat(3, 1fr); }

  /* Wide enough for all five side by side — drop the tablet span. */
  .products-grid { grid-template-columns: repeat(5, 1fr); }
  .products-grid li:last-child { grid-column: auto; }
  .icon-grid.four-up { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   BLOG — listing cards and individual posts
   ========================================================================== */

.blog-grid {
  display: grid;
  gap: 1.75rem;
  margin-top: 2.5rem;
}

.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (prefers-reduced-motion: no-preference) {
  .blog-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.10);
  }
}

.blog-card-img {
  display: block;
  aspect-ratio: 3 / 2;
  background: var(--warm-gray);
  overflow: hidden;
}

.blog-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Placeholder keeps card heights aligned when a post has no hero image. */
.blog-card-img-empty {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--warm-gray), var(--border));
}

.blog-card-body {
  padding: 1.5rem 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
  color: var(--text-light);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.blog-cat {
  background: var(--black);
  color: var(--tan);
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: 3px;
}

.blog-card-body h2,
.blog-card-body h3 {
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 0.7rem;
}

.blog-card-body h2 a,
.blog-card-body h3 a {
  color: var(--black);
  text-decoration: none;
}

.blog-card-body h2 a:hover,
.blog-card-body h3 a:hover { color: var(--tan-dark); }

.blog-snippet {
  font-size: 0.95rem;
  color: var(--text-light);
  line-height: 1.7;
  margin-bottom: 1.1rem;
}

.blog-more {
  margin-top: auto;
  align-self: flex-start;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tan-dark);
  text-decoration: none;
}

.blog-more:hover { text-decoration: underline; }

/* --- individual post --- */

.post-eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tan);
  margin-bottom: 0.75rem;
}

.post-hero {
  margin: 0 0 2.5rem;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
}

.post-hero img {
  display: block;
  width: 100%;
  height: auto;
}

/* Prose styles for CMS-authored post bodies. */
.post-body p {
  font-size: 1.03rem;
  color: var(--text);
  line-height: 1.85;
  margin-bottom: 1.35rem;
}

.post-body h2 {
  font-size: clamp(1.35rem, 3vw, 1.7rem);
  font-weight: 800;
  color: var(--black);
  line-height: 1.25;
  margin: 2.5rem 0 1rem;
}

.post-body h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--black);
  margin: 2rem 0 0.85rem;
}

.post-body ul,
.post-body ol {
  margin: 0 0 1.5rem 1.35rem;
  color: var(--text);
  line-height: 1.85;
}

.post-body li { margin-bottom: 0.5rem; }

.post-body a {
  color: var(--tan-dark);
  text-decoration: underline;
}

.post-body img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 2rem 0;
}

.post-body blockquote {
  border-left: 4px solid var(--tan);
  padding-left: 1.5rem;
  margin: 2rem 0;
  color: var(--text-light);
  font-style: italic;
}

/* Tables come across from the WordPress posts; keep them scrollable on
   narrow screens rather than letting them widen the page. */
.post-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  font-size: 0.95rem;
}

.post-body th,
.post-body td {
  border: 1px solid var(--border);
  padding: 0.75rem 0.9rem;
  text-align: left;
}

.post-body th {
  background: var(--warm-gray);
  font-weight: 700;
  color: var(--black);
}

.post-back { margin-top: 3rem; }

@media (min-width: 768px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .blog-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   MOBILE NAV — panel shown when the hamburger is toggled (site.js)
   ========================================================================== */

.nav-toggle:focus-visible {
  outline: 2px solid var(--tan);
  outline-offset: 3px;
  border-radius: 2px;
}

.nav-toggle span {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Hamburger morphs into a close icon while the panel is open. */
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .nav-toggle span { transition: none; }
}

@media (max-width: 767px) {
  .nav-links.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    /* .nav is position:sticky, so it is the containing block here. */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--black);
    padding: 0.25rem 1.5rem 1.25rem;
    border-top: 1px solid rgba(250, 250, 247, 0.08);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.4);
  }

  .nav-links.is-open a {
    display: block;
    padding: 0.9rem 0;
    font-size: 1rem;
  }

  .nav-links.is-open li + li a {
    border-top: 1px solid rgba(250, 250, 247, 0.08);
  }

  /* The CTA keeps its button treatment rather than becoming another row. */
  .nav-links.is-open .nav-cta {
    margin-top: 1rem;
    text-align: center;
    padding: 0.8rem 1.25rem;
    border-top: 0;
  }
}

/* ==========================================================================
   FARM JOURNAL — link from the latest-posts row out to the full archive
   ========================================================================== */

/* Selector is `.section .journal-all`, not `.journal-all`, on purpose: this is
   a <p>, and `.section p { max-width: 68ch }` scores (0,1,1). A bare class
   scores (0,1,0) and loses, which centres the button inside a 68ch box pinned
   to the left edge - visibly off-centre no matter what text-align says. */
.section .journal-all {
  margin-top: 2.5rem;
  text-align: center;
  max-width: none;
}

/* ==========================================================================
   FAQ — grouped accordion built on <details>/<summary>

   No JavaScript: the disclosure behaviour, keyboard support and find-in-page
   expansion are all native. The default triangle marker is replaced with a
   +/- on the right, which is why list-style and the WebKit marker are both
   cleared — Safari and Firefox hide it through different properties.
   ========================================================================== */

.faq-group + .faq-group { margin-top: 3.25rem; }

/* Two classes deep on purpose: these are h2 elements, and `.section h2` scores
   (0,1,1). A bare `.faq-group-heading` at (0,1,0) loses and the group labels
   render at the full 2rem section-heading size. */
.section .faq-group-heading {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tan-dark);
  margin-bottom: 1rem;
}

.faq { border-top: 1px solid var(--border); }

.faq-item { border-bottom: 1px solid var(--border); }

.faq-q {
  position: relative;
  display: block;
  list-style: none;
  cursor: pointer;
  padding: 1.15rem 2.75rem 1.15rem 0;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--black);
  line-height: 1.45;
}

.faq-q::-webkit-details-marker { display: none; }

.faq-q::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--tan-dark);
}

.faq-item[open] .faq-q::after { content: "\2013"; }

.faq-q:hover { color: var(--tan-dark); }

.faq-q:focus-visible {
  outline: 2px solid var(--tan);
  outline-offset: 2px;
  border-radius: 2px;
}

.faq-a { padding: 0 2.75rem 1.5rem 0; }

/* The +/- marker needs room beside the question, not beside the answer. On a
   phone that reserved gutter is worth more as text width - it is what keeps
   the size chart from wrapping into unreadable columns. */
@media (max-width: 599px) {
  .faq-a { padding-right: 0; }
  .faq-a table { font-size: 0.88rem; }
  .faq-a th,
  .faq-a td { padding: 0.5rem 0.6rem; }
}

.faq-a p {
  font-size: 0.98rem;
  color: var(--text-light);
  line-height: 1.8;
}

.faq-a p + p { margin-top: 1rem; }

.faq-a ul,
.faq-a ol { margin: 0.75rem 0 0 1.15rem; }

.faq-a li {
  font-size: 0.98rem;
  color: var(--text-light);
  line-height: 1.8;
  margin-bottom: 0.4rem;
}

.faq-a a { color: var(--tan-dark); }
.faq-a a:hover { text-decoration: none; }

/* The size chart is the only table here; it needs to stay readable on a phone
   without forcing the page itself to scroll sideways. */
.faq-a table {
  width: 100%;
  margin-top: 1.15rem;
  border-collapse: collapse;
  font-size: 0.93rem;
}

.faq-a th,
.faq-a td {
  border: 1px solid var(--border);
  padding: 0.6rem 0.85rem;
  text-align: left;
  color: var(--text-light);
}

.faq-a th {
  background: var(--off-white);
  font-weight: 700;
  color: var(--black);
}

/* ==========================================================================
   SOCIALS — curated Instagram posts on Life on the Farm
   ========================================================================== */

.ig-grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.ig-card {
  display: flex;
  flex-direction: column;
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (prefers-reduced-motion: no-preference) {
  .ig-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.10);
  }
}

.ig-card-img {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--warm-gray);
  overflow: hidden;
}

.ig-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ig-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.1rem 1.25rem 1.35rem;
}

/* Captions vary wildly in length; clamping keeps the tiles on a shared grid
   line instead of one tall card dragging its whole row down. */
.ig-caption {
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ig-date {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-light);
}

/* Two classes deep for the same reason as .journal-all: this is a <p>, and
   `.section p { max-width: 68ch }` scores (0,1,1) and would otherwise centre
   the button inside a narrower box pinned to the left.

   Flex rather than inline-block because there is a button per social account:
   inline-blocks would be separated only by the collapsed newline between the
   tags, which is a single space, and they would break mid-row on a phone. */
.section .ig-follow {
  margin-top: 2.5rem;
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
}

@media (min-width: 640px) {
  .ig-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .ig-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   MAP EMBED — Google Maps iframe in the contact page's location panel
   ========================================================================== */

/* An <iframe> has no intrinsic height and collapses inside a grid item, so the
   ratio is set on the wrapper and the frame is stretched to fill it. */
.map-embed {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--warm-gray);
}

.map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}