/* Shows-only instrument. No global theme, navigation or show-table overrides. */
.bso-trombone-hero {
  --bso-brass: #efc972;
  position: relative;
  isolation: isolate;
  min-height: calc(100svh - 68px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 44%, #302919 0, #151512 45%, #090b0c 80%);
  color: #fbf7ed;
  padding: clamp(32px, 4vh, 60px) 20px 24px;
  text-align: center;
}
.bso-trombone-hero::before {
  content: "";
  position: absolute;
  inset: 24px;
  border: 1px solid rgb(239 201 114 / 13%);
  pointer-events: none;
  z-index: -1;
}
.bso-trombone-intro { max-width: 1100px; margin: 0 auto; }
.bso-trombone-eyebrow { color: var(--bso-brass); font-size: .7rem; font-weight: 700; letter-spacing: .25em; margin: 0 0 18px; text-transform: uppercase; }
.bso-trombone-hero h1 { color: #fbf7ed; font-size: clamp(2.7rem, 6vw, 5.8rem); line-height: 1.05; letter-spacing: -.045em; margin: 0 0 18px; font-weight: 700; }
.bso-trombone-intro > p:last-child { color: #bdb9ae; max-width: 570px; margin: 0 auto; font-size: clamp(.95rem, 1.4vw, 1.1rem); line-height: 1.65; }
/* Apply touch-action to the HTML wrapper too: SVG groups alone do not stop
   browsers from cancelling a drag to start native page scrolling. */
.bso-trombone-stage { width: min(100%, 1380px); margin: clamp(20px, 4vh, 54px) auto 0; position: relative; touch-action: none; }
.bso-trombone-stage::after { content: ""; position: absolute; inset: 72% 12% 0; background: radial-gradient(ellipse, rgb(0 0 0 / 60%), transparent 65%); z-index: -1; }
.bso-trombone-svg { display: block; width: 100%; height: auto; overflow: visible; user-select: none; -webkit-user-select: none; }
.bso-trombone-slide { cursor: grab; touch-action: none; outline: none; }
.bso-trombone-slide[data-dragging="true"] { cursor: grabbing; }
.bso-trombone-grip-ring { opacity: .25; transition: opacity .18s; }
.bso-trombone-slide:hover .bso-trombone-grip-ring,
.bso-trombone-slide:focus-visible .bso-trombone-grip-ring,
.bso-trombone-slide[data-dragging="true"] .bso-trombone-grip-ring { opacity: 1; }
.bso-trombone-slide:focus-visible .bso-trombone-grip-ring { stroke: #fff; stroke-width: 4; }
.bso-trombone-grip-label { fill: #edce8a; font: 700 16px system-ui, sans-serif; letter-spacing: 3px; pointer-events: none; }
.bso-trombone-controls { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin: 6px auto 0; }
.bso-trombone-instruction { margin: 0; color: #e2dbcc; font-size: .9rem; }
.bso-trombone-instruction span { color: var(--bso-brass); margin-right: 8px; }
.bso-trombone-sound { border: 1px solid rgb(239 201 114 / 35%); background: rgb(239 201 114 / 7%); color: var(--bso-brass); border-radius: 100px; padding: 10px 18px; font: inherit; font-size: .8rem; min-height: 44px; cursor: pointer; }
.bso-trombone-sound:hover { background: rgb(239 201 114 / 16%); }
.bso-trombone-sound:focus-visible, .bso-trombone-scroll:focus-visible { outline: 2px solid var(--bso-brass); outline-offset: 5px; }
.bso-trombone-status { color: #a9a497; font-size: .75rem; min-height: 1.6em; margin: 12px auto 0; }
.bso-trombone-scroll { color: #d2c8b2; text-decoration: none; margin: 32px auto 0; display: inline-flex; gap: 12px; align-items: center; font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; min-height: 44px; }
.bso-trombone-scroll:hover { color: #fff; }
.bso-trombone-hero[data-playing="true"] .bso-trombone-instruction span { color: #fff3bb; text-shadow: 0 0 14px #efc972; }
.bso-trombone-hero audio { display: none; }
@media (max-width: 600px) {
  .bso-trombone-hero { padding: 54px 12px 22px; min-height: 85svh; }
  .bso-trombone-hero::before { inset: 12px; }
  .bso-trombone-intro { padding: 0 16px; }
  .bso-trombone-stage { width: 100%; margin: 44px auto 28px; }
  .bso-trombone-controls { flex-direction: column; gap: 14px; }
  .bso-trombone-grip-label { font-size: 26px; }
  .bso-trombone-scroll { margin-top: 22px; }
}
@media (prefers-reduced-motion: reduce) { .bso-trombone-grip-ring { transition: none; } }