/* The FAQ, privacy and terms pages: the website's sheet, set as a document. */

@font-face { font-family: 'DM Sans Variable'; font-style: normal; font-display: swap; font-weight: 100 1000; src: url('fonts/dm-sans-latin-wght-normal.woff2') format('woff2-variations'); }
@font-face { font-family: 'JetBrains Mono Variable'; font-style: normal; font-display: swap; font-weight: 100 800; src: url('fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2-variations'); }

:root { --bg: #000; --fg: #f2f2f2; --grey: #c4c4c4; --dim: #8a8a8a; --hair: #262626; --link: #9fb4ff;
  --sans: 'DM Sans Variable', system-ui, sans-serif; --mono: 'JetBrains Mono Variable', ui-monospace, monospace; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); }
body { color: var(--fg); font-family: var(--sans); font-weight: 300; -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--fg); }
::selection { background: var(--fg); color: var(--bg); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 40px; }
.label { font: 400 11px var(--mono); color: var(--dim); letter-spacing: .04em; text-transform: lowercase; }
.frame { position: fixed; inset: 12px; pointer-events: none; border: 1px solid var(--hair); }

.doc { padding-top: 96px; padding-bottom: 120px; display: grid; grid-template-columns: 220px 1fr; gap: 56px; }
.doc > aside { position: sticky; top: 40px; align-self: start; }
.doc > aside .label { display: block; margin-bottom: 8px; }
.doc > aside .updated { margin-top: 20px; font: 400 11px var(--mono); color: var(--dim); }
.doc h1 { grid-column: 1 / -1; font-size: clamp(40px, 5.6vw, 84px); font-weight: 500; letter-spacing: -.02em; line-height: 1; text-transform: uppercase; }
.doc h1 em { font-style: normal; color: var(--dim); }
.doc section + section { margin-top: 56px; }
.doc h2 { font-size: 22px; font-weight: 500; letter-spacing: .01em; text-transform: uppercase; padding-bottom: 14px; border-bottom: 1px solid var(--fg); }
.doc h3 { margin-top: 28px; font-size: 19px; font-weight: 400; }
.doc h4 { margin-top: 22px; font: 400 13px var(--mono); color: var(--fg); }
.doc p, .doc li { margin-top: 12px; font-size: 16px; line-height: 1.7; color: var(--grey); max-width: 44em; }
.doc ul { padding-left: 1.2em; }
.doc strong { color: var(--fg); font-weight: 400; }
.doc code { font: 400 13px var(--mono); color: var(--fg); }
.doc table { width: 100%; margin-top: 16px; border-collapse: collapse; }
.doc th, .doc td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--hair); text-align: left; vertical-align: top; font-size: 15px; line-height: 1.5; color: var(--grey); }
.doc th { font: 400 11px var(--mono); color: var(--dim); text-transform: lowercase; }
.doc td:first-child { color: var(--fg); }
.doc .crates { font-size: 13px; line-height: 1.8; }
.doc .crates a { color: var(--grey); }
.doc .crates a:hover { color: var(--fg); }
.doc .count { margin-top: 16px; }
details { border-bottom: 1px solid var(--hair); }
details summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; font-size: 20px; color: var(--fg); }
details summary::after { content: '+'; font: 400 18px var(--mono); color: var(--dim); }
details[open] summary::after { content: '−'; }
details > :not(summary) { margin-bottom: 20px; }

@media (max-width: 800px) {
  .wrap { padding-left: 20px; padding-right: 20px; } .frame { inset: 6px; }
  .doc { grid-template-columns: 1fr; gap: 32px; padding-top: 64px; } .doc > aside { position: static; }
  .doc th:nth-child(3), .doc td:nth-child(3) { display: none; }
}