/* ====== Legal pages (/privacy-policy, and whatever follows) ======
   No Figma frame: this is the site's own system applied to a long legal
   document. Loads after home.css, which supplies the .hero pattern.
   One reading column, generous rhythm, nothing decorative — the job is to
   be read and cited, not admired.                                        */

/* ── Hero: the shared ground, shorter, since there is no art to hold ── */
.legal-hero {
    min-height: 0;
    padding-block: calc(var(--nav-height) + var(--space-15)) var(--space-10);
    background: linear-gradient(160deg, var(--primary-900) 0%, var(--primary-800) 55%, var(--primary-600) 100%);
}
.legal-hero__stamp {
    font-family: var(--font-secondary);
    font-size: var(--t-p3);
    letter-spacing: var(--ls-cta);
    text-transform: uppercase;
    color: var(--c-accent-cyan);
}

/* ── The document ─────────────────────────────────────────────────── */
.legal { background: var(--c-surface-1); }
.legal__body { max-width: 68ch; }                       /* a measure, not the container */
.legal__body > * + * { margin-top: var(--space-5); }
.legal__body h2 {
    margin-top: var(--space-10);
    font-size: var(--t-h3);
    line-height: var(--lh-heading);
    font-weight: var(--fw-medium);
    color: var(--c-accent-cyan);
}
.legal__body p, .legal__body li { font-size: var(--t-p1); line-height: 1.65; color: var(--c-text-muted); }
.legal__lead { font-size: var(--t-h5) !important; line-height: 1.55 !important; color: var(--c-text) !important; }
.legal__body a { color: var(--c-accent-highlight); text-decoration: underline; text-underline-offset: 3px; }
.legal__body a:hover { color: var(--c-accent-cyan); }
.legal__body ul { display: flex; flex-direction: column; gap: var(--space-3); padding-left: 1.2em; list-style: disc; }
.legal__body li::marker { color: var(--c-accent-cyan); }

/* the grievance officer's details: a definition list, so the labels are
   structure rather than bolded prose */
.legal__contacts { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-6); padding: var(--space-6); border-radius: var(--radius-card); background: var(--gloss-sheen), var(--c-bg-raised); box-shadow: var(--gloss-edge); }
.legal__contact dt {
    font-family: var(--font-secondary);
    font-size: var(--t-p3);
    letter-spacing: var(--ls-cta);
    text-transform: uppercase;
    color: var(--c-accent-cyan);
}
.legal__contact dd { margin-top: var(--space-2); font-size: var(--t-p1); line-height: 1.55; color: var(--c-text); }

@media (min-width: 1024px) {
    .legal-hero { padding-block: calc(var(--nav-height) + var(--space-16)) var(--space-15); }
    .legal__body > * + * { margin-top: var(--space-6); }
    .legal__body h2 { margin-top: var(--space-16); }   /* a clear break between clauses */
    .legal__contacts { padding: var(--space-8); }
}