/* The programme (landing) page: a concert bill of six pieces. */
.bill { max-width: 1000px; padding-top: 2.4rem; padding-bottom: 4rem; }
.bill-kicker { margin: 0 0 1.4rem; font: italic 1.4rem/1 var(--serif); color: var(--text-faint); }
.pieces { list-style: none; margin: 0; padding: 0; counter-reset: piece; border-top: 1px solid var(--line); }
.pieces li { counter-increment: piece; border-bottom: 1px solid var(--line); }
.pieces a {
  display: grid; grid-template-columns: 3rem 130px minmax(0, 15rem) minmax(0, 1fr); align-items: center; gap: 1.4rem;
  padding: 1.25rem 0.4rem; color: inherit; text-decoration: none; transition: background 160ms;
}
.pieces a::before { content: counter(piece, upper-roman); font: italic 1.3rem/1 var(--serif); color: var(--brass); text-align: right; }
.pieces a:hover { background: rgba(241, 233, 218, 0.04); }
.pieces a:hover .p-name { color: var(--brass-hi); }
.p-name { font: italic 400 clamp(1.9rem, 3.6vw, 2.6rem)/1 var(--serif); color: var(--text); transition: color 160ms; }
.p-hook { color: var(--text-dim); max-width: 34rem; }
.bill-note { margin: 2rem 0 0; color: var(--text-faint); font-size: 0.9rem; max-width: 40rem; }

.glyph { width: 120px; height: 70px; overflow: visible; }
.g-keys rect { fill: var(--ivory); }
.g-fill { fill: var(--brass); animation: g-rise 3.2s ease-in-out infinite; transform-origin: 40px 62px; }
@keyframes g-rise { 0%, 100% { transform: scaleY(0.45); } 50% { transform: scaleY(1); } }
.g-arc { fill: none; stroke: rgba(241, 233, 218, 0.15); stroke-width: 7; stroke-linecap: round; }
.g-arc-on { fill: none; stroke: var(--brass); stroke-width: 7; stroke-linecap: round; }
.g-needle { stroke: var(--ivory); stroke-width: 3; stroke-linecap: round; transform-origin: 60px 60px; animation: g-swing 4s ease-in-out infinite; }
@keyframes g-swing { 0%, 100% { transform: rotate(-35deg); } 50% { transform: rotate(8deg); } }
.g-hub { fill: var(--brass-hi); }
.g-frame { fill: var(--ivory); stroke: rgba(212, 162, 76, 0.6); stroke-width: 3; }
.g-sun { fill: var(--brass); }
.g-hill { fill: #3C1B26; }
.g-dancer { stroke: var(--ivory); stroke-width: 4; stroke-linecap: round; fill: none; animation: g-bob 0.62s ease-in-out infinite alternate; }
.g-dancer circle { fill: var(--ivory); stroke: none; }
@keyframes g-bob { to { transform: translateY(4px); } }
.g-words text { font: italic 15px var(--serif); text-anchor: middle; fill: var(--text-faint); }
.g-words .w1 { font-size: 24px; fill: var(--brass-hi); animation: g-glow 2.6s ease-in-out infinite alternate; }
.g-words .w3 { opacity: 0.35; }
@keyframes g-glow { from { opacity: 0.6; } to { opacity: 1; } }
.g-belt { stroke: rgba(241, 233, 218, 0.3); stroke-width: 3; stroke-dasharray: 6 6; animation: g-belt 1s linear infinite; }
@keyframes g-belt { to { stroke-dashoffset: -12; } }
.g-env { fill: var(--ivory); }
.g-env.on { fill: var(--brass-hi); }
.g-chute { stroke: rgba(212, 162, 76, 0.55); stroke-width: 3; fill: none; stroke-linecap: round; }

@media (max-width: 760px) {
  .pieces a { grid-template-columns: 2rem 1fr; gap: 0.4rem 1rem; }
  .pieces a::before { grid-row: 1 / span 3; align-self: start; padding-top: 0.4rem; }
  .glyph { grid-column: 2; width: 96px; height: 56px; }
  .p-name, .p-hook { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .g-fill, .g-needle, .g-dancer, .g-words .w1, .g-belt { animation: none; }
}