/* Legal pages: the landing page's rail, with the document in place of the photo. */

.doc {
  margin-left: var(--rail-w);
  min-height: 100vh;
  background: var(--pane);
}

.doc__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 64px 64px 96px;
}

.doc__title {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.doc__date {
  margin: 12px 0 0;
  font-size: 12px;
  letter-spacing: 0.02em;
  opacity: 0.6;
}

.doc h2 {
  margin: 40px 0 12px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.doc p,
.doc li {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: 0.01em;
  opacity: 0.72;
}

.doc li { margin-bottom: 8px; }

.doc strong { font-weight: 600; opacity: 1; }

.doc ul { margin: 0 0 12px; padding-left: 20px; }

.doc a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* About: the three mechanism notes, then credits. */

.doc__step { margin-top: 40px; }
.doc__step h2 { margin-top: 0; }

.doc__num {
  margin-right: 12px;
  font-variation-settings: "opsz" 45, "GEOM" 100;
  color: var(--accent, var(--fg));
}

.doc__step--a { --accent: #ff9900; }
.doc__step--b { --accent: #2ed803; }
.doc__step--c { --accent: #ffd400; }

.doc__credits {
  margin: 0 0 8px;
  padding: 0;
}

.doc__credits dt {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.doc__credits dd {
  margin: 2px 0 14px;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.01em;
  opacity: 0.6;
}

.doc__credits dd:last-child { margin-bottom: 0; }

/* No marketing copy on a document page: no brand block, no copy slot. */
.rail__panel > .brand { display: none; }
.rail__foot { display: none; }

/* The rail is content, not an overlay, when there is no photo behind it. */
@media (max-width: 900px) {
  .rail {
    position: static;
    inset: auto;
    height: auto;
    background: var(--rail);
    border-right: 0;
    border-bottom: var(--line) solid var(--fg);
  }

  .doc { margin-left: 0; }

  .doc__inner { padding: 40px 32px 64px; }

  .doc__title { font-size: 28px; }
}