/* Field Notes — the long-form pages at alleventcast.com/field-notes/.
 *
 * Loaded after /styles.css, which supplies --bg, --ink, --muted, --line,
 * --teal, --teal-pale, --white, the two typefaces and the light
 * section/footer treatment. Prose-page additions only.
 */

.rail {
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
  font-size: .87rem;
  color: var(--muted);
}
.rail a { color: var(--muted); text-decoration: none; }
.rail a:hover { color: var(--teal); }

.fnotehead { padding-top: 52px; }
.fnotehead h1 {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.2rem, 5.2vw, 3.6rem);
  line-height: 1.06;
  margin: 0 0 1.2rem;
  max-width: 20ch;
}
.fnotehead h1 em { font-style: italic; }

.desk {
  border-left: 3px solid var(--teal);
  padding: 5px 0 5px 16px;
  margin: 0 0 2.4rem;
  color: var(--muted);
  font-size: .98rem;
  max-width: 62ch;
}

.body { max-width: 65ch; }
.body p { margin: 0 0 1.35rem; font-size: 1.05rem; line-height: 1.7; }
.body p:first-of-type { font-size: 1.15rem; }

/* Disclosure. Matches the .note treatment on the homepage — an integrator
 * reads the caveats first, so they are set to be read, not skipped. */
.origin {
  margin: 3rem 0 0;
  padding: 22px 24px;
  background: var(--teal-pale);
  border: 1px solid #c9e0de;
  max-width: 65ch;
}
.origin .hd {
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 .6rem;
}
.origin p { font-size: .92rem; line-height: 1.66; color: #2f4a49; margin: 0 0 .75rem; }
.origin p:last-child { margin-bottom: 0; }

.fnindex { list-style: none; padding: 0; margin: 2.4rem 0 0; max-width: 70ch; }
.fnindex li { border-top: 1px solid var(--line); padding: 24px 0; }
.fnindex li:last-child { border-bottom: 1px solid var(--line); }
.fnindex .role {
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 .5rem;
}
.fnindex h2 {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.16;
  margin: 0 0 .5rem;
}
.fnindex h2 a { color: var(--ink); text-decoration: none; }
.fnindex h2 a:hover { color: var(--teal); }
.fnindex p { margin: 0; color: var(--muted); font-size: .97rem; max-width: 62ch; }

.onward { margin-top: 2.8rem; padding-top: 1.9rem; border-top: 1px solid var(--line); max-width: 65ch; }