/* ============================================================
   CAPELY: legal pages (privacy.html, terms.html)
   Long-form reading content: a narrow column, generous leading,
   a plain heading rhythm. Colours are tokens only (contract §1.2).
   This file lives in css/pages/ on purpose: build.js auto-includes
   everything directly in css/ into the homepage, and this stylesheet
   is for the two standalone legal pages only.
   ============================================================ */

/* The same nav offset every other standalone page carries (see
   .shop-page-head in css/pages/shop.css). A bare .section gives 60px of top
   padding on a phone and the nav island's bottom edge is at 78px, so the
   panel below started underneath the bar. Numbers match shop and reviews. */
.legal-page { padding-top: calc(var(--nav-h) + 52px); }
@media (max-width: 640px) {
  .legal-page { padding-top: calc(var(--nav-h) + 34px); }
}

/* ---------- the reading panel ----------
   These two pages are the longest stretch of prose on the site, and the site
   carries the Minecraft night backdrop: a fixed star field behind everything
   that is not painted over. Rendered and looked at, that put several hundred
   bright specks through the copy - one sat inside the "Last updated" line,
   more landed mid sentence - which reads as dirt on the screen rather than as
   sky. Nothing about the backdrop was touched to fix it, per
   DESIGN-CONTRACT.md 2b. The words were given a surface to sit on instead: the
   house card recipe from section 3, so the night is still there in the margins
   either side of the column and simply stops at the edge of the text.

   The panel also tightens the measure from about 712px to about 656px at
   desktop, which is nearer the 60-75 characters long-form copy wants. */
.legal-panel {
  background: var(--card-wash), var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: clamp(30px, 4vw, 52px);
}

/* Full bleed on a phone. The panel's whole job is to be opaque under the
   words; 2 x 20px of panel padding inside 2 x 18px of gutter would spend a
   tenth of a 390px screen's reading width buying a rounded corner. So the
   panel spans the viewport and the container's gutter becomes its padding,
   which leaves the measure exactly what it was before the panel existed.
   The negative margin is the gutter token, never a literal, so the two
   cancel and the page still measures scrollWidth === clientWidth. */
@media (max-width: 640px) {
  .legal-panel {
    margin-inline: calc(var(--gutter) * -1);
    padding: 34px var(--gutter);
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }
}

.legal-head { margin-bottom: clamp(28px, 5vw, 44px); }
.legal-head h1 { font-size: clamp(30px, 4.6vw, 44px); margin-bottom: 10px; }
.legal-updated { color: var(--text-mute); font-size: 13.5px; }

.legal-body h2 {
  font-size: clamp(19px, 2.4vw, 22px);
  margin-top: clamp(34px, 5vw, 48px);
  margin-bottom: 14px;
}
.legal-body h2:first-child { margin-top: 0; }

.legal-body p {
  color: var(--text-dim);
  line-height: 1.8;
  margin-bottom: 16px;
}

.legal-body ul {
  color: var(--text-dim);
  line-height: 1.8;
  margin: 0 0 16px 20px;
}
.legal-body li { margin-bottom: 8px; }
.legal-body li::marker { color: var(--text-faint); }

.legal-body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-body a:hover { color: var(--mint-300); }

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