/* Read at Sight companion website */
:root {
  --ink: #1d1d1f;
  --muted: #5f6368;
  --paper: #fffdf8;
  --line: #e6e1d6;
  --accent: #2b5d9b;
  --hl: #e0472b;
  --box: #f4f1e8;
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  color: var(--ink);
  background: var(--paper);
}
* { box-sizing: border-box; }
body { margin: 0; line-height: 1.55; font-size: 18px; }
a { color: var(--accent); }
header.site {
  position: sticky; top: 0; z-index: 10; display: flex; gap: 0.6em; align-items: baseline; flex-wrap: wrap;
  padding: 0.55em 1.2em; background: rgba(255, 253, 248, 0.95); border-bottom: 1px solid var(--line);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 15px; backdrop-filter: blur(4px);
}
header.site .brand { font-weight: 700; text-decoration: none; color: var(--ink); }
header.site .sep { color: var(--muted); margin: 0 0.15em; }
main.page { max-width: 980px; margin: 0 auto; padding: 1.2em 1.2em 3em; }
h1 { font-size: 2.1em; line-height: 1.15; margin: 0.1em 0 0.2em; }
h2 { font-size: 1.45em; margin: 1.6em 0 0.4em; }
section, h2, h3 { scroll-margin-top: 3.5em; }
h3 { font-size: 1.12em; margin: 1.1em 0 0.2em; }
p { margin: 0.4em 0 0.7em; }
.kicker { font-style: italic; color: var(--muted); margin: 0; }
.new { font-style: italic; color: var(--muted); }
.unit-head { margin-bottom: 1em; }
.toc { font-family: system-ui, sans-serif; font-size: 15px; margin: 0.4em 0 1.2em; }
.box {
  background: var(--box); border: 1px solid var(--line); border-radius: 12px; padding: 0.8em 1.4em 0.6em; margin: 1.5em 0;
}
.box h3 { margin-top: 0.2em; }
.box li { margin: 0.35em 0; }
.checkpoint { border-color: #c9d8ea; background: #f2f6fb; }
.part { border-top: 2px solid var(--line); margin-top: 2.2em; }
.part h2 { margin-top: 0.8em; }
.tempo { font-weight: normal; font-size: 0.85em; color: var(--muted); margin-left: 0.6em; white-space: nowrap; }
.credit { font-style: italic; color: var(--muted); font-size: 0.92em; margin: 0.1em 0; }
.note { font-size: 0.95em; margin: 0.2em 0 0.4em; }
.figure { margin: 1em 0; text-align: center; }
.figure img { max-width: 100%; height: auto; }
h3.group { margin-top: 1.8em; }

/* scores */
figure.score { margin: 1.4em 0 1.8em; padding: 0; scroll-margin-top: 4em; }
figure.score figcaption { font-size: 0.95em; margin-bottom: 0.2em; }
figure.score .label {
  display: inline-block; font-weight: 700; font-family: system-ui, sans-serif; font-size: 0.85em;
  border: 1.5px solid var(--ink); border-radius: 4px; padding: 0 0.35em; margin-right: 0.4em;
}
figure.score .title { font-weight: 700; }
figure.score .caption { color: var(--muted); font-style: italic; margin-left: 0.4em; }
figure.piece { margin-top: 2.4em; }
.piece-title { margin: 0 0 0.1em; font-size: 1.3em; }
.sheet { min-height: 90px; }
.sheet svg.ly { width: 100%; height: auto; display: block; overflow: visible; }
.sheet svg.ly tspan { white-space: pre; }
.sheet svg.ly text { font-family: "TeX Gyre Schola", "C059", "Century Schoolbook", "New Century Schoolbook", Georgia, serif; }
.sheet svg.ly [data-n] { cursor: pointer; }
.sheet svg.ly [data-n].on { color: var(--hl); }
.sheet svg.ly [data-n]:hover { color: var(--accent); }
figure.playing .sheet { outline: 2px solid #f1d9d3; outline-offset: 6px; border-radius: 4px; }

.player {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35em 0.9em; margin-top: 0.4em;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 14px; color: var(--muted);
}
.player button {
  font-size: 15px; width: 2.4em; height: 2.1em; border-radius: 8px; border: 1px solid #c9c3b6; background: #fff;
  color: var(--ink); cursor: pointer; line-height: 1;
}
.player button.play { background: var(--accent); color: #fff; border-color: var(--accent); }
.player button:hover { filter: brightness(0.95); }
.player .speed { display: inline-flex; align-items: center; gap: 0.35em; }
.player .speed .mk { font-family: Georgia, serif; font-size: 1.15em; color: var(--ink); }
.player input[type=range] { width: 9em; accent-color: var(--accent); }
.player output { min-width: 2.2em; font-variant-numeric: tabular-nums; color: var(--ink); }
.player .opt { display: inline-flex; align-items: center; gap: 0.25em; cursor: pointer; }
.player select { font: inherit; padding: 0.15em 0.3em; border-radius: 6px; border: 1px solid #c9c3b6; background: #fff; }
.player .midi { font-size: 13px; }
.player .status { font-style: italic; }
figure.small .sheet svg.ly { max-width: 100%; }

/* contents and home */
.book-head { margin: 0.6em 0 1.2em; }
.book-head .blurb { font-size: 1.1em; }
.pdf { font-family: system-ui, sans-serif; font-size: 15px; }
ol.units { list-style: none; padding: 0; margin: 0.6em 0; }
ol.units li { padding: 0.55em 0; border-bottom: 1px solid var(--line); }
ol.units li a { text-decoration: none; display: block; }
ol.units .num { font-family: system-ui, sans-serif; font-weight: 700; font-size: 0.85em; color: var(--muted); margin-right: 0.5em; }
ol.units .t { font-size: 1.1em; }
ol.units .new { display: block; font-size: 0.9em; }
ul.cards { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1em; }
ul.cards a {
  display: block; height: 100%; padding: 1em 1.1em; border: 1px solid var(--line); border-radius: 12px; background: #fff;
  text-decoration: none; color: var(--ink); transition: box-shadow 0.15s;
}
ul.cards a:hover { box-shadow: 0 3px 14px rgba(0, 0, 0, 0.09); }
ul.cards .t { display: block; font-weight: 700; font-size: 1.1em; margin-bottom: 0.3em; color: var(--accent); }
ul.cards .d { display: block; color: var(--muted); font-size: 0.95em; }

nav.pager {
  max-width: 980px; margin: 0 auto; padding: 1em 1.2em; display: flex; justify-content: space-between; gap: 1em;
  font-family: system-ui, sans-serif; font-size: 15px; border-top: 1px solid var(--line);
}
footer.site { max-width: 980px; margin: 0 auto; padding: 1em 1.2em 3em; color: var(--muted); font-size: 13px; font-family: system-ui, sans-serif; }

@media (max-width: 640px) {
  body { font-size: 17px; }
  main.page { padding: 0.8em 0.7em 2em; }
  h1 { font-size: 1.7em; }
  .player input[type=range] { width: 7em; }
}
@media print {
  header.site, .player, nav.pager, footer.site { display: none; }
}