/* ==========================================================================
   Martin Moo — Farmhouse design system
   Black & white farmhouse look, subtle gingham accents, warm wood textures.
   ========================================================================== */

:root {
  --ink: #2e2823;
  --ink-soft: #57504a;
  --cream: #fdf8ee;
  --paper: #fffdf7;
  --white: #ffffff;
  --barn-red: #b64a38;
  --barn-red-dark: #94382a;
  --teal: #4e9a98;
  --teal-dark: #3d7b79;
  --gold: #e9b44c;
  --wood: #8b5e34;
  --wood-dark: #6e4826;
  --wood-light: #a9713e;
  --gingham: rgba(46, 40, 35, 0.055);
  --radius: 18px;
  --radius-lg: 28px;
  --shadow: 0 6px 18px rgba(46, 40, 35, 0.12);
  --shadow-lg: 0 14px 38px rgba(46, 40, 35, 0.16);
  --border: 2px solid var(--ink);
  --font-display: "Fredoka", "Comic Sans MS", sans-serif;
  --font-body: "Nunito", "Segoe UI", sans-serif;
  --font-script: "Chewy", "Fredoka", cursive;
}

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

html { scroll-behavior: smooth; }

/* Smooth cross-fade between pages (browsers with View Transitions support) */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.25s; }

/* Gentle fade-in on first paint for all browsers */
@keyframes page-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

body { animation: page-enter 0.35s ease-out; }

@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
}

body {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink);
  background-color: var(--cream);
  /* guard against any decorative element causing sideways scroll */
  overflow-x: clip;
}

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

a { color: var(--barn-red); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}

h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
h3 { font-size: 1.35rem; }

.container {
  width: min(1140px, 92%);
  margin-inline: auto;
}

.narrow { width: min(820px, 92%); margin-inline: auto; }

section { padding: 4.5rem 0; }

/* --------------------------------------------------------------------------
   Textures
   -------------------------------------------------------------------------- */

.gingham-bg {
  background-color: var(--paper);
  background-image:
    repeating-linear-gradient(0deg, var(--gingham) 0 14px, transparent 14px 28px),
    repeating-linear-gradient(90deg, var(--gingham) 0 14px, transparent 14px 28px);
}

.gingham-red {
  background-color: #fdf3ef;
  background-image:
    repeating-linear-gradient(0deg, rgba(182, 74, 56, 0.07) 0 14px, transparent 14px 28px),
    repeating-linear-gradient(90deg, rgba(182, 74, 56, 0.07) 0 14px, transparent 14px 28px);
}

.wood-bar {
  height: 14px;
  background:
    repeating-linear-gradient(90deg,
      var(--wood) 0 90px,
      var(--wood-light) 90px 180px,
      var(--wood-dark) 180px 270px);
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}

/* --------------------------------------------------------------------------
   Header / navigation
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--paper);
  border-bottom: var(--border);
}

.announce {
  background: var(--ink);
  color: var(--cream);
  text-align: center;
  font-size: 0.9rem;
  padding: 0.4rem 1rem;
}

.announce a { color: var(--gold); font-weight: 700; text-decoration: none; }
.announce a:hover { text-decoration: underline; }

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-script);
  font-size: 1.5rem;
  line-height: 1.1;
}

.brand img { width: 52px; height: auto; }

.brand span small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.main-nav { display: flex; align-items: center; gap: 0.25rem; }

.main-nav > ul {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
}

.main-nav a {
  position: relative;
  display: block;
  padding: 0.45rem 0.9rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  color: var(--ink);
  text-decoration: none;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.main-nav a:hover:not(.nav-cta) { background: rgba(233, 180, 76, 0.3); }

/* active page: calm gold underline instead of a solid pill */
.main-nav a.active:not(.nav-cta) {
  background: transparent;
  color: var(--barn-red);
  font-weight: 600;
}

.main-nav a.active:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.12rem;
  height: 3px;
  border-radius: 2px;
  background: var(--gold);
}

.has-dropdown { position: relative; }

.has-dropdown > a::after { content: " ▾"; font-size: 0.7em; }

/* Invisible bridge over the gap so the dropdown doesn't close while the
   cursor travels from the menu item down into it */
.has-dropdown::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 10px;
}

.dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 215px;
  background: var(--paper);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  list-style: none;
  padding: 0.5rem;
  display: none;
  z-index: 300;
}

.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown,
.has-dropdown.open .dropdown { display: block; }

.dropdown a { border-radius: 12px; }

/* CTA matches the cartoon button style used across the site */
.nav-cta {
  background: var(--barn-red);
  color: var(--cream) !important;
  border: var(--border);
  box-shadow: 0 3px 0 var(--ink);
  margin-left: 0.5rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.nav-cta:hover {
  background: var(--barn-red-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 0 var(--ink);
}

.nav-cta:active {
  transform: translateY(1px);
  box-shadow: 0 2px 0 var(--ink);
}

.nav-toggle {
  display: none;
  background: none;
  border: var(--border);
  border-radius: 12px;
  padding: 0.4rem 0.7rem;
  font-size: 1.3rem;
  cursor: pointer;
  color: var(--ink);
  background: var(--paper);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  text-decoration: none;
  text-align: center;
  padding: 0.75rem 1.6rem;
  border-radius: 999px;
  border: var(--border);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 4px 0 var(--ink);
}

.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--ink); }

.btn-red { background: var(--barn-red); color: var(--cream); }
.btn-teal { background: var(--teal); color: var(--cream); }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-light { background: var(--paper); color: var(--ink); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  /* enough bottom padding to clear the barn roof, without leaving dead sky */
  padding: 5rem 0 clamp(9rem, 17vw, 27rem);
  background: linear-gradient(180deg,
    #2e5f80 0%,
    #3f7e8e 40%,
    #4e9a98 65%,
    #7cab84 100%);
}

/* warm sunshine wash across the sky */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse at 28% 24%,
    rgba(233, 180, 76, 0.25) 0%,
    rgba(233, 180, 76, 0) 55%);
  pointer-events: none;
}

.hero .container {
  position: relative;
  z-index: 3;
}

.hero-text { max-width: 44rem; }

/* Illustrated farm scene anchored to the bottom of the hero */
.hero-scene {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  line-height: 0;
  pointer-events: none;
}

/* cream wave carrying the hero into the next section */
.hero-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  z-index: 2;
  line-height: 0;
  pointer-events: none;
}

.hero-wave svg {
  display: block;
  width: 100%;
  height: clamp(38px, 5.5vw, 84px);
}

.hero-scene svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 300;
  /* on narrow screens keep the scene a readable size; the barn side stays visible */
  min-height: 150px;
}

/* Clouds swaying gently within their patch of sky — never leaving the frame */
.cloud {
  position: absolute;
  z-index: 1;
  width: 120px;
  height: 38px;
  background: #ffffff;
  border-radius: 999px;
  opacity: 0.9;
  box-shadow: 0 6px 14px rgba(46, 40, 35, 0.07);
  animation: cloud-sway var(--sway-dur, 26s) ease-in-out infinite alternate;
  animation-delay: var(--sway-delay, 0s);
  pointer-events: none;
}

.cloud::before,
.cloud::after {
  content: "";
  position: absolute;
  background: #ffffff;
  border-radius: 50%;
}

.cloud::before { width: 54px; height: 54px; top: -26px; left: 18px; }
.cloud::after { width: 38px; height: 38px; top: -17px; right: 20px; }

.cloud-1 { top: 64px; left: 5%; --cloud-scale: 1; --sway-dur: 26s; --sway-delay: -9s; }
.cloud-2 { top: 138px; right: 10%; --cloud-scale: 0.65; --sway-dur: 34s; --sway-delay: -20s; }
.cloud-3 { top: 40px; right: 32%; --cloud-scale: 0.5; --sway-dur: 22s; --sway-delay: -4s; }

@keyframes cloud-sway {
  from { transform: translateX(0) scale(var(--cloud-scale, 1)); }
  to { transform: translateX(clamp(28px, 4vw, 70px)) scale(var(--cloud-scale, 1)); }
}

/* Birds gliding in a smooth, steady arc */
.bird {
  animation: bird-glide 10s ease-in-out infinite alternate;
}

.bird-2 { animation-duration: 13s; animation-delay: -6s; }

@keyframes bird-glide {
  from { transform: translate(0, 0); }
  to { transform: translate(30px, -12px); }
}

.hero-text { position: relative; }

/* soft dark vignette behind the text block for reliable contrast over the rays */
/* sunburst rising behind the headline — painted on the sky layer, so it sits
   behind the text, Martin, clouds, and the farm scene */
.hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 42%;
  left: 28%;
  width: 220vw;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle,
      rgba(255, 231, 166, 0.5) 0%,
      rgba(255, 231, 166, 0.18) 8%,
      rgba(255, 231, 166, 0) 16%),
    conic-gradient(
      rgba(233, 180, 76, 0.26) 0deg 6deg,   transparent 6deg 16deg,
      rgba(233, 180, 76, 0.17) 16deg 19deg, transparent 19deg 34deg,
      rgba(233, 180, 76, 0.28) 34deg 43deg, transparent 43deg 52deg,
      rgba(233, 180, 76, 0.2) 52deg 56deg,  transparent 56deg 72deg,
      rgba(233, 180, 76, 0.25) 72deg 80deg, transparent 80deg 92deg,
      rgba(233, 180, 76, 0.16) 92deg 95deg, transparent 95deg 110deg,
      rgba(233, 180, 76, 0.27) 110deg 119deg, transparent 119deg 131deg,
      rgba(233, 180, 76, 0.2) 131deg 135deg,  transparent 135deg 150deg,
      rgba(233, 180, 76, 0.24) 150deg 157deg, transparent 157deg 171deg,
      rgba(233, 180, 76, 0.16) 171deg 174deg, transparent 174deg 188deg,
      rgba(233, 180, 76, 0.28) 188deg 197deg, transparent 197deg 209deg,
      rgba(233, 180, 76, 0.19) 209deg 213deg, transparent 213deg 228deg,
      rgba(233, 180, 76, 0.26) 228deg 236deg, transparent 236deg 249deg,
      rgba(233, 180, 76, 0.17) 249deg 252deg, transparent 252deg 266deg,
      rgba(233, 180, 76, 0.27) 266deg 274deg, transparent 274deg 286deg,
      rgba(233, 180, 76, 0.2) 286deg 290deg,  transparent 290deg 305deg,
      rgba(233, 180, 76, 0.25) 305deg 313deg, transparent 313deg 326deg,
      rgba(233, 180, 76, 0.16) 326deg 329deg, transparent 329deg 344deg,
      rgba(233, 180, 76, 0.27) 344deg 352deg, transparent 352deg 360deg);
  -webkit-mask-image: radial-gradient(circle, #000 22%, rgba(0, 0, 0, 0.55) 50%, transparent 96%);
  mask-image: radial-gradient(circle, #000 22%, rgba(0, 0, 0, 0.55) 50%, transparent 96%);
  animation: ring-spin 140s linear infinite;
  pointer-events: none;
}

.hero-text .eyebrow {
  display: inline-block;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(46, 40, 35, 0.22);
  border: 2px solid rgba(233, 180, 76, 0.65);
  border-radius: 999px;
  padding: 0.25rem 1rem;
  margin-bottom: 1.1rem;
}

.hero-text h1 { color: #fffdf7; text-shadow: 0 2px 12px rgba(28, 45, 60, 0.5); }

.hero-text h1 span { color: var(--gold); }

.hero-text p.lead {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 1.1rem 0 1.8rem;
  color: rgba(255, 253, 247, 0.96);
  text-shadow: 0 1px 8px rgba(28, 45, 60, 0.45);
  max-width: 34rem;
}

@keyframes ring-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* --------------------------------------------------------------------------
   Cards & grids
   -------------------------------------------------------------------------- */

.card {
  background: var(--paper);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 1.8rem;
}

.card h3 { margin-bottom: 0.5rem; }

.card .emoji { font-size: 2.2rem; line-height: 1; margin-bottom: 0.7rem; display: block; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }

.section-head { text-align: center; max-width: 44rem; margin: 0 auto 2.8rem; }

.section-head .kicker {
  font-family: var(--font-script);
  color: var(--barn-red);
  font-size: 1.25rem;
  display: block;
  margin-bottom: 0.35rem;
}

.section-head p { color: var(--ink-soft); margin-top: 0.7rem; }

.card-link {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.card-link:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

/* --------------------------------------------------------------------------
   Book feature
   -------------------------------------------------------------------------- */

.book-feature {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 2.6rem;
  align-items: center;
}

.book-cover {
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  transform: rotate(-2deg);
  transition: transform 0.25s ease;
  background: var(--white);
}

.book-cover:hover { transform: rotate(0deg) scale(1.02); }

.badge-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.9rem 0 1.2rem; }

.badge {
  font-size: 0.82rem;
  font-weight: 800;
  padding: 0.28rem 0.85rem;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: var(--paper);
}

.badge.teal { background: var(--teal); color: var(--cream); }
.badge.gold { background: var(--gold); }
.badge.red { background: var(--barn-red); color: var(--cream); }

/* --------------------------------------------------------------------------
   Character cards
   -------------------------------------------------------------------------- */

.character-card { text-align: center; }

.character-card .portrait {
  width: 110px;
  height: 110px;
  margin: 0 auto 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.2rem;
  background: var(--cream);
  border: var(--border);
  border-radius: 50%;
}

.character-card .portrait img { width: 78%; height: auto; }

.character-card .role {
  font-family: var(--font-script);
  color: var(--teal-dark);
  margin-bottom: 0.4rem;
}

/* --------------------------------------------------------------------------
   Speech bubble
   -------------------------------------------------------------------------- */

.speech {
  position: relative;
  background: var(--paper);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 1.9rem 2.1rem;
  font-size: 1.12rem;
}

.speech::after {
  content: "";
  position: absolute;
  bottom: -18px;
  left: 58px;
  width: 30px;
  height: 30px;
  background: var(--paper);
  border-right: var(--border);
  border-bottom: var(--border);
  transform: rotate(45deg) skew(8deg, 8deg);
}

/* --------------------------------------------------------------------------
   Newsletter — "Join Martin's Herd"
   -------------------------------------------------------------------------- */

.herd {
  background: var(--ink);
  color: var(--cream);
  padding: 4rem 0;
}

.herd .inner {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 2.5rem;
  align-items: center;
}

.herd h2 { color: var(--cream); }
.herd h2 span { color: var(--gold); }
.herd p { color: rgba(253, 248, 238, 0.85); }

.herd ul {
  list-style: none;
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 0.45rem 1.6rem;
  font-weight: 700;
}

.herd-form { display: flex; flex-direction: column; gap: 0.8rem; }

.herd-form input {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.85rem 1.2rem;
  border-radius: 999px;
  border: 2px solid var(--cream);
  background: rgba(253, 248, 238, 0.08);
  color: var(--cream);
}

.herd-form input::placeholder { color: rgba(253, 248, 238, 0.6); }

.herd-form .btn { box-shadow: 0 4px 0 rgba(0, 0, 0, 0.55); }

.form-note { font-size: 0.85rem; color: rgba(253, 248, 238, 0.6); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--paper);
  border-top: var(--border);
  padding: 3.2rem 0 1.6rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 2.2rem;
  margin-bottom: 2.2rem;
}

.footer-grid h4 {
  font-size: 1.02rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}

.footer-grid ul { list-style: none; }
.footer-grid li { margin-bottom: 0.42rem; }

.footer-grid a { color: var(--ink-soft); text-decoration: none; }
.footer-grid a:hover { color: var(--barn-red); text-decoration: underline; }

.footer-brand img { width: 70px; margin-bottom: 0.7rem; }
.footer-brand p { color: var(--ink-soft); font-size: 0.95rem; max-width: 17rem; }

.footer-bottom {
  border-top: 1px solid rgba(46, 40, 35, 0.15);
  padding-top: 1.3rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Page banner (interior pages)
   -------------------------------------------------------------------------- */

.page-banner {
  text-align: center;
  padding: 3.6rem 0 3.2rem;
  border-bottom: var(--border);
}

.page-banner .kicker {
  font-family: var(--font-script);
  color: var(--barn-red);
  font-size: 1.3rem;
  display: block;
  margin-bottom: 0.3rem;
}

.page-banner p { max-width: 40rem; margin: 0.8rem auto 0; color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   Misc components
   -------------------------------------------------------------------------- */

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.6rem;
  align-items: center;
}

/* Meet Martin page: on phone, speech bubble sits above the photo */
.meet-martin-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.6rem;
  align-items: center;
}

.meet-martin-photo { grid-column: 1; grid-row: 1 / 3; }
.meet-martin-speech { grid-column: 2; grid-row: 1; }
.meet-martin-copy { grid-column: 2; grid-row: 2; }

.meet-martin-copy p + p { margin-top: 0.8rem; }

@media (max-width: 768px) {
  .meet-martin-intro {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }

  .meet-martin-speech { grid-column: 1; grid-row: 1; }
  .meet-martin-photo { grid-column: 1; grid-row: 2; }
  .meet-martin-copy { grid-column: 1; grid-row: 3; margin-top: 0.4rem; }
}

.framed-photo {
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  background: var(--white);
}

.checklist { list-style: none; }
.checklist li { padding-left: 1.9rem; position: relative; margin-bottom: 0.55rem; }
.checklist li::before { content: "✔"; position: absolute; left: 0; color: var(--teal-dark); font-weight: 900; }

.quote-card { position: relative; padding-top: 2.6rem; }

.quote-card::before {
  content: "“";
  position: absolute;
  top: 0.4rem;
  left: 1.4rem;
  font-family: var(--font-display);
  font-size: 3.6rem;
  color: var(--gold);
  line-height: 1;
}

.quote-card .who {
  margin-top: 1rem;
  font-weight: 800;
  color: var(--barn-red);
}

.stars { color: var(--gold); font-size: 1.1rem; letter-spacing: 2px; }

.pill-list { display: flex; flex-wrap: wrap; gap: 0.55rem; list-style: none; margin-top: 1rem; }

.pill-list li {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 0.3rem 1rem;
  font-weight: 700;
  font-size: 0.92rem;
}

.video-frame {
  border: var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--ink);
  max-width: 380px;
  margin-inline: auto;
}

.video-frame video { display: block; width: 100%; height: auto; }

.coming-soon-note {
  background: var(--gold);
  border: var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.4rem;
  font-weight: 700;
  display: inline-block;
}

.recipe-card { border-top: 12px solid var(--barn-red); }
.recipe-card.kids { border-top-color: var(--teal); }

.contact-form { display: grid; gap: 1rem; }

.contact-form label { font-weight: 800; font-size: 0.95rem; }

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.8rem 1.1rem;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--white);
  margin-top: 0.3rem;
}

.contact-form textarea { min-height: 140px; resize: vertical; }

.form-success {
  display: none;
  background: var(--teal);
  color: var(--cream);
  border: var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.4rem;
  font-weight: 700;
}

/* Blog */
.post-card .date {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-dark);
}

.post-card .tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 800;
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 0.12rem 0.7rem;
  margin-bottom: 0.6rem;
}

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero::after { animation: none; }
  .cloud { animation: none; transform: scale(var(--cloud-scale, 1)); }
  .bird { animation: none; }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* Large desktop / 4K: scale type and widen the content column */
@media (min-width: 1920px) {
  html { font-size: 17.5px; }
  .container { width: min(1320px, 88%); }
  .narrow { width: min(900px, 88%); }
}

/* Small desktop / laptop: tighten the nav so it never wraps or overflows */
@media (min-width: 1025px) and (max-width: 1280px) {
  .main-nav > ul { gap: 0.2rem; }
  .main-nav a { font-size: 0.9rem; padding: 0.42rem 0.55rem; }
  .nav-cta { margin-left: 0.25rem; }
  .brand { font-size: 1.25rem; gap: 0.45rem; }
  .brand img { width: 42px; }
  .brand span small { font-size: 0.6rem; }
}

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }

  .nav-toggle { display: block; }

  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: var(--border);
    box-shadow: var(--shadow-lg);
    max-height: calc(100vh - 90px);
    overflow-y: auto;
  }

  .main-nav.open { display: block; }

  .main-nav > ul { flex-direction: column; align-items: stretch; padding: 1rem; gap: 0.2rem; }

  .main-nav a { padding: 0.7rem 1rem; border-radius: 12px; white-space: normal; }

  /* in the mobile menu a soft pill reads better than an underline */
  .main-nav a.active:not(.nav-cta) { background: rgba(233, 180, 76, 0.25); }
  .main-nav a.active:not(.nav-cta)::after { display: none; }

  .dropdown {
    position: static;
    display: block;
    border: none;
    box-shadow: none;
    padding: 0 0 0 1.2rem;
    min-width: 0;
    background: transparent;
  }

  .has-dropdown > a { pointer-events: none; color: var(--ink-soft); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.08em; }
  .has-dropdown > a::after { content: ""; }

  .nav-cta { margin-left: 0; text-align: center; }
}

@media (max-width: 768px) {
  section { padding: 3.2rem 0; }

  .page-banner { padding: 2.6rem 0 2.4rem; }

  body { font-size: 1rem; }

  .card { padding: 1.4rem; }

  .speech { padding: 1.5rem 1.6rem; font-size: 1.05rem; }

  .hero .container,
  .two-col,
  .book-feature,
  .herd .inner { grid-template-columns: 1fr; }

  .hero { padding-top: 2.5rem; padding-bottom: 12rem; }
  .hero::after { width: 260vw; top: 52%; left: 50%; }
  .cloud-1 { top: 40px; --cloud-scale: 0.7; }
  .cloud-3 { display: none; }

  .grid-2, .grid-3 { grid-template-columns: 1fr; }

  .herd ul { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .brand span small { display: none; }
}