/* Generated by tools/site.py. */
:root {
  --ink: #1A1A1A;
  --faint: #404040;
  --rule: #7E7E7E;
  --paper: #FDFCF8;
}
* { box-sizing: border-box; }
/* The size lives on the root, not on body. Everything else here is in rem,
   and rem resolves against html: setting it on body scaled the paragraphs
   and left every heading, caption and table header at the browser default.
   19.36px is 16 up a tenth, twice. */
html { font-size: 19.36px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 1rem/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/* Header, nav and main share one measure, so the wordmark, the
   instrument links and the content all start on the same left edge. */
header, nav, main { max-width: 54rem; margin: 0 auto; }
header { padding: 1.5rem 1rem 0.5rem; }
.wordmark {
  font-size: 1.5rem; font-weight: 700; color: var(--ink); text-decoration: none;
}
.wordmark span { font-weight: 400; color: var(--faint); }
nav { padding: 0 1rem; border-bottom: 1px solid var(--rule); }
nav.sections { max-width: none; }
nav a {
  display: inline-block; padding: 0.5rem 0.75rem 0.6rem 0;
  font-weight: 700; text-decoration: none; color: var(--ink);
}
nav a:hover { text-decoration: underline; }
nav a.on { text-decoration: underline; text-underline-offset: 4px; }
.contents ul { margin: 0.5rem 0 2rem; padding-left: 1.2rem; }
.contents li { margin: 0.2rem 0; }
.contents a { color: var(--ink); text-decoration: underline; }
main { padding: 1.5rem 1rem 3rem; }
h1 { font-size: 2rem; margin: 1rem 0 0.25rem; }
h2 { font-size: 1.3rem; margin: 2.5rem 0 0.75rem; }
h3 { font-size: 1.05rem; margin: 1.5rem 0 0.5rem; }
.tuning { font-family: ui-monospace, Menlo, Consolas, monospace;
          font-weight: 700; letter-spacing: 0.12em; margin: 0 0 0.5rem; }
/* No narrower measure for prose: the content area is already the
   measure, and capping these again broke lines well short of it. */
.lede { color: var(--faint); }
.note { color: var(--faint); font-size: 0.9rem; }
.use { color: var(--faint); font-weight: 400; font-size: 0.9rem; }
/* The downloads are what the site is for. A plain list of links read as
   something to get past; a button reads as something to press. Each one
   carries the cost of taking it -- pages to read, sheets to print -- so
   the choice can be made without opening the file. */
.getit { margin: 0.5rem 0 1.2rem; }
.getit .edition { font-weight: 700; font-size: 1.1rem; margin: 0 0 0.7rem; }
/* Three equal columns, so each button is a third of the measure and the
   row lines up with the instrument cards below it. */
ul.buttons {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 0.7rem; grid-template-columns: repeat(3, 1fr);
}
ul.buttons li { margin: 0; }
a.btn {
  display: block; min-width: 12rem; padding: 0.7rem 1rem;
  border: 2px solid var(--ink); border-radius: 6px;
  color: var(--ink); text-decoration: none;
}
a.btn .what { display: block; font-weight: 700; }
/* An arrow, so a button that leads to a file cannot be mistaken for one
   that leads to another page. */
a.btn .what::after { content: " \2193"; }
a.btn .meta { display: block; font-size: 0.85rem; opacity: 0.8; }
a.btn:hover, a.btn:focus {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
}
/* Below the width where three columns still hold a label on one line,
   the buttons stack and go full width: a thumb is a blunt instrument. */
@media (max-width: 46rem) {
  ul.buttons { display: block; }
  ul.buttons li { margin-bottom: 0.7rem; }
  a.btn { min-width: 0; }
}
p.booklets { margin: 0 0 0.9rem; }
/* The stitch diagram is 900px wide and had nothing holding it back, so it
   ran off the side of a phone. Both figures share the one width now. */
#printing img { display: block; width: 100%; max-width: 900px; height: auto; }
ul.picks {
  list-style: none; padding: 0; margin: 0 0 2.5rem;
  display: grid; gap: 0.7rem;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}
ul.picks li { margin: 0; }
a.pick {
  display: block; padding: 0.6rem 0.9rem; text-decoration: none;
  border: 1px solid var(--rule); border-radius: 6px;
}
a.pick .who { display: block; font-weight: 700; font-size: 1.15rem; }
a.pick .meta { display: block; font-size: 0.85rem; color: var(--faint); }
a.pick:hover, a.pick:focus { border-color: currentColor; }
table.grid { border-collapse: collapse; margin: 0.5rem 0 1rem; }
table.grid th, table.grid td {
  padding: 0.2rem 0.7rem 0.2rem 0; text-align: left; vertical-align: baseline;
}
table.grid thead th {
  border-bottom: 1px solid var(--rule); font-size: 0.85rem;
}
table.grid tbody th { font-weight: 700; white-space: nowrap; }
tr.gap td { height: 1.5rem; }
tr.group th { padding-top: 0.8rem; color: #AA0019; }
.fret { font-family: ui-monospace, Menlo, Consolas, monospace;
        font-weight: 700; letter-spacing: 0.05em; }
.fret sup { font-size: 0.65em; font-weight: 700; color: var(--faint); }
.sep { color: var(--rule); }
/* Each voicing is its own box with the gap on its right, so one that
   wraps starts at the left edge of the cell rather than carrying an
   indent from the separator in front of it. */
.alt { display: none; }
.v { display: inline-block; margin-right: 0.7rem; }
/* A rule under the key, so each block reads as its own table rather than
   running into the one above it in a multi-column flow. */
.key h3 {
  border-bottom: 1px solid var(--rule); font-size: 1rem;
  padding-bottom: 0.2rem; margin-bottom: 0.4rem;
}
.keys {
  display: grid; gap: 0 2.5rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
/* Full measure. The drawing is a viewBox, so the type inside scales
   with it and needs no separate size. */
svg.circle { width: 100%; height: auto; display: block; }
footer {
  border-top: 1px solid var(--rule); margin: 3rem auto 0;
  max-width: 54rem; padding: 1rem; color: var(--faint); font-size: 0.9rem;
}
footer a { color: var(--faint); }
.pen.mandolin, .inst-mandolin .fret { color: #00873C; }
.inst-mandolin a.btn { color: #00873C; border-color: #00873C; }
.inst-mandolin a.btn:hover, .inst-mandolin a.btn:focus { background: #00873C; border-color: #00873C; color: var(--paper); }
.pen.guitar, .inst-guitar .fret { color: #0060BB; }
.inst-guitar a.btn { color: #0060BB; border-color: #0060BB; }
.inst-guitar a.btn:hover, .inst-guitar a.btn:focus { background: #0060BB; border-color: #0060BB; color: var(--paper); }
.pen.ukulele, .inst-ukulele .fret { color: #9600D5; }
.inst-ukulele a.btn { color: #9600D5; border-color: #9600D5; }
.inst-ukulele a.btn:hover, .inst-ukulele a.btn:focus { background: #9600D5; border-color: #9600D5; color: var(--paper); }
.pen.piano, .inst-piano .fret { color: #AA0019; }
.inst-piano a.btn { color: #AA0019; border-color: #AA0019; }
.inst-piano a.btn:hover, .inst-piano a.btn:focus { background: #AA0019; border-color: #AA0019; color: var(--paper); }
.pen.banjo, .inst-banjo .fret { color: #C05500; }
.inst-banjo a.btn { color: #C05500; border-color: #C05500; }
.inst-banjo a.btn:hover, .inst-banjo a.btn:focus { background: #C05500; border-color: #C05500; color: var(--paper); }
.pen.bass, .inst-bass .fret { color: #9A8800; }
.inst-bass a.btn { color: #9A8800; border-color: #9A8800; }
.inst-bass a.btn:hover, .inst-bass a.btn:focus { background: #9A8800; border-color: #9A8800; color: var(--paper); }
.pen.cello, .inst-cello .fret { color: #63421F; }
.inst-cello a.btn { color: #63421F; border-color: #63421F; }
.inst-cello a.btn:hover, .inst-cello a.btn:focus { background: #63421F; border-color: #63421F; color: var(--paper); }