/* Small extras that are awkward to express with Tailwind utilities alone */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

.eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7B2826;
}

.nav-link { position: relative; }
.nav-link.active { color: #7B2826; font-weight: 600; }
.nav-link.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 1.5px; background: #7B2826;
}

.field {
  width: 100%;
  background: #FCF5E8;
  border: 1px solid #E6CFA3;
  padding: 0.8rem 0.9rem;
  font-size: 0.9rem;
  color: #4A2A1E;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.field::placeholder { color: #8A7466; }
.field:focus { border-color: #7B2826; box-shadow: 0 0 0 3px rgba(123,40,38,.12); }
.field.invalid { border-color: #B3261E; }

.img-zoom { overflow: hidden; }
.img-zoom img { transition: transform .6s ease; }
.img-zoom:hover img { transform: scale(1.04); }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* Marquee strip on small screens */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { animation: marquee 22s linear infinite; }

.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

.drawer { transition: transform .35s ease; }
.overlay { transition: opacity .3s ease; }