/*
 * style.css
 * Shared layout and typography — extracted from index.html
 * Minimalistic, unix-like: no rounded corners, no bars
 */

/* === Base === */
html, body {
    margin: 0;
    min-height: 100vh;
    font-family: "JetBrainsMono-Regular", monospace;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* allow scrolling on small screens */
    align-items: center;
    background: var(--base00);
    overflow-y: auto;
}

body > :first-child {
    margin-top: 1rem;
}

@media (min-height: 700px) {
    body {
        justify-content: center;
    }
    body > :first-child {
        margin-top: 0;
    }
}

body > :not(.logo-link),
li {
    display: block;
    text-align: center;
}

h2 {
    color: var(--base0e);
    font-size: clamp(1rem, 3.2vw, 1.5rem);
}

/* fluid max-width: grows with viewport but never overflows */
body > :not(.logo-link) {
    max-width: min(70ch, 95vw);
    width: 100%;
}

h1 {
    color: var(--base0d);
    font-size: clamp(1.2rem, 4vw, 2rem);
    word-break: break-word;
}

p {
    color: var(--base03);
    line-height: 1.6;
    font-size: clamp(0.85rem, 2.5vw, 1rem);
}

a.logo-link {
    display: block;
    text-decoration: none;
    width: clamp(12rem, 60vw, 30rem);
    margin: 0 auto;
}

a.logo-link img {
    width: 100%;
    height: auto;
}

a {
    font-size: clamp(1rem, 3.5vw, 2rem);
}

a.download {
    font-size: clamp(0.8rem, 2.5vw, 1.5rem);
}

nav a:nth-child(6n+1) { color: var(--base0d); }
nav a:nth-child(6n+2) { color: var(--base0c); }
nav a:nth-child(6n+3) { color: var(--base0e); }
nav a:nth-child(6n+4) { color: var(--base0b); }
nav a:nth-child(6n+5) { color: var(--base09); }
nav a:nth-child(6n+6) { color: var(--base0a); }

a:hover {
    color: var(--base08);
}

/* === Navigation === */
nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(6px, 2vw, 10px);
    margin-top: 1rem;
}

/* === Mobile adjustments === */
@media (max-width: 480px) {
    body {
        padding: 0 0.5rem;
    }
    section {
        padding: 0 0.5rem;
    }
}

@media (min-width: 1400px) {
    body > :not(.logo-link) {
        max-width: 80ch;
    }
}