/* Book theme for gallery pages (used with <body class="book">): the binding and weathered page edges. */
.spine-title { display: none; }
  /* A Victorian cloth-and-gilt book spine in the left margin of wide screens, with the book's title lettered on it,
     so the page reads like the opening of a book. Strength is --spine (0 = off, 1 = full).
     It scrolls with the page and never overlaps the story column. */
  @media (min-width: 1100px) {
    body {
      position: relative;
      --leather: linear-gradient(90deg, #5c3519 0%, #7d4f27 22%, #8f5f31 50%, #7f5028 80%, #5a3417 100%);
    }
    body::before {
      content: "";
      box-sizing: border-box;
      position: absolute; top: 460px; bottom: 0; left: 0;
      width: 56px;
      z-index: -1;
      pointer-events: none;
      opacity: var(--spine, .92);
      background:
        url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2256%22 height=%22200%22 viewBox=%220 0 56 200%22%3E%3Cdefs%3E%3Cstyle%3E%2A%7Bvector-effect:non-scaling-stroke%7D%3C/style%3E%3ClinearGradient id=%22b%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23f6dc92%22 stop-opacity=%22.55%22/%3E%3Cstop offset=%22.5%22 stop-color=%22%23f6dc92%22 stop-opacity=%220%22/%3E%3Cstop offset=%221%22 stop-color=%22%231d0e03%22 stop-opacity=%22.55%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x=%220%22 y=%220%22 width=%2256%22 height=%227%22 fill=%22url(%23b)%22/%3E%3Cpath d=%22M0 0.5H56%22 stroke=%22%23ecca78%22 stroke-opacity=%22.75%22/%3E%3Cpath d=%22M0 7.5H56%22 stroke=%22%231d0e03%22 stroke-opacity=%22.7%22/%3E%3Cdefs%3E%3Cg id=%22t%22 fill=%22none%22%3E%3Cpath d=%22M0 10H56M0 194 H56%22 stroke-width=%221%22/%3E%3Cpath d=%22M0 12.5H56M0 191 H56%22 stroke-width=%22.6%22/%3E%3Crect x=%227%22 y=%2218%22 width=%2242%22 height=%22164%22/%3E%3Crect x=%229%22 y=%2220%22 width=%2238%22 height=%22160%22 stroke-width=%22.6%22/%3E%3Cpath d=%22M28.0 40.0 L28.7 41.5 L29.3 43.0 L29.9 44.5 L30.5 46.0 L31.0 47.5 L31.4 49.0 L31.7 50.5 L32.0 52.0 L32.1 53.5 L32.2 55.0 L32.1 56.5 L32.0 58.0 L31.7 59.5 L31.4 61.0 L31.0 62.5 L30.5 64.0 L29.9 65.5 L29.3 67.0 L28.7 68.5 L28.0 70.0 L27.3 71.5 L26.7 73.0 L26.1 74.5 L25.5 76.0 L25.0 77.5 L24.6 79.0 L24.3 80.5 L24.0 82.0 L23.9 83.5 L23.8 85.0 L23.9 86.5 L24.0 88.0 L24.3 89.5 L24.6 91.0 L25.0 92.5 L25.5 94.0 L26.1 95.5 L26.7 97.0 L27.3 98.5 L28.0 100.0 L28.7 101.5 L29.3 103.0 L29.9 104.5 L30.5 106.0 L31.0 107.5 L31.4 109.0 L31.7 110.5 L32.0 112.0 L32.1 113.5 L32.2 115.0 L32.1 116.5 L32.0 118.0 L31.7 119.5 L31.4 121.0 L31.0 122.5 L30.5 124.0 L29.9 125.5 L29.3 127.0 L28.7 128.5 L28.0 130.0 L27.3 131.5 L26.7 133.0 L26.1 134.5 L25.5 136.0 L25.0 137.5 L24.6 139.0 L24.3 140.5 L24.0 142.0 L23.9 143.5 L23.8 145.0 L23.9 146.5 L24.0 148.0 L24.3 149.5 L24.6 151.0 L25.0 152.5 L25.5 154.0 L26.1 155.5 L26.7 157.0 L27.3 158.5 L28.0 160.0%22/%3E%3Cpath d=%22M0 0C2.6 -2.2 6 -2.2 8.2 0C6 2.2 2.6 2.2 0 0Z M1 0H7%22 transform=%22translate(29.9 44.5) rotate(-59.3)%22/%3E%3Cpath d=%22M0 0C2.6 -2.2 6 -2.2 8.2 0C6 2.2 2.6 2.2 0 0Z M1 0H7%22 transform=%22translate(32.0 52.0) rotate(-149.7)%22/%3E%3Cpath d=%22M0 0C2.6 -2.2 6 -2.2 8.2 0C6 2.2 2.6 2.2 0 0Z M1 0H7%22 transform=%22translate(31.7 59.5) rotate(-26.8)%22/%3E%3Ccircle cx=%2240.2%22 cy=%2255.2%22 r=%221.1%22/%3E%3Cpath d=%22M0 0C2.6 -2.2 6 -2.2 8.2 0C6 2.2 2.6 2.2 0 0Z M1 0H7%22 transform=%22translate(29.3 67.0) rotate(-119.4)%22/%3E%3Cpath d=%22M0 0C2.6 -2.2 6 -2.2 8.2 0C6 2.2 2.6 2.2 0 0Z M1 0H7%22 transform=%22translate(26.1 74.5) rotate(-16.7)%22/%3E%3Cpath d=%22M0 0C2.6 -2.2 6 -2.2 8.2 0C6 2.2 2.6 2.2 0 0Z M1 0H7%22 transform=%22translate(24.0 82.0) rotate(-134.3)%22/%3E%3Ccircle cx=%2217.4%22 cy=%2275.2%22 r=%221.1%22/%3E%3Cpath d=%22M0 0C2.6 -2.2 6 -2.2 8.2 0C6 2.2 2.6 2.2 0 0Z M1 0H7%22 transform=%22translate(24.3 89.5) rotate(-49.2)%22/%3E%3Cpath d=%22M0 0C2.6 -2.2 6 -2.2 8.2 0C6 2.2 2.6 2.2 0 0Z M1 0H7%22 transform=%22translate(26.7 97.0) rotate(-164.6)%22/%3E%3Cpath d=%22M0 0C2.6 -2.2 6 -2.2 8.2 0C6 2.2 2.6 2.2 0 0Z M1 0H7%22 transform=%22translate(29.9 104.5) rotate(-59.3)%22/%3E%3Ccircle cx=%2234.8%22 cy=%2296.3%22 r=%221.1%22/%3E%3Cpath d=%22M0 0C2.6 -2.2 6 -2.2 8.2 0C6 2.2 2.6 2.2 0 0Z M1 0H7%22 transform=%22translate(32.0 112.0) rotate(-149.7)%22/%3E%3Cpath d=%22M0 0C2.6 -2.2 6 -2.2 8.2 0C6 2.2 2.6 2.2 0 0Z M1 0H7%22 transform=%22translate(31.7 119.5) rotate(-26.8)%22/%3E%3Cpath d=%22M0 0C2.6 -2.2 6 -2.2 8.2 0C6 2.2 2.6 2.2 0 0Z M1 0H7%22 transform=%22translate(29.3 127.0) rotate(-119.4)%22/%3E%3Ccircle cx=%2224.6%22 cy=%22118.7%22 r=%221.1%22/%3E%3Cpath d=%22M0 0C2.6 -2.2 6 -2.2 8.2 0C6 2.2 2.6 2.2 0 0Z M1 0H7%22 transform=%22translate(26.1 134.5) rotate(-16.7)%22/%3E%3Cpath d=%22M0 0C2.6 -2.2 6 -2.2 8.2 0C6 2.2 2.6 2.2 0 0Z M1 0H7%22 transform=%22translate(24.0 142.0) rotate(-134.3)%22/%3E%3Cpath d=%22M0 0C2.6 -2.2 6 -2.2 8.2 0C6 2.2 2.6 2.2 0 0Z M1 0H7%22 transform=%22translate(24.3 149.5) rotate(-49.2)%22/%3E%3Ccircle cx=%2230.5%22 cy=%22142.3%22 r=%221.1%22/%3E%3Cpath d=%22M0 0C2.6 -2.2 6 -2.2 8.2 0C6 2.2 2.6 2.2 0 0Z M1 0H7%22 transform=%22translate(26.7 157.0) rotate(-164.6)%22/%3E%3Cpath d=%22M28 26.4l2.6 2.6l-2.6 2.6l-2.6 -2.6z%22/%3E%3Cpath d=%22M28 168.4l2.6 2.6l-2.6 2.6l-2.6 -2.6z%22/%3E%3C/g%3E%3C/defs%3E%3Cuse href=%22%23t%22 transform=%22translate(.8 .8)%22 stroke=%22%231d0e03%22 stroke-opacity=%22.7%22/%3E%3Cuse href=%22%23t%22 stroke=%22%23ecca78%22 stroke-opacity=%22.95%22/%3E%3C/svg%3E") left top / 56px 200px repeat-y,
        url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22140%22 height=%22140%22%3E%3Cfilter id=%22n%22 x=%220%22 y=%220%22 width=%22100%25%22 height=%22100%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.75%22 numOctaves=%222%22 stitchTiles=%22stitch%22 seed=%224%22/%3E%3CfeColorMatrix values=%220 0 0 0 .95  0 0 0 0 .72  0 0 0 0 .38  .8 0 0 0 -.3%22/%3E%3C/filter%3E%3Crect width=%22140%22 height=%22140%22 filter=%22url(%23n)%22/%3E%3C/svg%3E") 0 0 / 140px 140px,
        var(--leather);
      border-right: 1px solid rgba(29,14,3,.6);
      box-shadow: inset 4px 0 6px -4px rgba(20,8,0,.5), inset -5px 0 7px -4px rgba(20,8,0,.55);
    }
    .spine-title {
      display: flex;
      position: absolute; top: 0; left: 0;
      width: 56px; height: 460px; padding: 50px 0;
      writing-mode: vertical-rl;
      align-items: center; justify-content: center; gap: 12px;
      color: #f0d68c;
      text-shadow: 0 1px 1px rgba(20,8,0,.8);
      background:
        url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2256%22 height=%22460%22 viewBox=%220 0 56 460%22%3E%3Cdefs%3E%3Cstyle%3E%2A%7Bvector-effect:non-scaling-stroke%7D%3C/style%3E%3ClinearGradient id=%22b%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23f6dc92%22 stop-opacity=%22.55%22/%3E%3Cstop offset=%22.5%22 stop-color=%22%23f6dc92%22 stop-opacity=%220%22/%3E%3Cstop offset=%221%22 stop-color=%22%231d0e03%22 stop-opacity=%22.55%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x=%220%22 y=%2215%22 width=%2256%22 height=%227%22 fill=%22url(%23b)%22/%3E%3Cpath d=%22M0 15.5H56%22 stroke=%22%23ecca78%22 stroke-opacity=%22.75%22/%3E%3Cpath d=%22M0 22.5H56%22 stroke=%22%231d0e03%22 stroke-opacity=%22.7%22/%3E%3Cdefs%3E%3Cg id=%22t%22 fill=%22none%22%3E%3Cpath d=%22M0 5H56M0 10H56%22 stroke-width=%221%22/%3E%3Crect x=%227%22 y=%2230%22 width=%2242%22 height=%22400%22/%3E%3Crect x=%229%22 y=%2232%22 width=%2238%22 height=%22396%22 stroke-width=%22.6%22/%3E%3Cpath d=%22M28 37.4l2.6 2.6l-2.6 2.6l-2.6 -2.6z%22/%3E%3Cpath d=%22M28 417.4l2.6 2.6l-2.6 2.6l-2.6 -2.6z%22/%3E%3Cpath d=%22M0 454 H56M0 450 H56%22 stroke-width=%221%22/%3E%3C/g%3E%3C/defs%3E%3Cuse href=%22%23t%22 transform=%22translate(.8 .8)%22 stroke=%22%231d0e03%22 stroke-opacity=%22.7%22/%3E%3Cuse href=%22%23t%22 stroke=%22%23ecca78%22 stroke-opacity=%22.95%22/%3E%3C/svg%3E") left top / 56px 460px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22140%22 height=%22140%22%3E%3Cfilter id=%22n%22 x=%220%22 y=%220%22 width=%22100%25%22 height=%22100%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.75%22 numOctaves=%222%22 stitchTiles=%22stitch%22 seed=%224%22/%3E%3CfeColorMatrix values=%220 0 0 0 .95  0 0 0 0 .72  0 0 0 0 .38  .8 0 0 0 -.3%22/%3E%3C/filter%3E%3Crect width=%22140%22 height=%22140%22 filter=%22url(%23n)%22/%3E%3C/svg%3E") 0 0 / 140px 140px,
        var(--leather);
      border-right: 1px solid rgba(29,14,3,.6);
      box-shadow: inset 4px 0 6px -4px rgba(20,8,0,.5), inset -5px 0 7px -4px rgba(20,8,0,.55);
      opacity: var(--spine, .92);
      z-index: -1;
      pointer-events: none;
      white-space: nowrap;
      overflow: hidden;
    }
    .spine-title b { font: 700 15px "Cinzel Decorative", Georgia, serif; letter-spacing: .2em; }
    .spine-title i { width: 4px; height: 4px; border: 1px solid currentColor; transform: rotate(45deg); opacity: .9; }
    .spine-title em { font: italic 700 12.5px "Cormorant Garamond", Georgia, serif; letter-spacing: .08em; }
  }

/* ---- the page ---- */
.book .leaf {
  position: relative; isolation: isolate; padding: 62px 78px 70px 22px;
  background-repeat: repeat-y, repeat-x, repeat-x;
  background-position: right top, left top, left bottom;
  background-size: 54px 1200px, 1200px 54px, 1200px 54px;
}
.book .leaf::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-repeat: no-repeat; }
.book .l8 { background-image: url("images/pages/p8-r.svg"), url("images/pages/p8-t.svg"), url("images/pages/p8-b.svg"); }
@media (min-width: 1100px) {
  .book .page { max-width: none; margin: 0 0 0 56px; padding: 17px 56px 60px 0; }
  .book .leaf { padding-left: max(22px, calc((100% - 1054px) / 2)); padding-right: calc(max(22px, calc((100% - 1054px) / 2)) + 54px); }
  /* the floating back button sits just inside the page, beside the binding */
  .book .page > .back-link { top: 84px; left: 76px; }
}
@media (max-width: 760px) {
  .book .leaf { padding: 34px 40px 42px 10px; background-size: 30px 667px, 667px 30px, 667px 30px; }
  .book .leaf::before { display: none; }
}