/* Legal and policy pages, on shared/paper.css.
 *
 * Long reading, so the page is one narrow column of Geist at 16/1.7 and the
 * serif is reserved for the title and the clause headings. Each clause opens on
 * a hairline, which is what lets a 400-line policy be scanned rather than read.
 *
 * The tokens below keep the older names that data-rights.html's portal styles
 * were written against, mapped onto the paper palette, so that page's own
 * block needs no rewrite to sit on paper.
 */
:root{
  --surface:var(--white);
  --surface-2:var(--paper-2);
  --border:var(--rule-2);
  --border-light:var(--rule);
  --line:var(--rule);
  --card:var(--white);
  --radius-lg:8px;
  --radius-md:4px;
  --text-secondary:var(--ink-2);
  --text-muted:var(--ink-3);
  --green:#1d6b39;
}
.legal{max-width:760px;margin:0 auto;padding:168px 24px 116px}
@media (max-width:760px){ .legal{padding:128px 22px 84px} }
.legal h1{font-family:var(--serif);font-weight:400;font-size:clamp(40px,5.4vw,64px);line-height:1.04;letter-spacing:-.026em;text-wrap:balance}
.legal .updated{margin:22px 0 48px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.legal h2{
  font-family:var(--serif);font-weight:300;font-size:clamp(24px,2.6vw,30px);line-height:1.12;letter-spacing:-.016em;
  margin:64px 0 16px;padding-top:28px;border-top:1px solid var(--rule-2);scroll-margin-top:110px;text-wrap:balance;
}
.legal h3{font-size:17px;font-weight:500;letter-spacing:-.012em;margin:30px 0 8px;color:var(--ink);scroll-margin-top:110px}
.legal p,.legal li{font-size:16px;line-height:1.7;letter-spacing:-.006em;color:var(--ink-2);text-wrap:pretty}
.legal p{margin:0 0 16px}
.legal ul,.legal ol{padding-left:20px;margin:0 0 18px}
.legal li{margin-bottom:6px}
.legal li::marker{color:var(--ink-3)}
.legal .lead{font-size:19px;line-height:1.6;letter-spacing:-.012em;color:var(--ink-2)}
.legal strong,.legal b{color:var(--ink);font-weight:600}
.legal a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent-ink);text-decoration-thickness:1.5px;text-underline-offset:3px;transition:text-decoration-color .15s ease}
.legal a:hover{text-decoration-color:var(--ink)}
.legal .note{background:var(--white);border:1px solid var(--rule);border-radius:6px;padding:18px 20px;margin:26px 0;font-size:14.5px;line-height:1.65}
/* The contents: one paragraph of links between two hairlines. The links go
   plain until hovered, since thirty underlines in a row read as a wall. */
.legal .toc{margin:34px 0 8px;padding:20px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font-size:14px;line-height:2;color:var(--ink-3)}
.legal .toc a{text-decoration:none;color:var(--ink-2)}
.legal .toc a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent-ink)}
/* The contents already close on a hairline, so the first clause does not
   open on a second one 40px under it. */
.legal .toc + h2{border-top:0;padding-top:0;margin-top:52px}
.legal table{display:block;width:100%;max-width:100%;overflow-x:auto;border-collapse:collapse;margin:18px 0 24px;font-size:14.5px}
@media (min-width:640px){ .legal table{display:table} }
.legal th,.legal td{text-align:left;vertical-align:top;padding:11px 14px;border:1px solid var(--rule);color:var(--ink-2);line-height:1.5}
.legal th{background:var(--paper-2);color:var(--ink);font-weight:500}
.legal td{background:var(--white)}
.legal .updated + p,.legal .lead{margin-top:0}
/* the old back link, where a page still carries one */
.legal .back{display:inline-block;margin-bottom:40px;font-size:14px;color:var(--ink-2);text-decoration:none}
.legal .back:hover{color:var(--ink)}
/* the data-rights portal's heading, set like a clause heading */
.portal-title{font-family:var(--serif);font-weight:300;font-size:clamp(24px,2.6vw,30px);line-height:1.12;letter-spacing:-.016em;margin:0 0 6px}
/* the older button names the data-rights portal uses */
.btn-dark,.btn-danger{background:var(--ink);color:var(--white)}
.btn-dark:hover,.btn-danger:hover{background:#2d2d33}
.btn-block{width:100%}

/* the title arrives; the rest of a policy should simply be there */
.legal > h1,.legal > .updated{animation:rise 1s cubic-bezier(.2,.7,.2,1) both}
.legal > .updated{animation-delay:.1s}
@media (prefers-reduced-motion:reduce){ .legal > h1,.legal > .updated{animation:none} }