/* ==========================================================================
   Legal pages (2026-09-25): /terms, /privacy, /eula. Loaded only by these
   pages, after styles.css. They sit in the story pages' column (.article-shell,
   .article) with a smaller type size, since they are read, not browsed.
   ========================================================================== */

.legal {
  --legal-copy: #d5dde5;
  --legal-link: var(--orange-bright);
}

.legal h1 {
  margin-bottom: 12px;
}

.legal .legal-meta {
  margin: 0 0 26px;
  color: var(--muted);
  font-size: 0.95rem;
}

.legal h2 {
  margin: 40px 0 12px;
  font-size: clamp(1.3rem, 2.1vw, 1.6rem);
}

.legal p,
.legal li {
  color: var(--legal-copy);
  font-size: 1.02rem;
  line-height: 1.7;
}

.legal p {
  margin: 0 0 14px;
}

.legal ul {
  margin: 0 0 14px;
  padding-left: 1.3em;
}

.legal li {
  margin-bottom: 6px;
}

.legal a {
  color: var(--legal-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.legal a:hover {
  color: #ffffff;
}

@media (max-width: 700px) {
  .legal h2 {
    margin-top: 32px;
  }
}

/* On paper: the words only, black on white. */
@media print {
  body::before,
  .site-header,
  .site-footer {
    display: none;
  }

  body,
  .legal h1,
  .legal h2,
  .legal p,
  .legal li,
  .legal a {
    background: #ffffff;
    color: #000000;
  }

  .article-shell {
    width: 100%;
    padding: 0;
  }
}