/* ==========================================================================
   Base CSS - Variables, Typography, General Elements
   ========================================================================== */

/* Variables */

:root {
    --borderWidth: 4px;
    --color-base: #222;
    --color-highlight: #ff5527;
    --color-muted: #888;
    --color-text-light: #fff;
    --color-bg-dark: #000;
    --layout-site-gutter: 2rem;
    --layout-site-width: 32rem;
    --type-system-ui: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --type-technical: monospace;
}

@media (max-width: 768px) {
    :root {
        --layout-site-gutter: 1rem;
    }
}

/* Font CSS files are loaded separately in _layout.twig */

/* Base Elements */

html {
    font-size: 20px;
}

body {
    color: var(--color-base);
    font-family: var(--type-system-ui);
    line-height: 1.5;
    margin: 0;
}

/* Typography */

h1,h2,h3,h4,h5,h6 {
    font-family: 'Encode Sans Condensed', sans-serif;
    line-height: 1;
}

h1 {
    line-height: 1.2;
}

h2 {
    line-height: 1.2;
}

h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child {
    margin-top: 0;
}

p, blockquote, ul, ol, li {
    font-family: 'Encode Sans Condensed', sans-serif;
}

.page-content p, .page-content blockquote, .page-content ul, .page-content ol, .page-content li {
    font-family: 'STIX Two Text', serif;
}

label {
    font-family: 'Encode Sans Condensed', sans-serif;
    padding: 5px 0;
}


/* General Elements */

img {
    display: block;
    max-width: 100%;
    height: auto;
}

.MetaText {
    font-family: var(--type-technical);
    font-size: 0.875rem;
    letter-spacing: 0;
}

.MetaText--muted {
    color: var(--color-muted);
}

.MetaText + h1, .MetaText + h2 {
    margin-top: 0;
}

a {
    color: inherit;
    /* text-decoration: none; */
}

.page-content a:hover {
    color: var(--color-highlight);
}

hr {
    margin: 0;
    border: 0;
    border-top: 1px solid var(--color-muted);
}