/* Twenty individually painted parchment sheets; dark ink over a clean paper center. */
:root{--scroll-x:0%;--scroll-y:0%}
.story-paper.parchment{isolation:isolate;background:none!important;border:0!important;border-image:none!important;box-shadow:none!important;border-radius:0;padding:clamp(80px,10vw,135px) clamp(34px,9vw,110px) clamp(85px,10vw,140px);color:#352719}
.story-paper.parchment::before{display:block;content:'';position:absolute;inset:0;z-index:-1;border:0;border-radius:0;background:url('media/parchment-atlas-v32.png') var(--scroll-x) var(--scroll-y)/400% 500% no-repeat;filter:drop-shadow(0 12px 20px #0006);pointer-events:none}
.story-page .story-paper.parchment::before{background-image:url('/media/parchment-atlas-v32.png')}
.story-paper.parchment::after{display:none!important}
.story-paper .story-dialogue{line-height:1.8}.story-paper p{overflow-wrap:break-word}
.rolled-scroll{isolation:isolate;display:flex;flex-direction:column;justify-content:center;min-height:155px;max-width:360px;margin:16px auto;padding:30px 40px;background:none!important;border:0;border-radius:0;box-shadow:none!important;color:#392719;text-shadow:none;text-align:center;font:600 17px/1.45 Georgia,serif}
.rolled-scroll::before{content:'';position:absolute;inset:0;width:100%;z-index:-1;border:0;border-radius:0;background:url('media/parchment-atlas-v32.png') var(--scroll-x) var(--scroll-y)/400% 500% no-repeat;filter:drop-shadow(0 6px 8px #0006)}
.rolled-scroll::after{display:none}.rolled-scroll small{font:12px/1.5 system-ui;margin-top:8px;color:#60482f}.rolled-scroll:hover{transform:translateY(-2px)}
.scroll-gallery-page{margin:0;min-height:100vh;background:radial-gradient(ellipse at top,#263531,#081411 70%);color:#f2dfb9;font-family:Georgia,serif}
.scroll-gallery-header{max-width:800px;margin:0 auto;padding:35px 24px 15px;text-align:center}.scroll-gallery-header h1{font-weight:400;font-size:clamp(28px,5vw,46px)}.scroll-gallery-header a{color:#e6ca91}.scroll-gallery-header p{line-height:1.6}
.scroll-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;width:min(1250px,94vw);margin:20px auto 50px}
.scroll-gallery-card{margin:0;text-align:center}.scroll-gallery-card>a{display:block;text-decoration:none;color:#f2dfb9}.scroll-gallery-card>a:focus-visible{outline:2px solid #edcc89;outline-offset:5px}
.scroll-skin-preview{display:block;aspect-ratio:1;background:url('media/parchment-atlas-v32.png') var(--scroll-x) var(--scroll-y)/400% 500% no-repeat;filter:drop-shadow(0 7px 12px #0006);transition:transform .2s}
.scroll-gallery-card>a:hover .scroll-skin-preview{transform:scale(1.025)}.scroll-gallery-card figcaption{font:13px/1.5 system-ui;padding:8px}
@media(max-width:650px){.scroll-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.story-paper.parchment{padding:70px 34px 85px}.story-paper .dialogue{font-size:17px!important}.rolled-scroll{min-height:145px;padding:28px 30px}.scroll-gallery-header{padding-top:24px}}
@media(prefers-reduced-motion:reduce){.scroll-skin-preview{transition:none}.rolled-scroll:hover{transform:none}}

/* v33: parchment is the actual text background, without a negative stacking layer. */
.story-paper.parchment,.rolled-scroll{background-image:url('/media/parchment-atlas-v32.png')!important;background-position:var(--scroll-x) var(--scroll-y)!important;background-size:400% 500%!important;background-repeat:no-repeat!important;box-sizing:border-box}
.story-paper.parchment::before,.rolled-scroll::before{display:none!important}
.story-paper.parchment{padding-left:clamp(42px,12%,125px)!important;padding-right:clamp(42px,12%,125px)!important;padding-top:clamp(105px,14vw,165px)!important;padding-bottom:clamp(105px,14vw,165px)!important}
.rolled-scroll{padding:35px 17%!important;min-height:175px}
.scroll-skin-preview{box-sizing:border-box;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:18% 17%;color:#392719;text-shadow:none}
.scroll-skin-preview strong{font:400 clamp(14px,2vw,23px)/1.3 Georgia,serif;margin-bottom:12px}
.scroll-skin-preview q{font:italic clamp(10px,1.2vw,14px)/1.5 Georgia,serif}
@media(max-width:650px){.story-paper.parchment{padding-left:14%!important;padding-right:14%!important;padding-top:85px!important;padding-bottom:90px!important}.story-heading h1{font-size:clamp(25px,6vw,36px)}.scroll-skin-preview strong{font-size:17px}.scroll-skin-preview q{font-size:11px}}
