/* Lab 3, round nine: the candidate page for the whole site (site.html). Loaded after lab3.css and free.css; it only
   seats the baseline's top bar over the poster field: a solid ground, so the sections' names read over any poster, and
   the dark version over the Bootleg tower, as in the baseline. */
.top { height: 52px; background: rgba(230,228,222,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(20,20,20,.12); }
body.on-shirts .top { background: rgba(0,0,0,.9); border-bottom-color: rgba(255,255,255,.12); }
.nav a[aria-current="true"] { color: var(--ink); background: rgba(0,0,0,.06); }
body.on-shirts .nav a[aria-current="true"] { color: #fff; background: rgba(255,255,255,.12); }
.nav a { transition: color 160ms ease, background-color 160ms ease; }
.nav a:active { transform: scale(.97); }
@media (max-width: 760px) { .top { background: rgba(230,228,222,.96); } body.on-shirts .top { background: rgba(0,0,0,.94); } }
/* Social: the feed scrolls inside the phone and holds the gesture there (the baseline's overscroll containment), so the
   way on is a button, beside the feed on a desktop and also under the phone on a phone */
.so-next { margin-top: 22px; display: inline-block; }
.so-next-low { display: none; }
/* on a phone the phone fills the width, so a finger on it scrolls the feed: the way on sticks to the bottom of the screen
   for the whole section, always in reach, and the one above the phone is not needed */
@media (max-width: 760px) { .so-head .so-next { display: none; } .so-next-low { display: inline-block; position: sticky; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 5; margin: 0; justify-self: center; box-shadow: 0 10px 30px rgba(36,30,120,.25); } }
/* a phone: all five sections in reach at once (the baseline's strip scrolls sideways and hides Contact at the edge),
   and Explore's top row keeps every control whole, the title giving way first */
@media (max-width: 760px) {
  .top .nav { overflow: visible; -webkit-mask-image: none; mask-image: none; margin-right: 0; padding-right: 0; gap: 0; }
  .top .nav a { padding: 6px 5px; font-size: 12.5px; }
  .top .who { font-size: 15px; white-space: nowrap; }
  .exploring .f-top { gap: 6px; }
  .exploring .f-top b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .exploring .f-top .f-btn { padding: 9px 11px; }
}
@media (max-width: 350px) { .top .nav a { padding: 6px 3px; font-size: 12px; } }
/* the music's artist index runs wider than a phone; the page itself never scrolls sideways (clip, not hidden, so the
   sticky way on from Social still sticks) */
html, body { overflow-x: clip; }

/* the way on from the music and from the shirts (site2): a quiet link, apart from each section's own controls, so going
   on is always one tap, as Posters has its arrow and Social its Next: Contact */
.mu-next, .bo-next { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: inherit; text-decoration: none; padding: 9px 13px; border-radius: 99px; border: 1px solid currentColor; opacity: .78; }
.mu-next { position: absolute; z-index: 3; right: var(--pad); top: 70px; color: #141414; }
.bo-next { margin-left: 10px; }
.mu-next:hover, .bo-next:hover { opacity: 1; }
.mu-next:focus-visible, .bo-next:focus-visible { outline: 2px solid #2b6cff; outline-offset: 2px; }
@media (max-width: 760px) { .mu-next { top: auto; bottom: 74px; right: 12px; padding: 8px 12px; } }

/* the music's bar at in-between widths (Omer's review at about 1164 px: "Covers for artists" ran under the counter): the
   artist index keeps to its own lane, short of the counter and the actions by their measured width (--mu-steps-w, set
   by sleeves2.js) and a 24 px gap, and scrolls sideways inside it, with a soft fade where there is more */
@media (min-width: 761px) {
  .music .mu-index { max-width: calc(100% - 2 * var(--pad) - var(--mu-steps-w, 470px) - 24px); scroll-padding: 0 16px; }
  .music .mu-index.more-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
  .music .mu-index.more-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px); mask-image: linear-gradient(90deg, transparent, #000 40px); }
  .music .mu-index.more-l.more-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
  .music .mu-steps { flex-wrap: nowrap; }
}
/* Liquid glass on the music's controls (liquid-glass.js, MIT, after Liquid Glass Studio): the record buttons and Next:
   Shirts, drawn in the music's WebGL from the sleeves and the section's ground behind them; the same clear glass and
   light or dark ink as on the wall (see wall.css). Without WebGL2 the CSS pills stay. */
.music .mu-steps .pill, .music .mu-next { --lg-ink: auto; --lg-tint: rgba(246,244,239,.04); --lg-frost: 1; --lg-adapt: .5; }
.music [data-lg-ink="light"] { --lg-tint: rgba(16,16,16,.06); --lg-adapt: -.46; }
@media (hover: hover) and (pointer: fine) { .music .mu-steps .pill:hover, .music .mu-next:hover { --lg-tint: rgba(255,255,255,.22); } }
.music .mu-steps .pill:active, .music .mu-next:active { --lg-tint: rgba(255,255,255,.32); }
.music-stage.lg .mu-steps .pill, .music-stage.lg .mu-next { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: transparent; opacity: 1; color: #141414; transition: color 220ms cubic-bezier(.22, 1, .36, 1); }
.music-stage.lg .mu-steps .pill[data-lg-ink="light"], .music-stage.lg .mu-next[data-lg-ink="light"] { color: #f7f5f0; }