:root
{
    --bg: #ffffff;
    --bg-soft: #f7f4ee;
    --text: #2b2925;
    --text-light: #7c7568;
    --border: #e5dfd2;
    --accent: #b4482c;
    --accent-dark: #93381f;
    --accent-light: #f5eae1;
    --link: #b4482c;
    --link-hover: #93381f;
    --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
}

*, *::before, *::after
{
    box-sizing: border-box;
}

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

body
{
    margin: 0;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.7;
    background: var(--bg-soft);
    color: var(--text);
}

h1, h2, h3, h4, h5, h6, p, ul, li
{
    margin: 0;
    padding: 0;
}

h1, h2, h3
{
    font-weight: 700;
    line-height: 1.3;
}

h1
{
    font-size: 1.6em;
}

h2
{
    font-size: 1.3em;
    margin: 0 0 1rem 0;
}

h3
{
    font-size: 1.1em;
    margin: 1.5rem 0 0.75rem 0;
}

a
{
    color: var(--link);
    text-decoration: underline;
    text-underline-offset: 2px;
}

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

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

.main_section p
{
    margin-bottom: 1em;
}

.main_section ul
{
    list-style: square inside;
    margin-bottom: 1em;
}

pre
{
    background: #f2eee4;
    border: 1px solid var(--border);
    padding: 1rem 1.25rem;
    overflow-x: auto;
    font-size: 0.85em;
    line-height: 1.6;
    border-radius: 8px;
}

code
{
    font-family: var(--font-mono);
}