/* RT XP — document pages (privacy.html, voorwaarden.html).
   These two are plain HTML, no React: an RT XP Window wrapper around long-form
   legal copy. Their styling was byte-for-byte identical apart from .kv (privacy)
   and .article-num (voorwaarden), so it lives here once.
   Requires base.css for the theme tokens. */

.wrap { max-width: 880px; margin: 60px auto 80px; padding: 0 28px; }

.theme-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel2);
  border: 2px solid var(--accent);
  color: var(--accent);
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  letter-spacing: 0.1em;
  padding: 8px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.theme-toggle::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--accent2);
  display: inline-block;
}

.back-link {
  display: inline-block;
  margin-bottom: 28px;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: var(--accent);
  letter-spacing: 0.18em;
  text-decoration: none;
  border-bottom: 1px dashed var(--dash);
  padding-bottom: 4px;
}
.back-link:hover { color: var(--accent2); border-color: var(--accent2); }

/* ===== RT XP Window chrome ===== */
.win {
  background: var(--panel);
  border: 3px solid var(--accent2);
}
.win-titlebar {
  background: var(--accent2);
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.win-titlebar .left { display: flex; gap: 10px; align-items: center; }
.win-titlebar .icon { width: 14px; height: 14px; background: var(--accent); border: 2px solid var(--panel); }
.win-titlebar .dots { letter-spacing: 0.25em; }
.win-body { padding: 28px 32px 40px; }

/* ===== Long-form typography =====
   Same split as the landing page: Press Start 2P is for labels and window
   chrome only, JetBrains Mono carries every heading and all prose, VT323 is
   reserved for data values. These pages used to set headings in Press Start 2P
   and body copy in VT323, which read as a different (older) site. */
.kicker {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: var(--accent2);
  letter-spacing: 0.25em;
  margin: 0 0 14px;
}
h1 {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 30px;
  color: var(--accent);
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 18px;
}
.lede {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 17px;
  color: var(--lede);
  line-height: 1.55;
  margin: 0 0 36px;
}
h2 {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 20px;
  color: var(--accent);
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 44px 0 14px;
}
/* Marker scaled down: at the h2's own size it competes with the words. */
h2::before { content: "◆ "; color: var(--accent2); font-size: 0.65em; }

p, li {
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  color: var(--text);
  line-height: 1.7;
}
p { margin: 0 0 16px; }
ol, ul { margin: 0 0 16px; padding-left: 24px; }
li { margin: 0 0 10px; }
/* JetBrains Mono has real weights, so emphasis no longer needs a colour hack. */
strong { color: var(--accent); font-weight: 700; }
a { color: var(--accent); }
a:hover { color: var(--accent2); }

/* ===== Key/value table (privacy.html) ===== */
.kv {
  border: 2px solid var(--accent);
  margin: 0 0 18px;
}
.kv-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  padding: 10px 14px;
  border-top: 1px dashed var(--dash);
  background: var(--panel);
}
.kv-row:first-child { border-top: 0; }
.kv-row:nth-child(even) { background: var(--panel2); }
.kv-row .k {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--accent2);
  letter-spacing: 0.15em;
  align-self: center;
}
.kv-row .v {
  font-family: 'VT323', monospace;
  font-size: 20px;
  color: var(--accent);
}

/* ===== Article numbering (voorwaarden.html) =====
   Stays Press Start 2P: it is a label sitting next to the heading, the same
   pairing the landing page uses on its tenet cards. */
.article-num {
  color: var(--accent2);
  font-family: 'Press Start 2P', monospace;
  /* Explicit 400: it sits inside an 800 h2, and Press Start 2P ships a single
     weight, so inheriting 800 makes the browser synthesise a smeared faux bold. */
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 0.15em;
  margin-right: 10px;
  vertical-align: 0.15em;
}

.updated {
  font-family: 'VT323', monospace;
  font-size: 16px;
  color: var(--faint);
  margin-top: 28px;
  border-top: 1px dashed var(--dash2);
  padding-top: 14px;
}

@media (max-width: 720px) {
  .wrap { padding: 0 18px; margin: 40px auto 60px; }
  .win-body { padding: 22px 18px 32px; }
  /* Keep the h1 > h2 > lede > body ramp intact; at the old sizes h1 and h2
     both landed on 20px and the hierarchy collapsed. */
  h1 { font-size: 23px; }
  h2 { font-size: 17px; margin-top: 36px; }
  .lede { font-size: 15px; }
  p, li { font-size: 14px; }
  .kv-row { grid-template-columns: 1fr; row-gap: 6px; }
}