/* Recording page only. Head: one photo (cols 1–4, sticky while the list scrolls) beside the services
   (cols 5–12, the edge the split sections below use), three groups each with its own booking link.
   Shared: .rt, .lnk, .xrow, .others. */

.rec{ padding-block:var(--s-7) var(--sec) }
.rec__grid{ align-items:start; row-gap:var(--s-6) }

/* photo: the 4:5 microphone detail, sized to stay whole on screen while sticky */
.rec__photo{ grid-column:1/5; position:sticky; top:calc(var(--hdr) + var(--s-7)); aspect-ratio:4/5; max-height:calc(100svh - var(--hdr) - 2 * var(--s-7)); min-height:360px }
.rec__photo .ph{ height:100% }

/* services */
.rec__body{ grid-column:5/-1; min-width:0 }
.rec__body>h1{ margin-top:-.28em }
.rec-g{ margin-top:var(--s-8) }
.rec__body>h1+.rec-g{ margin-top:var(--s-7) }
/* group head: name and booking link on one line (the link drops below the name when it cannot fit), note under */
.rec-g__head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; column-gap:var(--s-5); margin-bottom:var(--s-3) }
.rec-g__head h2{ flex:none }
.rec-g__note{ order:3; flex:1 0 100%; margin-top:2px; font-size:var(--t-s); color:var(--fg-2) }

/* details: a row that continues the service row above it (cells on wide screens; on narrow screens .rt rows
   are grids and the detail cell spans both columns, so the text is not squeezed beside the price) */
.rec .rt .rec-r--more,.rec .rt .rec-r--more>*{ padding-bottom:0 }
.rec .rt .rec-r--det{ padding-top:2px; border-top:0 }
.rec .rt .rec-r--det>td{ grid-column:1/-1; padding-top:2px; border-top:0; font-size:var(--t-s); line-height:1.55; color:var(--fg-2) }
.rec .rt .rec-r--det p{ max-width:34em; text-wrap:pretty }
/* multitrack: the microphone for each part, aligned */
.rec-mics{ display:grid; grid-template-columns:max-content minmax(0,1fr); column-gap:var(--s-5); margin-top:var(--s-2) }
.rec-mics>div{ display:contents }
.rec-mics dd{ color:var(--fg) }

/* the two vocal notes, once, under the table they follow */
.rec-terms{ display:flex; flex-wrap:wrap; align-items:center; column-gap:var(--s-5); margin-top:var(--s-1); font-size:var(--t-s); color:var(--fg-2) }
.rec-terms .lnk{ font-weight:var(--w-body); color:var(--fg) }

@media (max-width:1023px){
  .rec{ padding-top:0 }
  .rec__photo{ grid-column:1/-1; position:static; margin-inline:calc(var(--m) * -1); aspect-ratio:5/4; max-height:none; min-height:0 }
  .rec__body{ grid-column:1/-1 }
  .rec__body>h1{ margin-top:var(--s-2) }
}
@media (max-width:767px){
  .rec__photo{ aspect-ratio:1/1 }
  .rec-g{ margin-top:var(--s-7) }
}