/* Liner Notes — the long-form reading pages at b-sidecast.com/notes/.
 *
 * Loaded AFTER /styles.css, which already supplies the palette (--paper,
 * --ink, --ox, --tape, --rule), the three fonts and the section/footer
 * rules. Nothing in here re-declares any of that. This file only adds what
 * a page of running prose needs and the homepage never did.
 */

.sleeve {
  border-bottom: 2px solid var(--rule);
  padding: 30px 0 26px;
}
.sleeve .back {
  font-family: "Courier Prime", monospace;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
}
.sleeve .back:hover { color: var(--ox); }

.notehead { padding: 44px 0 8px; }
.notehead h1 {
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(1.9rem, 5.6vw, 3rem);
  line-height: 1.04;
  margin: 0 0 1rem;
}
.notehead .cut {
  font-family: "Courier Prime", monospace;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ox);
  margin: 0 0 .9rem;
}

.byline {
  font-family: "Special Elite", "Courier Prime", monospace;
  font-size: 1rem;
  color: var(--ink-soft);
  border-left: 3px solid var(--ox);
  padding-left: 14px;
  margin: 0 0 2.2rem;
}

.body { max-width: 64ch; }
.body p { margin: 0 0 1.35rem; font-size: 1.06rem; line-height: 1.62; }
.body p:first-of-type { font-size: 1.16rem; }

/* The disclosure that runs under every one of these. Deliberately not
 * styled to disappear — it is doing real work. */
.composite {
  margin: 3rem 0 0;
  padding: 18px 20px;
  background: var(--tape);
  border: 2px solid var(--rule);
  max-width: 64ch;
}
.composite p {
  font-family: "Courier Prime", monospace;
  font-size: .86rem;
  line-height: 1.55;
  margin: 0;
  color: var(--ink);
}

/* The index of notes. Set as a track listing, because that is the whole
 * conceit of this site. */
.listing { list-style: none; padding: 0; margin: 2rem 0 0; max-width: 68ch; }
.listing li { border-top: 1px solid var(--rule); padding: 20px 0; }
.listing li:last-child { border-bottom: 1px solid var(--rule); }
.listing .n {
  font-family: "Courier Prime", monospace;
  font-size: .78rem;
  letter-spacing: .14em;
  color: var(--ox);
  display: block;
  margin-bottom: .3rem;
}
.listing h2 {
  font-family: "Archivo Black", sans-serif;
  font-size: 1.25rem;
  line-height: 1.2;
  margin: 0 0 .4rem;
}
.listing h2 a { color: var(--ink); text-decoration: none; }
.listing h2 a:hover { color: var(--ox); text-decoration: underline; }
.listing p { margin: 0; color: var(--ink-soft); font-size: .98rem; max-width: 60ch; }

.tailcta {
  margin: 3rem 0 1rem;
  padding-top: 2rem;
  border-top: 2px solid var(--rule);
  max-width: 64ch;
}