:root {
    --black: #000;
    --paper: #eadcc8;
    --blood: #8f1118;
    --muted: #b6a996
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    background: #15110f;
    color: var(--paper);
    font: 17px/1.6 Arial, sans-serif
}

.legal-header,
.legal-main,
.legal-footer {
    max-width: 900px;
    margin: auto;
    padding-left: clamp(1.25rem, 5vw, 4rem);
    padding-right: clamp(1.25rem, 5vw, 4rem)
}

.legal-header {
    padding-top: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #4b4038
}

.brand {
    font: bold 1.3rem Arial, sans-serif;
    letter-spacing: -.08em;
    color: var(--paper);
    text-decoration: none
}

.brand span {
    color: var(--blood)
}

.legal-main {
    padding-top: 4rem;
    padding-bottom: 4rem;
    max-width: 760px;
    margin-left: max(0px, calc((100vw - 900px)/2))
}

.legal-main h1 {
    font-size: clamp(3rem, 8vw, 6rem);
    line-height: .9;
    letter-spacing: -.08em;
    margin: 0 0 3rem
}

.legal-main h2 {
    font-size: 1.25rem;
    margin: 2.5rem 0 .5rem
}

.legal-main p,
.legal-main li {
    color: var(--paper)
}

.legal-main a {
    color: var(--paper);
    text-decoration-color: var(--blood);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px
}

.legal-main address {
    font-style: normal
}

.legal-note {
    border-left: 4px solid var(--blood);
    padding: 1rem 1.25rem;
    background: #0b0908
}

.legal-footer {
    padding-top: 1.5rem;
    padding-bottom: 2rem;
    border-top: 1px solid #4b4038;
    color: var(--muted);
    font-size: .85rem
}

.legal-footer a {
    color: inherit
}

@media(max-width:700px) {
    .legal-main {
        margin: 0;
        padding-top: 3rem
    }

    .legal-main h1 {
        font-size: 3.2rem
    }
}