/* ============================================
   2. RESET & BASE STYLES
   ============================================ */

.skip-link {
    position:absolute;
    top:-40px;
    left:0;
    background:var(--black);
    color:var(--white);
    padding:8px 16px;
    z-index:10000;
    text-decoration:none;
    font-family:'IBM Plex Mono',monospace;
    font-size:0.875rem;
}

.skip-link:focus {
    top:0;
}

*:focus-visible {
    outline:3px solid var(--nav-color);
    outline-offset:2px;
}

a:focus-visible,button:focus-visible {
    outline:3px solid var(--nav-color);
    outline-offset:2px;
}

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body {
    font-family:'IBM Plex Mono',monospace;
    background-color:var(--ivory);
    color:var(--black);
    line-height:1.6;
}

body::after {
    content:"";
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    background:repeating-linear-gradient( 0deg,rgba(0,0,0,0.03),rgba(0,0,0,0.03) 1px,transparent 1px,transparent 2px );
    pointer-events:none;
    z-index:99999;
}

[data-theme="dark"] body::after {
    background:repeating-linear-gradient( 0deg,rgba(0,0,0,0.15),rgba(0,0,0,0.15) 1px,transparent 1px,transparent 2px );
}

h1,h2,h3,h4,h5,h6 {
    font-family:'IBM Plex Mono',monospace;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:-0.5px;
}

code,pre,.terminal {
    font-family:'IBM Plex Mono',monospace;
}

h1,h2,h3 {
    text-shadow: none;
}

[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3 {
    text-shadow: none;
}