:root {
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
html { scroll-padding-top: env(safe-area-inset-top, 0px); }
*, *::before, *::after { box-sizing: inherit; }
html, body { background: #0b0d0c; }
body { font-family: 'Inter', sans-serif; }
h1, h2, h3, .font-display { font-family: 'Fraunces', serif; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0b0d0c; }
::-webkit-scrollbar-thumb { background: #2a2e30; border-radius: 6px; }

.chip { transition: border-color .15s ease, color .15s ease, background-color .15s ease; }
.chip[data-active="true"] { background-color: #c9a227; color: #0b0d0c; border-color: #c9a227; }

.cat-btn { transition: color .15s ease, opacity .15s ease; }
.cat-btn[data-active="true"] { color: #e0c065; }
.cat-btn[data-active="true"] .cat-underline { transform: scaleX(1); }
.cat-underline { transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }

.card { transition: transform .3s ease, box-shadow .3s ease; }
.card:hover { transform: translateY(-3px); }
.card:hover .card-frame { box-shadow: 0 20px 40px -20px rgba(0,0,0,.6); }
.card-frame { transition: box-shadow .3s ease; }
.card:hover .card-tint { opacity: .15; }
.card-tint { transition: opacity .3s ease; opacity: .35; }

.placeholder-icon { opacity: .5; }

#lightbox { transition: opacity .2s ease; }

.focus-ring:focus-visible { outline: 2px solid #e0c065; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}