/* ============================================
   Legal: Privacy Policy and Terms of Service.
   Quiet typographic column, ~72ch, generous leading, weight 300.
   ============================================ */

.legal {
    padding: 6rem 0 7rem;
    background: var(--c-bg);
}
.legal__body {
    max-width: 72ch;
    font-weight: 300;
    font-size: 1.0625rem;
    line-height: 1.85;
    color: var(--c-bone-soft);
}
.legal__intro {
    font-family: var(--f-serif);
    font-size: clamp(1.15rem, 1.6vw, 1.35rem);
    line-height: 1.6;
    color: var(--c-bone);
    margin-bottom: 2.5rem;
}

/* Contents list */
.legal__toc {
    padding: 1.75rem 2rem;
    margin-bottom: 3.5rem;
    background: var(--c-bg-soft);
    border-left: 1px solid var(--c-brass);
}
.legal__toc ol {
    list-style: decimal;
    padding-left: 1.25rem;
    columns: 2;
    column-gap: 2.5rem;
    font-size: 0.9375rem;
    line-height: 2;
}
.legal__toc li::marker { color: var(--c-brass); }
.legal__toc a { color: var(--c-bone-soft); transition: color 0.3s var(--ease-out); }
.legal__toc a:hover { color: var(--c-brass); }

/* Body */
.legal__body h2 {
    font-family: var(--f-serif);
    font-weight: 400;
    font-size: clamp(1.25rem, 1.8vw, 1.5rem);
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--c-bone);
    margin: 3.25rem 0 1rem;
    scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.legal__body p { margin-bottom: 1.15rem; }
.legal__body ul {
    list-style: none;
    margin: 0 0 1.25rem;
    display: grid;
    gap: 0.6rem;
}
.legal__body ul li { position: relative; padding-left: 1.5rem; }
.legal__body ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.9em;
    width: 0.6rem;
    height: 1px;
    background: var(--c-brass);
}
.legal__body strong { font-weight: 500; color: var(--c-bone); }
.legal__body p a,
.legal__body li a {
    color: var(--c-bone);
    border-bottom: 1px solid var(--c-brass-soft);
    transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.legal__body p a:hover,
.legal__body li a:hover { color: var(--c-brass); border-color: var(--c-brass); }
.legal__body code {
    font-size: 0.875em;
    padding: 0.1em 0.4em;
    background: var(--c-surface);
}
.legal__updated {
    margin-top: 3.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--c-line);
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    color: var(--c-mute);
}

@media (max-width: 1023px) {
    .legal { padding: 4.5rem 0 5.5rem; }
}
@media (max-width: 540px) {
    .legal { padding: 3.5rem 0 4.5rem; }
    .legal__body { font-size: 1rem; line-height: 1.8; }
    .legal__toc { padding: 1.5rem 1.25rem; }
    .legal__toc ol { columns: 1; }
}