/* Sip & Nibble — morning café */
:root {
  --bg: #f6efe3;
  --bg-alt: #efe5d3;
  --surface: #fdfaf4;
  --text: #33291f;
  --text-muted: #7d7060;
  --accent: #8c5a33;
  --accent-contrast: #f6efe3;
  --border: rgba(51, 41, 31, 0.13);
}
/* Textured hero for Nibble (no photography yet) */
.hero-media--nibble {
  background:
    radial-gradient(ellipse 90% 70% at 15% 8%, rgba(168, 187, 160, 0.4), transparent 55%),
    radial-gradient(ellipse 70% 60% at 88% 88%, rgba(140, 90, 51, 0.22), transparent 60%),
    radial-gradient(ellipse 50% 45% at 75% 15%, rgba(200, 169, 106, 0.28), transparent 60%),
    linear-gradient(165deg, #f8f2e6 0%, #efe3cd 55%, #e7d6ba 100%);
  animation: none;
  transform: none;
  filter: none;
}
.hero-scrim { background: none; }
/* Legibility grade over the café photo */
.hero-scrim--photo {
  background: linear-gradient(100deg,
    rgba(246, 239, 227, 0.92) 0%,
    rgba(246, 239, 227, 0.72) 38%,
    rgba(246, 239, 227, 0.08) 72%,
    rgba(246, 239, 227, 0) 100%);
}
.band-scrim { background: rgba(51, 41, 31, 0.35); }

/* Floating steam wisps */
.steam {
  position: absolute; bottom: -10%; width: 2px; height: 34vh;
  background: linear-gradient(to top, transparent, rgba(140, 90, 51, 0.28), transparent);
  border-radius: 999px;
  animation: steamRise 7s ease-in-out infinite;
  z-index: 1;
}
.steam:nth-child(2) { left: 68%; animation-delay: 1.8s; height: 26vh; }
.steam:nth-child(3) { left: 76%; animation-delay: 3.4s; height: 30vh; }
.steam:nth-child(1) { left: 72%; }
@keyframes steamRise {
  0% { transform: translateY(30%) scaleY(0.6); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: translateY(-70%) scaleY(1.15) translateX(14px); opacity: 0; }
}