/* Document pages (privacy notice, contact): one long glass panel that starts under the top bar and grows
   with its text, a calmer world behind it, footer after the text. Every rule is scoped to .reading
   or .doc so the landing, sign-in and request pages cannot change. */

.reading .dim { opacity: .75; }

.doc-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100svh;
  padding-top: calc(var(--bar-h) + var(--u) * 5);
}
.doc-page footer { align-self: stretch; width: 100%; margin-top: auto; padding-top: calc(var(--u) * 6); }

.doc {
  width: calc(100% - var(--gutter) * 2);
  max-width: calc(68ch + var(--u) * 14);
  padding: calc(var(--u) * 7);
  background: var(--glass-flag);
  font-size: var(--t-b);
  line-height: 1.7;
}
@media (prefers-reduced-motion: no-preference) {
  .doc { animation: doc-rise .9s var(--ease-out) .15s both; }
}
@keyframes doc-rise { from { opacity: 0; transform: translateY(calc(var(--u) * 3)); } }

.doc h1 { font-size: var(--t-hero); }
.doc .lead {
  margin-top: calc(var(--u) * 2.5);
  padding-bottom: calc(var(--u) * 4);
  border-bottom: var(--hair) solid var(--panel-edge);
  color: var(--ink-2);
}

.doc section { padding-top: calc(var(--u) * 4); }
.doc section + section { margin-top: calc(var(--u) * 4); border-top: var(--hair) solid var(--panel-edge); }
.doc h2 { margin-bottom: calc(var(--u) * 1.25); font-size: var(--t-xs); font-weight: 500; color: var(--ink-2); }
.doc p + p { margin-top: calc(var(--u) * 1.5); }

/* Contact: one short line, so a smaller title, no rule under the line and, on a computer, a panel
   no wider than its text. */
.doc.contact h1 { font-size: calc(var(--t-hero) - 2pt); }
.doc.contact .lead { padding-bottom: 0; border-bottom: 0; }
@media (min-width: 701px) {
  .doc.contact { width: fit-content; }
}

.doc a { color: var(--green); font-weight: 600; text-decoration-thickness: var(--hair); transition: color .2s; }
.doc a:hover { color: var(--green-hover); }

@media (max-width: 700px) {
  .doc-page { padding-top: calc(var(--bar-h) + var(--u) * 2); }
  .doc { padding: calc(var(--u) * 3); }
  .doc .lead { padding-bottom: calc(var(--u) * 3); }
  .doc section { padding-top: calc(var(--u) * 3); }
  .doc section + section { margin-top: calc(var(--u) * 3); }
}