/* ============================================================
   VIBE E — IN THE DIRT
   The brief: come enjoy the farm. Tonka toys in the dirt, and
   you're here to get your own product out of the dirt too.

   So: soil browns and that yellow-wagon yellow, chunky rounded
   type, snapshot photos tacked up slightly off square, fat
   friendly buttons. Warm and unfussy, not designed-looking.
   Layers on top of site.css.
   ============================================================ */

.vibe-e {
  --paper:      #FCF4E2;
  --paper-2:    #F3E4C4;
  --ink:        #2E1F12;
  --ink-soft:   #5A452F;
  --green-900:  #2E1F12;
  --green-700:  #5C7F32;
  --green-500:  #7A5E3A;
  --green-100:  #EADCC0;
  --sun:        #F2B705;
  --sun-soft:   #FBE7A8;
  --berry:      #C4452B;
  --line:       #D6BE92;

  --soil:  #5A3E28;
  --soil-2:#3B2718;
  --grass: #5C7F32;
  --sky:   #7FB2D9;

  --round: "Arial Rounded MT Bold", "Trebuchet MS", "Segoe UI", ui-rounded, system-ui, sans-serif;

  background-color: var(--paper);
  /* faint soil speckle */
  background-image:
    radial-gradient(rgba(90,62,40,.10) 1.2px, transparent 1.2px),
    radial-gradient(rgba(90,62,40,.07) 1px, transparent 1px);
  background-size: 22px 22px, 13px 13px;
  background-position: 0 0, 7px 9px;
}

/* ---------- Type: chunky and friendly ---------- */
.vibe-e h1, .vibe-e h2, .vibe-e h3,
.vibe-e .footer-brand, .vibe-e .brand__name, .vibe-e .card__num {
  font-family: var(--round);
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--soil-2);
}
.vibe-e h1 { font-size: clamp(2.6rem, 1.7rem + 4vw, 5rem); line-height: .98; }
.vibe-e h1 em { font-style: normal; color: var(--berry); display: block; }
.vibe-e h2 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3.1rem); line-height: 1.04; }
.vibe-e h3 { font-size: 1.25rem; }
.vibe-e .lede { color: var(--ink-soft); font-weight: 500; }
.vibe-e .eyebrow, .vibe-e .ripe__month {
  color: var(--berry); font-weight: 800; letter-spacing: .14em;
}
.vibe-e .quote {
  font-family: var(--round); font-style: normal; color: var(--soil-2);
  border-left: 6px solid var(--sun);
}

/* ---------- Header ---------- */
.vibe-e .banner { background: var(--soil-2); color: var(--sun-soft); font-weight: 600; }
.vibe-e .banner strong { color: var(--sun); }
.vibe-e .banner a { color: var(--sun-soft); }
.vibe-e .site-header { background: var(--paper); border-bottom: 4px solid var(--soil); }
.vibe-e .brand__name { font-size: 1.16rem; }
.vibe-e .brand__sub { color: var(--grass); font-weight: 800; }
.vibe-e .brand__mark circle:first-child { fill: var(--soil); }
.vibe-e .nav a { color: var(--ink-soft); font-weight: 700; border-radius: 999px; }
.vibe-e .nav a:hover { background: var(--sun-soft); color: var(--soil-2); }
.vibe-e .nav a[aria-current="page"] { background: var(--sun); color: var(--soil-2); box-shadow: none; }

/* ---------- Buttons: fat, rounded, tactile ---------- */
.vibe-e .btn {
  font-family: var(--round); font-weight: 700; border-radius: 999px;
  padding: .95rem 1.7rem; border: 3px solid var(--soil-2);
  box-shadow: 0 4px 0 var(--soil-2);
}
.vibe-e .btn:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--soil-2); }
.vibe-e .btn--primary { background: var(--sun); color: var(--soil-2); }
.vibe-e .btn--primary:hover { background: #FFC629; color: var(--soil-2); }
.vibe-e .btn--ghost { background: var(--paper); color: var(--soil-2); border-color: var(--soil-2); }
.vibe-e .btn--ghost:hover { background: var(--paper-2); color: var(--soil-2); }
.vibe-e .btn--sun { background: var(--sun); color: var(--soil-2); }
.vibe-e .nav a.btn--primary { background: var(--sun); color: var(--soil-2); border: 3px solid var(--soil-2); box-shadow: 0 3px 0 var(--soil-2); }

/* ---------- Sections ---------- */
.vibe-e .section--tint { background: var(--paper-2); }
.vibe-e .page-head { background: var(--paper-2); border-bottom: 4px solid var(--soil); }
.vibe-e .ripe { background: var(--soil); border-block: 0; color: var(--paper); }
.vibe-e .ripe h2 { color: var(--sun); }
.vibe-e .ripe .eyebrow, .vibe-e .ripe__month { color: var(--sun-soft); }
.vibe-e .ripe a { color: var(--sun); }

/* ---------- Cards: snapshots pinned to a board ---------- */
.vibe-e .card {
  background: #FFFDF6; border: 3px solid var(--soil-2); border-radius: 18px;
  box-shadow: 0 6px 0 rgba(46,31,18,.18);
}
.vibe-e .grid--3 .card:nth-child(2) { transform: rotate(-.8deg); }
.vibe-e .grid--3 .card:nth-child(3) { transform: rotate(.7deg); }
.vibe-e .grid--3 .card:nth-child(5) { transform: rotate(.6deg); }
.vibe-e .card__num {
  display: inline-grid; place-items: center;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--grass); color: #FFFDF6; font-size: 1.1rem; margin-bottom: .8rem;
}

/* ---------- Chips: seed-packet labels ---------- */
.vibe-e .chip {
  background: var(--sun-soft); color: var(--soil-2); border: 2.5px solid var(--soil-2);
  border-radius: 999px; font-weight: 700; padding: .5rem 1rem .5rem .8rem;
}
.vibe-e .chip__dot { width: 12px; height: 12px; background: var(--grass); }
.vibe-e .chip[data-kind="berry"] { background: #F7C9BF; }
.vibe-e .chip[data-kind="berry"] .chip__dot { background: var(--berry); }
.vibe-e .chip[data-kind="flower"] { background: var(--sun); }
.vibe-e .chip[data-kind="flower"] .chip__dot { background: var(--berry); }
.vibe-e .chip[data-kind="root"] { background: #E8CDA4; }
.vibe-e .chip[data-kind="root"] .chip__dot { background: var(--soil); }
.vibe-e .chip[data-upick="no"] { background: var(--paper); border-style: dashed; }
.vibe-e .tag { background: var(--soil-2); color: var(--sun); border-radius: 999px; }
.vibe-e .tag--cut { background: var(--berry); color: #fff; }

/* ---------- Hero ---------- */
.vibe-e .hero__facts li {
  background: var(--sun-soft); color: var(--soil-2); border: 2.5px solid var(--soil-2);
  font-weight: 700; border-radius: 999px;
}

/* ---------- Photos: snapshots, tacked up ---------- */
.vibe-e .photo {
  border: 6px solid #FFFDF6; border-radius: 6px;
  box-shadow: 0 8px 22px -8px rgba(46,31,18,.55);
  outline: 2px solid rgba(46,31,18,.15);
}
.vibe-e .hero .photo { transform: rotate(-1.2deg); }
.vibe-e .photo-strip .photo:nth-child(odd) { transform: rotate(.9deg); }
.vibe-e .photo-strip .photo:nth-child(even) { transform: rotate(-.8deg); }

/* ---------- Boxes, tables, FAQ ---------- */
.vibe-e .hours-box, .vibe-e .cal-scroll, .vibe-e .faq details, .vibe-e .map-frame {
  background: #FFFDF6; border: 3px solid var(--soil-2); border-radius: 18px;
  box-shadow: 0 5px 0 rgba(46,31,18,.15);
}
.vibe-e .hours-box dt { color: var(--soil-2); font-weight: 800; }
.vibe-e table.cal thead th { background: var(--soil); color: var(--sun-soft); }
.vibe-e table.cal th[scope="row"] { font-weight: 700; }
.vibe-e .bar { border-radius: 999px; height: 14px; background: var(--green-100); }
.vibe-e .bar.on { background: var(--grass); }
.vibe-e .bar.peak { background: var(--sun); }
.vibe-e td.is-now { background: rgba(242,183,5,.14); }
.vibe-e th.is-now { background: var(--sun); color: var(--soil-2); }
.vibe-e .legend i { border-radius: 999px; }
.vibe-e .faq summary { font-family: var(--round); }
.vibe-e .faq summary::after { color: var(--berry); }
.vibe-e .faq details[open] { border-color: var(--berry); }
.vibe-e .note { background: var(--sun-soft); border-left: 6px solid var(--berry); border-radius: 0 14px 14px 0; color: var(--soil-2); }
.vibe-e .checklist li::before { background: var(--grass); border-radius: 50%; transform: none; width: 11px; height: 11px; }

/* ---------- CTA + footer ---------- */
.vibe-e .cta { background: var(--soil); border-radius: 22px; border: 4px solid var(--soil-2); }
.vibe-e .cta h2 { color: var(--sun); }
.vibe-e .site-footer { background: var(--soil-2); color: #E8D9BE; }
.vibe-e .site-footer h4 { color: var(--sun); }
.vibe-e .footer-brand { color: #FFFDF6; }
.vibe-e .social a { border-color: var(--sun); border-radius: 50%; }
.vibe-e .social a:hover { background: var(--sun); }

/* ---------- Map card ---------- */
.vibe-e .map-frame::before, .vibe-e .map-frame::after { background: #FFFDF6; }
.vibe-e .map-card strong { font-family: var(--round); }
.vibe-e .map-card .go { color: var(--berry); }

@media (max-width: 860px) {
  .vibe-e .nav { background: var(--paper); }
}