/* Shared tiny helpers for synchronized layout */
:root { 
    --site-accent: #afc8f0; 
    --on-surface: #e5e2e1;
}

.nav-link { 
    color: var(--on-surface); 
    text-decoration: none; 
    transition: color 0.2s;
}

.nav-link:hover { 
    color: var(--site-accent); 
}

.sr-only { 
    position: absolute; 
    width: 1px; 
    height: 1px; 
    padding: 0; 
    margin: -1px; 
    overflow: hidden; 
    clip: rect(0,0,0,0); 
    white-space: nowrap; 
    border: 0; 
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24;
}

.grid-blueprint {
    background-image: 
        linear-gradient(rgba(45, 45, 45, 0.1) 1px, transparent 1px), 
        linear-gradient(90deg, rgba(45, 45, 45, 0.1) 1px, transparent 1px);
    background-size: 40px 40px;
    background-color: transparent;
}