/* The cobre page's own styles, linked by that page alone so the book sites that copy styles.css carry none of it.
   The legal block reads in Stack Sans Headline like the rest of the site, its running text in a lighter 300 that only
   this block uses, and its headings, bullet titles, and lead in the site's own weights. */
@font-face {
  font-family:'Stack Sans Headline';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url('/assets/fonts/stack-300.ttf') format('truetype');
}
/* The cobre page's legal text under the card: privacy, terms, and support as plain reading in the page's ink, on the
   desk's canvas, with cobre's name in its paper blue (.cobre). It starts clear of the canvas's 90px run below the stage,
   stands above it, and leaves the footer a full gap. */
.legal {position:relative;z-index:1;max-width:680px;margin:110px auto 120px;padding:0 16px;font-size:16px;font-weight:300;line-height:1.75}
.legal section {scroll-margin-top:32px}
.legal section + section {margin-top:88px}
.legal h2 {font-size:28px;font-weight:600;line-height:1.2;margin:0 0 16px}
.legal h3 {font-size:18px;font-weight:600;line-height:1.3;margin:0 0 12px}
.legal p,.legal ul {margin:0 0 18px}
.legal .legal-date {font-weight:500;margin:-8px 0 32px}
.legal .legal-lead {font-size:19px;font-weight:400;line-height:1.55;margin-bottom:24px}
.legal ol {margin:48px 0 0;padding-left:28px}
.legal ol > li {margin-bottom:48px}
.legal ol > li::marker {font-weight:600}
.legal ul {padding-left:20px}
.legal ul li {margin-bottom:16px}
.legal strong {font-weight:600}
.legal a {text-underline-offset:3px}
/* On the cobre page a finger beside the card scrolls the page down to the legal text, and one on the card holds it. */
#deck.pans {touch-action:pan-y pinch-zoom}