.paper-atelier { max-width: 1250px !important; width: min(1250px,calc(100% - 72px)); }
.paper-atelier .atelier-intro { margin-bottom: 75px; }
.paper-atelier .paper-help { font-size: .8rem; color: #bcae95 !important; margin-top: 25px; }
.paper-table { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); padding: 20px 25px 70px; isolation: isolate; }
.paper { --tilt: -5deg; appearance: none; font: inherit; text-align: left; position: relative; display: flex; flex-direction: column; min-width: 0; height: 355px; padding: 20px; margin: -15px -12px; border: 0; border-radius: 1px; color: #282a27; background: #e4dbc4; background-image: linear-gradient(125deg,#ffffff40,transparent 55%,#745a2315); box-shadow: 2px 8px 12px #0008,0 1px 2px #000b; transform: rotate(var(--tilt)); transition: transform .3s ease,box-shadow .3s ease; cursor: pointer; z-index: 1; }
.paper:nth-child(3n+2) { --tilt: 7deg; background-color: #d7e0db; top: 25px; }
.paper:nth-child(3n) { --tilt: -3deg; top: -5px; }
.paper:nth-child(4n) { --tilt: 4deg; background-color: #e9e0ce; }
.paper:nth-child(5n) { --tilt: -8deg; }
.paper::before { content: ''; position: absolute; width: 88px; height: 26px; background: #c2ad7d80; left: 39%; top: -12px; transform: rotate(-8deg); box-shadow: 0 1px 1px #0001; }
.paper:nth-child(even)::before { display: none; }
.paper-number { font: 9px/1.3 monospace; letter-spacing: .14em; color: #736b58; margin-bottom: 12px; }
.paper img { width: 100%; height: 215px; object-fit: cover; object-position: center; display: block; filter: saturate(.75); }
.paper-2 img,.paper-8 img { object-fit: contain; background: #dad3c5; }
.paper-title { font: 600 clamp(17px,1.8vw,24px)/1.2 Georgia,serif; margin-top: 14px; }
.paper-label { font-size: 11px; margin-top: 7px; line-height: 1.4; color: #6e6858; }
.paper-scribble { font: italic clamp(26px,3.5vw,44px)/1.25 Georgia,serif; padding: 30px 12px 15px; flex: 1; color: #374c50; }
.paper-note { background-image: repeating-linear-gradient(transparent 0,transparent 27px,#665d4016 28px,transparent 29px); }
.paper-note .paper-title { border-top: 1px solid #766b4b55; padding-top: 16px; }
.paper-note .paper-label { display: none; }
.paper-summary { position: absolute; inset: auto 0 0; background: #f1eadb; padding: 22px; font-size: 15px; line-height: 1.6; color: #292c29; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s,transform .2s; box-shadow: 0 -10px 20px #0001; }
.paper-corner { position: absolute; bottom: 12px; right: 14px; color: #6b6d60; font-size: 18px; }
.paper:focus-visible { outline: 3px solid #e5b45d; outline-offset: 7px; }
.paper:focus-visible,.paper.is-raised { z-index: 20; transform: rotate(0deg) translateY(-15px) scale(1.1); box-shadow: 0 28px 65px #000c; }
.paper:focus-visible .paper-summary,.paper.is-raised .paper-summary { opacity: 1; visibility: visible; transform: none; }
.paper-footer { text-align: center; margin: 65px 0 0; }
.paper-footer > p:first-child { font: italic 1.4rem Georgia,serif; color: #d6c9ab; }
.paper-atelier .paper-credit { color: #999f9b; font-size: .75rem; margin-top: 35px; }
.paper-dialog { box-sizing: border-box; width: min(680px,calc(100vw - 32px)); max-height: 90dvh; padding: 28px; border: 0; color: #292b28; background: #ece3d0; box-shadow: 0 30px 100px #000b; overflow: auto; }
.paper-dialog::backdrop { background: #040a0dd9; backdrop-filter: blur(5px); }
.paper-dialog .paper-close { display: block; margin: 0 0 20px auto; padding: 8px 10px; background: transparent; border: 1px solid #958667; color: #393b33; cursor: pointer; font-family: inherit; font-size: 14px; line-height: 1.4; min-height: 44px; }
.paper-dialog img { width: 100%; max-height: 45dvh; object-fit: contain; }
.paper-dialog img[hidden] { display: none; }
.paper-dialog .paper-dialog-kicker { font-size: 10px; text-transform: uppercase; letter-spacing: .15em; margin: 24px 0 12px; color: #786745; }
.paper-dialog h2 { color: #393b33; font-size: clamp(1.7rem,4vw,2.6rem); }
.paper-dialog .paper-dialog-summary { font-size: 17px; line-height: 1.75; margin-bottom: 8px; }
@media(max-width:850px) { .paper-table { grid-template-columns: repeat(2,minmax(0,1fr)); } .paper { height: 325px; margin: -9px -6px; } .paper img { height: 190px; } .paper-scribble { font-size: 32px; } }
@media(max-width:520px) { .paper-atelier { width: calc(100% - 44px); } .paper-atelier .atelier-intro { margin-bottom: 42px; } .paper-table { grid-template-columns: 1fr; padding: 10px 12px 30px; } .paper { height: 325px; margin: -12px 0; max-width: 360px; width: 100%; justify-self: center; } .paper:nth-child(n) { top: 0; } .paper-title { font-size: 23px; } .paper-footer { margin-top: 35px; } .paper-dialog { padding: 20px; } }
@media(prefers-reduced-motion:reduce) { .paper,.paper-summary { transition: none; } }