/* Whole Word Music — site styles
 *
 * Warm and readable rather than dramatic. The album covers carry the cinematic
 * register; this is where someone looks up whether a passage has been set, and
 * it should feel like a good hymnal index rather than a record sleeve.
 *
 * System fonts only. No external requests, nothing to go stale, instant paint.
 */

/* ---------- tokens ------------------------------------------------------ */

:root {
  --bg:          #fdfaf5;
  --surface:     #ffffff;
  --surface-alt: #f7f1e8;
  --ink:         #2b2620;
  --ink-soft:    #6b5f52;
  --ink-faint:   #8f8375;
  --accent:      #a3521d;
  --accent-ink:  #ffffff;
  --accent-soft: #f6e7d8;
  --rule:        #e8ddcd;
  --esv-bg:      #e3efe0;
  --esv-ink:     #2f5d29;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;

  --measure: 34rem;
  --radius: 10px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #1b1815;
    --surface:     #24201c;
    --surface-alt: #2b2621;
    --ink:         #f2ebe1;
    --ink-soft:    #b8ab9b;
    --ink-faint:   #8e8274;
    --accent:      #e0975a;
    --accent-ink:  #241d15;
    --accent-soft: #37291d;
    --rule:        #3a332c;
    --esv-bg:      #24352180;
    --esv-ink:     #a8cf9e;
  }
}

:root[data-theme="dark"] {
  --bg:          #1b1815;
  --surface:     #24201c;
  --surface-alt: #2b2621;
  --ink:         #f2ebe1;
  --ink-soft:    #b8ab9b;
  --ink-faint:   #8e8274;
  --accent:      #e0975a;
  --accent-ink:  #241d15;
  --accent-soft: #37291d;
  --rule:        #3a332c;
  --esv-bg:      #24352180;
  --esv-ink:     #a8cf9e;
}

/* ---------- base -------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 5vw, 2.9rem); letter-spacing: -.015em; }
h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1rem; }
p, li { max-width: var(--measure); }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

.container { width: min(64rem, 100% - 2.5rem); margin-inline: auto; }

.skip-link {
  position: absolute; left: -9999px;
  background: var(--accent); color: var(--accent-ink);
  padding: .6rem 1rem; border-radius: 0 0 var(--radius) 0; z-index: 10;
}
.skip-link:focus { left: 0; top: 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

/* ---------- header / footer --------------------------------------------- */

.site-header { border-bottom: 1px solid var(--rule); background: var(--surface); }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; padding: 1rem 0;
}

.wordmark {
  font-family: var(--serif); font-size: 1.3rem; font-weight: 600;
  color: var(--ink); text-decoration: none; letter-spacing: -.01em;
}
.wordmark:hover { color: var(--accent); }

.nav { display: flex; gap: 1.4rem; }
.nav a { color: var(--ink-soft); text-decoration: none; font-size: .98rem; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--accent); }
.nav a[aria-current="page"] { font-weight: 600; }

.site-footer {
  margin-top: 4rem; border-top: 1px solid var(--rule);
  background: var(--surface); color: var(--ink-soft); font-size: .93rem;
}
.site-footer__inner {
  display: flex; justify-content: space-between; gap: 2rem;
  flex-wrap: wrap; padding: 2rem 0 2.5rem;
}
.site-footer p { margin: 0 0 .25rem; }
.footer-nav { display: flex; flex-direction: column; gap: .35rem; }
.footer-nav a { color: var(--ink-soft); text-decoration: none; }
.footer-nav a:hover { color: var(--accent); }
.stack > * { max-width: 28rem; }

/* ---------- sections ---------------------------------------------------- */

.section { padding: 3rem 0; }
.section--tight { padding: 2rem 0; }
.section--alt { background: var(--surface-alt); border-block: 1px solid var(--rule); }

.hero { padding: 4rem 0 3rem; }
.hero p.lead {
  font-size: 1.2rem; color: var(--ink-soft); max-width: 40rem;
}

.lede { font-size: 1.1rem; color: var(--ink-soft); max-width: 40rem; }

/* ---------- buttons ----------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem;
  padding: .6rem 1.1rem; border-radius: var(--radius);
  font-size: .95rem; font-weight: 600; text-decoration: none;
  border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink);
}
.btn:hover { filter: brightness(1.08); }
.btn--quiet { background: transparent; color: var(--accent); }
.btn--quiet:hover { background: var(--accent-soft); filter: none; }
.btn-row { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.5rem; }

/* ---------- albums ------------------------------------------------------ */

.albums {
  display: grid; gap: 1.5rem; margin-top: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.album { display: flex; flex-direction: column; gap: .6rem; }
/* height: auto is what lets aspect-ratio win over the height attribute on the
   tag, which is there so the page does not jump as the covers load. Without
   it every cover stood 600px tall however narrow its column. */
.album img {
  width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--rule); background: var(--surface-alt);
}
.album__placeholder {
  width: 100%; aspect-ratio: 1; border-radius: var(--radius);
  border: 1px dashed var(--rule); background: var(--surface-alt);
}
.album__title { font-family: var(--serif); font-size: 1.05rem; font-weight: 600; }
.album__meta { color: var(--ink-faint); font-size: .88rem; }

/* ---------- passage index ----------------------------------------------- */

/* The box stays with the reader down the whole index: fifty-odd passages is
   fourteen phone screens, and the way back to it should not be a long scroll. */
.filter {
  position: sticky; top: 0; z-index: 5; background: var(--bg);
  margin: 1.5rem 0 .5rem; padding: .6rem 0;
}
.filter label { display: block; font-size: .9rem; color: var(--ink-soft); margin-bottom: .35rem; }
.filter input {
  width: min(24rem, 100%); min-height: 2.75rem; padding: .6rem .8rem; font: inherit; font-size: 1rem;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--rule); border-radius: var(--radius);
}
.filter__count { margin-top: .5rem; font-size: .88rem; color: var(--ink-faint); }

.book { margin-top: 2.5rem; }
.book__name {
  font-family: var(--serif); font-size: 1.35rem; margin: 0 0 .25rem;
  padding-bottom: .4rem; border-bottom: 2px solid var(--accent-soft);
}

.songs { list-style: none; margin: 0; padding: 0; }
.song {
  display: grid; gap: .3rem 1rem; padding: .9rem 0;
  border-bottom: 1px solid var(--rule);
  grid-template-columns: 9rem 1fr auto;
  align-items: baseline;
}
.song__ref {
  font-variant-numeric: tabular-nums; font-weight: 600;
  color: var(--ink); white-space: nowrap;
}
.song__name { color: var(--ink-soft); }
.song__name strong { color: var(--ink); font-weight: 600; }
.song__links { display: flex; gap: .9rem; font-size: .9rem; white-space: nowrap; }
.song__meta { grid-column: 2 / -1; font-size: .85rem; color: var(--ink-faint); }

.stream::after { content: "\2197"; font-size: .85em; margin-left: .3em; }

/* On a phone the row's links are buttons a thumb can find: the same three
   words, each a full 44px tall and far enough apart not to be mistaken. */
@media (max-width: 40rem) {
  .filter input { width: 100%; }
  .song { grid-template-columns: 1fr; }
  .song__meta, .song__links { grid-column: 1; }
  .song__links { flex-wrap: wrap; gap: .5rem; margin: .3rem 0 .15rem; }
  .song__links a {
    display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .9rem;
    border: 1px solid var(--rule); border-radius: var(--radius);
    background: var(--surface); font-weight: 600; text-decoration: none;
  }
  .song__links a.stream { border-color: var(--accent); }
}

/* The legend for the translation labels, folded away until asked for. */
.legend { padding-block: .3rem; margin: 1rem 0 0; }
.legend summary {
  display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .5rem;
  min-height: 2.75rem; cursor: pointer; list-style: none;
}
.legend summary::-webkit-details-marker { display: none; }
.legend summary::after { content: "\25B8"; color: var(--accent); margin-left: auto; }
.legend[open] summary::after { content: "\25BE"; }
.legend[open] summary { margin-bottom: .5rem; }
.legend[open] { padding-bottom: 1.1rem; }

/* ---------- arrangements ------------------------------------------------- */
/* Psalm 32 is one passage in two dozen styles. Listed flat they would bury the
   index, so they sit behind a disclosure on the row itself — visible the moment
   someone has found the passage, invisible until then. */

.takes { display: inline; margin-left: .4rem; }
.takes summary {
  display: inline; cursor: pointer; color: var(--accent);
  font-size: .85rem; list-style: none;
}
.takes summary::-webkit-details-marker { display: none; }
.takes summary::before { content: "· "; color: var(--ink-faint); }
.takes summary::after { content: " ▸"; font-size: .95em; opacity: .8; }
.takes[open] summary::after { content: " ▾"; }
.takes summary:hover { text-decoration: underline; }

.takes__list {
  display: flex; flex-wrap: wrap; gap: .3rem .4rem;
  list-style: none; margin: .5rem 0 .25rem; padding: 0; max-width: none;
}
.takes__list li {
  max-width: none; font-size: .8rem; color: var(--ink-soft);
  background: var(--surface-alt); border: 1px solid var(--rule);
  border-radius: 999px; padding: .1rem .55rem;
}

/* ---------- translation badges ------------------------------------------ */

.tag {
  display: inline-block; padding: .1rem .5rem; border-radius: 999px;
  font-size: .76rem; font-weight: 600; letter-spacing: .02em;
  border: 1px solid transparent; white-space: nowrap;
}
.tag--esv { background: var(--esv-bg); color: var(--esv-ink); border-color: currentColor; }
.tag--other { background: var(--surface-alt); color: var(--ink-soft); border-color: var(--rule); }
.tag--none { background: transparent; color: var(--ink-faint); border-color: var(--rule); }
/* On the site ahead of release, and recently: the new material a returning
   visitor came back for. Accent rather than the ESV green, so it never reads
   as a claim about the text. */
.tag--new { background: var(--accent-soft); color: var(--accent); border-color: currentColor; margin-left: .3rem; }

/* ---------- callout ----------------------------------------------------- */

.note {
  background: var(--surface-alt); border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius); padding: 1.1rem 1.25rem; margin: 1.75rem 0;
}
.note > :last-child { margin-bottom: 0; }
.note h3 { margin-top: 0; }

.notice {
  font-family: var(--serif); font-size: .95rem; line-height: 1.7;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 1.25rem; color: var(--ink-soft);
}
.notice p { max-width: none; }

/* ---------- misc -------------------------------------------------------- */

.muted { color: var(--ink-soft); }
.small { font-size: .9rem; }
[hidden] { display: none !important; }

/* ---------- player ------------------------------------------------------- */
/* One <audio> for the whole page, in a bar pinned along the bottom; play
   controls are anchors that player.js redirects into it. The bar only exists
   after the first play, so pages without audio never show it. */

a.play {
  color: var(--accent); font-weight: 600; text-decoration: none;
  font-variant-emoji: text;
}
a.play:hover { text-decoration: underline; }

.take--audio {
  display: inline-flex; align-items: center; gap: .5rem;
}
.take--audio:has(.playing) { border-color: var(--accent); }
.take__time { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.take__dl { font-weight: 600; }

.player {
  position: fixed; inset: auto 0 0 0; z-index: 50;
  background: var(--surface); border-top: 1px solid var(--rule);
  box-shadow: 0 -6px 24px rgb(0 0 0 / .08);
  padding: .5rem 0 calc(.5rem + env(safe-area-inset-bottom, 0px));
}
.player__inner { display: flex; align-items: center; gap: 1rem; }
.player__title {
  flex: 0 0 auto; max-width: 45%;
  font-size: .9rem; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.player audio { flex: 1 1 auto; min-width: 0; width: 100%; height: 40px; }
body.has-player { padding-bottom: 5.5rem; }

@media (max-width: 40rem) {
  .player__inner { flex-direction: column; align-items: stretch; gap: .35rem; }
  .player__title { min-width: 0; max-width: none; }
  body.has-player { padding-bottom: 7.5rem; }

  /* Two dozen arrangements as a list rather than a cloud of chips: one to a
     line, the play control a full square at the left, the download at the
     right, nothing close enough to its neighbour to be hit by mistake. */
  .takes { display: block; margin: 0; }
  .takes summary { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: .9rem; }
  .takes summary::before { content: none; }
  .takes__list { flex-direction: column; flex-wrap: nowrap; gap: .4rem; margin-top: .1rem; }
  .takes__list li { font-size: .9rem; border-radius: var(--radius); padding: .6rem .8rem; }
  .takes__list li.take--audio { display: flex; padding: 0; gap: 0; }
  .take--audio .play {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 2.75rem; min-height: 2.75rem;
  }
  .take__style { flex: 1 1 auto; min-width: 0; }
  .take--audio .tag--new { margin-right: .5rem; }
  .take__time { margin-left: .5rem; }
  .take__dl { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .9rem; }

  /* Navigation and the lone links elsewhere, given the same room. */
  .site-header__inner { gap: .1rem 1rem; padding: .7rem 0 .35rem; }
  .nav a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .footer-nav { gap: 0; }
  .footer-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .album__zip { display: inline-flex; align-items: center; min-height: 2.75rem; }
}

.album__zip { font-size: .85rem; }

/* ---------- contact form -------------------------------------------------- */

.form { max-width: var(--measure); }
.field { margin: 1.15rem 0; }
.field label { display: block; font-weight: 600; margin-bottom: .35rem; }
.field input, .field textarea {
  width: 100%; padding: .55rem .7rem; font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--rule); border-radius: 8px;
}
.field input:focus, .field textarea:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.field__hint { font-size: .85rem; color: var(--ink-faint); margin: .3rem 0 0; }

/* Honeypot: parked far off-canvas rather than display:none, which some bots
   check for. Real people never see it. */
.hp { position: absolute; left: -9999px; top: auto; }

.notice--error { border-color: #b3502e; }