/* Comb-bound book look for the sheet and the home page ("contents page").
   Self-contained: to go back to the plain sheet, delete this file and its <link> in index.html.

   The sheet shows the top part of a portrait page (8.5 x 11) whose width is the sheet's width, so
   the comb is sized as a real 19-hole comb on that page would be: one tooth pitch is 1/19 of the
   page height, i.e. 6.8% of its width. The page fades into the desk at the bottom. */

:root {
  --comb: #24252a; --comb-hi: #54565e;                /* near-black plastic */
  --leaf-1: #ece8df; --leaf-2: #dcd7cb;               /* page edges peeking out under the top sheet */
  --comb-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 30' preserveAspectRatio='none'%3E%3Crect x='11.5' y='7' width='7.5' height='16' rx='3' fill='%232a2724' stroke='%23fff' stroke-opacity='.55' stroke-width='.7'/%3E%3Crect x='1' y='11' width='16' height='12' rx='3' fill='%23000' opacity='.25'/%3E%3Crect x='0' y='9' width='16' height='12' rx='3' fill='%2324252a'/%3E%3Crect x='0' y='9' width='16' height='4' rx='2' fill='%2354565e'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --comb: #5e312d; --comb-hi: #7a4640;              /* deep red */
    --leaf-1: #151515; --leaf-2: #101010;
    --comb-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 30' preserveAspectRatio='none'%3E%3Crect x='11.5' y='7' width='7.5' height='16' rx='3' fill='%23000' stroke='%23fff' stroke-opacity='.14' stroke-width='.7'/%3E%3Crect x='1' y='11' width='16' height='12' rx='3' fill='%23000' opacity='.5'/%3E%3Crect x='0' y='9' width='16' height='12' rx='3' fill='%235e312d'/%3E%3Crect x='0' y='9' width='16' height='4' rx='2' fill='%237a4640'/%3E%3C/svg%3E");
  }
}
:root[data-theme="dark"] {
  --comb: #5e312d; --comb-hi: #7a4640;
  --leaf-1: #151515; --leaf-2: #101010;
  --comb-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 30' preserveAspectRatio='none'%3E%3Crect x='11.5' y='7' width='7.5' height='16' rx='3' fill='%23000' stroke='%23fff' stroke-opacity='.14' stroke-width='.7'/%3E%3Crect x='1' y='11' width='16' height='12' rx='3' fill='%23000' opacity='.5'/%3E%3Crect x='0' y='9' width='16' height='12' rx='3' fill='%235e312d'/%3E%3Crect x='0' y='9' width='16' height='4' rx='2' fill='%237a4640'/%3E%3C/svg%3E");
}

/* cqw below is 1% of the width of .view, which is the width of the sheet. */
.view { container-type: inline-size; }

.sheet, .welcome {
  --fade: 56px; --pb: 12px;                                        /* blank page at the bottom that dissolves into the desk */
  --u: calc(var(--p) / 24);                                        /* leaf thickness unit */
  position: relative;
  /* Five leaf edges at the right, each a little off from the last, then a soft shadow that falls to the right only so
     nothing shows below the fade. */
  box-shadow:
    var(--u) calc(.7 * var(--u)) 0 -1px var(--leaf-1),
    calc(2 * var(--u)) calc(.3 * var(--u)) 0 -2px var(--leaf-2),
    calc(2.8 * var(--u)) calc(1.1 * var(--u)) 0 -3px var(--leaf-1),
    calc(3.7 * var(--u)) calc(.6 * var(--u)) 0 -4px var(--leaf-2),
    calc(4.5 * var(--u)) calc(1.4 * var(--u)) 0 -5px var(--leaf-1),
    calc(5.5 * var(--u)) 0 var(--shadow-blur) -8px rgb(0 0 0 / 30%);
  --shadow-blur: 16px;
  /* The page bends a little toward the binding. */
  background-image: linear-gradient(90deg, rgb(0 0 0 / 6%), transparent calc(.9 * var(--p)));
}
.sheet { --p: clamp(26px, 6.8cqw, 72px); }          /* tooth pitch */
.welcome { --p: clamp(26px, calc(min(680px, 100cqw) * .068), 72px); --pb: 28px; }

/* The spine hangs in the desk margin; the teeth reach into the sheet's left padding and never touch the score. */
.sheet::before, .welcome::before {
  content: ""; position: absolute; z-index: 3; pointer-events: none;
  left: calc(-.33 * var(--p)); width: calc(.3 * var(--p)); top: calc(.2 * var(--p)); bottom: 0; border-radius: 99px 99px 0 0;
  background: linear-gradient(90deg, var(--comb-hi), var(--comb) 65%);
  box-shadow: 3px 2px 6px rgb(0 0 0 / 35%);
}
.sheet::after, .welcome::after {
  content: ""; position: absolute; z-index: 2; pointer-events: none;
  left: calc(-.3 * var(--p)); width: calc(.667 * var(--p)); top: calc(.5 * var(--p)); bottom: 0;
  background: var(--comb-img) 0 0 / 100% var(--p) repeat-y;
}

.sheet { padding: 34px 22px calc(12px + var(--fade)) calc(.36 * var(--p) + 4px); }   /* more room above the title */

/* The fade: an overlay over the blank padding at the very bottom of the page (whatever the last element is) that turns
   from clear to the desk colour, hiding the page, comb and leaves.  It hangs off the last child but is positioned
   against the sheet, which is the nearest positioned ancestor. */
.sheet-foot::after, .welcome .contents::after {
  content: ""; position: absolute; z-index: 5; pointer-events: none;
  left: calc(-.4 * var(--p)); right: calc(-6.5 * var(--u) - 12px); bottom: -14px;
  height: calc(var(--fade) + var(--pb) + 14px);
  background: linear-gradient(to bottom, transparent, var(--desk) calc(var(--fade) + 4px));
}
.transport { position: relative; z-index: 6; }

/* Tempo and volume keep the distance from the comb that the right edge has from the page edge. */
.sheet-head, .sheet-foot { padding-left: 22px; }
#stage { margin-left: 8px; width: calc(100% - 8px); }

/* Printed ink: the score is blended into the paper instead of sitting on it as a white picture, which also lets
   the gutter shade show through.  In dark mode the canvas is already inverted to light ink on the sheet colour. */
#stage { mix-blend-mode: multiply; opacity: .93; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #stage { mix-blend-mode: normal; opacity: .9; } }
:root[data-theme="dark"] #stage { mix-blend-mode: normal; opacity: .9; }

/* The home page is the contents page of the same book, at least one portrait page tall. */
.welcome {
  display: flex; flex-direction: column; aspect-ratio: 8.5 / 11;
  background: var(--sheet); border: 1px solid var(--sheet-rule); border-radius: 3px;
  padding: 34px 32px calc(28px + var(--fade)) calc(.36 * var(--p) + 8px);
}
.welcome .contents { flex: 1; }
/* The home page lists titles only. */
.contents .piece-link .leader, .contents .piece-link .duration, .contents .piece-link .piece-parts { display: none; }

@media (max-width: 640px) {
  .sheet, .welcome { --fade: 40px; --shadow-blur: 6px; }
  .sheet { --pb: 8px; }
  .welcome { --pb: 20px; }
  .sheet { padding: 24px 10px calc(8px + var(--fade)) calc(.36 * var(--p) + 4px); }
  .sheet-foot::after, .welcome .contents::after { right: -8px; }
  .sheet-head, .sheet-foot { padding-left: 12px; }
  .welcome { padding: 24px 16px calc(20px + var(--fade)) calc(.36 * var(--p) + 8px); }
}

/* The comb pads the sheet's left side, which puts the middle of the title right of the middle of the sheet.  The logo
   moves by the same amount to stay over it.  --p is the sheet's tooth pitch worked out from the width of .content. */
.content { container-type: inline-size; }
.topbar { --p: clamp(26px, calc(.068 * (min(100cqw, 1680px) - 64px)), 72px); }
.topbar-brand { transform: translateX(calc(.18 * var(--p) + 2px)); }
@media (max-width: 640px) {
  .topbar { --p: clamp(26px, calc(.068 * (100cqw - 32px)), 72px); }
  .topbar-brand { transform: translateX(calc(.18 * var(--p) + 3px)); }
}