:root {
  color-scheme:light;
  --paper:#f8f6f0;
  --ink:#292d28;
  --muted:#686b60;
  --accent:#8b4b2f;
  --rule:#dedfd4;
  --sidebar:#efeee5;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:var(--paper);
}
.author-section { margin-top: 42px; }
.author-section > h2 {
  font: normal 27px/1.3 Georgia, serif;
  margin: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.group-count { font: 11px/1.5 Arial, sans-serif; color: var(--muted); }
.author-nav { border-bottom: 1px solid var(--rule); }
.author-nav summary {
  cursor: pointer;
  font: 15px/1.5 Georgia, serif;
  padding: 14px 0;
}
.author-nav summary .group-count { float: right; margin-top: 3px; }
.author-nav summary:hover { color: var(--accent); }
.author-nav summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.author-nav .nav-list { padding: 0 0 10px 12px; }
* {
  box-sizing:border-box;
}
body {
  margin:0;
}
a {
  color:inherit;
}
button,input {
  font:inherit;
}
a,button,input {
  -webkit-tap-highlight-color:transparent;
}
a:focus-visible,button:focus-visible,input:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:4px;
}
[hidden] {
  display:none!important;
}
.layout {
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  min-height:100vh;
}
.sidebar {
  padding:42px 28px 24px;
  background:var(--sidebar);
  border-right:1px solid var(--rule);
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
}
.brand {
  font:30px Georgia,serif;
  text-decoration:none;
  letter-spacing:-1px;
  display:flex;
  align-items:center;
  gap:13px;
}
.brand-mark {
  font-size:39px;
  color:var(--accent);
}
.sidebar-caption {
  font-size:11px;
  color:var(--muted);
  margin:9px 0 39px;
  letter-spacing:.3px;
}
label {
  display:block;
  font-size:11px;
  margin-bottom:9px;
  color:var(--muted);
}
.search-field {
  display:flex;
  align-items:center;
  gap:9px;
  border-bottom:1px solid #bdbfb1;
  padding:7px 0 12px;
}
.search-field>span {
  font-size:24px;
}
.search-field input {
  width:100%;
  min-width:0;
  border:0;
  background:transparent;
  font-size:13px;
  padding:4px;
  color:var(--ink);
}
.search-field input::placeholder {
  color:#727568;
}
.nav-caption {
  font-size:10px;
  letter-spacing:1.5px;
  color:var(--muted);
  margin:36px 0 16px;
  display:flex;
  justify-content:space-between;
}
.nav-list,.song-list {
  list-style:none;
  padding:0;
  margin:0;
}
.nav-list a {
  display:block;
  text-decoration:none;
  padding:13px 12px;
  border-left:2px solid transparent;
  margin-left:-12px;
  border-bottom:1px solid #e1e2d7;
}
.nav-list a:hover,.nav-list a[aria-current] {
  background:#e6e6da;
  border-left-color:var(--accent);
}
.nav-title {
  display:block;
  font:16px/1.3 Georgia,serif;
}
.nav-author {
  display:block;
  color:var(--muted);
  font-size:11px;
  line-height:1.5;
  margin-top:5px;
}
.sidebar-bottom {
  font-size:10px;
  text-decoration:none;
  color:var(--muted);
  border-top:1px solid var(--rule);
  margin-top:auto;
  padding-top:23px;
  display:flex;
  justify-content:space-between;
}
.sidebar nav {
  margin-bottom:35px;
}
.nav-empty {
  color:var(--muted);
  font-size:13px;
}
main {
  width:100%;
  max-width:1100px;
  padding:68px 8% 40px;
  min-width:0;
}
.eyebrow {
  font-size:10px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--accent);
  line-height:1.7;
  margin:0 0 25px;
}
.collection-heading h1 {
  font:normal clamp(46px,5vw,72px)/1.05 Georgia,'Times New Roman',serif;
  letter-spacing:-2.8px;
  margin:0;
}
.title-dot {
  color:var(--accent);
}
.intro {
  color:var(--muted);
  font:17px/1.6 Georgia,serif;
  margin:24px 0 55px;
}
.list-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:16px;
  border-bottom:1px solid var(--ink);
}
.list-heading h2 {
  font-size:11px;
  letter-spacing:1px;
  text-transform:uppercase;
  font-weight:normal;
  margin:0;
}
.list-heading>span {
  font-size:10px;
  color:var(--muted);
}
.song-card {
  display:grid;
  grid-template-columns:32px minmax(0,1fr) 16px;
  gap:16px;
  text-decoration:none;
  padding:25px 0;
  border-bottom:1px solid var(--rule);
}
.card-number {
  font:10px/2.4 monospace;
  color:var(--muted);
}
.song-card h3 {
  font:normal 25px/1.2 Georgia,serif;
  margin:0 0 7px;
  letter-spacing:-.4px;
}
.card-author {
  font-size:11px;
  color:var(--muted);
  margin:0;
}
.first-line {
  font:14px/1.6 Georgia,serif;
  color:var(--muted);
  margin:12px 0 0;
}
.card-arrow {
  font-size:19px;
  color:var(--accent);
  padding-top:3px;
}
.song-card:hover h3 {
  color:var(--accent);
}
.collection-footer {
  font:11px/1.7 Arial,sans-serif;
  color:var(--muted);
  padding-top:28px;
}
.empty-state {
  padding:35px 0;
}
.empty-state h2 {
  font:28px Georgia,serif;
}
.empty-state p {
  color:var(--muted);
  font-size:14px;
}
.empty-state button {
  background:transparent;
  border:1px solid var(--accent);
  color:var(--accent);
  padding:10px 16px;
  cursor:pointer;
}
.back-link {
  font-size:11px;
  text-decoration:none;
  color:var(--muted);
}
.back-link:hover {
  color:var(--accent);
}
.song-heading {
  margin-top:55px;
  padding-bottom:32px;
  border-bottom:1px solid var(--rule);
}
.song-heading .eyebrow {
  margin-bottom:16px;
}
.song-heading h1 {
  font:normal clamp(35px,4vw,55px)/1.12 Georgia,serif;
  letter-spacing:-1.5px;
  margin:0;
  overflow-wrap:anywhere;
}
.credit {
  font:italic 15px/1.7 Georgia,serif;
  color:var(--muted);
  margin:17px 0 0;
}
.lyrics {
  font:18px/1.8 Georgia,'Times New Roman',serif;
  margin-top:37px;
}
.verse {
  margin:0 0 29px;
}
.line {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  column-gap:18px;
  overflow-wrap:anywhere;
}
.chords {
  color:var(--accent);
  font:12px/2.7 ui-monospace,monospace;
  max-width:260px;
  overflow-wrap:anywhere;
}
.refrain {
  padding-left:19px;
  border-left:2px solid #b47754;
}
.song-note {
  font:italic 14px/1.6 Georgia,serif;
  color:var(--muted);
}
.song-footer {
  border-top:1px solid var(--rule);
  padding-top:20px;
  margin-top:45px;
  display:flex;
  justify-content:space-between;
  gap:15px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:10px;
}
.skip-link {
  position:fixed;
  left:12px;
  top:-100px;
  background:var(--paper);
  padding:12px;
  z-index:2;
}
.skip-link:focus {
  top:12px;
}
@media(min-width:1500px) {
  main {
    padding-left:100px;
    padding-right:100px;
  }
}
@media(max-width:900px) {
  .layout {
    grid-template-columns:245px minmax(0,1fr);
  }
  .sidebar {
    padding:30px 22px;
  }
  .brand {
    font-size:27px;
  }
  main {
    padding:48px 6% 35px;
  }
  .line {
    grid-template-columns:1fr;
  }
  .chords {
    line-height:1.8;
    margin:0 0 5px;
    max-width:100%;
  }
  .lyrics {
    font-size:17px;
  }
}
@media(max-width:640px) {
  .layout {
    display:block;
  }
  .sidebar {
    position:static;
    height:auto;
    padding:18px 24px 20px;
    border-right:0;
    border-bottom:1px solid var(--rule);
  }
  .brand {
    font-size:26px;
  }
  .brand-mark {
    font-size:30px;
  }
  .sidebar-caption {
    margin:5px 0 22px;
  }
  .sidebar nav,.sidebar-bottom {
    display:none;
  }
  .search-field {
    padding-bottom:7px;
  }
  .search-field input {
    font-size:16px;
  }
  label {
    font-size:11px;
  }
  main {
    padding:36px 24px;
  }
  .collection-heading .eyebrow {
    font-size:9px;
    letter-spacing:1px;
    margin-bottom:21px;
  }
  .collection-heading h1 {
    font-size:45px;
    letter-spacing:-1.7px;
  }
  .intro {
    font-size:16px;
    margin:23px 0 39px;
  }
  .song-card {
    grid-template-columns:25px minmax(0,1fr) 14px;
    gap:8px;
    padding:23px 0;
  }
  .song-card h3 {
    font-size:23px;
  }
  .first-line {
    font-size:13px;
  }
  .song-heading {
    margin-top:35px;
    padding-bottom:26px;
  }
  .song-heading h1 {
    font-size:37px;
  }
  .song-heading .eyebrow {
    font-size:9px;
    letter-spacing:1px;
  }
  .lyrics {
    margin-top:28px;
    font-size:17px;
    line-height:1.8;
  }
  .verse {
    margin-bottom:27px;
  }
  .line {
    grid-template-columns:1fr;
  }
  .chords {
    font-size:12px;
  }
  .song-footer {
    font-size:10px;
    line-height:1.6;
  }
  .refrain {
    padding-left:13px;
  }
}
@media(max-width:640px) {
  .reading.searching .sidebar nav {
    display:block;
    margin-bottom:0;
  }
}

/* A chord change inside the lyric: a hairline before the letter (owner choice, variant F);
   chords stay listed beside the line. On hover the names appear in the gap above the line. */
.chord-mark {
  position:relative;
}
.chord-mark::before {
  content:"";
  position:absolute;
  left:-2px;
  top:.15em;
  height:1em;
  border-left:1px solid var(--accent);
  opacity:.55;
  pointer-events:none;
}
@media (hover:hover) {
  .line:hover .chord-mark::after {
    content:attr(data-chord);
    position:absolute;
    left:-3px;
    bottom:100%;
    font:10px/1 ui-monospace,monospace;
    color:var(--accent);
    background:var(--paper);
    padding-right:2px;
    white-space:nowrap;
    pointer-events:none;
  }
}

/* Temporary review page for proposed text corrections. */
.review-link { display:inline-block; margin:0 0 24px; color:var(--accent); font:14px/1.5 Arial,sans-serif; }
.review-main { max-width:900px; margin:0 auto; padding:40px 16px 60px; }
.review-tools { display:flex; flex-wrap:wrap; gap:8px; margin:24px 0 10px; }
.review-tools button { font:13px Arial,sans-serif; padding:6px 10px; border:1px solid var(--rule); background:#fff; color:var(--ink); cursor:pointer; }
.review-tools button:focus-visible, .proposal input:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
#decisions { width:100%; font:13px ui-monospace,monospace; margin-bottom:24px; }
.review-song { border-top:1px solid var(--rule); padding:18px 0; }
.review-song h2 { font:20px Georgia,serif; margin:0 0 8px; }
.review-author { display:block; font:12px Arial,sans-serif; color:var(--muted); margin-top:4px; overflow-wrap:anywhere; }
.proposals { list-style:none; padding:0; margin:0; }
.proposal { padding:8px 0; border-bottom:1px dashed var(--rule); }
.proposal label { font:12px Arial,sans-serif; color:var(--muted); display:flex; gap:8px; align-items:center; cursor:pointer; }
.proposal-id { font-family:ui-monospace,monospace; }
.typo .kind { color:var(--accent); font-weight:bold; }
.diff { font:17px/1.6 Georgia,serif; margin:4px 0 0 24px; }
del { color:#9b2c2c; background:#f6dede; text-decoration:line-through; }
ins { color:#245c2a; background:#dcefdc; text-decoration:none; }
.structural { font:13px Arial,sans-serif; color:var(--muted); }
.block-diff { margin:4px 0 0 24px; padding-left:10px; border-left:2px solid var(--rule); }
.block-diff .diff { margin:0; }
.diff.context { font:12px Arial,sans-serif; color:var(--muted); }
.support { margin-left:auto; font-size:11px; }
.agreed .kind, .spelling .kind, .script .kind { color:var(--accent); font-weight:bold; }
.inline { margin:4px 0 0 24px; padding-left:10px; border-left:2px solid var(--rule); }
.inline .diff { margin:0; }
.diff.ctx, .side .ctx td { color:var(--muted); font-size:14px; }
.side { width:calc(100% - 24px); margin:6px 0 0 24px; border-collapse:collapse; table-layout:fixed; font:16px/1.5 Georgia,serif; }
.side th { font:11px Arial,sans-serif; color:var(--muted); text-align:left; padding:2px 8px; border-bottom:1px solid var(--rule); }
.side td { vertical-align:top; padding:2px 8px; border-left:1px solid var(--rule); overflow-wrap:anywhere; }
.side td:first-child { border-left:0; }
.readings summary, .variants summary { font:12px Arial,sans-serif; color:var(--muted); cursor:pointer; margin:6px 0 0 24px; }
.reading { font:13px/1.5 Arial,sans-serif; color:var(--muted); margin:2px 0 0 24px; }
.reading span { font-weight:bold; }
.variants { margin-top:10px; }
.variants summary { margin-left:0; font-size:13px; }
.variants ol { list-style:none; padding:0; }
.variant { padding:8px 0; border-bottom:1px dashed var(--rule); font:12px Arial,sans-serif; color:var(--muted); }
.variant .side { margin-left:0; width:100%; font-size:15px; }
.take { display:inline-block; margin:6px 12px 0 0; cursor:pointer; }
@media (max-width:600px) { .side { font-size:14px; } .side td, .side th { padding:2px 4px; } }

/* A repeated refrain: words differing from the first refrain are underlined. */
.refrain-change {
  text-decoration:underline dotted;
  text-decoration-color:var(--accent);
  text-decoration-thickness:1.5px;
  text-underline-offset:4px;
}

/* Refrain marker: an "R" in the margin, outside the lyric text. */
.refrain { position:relative; }
.refrain::before, .refrain-cue::before {
  content:"R";
  position:absolute;
  left:-16px;
  top:.35em;
  font:bold 11px/1 Arial,sans-serif;
  color:var(--accent);
  opacity:.8;
}
.refrain-cue {
  position:relative;
  height:1.2em;
  margin:0 0 29px;
  border-left:2px solid #b47754;
  width:28px;
}
.refrain-cue::before { left:-16px; top:.1em; }

/* Repeated lines (from a source repeat bracket): dotted bar in the left gutter,
   a small "×N" after the text of the last line. Both stay outside the lyric text. */
.line.repeat > span:first-child {
  position:relative;
}
.line.repeat > span:first-child::before {
  content:"";
  position:absolute;
  left:-9px;
  top:.25em;
  bottom:.15em;
  border-left:2px dotted var(--accent);
  opacity:.7;
}
.line.repeat-end > span:first-child::after {
  content:"×" attr(data-times);
  margin-left:.45em;
  font:11px/1 Arial,sans-serif;
  color:var(--accent);
  vertical-align:.1em;
}

/* Author pages and links */
.author-section > h2 a, .song-heading .eyebrow a { text-decoration: none; }
.author-section > h2 a:hover, .song-heading .eyebrow a:hover { color: var(--accent); text-decoration: underline; }
.nav-author-page { display: block; padding: 0 0 14px 12px; font-size: 12px; color: var(--accent); text-decoration: none; }
.nav-author-page:hover { text-decoration: underline; }
.sidebar-link { display: block; margin: 0 0 22px; font-size: 13px; color: var(--accent); text-decoration: none; }
.sidebar-link:hover { text-decoration: underline; }

/* Chord diagrams */
.chord-box { display: block; overflow: visible; }
.chord-box line { stroke: var(--muted); stroke-width: 1; }
.chord-box line.nut { stroke: var(--ink); stroke-width: 4; }
.chord-box .dot { fill: var(--accent); }
.chord-box .open { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.chord-box .mute { stroke: var(--muted); stroke-width: 1.3; }
.chord-box .fret-no { font: 11px Arial, sans-serif; fill: var(--muted); }

/* Chords used in a song */
.song-chords { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--rule); }
.song-chords h2 { font: normal 18px/1.4 Georgia, serif; margin: 0 0 14px; }
.chord-strip { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.chord-strip a { display: flex; flex-direction: column; align-items: center; text-decoration: none; padding: 4px 2px; border-radius: 4px; }
.chord-strip a:hover { background: var(--sidebar); }
.chord-strip .chord-name { font: 12px/1.4 ui-monospace, monospace; color: var(--accent); margin-top: 2px; }
.chord-unclear { display: grid; place-items: center; width: 79px; height: 72px; color: var(--muted); font: 22px Georgia, serif; }
.chord-page-link { display: inline-block; margin-top: 12px; font-size: 13px; color: var(--accent); text-decoration: none; }
.chord-page-link:hover { text-decoration: underline; }

/* Chord page */
.chords-heading .intro { max-width: 640px; font-size: 15px; }
.chord-jump { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  margin: 26px 0 8px; padding: 10px 0; background: var(--paper); border-bottom: 1px solid var(--rule); }
.chord-jump a { min-width: 34px; padding: 6px 8px; text-align: center; font: 14px/1 ui-monospace, monospace;
  text-decoration: none; border: 1px solid var(--rule); border-radius: 4px; background: #fff; }
.chord-jump a:hover { color: var(--accent); border-color: var(--accent); }
.chord-filter { margin-left: auto; font-size: 13px; color: var(--muted); display: flex; gap: 6px; align-items: center; cursor: pointer; }
body:has(#hide-basic:checked) .chord-card.basic { display: none; }
.chord-root { scroll-margin-top: 70px; margin-top: 34px; }
.chord-root > h2 { font: normal 26px/1.3 Georgia, serif; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); scroll-margin-top: 70px; }
.chord-root > h2 span { font: 13px Arial, sans-serif; color: var(--muted); margin-left: 8px; }
.chord-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.chord-card { border: 1px solid var(--rule); border-radius: 6px; background: #fff; padding: 12px 12px 10px; scroll-margin-top: 70px; }
.chord-card:target { outline: 2px solid var(--accent); outline-offset: 2px; }
.chord-card h3 { font: bold 17px/1.3 ui-monospace, monospace; margin: 0; color: var(--accent); overflow-wrap: anywhere; }
.chord-kind { font-size: 11px; line-height: 1.4; color: var(--muted); margin: 3px 0 8px; min-height: 2.8em; }
.chord-card .chord-box { margin: 0 auto; }
.chord-frets { font: 12px ui-monospace, monospace; text-align: center; margin: 6px 0 4px; letter-spacing: 1px; }
.chord-card details { font-size: 12px; }
.chord-card summary { cursor: pointer; color: var(--muted); }
.chord-card details ul { margin: 6px 0 0; padding-left: 16px; }
.chord-card details li { margin: 3px 0; }
.chord-card details li span { color: var(--muted); }
.unclear-list { padding-left: 18px; font-size: 14px; line-height: 1.8; }
.unclear-list b { font-family: ui-monospace, monospace; color: var(--accent); }
@media (max-width: 640px) {
  .chord-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
  .chord-filter { margin-left: 0; width: 100%; }
}

/* Alternative fingerings on the chord page (folded) */
.more-fingerings { font-size: 12px; margin: 2px 0 6px; }
.more-fingerings summary { cursor: pointer; color: var(--accent); }
.more-fingerings ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px 6px; }
.more-fingerings li { display: flex; flex-direction: column; align-items: center; }
.more-fingerings .chord-box { margin: 0; }
.more-fingerings .chord-frets { font-size: 10px; margin: 2px 0 0; letter-spacing: 0; }
.chord-card:has(.more-fingerings[open]) { grid-column: span 2; }