/* ===========================================================================
   Boom Boom's Campground -- "campfire under stars"

   Straight off the ad: a terracotta logo tile, an amber wordmark band, and a
   dark brown panel carrying the copy. The hero is dusk -- "get lost under
   star-studded skies" -- and the page below it is warm daylight, because
   people come here to read rates and book a site.

   Terracotta #c44037   the logo tile
   Amber      #b7661d   the wordmark band
   Night      #241e1b   the copy panel
   =========================================================================== */

:root {
  --font: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-head: "Bitter", Georgia, serif;

  --ink: #241e1b;
  --ink-soft: #6a5c53;
  --line: #e6dccd;
  --bg: #ffffff;
  --bg-soft: #f7f1e6;

  --radius: 8px;
  --head-weight: 700;

  --night: #241e1b;
  --footer-bg: #1b1614;
  --logo-height: 52px;
}

/* ---- Header ------------------------------------------------------------- */
.site-header { border-bottom: 3px solid var(--accent); }
.brand-name { font-family: var(--font-head); color: var(--ink); }
.brand-logo { border-radius: 6px; }
.site-nav a { font-weight: 600; }

/* ---- Hero: dusk over the mesa ------------------------------------------- */
.hero {
  /* campground.jpg ships as a dusk-toned placeholder; overwrite it with the
     real photo of the mesa at dusk (same filename) and the hero uses it. */
  --hero-bg:
    radial-gradient(ellipse 120% 80% at 50% 108%, rgba(196,64,55,.45) 0%, rgba(196,64,55,0) 62%),
    linear-gradient(180deg, rgba(16,14,20,.85) 0%, rgba(35,32,44,.62) 42%, rgba(59,47,49,.55) 74%, rgba(90,58,44,.5) 100%),
    url("/assets/img/campground.jpg") center bottom / cover no-repeat #100e14;
  padding: 80px 20px 92px;
}
/* Star field. Two layers of tiny dots, no image needed. */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, #fff 50%, transparent 50%),
    radial-gradient(1.2px 1.2px at 28% 42%, rgba(255,255,255,.85) 50%, transparent 50%),
    radial-gradient(1.6px 1.6px at 47% 12%, #fff 50%, transparent 50%),
    radial-gradient(1.1px 1.1px at 63% 33%, rgba(255,255,255,.75) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 78% 15%, #fff 50%, transparent 50%),
    radial-gradient(1.2px 1.2px at 88% 38%, rgba(255,255,255,.8) 50%, transparent 50%),
    radial-gradient(1.1px 1.1px at 36% 26%, rgba(255,255,255,.6) 50%, transparent 50%),
    radial-gradient(1.3px 1.3px at 8% 46%, rgba(255,255,255,.7) 50%, transparent 50%),
    radial-gradient(1.2px 1.2px at 70% 8%, rgba(255,255,255,.9) 50%, transparent 50%);
  opacity: .9;
  pointer-events: none;
}
.hero-logo {
  width: min(210px, 48vw); height: auto;
  margin: 0 auto 22px;
  border-radius: 12px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .5);
}
.hero h1 {
  font-size: clamp(2.3rem, 6vw, 3.6rem);
  text-shadow: 0 2px 18px rgba(0,0,0,.55);
}
.hero .lede { color: #f4e4cf; }

/* ---- Buttons ------------------------------------------------------------ */
.btn { font-weight: 700; }
.btn-ghost { border-color: rgba(255,255,255,.75); }

/* ---- Cards: the amber band from the wordmark ---------------------------- */
.card {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-bottom: 4px solid var(--accent);
}
.card h2 { color: var(--brand); }

.section-title { border-bottom-color: var(--accent); }

/* Closing band picks the dark panel back up, as the ad does. */
.band {
  background: var(--night); color: #f4e4cf; border-top: 0;
}
.band h2 { color: #fff; }
/* Pure black on the amber, not the brown ink -- brown only reaches 4.2:1. */
.band .btn { background: var(--accent); border-color: var(--accent); color: #000; }
.band .btn:hover { background: #fff; border-color: #fff; color: var(--night); }

.notice { background: #fdf3e0; border-color: var(--accent); }

.site-footer { border-top: 4px solid var(--accent); }
.footer-name { font-family: var(--font-head); }
.site-footer a { color: #f0c58a; }