@font-face {
  font-family: "PanicHand";
  src: url("/assets/Panic-Hand.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "MilkRun";
  src: url("/assets/milkrun.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/assets/geist-latin-wght-normal.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage";
  src: url("/assets/bricolage-grotesque-latin-wght-normal.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/assets/geist-mono-latin-wght-normal.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Geist Fallback";
  src: local("Arial");
  font-display: swap;
  size-adjust: 103%;
  ascent-override: 92%;
  descent-override: 23%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Bricolage Fallback";
  src: local("Arial");
  font-display: swap;
  size-adjust: 108%;
  ascent-override: 88%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Geist Mono Fallback";
  src: local("Menlo"), local("Consolas"), local("Courier New");
  font-display: swap;
  size-adjust: 100%;
  ascent-override: 95%;
  descent-override: 24%;
  line-gap-override: 0%;
}
:root {
  color-scheme: light;
  --paper: #ffffff;
  --ink: #111111;
  --muted: #5f5a55;
  --line: rgba(0, 0, 0, 0.12);
  --red: #d4514f;
  --green: #2d7c52;
  --blue: #286e9e;
  --cream: #f7f1e8;
  --ui-font: "Geist", "Geist Fallback", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --type-display: 48px;
  --type-archive-title: 48px;
  --type-section: 26px;
  --type-subsection: 18px;
  --type-body: 16px;
  --type-dense: 15px;
  --type-small: 13px;
  --type-micro: 12px;
}

/* ===== Stagelight structural base (homepage only; no legacy cascade) ===== */
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--ui-font); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, select { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
sup { line-height: 0; }
main { width: min(1400px, calc(100% - 56px)); margin: 0 auto; }
main > section { margin-top: 96px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.section-heading h2 { font-size: 34px; font-weight: 640; letter-spacing: -0.01em; line-height: 1.12; }
.section-heading span { font-size: 12px; letter-spacing: 0.08em; }

/* nav internals */
.site-head .brand { display: inline-flex; align-items: center; gap: 12px; }
.header-social { display: flex; gap: 10px; }
.header-social .social-dot { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; font-size: 14px; }
.jump-links a { display: inline-block; }
.mobile-nav { display: none; position: relative; }
.mobile-nav summary { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border: 1px solid rgba(255,255,255,0.16); border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; }
.mobile-nav-links { position: absolute; right: 0; top: 48px; min-width: 220px; padding: 10px; border-radius: 16px; z-index: 70; }
.mobile-nav-links a { display: block; padding: 11px 16px; border-radius: 10px; font-size: 15px; }
.menu-icon { display: inline-flex; flex-direction: column; gap: 3px; }
.menu-icon i { width: 14px; height: 1.5px; display: block; }

/* stat tiles + toolbar */
.data-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 22px; }
.data-metrics .nick-stat { padding: 20px 22px; border-radius: 16px; }
.data-metrics .nick-stat strong { display: block; font-size: 30px; font-weight: 620; line-height: 1; }
.data-metrics .nick-stat span { display: block; font-size: 11px; letter-spacing: 0.14em; margin-top: 9px; }
.data-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.show-filter { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.16); }
.show-filter span { font-size: 11px; letter-spacing: 0.14em; }
.type-filter { display: inline-flex; border-radius: 999px; overflow: hidden; border: 1px solid rgba(255,255,255,0.16); }
.type-filter button { padding: 0 18px; height: 40px; font-size: 13px; font-weight: 560; }
.show-filter-status { margin-left: auto; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }

/* data tables */
.tour-table-wrap, .data-table-wrap { overflow-x: auto; border-radius: 20px; }
.tour-table, .data-table { width: 100%; border-collapse: collapse; }
.tour-table th, .tour-table td, .data-table th, .data-table td { text-align: left; padding: 14px 18px; }
.tour-table td:last-child, .tour-table th:last-child { text-align: right; }
.tour-table thead th, .data-table thead th { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; }
.slp-progress { display: inline-block; width: 64px; height: 3px; border-radius: 2px; margin-left: 10px; overflow: hidden; vertical-align: middle; }
.slp-progress i { display: block; height: 100%; }

/* tour dates */
.tour-dates li { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 6px 18px; align-items: center; padding: 15px 24px; }
.tour-dates li time { font-size: 13px; letter-spacing: 0.06em; }
.tour-dates li span { grid-column: 2; font-size: 13px; }
.tour-dates li strong { grid-column: 2; font-size: 15px; }
.tour-dates li em { grid-column: 3; grid-row: 1 / span 2; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; font-style: normal; border: 1px solid rgba(255,255,255,0.08); border-radius: 999px; padding: 4px 12px; }

/* sheet key */
.sheet-key { padding: 24px 28px; border-radius: 20px; }
.sheet-key .key-topline { display: flex; gap: 20px 40px; flex-wrap: wrap; align-items: flex-start; }
.key-block h3 { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 10px; }
.marker-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.marker-legend li { display: inline-flex; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,0.08); border-radius: 999px; padding: 8px 16px 8px 12px; }
.marker-legend img { width: 22px; height: auto; }
.marker-legend .legend-swipe { width: 30px; height: 13px; flex: none; background: var(--mc); opacity: 0.62; mix-blend-mode: multiply; border-radius: 1px; clip-path: polygon(1% 12%, 99% 3%, 100% 82%, 93% 100%, 1% 92%); }
.marker-legend strong { font-size: 13px; }
.marker-legend em { font-size: 12px; font-style: normal; }

/* nick feature */
.nick-feature { padding: 34px 36px; border-radius: 20px; }
.nick-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 22px 0; }
.nick-summary .nick-stat { padding: 20px 22px; border-radius: 16px; }
.nick-summary .nick-stat strong { display: block; font-size: 30px; font-weight: 620; line-height: 1; }
.nick-summary .nick-stat span { display: block; font-size: 11px; letter-spacing: 0.14em; margin-top: 9px; }
.nick-progress { margin: 28px 0 32px; }
.nick-progress > div:first-child { display: flex; align-items: baseline; gap: 12px; }
.nick-progress-track { display: flex; height: 8px; border-radius: 4px; background: rgba(255,255,255,0.1); overflow: hidden; margin: 14px 0 12px; }
.nick-progress-track i { display: block; height: 100%; }
.progress-key { display: flex; gap: 10px 26px; flex-wrap: wrap; }
.progress-key span { display: inline-flex; align-items: center; gap: 8px; }
.progress-key i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.nick-ranking { display: grid; gap: 4px; }
.nick-ranking li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 10px 8px; border-bottom: 1px solid rgba(255,255,255,0.05); }

/* footer + community */
.community-links { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; margin-top: 96px; }
.ticket-link { display: inline-flex; align-items: center; height: 44px; padding: 0 26px; border-radius: 999px; font-weight: 650; }
.posse-link img { width: 220px; border-radius: 12px; }
.site-foot { margin-top: 110px; }
.site-foot-inner { width: min(1400px, calc(100% - 56px)); margin: 0 auto; display: flex; justify-content: space-between; gap: 44px; flex-wrap: wrap; padding: 56px 0 40px; }
.footer-lead p { margin-top: 12px; max-width: 300px; font-size: 14px; line-height: 1.55; }
.footer-brand { font-size: 20px; font-weight: 800; letter-spacing: 0.045em; }
.footer-links, .social-links { display: flex; flex-direction: column; gap: 2px; }
.footer-links strong, .social-links strong { font-size: 11px; letter-spacing: 0.18em; margin-bottom: 12px; font-weight: 500; }
.footer-links a, .social-links a { padding: 5px 0; font-size: 14px; }
.social-links a { display: inline-flex; align-items: center; gap: 10px; }
.social-mark { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; font-size: 12px; }

@media (max-width: 900px) {
  .data-metrics, .nick-summary { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  main { width: calc(100% - 36px); }
  main > section { margin-top: 64px; }
  .section-heading h2 { font-size: 28px; }
  .mobile-nav { display: block; }
  .data-metrics, .nick-summary { grid-template-columns: 1fr 1fr; }
  .tour-dates li { grid-template-columns: auto minmax(0, 1fr); padding: 14px 16px; }
  .tour-dates li em { grid-column: 2; grid-row: auto; justify-self: start; }
  .marker-legend { grid-template-columns: 1fr; }
}

.laminate {
  border: 9px solid rgba(0, 0, 0, 0.045);
  border-radius: 6px;
  padding: 42px 34px 34px;
  margin: 0 auto 34px;
  background: #ffffff;
  font-family: "Geist", "Geist Fallback", system-ui, sans-serif;
}
@media (max-width: 560px) {
.laminate {
    padding: 13px 12px 18px;
  }
}
.setlist-feature {
  display: grid;
  grid-template-columns: minmax(320px, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
  margin-bottom: 36px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}
.setlist-feature.no-image {
  grid-template-columns: 1fr;
}
.setlist-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.setlist-row-body .setlist-image { margin: 0; }
.setlist-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 0 22px;
}
.setlist-image {
  margin: 0 0 12px;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.setlist-feature .setlist-image {
  margin: 0;
  min-width: 0;
}
.setlist-feature .setlist-copy {
  padding: clamp(8px, 1.5vw, 22px) 0 0;
}
.setlist-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: transparent;
}
.setlist-archive-panel > .setlist-grid {
  margin-top: 0;
}
.setlist-text {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
  font-size: var(--type-dense);
  line-height: 1.35;
}
.setlist-text h3 {
  margin: 0 0 3px;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0;
}
.setlist-text .show-heading h3 {
  margin: 0;
  font-size: clamp(26px, 2.3vw, 34px);
  line-height: 1.04;
  font-weight: 700;
}
.setlist-text .show-heading p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.25;
}
.setlist-feature .setlist-sets {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
}
.setlist-feature .setlist-sets p {
  margin: 0;
}
.setlist-feature .setlist-sets p + p {
  margin-top: 18px;
}
.setlist-feature .setlist-annotations .guest-notes,
.setlist-feature .setlist-annotations .notes {
  margin-top: 0;
}
.setlist-feature .setlist-annotations .guest-notes + .notes {
  margin-top: 8px;
}
.setlist-text p {
  margin: 8px 0;
  font-size: inherit;
  line-height: inherit;
}
.setlist-text strong {
  color: var(--ink);
}
.setlist-text .guest-sup {
  font-size: 0.62em;
  top: -0.55em;
  margin-left: 1px;
}
.archive-list a {
  color: var(--ink);
  font-weight: 700;
}
.archive-main {
  width: min(1180px, calc(100% - 32px));
  margin: 28px auto 56px;
}
.tour-review-main {
  width: min(1880px, calc(100% - 56px));
  margin: 28px auto 56px;
}
.tour-review-main > .archive-page {
  width: min(1180px, 100%);
  margin: 0 auto 34px;
}
.archive-page,
.archive-index {
  background: #ffffff;
  border: 7px solid rgba(0, 0, 0, 0.045);
  border-radius: 6px;
  padding: clamp(16px, 3vw, 32px);
}
.archive-title {
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}
.archive-title h1 {
  margin: 0;
  font-family: var(--sl-display, "Bricolage", "Bricolage Fallback", "Geist", "Geist Fallback", system-ui, sans-serif);
  font-size: var(--type-archive-title);
  line-height: 1.04;
  font-weight: 640;
  letter-spacing: -0.02em;
}
.archive-title p {
  margin: 0 0 8px;
  color: var(--muted);
}
.page-graphic-title {
  display: grid;
  justify-items: center;
  gap: 14px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--line);
  padding: 4px 0 22px;
  text-align: center;
}
.page-graphic-title img {
  display: block;
  width: auto;
  max-width: min(300px, 78vw);
  max-height: 180px;
  object-fit: contain;
}
.page-graphic-title h1 {
  margin: 0;
  font-family: var(--sl-display, "Bricolage", "Bricolage Fallback", "Geist", "Geist Fallback", system-ui, sans-serif);
  font-size: var(--type-archive-title);
  line-height: 1.04;
  font-weight: 640;
  letter-spacing: -0.02em;
}
.archive-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.archive-tags span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 8px;
  color: var(--muted);
  font-size: 12px;
}
.archive-content {
  overflow-wrap: break-word;
}
.archive-content img,
.archive-content iframe,
.archive-content embed,
.archive-content object {
  max-width: 100%;
}
.archive-content img {
  height: auto;
}
.archive-content table {
  max-width: 100%;
}
.shelf-current-update h2 {
  margin: 0 0 14px;
  font-family: var(--ui-font);
  font-size: var(--type-section);
  line-height: 1;
  font-weight: 700;
}
.shelf-current-update {
  max-width: 880px;
  margin: 0 auto 34px;
}
.shelf-addition-group {
  margin-top: 22px;
}
.shelf-addition-group h3 {
  margin: 0 0 8px;
  font-family: var(--ui-font);
  font-size: 18px;
}
.shelf-addition-group ul {
  columns: 2;
  column-gap: 44px;
  margin: 0;
  padding-left: 20px;
}
.shelf-addition-group li {
  break-inside: avoid;
  margin: 0 0 7px;
}
.legacy-shelf-notes {
  border-top: 1px solid var(--line);
  padding-top: 28px;
}
.legacy-shelf-notes > h2 {
  margin: 0 0 20px;
  font-family: var(--ui-font);
  font-size: var(--type-section);
}
.current-review-link {
  margin: 0 0 28px;
  text-align: center;
}
.shelf-page-links a,
.movement-list a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.shelf-movement h2,
.legacy-shelf-notes h2 {
  margin: 0 0 14px;
  font-family: var(--sl-display, "Bricolage", "Bricolage Fallback", "Geist", "Geist Fallback", system-ui, sans-serif);
  font-size: 26px;
  line-height: 1.05;
  font-weight: 640;
  letter-spacing: -0.02em;
}
.movement-block {
  margin: 20px 0;
}
.movement-block h3 {
  margin: 0 0 8px;
  font-family: var(--sl-display, "Bricolage", "Bricolage Fallback", "Geist", "Geist Fallback", system-ui, sans-serif);
  font-size: 19px;
  line-height: 1.1;
  font-weight: 620;
  letter-spacing: -0.01em;
}
.movement-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.movement-list li {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 3px 8px;
  align-items: baseline;
}
.movement-list strong {
  font-family: "Geist", "Geist Fallback", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 600;
}
.movement-list span {
  color: var(--muted);
}
.legacy-shelf-notes {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.archive-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.archive-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 8px 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.archive-list span,
.archive-list em {
  color: var(--muted);
  font-style: normal;
  font-size: 13px;
}
.archive-list em {
  grid-column: 1 / -1;
}
.origins-main {
  width: min(1240px, calc(100% - 32px));
}
.origin-hero {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
}
.origin-fish {
  display: block;
  width: 150px;
  height: auto;
}
.origin-hero p,
.origin-title p {
  margin: 0 0 7px;
  color: var(--muted);
  font-family: var(--sl-mono, "Geist Mono", "Geist Mono Fallback", ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.origin-hero h1 {
  margin: 0;
  font-family: var(--sl-display, "Bricolage", "Bricolage Fallback", "Geist", "Geist Fallback", system-ui, sans-serif);
  font-size: 46px;
  line-height: 1;
  font-weight: 660;
  letter-spacing: -0.02em;
}
.origin-hero span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
}
.origin-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.origin-card {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 7px;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px;
  background: #ffffff;
}
.origin-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--cream);
}
.origin-card span {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}
.origin-card strong {
  font-family: var(--sl-display, "Bricolage", "Bricolage Fallback", "Geist", "Geist Fallback", system-ui, sans-serif);
  font-size: 19px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.origin-back {
  margin-bottom: 14px;
}
.origin-back a,
.origin-source a,
.origin-nav a,
.origin-body a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.origin-layout {
  display: grid;
  grid-template-columns: minmax(220px, 340px) minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}
.origin-image {
  margin: 0;
}
.origin-image img {
  display: block;
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  background: var(--cream);
}
.origin-body {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
  font-size: 17px;
  line-height: 1.52;
}
.origin-body p {
  margin: 0 0 16px;
}
.origin-stats {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
  font-family: var(--sl-mono, "Geist Mono", "Geist Mono Fallback", ui-monospace, monospace);
  font-size: 13px;
  line-height: 1.7;
}
.origin-source {
  color: var(--muted);
  font-size: 14px;
}
.origin-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 26px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
@media (max-width: 900px) {
.board-ledger,
  .key-topline,
  .key-other-sheets dl,
  .setlist-feature,
  .setlist-grid {
    grid-template-columns: 1fr;
  }
.origin-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
.origin-layout {
    grid-template-columns: 1fr;
  }
.origin-image img {
    width: min(420px, 100%);
  }
}
@media (max-width: 560px) {
main,
  .site-head,
  .tour-review-main {
    width: min(calc(100% - 20px), 1180px);
  }
.setlist-feature {
    gap: 22px;
    margin-bottom: 46px;
  }
.setlist-feature .setlist-copy {
    padding-top: 0;
  }
.setlist-text .show-heading h3 {
    font-size: 27px;
  }
.setlist-feature .setlist-sets {
    padding: 18px 0;
  }
.setlist-text {
    font-size: 14px;
  }
.archive-list li {
    grid-template-columns: 1fr;
  }
.shelf-addition-group ul {
    columns: 1;
  }
.origin-hero {
    grid-template-columns: 1fr;
    text-align: center;
  }
.origin-fish {
    margin: 0 auto;
  }
.origin-grid {
    grid-template-columns: 1fr;
  }
.origin-card {
    grid-template-columns: 84px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
  }
.origin-card img {
    grid-row: 1 / span 2;
  }
.origin-body {
    font-size: 16px;
  }
.origin-hero h1 {
    font-size: 38px;
  }
.shelf-movement h2,
  .legacy-shelf-notes h2 {
    font-size: 24px;
  }
.movement-block h3 {
    font-size: 20px;
  }
}
.laminate {










/* Metric-matched fallbacks. Each maps a widely-installed local face (Arial for
   the sans stacks, Menlo/Consolas for mono) and overrides its metrics so the
   space it occupies matches the webfont almost exactly. With these in the stack
   right after the webfont, the font-display: swap hand-off causes no reflow or
   visible size pop (FOUT jump) — only a subtle glyph-shape change. size-adjust
   is tuned to average advance width; the vertical overrides match line boxes for
   any element relying on line-height: normal. */








* {
  box-sizing: border-box;
}

html {
  background: var(--paper);
  overflow-x: clip;
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--ui-font);
  overflow-x: clip;
}

a {
  color: inherit;
}

.site-head {
  width: min(1380px, calc(100% - 40px));
  margin: 18px auto 0;
}

.masthead-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  min-height: 132px;
}

.brand {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  justify-self: center;
}

.brand-logo {
  width: clamp(270px, 24vw, 370px);
  height: auto;
  display: block;
}

.header-social {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
}

.social-dot {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  color: #ffffff;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75), 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.social-dot.facebook {
  background: #1e65ae;
}

.social-dot.twitter {
  background: #66c6e5;
}

.jump-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px clamp(22px, 3vw, 48px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 13px 0 14px;
  font-family: var(--ui-font);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
}

.jump-links a {
  display: inline-flex;
  align-items: center;
  padding: 4px 0;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.jump-links a[aria-current="page"] {
  color: #b94a4a;
  border-bottom-color: currentColor;
}

.jump-links a:hover {
  border-bottom-color: currentColor;
}

.mobile-nav {
  display: none;
}

main {
  width: min(1540px, calc(100% - 56px));
  margin: 34px auto 56px;
}

.home-intro {
  width: 100%;
  margin: 0 auto 30px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.home-intro h1 {
  margin: 0 0 14px;
  font-family: var(--ui-font);
  font-size: var(--type-display);
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
}

.home-trail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-family: var(--ui-font);
  font-size: 14px;
}

.home-trail a {
  color: var(--ink);
  text-underline-offset: 3px;
}

.home-trail span {
  color: var(--muted);
}

#latest-setlist,
#song-list,
#sheet-key,
#shelf-watch,
#shelf,
#purgatory,
#nick-johnson,
#woodshed,
#setlists,
#tour-dates {
  scroll-margin-top: 18px;
}

.laminate {
  border: 9px solid rgba(0, 0, 0, 0.045);
  border-radius: 6px;
  padding: 42px 34px 34px;
  margin: 0 auto 34px;
  background: #ffffff;
  font-family: "Geist", "Geist Fallback", system-ui, sans-serif;
}

.header-row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center;
  gap: 24px;
  margin-bottom: 36px;
  min-width: 0;
}

.nums {
  display: flex;
  gap: 12px;
}

.nums.left {
  justify-self: start;
}

.nums.right {
  justify-self: end;
}

.marker-num {
  width: clamp(52px, 4.5vw, 86px);
  height: clamp(60px, 5.2vw, 96px);
  object-fit: contain;
  display: block;
}

.board-title {
  text-align: center;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  justify-self: center;
}

.board-title h1 {
  margin: 0;
  color: var(--red);
  font-family: "PanicHand", "MilkRun", sans-serif;
  font-size: 96px;
  line-height: 0.95;
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
  max-width: 100%;
  overflow: visible;
}

.board-title p {
  margin: 4px 0 0;
  color: var(--muted);
  font-family: "Geist", "Geist Fallback", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0;
  overflow-wrap: normal;
}

.board-ledger {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 26px 0 0;
  border-top: 1px solid var(--line);
  padding: 12px 0 0;
}

.stat {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.stat strong {
  font-family: "Geist", "Geist Fallback", system-ui, sans-serif;
  font-size: 34px;
  line-height: 1;
  font-weight: 400;
  color: var(--ink);
}

.stat span {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.sheet-jump {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
}

.sheet-jump a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 10px;
  text-decoration: none;
  background: #ffffff;
}

.sheet-key {
  margin: 0;
  padding: 0;
  font-family: var(--ui-font);
}

.sheet-key-sheet {
  padding-top: 28px;
  padding-bottom: 30px;
}

.sheet-key h2 {
  margin: 0 0 18px;
  font-family: "Geist", "Geist Fallback", system-ui, sans-serif;
  font-size: 28px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0;
}

.key-topline {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(360px, 1.15fr);
  gap: clamp(28px, 6vw, 96px);
  align-items: start;
}

.key-block {
  min-width: 0;
}

.key-block h3,
.key-points strong,
.key-other-sheets dt {
  font-family: "Geist", "Geist Fallback", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.05;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0;
}

.key-block h3 {
  margin: 0 0 7px;
}

.key-block p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.35;
}

.key-block p + p {
  margin-top: 10px;
}

.key-points {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 18px 0 0;
  padding: 0;
}

.key-points li {
  min-width: 0;
}

.key-points strong {
  display: block;
  margin-bottom: 3px;
}

.key-points span,
.key-other-sheets dd {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.3;
}

.key-other-sheets {
  margin-top: 22px;
  padding-top: 17px;
  border-top: 1px solid var(--line);
}

.key-other-sheets dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 32px;
  margin: 0;
}

.key-other-sheets dt {
  margin: 0 0 4px;
}

.key-other-sheets dd {
  margin: 0;
}

.marker-legend {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
  margin: 12px 0 12px;
  padding: 0;
}

.marker-legend li {
  min-width: 0;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.marker-legend img {
  width: 38px;
  height: 14px;
  object-fit: fill;
  mix-blend-mode: multiply;
}

.marker-legend .legend-swipe {
  width: 38px;
  height: 14px;
  background: var(--mc);
  opacity: 0.62;
  mix-blend-mode: multiply;
  border-radius: 1px;
  clip-path: polygon(1% 12%, 99% 3%, 100% 82%, 93% 100%, 1% 92%);
}

.marker-legend span {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
}

.marker-legend strong {
  color: var(--ink);
  font-weight: 700;
}

.marker-legend em {
  color: var(--muted);
  font-style: normal;
  min-width: 0;
}

.song-panel {
  margin: 0;
}

.song-panel h3 {
  min-height: 24px;
  display: flex;
  align-items: center;
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 700;
  text-decoration: underline;
}

.songs.grid4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(20px, 3vw, 58px);
}

.songs.grid3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(18px, 2.6vw, 48px);
}

.songs .col {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.rotation-song {
  --song-font-size: 17px;
  display: flex;
  align-items: baseline;
  max-width: 100%;
  min-width: 0;
  min-height: 27px;
  margin: 0 0 6px;
  font-size: var(--song-font-size);
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: -0.012em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: normal;
  text-wrap: nowrap;
}

.marker-wrap {
  display: inline-flex;
  align-items: baseline;
  min-width: 0;
  max-width: 100%;
  flex: 0 1 auto;
  line-height: 1;
  white-space: nowrap;
}

.rotation-song.has-date .marker-wrap {
  max-width: 100%;
}

.marker-target {
  position: relative;
  display: inline-block;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
}

.marker-text {
  position: relative;
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  z-index: 1;
  letter-spacing: 0;
}

.rotation-song sup {
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
}

.marker-mask {
  position: absolute;
  left: calc(-0.16em - var(--sj, 0px));
  right: calc(-0.12em - var(--ej, 0px));
  top: -0.02em;
  bottom: -0.02em;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}

.marker-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  opacity: 0.9;
  mix-blend-mode: multiply;
}

sup {
  font-size: 0.55em;
  position: relative;
  top: -0.5em;
  vertical-align: baseline;
  line-height: 0;
  margin-left: 2px;
}

.date-sup {
  flex: 0 0 auto;
  margin-left: 7px;
}

.add-on-date {
  margin-left: 5px;
  font-family: "Geist", "Geist Fallback", system-ui, sans-serif;
  font-size: 0.72em;
  line-height: 1;
  vertical-align: 0.03em;
}

.hand-addon {
  font-family: "PanicHand", "MilkRun", sans-serif;
  font-size: 0.78em;
  letter-spacing: 0;
  line-height: 1;
  display: inline-block;
  vertical-align: -0.02em;
}

.spacer {
  visibility: hidden;
}

.latest-setlist,
.setlist-section,
.tour-date-section,
.shelf-watch,
.tour-stats,
.nick-feature {
  width: 100%;
  margin: 36px auto;
}

.latest-setlist {
  margin-top: 0;
}

.tour-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.data-heading {
  border-bottom: 1px solid var(--ink);
  padding-bottom: 12px;
}

.data-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}

.data-toolbar {
  display: flex;
  align-items: end;
  gap: 12px;
  min-width: 0;
  padding: 18px 0 4px;
}

.show-filter {
  display: grid;
  gap: 6px;
  min-width: min(360px, 50%);
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
}

.show-filter select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  padding: 0 34px 0 11px;
  color: var(--ink);
  font: 600 13px/1 var(--ui-font);
}

.mobile-sort {
  display: none;
}

.type-filter {
  display: inline-flex;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 3px;
  background: #f5f5f3;
}

.type-filter button {
  border: 0;
  border-radius: 3px;
  background: transparent;
  padding: 0 12px;
  color: var(--muted);
  font: 650 12px/1 var(--ui-font);
  cursor: pointer;
}

.type-filter button.is-active {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 2px rgb(0 0 0 / 8%);
}

.show-filter-status {
  margin-left: auto;
  padding-bottom: 11px;
  color: var(--muted);
  font-size: 12px;
}

.tour-table-wrap {
  max-height: 560px;
  overflow: auto;
  margin-top: 24px;
  border-bottom: 1px solid var(--line);
}

.tour-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ui-font);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.tour-table th,
.tour-table td {
  border-top: 1px solid var(--line);
  padding: 11px 12px;
  text-align: left;
  white-space: nowrap;
}

.tour-table tbody th {
  width: 34%;
  font-weight: 600;
}

.signal-cell {
  min-width: 154px;
}

.signal-cell strong,
.signal-cell small {
  display: block;
}

.signal-cell strong {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
}

.rarity-symbol {
  min-width: 28px;
  display: flex;
  align-items: center;
}

.rarity-symbol svg {
  display: block;
  height: 10px;
  width: auto;
}

.rarity-symbol svg.rarity-hyper {
  height: 15px;
}

.signal-cell small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.index-method {
  border-bottom: 1px solid var(--line);
}

.index-method > summary {
  list-style: none;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.index-method > summary::-webkit-details-marker { display: none; }

.index-method > summary::after {
  content: "+";
  color: var(--ink);
  font-size: 18px;
  font-weight: 400;
}

.index-method[open] > summary::after { content: "\2212"; }

.index-method > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  padding: 0 0 20px;
}

.index-method p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.index-method strong { color: var(--ink); }

.tour-table tbody tr.is-selected-show {
  background: #f7eeee;
  box-shadow: inset 3px 0 0 var(--red);
}

.tour-table tbody tr[hidden] {
  display: none;
}

.tour-table thead th {
  position: sticky;
  z-index: 2;
  top: 0;
  background: var(--paper);
  padding: 0;
}

.tour-table button {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 12px;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}

.tour-table button:hover,
.tour-table button:focus-visible,
.tour-table th[aria-sort] button {
  color: var(--ink);
}

.tour-table button span {
  margin-left: 4px;
}

.shelf-watch-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.data-table-wrap {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ui-font);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.data-table th,
.data-table td {
  border-bottom: 1px solid var(--line);
  padding: 12px 10px;
  text-align: left;
}

.data-table thead th {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
}

.data-table tbody th {
  width: 48%;
  padding-left: 0;
  font-weight: 650;
}

.data-table td:last-child,
.data-table th:last-child {
  padding-right: 0;
  text-align: right;
}

.slp-progress {
  display: inline-block;
  width: 72px;
  height: 4px;
  margin-left: 9px;
  overflow: hidden;
  vertical-align: middle;
  background: #e8e8e6;
}

.slp-progress i {
  display: block;
  height: 100%;
  background: var(--ink);
}

.shelf-watch-list li {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) minmax(210px, 0.8fr) minmax(110px, 0.35fr);
  gap: 24px;
  align-items: center;
  min-width: 0;
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
}

.shelf-watch-song {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.shelf-watch-song strong {
  font-family: var(--ui-font);
  font-size: 16px;
  line-height: 1.05;
  font-weight: 650;
}

.shelf-watch-song span,
.shelf-watch-slp span,
.shelf-watch-remaining span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
}

.shelf-watch-slp,
.shelf-watch-remaining {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.shelf-watch-slp strong,
.shelf-watch-remaining strong {
  flex: 0 0 auto;
  font-family: var(--ui-font);
  font-size: 23px;
  line-height: 1;
  font-weight: 650;
}

.shelf-watch-remaining {
  justify-self: end;
}

.nick-disclosure > summary {
  list-style: none;
  cursor: default;
}

.nick-disclosure > summary::-webkit-details-marker {
  display: none;
}

.nick-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.nick-progress {
  display: grid;
  gap: 9px;
  margin: 22px 0 4px;
}

.nick-progress > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.nick-progress strong {
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
}

.nick-progress span {
  color: var(--muted);
  font-size: 13px;
}

.nick-progress-track {
  display: flex;
  width: 100%;
  height: 8px;
  overflow: hidden;
  background: #e8e8e6;
}

.nick-progress-track i {
  display: block;
  height: 100%;
}

.nick-progress-track .is-original { background: var(--ink); }
.nick-progress-track .is-cover { background: var(--red); }

.progress-key {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px 20px !important;
}

.progress-key span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.progress-key i {
  width: 8px;
  height: 8px;
}

.progress-key .key-original { background: var(--ink); }
.progress-key .key-cover { background: var(--red); }
.progress-key .key-unplayed { background: #e8e8e6; }

.nick-stat {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 16px 18px 17px 0;
}

.nick-stat + .nick-stat {
  border-left: 1px solid var(--line);
  padding-left: 18px;
}

.nick-stat strong {
  font-family: var(--ui-font);
  font-size: 28px;
  line-height: 1;
  font-weight: 650;
}

.nick-stat span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
  text-transform: uppercase;
}

.nick-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
}

.nick-controls .nick-ranking-status {
  margin-left: auto;
  color: var(--muted);
  font: 600 12px/1 var(--ui-font);
}

.nick-ranking-head {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 12px;
  margin-top: 16px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--line);
}

.nick-ranking-head .nrh-col {
  color: var(--muted);
  font: 500 11px/1 var(--ui-font);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.nick-ranking-head .nrh-plays {
  min-width: 50px;
  text-align: right;
}

.nick-ranking-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 28px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
}

.nick-ranking-heading h3 {
  margin: 0;
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
}

.nick-ranking-heading span {
  color: var(--muted);
  font-size: 12px;
}

.nick-ranking {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nick-ranking li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  border-bottom: 1px solid var(--line);
  padding: 11px 0;
}

.nick-rank {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}

.nick-song,
.nick-plays {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.nick-song strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  line-height: 1.1;
  font-weight: 650;
}

.nick-song small,
.nick-plays small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.1;
}

.nick-plays {
  min-width: 50px;
  text-align: right;
}

.nick-plays strong {
  font-size: 20px;
  line-height: 1;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.nick-played-panel {
  border-bottom: 1px solid var(--line);
}

.nick-played-panel summary {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 24px;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  cursor: pointer;
  font-family: var(--ui-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
}

.nick-played-panel summary::-webkit-details-marker {
  display: none;
}

.nick-played-panel summary::after {
  content: "+";
  justify-self: end;
  font-family: var(--ui-font);
  font-size: 22px;
  font-weight: 400;
}

.nick-played-panel[open] summary::after {
  content: "\2212";
}

.nick-played-panel summary strong {
  font-family: var(--ui-font);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.nick-played-panel .nick-ranking {
  border-top: 1px solid var(--line);
}

.nick-ranking.is-compact li {
  padding: 9px 0;
}

.nick-ranking li.is-zero .nick-song,
.nick-ranking li.is-zero .nick-plays {
  color: var(--muted);
}

.community-links {
  width: min(1180px, 100%);
  margin: 34px auto 46px;
  text-align: center;
}

.ticket-link {
  display: block;
  width: max-content;
  margin: 0 auto 34px;
  color: #007cbb;
  font-size: 32px;
  line-height: 1;
  text-decoration: none;
}

.posse-link {
  display: block;
  width: max-content;
  margin: 0 auto;
  text-decoration: none;
}

.posse-link img {
  display: block;
  width: min(200px, 70vw);
  height: auto;
  margin: 0 auto;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 4px solid var(--ink);
  padding-bottom: 8px;
  margin-bottom: 16px;
}

.section-heading h2 {
  margin: 0;
  font-family: var(--ui-font);
  font-size: var(--type-section);
  line-height: 1;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0;
}

.section-heading span {
  color: var(--muted);
  font-family: var(--ui-font);
  font-size: 13px;
}

.setlist-feature {
  display: grid;
  grid-template-columns: minmax(320px, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
  margin-bottom: 36px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.setlist-feature.no-image {
  grid-template-columns: 1fr;
}

.setlist-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.setlist-list {
  border-top: 1px solid var(--line);
}

.setlist-row {
  border-bottom: 1px solid var(--line);
}

.setlist-row > summary {
  list-style: none;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto 20px;
  gap: 18px;
  align-items: center;
  min-height: 68px;
  cursor: pointer;
}

.setlist-row > summary::-webkit-details-marker { display: none; }

.setlist-row time {
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.show-place {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.show-place strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 650;
}

.show-place small {
  color: var(--muted);
  font-size: 12px;
}

.show-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.show-action {
  position: relative;
  z-index: 2;
  color: var(--ink);
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
}

.details-action {
  border-bottom: 1px solid currentColor;
}

.play-action {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid var(--ink);
  border-radius: 50%;
  font-size: 10px;
  line-height: 1;
}

.play-action span { margin-left: 2px; }

.row-toggle::before {
  content: "+";
  color: var(--muted);
  font-size: 20px;
}

.setlist-row[open] .row-toggle::before { content: "\2212"; }

.setlist-row-body {
  display: grid;
  grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr);
  gap: 22px;
  padding: 8px 0 24px 130px;
}

.setlist-row-body .setlist-image { margin: 0; }

.setlist-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 0 22px;
}

.setlist-image {
  margin: 0 0 12px;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.setlist-feature .setlist-image {
  margin: 0;
  min-width: 0;
}

.setlist-feature .setlist-copy {
  padding: clamp(8px, 1.5vw, 22px) 0 0;
}

.setlist-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: transparent;
}

.setlist-archive-panel > summary {
  display: none;
}

.setlist-archive-panel > .setlist-grid {
  margin-top: 0;
}

.setlist-text {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
  font-size: var(--type-dense);
  line-height: 1.35;
}

.setlist-text h3 {
  margin: 0 0 3px;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0;
}

.show-heading {
  margin: 0 0 26px;
}

.show-heading time {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  text-transform: uppercase;
}

.setlist-text .show-heading h3 {
  margin: 0;
  font-size: clamp(26px, 2.3vw, 34px);
  line-height: 1.04;
  font-weight: 700;
}

.setlist-text .show-heading p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.25;
}

.setlist-feature .setlist-sets {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
}

.setlist-feature .setlist-sets p {
  margin: 0;
}

.setlist-feature .setlist-sets p + p {
  margin-top: 18px;
}

.setlist-annotations {
  padding: 17px 0 4px;
}

.setlist-feature .setlist-annotations .guest-notes,
.setlist-feature .setlist-annotations .notes {
  margin-top: 0;
}

.setlist-feature .setlist-annotations .guest-notes + .notes {
  margin-top: 8px;
}

.setlist-text p {
  margin: 8px 0;
  font-size: inherit;
  line-height: inherit;
}

.setlist-text strong {
  color: var(--ink);
}

.guest-notes,
.notes {
  margin: 10px 0 0;
  padding-left: 0;
  font-size: inherit;
  line-height: inherit;
}

.guest-notes {
  color: var(--ink);
}

.notes {
  color: var(--muted);
}

.guest-notes span,
.notes span {
  display: block;
}

.setlist-text .guest-sup {
  font-size: 0.62em;
  top: -0.55em;
  margin-left: 1px;
}

.notes .guest-sup {
  margin-left: 0;
  margin-right: 2px;
}

.setlist-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  font-size: inherit;
  line-height: inherit;
}

.setlist-links a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tour-dates {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--line);
}

.tour-dates li {
  display: grid;
  grid-template-columns: 100px minmax(160px, 0.65fr) minmax(220px, 1.35fr) 100px;
  gap: 18px;
  align-items: baseline;
  min-height: 48px;
  padding: 13px 0 12px;
  border-bottom: 1px solid var(--line);
}

.tour-dates li time {
  font-family: var(--ui-font);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.tour-dates li strong {
  font-weight: 650;
}

.tour-dates li span {
  color: var(--muted);
}

.tour-dates li em {
  justify-self: end;
  color: var(--muted);
  font-style: normal;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: uppercase;
}

.tour-dates li.is-upcoming {
  background: rgba(0, 0, 0, 0.018);
}

.archive-list a {
  color: var(--ink);
  font-weight: 700;
}

.archive-main {
  width: min(1180px, calc(100% - 32px));
  margin: 28px auto 56px;
}

.tour-review-main {
  width: min(1880px, calc(100% - 56px));
  margin: 28px auto 56px;
}

.tour-review-main > .archive-page {
  width: min(1180px, 100%);
  margin: 0 auto 34px;
}

.archive-page,
.archive-index {
  background: #ffffff;
  border: 7px solid rgba(0, 0, 0, 0.045);
  border-radius: 6px;
  padding: clamp(16px, 3vw, 32px);
}

.archive-title {
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}

.archive-title h1 {
  margin: 0;
  font-family: var(--sl-display, "Bricolage", "Bricolage Fallback", "Geist", "Geist Fallback", system-ui, sans-serif);
  font-size: var(--type-archive-title);
  line-height: 1.04;
  font-weight: 640;
  letter-spacing: -0.02em;
}

.archive-title p {
  margin: 0 0 8px;
  color: var(--muted);
}

.page-graphic-title {
  display: grid;
  justify-items: center;
  gap: 14px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--line);
  padding: 4px 0 22px;
  text-align: center;
}

.page-graphic-title img {
  display: block;
  width: auto;
  max-width: min(300px, 78vw);
  max-height: 180px;
  object-fit: contain;
}

.page-graphic-title h1 {
  margin: 0;
  font-family: var(--sl-display, "Bricolage", "Bricolage Fallback", "Geist", "Geist Fallback", system-ui, sans-serif);
  font-size: var(--type-archive-title);
  line-height: 1.04;
  font-weight: 640;
  letter-spacing: -0.02em;
}

.archive-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.archive-tags span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 8px;
  color: var(--muted);
  font-size: 12px;
}

.archive-content {
  overflow-wrap: break-word;
}

.archive-content img,
.archive-content iframe,
.archive-content embed,
.archive-content object {
  max-width: 100%;
}

.archive-content img {
  height: auto;
}

.archive-content table {
  max-width: 100%;
}

.shelf-explainer {
  max-width: 820px;
  font-size: 18px;
  line-height: 1.5;
}

.shelf-explainer p {
  margin: 0 0 14px;
}

.shelf-current-update h2 {
  margin: 0 0 14px;
  font-family: var(--ui-font);
  font-size: var(--type-section);
  line-height: 1;
  font-weight: 700;
}

.shelf-current-update {
  max-width: 880px;
  margin: 0 auto 34px;
}

.shelf-addition-group {
  margin-top: 22px;
}

.shelf-addition-group h3 {
  margin: 0 0 8px;
  font-family: var(--ui-font);
  font-size: 18px;
}

.shelf-addition-group ul {
  columns: 2;
  column-gap: 44px;
  margin: 0;
  padding-left: 20px;
}

.shelf-addition-group li {
  break-inside: avoid;
  margin: 0 0 7px;
}

.legacy-shelf-notes {
  border-top: 1px solid var(--line);
  padding-top: 28px;
}

.legacy-shelf-notes > h2 {
  margin: 0 0 20px;
  font-family: var(--ui-font);
  font-size: var(--type-section);
}

.current-review-link {
  margin: 0 0 28px;
  text-align: center;
}

.shelf-current-counts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 22px 0 8px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.shelf-current-counts div {
  display: grid;
  gap: 3px;
  padding: 15px 16px 16px 0;
}

.shelf-current-counts div + div {
  border-left: 1px solid var(--line);
  padding-left: 16px;
}

.shelf-current-counts strong {
  font-size: 26px;
  line-height: 1;
}

.shelf-current-counts span,
.shelf-watch-block > p {
  color: var(--muted);
}

.shelf-page-watch li {
  grid-template-columns: minmax(180px, auto) minmax(0, 1fr);
}

.shelf-page-links {
  color: var(--muted);
}

.shelf-page-links a,
.movement-list a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.shelf-movement {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.shelf-movement h2,
.legacy-shelf-notes h2 {
  margin: 0 0 14px;
  font-family: var(--sl-display, "Bricolage", "Bricolage Fallback", "Geist", "Geist Fallback", system-ui, sans-serif);
  font-size: 26px;
  line-height: 1.05;
  font-weight: 640;
  letter-spacing: -0.02em;
}

.movement-block {
  margin: 20px 0;
}

.movement-block h3 {
  margin: 0 0 8px;
  font-family: var(--sl-display, "Bricolage", "Bricolage Fallback", "Geist", "Geist Fallback", system-ui, sans-serif);
  font-size: 19px;
  line-height: 1.1;
  font-weight: 620;
  letter-spacing: -0.01em;
}

.movement-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.movement-list li {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 3px 8px;
  align-items: baseline;
}

.generated-review-list li {
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
}

.review-ledger {
  margin-top: 20px;
}

.review-top-songs {
  columns: 2;
  column-gap: 42px;
  margin: 0;
  padding-left: 26px;
  font-size: 18px;
}

.review-top-songs li {
  break-inside: avoid;
  margin: 0 0 7px;
}

.review-top-songs strong {
  font-family: "Geist", "Geist Fallback", system-ui, sans-serif;
  font-weight: 600;
}

.review-top-songs span {
  color: var(--muted);
  margin-left: 6px;
}

.movement-list strong {
  font-family: "Geist", "Geist Fallback", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 600;
}

.movement-list span {
  color: var(--muted);
}

.legacy-shelf-notes {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.legacy-note {
  color: var(--muted);
}

.archive-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.archive-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 8px 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.archive-list span,
.archive-list em {
  color: var(--muted);
  font-style: normal;
  font-size: 13px;
}

.archive-list em {
  grid-column: 1 / -1;
}

.origins-main {
  width: min(1240px, calc(100% - 32px));
}

.origin-hero {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
}

.origin-fish {
  display: block;
  width: 150px;
  height: auto;
}

.origin-hero p,
.origin-title p {
  margin: 0 0 7px;
  color: var(--muted);
  font-family: var(--sl-mono, "Geist Mono", "Geist Mono Fallback", ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.origin-hero h1 {
  margin: 0;
  font-family: var(--sl-display, "Bricolage", "Bricolage Fallback", "Geist", "Geist Fallback", system-ui, sans-serif);
  font-size: 46px;
  line-height: 1;
  font-weight: 660;
  letter-spacing: -0.02em;
}

.origin-hero span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
}

.origin-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.origin-card {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 7px;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px;
  background: #ffffff;
}

.origin-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--cream);
}

.origin-card span {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.origin-card strong {
  font-family: var(--sl-display, "Bricolage", "Bricolage Fallback", "Geist", "Geist Fallback", system-ui, sans-serif);
  font-size: 19px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.origin-back {
  margin-bottom: 14px;
}

.origin-back a,
.origin-source a,
.origin-nav a,
.origin-body a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.origin-layout {
  display: grid;
  grid-template-columns: minmax(220px, 340px) minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

.origin-image {
  margin: 0;
}

.origin-image img {
  display: block;
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  background: var(--cream);
}

.origin-body {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
  font-size: 17px;
  line-height: 1.52;
}

.origin-body p {
  margin: 0 0 16px;
}

.origin-stats {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
  font-family: var(--sl-mono, "Geist Mono", "Geist Mono Fallback", ui-monospace, monospace);
  font-size: 13px;
  line-height: 1.7;
}

.origin-source {
  color: var(--muted);
  font-size: 14px;
}

.origin-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 26px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.site-foot {
  width: 100%;
  margin: 0;
  border-top: 1px solid var(--line);
  background: #f7f7f6;
  padding: 48px 28px 24px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.4;
}

.site-foot-inner {
  width: min(1380px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(260px, 1.5fr) repeat(3, minmax(120px, 1fr));
  gap: 40px 48px;
  align-items: start;
}

.site-foot a {
  color: var(--ink);
  text-decoration: none;
}

.footer-lead {
  max-width: 430px;
}

.footer-brand {
  display: inline-block;
  font-size: 28px;
  line-height: 1;
  font-weight: 750;
  letter-spacing: 0;
}

.footer-lead p {
  max-width: 380px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-links > strong {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
}

.footer-links a {
  width: max-content;
  max-width: 100%;
  font-size: 14px;
  text-underline-offset: 4px;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  text-decoration: underline;
}

.social-links {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}

.social-links a {
  display: inline-flex;
  align-items: center;
}

/* Icon-only social row: keep labels for a11y + QA, hide visually. */
.social-links a > span:last-child {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.social-mark {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 50%;
  background: var(--ink);
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.social-mark.instagram::before {
  content: "";
  width: 9px;
  height: 9px;
  border: 1.5px solid #ffffff;
  border-radius: 3px;
}

.social-mark.instagram::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 7px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #ffffff;
}

.footer-bottom {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
  color: var(--muted);
  font-size: 12px;
}

.footer-legal {
  display: flex;
  gap: 8px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.footer-sources {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.footer-sources a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-bottom-links {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-left: auto;
  font-size: 12px;
}

@media (max-width: 900px) {
  .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .site-head {
    width: min(100% - 28px, 1180px);
  }

  .site-foot-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-lead,
  .footer-legal {
    grid-column: 1 / -1;
  }

  .masthead-row {
    min-height: 112px;
  }

  .brand-logo {
    width: min(320px, 64vw);
  }

  .header-row {
    grid-template-columns: minmax(76px, auto) minmax(0, 1fr) minmax(76px, auto);
    gap: clamp(8px, 2.5vw, 18px);
    margin-bottom: 26px;
  }

  .jump-links {
    width: 100%;
    justify-content: center;
    gap: 10px 24px;
    font-size: 16px;
  }

  .nums.left,
  .nums.right {
    justify-self: stretch;
  }

  .nums {
    gap: clamp(5px, 1.4vw, 10px);
  }

  .nums.left {
    justify-content: flex-start;
  }

  .nums.right {
    justify-content: flex-end;
  }

  .marker-num {
    width: clamp(36px, 7vw, 58px);
    height: clamp(42px, 8vw, 66px);
  }

  .board-title h1 {
    font-size: 48px;
    white-space: nowrap;
    overflow-wrap: normal;
  }

  .songs.grid4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .songs.grid3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rotation-song {
    --song-font-size: 16.5px;
  }

  .board-ledger,
  .key-topline,
  .key-other-sheets dl,
  .setlist-feature,
  .setlist-grid {
    grid-template-columns: 1fr;
  }

  .origin-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .origin-layout {
    grid-template-columns: 1fr;
  }

  .origin-image img {
    width: min(420px, 100%);
  }
}

@media (max-width: 720px) {
  .shelf-current-counts {
    grid-template-columns: 1fr;
  }

  .shelf-current-counts div + div {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
  }

  .shelf-page-watch li {
    grid-template-columns: 1fr;
  }

  .nick-summary,
  .data-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .data-toolbar {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .index-method > div {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .show-filter {
    min-width: 0;
  }

  .type-filter {
    width: 100%;
  }

  .type-filter button {
    flex: 1;
  }

  .show-filter-status {
    margin-left: 0;
    padding-bottom: 0;
  }

  .nick-disclosure > summary {
    cursor: pointer;
    grid-template-columns: minmax(0, 1fr) auto 24px;
  }

  .nick-disclosure > summary::after {
    content: "+";
    justify-self: end;
    font-size: 22px;
    line-height: 1;
    font-weight: 400;
  }

  .nick-disclosure[open] > summary::after {
    content: "\2212";
  }

  .nick-disclosure > .nick-feature-body {
    padding-top: 18px;
  }

  .tour-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nick-stat:nth-child(3) {
    border-left: 0;
  }

  .nick-stat:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .tour-summary .nick-stat:nth-child(3) {
    border-left: 0;
  }

  .tour-summary .nick-stat:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .rotation-song {
    --song-font-size: 16px;
  }

  .setlist-archive-panel > summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 46px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 0;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
  }

  .setlist-archive-panel > summary::-webkit-details-marker {
    display: none;
  }

  .setlist-archive-panel > summary::after {
    content: "+";
    margin-left: 10px;
    font-size: 20px;
    font-weight: 400;
  }

  .setlist-archive-panel[open] > summary::after {
    content: "\2212";
  }

  .setlist-archive-panel > summary strong {
    margin-left: auto;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
  }

  .setlist-archive-panel > .setlist-list {
    margin-top: 18px;
  }

  .setlist-row > summary {
    grid-template-columns: 84px minmax(0, 1fr) auto 16px;
    gap: 10px;
    min-height: 64px;
  }

  .setlist-row time {
    font-size: 11px;
  }

  .details-action {
    display: none;
  }

  .setlist-row-body {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 4px 0 22px;
  }

  .songs.grid4,
  .songs.grid3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  

  main,
  .site-head,
  .tour-review-main {
    width: min(calc(100% - 20px), 1180px);
  }

  .latest-setlist,
  .setlist-section,
  .tour-date-section,
  .shelf-watch,
  .tour-stats,
  .nick-feature {
    width: 100%;
  }

  .masthead-row {
    grid-template-columns: 1fr;
    min-height: 98px;
  }

  .brand {
    grid-column: 1;
  }

  .brand-logo {
    width: min(270px, 72vw);
  }

  .header-social {
    display: none;
  }

  .jump-links {
    display: none;
  }

  .mobile-nav {
    display: block;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .mobile-nav summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 46px;
    padding: 0 2px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
  }

  .mobile-nav summary::-webkit-details-marker {
    display: none;
  }

  .menu-icon {
    width: 20px;
    height: 16px;
    display: grid;
    align-content: space-between;
  }

  .menu-icon i {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    transition: transform 140ms ease, opacity 140ms ease;
  }

  .mobile-nav[open] .menu-icon i:first-child {
    transform: translateY(7px) rotate(45deg);
  }

  .mobile-nav[open] .menu-icon i:nth-child(2) {
    opacity: 0;
  }

  .mobile-nav[open] .menu-icon i:last-child {
    transform: translateY(-7px) rotate(-45deg);
  }

  .mobile-nav-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 20px;
    border-top: 1px solid var(--line);
    padding: 7px 0 10px;
  }

  .mobile-nav-links a {
    display: flex;
    align-items: center;
    min-height: 42px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
  }

  .mobile-nav-links a[aria-current="page"] {
    color: #b94a4a;
  }

  .laminate {
    padding: 13px 12px 18px;
  }

  .header-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "left title right";
    gap: 4px;
    align-items: center;
    margin-bottom: 24px;
  }

  .nums.left {
    grid-area: left;
  }

  .nums.right {
    grid-area: right;
  }

  .nums {
    gap: 2px;
  }

  .board-title {
    grid-area: title;
  }

  .marker-num {
    width: 20px;
    height: 24px;
  }

  .board-title h1 {
    font-size: 24px;
    line-height: 1;
  }

  .section-heading h2 {
    font-size: 24px;
  }

  .tour-table-wrap {
    max-height: 500px;
  }

  .tour-table th,
  .tour-table td {
    padding: 10px 8px;
  }

  .tour-table button {
    padding: 11px 8px;
  }

  .tour-table th:nth-child(6),
  .tour-table td:nth-child(6) {
    display: none;
  }

  .mobile-sort {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 650;
    text-transform: uppercase;
  }

  .mobile-sort select {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: #fff;
    padding: 0 34px 0 11px;
    color: var(--ink);
    font: 600 13px/1 var(--ui-font);
  }

  .tour-table-wrap {
    overflow: visible;
    max-height: none;
  }

  .tour-table,
  .tour-table tbody,
  .tour-table tr,
  .tour-table th,
  .tour-table td {
    display: block;
    width: auto;
  }

  .tour-table thead {
    display: none;
  }

  .tour-table tbody tr {
    display: grid;
    position: relative;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 18px;
    border-top: 1px solid var(--line);
    padding: 14px 8px;
  }

  .tour-table tbody tr[hidden] {
    display: none;
  }

  .tour-table tbody th,
  .tour-table tbody td {
    border: 0;
    padding: 0;
    white-space: normal;
  }

  .tour-table tbody th {
    grid-column: 1 / -1;
    align-self: center;
    justify-self: stretch;
    box-sizing: border-box;
    width: 100%;
    padding-right: 56px;
    font-size: 15px;
  }

  .tour-table .plays-cell {
    position: absolute;
    top: 14px;
    right: 8px;
    text-align: right;
    font-size: 18px;
    font-weight: 700;
  }

  .tour-table .plays-cell::before {
    content: "PLAYS";
    display: block;
    margin-bottom: 3px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 650;
  }

  .tour-table .rarity-cell {
    grid-column: 1;
  }

  .tour-table .heat-cell {
    grid-column: 2;
    text-align: right;
  }

  .tour-table tbody td:nth-child(5) {
    display: none;
  }

  .signal-cell {
    min-width: 0;
  }

  .setlist-feature {
    gap: 22px;
    margin-bottom: 46px;
  }

  .setlist-feature .setlist-copy {
    padding-top: 0;
  }

  .show-heading {
    margin-bottom: 20px;
  }

  .setlist-text .show-heading h3 {
    font-size: 27px;
  }

  .setlist-feature .setlist-sets {
    padding: 18px 0;
  }

  .board-ledger {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .setlist-text {
    font-size: 14px;
  }

  .key-points,
  .marker-legend,
  .review-top-songs {
    grid-template-columns: 1fr;
    columns: 1;
  }

  .shelf-watch-list li {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px 12px;
    padding: 11px 0;
  }

  .shelf-watch-song {
    grid-column: 1 / -1;
  }

  .shelf-watch-slp {
    grid-column: 1;
  }

  .shelf-watch-remaining {
    grid-column: 2;
  }

  .shelf-watch-slp strong,
  .shelf-watch-remaining strong {
    font-size: 22px;
  }

  .song-panel {
    border-bottom: 1px solid var(--line);
  }

  .song-panel h3 {
    min-height: 30px;
    margin: 4px 0 10px;
  }

  .rotation-song {
    --song-font-size: 15px;
  }

  .tour-dates li {
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 4px 10px;
    align-items: start;
    padding: 12px 0;
  }

  .tour-dates li strong,
  .tour-dates li span {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .tour-dates li span {
    grid-column: 2;
  }

  .tour-dates li em {
    grid-column: 2;
    grid-row: 3;
    justify-self: start;
    margin-top: 3px;
  }

  .archive-list li {
    grid-template-columns: 1fr;
  }

  .shelf-addition-group ul {
    columns: 1;
  }

  .origin-hero {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .origin-fish {
    margin: 0 auto;
  }

  .origin-grid {
    grid-template-columns: 1fr;
  }

  .origin-card {
    grid-template-columns: 84px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
  }

  .origin-card img {
    grid-row: 1 / span 2;
  }

  .origin-body {
    font-size: 16px;
  }

  .origin-hero h1 {
    font-size: 38px;
  }

  .shelf-explainer {
    font-size: 16px;
  }

  .shelf-movement h2,
  .legacy-shelf-notes h2 {
    font-size: 24px;
  }

  .movement-block h3 {
    font-size: 20px;
  }

  .site-foot {
    padding: 34px 18px 22px;
  }

  .site-foot-inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 24px;
  }

  .footer-lead,
  .footer-bottom {
    grid-column: 1 / -1;
  }

  .footer-legal {
    flex-wrap: wrap;
    gap: 4px 7px;
  }

  .footer-bottom-links {
    margin-left: 0;
  }
}

@media (max-width: 360px) {
  .marker-num {
    width: 18px;
    height: 22px;
  }

  .board-title h1 {
    font-size: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-icon i {
    transition: none;
  }
}


}
/* ============================================================
   STAGELIGHT — homepage-scoped dark redesign (body.stagelight)
   The site is the glass case; the sheets stay paper.
   ============================================================ */
body.stagelight {
  --sl-bg: #0b0b0c;
  --sl-ink: #f2f2f0;
  --sl-muted: rgba(242, 242, 240, 0.64);
  --sl-faint: rgba(242, 242, 240, 0.40);
  /* ---- HAIRLINES: exactly three border alphas site-wide ---- */
  --sl-line-faint: rgba(255, 255, 255, 0.05);   /* faint row dividers */
  --sl-line: rgba(255, 255, 255, 0.08);         /* default hairline */
  --sl-line-strong: rgba(255, 255, 255, 0.16);  /* hover / active / open borders */
  --sl-display: "Bricolage", "Bricolage Fallback", "Geist", "Geist Fallback", system-ui, sans-serif;
  --sl-mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, monospace;
  /* ---- CANONICAL GLASS: background + blur(26px) saturate(1.4) + 1px var(--sl-line)
     border + var(--sl-r-lg) radius + var(--sl-shadow-1). See .sl-glass utility. ---- */
  --sl-glass: linear-gradient(180deg, rgba(28,28,31,0.55), rgba(18,18,21,0.42));
  /* ---- ELEVATION: three neutral recipes only (+ laminate is its own system) ---- */
  --sl-shadow-1: 0 24px 60px -28px rgba(0,0,0,0.75), 0 2px 10px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.07); /* subtle card */
  --sl-shadow-2: 0 24px 60px -18px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.08); /* raised / hover / popover */
  --sl-shadow-3: 0 40px 90px -30px rgba(0,0,0,0.9), 0 0 0 1px var(--sl-line), inset 0 1px 0 rgba(255,255,255,0.08); /* modal / laminate-level */
  --sl-glass-shadow: var(--sl-shadow-1); /* canonical glass elevation = shadow-1 */
  /* ---- RADII: sm / md / lg + pill (four values) ---- */
  --sl-r-sm: 6px;
  --sl-r-md: 12px;
  --sl-r-lg: 20px;
  --sl-r-pill: 999px;
  --sl-r: var(--sl-r-lg); /* legacy alias, unchanged 20px meaning */
  /* ---- TYPE SCALE (px, snapped literals): 12 / 13.5 / 15 / 17 / 21 / 26 / 34 / 46
     Intentional off-scale exceptions (snapping would shift visual hierarchy):
       - clamp() hero sizes (.tour-hero/.origin-hero/.nf-title/mega display) keep
         their fluid min/max endpoints so the desktop-active size doesn't jump;
       - .sc-city latest-show display headline (28/38/40/56) is its own step ramp;
       - .marker-legend + laminate/hand belong to the paper-sheet systems (untouched);
       - one 0.8em decorative bullet in .mega-sub. ---- */
  background: var(--sl-bg);
  color: var(--sl-ink);
  position: relative;
}
body.stagelight::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1700px 1500px at calc(100% + 420px) -420px, rgba(40, 110, 158, 0.40), rgba(40, 110, 158, 0.12) 46%, transparent 70%),
    radial-gradient(1700px 1700px at -620px 22%, rgba(212, 81, 79, 0.30), rgba(212, 81, 79, 0.09) 46%, transparent 70%),
    radial-gradient(1900px 1800px at calc(100% + 680px) 52%, rgba(45, 124, 82, 0.28), rgba(45, 124, 82, 0.08) 46%, transparent 70%),
    radial-gradient(1500px 1400px at -520px 84%, rgba(40, 110, 158, 0.16), transparent 62%);
}
body.stagelight::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
body.stagelight > * { position: relative; z-index: 1; }
body.stagelight ::selection { background: #d4514f; color: #f5f4f0; }

/* ---- CROSS-DOCUMENT PAGE TRANSITIONS (progressive enhancement) ---- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: sl-vt-out 220ms ease both; }
::view-transition-new(root) { animation: sl-vt-in 220ms ease both; }
@keyframes sl-vt-out { to { opacity: 0; transform: translateY(-4px); } }
@keyframes sl-vt-in { from { opacity: 0; transform: translateY(6px); } }
/* The header persists continuously across navigations. */
body.stagelight .site-head { view-transition-name: site-header; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
/* single keyboard-focus ring; outline follows each element's own border-radius */
body.stagelight :focus-visible { outline: 2px solid #d4514f; outline-offset: 2px; }
/* tabular figures everywhere numbers are read as data: stat tiles, counts,
   perf logs, tour stats, footprint numbers */
body.stagelight .song-stat, body.stagelight .nick-stat, body.stagelight .album-footprint,
body.stagelight .song-count, body.stagelight .bc-count, body.stagelight .tt-count,
body.stagelight .sr-plays, body.stagelight .rf-count, body.stagelight .sf-value,
body.stagelight .signal-cell, body.stagelight .origin-stats,
body.stagelight .perf-date, body.stagelight .perf-loc, body.stagelight .perf-tag,
body.stagelight .tour-toplist, body.stagelight .tour-ltp-list,
body.stagelight .tour-countline, body.stagelight .tl-ltp, body.stagelight .ti-meta,
body.stagelight .nick-rank, body.stagelight .sc-tier, body.stagelight .sr-plays small {
  font-variant-numeric: tabular-nums;
}

/* glass utility */
.sl-glass {
  background: var(--sl-glass);
  -webkit-backdrop-filter: blur(26px) saturate(1.4); backdrop-filter: blur(26px) saturate(1.4);
  border: 1px solid var(--sl-line); border-radius: var(--sl-r); box-shadow: var(--sl-glass-shadow);
}

/* ---- NAV: brand lockup ---- */
body.stagelight .brand { display: inline-flex; align-items: center; gap: 13px; }
body.stagelight .brand-logo-sl { display: block; height: 38px; width: auto; }
body.stagelight .brand-wordmark {
  display: inline-block; font-family: var(--sl-display); font-weight: 640;
  font-size: 21px; letter-spacing: -0.012em; color: var(--sl-ink);
}

/* ---- MASTHEAD TITLE + TRAIL ---- */
body.stagelight main { color: var(--sl-ink); }
body.stagelight main h1 { font-family: var(--sl-display); color: var(--sl-ink); letter-spacing: -0.02em; }
body.stagelight .home-trail, body.stagelight .home-trail a { color: var(--sl-faint); }
body.stagelight .home-trail a:hover { color: var(--sl-ink); }

/* ---- SECTION HEADINGS ---- */
body.stagelight .section-heading h2 { font-family: var(--sl-display); color: var(--sl-ink); font-weight: 640; letter-spacing: -0.01em; }
body.stagelight .section-heading span { font-family: var(--sl-mono); color: var(--sl-faint); text-transform: uppercase; letter-spacing: 0.06em; }

/* ---- TYPE SCALE + RHYTHM ---- */
body.stagelight main { max-width: 1400px; }
body.stagelight main > section { margin-top: 96px; }
body.stagelight main > .latest-setlist { margin-top: 44px; }
body.stagelight .section-heading h2 { font-size: 34px; }
body.stagelight .section-heading { margin-bottom: 26px; }

/* ---- NAV: single glass bar, brand left, actions + hamburger right ---- */
body.stagelight .site-head {
  display: flex; align-items: center; gap: 28px; min-height: 66px;
  padding: 0 max(28px, calc((100% - 1400px) / 2));
  position: sticky; top: 0; z-index: 60;
  background: linear-gradient(180deg, rgba(13,13,15,0.72), rgba(11,11,13,0.58));
  -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
  border-bottom: 1px solid var(--sl-line); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  transition: transform 0.3s ease;
}
body.stagelight .site-head.is-hidden { transform: translateY(-102%); }
@media (prefers-reduced-motion: reduce) { body.stagelight .site-head { transition: none; } }
/* Anchor landings sat behind the fixed, sticky header (66px tall). Every in-page
   target reachable from the nav / mega-menu / footer / board cards gets a
   scroll-margin so it lands clear of the bar (header height + breathing room).
   Owner QA: anchored sections "open behind and under the menu." */
body.stagelight :is(
  #song-list, #setlists, #tour-stats, #latest-setlist,
  #shelf-sheet, #shelf-watch, #nick-johnson,
  #purgatory-sheet, #woodshed-sheet
) { scroll-margin-top: 96px; }
body.stagelight .head-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
/* Mobile fix: the header inherits width:min(1380px, calc(100% - 40px)) (a 20px
   gutter each side) AND 28px of internal padding = a 48px inset, which floats the
   hamburger far off the right edge on a phone. Go full-width with a normal 16px
   gutter under 600px so brand and hamburger sit on the real rails. */
@media (max-width: 600px) {
  body.stagelight .site-head { width: 100%; padding-left: 16px; padding-right: 16px; }
}
body.stagelight .head-cta {
  display: inline-flex; align-items: center; height: 40px; padding: 0 20px; border-radius: var(--sl-r-pill);
  font-size: 13.5px; font-weight: 580; color: var(--sl-ink);
  background: rgba(255,255,255,0.055); border: 1px solid var(--sl-line-strong);
  transition: background 0.18s ease, transform 0.18s ease;
}
body.stagelight .head-cta:hover { background: rgba(255,255,255,0.1); transform: translateY(-1px); }
body.stagelight .menu-toggle {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: var(--sl-r-md);
  border: 1px solid var(--sl-line-strong); background: rgba(255,255,255,0.04);
  transition: background 0.18s ease;
}
body.stagelight .menu-toggle:hover { background: rgba(255,255,255,0.09); }
body.stagelight .menu-toggle .menu-icon { display: block; width: 16px; height: 10px; position: relative; }
body.stagelight .menu-toggle .menu-icon i {
  position: absolute; left: 0; right: 0; height: 1.6px; background: var(--sl-ink); border-radius: 1px;
  transition: transform 0.24s ease, top 0.24s ease;
}
body.stagelight .menu-toggle .menu-icon i:first-child { top: 0; }
body.stagelight .menu-toggle .menu-icon i:last-child { top: 8.4px; }
body.stagelight .menu-open .menu-toggle .menu-icon i:first-child { top: 4.2px; transform: rotate(45deg); }
body.stagelight .menu-open .menu-toggle .menu-icon i:last-child { top: 4.2px; transform: rotate(-45deg); }

/* ---- COMMAND PALETTE TRIGGER (⌘K) ---- */
body.stagelight .head-search {
  display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 10px 0 13px;
  border-radius: var(--sl-r-pill); color: var(--sl-muted);
  background: rgba(255,255,255,0.03); border: 1px solid var(--sl-line);
  font-size: 13px; cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
body.stagelight .head-search:hover { background: rgba(255,255,255,0.07); color: var(--sl-ink); border-color: var(--sl-line-strong); }
body.stagelight .head-search-icon { flex: none; opacity: 0.85; }
body.stagelight .head-search-label { font-weight: 500; letter-spacing: 0.005em; }
body.stagelight .head-search-kbd {
  display: inline-flex; align-items: center; gap: 1px; font-family: var(--sl-mono); font-size: 11px;
  padding: 2px 6px; border-radius: var(--sl-r-sm); color: var(--sl-faint);
  background: rgba(255,255,255,0.05); border: 1px solid var(--sl-line);
}
body.stagelight .head-search-cmd { font-size: 12px; line-height: 1; }
@media (max-width: 720px) {
  body.stagelight .head-search { padding: 0; width: 40px; justify-content: center; gap: 0; }
  body.stagelight .head-search-label, body.stagelight .head-search-kbd { display: none; }
}

/* ---- COMMAND PALETTE (⌘K) OVERLAY ---- */
body.cmdk-lock { overflow: hidden; }
body.stagelight .cmdk { position: fixed; inset: 0; z-index: 120; display: flex; justify-content: center; align-items: flex-start; }
body.stagelight .cmdk[hidden] { display: none; }
body.stagelight .cmdk-backdrop {
  position: absolute; inset: 0; background: rgba(6,6,8,0.62);
  -webkit-backdrop-filter: blur(8px) saturate(1.1); backdrop-filter: blur(8px) saturate(1.1);
  opacity: 0; transition: opacity 0.2s ease;
}
body.stagelight .cmdk.is-open .cmdk-backdrop { opacity: 1; }
body.stagelight .cmdk-panel {
  position: relative; z-index: 1; width: min(640px, calc(100vw - 32px)); margin-top: min(12vh, 108px);
  max-height: min(72vh, 640px); display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(180deg, rgba(30,30,34,0.86), rgba(18,18,21,0.82));
  -webkit-backdrop-filter: blur(30px) saturate(1.5); backdrop-filter: blur(30px) saturate(1.5);
  border: 1px solid var(--sl-line-strong); border-radius: var(--sl-r-lg); box-shadow: var(--sl-shadow-3);
  opacity: 0; transform: translateY(-8px) scale(0.985); transition: opacity 0.2s ease, transform 0.2s ease;
}
body.stagelight .cmdk.is-open .cmdk-panel { opacity: 1; transform: none; }
body.stagelight .cmdk-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.stagelight .cmdk-bar { display: flex; align-items: center; gap: 12px; padding: 15px 16px; border-bottom: 1px solid var(--sl-line); }
body.stagelight .cmdk-bar-icon { flex: none; color: var(--sl-faint); }
body.stagelight .cmdk-input {
  flex: 1 1 auto; min-width: 0; background: transparent; border: 0; outline: none; color: var(--sl-ink);
  font-family: var(--sl-display); font-size: 18px; letter-spacing: -0.01em; padding: 2px 0;
}
body.stagelight .cmdk-input::placeholder { color: var(--sl-faint); }
body.stagelight .cmdk-input::-webkit-search-cancel-button { -webkit-appearance: none; }
body.stagelight .cmdk-close {
  flex: none; display: inline-flex; align-items: center; padding: 4px 8px; border-radius: var(--sl-r-sm);
  background: rgba(255,255,255,0.04); border: 1px solid var(--sl-line); cursor: pointer;
}
body.stagelight .cmdk-close kbd { font-family: var(--sl-mono); font-size: 11px; color: var(--sl-faint); }
body.stagelight .cmdk-close:hover { background: rgba(255,255,255,0.09); }
body.stagelight .cmdk-results { overflow-y: auto; overscroll-behavior: contain; padding: 6px; flex: 1 1 auto; }
body.stagelight .cmdk-group { animation: cmdk-group-in 0.22s ease both; }
body.stagelight .cmdk-group:nth-child(2) { animation-delay: 0.03s; }
body.stagelight .cmdk-group:nth-child(3) { animation-delay: 0.06s; }
body.stagelight .cmdk-group:nth-child(4) { animation-delay: 0.09s; }
body.stagelight .cmdk-group:nth-child(n+5) { animation-delay: 0.12s; }
@keyframes cmdk-group-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
body.stagelight .cmdk-group-head {
  display: flex; align-items: center; gap: 8px; padding: 12px 12px 6px;
  font-family: var(--sl-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sl-faint);
}
body.stagelight .cmdk-count { font-size: 10.5px; color: var(--sl-faint); background: rgba(255,255,255,0.05); border-radius: var(--sl-r-pill); padding: 1px 7px; }
body.stagelight .cmdk-row {
  display: flex; flex-direction: column; gap: 5px; padding: 9px 12px; border-radius: var(--sl-r-md);
  cursor: pointer; border: 1px solid transparent; scroll-margin: 12px;
}
body.stagelight .cmdk-row.is-active { background: rgba(255,255,255,0.07); border-color: var(--sl-line-strong); }
body.stagelight .cmdk-row.cmdk-album, body.stagelight .cmdk-row.cmdk-tour, body.stagelight .cmdk-row.cmdk-origin,
body.stagelight .cmdk-row.cmdk-lyrics, body.stagelight .cmdk-row.cmdk-archive { flex-direction: row; align-items: center; gap: 12px; }
body.stagelight .cmdk-line { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
body.stagelight .cmdk-row.cmdk-album .cmdk-line, body.stagelight .cmdk-row.cmdk-tour .cmdk-line,
body.stagelight .cmdk-row.cmdk-origin .cmdk-line, body.stagelight .cmdk-row.cmdk-lyrics .cmdk-line,
body.stagelight .cmdk-row.cmdk-archive .cmdk-line { flex-direction: column; gap: 2px; }
body.stagelight .cmdk-title { font-family: var(--sl-display); font-size: 15.5px; font-weight: 560; color: var(--sl-ink); letter-spacing: -0.01em; }
body.stagelight .cmdk-sub { font-family: var(--sl-mono); font-size: 11.5px; color: var(--sl-faint); letter-spacing: 0.02em; }
body.stagelight .cmdk-meta { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body.stagelight .cmdk-badge {
  font-family: var(--sl-mono); font-size: 10.5px; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--sl-r-pill); color: var(--sl-muted);
  background: rgba(255,255,255,0.05); border: 1px solid var(--sl-line);
}
body.stagelight .cmdk-badge.cmdk-tour { color: #ffe9c2; background: rgba(255,206,120,0.12); border-color: rgba(255,206,120,0.28); }
body.stagelight .cmdk-badge.cmdk-bg { color: #cfe6ff; background: rgba(130,190,255,0.12); border-color: rgba(130,190,255,0.28); }
body.stagelight .cmdk-plays { font-family: var(--sl-mono); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--sl-muted); }
body.stagelight .cmdk-plays small { font-size: 10px; color: var(--sl-faint); margin-left: 3px; }
body.stagelight .cmdk-rarity { font-family: var(--sl-mono); font-size: 11px; color: var(--sl-faint); letter-spacing: 0.02em; }
body.stagelight .cmdk-teaser {
  font-size: 13px; color: var(--sl-muted); font-style: italic; opacity: 0.85;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
body.stagelight .cmdk-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; margin-top: 1px; }
body.stagelight .cmdk-action {
  font-family: var(--sl-mono); font-size: 11px; letter-spacing: 0.02em; color: var(--sl-muted);
  padding: 3px 9px; border-radius: var(--sl-r-pill); background: rgba(255,255,255,0.04); border: 1px solid var(--sl-line);
  transition: background 0.15s ease, color 0.15s ease;
}
body.stagelight .cmdk-action:hover { background: rgba(255,255,255,0.1); color: var(--sl-ink); }
body.stagelight .cmdk-thumb {
  flex: none; width: 40px; height: 40px; border-radius: var(--sl-r-sm); overflow: hidden;
  background: rgba(255,255,255,0.05); border: 1px solid var(--sl-line);
}
body.stagelight .cmdk-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.stagelight .cmdk-more { padding: 7px 12px 10px; font-family: var(--sl-mono); font-size: 11px; color: var(--sl-faint); letter-spacing: 0.02em; }
body.stagelight .cmdk-hint { padding: 26px 18px; text-align: center; color: var(--sl-faint); font-size: 13.5px; }
body.stagelight .cmdk-hint[hidden] { display: none; }
body.stagelight .cmdk-foot {
  display: flex; gap: 18px; padding: 10px 16px; border-top: 1px solid var(--sl-line);
  font-family: var(--sl-mono); font-size: 11px; color: var(--sl-faint); letter-spacing: 0.02em;
}
body.stagelight .cmdk-foot kbd {
  font-family: var(--sl-mono); font-size: 10.5px; padding: 1px 5px; margin: 0 1px; border-radius: 4px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--sl-line); color: var(--sl-muted);
}
@media (max-width: 560px) {
  body.stagelight .cmdk-panel {
    width: 100vw; height: 100vh; max-height: 100vh; margin-top: 0; border-radius: 0; border: 0;
  }
  body.stagelight .cmdk-foot { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.stagelight .cmdk-backdrop, body.stagelight .cmdk-panel, body.stagelight .cmdk-group { transition: none; animation: none; }
}

/* ---- MEGA MENU ---- */
body.stagelight .mega-menu {
  position: fixed; inset: 0; z-index: 55; overflow-y: auto;
  padding: 104px max(28px, calc((100% - 1400px) / 2)) 64px;
  background: linear-gradient(180deg, rgba(10,10,12,0.97), rgba(8,8,10,0.985));
  -webkit-backdrop-filter: blur(28px) saturate(1.3); backdrop-filter: blur(28px) saturate(1.3);
}
body.stagelight .mega-menu[hidden] { display: none; }
body.stagelight .mega-inner {
  display: grid; grid-template-columns: 1.35fr 1fr 0.85fr; gap: 40px 64px;
  animation: sl-mega-in 0.32s ease both;
}
@keyframes sl-mega-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { body.stagelight .mega-inner { animation: none; } }
body.stagelight .mega-col { border-top: 1px solid var(--sl-line-strong); padding-top: 18px; min-width: 0; }
body.stagelight .mega-label { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sl-faint); }
body.stagelight .mega-col-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
body.stagelight .mega-nav { display: flex; flex-direction: column; margin-top: 22px; }
body.stagelight .mega-link {
  font-family: var(--sl-display); font-size: clamp(29px, 3vw, 40px); font-weight: 620;
  letter-spacing: -0.015em; line-height: 1.08; padding: 5px 0; color: var(--sl-ink);
  transition: color 0.15s ease, transform 0.18s ease;
}
body.stagelight .mega-link:hover { color: #fff; transform: translateX(6px); }
body.stagelight .mega-sub {
  display: flex; align-items: baseline; gap: 12px; padding: 3px 0 3px 6px;
  font-family: var(--sl-display); font-size: clamp(19px, 1.9vw, 24px); font-weight: 480;
  letter-spacing: -0.01em; color: var(--sl-muted); transition: color 0.15s ease, transform 0.18s ease;
}
body.stagelight .mega-sub::before { content: "\21B3"; color: var(--sl-faint); font-size: 0.8em; }
body.stagelight .mega-sub:hover { color: var(--sl-ink); transform: translateX(6px); }
body.stagelight .mega-more { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sl-muted); border-bottom: 1px solid var(--sl-line-strong); padding-bottom: 3px; }
body.stagelight .mega-more:hover { color: var(--sl-ink); border-color: var(--sl-ink); }
body.stagelight .mega-show { margin-top: 24px; }
body.stagelight .mega-show-photo { display: block; margin-bottom: 20px; border-radius: var(--sl-r-md); overflow: hidden; border: 1px solid var(--sl-line); box-shadow: 0 24px 50px -22px rgba(0,0,0,0.8); }
body.stagelight .mega-show-photo img { display: block; width: 100%; aspect-ratio: 16 / 9.5; object-fit: cover; }
body.stagelight .mega-show-date { display: block; font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sl-muted); }
body.stagelight .mega-show-city { font-family: var(--sl-display); font-size: clamp(26px, 2.6vw, 34px); font-weight: 680; letter-spacing: -0.015em; margin-top: 10px; color: var(--sl-ink); }
body.stagelight .mega-show-venue { font-size: 15px; color: var(--sl-muted); margin-top: 6px; }
body.stagelight .mega-show .sc-chip { margin-top: 22px; }
body.stagelight .mega-next { margin-top: 38px; padding-top: 18px; border-top: 1px solid var(--sl-line); }
body.stagelight .mega-next-line { margin-top: 12px; display: flex; flex-direction: column; gap: 3px; }
body.stagelight .mega-next-line strong { font-size: 17px; font-weight: 620; color: var(--sl-ink); }
body.stagelight .mega-next-line span { font-size: 13.5px; color: var(--sl-muted); }
body.stagelight .mega-blurb { margin-top: 26px; font-size: 15px; line-height: 1.6; color: var(--sl-muted); max-width: 260px; }
body.stagelight .mega-social { display: flex; align-items: center; gap: 12px; margin: 22px 0 28px; }
body.stagelight .mega-social a { display: inline-flex; }
body.stagelight .mega-social .social-mark { width: 38px; height: 38px; flex: 0 0 38px; font-size: 16px; background: rgba(255,255,255,0.06); border: 1px solid var(--sl-line-strong); color: var(--sl-muted); transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, transform 0.18s ease; }
body.stagelight .mega-social a:hover .social-mark { color: var(--sl-ink); border-color: var(--sl-ink); background: rgba(255,255,255,0.1); transform: translateY(-1px); }
body.stagelight .mega-cta {
  display: inline-flex; align-items: center; height: 40px; padding: 0 20px; border-radius: var(--sl-r-pill);
  font-size: 13.5px; font-weight: 580; color: var(--sl-ink);
  background: rgba(255,255,255,0.055); border: 1px solid var(--sl-line-strong);
  transition: background 0.18s ease, transform 0.18s ease;
}
body.stagelight .mega-cta:hover { background: rgba(255,255,255,0.1); transform: translateY(-1px); }
@media (max-width: 900px) {
  body.stagelight .mega-menu { padding-top: 100px; }
  body.stagelight .mega-inner { grid-template-columns: 1fr; gap: 44px; }
  body.stagelight .head-cta { display: none; }
}

/* ---- SHOW ENTRY: one component, two states ---- */
body.stagelight .show-entry {
  position: relative; overflow: hidden; border-radius: var(--sl-r);
  background: var(--sl-glass);
  -webkit-backdrop-filter: blur(26px) saturate(1.4); backdrop-filter: blur(26px) saturate(1.4);
  border: 1px solid var(--sl-line); box-shadow: var(--sl-glass-shadow);
  margin: 0;
}
body.stagelight .latest-setlist { display: grid; gap: 16px; }
body.stagelight .show-entry summary { position: relative; display: block; cursor: pointer; list-style: none; }
body.stagelight .show-entry summary::-webkit-details-marker { display: none; }
body.stagelight .sc-chev { position: absolute; top: 26px; right: 26px; z-index: 3; color: var(--sl-faint); transition: transform 0.22s ease; }
body.stagelight .show-entry[open] .sc-chev { transform: rotate(180deg); }
body.stagelight .setlist-expand-all { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px; border: 1px solid var(--sl-line); border-radius: var(--sl-r-pill); background: transparent; color: var(--sl-muted); cursor: pointer; font: inherit; transition: color 0.15s ease, border-color 0.15s ease; }
body.stagelight .setlist-expand-all:hover { color: var(--sl-ink); border-color: var(--sl-line-strong); }
body.stagelight .setlist-expand-all .sea-label { font-family: var(--sl-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
body.stagelight .setlist-expand-all .sea-count { font-weight: 700; color: var(--sl-ink); }
body.stagelight .sc-stats { margin-top: 10px; border-top: 1px solid rgba(255,255,255,0.08); }
body.stagelight .sc-stats > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 12px; padding: 12px 2px 2px; }
body.stagelight .sc-stats > summary::-webkit-details-marker { display: none; }
body.stagelight .sc-stats-title { font-family: var(--sl-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sl-muted); }
body.stagelight .sc-stats[open] .sc-stats-title { color: var(--sl-ink); }
body.stagelight .sc-stats-meta { font-size: 12px; color: var(--sl-faint); }
body.stagelight .sc-stats-chev { margin-left: auto; color: var(--sl-faint); transition: transform 0.2s ease; font-size: 16px; line-height: 1; }
body.stagelight .sc-stats[open] .sc-stats-chev { transform: rotate(90deg); }
body.stagelight .sc-stats-body { padding: 8px 0 6px; }
body.stagelight .sc-stats-head { display: flex; justify-content: space-between; gap: 16px; margin: 0 0 4px; font-family: var(--sl-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sl-faint); }
body.stagelight .sc-stats .ltp-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
body.stagelight .ltp-item { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 14px; }
body.stagelight .ltp-song a { color: var(--sl-ink); text-decoration: none; }
body.stagelight .ltp-song a:hover { text-decoration: underline; }
body.stagelight .ltp-gap { font-family: var(--sl-mono); font-size: 11px; letter-spacing: 0.03em; color: var(--sl-faint); white-space: nowrap; }
body.stagelight .ltp-gap.is-rare { color: #e0a24a; }
@media (max-width: 560px) { body.stagelight .sc-stats .ltp-list { grid-template-columns: 1fr; } body.stagelight .sc-stats-head span:last-child { display: none; } }
body.stagelight .sc-bg { position: absolute; inset: 0; z-index: 0; display: block; }
body.stagelight .sc-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
body.stagelight .sc-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9,9,11,0.95) 24%, rgba(9,9,11,0.68) 58%, rgba(9,9,11,0.4)); }
body.stagelight .show-entry[open] .sc-bg { display: none; }
/* Latest-show hero: keep the blurred, scaled photo as a full-panel backdrop even
   when open, with a top-to-bottom dark scrim so the setlist reads on the dark side.
   The sharp photo returns framed at the top-right inside the .sc-lockup grid. */
body.stagelight .show-entry.is-latest[open] .sc-bg { display: block; overflow: hidden; bottom: -32px; }
body.stagelight .show-entry.is-latest[open] .sc-bg img { opacity: 0.5; object-position: center 34%; transform: scale(1.35); filter: blur(18px) saturate(1.1); }
body.stagelight .show-entry.is-latest[open] .sc-bg::after { background: linear-gradient(180deg, rgba(9,9,11,0.30) 0%, rgba(10,10,12,0.72) 44%, rgba(11,11,12,0.94) 78%, rgba(11,11,12,1) 100%); }
body.stagelight .show-entry[open] .sc-lockup, body.stagelight .sc-body { position: relative; z-index: 1; }
/* ---- HOMEPAGE HERO (dedicated section, not the setlist card) ----
   Pulls up behind the glassy header + breadcrumb so the blurred backdrop shows
   through them, and the whole hero is tuned to fit ~one viewport (capped photo,
   two-column setlist + pulls) without dynamic text shrinking. */
body.stagelight .home-hero { position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-top: calc(-1 * (66px + var(--sl-breadcrumb-h, 37px))); overflow: hidden; isolation: isolate; }
body.stagelight .hero-bg { position: absolute; inset: 0; z-index: 0; }
body.stagelight .hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; object-position: center 30%; transform: scale(1.35); filter: blur(22px) saturate(1.1); transition: opacity 0.5s ease; }
body.stagelight .hero-bg img.is-active { opacity: 0.55; }
/* The stage light breathes: wash shimmer (~20s), glow pulse (~8s, offset
   phase), brush same slow breath. Transform/opacity only; still frames under
   reduced motion. Real rigs never pulse in sync. */
body.stagelight .hero-bg img.is-active { animation: hero-shimmer 20s ease-in-out infinite alternate; }
@keyframes hero-shimmer { from { transform: scale(1.35); } to { transform: scale(1.42); } }
body.stagelight .hero-bg::before { animation: hero-glow-breathe 8s ease-in-out 2s infinite alternate; }
@keyframes hero-glow-breathe { from { opacity: 1; } to { opacity: 0.55; } }
body.stagelight .hero-brush { animation: hero-brush-breathe 13s ease-in-out 5s infinite alternate; }
@keyframes hero-brush-breathe { from { opacity: 0.9; } to { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) {
  body.stagelight .hero-bg img.is-active, body.stagelight .hero-bg::before, body.stagelight .hero-brush { animation: none; }
}
/* Top stop deepened so only ~10-15% of the photo reads behind the sticky nav +
   breadcrumb bars (no recognizable second face/body) while the mid/lower hero
   keeps its stage light. The bars carry their own contrast below this. */
body.stagelight .hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9,9,11,0.74) 0%, rgba(9,9,11,0.44) 13%, rgba(10,10,12,0.6) 52%, rgba(11,11,12,0.92) 84%, #0b0b0d 100%); }
/* Mirrored continuation of the hero backdrop under the fold + tinted spotlight. */
body.stagelight .hero-bg::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(58% 46% at 68% 18%, var(--hero-glow, rgba(255,186,128,0.10)), transparent 72%); }
/* Seamless: solid page color at the seam (no line), the mirrored light ghosts
   through just below it, then fades back to solid. Content always sits above. */
body.stagelight .hero-echo { position: relative; width: 100vw; margin-left: calc(50% - 50vw); height: 380px; margin-bottom: -380px; overflow: hidden; pointer-events: none; z-index: 0; }
body.stagelight .hero-echo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transform: scale(1.35) scaleY(-1); filter: blur(26px) saturate(1.05); opacity: 0.3; }
body.stagelight .hero-echo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0b0b0d 0%, rgba(11,11,13,0.55) 26%, rgba(11,11,13,0.8) 60%, #0b0b0d 100%); }
/* Blanket stacking rule — restored 2026-07-23. It was dismantled earlier tonight
   (root-cause cleanup) but that landed in the same window Alex saw transitions stop
   being smooth, and removing z-index from every main child changes what the browser
   promotes to its own compositing layer — which can absolutely affect motion. The
   dismantle was verified for LAYOUT only, never for MOTION, so it goes back until
   it can be re-tested against real frame rates in a real browser.
   MUST exclude every element that positions itself, or it silently out-specifies
   their own rules (this flattened the sticky breadcrumb three times and hid the
   Song Index filter popup behind the list). Do not remove those exclusions. */
body.stagelight main > *:not(.hero-echo):not(.bento-panel):not(.home-nav) { position: relative; z-index: 1; }
body.stagelight main > .home-nav { position: fixed; z-index: 55; }
/* Sticky index bars: re-assert above the blanket, and carry the site-head glass so
   rows can't read through them while scrolling. */
body.stagelight main > .index-toolbar.index-toolbar.index-toolbar { z-index: 30; }
body.stagelight main > .song-search.song-search,
body.stagelight main > .song-index-head.song-index-head,
body.stagelight main > .lyric-head.lyric-head {
  background: linear-gradient(180deg, rgba(13,13,15,0.9), rgba(11,11,13,0.82));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
body.stagelight main > .song-search.song-search.song-search { position: sticky; z-index: 12; }
body.stagelight main > .song-index-head.song-index-head.song-index-head,
body.stagelight main > .lyric-head.lyric-head.lyric-head { position: sticky; z-index: 11; }
/* Paint stroke: a wide brushed band of the show's own sampled stage-light color
   swept behind the left column. Tinted per view via --hero-glow-strong (set by
   the same canvas sample as the spotlight), heavily blurred so it reads as
   pigment light, not a shape. */
body.stagelight .hero-brush { position: absolute; left: 0; top: 96px; width: min(52vw, 760px); height: 340px; z-index: 0; pointer-events: none; filter: blur(46px) saturate(1.25); opacity: 0.85; transform: rotate(-2deg); }
body.stagelight .hero-brush svg { width: 100%; height: 100%; }
body.stagelight .hero-brush path { fill: var(--hero-glow-strong, rgba(255,186,128,0.2)); transition: fill 0.6s ease; }
body.stagelight .hero-brush .hb2 { opacity: 0.55; }
/* Breadcrumb is fixed (out of flow) and hidden in the hero, so it reserves no
   vertical space — the hero tucks under the 66px header only. */
body.stagelight { --sl-breadcrumb-h: 0px; }
body.stagelight .hero-inner { --hero-pad: max(28px, calc((100vw - 1400px) / 2)); position: relative; z-index: 1; padding: calc(66px + var(--sl-breadcrumb-h, 0px) + 30px) var(--hero-pad) 38px; }
/* Two column wrappers (not a 2x2 grid). Each column flows internally, so row 2's
   top is set by a FIXED gap below row 1 — never coupled to the photo's vh height.
   This kills the old overlap-on-short / giant-gap-on-tall pair of bugs. */
body.stagelight .hero-inner { display: grid; grid-template-columns: 1fr 1fr; column-gap: 88px; align-items: start; }
body.stagelight .home-hero.no-image .hero-inner { grid-template-columns: 1fr; }
body.stagelight .hero-left, body.stagelight .hero-right { min-width: 0; display: flex; flex-direction: column; }
body.stagelight .hero-slot, body.stagelight .hero-rail { min-width: 0; }
/* Top-aligned (was center): centering re-positioned the pager arrows every
   time a view's height differed — seizure fuel. Pinned start = arrows never move. */
body.stagelight .hero-lockwrap { align-self: start; padding-top: 26px; min-width: 0; }
body.stagelight .hero-pager { display: flex; align-items: center; gap: 8px; margin-top: -10px; margin-bottom: 16px; }
body.stagelight .hero-page {
  width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--sl-line-strong);
  border-radius: 50%; background: transparent; color: var(--sl-muted); font-size: 17px; line-height: 1;
  cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
body.stagelight .hero-page:hover:not(:disabled) { color: var(--sl-ink); border-color: var(--sl-muted); background: rgba(255,255,255,0.05); }
/* Touch target: the visible circle stays 30px; a transparent pseudo-element
   extends the hit area to 44px (minimum touch size) without shifting layout. */
body.stagelight .hero-page { position: relative; }
body.stagelight .hero-page::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; }
body.stagelight .hero-page:disabled { opacity: 0.3; cursor: default; }
/* Fixed 28px gap below the lock content — identical on every screen height, no
   negative margin, no vh coupling. This is the fix for both the overlap and the
   giant-gap bugs. */
body.stagelight .hero-music-slot { margin-top: 28px; }
/* Fixed gap below the framed photo before the ticker + cards rail. */
body.stagelight .hero-rail { margin-top: 18px; }
/* Slide engine (v2, Alex: "the hero needs to slide"). Content slides
   horizontally in the direction of navigation; the ONLY height that animates is
   the hero section itself, in one smooth move — no per-slot tweens, so nothing
   inside (arrows, chips, cards) ever changes position. Photos crossfade in
   place (no slide) so the right-bleed image stays composed. */
body.stagelight .hero-slot { position: relative; }
body.stagelight .hero-slot.is-swapping { overflow: hidden; }
body.stagelight .hero-media-slot.is-swapping { overflow: visible; }
body.stagelight .hv { transition: opacity 0.28s cubic-bezier(0.22,1,0.36,1), transform 0.28s cubic-bezier(0.22,1,0.36,1); }
body.stagelight .hv[hidden] { display: none; }
/* LOAD-SHIFT KILLER (structural): the homepage paints progressively (1.3MB),
   so any JS height-locking runs after the user already sees the hero. These
   three variable-height slots grid-stack ALL views in one cell — hidden views
   stay laid out (invisible, inert), so the slot is born at its tallest height.
   Zero JS, zero shift, ever. The media slot keeps display:none children (its
   height is a fixed clamp; laying out 29 photos would force-load them). */
body.stagelight .hero-lock-slot, body.stagelight .hero-music-slot, body.stagelight .hero-ticker-slot { display: grid; }
body.stagelight .hero-lock-slot > .hv, body.stagelight .hero-music-slot > .hv, body.stagelight .hero-ticker-slot > .hv { grid-area: 1 / 1; }
body.stagelight .hero-lock-slot > .hv[hidden], body.stagelight .hero-music-slot > .hv[hidden], body.stagelight .hero-ticker-slot > .hv[hidden] { display: none; }
/* Only the longest few views stay in layout, invisibly, to hold the slot open at
   its tallest height from the very first paint. Everything else is display:none
   so the hero is not dragging ~6,500 invisible elements through every layout. */
body.stagelight .hero-lock-slot > .hv-hold[hidden], body.stagelight .hero-music-slot > .hv-hold[hidden], body.stagelight .hero-ticker-slot > .hv-hold[hidden] { display: block; visibility: hidden; pointer-events: none; }
/* Outgoing snapshot: out of flow so the incoming view takes over the flow. */
body.stagelight .hv.is-leaving { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* Slide start/end states. next = incoming slides in from the right; prev = from
   the left; outgoing exits the opposite way. */
body.stagelight .hv.is-enter-next { opacity: 0; transform: translateX(28px); }
body.stagelight .hv.is-enter-prev { opacity: 0; transform: translateX(-28px); }
body.stagelight .hv.is-leave-next { opacity: 0; transform: translateX(-22px); }
body.stagelight .hv.is-leave-prev { opacity: 0; transform: translateX(22px); }
/* The photo crossfades only — a sliding full-bleed image reads as smear. */
body.stagelight .hero-media-slot .hv.is-enter-next, body.stagelight .hero-media-slot .hv.is-enter-prev { transform: none; }
body.stagelight .hero-media-slot .hv.is-leave-next, body.stagelight .hero-media-slot .hv.is-leave-prev { transform: none; }
@media (prefers-reduced-motion: reduce) {
  body.stagelight .hv { transition: none; }
}
body.stagelight .home-hero .sc-eyebrow { display: block; font-family: var(--sl-mono); font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sl-muted); }
body.stagelight .home-hero .sc-city { margin: 12px 0 0; font-family: var(--sl-display); font-size: 52px; font-weight: 680; letter-spacing: -0.02em; line-height: 1.02; color: var(--sl-ink); text-shadow: 0 2px 40px rgba(0,0,0,0.55); }
body.stagelight .home-hero .sc-venue { display: block; margin-top: 10px; font-size: 16px; color: var(--sl-muted); }
body.stagelight .home-hero .sc-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
/* Quiet tertiary "Show photos →" — sits a line below the listen chips, clearly
   clickable but not competing with the primary/secondary actions. */
body.stagelight .home-hero .sc-photos-link { display: inline-flex; margin-top: 12px; font-size: 14px; color: rgba(255,255,255,0.6); }
body.stagelight .home-hero .sc-photos-link:hover { color: var(--sl-ink); }
body.stagelight .hero-sets { display: grid; gap: 12px; }
/* No divider: the base .sc-sets card styling doesn't apply in the hero — the two
   columns start on one shared line and alignment does the separating. */
body.stagelight .home-hero .sc-sets { border-top: 0; margin-top: 0; padding-top: 0; }
body.stagelight .hero-table-note { margin: 0; max-width: 56ch; font-size: 15.5px; line-height: 1.65; color: var(--sl-muted); }
body.stagelight .hero-table-note b { color: var(--sl-ink); font-weight: 620; }
body.stagelight .hero-table-note .sc-label { display: block; margin-bottom: 10px; }
body.stagelight .hero-tonight { color: #d4514f; }
body.stagelight .home-hero .sc-row { grid-template-columns: 52px minmax(0, 1fr); gap: 14px; }
body.stagelight .hero-footnote { margin: 14px 0 0; font-size: 13px; color: var(--sl-faint); }
body.stagelight .hero-stats-btn {
  display: inline-flex; align-items: baseline; gap: 10px; margin-top: 22px; padding: 10px 16px;
  border: 1px solid var(--sl-line-strong); border-radius: var(--sl-r-pill); background: rgba(255,255,255,0.04);
  font-family: var(--sl-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sl-ink);
  cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease;
}
body.stagelight .hero-stats-btn span { color: var(--sl-faint); letter-spacing: 0.04em; text-transform: none; font-size: 11.5px; }
body.stagelight .hero-stats-btn:hover { background: rgba(255,255,255,0.08); border-color: var(--sl-muted); }
/* Mobile-only twin of the stats button, floating on the photo. */
body.stagelight .hero-stats-overlay {
  display: none; position: absolute; left: 14px; bottom: 12px; z-index: 2; margin: 0;
  padding: 8px 14px; background: rgba(10,10,12,0.62);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
/* Trippy-but-subtle: a faint glint orbits the button outline clockwise (18s);
   on hover it locks to the cursor's angle. Static under reduced motion. */
@property --hsb-a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
body.stagelight .hero-stats-btn { position: relative; }
body.stagelight .hsb-ring {
  position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--hsb-a), transparent 0deg 318deg, rgba(255,255,255,0.55) 338deg, transparent 358deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  padding: 1px; animation: hsb-orbit 18s linear infinite;
}
body.stagelight .hero-stats-btn:hover .hsb-ring { animation-play-state: paused; }
@keyframes hsb-orbit { to { --hsb-a: 360deg; } }
@media (prefers-reduced-motion: reduce) { body.stagelight .hsb-ring { animation: none; } }
/* Framed bento photo (owner rejected the flush-top/right-bleed/left-blur
   treatment). Width-based height clamp — NOT vh — so the frame keeps a stable
   presence and never drives the layout tall/short. */
body.stagelight .hero-photo { position: relative; margin: 0; width: 100%; height: clamp(340px, 30vw, 430px); border-radius: var(--sl-r-md); overflow: hidden; border: 1px solid var(--sl-line); box-shadow: 0 40px 80px -28px rgba(0,0,0,0.85); }
body.stagelight .hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
/* Media slot sits in normal flow under the hero-inner padding — no bleed. */
body.stagelight .hero-credit { position: absolute; right: 8px; bottom: 6px; font-family: var(--sl-mono); font-size: 9.5px; letter-spacing: 0.04em; color: rgba(255,255,255,0.72); text-shadow: 0 1px 4px rgba(0,0,0,0.9); pointer-events: none; }
/* Ticker: slow continuous crawl, pauses on hover; static scroll under 900px / reduced motion. */
body.stagelight .hero-ticker { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
body.stagelight .tk-track { display: inline-flex; align-items: center; gap: 18px; padding: 4px 2px 8px; white-space: nowrap; width: max-content; animation: tk-crawl 46s linear infinite; }
body.stagelight .hero-ticker:hover .tk-track { animation-play-state: paused; }
@keyframes tk-crawl { from { transform: translateX(0); } to { transform: translateX(-50%); } }
body.stagelight .tk-item { display: inline-flex; align-items: baseline; gap: 7px; font-size: 13px; }
body.stagelight .tk-item em { font-style: normal; font-family: var(--sl-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sl-faint); }
body.stagelight .tk-item b { font-weight: 600; color: var(--sl-ink); }
body.stagelight .tk-item svg { width: 15px; height: auto; flex: none; align-self: center; }
body.stagelight .tk-item svg polygon, body.stagelight .tk-item svg circle { fill: var(--sl-muted); }
body.stagelight .tk-item svg.rarity-ultra polygon { fill: #b9c0cc; }
body.stagelight .tk-item svg.rarity-hyper polygon, body.stagelight .tk-item svg.rarity-bustout polygon, body.stagelight .tk-item svg.rarity-mega polygon { fill: #d9a84e; }
body.stagelight .tk-note b { font-weight: 500; color: var(--sl-muted); }
body.stagelight .tk-sep { color: var(--sl-faint); opacity: 0.5; }
@media (prefers-reduced-motion: reduce) { body.stagelight .tk-track { animation: none; } body.stagelight .hero-ticker { overflow-x: auto; } }
/* Right-rail cards */
body.stagelight .hero-cards { margin-top: 12px; display: grid; gap: 10px; }
body.stagelight .hero-card[hidden] { display: none; }
body.stagelight .hero-card.is-refilling time, body.stagelight .hero-card.is-refilling .hc-place { opacity: 0; transition: opacity 0.16s ease; }
body.stagelight .hero-card time, body.stagelight .hero-card .hc-place { transition: opacity 0.2s ease; }
/* The card for the view you're on: red current-ring (shelf-watch language). */
body.stagelight .hero-card.is-current { border-color: rgba(212,81,79,0.55); box-shadow: 0 0 0 1px rgba(212,81,79,0.35), 0 0 24px -8px rgba(212,81,79,0.3); cursor: default; }
body.stagelight .hero-card.is-current:hover { transform: none; background: rgba(255,255,255,0.035); }
body.stagelight .hero-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px;
  width: 100%; text-align: left; cursor: pointer; font: inherit;
  padding: 13px 18px; border: 1px solid var(--sl-line); border-radius: var(--sl-r-md);
  background: rgba(16,16,20,0.32); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  color: var(--sl-ink); transition: border-color 0.15s ease, transform 0.18s ease, filter 0.18s ease;
}
body.stagelight .hero-card:hover { background: rgba(28,28,34,0.45); border-color: var(--sl-line-strong); transform: translateY(-1px); }

body.stagelight .hc-place { display: flex; flex-direction: column; min-width: 0; }
body.stagelight .hc-place strong { font-size: 15px; font-weight: 620; }
body.stagelight .hc-place small { font-size: 12.5px; color: var(--sl-faint); }
body.stagelight .hc-go { color: var(--sl-faint); }
/* Pinned upcoming (Sacramento) keeps the full bento card, made a touch more
   distinct from the flat history rows: dashed border + TONIGHT flag, lifted off
   the rows by a hair more surface and spacing. It never moves while browsing. */
body.stagelight .hero-card-upcoming { border-style: dashed; border-color: var(--sl-line-strong); background: rgba(16,16,20,0.42); margin-top: 4px; }
/* History context rows: flat, no permanent card surface. Thin dividers separate
   them; a faint surface appears only on hover/focus. Same content + view-swap
   behavior as before (they stay <button data-view-btn> with data-card-slot). */
body.stagelight .hero-row.hero-card {
  background: transparent; border: 0; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none;
  padding: 12px 10px; border-top: 1px solid var(--sl-line);
  transition: background 0.15s ease, transform 0.22s cubic-bezier(0.22,1,0.36,1), opacity 0.22s cubic-bezier(0.22,1,0.36,1);
}
body.stagelight .hero-row.hero-card:hover,
body.stagelight .hero-row.hero-card:focus-visible { background: rgba(255,255,255,0.04); border-color: var(--sl-line); transform: none; }
body.stagelight .hero-row.hero-card.is-current { background: rgba(255,255,255,0.04); border-color: var(--sl-line); box-shadow: none; }
body.stagelight .hero-row.hero-card.is-current:hover { background: rgba(255,255,255,0.04); }
/* Direction-aware row swap: prev = enter from above, next = from below. */
body.stagelight .hero-row.is-refilling { opacity: 0; }
body.stagelight .hero-row.is-entering-up { opacity: 0; transform: translateY(-10px); transition: none; }
body.stagelight .hero-row.is-entering-down { opacity: 0; transform: translateY(10px); transition: none; }
@media (prefers-reduced-motion: reduce) {
  body.stagelight .hero-row.hero-card { transition: background 0.15s ease; }
  body.stagelight .hero-row.is-refilling, body.stagelight .hero-row.is-entering-up, body.stagelight .hero-row.is-entering-down { opacity: 1; transform: none; }
}
/* Quiet link utility — bare text action, used sparingly (tertiary actions only). */
body.stagelight .link-quiet { display: inline-flex; align-items: baseline; gap: 7px; font-size: 14px; color: var(--sl-muted); transition: color 0.15s ease; }
body.stagelight .link-quiet span { transition: transform 0.18s ease; }
body.stagelight .link-quiet:hover { color: var(--sl-ink); }
body.stagelight .link-quiet:hover span { transform: translateX(2px); }
body.stagelight .hero-all { justify-self: end; margin-top: 4px; }
/* Song stats: in-place expansion. The photo and the stats panel share one slot
   (.hero-media, sized by the photo cap); toggling .stats-open crossfades the
   photo away and slides the panel up into its place — cards stay put, hero
   height never changes. */
body.stagelight .hero-media { position: relative; height: clamp(340px, 30vw, 430px); }
body.stagelight .hero-media .hero-photo { position: absolute; inset: 0; height: 100%; transition: opacity 0.42s cubic-bezier(0.22,1,0.36,1), transform 0.42s cubic-bezier(0.22,1,0.36,1); }
body.stagelight .hero-stats-panel {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  padding: 20px 26px 18px; border: 1px solid var(--sl-line-strong); border-radius: var(--sl-r-md);
  background:
    radial-gradient(70% 55% at 12% 108%, var(--hero-glow, rgba(255,186,128,0.14)), transparent 70%),
    radial-gradient(55% 45% at 96% -6%, var(--hero-glow, rgba(255,186,128,0.1)), transparent 74%),
    rgba(13,13,16,0.84);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 0 120px -30px var(--hero-glow, rgba(255,186,128,0.22)), 0 40px 80px -28px rgba(0,0,0,0.85);
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity 0.42s cubic-bezier(0.22,1,0.36,1), transform 0.42s cubic-bezier(0.22,1,0.36,1);
}
body.stagelight .hero-media.stats-open .hero-photo { opacity: 0; transform: scale(0.985) translateY(-6px); pointer-events: none; }
body.stagelight .hero-media.stats-open .hero-stats-panel { opacity: 1; transform: none; pointer-events: auto; }
@property --hsp-a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
body.stagelight .hero-stats-panel::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--hsp-a), transparent 0deg 300deg, var(--hero-glow-strong, rgba(255,186,128,0.6)) 330deg, transparent 358deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  padding: 1px; opacity: 0;
}
body.stagelight .hero-media.stats-open .hero-stats-panel::after { animation: hsp-ignite 0.9s cubic-bezier(0.22,1,0.36,1) 0.1s; }
@keyframes hsp-ignite {
  0% { --hsp-a: 0deg; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { --hsp-a: 360deg; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { body.stagelight .hero-media.stats-open .hero-stats-panel::after { animation: none; } }
@media (prefers-reduced-motion: reduce) {
  body.stagelight .hero-media .hero-photo, body.stagelight .hero-stats-panel { transition: none; }
}
body.stagelight .hero-modal-head { flex: none; display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; }
body.stagelight .hero-modal-head h3 { font-family: var(--sl-display); font-size: 20px; font-weight: 650; }
body.stagelight .hero-modal-head span { font-family: var(--sl-mono); font-size: 11.5px; color: var(--sl-faint); }
body.stagelight .hero-modal-x { margin-left: auto; width: 30px; height: 30px; border: 1px solid var(--sl-line); border-radius: 8px; background: transparent; color: var(--sl-muted); cursor: pointer; }
body.stagelight .hero-modal-x:hover { color: var(--sl-ink); border-color: var(--sl-muted); }
body.stagelight .hero-stats-panel .ltp-list { list-style: none; margin: 0; padding: 0 2px 4px; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; align-content: start; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent; }
body.stagelight .hero-stats-panel .ltp-item { display: flex; align-items: baseline; gap: 8px; }
body.stagelight .hero-stats-panel .ltp-item .rarity-symbol { flex: none; min-width: 30px; }
body.stagelight .hero-stats-panel .ltp-song { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { body.stagelight .hero-stats-panel .ltp-list { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  /* Single column, logical read order: identity, photo, ticker, sets, cards.
     The rail dissolves (display: contents) so its ticker can sit above Set 1.
     Slots MUST reset their desktop grid-column/row placements or the 1fr grid
     grows a phantom second column. */
  body.stagelight .hero-inner { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 22px; }
  /* Column wrappers dissolve so the single-column order rules govern the flat
     list of slots (lockwrap, media, ticker, music, cards). */
  body.stagelight .hero-left,
  body.stagelight .hero-right,
  body.stagelight .hero-rail { display: contents; }
  body.stagelight .hero-lockwrap,
  body.stagelight .hero-media-slot,
  body.stagelight .hero-music-slot,
  body.stagelight .hero-ticker-slot,
  body.stagelight .hero-cards { grid-column: 1; grid-row: auto; }
  body.stagelight .hero-lockwrap { order: 1; align-self: start; }
  body.stagelight .hero-media-slot { order: 2; margin: 0; }
  body.stagelight .hero-ticker-slot { order: 3; }
  body.stagelight .hero-music-slot { order: 4; margin-top: 0; }
  body.stagelight .hero-cards { order: 5; margin-top: 4px; }
  body.stagelight .hero-photo { height: clamp(220px, 34vh, 320px); }
  body.stagelight .hero-media { height: auto; min-height: clamp(220px, 34vh, 320px); }
  /* Song stats rides the photo; the inline button under the sets hides. */
  body.stagelight .hero-music-slot .hero-stats-btn { display: none; }
  body.stagelight .hero-stats-overlay { display: inline-flex; }
}
@media (max-width: 560px) {
  body.stagelight .home-hero .sc-city { font-size: 30px; }
  body.stagelight .hero-inner { padding-top: calc(66px + var(--sl-breadcrumb-h, 37px) + 18px); padding-bottom: 28px; row-gap: 20px; }
  body.stagelight .hero-photo, body.stagelight .hero-media { height: clamp(180px, 26vh, 240px); min-height: 0; }
  body.stagelight .hero-card { gap: 12px; padding: 11px 14px; }
}
body.stagelight .sc-closed { position: relative; z-index: 1; display: flex; align-items: center; gap: 24px; min-height: 84px; padding: 18px 70px 18px 28px; }
body.stagelight .show-entry[open] .sc-closed { display: none; }
body.stagelight .sc-date { font-family: var(--sl-mono); font-size: 13.5px; letter-spacing: 0.08em; color: var(--sl-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
body.stagelight .sc-place { display: flex; flex-direction: column; min-width: 0; }
body.stagelight .sc-place strong { font-family: var(--sl-display); font-weight: 640; font-size: 17px; letter-spacing: -0.005em; color: var(--sl-ink); }
body.stagelight .sc-place small { font-size: 13.5px; color: var(--sl-muted); margin-top: 2px; }
body.stagelight .sc-lockup { display: none; }
body.stagelight .show-entry[open] .sc-lockup { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 44px; align-items: center; padding: 44px 84px 0 44px; }
body.stagelight .show-entry.no-image[open] .sc-lockup { grid-template-columns: 1fr; padding-right: 84px; }
body.stagelight .sc-lock { display: block; }
body.stagelight .sc-eyebrow { display: block; font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sl-muted); }
body.stagelight .sc-city { display: block; font-family: var(--sl-display); font-weight: 720; font-size: 40px; letter-spacing: -0.015em; line-height: 1.05; margin: 12px 0 0; color: var(--sl-ink); }
body.stagelight .show-entry.is-latest .sc-city { font-size: 56px; letter-spacing: -0.02em; }
body.stagelight .sc-venue { display: block; font-size: 15px; color: var(--sl-muted); margin-top: 10px; font-weight: 440; }
body.stagelight .sc-chips { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
body.stagelight .sc-chip { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 18px; border-radius: var(--sl-r-pill); font-size: 13.5px; font-weight: 560; white-space: nowrap; transition: transform 0.18s ease, background 0.18s ease; }
body.stagelight .sc-chip svg { flex: none; }
body.stagelight .sc-chip-primary { background: var(--sl-ink); color: #111; box-shadow: 0 8px 24px -8px rgba(242,242,240,0.35), inset 0 1px 0 rgba(255,255,255,0.9); border: 0; }
body.stagelight .sc-chip-primary:hover { transform: translateY(-1px); background: #fff; }
body.stagelight .sc-chip-glass { background: rgba(255,255,255,0.055); border: 1px solid var(--sl-line-strong); color: var(--sl-ink); }
body.stagelight .sc-chip-glass:hover { transform: translateY(-1px); background: rgba(255,255,255,0.09); }
body.stagelight .sc-photo { display: block; position: relative; }
body.stagelight .sc-photo img { width: 100%; height: auto; border-radius: var(--sl-r-md); border: 1px solid var(--sl-line); box-shadow: 0 30px 60px -24px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.1); }
body.stagelight .sc-body { padding: 0 44px 36px; }
body.stagelight .show-entry.is-latest .sc-body { padding: 0 max(28px, calc((100% - 1400px) / 2)) 40px; }
body.stagelight .sc-sets { border-top: 1px solid var(--sl-line); margin-top: 32px; padding-top: 30px; display: grid; gap: 18px; }
body.stagelight .sc-row { display: grid; grid-template-columns: 96px 1fr; gap: 20px; }
body.stagelight .sc-label { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.18em; color: var(--sl-faint); text-transform: uppercase; padding-top: 5px; white-space: nowrap; }
body.stagelight .sc-prose { font-size: 17px; line-height: 1.68; font-weight: 430; color: var(--sl-ink); margin: 0; }
body.stagelight .sc-prose a { color: inherit; }
body.stagelight .sc-preview-note { font-size: 13.5px; color: var(--sl-faint); margin: 0; }
body.stagelight .sc-notes .setlist-annotations { color: var(--sl-faint); font-size: 13.5px; }
body.stagelight .sc-pulls { border-top: 1px solid var(--sl-line); margin-top: 6px; padding-top: 22px; }
body.stagelight .sc-pull-list { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: baseline; }
body.stagelight .sc-pull { font-size: 15px; line-height: 1.6; }
body.stagelight .sc-pull svg { display: inline-block; vertical-align: baseline; margin-right: 6px; height: 10px; width: auto; }
body.stagelight .sc-pull .rarity-symbol svg { height: 10px; }
body.stagelight .sc-tier { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sl-muted); margin-right: 6px; }
body.stagelight .sc-pull b { font-weight: 600; white-space: nowrap; color: var(--sl-ink); }
body.stagelight .sc-pull [fill="#111111"] { fill: #f2f2f0; }
body.stagelight .sc-pull [stroke="#111111"] { stroke: #f2f2f0; }
/* Two-up feed: closed cards pair per row; the open card takes the full row
   (view transitions animate the reflow — Stripe case-study language). Rows
   stretch so a two-line title never breaks its pair. */
body.stagelight .setlist-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
body.stagelight .setlist-list .show-entry[open] { grid-column: 1 / -1; }
body.stagelight .setlist-list .show-entry:not([open]) .sc-closed { min-height: 96px; height: 100%; }
/* Odd count: the newest show leads full-width and a touch taller. */
body.stagelight .setlist-list .show-entry.is-lead { grid-column: 1 / -1; }
body.stagelight .setlist-list .show-entry.is-lead:not([open]) .sc-closed { min-height: 116px; }
body.stagelight .setlist-list .show-entry.is-lead:not([open]) .sc-place strong { font-size: 20px; }
@media (max-width: 760px) { body.stagelight .setlist-list { grid-template-columns: 1fr; } }
body.stagelight .up-tickets {
  display: inline-flex; align-items: center; gap: 7px; margin-left: auto; flex: none;
  padding: 8px 14px; border: 1px solid var(--sl-line-strong); border-radius: var(--sl-r-pill);
  background: rgba(255,255,255,0.05); color: var(--sl-ink); font-size: 13px; font-weight: 560; white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}
body.stagelight .up-tickets span { transition: transform 0.18s ease; }
body.stagelight .up-tickets:hover { background: rgba(255,255,255,0.1); border-color: var(--sl-muted); }
body.stagelight .up-tickets:hover span { transform: translateX(2px); }
body.stagelight .up-official { margin-left: auto; }
body.stagelight .setlist-archive-panel > summary { display: none; }
@media (max-width: 560px) {
  body.stagelight .site-head { gap: 16px; }
  body.stagelight .brand-wordmark { font-size: 17px; }
}
@media (max-width: 900px) {
  body.stagelight .show-entry[open] .sc-lockup { grid-template-columns: 1fr; gap: 24px; padding: 26px 22px 0; }
  body.stagelight .sc-city { font-size: 28px; }
  body.stagelight .hero-inner { padding-left: 22px; padding-right: 22px; }
  body.stagelight .home-hero .sc-city { font-size: 38px; }
  body.stagelight .sc-body { padding: 0 22px 26px; }
  body.stagelight .sc-row { grid-template-columns: 1fr; gap: 6px; }
  body.stagelight .sc-label { padding-top: 0; }
  body.stagelight .sc-closed { padding: 16px 56px 16px 20px; gap: 12px; flex-wrap: wrap; }
  body.stagelight .sc-chev { top: 22px; right: 18px; }
}

/* ---- DATA METRICS (stat tiles) ---- */
body.stagelight .data-metrics .nick-stat {
  background: rgba(255,255,255,0.03); border: 1px solid var(--sl-line); border-radius: var(--sl-r-md);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
body.stagelight .data-metrics .nick-stat strong { font-family: var(--sl-mono); color: var(--sl-ink); }
body.stagelight .data-metrics .nick-stat span { font-family: var(--sl-mono); color: var(--sl-faint); text-transform: uppercase; letter-spacing: 0.12em; }

/* ---- TOOLBAR CONTROLS ---- */
body.stagelight .data-toolbar { color: var(--sl-muted); }
body.stagelight .data-toolbar .show-filter span { font-family: var(--sl-mono); color: var(--sl-faint); text-transform: uppercase; letter-spacing: 0.12em; }
body.stagelight .data-toolbar select {
  background: rgba(255,255,255,0.05); color: var(--sl-ink); border: 1px solid var(--sl-line-strong); border-radius: var(--sl-r-pill);
}
body.stagelight .data-toolbar select option { color: #111; }
body.stagelight .type-filter { border: 1px solid var(--sl-line-strong); background: rgba(255,255,255,0.04); border-radius: var(--sl-r-pill); }
body.stagelight .type-filter button { color: var(--sl-muted); }
body.stagelight .type-filter button[aria-pressed="true"], body.stagelight .type-filter button.is-active { background: var(--sl-ink); color: #111; }

/* ---- DATA TABLES (tour stats, shelf watch) ---- */
/* Fixed layout locks columns to the header so filtering/sorting (which changes
   the widest visible cell) can never re-flow them. Durable fix for "columns move
   when I click Not Played." Lives here in the stagelight overrides (not the base
   sheet) so it reliably ships in stagelight.css and wins the cascade. */
body.stagelight .tour-table { table-layout: fixed; }
body.stagelight .tour-table thead th:nth-child(1) { width: 24%; }
body.stagelight .tour-table thead th:nth-child(2) { width: 12%; }
body.stagelight .tour-table thead th:nth-child(3) { width: 25%; }
body.stagelight .tour-table thead th:nth-child(4) { width: 24%; }
body.stagelight .tour-table thead th:nth-child(5) { width: 15%; }
body.stagelight .tour-table tbody th[scope="row"] { overflow: hidden; text-overflow: ellipsis; }
body.stagelight .tour-table .signal-cell small { white-space: normal; }
/* (shelf-watch section frame removed — the photo-card rail carries the design) */
/* Tour stats: the frame sits on the spreadsheet itself, not the whole section
   (page-rhythm call, Alex round 6). */
body.stagelight .tour-stats .tour-table-wrap {
  background: var(--sl-glass);
  -webkit-backdrop-filter: blur(26px) saturate(1.4); backdrop-filter: blur(26px) saturate(1.4);
  border: 1px solid var(--sl-line); border-radius: var(--sl-r); box-shadow: var(--sl-glass-shadow);
  border-bottom: 1px solid var(--sl-line);
}
body.stagelight .data-table, body.stagelight .tour-table { color: var(--sl-ink); }
body.stagelight .tour-table thead th { background: rgba(17,17,20,0.94); }
body.stagelight .data-table th, body.stagelight .tour-table th[scope="col"], body.stagelight .data-table thead th {
  font-family: var(--sl-mono); color: var(--sl-faint); text-transform: uppercase; letter-spacing: 0.1em;
  border-bottom: 1px solid var(--sl-line);
}
body.stagelight .data-table td, body.stagelight .tour-table td { border-bottom: 1px solid var(--sl-line-faint); }
body.stagelight .data-table tbody tr:hover, body.stagelight .tour-table tbody tr:hover { background: rgba(255,255,255,0.035); }
body.stagelight .data-table th[scope="row"], body.stagelight .tour-table th[scope="row"] { color: var(--sl-ink); }
body.stagelight .tt-song-link { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.15s ease; }
body.stagelight .tt-song-link:hover { border-bottom-color: var(--sl-muted); }
/* Column tooltips: hover on desktop, tap/focus on touch. Anchored right so the
   pop never overflows the table edge. */
body.stagelight .th-tip { position: relative; display: inline-block; margin-left: 6px; vertical-align: middle; }
body.stagelight .th-tip-btn { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; background: none; color: var(--sl-faint); cursor: help; }
body.stagelight .th-tip-btn:hover, body.stagelight .th-tip-btn:focus-visible { color: var(--sl-ink); }
body.stagelight .th-tip-pop {
  position: absolute; right: -8px; top: calc(100% + 8px); z-index: 30; width: 260px;
  padding: 12px 14px; border: 1px solid var(--sl-line-strong); border-radius: 10px;
  background: rgba(16,16,19,0.96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px -16px rgba(0,0,0,0.8);
  font-family: var(--sl-body, inherit); font-size: 12.5px; font-weight: 400; line-height: 1.55; letter-spacing: 0; text-transform: none;
  color: var(--sl-muted); text-align: left; white-space: normal;
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
body.stagelight .th-tip-pop b { color: var(--sl-ink); font-weight: 620; }
body.stagelight .th-tip:hover .th-tip-pop, body.stagelight .th-tip:focus-within .th-tip-pop { opacity: 1; transform: none; pointer-events: auto; }
body.stagelight .data-table td, body.stagelight .data-table strong { color: var(--sl-ink); }
body.stagelight .tour-table .tc-num, body.stagelight .data-table .mono, body.stagelight .slp { font-family: var(--sl-mono); }
body.stagelight .tour-table button { color: var(--sl-muted); font-family: var(--sl-mono); }
body.stagelight .tour-table button:hover, body.stagelight .tour-table button[aria-sort] { color: var(--sl-ink); }
body.stagelight .slp-progress { background: rgba(255,255,255,0.1); }
body.stagelight .slp-progress i { background: var(--red); }

/* ---- UPCOMING DATES (inside Setlists) ---- */
body.stagelight .upcoming-dates {
  position: relative; margin-top: 16px; border-radius: var(--sl-r); overflow: hidden;
  background: var(--sl-glass);
  -webkit-backdrop-filter: blur(26px) saturate(1.4); backdrop-filter: blur(26px) saturate(1.4);
  border: 1px solid var(--sl-line); box-shadow: var(--sl-glass-shadow);
}
/* Full-bleed live-show backdrop (Andy Tennille). A dark vertical gradient — same
   overlay idiom as the latest-show card's .sc-bg::after — keeps every mono label
   and row above WCAG contrast. Image + overlay ride an ::before so the section's
   own content (heading, rows, credit) stacks cleanly above it. */
body.stagelight .upcoming-dates::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(180deg, rgba(9,9,11,0.74) 0%, rgba(10,10,12,0.82) 48%, rgba(11,11,12,0.9) 100%), url("/assets/upcoming-bg-andy-tennille.jpg");
  background-size: cover, cover; background-position: center, center;
}
body.stagelight .upcoming-heading, body.stagelight .upcoming-dates .tour-dates { position: relative; z-index: 1; }
body.stagelight .upcoming-dates .tour-dates { padding-bottom: 20px; }
/* Quiet photographer credit — band policy is to credit every photographer. */
body.stagelight .upcoming-credit {
  display: block; text-align: right; margin: 10px 6px 0 0; position: relative; z-index: 1;
  font-family: var(--sl-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sl-faint); pointer-events: none;
}
body.stagelight .upcoming-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 20px 26px 14px; }
body.stagelight .upcoming-heading h3 { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.18em; font-weight: 600; color: var(--sl-ink); }
body.stagelight .upcoming-heading span { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--sl-faint); text-transform: uppercase; }
/* Upcoming rows share the posted-show card geometry: date | place | flag,
   same columns, with the Upcoming badge in the setlist-affordance slot. */
body.stagelight .tour-dates li.is-upcoming {
  display: flex; align-items: center; gap: 24px; min-height: 84px; padding: 18px 28px;
  border-top: 1px solid var(--sl-line-faint);
}
body.stagelight .tour-dates li .up-flag {
  margin-left: auto; display: inline-flex; align-items: center; font-style: normal;
  font-family: var(--sl-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sl-muted); border: 1px solid var(--sl-line-strong); border-radius: 999px; padding: 8px 16px; white-space: nowrap;
}
@media (max-width: 560px) {
  body.stagelight .tour-dates li.is-upcoming { padding: 16px 20px; gap: 12px; flex-wrap: wrap; }
  body.stagelight .tour-dates li .up-flag { margin-left: 0; }
}

/* ---- SHEET KEY ---- */
body.stagelight .sheet-key, body.stagelight .sheet-key h2, body.stagelight .sheet-key h3 { color: var(--sl-ink); }
body.stagelight .sheet-key p, body.stagelight .marker-legend em { color: var(--sl-muted); }
body.stagelight .marker-legend strong { color: var(--sl-ink); }
body.stagelight .key-block { border-color: var(--sl-line); }

/* ---- NICK FEATURE ---- */
/* Nick stats: no bento frame — the section sits open on the page (Alex round 6). */
body.stagelight .nick-feature { background: none; border: 0; box-shadow: none; padding: 0; color: var(--sl-ink); }
body.stagelight .nick-feature h2.nick-headline { margin: 0 0 26px; max-width: none; color: var(--sl-muted); }
/* Grouped glass summary panel. */
/* Darker than the standard glass so the gear art's blue halo reads (Alex). */
body.stagelight .nick-panel { background: linear-gradient(180deg, rgba(13,13,16,0.82), rgba(10,10,13,0.72)); -webkit-backdrop-filter: blur(26px) saturate(1.4); backdrop-filter: blur(26px) saturate(1.4); border: 1px solid var(--sl-line); border-radius: var(--sl-r); box-shadow: var(--sl-glass-shadow); padding: 26px 28px 22px; }
body.stagelight .nick-gear { display: block; width: 100%; height: auto; margin: 22px 0 6px; }
body.stagelight .nick-lead { display: flex; align-items: baseline; gap: 8px; }
body.stagelight .nick-lead strong { font-family: var(--sl-display); font-size: 46px; line-height: 1; font-weight: 640; color: var(--sl-ink); font-variant-numeric: tabular-nums; }
body.stagelight .nick-lead span { font-family: var(--sl-display); font-size: 21px; color: var(--sl-muted); font-variant-numeric: tabular-nums; }
body.stagelight .nick-caption { margin: 8px 0 22px; font-size: 14.5px; color: var(--sl-muted); }
/* Three totals as centered tour-stats tiles inside the panel. */
body.stagelight .nick-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 20px 0 0; }
body.stagelight .nick-tiles .nick-stat { text-align: center; }
body.stagelight .nick-tiles .nick-stat strong { display: block; }
body.stagelight .nick-tiles .nick-stat span { display: block; margin-top: 4px; }
/* Type chips (own column). */
body.stagelight .nick-type { display: flex; align-items: center; }
body.stagelight .nick-chip { font-family: var(--sl-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 8px; border-radius: var(--sl-r-pill); border: 1px solid transparent; white-space: nowrap; }
body.stagelight .nick-chip.is-original { color: #7fbf9b; background: rgba(45, 124, 82, 0.14); border-color: rgba(45, 124, 82, 0.5); }
body.stagelight .nick-chip.is-cover { color: #8fc0e0; background: rgba(96, 165, 210, 0.12); border-color: rgba(96, 165, 210, 0.45); }
/* Likelihood score (coral, mono, right-aligned, digits only — never a percent). */
body.stagelight .nick-score { justify-self: end; gap: 8px; }
body.stagelight .nick-score b { font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 640; }
body.stagelight .nk-hot .tn-tier, body.stagelight .nk-hot b { color: #e5726f; }
body.stagelight .nk-warm .tn-tier, body.stagelight .nk-warm b { color: #e5b3b1; }
body.stagelight .nk-long b { color: var(--sl-muted); }
body.stagelight .nick-song small { display: block; margin-top: 3px; font-family: var(--sl-mono); font-size: 11px; letter-spacing: 0.02em; color: var(--sl-faint); text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.stagelight .nick-last { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
body.stagelight .nick-last small { font-family: var(--sl-mono); font-size: 11px; color: var(--sl-faint); }
body.stagelight .nick-songbook { margin-top: 20px; }
/* Narrow screens: drop Type / Gap / Last columns so the row stays legible.
   next/woodshed collapse to # | Song | Plays | Heat; played to # | Song | Nick plays. */
@media (max-width: 560px) {
  body.stagelight .nick-ranking-head[data-view="next"], body.stagelight .nick-ranking[data-view="next"] li,
  body.stagelight .nick-ranking-head[data-view="woodshed"], body.stagelight .nick-ranking[data-view="woodshed"] li { grid-template-columns: 22px minmax(0, 1fr) 58px 62px; }
  body.stagelight .nick-ranking-head[data-view="played"], body.stagelight .nick-ranking[data-view="played"] li { grid-template-columns: 22px minmax(0, 1fr) 66px; }
  body.stagelight .nrh-gap, body.stagelight .nick-gap,
  body.stagelight .nrh-last, body.stagelight .nick-last,
  body.stagelight .nrh-nicklast, body.stagelight .nick-nicklast { display: none; }

  body.stagelight .nick-panel { padding: 22px 20px 20px; }
  body.stagelight .nick-lead strong { font-size: 40px; }
}
/* Three labeled progress bars (overall / originals / covers). */
body.stagelight .nick-bars { display: grid; gap: 12px; margin-top: 16px; }
body.stagelight .nick-bar-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 14px; align-items: center; }
body.stagelight .nick-bar-row .nick-progress-track { margin: 0; }
body.stagelight .nb-label { font-family: var(--sl-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sl-faint); }
body.stagelight .nb-count { font-family: var(--sl-mono); font-size: 12px; color: var(--sl-muted); font-variant-numeric: tabular-nums; }
body.stagelight .nick-progress-track i.is-overall { background: var(--sl-ink); }
/* Ranking columns change per view. next/woodshed = 7 cols (with Heat); played = 5. */
body.stagelight .nick-ranking-head, body.stagelight .nick-ranking li { display: grid; gap: 12px; align-items: baseline; }
body.stagelight .nick-ranking-head[data-view="next"], body.stagelight .nick-ranking[data-view="next"] li,
body.stagelight .nick-ranking-head[data-view="woodshed"], body.stagelight .nick-ranking[data-view="woodshed"] li { grid-template-columns: 26px minmax(0, 1fr) 76px 62px 108px 74px; }
body.stagelight .nick-ranking-head[data-view="played"], body.stagelight .nick-ranking[data-view="played"] li { grid-template-columns: 26px minmax(0, 1fr) 92px minmax(130px, 1.1fr); }
/* Per-view column visibility (.nx = next/woodshed only, .pv = played only). */
body.stagelight .nick-ranking-head[data-view="played"] .nx, body.stagelight .nick-ranking[data-view="played"] .nx { display: none; }
body.stagelight .nick-ranking-head[data-view="next"] .pv, body.stagelight .nick-ranking[data-view="next"] .pv,
body.stagelight .nick-ranking-head[data-view="woodshed"] .pv, body.stagelight .nick-ranking[data-view="woodshed"] .pv { display: none; }
/* display:grid would override the hidden attribute — never let hidden rows paint. */
body.stagelight .nick-ranking li[hidden] { display: none; }
body.stagelight .nick-ranking-head { border-bottom: 1px solid var(--sl-line); position: sticky; top: 0; z-index: 3; background: #101013; }
body.stagelight .nick-ranking-head .nrh-col { font-family: var(--sl-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--sl-faint); text-transform: uppercase; white-space: nowrap; }
body.stagelight .nrh-sort { padding: 0; border: 0; background: none; text-align: left; cursor: pointer; transition: color 0.15s ease; white-space: nowrap; display: inline-flex; align-items: baseline; gap: 4px; }
body.stagelight .nrh-sort:hover, body.stagelight .nrh-sort:focus-visible { color: var(--sl-ink); }
body.stagelight .nrh-sort.is-sorted { color: var(--sl-muted); }
/* Active sort arrow always visible; inactive arrows show on hover/keyboard focus only. */
body.stagelight .nrh-arr { opacity: 0; transition: opacity 0.15s ease; }
body.stagelight .nrh-sort:hover .nrh-arr, body.stagelight .nrh-sort:focus-visible .nrh-arr { opacity: 0.55; }
body.stagelight .nrh-sort.is-sorted .nrh-arr { opacity: 1; }
/* Right-align the numeric / trailing columns (head + cells). */
body.stagelight .nrh-plays, body.stagelight .nick-plays,
body.stagelight .nrh-gap, body.stagelight .nick-gap,
body.stagelight .nrh-last, body.stagelight .nick-last,
body.stagelight .nrh-heat, body.stagelight .nick-score,
body.stagelight .nrh-nickplays, body.stagelight .nick-nickplays,
body.stagelight .nrh-nicklast, body.stagelight .nick-nicklast { text-align: right; justify-self: end; }
body.stagelight .nick-gap { font-family: var(--sl-mono); font-size: 12.5px; color: var(--sl-muted); font-variant-numeric: tabular-nums; white-space: nowrap; display: flex; align-items: baseline; gap: 5px; justify-content: flex-end; }
body.stagelight .nick-gap small { color: var(--sl-faint); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
body.stagelight .nick-plays small { display: block; }
body.stagelight .nick-nickplays strong { font-family: var(--sl-mono); font-size: 15px; font-weight: 620; color: var(--sl-ink); font-variant-numeric: tabular-nums; }
body.stagelight .nick-nicklast { font-family: var(--sl-mono); font-size: 12.5px; color: var(--sl-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
body.stagelight .nick-last { font-family: var(--sl-mono); font-size: 12.5px; color: var(--sl-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
body.stagelight .nick-feature h2, body.stagelight .nick-feature h3 { color: var(--sl-ink); font-family: var(--sl-display); }
body.stagelight .nick-feature p { color: var(--sl-muted); }
body.stagelight .nick-summary .nick-stat { background: rgba(255,255,255,0.03); border: 1px solid var(--sl-line); border-radius: var(--sl-r-md); }
body.stagelight .nick-summary .nick-stat strong { font-family: var(--sl-mono); color: var(--sl-ink); }
body.stagelight .nick-progress > div:first-child strong { font-family: var(--sl-mono); font-size: 26px; font-weight: 640; color: var(--sl-ink); }
body.stagelight .nick-progress > div:first-child span { font-size: 13.5px; color: var(--sl-muted); }
body.stagelight .nick-progress-track i.is-original { background: var(--green); }
body.stagelight .nick-progress-track i.is-cover { background: rgba(96, 165, 210, 0.85); }
body.stagelight .progress-key span { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--sl-faint); text-transform: uppercase; }
body.stagelight .progress-key .key-original { background: var(--green); }
body.stagelight .progress-key .key-cover { background: rgba(96, 165, 210, 0.85); }
body.stagelight .progress-key .key-unplayed { background: rgba(255,255,255,0.18); }
body.stagelight .nick-ranking-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 6px 0 10px; }
body.stagelight .nick-ranking-heading h3 { font-size: 17px; font-weight: 640; letter-spacing: 0; }
body.stagelight .nick-ranking-heading span { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--sl-faint); text-transform: uppercase; }
body.stagelight .nick-ranking li { padding: 12px 10px; }
body.stagelight .nick-ranking li:hover { background: rgba(255,255,255,0.025); }
body.stagelight .nick-rank { font-family: var(--sl-mono); font-size: 12px; color: var(--sl-faint); font-variant-numeric: tabular-nums; }
body.stagelight .nick-song { display: block; min-width: 0; }
/* Song titles never truncate. Dropping the Type column freed the width, so a long
   title wraps to a second line instead of ellipsing ("No Sugar Tonight/New Mother
   Nature" used to clip in the expanded table). */
body.stagelight .nick-song strong { display: block; font-size: 15px; font-weight: 600; color: var(--sl-ink); letter-spacing: 0.01em; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
body.stagelight .nick-song small { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--sl-faint); text-transform: uppercase; flex: none; }
body.stagelight .nick-plays { display: flex; align-items: baseline; gap: 6px; justify-self: end; }
body.stagelight .nick-plays strong { font-family: var(--sl-mono); font-size: 15px; font-weight: 620; color: var(--sl-ink); font-variant-numeric: tabular-nums; }
body.stagelight .nick-plays small { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--sl-faint); text-transform: uppercase; }
body.stagelight .nick-ranking li.is-zero { opacity: 0.45; }
body.stagelight .nick-played-panel { margin-top: 18px; border-top: 1px solid var(--sl-line); }
body.stagelight .nick-played-panel > summary { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 16px 10px 6px; font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.12em; color: var(--sl-faint); }
body.stagelight .nick-played-panel > summary:hover { color: var(--sl-ink); }
body.stagelight .nick-played-panel > summary strong { font-size: 12px; color: var(--sl-muted); }
body.stagelight .nick-disclosure > summary { width: 100%; }

/* ── Collapsed preview: Song / Why now / Heat (three columns) ─────────────────
   The expanded songbook keeps the full column set unchanged. The preview is a
   presentation layer over the same rows: the "Why now" cell ships server-side so
   the six-row default reads correctly before the end-of-body JS runs. The .nx/.pv
   view system still governs which "why" and which right-hand number show (Heat for
   next/woodshed, Nick plays for the played view). Selectors carry body.stagelight
   + an extra class so they outrank both the desktop and the <=560px grid rules. */
body.stagelight .nick-why, body.stagelight .nick-why-nick { display: none; }
body.stagelight .nick-ranking-head .nrh-why { display: none; }
/* Preview grid: Song | Why now. The 0-100 Heat number is dropped from the preview
   (Alex 7/23: "the heat scale is goofy") — the rows are still ORDERED by heat
   (most likely next), so the ranking survives; only the abstract score is hidden.
   The plain-language "Why now" cell carries the reasoning. The score cells stay in
   the markup (they drive sort + the expanded table) but are not shown in preview. */
body.stagelight .nick-ranking-wrap.is-preview .nick-ranking-head,
body.stagelight .nick-ranking-wrap.is-preview .nick-ranking li { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.85fr); gap: 16px; }
body.stagelight .nick-ranking-wrap.is-preview .nick-song,
body.stagelight .nick-ranking-wrap.is-preview .nrh-song { grid-column: 1; }
body.stagelight .nick-ranking-wrap.is-preview .nick-why,
body.stagelight .nick-ranking-wrap.is-preview .nick-why-nick,
body.stagelight .nick-ranking-wrap.is-preview .nrh-why { grid-column: 2; }
body.stagelight .nick-ranking-wrap.is-preview .nick-score,
body.stagelight .nick-ranking-wrap.is-preview .nick-nickplays,
body.stagelight .nick-ranking-wrap.is-preview .nrh-heat,
body.stagelight .nick-ranking-wrap.is-preview .nrh-nickplays { display: none; }
/* Show the "why" cell + header only in preview; per-view via .nx/.pv. */
body.stagelight .nick-ranking-wrap.is-preview .nick-ranking[data-view="next"] .nick-why,
body.stagelight .nick-ranking-wrap.is-preview .nick-ranking[data-view="woodshed"] .nick-why { display: block; }
body.stagelight .nick-ranking-wrap.is-preview .nick-ranking[data-view="played"] .nick-why-nick { display: block; }
body.stagelight .nick-ranking-wrap.is-preview .nrh-why { display: block; }
/* Strip the expanded-only cells + the row furniture the preview drops:
   rank, Type chip, Plays, Gap, Last, Last-with-Nick, the long sub-sentence,
   and the HOT/tier word (the Heat number stays). */
body.stagelight .nick-ranking-wrap.is-preview .nrh-rank,
body.stagelight .nick-ranking-wrap.is-preview .nick-rank,
body.stagelight .nick-ranking-wrap.is-preview .nick-plays,
body.stagelight .nick-ranking-wrap.is-preview .nick-gap,
body.stagelight .nick-ranking-wrap.is-preview .nick-last,
body.stagelight .nick-ranking-wrap.is-preview .nick-nicklast,
body.stagelight .nick-ranking-wrap.is-preview .nick-song small,
body.stagelight .nick-ranking-wrap.is-preview .nick-score .tn-tier,
body.stagelight .nick-ranking-wrap.is-preview .nrh-plays,
body.stagelight .nick-ranking-wrap.is-preview .nrh-gap,
body.stagelight .nick-ranking-wrap.is-preview .nrh-last,
body.stagelight .nick-ranking-wrap.is-preview .nrh-nicklast { display: none; }
/* No faded rows, no title truncation, borders match the Tour Stats table. */
body.stagelight .nick-ranking-wrap.is-preview .nick-ranking li.is-zero { opacity: 1; }
body.stagelight .nick-ranking-wrap.is-preview .nick-ranking li { border-bottom: 1px solid var(--sl-line-faint); }
body.stagelight .nick-ranking-wrap.is-preview .nick-song strong { white-space: normal; overflow: visible; text-overflow: clip; }
/* "Why now" reads as a quiet supporting metric line (mono, muted, wraps freely). */
body.stagelight .nick-ranking-wrap.is-preview .nick-why,
body.stagelight .nick-ranking-wrap.is-preview .nick-why-nick { font-family: var(--sl-mono); font-size: 12.5px; line-height: 1.45; color: var(--sl-muted); font-variant-numeric: tabular-nums; }
/* The collapsed preview sorts too. Clicking Song or Heat re-orders the preview rows
   in place, and the state carries into the expanded table (one shared sort state).
   Previously the preview killed pointer events, so the header looked live but did
   nothing until you expanded the songbook. */
body.stagelight .nick-ranking-wrap.is-preview .nrh-sort { pointer-events: auto; cursor: pointer; }
body.stagelight .nick-ranking-wrap.is-preview .nrh-arr { display: inline; }

/* ---- COMMUNITY LINKS ---- */
body.stagelight .ticket-link {
  background: var(--sl-ink); color: #111; border: 0; border-radius: var(--sl-r-pill); font-weight: 650;
  box-shadow: 0 8px 24px -8px rgba(242,242,240,0.35), inset 0 1px 0 rgba(255,255,255,0.9);
}
body.stagelight .ticket-link:hover { background: #fff; }

/* ---- CROSS-PROMO BAND ---- */
body.stagelight .cross-promo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
body.stagelight .xp-card {
  position: relative; display: flex; align-items: flex-end; min-height: 344px; overflow: hidden;
  border-radius: var(--sl-r); border: 1px solid var(--sl-line); box-shadow: var(--sl-glass-shadow);
  text-decoration: none; isolation: isolate;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
body.stagelight .xp-bg { position: absolute; inset: 0; z-index: -2; }
body.stagelight .xp-bg img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
body.stagelight .xp-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(200deg, rgba(9,9,11,0.06) 0%, rgba(9,9,11,0.30) 52%, rgba(9,9,11,0.88) 100%);
}
body.stagelight .xp-cover .xp-bg img { object-position: center 30%; }
body.stagelight .xp-body { position: relative; z-index: 1; display: grid; gap: 6px; padding: 26px 28px; }
body.stagelight .xp-title { font-family: var(--sl-display); font-weight: 640; font-size: 26px; letter-spacing: -0.01em; color: var(--sl-ink); }
/* Community cards use the shared bc-open rounded-square affordance (base styles at
   .bc-open above); these rules give it the same quarter-turn-left hover the bento
   cards use, scoped to .xp-card so the pattern matches exactly. */
body.stagelight .xp-card:hover { transform: translateY(-4px); box-shadow: 0 26px 60px -22px rgba(0,0,0,0.85); border-color: rgba(255,255,255,0.24); }
body.stagelight .xp-card:hover .xp-bg img { transform: scale(1.05); }
body.stagelight .xp-card:hover .bc-open { border-color: var(--sl-ink); color: var(--sl-ink); background: rgba(255,255,255,0.06); }
body.stagelight .xp-card:hover .bc-open svg { transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) {
  body.stagelight .xp-card, body.stagelight .xp-bg img { transition: none; }
  body.stagelight .xp-card:hover { transform: none; }
  body.stagelight .xp-card:hover .xp-bg img { transform: none; }
}
@media (max-width: 760px) { body.stagelight .cross-promo { grid-template-columns: 1fr; } }

/* ---- RARITY SYMBOLS: light ink shapes on dark (silver/gold kept) ---- */
body.stagelight .rarity-symbol [fill="#111111"] { fill: #f2f2f0; }
body.stagelight .rarity-symbol [stroke="#111111"] { stroke: #f2f2f0; }

/* ---- OLD-SETLIST ROWS: brighten actions + row text ---- */
body.stagelight .setlist-row summary { color: var(--sl-ink); }
body.stagelight .setlist-row time { font-family: var(--sl-mono); color: var(--sl-muted); }
body.stagelight .show-place strong { color: var(--sl-ink); }
body.stagelight .show-place small { color: var(--sl-muted); }
body.stagelight .show-action { color: var(--sl-muted); border-color: var(--sl-line-strong); }
body.stagelight .show-action:hover { color: var(--sl-ink); }
body.stagelight .play-action { border: 1px solid var(--sl-line-strong); }
body.stagelight .row-toggle { color: var(--sl-faint); }
body.stagelight .setlist-row[open] .row-toggle { color: var(--sl-ink); }
body.stagelight .setlist-row { border-bottom: 1px solid var(--sl-line); }
body.stagelight .setlist-section .setlist-text, body.stagelight .setlist-row-body { color: var(--sl-ink); }

/* ---- FOOTER ---- */
/* Garrie Vereen's line, stretched across the page and sitting right on the
   footer, Webflow-style: no borders, slight baseline crop, italic. */
/* ATHENS STRIP — the oversized "ALL THE WAY FROM ATHENS GA" line, FULLY legible,
   seated with only a slight baseline tuck onto the footer's top edge. The band is
   overflow:hidden so the line can slide up out of the footer on reveal. Extra air
   below the community cards (88px = the old 48 + Alex's +40). */
body.stagelight .athens-strip {
  width: 100vw; margin-left: calc(50% - 50vw); margin-top: 88px;
  overflow: hidden; line-height: 0.94; pointer-events: none; user-select: none;
}
/* Reveal-once: the line SLIDES UP from behind the footer line — the band clips it,
   the span starts fully below (translateY 100%) and rises to seated, as if the
   footer produced it. JS adds .will-reveal (arms the hidden start) then .is-revealed
   when the strip enters the viewport (IO threshold ~0.3). Default (no-JS) is seated;
   reduced-motion visitors are never armed. */
/* The sign turns on rather than sliding in: a stage light sweeps left to right,
   wiping the line into view, and the footer unfolds downward out from under it as
   though the line were the lip it hangs from. The wipe is clip-path (compositor
   friendly), the footer is a clip-path unroll plus a short staggered settle on its
   own columns. A lazy translate was the old behaviour; this replaces it. */
/* SCROLL-DRIVEN REVEAL — no JavaScript, and deliberately so. A JS reveal has to
   HIDE the footer first and trust a later event to bring it back; if that event
   never lands the footer is invisible on every page. Here the animation is driven
   by the scroll position itself, so the failure mode inverts: a browser without
   scroll-driven animation support, or a reduced-motion visitor, simply sees the
   finished state. Nothing can hide content permanently.

   The sign turns on rather than sliding in: a stage light wipes the line into
   view left to right, and the footer unrolls downward out from under it, as if the
   line were the lip it hangs from. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    body.stagelight .athens-strip span {
      animation: sl-athens-sweep linear both;
      animation-timeline: view();
      animation-range: entry 4% entry 62%;
    }
    body.stagelight .site-foot-inner {
      animation: sl-foot-unroll linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 46%;
    }
    body.stagelight .site-foot-inner > * {
      animation: sl-foot-settle linear both;
      animation-timeline: view();
      animation-range: entry 6% entry 58%;
    }
    body.stagelight .site-foot-inner > *:nth-child(2) { animation-range: entry 10% entry 64%; }
    body.stagelight .site-foot-inner > *:nth-child(3) { animation-range: entry 13% entry 68%; }
    body.stagelight .site-foot-inner > *:nth-child(4) { animation-range: entry 16% entry 72%; }
    body.stagelight .site-foot-inner > *:nth-child(n+5) { animation-range: entry 19% entry 76%; }
  }
}
@keyframes sl-athens-sweep {
  from { clip-path: inset(0 100% -18% 0); transform: translateY(9%) scaleY(1.05); }
  to { clip-path: inset(0 0 -18% 0); transform: translateY(0) scaleY(1); }
}
@keyframes sl-foot-unroll {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes sl-foot-settle {
  from { transform: translateY(-26px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
/* Solid high-visibility white fill across the whole line, PLUS a slow-drifting brand
   tie-dye clipped to the LEFT CORNER only (~the first few letters, fading out by ~16%).
   Two background layers under background-clip:text: the corner tie-dye (top layer, coral
   red -> teal/blue -> warm gold, transparent past ~16%) over a solid white layer, so the
   whole line reads white and only the corner shimmers. NO pink/magenta. Only the tie-dye
   layer's position animates; the white layer is pinned. */
body.stagelight .athens-strip span {
  display: block; text-align: center; white-space: nowrap;
  font-family: var(--sl-display); font-style: italic; font-weight: 700;
  font-size: clamp(38px, 7.3vw, 190px); letter-spacing: -0.018em;
  margin-bottom: -0.085em;
  background:
    linear-gradient(100deg, #d4514f 0%, #e0574f 5%, rgba(96,165,210,1) 10%, #c9a35f 14%, rgba(242,242,240,0) 17%),
    linear-gradient(rgba(242,242,240,0.92), rgba(242,242,240,0.92));
  background-size: 300% 100%, 100% 100%;
  background-position: 4% 50%, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: athens-tiedye 11s ease-in-out infinite alternate;
}
@keyframes athens-tiedye {
  from { background-position: 2% 50%, 0 0; }
  to   { background-position: 16% 50%, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  body.stagelight .athens-strip span { animation: none; clip-path: none; transform: none; }
  body.stagelight .site-foot-inner, body.stagelight .site-foot-inner > * { animation: none; clip-path: none; transform: none; opacity: 1; }
  body.stagelight .athens-strip span { animation: none; }
}
body.stagelight .site-foot {
  margin-top: 0; position: relative;
  background: linear-gradient(180deg, rgba(15,15,17,0.72), rgba(9,9,11,0.92));
  -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
  border-top: 1px solid var(--sl-line); color: var(--sl-muted);
}
body.stagelight .site-foot::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
}
body.stagelight .site-foot-inner {
  display: grid; grid-template-columns: 2.1fr 1fr 1fr 1fr; gap: 20px 40px;
  padding: 64px 0 32px; align-items: start;
}
body.stagelight .footer-lead { max-width: 420px; }
body.stagelight .footer-brand { display: inline-flex; align-items: center; gap: 12px; font-family: var(--sl-display); color: var(--sl-ink); font-weight: 640; font-size: 21px; letter-spacing: -0.012em; }
body.stagelight .footer-mark { width: min(384px, 94%); height: auto; }
body.stagelight .footer-lead p.footer-identity { margin: 18px 0 0; max-width: none; white-space: nowrap; font-weight: 650; font-size: 19px; color: var(--sl-ink); letter-spacing: 0.01em; }
body.stagelight .footer-copy { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--sl-faint); }
body.stagelight .footer-lead p { color: var(--sl-muted); margin-top: 8px; max-width: 340px; font-size: 17px; line-height: 1.55; }
body.stagelight .footer-links { gap: 9px; }
body.stagelight .footer-links strong { font-family: var(--sl-mono); font-size: 11px; color: var(--sl-faint); text-transform: uppercase; letter-spacing: 0.16em; margin-bottom: 8px; }
body.stagelight .footer-links a { color: var(--sl-muted); font-size: 17px; transition: color 0.15s ease, transform 0.15s ease; }
body.stagelight .footer-links a:hover { color: var(--sl-ink); transform: translateX(2px); }
body.stagelight .social-links { display: flex; flex-direction: row; align-items: center; gap: 12px; margin-top: 22px; }
body.stagelight .social-links a { display: inline-flex; }
body.stagelight .social-links a > span:last-child { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
body.stagelight .social-links .social-mark { width: 36px; height: 36px; flex: 0 0 36px; display: inline-grid; place-items: center; border-radius: 50%; font-family: Arial, Helvetica, sans-serif; font-size: 15px; font-weight: 700; }
body.stagelight .social-links a:hover .social-mark { color: var(--sl-ink); border-color: var(--sl-ink); background: rgba(255,255,255,0.1); transform: translateY(-1px); }
body.stagelight .social-mark { background: rgba(255,255,255,0.06); border: 1px solid var(--sl-line-strong); color: var(--sl-muted); transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, transform 0.18s ease; }
body.stagelight .footer-bottom {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 8px 24px; flex-wrap: wrap;
  margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--sl-line);
}
body.stagelight .footer-legal { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--sl-faint); margin: 0; }
body.stagelight .footer-legal span { margin: 0 8px; }
body.stagelight .footer-sources { margin: 0; font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.03em; color: var(--sl-faint); }
body.stagelight .footer-sources a { color: var(--sl-muted); text-decoration: underline; text-underline-offset: 2px; }
body.stagelight .footer-sources a:hover { color: var(--sl-ink); }
body.stagelight .footer-bottom-links { display: flex; align-items: center; gap: 24px; margin-left: auto; }
body.stagelight .footer-privacy { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--sl-faint); }
body.stagelight .footer-privacy:hover { color: var(--sl-ink); }
body.stagelight .back-top { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--sl-line); border-radius: 9px; font-size: 15px; color: var(--sl-faint); transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; }
body.stagelight .back-top:hover { color: var(--sl-ink); border-color: var(--sl-muted); transform: translateY(-2px); }
@media (max-width: 900px) {
  body.stagelight .site-foot-inner { grid-template-columns: 1fr 1fr 1fr; padding: 48px 0 28px; gap: 30px 24px; }
  body.stagelight .footer-lead { grid-column: 1 / -1; max-width: 420px; }
  body.stagelight .footer-bottom-links { margin-left: 0; }
}
@media (max-width: 640px) {
  body.stagelight .footer-lead p.footer-identity { white-space: normal; }
  /* Copyright row stacks and centers so nothing crowds or overflows on phones. */
  body.stagelight .footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: 16px; }
  body.stagelight .footer-sources { max-width: 34ch; }
  body.stagelight .footer-bottom-links { margin-left: 0; justify-content: center; flex-wrap: wrap; gap: 16px 20px; }
}
@media (max-width: 540px) {
  body.stagelight .site-foot-inner { grid-template-columns: 1fr 1fr; }
  body.stagelight .footer-lead { grid-column: 1 / -1; }
}

/* ---- BENTO CARDS: Sheet Key / Shelf / Purgatory / Woodshed ---- */
body.stagelight .bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }
body.stagelight .bento-key { grid-column: 1 / -1; cursor: default; padding: 24px 26px 18px; }
body.stagelight .bento-key:hover { transform: none; border-color: var(--sl-line); }
body.stagelight .bento-card {
  /* Flex column kills the UA button vertical-centering that let shorter cards
     (Shelf/Purgatory) drift below the taller Woodshed in the equal-height grid. */
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  position: relative; text-align: left; padding: 26px; cursor: pointer;
  font: inherit; color: var(--sl-ink);
  /* Transparent enough that the setlist sheet behind ghosts through the glass
     (Alex: like the original), with a light backdrop blur so it stays legible. */
  background: linear-gradient(180deg, rgba(24,24,28,0.4), rgba(16,16,20,0.3));
  -webkit-backdrop-filter: blur(9px) saturate(1.3); backdrop-filter: blur(9px) saturate(1.3);
  border: 1px solid var(--sl-line); border-radius: var(--sl-r); box-shadow: var(--sl-glass-shadow);
  transition: transform 0.18s ease, border-color 0.18s ease;
}
body.stagelight .bento-card:hover { transform: translateY(-2px); border-color: var(--sl-line-strong); }
body.stagelight .bento-card[aria-expanded="true"] { border-color: var(--sl-line-strong); }
body.stagelight .bento-shelf[aria-expanded="true"] { box-shadow: var(--sl-glass-shadow), 0 0 60px -18px rgba(212,81,79,0.4); }
body.stagelight .bento-purgatory[aria-expanded="true"] { box-shadow: var(--sl-glass-shadow), 0 0 60px -18px rgba(40,110,158,0.45); }
body.stagelight .bento-woodshed[aria-expanded="true"] { box-shadow: var(--sl-glass-shadow), 0 0 60px -18px rgba(45,124,82,0.45); }
/* Open affordance: rounded square top-right; the arrow quarter-turns left on hover. */
body.stagelight .bc-open {
  position: absolute !important; top: 20px; right: 20px; left: auto; z-index: 2;
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--sl-line-strong); border-radius: 10px; color: var(--sl-muted);
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
body.stagelight .bc-open svg { transition: transform 0.32s cubic-bezier(0.22,1,0.36,1); }
body.stagelight .bento-card:hover .bc-open { border-color: var(--sl-ink); color: var(--sl-ink); background: rgba(255,255,255,0.06); }
body.stagelight .bento-card:hover .bc-open svg { transform: rotate(-90deg); }
body.stagelight .bento-card[aria-expanded="true"] .bc-open { color: var(--sl-ink); border-color: var(--sl-ink); }
/* One continuous sheet behind the three bentos: the scrawl runs under the
   glass (barely there), then its last line comes into focus below the cards
   (the Webflow move). Cards sit above it. */
/* Extra top room so ~80px of setlist sits above the card tops; the card group
   is raised 72px via translateY (the flourish: shows above AND below cards). */
body.stagelight .bento-region { position: relative; padding-top: 108px; padding-bottom: 64px; }
body.stagelight .bento-region .bento-grid { position: relative; z-index: 1; transform: translateY(-72px); }
/* ONE logical sheet, three aligned layers so the same setlist can carry a
   DIFFERENT blur/opacity per vertical zone (a single element can't vary blur
   down its height). Each layer holds identical content in the identical flex
   layout, so the columns register exactly and it reads as one continuous sheet;
   soft-overlap gradient masks confine each layer to its band. */
body.stagelight .sheet-scrawl {
  position: absolute; inset: -10px -20px 0; z-index: 0; overflow: hidden;
  pointer-events: none; user-select: none;
}
body.stagelight .ss-layer {
  position: absolute; inset: 0;
  display: flex; gap: 52px; padding: 0 24px; align-items: flex-end;
  font-family: "PanicHand", "MilkRun", cursive; text-transform: uppercase; letter-spacing: 0.03em;
}
/* Behind the cards: heaviest blur, faintest — barely there through the glass. */
body.stagelight .ss-behind {
  filter: blur(6.5px); color: rgba(255,255,255,0.11);
  -webkit-mask-image: linear-gradient(180deg, transparent 20%, #000 34%, #000 66%, transparent 82%);
  mask-image: linear-gradient(180deg, transparent 20%, #000 34%, #000 66%, transparent 82%);
}
/* Above the cards: light blur, mid opacity — the shows peeking over the tops. */
body.stagelight .ss-above {
  filter: blur(3.2px); color: rgba(255,255,255,0.22);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 24%, transparent 40%);
  mask-image: linear-gradient(180deg, #000 0%, #000 24%, transparent 40%);
}
/* Below the cards: clearest — the trailing greats read here. */
body.stagelight .ss-below {
  filter: blur(1px); color: rgba(255,255,255,0.26);
  -webkit-mask-image: linear-gradient(180deg, transparent 60%, #000 76%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 60%, #000 76%, #000 100%);
}
body.stagelight .ss-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
body.stagelight .ss-song { display: block; font-size: 15px; line-height: 2.05; white-space: nowrap; }
/* Columns are bottom-anchored (flex-end): a positive bottom margin lifts the
   whole sheet so titles fill the band ABOVE the cards and only the trailing
   greats (1-2 lines) clear the card bottoms. */
body.stagelight .sheet-scrawl .ss-col { margin-bottom: 39px; }
/* Mobile fix: the scrawl's decorative ±20px horizontal bleed (inset: -10px -20px 0)
   relies on wide side-gutters to absorb it. Under a phone viewport there are no
   gutters, so the bleed pushes the page ~10px wide and the whole site rocks
   left-right. Zeroing the horizontal bleed below 600px stops the sideways scroll;
   this also pulls the fixed .home-nav back to viewport width (it stretches to the
   page's layout width). Desktop is byte-identical. */
@media (max-width: 600px) {
  body.stagelight .sheet-scrawl { left: 0; right: 0; }
}
/* Laid out like loose papers: shrunk, each sheet nudged and tilted its own way,
   the first pushed further off the left. Stagger sets how many trailing songs
   reach the light (~2, ~2, ~1.5, ~1, <1). */
body.stagelight .ss-col-1 { transform: translate(-34px, -6px) rotate(-2deg); }
body.stagelight .ss-col-2 { transform: translate(-8px, -10px) rotate(1.5deg); }
body.stagelight .ss-col-3 { transform: translate(0, -26px) rotate(-1deg); }
body.stagelight .ss-col-4 { transform: translate(6px, -24px) rotate(1.25deg); }
body.stagelight .ss-col-5 { transform: translate(20px, -34px) rotate(-1.75deg); }
body.stagelight .bc-name { display: block; font-family: var(--sl-display); font-weight: 640; font-size: 21px; letter-spacing: -0.005em; }
body.stagelight .bc-count { display: block; font-family: var(--sl-mono); font-size: 34px; font-weight: 640; margin-top: 14px; font-variant-numeric: tabular-nums; }
body.stagelight .bc-count small { font-size: 13.5px; color: var(--sl-faint); font-weight: 500; letter-spacing: 0.08em; margin-left: 8px; }
body.stagelight .bc-desc { display: block; font-size: 13.5px; color: var(--sl-muted); margin-top: 10px; line-height: 1.5; min-height: 42px; }
body.stagelight .bc-fact { display: flex; justify-content: space-between; gap: 12px; font-family: var(--sl-mono); font-size: 12px; color: var(--sl-faint); margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--sl-line-faint); }
body.stagelight .bc-bar { display: block; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.1); margin-top: 16px; overflow: hidden; }
body.stagelight .bc-bar i { display: block; height: 100%; background: var(--green); }
body.stagelight .bento-panel {
  position: fixed; inset: 0; z-index: 90; overflow-y: auto;
  padding: 28px 4vw 9vh;
  background: rgba(4,4,6,0.85);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
body.stagelight .bento-panel .laminate { max-width: 1240px; margin: 0 auto; }
body.stagelight .bento-panel[hidden] { display: none; }
/* A bento sheet is a full-screen overlay; the sticky header sits in its own
   stacking context (z-index:60 at the body level) that traps the panel's
   z-index, so hide the header entirely while a sheet is open. */
body.stagelight.bento-open .site-head { opacity: 0; visibility: hidden; pointer-events: none; }
body.stagelight .bento-close {
  position: fixed; top: 18px; right: 22px; z-index: 95;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(24,24,27,0.85); border: 1px solid var(--sl-line-strong); color: var(--sl-ink);
  box-shadow: var(--sl-shadow-2);
  transition: background 0.18s ease, transform 0.18s ease;
}
body.stagelight .bento-close:hover { background: rgba(46,46,50,0.95); transform: scale(1.05); }
@media (max-width: 900px) { body.stagelight .bento-grid { grid-template-columns: 1fr; } }

/* ---- CLOSED-BAR MINI PULLS ---- */
body.stagelight .sc-mini-pulls { margin-left: auto; display: inline-flex; align-items: baseline; gap: 8px; font-size: 13.5px; color: var(--sl-muted); white-space: nowrap; }
body.stagelight .sc-mini-pulls b { color: var(--sl-ink); font-weight: 600; }
body.stagelight .sc-mini-pulls svg { height: 9px; width: auto; }
body.stagelight .sc-mini-pulls [fill="#111111"] { fill: #f2f2f0; }
body.stagelight .sc-mini-pulls [stroke="#111111"] { stroke: #f2f2f0; }
body.stagelight .sc-more { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--sl-faint); }

/* ---- NEXT SHOW STRIP ---- */
body.stagelight .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px rgba(212,81,79,0.9); animation: sl-pulse 2.4s ease-in-out infinite; }
@keyframes sl-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { body.stagelight .live-dot { animation: none; } }
@media (max-width: 760px) {
  body.stagelight .sc-mini-pulls { margin-left: 0; width: 100%; }
}

/* ---- TOUR STATS DENSITY + RARITY SYMBOLS ---- */
body.stagelight .signal-cell strong { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 620; }
body.stagelight .signal-cell small { display: block; margin-top: 4px; font-family: var(--sl-mono); font-size: 12px; color: var(--sl-faint); letter-spacing: 0.02em; font-weight: 400; }
body.stagelight .tour-table td, body.stagelight .tour-table th[scope="row"] { vertical-align: top; }
/* Mobile: the capped table scrolls sideways; a legacy card-layout rule zeroed the
   signal columns' min-width, crushing RARITY/HEAT into tall word-per-line stacks. */
@media (max-width: 560px) {
  body.stagelight .tour-table .signal-cell { min-width: 150px; }
}
/* mobile-sort now wraps the shared custom-select; the inner summary is the pill */
body.stagelight .data-toolbar .mobile-sort { display: none; }
body.stagelight .show-filter { gap: 12px; }
/* The label span inside a custom-select summary reads as a mono overline */
body.stagelight .custom-select > summary > span { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sl-faint); }
@media (max-width: 760px) {
  body.stagelight .data-toolbar .mobile-sort { display: block; }
}

/* ---- MOBILE SORT & FILTER DRAWER ----
   Desktop: the trigger + drawer-head are hidden and the toolbar renders inline as
   before. Under 600px the toolbar (.filter-drawer) becomes an off-canvas sheet the
   trigger opens; the existing controls keep their wiring, only the container moves. */
body.stagelight .filter-drawer-trigger { display: none; }
body.stagelight .fd-head { display: none; }
@media (max-width: 600px) {
  body.stagelight .filter-drawer-trigger {
    display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 18px;
    border-radius: var(--sl-r-pill); border: 1px solid var(--sl-line-strong);
    background: rgba(255,255,255,0.05); color: var(--sl-ink); font-size: 13.5px; font-weight: 580;
    margin-bottom: 16px; cursor: pointer;
  }
  body.stagelight .filter-drawer-trigger .fdt-count {
    display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px;
    padding: 0 6px; border-radius: 10px; background: var(--sl-ink); color: var(--sl-bg, #0b0b0d);
    font-family: var(--sl-mono); font-size: 11px; font-weight: 700;
  }
  body.stagelight .drawer-scrim {
    position: fixed; inset: 0; z-index: 90; background: rgba(6,6,8,0.62);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity 0.26s ease;
  }
  body.stagelight .drawer-scrim.is-open { opacity: 1; pointer-events: auto; }
  body.stagelight .filter-drawer {
    position: fixed; top: 0; right: 0; z-index: 95;
    width: min(86vw, 360px); height: 100dvh; margin: 0;
    flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 16px;
    padding: 18px 20px calc(20px + env(safe-area-inset-bottom)); overflow-y: auto;
    background: var(--sl-panel, #131316); border-left: 1px solid var(--sl-line-strong);
    box-shadow: -24px 0 60px -20px rgba(0,0,0,0.7);
    transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.22,1,0.36,1);
  }
  body.stagelight .filter-drawer.is-open { transform: translateX(0); }
  body.stagelight .fd-head {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 14px; margin-bottom: 2px; border-bottom: 1px solid var(--sl-line);
  }
  body.stagelight .fd-head > span { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sl-faint); }
  body.stagelight .fd-close { display: inline-flex; padding: 6px; border-radius: 8px; color: var(--sl-muted); cursor: pointer; }
  body.stagelight .fd-close:hover { color: var(--sl-ink); background: rgba(255,255,255,0.06); }
  /* Controls stack full-width in the drawer; their popovers render inline (no absolute
     overflow inside the scrolling sheet). */
  body.stagelight .filter-drawer > .show-filter,
  body.stagelight .filter-drawer > .type-filter,
  body.stagelight .filter-drawer > .np-toggle,
  body.stagelight .filter-drawer > .rarity-filter,
  body.stagelight .filter-drawer > .find-song,
  body.stagelight .filter-drawer > .mobile-sort { width: 100%; }
  body.stagelight .filter-drawer .type-filter { display: flex; }
  body.stagelight .filter-drawer .mobile-sort { display: block; }
  body.stagelight.drawer-open { overflow: hidden; }
  /* The drawer is nested in main (z-index:1), so the sticky site-header (z-60)
     paints over it and hides the close button. Moving the toolbar out would break
     the filter wiring (the stats script queries controls within the section), so
     instead fade the header while a drawer is open — the drawer owns dismissal
     (close button + scrim + Esc). Header returns on close. */
  body.stagelight.drawer-open .site-head { opacity: 0; pointer-events: none; }
  @media (prefers-reduced-motion: reduce) {
    body.stagelight .filter-drawer, body.stagelight .drawer-scrim { transition: none; }
  }
}

/* ---- RARITY FILTER ---- */
body.stagelight .rarity-filter { position: relative; }
body.stagelight .rarity-filter > summary {
  display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px;
  border-radius: var(--sl-r-pill); border: 1px solid var(--sl-line-strong); font-size: 13.5px; font-weight: 560; color: var(--sl-muted);
  transition: background 0.15s ease, color 0.15s ease;
}
body.stagelight .rarity-filter > summary:hover { color: var(--sl-ink); background: rgba(255,255,255,0.05); }
body.stagelight .rarity-filter[open] > summary { color: var(--sl-ink); border-color: var(--sl-line-strong); }
body.stagelight .rarity-filter > summary .sc-chev { position: static; transition: transform 0.2s ease; }
body.stagelight .rarity-filter[open] > summary .sc-chev { transform: rotate(180deg); }
body.stagelight .rf-active {
  display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: var(--sl-r-pill); background: var(--sl-ink); color: #111; font-family: var(--sl-mono); font-size: 12px; font-weight: 640;
}
body.stagelight .rf-active[hidden] { display: none; }
body.stagelight .rarity-pop {
  position: absolute; top: 48px; left: 0; z-index: 40; min-width: 280px; padding: 10px;
  border-radius: var(--sl-r-md); background: rgba(19,19,22,0.97); border: 1px solid var(--sl-line-strong);
  box-shadow: var(--sl-shadow-2);
}
body.stagelight .rf-option {
  display: grid; grid-template-columns: auto 46px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--sl-r-md); cursor: pointer; font-size: 13.5px; color: var(--sl-ink);
}
body.stagelight .rf-option:hover { background: rgba(255,255,255,0.05); }
body.stagelight .rf-option input {
  appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin: 0;
  border: 1.5px solid var(--sl-line-strong); border-radius: var(--sl-r-sm); cursor: pointer; position: relative;
}
body.stagelight .rf-option input:checked { background: var(--sl-ink); border-color: var(--sl-ink); }
body.stagelight .rf-option input:checked::after {
  content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px;
  border: solid #111; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg);
}
body.stagelight .rf-option .rarity-symbol { margin: 0; justify-self: start; }
body.stagelight .rf-count { font-family: var(--sl-mono); font-size: 12px; color: var(--sl-faint); font-variant-numeric: tabular-nums; }
body.stagelight .rf-clear {
  display: block; width: 100%; margin-top: 6px; padding: 9px 10px; border-top: 1px solid var(--sl-line);
  font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sl-faint); text-align: left; border-radius: 0 0 var(--sl-r-md) var(--sl-r-md);
}
body.stagelight .rf-clear:hover { color: var(--sl-ink); }
@media (max-width: 760px) { body.stagelight .rarity-pop { left: auto; right: 0; } }

/* ---- SHOW-HIGHLIGHT DROPDOWN (custom, matches rarity filter) ---- */
body.stagelight .show-filter { position: relative; display: block; height: auto; padding: 0; border: 0; }
body.stagelight .show-filter > summary {
  display: inline-flex; align-items: center; gap: 12px; height: 40px; padding: 0 16px;
  border-radius: var(--sl-r-pill); border: 1px solid var(--sl-line-strong);
  transition: background 0.15s ease;
}
body.stagelight .show-filter > summary:hover { background: rgba(255,255,255,0.05); }
body.stagelight .show-filter[open] > summary { border-color: var(--sl-line-strong); }
body.stagelight .show-filter > summary .sc-chev { position: static; color: var(--sl-faint); transition: transform 0.2s ease; }
body.stagelight .show-filter[open] > summary .sc-chev { transform: rotate(180deg); }
body.stagelight .sf-value { font-size: 13.5px; font-weight: 580; color: var(--sl-ink); }
body.stagelight .sf-pop {
  position: absolute; top: 48px; left: 0; z-index: 40; min-width: 300px; max-height: 344px; overflow-y: auto; padding: 8px;
  border-radius: var(--sl-r-md); background: rgba(19,19,22,0.97); border: 1px solid var(--sl-line-strong);
  box-shadow: var(--sl-shadow-2);
}
body.stagelight .sf-option {
  display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: var(--sl-r-md);
  font-size: 13.5px; color: var(--sl-muted); font-variant-numeric: tabular-nums;
}
body.stagelight .sf-option:hover { background: rgba(255,255,255,0.05); color: var(--sl-ink); }
body.stagelight .sf-option.is-active { color: var(--sl-ink); font-weight: 600; }
body.stagelight .sf-option.is-active::after { content: "\2713"; float: right; color: var(--sl-faint); }
/* Marker-color dot in the Highlight-a-show summary value: surfaces the selected
   show's rail color so the control reads as "this show is now marked". */
body.stagelight .sf-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: baseline; box-shadow: 0 0 0 1px rgba(255,255,255,0.25); }
body.stagelight .sf-dot[hidden] { display: none; }
/* Find-a-song: compact text search at the right end of the toolbar. */
body.stagelight .find-song { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: var(--sl-r-pill); border: 1px solid var(--sl-line-strong); background: rgba(255,255,255,0.04); }
body.stagelight .find-song:focus-within { border-color: var(--sl-muted); }
body.stagelight .find-song-icon { color: var(--sl-faint); flex: none; }
body.stagelight .find-song-input { border: 0; background: transparent; color: var(--sl-ink); font-family: var(--sl-mono); font-size: 12.5px; letter-spacing: 0.02em; width: 128px; outline: none; }
body.stagelight .find-song-input::placeholder { color: var(--sl-faint); font-family: var(--sl-mono); }
body.stagelight .find-song-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
/* Applied-filter row: one compact row of removable chips + Clear all. */
body.stagelight .applied-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; }
body.stagelight .applied-filters[hidden] { display: none; }
body.stagelight .af-chip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px 0 12px; border-radius: var(--sl-r-pill); border: 1px solid var(--sl-line-strong); background: rgba(255,255,255,0.04); color: var(--sl-muted); font-size: 12.5px; cursor: pointer; }
body.stagelight .af-chip:hover { color: var(--sl-ink); border-color: var(--sl-muted); }
body.stagelight .af-x { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: rgba(255,255,255,0.08); color: var(--sl-faint); font-size: 13px; line-height: 1; }
body.stagelight .af-chip:hover .af-x { color: var(--sl-ink); }
body.stagelight .af-clear { height: 30px; padding: 0 4px; border: 0; background: none; color: var(--sl-faint); font-family: var(--sl-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
body.stagelight .af-clear:hover { color: var(--sl-ink); }

/* ---- STATS DISCLOSURE (accordion) ---- */
/* ---- DORK STATS: intro row + single summary rail ---- */
/* Compact intro, outside any card: title left, three quiet lines right on desktop,
   stacked below the title on mobile. Existing type + spacing only. */
/* The headline carries BOTH .sw-lead and .ds-lead; .sw-lead (max-width:30ch ≈
   527px, margin:0) is defined later in source and, at equal specificity, was
   winning — the sentence wrapped to 4 cramped lines short of the page midpoint
   and sat flush on the stats rail. Target the combined class to out-specify it:
   an explicit ~65% of the 1224px content rail (≈800px → ~3 lines, crosses the
   page midpoint) and real breathing room over the rail. */
body.stagelight .sw-lead.ds-lead { margin: 0 0 48px; max-width: 800px; }
@media (max-width: 900px) { body.stagelight .sw-lead.ds-lead { max-width: 100%; margin-bottom: 32px; } }
body.stagelight .af-row { display: flex; align-items: center; gap: 16px; }
body.stagelight .af-row .show-filter-status { margin-left: auto; }
body.stagelight .ds-title { font-family: var(--sl-display); font-size: 34px; font-weight: 640; letter-spacing: -0.01em; line-height: 1.12; color: var(--sl-ink); }
body.stagelight .ds-lede { display: flex; flex-direction: column; gap: 3px; text-align: right; max-width: 40ch; }
body.stagelight .ds-lede p { font-size: 13.5px; line-height: 1.5; color: var(--sl-muted); }
@media (max-width: 760px) {
  body.stagelight .ds-intro { flex-direction: column; align-items: flex-start; gap: 12px; }
  body.stagelight .ds-lede { text-align: left; max-width: none; }
}
/* Summary stats: one subtle bordered surface, four equal columns, thin dividers. */
body.stagelight .stats-rail {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center;
  min-height: 90px; margin-bottom: 22px;
  border: 1px solid var(--sl-line); border-radius: var(--sl-r-md); background: var(--sl-glass);
  -webkit-backdrop-filter: blur(26px) saturate(1.4); backdrop-filter: blur(26px) saturate(1.4);
  box-shadow: var(--sl-glass-shadow);
}
body.stagelight .stats-rail .stat-col { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 18px 14px; text-align: center; }
body.stagelight .stats-rail .stat-col + .stat-col { border-left: 1px solid var(--sl-line); }
body.stagelight .stats-rail .stat-col strong { font-family: var(--sl-display); font-size: 30px; font-weight: 640; line-height: 1; color: var(--sl-ink); font-variant-numeric: tabular-nums; }
body.stagelight .stats-rail .stat-col span { font-family: var(--sl-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sl-faint); }
@media (max-width: 560px) {
  body.stagelight .stats-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.stagelight .stats-rail .stat-col:nth-child(3), body.stagelight .stats-rail .stat-col:nth-child(4) { border-top: 1px solid var(--sl-line); }
  body.stagelight .stats-rail .stat-col:nth-child(odd) { border-left: 0; }
  body.stagelight .stats-rail .stat-col strong { font-size: 26px; }
}

/* ---- TOUR-STATS TABLE: capped preview + expand affordance ---- */
body.stagelight .tour-table-wrap.is-capped { max-height: 560px; overflow-y: auto; position: relative; border-radius: var(--sl-r-md); -webkit-mask-image: linear-gradient(180deg, #000 92%, transparent); mask-image: linear-gradient(180deg, #000 92%, transparent); scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent; }
/* Nick stats: stat tiles + progress on the left; a slim, simply-filtered list on
   the right. Kills the second full-width spreadsheet on the page. */
/* Near-equal columns. The left now carries headline + the three tour totals on one
   row and a wide bento under it, so it needs real width. Both columns share the
   grid row and the bento absorbs the slack, so the two sides finish level instead
   of the songbook running ~163px long. */
body.stagelight .nick-two-col { display: grid; grid-template-columns: 1.06fr 1fr; gap: 44px 56px; align-items: stretch; }
body.stagelight .nick-two-col .nick-left { display: flex; flex-direction: column; min-width: 0; }
body.stagelight .nick-two-col .nick-left .nick-bento { flex: 1 1 auto; }
body.stagelight .nick-two-col .nick-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.stagelight .nick-two-col .nick-progress { margin: 26px 0 0; }
/* The control row IS the house toolbar: .nick-controls also carries .data-toolbar,
   so the View dropdown and the All/Originals/Covers segmented control inherit the
   exact Tour Stats pill treatment (same 40px height, pill radius, border,
   background and active-segment fill). Only the bottom margin is Nick-specific. */
body.stagelight .nick-two-col .nick-controls { margin: 0 0 14px; }
body.stagelight .nick-two-col .nick-chip-group button { padding: 7px 13px; font-size: 12.5px; }
@media (max-width: 900px) { body.stagelight .nick-two-col { grid-template-columns: 1fr; gap: 26px; } }

/* ---- NICK LEFT COLUMN: headline beside the three tour totals, then the bento ---- */
/* The three totals (shows / song plays / Woodshed) sit to the RIGHT of the headline
   at the top of the left column; the one bento below holds the rig on the left and
   the 50%, its caption and the three bars on the right. */
body.stagelight .nick-head-row { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 24px 32px; align-items: start; margin-bottom: 26px; }
body.stagelight .nick-head-row .nick-headline { margin: 0; }
body.stagelight .nick-head-row .nick-tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 4px 0 0; }
body.stagelight .nick-head-row .nick-tiles .nick-stat { display: flex; align-items: baseline; gap: 8px; text-align: left; }
body.stagelight .nick-head-row .nick-tiles .nick-stat strong { display: inline; }
body.stagelight .nick-head-row .nick-tiles .nick-stat span { display: inline; margin-top: 0; }

body.stagelight .nick-bento { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 20px 30px; align-items: center; }
body.stagelight .nick-bento > * { position: relative; z-index: 1; }
/* The rig fills the width of its cell and stays vertically centred in the panel.
   Sizing and position only: the plate, the dot layers, the poster runtime and the
   1254x1096 aspect ratio are untouched. */
body.stagelight .nick-bento .nick-bento-art { min-width: 0; align-self: center; }
body.stagelight .nick-bento .nick-bento-art .living-poster { max-width: none; width: 100%; margin: 0; }
body.stagelight .nick-bento .nick-bento-art .nick-gear { display: block; width: 100%; height: auto; margin: 0; }
body.stagelight .nick-bento .nick-bento-figures { min-width: 0; }
body.stagelight .nick-bento .nick-caption { margin: 8px 0 18px; }
body.stagelight .nick-bento .nick-bars { margin-top: 0; }

/* ---- NICK'S RIG RUNDOWN: trigger pill + modal ---- */
body.stagelight .nick-bento .nick-bento-art { position: relative; }
body.stagelight .nick-rig-open { position: absolute; left: 14px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; height: 34px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--sl-line-strong); background: rgba(10,10,12,0.66); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--sl-ink); transition: background 0.15s ease, border-color 0.15s ease; }
body.stagelight .nick-rig-open:hover { background: rgba(255,255,255,0.1); border-color: var(--sl-muted); }
body.stagelight .rig-modal { position: fixed; inset: 0; z-index: 120; display: flex; justify-content: center; align-items: flex-start; overflow-y: auto; padding: min(7vh, 64px) 16px 64px; }
body.stagelight .rig-modal[hidden] { display: none; }
body.stagelight .rig-backdrop { position: fixed; inset: 0; background: rgba(5,5,6,0.66); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); opacity: 0; transition: opacity 0.2s ease; }
body.stagelight .rig-modal.is-open .rig-backdrop { opacity: 1; }
body.stagelight .rig-panel { position: relative; z-index: 1; width: min(880px, 100%); background: linear-gradient(180deg, rgba(30,30,34,0.92), rgba(16,16,19,0.94)); border: 1px solid var(--sl-line-strong); border-radius: var(--sl-r-lg); box-shadow: var(--sl-shadow-3); overflow: hidden; opacity: 0; transform: translateY(-8px) scale(0.985); transition: opacity 0.2s ease, transform 0.2s ease; }
body.stagelight .rig-modal.is-open .rig-panel { opacity: 1; transform: none; }
/* Rig popup header (Alex 7/23): headline in the house corner tie-dye wash (same
   recipe as the Athens strip — coral -> blue -> gold clipped to the first letters,
   rest solid white), the sentence under it in the sw-lead grey. Display face both. */
body.stagelight .rig-head { display: block; position: relative; padding: 20px 56px 18px 22px; border-bottom: 1px solid var(--sl-line); margin-bottom: 0; }
body.stagelight .rig-head .hero-modal-x { position: absolute; top: 16px; right: 16px; }
body.stagelight .rig-eyebrow { margin: 0 0 6px; font-family: var(--sl-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sl-faint); }
body.stagelight .rig-headline {
  margin: 0; font-family: var(--sl-display); font-weight: 680; font-size: clamp(21px, 2.6vw, 30px);
  letter-spacing: -0.015em; line-height: 1.16;
  background:
    linear-gradient(100deg, #d4514f 0%, #e0574f 6%, rgba(96,165,210,1) 13%, #c9a35f 19%, rgba(242,242,240,0) 24%),
    linear-gradient(rgba(242,242,240,0.94), rgba(242,242,240,0.94));
  background-size: 300% 100%, 100% 100%;
  background-position: 4% 50%, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: athens-tiedye 11s ease-in-out infinite alternate;
}
body.stagelight .rig-sub { margin: 8px 0 0; max-width: 58ch; font-family: var(--sl-display); font-weight: 400; font-size: 15.5px; line-height: 1.5; letter-spacing: -0.005em; color: var(--sl-muted); }
@media (max-width: 560px) {
  body.stagelight .rig-headline { font-size: 19px; }
  body.stagelight .rig-sub { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { body.stagelight .rig-headline { animation: none; } }
body.stagelight .rig-art { position: relative; background: #000; }
body.stagelight .rig-art > img { display: block; width: 100%; height: auto; }
body.stagelight .rig-hint { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); font-family: var(--sl-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(242,242,240,0.55); background: rgba(0,0,0,0.55); border: 1px solid var(--sl-line); border-radius: 999px; padding: 5px 14px; pointer-events: none; white-space: nowrap; }
/* Owner colors as tokens (design-system gripe: these were hardcoded rgb). Each
   owner class sets an --c R,G,B triple; spot, tag, and legend swatch all derive
   from rgba(var(--c), a). mikey gold ties to the amber guitar + Athens gold,
   jimmy blue = the wet/reverb side, nick warm white = the living player. */
body.stagelight .rig-mikey { --c: 201,163,95; }
body.stagelight .rig-jimmy { --c: 94,158,210; }
body.stagelight .rig-nick { --c: 242,242,240; }
body.stagelight .rig-spot { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; padding: 0; background: rgba(var(--c), 0.22); outline: 1.5px solid rgba(var(--c), 0.9); box-shadow: 0 0 0 4px rgba(var(--c), 0.12), 0 0 14px rgba(var(--c), 0.45); transition: transform 0.15s ease; }
body.stagelight .rig-spot:hover { transform: scale(1.25); }
body.stagelight .rig-spot.is-active { background: rgba(var(--c), 0.85); }
body.stagelight .rig-tip { position: absolute; z-index: 5; width: min(320px, 76vw); background: rgba(20,20,24,0.97); border: 1px solid var(--sl-line-strong); border-radius: var(--sl-r-md, 12px); padding: 14px 16px; box-shadow: var(--sl-shadow-3); transform: translate(-50%, 12px); display: none; }
body.stagelight .rig-tip.show { display: block; }
body.stagelight .rig-tag { font-family: var(--sl-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(var(--c)); }
body.stagelight .rig-tip h4 { margin: 4px 0; font-size: 15px; font-weight: 650; }
body.stagelight .rig-tip p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--sl-muted); }
body.stagelight .rig-legend { display: flex; gap: 22px; align-items: center; padding: 12px 22px; border-top: 1px solid var(--sl-line); font-family: var(--sl-mono); font-size: 10.5px; color: var(--sl-faint); letter-spacing: 0.05em; text-transform: uppercase; }
body.stagelight .rig-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 7px; vertical-align: -1px; }
body.stagelight .rig-legend span i { outline: 1.5px solid rgba(var(--c), 0.9); background: rgba(var(--c), 0.22); }
body.stagelight .rig-vids { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 18px 22px 22px; border-top: 1px solid var(--sl-line); }
body.stagelight .rig-vid { margin: 0; border: 1px solid var(--sl-line); border-radius: var(--sl-r-md, 12px); overflow: hidden; background: #000; }
body.stagelight .rig-vid figcaption { padding: 12px 14px; }
body.stagelight .rig-vid figcaption b { display: block; font-size: 14px; font-weight: 650; }
body.stagelight .rig-vid figcaption span { font-family: var(--sl-mono); font-size: 10.5px; color: var(--sl-faint); }
@media (max-width: 640px) {
  body.stagelight .rig-vids { grid-template-columns: 1fr; }
  body.stagelight .rig-modal { padding: 0; }
  body.stagelight .rig-panel { border-radius: 0; border: 0; min-height: 100vh; }
}
@media (max-width: 900px) {
  body.stagelight .nick-head-row { grid-template-columns: 1fr; gap: 20px; margin-bottom: 20px; }
  body.stagelight .nick-head-row .nick-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.stagelight .nick-head-row .nick-tiles .nick-stat { display: block; text-align: left; }
  body.stagelight .nick-bento { grid-template-columns: 1fr; }
}

/* ---- BENTO ATMOSPHERE ----
   An ambient, low-intensity version of the footer "ALL THE WAY FROM ATHENS GA"
   tie-dye: the same coral -> blue -> gold hue run at a fraction of the opacity,
   heavily blurred and drifting slowly behind the panel like stage wash rather than
   a printed gradient. It sits under every child (z-index 0 vs 1) so it never
   touches text contrast, and it holds still under prefers-reduced-motion. */
body.stagelight .nick-atmo {
  position: absolute; inset: -20%; z-index: 0; pointer-events: none;
  opacity: 0.4;
  background:
    linear-gradient(100deg, rgba(212,81,79,0.30) 0%, rgba(224,87,79,0.24) 6%, rgba(96,165,210,0.30) 13%, rgba(201,163,95,0.24) 19%, rgba(242,242,240,0) 27%),
    radial-gradient(120% 90% at 18% 22%, rgba(96,165,210,0.16), rgba(0,0,0,0) 62%);
  background-size: 300% 100%, 100% 100%;
  background-position: 4% 50%, 0 0;
  background-repeat: no-repeat;
  filter: blur(52px) saturate(1.15);
  animation: nick-atmo-drift 26s ease-in-out infinite alternate;
}
@keyframes nick-atmo-drift {
  from { background-position: 2% 46%, 0 0; }
  to   { background-position: 22% 56%, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  body.stagelight .nick-atmo { animation: none; }
}
/* Nick's ranking: when the songbook is expanded the wrap becomes a bounded scroll
   window (same treatment as the Tour Stats table) with its header sticky inside. */
body.stagelight .nick-ranking-wrap { position: relative; }
body.stagelight .nick-ranking-wrap.is-capped { max-height: 560px; overflow-y: auto; border-radius: var(--sl-r-md); -webkit-mask-image: linear-gradient(180deg, #000 94%, transparent); mask-image: linear-gradient(180deg, #000 94%, transparent); scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent; }
body.stagelight .nick-ranking-wrap.is-capped::-webkit-scrollbar { width: 8px; }
body.stagelight .nick-ranking-wrap.is-capped::-webkit-scrollbar-track { background: transparent; }
body.stagelight .nick-ranking-wrap.is-capped::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
body.stagelight .nick-ranking-wrap.is-capped::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.24); border: 2px solid transparent; background-clip: content-box; }
/* mobile-only Sort select in the Nick controls (desktop uses sortable headers). */
body.stagelight .nick-controls .mobile-sort { display: none; }
@media (max-width: 760px) { body.stagelight .nick-controls .mobile-sort { display: block; } }
body.stagelight .tour-table-wrap.is-capped::-webkit-scrollbar { width: 8px; }
body.stagelight .tour-table-wrap.is-capped::-webkit-scrollbar-track { background: transparent; }
body.stagelight .tour-table-wrap.is-capped::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
body.stagelight .tour-table-wrap.is-capped::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.24); border: 2px solid transparent; background-clip: content-box; }
body.stagelight .tour-table thead th { position: sticky; top: 0; z-index: 3; background: #101013; }
body.stagelight .tour-table-wrap.is-capped thead th:first-child { border-top-left-radius: var(--sl-r-md); }
body.stagelight .tour-table-wrap.is-capped thead th:last-child { border-top-right-radius: var(--sl-r-md); }
/* Color-coded last-four rail on the song name cell */
body.stagelight .tour-table tbody th[scope="row"] { position: relative; }
/* Full row height with no radius so consecutive rows' bars read as continuous
   vertical strips; multiple shows stack side by side, never overlapping. */
body.stagelight .lf-rail { position: absolute; left: 0; top: 0; bottom: 0; display: flex; gap: 1px; }
body.stagelight .lf-rail i { display: block; width: 2px; background: currentColor; }
/* A second (older) show reads as a barely-there sliver, essentially a right-edge accent. */
body.stagelight .lf-rail i:nth-child(n+2) { width: 1px; }
body.stagelight .lf-rail .rail-black { color: #2e2e30; }
body.stagelight .lf-rail .rail-blue { color: #465692; }
body.stagelight .lf-rail .rail-green { color: #47866a; }
body.stagelight .lf-rail .rail-red { color: #d4514f; }
body.stagelight .tour-table tbody th[scope="row"] { padding-left: 18px; }
/* Not-played toggle chip */
body.stagelight .np-toggle { height: 40px; padding: 0 16px; border-radius: var(--sl-r-pill); border: 1px solid var(--sl-line-strong); background: rgba(255,255,255,0.04); color: var(--sl-muted); font-size: 13px; font-weight: 560; cursor: pointer; }
body.stagelight .np-toggle:hover { color: var(--sl-ink); }
body.stagelight .np-toggle[aria-pressed="true"], body.stagelight .np-toggle.is-active { background: var(--sl-ink); color: #111; border-color: var(--sl-ink); }
/* Highlight-a-show: rows wash in the show's tint. For the last four shows the
   always-on left rail already carries the marker color at full height, so no
   inset bar (it collided with the rail and read as a glitch). Older shows have
   no rail, so the white highlight keeps its inset bar. */
body.stagelight .tour-table tbody tr.is-selected-show { background: rgba(255,255,255,0.08); box-shadow: inset 3px 0 0 #e8e6e1; }
body.stagelight .tour-stats[data-hl="black"] .tour-table tbody tr.is-selected-show { background: rgba(255,255,255,0.06); box-shadow: none; }
body.stagelight .tour-stats[data-hl="blue"] .tour-table tbody tr.is-selected-show { background: rgba(70,86,146,0.16); box-shadow: none; }
body.stagelight .tour-stats[data-hl="green"] .tour-table tbody tr.is-selected-show { background: rgba(71,134,106,0.14); box-shadow: none; }
body.stagelight .tour-stats[data-hl="red"] .tour-table tbody tr.is-selected-show { background: rgba(212,81,79,0.12); box-shadow: none; }
body.stagelight .stats-expand {
  display: block; width: 100%; margin: 14px 0 0; padding: 12px; border-radius: var(--sl-r-sm);
  border: 1px solid var(--sl-line-strong); background: transparent; color: var(--sl-muted);
  font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
body.stagelight .stats-expand:hover { background: rgba(255,255,255,0.05); color: var(--sl-ink); }
/* When a capped list is expanded, its collapse control pins to the bottom of the
   viewport so you can close it from anywhere in the long list. */
body.stagelight .stats-expand.is-pinned { position: sticky; bottom: 14px; z-index: 4; background: rgba(20,20,23,0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 10px 40px -12px rgba(0,0,0,0.7); }

/* Sorting affordance: the active column's direction glyph (↓/↑) is always shown;
   inactive columns reveal their ↕ hint only on hover/keyboard focus. Headers stay
   on one line. */
body.stagelight .tour-table thead th { white-space: nowrap; }
body.stagelight .tour-table thead th button span { opacity: 0; transition: opacity 0.15s ease; }
body.stagelight .tour-table thead th[aria-sort] button span,
body.stagelight .tour-table thead th button:hover span,
body.stagelight .tour-table thead th button:focus-visible span { opacity: 1; }

/* Expanded list = a bounded ~68vh scroll window (not a full-page uncap). The wrap
   stays a scroll container; its thead is already sticky, the Show-fewer control
   pins to the bottom, and scroll-padding keeps a keyboard-focused row clear of it. */
body.stagelight .tour-table-wrap.is-capped.is-expanded { max-height: 68vh; scroll-padding-bottom: 72px; }
body.stagelight .tour-stats.is-expanded .data-toolbar { position: sticky; top: 6px; z-index: 6; }
body.stagelight .tour-stats.is-expanded .applied-filters { position: sticky; top: 58px; z-index: 6; }

/* "What these mean" — quiet footnote toggle, not a bolted-on bar. */
body.stagelight .index-method { border-bottom: 0; margin-top: 6px; }
body.stagelight .index-method > summary {
  min-height: 44px; justify-content: flex-start; gap: 8px;
  font-family: var(--sl-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--sl-faint); transition: color 0.15s ease;
}
body.stagelight .index-method > summary:hover { color: var(--sl-muted); }
body.stagelight .index-method > summary svg { flex: none; opacity: 0.7; margin-right: 9px; }
body.stagelight .index-method > summary span { display: inline-block; }
@supports (gap: 8px) { body.stagelight .index-method > summary svg { margin-right: 0; } }
body.stagelight .index-method > summary::after { content: none; }
body.stagelight .index-method[open] > summary { color: var(--sl-muted); }
body.stagelight .index-method > div {
  border: 1px solid var(--sl-line); border-radius: var(--sl-r-md); background: var(--sl-glass);
  padding: 18px 20px; margin-bottom: 8px;
}
body.stagelight .index-method p { color: var(--sl-muted); font-size: 13.5px; line-height: 1.6; }
body.stagelight .index-method strong { color: var(--sl-ink); }

/* ---- SONGS NOT PLAYED (expandable) ---- */
body.stagelight .not-played { margin-top: 16px; border-top: 1px solid var(--sl-line); }
body.stagelight .not-played > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer;
  padding: 16px 2px 6px; font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sl-faint);
}
body.stagelight .not-played > summary:hover { color: var(--sl-ink); }
body.stagelight .not-played > summary .sc-chev { position: static; color: var(--sl-faint); transition: transform 0.22s ease; }
body.stagelight .not-played[open] > summary .sc-chev { transform: rotate(180deg); }
body.stagelight .np-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 2px 24px; padding: 12px 0 6px; }
body.stagelight .np-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 2px; border-bottom: 1px solid var(--sl-line-faint); }
body.stagelight .np-title { color: var(--sl-muted); font-size: 14px; }
body.stagelight .np-meta { font-family: var(--sl-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--sl-faint); white-space: nowrap; }

/* ---- TONIGHT'S ODDS ---- */
body.stagelight .tonight-odds {
  margin: 0 0 22px; border-radius: var(--sl-r); overflow: hidden;
  border: 1px solid rgba(212,81,79,0.4); background: linear-gradient(180deg, rgba(212,81,79,0.10), rgba(16,16,18,0.4));
}
body.stagelight .tonight-toggle {
  display: flex; align-items: center; gap: 18px; width: 100%; padding: 18px 22px; cursor: pointer;
  background: transparent; border: 0; text-align: left; color: var(--sl-ink);
}
body.stagelight .tn-live { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sl-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sl-ink); }
body.stagelight .tn-lead { font-family: var(--sl-display); font-weight: 620; font-size: 18px; letter-spacing: -0.005em; }
/* City as a quiet secondary line after a separator — not part of the title. */
body.stagelight .tn-city { display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--sl-faint); text-transform: uppercase; }
body.stagelight .tn-city-sep { color: var(--sl-line-strong); }
/* Closed-bar teaser: quiet real top-three preview, mono, no pills. */
body.stagelight .tn-teaser { margin-left: auto; display: inline-flex; align-items: baseline; gap: 10px; min-width: 0; font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.01em; color: var(--sl-faint); }
body.stagelight .tn-teaser-label { text-transform: uppercase; letter-spacing: 0.12em; font-size: 10px; color: var(--sl-line-strong); flex: none; }
body.stagelight .tn-teaser-full { color: var(--sl-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.stagelight .tn-teaser-min { display: none; color: var(--sl-muted); white-space: nowrap; }
body.stagelight .tonight-odds.is-open .tn-teaser { opacity: 0; }
body.stagelight .tonight-toggle .sc-chev { position: static; margin-left: 14px; flex: none; color: var(--sl-faint); transition: transform 0.22s ease; }
@media (max-width: 760px) {
  body.stagelight .tn-teaser-full { display: none; }
  body.stagelight .tn-teaser-min { display: inline; }
}
@media (max-width: 560px) {
  body.stagelight .tn-teaser, body.stagelight .tn-city { display: none; }
}
body.stagelight .tonight-odds.is-open .tonight-toggle .sc-chev { transform: rotate(180deg); }
body.stagelight .tonight-panel-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.25s ease; }
body.stagelight .tonight-odds.is-open .tonight-panel-wrap { grid-template-rows: 1fr; }
body.stagelight .tonight-panel { overflow: hidden; min-height: 0; }
body.stagelight .tn-list { padding: 4px 22px 8px; }
body.stagelight .tn-row { display: flex; align-items: center; gap: 16px; padding: 11px 0; border-top: 1px solid var(--sl-line-faint); }
body.stagelight .tn-rank { font-family: var(--sl-mono); font-size: 12px; color: var(--sl-faint); min-width: 22px; font-variant-numeric: tabular-nums; }
body.stagelight .tn-song { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
body.stagelight .tn-song { font-family: var(--sl-display); font-weight: 600; font-size: 16px; color: var(--sl-ink); }
body.stagelight .tn-hint { font-family: var(--sl-mono); font-size: 11px; letter-spacing: 0.03em; font-weight: 400; color: var(--sl-faint); }
body.stagelight .tn-reason { font-family: var(--sl-display); font-weight: 500; font-size: 12.5px; font-style: italic; color: #e6cf9e; line-height: 1.4; display: block; margin: 1px 0; }
body.stagelight .tn-note-icon { font-style: normal; font-size: 10px; margin-right: 4px; opacity: 0.85; }
body.stagelight .tn-reason-pct { font-family: var(--sl-mono); font-style: normal; font-size: 10.5px; color: #e0be7a; opacity: 0.85; }
body.stagelight .tn-heat { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; }
body.stagelight .tn-tier { font-family: var(--sl-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sl-faint); }
body.stagelight .tn-heat b { font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 640; min-width: 30px; text-align: right; }
body.stagelight .tn-hot .tn-tier, body.stagelight .tn-hot .tn-heat b { color: #e5726f; }
body.stagelight .tn-warm .tn-tier, body.stagelight .tn-warm .tn-heat b { color: #e5b3b1; }
body.stagelight .tn-long .tn-heat b { color: var(--sl-muted); }
body.stagelight .tn-disclaimer { padding: 8px 22px 20px; font-family: var(--sl-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--sl-faint); }
@media (prefers-reduced-motion: reduce) { body.stagelight .tonight-panel-wrap { transition: none; } }
@media (max-width: 560px) { body.stagelight .tn-lead { font-size: 15px; } body.stagelight .tonight-toggle { gap: 12px; padding: 16px; } }

/* ---- FOOTER CREDIT ---- */
body.stagelight .site-credit { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--sl-faint); }
body.stagelight .site-credit:hover { color: var(--sl-ink); }

body.stagelight .tour-stats { padding: 0; }
body.stagelight .tour-table th, body.stagelight .tour-table td,
body.stagelight .data-table th, body.stagelight .data-table td { padding: 16px 18px; }
body.stagelight .rarity-symbol { display: inline-flex; align-items: center; min-width: 26px; margin-right: 8px; }
body.stagelight .rarity-symbol svg { height: 10px; width: auto; display: block; }
/* In the Tour Stats rarity cell the symbol sits inline with the label, so drop
   the alignment min-width/margin and use one small consistent gap. */
body.stagelight .rarity-cell strong { gap: 6px; }
body.stagelight .rarity-cell .rarity-symbol { min-width: 0; margin-right: 0; }

/* ---- BOARD INTRO ---- */
body.stagelight .board-intro { position: relative; margin-top: 56px; }
/* Stage light: a soft beam falls on the intro, tinted from the hero photo. */
body.stagelight .board-intro::before {
  content: ""; position: absolute; left: -12%; top: -170px; width: 74%; height: 340px;
  background: radial-gradient(52% 58% at 32% 38%, var(--hero-glow, rgba(255,186,128,0.10)), transparent 74%);
  pointer-events: none;
}
body.stagelight .board-intro { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 32px 72px; align-items: center; }
body.stagelight .board-intro-line {
  position: relative; font-family: var(--sl-display);
  font-size: 27px; font-weight: 640; letter-spacing: -0.015em; line-height: 1.42;
}
body.stagelight .bi-lead { color: var(--sl-ink); }
body.stagelight .bi-rest { color: rgba(242,242,240,0.5); }
/* Marker swipes: the four most recent shows as big highlighter strokes. Straight
   left-to-right; the imperfection is the right edge, clipped at a per-stroke
   diagonal (--cut) like the marker lifting off the page. */
body.stagelight .bi-swipes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
body.stagelight .bi-swipe {
  position: relative; display: flex; align-items: center;
  padding: 12px 26px 14px 20px; background: var(--mc);
  border-radius: 10px 4px 14px 8px / 14px 6px 10px 12px;
  clip-path: polygon(0 0, 100% 0, var(--cut, 96%) 100%, 0 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.14), 0 18px 34px -18px rgba(0,0,0,0.75);
  transition: filter 0.2s ease;
}
/* Ink texture: a light entry edge fading into a darker dry-out, like one pass of a marker. */
body.stagelight .bi-swipe::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,0.12), transparent 34%, rgba(0,0,0,0.16) 90%);
}
body.stagelight .bi-swipe:hover { filter: brightness(1.12); }
body.stagelight .bi-swipe b { font-family: "PanicHand", "MilkRun", var(--sl-display), sans-serif; font-size: 26px; font-weight: 400; letter-spacing: 0.03em; text-transform: uppercase; color: rgba(255,255,255,0.96); line-height: 1.05; }
@media (max-width: 900px) {
  body.stagelight .board-intro { grid-template-columns: 1fr; gap: 28px; }
  body.stagelight .board-intro-line { font-size: 26px; }
  body.stagelight .bi-swipe { padding: 13px 16px 12px; }
  body.stagelight .bi-swipe b { font-size: 17px; }
}
body.stagelight main > .board-intro + section { margin-top: 68px; }
/* Tighten the bento-region -> Dork/Tour stats seam by 28px (96 -> 68): the bento
   region already carries 136px of visual air below its cards (64px padding + the
   -72px grid pull that lets the scrawl tails trail), so the full 96px section gap
   on top read as a dead band. Padding-bottom left intact so the scrawl tails clear. */
body.stagelight main > section.tour-stats { margin-top: 68px; }

/* ---- SHEET KEY (the four explainer columns, held close under the song sheet
   so "the band uses this color-coded song list" reads as its caption) ---- */
body.stagelight main > section.sheet-key { margin-top: 16px; }
body.stagelight .sheet-key { margin-bottom: 34px; }
/* Hand-drawn arrow flourish sits in the gap between the sheet and the key grid,
   left-aligned to the wrapper. Total visible gap sheet->explanations ~58px
   (16 margin + ~30 arrow + 6 + 6), within the 56-64px target. */
body.stagelight .key-col { min-width: 0; }
body.stagelight .sheet-arrow { margin: 0 0 10px; line-height: 0; transform: rotate(var(--ar, 0deg)); transform-origin: left center; }
body.stagelight .sheet-arrow-svg { display: block; width: clamp(96px, 7vw, 124px); height: auto; overflow: visible; }
body.stagelight .sheet-arrow .sa-press { stroke-dasharray: 40; stroke-dashoffset: 0; }
body.stagelight .sheet-arrow.armed .sa-press { stroke-dashoffset: 40; }
body.stagelight .sheet-arrow.armed.draw .sa-press { animation: sa-draw-press 140ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--ad, 0ms) + 230ms) forwards; }
@keyframes sa-draw-press { to { stroke-dashoffset: 0; } }
/* Complete by default (no-JS / no-IO / reduced-motion all show a finished
   arrow); JS arms the hidden state only when it can animate. */
body.stagelight .sheet-arrow .sa-line { stroke-dasharray: 161; stroke-dashoffset: 0; }
body.stagelight .sheet-arrow .sa-head { stroke-dasharray: 54; stroke-dashoffset: 0; }
body.stagelight .sheet-arrow.armed .sa-line { stroke-dashoffset: 161; }
body.stagelight .sheet-arrow.armed .sa-head { stroke-dashoffset: 54; }
/* draw-on once on viewport entry (see renderSheetArrowScript): line then head. */
body.stagelight .sheet-arrow.armed.draw .sa-line { animation: sa-draw-line 350ms cubic-bezier(0.22, 1, 0.36, 1) var(--ad, 0ms) forwards; }
body.stagelight .sheet-arrow.armed.draw .sa-head { animation: sa-draw-head 150ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--ad, 0ms) + 340ms) forwards; }
@keyframes sa-draw-line { to { stroke-dashoffset: 0; } }
@keyframes sa-draw-head { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  body.stagelight .sheet-arrow .sa-line, body.stagelight .sheet-arrow .sa-head { stroke-dashoffset: 0 !important; animation: none !important; }
}
/* Ramp-style explainer: four equal columns, lead words bold, plain language. */
body.stagelight .key-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px; margin-top: 6px; }
body.stagelight .key-grid p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--sl-muted); }
body.stagelight .key-grid b { color: var(--sl-ink); font-weight: 650; }
@media (max-width: 900px) {
  body.stagelight .key-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 560px) { body.stagelight .key-grid { grid-template-columns: 1fr; } }

/* ---- HOME SECTION NAV (sticky breadcrumbs) ---- */
/* Quiet glass bar under the sticky site header. Rides up with the header when it
   hides on scroll-down (body.nav-hidden), mirroring the .song-search pattern. */
/* Full-width section breadcrumb: no card, no top line (the header's own bottom
   border is the top edge), just a bottom hairline. Starts on the page's left
   rail, tight vertical padding, opaque-enough glass to hold over the white boards. */
body.stagelight .home-nav {
  position: fixed; top: 66px; left: 0; right: 0; z-index: 55;
  /* Hidden in the hero; glides into the vacated header strip once the site header
     slides away on scroll-down (body.nav-hidden). Out of flow, so it reserves no
     space (--sl-breadcrumb-h is 0). */
  opacity: 0; transform: translateY(-10px); pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22,1,0.36,1), top 0.28s ease;
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 7px;
  margin: 0;
  padding: 4px max(28px, calc((100% - 1400px) / 2));
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(11,11,13,0.62); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
}
/* Visible whenever scrolled past the hero (body.crumb-on), independent of the
   header's own show/hide. Position follows the header: default top:66px (below
   the visible header); when the header hides on scroll-down it glides to top:0. */
body.stagelight.crumb-on .home-nav { opacity: 1; transform: none; pointer-events: auto; }
body.stagelight.nav-hidden .home-nav { top: 0; }
@media (prefers-reduced-motion: reduce) {
  body.stagelight .home-nav { transition: none; }
}
body.stagelight .home-nav a {
  font-family: var(--sl-mono); font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--sl-faint); text-decoration: none; padding: 3px 0;
  transition: color 0.16s ease;
}
body.stagelight .home-nav a:hover { color: var(--sl-muted); }
body.stagelight .home-nav a.is-active { color: var(--sl-ink); }
body.stagelight .home-nav-sep { color: var(--sl-faint); font-size: 10px; opacity: 0.45; }
@media (max-width: 560px) {
  body.stagelight .home-nav { gap: 2px 6px; padding-top: 6px; padding-bottom: 6px; }
  body.stagelight .home-nav a { font-size: 10px; letter-spacing: 0.08em; }
}

/* ---- UPCOMING FLAG (hero upcoming card) ---- */
body.stagelight .ns-flag {
  margin-left: auto; display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sl-muted); border: 1px solid var(--sl-line-strong); border-radius: var(--sl-r-pill); padding: 8px 16px; white-space: nowrap;
}
body.stagelight .ns-flag.is-tonight { color: var(--sl-ink); border-color: rgba(212,81,79,0.5); }
@media (max-width: 760px) { body.stagelight .ns-flag { margin-left: 0; } }

/* ---- HERO PHOTO SHEEN ---- */
body.stagelight .sc-photo::after { content: ""; position: absolute; inset: 0; border-radius: var(--sl-r-md); background: linear-gradient(200deg, rgba(255,255,255,0.10), transparent 38%); pointer-events: none; }

/* ---- SHELF WATCH HEAT CARDS ---- */
/* ---- FROM THE STAGE (one cinematic featured video, our photo as poster) ---- */
body.stagelight .from-the-stage { padding: 0; }
body.stagelight .fs-head { display: flex; align-items: center; gap: 24px; margin-bottom: 38px; }
body.stagelight .fs-lead { margin: 0; max-width: 34ch; }
body.stagelight .fs-yt { margin-left: auto; flex: none; }
@media (max-width: 760px) { body.stagelight .fs-head { flex-direction: column; gap: 18px; margin-bottom: 26px; } body.stagelight .fs-yt { margin-left: 0; } }
body.stagelight .fs-player { position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--sl-line); border-radius: var(--sl-r); overflow: hidden; background: #0d0d10; }
body.stagelight .fs-poster { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; position: relative; text-align: left; }
body.stagelight .fs-poster img { width: 100%; height: 100%; object-fit: cover; object-position: center 50%; transition: transform 0.6s cubic-bezier(0.22,1,0.36,1); }
body.stagelight .fs-poster:hover img { transform: scale(1.015); }
body.stagelight .fs-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9,9,11,0.25) 0%, rgba(9,9,11,0.1) 40%, rgba(9,9,11,0.78) 88%); }
body.stagelight .fs-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 76px; height: 76px; display: grid; place-items: center; padding-left: 6px;
  border-radius: 50%; color: var(--sl-ink);
  background: rgba(16,16,20,0.55); border: 1px solid rgba(255,255,255,0.28);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
body.stagelight .fs-poster:hover .fs-play { background: rgba(24,24,30,0.72); border-color: rgba(255,255,255,0.5); transform: translate(-50%, -50%) scale(1.05); }
body.stagelight .fs-caption { position: absolute; left: 26px; bottom: 20px; display: flex; flex-direction: column; gap: 4px; }
body.stagelight .fs-caption strong { font-family: var(--sl-display); font-size: 21px; font-weight: 640; letter-spacing: -0.01em; text-shadow: 0 2px 24px rgba(0,0,0,0.7); }
body.stagelight .fs-caption small { font-size: 13.5px; color: rgba(255,255,255,0.7); }
body.stagelight .fs-credit { position: absolute; right: 12px; bottom: 10px; font-family: var(--sl-mono); font-size: 9.5px; letter-spacing: 0.04em; color: rgba(255,255,255,0.6); }
body.stagelight .fs-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 760px) {
  body.stagelight .fs-caption strong { font-size: 17px; }
  body.stagelight .fs-play { width: 60px; height: 60px; }
}
/* ---- SHELF WATCH: editorial photo-card rail (archival feature, not a data
   block). No section frame; the cards carry the design. Static on hover. ---- */
body.stagelight .shelf-watch { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; }
body.stagelight .sw-head { display: flex; align-items: center; gap: 24px; margin-bottom: 30px; }
body.stagelight .sw-lead { margin: 0; max-width: 30ch; font-family: var(--sl-display); font-size: 27px; font-weight: 400; line-height: 1.42; letter-spacing: -0.01em; color: var(--sl-muted); }
body.stagelight .sw-lead b { font-weight: 640; color: var(--sl-ink); }
body.stagelight .sw-arrows { margin-left: auto; display: flex; gap: 8px; flex: none; }
body.stagelight .sw-arrow {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--sl-line-strong); border-radius: 50%; background: transparent;
  color: var(--sl-ink); cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
body.stagelight .sw-arrow:hover:not(:disabled) { border-color: var(--sl-muted); background: rgba(255,255,255,0.05); }
body.stagelight .sw-arrow:disabled { color: var(--sl-faint); opacity: 0.4; cursor: default; }
/* Rail: ~3 full cards + a sliver of the fourth; snap scrolling, no scrollbar. */
body.stagelight .sw-rail {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
}
body.stagelight .sw-rail::-webkit-scrollbar { display: none; }
body.stagelight .sw-card {
  flex: 0 0 calc((100% - 32px) / 3.15); min-width: 0; scroll-snap-align: start;
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 560px; border-radius: var(--sl-r); overflow: hidden;
  border: 1px solid var(--sl-line); text-decoration: none; color: var(--sl-ink); cursor: pointer;
}
body.stagelight .sw-img { position: absolute; inset: 0; background-size: cover; background-position: center 22%; }
/* Heavy scrim: the photo reads at ~25-35%, data always wins. */
body.stagelight .sw-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(9,9,11,0.55) 0%, rgba(9,9,11,0.32) 40%, rgba(9,9,11,0.8) 68%, rgba(9,9,11,0.96) 100%);
}
body.stagelight .sw-body { position: relative; display: flex; flex-direction: column; padding: 24px 24px 22px; }
/* Number matches the bento count; sub-line, sentence, and count all sit on the
   existing type scale (34 / 16 / 12) so nothing invents a size. */
/* One family, one weight, white (Webflow discipline). The only color is the
   number's slow red tie-dye — background-clip text over a drifting gradient. */
body.stagelight .sw-n { font-family: var(--sl-display); font-size: 52px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--sl-ink); }
/* Red tie-dye ONLY inside 10 shows of the shelf (the settled urgency rule) —
   the rest of the section stays white-dominant. */
body.stagelight .sw-card.is-hot .sw-n {
  background: linear-gradient(105deg, #ef8b88 0%, #d4514f 26%, #ff9d6b 48%, #c65db8 72%, #ef8b88 100%);
  background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sw-tiedye 9s ease-in-out infinite alternate;
}
@keyframes sw-tiedye { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { body.stagelight .sw-card.is-hot .sw-n { animation: none; } }
body.stagelight .sw-to { font-size: 15px; font-weight: 700; color: var(--sl-ink); margin-top: 6px; }
body.stagelight .sw-line { font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--sl-ink); margin: 16px 0 0; }
body.stagelight .sw-song { font-weight: 700; letter-spacing: -0.005em; }
body.stagelight .sw-bar { display: flex; height: 8px; border-radius: 4px; background: rgba(255,255,255,0.1); overflow: hidden; margin: 18px 0 0; }
body.stagelight .sw-bar i { display: block; height: 100%; background: var(--sl-ink); }
body.stagelight .sw-count { font-family: var(--sl-mono); font-size: 12px; color: var(--sl-faint); margin-top: 10px; font-variant-numeric: tabular-nums; }
/* Warm red urgency only inside ~10 shows of the Shelf; others stay neutral. */
body.stagelight .sw-card.is-hot .sw-bar i { background: #d4514f; }
body.stagelight .sw-credit { margin: 16px 0 0; font-family: var(--sl-mono); font-size: 12.5px; color: rgba(255,255,255,0.55); }
body.stagelight .sw-credit a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.22); }
body.stagelight .sw-credit a:hover { color: var(--sl-ink); }
@media (max-width: 900px) {
  body.stagelight .sw-lead { font-size: 24px; }
  body.stagelight .sw-card { flex-basis: 86%; min-height: 500px; }
}

body.stagelight .ticket-link { text-decoration: none; }

/* ---- THE PAPER SHEETS: keep white, add the spotlight case ---- */
/* the sheets are paper artifacts — undo the dark-page text/heading cascade */
body.stagelight .laminate { position: relative; color: #111; }

/* ---- REAL LAMINATE: clear plastic pouch sealed around the paper ---- */
body.stagelight .laminate {
  border: 0;
  border-radius: 4px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 30px 80px rgba(0, 0, 0, 0.55);
}
/* the clear plastic rim sealed past the paper edge — thin, and it shares its
   exact geometry with the glare overlay below so the two always line up */
body.stagelight .laminate::before {
  content: "";
  position: absolute;
  inset: -10px;
  z-index: -1;
  border-radius: 10px;
  background: linear-gradient(118deg,
    rgba(255, 255, 255, 0.20) 0%,
    rgba(255, 255, 255, 0.07) 24%,
    rgba(255, 255, 255, 0.15) 48%,
    rgba(255, 255, 255, 0.05) 70%,
    rgba(255, 255, 255, 0.18) 100%);
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.45),
    inset 0 -1px 2px rgba(0, 0, 0, 0.3),
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 -20px 90px 12px rgba(255, 243, 224, 0.09);
}
/* specular glare: a single px-bounded radial anchored top-left that fades out
   naturally — no background-size cutoff, no seam to mismatch the rim */
body.stagelight .laminate::after {
  content: "";
  position: absolute;
  inset: -10px;
  z-index: 6;
  border-radius: 10px;
  pointer-events: none;
  background: radial-gradient(1200px 420px at 8% -80px, rgba(255, 255, 255, 0.17), transparent 62%);
}

/* ---- DRY-ERASE STRIKES: SVG marker swipes over played songs ---- */
/* the ink block: translucent marker fill covering the whole word, with a
   chisel/diagonal right end via clip-path (crisp at any width) */
.marker-ink {
  display: block; width: 100%; height: var(--sh, 10px);
  background: var(--mc);
  opacity: 0.78;
  /* normal blend so stacked show-colours stay physical strokes, not blended */
  mix-blend-mode: normal;
  border-radius: 1px;
  clip-path: polygon(0.6% 12%, 99% 3%, 100% 82%, 93% 100%, 1% 92%);
  transform-origin: left center;
}
/* strokes centre in the word box; per-layer rotate + vertical raise (--vo) so
   the older colour peeks below the newer one. Horizontal jitter (--sj/--ej)
   gives each stroke a slightly different start/width. */
.marker-mask { display: flex; align-items: center; }
.marker-mask.sv1 { transform: rotate(-0.5deg) translateY(calc(-1 * var(--vo, 0px))); }
.marker-mask.sv2 { transform: rotate(0.35deg) translateY(calc(-1 * var(--vo, 0px))); }
.marker-mask.sv3 { transform: rotate(-0.25deg) translateY(calc(-1 * var(--vo, 0px))); }
.marker-mask.sv4 { transform: rotate(0.5deg) translateY(calc(-1 * var(--vo, 0px))); }
.marker-mask.sv2 .marker-ink { clip-path: polygon(0.6% 6%, 99% 12%, 100% 96%, 92% 88%, 1% 98%); }
.marker-mask.sv4 .marker-ink { clip-path: polygon(0.6% 9%, 99% 4%, 100% 90%, 94% 98%, 1% 95%); }
/* draw-in: the marker wipes across left-to-right as the board scrolls in */
.can-strike .marker-ink { transform: scaleX(0); }
.can-strike .marker-mask.draw .marker-ink { animation: strike-wipe 0.28s cubic-bezier(0.5, 0, 0.4, 1) forwards; animation-delay: var(--sd, 0s); }
@keyframes strike-wipe { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .can-strike .marker-ink { transform: scaleX(1); animation: none !important; }
}

/* ============================================================
   STAGELIGHT — SECONDARY CONTENT PAGES (archive, origins,
   shelf, rumors, tour-in-review, privacy). Legacy structure is
   hoisted out of .laminate above; here we recolor for dark.
   ============================================================ */
/* strip the legacy white "paper card" wrapper so dark text/glass read right */
body.stagelight .archive-page, body.stagelight .archive-index {
  background: transparent; border: 0; border-radius: 0; padding: 0;
}
body.stagelight .archive-main { width: min(680px, calc(100% - 48px)); margin: 56px auto 0; color: var(--sl-ink); }
body.stagelight .origins-main, body.stagelight .tour-review-main { width: min(1180px, calc(100% - 48px)); }
body.stagelight .archive-page { color: var(--sl-ink); }
body.stagelight .origin-hero { border-bottom: 1px solid var(--sl-line); padding-bottom: 26px; }

/* page titles: hide the light-on-transparent graphic PNGs, promote the h1 */
body.stagelight .page-graphic-title { display: block; margin: 8px 0 40px; }
body.stagelight .page-graphic-title img { display: none; }
body.stagelight .page-graphic-title h1,
body.stagelight .archive-title h1 {
  position: static; width: auto; height: auto; clip: auto; margin: 0;
  font-family: var(--sl-display); font-weight: 660; font-size: clamp(34px, 5vw, 52px);
  letter-spacing: -0.02em; line-height: 1.04; color: var(--sl-ink);
}
body.stagelight .archive-title { margin-bottom: 34px; border-bottom: 1px solid var(--sl-line); padding-bottom: 24px; }
body.stagelight .archive-title p { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sl-faint); margin-bottom: 12px; }

/* ============================================================
   UNIFIED SUBPAGE DECK — one system for every subpage's single
   deck sentence (replaces the old per-page songs-deck / albums-deck
   / shelf-deck / tour-hub-deck / archive-hub-deck / alm-deck / faq
   patches, several of which never reset the mono-uppercase default
   above, leaking tiny all-caps mono into full sentences). The
   .archive-title p.page-deck arm out-specifies the mono default;
   the bare .page-deck arm covers the FAQ glass panel.
   ============================================================ */
body.stagelight .page-deck,
body.stagelight .archive-title p.page-deck {
  font-family: var(--sl-display); font-size: 17px; line-height: 1.55;
  letter-spacing: -0.01em; text-transform: none; color: var(--sl-muted);
  max-width: 64ch; margin: 14px 0 0;
}
body.stagelight .page-deck b { color: var(--sl-ink); font-weight: 600; }

/* ============================================================
   POSTER HEADER — five subpages (song-origins, tour-in-review,
   faq, rumors, shelf) pair the unified header with a small tour
   poster that sits as a stamp beside the title. The .ph-wrap
   breaks OUT of the narrow reading column to a wider header row
   using a viewport-centred width (never touches the blanket
   main > * rule); page content below stays in its own column.
   All motion is transform/opacity only and contained.
   ============================================================ */
body.stagelight .ph-wrap {
  position: relative; isolation: isolate; contain: layout paint style;
  overflow: hidden;
  width: min(980px, calc(100vw - 48px));
  margin-left: 50%; transform: translateX(-50%);
}
body.stagelight .poster-header {
  display: grid; grid-template-columns: minmax(0, 1fr) 200px;
  gap: clamp(24px, 4vw, 56px); align-items: center;
}
body.stagelight .ph-lede { min-width: 0; }
body.stagelight .ph-poster { position: relative; justify-self: center; width: 200px; }
/* Static poster stamp only — the :not(.lp-plate) guard keeps this off the living
   poster's plate <img>, which is an absolutely-positioned canvas layer (its float +
   fade come from .living-poster and the .lp-stage mask, not from here). */
body.stagelight .ph-poster picture,
body.stagelight .ph-poster img:not(.lp-plate) {
  display: block; width: 100%; height: auto; position: relative; z-index: 1;
  -webkit-mask-image: radial-gradient(100% 100% at 50% 50%, #000 45%, transparent 86%);
  mask-image: radial-gradient(100% 100% at 50% 50%, #000 45%, transparent 86%);
  animation: phFloat 9s ease-in-out infinite alternate;
}
body.stagelight .ph-halo {
  position: absolute; inset: -22%; z-index: 0; border-radius: 50%;
  background: var(--poster) center/cover; filter: blur(55px) saturate(1.6) brightness(1.25);
  opacity: 0.24; animation: phHalo 8s ease-in-out infinite alternate; pointer-events: none;
}
/* Atmosphere wash is strictly contained to the header: the wrap clips it (overflow
   hidden + contain paint), and it never extends past the header's bottom — the
   bottom inset is 0 and a mask fades it to full transparency well ABOVE the bottom
   edge, so the first row of content cards below gets zero tint. */
body.stagelight .ph-atmos {
  position: absolute; inset: -15% -15% 0 -15%; z-index: -1; pointer-events: none; overflow: hidden;
}
body.stagelight .ph-atmos::before {
  content: ""; position: absolute; inset: 0;
  background: var(--poster) center/cover; filter: blur(90px) saturate(1.35);
  opacity: 0.16; animation: phAtmos 18s ease-in-out infinite alternate;
  -webkit-mask-image: linear-gradient(#000 55%, transparent 82%);
  mask-image: linear-gradient(#000 55%, transparent 82%);
}
body.stagelight .ph-atmos::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 60% 50%, transparent 30%, #0b0b0c 100%);
}
@keyframes phFloat { from { transform: translateY(0) rotate(-0.4deg); } to { transform: translateY(-4px) rotate(0.4deg); } }
@keyframes phHalo { from { opacity: 0.16; } to { opacity: 0.30; } }
@keyframes phAtmos { from { opacity: 0.14; } to { opacity: 0.22; } }
@media (max-width: 1100px) {
  body.stagelight .poster-header { display: block; }
  body.stagelight .ph-poster { display: none; }
  body.stagelight .ph-atmos::before { opacity: 0.08; animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.stagelight .ph-poster img,
  body.stagelight .ph-poster.is-living .living-poster,
  body.stagelight .ph-halo,
  body.stagelight .ph-atmos::before { animation: none; }
}

/* ============================================================
   LIVING POSTER — a synthetic starfield canvas (z1) sits behind
   a knocked-out print plate (z2, true alpha in the sky region);
   whisper-level gear/candle lights (z3, screen), a vignette grade
   (z4) and a top sheen (z5) finish it. Two placements: the
   homepage Nick panel (framed square "rig") and the Song Origins
   header (200px "aframe" stamp that floats + fades like the static
   poster it replaces). The JS paints one perfect still under
   reduced motion; these rules add no motion of their own except
   the header float, which the reduced-motion block above kills.
   ============================================================ */
body.stagelight .living-poster { position: relative; }
/* TRANSPARENT backing: the stage never fills with a solid colour, so at rest the
   host surface (glass panel / header background) reads continuously through every
   sky pixel and every gap between the dots — only the knocked-out art and the
   synthetic stars are opaque. The starfield canvas clears to transparent each
   frame; the fx canvas is additive (screen). No grade/sheen framing layers. */
body.stagelight .lp-stage {
  position: relative; width: 100%; aspect-ratio: var(--lp-aspect, 1 / 1);
  overflow: hidden; background: transparent;
}
body.stagelight .lp-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; transform: translateZ(0); }
body.stagelight .lp-starfield { z-index: 1; }
body.stagelight .lp-plate { z-index: 2; object-fit: cover; }
body.stagelight .lp-fx { z-index: 3; mix-blend-mode: screen; }
/* arrival: the poster fades up as it scrolls into view (opacity only — never a
   transform, which would fight the header float animation and the size probe). */
body.stagelight .living-poster { opacity: 0; transition: opacity 1.1s ease; }
body.stagelight .living-poster.is-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) { body.stagelight .living-poster { transition: none; } }
/* Homepage: drops into the Nick panel where the static rig art used to sit —
   capped small so it complements the ranking table, never dominates (owner note). */
body.stagelight .nick-panel .living-poster { margin: 0 auto; max-width: 468px; }
/* Song Origins header: 200px stamp, masked fade + float to match the static poster
   stamp it replaces; the transparent sky knockout lets the header wash read through. */
body.stagelight .ph-poster.is-living .living-poster { z-index: 1; animation: phFloat 9s ease-in-out infinite alternate; }
body.stagelight .ph-poster.is-living .lp-stage {
  -webkit-mask-image: linear-gradient(#000 68%, transparent 84%);
  mask-image: linear-gradient(#000 68%, transparent 84%);
}
/* breadcrumbs */
body.stagelight .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
body.stagelight .crumbs a { color: var(--sl-faint); }
body.stagelight .crumbs a:hover { color: var(--sl-ink); }
body.stagelight .crumbs [aria-current="page"] { color: var(--sl-muted); }
body.stagelight .crumb-sep { color: var(--sl-faint); opacity: 0.6; }
body.stagelight .archive-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
body.stagelight .archive-tags span { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sl-muted); border: 1px solid var(--sl-line-strong); border-radius: var(--sl-r-pill); padding: 5px 12px; }

/* imported Blogger prose — editorial, left-aligned, no Word-doc centering */
body.stagelight .archive-content { color: var(--sl-muted); font-size: 17px; line-height: 1.7; text-align: left; }
body.stagelight .archive-content [style*="text-align"], body.stagelight .archive-content [align] { text-align: left !important; }
body.stagelight .archive-content div { text-align: left; }
body.stagelight .archive-content p { margin: 0 0 18px; color: var(--sl-muted); }
body.stagelight .archive-content b, body.stagelight .archive-content strong { color: var(--sl-ink); font-weight: 620; }
body.stagelight .archive-content h2, body.stagelight .archive-content h3, body.stagelight .archive-content h4 { font-family: var(--sl-display); color: var(--sl-ink); letter-spacing: -0.01em; margin: 34px 0 14px; line-height: 1.15; }
body.stagelight .archive-content h2 { font-size: 26px; }
body.stagelight .archive-content h3 { font-size: 21px; }
body.stagelight .archive-content a { color: var(--sl-ink); text-decoration: underline; text-decoration-color: var(--sl-line-strong); text-underline-offset: 3px; }
body.stagelight .archive-content a:hover { text-decoration-color: var(--sl-ink); }
body.stagelight .archive-content ul, body.stagelight .archive-content ol { margin: 0 0 18px; padding-left: 22px; list-style: revert; }
body.stagelight .archive-content li { margin: 0 0 7px; }
body.stagelight .archive-content img { border-radius: var(--sl-r-md); border: 1px solid var(--sl-line); margin: 8px 0; height: auto; }
body.stagelight .archive-content blockquote { border-left: 2px solid var(--sl-line-strong); margin: 0 0 18px; padding: 4px 0 4px 20px; color: var(--sl-faint); font-style: italic; }
body.stagelight .archive-content hr { border: 0; border-top: 1px solid var(--sl-line); margin: 30px 0; }
body.stagelight .archive-content table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 15px; }
body.stagelight .archive-content th, body.stagelight .archive-content td { border-bottom: 1px solid var(--sl-line); padding: 10px 12px; text-align: left; }
body.stagelight .archive-content strong, body.stagelight .archive-content b { color: var(--sl-ink); }

/* ============================================================
   PROSE PLATE
   ------------------------------------------------------------
   ONE reading-typography system for every archive-derived body:
   individual archive posts, lyrics/chords pages, song-origin
   detail pages, and the shelf/rumors/privacy legacy prose. Each
   of those containers carries the shared .prose-plate class
   (alongside its own .archive-content / .origin-body hook), so
   the rules below apply everywhere long-form reading happens and
   nowhere else. Scope is typography + rhythm only: measure,
   vertical rhythm, hierarchy, lists, quotes, links, media. It
   layers on top of the legacy .archive-content baseline above and
   wins where the two overlap. The homepage sheet, albums, songs
   and the (already-designed) tour-review pages are untouched.

   Note on imported markup: the Blogger export wraps each line in a
   bare <div> and separates paragraphs with empty <div><br></div>
   spacers / literal <br><br> walls. We DON'T rewrite that (it would
   risk setlist/lyric line integrity) — the measure + line-height
   below turn those blank lines into clean editorial rhythm.
   ============================================================ */
body.stagelight .prose-plate {
  /* ~68 characters of running prose. Expressed in px because Geist's ch
     unit (the '0' width) overstates a comfortable measure by a wide margin. */
  --prose-measure: 640px;
  color: var(--sl-muted);
  font-size: 17px;
  line-height: 1.72;
  text-align: left;
  overflow-wrap: break-word;
}
/* keep every child inside the reading measure, kill Word-doc centering */
body.stagelight .prose-plate [style*="text-align"],
body.stagelight .prose-plate [align] { text-align: left !important; }
body.stagelight .prose-plate div { text-align: left; }

/* paragraph rhythm — real <p> get editorial spacing; Blogger's
   line-per-<div> blocks stay on the line grid (blank divs = gaps) */
body.stagelight .prose-plate p { margin: 0 0 1.15em; color: var(--sl-muted); }
body.stagelight .prose-plate p:last-child { margin-bottom: 0; }
body.stagelight .prose-plate > *:first-child { margin-top: 0; }

/* headings — display face, snapped to the type scale, clear hierarchy */
body.stagelight .prose-plate h2,
body.stagelight .prose-plate h3,
body.stagelight .prose-plate h4 {
  font-family: var(--sl-display); color: var(--sl-ink);
  letter-spacing: -0.015em; line-height: 1.16; text-wrap: balance;
}
body.stagelight .prose-plate h2 { font-size: 27px; margin: 1.85em 0 0.5em; }
body.stagelight .prose-plate h3 { font-size: 21px; margin: 1.6em 0 0.45em; }
body.stagelight .prose-plate h4 { font-size: 17.5px; letter-spacing: -0.005em; margin: 1.4em 0 0.4em; }
body.stagelight .prose-plate h2:first-child,
body.stagelight .prose-plate h3:first-child,
body.stagelight .prose-plate h4:first-child { margin-top: 0; }

/* emphasis — tasteful, not the Blogger heavy-bold wall */
body.stagelight .prose-plate b,
body.stagelight .prose-plate strong { font-weight: 600; color: var(--sl-ink); }
body.stagelight .prose-plate i,
body.stagelight .prose-plate em { font-style: italic; color: inherit; }

/* inline links — the site's underline-offset treatment, everywhere */
body.stagelight .prose-plate a {
  color: var(--sl-ink); text-decoration: underline;
  text-decoration-color: var(--sl-line-strong);
  text-decoration-thickness: 1px; text-underline-offset: 3px;
  overflow-wrap: break-word;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
body.stagelight .prose-plate a:hover { color: #fff; text-decoration-color: var(--sl-ink); }

/* lists — intentional indentation, colored markers, item rhythm
   (also de-lazies the Shelf's plain <ul>s via the shared system) */
body.stagelight .prose-plate ul,
body.stagelight .prose-plate ol { margin: 0 0 1.15em; padding-left: 0; }
body.stagelight .prose-plate li { margin: 0 0 0.5em; line-height: 1.6; }
body.stagelight .prose-plate li:last-child { margin-bottom: 0; }
body.stagelight .prose-plate ul { list-style: none; }
body.stagelight .prose-plate ul > li { position: relative; padding-left: 1.4em; }
body.stagelight .prose-plate ul > li::before {
  content: ""; position: absolute; left: 0.15em; top: 0.66em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--sl-faint);
}
body.stagelight .prose-plate ol { list-style: none; counter-reset: prose-ol; padding-left: 0.2em; }
body.stagelight .prose-plate ol > li { position: relative; padding-left: 1.9em; counter-increment: prose-ol; }
body.stagelight .prose-plate ol > li::before {
  content: counter(prose-ol) "."; position: absolute; left: 0; top: 0;
  font-family: var(--sl-mono); font-size: 0.86em; color: var(--sl-faint);
  font-variant-numeric: tabular-nums;
}
body.stagelight .prose-plate li > ul,
body.stagelight .prose-plate li > ol { margin: 0.5em 0 0; }

/* blockquote — pull-quote treatment with a left rule; mono attribution */
body.stagelight .prose-plate blockquote {
  margin: 1.6em 0; padding: 2px 0 2px 22px;
  border-left: 2px solid var(--sl-line-strong);
  color: var(--sl-ink); font-size: 19px; line-height: 1.5; font-style: italic;
}
body.stagelight .prose-plate blockquote p { color: var(--sl-ink); }
body.stagelight .prose-plate blockquote cite,
body.stagelight .prose-plate blockquote footer {
  display: block; margin-top: 12px; font-style: normal;
  font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sl-faint);
}

/* images / figures — rounded per tokens, subtle border+shadow, centered,
   never wider than the measure */
body.stagelight .prose-plate img {
  display: block; max-width: 100%; height: auto; margin: 1.7em auto;
  border-radius: var(--sl-r-md); border: 1px solid var(--sl-line);
  box-shadow: var(--sl-shadow-1);
}
body.stagelight .prose-plate figure { margin: 1.7em 0; }
body.stagelight .prose-plate figure img { margin: 0 auto; }
body.stagelight .prose-plate figcaption {
  margin-top: 10px; text-align: center; font-family: var(--sl-mono);
  font-size: 12px; letter-spacing: 0.04em; color: var(--sl-faint);
}

/* horizontal rule / section break — a tasteful fade, not a hard line */
body.stagelight .prose-plate hr {
  border: 0; height: 1px; width: 100%; margin: 2.4em auto;
  background: linear-gradient(90deg, transparent, var(--sl-line-strong) 50%, transparent);
}

/* code + monospace */
body.stagelight .prose-plate code,
body.stagelight .prose-plate kbd,
body.stagelight .prose-plate samp {
  font-family: var(--sl-mono); font-size: 0.9em;
  background: rgba(255,255,255,0.05); border: 1px solid var(--sl-line);
  border-radius: var(--sl-r-sm); padding: 1px 6px;
}
body.stagelight .prose-plate pre {
  font-family: var(--sl-mono); font-size: 13.5px; line-height: 1.6;
  background: rgba(255,255,255,0.03); border: 1px solid var(--sl-line);
  border-radius: var(--sl-r-md); padding: 16px 18px; margin: 1.4em 0; overflow-x: auto;
}
body.stagelight .prose-plate pre code { background: none; border: 0; padding: 0; font-size: inherit; }

/* tables — hairline rows, tabular figures for numeric columns */
body.stagelight .prose-plate table { width: 100%; border-collapse: collapse; margin: 0 0 1.3em; font-size: 15px; }
body.stagelight .prose-plate th,
body.stagelight .prose-plate td { border-bottom: 1px solid var(--sl-line); padding: 10px 12px; text-align: left; }
body.stagelight .prose-plate th { color: var(--sl-ink); font-weight: 600; }
body.stagelight .prose-plate td { color: var(--sl-muted); font-variant-numeric: tabular-nums; }

/* song-origin prose sits in a wide 2-col grid cell — cap it to the
   same reading measure so the line length stays comfortable */
body.stagelight .origin-body.prose-plate { max-width: var(--prose-measure); }

/* song-origin cross-link at the foot of a lyrics/archive page */
body.stagelight .archive-crosslink { margin-top: 40px; }
body.stagelight .archive-crosslink a {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px;
  padding: 22px 26px; border-radius: var(--sl-r); color: var(--sl-ink);
  background: var(--sl-glass); border: 1px solid var(--sl-line); box-shadow: var(--sl-glass-shadow);
  transition: transform 0.18s ease, border-color 0.18s ease;
}
body.stagelight .archive-crosslink a:hover { transform: translateY(-2px); border-color: var(--sl-line-strong); }
body.stagelight .xl-eyebrow { grid-column: 1; font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sl-faint); }
body.stagelight .xl-title { grid-column: 1; font-family: var(--sl-display); font-size: 21px; font-weight: 600; letter-spacing: -0.01em; }
body.stagelight .xl-go { grid-column: 2; grid-row: 1 / span 2; font-size: 21px; color: var(--sl-faint); }
body.stagelight .archive-crosslink a:hover .xl-go { color: var(--sl-ink); }

/* archive + tour-review index lists */
body.stagelight .archive-index .archive-title p { text-transform: none; font-family: var(--ui-font); font-size: 15px; letter-spacing: 0; color: var(--sl-muted); }
body.stagelight .archive-list { display: grid; gap: 2px; }
body.stagelight .archive-list li { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: baseline; gap: 6px 18px; padding: 16px 6px; border-bottom: 1px solid var(--sl-line); }
body.stagelight .archive-list a { font-size: 17px; font-weight: 540; color: var(--sl-ink); }
body.stagelight .archive-list a:hover { color: #fff; }
body.stagelight .archive-list span { font-family: var(--sl-mono); font-size: 12px; color: var(--sl-faint); }
body.stagelight .archive-list em { grid-column: 1 / -1; font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sl-faint); font-style: normal; }

/* ---- ARCHIVE INDEX: grouped-by-year, searchable utility list ---- */
body.stagelight .archive-hub-title { border-bottom: 0; margin-bottom: 20px; padding-bottom: 0; }
body.stagelight .archive-groups { display: grid; gap: 8px; }
body.stagelight .archive-year { padding: 6px 0; }
body.stagelight .archive-year[hidden] { display: none; }
body.stagelight .archive-year-head { display: flex; align-items: baseline; gap: 12px; margin: 20px 0 8px; font-family: var(--sl-mono); font-size: 15px; letter-spacing: 0.04em; color: var(--sl-ink); font-variant-numeric: tabular-nums; }
body.stagelight .archive-year-head span { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sl-faint); }
body.stagelight .archive-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
body.stagelight .archive-row[hidden] { display: none; }
body.stagelight .archive-row a { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: baseline; gap: 6px 18px; padding: 12px 6px; border-bottom: 1px solid var(--sl-line); }
body.stagelight .archive-row a:hover { background: rgba(255,255,255,0.03); }
body.stagelight .ar-title { font-size: 16px; font-weight: 540; color: var(--sl-ink); overflow: hidden; text-overflow: ellipsis; }
body.stagelight .archive-row a:hover .ar-title { color: #fff; }
body.stagelight .ar-date { font-family: var(--sl-mono); font-size: 12px; color: var(--sl-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  body.stagelight .archive-row a { grid-template-columns: 1fr; gap: 3px; }
}

body.stagelight .current-review-link { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; }
body.stagelight .current-review-link div { padding: 18px 22px; border-radius: var(--sl-r-md); background: var(--sl-glass); border: 1px solid var(--sl-line); }
body.stagelight .current-review-link a { color: var(--sl-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---- ALBUMS: index grid ---- */
/* Albums index rides the full 1400px header rail (like the homepage/stats page),
   so the grid's left edge lines up under the wordmark. The detail page stays on
   the narrower reading rail so its cover keeps matching the index card size. */
body.stagelight .albums-main { width: min(1400px, calc(100% - 56px)); }
/* Detail pages share the SAME left margin line as the index: left edge pinned to
   the 1400 rail, content keeps its narrower 1180 reading measure to the right. */
body.stagelight .album-main { width: min(1180px, calc(100% - 56px)); margin-left: max(28px, calc((100% - 1400px) / 2)); margin-right: auto; }
body.stagelight .album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px; }
body.stagelight .album-tile { display: block; color: var(--sl-ink); }
body.stagelight .album-cover, body.stagelight .album-cover-lg {
  display: block; margin: 0; position: relative; aspect-ratio: 1 / 1; border-radius: var(--sl-r-md); overflow: hidden;
  border: 1px solid var(--sl-line); box-shadow: var(--sl-glass-shadow); background: rgba(255,255,255,0.03);
}
body.stagelight .album-cover img, body.stagelight .album-cover-lg img { width: 100%; height: 100%; object-fit: cover; }
body.stagelight .album-tile:hover .album-cover { transform: translateY(-3px); border-color: var(--sl-line-strong); transition: transform 0.18s ease, border-color 0.18s ease; }
body.stagelight .album-cover.is-empty, body.stagelight .album-cover-lg.is-empty { display: flex; align-items: center; justify-content: center; background: radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,0.05), rgba(255,255,255,0.015) 60%, transparent), var(--sl-glass); }
body.stagelight .album-cover-fallback { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 22px; width: 100%; height: 100%; }
body.stagelight .acf-mark { width: 46%; max-width: 120px; height: auto; opacity: 0.5; }
body.stagelight .acf-title { font-family: var(--sl-display); font-weight: 640; font-size: 17px; letter-spacing: -0.01em; color: var(--sl-muted); }
body.stagelight .acf-note { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sl-faint); }
body.stagelight .album-tile-title { display: block; font-family: var(--sl-display); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin-top: 14px; }
body.stagelight .album-tile-year { display: block; font-family: var(--sl-mono); font-size: 12px; color: var(--sl-faint); margin-top: 3px; }

/* ---- ALBUMS: full-width atmospheric backdrop (color bled from the cover) ---- */
body.stagelight .album-backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
body.stagelight .album-backdrop::before {
  content: ""; position: absolute; inset: -12%;
  background-image: var(--album-art); background-size: cover; background-position: center 22%;
  filter: blur(90px) saturate(1.35); opacity: 0.55; transform: scale(1.25);
}
body.stagelight .album-backdrop::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% -10%, transparent, rgba(11,11,12,0.5) 46%, rgba(11,11,12,0.82) 68%, var(--sl-bg) 92%),
    linear-gradient(180deg, rgba(11,11,12,0.35), var(--sl-bg) 88%);
}
body.stagelight.album-page-body .album-main { position: relative; z-index: 1; }
body.stagelight.album-page-body .album-cover-lg { box-shadow: 0 40px 90px -30px rgba(0,0,0,0.9), 0 0 0 1px var(--sl-line), inset 0 1px 0 rgba(255,255,255,0.08); }

/* ---- ALBUMS: single album page ---- */
body.stagelight .album-eyebrow { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sl-faint); margin-bottom: 10px; }
body.stagelight .album-layout { display: grid; grid-template-columns: calc((100% - 66px) / 4) minmax(0, 1fr); gap: 48px; align-items: start; margin-top: 8px; }
body.stagelight .album-aside { position: sticky; top: 92px; display: grid; gap: 20px; }
body.stagelight .album-cover-lg { aspect-ratio: 1 / 1; border-radius: var(--sl-r); }
body.stagelight .album-meta-label { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sl-faint); }
body.stagelight .album-meta-value { font-size: 15px; color: var(--sl-ink); margin-top: 5px; }
body.stagelight .album-listen-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
body.stagelight .album-blurb { font-size: 17px; line-height: 1.65; color: var(--sl-ink); margin: 0 0 30px; }
body.stagelight .album-footprint { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 34px; }
body.stagelight .album-footprint div { padding: 18px 20px; border-radius: var(--sl-r-md); background: rgba(255,255,255,0.03); border: 1px solid var(--sl-line); }
body.stagelight .album-footprint strong { display: block; font-family: var(--sl-mono); font-size: 26px; font-weight: 640; color: var(--sl-ink); line-height: 1; }
body.stagelight .album-footprint span { display: block; font-size: 12px; letter-spacing: 0.04em; color: var(--sl-faint); margin-top: 8px; }
body.stagelight .album-tracks-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--sl-line); }
body.stagelight .album-tracks-head h2 { font-family: var(--sl-display); font-size: 21px; font-weight: 640; letter-spacing: -0.01em; }
body.stagelight .album-tracks-head span { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sl-faint); }
body.stagelight .album-tracks { display: grid; gap: 2px; }
body.stagelight .album-track { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 8px; border-bottom: 1px solid var(--sl-line-faint); }
body.stagelight .album-track:hover { background: rgba(255,255,255,0.025); }
body.stagelight .track-n { font-family: var(--sl-mono); font-size: 12px; color: var(--sl-faint); font-variant-numeric: tabular-nums; }
body.stagelight .track-title { font-size: 17px; font-weight: 520; color: var(--sl-ink); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
body.stagelight .track-title small { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--sl-faint); text-transform: uppercase; }
body.stagelight .track-stat { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; }
body.stagelight .track-live { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sl-ink); border: 1px solid rgba(45,124,82,0.55); border-radius: var(--sl-r-pill); padding: 4px 10px; }
body.stagelight .track-plays { font-family: var(--sl-mono); font-size: 12px; color: var(--sl-muted); font-variant-numeric: tabular-nums; }
body.stagelight .track-freq { font-family: var(--sl-mono); font-size: 12px; color: var(--sl-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
body.stagelight .album-track.no-data .track-title { color: var(--sl-muted); }
body.stagelight .album-pending { color: var(--sl-faint); font-size: 15px; }
body.stagelight .album-credits { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 22px 28px; margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--sl-line); }
body.stagelight .credit-block h3 { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sl-faint); margin-bottom: 8px; }
body.stagelight .credit-block p { font-size: 15px; line-height: 1.6; color: var(--sl-muted); }
body.stagelight .album-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 52px; padding-top: 24px; border-top: 1px solid var(--sl-line); }
body.stagelight .album-nav a { display: grid; gap: 4px; color: var(--sl-muted); }
body.stagelight .album-nav a.is-next { text-align: right; }
body.stagelight .album-nav a span { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sl-faint); }
body.stagelight .album-nav a strong { font-family: var(--sl-display); font-size: 17px; font-weight: 600; color: var(--sl-ink); }
body.stagelight .album-nav a:hover strong { color: #fff; }
@media (max-width: 820px) {
  body.stagelight .album-layout { grid-template-columns: 1fr; gap: 30px; }
  body.stagelight .album-aside { position: static; grid-template-columns: 160px 1fr; align-items: center; gap: 16px 22px; }
  body.stagelight .album-cover-lg { grid-row: 1 / span 3; }
  body.stagelight .album-footprint { grid-template-columns: 1fr; }
}
/* Mobile: the nowrap ON-THE-CURRENT-SHEET pill + plays ate the whole row and sat
   on top of the track title. Stack the stat line under the title instead. */
@media (max-width: 560px) {
  body.stagelight .album-track { grid-template-columns: 34px minmax(0, 1fr); row-gap: 8px; }
  body.stagelight .album-track .track-stat { grid-column: 2; grid-row: 2; justify-content: flex-start; flex-wrap: wrap; white-space: normal; }
}

/* song index + per-song history */
body.stagelight .songs-main { width: min(1180px, calc(100% - 28px)); }
body.stagelight .song-main { width: min(820px, calc(100% - 48px)); }
body.stagelight .shelf-main { width: min(1000px, calc(100% - 48px)); }

/* ---- THE SHELF: designed data page (hero deck, stat strip via .song-stat,
   designed row list with gap meter, related-sheet cards) ---- */
body.stagelight .shelf-info-page .archive-title { border-bottom: 0; margin-bottom: 22px; padding-bottom: 0; }
body.stagelight .shelf-list-section, body.stagelight .shelf-neighbors { margin-top: 52px; }
body.stagelight .shelf-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--sl-line); }
body.stagelight .shelf-section-head h2 { font-family: var(--sl-display); font-size: 21px; font-weight: 640; letter-spacing: -0.01em; color: var(--sl-ink); }
body.stagelight .shelf-section-head span { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sl-faint); }
body.stagelight .shelf-list { display: flex; flex-direction: column; }
body.stagelight .shelf-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 96px 132px 168px; align-items: center; gap: 20px;
  padding: 14px 10px; color: var(--sl-ink); border-bottom: 1px solid var(--sl-line-faint); transition: background 0.16s ease;
}
body.stagelight .shelf-row:hover { background: rgba(255,255,255,0.03); }
body.stagelight .shelf-row.is-compact { grid-template-columns: minmax(0, 1fr) 132px 96px; }
body.stagelight .shr-title { font-family: var(--sl-display); font-size: 15px; font-weight: 560; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.stagelight .shr-type { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sl-faint); }
body.stagelight .shr-last { font-family: var(--sl-mono); font-size: 13.5px; color: var(--sl-muted); font-variant-numeric: tabular-nums; }
body.stagelight .shr-last small { display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sl-faint); margin-top: 2px; }
body.stagelight .shr-gap { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
body.stagelight .shr-meter { flex: 1; min-width: 40px; height: 5px; border-radius: var(--sl-r-pill); background: rgba(255,255,255,0.07); overflow: hidden; }
body.stagelight .shr-meter i { display: block; height: 100%; border-radius: var(--sl-r-pill); background: linear-gradient(90deg, rgba(212,81,79,0.55), rgba(212,81,79,0.95)); }
body.stagelight .shr-gap-num { flex: none; text-align: right; font-family: var(--sl-mono); font-size: 15px; color: var(--sl-ink); font-variant-numeric: tabular-nums; }
body.stagelight .shr-gap-num small { display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sl-faint); margin-top: 2px; }
body.stagelight .shelf-more { margin-top: 18px; font-size: 14px; color: var(--sl-muted); }
body.stagelight .shelf-more a { color: var(--sl-ink); text-decoration: underline; text-decoration-color: var(--sl-line-strong); text-underline-offset: 3px; }
body.stagelight .shelf-more a:hover { text-decoration-color: var(--sl-ink); }
body.stagelight .shelf-empty { color: var(--sl-faint); font-size: 15px; padding: 14px 10px; }
body.stagelight .shelf-neighbor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
body.stagelight .shelf-neighbor { display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 20px; border-radius: var(--sl-r-md); border: 1px solid var(--sl-line); background: rgba(255,255,255,0.03); transition: border-color 0.16s ease, background 0.16s ease; }
body.stagelight .shelf-neighbor:hover { border-color: var(--sl-line-strong); background: rgba(255,255,255,0.05); }
body.stagelight .shn-count { font-family: var(--sl-mono); font-size: 26px; font-weight: 640; color: var(--sl-ink); line-height: 1; font-variant-numeric: tabular-nums; }
body.stagelight .shn-count small { margin-left: 8px; font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sl-faint); }
body.stagelight .shn-name { font-family: var(--sl-display); font-size: 18px; font-weight: 640; letter-spacing: -0.01em; color: var(--sl-ink); }
body.stagelight .shn-desc { font-size: 14px; line-height: 1.5; color: var(--sl-muted); }
body.stagelight .shn-go { margin-top: 4px; font-family: var(--sl-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sl-faint); }
body.stagelight .shelf-neighbor:hover .shn-go { color: var(--sl-muted); }
body.stagelight .legacy-shelf-notes { margin-top: 56px; }
@media (max-width: 640px) {
  body.stagelight .shelf-row { grid-template-columns: minmax(0, 1fr) 88px; grid-auto-rows: auto; row-gap: 6px; column-gap: 14px; }
  body.stagelight .shr-type { grid-column: 1; grid-row: 2; }
  body.stagelight .shr-last { grid-column: 1; grid-row: 3; }
  body.stagelight .shr-gap { grid-column: 2; grid-row: 1 / span 3; flex-direction: column; align-items: flex-end; justify-content: center; gap: 8px; }
  body.stagelight .shr-meter { width: 100%; flex: none; }
  body.stagelight .shelf-row.is-compact { grid-template-columns: minmax(0, 1fr) 88px; }
  body.stagelight .shelf-row.is-compact .shr-last { grid-column: 1; grid-row: 2; }
  body.stagelight .shelf-row.is-compact .shr-gap-num { grid-column: 2; grid-row: 1; }
}
body.stagelight .song-search {
  position: sticky; top: 78px; z-index: 3; display: flex; align-items: center; gap: 12px;
  transition: top 0.28s ease;
  margin: 28px 0 18px; padding: 13px 18px; border-radius: var(--sl-r-md);
  background: color-mix(in srgb, var(--sl-glass) 88%, #000); border: 1px solid var(--sl-line);
  box-shadow: var(--sl-glass-shadow); backdrop-filter: blur(14px);
}
body.stagelight .song-search svg { flex: none; color: var(--sl-faint); }
body.stagelight .song-search input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: none;
  color: var(--sl-ink); font-family: var(--sl-display); font-size: 17px; letter-spacing: -0.01em;
}
body.stagelight .song-search input::placeholder { color: var(--sl-faint); }
body.stagelight .song-count { flex: none; font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sl-faint); white-space: nowrap; }
/* Shared index filter toolbar — Song Index + Lyrics & Chords hub. Reuses the
   homepage .type-filter button group; toggles + album select match its chip vocab. */
body.stagelight .index-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 22px; }
body.stagelight .index-toggle {
  height: 40px; padding: 0 16px; border-radius: var(--sl-r-pill);
  border: 1px solid var(--sl-line-strong); background: rgba(255,255,255,0.04);
  color: var(--sl-muted); font-size: 13px; font-weight: 560; letter-spacing: 0.01em; cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
/* Plain labeled checkboxes for boolean filters (owner: a checkbox, not a button). */
body.stagelight .index-check {
  display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 4px;
  color: var(--sl-muted); font-size: 13.5px; font-weight: 540; cursor: pointer; user-select: none;
}
body.stagelight .index-check:hover { color: var(--sl-ink); }
body.stagelight .index-check input {
  appearance: none; -webkit-appearance: none; width: 17px; height: 17px; margin: 0;
  border: 1px solid var(--sl-line-strong); border-radius: 5px; background: rgba(255,255,255,0.04);
  display: inline-grid; place-items: center; cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
body.stagelight .index-check input:checked { background: #d4514f; border-color: #d4514f; }
body.stagelight .index-check input:checked::after {
  content: ""; width: 9px; height: 5px; margin-top: -2px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg);
}
body.stagelight .index-check input:focus-visible { outline: 2px solid var(--sl-muted); outline-offset: 2px; }
body.stagelight .index-check:has(input:checked) { color: var(--sl-ink); }
body.stagelight .index-toggle:hover { color: var(--sl-ink); background: rgba(255,255,255,0.08); }
body.stagelight .index-toggle[aria-pressed="true"] { background: var(--sl-ink); color: #111; border-color: var(--sl-ink); }
body.stagelight .index-select {
  display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 8px 0 15px;
  border-radius: var(--sl-r-pill); border: 1px solid var(--sl-line-strong); background: rgba(255,255,255,0.04);
}
body.stagelight .index-select span { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sl-faint); }
body.stagelight .index-select select {
  background: transparent; border: 0; outline: none; color: var(--sl-ink);
  font-family: var(--sl-display); font-size: 14px; font-weight: 560; cursor: pointer; padding: 0 6px 0 0;
}
body.stagelight .index-select select option { color: #111; }
/* One shared column template drives BOTH the header row and every song row.
   Each .song-row is its OWN grid, so an auto status track used to size to each
   row's content independently — columns never lined up. Fixed tracks make every
   independent row resolve identical column edges. Title flexes; type/status/plays
   are fixed; plays right-aligned. Owner QA: columns did not align across rows. */
/* Six shared columns: TITLE | TYPE | STATUS | RARITY | RESOURCES | PLAYS.
   STATUS (board state) and RARITY (frequency tier) are now separate axes per owner
   feedback. RESOURCES is a reserved empty track in the row anchor that .sr-resources
   overlays, so the whole row stays one clickable <a> while the chips are real siblings. */
body.stagelight .songs-main { --sr-cols: minmax(0, 1fr) 82px 128px 148px 138px 84px; --sr-gap: 16px; }
/* overflow-anchor: none stops the browser re-anchoring the scroll when rows above
   the fold are shown/hidden by a filter — the JS re-pins the topmost visible row
   itself, and browser anchoring only fights that. */
body.stagelight .song-list { display: grid; gap: 1px; overflow-anchor: none; }
/* Column-header row — mono/uppercase label idiom, sticky just under the sticky
   search bar (search sticks at top:78 and is ~48px tall, so ~128px lands it flush
   below). z-index sits under the search bar but over the scrolling rows. */
body.stagelight .song-index-head {
  display: grid; grid-template-columns: var(--sr-cols); gap: var(--sr-gap);
  align-items: center; padding: 10px 10px; margin-top: 6px;
  position: sticky; top: 128px; z-index: 2;
  transition: top 0.28s ease;
  background: color-mix(in srgb, var(--sl-glass) 92%, #000);
  border-bottom: 1px solid var(--sl-line);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
/* When the header slides away on scroll-down, the sticky toolbars follow it up
   instead of leaving a dead gap where the menu was. */
body.stagelight.nav-hidden .song-search { top: 12px; }
body.stagelight.nav-hidden .song-index-head { top: 62px; }
/* --- Sticky-stack repair (Song Index + Lyrics & Chords hub) ---
   The blanket body.stagelight main > star:not(.hero-echo):not(.bento-panel):not(.home-nav)
   rule (position:relative; specificity ~0,4,2) out-specifies the sticky defs above
   (~0,2,1) and flattens the search bar, toolbar and column head to position:relative.
   Their 78/128px top offsets then apply as RELATIVE displacement, pushing each element
   out of normal flow — the search bar overlaps the toolbar, the column head ghosts on top
   of a song row ~200px down, and a dead gap opens under the title. Re-assert sticky with a
   matching-specificity explicit selector (both pages carry main.archive-main.songs-main;
   ties the blanket, wins by source order). Deliberately NOT fixed by adding a :not() to the
   blanket — that raises the blanket's own specificity and risks tipping homepage
   positioned-child races (documented hero trap). */
body.stagelight main.archive-main.songs-main > .song-search,
body.stagelight main.archive-main.songs-main > .song-index-head,
body.stagelight main.archive-main.songs-main > .lyric-head { position: sticky; }
body.stagelight .sih-col { font-family: var(--sl-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sl-faint); }
/* Sortable column headers — buttons styled to read as the same mono/uppercase label
   idiom as the static .sih-col, with an arrow glyph that lights up on the active sort.
   Mirrors the Lyrics & Chords hub's .lh-sort so the two index pages feel identical. */
body.stagelight button.sih-sort { background: transparent; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 0; text-align: left; transition: color 0.15s ease; }
body.stagelight button.sih-sort:hover { color: var(--sl-muted); }
body.stagelight button.sih-sort[aria-sort="ascending"], body.stagelight button.sih-sort[aria-sort="descending"] { color: var(--sl-ink); }
body.stagelight .sih-arrow { font-size: 10px; color: var(--sl-line-strong); }
body.stagelight button.sih-sort[aria-sort="ascending"] .sih-arrow, body.stagelight button.sih-sort[aria-sort="descending"] .sih-arrow { color: rgba(212,81,79,0.95); }
body.stagelight .sih-plays { text-align: right; justify-self: end; }
body.stagelight button.sih-plays { justify-content: flex-end; }
/* The wrapper's display:grid outweighs the UA [hidden] rule, so filtered/searched
   rows need an explicit, equal-specificity hide. The wrap (not the inner row) is
   what the search script toggles, so its resource links hide with it. */
body.stagelight .song-row-wrap[hidden], body.stagelight .lyric-row-wrap[hidden] { display: none; }
/* Song Index row = a wrapper grid so the resource links can be REAL sibling <a>
   elements (nested anchors inside the row link would be invalid HTML). The wrap
   shares the row's --sr-cols template; the row anchor spans every column and holds
   an empty RESOURCES track, and .sr-resources overlays that same track on top. */
/* Owner QA: the LINKS chips must share the header's left edge. The header carries
   10px horizontal padding; the wrap now carries the SAME 10px so both grids resolve
   the flexible TITLE track identically and every column edge lines up. The row's own
   horizontal padding is dropped (moved to the wrap) so its cells sit flush on the
   shared tracks — .sr-resources (a wrap child) then aligns with the LINKS header. */
body.stagelight .song-row-wrap {
  position: relative; display: grid; grid-template-columns: var(--sr-cols);
  align-items: center; gap: var(--sr-gap); padding: 0 10px; border-bottom: 1px solid var(--sl-line-faint);
  /* clear the sticky search+head stack (~172px normal, ~106px nav-hidden) for any
     anchor/scrollIntoView landing so a targeted row never hides behind the stack */
  scroll-margin-top: 176px;
}
body.stagelight .song-row {
  grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: var(--sr-cols);
  align-items: center; gap: var(--sr-gap); padding: 14px 0; color: var(--sl-ink);
}
body.stagelight .sr-plays { grid-column: 6; }
body.stagelight .song-row-wrap:hover { background: rgba(255,255,255,0.03); }
/* Resource chips: quiet mono pills sitting in the reserved RESOURCES column (5),
   layered above the row anchor (z-index) so each stays independently clickable + tabbable. */
body.stagelight .sr-resources {
  grid-column: 5; grid-row: 1; z-index: 1; position: relative;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-self: start;
}
body.stagelight .sr-chip {
  font-family: var(--sl-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sl-muted); padding: 3px 8px; border-radius: var(--sl-r-pill);
  border: 1px solid var(--sl-line-strong); white-space: nowrap; transition: color 0.15s ease, border-color 0.15s ease;
}
body.stagelight .sr-chip:hover { color: var(--sl-ink); border-color: var(--sl-muted); }
body.stagelight .sr-chip:focus-visible { outline: 2px solid var(--sl-muted); outline-offset: 2px; }
body.stagelight .sr-title { font-family: var(--sl-display); font-size: 15px; font-weight: 560; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.stagelight .sr-type { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sl-faint); }
/* STATUS column — board state pill. In Rotation carries the stage-red accent; Shelf
   and Purgatory are deliberately muted so a parked song never reads as active. */
body.stagelight .sr-status-cell { display: flex; align-items: center; }
body.stagelight .sr-status { font-family: var(--sl-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--sl-r-pill); border: 1px solid var(--sl-line-strong); white-space: nowrap; }
body.stagelight .sr-status-rotation { color: var(--sl-ink); border-color: rgba(212,81,79,0.5); }
body.stagelight .sr-status-shelf { color: var(--sl-muted); background: rgba(255,255,255,0.04); }
body.stagelight .sr-status-purgatory { color: var(--sl-faint); background: rgba(255,255,255,0.02); border-style: dashed; }
/* RARITY column — frequency tier symbol + label, shown only for In Rotation songs;
   Shelf/Purgatory show a muted dash (no frequency tier on a parked song). */
body.stagelight .sr-rarity { display: flex; align-items: center; gap: 6px; font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sl-muted); }
body.stagelight .sr-rarity .rarity-symbol { min-width: 0; margin-right: 0; flex: none; }
body.stagelight .sr-none { color: var(--sl-faint); }
body.stagelight .sr-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
body.stagelight .sr-title .sr-bestguess { margin-left: 9px; font-family: var(--sl-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 7px; border-radius: var(--sl-r-pill); border: 1px solid var(--sl-line-strong); color: var(--sl-muted); vertical-align: middle; }
body.stagelight .sr-plays { text-align: right; font-family: var(--sl-mono); font-size: 15px; color: var(--sl-ink); }
body.stagelight .sr-plays small { display: block; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sl-faint); margin-top: 2px; }
body.stagelight .song-empty { margin-top: 28px; text-align: center; color: var(--sl-faint); font-size: 15px; }
/* Tablet (641–950px): drop the TYPE and RESOURCES columns so the seven-column grid
   never overflows. Collapses to TITLE | STATUS | RARITY | PLAYS — both header and
   rows share the reduced --sr-cols, and plays re-anchors to the 4th track.
   Resources fold away (the /song/ pages carry every link anyway). */
@media (min-width: 641px) and (max-width: 950px) {
  body.stagelight .songs-main { --sr-cols: minmax(0, 1fr) 132px 148px 84px; }
  body.stagelight .sr-type, body.stagelight .sih-type,
  body.stagelight .sr-resources, body.stagelight .sih-more { display: none; }
  body.stagelight .sr-plays { grid-column: 4; }
}
/* Mobile (<=640px): collapse to TITLE + PLAYS, with STATUS riding inline under each
   title. Header collapses to TITLE | PLAYS. Tighter paddings; sticky header stays. */
@media (max-width: 640px) {
  body.stagelight .songs-main { --sr-cols: minmax(0, 1fr) 76px; --sr-gap: 12px; }
  body.stagelight .song-row-wrap { padding: 0 4px; }
  body.stagelight .song-row { grid-auto-rows: auto; row-gap: 4px; padding: 12px 0; }
  body.stagelight .sr-type, body.stagelight .sr-rarity { display: none; }
  body.stagelight .sr-status-cell { grid-column: 1; grid-row: 2; }
  body.stagelight .sr-plays { grid-column: 2; grid-row: 1; }
  /* Resource column is desktop-only — the /song/ pages already link every resource,
     so mobile drops the chips to keep the two-column row readable. */
  body.stagelight .sr-resources { display: none; }
  body.stagelight .song-index-head { padding: 9px 4px; }
  body.stagelight .song-index-head .sih-col:nth-child(2),
  body.stagelight .song-index-head .sih-col:nth-child(3),
  body.stagelight .song-index-head .sih-col:nth-child(4),
  body.stagelight .song-index-head .sih-col:nth-child(5) { display: none; }
  body.stagelight .song-count { display: none; }
}

/* Lyrics & Chords hub — SONG | ARTIST | ALBUM | LYRICS | TAB | PLAYS. One shared
   column template drives BOTH the sticky header and every row so columns line up at
   every width (owner QA: header/rows must share one grid). Mirrors .song-row-wrap:
   each row is a wrapper grid, the row anchor (the LYRICS link) spans all six tracks,
   and the TAB link overlays the reserved 5th track as a real sibling <a>. */
body.stagelight .archive-eyebrow { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sl-faint); margin: 4px 0 12px; }
body.stagelight .lyrics-list, body.stagelight .lyric-head { --lr-cols: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) 128px 84px 100px; }
body.stagelight .song-list.lyrics-list { display: grid; gap: 1px; }
/* Column-header row — mono/uppercase labels; sortable columns are buttons. Sticky
   just under the sticky search bar, matching the Song Index head. */
body.stagelight .lyric-head {
  display: grid; grid-template-columns: var(--lr-cols); gap: 16px;
  align-items: center; padding: 10px 12px; margin-top: 6px;
  position: sticky; top: 128px; z-index: 2; transition: top 0.28s ease;
  background: color-mix(in srgb, var(--sl-glass) 92%, #000);
  border-bottom: 1px solid var(--sl-line);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
body.stagelight.nav-hidden .lyric-head { top: 62px; }
body.stagelight .lh-col { font-family: var(--sl-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sl-faint); }
body.stagelight button.lh-sort { background: transparent; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 0; text-align: left; transition: color 0.15s ease; }
body.stagelight button.lh-sort:hover { color: var(--sl-muted); }
body.stagelight button.lh-sort[aria-sort="ascending"], body.stagelight button.lh-sort[aria-sort="descending"] { color: var(--sl-ink); }
body.stagelight .lh-arrow { font-size: 10px; color: var(--sl-line-strong); }
body.stagelight button.lh-sort[aria-sort="ascending"] .lh-arrow, body.stagelight button.lh-sort[aria-sort="descending"] .lh-arrow { color: rgba(212,81,79,0.95); }
body.stagelight .lh-plays { text-align: right; justify-self: end; }
body.stagelight button.lh-plays { justify-content: flex-end; }
/* The wrapper grid outweighs the UA [hidden] rule, so filtered rows need an explicit,
   equal-specificity hide (declared with .song-row-wrap above; the wrap is what the
   search script toggles, so its Tab link hides with it). */
body.stagelight .lyric-row-wrap {
  position: relative; display: grid; grid-template-columns: var(--lr-cols);
  align-items: center; gap: 16px; border-bottom: 1px solid var(--sl-line-faint);
}
body.stagelight .lyric-row {
  grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: var(--lr-cols);
  align-items: center; gap: 16px; padding: 15px 12px; color: var(--sl-ink); text-decoration: none;
}
/* Plays skips the reserved TAB track (5) so the Tab link can overlay it. */
body.stagelight .lr-plays { grid-column: 6; }
body.stagelight .lyric-row-wrap:hover { background: rgba(255,255,255,0.03); }
/* TAB overlay — real sibling <a> in track 5, layered above the row anchor so it stays
   independently clickable + tabbable. Empty rows show a muted dash (no external tab
   source exists in the data, so absent tabs are never a guessed link). */
body.stagelight .lr-tab {
  grid-column: 5; grid-row: 1; z-index: 1; position: relative; justify-self: start;
  font-family: var(--sl-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 12px; border-radius: var(--sl-r-pill); white-space: nowrap; text-decoration: none;
}
body.stagelight a.lr-tab { border: 1px solid rgba(212,81,79,0.5); color: var(--sl-ink); transition: background 0.15s ease; }
body.stagelight a.lr-tab:hover { background: rgba(212,81,79,0.16); }
body.stagelight a.lr-tab:focus-visible { outline: 2px solid var(--sl-muted); outline-offset: 2px; }
body.stagelight .lr-tab-empty { color: var(--sl-faint); border: 0; padding-left: 2px; }
/* EC chords fallback: quiet tertiary, no coral (hosted Tab keeps the accent). */
body.stagelight a.lr-tab-ec { border-color: var(--sl-line-strong); color: var(--sl-muted); }
body.stagelight a.lr-tab-ec:hover { background: rgba(255,255,255,0.06); color: var(--sl-ink); }
body.stagelight .lr-title { font-family: var(--sl-display); font-size: 15px; font-weight: 560; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.stagelight .lr-artist { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--sl-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.stagelight .lr-sub { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sl-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.stagelight .lr-words { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--sl-muted); white-space: nowrap; }
body.stagelight .lr-ext-arrow { color: var(--sl-faint); }
body.stagelight .lr-none { color: var(--sl-faint); }
body.stagelight .lr-plays { text-align: right; justify-self: end; font-family: var(--sl-mono); font-size: 15px; color: var(--sl-ink); font-variant-numeric: tabular-nums; }
body.stagelight .lr-plays small { display: block; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sl-faint); margin-top: 2px; }
/* Tablet (561–900px): drop ARTIST + ALBUM, leaving SONG | LYRICS | TAB | PLAYS. */
@media (min-width: 561px) and (max-width: 900px) {
  body.stagelight .lyrics-list, body.stagelight .lyric-head { --lr-cols: minmax(0, 1fr) 120px 84px 96px; }
  body.stagelight .lr-artist, body.stagelight .lr-sub,
  body.stagelight .lh-artist, body.stagelight .lh-album { display: none; }
  body.stagelight .lr-tab { grid-column: 3; }
  body.stagelight .lr-plays { grid-column: 4; }
}
/* Mobile (<=560px): collapse to the essentials — SONG | LYRICS | PLAYS. */
@media (max-width: 560px) {
  body.stagelight .lyrics-list, body.stagelight .lyric-head { --lr-cols: minmax(0, 1fr) 90px 68px; }
  body.stagelight .lr-artist, body.stagelight .lr-sub, body.stagelight .lr-tab,
  body.stagelight .lh-artist, body.stagelight .lh-album, body.stagelight .lh-tab { display: none; }
  body.stagelight .lr-words { grid-column: 2; }
  body.stagelight .lr-plays { grid-column: 3; }
}

body.stagelight .song-eyebrow { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sl-faint); margin-bottom: 10px; }
body.stagelight .song-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 22px 0 34px; }
body.stagelight .song-stat { padding: 18px 20px; border-radius: var(--sl-r-md); background: rgba(255,255,255,0.03); border: 1px solid var(--sl-line); }
body.stagelight .song-stat strong { display: block; font-family: var(--sl-mono); font-size: 26px; font-weight: 640; color: var(--sl-ink); line-height: 1; }
body.stagelight .song-stat span { display: block; font-size: 12px; letter-spacing: 0.04em; color: var(--sl-faint); margin-top: 9px; }
body.stagelight .song-stat small { display: block; font-size: 12px; color: var(--sl-muted); margin-top: 4px; }
body.stagelight .song-rarity { display: flex; align-items: center; gap: 9px; font-family: var(--sl-display); font-size: 17px; font-weight: 620; letter-spacing: -0.01em; }
body.stagelight .song-rarity .rarity-symbol { flex: none; }
body.stagelight .song-rarity .rarity-symbol svg { width: 20px; height: 20px; }
body.stagelight .song-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px 28px; margin: 0 0 36px; padding-bottom: 30px; border-bottom: 1px solid var(--sl-line); }
body.stagelight .song-facts dt { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sl-faint); }
body.stagelight .song-facts dd { font-size: 15px; color: var(--sl-ink); margin: 6px 0 0; }
body.stagelight .song-albums { margin-bottom: 8px; }
body.stagelight .song-albums h2 { font-family: var(--sl-display); font-size: 21px; font-weight: 640; letter-spacing: -0.01em; margin-bottom: 16px; }
body.stagelight .song-album-chips { display: flex; flex-wrap: wrap; gap: 10px; }
body.stagelight .song-album-chips a {
  display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 16px; border-radius: var(--sl-r-pill);
  background: var(--sl-glass); border: 1px solid var(--sl-line); color: var(--sl-ink);
  font-family: var(--sl-display); font-size: 15px; font-weight: 560; transition: border-color 0.16s ease, transform 0.16s ease;
}
body.stagelight .song-album-chips a:hover { border-color: var(--sl-line-strong); transform: translateY(-2px); }
body.stagelight .song-album-chips a small { font-family: var(--sl-mono); font-size: 12px; color: var(--sl-faint); }
body.stagelight .song-travels { margin: 34px 0 8px; }
body.stagelight .song-travels h2 { font-family: var(--sl-display); font-size: 21px; font-weight: 640; letter-spacing: -0.01em; margin-bottom: 4px; }
body.stagelight .tw-lead { margin: 0 0 16px; color: var(--sl-muted); font-size: 14.5px; line-height: 1.5; }
body.stagelight .tw-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
body.stagelight .tw-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap;
  padding: 12px 16px; border-radius: var(--sl-r-md); background: var(--sl-glass); border: 1px solid var(--sl-line);
}
body.stagelight .tw-pair { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-family: var(--sl-display); font-size: 15.5px; font-weight: 560; }
body.stagelight .tw-this { color: var(--sl-muted); }
body.stagelight .tw-arrow { color: #e0be7a; font-size: 15px; }
body.stagelight .tw-partner a { color: var(--sl-ink); border-bottom: 1px solid transparent; }
body.stagelight .tw-partner a:hover { border-bottom-color: rgba(224,190,122,0.6); }
body.stagelight .tw-tag { font-family: var(--sl-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 7px; border-radius: var(--sl-r-pill); border: 1px solid var(--sl-line-strong); align-self: center; }
body.stagelight .tw-tag-recent { color: #e0be7a; border-color: rgba(224,190,122,0.45); background: rgba(224,190,122,0.08); }
body.stagelight .tw-tag-alltime { color: var(--sl-faint); }
body.stagelight .tw-stat { font-family: var(--sl-mono); font-size: 12.5px; color: var(--sl-muted); text-align: right; }
body.stagelight .tw-stat b { color: #e0be7a; font-weight: 600; }
body.stagelight .tw-era { display: block; font-size: 11px; color: var(--sl-faint); margin-top: 2px; }
body.stagelight .song-history { margin: 40px 0 8px; }
body.stagelight .song-history-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--sl-line); }
body.stagelight .song-history-head h2 { font-family: var(--sl-display); font-size: 21px; font-weight: 640; letter-spacing: -0.01em; }
body.stagelight .song-history-head span { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sl-faint); white-space: nowrap; }
body.stagelight .perf-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; }
/* Row grid: DATE | VENUE | LOCATION | LISTEN. Static rows share the same template
   (empty last track) so nothing shifts when a show has no recording. */
body.stagelight .perf > a, body.stagelight .perf > .perf-static {
  display: grid; grid-template-columns: 150px minmax(0, 1fr) auto 84px; align-items: baseline; gap: 6px 16px;
  padding: 12px 8px; color: var(--sl-ink); border-bottom: 1px solid var(--sl-line-faint);
}
body.stagelight .perf > a:hover { background: rgba(255,255,255,0.03); }
body.stagelight .perf-date { grid-column: 1; grid-row: 1; font-family: var(--sl-mono); font-size: 13.5px; color: var(--sl-muted); }
body.stagelight .perf-venue { grid-column: 2; grid-row: 1; font-size: 15px; font-weight: 520; }
body.stagelight .perf-loc { grid-column: 3; grid-row: 1; font-family: var(--sl-mono); font-size: 12px; color: var(--sl-faint); text-align: right; }
body.stagelight .perf-tags { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
body.stagelight .perf-tag { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sl-muted); border: 1px solid var(--sl-line); border-radius: var(--sl-r-pill); padding: 2px 8px; }
body.stagelight .perf-listen { grid-column: 4; grid-row: 1; align-self: center; text-align: right; font-family: var(--sl-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sl-muted); white-space: nowrap; }
body.stagelight .perf > a:hover .perf-listen { color: var(--sl-ink); }
body.stagelight .perf-more { margin-top: 16px; font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.03em; color: var(--sl-faint); }
body.stagelight .perf-more a { color: var(--sl-muted); text-decoration: underline; text-underline-offset: 2px; }
body.stagelight .perf-more a:hover { color: var(--sl-ink); }
@media (max-width: 640px) {
  body.stagelight .perf > a, body.stagelight .perf > .perf-static { grid-template-columns: minmax(0, 1fr) 72px; gap: 2px 12px; }
  body.stagelight .perf-date { grid-column: 1 / -1; grid-row: 1; }
  body.stagelight .perf-venue { grid-column: 1; grid-row: 2; }
  body.stagelight .perf-loc { grid-column: 1; grid-row: 3; text-align: left; }
  body.stagelight .perf-listen { grid-column: 2; grid-row: 2; }
  body.stagelight .perf-tags { grid-column: 1 / -1; }
}
/* "Learn It" resource row — guitarist-facing, styled to match .song-album-chips */
body.stagelight .song-learn { margin: 0 0 30px; }
body.stagelight .song-learn-eyebrow { font-family: var(--sl-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sl-faint); margin: 0 0 14px; }
body.stagelight .song-learn-chips { display: flex; flex-wrap: wrap; gap: 10px; }
body.stagelight .song-learn-chips a {
  display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 16px; border-radius: var(--sl-r-pill);
  background: var(--sl-glass); border: 1px solid var(--sl-line); box-shadow: var(--sl-shadow-1); color: var(--sl-ink);
  font-family: var(--sl-display); font-size: 15px; font-weight: 560; transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
body.stagelight .song-learn-chips a:hover { border-color: var(--sl-line-strong); transform: translateY(-2px); box-shadow: var(--sl-shadow-2); }
body.stagelight .song-learn-chips a small { font-family: var(--sl-mono); font-size: 12px; color: var(--sl-faint); }
body.stagelight .song-learn-chips .learn-go { font-family: var(--sl-mono); font-size: 12px; color: var(--sl-faint); align-self: center; }
body.stagelight .song-learn-chips .learn-ext:hover .learn-go { color: var(--sl-ink); }
/* Lite YouTube embed — click-to-play facade shared by Song Origins + song WATCH */
body.stagelight .yt-lite {
  display: block; position: relative; width: 100%; max-width: 640px; aspect-ratio: 16 / 9;
  border-radius: var(--sl-r); overflow: hidden; background: #000;
  border: 1px solid var(--sl-line); box-shadow: var(--sl-shadow-1);
}
body.stagelight .yt-lite-btn {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%; padding: 0;
  margin: 0; border: 0; cursor: pointer; background: #000; overflow: hidden;
}
body.stagelight .yt-lite-thumb {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.3s ease, opacity 0.3s ease; opacity: 0.92;
}
body.stagelight .yt-lite-btn:hover .yt-lite-thumb, body.stagelight .yt-lite-btn:focus-visible .yt-lite-thumb { transform: scale(1.03); opacity: 1; }
body.stagelight .yt-lite-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.5)); transition: transform 0.16s ease;
}
body.stagelight .yt-lite-play .yt-lite-play-bg { fill: #212121; opacity: 0.86; transition: fill 0.16s ease, opacity 0.16s ease; }
body.stagelight .yt-lite-btn:hover .yt-lite-play, body.stagelight .yt-lite-btn:focus-visible .yt-lite-play { transform: translate(-50%, -50%) scale(1.06); }
body.stagelight .yt-lite-btn:hover .yt-lite-play-bg, body.stagelight .yt-lite-btn:focus-visible .yt-lite-play-bg { fill: #ff0000; opacity: 1; }
body.stagelight .yt-lite-btn:focus-visible { outline: 2px solid var(--sl-ink); outline-offset: -3px; }
body.stagelight .yt-lite.is-playing { border-color: var(--sl-line-strong); }
body.stagelight .yt-lite-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
body.stagelight .yt-lite noscript a { position: absolute; inset: auto 0 0 0; padding: 8px 12px; font-family: var(--sl-mono); font-size: 12px; color: var(--sl-ink); background: rgba(0,0,0,0.6); }
/* origin body: keep an inline embed on its own line with breathing room */
body.stagelight .origin-body .yt-lite { margin: 18px 0; }
/* WATCH section — one official video, mono eyebrow, between LEARN IT and Appears on */
body.stagelight .song-watch { margin: 0 0 30px; }
body.stagelight .song-watch-eyebrow { font-family: var(--sl-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sl-faint); margin: 0 0 14px; }
/* Relisten link on a performance row — compact, sits after the setlist.fm anchor */
/* "Best Guess" — Alex's verbatim lyric transcription + interpretation, editorial */
body.stagelight .song-bestguess { margin: 0 0 34px; }
body.stagelight .bg-eyebrow { font-family: var(--sl-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sl-faint); margin: 0 0 8px; }
body.stagelight .bg-byline { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--sl-muted); margin: 0 0 6px; }
body.stagelight .bg-note { font-size: 13.5px; line-height: 1.6; color: var(--sl-faint); margin: 0 0 16px; max-width: 62ch; }
body.stagelight .bg-card {
  padding: 34px 36px; border-radius: var(--sl-r);
  background: var(--sl-glass); border: 1px solid var(--sl-line); box-shadow: var(--sl-glass-shadow);
}
body.stagelight .bg-lyrics { font-family: "Geist", "Geist Fallback", system-ui, sans-serif; font-size: 17px; line-height: 1.7; color: var(--sl-ink); }
body.stagelight .bg-stanza { margin: 0 0 20px; }
body.stagelight .bg-stanza:last-child { margin-bottom: 0; }
body.stagelight .bg-notes { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--sl-line); }
body.stagelight .bg-notes-label { font-family: var(--sl-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sl-faint); margin: 0 0 14px; }
body.stagelight .bg-para { font-family: "Geist", "Geist Fallback", system-ui, sans-serif; font-size: 15px; line-height: 1.7; color: var(--sl-muted); margin: 0 0 14px; }
body.stagelight .bg-para:last-child { margin-bottom: 0; }
body.stagelight .bg-notes strong, body.stagelight .bg-lyrics strong { color: var(--sl-ink); font-weight: 640; }
body.stagelight .bg-source { margin: 16px 0 0; font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.03em; color: var(--sl-faint); }
body.stagelight .bg-source a { color: var(--sl-muted); text-decoration: underline; text-underline-offset: 2px; }
body.stagelight .bg-source a:hover { color: var(--sl-ink); }
@media (max-width: 640px) { body.stagelight .bg-card { padding: 24px 22px; } }
/* 404 — lost at the show */
body.stagelight .nf-main { max-width: 620px; text-align: center; padding: 40px 0 60px; }
body.stagelight .nf-eyebrow { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sl-faint); margin-bottom: 14px; }
body.stagelight .nf-title { font-family: var(--sl-display); font-size: clamp(30px, 5vw, 44px); font-weight: 660; letter-spacing: -0.02em; margin-bottom: 30px; }
body.stagelight .nf-gif { margin: 0 auto 26px; max-width: 480px; }
body.stagelight .nf-gif img { width: 100%; height: auto; border-radius: var(--sl-r, 18px); border: 1px solid var(--sl-line); box-shadow: 0 24px 60px rgba(0,0,0,0.55); }
body.stagelight .nf-gif figcaption { margin-top: 12px; font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sl-faint); }
body.stagelight .nf-copy { font-size: 15px; line-height: 1.65; color: var(--sl-muted); margin: 0 auto 26px; max-width: 460px; }
body.stagelight .nf-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
body.stagelight .nf-links a { padding: 10px 18px; border-radius: var(--sl-r-pill); background: var(--sl-glass); border: 1px solid var(--sl-line); color: var(--sl-ink); font-size: 13.5px; font-weight: 540; transition: border-color 0.16s ease, transform 0.16s ease; }
body.stagelight .nf-links a:hover { border-color: var(--sl-line-strong); transform: translateY(-2px); }

body.stagelight .song-back { margin-top: 34px; }
body.stagelight .song-back a { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sl-muted); }
body.stagelight .song-back a:hover { color: var(--sl-ink); }

/* current rumors cards */
body.stagelight .current-rumors { margin: 4px 0 44px; }
body.stagelight .rumor-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
body.stagelight .rumor-heading h2 { font-family: var(--sl-display); font-size: 26px; font-weight: 640; letter-spacing: -0.01em; color: var(--sl-ink); }
body.stagelight .rumor-heading span { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sl-faint); }
body.stagelight .rumor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
body.stagelight .rumor-card {
  position: relative; padding: 24px 26px; border-radius: var(--sl-r);
  background: var(--sl-glass); border: 1px solid var(--sl-line); box-shadow: var(--sl-glass-shadow);
}
body.stagelight .rumor-slot { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sl-faint); margin: 0; }
body.stagelight .rumor-place { font-family: var(--sl-display); font-size: 26px; font-weight: 660; letter-spacing: -0.015em; color: var(--sl-ink); margin: 8px 0 0; }
body.stagelight .rumor-note { font-size: 15px; line-height: 1.6; color: var(--sl-muted); margin: 14px 0 0; }
body.stagelight .rumor-flag { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sl-ink); border: 1px solid rgba(212,81,79,0.5); border-radius: var(--sl-r-pill); padding: 6px 14px; }
body.stagelight .rumor-flag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 8px rgba(212,81,79,0.9); }
body.stagelight .rumor-foot { margin: 22px 0 0; font-size: 13.5px; color: var(--sl-faint); }
body.stagelight .rumor-foot a { color: var(--sl-ink); text-decoration: underline; text-underline-offset: 3px; }

/* shelf info page */
body.stagelight .shelf-current-update h2, body.stagelight .legacy-shelf-notes h2 { font-family: var(--sl-display); color: var(--sl-ink); font-size: 26px; margin: 30px 0 16px; }
body.stagelight .shelf-addition-group { margin-bottom: 20px; }
body.stagelight .shelf-addition-group h3 { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sl-faint); margin-bottom: 10px; }
body.stagelight .shelf-addition-group ul { padding-left: 20px; list-style: disc; color: var(--sl-muted); }
body.stagelight .shelf-addition-group li { margin-bottom: 5px; }
body.stagelight .legacy-shelf-notes { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--sl-line); }

/* origins index hero + grid */
body.stagelight .origin-hero { display: flex; align-items: center; gap: 26px; margin: 40px 0 44px; }
body.stagelight .origin-fish { width: 110px; height: auto; flex: none; opacity: 0.92; }
body.stagelight .origin-hero h1 { font-family: var(--sl-display); font-weight: 660; font-size: clamp(30px, 4.4vw, 46px); letter-spacing: -0.02em; color: var(--sl-ink); margin: 0; }
body.stagelight .origin-hero span { display: block; margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--sl-muted); max-width: 640px; }
body.stagelight .origin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
body.stagelight .origin-card {
  display: block; padding: 0; overflow: hidden; border-radius: var(--sl-r); color: var(--sl-ink);
  background: var(--sl-glass); border: 1px solid var(--sl-line); box-shadow: var(--sl-glass-shadow);
  transition: transform 0.18s ease, border-color 0.18s ease;
}
body.stagelight .origin-card:hover { transform: translateY(-3px); border-color: var(--sl-line-strong); }
body.stagelight .origin-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 0; border-radius: 0; margin: 0; }
body.stagelight .origin-card span { display: block; font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sl-faint); padding: 16px 18px 0; }
body.stagelight .origin-card strong { display: block; font-family: var(--sl-display); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; padding: 4px 18px 4px; }
body.stagelight .origin-card-meta { display: block; font-family: var(--sl-mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--sl-faint); padding: 0 18px 18px; font-variant-numeric: tabular-nums; }
body.stagelight .origin-card:not(:has(strong + .origin-card-meta)) strong { padding-bottom: 18px; }
body.stagelight .origin-card-meta .ocm-sep { margin: 0 7px; opacity: 0.6; }

/* single origin page — designed article: hero, computed stat strip, verbatim story, crosslinks */
body.stagelight .origin-article { max-width: 860px; }
body.stagelight .origin-article-head { margin-bottom: 30px; }
body.stagelight .origin-eyebrow { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sl-faint); margin: 4px 0 12px; }
body.stagelight .origin-article-head h1 { font-family: var(--sl-display); font-weight: 660; font-size: clamp(32px, 5vw, 52px); letter-spacing: -0.02em; color: var(--sl-ink); margin: 0; line-height: 1.02; }
body.stagelight .origin-credit { font-family: var(--sl-mono); font-size: 13px; letter-spacing: 0.02em; color: var(--sl-muted); margin: 12px 0 0; }
body.stagelight .origin-credit-source { color: var(--sl-faint); margin-top: 4px; }
body.stagelight .origin-hero-media { margin: 0 0 34px; }
body.stagelight .origin-hero-media img { width: 100%; height: auto; display: block; border-radius: var(--sl-r-lg); border: 1px solid var(--sl-line); box-shadow: var(--sl-shadow-2); }
body.stagelight .origin-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 0 0 38px; }
body.stagelight .origin-strip .song-stat { font-variant-numeric: tabular-nums; }
body.stagelight .origin-strip .song-stat-date { font-family: var(--sl-mono); font-size: 17px; font-weight: 600; letter-spacing: -0.005em; line-height: 1.15; }
body.stagelight .origin-strip .song-stat-album { font-family: var(--sl-display); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; }
body.stagelight .origin-source { margin-top: 26px; }
body.stagelight .origin-source a { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sl-faint); }
body.stagelight .origin-source a:hover { color: var(--sl-ink); }
body.stagelight .origin-stats { font-family: var(--sl-mono); font-size: 13.5px; line-height: 1.9; color: var(--sl-ink); background: rgba(255,255,255,0.03); border: 1px solid var(--sl-line); border-radius: var(--sl-r-md); padding: 16px 18px; }
/* "By the Numbers" — the parsed FB footer, re-laid-out as a designed data panel.
   Sits after the verbatim story, before the crosslink row. */
body.stagelight .origin-numbers { margin: 40px 0 0; padding-top: 34px; border-top: 1px solid var(--sl-line); }
body.stagelight .origin-numbers-head { margin: 0 0 20px; }
body.stagelight .origin-numbers .on-eyebrow { font-family: var(--sl-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sl-faint); margin: 0 0 6px; }
body.stagelight .origin-numbers .on-sub { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--sl-muted); margin: 0; }
body.stagelight .origin-stat-grid { margin: 0 0 20px; border: 1px solid var(--sl-line); border-radius: var(--sl-r-md); background: rgba(255,255,255,0.03); overflow: hidden; }
body.stagelight .origin-stat-grid .on-row { display: grid; grid-template-columns: minmax(150px, 34%) 1fr; gap: 12px 20px; padding: 12px 18px; border-top: 1px solid var(--sl-line); }
body.stagelight .origin-stat-grid .on-row:first-child { border-top: 0; }
body.stagelight .origin-stat-grid dt { font-family: var(--sl-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sl-faint); align-self: baseline; }
body.stagelight .origin-stat-grid dd { margin: 0; font-family: var(--sl-display); font-size: 16px; font-weight: 560; color: var(--sl-ink); font-variant-numeric: tabular-nums; }
body.stagelight .origin-numbers-note { font-size: 13.5px; line-height: 1.65; color: var(--sl-muted); margin: 0 0 20px; max-width: 66ch; }
body.stagelight .origin-numbers-note a { color: var(--sl-ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--sl-line-strong); }
body.stagelight .origin-numbers-note a:hover { color: #fff; }
body.stagelight .origin-resource-chips { margin: 0 0 24px; }
body.stagelight .origin-picks-block { margin: 4px 0 0; }
body.stagelight .origin-picks-head { font-family: var(--sl-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sl-faint); margin: 0 0 12px; }
body.stagelight .origin-picks { list-style: none; margin: 0; padding: 0; }
body.stagelight .origin-pick { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; padding: 11px 0; border-top: 1px solid var(--sl-line); }
body.stagelight .origin-pick:first-child { border-top: 0; }
body.stagelight .origin-pick-venue { font-family: var(--sl-display); font-size: 15.5px; font-weight: 540; color: var(--sl-ink); flex: 1 1 60%; min-width: 0; }
body.stagelight .origin-pick-meta { display: inline-flex; align-items: baseline; gap: 14px; flex: 0 0 auto; }
body.stagelight .origin-pick-date { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--sl-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
body.stagelight .origin-pick-listen { font-family: var(--sl-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sl-ink); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
body.stagelight .origin-pick-listen:hover { color: #fff; }
@media (max-width: 620px) {
  body.stagelight .origin-stat-grid .on-row { grid-template-columns: 1fr; gap: 3px; }
}
body.stagelight .origin-crosslinks { display: flex; flex-wrap: wrap; gap: 12px; margin: 40px 0 0; padding-top: 30px; border-top: 1px solid var(--sl-line); }
body.stagelight .origin-xlink {
  display: inline-flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: var(--sl-r-pill);
  background: rgba(255,255,255,0.03); border: 1px solid var(--sl-line); color: var(--sl-ink);
  transition: transform 0.18s ease, border-color 0.18s ease;
}
body.stagelight .origin-xlink:hover { transform: translateY(-2px); border-color: var(--sl-line-strong); }
body.stagelight .origin-xlink .oxl-label { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
body.stagelight .origin-xlink .oxl-go { color: var(--sl-faint); transition: color 0.18s ease; }
body.stagelight .origin-xlink:hover .oxl-go { color: var(--sl-ink); }
body.stagelight .origin-xlink-ext { background: transparent; border-style: dashed; }
body.stagelight .origin-xlink-ext .oxl-label { color: var(--sl-muted); }
/* Curated origins: attributed-quote body, sources, and the enrichment mesh
   (filed-under cluster chips, related origins, FAQ). */
body.stagelight .origin-summary { font-size: 18px; line-height: 1.6; color: var(--sl-ink); margin: 0 0 1.3em; }
body.stagelight .origin-quote { margin: 0 0 1.5em; padding: 2px 0 2px 20px; border-left: 3px solid var(--sl-line-strong); }
body.stagelight .origin-quote p { font-size: 17px; line-height: 1.62; color: var(--sl-ink); margin: 0 0 10px; }
body.stagelight .origin-quote cite { display: block; font-family: var(--sl-mono); font-style: normal; font-size: 12.5px; letter-spacing: 0.02em; color: var(--sl-muted); }
body.stagelight .origin-quote cite a { color: var(--sl-ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--sl-line-strong); }
body.stagelight .origin-quote cite a:hover { color: #fff; }
body.stagelight .origin-note { font-size: 15px; line-height: 1.65; color: var(--sl-muted); margin: 0 0 1.2em; }
body.stagelight .origin-sources { margin: 1.4em 0 0; padding-top: 18px; border-top: 1px solid var(--sl-line); }
body.stagelight .origin-sources-label { font-family: var(--sl-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sl-faint); }
body.stagelight .origin-sources ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
body.stagelight .origin-sources li { font-size: 13.5px; line-height: 1.5; color: var(--sl-muted); }
body.stagelight .origin-sources a { color: var(--sl-ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--sl-line-strong); }
body.stagelight .origin-sources a:hover { color: #fff; }
body.stagelight .origin-clusters { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 34px 0 0; padding-top: 28px; border-top: 1px solid var(--sl-line); }
body.stagelight .origin-clusters-label { font-family: var(--sl-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sl-faint); margin-right: 4px; }
body.stagelight .origin-cluster-chip { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--sl-ink); padding: 6px 13px; border-radius: var(--sl-r-pill); background: rgba(255,255,255,0.03); border: 1px solid var(--sl-line); }
body.stagelight .origin-cluster-chip[data-cluster-type="writer"] { border-color: rgba(45,124,82,0.5); color: #8fd6ab; }
body.stagelight .origin-cluster-chip[data-cluster-type="album"] { border-color: rgba(40,110,158,0.5); color: #8ec2e6; }
body.stagelight .origin-cluster-chip[data-cluster-type="theme"] { border-color: rgba(212,81,79,0.5); color: #e79b9a; }
body.stagelight .origin-related { margin: 40px 0 0; padding-top: 30px; border-top: 1px solid var(--sl-line); }
body.stagelight .origin-related h2 { font-family: var(--sl-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sl-faint); margin: 0 0 16px; }
body.stagelight .origin-related-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
body.stagelight .origin-related-list a { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-radius: var(--sl-r-card, 12px); background: rgba(255,255,255,0.03); border: 1px solid var(--sl-line); color: var(--sl-ink); transition: transform 0.18s ease, border-color 0.18s ease; }
body.stagelight .origin-related-list a:hover { transform: translateY(-2px); border-color: var(--sl-line-strong); }
body.stagelight .origin-related-list .orl-title { font-family: var(--sl-display); font-size: 16px; font-weight: 560; }
body.stagelight .origin-related-list .orl-why { font-family: var(--sl-mono); font-size: 11px; letter-spacing: 0.02em; color: var(--sl-faint); margin-left: auto; text-align: right; }
body.stagelight .origin-related-list .orl-go { color: var(--sl-faint); }
body.stagelight .origin-related-list a:hover .orl-go { color: var(--sl-ink); }
body.stagelight .origin-faq { margin: 40px 0 0; padding-top: 30px; border-top: 1px solid var(--sl-line); }
body.stagelight .origin-faq h2 { font-family: var(--sl-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sl-faint); margin: 0 0 18px; }
body.stagelight .origin-faq dl { margin: 0; }
body.stagelight .origin-faq-item { padding: 0 0 16px; margin: 0 0 16px; border-bottom: 1px solid var(--sl-line); }
body.stagelight .origin-faq-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
body.stagelight .origin-faq dt { font-family: var(--sl-display); font-size: 16px; font-weight: 600; color: var(--sl-ink); margin: 0 0 7px; }
body.stagelight .origin-faq dd { font-size: 15px; line-height: 1.6; color: var(--sl-muted); margin: 0; }
body.stagelight .origin-hero-art img { max-width: 320px; border-radius: var(--sl-r-card, 12px); }
body.stagelight .origin-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--sl-line); }
body.stagelight .origin-nav a { display: flex; flex-direction: column; gap: 5px; font-size: 15px; color: var(--sl-muted); max-width: 48%; }
body.stagelight .origin-nav .origin-nav-next { text-align: right; margin-left: auto; align-items: flex-end; }
body.stagelight .origin-nav .onav-dir { font-family: var(--sl-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sl-faint); }
body.stagelight .origin-nav .onav-title { font-family: var(--sl-display); font-size: 16px; font-weight: 560; color: var(--sl-ink); }
body.stagelight .origin-nav a:hover .onav-title { color: #fff; }

/* tour-in-review generated page: setlist card grid */
body.stagelight .setlist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
body.stagelight .setlist-card {
  overflow: hidden; border-radius: var(--sl-r); color: var(--sl-ink);
  background: var(--sl-glass); border: 1px solid var(--sl-line); box-shadow: var(--sl-glass-shadow);
}
body.stagelight .setlist-card .setlist-image img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border: 0; }
body.stagelight .setlist-card .setlist-text, body.stagelight .setlist-card .setlist-copy { padding: 18px 20px; color: var(--sl-ink); }
body.stagelight .setlist-card h3, body.stagelight .setlist-feature h3 { font-family: var(--sl-display); color: var(--sl-ink); }
body.stagelight .setlist-card p { color: var(--sl-muted); font-size: 13.5px; }
body.stagelight .setlist-card a { color: var(--sl-ink); }

/* data-driven Tour In Review page */
body.stagelight .tour-in-review-main { width: min(1180px, calc(100% - 48px)); margin: 48px auto 0; }
body.stagelight .tour-in-review-main > * { margin-top: 48px; }
body.stagelight .tour-in-review-main > .tour-hero { margin-top: 0; }
body.stagelight .tour-hero { padding-bottom: 26px; border-bottom: 1px solid var(--sl-line); }
body.stagelight .tour-eyebrow { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sl-faint); margin: 4px 0 12px; }
body.stagelight .tour-hero h1 { font-family: var(--sl-display); font-weight: 660; font-size: clamp(32px, 5vw, 52px); letter-spacing: -0.02em; color: var(--sl-ink); margin: 0; }
body.stagelight .tour-range { font-family: var(--sl-display); font-size: 17px; color: var(--sl-muted); margin: 14px 0 0; }
body.stagelight .tour-countline { font-family: var(--sl-mono); font-size: 13.5px; letter-spacing: 0.05em; color: var(--sl-ink); margin: 8px 0 0; font-variant-numeric: tabular-nums; }
body.stagelight .tour-attr { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sl-faint); margin: 14px 0 0; }
body.stagelight .tour-attr a { color: var(--sl-muted); text-decoration: underline; text-underline-offset: 2px; }
body.stagelight .tour-attr a:hover { color: var(--sl-ink); }
body.stagelight .tour-h2 { font-family: var(--sl-display); font-size: 26px; font-weight: 640; letter-spacing: -0.01em; color: var(--sl-ink); margin: 0 0 18px; }
body.stagelight .tour-state-line { font-family: var(--sl-mono); font-size: 13.5px; line-height: 1.9; color: var(--sl-ink); font-variant-numeric: tabular-nums; }
body.stagelight .tour-toplist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 32px; }
body.stagelight .tour-toplist li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 4px; border-bottom: 1px solid var(--sl-line-faint); }
body.stagelight .tt-song { font-family: var(--sl-display); font-size: 15px; font-weight: 540; color: var(--sl-ink); }
body.stagelight .tt-count { font-family: var(--sl-mono); font-size: 15px; color: var(--sl-muted); font-variant-numeric: tabular-nums; }
body.stagelight .tour-ltp-list, body.stagelight .tour-ftp-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0 32px; }
body.stagelight .tour-ltp-list li, body.stagelight .tour-ftp-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 4px; border-bottom: 1px solid var(--sl-line-faint); }
body.stagelight .tl-song, body.stagelight .tf-song { font-family: var(--sl-display); font-size: 15px; font-weight: 540; color: var(--sl-ink); }
body.stagelight .tl-ltp { flex: none; font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sl-ink); border: 1px solid rgba(212,81,79,0.5); border-radius: var(--sl-r-pill); padding: 3px 10px; white-space: nowrap; }
body.stagelight .tf-meta { flex: none; font-family: var(--sl-mono); font-size: 12px; color: var(--sl-faint); font-variant-numeric: tabular-nums; text-align: right; }
body.stagelight .tour-more { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--sl-faint); margin: 14px 0 0; }
body.stagelight .tour-review-sheet { margin-left: auto; margin-right: auto; }
body.stagelight .tour-h2-tag { font-family: var(--sl-mono); font-size: 0.62em; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sl-faint); border: 1px solid var(--sl-line-strong); border-radius: var(--sl-r-pill); padding: 2px 8px; vertical-align: middle; margin-left: 6px; font-variant-numeric: tabular-nums; }

/* ---- TOUR IN REVIEW DETAIL v2: editorial top-to-bottom flow ---- */
/* Tour Notes — the human lead directly under the hero. */
body.stagelight .tour-notes { border-left: 2px solid var(--sl-accent, var(--sl-line-strong)); padding: 4px 0 4px 26px; }
body.stagelight .tour-notes-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
body.stagelight .tour-notes-head .tour-h2 { margin: 0; }
body.stagelight .tour-notes-byline { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sl-faint); }
body.stagelight .tour-notes-body { font-size: 16.5px; line-height: 1.62; max-width: 68ch; }
body.stagelight .tour-notes-body p { color: var(--sl-muted); }
body.stagelight .tour-notes-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 20px 0 0; }
body.stagelight .tour-notes-sources .tns-label { font-family: var(--sl-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sl-faint); }
body.stagelight .tour-notes-sources a { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sl-mono); font-size: 11.5px; letter-spacing: 0.02em; color: var(--sl-muted); border: 1px solid var(--sl-line); border-radius: var(--sl-r-pill); padding: 3px 10px 3px 6px; }
body.stagelight .tour-notes-sources a:hover { color: var(--sl-ink); border-color: var(--sl-line-strong); }
body.stagelight .tour-notes-sources .tns-num { font-size: 10px; color: var(--sl-faint); border: 1px solid var(--sl-line); border-radius: 999px; width: 15px; height: 15px; display: inline-flex; align-items: center; justify-content: center; }

/* The news — paired Welcome Back + Nice To Meet You columns. */
body.stagelight .tour-news { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
body.stagelight .tour-news.is-single { grid-template-columns: 1fr; max-width: 640px; }
body.stagelight .tour-news-sub { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--sl-faint); margin: -8px 0 16px; }
body.stagelight .tour-news .tour-ltp-list, body.stagelight .tour-news .tour-ftp-list { grid-template-columns: 1fr; }

/* By the numbers — tiles + Most Played grouped. */
body.stagelight .tour-mostplayed { margin-top: 28px; }

/* The Sheet — full-width centerpiece with a one-line intro. */
body.stagelight .tour-sheet-intro { font-family: var(--sl-display); font-size: 16px; line-height: 1.5; color: var(--sl-muted); margin: 0 0 18px; max-width: 62ch; }

/* Compact logistics — legs/dates + shows-by-state as a tight mono strip. */
body.stagelight .tour-logistics { background: rgba(255,255,255,0.02); border: 1px solid var(--sl-line); border-radius: var(--sl-r-md); padding: 18px 22px; }
body.stagelight .tour-logistics-h { font-family: var(--sl-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sl-faint); margin: 0 0 14px; }
body.stagelight .tl-legs, body.stagelight .tl-states { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; }
body.stagelight .tl-states { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--sl-line-faint); }
body.stagelight .tl-legs-label { flex: none; font-family: var(--sl-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sl-faint); min-width: 92px; }
body.stagelight .tl-leg { font-family: var(--sl-mono); font-size: 13px; color: var(--sl-ink); font-variant-numeric: tabular-nums; }
body.stagelight .tl-leg small { color: var(--sl-faint); }
body.stagelight .tl-leg + .tl-leg { border-left: 1px solid var(--sl-line); padding-left: 14px; }
body.stagelight .tl-states .tour-state-line { line-height: 1.7; }
body.stagelight .tour-crosslink { margin-left: auto; margin-right: auto; }
@media (max-width: 760px) {
  body.stagelight .tour-news { grid-template-columns: 1fr; gap: 34px; }
  body.stagelight .tl-legs-label { min-width: 0; flex-basis: 100%; }
}

/* Tour In Review hub: year-grouped index */
body.stagelight .tour-index { margin: 8px 0 44px; }
body.stagelight .tour-index-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid var(--sl-line); }
body.stagelight .tour-index-head h2 { font-family: var(--sl-display); font-size: 26px; font-weight: 640; letter-spacing: -0.01em; color: var(--sl-ink); }
body.stagelight .tour-index-head span { font-family: var(--sl-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sl-faint); }
body.stagelight .tour-index-year { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px 20px; padding: 18px 0; border-bottom: 1px solid var(--sl-line-faint); }
body.stagelight .tour-index-year h3 { font-family: var(--sl-mono); font-size: 17px; color: var(--sl-ink); font-variant-numeric: tabular-nums; }
body.stagelight .tour-index-year ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 16px; }
body.stagelight .tour-index-year a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--sl-ink); }
body.stagelight .tour-index-year a:hover .ti-name { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
body.stagelight .ti-name { font-family: var(--sl-display); font-size: 15px; font-weight: 560; letter-spacing: -0.01em; }
body.stagelight .ti-meta { flex: none; font-family: var(--sl-mono); font-size: 12px; color: var(--sl-faint); }
@media (max-width: 640px) {
  body.stagelight .tour-index-year { grid-template-columns: 1fr; gap: 8px; }
}

/* ---- TOUR IN REVIEW HUB: landing (hero deck, featured written reviews,
        decade-grouped searchable index of every generated tour) ---- */
body.stagelight .tour-hub-title { border-bottom: 0; margin-bottom: 20px; padding-bottom: 0; }
body.stagelight .tour-featured { margin: 0 0 40px; }
body.stagelight .tour-featured-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
body.stagelight .tour-featured-grid a {
  display: grid; grid-template-columns: auto minmax(0,1fr); align-items: baseline; gap: 4px 12px;
  padding: 14px 16px; border-radius: var(--sl-r-md); background: rgba(255,255,255,0.03); border: 1px solid var(--sl-line);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
body.stagelight .tour-featured-grid a:hover { transform: translateY(-2px); border-color: var(--sl-line-strong); }
body.stagelight .tfc-year { font-family: var(--sl-mono); font-size: 13px; color: var(--sl-faint); font-variant-numeric: tabular-nums; }
body.stagelight .tfc-name { font-family: var(--sl-display); font-size: 16px; font-weight: 580; letter-spacing: -0.01em; color: var(--sl-ink); }
body.stagelight .tfc-tag { grid-column: 2; font-family: var(--sl-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sl-faint); }
body.stagelight .tour-featured-grid a:hover .tfc-tag { color: var(--sl-ink); }
body.stagelight .tour-decade { padding: 8px 0 4px; }
body.stagelight .tour-decade[hidden] { display: none; }
body.stagelight .tour-decade-head { display: flex; align-items: baseline; gap: 12px; margin: 18px 0 10px; font-family: var(--sl-mono); font-size: 15px; letter-spacing: 0.04em; color: var(--sl-ink); font-variant-numeric: tabular-nums; }
body.stagelight .tour-decade-head span { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sl-faint); }
body.stagelight .tour-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
body.stagelight .tour-row[hidden] { display: none; }
body.stagelight .tour-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 4px 16px; padding: 12px 6px; border-bottom: 1px solid var(--sl-line); }
body.stagelight .tour-row-link { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: baseline; gap: 4px 16px; min-width: 0; }
body.stagelight .tour-row:hover { background: rgba(255,255,255,0.03); }
body.stagelight .tr-name { font-family: var(--sl-display); font-size: 16px; font-weight: 560; letter-spacing: -0.01em; color: var(--sl-ink); }
body.stagelight .tour-row:hover .tr-name { color: #fff; }
body.stagelight .tr-span { grid-column: 1; font-family: var(--sl-mono); font-size: 12px; color: var(--sl-faint); }
body.stagelight .tr-shows { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-family: var(--sl-mono); font-size: 12px; color: var(--sl-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
body.stagelight .tr-badge {
  justify-self: end; font-family: var(--sl-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--sl-ink); padding: 5px 11px; border-radius: var(--sl-r-pill); border: 1px solid var(--sl-line-strong); background: rgba(255,255,255,0.04); white-space: nowrap;
}
body.stagelight .tr-badge:hover { background: var(--sl-ink); color: #111; border-color: var(--sl-ink); }
body.stagelight .tour-year-summary { display: flex; flex-wrap: wrap; gap: 12px; margin: 36px 0 0; }
body.stagelight .tour-year-summary a {
  display: grid; gap: 4px; padding: 16px 20px; border-radius: var(--sl-r-md); border: 1px solid var(--sl-line); background: rgba(255,255,255,0.03);
}
body.stagelight .tour-year-summary a:hover { border-color: var(--sl-line-strong); }
body.stagelight .tour-year-summary span { font-family: var(--sl-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sl-faint); }
body.stagelight .tour-year-summary strong { font-family: var(--sl-display); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--sl-ink); }
@media (max-width: 640px) {
  body.stagelight .tour-index-year { grid-template-columns: 1fr; gap: 8px; }
  body.stagelight .tour-row-link { grid-template-columns: minmax(0,1fr); }
  body.stagelight .tr-shows { grid-column: 1; grid-row: auto; }
}

@media (max-width: 760px) {
  body.stagelight .origin-hero { flex-direction: column; align-items: flex-start; gap: 18px; }
  body.stagelight .origin-strip { grid-template-columns: repeat(2, 1fr); }
  body.stagelight .origin-nav { flex-direction: column; }
  body.stagelight .origin-nav a { max-width: 100%; }
  body.stagelight .origin-nav .origin-nav-next { text-align: left; margin-left: 0; align-items: flex-start; }
  body.stagelight .archive-main { margin-top: 40px; }
}

/* ── FAQ ACCORDIONS — shared by /faq/ (.faq-item) and About (.about-faq-item) ──
   One treatment for both surfaces: a chevron affordance that rotates 180deg on open,
   and a smooth open/close. interpolate-size lets block-size animate to/from the auto
   keyword on 2026-baseline browsers; where ::details-content or interpolate-size are
   unsupported the accordion simply toggles with no animation — still fully functional. */
:root { interpolate-size: allow-keywords; }
body.stagelight .faq-item > summary,
body.stagelight .about-faq-item > summary {
  display: flex; align-items: center; gap: 16px; list-style: none;
}
body.stagelight .faq-item > summary::-webkit-details-marker,
body.stagelight .about-faq-item > summary::-webkit-details-marker { display: none; }
/* CSS-triangle chevron (a border corner rotated to a downward "v"). */
body.stagelight .faq-item > summary::after,
body.stagelight .about-faq-item > summary::after {
  content: ""; flex: none; width: 8px; height: 8px; margin-left: auto; margin-right: 3px;
  border-right: 2px solid var(--sl-muted); border-bottom: 2px solid var(--sl-muted);
  transform: rotate(45deg); transform-origin: center; transition: transform 0.2s ease;
}
body.stagelight .faq-item[open] > summary::after,
body.stagelight .about-faq-item[open] > summary::after { transform: rotate(225deg); }
body.stagelight .faq-item > summary:focus-visible,
body.stagelight .about-faq-item > summary:focus-visible { outline: 2px solid var(--sl-muted); outline-offset: 3px; border-radius: 4px; }
body.stagelight .faq-item::details-content,
body.stagelight .about-faq-item::details-content {
  block-size: 0; overflow: clip;
  transition: content-visibility 0.25s allow-discrete, block-size 0.25s ease;
}
body.stagelight .faq-item[open]::details-content,
body.stagelight .about-faq-item[open]::details-content { block-size: auto; }