/* Oktopus Prod — layout for text pages (legal notice, privacy, about).
 * Loaded after styles.css, which supplies the shared header, footer and
 * container. Nothing here restyles those. */

.page {
  padding-block: var(--space-3xl) var(--space-4xl);
}
.page-heading {
  max-width: 34ch;
  margin-bottom: var(--space-2xl);
}
.page-heading h1 {
  font-family: var(--font-display);
  font-size: var(--text-title);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
}
.page-meta {
  margin-top: var(--space-md);
  color: var(--color-muted);
  font-size: var(--text-small);
}

.prose {
  max-width: 68ch;
  color: var(--color-muted);
  font-size: var(--text-body);
  line-height: 1.65;
}
.prose > * + * { margin-top: var(--space-md); }
.prose h2 {
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1.2;
  color: var(--color-ink);
  margin-top: var(--space-2xl);
}
.prose h3 {
  font-size: var(--text-lead);
  color: var(--color-ink);
  margin-top: var(--space-xl);
}
.prose strong { color: var(--color-ink); font-weight: 500; }
.prose a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 0.2em; }
.prose a:hover { color: var(--color-ink); }
.prose ul { padding-left: 1.15rem; }
.prose li + li { margin-top: var(--space-xs); }

/* Facts the owner must supply before this page is legally complete. The
 * styling is deliberately loud: an unfilled placeholder should be impossible
 * to miss in review, and obvious if one ever reaches production. */
.todo {
  display: inline-block;
  padding: 0.1em 0.45em;
  border: 1px dashed var(--color-error);
  border-radius: var(--radius-small);
  color: var(--color-error);
  font-family: var(--font-display);
  font-size: 0.85em;
  letter-spacing: 0.02em;
}

.detail-list {
  margin-top: var(--space-lg);
  border-top: 1px solid var(--color-rule);
}
.detail-list div {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: var(--space-md);
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--color-rule);
}
.detail-list dt { color: var(--color-ink); }
.detail-list dd { margin: 0; }

.lang-switch {
  margin-top: var(--space-3xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-rule);
  font-size: var(--text-small);
  color: var(--color-muted);
}
.lang-switch a { color: var(--color-accent); }
.lang-switch a:hover { color: var(--color-ink); }

@media (max-width: 700px) {
  .page { padding-block: var(--space-2xl) var(--space-3xl); }
  .detail-list div { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
}