/* Dearlist journal demo.
   Generated from the standalone test page and scoped to .dljd.
   Every rule is prefixed so the demo can share a page with the theme. */
@font-face{font-family:Mynerve;src:url(fonts/mynerve-greek.woff2)format("woff2");font-display:swap;
    unicode-range:U+0370-03FF,U+1F00-1FFF}
  @font-face{font-family:Mynerve;src:url(fonts/mynerve-latin.woff2)format("woff2");font-display:swap;
    unicode-range:U+0000-00FF,U+2000-206F,U+20AC}
  @font-face{font-family:Playpen;src:url(fonts/playpen-greek.woff2)format("woff2");font-display:swap;
    unicode-range:U+0370-03FF,U+1F00-1FFF}
  @font-face{font-family:Playpen;src:url(fonts/playpen-latin.woff2)format("woff2");font-display:swap;
    unicode-range:U+0000-00FF,U+2000-206F,U+20AC}

  .dljd{
    --ink:#3a332b; --muted:#94897a; --line:#ece2d2;
    --o:#e8934a; --t:#5fb3aa; --p:#ef8b8b; --v:#9b93dd; --y:#f3c44f;
    --pen:#33507a;
    --ratio:1.42041;              /* the real A5 leaf, 419.25 x 595.5 pt */
    --hand:Mynerve;
    --toy:Playpen,"Segoe UI",sans-serif;
  }
  .dljd *{box-sizing:border-box}
  .dljd{
    margin:0;padding:30px 20px 70px;color:var(--ink);
    font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    background:
      radial-gradient(circle at 12% 8%, rgba(232,147,74,.16), transparent 42%),
      radial-gradient(circle at 88% 22%, rgba(95,179,170,.15), transparent 40%),
      radial-gradient(circle at 70% 90%, rgba(155,147,221,.14), transparent 42%),
      radial-gradient(circle at 1.5px 1.5px, rgba(150,130,105,.16) 1.5px, transparent 1.5px) 0 0/26px 26px,
      #fdf7ec;
  }
  .dljd header{max-width:1140px;margin:0 auto 26px}
  .dljd header h1{
    font-family:var(--toy);margin:0 0 8px;font-size:27px;line-height:1.2;
    display:inline-block;position:relative;transform:rotate(-1.1deg);
  }
  .dljd header h1::after{                       /* highlighter swipe, same trick as the front page */
    content:"";position:absolute;left:-6px;right:-8px;bottom:1px;height:12px;z-index:-1;
    background:linear-gradient(90deg,rgba(243,196,79,.85),rgba(243,196,79,.55));
    border-radius:9px 12px 10px 8px;transform:rotate(-.6deg) skewX(-9deg);
  }
  .dljd header p{margin:0;color:var(--muted);font-size:14.5px;max-width:60ch}

  .dljd .stage{max-width:1140px;margin:0 auto;display:grid;
    grid-template-columns:minmax(0,570px) minmax(310px,1fr);gap:44px;align-items:start}
  @media (max-width:940px){.dljd .stage{grid-template-columns:1fr;gap:30px}}

  /* ---------------- the book ---------------- */
  .dljd .book{position:relative;perspective:2600px;transform:rotate(-.7deg)}
  .dljd .book::before, .dljd .book::after{            /* washi tape holding it down */
    content:"";position:absolute;top:-13px;width:78px;height:26px;z-index:12;
    background:repeating-linear-gradient(135deg,rgba(243,196,79,.82) 0 7px,rgba(232,147,74,.72) 7px 14px);
    box-shadow:0 1px 3px rgba(90,70,45,.22);
  }
  .dljd .book::before{left:-16px;transform:rotate(-24deg)}
  .dljd .book::after{right:-16px;transform:rotate(23deg)}

  .dljd .page{position:relative;width:100%;aspect-ratio:1/var(--ratio);
    /* pan-y, not none: the finger keeps scrolling the screen vertically over the
       book, while horizontal gestures are left to us for swiping pages */
    background:#fff;border-radius:2px 8px 8px 2px;overflow:hidden;touch-action:pan-y;
    box-shadow:0 1px 2px rgba(0,0,0,.10),0 22px 50px -16px rgba(70,55,35,.48)}
  .dljd .page>img.sheet{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;user-select:none}
  .dljd .page::after{content:"";position:absolute;left:0;top:0;bottom:0;width:24px;pointer-events:none;z-index:6;
    background:linear-gradient(90deg,rgba(150,135,110,.24),rgba(150,135,110,.05) 60%,transparent)}

  /* ---- the leaf that actually turns ----
     A single rotateY can only ever be a plank on a hinge. To bend, the leaf is
     sliced into vertical strips nested one inside the next, each rotated a
     little further than its parent. The rotations accumulate along the sheet,
     so the spine end stays nearly flat while the free edge curls -- which is
     what paper actually does. The strips share one image, each showing its own
     slice of it, and the light gradients are sized to the whole leaf so they
     run across the strips without seams. */
  .dljd .leaf{position:absolute;inset:0;z-index:10;transform-origin:left center;
    transform-style:preserve-3d;will-change:transform}
  .dljd .strip{position:absolute;top:0;left:100%;width:100%;height:100%;
    transform-origin:left center;transform-style:preserve-3d;
    transform:rotateY(calc(var(--a) * 0deg));
    animation:bend var(--dur,900ms) cubic-bezier(.33,.02,.24,1) both;
    animation-delay:var(--dl,0ms)}
  .dljd .strip.first{left:0;width:calc(100% / var(--n))}
  /* The leaf dissolves over the tail of its turn instead of being yanked out of
     the DOM. The fade sits on the faces, not on .leaf: an opacity below 1 forces
     a preserve-3d element to flatten, which would collapse the whole strip chain
     and snap the bend flat right at the end. */
  .dljd .fc{position:absolute;inset:0;overflow:hidden}

  /* Which face you see is decided by the clock, not by backface-visibility.
     Culling only works while the browser really keeps the 3D context, and inside
     a product page it does not always: it culled both faces and the leaf turned
     with nothing on it. The main rotation crosses 90 degrees at 53% of the
     animation either way, so each face is simply switched at that instant with a
     step-end animation. Deterministic, and it survives a flattened context. */
  .dljd .leaf.fwd .fc.front,
  .dljd .leaf.back .fc.back{
    animation:leaffade var(--dur,900ms) cubic-bezier(.5,0,.85,.3) both,
              faceOn var(--dur,900ms) step-end both;
    animation-delay:var(--dl,0ms),var(--dl,0ms)}
  .dljd .leaf.fwd .fc.back,
  .dljd .leaf.back .fc.front{
    animation:leaffade var(--dur,900ms) cubic-bezier(.5,0,.85,.3) both,
              faceOff var(--dur,900ms) step-end both;
    animation-delay:var(--dl,0ms),var(--dl,0ms)}
  @keyframes faceOn{0%{visibility:visible}53%{visibility:hidden}}
  @keyframes faceOff{0%{visibility:hidden}53%{visibility:visible}}
  /* Eased hard toward the end on purpose. A linear fade over the same window is
     already half gone while the leaf still has thirty degrees left to travel,
     which reads as vanishing mid-turn; this holds it solid through the motion
     and dissolves it in the last breath. */
  @keyframes leaffade{0%,76%{opacity:1}100%{opacity:0}}
  /* each strip is its own 3D layer, so neighbours can rasterise with a hairline
     between them; overlap by 1% from the left edge, which keeps the slice's own
     alignment while covering the seam */
  .dljd .fc.front{transform-origin:left center;transform:scaleX(1.01)}
  /* The back must read as one sheet. Anything with horizontal variation would
     restart inside every strip and paint ten separate cards, and a full-leaf
     layer cannot be reused here because the face is flipped by rotateY(180deg),
     which mirrors its contents. So the back is shaded top to bottom only, and
     the curve is carried entirely by the per-strip bend shading. */
  .dljd .fc.back{right:-1px;transform:rotateY(180deg);
    background:linear-gradient(#fffdf7,#f7f0e4 52%,#ece3d2)}
  /* every full-leaf layer is as wide as the whole page and slid left by the
     strip index, so the strips reassemble one continuous surface */
  .dljd .slice, .dljd .shade, .dljd .sheen{position:absolute;top:0;height:100%;
    width:calc(var(--n) * 100%);margin-left:calc(var(--i) * -100%);display:block}
  /* Themes ship a global `img{max-width:100%}` and Blocksy is one of them. It
     clamps the slice from ten page-widths down to a single strip, so every strip
     past the first slides its image out of its own clipped box and the turning
     sheet comes out empty -- while the shade and sheen, being spans, keep
     painting across the whole leaf. That is the washed-out sheet, not opacity. */
  .dljd .slice{max-width:none;max-height:none}
  .dljd .page>img.sheet{max-width:none;max-height:none}
  .dljd .shade{background:linear-gradient(100deg,rgba(88,68,44,.34),rgba(88,68,44,.03) 48%,transparent);
    opacity:0;animation:shade var(--dur,900ms) ease-in-out both;animation-delay:var(--dl,0ms)}
  .dljd .sheen{background:linear-gradient(104deg,transparent 34%,rgba(255,255,255,.5) 49%,transparent 64%);
    opacity:0;animation:sheen var(--dur,900ms) ease-in-out both;animation-delay:var(--dl,0ms)}
  /* Strips angled further from the light go darker, which is what sells the bend.
     Shading each strip a flat amount would step visibly, so each one ramps from
     its own joint to the next; neighbours share those endpoints, so the darkening
     runs continuously across the whole sheet. */
  .dljd .bendsh{position:absolute;inset:0;opacity:0;
    background:linear-gradient(90deg,
      rgba(63,48,24,calc(var(--v0) * .26)), rgba(63,48,24,calc(var(--v1) * .26)));
    animation:bendsh var(--dur,900ms) cubic-bezier(.33,.02,.24,1) both;
    animation-delay:var(--dl,0ms)}
  /* the back face is flipped by rotateY(180deg), so its ramp runs the other way */
  .dljd .fc.back .bendsh{background:linear-gradient(270deg,
      rgba(63,48,24,calc(var(--v0) * .34)), rgba(63,48,24,calc(var(--v1) * .34)))}

  @keyframes bend{
    0%{transform:rotateY(calc(var(--a) * 0deg))}
    18%{transform:rotateY(calc(var(--a) * 0.78deg))}
    46%{transform:rotateY(calc(var(--a) * 1deg))}
    74%{transform:rotateY(calc(var(--a) * 0.6deg))}
    100%{transform:rotateY(calc(var(--a) * 0deg))}}
  @keyframes bendsh{
    0%{opacity:0}18%{opacity:.78}46%{opacity:1}74%{opacity:.6}100%{opacity:0}}
  @keyframes sheen{0%{opacity:0;transform:translateX(-46%)}
    38%{opacity:.85}100%{opacity:0;transform:translateX(42%)}}
  @keyframes shade{0%{opacity:0}42%{opacity:1}100%{opacity:.3}}

  /* slow to pick up, quick through the middle, soft on landing */
  /* `both`, not `forwards`: with `forwards` a leaf still waiting out its delay
     gets no animated style at all and falls back to rotateY(0), so it sits flat
     on top of the book showing the wrong page until its turn comes. With `both`
     the 0% keyframe holds, which for a forward turn is exactly the stack of
     pages waiting to be lifted. */
  .dljd .leaf.fwd{animation:leafFwd var(--dur,900ms) cubic-bezier(.33,.02,.24,1) both;
    animation-delay:var(--dl,0ms)}
  .dljd .leaf.back{animation:leafBack var(--dur,900ms) cubic-bezier(.33,.02,.24,1) both;
    animation-delay:var(--dl,0ms)}
  @keyframes leafFwd{
    0%{transform:rotateY(0deg) rotateZ(0deg) translateZ(0)}
    12%{transform:rotateY(-11deg) rotateZ(.45deg) translateZ(9px)}
    30%{transform:rotateY(-42deg) rotateZ(1.1deg) translateZ(18px)}
    54%{transform:rotateY(-92deg) rotateZ(1.4deg) translateZ(24px)}
    76%{transform:rotateY(-138deg) rotateZ(.9deg) translateZ(17px)}
    92%{transform:rotateY(-168deg) rotateZ(.3deg) translateZ(6px)}
    100%{transform:rotateY(-177deg) rotateZ(0deg) translateZ(0)}}
  @keyframes leafBack{
    0%{transform:rotateY(-177deg) rotateZ(0deg) translateZ(0)}
    12%{transform:rotateY(-166deg) rotateZ(-.45deg) translateZ(9px)}
    30%{transform:rotateY(-135deg) rotateZ(-1.1deg) translateZ(18px)}
    54%{transform:rotateY(-85deg) rotateZ(-1.4deg) translateZ(24px)}
    76%{transform:rotateY(-39deg) rotateZ(-.9deg) translateZ(17px)}
    92%{transform:rotateY(-9deg) rotateZ(-.3deg) translateZ(6px)}
    100%{transform:rotateY(0deg) rotateZ(0deg) translateZ(0)}}

  /* the shadow the lifted leaf drops onto whatever is underneath */
  .dljd .cast{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;
    transform-origin:left center;
    background:linear-gradient(90deg,rgba(58,44,24,.46),rgba(58,44,24,.20) 20%,transparent 54%)}
  .dljd .cast.run{animation:castsweep var(--dur,820ms) cubic-bezier(.33,.02,.24,1) both}
  .dljd .cast.runback{animation:castback var(--dur,820ms) cubic-bezier(.33,.02,.24,1) both}
  @keyframes castsweep{
    0%{opacity:0;transform:scaleX(1)}
    26%{opacity:1;transform:scaleX(.92)}
    66%{opacity:.72;transform:scaleX(.6)}
    100%{opacity:0;transform:scaleX(.22)}}
  @keyframes castback{
    0%{opacity:0;transform:scaleX(.22)}
    34%{opacity:.72;transform:scaleX(.6)}
    74%{opacity:1;transform:scaleX(.92)}
    100%{opacity:0;transform:scaleX(1)}}

  /* corner that lifts on its own while we are still on the cover */
  .dljd .peelhint{position:absolute;right:0;bottom:0;width:74px;height:74px;z-index:7;display:none;
    pointer-events:none;border-radius:0 0 8px 0;
    background:linear-gradient(315deg,#f6efe1 42%,rgba(246,239,225,0) 43%);
    box-shadow:-5px -5px 14px rgba(70,55,35,.16);
    transform-origin:100% 100%;animation:peel 3.4s ease-in-out infinite}
  .dljd.at-cover .peelhint{display:block}
  @keyframes peel{0%,72%,100%{transform:scale(.35);opacity:.55}
    86%{transform:scale(1);opacity:1}}

  .dljd .ink{position:absolute;inset:0;z-index:3;pointer-events:none;font-family:var(--hand),cursive;color:var(--pen)}
  .dljd .reg{position:absolute}
  .dljd .reg .ln{margin:0}
  /* a region that is a printed box rather than a run of lines: the text sits in
     the middle of it however many lines it turns out to be */
  .dljd .reg.mid{display:flex;flex-direction:column;justify-content:center;text-align:center}

  /* biro drawings, drawn on rather than switched on, like the handwriting */
  .dljd .doodle{position:absolute;color:var(--pen);transform-origin:50% 50%}
  .dljd .doodle svg{display:block;width:100%;height:auto;max-width:none;overflow:visible}
  .dljd .doodle path{stroke-dasharray:var(--len,110);stroke-dashoffset:var(--len,110);
    animation:drawpath .62s cubic-bezier(.55,.06,.35,1) forwards}
  @keyframes drawpath{to{stroke-dashoffset:0}}
  .dljd .w{white-space:nowrap}
  .dljd .ch{display:inline-block;opacity:0;animation:showch .14s ease forwards}
  @keyframes showch{to{opacity:1}}
  .dljd .nib{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--pen);z-index:8;
    opacity:0;transition:opacity .2s;pointer-events:none;box-shadow:0 0 0 3px rgba(51,80,122,.16)}
  .dljd .nib.on{opacity:.85}

  .dljd .stickers{position:absolute;inset:0;z-index:4}
  /* a sticker owns every direction of its own drag, so it opts out of panning */
  .dljd .sticker{position:absolute;cursor:grab;user-select:none;touch-action:none;
    filter:drop-shadow(0 3px 4px rgba(70,60,45,.30));
    animation:drop .46s cubic-bezier(.2,1.5,.45,1) both}
  .dljd .sticker img{width:100%;height:auto;display:block;pointer-events:none}
  .dljd .sticker.dragging{cursor:grabbing;filter:drop-shadow(0 11px 15px rgba(70,60,45,.4));z-index:99}
  @keyframes drop{from{opacity:0;transform:var(--rot) scale(1.6) translateY(-20px)}
    to{opacity:1;transform:var(--rot) scale(1) translateY(0)}}

  .dljd .zoneview{position:absolute;inset:0;z-index:2;display:none}
  .dljd.show-zones .zoneview{display:block}
  .dljd .zoneview i{position:absolute;border:1.4px dashed rgba(232,115,74,.75);
    background:rgba(232,115,74,.07);border-radius:4px}
  .dljd .zoneview i.b{border-color:rgba(60,90,160,.5);background:rgba(60,90,160,.05)}

  .dljd .caption{text-align:center;font-family:var(--toy);font-size:15px;color:var(--muted);
    margin:22px 0 6px;transform:rotate(-.5deg)}
  /* position:relative so the buttons' offsetLeft is measured against the pager
     itself -- that is what demo.js scrolls by when the strip is one row */
  .dljd .pager{position:relative;display:flex;gap:5px;align-items:center;justify-content:center;flex-wrap:wrap}
  .dljd .pager button{flex:none;font:inherit;font-size:12px;width:27px;height:27px;padding:0;border-radius:50%;
    border:1.5px solid var(--line);background:#fff;cursor:pointer;color:var(--muted);transition:.14s}
  .dljd .pager button:hover{border-color:var(--o);color:var(--o);transform:translateY(-2px)}
  .dljd .pager button.wide{width:auto;padding:0 12px;border-radius:14px;font-size:11.5px}
  .dljd .pager button[aria-current="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

  /* ---------------- tray ---------------- */
  .dljd .card{background:#fff;border-radius:18px;padding:20px;margin-bottom:18px;
    box-shadow:0 3px 18px rgba(90,70,45,.12)}
  .dljd .card:nth-of-type(1){transform:rotate(.4deg)}
  .dljd .card:nth-of-type(2){transform:rotate(-.4deg)}
  .dljd .card h4{font-family:var(--toy);margin:0 0 3px;font-size:16px}
  .dljd .card .hint{margin:0 0 14px;font-size:13px;color:var(--muted)}

  .dljd .tasks{display:flex;flex-direction:column;gap:7px}
  .dljd .task{font:inherit;font-size:14px;padding:10px 13px;border-radius:12px;cursor:pointer;text-align:left;
    border:1.5px solid var(--line);background:#fffdf9;display:flex;align-items:center;gap:10px;
    transition:transform .16s cubic-bezier(.3,1.5,.5,1),background .14s,border-color .14s}
  .dljd .task .dot{width:11px;height:11px;border-radius:50%;flex:none;background:var(--c)}
  .dljd .task span.lbl{flex:1}
  .dljd .task em{font-style:normal;opacity:.55;font-size:11.5px;white-space:nowrap}
  .dljd .task:hover{background:#fff;border-color:var(--c);transform:rotate(-.8deg) translateX(3px)}
  .dljd .task[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff;transform:rotate(.5deg)}
  .dljd .task[aria-pressed="true"] em{opacity:.7}

  .dljd .pack{border:1.5px solid var(--line);border-radius:14px;margin-bottom:10px;overflow:hidden;background:#fffdf9}
  .dljd .pack.open{border-color:var(--o);box-shadow:0 3px 12px rgba(90,70,45,.12)}
  .dljd .pack-head{display:flex;gap:13px;align-items:center;width:100%;padding:11px;
    background:none;border:0;font:inherit;text-align:left;cursor:pointer}
  .dljd .pack-head:hover{background:#fff}
  .dljd .cover{position:relative;width:62px;height:62px;flex:none}
  .dljd .cover>img.face{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:3;
    border-radius:10px;box-shadow:0 1px 5px rgba(70,60,45,.3);transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
  .dljd .peek{position:absolute;left:50%;top:50%;width:36px;z-index:1;pointer-events:none;
    transform:translate(-50%,-50%) translate(calc(var(--tx)*.35),calc(var(--ty)*.35)) rotate(var(--r));
    animation:nudge 3.6s ease-in-out infinite;animation-delay:var(--d);
    filter:drop-shadow(0 1px 2px rgba(70,60,45,.3))}
  @keyframes nudge{
    0%,68%,100%{transform:translate(-50%,-50%) translate(calc(var(--tx)*.35),calc(var(--ty)*.35)) rotate(var(--r))}
    84%{transform:translate(-50%,-50%) translate(calc(var(--tx)*.72),calc(var(--ty)*.72)) rotate(var(--r))}}
  .dljd .pack-head:hover .peek{animation:none;
    transform:translate(-50%,-50%) translate(var(--tx),var(--ty)) rotate(var(--r));
    transition:transform .26s cubic-bezier(.3,1.4,.5,1)}
  .dljd .pack-head:hover>.cover>img.face{transform:rotate(-4deg) scale(.96)}
  .dljd .pack.open .peek{opacity:0;transition:opacity .2s}
  .dljd .pack-info{flex:1;min-width:0}
  .dljd .pack-info b{display:block;font-size:13.5px;font-weight:600;line-height:1.3}
  .dljd .pack-info span{font-size:12.5px;color:var(--muted)}
  .dljd .chev{flex:none;color:var(--muted);transition:transform .28s}
  .dljd .pack.open .chev{transform:rotate(180deg)}
  .dljd .pack-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .36s ease}
  .dljd .pack.open .pack-body{grid-template-rows:1fr}
  .dljd .pack-body>div{overflow:hidden}
  .dljd .body-in{padding:4px 11px 13px}
  .dljd .buyline{display:flex;align-items:center;gap:10px;margin:0 0 11px;flex-wrap:wrap}
  .dljd .price{font-family:var(--toy);font-size:18px;font-weight:700}
  .dljd .buy{background:var(--o);color:#fff;text-decoration:none;padding:8px 16px;border-radius:999px;
    font-size:13.5px;font-weight:600;box-shadow:0 2px 0 rgba(160,95,40,.45)}
  .dljd .buy:hover{filter:brightness(.95);transform:translateY(1px);box-shadow:0 1px 0 rgba(160,95,40,.45)}
  .dljd .chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px}
  .dljd .chip{background:#fffdf9;border:1.5px solid var(--line);border-radius:12px;padding:8px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;min-height:58px;
    transition:transform .14s cubic-bezier(.3,1.5,.5,1),border-color .12s;
    animation:spill .36s cubic-bezier(.2,1.4,.5,1) both}
  @keyframes spill{from{opacity:0;transform:translateY(-11px) rotate(-6deg) scale(.8)}to{opacity:1}}
  .dljd .chip:hover{transform:rotate(-4deg) scale(1.06);border-color:var(--o)}
  .dljd .chip:disabled{opacity:.3;cursor:default;transform:none}
  .dljd .chip img{max-width:100%;max-height:42px;display:block}
  .dljd .soon{margin:0;font-size:13px;color:var(--muted)}
  .dljd .tools{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
  .dljd .tools button{font:inherit;font-size:13px;padding:8px 13px;border-radius:10px;
    border:1.5px solid var(--line);background:#fffdf9;cursor:pointer}
  .dljd .tools button:hover{background:#fff;border-color:var(--o)}
  .dljd .tools label{font-size:13px;color:var(--muted)}
  .dljd select{font:inherit;font-size:13px;padding:7px 9px;border-radius:10px;border:1.5px solid var(--line);background:#fff}
  .dljd .note{max-width:1140px;margin:26px auto 0;font-size:13px;color:var(--muted)}

  /* ---------------- phone ----------------
     On a phone every row of furniture under the book is stolen from the page,
     and the page is the whole point: the handwriting is unreadable if the sheet
     is small. So the pager becomes one scrolling row instead of three wrapped
     ones, the washi tape shrinks to match the smaller sheet, and the "swipe to
     turn" line is gone -- the page-turn animation already teaches the gesture.
     The height freed goes to the page and nowhere else; the tray below must not
     be pushed further down. */
  @media (max-width:940px){
    .dljd .book::before, .dljd .book::after{width:52px;height:18px;top:-9px}
    .dljd .book::before{left:-10px}
    .dljd .book::after{right:-10px}
    .dljd .caption{margin:10px 0 5px;font-size:14px}
    /* `width:0;min-width:100%`, not `width:100%`. Once the row is nowrap its
       max-content width is all 24 buttons, ~900px, and that is what its
       ancestors get sized to — the sheet then sits off the right edge of the
       screen. A percentage min-width does not count towards intrinsic width, so
       this makes the strip contribute nothing and still fill the row.
       min-width:0 on the ancestors does NOT fix it; it was tried. */
    .dljd .pager{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;
      width:0;min-width:100%;scrollbar-width:none;-ms-overflow-style:none;
      padding:1px 2px 3px;scroll-padding-inline:12px;overscroll-behavior-x:contain}
    .dljd .pager::-webkit-scrollbar{display:none}
  }

/* ---------------- trigger button on the product page ----------------
   This one lives in the theme's house, not the demo's, so it borrows the
   theme's own button tokens rather than inventing a look: same font, same
   size and weight, same 3px corners, same coral, full width under the cart
   row. The literals are only fallbacks for if Blocksy stops publishing a var.

   It is deliberately the *outline* version of the add-to-cart button. Filled
   and coral, side by side, it would compete with the one button on the page
   that takes the money; hollow reads as "the other thing you can do here"
   without shouting. The old pill -- orange gradient, 999px corners, a hard 3D
   drop shadow, system-ui -- matched nothing on the site and read as a
   third-party widget dropped into the page. */
.dljd-open{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;margin:14px 0 8px;
  font-family:var(--theme-font-family,"Open Sans",sans-serif);
  font-size:var(--theme-button-font-size,15px);
  font-weight:var(--theme-button-font-weight,500);
  line-height:1.3;
  /* Match the add-to-cart button's height so the two stack as equals. Blocksy
     gives it 55px on desktop and drops to --theme-button-min-height (40px) at
     its mobile breakpoint, 689.98px. That 55px is set on the cart button itself,
     inside form.cart, so a sibling cannot inherit it -- hence the second rule
     below rather than a plain var(). Measured, not guessed: the flip is between
     689px and 691px. */
  min-height:55px;padding:var(--theme-button-padding,5px 20px);
  border-radius:3px;cursor:pointer;
  border:1.5px solid var(--theme-button-background-initial-color,#ff7171);
  background:transparent;
  color:var(--theme-button-background-initial-color,#ff7171);
  transition:background-color .12s cubic-bezier(.455,.03,.515,.955),
             color .12s cubic-bezier(.455,.03,.515,.955),
             border-color .12s cubic-bezier(.455,.03,.515,.955);
}
/* A tint on hover, not a fill. Filling it coral makes two identical solid bars
   stacked on each other and you can no longer tell which one buys the diary. */
.dljd-open:hover{
  background:rgba(255,113,113,.09);
  background:color-mix(in srgb, var(--theme-button-background-initial-color,#ff7171) 10%, transparent);
  border-color:var(--theme-button-background-hover-color,#ff4646);
  color:var(--theme-button-background-hover-color,#ff4646);
}
.dljd-open:active{
  background:rgba(255,113,113,.18);
  background:color-mix(in srgb, var(--theme-button-background-initial-color,#ff7171) 18%, transparent);
}
.dljd-open:focus-visible{outline:2px solid var(--theme-palette-color-3,#504e4a);outline-offset:2px}
/* stroked, in currentColor, so it flips with the text on hover. An emoji here
   was half the reason the button looked bolted on: nothing else on this site
   puts one in a button. */
.dljd-open .dljd-open-ico{width:20px;height:20px;flex:none}
@media (max-width:689.98px){
  .dljd-open{min-height:var(--theme-button-min-height,40px)}
}
.dljd-open-note{margin:0 0 14px;font-size:13px;text-align:center;
  color:var(--theme-text-color,#504e4a);opacity:.7}

/* ---------------- modal shell ---------------- */
.dljd-modal{position:fixed;inset:0;z-index:999999;display:none}
.dljd-modal.on{display:block}
.dljd-modal .dljd-back{position:absolute;inset:0;background:rgba(48,36,20,.58);
  animation:dljdFade .22s ease both}
/* Nothing above the book may scroll or clip.
   The turning leaf is a real 3D construction, and a scrolling ancestor has to
   clip, which makes the browser composite that subtree on its own and flatten
   the 3D inside it -- the leaf then turns with no artwork on it. The standalone
   test page works precisely because the document scrolls and no wrapper does.
   So the modal reproduces that: the panel fills the viewport and does not
   scroll, the book is sized to the height it is given, and the only scroller is
   the tray, which is the book's sibling rather than its ancestor. */
.dljd-modal .dljd-panel{position:absolute;inset:0;overflow:visible}
@keyframes dljdFade{from{opacity:0}to{opacity:1}}

.dljd-modal .dljd{height:100%;display:flex;flex-direction:column;padding:16px 22px 10px}
.dljd-modal .dljd header{flex:none;margin-bottom:12px;padding-right:54px}
.dljd-modal .dljd .stage{flex:1;min-height:0;align-items:stretch;gap:30px}
.dljd-modal .dljd .stage>div{min-height:0}
/* align-items:center keeps the book column from stretching, so .book shrinks to
   the page and the leaf, which is inset:0 on .book, keeps the page's geometry */
.dljd-modal .dljd .stage>div:first-child{display:flex;flex-direction:column;align-items:center}
.dljd-modal .dljd .book{flex:1;min-height:0;width:-moz-fit-content;width:fit-content}
.dljd-modal .dljd .page{height:100%;width:auto;max-width:100%}
.dljd-modal .dljd .stage>div:last-child{overflow-y:auto;overscroll-behavior:contain;padding-right:4px}
.dljd-modal .dljd .note{display:none}
.dljd-modal .dljd .caption{margin:14px 0 5px}

@media (max-width:940px){
  .dljd-modal .dljd{padding:12px 12px 6px}
  .dljd-modal .dljd header{margin-bottom:8px}
  .dljd-modal .dljd header h1{font-size:20px}
  .dljd-modal .dljd header p{display:none}
  .dljd-modal .dljd .stage{display:flex;flex-direction:column;gap:10px}
  /* The book column keeps its share of the viewport: the caption and the pager
     under it got shorter, so the sheet grows into what they gave back and the
     tray starts at the same height as before.
     The +20px is the second line the tray's first hint used to wrap onto. It is
     an absolute length, not a bigger percentage, because it is paying back one
     line of text and a line is the same height on every phone: the tray moves
     down by exactly what its own content lost, so the first task does not move. */
  .dljd-modal .dljd .stage>div:first-child{flex:none;height:calc(58% + 20px)}
  .dljd-modal .dljd .stage>div:last-child{flex:1}
  .dljd-modal .dljd .caption{margin:7px 0 4px}
}

.dljd-close{
  position:fixed;top:12px;right:12px;z-index:5;
  width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.92);color:#3a332b;font-size:22px;line-height:1;
  box-shadow:0 2px 10px rgba(60,45,25,.3);
}
.dljd-close:hover{background:#fff;transform:scale(1.06)}

/* the page behind must not scroll while the modal is open */
html.dljd-lock,body.dljd-lock{overflow:hidden}

/* the demo fills its panel rather than a whole document */
.dljd{min-height:100%}