/* Ink marks stay in the margins and on frames; the notebook content stays readable. */
:root{--notebook-divider:url('assets/notebook/divider.svg');--notebook-frame:url('assets/notebook/frame.svg');--notebook-splash:url('assets/notebook/splatter.svg');--notebook-doodles:url('assets/notebook/doodles.svg')}
.paper,.slab-paper{position:relative;isolation:isolate;background-color:#f3edde;background-image:var(--notebook-doodles),linear-gradient(90deg,transparent 25px,#c14c4a38 26px,#c14c4a38 27px,transparent 28px),repeating-linear-gradient(0deg,transparent 0 30px,#759bb91c 31px,transparent 32px);background-size:100% 1000px,100% 100%,100% 32px;background-repeat:repeat-y,no-repeat,repeat;padding-left:58px;padding-right:48px;box-shadow:0 0 24px #322b1e15}
.paper:before,.slab-paper:before{content:'';position:absolute;inset:0 auto 0 9px;width:13px;z-index:-1;background:radial-gradient(circle at center,#b9b0a0 0 4px,#faf6ed 5px 6px,transparent 7px) center 65px/13px 220px repeat-y;pointer-events:none}
.strap,.slab-strap,nav,.process,.section,.involve,.footer-meta,.slab-facts,.slab-explore,.slab-layout,footer{position:relative}
.strap,.slab-strap,nav,.process,.section,.involve,.footer-meta,.slab-facts,.slab-explore,.slab-layout{border-color:transparent}
.strap:after,.slab-strap:after,nav:before,nav:after,.process:before,.process:after,.section:before,.slab-facts:before,.slab-facts:after,.slab-explore:after,.slab-layout:after,.footer-meta:before{content:'';position:absolute;left:0;right:0;height:19px;background:var(--notebook-divider) center/100% 100% no-repeat;pointer-events:none}
.strap:after,.slab-strap:after,nav:after,.process:after,.slab-facts:after,.slab-explore:after,.slab-layout:after{bottom:-10px}
nav:before,.process:before,.section:before,.slab-facts:before,.footer-meta:before{top:-10px}
nav{margin-top:9px;margin-bottom:6px}
.process{padding-top:25px;padding-bottom:28px}
.section,.slab-explore,.slab-layout{padding-top:66px;padding-bottom:64px}
.spot{position:relative;padding:14px 14px 22px;background:#f8f3e3bf;box-shadow:3px 5px 0 #2827200c}
.spot:after,.notebook:after,.involve:after,.slab-note:after,.slab-scrap:after{content:'';position:absolute;inset:-5px;background:var(--notebook-frame) center/100% 100% no-repeat;pointer-events:none}
.spot:nth-child(3n+2):after{transform:scaleX(-1)}
.spot:nth-child(3n):after{transform:scaleY(-1)}
.spot .image-button{outline:1px solid #25241f;outline-offset:3px}
.notebook,.slab-note,.slab-scrap{position:relative;background-color:#faf3df}
.notebook,.slab-note{border-left:2px solid #c95c5a88;background-image:repeating-linear-gradient(transparent 0 28px,#7f9db740 29px,transparent 30px)}
.notebook:after,.slab-scrap:after{transform:rotate(-.6deg)}
.involve{margin-top:18px;background-color:#eaddbf;padding:44px 28px}
.filters button,.outline,.slab-controls button{border:2px solid #34352c;border-radius:2px 8px 3px 6px/6px 3px 7px 2px;box-shadow:1px 2px 0 #292a2325}
.filters button:nth-child(even),.slab-controls button:nth-child(even){border-radius:7px 2px 6px 2px/2px 6px 3px 8px}
.photo-link{outline:1px solid #29291f;outline-offset:4px;box-shadow:3px 5px 0 #39342915}
.hero-art:after,.slab-render:after{content:'';position:absolute;right:-22px;bottom:-20px;width:62px;height:62px;background:var(--notebook-splash) center/contain no-repeat;transform:rotate(27deg);pointer-events:none}
.hero-art:after{width:48px;height:48px;right:-15px}
.editorial{padding-top:36px}
.editorial article{border-right:0;padding-right:10px}
.section-heading h2,.slab-section-title h2,.story h2,.slab-next h2{position:relative;width:fit-content}
.section-heading h2:after,.slab-section-title h2:after,.story h2:after,.slab-next h2:after{content:'';position:absolute;right:-35px;top:-12px;width:24px;height:29px;background:var(--notebook-splash) center/contain no-repeat;transform:rotate(-24deg)}
.slab-strap{margin-bottom:12px}
.slab-facts{padding-top:32px;padding-bottom:32px}
.slab-header{padding-bottom:30px}
.slab-render img{border:2px solid #34332a}
.slab-next{padding-top:56px}
.slab-paper footer{border:0;background:var(--notebook-divider) top/100% 19px no-repeat;padding-top:32px}
.hand,.slab-hand{font-family:'Bradley Hand','Segoe Print','Comic Sans MS',cursive;letter-spacing:.5px}
.margin-note{position:relative;margin:32px 0 12px;display:flex;justify-content:flex-end;align-items:center;gap:18px;color:#33466a;font:22px/1.3 'Bradley Hand','Segoe Print','Comic Sans MS',cursive;transform:rotate(-2deg);pointer-events:none}
.margin-note svg{width:92px;height:45px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.margin-note .scribble{color:#b43432;text-decoration:underline;text-decoration-style:wavy;text-underline-offset:6px}
@media(max-width:750px){.paper,.slab-paper{padding-left:30px;padding-right:22px;background-size:100% 1100px,100% 100%,100% 32px;background-image:var(--notebook-doodles),linear-gradient(90deg,transparent 17px,#c14c4a38 18px,#c14c4a38 19px,transparent 20px),repeating-linear-gradient(0deg,transparent 0 30px,#759bb91c 31px,transparent 32px)}.paper:before,.slab-paper:before{left:3px;width:10px;background-size:10px 260px;opacity:.65}.section,.slab-explore,.slab-layout{padding-top:46px;padding-bottom:42px}.spot{padding:12px 12px 20px}.involve{padding:30px 19px}.margin-note{font-size:18px;margin-top:24px;gap:10px}.margin-note svg{width:66px}.section-heading h2:after,.slab-section-title h2:after,.story h2:after,.slab-next h2:after{right:-23px;width:18px}.hero-art:after,.slab-render:after{right:-12px;width:40px;height:40px}.slab-controls button{padding:12px 10px}}

dialog{border:2px solid #333329;border-radius:3px 9px 2px 7px/8px 2px 7px 3px;outline:1px solid #333329;outline-offset:4px}
.paper,.slab-paper{overflow-x:clip}
@media(max-width:750px){.section-heading h2:after,.slab-section-title h2:after,.story h2:after,.slab-next h2:after{right:0;top:-20px}}