:root {
    color-scheme: light;

    --em-background: #f8faf8;
    --em-surface: #ffffff;
    --em-surface-subtle: #f1f5e8;
    --em-surface-accent: #f6f8ef;
    --em-text: #17211d;
    --em-text-muted: #66736d;
    --em-border: #dde4d2;
    --em-border-strong: #c0caa9;
    --em-primary: #78960f;
    --em-primary-strong: #60780d;
    --em-primary-soft: #edf4d8;
    --em-secondary: var(--em-primary);
    --em-secondary-soft: var(--em-primary-soft);
    --em-danger: #9f1239;
    --em-shadow-panel: 0 18px 42px rgb(23 33 29 / 8%);
    --em-shadow-card: 0 14px 34px rgb(23 33 29 / 7%);

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4.5rem;

    --text-sm: 0.875rem;
    --text-lg: 1.125rem;
    --text-xl: 1.35rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.25rem;
    --text-4xl: 3rem;

    --radius-sm: 0.35rem;
    --radius-md: 0.5rem;
    --radius-pill: 999px;
    --page-width: 72rem;
    --measure: 48rem;

    --pico-font-family: Arial, Helvetica, sans-serif;
    --pico-font-size: 100%;
    --pico-background-color: var(--em-background);
    --pico-color: var(--em-text);
    --pico-muted-color: var(--em-text-muted);
    --pico-muted-border-color: var(--em-border);
    --pico-primary: var(--em-primary-strong);
    --pico-primary-background: var(--em-primary);
    --pico-primary-border: var(--em-primary);
    --pico-primary-underline: rgb(120 150 15 / 42%);
    --pico-primary-hover: var(--em-primary);
    --pico-primary-hover-background: var(--em-primary-strong);
    --pico-primary-hover-border: var(--em-primary-strong);
    --pico-primary-hover-underline: rgb(96 120 13 / 60%);
    --pico-primary-focus: rgb(120 150 15 / 24%);
    --pico-primary-inverse: #ffffff;
    --pico-card-background-color: var(--em-surface);
    --pico-card-border-color: var(--em-border);
    --pico-card-box-shadow: var(--em-shadow-panel);
    --pico-form-element-background-color: var(--em-surface);
    --pico-form-element-border-color: var(--em-border-strong);
    --pico-form-element-active-border-color: var(--em-primary);
    --pico-form-element-focus-color: rgb(120 150 15 / 24%);
    --pico-border-radius: var(--radius-sm);
    --pico-line-height: 1.55;
    --pico-typography-spacing-vertical: 1rem;
}

html {
    background: var(--em-background);
    text-size-adjust: 100%;
}

body {
    min-width: 20rem;
    background:
        linear-gradient(180deg, rgb(120 150 15 / 7%) 0, rgb(120 150 15 / 0%) 18rem),
        var(--em-background);
    color: var(--em-text);
}

a {
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
}

:focus-visible {
    outline: 3px solid var(--em-primary);
    outline-offset: 3px;
}

h1,
h2,
h3 {
    color: var(--em-text);
    letter-spacing: 0;
    line-height: 1.14;
    text-wrap: balance;
}

h1 {
    max-width: 15ch;
    font-size: var(--text-3xl);
}

h2 {
    font-size: var(--text-2xl);
}

h3 {
    font-size: var(--text-xl);
}

table {
    width: 100%;
}

th,
td {
    text-align: left;
    vertical-align: top;
}

.text-muted,
.lede {
    color: var(--em-text-muted);
}

.lede {
    max-width: 45rem;
    font-size: var(--text-lg);
}

.form-error {
    margin: 0;
    color: var(--em-danger);
    font-weight: 800;
}

@media (min-width: 44rem) {
    h1 {
        font-size: var(--text-4xl);
    }
}