/* Printed scraps live on the handwritten notebook page. */
.pages:has(.quote-page:not([hidden])) { padding-top:64px; }
.pages:has(.quote-page:not([hidden])) h1 { font-size:34px; margin-bottom:16px; }
.pages:has(.quote-page:not([hidden])) .page-meta { margin-bottom:0; }
.scrapbook-spread { --scrap:#faf9f5; --print:#1c1916; --book-type:'Times New Roman',Times,serif; position:relative; padding:15px 3px 0; isolation:isolate; }
.quote-clipping { position:relative; padding:17px 18px 16px; background:var(--scrap); color:var(--print); box-shadow:1px 2px 3px #33291c20,2px 5px 8px #33291c12; transform:rotate(-1deg); }
.quote-clipping::before,.companion-clipping::after { content:''; position:absolute; inset:0; pointer-events:none; opacity:.055; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23paper)' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
.paper-tape { position:absolute; z-index:2; width:86px; height:27px; left:calc(50% - 43px); top:-12px; background:linear-gradient(94deg,#b7805940,#cfaa7d77 20%,#d5b8898c 65%,#b98d6455); border-inline:1px solid #d2be9166; box-shadow:0 1px 1px #7b63371a; transform:rotate(5deg); pointer-events:none; }
.quote-copy { margin:0; font:700 22px/1.28 var(--book-type); letter-spacing:0; text-wrap:pretty; overflow-wrap:break-word; }
.quote-copy::before { content:none; }
.quote-source { min-height:0; margin:13px 0 0; font:italic 14px/1.4 var(--book-type); letter-spacing:0; text-transform:none; color:inherit; }
.long-quote .quote-copy { font-size:21px; }
.companion-clipping { position:relative; width:90%; margin:26px 0 2px auto; padding:15px 17px; background:#fcfcfa; box-shadow:1px 2px 4px #40342c20; transform:rotate(1deg); }
.companion-clipping::before { content:''; position:absolute; left:-13px; top:4px; width:47px; height:19px; background:#d1bfa799; transform:rotate(-39deg); pointer-events:none; }
.companion-clipping blockquote { margin:0; color:#1c1916; font:700 21px/1.28 var(--book-type); letter-spacing:0; text-wrap:pretty; overflow-wrap:break-word; }
.companion-clipping p { margin:12px 0 0; color:#302b25; font:italic 14px/1.4 var(--book-type); }
[data-style="aged"] { --scrap:#dec8aa; --print:#3e2d20; }
[data-style="aged"] .quote-clipping { background:linear-gradient(105deg,#9d724c12,transparent 45%,#fff2),var(--scrap); transform:rotate(.8deg); }
[data-style="aged"] .companion-clipping { transform:rotate(-1deg); }
.quote-controls { margin-top:26px; padding-top:6px; }
.quote-count { font-size:13px; }
.has-original .quote-clipping { padding:0; background:none; }
.has-original .quote-clipping::before { display:none; }
.quote-image-button { position:relative; display:block; width:100%; padding:0; border:0; background:transparent; cursor:zoom-in; }
.quote-image-button img { display:block; width:100%; height:auto; }
.quote-image-button > span { position:absolute; right:5px; bottom:5px; display:grid; place-items:center; width:25px; height:25px; border-radius:50%; background:#fff8e9e6; color:#403527; font:18px/1 var(--hand); box-shadow:0 1px 3px #0002; }
.clipping-dialog { width:min(1000px,calc(100vw - 28px)); max-height:calc(100svh - 28px); padding:20px; border:1px solid #b3a894; border-radius:3px; background:#eee7d7; box-shadow:0 25px 100px #0006; color:#302b25; }
.clipping-dialog::backdrop { background:#161711ad; backdrop-filter:blur(4px); }
.clipping-close { display:block; width:36px; height:36px; margin:0 0 14px auto; border:1px solid #b3a894; border-radius:50%; background:#fffdf4; cursor:pointer; font:24px/1 var(--ui); }
#clipping-full-image { display:block; width:100%; max-height:70svh; object-fit:contain; }
.clipping-dialog details { margin-top:18px; font:14px/1.5 var(--ui); }
.clipping-dialog summary { cursor:pointer; }
#clipping-transcript { margin:18px 0 0; font:20px/1.55 Georgia,'Times New Roman',serif; }
@media (max-width:650px) {
  .quote-clipping { padding:15px; }
  .quote-copy { font-size:21px; }
  .long-quote .quote-copy { font-size:20px; }
  .companion-clipping { width:94%; padding:15px; }
  .companion-clipping blockquote { font-size:20px; }
}