/* privacy.html: a long document set on one chamfered plate. Linked after base.css and page.css.
   The page's text is a constraint, not copy (docs/ops/website-deploy.md, "The privacy paragraph
   is a constraint"), so nothing here touches wording: this sheet only sets it.

   The section headings print their own numbers ("1. Who we are") because the policy refers to
   them ("under section 8", "§11"); they are part of the text, not decoration. */
.legal-wrap { max-width:940px; margin:0 auto; filter:drop-shadow(0 24px 40px rgba(0,0,0,.65)); }
.legal { --cut:26px; --fill:rgba(8,9,13,.94); padding:clamp(34px,5vw,60px) clamp(22px,5vw,64px) clamp(34px,5vw,56px); }
.legal > :not(.grain-layer) { position:relative; z-index:1; max-width:64ch; margin-left:auto; margin-right:auto; }
.legal h2 { font:800 clamp(1.45rem,2.4vw,1.85rem)/1.1 var(--display); letter-spacing:.05em; text-transform:uppercase; color:var(--gold-hi); margin-top:44px; margin-bottom:14px; text-wrap:balance; }
.legal h3 { font:800 .8rem/1.3 var(--ui); letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-top:26px; margin-bottom:10px; text-wrap:balance; }
/* Body text sets at 17px on a phone and grows to 18.7px on a wide screen, on a 64ch measure: the
   panel is wider than the line so the text sits in the middle of it, as a printed page does. */
.legal p, .legal li { color:var(--text); font-size:clamp(1rem, .35vw + .9rem, 1.1rem); line-height:1.7; }
.legal p { margin-bottom:14px; }
.legal ul { margin:0 auto 16px; padding-left:0; }
/* a square bullet in place of the round disc: the look law has no round shapes */
.legal li { position:relative; margin-bottom:9px; padding-left:22px; }
.legal li::before { content:''; position:absolute; left:3px; top:.62em; width:7px; height:7px; background:var(--gold); transform:rotate(45deg); }
.legal b, .legal strong { color:var(--parchment); font-weight:600; }
.legal a { color:var(--gold-hi); text-underline-offset:3px; }
.legal a:hover { color:var(--parchment); }
.legal .stamp { color:var(--faded); font-size:.9rem; margin-bottom:30px; }
/* the short version: a plate with a metal edge down its left side */
.legal .plain { position:relative; padding:18px 22px 6px 26px; margin-bottom:30px; background:rgba(216,171,85,.07); border-left:3px solid var(--gold); }
.legal table { width:100%; border-collapse:collapse; margin:0 auto 20px; font-size:clamp(.96rem, .3vw + .85rem, 1.04rem); }
.legal th, .legal td { text-align:left; padding:10px 14px 10px 0; border-bottom:1px solid var(--line-soft); color:var(--text); vertical-align:top; }
.legal th { color:var(--parchment); font-weight:600; white-space:nowrap; }
@media (max-width:560px) {
  /* a two-column table cannot keep a no-wrap label column on a phone: stack each row */
  .legal th { white-space:normal; }
  .legal table, .legal tbody, .legal tr, .legal th, .legal td { display:block; width:100%; }
  .legal tr { padding:10px 0; border-bottom:1px solid var(--line-soft); }
  .legal th, .legal td { border-bottom:0; padding:2px 0; }
}