/* Legal pages and the 404 (BR Stage 3, PR 4: OtherPages). Only the layout is new; the legal wording is the record's. */
.ci-legal { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--ci-s7); align-items: start;
    max-width: calc(var(--ci-content) + 2 * var(--ci-gutter)); margin: 0 auto; padding: var(--ci-s6) var(--ci-gutter) var(--ci-s8); }
.ci-legal__menu { position: sticky; top: var(--ci-s4); display: grid; gap: var(--ci-s2); font: var(--ci-small); }
.ci-legal__menu ul, .ci-legal__toc { margin: 0 0 var(--ci-s3); padding: 0; list-style: none; display: grid; gap: 2px; }
.ci-legal__menu a { display: block; padding: 6px var(--ci-s2); border-radius: var(--ci-r-field); color: var(--ci-ink); text-decoration: none; }
.ci-legal__menu a:hover { background: var(--ci-paper); }
.ci-legal__menu a[aria-current="page"] { background: var(--ci-moss); color: var(--ci-forest); font-weight: 600; }
.ci-legal__toc--3 a { padding-left: var(--ci-s4); color: var(--ci-muted); }
.ci-legal__body { max-width: 760px; }
.ci-legal__body h1 { margin: 0 0 var(--ci-s2); font: var(--ci-h1); }
.ci-legal__text { margin-top: var(--ci-s5); }
.ci-legal__text h2, .ci-legal__text h3 { scroll-margin-top: var(--ci-s5); }

.ci-lost { max-width: 640px; margin: 0 auto; padding: var(--ci-s8) var(--ci-gutter); text-align: center; }
.ci-lost__code { margin: 0; font: 600 96px/1 var(--ci-serif, Georgia, serif); color: var(--ci-moss); }
.ci-lost h1 { margin: var(--ci-s3) 0; font: var(--ci-h2); }
.ci-lost__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ci-s2); margin: var(--ci-s5) 0; }

@media (max-width: 899px) {
    .ci-legal { grid-template-columns: minmax(0, 1fr); gap: var(--ci-s4); padding-top: var(--ci-s4); }
    .ci-legal__menu { position: static; }
    .ci-legal__menu ul { display: flex; flex-wrap: wrap; gap: var(--ci-s1); }
}
/* As the OtherPages board (review of the legal pages): paper background, the menu in a card with the current page in
   dark, the date badge, "In short", serif section titles and the site's link colour */
body:has(.ci-legal) { background: var(--ci-paper); }
.ci-legal__menu { padding: var(--ci-s4); border: 1px solid var(--ci-line); border-radius: var(--ci-r-card); background: var(--ci-surface); }
.ci-legal__menu a[aria-current="page"] { background: var(--ci-deep-forest); color: var(--ci-paper); }
.ci-legal__toc a { color: var(--ci-muted); font: var(--ci-caption); }
.ci-legal__body h1 { font: 500 44px/1.1 var(--ci-serif); color: var(--ci-deep-forest); }
.ci-legal__badges { display: flex; flex-wrap: wrap; gap: var(--ci-s2); margin: 0; }
.ci-legal__badges span { padding: 3px 10px; border: 1px solid var(--ci-line); border-radius: var(--ci-r-pill); background: var(--ci-surface); font: var(--ci-caption); color: var(--ci-muted); }
.ci-legal__short { margin: var(--ci-s4) 0 0; padding: var(--ci-s3) var(--ci-s4); border-radius: var(--ci-r-field); background: var(--ci-moss); font: var(--ci-small); }
.ci-legal__text h2 { margin: var(--ci-s6) 0 var(--ci-s2); font: 600 22px/1.3 var(--ci-serif); color: var(--ci-deep-forest); }
.ci-legal__text h3 { margin: var(--ci-s4) 0 var(--ci-s2); font: 600 17px/1.35 var(--ci-sans); color: var(--ci-ink); }
.ci-legal__text p, .ci-legal__text li { font: var(--ci-body); }
.ci-legal__text a { color: var(--ci-forest); }