:root {
  color-scheme: light;
  --paper: #faf8f1;
  --ink: #242c29;
  --muted: #525e57;
  --green: #28483e;
  --border: #d8d9cd;
  font-family: system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
}
* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
a { color: var(--green); }
button, input { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid #776321; outline-offset: 3px; }
.home, .panel { width: min(100% - 2rem, 42rem); margin-inline: auto; }
.home { padding-block: clamp(3rem, 12vh, 8rem); text-align: center; }
.panel { padding-block: 1.5rem 4rem; }
.eyebrow { color: var(--muted); font-size: .75rem; letter-spacing: .22em; font-weight: 700; }
h1 { font-family: Georgia, serif; color: var(--green); margin: 0 0 .65rem; line-height: 1.08; }
.home h1 { font-size: clamp(2.85rem, 9vw, 5.75rem); }
.panel h1 { font-size: clamp(2.15rem, 6vw, 3.5rem); }
.intro, .panel p { color: var(--muted); line-height: 1.65; }
.front-matter article { font-family: Georgia, serif; font-size: 1.125rem; }
.front-matter h2 { color: var(--green); line-height: 1.25; margin-top: 1.75em; }
.front-matter hr { width: 35%; margin: 1.5em auto; border: 0; border-top: 1px solid var(--border); }
.front-matter blockquote { margin-inline: 1.25rem; font-style: italic; }
.menu { display: grid; gap: .75rem; max-width: 25rem; margin: 2rem auto 0; text-align: left; }
.menu a, .results a { display: flex; justify-content: space-between; align-items: center; gap: .8rem; min-height: 3.4rem; padding: .85rem 1rem; color: var(--green); text-decoration: none; }
.menu a { border: 1px solid var(--border); background: #fff; border-radius: .75rem; font-weight: 650; }
.menu a:hover, .results a:hover { background: #edf2ed; }
.menu .browse-link { background: #e6efe5; border-color: #bdcdbd; }
.menu .browse-link:hover { background: #d9e8da; }
.catalog-nav { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-bottom: 1.4rem; }
.catalog-nav a { display: inline-flex; align-items: center; min-height: 44px; }
.catalog-nav [aria-current] { font-weight: 750; }
#search-form { display: grid; gap: .5rem; margin-top: 1.35rem; }
#search { width: 100%; min-height: 3rem; border: 1px solid #8e988e; border-radius: .55rem; padding: .65rem .8rem; color: var(--ink); background: white; }
.results { list-style: none; padding: 0; }
.results li { border-bottom: 1px solid var(--border); }
.song-number { color: var(--muted); font-variant-numeric: tabular-nums; flex: 0 0 3ch; }
.song-name { flex: 1; }
#reader { background: #f0f0ed; }
#reader-content { min-height: 100vh; min-height: 100svh; }
#reader-content.pan-score { overflow-x: auto; }
#score { width: var(--score-width, 100%); margin-inline: auto; background: white; }
#score img { display: block; width: 100%; height: auto; }
#score img + img { border-top: 2px solid #e3e3e0; }
.toolbar, #show-controls {
  position: fixed;
  bottom: max(.6rem, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 4px 20px #0003;
}
.toolbar { width: min(100% - 1rem, 32rem); padding: .5rem; border-radius: .75rem; color: white; background: var(--green); }
.toolbar-heading, .toolbar-row { display: flex; align-items: center; gap: .25rem; }
.toolbar-heading { justify-content: space-between; padding-left: .4rem; }
#hymn-title { font-size: .95rem; }
.toolbar-row { flex-wrap: wrap; }
.toolbar a, .toolbar button, #show-controls {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  min-width: 44px; border: 0; border-radius: .4rem; padding: .35rem .55rem;
  color: inherit; background: transparent; text-decoration: none;
}
.toolbar a:not([href]), .toolbar button:disabled { opacity: .5; }
.toolbar a[href]:hover, .toolbar button:not(:disabled):hover { background: #ffffff26; }
#show-controls { color: white; background: var(--green); padding-inline: .8rem; }
#show-controls:not(:focus-visible) { clip-path: inset(50%); pointer-events: none; }
#zoom-status { font-size: .85rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

#lyrics {
  max-width: 48rem; min-height: 100%; margin-inline: auto;
  padding: 1.5rem clamp(1rem, 5vw, 3rem) 13rem;
  background: var(--paper);
  font-family: Georgia, serif; font-size: var(--lyrics-size, 1.35rem); line-height: 1.55;
  overflow-wrap: anywhere;
}
#lyrics h2 { color: var(--green); line-height: 1.15; }
#lyrics h3, #lyrics .repeat-chorus { font-family: system-ui, sans-serif; font-size: .85rem; color: var(--muted); }
#lyrics .chorus { border-inline-start: 3px solid var(--border); padding-inline-start: .8rem; }
#lyrics .lyrics-lines { white-space: pre-line; margin-top: 0; }
.reader-status { font-size: .85rem; margin: .25rem .55rem; }
.reader-views button[aria-pressed="true"] { background: #ffffff26; font-weight: 700; }
#lyrics .lyrics-credit { color: var(--muted); font: .85rem system-ui, sans-serif; margin-top: 2rem; }

#lyrics .guitar-key {
  color: var(--muted);
  font: .85rem system-ui, sans-serif;
}
#lyrics .guitar-line {
  display: block;
  line-height: 1.25;
  margin-block-end: .25em;
}
#lyrics .guitar-word {
  display: inline-grid;
  grid-template-rows: .95em auto;
  vertical-align: top;
  max-width: 100%;
}
#lyrics .guitar-chord {
  color: var(--green);
  font: 700 .72em system-ui, sans-serif;
  line-height: 1.2;
}