/* The selected printed-comic treatment; decoration never intercepts input. */
:root {
  --paper-image: url('assets/decor/aged-paper.webp');
  --paper-side: max(var(--page-gutter), calc((100vw - var(--page-width)) / 2));
}
body {
  background-color: var(--paper);
  background-image: var(--paper-image);
  background-size: 100% 100svh;
  background-position: center top;
  background-repeat: repeat-y;
  background-attachment: fixed;
}
.paper-details { pointer-events: none; position: fixed; inset: 0; z-index: 35; }
.paper-surface { pointer-events: none; position: fixed; inset: 0; z-index: 0; }
main, footer, .edition-line { position: relative; z-index: 1; }
.reader-page .masthead { position: relative; z-index: 2; }
.binding-staple {
  position: absolute;
  left: clamp(14px, 1.5vw, 32px);
  width: 10px;
  height: clamp(64px, 7.5vh, 96px);
  border: 2px solid #36352c;
  border-radius: 7px;
  background: linear-gradient(90deg, #615f51, #d5d2bc 35%, #f4efdb 50%, #8c8977 65%, #4e4d43);
  box-shadow: 2px 1px 2px #25251f40, inset 1px 0 #fff8;
  transform: rotate(-.7deg);
}
.binding-staple::before, .binding-staple::after {
  content: ''; position: absolute; left: -3px; width: 12px; height: 6px;
  background: #302e244d; border-radius: 50%; z-index: -1;
}
.binding-staple::before { top: -4px; }
.binding-staple::after { bottom: -4px; }
.staple-top { top: 9vh; }
.staple-bottom { top: 41vh; transform: rotate(.6deg); }
.coffee-ring {
  position: absolute; right: -82px; top: 58vh; width: 190px; height: 210px;
  border: 5px solid #98632d29; border-radius: 47% 52% 45% 54%;
  box-shadow: inset 2px -3px 0 #a5784020, 3px 1px 0 #a578401c;
  transform: rotate(-18deg);
  mask-image: conic-gradient(from 20deg, #000 0 80deg, #0004 95deg, #000 115deg 210deg, transparent 235deg, #000 265deg);
}
.page-curl {
  position: absolute; right: 5px; bottom: 5px; width: clamp(64px, 7vw, 124px); aspect-ratio: 1;
  background: linear-gradient(135deg, transparent 45%, #8e7b5244 48%, #b9a57d 49%, #f8f0d9 55%, #e3d3af 65%, #faf2dc 77%);
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
  filter: drop-shadow(-2px -2px 1px #342c242e);
}
.page-curl::after {
  content: ''; position: absolute; width: 140%; height: 1px;
  background: #91805d70; transform: rotate(-45deg); left: -20%; top: 52%;
}
/* Match the fixed paper behind the masthead to the actual page underneath. */
.opening-header, .opening-header .masthead-bottom { background: transparent; }
.opening-header::before {
  position: fixed; inset: 0 0 auto;
  height: calc(var(--header-clearance, 252px) - 24px);
  box-shadow: none; clip-path: none;
  background-color: var(--paper);
  background-image: var(--paper-image);
  background-size: 100% 100svh;
  background-position: center top;
  background-repeat: no-repeat;
}
.paw-trail { pointer-events: none; position: absolute; inset: 0; z-index: 1; }
.paw-print {
  position: absolute; left: var(--paw-x, 0); top: var(--paw-y);
  width: clamp(24px, 1.7vw, 37px); height: clamp(33px, 2.3vw, 50px);
  background: url('assets/decor/paw.svg') center / contain no-repeat;
  transform: rotate(var(--paw-turn)); opacity: .46;
}
.paw-margin { left: calc(24px - var(--paper-side) + var(--paw-offset)); }
.paw-print:nth-child(3n) { opacity: .33; }
.paw-print:nth-child(4n) { opacity: .55; }
.paw-print.will-print { opacity: 0; transition: opacity .65s ease; }
.paw-print.will-print.is-printed { opacity: .46; }
.home-collage::before, .home-collage::after {
  content: ''; position: absolute; width: 48px; height: 80px; pointer-events: none;
  background: url('assets/decor/ink-strokes.svg') center / contain no-repeat; opacity: .68;
}
.home-collage::before { left: -38px; top: 7%; transform: rotate(15deg); }
.home-collage::after { right: -36px; top: 11%; transform: scaleX(-1) rotate(15deg); }
.read-button, .solid-button { position: relative; }
.read-button::after, .solid-button::after {
  content: ''; position: absolute; inset: 3px; pointer-events: none;
  border: 1px dashed #25251f70;
  mask-image: linear-gradient(115deg, #000 0 3%, transparent 9% 88%, #000 96%);
}
@media (max-width: 1400px) {
  .paw-print { width: 24px; height: 34px; }
  .paw-margin { left: calc(12px - var(--paper-side) + var(--paw-offset) * .5); }
  .coffee-ring { opacity: .65; }
}
@media (max-width: 1100px) {
  .paw-bottom { display: none; }
  .binding-staple { left: 10px; width: 8px; }
  .coffee-ring { display: none; }
  .home-collage::before, .home-collage::after { width: 30px; height: 52px; }
}
@media (max-width: 680px) {
  .binding-staple, .paw-trail { display: none; }
  .page-curl { width: 28px; right: 2px; bottom: 2px; opacity: .7; }
  .home-collage::before { left: -20px; }
  .home-collage::after { right: -20px; }
}
@media (prefers-reduced-motion: reduce) {
  .paw-print.will-print { opacity: .46; transition: none; }
}