/* mores.dev - Swiss Typography Clean */
/* Colors: #3A3A3A, #E0DDD8, #1A1A1A, #FAFAF8, #307050, #2E5090, #808080, #C03030 */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: #FAFAF8; color: #1A1A1A; font-family: 'IBM Plex Sans', sans-serif; }

.grid-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; background-image: linear-gradient(rgba(128,128,128,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(128,128,128,0.08) 1px, transparent 1px); background-size: 8px 8px; opacity: 0; animation: gridFade 1.5s ease forwards; }
@keyframes gridFade { to { opacity: 1; } }

#site-header { position: relative; z-index: 1; text-align: center; padding: 4rem 2rem 2rem; }
.site-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.01em; color: #1A1A1A; }
.site-desc { font-family: 'IBM Plex Sans', sans-serif; font-size: 0.9rem; color: #808080; margin-top: 0.5rem; }

#norm-grid { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 2rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.norm-card { background: #FAFAF8; border: 1px solid #E0DDD8; padding: 1.5rem; position: relative; opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease, transform 0.5s ease, border-color 0.3s ease; }
.norm-card.visible { opacity: 1; transform: translateY(0); }
.norm-card:hover { border-color: #2E5090; }

.norm-id { font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; color: #808080; letter-spacing: 0.1em; display: block; margin-bottom: 0.5rem; }
.norm-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(1.2rem, 2vw, 1.8rem); letter-spacing: -0.01em; color: #1A1A1A; margin-bottom: 0.75rem; }
.norm-def { font-family: 'IBM Plex Sans', sans-serif; font-size: 0.95rem; line-height: 1.75; color: #3A3A3A; margin-bottom: 0.75rem; }
.norm-type { font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; color: #307050; display: block; }
.cross-ref { color: #2E5090; }

@media (max-width: 900px) { #norm-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { #norm-grid { grid-template-columns: 1fr; } }