/* ═══════════════════════════════════════════════════════
   dear-beany.css  —  Dear Beany case study
   ═══════════════════════════════════════════════════════ */

/* ── BRAND PALETTE ── */
:root {
  --brand:     #C05A30;
  --brand-dk:  #8C3A1A;
  --brand-lt:  #D97A4F;
  --bg:        #F5EDE3;
  --bg-alt:    #EDE0D2;
  --ink:       #2A1810;
  --ink-soft:  #5C3D2E;
  --white:     #ffffff;
  --orange:    #E8541A;

  /* Cursor */
  --cursor-color:       var(--brand);
  --cursor-trail-color: var(--brand);

  /* Page transition */
  --page-transition-bg: #2A1810;

  /* Arrive animation */
  --arrive-y:      50px;
  --arrive-scale:  0.95;
  --arrive-rotate: -1.5deg;

  /* Nav */
  --nav-bg: linear-gradient(to bottom, rgba(232,84,26,0.95) 0%, rgba(232,84,26,0.6) 50%, transparent 100%);
  --nav-bg-scrolled: rgba(42,24,16,0.97);
  --nav-cta-scrolled-color: var(--brand);
  --nav-cta-scrolled-hover-bg: var(--brand);
  --nav-cta-scrolled-hover-color: var(--white);
  --nav-mobile-bg: rgba(42,24,16,0.97);

  /* Footer */
  --footer-bg:     var(--ink);
  --footer-accent: var(--brand-lt);
}

body { background: var(--bg); color: var(--ink); font-family: 'Nunito Sans', sans-serif; }

/* ── FONT OVERRIDES ── */
.case-title,
.section-heading,
.step-num {
  font-family: 'Bodoni Moda', serif;
  font-optical-sizing: auto;
  -webkit-text-stroke: 0.4px currentColor;
}

.case-eyebrow,
.case-tagline,
.meta-label, .meta-value,
.section-label,
.section-body,
.swatch-name, .swatch-hex,
.case-nav a, .case-nav-center,
.step-title, .step-body,
.btn-visit {
  font-family: 'Nunito Sans', sans-serif;
}

/* ── HEADING STROKE (all h tags) ── */
h1, h2, h3 { -webkit-text-stroke: 0.4px currentColor; }

/* ── HERO OVERRIDES ── */
.case-hero { background: var(--ink); }
.case-hero-video { opacity: 0.35; }
.case-hero-overlay {
  background: linear-gradient(to top, rgba(42,24,16,1) 0%, rgba(42,24,16,0.75) 50%, rgba(42,24,16,0.5) 100%);
}

.section-dark{
  background:var(--brand-dk);
}

/* ── MOCKUP OVERRIDES ── */
.mockup-card { background: var(--bg-alt); border: none; }
.showcase-full { background: var(--bg-alt); border: none; }

/* ── FOOTER WORDMARK ── */
.footer-wordmark { font-family: 'Bodoni Moda', serif; font-optical-sizing: auto; font-size: clamp(3.5rem, 16vw, 13rem); }
@media (max-width: 768px) {
  .footer-wordmark { font-size: clamp(2rem, 15vw, 5rem); }
}

/* ── CASE NAV OVERRIDES ── */
.case-nav { background: var(--bg-alt); border-top: none; }
.case-nav a { color: var(--brand); }
.case-nav a:hover { color: var(--brand-dk); }
.case-nav-center { color: rgba(42,24,16,0.4); }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .nav-links {
    background: rgba(42,24,16,0.97);
  }
}
@media (max-width: 480px) {
  .case-hero { padding: 0 5vw 3.5rem; }
}