/* The legal pages are plain reading surfaces — the storybook grammar would
   get in the way of text somebody needs to actually find something in. */

.legal-page {
  background: var(--night-deep);
  overflow-y: auto;
  min-height: 100svh;
}

.legal-head {
  position: sticky; top: 0; z-index: 10;
  padding: 1rem var(--page-pad);
  background: linear-gradient(to bottom, var(--night-deep) 60%, transparent);
}

.legal-back {
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--amber);
  text-decoration: none;
  padding: .5rem 0;
  display: inline-block;
}
.legal-back:hover, .legal-back:focus-visible { text-decoration: underline; }

.legal-sheet {
  max-width: 62ch;
  margin: 0 auto;
  padding: 1rem var(--page-pad) 6rem;
}

.legal-sheet h1 {
  font-family: var(--display);
  font-size: clamp(1.9rem, 5vw, 3rem);
  margin: 0 0 1rem;
  color: var(--ink);
}

.legal-sheet h2 {
  font-family: var(--display);
  font-size: 1.22rem;
  margin: 2.4rem 0 .6rem;
  color: var(--amber);
}

.legal-sheet p { margin: 0 0 1rem; color: var(--ink-soft); }
.legal-sheet strong { color: var(--ink); }

.legal-sheet a { color: var(--water); text-underline-offset: .2em; }
.legal-sheet a:hover, .legal-sheet a:focus-visible { color: var(--amber); }

.legal-note {
  font-size: .92rem;
  color: var(--ink-faint);
  border-left: 2px solid rgba(240,181,78,.3);
  padding-left: 1rem;
  margin-bottom: 2rem !important;
}

.legal-foot {
  margin-top: 3rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(240,181,78,.16);
}