/* ============================================================
   VIBE B — ROADSIDE STAND
   Layers on top of site.css and restyles the same markup.
   Hand-painted sign energy: manila, barn red, condensed poster
   type, hard black rules, things sitting a degree off square.
   ============================================================ */

.vibe-b {
  --paper:      #F2E4C4;
  --paper-2:    #E8D5AC;
  --ink:        #20180F;
  --ink-soft:   #4A3B28;
  --green-900:  #20180F;
  --green-700:  #2C6034;
  --green-500:  #B4231F;
  --green-100:  #E8D5AC;
  --sun:        #E8A317;
  --sun-soft:   #F7E3B4;
  --berry:      #B4231F;
  --line:       #20180F;

  --disp: "Haettenschweiler", "Arial Narrow", Impact, "Franklin Gothic Bold", sans-serif;
  --card:  #FBF3E0;
  --barn:  #B4231F;

  background-color: var(--paper);
  background-image: radial-gradient(rgba(32,24,15,.05) 1px, transparent 1px);
  background-size: 5px 5px;
}

/* ---------- Type ---------- */
.vibe-b h1, .vibe-b h2, .vibe-b h3,
.vibe-b .footer-brand, .vibe-b .brand__name {
  font-family: var(--disp);
  font-weight: 400;
  text-transform: uppercase;
  line-height: .94;
  letter-spacing: .01em;
  color: var(--ink);
}
.vibe-b h1 { font-size: clamp(3rem, 2rem + 5.5vw, 6.2rem); color: var(--barn); }
.vibe-b h1 em { font-style: normal; color: var(--green-700); display: block; }
.vibe-b h2 { font-size: clamp(2rem, 1.4rem + 2.8vw, 3.4rem); }
.vibe-b h3 { font-size: 1.45rem; letter-spacing: .02em; }
.vibe-b .lede { font-weight: 500; color: var(--ink); }
.vibe-b .eyebrow { color: var(--barn); letter-spacing: .2em; }
.vibe-b .quote { font-family: var(--disp); font-style: normal; text-transform: uppercase; line-height: .98; border-left-color: var(--barn); }
.vibe-b .quote cite { font-family: var(--sans); color: var(--ink-soft); }

/* ---------- Header / banner ---------- */
.vibe-b .banner {
  background: var(--barn); color: #FFF3DC;
  border-bottom: 4px solid var(--ink);
  font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
}
.vibe-b .banner strong { color: #fff; }
.vibe-b .banner a { color: #FFF3DC; }
.vibe-b .site-header { background: var(--ink); border-bottom: 5px solid var(--barn); }
.vibe-b .brand__name { color: var(--paper); font-size: 1.35rem; }
.vibe-b .brand__sub { color: var(--sun); }
.vibe-b .brand__mark circle:first-child { fill: var(--barn); }
.vibe-b .nav a { color: var(--paper); text-transform: uppercase; letter-spacing: .08em; font-size: .82rem; border-radius: 0; }
.vibe-b .nav a:hover { background: var(--barn); color: #fff; }
.vibe-b .nav a[aria-current="page"] { color: var(--sun); box-shadow: inset 0 -3px 0 var(--sun); }
.vibe-b .nav-toggle { color: var(--paper); border-color: var(--paper); }

/* ---------- Buttons: hard shadow, no round ---------- */
.vibe-b .btn {
  border-radius: 0; border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  text-transform: uppercase; letter-spacing: .06em; font-weight: 800;
}
.vibe-b .btn:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--ink); }
.vibe-b .btn--primary { background: var(--barn); color: #FFF3DC; }
.vibe-b .btn--primary:hover { background: #8A1815; color: #FFF3DC; }
.vibe-b .btn--ghost { background: var(--sun); color: var(--ink); border-color: var(--ink); }
.vibe-b .btn--ghost:hover { background: #D2920F; color: var(--ink); }
.vibe-b .btn--sun { background: var(--sun); color: var(--ink); }
.vibe-b .nav a.btn { border-radius: 0; box-shadow: 4px 4px 0 var(--sun); }
.vibe-b .nav a.btn--primary { background: var(--barn); color: #FFF3DC; }

/* ---------- Sections ---------- */
.vibe-b .section--tint { background: var(--paper-2); border-block: 4px solid var(--ink); }
.vibe-b .section--dark, .vibe-b .ripe { background: var(--ink); color: var(--paper); border-block: 5px solid var(--barn); }
.vibe-b .ripe h2 { color: var(--sun); }
.vibe-b .ripe .eyebrow, .vibe-b .ripe__month { color: var(--sun); }
.vibe-b .ripe a { color: var(--sun); }
.vibe-b .page-head { background: var(--paper-2); border-bottom: 4px solid var(--ink); }

/* ---------- Cards: placards, slightly off-square ---------- */
.vibe-b .card {
  background: var(--card); border: 4px solid var(--ink); border-radius: 0;
  box-shadow: 7px 7px 0 rgba(32,24,15,.22);
}
.vibe-b .grid--3 .card:nth-child(2) { transform: rotate(-.7deg); }
.vibe-b .grid--3 .card:nth-child(3) { transform: rotate(.55deg); }
.vibe-b .grid--3 .card:nth-child(5) { transform: rotate(.5deg); }
.vibe-b .card__num {
  font-family: var(--disp); background: var(--green-700); color: #FFF3DC;
  display: inline-block; padding: .3rem .65rem; font-size: 1.6rem;
}
.vibe-b .card__icon { filter: grayscale(1) contrast(1.4); }

/* ---------- Chips: ticket stubs ---------- */
.vibe-b .chip {
  background: var(--paper); color: var(--ink); border: 2px solid var(--ink);
  border-radius: 0; text-transform: uppercase; font-weight: 800;
  font-size: .82rem; letter-spacing: .05em; padding: .45rem .9rem;
}
.vibe-b .chip__dot { display: none; }
.vibe-b .chip[data-kind="berry"] { background: var(--barn); color: #FFF3DC; border-color: #FFF3DC; }
.vibe-b .chip[data-kind="flower"] { background: var(--sun); }
.vibe-b .chip[data-kind="root"] { background: #C79A5E; }
.vibe-b .tag { background: var(--ink); color: var(--sun); border-radius: 0; }

/* ---------- Hero: facts become a hand-lettered placard ---------- */
.vibe-b .hero__facts {
  background: var(--card); border: 4px solid var(--ink); padding: 1.1rem 1.3rem;
  transform: rotate(-1deg); box-shadow: 8px 8px 0 rgba(32,24,15,.2);
  flex-direction: column; gap: 0; margin-top: 2rem;
}
.vibe-b .hero__facts li {
  background: none; border-radius: 0; padding: .45rem 0;
  border-bottom: 2px dotted rgba(32,24,15,.35);
  font-weight: 800; text-transform: uppercase; font-size: .85rem; letter-spacing: .04em;
  width: 100%;
}
.vibe-b .hero__facts li:last-child { border-bottom: 0; }

/* ---------- Photos: thick frame, red offset, slight tilt ---------- */
.vibe-b .photo {
  border: 5px solid var(--ink); border-radius: 0;
  box-shadow: 10px 10px 0 var(--barn);
}
.vibe-b .hero .photo { transform: rotate(1deg); }
.vibe-b .photo-strip .photo { box-shadow: 6px 6px 0 var(--barn); }

/* ---------- Boxes, tables, FAQ ---------- */
.vibe-b .hours-box, .vibe-b .cal-scroll, .vibe-b .faq details, .vibe-b .map-frame {
  background: var(--card); border: 4px solid var(--ink); border-radius: 0; box-shadow: 6px 6px 0 rgba(32,24,15,.2);
}
.vibe-b .hours-box dt { text-transform: uppercase; font-size: .8rem; letter-spacing: .06em; }
.vibe-b .hours-box dd { color: var(--ink); font-weight: 600; }
.vibe-b table.cal thead th { background: var(--ink); color: var(--sun); }
.vibe-b table.cal th[scope="row"] { text-transform: uppercase; font-size: .82rem; letter-spacing: .04em; }
.vibe-b .bar { border-radius: 0; height: 14px; background: rgba(32,24,15,.12); }
.vibe-b .bar.on { background: var(--green-700); }
.vibe-b .bar.peak { background: var(--sun); }
.vibe-b td.is-now { background: rgba(232,163,23,.16); }
.vibe-b th.is-now { background: var(--sun); color: var(--ink); }
.vibe-b .legend i { border-radius: 0; }
.vibe-b .faq summary { text-transform: uppercase; font-size: .95rem; letter-spacing: .03em; }
.vibe-b .faq summary::after { font-family: var(--disp); color: var(--barn); }
.vibe-b .faq details[open] { border-color: var(--barn); }
.vibe-b .note { background: var(--sun-soft); border-left: 5px solid var(--barn); border-radius: 0; color: #5A3A08; }
.vibe-b .checklist li::before { border-radius: 0; background: var(--barn); transform: none; }

/* ---------- CTA + footer ---------- */
.vibe-b .cta { background: var(--ink); border: 5px solid var(--barn); border-radius: 0; }
.vibe-b .cta h2 { color: var(--sun); }
.vibe-b .site-footer { background: #1D4423; border-top: 5px solid var(--sun); color: #E6D9BC; }
.vibe-b .site-footer h4 { color: var(--sun); }
.vibe-b .footer-brand { color: #fff; }
.vibe-b .social a { border-radius: 0; border-color: var(--sun); }
.vibe-b .social a:hover { background: var(--sun); }

/* ---------- Map card ---------- */
.vibe-b .map-frame::before, .vibe-b .map-frame::after { background: var(--card); }
.vibe-b .map-card strong { font-family: var(--disp); text-transform: uppercase; font-size: 1.5rem; }
.vibe-b .map-card .go { color: var(--barn); }

@media (max-width: 860px) {
  .vibe-b .nav { background: var(--ink); }
  .vibe-b .nav a { border-bottom-color: rgba(255,243,220,.2); }
}