/* Generated by Frontend Wireframe Engine — Phase 4
   Buddy Boy Fine Barbeque — DNA Hash: 0549daed38b4
   Do not edit — regenerate via the engine */

:root {
  /* Typography — display-expressive-bold (Syne + DM Sans) + Alex Brush accent */
  --font-heading: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-script: 'Alex Brush', cursive;
  --scale-ratio: 1.5;
  --heading-weight: 800;
  --heading-letterspacing: -0.03em;
  --heading-line-height: 0.95;
  --body-size: 17px;
  --body-line-height: 1.6;
  --max-line-length: 62ch;

  /* Color — warm-neutral-editorial, ember/char/cream craft system */
  --char: #241F1D;
  --char-90: rgba(36,31,29,0.92);
  --ember: #C4501E;
  --ember-deep: #9A3B14;
  --cream: #F5EFE6;
  --bone: #FBF8F2;
  --sand: #E4D8C6;
  --oak: #7A5C3E;
  --smoke-text: #4A4038;
  --gold-line: #B98A3E;

  --color-bg-base: var(--bone);
  --color-bg-warm: var(--cream);
  --color-bg-sand: var(--sand);
  --color-text-primary: var(--char);
  --color-text-secondary: var(--smoke-text);
  --color-accent: var(--ember);
  --color-border: rgba(93,61,30,0.16);

  /* Components — sharp-confident + oversized-statement buttons */
  --radius: 3px;
  --card-radius: 4px;
  --shadow: 0 18px 40px -24px rgba(36,31,29,0.45);
  --border: 1px solid var(--color-border);

  /* Spacing — balanced */
  --spacing-section: clamp(4rem, 9vw, 8rem);
  --spacing-content-desktop: clamp(1.5rem, 6vw, 6rem);
  --spacing-content-mobile: 1.25rem;

  /* Animation — subtle-elegant */
  --transition-speed: 420ms;
  --transition-easing: cubic-bezier(0.22, 1, 0.36, 1);

  /* Layout — editorial-magazine */
  --layout-max-width: 1240px;

  /* Brand-family bar */
  --bar-h: 40px;
}

/* ---- Brand-family bar (WP Engine style top switcher) ---- */
.brandbar { position: fixed; top: 0; left: 0; width: 100%; height: var(--bar-h); z-index: 80; background: #14110F; display: flex; align-items: center; }
.brandbar .bb-inner { width: 100%; max-width: var(--layout-max-width); margin: 0 auto; padding: 0 clamp(1rem, 6vw, 4rem); display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; }
.bb-label { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.6rem; color: var(--gold-line); white-space: nowrap; flex: none; }
.bb-links { display: flex; gap: 1.3rem; align-items: center; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.bb-links::-webkit-scrollbar { display: none; }
.bb-links a { font-size: 0.78rem; color: rgba(251,248,242,0.55); white-space: nowrap; padding: 2px 0; }
.bb-links a:hover { color: var(--bone); }
.bb-links a.current { color: var(--bone); font-weight: 700; border-bottom: 2px solid var(--ember); }
@media (max-width: 680px) { .bb-label { display: none; } .brandbar .bb-inner { justify-content: flex-start; } }

/* ---- reset / base ---- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-line-height);
  color: var(--color-text-primary);
  background: var(--color-bg-base);
  letter-spacing: -0.005em;
  /* subtle-grain texture */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1,h2,h3,h4 {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-letterspacing);
  line-height: var(--heading-line-height);
  margin: 0;
}
.script { font-family: var(--font-script); font-weight: 400; letter-spacing: 0; line-height: 1; }

.wrap { max-width: var(--layout-max-width); margin: 0 auto; padding-left: var(--spacing-content-desktop); padding-right: var(--spacing-content-desktop); }
.eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ember-deep);
}
.eyebrow.on-dark { color: var(--gold-line); }

/* ---- buttons: oversized-statement ---- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-heading); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  font-size: 0.95rem;
  padding: 1.05rem 2rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--transition-speed) var(--transition-easing), background var(--transition-speed) var(--transition-easing), color var(--transition-speed) var(--transition-easing);
}
.btn-primary { background: var(--ember); color: var(--bone); }
.btn-primary:hover { background: var(--ember-deep); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--bone); border-color: rgba(251,248,242,0.55); }
.btn-ghost:hover { background: var(--bone); color: var(--char); }
.btn-dark { background: var(--char); color: var(--bone); }
.btn-dark:hover { background: var(--ember); }
.btn-lg { padding: 1.2rem 2.4rem; font-size: 1.05rem; }

/* ---- section rhythm ---- */
.section { padding-top: var(--spacing-section); padding-bottom: var(--spacing-section); }
.section-warm { background: var(--color-bg-warm); }
.section-sand { background: var(--color-bg-sand); }
.section-char { background: var(--char); color: var(--bone); }
.section-char h1,.section-char h2,.section-char h3 { color: var(--bone); }

/* headings scale */
.display-xl { font-size: clamp(3rem, 9vw, 7rem); }
.display-lg { font-size: clamp(2.4rem, 6vw, 4.6rem); }
.h-section { font-size: clamp(2rem, 4.4vw, 3.4rem); }

.lead { font-size: clamp(1.05rem, 1.7vw, 1.3rem); color: var(--color-text-secondary); max-width: var(--max-line-length); }
.section-char .lead { color: rgba(251,248,242,0.82); }

/* fade-in entrance (subtle-elegant) */
[data-animate] { opacity: 0; transform: translateY(22px); transition: opacity 900ms var(--transition-easing), transform 900ms var(--transition-easing); }
[data-animate].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-animate] { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }