:root{--kraft:#9C9286;--ink2:#5f5952;--paper:#F8F6F1}
*{font-style:normal!important}
body.jp{background-color:var(--paper);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .3 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E")}
.jp nav{background:transparent}
.note{font-family:'Caveat',cursive;font-weight:500;font-size:24px;color:var(--ink2);letter-spacing:0;text-transform:none;line-height:1.2;display:inline-block;transform:rotate(-2deg)}
.note.r{transform:rotate(1.5deg)}
/* torn paper section edges */
.jp section{position:relative;border-top:0}
.jp section:not(.statband)::before{content:"";position:absolute;left:0;right:0;top:-1px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 16' preserveAspectRatio='none'%3E%3Cpath d='M0 0h120v6l-6 4-7-5-8 6-6-3-9 5-7-6-8 4-6-3-8 6-7-5-9 4-6-4-8 5-7-3-6 4-8-6-6 5-6-3V0z' fill='%23E8E1D4'/%3E%3C/svg%3E") repeat-x;background-size:240px 16px}
.jp .hero{position:relative;max-width:none}.jp .stamps{display:flex;gap:20px}.jp .hero .stamps{position:absolute;right:6vw;top:90px;margin:0}.jp .stamp{width:118px;height:118px}
.jp .stamp svg{width:100%;height:100%}
.journal{padding:60px 6vw 110px}
.filters button{border-radius:2px;background:#FFFDF8!important;color:var(--ink)!important;position:relative;padding:10px 22px 10px 18px!important;border:1px solid var(--stone)!important;border-right:2px dashed var(--kraft)!important}
.filters button.on{background:var(--ink)!important;color:var(--paper)!important;border-color:var(--ink)!important}
.posts{gap:64px 48px}
.post figure{background:#fff;padding:12px 12px 52px;aspect-ratio:auto;overflow:visible;box-shadow:0 10px 24px rgba(40,30,20,.16);transition:transform .3s}
.post img{aspect-ratio:4/3;display:block;filter:sepia(.12) grayscale(.15)}
.post:nth-child(3n+1) figure{transform:rotate(-2deg)}.post:nth-child(3n+2) figure{transform:rotate(1.5deg)}.post:nth-child(3n) figure{transform:rotate(-1deg)}.post:hover figure{transform:rotate(0) scale(1.02)}
.post figure::before{content:"";position:absolute;top:-14px;left:50%;width:96px;height:26px;margin-left:-48px;background:rgba(200,184,156,.62);transform:rotate(-4deg);z-index:2}
.post figure .note{position:absolute;bottom:10px;left:18px;font-size:22px}
.post .draft{top:auto!important;bottom:12px;left:auto!important;right:14px;background:none!important;color:#6f6860!important;border:2px solid #6f6860;border-radius:3px;transform:rotate(-6deg);opacity:.8}
.stub{display:inline-block;background:#FFFDF8;border:1px solid var(--stone);border-left:2px dashed var(--kraft);border-right:2px dashed var(--kraft);padding:5px 14px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#5f5952;margin:18px 0 4px}
.post .meta{margin-top:6px}
/* post template */
.entry{max-width:820px;margin:0 auto;padding:40px 6vw 90px;font-size:18px}.entry h2{font-size:38px;margin-top:50px}
.collage{display:grid;grid-template-columns:repeat(6,1fr);gap:22px;padding:30px 6vw 70px;max-width:1200px;margin:0 auto}
.slot{position:relative;background:#fff;padding:12px 12px 46px;box-shadow:0 10px 24px rgba(40,30,20,.16);margin:0}
.slot img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#E6E0D6}.slot.tall img{aspect-ratio:3/4}
.slot::before{content:"";position:absolute;top:-13px;left:40%;width:90px;height:24px;background:rgba(200,184,156,.62);transform:rotate(-5deg)}
.slot figcaption{position:absolute;bottom:8px;left:16px;font-family:'Caveat',cursive;font-size:21px;color:var(--ink2)}
.s1{grid-column:1/4;transform:rotate(-2deg)}.s2{grid-column:4/6;transform:rotate(2deg);margin-top:40px}.s3{grid-column:6/7;transform:rotate(-3deg)}.s4{grid-column:2/4;transform:rotate(1.5deg)}.s5{grid-column:4/7;transform:rotate(-1deg)}
.pull{font-family:'Cormorant Garamond',serif;font-size:32px;line-height:1.25;border-top:1px dashed var(--kraft);border-bottom:1px dashed var(--kraft);padding:26px 0;margin:44px 0}
@media(max-width:800px){.collage{grid-template-columns:1fr}.collage .slot{grid-column:auto!important;margin:0}.jp .hero .stamps{display:none}}
.jp .stamp{display:inline-block;width:118px;height:118px;flex:0 0 118px}