* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    margin: 0;
}

body {
    color: #2d1f16;
    display: flex;
    flex-direction: column;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
    min-height: 100vh;
}

main {
    flex: 1;
}

.header {
    background:
        /* sun-bleached right side (more natural falloff) */
        radial-gradient(
            ellipse at 88% 45%,
            rgba(255, 255, 255, 0.18),
            rgba(255, 255, 255, 0.06) 35%,
            transparent 70%
        ),
        radial-gradient(
            ellipse at 80% 15%,
            rgba(255, 255, 255, 0.10),
            transparent 75%
        ),

        /* subtle worn compression zones */
        radial-gradient(
            ellipse at 25% 40%,
            rgba(255, 255, 255, 0.06),
            transparent 65%
        ),
        radial-gradient(
            ellipse at 60% 80%,
            rgba(0, 0, 0, 0.08),
            transparent 70%
        ),

        /* primary weave (slightly imperfect spacing) */
        repeating-linear-gradient(
            45deg,
            rgba(0, 0, 0, 0.04) 0px,
            rgba(0, 0, 0, 0.03) 2px,
            transparent 2px,
            transparent 14px
        ),

        /* cross weave (subtle irregular fading) */
        repeating-linear-gradient(
            -45deg,
            rgba(255, 255, 255, 0.05) 0px,
            rgba(255, 255, 255, 0.02) 3px,
            transparent 3px,
            transparent 17px
        ),

        #b86c3c;

    border-bottom: 2px solid #2d1f16;
}

.header h1 {
    color: white;
    font-size: 2rem;
}

button {
    background: #b86b3c;
    border: none;
    border-radius: 1rem;
    color: white;
    cursor: pointer;
    font-family: inherit;
    padding: 0.3rem 0.7rem;
}

.styled-separator {
    background: linear-gradient(
        to right,
        transparent,
        #b86b3c,
        transparent
    );
    border: none;
    height: 2px;
    margin: 2rem auto;
    width: 50%;
}

textarea {
    resize: vertical;
    max-width: 100%;
}

footer {
    background-color: #b86c3c2d;
    border-top: 1px solid #2d1f16;
    color: black;
    font-size: 0.8rem;
    padding: 0.3rem;
    text-align: right;
}

footer a {
    color: black;
    margin: 0 1rem;
}

footer a .active {
    font-weight: bold;
}

.legal-page {
    border: 1px solid gray;
    padding: 5rem;
}