/* The two legal pages, in SIGNAL.
 *
 * Loaded after `tokens.css` and instead of `signal.css`: the landing's
 * stylesheet is built for a page made of sections and pictures, and a policy
 * is a document. What the two share is the palette, the three faces and the
 * bevelled corner, and those are all this needs.
 *
 * One column, deliberately narrow. A line of legal text at 1180px is a line
 * nobody finishes.
 *
 * The dials do not apply here and saying so is the point: ENERGY 1 for both
 * pages, because a privacy policy that tries to have energy is a privacy
 * policy nobody trusts. */

@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/unbounded-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/unbounded-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Wix Madefor Text";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/madefor-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Wix Madefor Text";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/madefor-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Wix Madefor Text";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/madefor-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Martian Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/martian-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Martian Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/martian-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* ,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  color-scheme: dark;
}

body {
  margin: 0;
  background: var(--c-ground);
  color: var(--c-ink);
  font-family: "Wix Madefor Text", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--c-violet-ink);
}
a:hover {
  text-decoration: underline;
}

:focus-visible {
  outline: 2px solid var(--c-violet-ink);
  outline-offset: 2px;
}

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding-inline: 24px;
}

/* ── the bar ────────────────────────────────────────────────────────────── */

.bar {
  border-bottom: 1px solid var(--c-line-soft);
  margin-bottom: 56px;
}
.bar .wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-block: 18px;
}
.brand {
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.03em;
  color: var(--c-ink);
  text-decoration: none;
}
.back {
  margin-left: auto;
  font-size: 14px;
  color: var(--c-ink-muted);
  text-decoration: none;
}
.back:hover {
  color: var(--c-ink);
  text-decoration: none;
}

.lang {
  height: 32px;
  padding: 0 8px;
  background: var(--c-plate-2);
  border: 1px solid var(--c-line);
  color: var(--c-ink);
  font: inherit;
  font-size: 13px;
  border-radius: 0 var(--r-chamfer-sm) 0 0;
  corner-shape: bevel;
}

/* ── the document ───────────────────────────────────────────────────────── */

main {
  padding-bottom: 88px;
}

h1 {
  font-family: "Unbounded", system-ui, sans-serif;
  font-size: clamp(30px, 5vw, 42px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin: 0 0 10px;
  text-wrap: balance;
}

h2 {
  font-family: "Unbounded", system-ui, sans-serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
  /* The space above a heading is what tells you a new subject started, so it
     is large and the space under it is not. */
  margin: 52px 0 12px;
  text-wrap: balance;
}

h3 {
  font-size: 16.5px;
  font-weight: 700;
  margin: 30px 0 8px;
}

p,
ul,
ol {
  margin: 0 0 14px;
}

ul,
ol {
  padding-left: 20px;
}
li {
  margin-bottom: 6px;
}

/* Date and version: measurement, so the mono face, the way every other figure
   in this system is set. */
.updated {
  font-family: "Martian Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--c-ink-faint);
  margin-bottom: 34px;
}

/* The one paragraph on each page that answers the question people actually
   arrived with. A plate, and nothing more: the cut corner says "this is a
   surface of this system", and the comment above this used to promise no
   colour was spent while a cyan stripe ran down the left edge. Cyan marks
   data in SIGNAL and a paragraph is not data, so the stripe was both a broken
   rule and the decorative left edge every generated card has. */
.callout {
  background: var(--c-plate);
  border: 1px solid var(--c-line);
  padding: 20px 22px;
  margin: 20px 0 28px;
  border-radius: 0 var(--r-chamfer-md) 0 0;
  corner-shape: bevel;
}
.callout p:last-child {
  margin-bottom: 0;
}

strong {
  color: var(--c-ink);
  font-weight: 700;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0 24px;
  font-size: 14.5px;
}
th,
td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--c-line-soft);
  vertical-align: top;
}
th {
  font-family: "Martian Mono", ui-monospace, monospace;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--c-ink-faint);
  font-weight: 500;
}

code {
  font-family: "Martian Mono", ui-monospace, monospace;
  font-size: 0.88em;
  color: var(--c-ice);
}

footer {
  border-top: 1px solid var(--c-line-soft);
  margin-top: 56px;
  padding-block: 24px;
  font-size: 13.5px;
  color: var(--c-ink-faint);
}
footer a {
  color: var(--c-ink-faint);
}

@media (max-width: 560px) {
  .wrap {
    padding-inline: 18px;
  }
  .bar {
    margin-bottom: 36px;
  }
}