body {
  padding: 2.5rem 1.5rem 5rem;
  line-height: 1.6;
}
/* The Punchcutter's Case (#228), page members: the shell's h1/nav/footer
   display and .tagline flourish bindings live in BaseLayout (#263). */
h2, h3 {
  font-family: var(--font-display, 'Iowan Old Style', 'Palatino', Georgia, serif);
}
main { max-width: 760px; }
header { margin-bottom: 1rem; }
h2 { letter-spacing: 0.06em; border-bottom: 1px solid var(--line-tan);
  padding-bottom: 0.3rem; margin-top: 2.8rem; }
h3 { font-size: 0.95rem; letter-spacing: 0.08em; color: var(--ink-faded);
  text-transform: uppercase; margin: 2rem 0 0; }
.intro { margin: 1.2rem 0; }
.toc { background: var(--parchment-panel); border: 1.5px solid var(--line-tan); border-radius: 4px;
  padding: 1rem 1.4rem; margin: 2rem 0 1rem; }
.toc strong { letter-spacing: 0.08em; font-size: 0.8rem; color: var(--ink-faded);
  display: block; margin-bottom: 0.4rem; text-transform: uppercase; }
.toc ul { margin: 0; padding-left: 1.1rem; }
.toc a { color: var(--ink-dark); }
.term { font-weight: 600; color: var(--ink-dark); margin: 1.6rem 0 0.3rem;
  font-size: 1.08rem; }
.term:first-of-type, h3 + .term { margin-top: 0.8rem; }
/* #126 Paper & Ink: a term tips like a loose slip under the hand (reduced-motion
   collapse lives in /motion.css). inline-block so it pivots around its own text. */
.term { display: inline-block; transform-origin: left center;
  transition: transform var(--paper-quick) var(--ease-paper); }
.term:hover  { transform: rotate(-1.2deg) translateX(2px); }
.term:active { transform: none; }
.def { margin: 0; }
a { color: var(--ink-brown); }
code { background: var(--parchment-deep); padding: 0.1em 0.4em; border-radius: 3px;
  font-size: 0.9em; font-family: ui-monospace, 'SF Mono', Menlo, monospace; }
footer { margin-top: 4rem; }