@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500;1,9..144,600;1,9..144,700&display=swap');

html, body { font-family: 'Inter', system-ui, sans-serif; }
.font-display { font-family: 'Fraunces', Georgia, serif; }

body { background: #faf7f1; color: #151210; -webkit-font-smoothing: antialiased; }

.noise-overlay {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

header.fixed {
  transition: background-color 220ms ease, backdrop-filter 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
header.fixed.scrolled {
  background-color: rgba(250, 247, 241, 0.88);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid rgba(232, 227, 217, 0.6);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}

@keyframes ring-spin { from { transform: rotate(0) } to { transform: rotate(360deg) } }
.ring-spin { animation: ring-spin 40s linear infinite; }
@keyframes marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }
.marquee-track { animation: marquee 50s linear infinite; width: max-content; }
.marquee-track:hover { animation-play-state: paused; }
@keyframes float-gentle { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }
.float-gentle { animation: float-gentle 5s ease-in-out infinite; }