/* CSS Reset */
* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

/* Custom properties */
:root {
    color-scheme: light;

    --text-color: #100F0F;
    --bg-color: #ffffff;
    --highlight-color: #ffd00066;
    --muted-bg: #ebe8da;

    --font-mono: 'Roboto Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --font-serif: 'Merriweather', Georgia, 'Times New Roman', serif;

    --fs-body: .875rem;   /* 14px */
    --fs-display: 1.5rem; /* 24px */
    --lh-body: 1.5;
    --lh-tight: 1.2;

    --gutter: 32px;
    --measure: 650px;
}

/* Base styles */
body {
    font-family: var(--font-mono);
    font-size: var(--fs-body);
    font-weight: 400;
    color: var(--text-color);
    background-color: var(--bg-color);
    margin: 0;
    padding: 0;
    line-height: var(--lh-body);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Main container */
.container {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 16px var(--gutter) var(--gutter);
}

/* Site header */
header {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 16px var(--gutter) 0;
}

.site-title {
    margin: 0;
}

.site-title a {
    color: inherit;
    text-decoration: none;
    padding: 0;
    margin: 0;
    -webkit-tap-highlight-color: transparent;
}

.site-title a:hover {
    background-color: transparent;
}

.site-title a:focus-visible {
    outline-offset: 4px;
}

/* Typography */
h1,
.site-title {
    font-family: var(--font-serif);
    font-size: var(--fs-display);
    font-weight: 900;
    line-height: var(--lh-tight);
}

h1 {
    margin: 0.5em 0 0.5em 0;
}

h2 {
    font-size: var(--fs-body);
    font-weight: 700;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

h3 {
    font-size: var(--fs-body);
    font-weight: 400;
    letter-spacing: 0.02em;
    margin-top: 1em;
    margin-bottom: 0.5em;
}

p {
    margin: 0 0 0.5em 0;
}

/* Links */
a {
    color: var(--text-color);
    text-decoration: underline;
    padding: 0 2px;
    margin: 0 -2px;
    overflow-wrap: anywhere;
}

a:hover,
a:active {
    background-color: var(--highlight-color);
}

a:focus-visible {
    outline: 2px solid var(--text-color);
    outline-offset: 2px;
    background-color: var(--highlight-color);
}

/* Section labels (code style) */
.section-label {
    background-color: var(--muted-bg);
    padding: 2px 6px;
    display: inline-block;
    margin: 0.75em 0 0.25em 0;
    font-weight: 400;
}

/* Highlight text */
mark {
    background-color: var(--highlight-color);
    color: inherit;
    padding: 0 2px;
}

/* Lists */
ul {
    margin: 0 0 0.75em 0;
    padding-left: 1.5em;
}

li {
    margin-bottom: 0.25em;
}

/* Horizontal rule */
hr {
    border: none;
    border-top: 2px solid var(--muted-bg);
    margin: 1em 0;
}

/* Navigation */
nav {
    margin: 2em 0;
}

/* Text selection styling */
::selection {
    background-color: var(--highlight-color);
    color: var(--text-color);
}

/* Mobile responsiveness */
@media (max-width: 480px) {
    .site-title {
        font-size: 18px;
    }
}