/* The hosted-site privacy policy's own stylesheet (#603).

   NOT part of the Rails asset pipeline. PageAssembler reads this file verbatim and
   DeploySiteJob puts it in the Cloudflare manifest at css/pages/privacy.css, linked
   root-absolute from /privacy.html. It is never compiled, never precompiled, and
   never served by this app — the same terms as #598's css/pages/404.css and #602's
   css/pages/comments.css, and for the same reason: no site directory in
   racemob-hosted-sites carries this file, and nothing in this build writes to that
   repo (#594's keystone property).

   ⚠️ CONSEQUENCE: this sheet is INVISIBLE to spec/architecture/design_token_
   resolution_spec.rb, which only sees the Sprockets pipeline. Nothing automated
   catches a var() added here without a fallback. Every custom property used below
   is defined in the defaults block, by hand, and was checked by loading the
   assembled page for a site that defines none of them.

   THE DEFAULTS BLOCK is copied from error_page.css and exists for the same reason:
   the eight hosted sites do not share a custom-property vocabulary (Sabrina has
   --plum/--cream/--hot-pink; races/outfront-endurance has --navy-deep/--ocean/--gold
   and none of hers), and an undefined var() drops the whole declaration. `:where(:root)`
   has ZERO specificity, so a site that defines the name in its own :root always wins
   regardless of load order.

   There is no frozen prototype for this page — map ticket 20 approved a wiring
   shape, not a design. The rules below are deliberately plain: a legal document
   is a column of text, and every ornament here is one more thing to keep in step
   with eight themes. */
:where(:root) {
  --cream: #fdf7f0;
  --lavender-mist: #f5eff8;
  --plum: #2d1b3d;
  --plum-soft: #4a3560;
}

.pp-band {
  padding: 150px 48px 56px;
  background: linear-gradient(135deg, var(--lavender-mist), var(--cream));
  text-align: center;
}
/* NO EYEBROW KICKER, unlike #598's band. The 404 borrows its 11px --hot-pink
   .e-code to say "404 — Page not found", which is that page's entire message;
   the equivalent here would have read "LEGAL" above an <h1> already reading
   "Privacy Policy" — furniture, and furniture that measured 3.04:1 in Chrome,
   well under WCAG AA. Deleted rather than darkened: nothing was lost. */
.pp-band h1 {
  font-family: 'Fraunces', serif; font-weight: 500;
  font-size: clamp(30px, 4vw, 46px); color: var(--plum);
  max-width: 780px; margin: 0 auto 18px; line-height: 1.15;
}
.pp-band p.pp-sub {
  color: var(--plum-soft); font-size: 17px; line-height: 1.6;
  max-width: 620px; margin: 0 auto;
}
/* --plum-soft, NOT the --plum-muted this line started as. Measured in Chrome
   against the band gradient, 13px --plum-muted came out 4.44:1 — under WCAG AA's
   4.5:1 for normal text, and theme-independently so, because the band paints its
   own ground on every site. Same defect class #598 fixed on .e-sec-title. */
.pp-band p.pp-updated {
  color: var(--plum-soft); font-size: 13px; letter-spacing: .5px; margin: 20px 0 0;
}

/* One column, 720px — a policy is read, not scanned, and a 1160px measure is
   unreadable at 17px. */
.pp-body {
  max-width: 720px; margin: 0 auto; padding: 64px 24px 96px; background: var(--cream);
}
/* THE BASE-LEAK NEUTRALIZER, and it is load-bearing. These are bare <section>
   elements inside a site's own base.css, and races/outfront-endurance styles the
   element globally: `section { padding: 100px 40px }`. Measured in Chrome, that
   put 200px of dead space between every paragraph and the next heading and blew
   the document's rhythm apart. Sabrina's base.css has no such rule, so the page
   looked right on the only site anyone would have checked. Reset explicitly. */
.pp-sec { padding: 0; margin: 0 0 44px; }
.pp-sec:last-child { margin-bottom: 0; }
/* .pp-band is a <section> too; its own padding already wins, but the margin does not. */
.pp-band { margin: 0; }
.pp-sec h2 {
  font-family: 'Fraunces', serif; font-weight: 500; font-size: 24px;
  color: var(--plum); margin: 0 0 14px; line-height: 1.25;
}
.pp-sec p { color: var(--plum-soft); font-size: 16px; line-height: 1.75; margin: 0 0 14px; }
.pp-sec p:last-child { margin-bottom: 0; }
.pp-sec strong { color: var(--plum); font-weight: 600; }
.pp-sec a { color: var(--plum); text-decoration: underline; }
.pp-sec code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em; background: var(--lavender-mist); color: var(--plum);
  padding: 2px 6px; border-radius: 5px;
}
.pp-list { margin: 0; padding-left: 22px; }
.pp-list li { color: var(--plum-soft); font-size: 16px; line-height: 1.75; margin-bottom: 8px; }
.pp-address { font-style: normal; white-space: normal; }
.pp-address p { margin: 0; }

@media (max-width: 900px) {
  .pp-band { padding: 120px 24px 44px; }
  .pp-body { padding: 44px 24px 72px; }
}
