/* The quiet pages (privacy, support): the same night and the same letters as the main page,
   without the shows. Text to read, in the page's normal letter; pixel only for what decorates. */

.doc-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px var(--gutter);
}
.doc-nav .brand img { width: 30px; height: 30px; image-rendering: pixelated; }
.doc-nav .back {
  margin-left: auto;
  font: 400 11px var(--chunky);
  letter-spacing: 1px;
  color: var(--text-2);
  text-decoration: none;
}
.doc-nav .back:hover { color: var(--green); }

.doc { max-width: 820px; margin: 0 auto; padding: clamp(40px, 8vw, 96px) var(--gutter) clamp(72px, 10vw, 120px); }
.doc h1 {
  font: 400 clamp(28px, 5vw, 60px)/1.1 var(--pixel);
  margin: 0 0 18px;
  text-wrap: balance;
}
.doc .updated { margin: 0 0 clamp(36px, 5vw, 56px); color: var(--text-2); font-size: 13px; }
.doc h2 {
  font: 400 clamp(18px, 2.1vw, 24px)/1.3 var(--pixel);
  margin: clamp(44px, 6vw, 64px) 0 14px;
  color: var(--text);
}
.doc h2::before { content: "▶ "; color: var(--green); }
.doc h3 { font: 700 17px/1.3 var(--body); margin: 26px 0 6px; color: var(--green); }
.doc p, .doc li { color: var(--text-2); }
.doc p { margin: 0 0 14px; }
.doc ul { margin: 0 0 14px; padding-left: 1.2em; }
.doc li { margin: 0 0 8px; }
.doc li::marker { content: "■  "; color: var(--green); font-size: 0.7em; }
.doc strong { color: var(--text); }
.doc a:not(.px-btn) { color: var(--green); text-underline-offset: 3px; }
.doc code { font: 0.92em var(--body); color: var(--text); background: var(--wall-2); padding: 1px 6px; word-break: break-word; }

/* The short version, as the privacy terminal on the main page. */
.doc .term { margin: 0 0 8px; }
.doc .term-body p { margin: 0 0 8px; }

/* Where things go: one box per destination. */
.goes { display: grid; gap: 12px; margin: 18px 0; }
.goes > div { background: var(--wall); clip-path: var(--notch-s); padding: 18px 20px 6px; }
.goes h3 { margin-top: 0; }

/* Support: the ways to reach us, as pixel buttons. */
.reach { display: flex; flex-wrap: wrap; gap: 18px; margin: 22px 0 8px; }

/* Only the language in use is shown; doc.js picks it. Without it, Spanish. */
[data-lang-block] { display: none; }
[data-lang-block].on, html:not(.doc-ready) [data-lang-block="es"] { display: revert; }

.doc-foot { border-top: 2px dashed var(--line); max-width: var(--max); margin: 0 auto; padding: 28px var(--gutter) 56px; display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; color: var(--text-2); font-size: 13px; }
.doc-foot a { color: var(--text-2); }
.doc-foot a:hover { color: var(--green); }
.doc-foot .made { margin-left: auto; }

@media (max-width: 560px) {
  .doc-nav { flex-wrap: wrap; gap: 12px; }
  .doc-foot .made { margin-left: 0; }
}