/* Saturday Night — global chrome. Ported from the design <style> block, plus
   responsive fallbacks for the design's desktop-first inline grids. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #0b0a09; }
.sn-page { color: #f2ede3; font-family: 'Archivo', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }

[data-sn-root] a { color: var(--accent, #c6a568); text-decoration: none; transition: opacity .3s ease; }
[data-sn-root] a:hover { opacity: .72; }
[data-sn-nav] a { color: #f2ede3; }
[data-sn-nav] a:hover { opacity: .6; }

::selection { background: var(--accent, #c6a568); color: #0b0a09; }
input, textarea, button { font-family: 'Archivo', sans-serif; }
input:focus, textarea:focus { outline: none; }

@keyframes snUp   { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes snFade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes snMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.sn-marquee:hover .sn-track { animation-play-state: paused; }

/* Reveal-on-scroll (JS toggles .is-in). */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* Quick-shop modal open state. */
[data-sn-modal] { animation: snUp .6s cubic-bezier(.2,.7,.2,1); }
[data-sn-toast] { animation: snFade .4s ease; }
body.sn-modal-open { overflow: hidden; }

/* ---- Responsive fallbacks for desktop-first inline grids ---- */
@media (max-width: 900px) {
	.sn-modal-grid { grid-template-columns: 1fr !important; }
	.sn-foot-grid  { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 560px) {
	.sn-foot-grid { grid-template-columns: 1fr !important; }
	[data-sn-nav] { padding-left: 18px !important; padding-right: 18px !important; gap: 14px !important; }
	[data-sn-nav] nav { gap: 14px !important; }
}