/* Human Archive — legal pages (privacy / terms / rules / help).
   Matches the homepage aesthetic: cream + noise, JetBrains Mono body,
   Charter serif H1, golden-ratio spacing. Linked only from the app
   (and from each other) — intentionally not surfaced on the homepage. */
:root {
  --phi: 1.618;
  --base: 14px;
  --text-sm: calc(var(--base) / var(--phi));
  --text-base: var(--base);
  --text-md: calc(var(--base) * var(--phi));
  --text-lg: calc(var(--base) * var(--phi) * var(--phi));
  --space-tight: calc(1em / var(--phi));
  --space-1: 1em;
  --space-2: calc(1em * var(--phi));
  --space-3: calc(1em * var(--phi) * var(--phi));
  --space-4: calc(1em * var(--phi) * var(--phi) * var(--phi));
  --col-max: 720px;
  --col-width: min(var(--col-max), calc(100vw / var(--phi)));
}

html, body {
  margin: 0;
  padding: 0;
  background-color: #fbf8f0;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.22 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-repeat: repeat;
  background-size: 240px 240px;
  color: #000;
}

body {
  font-family: "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: var(--text-base);
  line-height: var(--phi);
}

.container {
  width: var(--col-width);
  margin-left: calc((100% - var(--col-width)) / var(--phi) / var(--phi));
  margin-right: auto;
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

h1 {
  font-family: Charter, "Iowan Old Style", Georgia, serif;
  font-weight: 600;
  font-size: calc(var(--text-lg) * 1.3);
  line-height: 1.15;
  margin: 0 0 var(--space-tight);
}

.eyebrow { font-size: max(11px, var(--text-sm)); margin: 0 0 var(--space-2); }

h2 {
  font-family: "JetBrains Mono", Menlo, Consolas, monospace;
  font-weight: 600;
  font-size: var(--text-base);
  margin: var(--space-3) 0 var(--space-1);
}

h3 { font-weight: 600; font-size: var(--text-base); margin: var(--space-2) 0 var(--space-tight); }

p, li { margin: 0 0 var(--space-2); }

a { color: #000; text-decoration: underline; }

ul.bulleted { padding-left: var(--space-2); margin: 0 0 var(--space-2); }
ul.bulleted li { margin: 0 0 var(--space-tight); }

.role-group { margin: var(--space-2) 0 var(--space-tight); font-weight: 600; }

hr { border: none; border-top: 1px solid #000; opacity: 0.18; margin: var(--space-2) 0; }

.note {
  border: 1px solid #000;
  padding: var(--space-tight) var(--space-1);
  margin: var(--space-2) 0;
  font-size: max(12px, var(--text-sm));
  line-height: 1.5;
}
.note .label {
  display: block;
  font-weight: 600;
  letter-spacing: 0.03em;
  margin-bottom: calc(var(--space-tight) / 2);
}

.footer-links { margin-top: var(--space-4); font-size: max(11px, var(--text-sm)); }

@media (max-width: 720px) {
  .container {
    width: auto;
    max-width: var(--col-max);
    margin-left: 0;
    margin-right: 0;
    padding-left: var(--space-2);
    padding-right: var(--space-2);
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
  }
}