:root{
  --ink:#0a0908; --panel:#12100d; --cream:#eee4cf; --tan:#c9a566;
  --muted:#a3987f; --line:rgba(201,165,102,.35);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--cream);
     font:18px/1.7 Georgia,'Times New Roman',serif;-webkit-font-smoothing:antialiased}
a{color:var(--tan);text-decoration:none}
a:hover{color:var(--cream)}
img{max-width:100%;display:block}
.wrap{max-width:1020px;margin:0 auto;padding:0 24px}

nav{display:flex;align-items:center;gap:22px;padding:14px 24px;
    background:rgba(10,9,8,.92);position:sticky;top:0;z-index:9;
    border-bottom:1px solid rgba(201,165,102,.18)}
nav img{width:38px;height:38px;border-radius:50%}
nav .name{font-weight:bold;letter-spacing:.12em;font-size:15px;color:var(--cream);
          font-family:Georgia,serif}
nav .links{margin-left:auto;display:flex;gap:20px;font-size:14px;letter-spacing:.14em}
nav .links a{color:var(--muted);text-transform:uppercase}
nav .links a:hover{color:var(--tan)}

.kicker{color:var(--tan);font-size:13px;letter-spacing:.3em;text-transform:uppercase;
        font-family:Arial,helvetica,sans-serif}
.rule{width:88px;height:3px;background:var(--tan);transform:skewX(-18deg);margin:16px 0}

.song-head{padding:58px 0 8px;
  background:linear-gradient(180deg,rgba(201,165,102,.07),rgba(10,9,8,0))}
.song-head h1{font-size:clamp(34px,5vw,52px);letter-spacing:.03em;margin-top:10px}
.song-head .emotion{font-style:italic;color:var(--muted);font-size:20px;
  margin-bottom:26px}

.song-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;padding:34px 24px 70px}
h2{font-family:Arial,helvetica,sans-serif;font-weight:900;letter-spacing:.2em;
   text-transform:uppercase;font-size:19px;color:var(--cream);margin-bottom:18px}

.stanza{margin-bottom:22px;font-size:17.5px;line-height:1.75}
.tracknote{margin-top:26px;color:var(--muted);font-style:italic;font-size:15.5px;
  border-top:1px dotted var(--line);padding-top:14px}

.scripture-col .lede{color:var(--muted);font-style:italic;font-size:15.5px;
  margin:-8px 0 20px}
.verse{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:20px 22px;margin-bottom:16px}
.verse p{font-size:16.5px;line-height:1.7}
.verse cite{display:block;margin-top:10px;font-style:normal;
  font-family:Arial,helvetica,sans-serif;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase}
.verse cite a{color:var(--tan)}

.story{margin-top:44px}
.story-title{font-size:20px;font-weight:bold;letter-spacing:.02em}
.story-ref{margin:6px 0 12px;font-family:Arial,helvetica,sans-serif;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.story p{font-size:16.5px}

.listen{margin-top:40px}
.listen iframe{margin-bottom:12px}
.listen p{margin-top:6px}
.reprise-label{color:var(--muted);font-style:italic;font-size:14.5px;margin:2px 0 8px}
.btn{display:inline-block;border:1.5px solid var(--tan);color:var(--tan);
     padding:11px 26px;border-radius:999px;font-size:14px;letter-spacing:.16em;
     text-transform:uppercase;font-family:Arial,helvetica,sans-serif;font-weight:bold;
     transition:background .2s,color .2s;margin:6px 6px 6px 0}
.btn:hover{background:var(--tan);color:var(--ink)}
.btn.solid{background:var(--tan);color:var(--ink)}
.btn.solid:hover{background:var(--cream);border-color:var(--cream)}

.song-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:16px;padding:26px 0 70px}
.song-card{display:block;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:20px 22px;transition:border-color .2s,transform .15s}
.song-card:hover{border-color:var(--tan);transform:translateY(-2px)}
.song-card .num{font-family:Arial,helvetica,sans-serif;font-size:12px;
  letter-spacing:.2em;color:var(--tan)}
.song-card .t{display:block;color:var(--cream);font-size:21px;font-weight:bold;
  margin:4px 0 6px}
.song-card .e{display:block;color:var(--muted);font-style:italic;font-size:15px}

.prevnext{display:flex;justify-content:space-between;align-items:center;
  border-top:1px solid rgba(201,165,102,.18);padding:26px 24px 8px;gap:16px}
.prevnext a{font-family:Arial,helvetica,sans-serif;font-size:13.5px;
  letter-spacing:.12em;text-transform:uppercase}
.prevnext .side{flex:1}
.prevnext .side:last-child{text-align:right}
.prevnext .mid{color:var(--muted)}

footer{padding:34px 24px;text-align:center;color:var(--muted);
  font-size:13.5px;letter-spacing:.06em}
footer .fname{color:var(--cream);letter-spacing:.18em;
  font-family:Arial,helvetica,sans-serif;font-weight:bold;font-size:12.5px;
  text-transform:uppercase}
footer .scripture-credit{margin-top:8px;font-size:12px}

@media (max-width:760px){
  .song-grid{grid-template-columns:1fr;gap:34px;padding-top:20px}
  nav .links{gap:12px;font-size:12.5px}
}