/* Styles for the document pages: the privacy notice, the terms of use and the
   accessibility statement.

   Everything shared with the home page lives in base.css, which these pages load
   first: the typeface, every token, the base element rules and the three
   controls. What is left here is what a document has and a marketing page does
   not, and nothing else. This file declares no color and no size of its own.

   These pages carry no runtime and no external request. They render on a
   browser with scripting turned off, which is the point: a legal notice that
   depends on a script is a legal notice that can disappear. */

/* A document is read start to finish, so it sets a longer line and a looser
   leading than a page that is scanned. */
body {
  font-size: var(--text-body);
  line-height: 1.7;
}

/* The bar at the top, carrying the mark back to the home page. It used to be a
   full-bleed field of the brand gradient. That is the treatment the hero gave
   up: a colored field leaves the accent nothing to mean afterwards, and on a
   legal page it reads as an advertisement wrapped around a notice. It is the
   ground with a hairline under it now, the way the site's own header is. */
.banner {
  background: var(--ground);
  border-bottom: 1px solid var(--hairline);
  padding: var(--space-5) var(--gutter);
}
.banner a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  max-width: var(--container-document);
  margin: 0 auto;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.22em;
  font-size: var(--text-small);
  text-decoration: none;
}
.banner a:hover {
  color: var(--ink);
  text-decoration: none;
}

/* The same SVG asset is used for the tab and every page's brand mark. */
.banner-mark {
  --banner-mark-size: 32px;

  display: block;
  width: var(--banner-mark-size);
  height: var(--banner-mark-size);
  flex: none;
}

/* The reading column. */
.wrap {
  max-width: var(--container-document);
  margin: 0 auto;
  padding: var(--rhythm-document) var(--gutter) calc(var(--rhythm-document) * 2);
}

/* The title of the document, on the site's own heading scale, one step down
   from the home page: a notice announces itself, it does not sell. */
.wrap h1 {
  font-size: var(--title-page);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.06;
  margin: 0 0 var(--space-3);
  color: var(--ink);
}

/* Each part of the document, opened by a hairline so a reader scrolling can see
   where one ends and the next begins.

   Scoped to the reading column on purpose. The consent panel's title is an h2
   too, and it was picking up the rule: a hairline appeared across the top of
   the panel, marking a document section that was not there. */
.wrap h2 {
  font-size: var(--title-card);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: var(--rhythm-document) 0 var(--space-3);
  padding-top: var(--space-6);
  border-top: 1px solid var(--hairline);
  color: var(--ink);
}

.wrap h3 {
  font-size: var(--text-lead);
  font-weight: 600;
  margin: var(--space-7) 0 var(--space-2);
  color: var(--ink);
}

p,
li {
  color: var(--muted);
}
p {
  margin: 0 0 var(--space-4);
}
ul {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-6);
}
li {
  margin-bottom: var(--space-2);
}
strong {
  color: var(--ink);
  font-weight: 600;
}

/* Cookie names, set one notch down because a monospaced face at the same size
   looks larger than the text around it. */
code {
  font-family: var(--font-code);
  font-size: 0.92em;
}

/* The date the document took effect. It used to be spaced capitals, the label
   treatment the rest of the site gave up: it is a sentence now, smaller and
   paler than what follows it. */
.stamp {
  font-size: var(--text-label);
  font-weight: 500;
  color: var(--faint);
  margin: 0 0 var(--rhythm-document);
}

.lead {
  font-size: var(--text-lead);
  line-height: 1.55;
  color: var(--ink);
  max-width: var(--measure-lead);
}

/* A block set apart from the running text: a definition, a warning, an address. */
.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--space-5);
  margin: 0 0 var(--space-4);
}
.card p:last-child {
  margin-bottom: 0;
}

/* The retention tables. */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--space-4);
}
th,
td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--muted);
}
th {
  color: var(--ink);
  font-weight: 600;
  font-size: var(--text-label);
}
td {
  font-variant-numeric: tabular-nums;
}

/* The closing line, on the near-black the home page ends on, so a visitor who
   arrives on a legal page and one who scrolls to the bottom of the home page
   reach the same footer. */
footer {
  /* How far the dot before the cookie button sits from the words on either
     side. In ems rather than pixels, because it stands in for the plain space
     the markup used to provide and has to grow with the type. */
  --dot-gap: 0.4em;

  background: var(--d-ground-deep);
  color: var(--d-ink);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding: var(--rhythm-document) var(--gutter);
}
footer div {
  max-width: var(--container-document);
  margin: 0 auto;
  font-size: var(--text-small);
  color: var(--d-muted);
}
/* The rule below is lighter than `.banner a` further up, which normally means
   the lighter one silently loses. It cannot happen here: `.banner` is the strip
   at the top of each legal page and never sits inside the footer, so no link is
   ever matched by both. */
/* biome-ignore lint/style/noDescendingSpecificity: .banner is never inside footer */
footer a {
  color: var(--d-muted-hi);
  text-decoration: none;
}
/* biome-ignore lint/style/noDescendingSpecificity: .banner is never inside footer */
footer a:hover {
  color: var(--d-ink);
  text-decoration: underline;
}

/* consent.css strips the button down but leaves its color and size alone, so
   that each page hands it the one its own footer uses. Here that is the footer
   link, since the button sits in the same line as three real links. */
footer .consent-reopen {
  color: var(--d-muted-hi);
  font-size: inherit;
  /* The three links beside it carry no underline, so neither does this. The
     rule used to add one, from a time when the links had theirs. */
  text-decoration: none;
}
footer .consent-reopen:hover {
  color: var(--d-ink);
  text-decoration: underline;
}
/* The dot that separates this button from the link before it. It used to sit in
   the markup, and the button spends the whole first visit hidden, waiting for an
   answer to the consent panel, so the dot stood at the end of the line with
   nothing after it. Written here it belongs to the button and goes when it
   goes. */
footer .consent-reopen::before {
  content: "\00B7";
  margin-right: var(--dot-gap);
  color: var(--d-muted);
}