/* ============================================================
   NORTHERN LIGHTS - inner pages (/music, /shows and their children)
   Built by scripts/pages.mjs. Phone first; uses the tokens in styles.css.
   ============================================================ */
body.pg{background:var(--bg)}
.pgnav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:14px;padding:12px 16px;
  background:rgba(7,7,8,.92);border-bottom:1px solid var(--line)}
.pgnav__brand{display:flex;align-items:center;gap:10px;margin-right:auto;font-family:var(--font-cond);font-weight:600;letter-spacing:.22em;font-size:12px;color:var(--white)}
.pgnav__brand img{width:28px;height:28px;filter:invert(1)}
.pgnav__links{display:flex;gap:16px}
.pgnav__link{font-family:var(--font-cond);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:8px 0}
.pgnav__link.is-on,.pgnav__link:hover{color:var(--white)}
@media (max-width:420px){.pgnav__brand span{display:none}}

.pgmain{max-width:880px;margin:0 auto;padding:18px 16px 40px}
.pgcrumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--muted);margin-bottom:22px}
.pgcrumbs a{color:var(--muted)}
.pgcrumbs a:hover{color:var(--white)}
.pgcrumbs [aria-current]{color:var(--white)}

.pghead{margin-bottom:24px}
.pgh1{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:clamp(40px,10vw,76px);line-height:.95;margin:8px 0 12px}
.pgh2{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:clamp(26px,6vw,36px);line-height:1;margin:40px 0 16px}
.pgsub,.pgbody{color:var(--muted);font-size:16px;line-height:1.6;max-width:62ch}
.pgsub a,.pgbody a,.song__by a{color:var(--white);border-bottom:1px solid var(--green)}
.pgbody{margin-top:14px}

.pgfacts{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;margin:22px 0}
.pgfacts div{background:var(--panel);padding:14px 16px}
.pgfacts dt{font-family:var(--font-cond);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--green);margin-bottom:4px}
.pgfacts dd{font-family:var(--font-cond);font-size:16px}
@media (min-width:700px){.pgfacts{grid-template-columns:repeat(4,1fr)}}

.pgnote{margin-top:16px;padding:14px 16px;border:1px dashed rgba(255,255,255,.18);border-radius:var(--r-md);color:var(--muted);font-size:15px}
.pgnote b{color:var(--white)}
/* quick answers (Q&A) on generated pages */
.pgqa{margin-top:36px}
.pgqa .faq__list{margin-top:14px}
/* a show page with no photos yet: the venue art, captioned */
.pgvenue{margin:6px 0 10px}
.pgvenue img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-md)}
.pgvenue figcaption{margin-top:10px;color:var(--muted);font-size:14.5px;line-height:1.5}
.pgvenue figcaption a{color:var(--white);border-bottom:1px solid var(--green)}
.pgcta{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 6px}

/* song */
.song__head{display:grid;gap:18px}
.song__cover{width:100%;max-width:420px;height:auto;aspect-ratio:1;border-radius:var(--r-md);background:#111}
.song__title{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:clamp(44px,12vw,84px);line-height:.92;margin:6px 0 8px}
.song__by{color:var(--muted);font-size:15px}
.song__listen{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.song__about{margin-top:22px;font-size:17px;line-height:1.6;color:rgba(244,244,241,.88);max-width:62ch}
@media (min-width:720px){.song__head{grid-template-columns:300px 1fr;align-items:end}}
.song__video{position:relative;display:block;border-radius:var(--r-md);overflow:hidden;aspect-ratio:16/9;background:#111;margin-top:8px}
.song__video img{width:100%;height:100%;object-fit:cover;opacity:.8}
.song__play{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;background:var(--green)}
.song__play::after{content:"";position:absolute;left:27px;top:21px;border-left:20px solid #06140a;border-top:13px solid transparent;border-bottom:13px solid transparent}
.song__vlabel{position:absolute;left:14px;bottom:12px;font-family:var(--font-cond);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--white)}
.lyrics__body p{font-size:17px;line-height:1.7;color:rgba(244,244,241,.9);margin:0 0 18px}
.lyrics__credit{font-size:13px;color:var(--muted-2,#6b6b70);margin-top:8px}

.songlist{display:grid;gap:10px;list-style:none;padding:0}
.songrow{display:grid;grid-template-columns:64px 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;
  padding:10px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel)}
.songrow img{grid-row:1/3;width:64px;height:64px;border-radius:10px}
.songrow__t{font-family:var(--font-cond);font-weight:500;font-size:18px;color:var(--white);align-self:end}
.songrow__m{font-size:13px;color:var(--muted);align-self:start}
.songrow:hover{border-color:rgba(52,226,74,.5)}
.songlist--big .songrow{grid-template-columns:88px 1fr}
.songlist--big .songrow img{width:88px;height:88px}

/* shows */
.showlist{list-style:none;padding:0;border-top:1px solid var(--line)}
.showrow{display:grid;grid-template-columns:96px 1fr auto;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.showrow--plain{grid-template-columns:1fr}
.showrow__d{font-family:var(--font-cond);font-size:14px;letter-spacing:.04em;color:var(--green)}
.showrow__v{font-family:var(--font-cond);font-size:17px;color:var(--white)}
.showrow__v a{color:var(--white);border-bottom:1px solid var(--green)}
.showrow__v small{display:block;font-family:var(--font-body,Inter),sans-serif;font-size:13px;color:var(--muted);margin-top:2px}
.showrow__t{font-family:var(--font-cond);font-size:13px;letter-spacing:.12em;text-transform:uppercase;padding:9px 14px;border-radius:100px;background:var(--green);color:#06140a;white-space:nowrap}
.showrow__t--ghost{background:none;border:1px solid rgba(255,255,255,.2);color:var(--white)}

.pgphotos{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.pgphoto{display:block;border-radius:10px;overflow:hidden;background:#111;aspect-ratio:16/9}
.pgphoto img{width:100%;height:100%;object-fit:cover}
.pgphoto--tall{aspect-ratio:3/4}
@media (min-width:700px){.pgphotos{grid-template-columns:repeat(3,1fr)}.pgphotos--fans{grid-template-columns:repeat(4,1fr)}}

.pgpager{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:36px}
.pgpager a{display:block;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);font-family:var(--font-cond);font-size:16px;color:var(--white)}
.pgpager a.r{text-align:right}
.pgpager small{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--green);margin-bottom:4px}

.pgjoin{margin-top:48px;padding:26px 20px;border:1px solid var(--line);border-radius:var(--r-lg,22px);background:var(--panel);text-align:center}
.pgjoin .kicker{color:var(--green)}
.pgjoin__title{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:clamp(34px,9vw,52px);line-height:1;margin:6px 0 8px}
.pgjoin__sub{color:var(--muted);margin:0 auto 18px;max-width:30em}
.pgjoin .joinpair{justify-content:center}

.pgfoot{border-top:1px solid var(--line);padding:24px 16px 40px;text-align:center;color:var(--muted);font-size:13px}
.pgfoot__links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin-bottom:12px}
.pgfoot__links a{font-family:var(--font-cond);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--white)}
.pgfoot a{color:inherit}

/* /shows: the banner to the TAHOE tour recap */
.pgtour{position:relative;display:grid;gap:4px;margin:6px 0 30px;padding:22px 20px;border-radius:var(--r-lg);overflow:hidden;isolation:isolate;
  border:1px solid rgba(52,226,74,.35);background:linear-gradient(90deg,rgba(7,7,8,.95) 35%,rgba(7,7,8,.4)),url(/assets/wall/stpaul-03-s.webp) center/cover}
.pgtour:hover{border-color:var(--green)}
.pgtour__k{font-family:var(--font-cond);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--green)}
.pgtour__t{font-family:var(--font-display);font-size:clamp(28px,6vw,40px);line-height:1;text-transform:uppercase;color:var(--white)}
.pgtour__s{font-size:15px;color:var(--muted)}