/* ── Design tokens ───────────────────────────────────────────────── */
:root {
    /* Palette */
    --clr-accent:             #409ec1;
    --clr-body-text:          #444;
    --clr-body-bg:            ghostwhite;
    --clr-html-bg:            azure;
    --clr-hero-bg:            #333;
    --clr-nav-bg:             #2b2b2b;
    --clr-nav-text:           #f5f0e6;
    --clr-nav-hover:          #3a3a3a;
    --clr-nav-dropdown:       #404040;
    --clr-nav-dropdown-hover: #4d4d4d;
    --clr-h3:                 chocolate;

    /* Typography */
    --font-sans:    "Helvetica", "Arial", sans-serif;
    --font-serif:   "Palatino Linotype", "Palatino", "Georgia", "Times New Roman", serif;
    --font-symbols: 'Noto Sans Symbols 2', sans-serif;

    /* Layout */
    --body-max-width: 960px;
    --body-min-width: 300px;
    --nav-height:     50px;
}

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

/* ── Root layout ─────────────────────────────────────────────────── */
html {
    font-size: 16px;
    display: flex;
    justify-content: center;
    background-color: var(--clr-html-bg);
    min-height: 100%;
    height: auto;
    scrollbar-gutter: stable;
}

body {
    margin: 0 auto;
    max-width: var(--body-max-width);
    min-width: var(--body-min-width);
    display: grid;
}

/* ── Common elements ─────────────────────────────────────────────── */
header {
    display: none;
}

nav {
    grid-area: nav;
}

p {
    text-align: justify;
}

footer {
    display: grid;
    grid-area: footer;
    text-align: center;
    padding: 1rem;
    margin-top: 2rem;
    background-color: var(--clr-nav-dropdown);
    color: var(--clr-nav-text);
}

/* ── Narrow screens ──────────────────────────────────────────────── */
@media screen and (max-width: 700px) {
    html {
        font-size: 14px;
    }
}