/* How it's built: the plan, the beat under the voice, every line */
.bt { gap: 22px; }
.bt-head .label { color: var(--muted); }
.bt-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.bt-plan { display: grid; }
.bt-figure { display: grid; gap: 10px; margin: 0; padding: 16px 16px 12px; border: 1px solid var(--line); border-radius: calc(20px * var(--round, 1)); background: var(--sheet); }
.bt-curve .curve { height: 96px; }
.bt-hz { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.bt-hz .label { color: var(--free-ink); }
.bt-wave { display: block; width: 100%; height: 34px; }
.bt-wave path { fill: none; stroke: var(--free); stroke-width: 1.3; }
.bt-cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font: 11px/1.4 var(--mono); color: var(--muted); }
.bt-phases { list-style: none; margin: 14px 0 0; padding: 0; display: grid; }
.bt-phase { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name min" "depth hz"; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.bt-phase:last-child { border-bottom: 0; }
.bt-phase-name { grid-area: name; font: var(--display, 400) 19px/1.2 var(--serif); letter-spacing: var(--title-track, normal); color: var(--ink); }
.bt-phase-n { display: inline-block; min-width: 1.6em; margin-right: 8px; font: 400 12px/1 var(--mono); color: var(--muted); vertical-align: 0.15em; }
.bt-phase-min { grid-area: min; font: 400 12px/1.6 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.bt-phase-depth { grid-area: depth; display: flex; align-items: center; gap: 10px; font: 400 11.5px/1 var(--mono); color: var(--muted); }
.bt-phase-hz { grid-area: hz; font: 400 11.5px/1 var(--mono); color: var(--free-ink); white-space: nowrap; }
.bt-bar { position: relative; flex: none; width: 64px; height: 6px; border-radius: 6px; background: var(--line); }
.bt-bar i { position: absolute; top: 0; bottom: 0; min-width: 6px; border-radius: 6px; background: var(--deep); }
.bt-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border: 1px solid var(--line); border-radius: calc(18px * var(--round, 1)); background: var(--sheet); }
.bt-facts div { display: grid; gap: 6px; padding: 12px 14px; min-width: 0; }
.bt-facts div:nth-child(even) { border-left: 1px solid var(--line); }
.bt-facts div:nth-child(n + 3) { border-top: 1px solid var(--line); }
.bt-facts dt { font: 400 10.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.bt-facts dd { margin: 0; font-size: 15px; color: var(--ink); overflow-wrap: anywhere; }
.bt-quiet { padding: 14px 0 0; border-top: 1px solid var(--line); font: italic 400 17px/1.4 var(--serif); color: var(--muted); }
.bt-end { height: 24px; }
.bt-end.has-dock { height: 40px; }
.bt + .lp-foot { max-width: 1120px; margin: 8px auto 0; padding: 20px 20px 0; border-top: 0; }
.bt + .lp-foot::before { content: ""; display: block; height: 1px; margin-bottom: 20px; background: var(--line); }

@container app (min-width: 700px) {
  .bt-curve .curve { height: 120px; }
  .bt-figure { padding: 20px 22px 14px; }
  .bt-phase { grid-template-columns: minmax(0, 1fr) 70px 170px 120px; grid-template-areas: "name min depth hz"; align-items: center; }
  .bt-phase-hz { text-align: right; }
  .bt-facts { grid-template-columns: 1fr; }
  .bt-facts div { border-left: 0; }
  .bt-facts div + div { border-top: 1px solid var(--line); }
  .bt-quiet { font-size: 19px; }
  .bt + .lp-foot { padding: 20px 40px 0; }
}
.bt-timing { margin-top: 10px; font: 12px/1.5 var(--mono); color: var(--muted); }
/* what the numbers in the phases mean, in words */
.bt-key { display: grid; gap: 6px; margin: 4px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--soft); }
.bt-key div { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; }
.bt-key dt { font: 400 11px/1.9 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.bt-key dd { margin: 0; }