/* ============================================
   The Invisible Llama - main stylesheet
   punk zine meets 2003 fan site
   ============================================ */


body {
  margin: 0;
  padding: 20px 10px;
  background-color: #0b0b0b;
  /* photocopy-grain checker, no image needed */
  background-image:
    repeating-linear-gradient(45deg, #151515 0 2px, transparent 2px 6px),
    repeating-linear-gradient(-45deg, #121212 0 1px, transparent 1px 7px);
  color: #e8dcc0;
  font-family: Verdana, Tahoma, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.5;
}

a { color: #ff3b30; font-weight: bold; }
a:visited { color: #c9a227; }
a:hover { color: #000; background: #ff3b30; text-decoration: none; }

/* ---------- page shell ---------- */
#wrap {
  max-width: 780px;
  margin: 0 auto;
  background: #1a1a1a;
  border: 3px double #e8dcc0;
  box-shadow: 8px 8px 0 #7a0000;
}

/* ---------- header ---------- */
#header {
  background: #b30000;
  background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 1px, transparent 1px 3px);
  border-bottom: 3px solid #000;
  padding: 10px 20px 8px;
  text-align: center;
}
#header h1 {
  margin: 0;
  font-family: 'Permanent Marker', 'Comic Sans MS', cursive;
  font-size: 36px;
  font-weight: normal;
  color: #f4ecd8;
  text-shadow: 3px 3px 0 #000;
  transform: rotate(-1.5deg);
  letter-spacing: 1px;
}
#header .tagline {
  margin-top: 4px;
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 13px;
  color: #000;
  background: #f4ecd8;
  display: inline-block;
  padding: 2px 10px;
  transform: rotate(1deg);
}

/* ---------- scrolling news ticker ---------- */
#ticker {
  background: #000;
  color: #ffd400;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  font-size: 12px;
  padding: 3px 0;
  border-bottom: 1px solid #444;
}

/* ---------- two-column layout ---------- */
#columns { display: flex; }
#sidebar {
  width: 196px;
  flex-shrink: 0;
  background: #111;
  border-right: 2px dashed #555;
  padding: 12px 10px;
}
#content {
  flex: 1;
  padding: 14px 18px;
  min-width: 0;
}

/* ---------- beveled nav buttons ---------- */
.nav a {
  display: block;
  margin-bottom: 5px;
  padding: 4px 8px;
  background: #c0c0c0;
  color: #000;
  font-size: 11px;
  text-decoration: none;
  border: 2px outset #eee;
}
.nav a:before { content: "» "; color: #b30000; }
.nav a:hover { background: #ff3b30; color: #fff; border-style: inset; }
.nav a.current { background: #f4ecd8; border-style: inset; }

.side-box {
  margin-top: 14px;
  border: 1px solid #555;
  background: #1c1c1c;
  font-size: 11px;
}
.side-box h3 {
  margin: 0;
  padding: 2px 6px;
  background: #333;
  color: #ffd400;
  font-size: 11px;
  text-transform: uppercase;
}
.side-box .inner { padding: 6px; }

/* ---------- hit counter ---------- */
.counter {
  display: inline-block;
  font-family: 'Courier New', monospace;
  font-size: 15px;
  font-weight: bold;
  color: #39ff14;
  background: #000;
  border: 2px inset #666;
  padding: 1px 4px;
  letter-spacing: 3px;
}

/* ---------- content boxes ---------- */
h2 {
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 20px;
  font-weight: normal;
  color: #000;
  background: #f4ecd8;
  display: inline-block;
  padding: 2px 10px;
  margin: 0 0 10px;
  transform: rotate(-0.8deg);
  box-shadow: 3px 3px 0 #b30000;
}

.box {
  border: 1px solid #444;
  background: #222;
  padding: 10px 12px;
  margin-bottom: 18px;
}

.welcome {
  border: 2px dashed #b30000;
  background: #1f1414;
}

.post { border-bottom: 1px dotted #555; padding: 8px 0; }
.post:last-child { border-bottom: 0; }
.post .date {
  font-family: 'Courier New', monospace;
  color: #ffd400;
  font-size: 11px;
}
.post h4 { margin: 2px 0 4px; color: #f4ecd8; font-size: 13px; }

.new {
  background: #ff3b30;
  color: #fff;
  font-size: 9px;
  font-weight: bold;
  padding: 0 3px;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { visibility: hidden; } }

/* ---------- album grid ---------- */
.albums { display: flex; flex-wrap: wrap; gap: 8px; }
.album {
  width: 100px;
  font-size: 10px;
  text-align: center;
  color: #bbb;
}
.album .cover {
  width: 96px;
  height: 96px;
  border: 2px solid #e8dcc0;
  background: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Special Elite', monospace;
  font-size: 11px;
  color: #e8dcc0;
  padding: 4px;
  box-sizing: border-box;
}

/* ---------- under construction ---------- */
.construction {
  text-align: center;
  padding: 30px 10px;
  border: 4px solid;
  border-image: repeating-linear-gradient(45deg, #ffd400 0 12px, #000 12px 24px) 4;
  background: #1a1a1a;
}
.construction .big {
  font-family: 'Permanent Marker', cursive;
  font-size: 26px;
  color: #ffd400;
}

/* ---------- 88x31 style buttons ---------- */
.badges { text-align: center; padding: 10px; border-top: 2px dashed #555; }
.badge {
  display: inline-block;
  width: 88px;
  height: 31px;
  line-height: 31px;
  margin: 2px;
  font-size: 9px;
  font-weight: bold;
  text-transform: uppercase;
  border: 1px solid #000;
  outline: 1px solid #777;
  vertical-align: middle;
  overflow: hidden;
}
.b1 { background: linear-gradient(#b30000, #500); color: #fff; }
.b2 { background: linear-gradient(#f4ecd8, #aa9); color: #000; }
.b3 { background: #000; color: #39ff14; font-family: 'Courier New', monospace; }
.b4 { background: linear-gradient(90deg, #235, #58a); color: #ffd400; }

/* ---------- footer ---------- */
#footer {
  text-align: center;
  font-size: 10px;
  color: #888;
  padding: 10px;
  background: #0e0e0e;
  border-top: 3px double #e8dcc0;
}
#footer .disclaimer { color: #bbb; }

/* ---------- phones: stack the columns ---------- */
@media (max-width: 640px) {
  body { padding: 8px 0; }
  #wrap { box-shadow: none; }
  #header h1 { font-size: 30px; }
  #columns { flex-direction: column; }
  #sidebar { width: auto; border-right: 0; border-bottom: 2px dashed #555; }
  .nav { display: flex; flex-wrap: wrap; gap: 4px; }
  .nav a { margin: 0; }
  .side-box { display: none; }
}

/* ---------- archive pages ---------- */
.logo-link, .logo-link:hover { text-decoration: none; background: none; }
h2 small, h3 small { font-size: 11px; font-family: Verdana, sans-serif; color: #666; }
h3 { color: #ffd400; font-size: 13px; margin: 14px 0 6px; border-bottom: 1px dotted #555; }
h3.song { margin-top: 0; }
.jump { font-size: 11px; line-height: 1.9; }
.src, .meta { font-size: 10px; color: #999; font-weight: normal; }
.desc { color: #ccc; }
.filter input {
  font-family: 'Courier New', monospace; font-size: 12px; width: 60%;
  background: #000; color: #39ff14; border: 2px inset #666; padding: 2px 4px;
}

table.data { width: 100%; border-collapse: collapse; font-size: 11px; }
table.data th { background: #333; color: #ffd400; text-align: left; padding: 3px 4px; }
table.data td { border-bottom: 1px dotted #444; padding: 3px 4px; vertical-align: top; }
table.data tr:hover td { background: #2c2020; }
table.data td.num { color: #ffd400; font-family: 'Courier New', monospace; }
.nowrap { white-space: nowrap; }
tr.milestone td { background: #4a0000; color: #fff; font-weight: bold; }
.milestone-key { background: #4a0000; color: #fff; padding: 0 4px; }
details summary { cursor: pointer; color: #ff3b30; font-weight: bold; }
details ol { margin: 4px 0 4px 18px; padding: 0; color: #e8dcc0; font-weight: normal; }

table.facts th { text-align: left; color: #ffd400; padding-right: 10px; vertical-align: top; white-space: nowrap; }

ul.plain, ul.disco, ul.timeline, ul.notes { list-style: none; margin: 0; padding: 0; }
ul.plain li, ul.disco li, ul.timeline li { padding: 5px 0; border-bottom: 1px dotted #444; }
ul.notes li { padding: 5px 0 5px 10px; border-left: 3px solid #b30000; margin-bottom: 6px; }
.yr {
  font-family: 'Courier New', monospace; font-size: 11px; color: #000; background: #ffd400;
  padding: 0 3px; margin-right: 4px;
}
.write-up { font-size: 11px; color: #bbb; margin: 3px 0 0 44px; }
ol.top { columns: 2; font-size: 11px; margin: 0; padding-left: 24px; }

.vids { display: flex; flex-wrap: wrap; gap: 8px; }
.vid {
  width: 160px; font-size: 10px; font-weight: normal; color: #e8dcc0;
  text-decoration: none; background: #111; border: 1px solid #444; padding: 3px;
}
.vid:hover { background: #3a0000; color: #fff; }
.vid img { width: 100%; display: block; border: 1px solid #000; }
.vt { display: block; margin-top: 3px; }
.vd { display: block; color: #888; font-family: 'Courier New', monospace; }

@media (max-width: 640px) {
  ol.top { columns: 1; }
  .vid { width: calc(50% - 4px); box-sizing: border-box; }
  .write-up { margin-left: 0; }
  .filter input { width: 90%; }
}

/* ---------- tabs (site.js turns .auto-tabs into these) ---------- */
.tabbar { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.tabbar button {
  font-family: Verdana, Tahoma, sans-serif; font-size: 11px; font-weight: bold;
  background: #c0c0c0; color: #000; border: 2px outset #eee; padding: 4px 10px; cursor: pointer;
}
.tabbar button:hover { background: #ff3b30; color: #fff; }
.tabbar button.active { background: #f4ecd8; border-style: inset; }
.next-tab { text-align: right; margin: 12px 0 0; font-size: 11px; }

/* ---------- folding sections ---------- */
details.fold { border-top: 1px dotted #555; }
details.fold > summary {
  cursor: pointer; color: #ffd400; font-weight: bold; font-size: 13px; padding: 6px 0; list-style: none;
}
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: "\25B6  "; color: #b30000; font-size: 10px; }
details.fold[open] > summary::before { content: "\25BC  "; }
details.fold > summary small { color: #888; font-weight: normal; }

/* ---------- song notes ---------- */
details.songnote { border-bottom: 1px dotted #444; padding: 4px 0; }
details.songnote > summary { cursor: pointer; font-size: 12px; }
details.songnote > summary b { color: #f4ecd8; }
details.songnote[open] > summary b { color: #ffd400; }
details.songnote ul.notes { margin: 8px 0 6px; }

/* ---------- gig archive ---------- */
.yeargrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 4px; margin: 10px 0; }
.yeargrid a {
  display: block; text-align: center; text-decoration: none; font-size: 12px;
  background: #c0c0c0; color: #000; border: 2px outset #eee; padding: 3px 0;
}
.yeargrid a small { display: block; font-size: 9px; font-weight: normal; color: #444; }
.yeargrid a:hover, .yeargrid a.current { background: #f4ecd8; border-style: inset; }
.pager { display: flex; justify-content: space-between; font-size: 12px; margin: 12px 0 0; }
tr:target td { background: #7a5c00 !important; color: #fff; }

@media (max-width: 640px) {
  #header h1 { font-size: 26px; }
  .tabbar button { flex: 1 1 auto; }
}

/* ---------- video vault ---------- */
.vfilters { background: #161616; border: 1px solid #444; padding: 8px 10px; margin-bottom: 10px; }
.vfilters .filter { margin: 0 0 6px; }
.vfilters .filter input { width: 100%; box-sizing: border-box; }
.vtypes { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.vtypes label {
  font-size: 11px; font-weight: bold; background: #c0c0c0; color: #000; border: 2px outset #eee;
  padding: 2px 6px; cursor: pointer; user-select: none;
}
.vtypes label small { font-weight: normal; color: #555; }
.vtypes label:has(input:checked) { background: #ff3b30; color: #fff; border-style: inset; }
.vtypes label:has(input:checked) small { color: #fdd; }
.vtypes input { display: none; }
.vselects { display: flex; flex-wrap: wrap; gap: 4px; }
.vselects select, .vselects button, .vpager button {
  font-family: Verdana, sans-serif; font-size: 11px; background: #000; color: #39ff14; border: 2px inset #666; padding: 2px 4px;
}
.vselects button, .vpager button { background: #c0c0c0; color: #000; border: 2px outset #eee; cursor: pointer; }
.vpager { text-align: center; font-size: 12px; }
.vpager button[disabled] { opacity: .4; cursor: default; }
.vid .thumb { position: relative; display: block; }
.vid .dur { position: absolute; right: 3px; bottom: 3px; background: rgba(0,0,0,.85); color: #fff; font-size: 10px; padding: 0 3px; }
.vtags { display: block; color: #ffd400; font-size: 9px; margin-top: 2px; }
.vplayer { position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 50; display: flex; align-items: center; justify-content: center; }
.vplayer[hidden] { display: none; }
.vplayer-box { width: min(900px, 94vw); background: #1a1a1a; border: 3px double #e8dcc0; padding: 8px; }
.vplayer-box button { float: right; margin-bottom: 6px; background: #c0c0c0; border: 2px outset #eee; font-size: 11px; cursor: pointer; }
.vplayer-frame { clear: both; position: relative; padding-top: 56.25%; }
.vplayer-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.credit { font-size: 9px; color: #666; text-align: right; margin: 4px 0 0; }
.srclink a { font-size: 10px; font-weight: normal; text-decoration: none; color: #777; }

/* ---------- scrapbook: taped-in photos, video tiles, fact boxes ---------- */
.snap {
  float: right; width: 230px; margin: 4px 0 12px 16px; padding: 8px 8px 6px; background: #f4ecd8;
  box-shadow: 3px 4px 0 rgba(0,0,0,.6); transform: rotate(1.5deg); position: relative; text-align: center;
}
.snap.left { float: left; margin: 4px 16px 12px 0; transform: rotate(-1.8deg); }
.snap::before {
  content: ""; position: absolute; top: -9px; left: 50%; width: 70px; height: 18px; margin-left: -35px;
  background: rgba(255, 244, 180, .75); transform: rotate(-3deg); box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.snap img { width: 100%; display: block; border: 1px solid #aaa; filter: saturate(.85) contrast(1.05); }
.snap figcaption { font-family: 'Permanent Marker', cursive; font-size: 13px; color: #222; margin-top: 6px; line-height: 1.2; }
.snap .credit-line { display: block; font-size: 8px; color: #777; margin-top: 3px; }
.snap .credit-line a { color: #777; font-weight: normal; }
.ytlite { margin: 12px 0; clear: both; max-width: 480px; }
.ytlite button { position: relative; display: block; width: 100%; padding: 0; border: 3px double #e8dcc0; background: #000; cursor: pointer; }
.ytlite img { width: 100%; display: block; opacity: .85; }
.ytlite .play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 28px; color: #fff;
  background: #b30000; border: 2px outset #ff6b60; padding: 4px 16px 4px 20px;
}
.ytlite button:hover .play { background: #ff3b30; }
.ytlite figcaption { font-size: 11px; color: #ccc; margin-top: 3px; font-style: italic; }
.ytframe { position: relative; padding-top: 56.25%; border: 3px double #e8dcc0; }
.ytframe iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.factbox { float: right; clear: right; width: 210px; margin: 0 0 12px 16px; background: #000; border: 2px inset #666; padding: 6px 8px; font-size: 11px; }
.factbox h4 { margin: 0 0 4px; color: #39ff14; font-family: 'Courier New', monospace; font-size: 12px; }
.factbox ul { margin: 0; padding-left: 14px; color: #ccc; }
.chapter-end { clear: both; }
.pullquote { font-family: 'Special Elite', monospace; font-size: 15px; color: #f4ecd8; border-left: 4px solid #b30000; padding: 4px 12px; margin: 12px 0; }
@media (max-width: 640px) {
  .snap, .snap.left, .factbox { float: none; width: auto; max-width: 280px; margin: 12px auto; }
}

/* ---------- timeline years ---------- */
.tl-year { display: flex; gap: 10px; border-top: 1px dotted #444; padding: 8px 0; }
.tl-marker {
  flex: 0 0 58px; height: 26px; line-height: 26px; text-align: center; font-family: 'Special Elite', monospace;
  font-size: 16px; color: #000; background: #ffd400; box-shadow: 2px 2px 0 #b30000; transform: rotate(-3deg);
}
.tl-body { flex: 1; min-width: 0; }
.tl-body ul.timeline li { border-bottom: 0; padding: 3px 0; }
.snap.mini { width: 150px; margin: 2px 0 6px 12px; }
.snap.mini figcaption { font-size: 11px; }
.tl-body .ytlite { max-width: 360px; margin: 6px 0 4px; }
.tl-body::after { content: ""; display: block; clear: both; }
@media (max-width: 640px) { .tl-year { flex-direction: column; } .tl-body .ytlite { float: none; } }

/* ---------- the story so far ---------- */
h3.yby {
  clear: both; margin: 22px 0 6px; padding: 3px 8px; background: #000; color: #39ff14; border: 2px inset #666;
  font-family: 'Courier New', monospace; font-size: 12px; letter-spacing: 1px;
}
.snap.inline { float: none; display: block; width: 210px; margin: 8px 0 10px 4px; transform: rotate(-1deg); }
.tl-body li .ytlite { margin: 6px 0 8px; max-width: 360px; }
.intermission {
  clear: both; margin: 26px auto 8px; max-width: 460px; text-align: center; background: #0b0b0b;
  border: 6px double #c9a227; padding: 10px 14px; box-shadow: 0 0 18px rgba(201,162,39,.35);
}
.int-lights {
  height: 10px; margin: 2px 0;
  background: radial-gradient(circle, #ffe680 0 3px, transparent 4px) 0 0 / 18px 10px repeat-x;
  animation: bulbs 1.2s steps(2) infinite;
}
@keyframes bulbs { 50% { background-position: 9px 0; } }
.int-title { font-family: 'Permanent Marker', cursive; font-size: 38px; color: #f4ecd8; letter-spacing: 3px; text-shadow: 3px 3px 0 #b30000; margin: 8px 0 4px; }
.int-sub { font-family: 'Special Elite', monospace; font-size: 13px; color: #ffd400; }
.int-quote { font-family: 'Special Elite', monospace; font-size: 14px; color: #e8dcc0; margin: 10px 0 4px; }
.int-note { font-size: 10px; color: #888; margin: 0 0 6px; }

/* ---------- setlist generator ---------- */
.sl-wrap { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.sl-form { flex: 1 1 220px; min-width: 220px; font-size: 11px; }
.sl-form label { display: block; margin-bottom: 6px; color: #ffd400; font-weight: bold; }
.sl-form label small { color: #999; font-weight: normal; }
.sl-form .sl-styles label { display: inline; color: #e8dcc0; margin-right: 8px; }
.sl-form input[type=text], .sl-form input[type=number], .sl-form input:not([type]), .sl-form select, .sl-form textarea {
  display: block; width: 100%; box-sizing: border-box; margin-top: 2px; font-family: 'Courier New', monospace; font-size: 12px;
  background: #000; color: #39ff14; border: 2px inset #666; padding: 2px 4px;
}
.sl-form #sl-add { display: inline-block; width: 65%; }
.sl-roll { display: flex; gap: 4px; margin: 4px 0 8px; }
.sl-roll select { width: auto; display: inline-block; }
.sl-form button { font-family: Verdana, sans-serif; font-size: 11px; background: #c0c0c0; color: #000; border: 2px outset #eee; padding: 3px 8px; cursor: pointer; }
.sl-form button:active { border-style: inset; }
.sl-paper-wrap { flex: 0 0 auto; margin: 0 auto; }
.sl-paper {
  width: 360px; min-height: 509px; box-sizing: border-box; padding: 34px 26px 24px; color: #1a1a1a;
  background: #fbfbf8 linear-gradient(135deg, rgba(0,0,0,.03), rgba(255,255,255,0) 40%, rgba(0,0,0,.035) 70%, rgba(255,255,255,0));
  box-shadow: 4px 6px 0 rgba(0,0,0,.55); transform: rotate(-1deg); font-family: Arial, Helvetica, sans-serif;
}
.sl-head { text-align: center; margin-bottom: 16px; font-weight: bold; text-transform: uppercase; line-height: 1.25; }
.sl-h1, .sl-h2, .sl-h3 { font-size: 7px; letter-spacing: .2px; white-space: nowrap; }
.sl-h3.big { font-size: 13px; margin-top: 1px; }
.style-2024 .sl-h1, .style-2024 .sl-h2 { font-size: 8px; font-weight: 900; }
.sl-list { font-weight: bold; line-height: 1.25; }
.style-2024 .sl-list { font-weight: 900; letter-spacing: -.3px; }
.sl-row { position: relative; padding-left: 4px; white-space: nowrap; }
.sl-row.rule { border-bottom: 1px solid #999; margin-bottom: 1px; }
.sl-note { text-transform: none; }
.sl-star { position: absolute; left: -14px; top: -2px; font-family: 'Permanent Marker', cursive; font-size: 1.3em; color: #111; }
/* printing: setlist.js copies the sheet into #print-sheet (straight under <body>) and scales it to fit one page */
#print-sheet { display: none; }
@media print {
  body > *:not(#print-sheet) { display: none !important; }
  html, body { background: #fff !important; padding: 0 !important; margin: 0 !important; height: auto !important; }
  #print-sheet { display: block; width: 7in; height: 8.6in; overflow: hidden; margin: 0 auto; break-inside: avoid; page-break-inside: avoid; break-after: avoid; page-break-after: avoid; }
  #print-sheet .sl-paper { box-shadow: none; background: #fff; }
}

/* ---------- midi jukebox ---------- */
.jukebox .inner { text-align: center; }
.jb-lcd { background: #0a1a0a; border: 2px inset #555; color: #39ff14; font-family: 'Courier New', monospace; font-size: 11px;
  height: 16px; overflow: hidden; white-space: nowrap; margin-bottom: 4px; text-align: left; padding: 0 3px; }
.jb-lcd .scroll, .jb-lcd span.scroll { display: inline-block; padding-left: 100%; animation: jbscroll 9s linear infinite; }
@keyframes jbscroll { to { transform: translateX(-100%); } }
.jukebox select { width: 100%; font-size: 10px; margin-bottom: 4px; background: #000; color: #39ff14; border: 2px inset #666; }
.jb-btns { display: flex; gap: 3px; justify-content: center; align-items: center; }
.jb-btns button { background: #c0c0c0; border: 2px outset #eee; font-size: 11px; width: 30px; cursor: pointer; }
.jb-btns button:active { border-style: inset; }
.jb-btns a { font-size: 10px; margin-left: 4px; }
.jb-note { font-size: 9px; color: #888; margin-top: 4px; line-height: 1.3; }

/* ---------- gig archive show panel ---------- */
tr.showrow { cursor: pointer; }
tr.showrow:hover td { background: #3a1010 !important; }
td.has { white-space: nowrap; color: #ffd400; font-size: 11px; }
.hidden-songs { display: none; }
.showpanel { position: fixed; inset: 0; background: rgba(0,0,0,.82); z-index: 60; display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 24px 10px; }
.showpanel[hidden] { display: none; }
.sp-box { width: min(760px, 96vw); background: #1a1a1a; border: 3px double #e8dcc0; box-shadow: 8px 8px 0 #7a0000; padding: 12px 16px; }
.sp-close { float: right; background: #c0c0c0; border: 2px outset #eee; font-size: 11px; cursor: pointer; }
.sp-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.sp-num { font-family: 'Special Elite', monospace; font-size: 26px; background: #ffd400; color: #000; padding: 2px 10px; box-shadow: 3px 3px 0 #b30000; transform: rotate(-2deg); }
.sp-cols { display: flex; gap: 18px; flex-wrap: wrap; }
.sp-set { flex: 1 1 260px; }
.sp-media { flex: 1 1 300px; }
.sp-box h3 { margin-top: 4px; }
.sp-songs { margin: 4px 0 6px 20px; padding: 0; font-family: Arial, Helvetica, sans-serif; font-weight: bold; text-transform: uppercase; font-size: 12px; line-height: 1.45; }
.sp-sub { margin: 6px 0 0; font-size: 11px; color: #ffd400; }
.sp-make { display: inline-block; background: #c0c0c0; color: #000; border: 2px outset #eee; padding: 3px 8px; font-size: 11px; text-decoration: none; }
.sp-make:hover { background: #ff3b30; color: #fff; }
.sp-nav { display: flex; justify-content: space-between; margin: 12px 0 0; font-size: 12px; border-top: 1px dotted #555; padding-top: 6px; }
.sp-media .ytlite { max-width: 100%; }
body.sp-open { overflow: hidden; }
.sl-pair { display: flex; gap: 4px; }
.sl-pair select:first-child { flex: 0 0 70px; }
.sl-rows { max-height: 360px; overflow-y: auto; border: 2px inset #555; background: #0b0b0b; padding: 3px; margin-bottom: 6px; }
.sl-row-edit { display: flex; align-items: center; gap: 3px; margin-bottom: 3px; }
.sl-row-edit .sl-pos { width: 18px; text-align: right; color: #888; font-size: 10px; }
.sl-form .sl-row-edit select { display: inline-block; margin: 0; font-size: 10px; padding: 1px; }
.sl-row-edit .r-song { flex: 1 1 auto; min-width: 0; width: auto; }
.sl-row-edit .r-note { flex: 0 0 76px; width: 76px; }
.sl-form .sl-row-edit label { display: inline; margin: 0; color: #ccc; font-size: 10px; white-space: nowrap; }
.sl-form .sl-row-edit button { padding: 0 3px; font-size: 9px; }

.sl-empty { font-size: 12px; color: #888; text-align: center; margin-top: 40px; font-weight: normal; }

/* ---------- photos ---------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 6px 0; }
.gthumb { display: block; background: #f4ecd8; padding: 4px 4px 10px; box-shadow: 2px 3px 0 rgba(0,0,0,.6); transform: rotate(-1deg); }
.gthumb:nth-child(even) { transform: rotate(1.2deg); }
.gthumb:hover { transform: rotate(0) scale(1.04); background: #fff; }
.gthumb img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border: 1px solid #aaa; }
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.88); z-index: 70; display: flex; align-items: center; justify-content: center; padding: 16px; }
.lightbox[hidden] { display: none; }
.lb-box { max-width: min(900px, 96vw); background: #f4ecd8; padding: 10px 10px 6px; box-shadow: 6px 8px 0 #7a0000; text-align: center; }
.lb-box img { max-width: 100%; max-height: 72vh; display: block; margin: 0 auto; border: 1px solid #999; }
.lb-box #lb-cap { font-family: 'Permanent Marker', cursive; color: #222; margin: 8px 0 2px; }
.lb-box .credit-line { color: #666; font-size: 10px; }
.lb-box .credit-line a { color: #666; }
.lb-close { float: right; margin-bottom: 6px; background: #c0c0c0; border: 2px outset #eee; font-size: 11px; cursor: pointer; }
.lb-nav button { background: #c0c0c0; border: 2px outset #eee; font-size: 11px; cursor: pointer; }
.sp-bill{font-size:11px;letter-spacing:1px;color:var(--muted,#888)}
.ggroup{margin:18px 0 2px;border-bottom:1px dashed var(--line,#555);padding-bottom:2px}

/* ---------- my frank stats ---------- */
.sp-was { font: inherit; font-size: 13px; cursor: pointer; background: #c0c0c0; color: #000; border: 2px outset #eee; padding: 3px 10px; }
.sp-was.on { background: #ffd400; border-style: inset; font-weight: bold; }
tr.showrow.was td:first-child::before { content: "\2713 "; color: #ffd400; font-weight: bold; }
.ms-login input { font: inherit; padding: 3px 5px; background: #f4ecd8; border: 2px inset #999; max-width: 100%; }
.ms-login button, #ms-add, #ms-share, #ms-save { font: inherit; cursor: pointer; background: #c0c0c0; color: #000; border: 2px outset #eee; padding: 3px 10px; }
.ms-list { padding-left: 22px; }
.ms-list li { margin: 3px 0; }
.ms-x { background: none; border: 0; color: #ff6b6b; cursor: pointer; font-size: 12px; }
.ms-bigs { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin: 8px 0 12px; }
.ms-big { background: #f4ecd8; color: #000; text-align: center; padding: 8px 4px; box-shadow: 3px 3px 0 #b30000; }
.ms-big:nth-child(odd) { transform: rotate(-0.8deg); }
.ms-big:nth-child(even) { transform: rotate(0.8deg); }
.ms-big b { display: block; font: bold 30px Arial, Helvetica, sans-serif; }
.ms-big span { font-family: 'Special Elite', 'Courier New', monospace; font-size: 12px; text-transform: uppercase; }
.ms-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
@media (max-width: 640px) { .ms-cols { grid-template-columns: 1fr; } }
.ms-tab { padding-left: 24px; margin: 4px 0 10px; }
.ms-tab li { margin: 2px 0; }
.ms-tab .ms-k { display: inline-block; min-width: 40%; }
.ms-bar { display: block; height: 4px; background: #b30000; margin: 1px 0 3px; }
#ms-card { width: 100%; max-width: 432px; height: auto; display: block; border: 1px solid #444; }
.sp-btn { font-size: 13px; text-decoration: none; background: #c0c0c0; color: #000 !important; border: 2px outset #eee; padding: 3px 10px; display: inline-block; }
.sp-btn:hover { border-style: inset; }
.ct-ok { color: #ffd400; font-weight: bold; }
#ct-form label { line-height: 1.8; }
.ms-cardbox { float: right; width: 300px; margin: 0 0 12px 16px; text-align: center; }
.ms-cardbox p { font-size: 12px; }
@media (max-width: 760px) { .ms-cardbox { float: none; width: auto; margin: 0 0 12px; } }
#ms-stats::after { content: ""; display: block; clear: both; }
details summary { overflow-wrap: anywhere; }
#sidebar .nav a { white-space: nowrap; }
.sn-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin: 6px 0 8px; }
.inline-list li { display: inline; margin-right: 10px; }
.tag { display: inline-block; font-size: 9px; text-transform: uppercase; background: #333; color: #ffd400; padding: 0 4px; margin-right: 4px; vertical-align: 1px; white-space: nowrap; }
.gs-filters select, #gs-song { font: inherit; font-size: 12px; background: #000; color: #f4ecd8; border: 2px inset #666; max-width: 100%; }
#gs-reset { font-size: 12px; cursor: pointer; background: #c0c0c0; border: 2px outset #eee; }
.gs-sec { margin-bottom: 8px; }
.gs-sec h3 { margin-bottom: 2px; }
.gs-songbox { border: 1px dashed #555; padding: 4px 10px; margin: 8px 0 14px; }
.gs-card h3 { margin: 4px 0; }
.gs-showlist { font-size: 12px; line-height: 1.7; }
.gs-years { border-collapse: collapse; width: 100%; font-size: 12px; }
.gs-years td, .gs-years th { padding: 1px 6px; text-align: left; }
.gs-years .gs-barcell { width: 40%; }


/* ==========================================================================
   THEME: red grunge x tattoo flash
   Bad Religion-style dark wall + red column, Foo Fighters / tattoo-flash banner, gold frames.
   Art assets: public/images/art (made by tools/make_art.py from CC0 textures).
   ========================================================================== */
:root {
  --wall: #0a0605; --oxblood: #5e0705; --red: #c8231b; --gold: #c9a05a; --gold-hi: #e8c97c; --cream: #efe2c4; --navy: #142235;
  --text: #e9e1d0; --muted: #a89c88;
  --display: 'Rye', Georgia, serif; --label: 'Oswald', 'Arial Narrow', Impact, sans-serif; --body: 'Arimo', Arial, sans-serif;
}
body {
  padding: 0; color: var(--text); font: 14px/1.6 var(--body);
  background: var(--wall) url(images/art/flyer-wall.jpg) center top / cover fixed;
}
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
               background: url(images/art/grunge-light.png); opacity: .22; }
a { color: #ff4a38; font-weight: bold; text-decoration: none; }
a:visited { color: #e0905a; }
a:hover { color: #fff; background: none; text-decoration: underline; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }

#wrap { position: relative; z-index: 1; max-width: 1140px; margin: 0 auto; background: none; border: 0; box-shadow: none; }

/* ---------- header: banner scroll over the red wall ---------- */
#header {
  position: relative; height: 250px; padding: 0; text-align: center; border: 0; overflow: hidden;
  background: linear-gradient(rgba(10,12,22,.45), rgba(10,12,22,.7)), #14161f url(images/art/flyer-strip.jpg) center 30% / cover;
  box-shadow: inset 0 -40px 60px rgba(0,0,0,.55), 0 4px 0 #000;
}
#header::before { content: ""; position: absolute; inset: 0; background: url(images/art/grunge.png); opacity: .7; }
#header::after {   /* faint sunburst behind the scroll */
  content: ""; position: absolute; left: 50%; top: 55%; width: 1400px; height: 1400px; margin: -700px 0 0 -700px; opacity: .13;
  background: repeating-conic-gradient(from 0deg, #000 0deg 6deg, transparent 6deg 12deg);
  -webkit-mask: radial-gradient(circle, #000 0, transparent 60%); mask: radial-gradient(circle, #000 0, transparent 60%);
}
#header > * { position: relative; z-index: 1; }
#header .logo-link { display: block; width: 820px; max-width: 94%; margin: 0 auto; padding-top: 14px; }
#header .logo-link:hover { background: none; text-decoration: none; }
.banner { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 0 rgba(0,0,0,.55)); }
.banner .tail { fill: #0c1726; stroke: var(--gold); stroke-width: 3; }
.banner .fold { fill: #04080e; }
.banner .band { fill: var(--navy); stroke: var(--gold); stroke-width: 4; }
.banner .pin { fill: none; stroke: var(--red); stroke-width: 2; }
.banner .name { font: 45px var(--display); fill: var(--cream); stroke: #05090f; stroke-width: 1.2; letter-spacing: 2px; }
.emblem { position: absolute !important; left: 50%; top: 150px; width: 92px; height: 92px; margin-left: -46px; border-radius: 50%;
          display: grid; place-items: center; background: var(--red); border: 4px solid var(--gold);
          box-shadow: 0 0 0 4px var(--navy), 0 8px 16px rgba(0,0,0,.6); }
.emblem:hover { background: #e0291f; }
.emblem svg { width: 56px; fill: none; stroke: var(--cream); stroke-width: 3.4; stroke-dasharray: 6 5; stroke-linecap: round; }
.emblem svg circle { fill: var(--cream); stroke: none; }
.swallow { position: absolute !important; top: 132px; width: 128px; fill: var(--navy); stroke: var(--cream); stroke-width: 2.2; }
.swallow .eye { fill: var(--cream); stroke: none; }
.swallow .wing { fill: none; stroke: var(--red); stroke-width: 3; }
.swallow.l { left: 7%; transform: rotate(-12deg); }
.swallow.r { right: 7%; transform: scaleX(-1) rotate(-12deg); }
.star { position: absolute !important; top: 172px; font-size: 26px; color: var(--gold); text-shadow: 0 2px 0 #000; }
.star.l { left: calc(50% - 120px); } .star.r { right: calc(50% - 120px); }
#header .tagline { position: absolute !important; left: 0; right: 0; bottom: 6px; margin: 0; padding: 0; background: none; transform: none;
                   font: 15px 'Special Elite', monospace; color: var(--cream); text-shadow: 0 1px 0 #000; letter-spacing: 1px; }

/* ticker: navy strip with gold stitching */
#ticker { margin: 0; transform: none; background: var(--navy); color: var(--gold-hi); border-top: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
          font: 700 13px var(--label); letter-spacing: 1.5px; text-transform: uppercase; padding: 3px 0; box-shadow: 0 3px 0 #000; }

/* ---------- columns: red nav column + content ---------- */
#columns { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 0; align-items: start; }
#sidebar {
  width: auto; padding: 22px 18px 30px; border: 0; min-height: 100%; position: relative; align-self: stretch;
  background: linear-gradient(rgba(20,24,44,.88), rgba(12,14,26,.92));
  border-right: 3px solid var(--gold); box-shadow: inset -12px 0 18px rgba(0,0,0,.45), 4px 0 0 #000;
}
#sidebar::before { content: ""; position: absolute; inset: 0; background: url(images/art/grunge.png); opacity: .55; pointer-events: none; }
#sidebar > * { position: relative; }
.nav { background: none; padding: 0; transform: none; box-shadow: none; text-align: center; }
.nav::before { content: none; }
.nav .nav-title { display: block; margin: 0 0 10px; border: 0; transform: none; color: var(--gold-hi); font: 700 13px var(--label);
                  letter-spacing: 3px; text-transform: uppercase; }
.nav a, #sidebar .nav a {
  display: block; margin: 0; padding: 3px 0; background: none; border: 0; transform: none !important;
  font: 21px/1.15 var(--display); color: var(--cream); text-transform: uppercase; letter-spacing: .5px; white-space: normal;
  text-shadow: 2px 2px 0 #000; overflow: visible;
}
.nav a + a { border-top: 1px dashed rgba(201,160,90,.35); }
.nav a:before { content: none; }
.nav a:hover { color: var(--gold-hi); background: none; text-decoration: none; }
.nav a.current { color: #000; background: var(--cream); text-shadow: none; box-shadow: 3px 3px 0 #000; }
.nav a.current::after { content: none; }

.side-box { margin-top: 24px; border: 1px solid var(--gold); background: rgba(0,0,0,.55); color: var(--text); transform: none;
            clip-path: none; box-shadow: 0 0 0 3px rgba(0,0,0,.6); }
.side-box h3 { margin: 0; padding: 5px 8px 3px; background: var(--navy); color: var(--gold-hi); border-bottom: 1px solid var(--gold);
               font: 700 13px var(--label); letter-spacing: 2px; text-transform: uppercase; text-align: center; }
.side-box .inner { padding: 8px 10px 10px; color: var(--text); font-size: 12px; }
.side-box a { color: #ff6a56; }
.side-box .counter { display: inline-block; margin: 2px 0 4px; font: 26px var(--display); letter-spacing: 3px; color: var(--gold-hi);
                     background: #000; padding: 2px 10px; border: 1px solid var(--gold); box-shadow: none; }
.side-btn { display: inline-block; margin-top: 6px; font: 700 12px var(--label); letter-spacing: 1px; text-transform: uppercase;
            background: var(--red); color: #fff !important; padding: 2px 10px; box-shadow: 2px 2px 0 #000; }
.side-btn:hover { text-decoration: none; background: #e0291f; }
.side-box .jb-note { color: var(--muted); }
.side-box.best { border: 0; background: none; box-shadow: none; text-align: center; font: 11px 'Special Elite', monospace; color: #f0c9bb; }

#content { padding: 26px 30px 30px; min-width: 0; background: rgba(5,3,3,.55); }

/* ---------- panels: dark, thin gold frame, B-style headers ---------- */
.box {
  position: relative; margin-bottom: 26px; padding: 14px 18px 16px; border: 1px solid rgba(201,160,90,.55);
  background: rgba(10,7,6,.82) url(images/art/grunge-light.png); box-shadow: 0 0 0 4px rgba(0,0,0,.55);
}
.box > h2, .box > h2:first-child {
  display: block; margin: 0 0 12px; padding: 0 0 4px; transform: none; background: none; box-shadow: none; color: #fff;
  font: 700 24px var(--label); text-transform: uppercase; letter-spacing: .5px; border-bottom: 2px solid var(--red);
}
.box > h2::after { content: " \00BB"; color: var(--red); font-size: 28px; }
#content > .box:first-child > h2, .auto-tabs + .box > h2 { }
#content > .box:first-child > h2 { font: 34px var(--display); text-transform: none; color: var(--cream); letter-spacing: 1px;
                                   border-bottom: 3px double var(--gold); text-shadow: 3px 3px 0 #000; }
#content > .box:first-child > h2::after { content: " \2605"; color: var(--gold); font-size: 22px; vertical-align: 6px; }
h2 small, h3 small { color: var(--muted); font-family: var(--body); }
h3 { font: 700 17px var(--label); letter-spacing: .4px; color: var(--cream); }
.box h3 { border-bottom: 1px solid rgba(200,35,27,.7); padding-bottom: 1px; }
.src, .meta, .credit-line { color: var(--muted); }
.yr { color: #1a120c; background: var(--gold); }   /* dark on gold: the old rule's yellow box stays readable */

/* tabs: cream flash labels */
.tabbar { gap: 4px; }
.tabbar button { font: 700 13px var(--label); text-transform: uppercase; letter-spacing: 1px; background: var(--navy); color: var(--cream);
                 border: 1px solid var(--gold); box-shadow: 2px 2px 0 #000; clip-path: none; padding: 4px 12px; }
.tabbar button.active { background: var(--cream); color: #000; border-color: var(--cream); box-shadow: 2px 2px 0 var(--red); }
.tabbar button:hover { background: var(--red); color: #fff; }

details.fold > summary { color: var(--cream); }
details.fold > summary::before { color: var(--red); }
.filter input, input[type=text], input[type=email], input[type=password], input[type=url], select {
  background: #120c0a; color: var(--cream); border: 1px solid rgba(201,160,90,.6); padding: 3px 6px; font-family: var(--body);
}
button { font-family: var(--label); }

/* footer */
#footer { position: relative; background: #000; color: var(--muted); border: 0; border-top: 3px double var(--gold); clip-path: none;
          padding: 16px 20px 22px; font: 12px var(--body); text-align: center; }
#footer::before { content: "\2605  \2605  \2605"; display: block; color: var(--gold); letter-spacing: 6px; margin-bottom: 6px; }
#footer .disclaimer { color: #cbbfa8; max-width: 620px; margin: 0 auto 6px; }

/* ---------- phones ---------- */
@media (max-width: 800px) {
  #header { height: 190px; }
  .swallow, .star { display: none; }
  .emblem { top: 108px; width: 66px; height: 66px; margin-left: -33px; }
  .emblem svg { width: 40px; }
  #header .tagline { font-size: 12px; }
  #columns { grid-template-columns: 1fr; }
  #sidebar { padding: 14px 12px; box-shadow: 0 4px 0 #000; }
  .nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
  .nav .nav-title { grid-column: 1 / -1; }
  .nav a, #sidebar .nav a { font-size: 16px; border-top: 1px dashed rgba(201,160,90,.35); }
  .side-box { display: none; }
  #content { padding: 16px 12px; }
}
@media (prefers-reduced-motion: reduce) { marquee { display: none; } }
#header { height: 278px; }
.emblem { top: 138px; }
#header .tagline { bottom: 10px; }
#columns { grid-template-columns: 280px minmax(0, 1fr); }
.nav a, #sidebar .nav a { font: 700 21px/1.25 var(--label); letter-spacing: 1px; white-space: nowrap; }
.box { background: rgba(10,7,6,.84); }
.box::before { content: ""; position: absolute; inset: 0; background: url(images/art/grunge-light.png); opacity: .18; pointer-events: none; }
.box > * { position: relative; }
@media (max-width: 800px) {
  #header { height: 200px; } .emblem { top: 104px; } #header .tagline { bottom: 6px; }
  #columns { grid-template-columns: 1fr; }
  .nav a, #sidebar .nav a { font-size: 16px; white-space: normal; }
}
@media (min-width: 801px) { .nav a, #sidebar .nav a { letter-spacing: .3px; } }
/* year tiles: tattoo-flash labels */
.yeargrid a { background: var(--navy); color: var(--cream); border: 1px solid var(--gold); box-shadow: 2px 2px 0 #000; font: 700 15px var(--label); letter-spacing: .5px; }
.yeargrid a small { color: var(--gold); font: 11px var(--body); }
.yeargrid a:hover { background: var(--red); color: #fff; border-style: solid; text-decoration: none; }
.yeargrid a.current { background: var(--cream); color: #000; border-style: solid; }
.yeargrid a.current small { color: #5e0705; }
/* tables */
table th, .archive th { background: var(--navy) !important; color: var(--gold-hi) !important; font: 700 12px var(--label); letter-spacing: 1px; text-transform: uppercase; }
tr.showrow:hover td { background: rgba(200,35,27,.25) !important; }
tr.milestone td { background: rgba(201,160,90,.16) !important; }
/* every remaining button: navy flash label with a gold edge */
.vtypes label, .vselects button, .vpager button, .vplayer-box button, .sl-form button, .jb-btns button, .sp-close, .sp-make,
.lb-close, .lb-nav button, .sp-was, .ms-login button, #ms-add, #ms-share, #ms-save, .sp-btn, #gs-reset {
  background: var(--navy); color: var(--cream) !important; border: 1px solid var(--gold); box-shadow: 2px 2px 0 #000;
  font-family: var(--label); font-weight: 700; letter-spacing: .5px;
}
.vtypes label small { color: var(--gold); }
.vtypes label:has(input:checked), .sp-was.on { background: var(--red); border-color: var(--red); color: #fff !important; }
.vtypes label:hover, .vselects button:hover, .vpager button:hover, .sl-form button:hover, .jb-btns button:hover, .sp-make:hover,
.sp-btn:hover, .ms-login button:hover, #ms-add:hover, #ms-share:hover, #ms-save:hover, #gs-reset:hover, .sp-close:hover,
.lb-close:hover, .lb-nav button:hover { background: var(--red); text-decoration: none; }
.vfilters { background: rgba(0,0,0,.5); border: 1px solid rgba(201,160,90,.4); }
/* bigger, centred llama badge between the banner and the tagline */
#header { height: 336px; }
.emblem { top: 186px; width: 116px; height: 116px; margin-left: -58px; }
.emblem svg { width: 64px; height: 100px; }
.star { top: 228px; }
.star.l { left: calc(50% - 130px); } .star.r { right: calc(50% - 130px); }
.swallow { top: 150px; }
#header .tagline { bottom: 8px; font-size: 16px; }
@media (max-width: 800px) {
  #header { height: 236px; }
  .emblem { top: 118px; width: 82px; height: 82px; margin-left: -41px; }
  .emblem svg { width: 46px; height: 72px; }
}
/* ticker (site.js) */
#ticker { overflow: hidden; white-space: nowrap; height: 24px; position: relative; }
#ticker .tk-track { position: absolute; inset: 0; }
#tk-text { position: absolute; left: 0; top: 3px; will-change: transform; }
@keyframes tk-scroll { from { transform: translateX(var(--tk-from)); } to { transform: translateX(var(--tk-to)); } }
@media (prefers-reduced-motion: reduce) { #tk-text { position: static; display: block; text-align: center; } }
/* ---------- discography: releases, pressings, collection ---------- */
.dc-filters .dc-selects select { margin: 2px 2px 2px 0; }
.dc-chiprow { display: flex; gap: 6px; align-items: baseline; margin: 4px 0; flex-wrap: wrap; }
.dc-chiprow .vtypes { margin: 0; }
.dc-mine { background: rgba(201,160,90,.12); border-left: 3px solid var(--gold); padding: 6px 10px; }
.dc-entry { border-bottom: 1px dashed rgba(201,160,90,.35); padding: 12px 0 10px; }
.dc-entry.mine .dc-head h3 a { color: var(--gold-hi); }
.dc-head h3 { margin: 0; border: 0; font: 22px var(--display); }
.dc-head h3 a { color: var(--cream); }
.dc-head .dc-own { float: right; margin-left: 10px; }
.dc-own { background: var(--navy); color: var(--cream); border: 1px solid var(--gold); box-shadow: 2px 2px 0 #000; cursor: pointer;
          font: 700 12px var(--label); letter-spacing: .5px; padding: 3px 10px; }
.dc-own.on { background: var(--gold); color: #000; border-color: var(--gold-hi); }
.dc-own:hover { background: var(--red); color: #fff; }
.dc-own.small { width: 28px; height: 28px; padding: 0; font-size: 15px; flex: 0 0 28px; }
.dc-own.pill { flex: 0 0 auto; min-width: 104px; padding: 5px 10px; font-size: 12px; white-space: nowrap; text-align: center; border-radius: 3px; }
.dc-own.pill.on { box-shadow: inset 1px 1px 0 rgba(255,255,255,.5), 2px 2px 0 #000; }
.dc-own.pill.on:hover { background: var(--red); color: #fff; }
.dc-own.link { background: none; border: 0; box-shadow: none; padding: 0; color: var(--gold-hi); text-decoration: underline; font: inherit; }
.dc-legacy { margin: 6px 0; padding: 5px 8px; border: 1px dashed var(--gold); font-size: 12px; }
.dc-novar { margin: 8px 0 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dc-vars { list-style: none; margin: 6px 0 0; padding: 0; }
.dc-grp { font: 700 12px var(--label); letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold-hi); margin: 10px 0 2px; padding-bottom: 2px; border-bottom: 1px solid rgba(201,160,90,.5); }
.dc-grp:first-child { margin-top: 2px; }
.dc-grp span { color: var(--muted); font-weight: normal; }
.dc-v { border-top: 1px dotted rgba(255,255,255,.12); }
.dc-grp + .dc-v { border-top: 0; }
.dc-v.mine { background: linear-gradient(90deg, rgba(201,160,90,.14), transparent 60%); }
.dc-v summary { display: flex; align-items: center; gap: 8px; padding: 4px 0; cursor: pointer; list-style: none; min-width: 0; white-space: nowrap;
                color: var(--cream); font-weight: normal; overflow-wrap: normal; }
.dc-v summary::-webkit-details-marker { display: none; }
.dc-v summary:hover .dc-vname { color: var(--gold-hi); }
.dc-vthumb { width: 28px; height: 28px; object-fit: cover; flex: 0 0 28px; border: 1px solid rgba(201,160,90,.5); }
.dc-vname { flex: 0 1 auto; max-width: 65%; overflow: hidden; text-overflow: ellipsis; }
.dc-v[open] .dc-vname, .dc-v details[open] .dc-vname { color: var(--gold-hi); }
.dc-vmeta { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 12px; }
.dc-vtags { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dc-vtags .dc-tag { margin-top: 0; }
summary .dc-run { flex: 0 0 auto; font-size: 12px; }
.dc-vbody { padding: 2px 0 10px 36px; min-width: 0; overflow: hidden; font-size: 13px; line-height: 1.5; }
.dc-vbody > div { margin-bottom: 3px; }
.dc-vbig img { float: right; width: 110px; height: 110px; object-fit: cover; margin: 0 0 6px 10px; border: 1px solid var(--gold); }
.dc-tagsfull { margin: 2px 0; }
@media (max-width: 640px) {
  .dc-vtags { display: none; }
  .dc-vbody { padding-left: 0; }
  .dc-vbig img { width: 80px; height: 80px; }
}
.dc-fmt { display: inline-block; font: 700 11px var(--label); letter-spacing: 1px; text-transform: uppercase; background: var(--red); color: #fff; padding: 0 6px; }
.dc-full { font-size: 11px; }
.dc-run { color: var(--gold-hi); font-weight: bold; }
.dc-run .src { font-weight: normal; }
.dc-tag { display: inline-block; font: 11px var(--body); border: 1px solid rgba(201,160,90,.6); color: var(--cream); padding: 0 5px; margin: 2px 3px 0 0; }
.dc-tag.col { border-color: #ff6a56; color: #ffb3a8; }
.dc-tag.first { background: var(--gold); color: #000; border-color: var(--gold); }
.dc-note { font-size: 12px; color: #d6cbb6; font-style: italic; margin-top: 2px; }
/* guestbook */
.gb-form textarea { width: 100%; max-width: 520px; background: #120c0a; color: var(--cream); border: 1px solid rgba(201,160,90,.6); font: 14px var(--body); padding: 6px; }
.gb-form input[type=text] { width: 100%; max-width: 360px; }
.gb-closed { font: 18px var(--display); color: var(--gold-hi); }
.gb-entry { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px dashed rgba(201,160,90,.35); }
.gb-no { flex: 0 0 54px; font: 20px var(--display); color: var(--gold); text-align: right; }
.gb-body { min-width: 0; }
.gb-text { margin: 4px 0; white-space: normal; overflow-wrap: anywhere; }
.gb-facts span { display: inline-block; margin-right: 14px; font-size: 12px; color: var(--muted); }
.gb-del { font-size: 11px; background: none; border: 0; color: #ff6a56; cursor: pointer; padding: 0; }
/* join card: top of the red column, cream flash ticket */
.join-card { display: block; position: relative; margin: 0 0 20px; padding: 12px 14px 14px; text-align: center; text-decoration: none !important;
             background: var(--cream) url(images/tex/paper003.jpg); background-blend-mode: multiply; color: #1a120c !important;
             border: 2px solid var(--gold); box-shadow: 0 0 0 3px var(--navy), 4px 6px 0 rgba(0,0,0,.6); transform: rotate(-1deg); font-weight: normal; }
.join-card:hover { transform: rotate(0deg); }
.join-card span { display: block; }
.jc-title { font: 25px var(--display); color: var(--red); line-height: 1.1; }
.jc-why { font: 12px var(--body); margin: 4px 0 6px; color: #3a2a1a; }
.jc-list { font: 13px/1.5 var(--body); text-align: left; color: #1a120c; }
.jc-btn { margin-top: 10px; padding: 6px 0; background: var(--red); color: #fff; font: 700 15px var(--label); letter-spacing: 1px;
          text-transform: uppercase; box-shadow: 2px 3px 0 #000; }
.join-card:hover .jc-btn { background: #e0291f; }
@media (max-width: 800px) {
  .join-card { transform: none; margin-bottom: 14px; }
  .jc-list { text-align: center; }
}
/* header as a column: banner, then the badge centred in the space left, then the tagline */
#header { display: flex; flex-direction: column; align-items: center; height: auto; min-height: 330px; padding-bottom: 10px; }
#header .logo-link { flex: 0 0 auto; }
.emblem-row { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 46px; padding: 14px 0; position: relative; z-index: 1; }
.emblem-row .emblem, .emblem-row .star { position: static !important; margin: 0; }
.emblem-row .emblem { flex: 0 0 auto; }
#header .tagline { position: static !important; flex: 0 0 auto; }
@media (max-width: 800px) {
  #header { min-height: 0; }
  .emblem-row { gap: 24px; padding: 8px 0; }
  .emblem-row .star { display: inline; font-size: 18px; }
}
/* album grid with cover art */
.albums { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 18px 14px; }
.album { display: block; text-align: center; text-decoration: none !important; color: var(--text) !important; font-weight: normal; }
.album .cover-img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border: 3px solid var(--cream);
                    box-shadow: 0 0 0 1px #000, 4px 5px 0 rgba(0,0,0,.6); transition: transform .15s; }
.album:hover .cover-img { transform: rotate(-2deg) scale(1.03); border-color: var(--gold-hi); }
.album .al-t { display: block; margin-top: 6px; font: 15px/1.2 var(--display); color: var(--cream); }
.album .al-y { display: block; font: 12px var(--body); color: var(--gold); }
@media (prefers-reduced-motion: reduce) { .album .cover-img { transition: none; } }
/* the banner is arched: at its centre the band ends ~half-way down its box (y 85 of 170), so pull the badge row up by
   that much (margin % = % of the header's width; the banner is min(820px, 94%) wide, 170/860 of that tall) */
.emblem-row { margin-top: calc(min(820px, 94%) * -0.095); padding: 18px 0; }
#header { min-height: 0; padding-bottom: 14px; }
#header .tagline { margin-top: 0; }
.emblem-row { margin-top: calc(min(820px, 94%) * -0.082); padding: 20px 0 16px; }
.emblem-row { padding: 18px 0 22px; }
.dc-entry { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; }
.dc-cover img { display: block; width: 110px; height: 110px; object-fit: cover; border: 3px solid var(--cream); box-shadow: 3px 4px 0 rgba(0,0,0,.6); }
.dc-cover.none { width: 110px; height: 110px; border: 2px dashed rgba(201,160,90,.4); }
@media (max-width: 600px) {
  .dc-entry { grid-template-columns: 72px minmax(0, 1fr); gap: 10px; }
  .dc-cover img, .dc-cover.none { width: 72px; height: 72px; }
}
.mr-bar { display: block; height: 6px; background: rgba(255,255,255,.08); margin: 2px 0 4px; }
.mr-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--red), var(--gold)); }
.mr-badge { text-align: center; font: 18px var(--display); color: var(--gold-hi); border: 1px solid var(--gold); padding: 6px; }
/* join card: keep the paper on hover, one line per reason, no bullets */
.join-card, .join-card:hover, .join-card:visited { background: var(--cream) url(images/tex/paper003.jpg) !important; background-blend-mode: multiply !important;
                                                   color: #1a120c !important; text-decoration: none !important; }
.join-card:hover { transform: rotate(0deg) scale(1.02); }
.jc-why { margin: 2px 0 8px; font: 12px var(--body); color: #4a3826; }
.jc-list { text-align: center; }
.jc-list span { display: block; padding: 4px 0; font: 700 13px var(--body); color: #1a120c; white-space: nowrap;
                border-top: 1px dashed rgba(94,7,5,.35); }
.jc-list span:last-child { border-bottom: 1px dashed rgba(94,7,5,.35); }
/* show map */
.sm-map { height: 520px; border: 1px solid var(--gold); box-shadow: 0 0 0 3px rgba(0,0,0,.6); background: #0b0b0d; }
.sm-pin { display: grid !important; place-items: center; border-radius: 50%; background: rgba(200,35,27,.88); border: 2px solid var(--cream);
          color: #fff; font: 700 11px var(--label); box-shadow: 0 0 0 2px rgba(0,0,0,.5); }
.sm-pin.mine { background: var(--gold); color: #000; border-color: #fff; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: #120c0a; color: var(--text); border: 1px solid var(--gold); }
.leaflet-popup-content { margin: 10px 12px; font: 13px var(--body); }
.sm-pop ul { list-style: none; padding: 0; margin: 6px 0 0; max-height: 240px; overflow: auto; }
.sm-pop li { padding: 3px 0; border-top: 1px dotted rgba(255,255,255,.15); }
.leaflet-container a.leaflet-popup-close-button { color: var(--cream); }
.leaflet-control-attribution { background: rgba(0,0,0,.6) !important; color: #aaa; }
.leaflet-control-attribution a { color: #ddd; }
@media (max-width: 800px) { .sm-map { height: 380px; } }
.sm-map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.82) contrast(.92) saturate(.6); }
#sm-mine { width: auto; display: inline; margin: 0 4px 0 12px; vertical-align: -2px; }
/* leaderboards */
.lb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.lb-board { border: 1px solid rgba(201,160,90,.45); background: rgba(0,0,0,.35); padding: 10px 12px; }
.lb-board h3 { margin: 0; font: 19px var(--display); color: var(--cream); border: 0; }
.lb-board ol { margin: 6px 0 0; padding-left: 24px; }
.lb-board li { padding: 2px 0; }
.lb-board li b { float: right; color: var(--gold-hi); font-weight: 700; }
.lb-board li.top1 a::before { content: "\2605 "; color: var(--gold-hi); }
.lb-name { font: 40px var(--display) !important; color: var(--cream) !important; border: 0 !important; margin: 4px 0 !important; }
.lb-name::after { content: none !important; }
.lb-share a, .lb-share button { display: inline-block; margin: 2px 4px 2px 0; background: var(--navy); color: var(--cream) !important; border: 1px solid var(--gold);
                                padding: 3px 10px; font: 700 12px var(--label); letter-spacing: .5px; box-shadow: 2px 2px 0 #000; cursor: pointer; }
.lb-share a:hover, .lb-share button:hover { background: var(--red); text-decoration: none; }
.ms-prof label { margin-right: 8px; }
/* releases with no published artwork: a plain printed sleeve */
.dc-cover.sleeve { width: 110px; height: 110px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 8px;
                   background: var(--navy) repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.04) 0 1px, transparent 1px 4px);
                   border: 3px solid var(--cream); box-shadow: 3px 4px 0 rgba(0,0,0,.6); }
.dc-cover.sleeve span { font: 13px/1.15 var(--display); color: var(--cream); }
.dc-cover.sleeve small { margin-top: 4px; font: 10px var(--label); letter-spacing: 1px; text-transform: uppercase; color: var(--gold); }
@media (max-width: 600px) { .dc-cover.sleeve { width: 72px; height: 72px; } .dc-cover.sleeve span { font-size: 10px; } }
.post.hiatus { border: 1px solid var(--gold); background: rgba(94,7,5,.35); padding: 10px 14px; margin-bottom: 12px; }
.post.hiatus h4 { font: 22px var(--display); color: var(--cream); }
.countdown { font: 700 15px var(--label); letter-spacing: 1px; text-transform: uppercase; color: var(--gold-hi); margin: 6px 0 0; }
.countdown b { font: 30px var(--display); color: #fff; letter-spacing: 0; }
/* inner pages: a slimmer header (the full banner is for the homepage) */
body:not(.home) #header .logo-link { width: 560px; padding-top: 8px; }
body:not(.home) .emblem-row { margin-top: calc(min(560px, 94%) * -0.082); padding: 8px 0 10px; }
body:not(.home) .emblem { width: 76px; height: 76px; }
body:not(.home) .emblem svg { width: 42px; height: 66px; }
body:not(.home) .swallow { width: 92px; top: 108px; }
body:not(.home) .star { font-size: 18px; }
body:not(.home) #header .tagline { font-size: 13px; }
/* never wider than the screen */
select, input, textarea { max-width: 100%; }
.menu-btn { display: none; }
@media (max-width: 800px) {
  .menu-btn { display: block; width: 100%; margin: 0 0 8px; padding: 8px; background: var(--navy); color: var(--cream); border: 1px solid var(--gold);
              font: 700 16px var(--label); letter-spacing: 1px; text-transform: uppercase; box-shadow: 2px 2px 0 #000; cursor: pointer; }
  .menu-btn span { color: var(--gold-hi); text-transform: none; font-weight: 500; }
  body:not(.menu-open) #sidebar .nav { display: none; }
  #sidebar { padding: 10px 12px; }
  /* join card: one compact line on phones */
  .join-card { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 10px; text-align: left; }
  .join-card .jc-why, .join-card .jc-list { display: none; }
  .join-card .jc-title { font-size: 18px; flex: 1; }
  .join-card .jc-btn { margin: 0; padding: 5px 10px; font-size: 13px; }
  body:not(.home) #header .logo-link { width: 94%; }
  body:not(.home) .swallow { display: none; }
}
.sl-pair { display: inline-flex; flex-wrap: wrap; gap: 4px; max-width: 100%; }
.sl-pair select { min-width: 0; max-width: 100%; }
#ms-find { width: 100%; max-width: 420px; font-size: 14px; padding: 5px 8px; }
.ms-results { list-style: none; padding: 0; margin: 4px 0 10px; }
.ms-results li { padding: 4px 0; border-bottom: 1px dotted rgba(255,255,255,.12); }
.ms-pick { font: 700 12px var(--label); background: var(--navy); color: var(--cream); border: 1px solid var(--gold); padding: 2px 8px; cursor: pointer; }
.ms-pick.on { background: var(--gold); color: #000; }

/* ---------- home-screen app: install box, offline page, back button when installed ---------- */
.app-box[hidden], .app-box [hidden] { display: none !important; }
.app-box p { margin: 0 0 8px; }
.app-box .flash-btn { width: 100%; padding: 6px 0; background: var(--red); color: #fff; border: 1px solid var(--gold); box-shadow: 2px 2px 0 #000;
                      font: 700 15px var(--label); letter-spacing: 1px; text-transform: uppercase; cursor: pointer; }
.app-box .flash-btn:hover { background: #e0291f; }
.app-steps { margin: 0 0 8px; padding-left: 20px; }
.app-steps li { margin: 2px 0; }
.app-x { float: right; background: none; border: 0; color: var(--muted); font-size: 14px; line-height: 1; cursor: pointer; padding: 0 2px; }
@media (max-width: 800px) {
  /* phones: a compact strip just above the page, like the join card */
  #sidebar .app-box { display: block; margin: 0 0 10px; }
  #sidebar .app-box h3 { display: none; }
  .app-box .inner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 10px; }
  .app-box .app-pitch { flex: 1 1 160px; margin: 0; }
  .app-box .app-btnrow { margin: 0; }
  .app-box .app-btnrow:has(> [hidden]) { display: none; }
  .app-box .flash-btn { width: auto; padding: 5px 12px; font-size: 13px; }
  .app-box #app-ios { flex: 1 1 100%; }
}
.app-back { display: none; }
body.standalone .app-back { display: block; position: fixed; left: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 50;
  padding: 7px 12px; background: var(--navy); color: var(--cream); border: 1px solid var(--gold); box-shadow: 2px 2px 0 #000;
  font: 700 14px var(--label); letter-spacing: 1px; text-transform: uppercase; cursor: pointer; }
body.standalone .side-box.best { display: none; }
.offline-list li { margin: 4px 0; }
/* menu groups */
.nav-group { margin: 14px 0 4px; font: 700 12px var(--label); letter-spacing: 3px; text-transform: uppercase; color: var(--gold-hi);
             display: flex; align-items: center; gap: 8px; }
.nav-group::before, .nav-group::after { content: ""; flex: 1; height: 1px; background: rgba(201,160,90,.5); }
.nav .nav-group + a { border-top: 0; }
@media (max-width: 800px) { .nav-group { grid-column: 1 / -1; margin: 10px 0 2px; } }
.otd-date { font: 26px var(--display); color: var(--gold-hi); margin: 0 0 6px; }
#rand-show { font: 700 15px var(--label); letter-spacing: 1px; text-transform: uppercase; background: var(--red); color: #fff; border: 1px solid var(--gold);
             padding: 6px 16px; box-shadow: 3px 3px 0 #000; cursor: pointer; }
#rand-show:hover { background: #e0291f; }
/* covers and printed sleeves stay inside their column (border + padding included in the size) */
.dc-cover img, .dc-cover.sleeve, .dc-cover.none { box-sizing: border-box; }
.dc-entry { grid-template-columns: 116px minmax(0, 1fr); }
.dc-cover img, .dc-cover.sleeve { width: 116px; height: 116px; }
.dc-cover.sleeve span { overflow-wrap: anywhere; }
@media (max-width: 600px) { .dc-entry { grid-template-columns: 76px minmax(0, 1fr); } .dc-cover img, .dc-cover.sleeve { width: 76px; height: 76px; } }
.song-rels { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 16px 12px; }
.song-years { list-style: none; padding-left: 0; }
.song-facts th { white-space: nowrap; }
.sp-songs a { color: inherit; font-weight: inherit; } .sp-songs a:hover { color: var(--gold-hi); }
.pod-list li { border: 0 !important; }
.pod-chip { display: inline-block; margin: 2px 4px 2px 0; padding: 3px 10px; background: var(--navy); color: var(--cream) !important;
            border: 1px solid var(--gold); font: 700 13px var(--label); letter-spacing: .5px; box-shadow: 2px 2px 0 #000; }
.pod-chip:hover { background: var(--red); text-decoration: none; }
.vn-table tr.was td:first-child a::before { content: "\2713 "; color: var(--gold-hi); }
.vn-shows { padding-left: 26px; }
.vn-shows li { padding: 2px 0; }
.vn-shows li.was { color: var(--gold-hi); }
.sp-venue { color: var(--cream) !important; } .sp-venue:hover { color: var(--gold-hi) !important; }
/* lost evenings */
.le-nights { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.le-night { border: 1px solid rgba(201,160,90,.4); background: rgba(0,0,0,.3); padding: 8px 10px; }
.le-night h4 { margin: 0 0 4px; font: 700 14px var(--label); color: var(--cream); }
.le-set { margin: 0; padding-left: 22px; font-size: 12.5px; }
.le-set a { color: var(--text); font-weight: normal; }
.le-set a:hover { color: var(--gold-hi); }
.pr-list { columns: 2; max-width: 560px; }
.pr-del { background: none; border: 0; color: #ff6a56; cursor: pointer; font-size: 11px; }
#pr-q { width: 260px; }
#pr-save, #pr-add { font: 700 13px var(--label); background: var(--red); color: #fff; border: 1px solid var(--gold); padding: 3px 12px; cursor: pointer; }
@media (max-width: 600px) { .pr-list { columns: 1; } }
/* trivia */
.tv-start .flash-btn, .tv-share .flash-btn, #tv-next { padding: 8px 16px; background: var(--navy); color: var(--cream); border: 1px solid var(--gold); box-shadow: 2px 2px 0 #000;
  font: 700 15px var(--label); letter-spacing: .5px; cursor: pointer; margin: 0 6px 6px 0; }
.tv-start .flash-btn:hover, .tv-share .flash-btn:hover, #tv-next:hover { background: var(--red); color: #fff; }
.tv-prog { font: 700 12px var(--label); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.tv-q { font: 22px var(--display); color: var(--cream); margin: 0 0 12px; border: 0; line-height: 1.25; }
.tv-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tv-opt { text-align: left; padding: 10px 12px; background: rgba(255,255,255,.04); color: var(--cream); border: 1px solid rgba(201,160,90,.6);
  font: 15px var(--body); cursor: pointer; min-height: 48px; overflow-wrap: anywhere; }
.tv-opt:hover:not(:disabled) { background: var(--navy); border-color: var(--gold-hi); }
.tv-opt:disabled { cursor: default; opacity: .55; }
.tv-opt.right { background: #1f5c2a; border-color: #8fd18f; opacity: 1; }
.tv-opt.wrong { background: #7a1410; border-color: #ff6a56; opacity: 1; }
.tv-verdict { font: 24px var(--display); margin: 12px 0 2px; }
.tv-verdict.right { color: #8fd18f; } .tv-verdict.wrong { color: #ff8a7a; }
.tv-why { color: var(--cream); }
.tv-score { font: 64px var(--display); color: var(--gold-hi); margin: 0; text-align: center; }
.tv-rank { font: 700 22px var(--label); letter-spacing: 2px; text-transform: uppercase; text-align: center; margin: 0 0 10px; }
.tv-card canvas { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; border: 1px solid var(--gold); }
.tv-share { text-align: center; }
.tv-review li { margin: 0 0 6px; }
.tv-review li.right::marker { color: #8fd18f; } .tv-review li.wrong::marker { color: #ff6a56; }
@media (max-width: 640px) { .tv-opts { grid-template-columns: 1fr; } .tv-q { font-size: 19px; } }
/* homepage review fixes */
.sticky { font: 700 11px var(--label); letter-spacing: 1px; color: #1a120c; background: var(--gold); padding: 0 5px; margin-right: 4px; }
.predict-link { margin: 6px 0 0; font: 700 14px var(--label); letter-spacing: .5px; }
.predict-link a { color: var(--gold-hi); }
.foot-links { font-size: 12px; }
.dc-entry.dc-target { outline: 2px solid var(--gold); outline-offset: 6px; }
@media (max-width: 800px) { .welcome .welcome-more { display: none; } }
/* tour posters */
.pf-toggle { display: flex; align-items: center; gap: 16px; width: 100%; max-width: 560px; margin: 14px 0 6px; padding: 12px 22px 12px 14px;
             background: var(--red); color: #fff; border: 2px solid var(--gold); box-shadow: 5px 5px 0 #000; cursor: pointer; text-align: left;
             transition: transform .08s, box-shadow .08s; }
.pf-toggle:hover { background: #e0291f; transform: translate(-2px, -2px); box-shadow: 7px 7px 0 #000; }
.pf-toggle:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 #000; }
.pf-toggle.open { background: var(--navy); }
.pf-art { flex: 0 0 72px; height: 72px; background: center / contain no-repeat; font-size: 46px; line-height: 72px; text-align: center; }
/* .pf-art.poster / .cam get their flash art once it is approved */
.pf-tx { display: flex; flex-direction: column; gap: 4px; }
.pf-tx b { font: 400 26px/1.1 var(--display); letter-spacing: .5px; }
.pf-tx small { font: 13px var(--body); color: var(--cream); opacity: .9; }
@media (max-width: 640px) { .pf-art { flex-basis: 52px; height: 52px; } .pf-tx b { font-size: 20px; } }
#pf-upload { border: 1px dashed var(--gold); padding: 10px 14px; margin-top: 10px; }
.pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.pf-card { border: 1px solid rgba(201,160,90,.45); background: rgba(0,0,0,.35); display: flex; flex-direction: column; }
.pf-sheet { aspect-ratio: 3 / 4; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 8px; padding: 16px;
            background: var(--cream) url(images/tex/paper003.jpg); background-blend-mode: multiply; color: #1a120c; border-bottom: 3px solid var(--red);
            box-shadow: inset 0 0 0 8px rgba(94,7,5,.12); }
.pf-year { font: 700 13px var(--label); letter-spacing: 3px; color: var(--red); }
.pf-title { font: 22px/1.15 var(--display); }
.pf-artist { font: 12px 'Special Elite', monospace; color: #4a3826; }
.pf-img img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.pf-info { padding: 8px 10px 10px; font-size: 13px; }
.pf-info p { margin: 0 0 4px; }
/* photo cloud: snapshots scattered on the table */
.pc-cloud { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 14px 6px 20px; }
.pc-photo { position: relative; margin: -4px; padding: 6px 6px 18px; background: #f7f2e6; border: 0; cursor: zoom-in;
            transform: rotate(var(--r, 0deg)) translateY(var(--dy, 0)); box-shadow: 2px 4px 10px rgba(0,0,0,.6); transition: transform .15s; }
.pc-photo img { display: block; width: 120px; height: 120px; object-fit: cover; }
.pc-photo:hover, .pc-photo:focus-visible { transform: rotate(0deg) scale(1.12); z-index: 2; }
.pc-view, .pc-over { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.86); display: flex; align-items: center; justify-content: center; padding: 16px; }
.pc-view[hidden], .pc-over[hidden] { display: none; }
.pc-view-box { max-width: 92vw; text-align: center; color: var(--text); }
.pc-view-box img { max-width: 92vw; max-height: 74vh; border: 6px solid #f7f2e6; box-shadow: 0 6px 20px #000; }
.pc-over { z-index: 1500; }
.pc-over-box { position: relative; max-width: 860px; width: 100%; max-height: 90vh; overflow: auto; background: #120c0a; border: 1px solid var(--gold); padding: 16px 18px; }
.pc-over-box h3 { margin: 0 0 4px; font: 24px var(--display); color: var(--cream); border: 0; }
.pc-x, .pc-close { float: right; background: var(--navy); color: var(--cream); border: 1px solid var(--gold); cursor: pointer; font: 700 12px var(--label); padding: 3px 8px; }
.pc-nav button { background: var(--navy); color: var(--cream); border: 1px solid var(--gold); cursor: pointer; font: 700 13px var(--label); padding: 3px 10px; }
@media (max-width: 600px) { .pc-photo img { width: 84px; height: 84px; } }
@media (prefers-reduced-motion: reduce) { .pc-photo { transition: none; } }
.sm-pin.pics::after { content: "\1F4F7"; position: absolute; top: -9px; right: -9px; font-size: 11px; background: #f7f2e6; border-radius: 50%; width: 16px; height: 16px;
                      display: grid; place-items: center; box-shadow: 0 0 0 1px #000; }
.sm-pin { position: relative; }
#sm-pics { width: auto; display: inline; margin: 0 4px 0 12px; vertical-align: -2px; }
.ct-rule { border-left: 3px solid var(--gold); padding: 4px 10px; background: rgba(201,160,90,.1); }
/* add/remove confirmation pop-up (frankstore.js) */
.fs-toast { position: fixed; left: 50%; bottom: 24px; z-index: 3000; transform: translate(-50%, 140%); opacity: 0; max-width: min(560px, calc(100vw - 24px));
            background: var(--navy); color: var(--cream); border: 2px solid var(--gold); box-shadow: 4px 5px 0 #000; padding: 12px 40px 12px 16px;
            font: 15px/1.45 var(--body); transition: transform .2s, opacity .2s; pointer-events: none; }
.fs-toast.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.fs-toast.bad { border-color: #ff6a56; }
.fs-toast a { color: var(--gold-hi) !important; white-space: nowrap; }
.fs-toast-note { color: var(--muted); font-size: 12px; }
.fs-toast-x { position: absolute; top: 6px; right: 6px; background: none; border: 0; color: var(--cream); cursor: pointer; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .fs-toast { transition: none; } }

/* the llama badge: hand-painted flash art (tools/process_art.sh) instead of the drawn SVG */
.emblem.art, .emblem.art:hover { background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 50%; }
.emblem-row .emblem.art { width: 136px; height: 136px; }
body:not(.home) .emblem-row .emblem.art { width: 84px; height: 84px; }
.emblem.art img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(3px 4px 0 rgba(0,0,0,.6)); transition: transform .15s; }
.emblem.art:hover img { transform: rotate(-6deg) scale(1.04); }
@media (max-width: 640px) { .emblem-row .emblem.art { width: 92px; height: 92px; } }

/* homepage: Find Your Way tiles */
.fw-group { font: 600 13px var(--label); letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin: 14px 0 8px; border: 0 !important; padding: 0 !important; background: none !important;
            display: flex; align-items: center; gap: 10px; }
.fw-group::after { content: ""; flex: 1; border-top: 1px solid rgba(201,160,90,.45); }
.fw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.fw-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 12px 8px 12px;
           background: rgba(20,24,44,.85); border: 1px solid rgba(201,160,90,.6); box-shadow: 3px 3px 0 #000; color: var(--cream) !important;
           text-decoration: none !important; transition: transform .1s, background .1s; }
.fw-tile:hover { background: var(--red) !important; transform: translate(-2px, -2px) rotate(-1deg); box-shadow: 5px 5px 0 #000; }
.fw-tile img { width: 64px; height: 64px; object-fit: contain; margin-bottom: 2px; filter: drop-shadow(2px 2px 0 rgba(0,0,0,.6)); }
.fw-tile b { font: 400 18px/1.15 var(--display); color: var(--cream); }
.fw-tile span { font-size: 12px; line-height: 1.35; color: #d8ccb4; }
.fw-tile:hover span { color: #fff; }
@media (max-width: 640px) { .fw-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } .fw-tile img { width: 48px; height: 48px; } .fw-tile b { font-size: 16px; } }

/* you-are-here trail above each page */
.crumb { margin: 0 0 10px; padding: 5px 12px; font: 600 12px var(--label); letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold);
         background: rgba(12,14,26,.8); border-left: 3px solid var(--red); display: inline-block; }
.crumb a { color: var(--cream) !important; }
.crumb b { color: var(--gold-hi); font-weight: 600; }

img.swallow { height: auto; filter: drop-shadow(3px 4px 0 rgba(0,0,0,.55)); }
img.swallow.l { transform: scaleX(-1) rotate(-8deg); }
img.swallow.r { transform: rotate(-8deg); }

/* sidebar widgets (Latest Release, Tour Dates) */
.side-box.widget .inner { text-align: center; font-size: 13px; line-height: 1.4; }
.side-box.widget p { margin: 0 0 10px; }
.wr-cover img { display: block; width: 150px; height: 150px; object-fit: cover; margin: 4px auto 8px; border: 2px solid var(--gold); box-shadow: 4px 4px 0 #000; transform: rotate(-2deg); }
.side-box .more { display: inline-block; margin-top: 8px; padding: 3px 12px; background: var(--red); color: #fff !important; font: 600 12px var(--label);
                  letter-spacing: 1px; text-transform: uppercase; border: 1px solid var(--gold); box-shadow: 2px 2px 0 #000; text-decoration: none !important; }
.side-box .more:hover { background: var(--gold); color: #000 !important; }
.side-box .more { display: table; margin: 8px auto 0; }

/* poster cards: a typeset stand-in with a flash icon until someone sends a photo */
.pf-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.pf-sheet { aspect-ratio: auto !important; min-height: 230px; position: relative; padding: 18px 14px 34px !important; border: 6px double rgba(94,7,5,.55); }
.pf-flash { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(2px 2px 0 rgba(0,0,0,.35)); }
.pf-wanted { position: absolute; right: 8px; bottom: 8px; transform: rotate(-8deg); font: 700 11px var(--label); letter-spacing: 2px; text-transform: uppercase;
             color: #a3120d; border: 2px solid #a3120d; padding: 1px 6px; opacity: .8; }
img.pf-art { flex: 0 0 72px; width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(2px 2px 0 rgba(0,0,0,.5)); }