/* ============================================================================
   Skiza Laikipia — Privacy & Terms page
   ============================================================================
   Nearly everything on this page is already in assets/campaign.css: the
   header, the footer, the mobile action bar, the buttons, the preview band,
   the focus ring, the colour tokens. These rules cover what the shared sheet
   has no answer for — a legal document is read line by line, so it needs a
   narrow measure while every other page sits on the 1200px campaign grid; its
   headings carry a Kiswahili line; and one address on it has to be visibly
   flagged as dead.

   The artboard set its body copy in #2A332D, a hair darker than the site's
   --ink-2 and with no token of its own. The shared token is used instead,
   rather than smuggling a second near-identical grey into the campaign.
   ========================================================================= */

/* The #site-top-spacer floor used to be repeated here at 70px. It now lives
   once in campaign.css, at the correct 71px (the 70px header plus its rule) —
   this copy had already drifted a pixel from its siblings, which is exactly
   what a duplicated rule does. Do not reintroduce it. */

/* .wrap keeps the 20px gutters and the centring; only the measure changes. */
.legal-wrap { max-width: 800px; }

.legal-title { margin: 0 0 4px; font-size: clamp(30px, 4vw, 42px); line-height: 1.15; }
.legal-meta  { margin: 0 0 40px; color: var(--ink-3); }

.legal-sec { margin-bottom: 40px; }
.legal-sec p + p { margin-top: 14px; }

/* scroll-margin clears the fixed header when someone deep-links to a section */
.legal-h2 { margin: 0 0 14px; font-size: 26px; scroll-margin-top: 90px; }
.legal-h3 { margin: 28px 0 10px; font-size: 19px; }

/* Kiswahili pairings. The rest of the site sets its Kiswahili line in the
   sans face, a step down and in the muted ink, so the two languages read as
   one heading rather than two competing ones — same treatment here. Both
   carry lang="sw" in the markup so a screen reader switches voice. */
.legal-sw      { display: block; margin-top: 5px; font-family: var(--sans);
                 font-size: 15px; font-weight: 500; color: var(--ink-3); }
.legal-sw-line { margin: 0 0 10px; font-family: var(--sans); font-size: 17px;
                 color: var(--ink-3); }
.legal-sw-copy { color: var(--ink-3); }

.legal-list { margin: 12px 0 0; padding-left: 22px; font-size: 16.5px;
              line-height: 1.75; color: var(--ink-2); }
.legal-list li { margin-bottom: 4px; }

/* The dead-address marker. This has to be visible in the page rather than in
   an HTML comment: a reader who copies that address expects mail to arrive,
   and it never will. The colours are the preview band's warning palette from
   campaign.css, repeated rather than tokenised so the two read as one
   convention — delete this rule the day a real mailbox exists. */
.legal-flag {
  display: block; width: fit-content; max-width: 100%; margin-top: 8px;
  padding: 5px 10px; border: 1px solid #E8D9A8; border-radius: 6px;
  background: #FDF6E3; color: #6B551A; font-size: 13.5px; line-height: 1.55;
}
.legal-flag code { font-family: var(--mono); font-size: 12.5px; }

.legal-note {
  margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 14px; line-height: 1.6; color: var(--ink-3);
}