/* miscellany.io /handout/: extra styles for the printable one-pager. Builds on /styles.css. */

/* On screen */
.handout .print-bar { margin: 1.5rem 0 .5rem; }
.handout .print-bar .small { margin: .6rem 0 0; }
.handout h1 .sub { display: block; font-size: .7em; font-weight: 600; margin-top: .2em; }
.handout .intro { font-size: 1.2rem; color: var(--ink-2); }
.handout h2 { margin: 1.8em 0 .4em; }
.handout .example { border-left: 4px solid var(--line); padding-left: .9rem; margin: .8rem 0; }
.handout .example p { margin: 0 0 .3rem; }
.handout .source { font-size: .9rem; color: var(--muted); overflow-wrap: anywhere; }
.handout .more { margin-top: 2rem; }
.handout .staff {
  border: 1px solid var(--line); border-radius: .75rem; background: var(--card);
  padding: .9rem 1.1rem; margin: 1.5rem 0; font-size: .95rem; overflow-wrap: anywhere;
}
.handout .staff p { margin: .3rem 0; }
.handout .foot p { margin: .4rem 0; }
.print-only { display: none; }

/* On paper: one US Letter page, black on white */
@page { size: letter; margin: 0.45in 0.5in; }
@media print {
  .handout * { color: #000 !important; background: transparent !important; box-shadow: none !important; }
  html, body.handout { background: #fff !important; color: #000 !important; }
  body.handout { font-size: 14pt; line-height: 1.2; }
  .handout .top, .handout .print-bar, .handout .screen-only { display: none !important; }
  .handout .print-only { display: inline; }
  .handout .wrap, .handout .foot { max-width: none; margin: 0; padding: 0; }
  .handout a { text-decoration: none; }
  .handout p { margin: 0 0 3pt; }
  .handout h1 { font-size: 20pt; line-height: 1.15; margin: 0 0 5pt; }
  .handout h1 .sub { font-size: 17pt; margin-top: 1pt; }
  .handout .intro { font-size: 14pt; margin: 0 0 2pt; }
  .handout h2 { font-size: 16pt; line-height: 1.15; margin: 9pt 0 2pt; }
  .handout .example { border-left: 2pt solid #000; padding-left: 7pt; margin: 3pt 0 4pt; }
  .handout .example p { margin: 0 0 1pt; }
  .handout .source { font-size: 9pt; line-height: 1.2; }
  .handout .more { margin: 9pt 0 0; }
  .handout .staff {
    font-size: 10pt; line-height: 1.25; border: 1pt solid #000; border-radius: 0;
    padding: 4pt 7pt; margin: 8pt 0 0;
  }
  .handout .staff p { margin: 0 0 2pt; }
  .handout .foot { font-size: 9.5pt; line-height: 1.2; border-top: 1pt solid #000; padding-top: 4pt; margin-top: 8pt; }
  .handout .foot p { margin: 0; }
  .handout section, .handout .example, .handout .staff { break-inside: avoid; }
}