/* /code-of-conduct and any future long-form page. Loads after styles.css and
   inherits the site's palette and type — this is the same site, in reading
   mode, not a separate document template. */

.doc { padding: 3.5rem 0 6rem; }
.doc .wrap { max-width: 74ch; }

.doc-head { padding-bottom: 2.25rem; border-bottom: 1px solid var(--line-soft); }
.doc-head h1 {
  font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.2rem);
  letter-spacing: -0.02em; margin-bottom: .75rem;
}
.doc-version {
  color: var(--muted); font-size: .8125rem;
  letter-spacing: .06em; text-transform: uppercase;
}

/* Body copy sits a little larger and looser than the home page: this is a
   document people read start to finish, not a page they scan. */
.doc-body { font-size: 1.0625rem; line-height: 1.75; }
.doc-body p { margin: 0 0 1.15rem; }
.doc-body > p:first-of-type { margin-top: 2rem; }

.doc-body h2 {
  font-size: clamp(1.4rem, 1.15rem + .9vw, 1.75rem);
  letter-spacing: -0.015em;
  margin: 3.25rem 0 1rem;
  padding-top: 2rem; border-top: 1px solid var(--line-soft);
}
.doc-body h3 {
  font-size: 1.0625rem; letter-spacing: -0.005em;
  margin: 2rem 0 .5rem; color: var(--text);
}
/* The first heading after the intro already has the head's rule above it. */
.doc-body h2:first-child { margin-top: 2.5rem; }

.doc-body ul { margin: 0 0 1.15rem; padding-left: 1.1rem; }
.doc-body li { margin-bottom: .6rem; }
.doc-body li::marker { color: var(--accent); }

.doc-body a { color: var(--accent); text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
  text-underline-offset: 3px; }
.doc-body a:hover { text-decoration-color: currentColor; }

/* ---------- the standing-note callout ---------- */

/* The "no organisation, no complaints procedure" paragraph is the one thing a
   reader must not skim past, so it gets a rule rather than a filled panel —
   the palette reserves fills for a single element per screen. */
.doc-note {
  border-left: 2px solid var(--accent);
  padding: .15rem 0 .15rem 1.25rem;
  margin: 1.75rem 0;
}
.doc-note p { margin-bottom: .8rem; }
.doc-note p:last-child { margin-bottom: 0; }

/* ---------- where to turn ---------- */

.routes { list-style: none; margin: 1.5rem 0 1.15rem; padding: 0; }
.routes li {
  margin: 0 0 1.1rem; padding-left: 1.25rem;
  border-left: 1px solid var(--line);
}
.routes strong { color: var(--text); font-weight: 600; }

/* ---------- glossary ---------- */

.glossary { margin: 1.5rem 0 0; }
.glossary dt {
  color: var(--text); font-weight: 600;
  font-family: var(--display); letter-spacing: -0.01em;
  margin-top: 1.25rem;
}
.glossary dd { margin: .2rem 0 0; color: var(--muted); }

/* ---------- back link ---------- */

.doc-back { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--line-soft); }
.doc-back a { color: var(--muted); font-size: .9375rem;
  display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; }
.doc-back a:hover { color: var(--text); }
.doc-back a::before {
  content: "";
  width: 7px; height: 7px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  flex: none;
}