/* ==========================================================================
   The legal pages.

   They inherit the book's paper, ink and type from ../styles.css and add only
   what a long piece of prose needs: one narrow column, numbered sections that
   can be linked to, and a table of contents. Nothing here is decorative. A
   reader who has come looking for the privacy notice wants to find the
   sentence that answers them, so the page is built to be scanned.
   ========================================================================== */

.doc {
  max-width: 760px;
  margin: 0 auto;
  padding: calc(var(--nav-h) + var(--banner-h) + 64px) var(--gutter) 96px;
}

.doc__head { border-bottom: 1px solid var(--rule-2); padding-bottom: 28px; margin-bottom: 34px; }

.doc__title {
  font-family: var(--display);
  font-size: clamp(34px, 6vw, 52px);
  line-height: 1.08;
  font-weight: 400;
  margin: 0 0 14px;
  letter-spacing: -.01em;
}

.doc__standfirst { font-size: 20px; color: var(--ink-4); margin: 0 0 20px; }

.doc__dates {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

/* Table of contents ------------------------------------------------------- */

.doc__toc {
  background: var(--paper);
  border: 1px solid var(--rule-3);
  padding: 22px 26px;
  margin: 0 0 46px;
}
.doc .doc__toc h2 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--indigo);
  margin: 0 0 14px;
  font-weight: 400;
}
.doc .doc__toc ol { margin: 0; padding: 0 0 0 22px; }
.doc .doc__toc li { margin: 0 0 6px; font-size: 17px; }
.doc__toc a { color: var(--ink-3); text-decoration-color: var(--rule-5); }
.doc__toc a:hover { color: var(--indigo); }

/* Body -------------------------------------------------------------------- */

.doc section { margin: 0 0 44px; scroll-margin-top: calc(var(--nav-h) + var(--banner-h) + 24px); }

.doc h2 {
  font-family: var(--display);
  font-size: 27px;
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 16px;
}
.doc h2 .doc__num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--indigo);
  display: block;
  margin-bottom: 8px;
}

.doc h3 {
  font-family: var(--body);
  font-size: 19px;
  font-weight: 600;
  margin: 28px 0 8px;
}

.doc p { margin: 0 0 16px; color: var(--ink-2); }
.doc ul, .doc ol.doc__list { margin: 0 0 18px; padding-left: 22px; }
.doc li { margin: 0 0 9px; color: var(--ink-2); }
.doc a { color: var(--indigo); }

.doc dl { margin: 0 0 18px; }
.doc dt { font-weight: 600; margin: 14px 0 4px; }
.doc dd { margin: 0 0 4px; color: var(--ink-2); }

/* A fact stated flatly, where the reader is likely to want the exact words. */
.doc__note {
  border-left: 2px solid var(--indigo);
  background: var(--paper-warm);
  padding: 18px 22px;
  margin: 0 0 22px;
}
.doc__note p:last-child { margin-bottom: 0; }

.doc__note--warn { border-left-color: #8a3c2c; }

/* A short definition table: what we hold, why, how long. */
.doc__table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 17px; }
.doc__table th, .doc__table td {
  text-align: left;
  vertical-align: top;
  padding: 11px 14px 11px 0;
  border-bottom: 1px solid var(--rule-3);
}
.doc__table th {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
}
.doc__table-wrap { overflow-x: auto; }

.doc__contact {
  border-top: 1px solid var(--rule-2);
  margin-top: 54px;
  padding-top: 26px;
  font-size: 17px;
  color: var(--ink-4);
}

.doc__todo {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: #8a3c2c;
  background: #f6ece6;
  padding: 2px 6px;
}

/* The footer's legal row lives in ../styles.css, since the home page needs it too. */

@media (max-width: 640px) {
  .doc { padding-top: calc(var(--nav-h) + var(--banner-h) + 76px); }
  .doc__toc { padding: 18px 20px; }
}

.doc__mono { font-family: var(--mono); font-size: .88em; }