/* legal.css: Terms, Privacy and Cookies.
   These pages are a document, not a layout: one text column, numbered sections
   separated by hairline rules, and a table only where the content is a table.
   Every colour is a site token (defined in site.css). */

.legal {
  padding: clamp(40px, 7vw, 96px) 0 clamp(72px, 9vw, 128px);
  color: var(--ink);
}

/* One column. 36em of 17px Karla is about 72 characters a line. */
.legal-col {
  max-width: 36em;
  margin-inline: auto;
  font-size: 1.0625rem;
  line-height: 1.72;
  overflow-wrap: break-word;
}

/* ---------- Masthead ---------- */

.legal-head { padding-bottom: clamp(28px, 4vw, 44px); }

.legal-head .eyebrow { margin: 0 0 1rem; }

.legal-head h1 {
  margin: 0;
  font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
  font-weight: 600;
  font-size: clamp(2.4rem, 5.4vw, 3.7rem);
  line-height: 1.02;
  letter-spacing: -.01em;
}

.legal-head h1 em { font-style: italic; font-weight: 500; }

.legal-meta {
  margin: 1.15rem 0 0;
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--muted);
}

.legal-sum {
  margin: 1.25rem 0 0;
  max-width: 31em;
  font-size: 1.2rem;
  line-height: 1.55;
}

/* ---------- Numbered sections ---------- */

.legal-sec {
  padding: clamp(28px, 3.6vw, 42px) 0;
  border-top: 1px solid var(--line);
}

.legal-sec:last-child { padding-bottom: 0; }

.legal-sec h2 {
  position: relative;
  margin: 0 0 .75em;
  font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
  font-weight: 600;
  font-size: clamp(1.7rem, 3vw, 2.15rem);
  line-height: 1.15;
  letter-spacing: -.01em;
}

.legal-sec h2 .n {
  margin-right: .3em;
  color: var(--clay-d);
  font-variant-numeric: lining-nums tabular-nums;
}

/* On wide screens the numeral hangs in the left margin and the text stays on the column edge. */
@media (min-width: 62em) {
  .legal-sec h2 .n {
    position: absolute;
    right: 100%;
    margin: 0 1.1rem 0 0;
    text-align: right;
    white-space: nowrap;
  }
}

.legal-sec h3 {
  margin: 1.7em 0 .35em;
  font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.2;
}

.legal-sec p,
.legal-sec ul,
.legal-sec ol,
.legal-sec blockquote { margin: 0 0 1em; }

.legal-sec > :last-child { margin-bottom: 0; }

.legal-sec p { text-wrap: pretty; }

.legal-sec strong { font-weight: 700; }

/* ---------- Lists ---------- */

.legal-sec ul { padding: 0; list-style: none; }

.legal-sec ul > li {
  position: relative;
  margin-bottom: .55em;
  padding-left: 1.4rem;
}

.legal-sec ul > li::before {
  content: "";
  position: absolute;
  left: .1rem;
  top: .86em;
  width: .6rem;
  height: 1.5px;
  background: var(--olive);
}

.legal-sec ol { padding-left: 1.5rem; }

.legal-sec ol > li { margin-bottom: .55em; padding-left: .2rem; }

.legal-sec li > :last-child { margin-bottom: 0; }

/* ---------- Links and inline marks ---------- */

.legal a {
  color: var(--clay-d);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}

.legal a:hover { text-decoration-thickness: 2px; }

.legal code {
  padding: .08em .38em;
  border-radius: 5px;
  background: var(--paper-2);
  color: var(--ink);
  font-family: 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
  font-size: .88em;
}

/* One point per document that must not be missed: a rule on the left, no box. */
.legal-key {
  margin: 1.5rem 0;
  padding: .1rem 0 .1rem 1.15rem;
  border-left: 3px solid var(--clay);
}

.legal-key > :last-child { margin-bottom: 0; }

/* Words a reader may copy into an email. */
.legal-sec blockquote.legal-say {
  padding: 0 0 0 1.15rem;
  border-left: 1.5px solid var(--line);
  font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.35;
}

.legal-sec blockquote.legal-say p { margin: 0; }

/* ---------- Tables (only where the content is a table) ---------- */

.legal-table {
  margin: 1.4rem 0;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  /* scroll shadows: the right and left edges darken only while more is hidden */
  background:
    linear-gradient(to right, var(--surface) 30%, transparent) left center / 2rem 100% no-repeat local,
    linear-gradient(to left, var(--surface) 30%, transparent) right center / 2rem 100% no-repeat local,
    linear-gradient(to right, var(--line), transparent) left center / .9rem 100% no-repeat scroll,
    linear-gradient(to left, var(--line), transparent) right center / .9rem 100% no-repeat scroll,
    var(--surface);
}

.legal-table table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: .9375rem;
  line-height: 1.5;
}

.legal-table th,
.legal-table td {
  padding: .8rem .95rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.legal-table thead th {
  background: var(--paper-2);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.3;
  text-transform: uppercase;
}

.legal-table tbody th { font-weight: 700; }

.legal-table tbody tr:last-child th,
.legal-table tbody tr:last-child td { border-bottom: 0; }

.legal-table td p,
.legal-table td ul { margin: 0 0 .5em; }

.legal-table td > :last-child { margin-bottom: 0; }

.legal-table td ul > li { padding-left: 1.1rem; margin-bottom: .3em; }

.legal-table td ul > li::before { width: .5rem; top: .8em; }

/* Where a table scrolls sideways, say so. */
.legal-sec .legal-hint {
  display: none;
  margin: 1.2rem 0 -.7rem;
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.4;
}

@media (max-width: 36em) {
  .legal-sec .legal-hint { display: block; }
}

/* A wide table may stand slightly proud of the text column. */
@media (min-width: 62em) {
  .legal-table { margin-inline: -3rem; max-width: none; }
}

/* ---------- Print: the whole document, plainly ---------- */

@media print {
  .legal { padding: 0; }

  .legal-col {
    max-width: none;
    font-size: 10.5pt;
    line-height: 1.5;
  }

  .legal-head h1 { font-size: 26pt; }

  .legal-sec { padding: 12pt 0; }

  .legal-sec h2 {
    break-after: avoid;
    font-size: 16pt;
  }

  .legal-sec h2 .n {
    position: static;
    margin: 0 .3em 0 0;
  }

  .legal-sec h3 { break-after: avoid; }

  .legal-table {
    overflow: visible;
    margin-inline: 0;
    background: none;
    border-color: var(--ink);
  }

  .legal-table table { min-width: 0; font-size: 9.5pt; }

  .legal-table tr { break-inside: avoid; }

  .legal-sec .legal-hint { display: none; }

  .legal a { color: var(--ink); }

  .legal a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: .85em;
  }
}