/* music.gonglogic.com — the one thing the music site has that the theme does not: its
   own line art in the dark band at the top of every page.

   The learning site's hero carries a line drawing and so does the studio's; the music
   site's band was a bare gradient, the only one of the three with nothing drawn on it.
   This puts a stave and a phrase of notes there, in the logo's gold, as faint as the
   hero's own art (which is drawn at 16%). Decoration only: it sits behind the words,
   takes no clicks, and is dropped wherever the band is too narrow to hold it beside the title. */
.title { position: relative; overflow: hidden; isolation: isolate; }
.title > .container { position: relative; z-index: 1; }
.title::after {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 0 0 0 auto;
    width: min(48%, 42rem);
    pointer-events: none;
    opacity: .22;
    background: no-repeat right 2rem center / contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 260' fill='none' stroke='%23c8962f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg opacity='.75'%3E%3Cpath d='M20 70h680M20 100h680M20 130h680M20 160h680M20 190h680'/%3E%3C/g%3E%3Cpath d='M82 40c14 12 20 26 20 40 0 22-16 38-34 52-12 10-22 22-22 38 0 18 14 30 32 30 16 0 28-11 28-26 0-13-10-23-23-23-11 0-19 8-19 18'/%3E%3Cpath d='M82 40v172'/%3E%3Cg fill='%23c8962f'%3E%3Cellipse cx='190' cy='175' rx='13' ry='9.5' transform='rotate(-20 190 175)'/%3E%3Cellipse cx='250' cy='145' rx='13' ry='9.5' transform='rotate(-20 250 145)'/%3E%3Cellipse cx='310' cy='130' rx='13' ry='9.5' transform='rotate(-20 310 130)'/%3E%3Cellipse cx='370' cy='160' rx='13' ry='9.5' transform='rotate(-20 370 160)'/%3E%3Cellipse cx='470' cy='115' rx='13' ry='9.5' transform='rotate(-20 470 115)'/%3E%3Cellipse cx='530' cy='100' rx='13' ry='9.5' transform='rotate(-20 530 100)'/%3E%3C/g%3E%3Cpath d='M202 172V88M262 142V70M322 127V58M382 157V76'/%3E%3Cpath d='M202 88L382 58M202 100L382 70' stroke-width='7' stroke-linecap='butt'/%3E%3Cpath d='M482 112V40M542 97V32'/%3E%3Cpath d='M482 40L542 32' stroke-width='7' stroke-linecap='butt'/%3E%3Cellipse cx='630' cy='130' rx='15' ry='10.5' transform='rotate(-20 630 130)'/%3E%3Cpath d='M440 60v140M600 60v140M690 60v140' opacity='.6'/%3E%3C/svg%3E");
}
/* Below a wide screen the band is not wide enough for the words and the drawing both. */
@media (max-width: 64rem) {
    .title::after { display: none; }
}