/* usselmann.net preview - masonry scrapbook theme */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fbf7ef;color:#33302b;font:16px/1.6 "Nunito","Trebuchet MS",Verdana,sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:#2f6f73}
a:focus-visible{outline:3px solid #e8a33d;outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.hand{font-family:"Caveat","Segoe Print","Comic Sans MS",cursive}
/* preview banner */
.pv-banner{position:sticky;top:0;z-index:60;background:#222;color:#fff;font:600 14px/1.4 system-ui,-apple-system,"Segoe UI",Arial,sans-serif;text-align:center;padding:8px 12px}
.pv-banner a{color:#ffd88a}
/* header + nav */
.site{text-align:center;padding:26px 16px 6px}
.brand{display:inline-block;font-weight:700;font-size:clamp(1.7rem,5vw,2.4rem);color:#2f6f73;text-decoration:none;line-height:1.1}
.site .tag{margin:2px 0 0;font-family:"Caveat","Segoe Print","Comic Sans MS",cursive;font-size:1.35rem;color:#7a4b2a}
.nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:14px auto 0;max-width:1100px;padding:0 6px}
.nav a{display:inline-block;padding:7px 14px;border-radius:999px;background:#fff;color:#33302b;text-decoration:none;font-size:15px;box-shadow:0 1px 4px rgba(0,0,0,.08);border:1px solid #eadfcb}
.nav a:hover{border-color:#2f6f73;color:#2f6f73}
.nav a[aria-current="page"]{background:#2f6f73;color:#fff;border-color:#2f6f73}
@media(max-width:619px){.nav{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding:0 12px 6px;-webkit-overflow-scrolling:touch}.nav a{flex:0 0 auto}}
/* page head */
.wrap{max-width:1150px;margin:0 auto;padding:0 18px}
.phead{text-align:center;margin:26px auto 8px;max-width:820px}
.kicker{margin:0;font-family:"Caveat","Segoe Print","Comic Sans MS",cursive;font-size:1.45rem;color:#7a4b2a}
.kicker a{color:#7a4b2a}
.phead h1{margin:2px 0 4px;font-size:clamp(1.6rem,4.5vw,2.5rem);line-height:1.2;color:#2f6f73}
.phead .sub{margin:0;color:#6b645a}
/* masonry + cards */
.masonry{margin:14px auto 36px;columns:1;column-gap:22px}
@media(min-width:620px){.masonry{columns:2}}
@media(min-width:980px){.masonry{columns:3}}
.masonry.photos{column-gap:18px}
@media(min-width:620px){.masonry.photos{columns:2}}
@media(min-width:900px){.masonry.photos{columns:3}}
@media(min-width:1200px){.masonry.photos{columns:4}}
.card{break-inside:avoid;display:inline-block;width:100%;margin:12px 0 18px;background:#fff;border-radius:6px;box-shadow:0 3px 10px rgba(0,0,0,.10);padding:12px 12px 16px;position:relative;transition:transform .2s;vertical-align:top}
.masonry .card:nth-child(odd){transform:rotate(-.8deg)}.masonry .card:nth-child(even){transform:rotate(.7deg)}
.masonry .card:hover{transform:rotate(0) scale(1.02)}
.card::before{content:"";position:absolute;top:-9px;left:50%;width:84px;height:20px;margin-left:-42px;background:rgba(47,111,115,.25);transform:rotate(-3deg)}
.card.shop{background:#f6ead9}.card.shop::before{background:rgba(122,75,42,.30)}
.card.project{background:#e9f1ef}
.card.note{background:#fff8d6}
.card>a{color:inherit;text-decoration:none;display:block}
.card img{width:100%;border-radius:3px;background:#efe9de}
.card h2{font-size:1.2rem;margin:12px 4px 2px;color:#2f6f73;line-height:1.3}.card.shop h2{color:#7a4b2a}
.card h3{font-size:1.05rem;margin:10px 4px 2px;color:#7a4b2a}
.card p{margin:4px 4px 0}
.card .meta{font-size:14px;color:#6b645a}
.tagl{display:inline-block;margin:6px 4px 0;font-family:"Caveat","Segoe Print","Comic Sans MS",cursive;font-size:1.3rem;color:#7a4b2a}
.photo{padding:8px 8px 10px}
.photo .cap{display:block;margin:6px 2px 0;font-size:14px;color:#55504a;line-height:1.35}
.photo .cap.hand{font-size:1.2rem;color:#7a4b2a}
/* single sheet (text pages, slides) */
.sheet{max-width:860px;margin:18px auto 30px;background:#fff;border-radius:8px;box-shadow:0 3px 12px rgba(0,0,0,.10);padding:22px clamp(14px,4vw,34px) 26px;position:relative}
.sheet::before{content:"";position:absolute;top:-10px;left:50%;width:110px;height:22px;margin-left:-55px;background:rgba(47,111,115,.25);transform:rotate(-2deg)}
.sheet.shop{background:#fffaf2}.sheet.shop::before{background:rgba(122,75,42,.30)}
.sheet.project{background:#f4f9f8}
.sheet h2{color:#2f6f73;margin:1.2em 0 .3em;font-size:1.35rem}
.sheet p{margin:.6em 0}
.sheet img{margin:10px auto;border-radius:4px}
.figure{margin:0;text-align:center}
.figure img{margin:0 auto;max-height:82vh;width:auto;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.figure figcaption{margin-top:10px;font-family:"Caveat","Segoe Print","Comic Sans MS",cursive;font-size:1.5rem;color:#7a4b2a;line-height:1.25}
.lines{list-style:none;padding:0;margin:0}
.lines li{padding:10px 4px;border-bottom:1px dashed #e2d8c6}
.lines li:last-child{border-bottom:0}
.lines .when{color:#6b645a;font-size:14px;white-space:nowrap}
.missing{color:#8a6d5a;font-size:14px;font-style:italic}
.placeholder{display:flex;align-items:center;justify-content:center;min-height:160px;border:2px dashed #d8cbb4;border-radius:4px;color:#8a6d5a;font-style:italic;padding:14px;text-align:center}
/* pager / buttons */
.pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin:14px auto 6px}
.pager a,.pager span{display:inline-block;padding:7px 14px;border-radius:999px;font-size:15px;text-decoration:none}
.pager a{background:#2f6f73;color:#fff}
.pager a:hover{background:#245659}
.pager .here{background:#eadfcb;color:#33302b}
.pager .count{color:#6b645a}
.btn{display:inline-block;padding:9px 18px;border-radius:999px;background:#2f6f73;color:#fff;text-decoration:none;font-weight:700}
.btn.alt{background:#7a4b2a}
.pills{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:6px 0 4px}
.pills a{padding:6px 14px;border-radius:999px;background:#f6ead9;color:#7a4b2a;text-decoration:none;border:1px solid #e3cfb2;font-size:15px}
.pills a[aria-current="page"]{background:#7a4b2a;color:#fff}
/* lightbox */
.lbx{position:fixed;inset:0;z-index:100;background:rgba(20,18,16,.92);display:none;align-items:center;justify-content:center;flex-direction:column;padding:48px 12px 16px}
.lbx.open{display:flex}
.lbx img{max-width:96vw;max-height:78vh;width:auto;height:auto;border:6px solid #fff;border-radius:3px;box-shadow:0 6px 30px rgba(0,0,0,.5)}
.lbx .lcap{color:#f3eadb;margin:10px 0 0;text-align:center;font-size:15px}
.lbx .lcap a{color:#ffd88a}
.lbx button{position:absolute;background:rgba(255,255,255,.14);color:#fff;border:0;border-radius:999px;font-size:26px;line-height:1;width:48px;height:48px;cursor:pointer}
.lbx button:hover{background:rgba(255,255,255,.28)}
.lbx .lclose{top:10px;right:12px}
.lbx .lprev{left:10px;top:50%;margin-top:-24px}
.lbx .lnext{right:10px;top:50%;margin-top:-24px}
/* footer */
.foot{text-align:center;padding:18px 20px 40px;font-size:14px;color:#6b645a}.foot p{margin:3px}