/* Prose layout for /privacy and /terms.
 *
 * Loaded after landing.css, which supplies the tokens, the body ground, the
 * link colour, the focus ring, .sr-only, .display and .foot. Duplicating any
 * of that here would be a second source of truth that drifts the first time a
 * token changes, so this file only adds what a page of prose needs and the
 * room did not: a measure, heading rhythm, and lists.
 *
 * The room's own furniture — the beam, the screen, the montage — is all class-
 * scoped in landing.css and simply never instantiated here. House lights up.
 */

.legal-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: baseline;
    gap: 18px;
    flex-wrap: wrap;
    padding: 26px 32px;
    border-bottom: 1px solid var(--line);
}

.legal-mark {
    font-family: var(--display);
    font-size: 20px;
    letter-spacing: 0.3em;
    text-indent: 0.3em;
    color: var(--gold);
    text-transform: uppercase;
}

.legal-mark:hover { color: var(--gold-hover); }

.legal-top nav {
    margin-left: auto;
    font-size: 13px;
    color: var(--text-faint);
}

.legal-top nav a { padding: 5px 2px; display: inline-block; min-height: 24px; }

/* aria-current marks which of the two pages you are on. */
.legal-top nav a[aria-current="page"] { color: var(--text-soft); }

.legal {
    position: relative;
    z-index: 2;
    /* 68ch at this size lands near 640px, the measure the room's own body copy
       already uses. Wider reads as a terms-and-conditions wall. */
    max-width: 68ch;
    margin: 0 auto;
    padding: 64px 32px 88px;
}

.legal h1 {
    font-family: var(--display);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 0.94;
    font-size: clamp(44px, 8vw, 76px);
    margin: 0 0 10px;
}

.legal .stamp {
    font-size: 13px;
    color: var(--text-faint);
    margin: 0 0 44px;
}

/* The one-paragraph summary above the contents. It is not a substitute for the
   policy and does not try to be; it exists so someone who only wants to know
   whether the thing sells their data can find that out in one screen. */
.legal .gist {
    border-left: 2px solid var(--gold-deep);
    padding: 2px 0 2px 20px;
    margin: 0 0 44px;
    color: var(--text-soft);
}

.legal h2 {
    font-family: var(--display);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 26px;
    line-height: 1.1;
    color: var(--text);
    margin: 52px 0 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.legal h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin: 28px 0 8px;
}

.legal p, .legal li { color: var(--text-soft); }
.legal p { margin: 0 0 16px; }

.legal ul, .legal ol { margin: 0 0 18px; padding-left: 22px; }
.legal li { margin-bottom: 8px; }
.legal li::marker { color: var(--text-faint); }

.legal strong { color: var(--text); font-weight: 600; }

.legal .toc {
    list-style: none;
    padding: 0;
    margin: 0 0 8px;
    columns: 2;
    column-gap: 32px;
    font-size: 14px;
}

.legal .toc li { margin-bottom: 6px; break-inside: avoid; }

/* Tables carry the "what we hold and why" grid, which is the part of a privacy
   policy anyone actually reads. It scrolls in its own box rather than pushing
   the page sideways on a phone. */
.legal .grid-wrap { overflow-x: auto; margin: 0 0 22px; }

.legal table {
    border-collapse: collapse;
    width: 100%;
    min-width: 520px;
    font-size: 14px;
}

.legal th, .legal td {
    text-align: left;
    vertical-align: top;
    padding: 11px 14px 11px 0;
    border-bottom: 1px solid var(--line);
}

.legal th {
    color: var(--text);
    font-weight: 600;
    white-space: nowrap;
}

.legal td { color: var(--text-soft); }

.legal .contact {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 20px 22px;
    margin: 28px 0 0;
}

.legal .contact p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
    .legal { padding: 44px 20px 64px; }
    .legal .toc { columns: 1; }
    .legal-top { padding: 20px; }
}