/* =========================================================
   NOVELLOW
   PRIVACY POLICY AND TERMS OF USE

   A long page of parchment on the library's dark wall, easy
   to read on any screen.
========================================================= */

body.legal {
    min-height: 100vh;

    margin: 0;
    padding: max(20px, env(safe-area-inset-top, 0px)) 16px max(28px, env(safe-area-inset-bottom, 0px));

    background:
        radial-gradient(ellipse at 50% 0%, rgba(240, 207, 138, 0.16), transparent 55%),
        linear-gradient(180deg, #3b2231, #1f121b);
    background-attachment: fixed;

    color: var(--color-ink);
}

.legal-top {
    display: flex;
    justify-content: center;

    margin: 8px 0 18px;
}

.legal-logo img {
    display: block;

    width: min(333px, 78vw);
    height: auto;

    margin-block: calc(min(333px, 78vw) * -0.05);
}

.legal-page {
    width: min(100%, 760px);

    margin: 0 auto;
    padding: clamp(22px, 5vw, 48px) clamp(18px, 6vw, 60px);

    border-radius: var(--radius-large, 18px);

    font-family: var(--font-body);
    font-size: 19px;
    line-height: 1.6;
}

.legal-page h1 {
    margin: 0 0 12px;

    color: var(--color-plum);

    font-family: var(--font-heading);
    font-size: clamp(32px, 6vw, 44px);
    line-height: 1.1;
}

.legal-page h2 {
    margin: 34px 0 8px;

    padding-top: 12px;

    border-top: 1px solid rgba(92, 55, 73, 0.18);

    color: var(--color-plum);

    font-family: var(--font-heading);
    font-size: 23px;
    line-height: 1.25;

    scroll-margin-top: 16px;
}

.legal-page p,
.legal-page li {
    margin: 0 0 10px;
}

.legal-page ul {
    margin: 0 0 12px;
    padding-left: 22px;
}

.legal-page li::marker {
    color: var(--color-gold, #c9974f);
}

.legal-page a {
    color: var(--color-berry);

    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal-eyebrow {
    color: var(--color-ink-soft);

    font-family: var(--font-engraved);
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.legal-lead {
    font-size: 21px;

    color: var(--color-ink-soft);
}

.legal-contents {
    margin: 20px 0 8px;
    padding: 14px 20px;

    border: 1px dashed rgba(92, 55, 73, 0.3);
    border-radius: 12px;

    background: rgba(255, 250, 240, 0.5);

    font-family: var(--font-ui);
    font-size: 16px;
}

.legal-contents ol {
    columns: 2 220px;

    margin: 0;
    padding-left: 20px;
}

.legal-contents li {
    margin: 0 0 4px;

    break-inside: avoid;
}

.legal-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 10px;

    margin: 22px 0 0;

    color: rgba(246, 234, 212, 0.7);

    font-family: var(--font-ui);
    font-size: 15px;
}

.legal-foot a {
    color: #f6ead4;
}