/* The terms and the privacy notice: two long prose documents, and nothing else uses this file.

   Dressed like the rest of the public site rather than like the app, because that is where they are
   linked from and because a legal page in a different typeface reads as somebody else's page
   bolted on. It loads after `landing.css` and borrows its palette wholesale; the only thing here is
   what a document of headings and paragraphs needs and a poster does not.

   Deliberately narrow. `landing.css` centres one wide column meant for three sentences at a time;
   sixty-odd characters is the measure prose is actually read at, and these run to a couple of
   thousand words. */

.legal-page {
  display: block;
  padding: 0;
}

/* The poster's gold hearth, off. It is a device for a first screen; behind eight screens of text it
   is a stain that scrolls. */
.legal-page::before,
.legal-page::after { display: none; }

.legal-wrap {
  width: min(760px, 100%);
  margin: 0 auto;
  padding: 28px 22px 72px;
  box-sizing: border-box;
}

.legal-title {
  margin: 26px 0 0;
  font-size: clamp(30px, 5vw, 44px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.15;
  color: var(--parchment);
}

/* Which version of the document this is. Two dates and not one: the day it changed and the day it
   started binding anybody are different questions, and a notice that only carries the first cannot
   answer "what did I agree to when I signed up". */
.legal-dates {
  margin: 14px 0 0;
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--parchment-dim);
}

/* The one paragraph somebody who will not read the rest should still read. */
.legal-lede {
  margin: 22px 0 0;
  font-size: clamp(17px, 2.1vw, 19px);
  line-height: 1.6;
  color: var(--parchment);
}

.legal-wrap h2 {
  margin: 44px 0 0;
  font-size: clamp(20px, 2.6vw, 25px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.25;
  color: var(--gold-bright);
}

.legal-wrap h3 {
  margin: 26px 0 0;
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

.legal-wrap p {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--parchment-dim);
}

.legal-wrap p strong,
.legal-wrap li strong { color: var(--parchment); font-weight: 700; }

.legal-wrap ul {
  margin: 14px 0 0;
  padding-left: 20px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--parchment-dim);
}

.legal-wrap li { margin-top: 8px; }
.legal-wrap li::marker { color: var(--gold); }

.legal-wrap a { color: var(--gold-bright); }
.legal-wrap a:hover { color: var(--parchment); }

.legal-wrap code {
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: 0.88em;
  color: var(--parchment);
}

/* What is stored, one row per thing, because a table of this is scanned and a paragraph of it is
   not. `dl` rather than `table`: there are two columns and one of them is prose, so a table would
   have to be told what to do at every width and a definition list already knows. */
.legal-table {
  margin: 18px 0 0;
  display: grid;
  gap: 1px;
  border: 1px solid rgba(216, 172, 83, 0.22);
  border-radius: 10px;
  background: rgba(216, 172, 83, 0.16);
  overflow: hidden;
}

.legal-table > div {
  display: grid;
  grid-template-columns: minmax(150px, 200px) 1fr;
  gap: 0 18px;
  padding: 13px 16px;
  background: var(--ink);
}

.legal-table dt {
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  line-height: 1.5;
  color: var(--gold);
}

.legal-table dd {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--parchment-dim);
}

/* On a phone the two columns become two rows, because 150px of label beside 150px of prose is a
   column of single words down the right hand side. */
@media (max-width: 620px) {
  .legal-table > div { grid-template-columns: 1fr; gap: 5px; }
}

/* The note at the top saying this is a plain-English summary and the document below governs, and
   the note at the foot with the contact address. Same object, twice. */
.legal-aside {
  margin: 26px 0 0;
  padding: 16px 18px;
  border: 1px solid rgba(216, 172, 83, 0.28);
  border-left-width: 3px;
  border-radius: 8px;
  background: rgba(216, 172, 83, 0.05);
}

.legal-aside p { margin: 0; font-size: 15px; }
.legal-aside p + p { margin-top: 10px; }

.legal-foot {
  margin: 52px 0 0;
  padding-top: 22px;
  border-top: 1px solid rgba(216, 172, 83, 0.2);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--parchment-dim);
}

.legal-foot a { color: var(--parchment-dim); text-decoration: none; }
.legal-foot a:hover { color: var(--gold-bright); }

/* --- The unsubscribe page ------------------------------------------------------------------- */
/*
   One short document reached from a link in an email, so it borrows the legal pages' measure and
   nothing else. Narrower still: there are four sentences on it, and 760px of them is a page that
   looks like it is missing something. */

.unsub-wrap { width: min(560px, 100%); }

.unsub-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 26px;
}

/* `.btn` on an anchor is an inline element with an inline box's line-height, so the two controls
   in that row sit a pixel or two apart vertically. Both are flex items; this makes them agree. */
.unsub-actions .btn {
  display: inline-flex;
  align-items: center;
}