:root {
    /* colors */
    --color-bg: #ffffff;
    --color-fg: #000000;
    --color-accent: #06b6d4; /* turquoise hover on homepage */
    --color-muted: #6b7280;

    /* typography */
    --font-sans: "Spectral", Georgia, serif;
    --font-size-0: 18px;

    /* layout */
    --content-max: 700px;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
}

/* modern, light reset */
*, *::before, *::after { box-sizing: border-box; }
html:focus-within { scroll-behavior: smooth; }
html, body { 
    height: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body {
    margin: 0;
    font-family: var(--font-sans);
    font-weight: 300;
    color: var(--color-fg);
    background: var(--color-bg);
    font-size: var(--font-size-0);
    line-height: 1.5;
    display: flex;
    flex-direction: column;
}

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

ul, ol {
    padding-inline-start: 20px;
}

/* shared layout */
.container {
    max-width: var(--content-max);
    padding-inline: 20px;
    margin-inline: auto;
}

.main {
    padding-block: 16px;
}

/* typography */
h1 { font-size: 1.5em; }
h2 { font-size: 1.2em; }
h3 { font-size: 1.1em; font-weight: 500; }

blockquote {
    font-style: italic;
    font-weight: 200;
}

/* typography wrapper matching blog layout spacing */
.prose p,
.prose ul,
.prose ol,
.prose blockquote,
.prose pre,
.prose table {
    margin: 0 0 0.85em;
}

.prose h1 { margin: 1.5em 0 0.5em; }
.prose h2 { margin: 1.25em 0 0.5em; }
.prose h3 { margin: 1em 0 0.5em; }
.prose h4 { margin: 0.85em 0 0.5em; }

/* homepage specific small touches */
.lightbar {
    background-color: grey;
    height: 2px;
    width: 75%;
    margin: 15px auto;
}

/* sepia to blue link color scheme */
.home a {
    color: #6b5947;
    text-decoration: underline;
}

.home a:hover {
    color: #0066cc;
}

/* responsive adjustments */
@media (max-width: 767px) {
    .container { padding-inline: 20px; }
}