:root{--accent:#8a4b1f;--bg:#f3efe6;--body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--card:#ffffff;--edge:rgba(60,40,20,.08);--fg:#2a2622;--gap:22px;--head:Georgia,"Times New Roman",serif;--line:#ddd5c7;--mat:#ffffff;--matw:7px;--muted:#7a7166;--thumb:220px;--rowh:220px;}
/* PicturePost gallery styles. Each template sets the colours and fonts in :root and picks
   a layout (L-), frame (F-), background texture (T-), header (H-) and extras (X-) as classes on <body>. */
*{box-sizing:border-box}
html,body{margin:0}
body{background-color:var(--bg);color:var(--fg);font:16px/1.55 var(--body,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}

/* ---------- Header ---------- */
header.site{max-width:var(--maxw,1240px);margin:0 auto;padding:56px 20px 16px;text-align:center}
.allg{margin:0 0 16px;font-size:14px}
header.site h1{font-family:var(--head,inherit);font-weight:var(--headw,400);font-size:clamp(30px,5.2vw,var(--heads,48px));line-height:1.1;margin:0 0 12px;letter-spacing:var(--track,-.01em);text-transform:var(--headcase,none);color:var(--title,var(--fg))}
.desc{max-width:680px;margin:0 auto 10px;color:var(--fg);opacity:.85}
.count{color:var(--muted);font-size:13px;margin:0;letter-spacing:.04em;text-transform:uppercase}

.H-left header.site{text-align:left;display:grid;grid-template-columns:1fr auto;align-items:end;gap:4px 24px;padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:10px}
.H-left header.site .allg,.H-left header.site h1,.H-left .desc{grid-column:1}
.H-left .desc{margin:0}
.H-left .count{grid-column:2;grid-row:2}
.H-small header.site h1{font-size:clamp(15px,2vw,18px);font-weight:var(--headw,600);text-transform:uppercase;letter-spacing:.24em;margin-bottom:8px}
.H-small header.site{padding-top:40px}
.H-big header.site{padding-top:80px;padding-bottom:28px}
.H-big header.site h1{font-size:clamp(44px,9vw,var(--heads,112px));line-height:.95;letter-spacing:var(--track,-.035em)}
.H-banner header.site{max-width:none;background:var(--band,var(--accent));color:var(--bandfg,#fff);padding:46px 20px 30px;margin-bottom:22px}
.H-banner header.site h1{color:var(--bandfg,#fff)}
.H-banner .desc{color:var(--bandfg,#fff)}
.H-banner .count{color:var(--bandfg,#fff);opacity:.75}
.H-banner .allg a{color:var(--bandfg,#fff)}
.H-airmail header.site{max-width:820px;margin:36px auto 18px;background:var(--card,#fff);padding:34px 28px 24px;border:10px solid transparent;border-image:repeating-linear-gradient(-45deg,#d23b3b 0 14px,#fff 14px 24px,#2a55b5 24px 38px,#fff 38px 48px) 10;box-shadow:0 8px 24px -12px rgba(0,0,0,.35)}
.H-label header.site h1{display:inline-block;background:var(--card,#fff);padding:10px 26px 12px;box-shadow:0 6px 18px -8px rgba(0,0,0,.35);transform:rotate(-1.5deg)}
.H-label .desc{margin-top:14px}
.H-rule header.site h1{display:inline-flex;align-items:center;gap:22px}
.H-rule header.site h1::before,.H-rule header.site h1::after{content:"";width:clamp(24px,8vw,90px);height:1px;background:currentColor;opacity:.5}

/* ---------- Layouts ---------- */
.grid{max-width:var(--maxw,1240px);margin:0 auto;padding:18px var(--side,20px) 8px}
.cell{display:block;position:relative;color:var(--fg);background:var(--card,transparent);border-radius:var(--radius,0)}
.cell:hover{text-decoration:none}
.ph{display:block;position:relative;overflow:hidden;border-radius:var(--iradius,var(--radius,0));background:var(--phbg,rgba(127,127,127,.12))}
.ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%;transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .2s,filter .4s}
.cell:hover .ph img{opacity:.9}
.cell .cap{font-size:13px;line-height:1.4;color:var(--muted);padding-top:8px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-family:var(--capfont,inherit)}

/* Square (or --ratio) grid */
.L-grid .grid{display:grid;gap:var(--gap,18px);grid-template-columns:repeat(auto-fill,minmax(min(var(--thumb),calc((100vw - 2 * var(--side,20px) - var(--gap,18px)) / 2 - 1px)),1fr))}
.L-grid .ph{aspect-ratio:var(--ratio,1/1)}

/* Mosaic: a dense grid where every sixth picture is large */
.L-mosaic .grid{display:grid;gap:var(--gap,6px);grid-template-columns:repeat(auto-fill,minmax(min(var(--thumb),calc((100vw - 2 * var(--side,20px) - 2 * var(--gap,6px)) / 3 - 1px)),1fr));grid-auto-flow:dense}
.L-mosaic .ph{aspect-ratio:1/1}
.L-mosaic .cell:nth-child(6n+1){grid-column:span 2;grid-row:span 2}
.L-mosaic .cell:nth-child(6n+1) .ph{aspect-ratio:auto;height:100%}
.L-mosaic .cell:nth-child(6n+1){display:flex;flex-direction:column}
.L-mosaic .cell:nth-child(6n+1) .ph{flex:1}

/* Masonry: natural shapes in columns */
.L-masonry .grid{column-width:min(var(--thumb),calc((100vw - 2 * var(--side,20px) - var(--gap,18px)) / 2 - 1px));column-gap:var(--gap,18px)}
.L-masonry .cell{break-inside:avoid;margin-bottom:var(--gap,18px);display:inline-block;width:100%}
.L-masonry .ph{aspect-ratio:var(--r,1)}

/* Justified rows: natural shapes, even row heights */
.L-justified .grid{display:flex;flex-wrap:wrap;gap:var(--gap,10px)}
.L-justified .grid::after{content:"";flex-grow:999999}
.L-justified .cell{flex:calc(var(--r,1) * 100) 1 calc(var(--r,1) * var(--rowh,200px))}
.L-justified .ph{aspect-ratio:var(--r,1)}

/* One column of large pictures */
.L-column .grid{max-width:var(--colw,960px);display:flex;flex-direction:column;gap:var(--gap,56px)}
.L-column .ph{aspect-ratio:var(--r,1)}
.L-column .cell .cap{font-size:15px;-webkit-line-clamp:4;padding-top:12px;color:var(--fg);opacity:.8}

/* Two big columns (magazine) */
.L-duo .grid{display:grid;gap:var(--gap,28px);grid-template-columns:repeat(auto-fill,minmax(min(380px,100%),1fr))}
.L-duo .ph{aspect-ratio:var(--ratio,4/3)}

/* ---------- Frames: on index cells (.cell) and on the large picture (.frame) ---------- */
.frame{display:inline-block;position:relative;max-width:100%;line-height:0;border-radius:var(--radius,0)}
.frame img,.frame video{border-radius:var(--iradius,var(--radius,0))}

.F-line .cell,.F-line .frame{border:1px solid var(--edge,var(--line));padding:var(--pad,6px);background:var(--card,transparent)}
.F-mat .cell,.F-mat .frame{background:var(--mat,#fff);padding:var(--matw,14px);box-shadow:0 0 0 1px var(--edge,rgba(0,0,0,.08)),var(--shadow,0 6px 18px -10px rgba(0,0,0,.45))}
.F-mat .frame{padding:calc(var(--matw,14px) * 2)}
.F-shadow .cell .ph,.F-shadow .frame{box-shadow:var(--shadow,0 14px 30px -14px rgba(0,0,0,.55),0 3px 8px -4px rgba(0,0,0,.25))}
.F-float .cell .ph,.F-float .frame{box-shadow:0 22px 40px -22px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.08);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.F-float .cell:hover .ph{transform:translateY(-5px);box-shadow:0 30px 50px -24px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.08)}
.F-glow .cell .ph,.F-glow .frame{box-shadow:0 0 0 1px var(--edge,rgba(255,255,255,.15)),0 0 32px -4px var(--glow,rgba(255,255,255,.18))}
.F-polaroid .cell,.F-polaroid .frame{background:var(--mat,#fbfaf6);padding:11px 11px 0;box-shadow:0 10px 24px -12px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.15)}
.F-polaroid .cell{padding-bottom:12px}
.F-polaroid .cell .cap{color:#3b3631;font-family:var(--capfont,var(--head));font-size:15px;text-align:center;min-height:30px;padding-top:9px}
.F-polaroid .frame{padding-bottom:46px}
.F-rounded .cell .ph,.F-rounded .frame,.F-rounded .frame img{border-radius:var(--iradius,18px)}
.F-circle .ph{aspect-ratio:1/1!important;border-radius:50%}
.F-circle .cell .cap{text-align:center}
.F-circle .frame img{border-radius:24px}
.F-oval .cell,.F-oval .frame{background:var(--mat,#fff);padding:var(--matw,16px);box-shadow:0 0 0 1px var(--edge,rgba(0,0,0,.1)),var(--shadow,0 8px 20px -12px rgba(0,0,0,.5))}
.F-oval .ph{border-radius:50%/50%;aspect-ratio:4/5!important}
.F-oval .frame img{border-radius:50%/50%}
.F-oval .frame{padding:calc(var(--matw,16px) * 2)}
.F-film .cell,.F-film .frame{background:#0d0d0d;padding:22px 7px;border-radius:2px}
.F-film .cell::before,.F-film .cell::after,.F-film .frame::before,.F-film .frame::after{content:"";position:absolute;left:6px;right:6px;height:9px;background:repeating-linear-gradient(90deg,transparent 0 5px,#e9e4d8 5px 13px,transparent 13px 18px);border-radius:1px;opacity:.85}
.F-film .cell::before,.F-film .frame::before{top:7px}
.F-film .cell::after,.F-film .frame::after{bottom:7px}
.F-film .cell .cap{position:absolute;left:10px;right:10px;bottom:-26px;color:var(--muted);font-family:var(--capfont,ui-monospace,Menlo,monospace);font-size:11px;padding:0;white-space:nowrap;text-overflow:ellipsis;display:block}
.F-film.L-grid .grid{row-gap:calc(var(--gap,18px) + 24px)}
.F-film .ph{border-radius:0}
.F-tape .cell,.F-tape .frame{background:var(--mat,#fff);padding:var(--matw,10px);box-shadow:0 8px 20px -12px rgba(0,0,0,.5)}
.F-tape .cell::before,.F-tape .frame::before{content:"";position:absolute;z-index:2;top:-11px;left:50%;width:84px;height:24px;margin-left:-42px;background:var(--tape,rgba(240,205,120,.75));transform:rotate(-3deg);box-shadow:0 1px 2px rgba(0,0,0,.12);-webkit-mask:linear-gradient(90deg,transparent 0 2px,#000 2px calc(100% - 2px),transparent 0)}
.F-tape .cell:nth-child(3n+2)::before{transform:rotate(4deg);background:var(--tape2,var(--tape,rgba(160,200,220,.75)))}
.F-tape .cell:nth-child(3n)::before{transform:rotate(-6deg);background:var(--tape3,var(--tape,rgba(230,160,170,.75)))}
.F-pin .cell,.F-pin .frame{background:var(--mat,#fff);padding:var(--matw,9px);box-shadow:0 12px 22px -14px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.2)}
.F-pin .cell::before,.F-pin .frame::before{content:"";position:absolute;z-index:2;top:-8px;left:50%;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff9 0 2px,transparent 3px),radial-gradient(circle,var(--pin,#d33b2f) 0 60%,color-mix(in srgb,var(--pin,#d33b2f) 70%,#000) 100%);box-shadow:2px 4px 4px rgba(0,0,0,.35)}
.F-pin .cell:nth-child(4n+2)::before{--pin:#2f6fd3}.F-pin .cell:nth-child(4n+3)::before{--pin:#e9b524}.F-pin .cell:nth-child(4n)::before{--pin:#2e9b57}
.F-wood .cell,.F-wood .frame{padding:var(--fw,13px);border-radius:2px;background:linear-gradient(90deg,rgba(0,0,0,.18),transparent 6%,transparent 94%,rgba(0,0,0,.2)),repeating-linear-gradient(92deg,#7a4a26 0 3px,#8a5530 3px 7px,#6d4020 7px 9px,#90603a 9px 15px);box-shadow:inset 0 0 0 2px rgba(0,0,0,.25),0 14px 26px -14px rgba(0,0,0,.7)}
.F-wood .ph,.F-wood .frame img{border:var(--matw,8px) solid var(--mat,#e9e3d3);box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.F-metal .cell,.F-metal .frame{padding:var(--fw,10px);border-radius:3px;background:linear-gradient(135deg,#f4f5f6 0%,#a8adb3 22%,#e9ecef 45%,#8e949b 70%,#d7dbdf 100%);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.3),0 12px 24px -14px rgba(0,0,0,.7)}
.F-metal .ph,.F-metal .frame img{box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.F-gold .cell,.F-gold .frame{padding:var(--fw,12px);background:linear-gradient(135deg,#f8e7a3 0%,#c9a04a 20%,#f6df91 38%,#a77b2b 60%,#e8cd7c 80%,#9c7128 100%);box-shadow:inset 0 0 0 2px rgba(90,60,10,.45),inset 0 0 0 5px rgba(255,240,190,.35),0 16px 30px -16px rgba(0,0,0,.65)}
.F-gold .ph,.F-gold .frame img{border:var(--matw,10px) solid var(--mat,#f5efe1);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.F-double .cell,.F-double .frame{border:7px double var(--edge,var(--line));padding:var(--pad,7px);background:var(--card,transparent)}
.F-tv .cell,.F-tv .frame{background:var(--bezel,#1e2a2f);padding:14px 14px 30px;border-radius:24px;box-shadow:inset 0 2px 0 rgba(255,255,255,.12),0 16px 28px -16px rgba(0,0,0,.6)}
.F-tv .ph,.F-tv .frame img,.F-tv .frame video{border-radius:18px/22px;box-shadow:inset 0 0 0 2px rgba(0,0,0,.4)}
.F-tv .cell::after,.F-tv .frame::after{content:"";position:absolute;right:20px;bottom:10px;width:11px;height:11px;border-radius:50%;background:var(--knob,#e0b25b);box-shadow:-18px 0 0 var(--knob,#e0b25b)}
.F-tv .cell .cap{color:var(--bezelfg,#cfd8da);position:absolute;left:18px;right:60px;bottom:6px;padding:0;font-size:11px;white-space:nowrap;text-overflow:ellipsis;display:block}
.F-stamp .cell,.F-stamp .frame{background:var(--mat,#fff);padding:12px;-webkit-mask:radial-gradient(circle at 50% 50%,transparent 3.5px,#000 4px) -6px -6px/12px 12px,linear-gradient(#000,#000) 6px 6px/calc(100% - 12px) calc(100% - 12px) no-repeat;mask:radial-gradient(circle at 50% 50%,transparent 3.5px,#000 4px) -6px -6px/12px 12px,linear-gradient(#000,#000) 6px 6px/calc(100% - 12px) calc(100% - 12px) no-repeat;filter:drop-shadow(0 4px 6px rgba(0,0,0,.25))}
.F-bevel .cell,.F-bevel .frame{padding:var(--pad,8px);background:var(--card);border-radius:var(--radius,10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.15),0 10px 22px -14px rgba(0,0,0,.45)}

/* Captions printed on a frame or mat */
.F-mat .cell .cap,.F-oval .cell .cap,.F-tape .cell .cap,.F-pin .cell .cap,.F-stamp .cell .cap,.F-polaroid .cell .cap{color:var(--matfg,#6d675d)}
.F-wood .cell .cap{color:#f3e6cf;text-shadow:0 1px 1px rgba(0,0,0,.5);padding-top:7px}
.F-metal .cell .cap{color:#262b31;padding-top:7px}
.F-gold .cell .cap{color:#3d2a08;padding-top:7px}
.X-rainbow .cell .cap{color:rgba(0,0,0,.7)}

/* ---------- Extras ---------- */
.X-tilt .cell{transform:rotate(-1.6deg);transition:transform .3s}
.X-tilt .cell:nth-child(3n+2){transform:rotate(1.4deg)}
.X-tilt .cell:nth-child(5n+3){transform:rotate(-.6deg)}
.X-tilt .cell:nth-child(4n){transform:rotate(2.2deg)}
.X-tilt .cell:hover{transform:rotate(0) scale(1.02);z-index:3}
.X-tilt .frame{transform:rotate(-.8deg)}
.X-gray .ph img,.X-gray .frame img{filter:grayscale(1) contrast(1.08)}
.X-gray .cell:hover .ph img{filter:none}
.X-sepia .ph img,.X-sepia .frame img{filter:sepia(.6) saturate(.8) contrast(1.05)}
.X-sepia .cell:hover .ph img{filter:none}
.X-zoom .cell:hover .ph img{transform:scale(1.05);opacity:1}
.X-rainbow .cell{--mat:var(--c,#fff)}
.X-rainbow .cell:nth-child(6n+1){--c:#ff6b6b}.X-rainbow .cell:nth-child(6n+2){--c:#ffa94d}.X-rainbow .cell:nth-child(6n+3){--c:#ffd43b}
.X-rainbow .cell:nth-child(6n+4){--c:#69db7c}.X-rainbow .cell:nth-child(6n+5){--c:#4dabf7}.X-rainbow .cell:nth-child(6n){--c:#b197fc}
.X-rainbow .frame{--mat:#ffd43b}
.X-numbers .grid{counter-reset:pic}
.X-numbers .cell{counter-increment:pic}
.X-numbers .cell .ph::after{content:counter(pic,decimal-leading-zero);position:absolute;left:8px;bottom:6px;font:600 11px/1 ui-monospace,Menlo,monospace;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6);letter-spacing:.06em}
.X-hovercap .cell .cap{position:absolute;left:0;right:0;bottom:0;margin:0;padding:28px 12px 10px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.7));opacity:0;transition:opacity .25s;border-radius:0 0 var(--iradius,0) var(--iradius,0)}
.X-hovercap .cell:hover .cap{opacity:1}

/* ---------- Background textures ---------- */
.T-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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.T-cork{background-image:radial-gradient(circle at 20% 30%,rgba(90,50,20,.35) 0 1.2px,transparent 1.6px),radial-gradient(circle at 70% 60%,rgba(255,235,200,.35) 0 1px,transparent 1.4px),radial-gradient(circle at 40% 80%,rgba(60,30,10,.3) 0 1.5px,transparent 2px),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .1 0 0 0 0 0 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:11px 11px,13px 13px,17px 17px,200px 200px}
.T-linen{background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.035) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(0,0,0,.03) 0 1px,transparent 1px 4px)}
.T-grid{background-image:linear-gradient(var(--rule,rgba(60,110,200,.14)) 1px,transparent 1px),linear-gradient(90deg,var(--rule,rgba(60,110,200,.14)) 1px,transparent 1px);background-size:24px 24px}
.T-lines{background-image:linear-gradient(90deg,transparent 0 54px,var(--margin,rgba(220,80,80,.45)) 54px 56px,transparent 56px),repeating-linear-gradient(transparent 0 31px,var(--rule,rgba(70,120,200,.22)) 31px 32px);background-attachment:local}
.T-dots{background-image:radial-gradient(var(--rule,rgba(0,0,0,.12)) 1.2px,transparent 1.6px);background-size:22px 22px}
.T-stars{background-image:radial-gradient(1px 1px at 20px 30px,#fff,transparent),radial-gradient(1px 1px at 120px 80px,rgba(255,255,255,.8),transparent),radial-gradient(1.5px 1.5px at 200px 160px,#fff,transparent),radial-gradient(1px 1px at 260px 40px,rgba(255,255,255,.7),transparent),radial-gradient(1px 1px at 80px 200px,rgba(255,255,255,.6),transparent),radial-gradient(2px 2px at 300px 260px,rgba(200,220,255,.9),transparent),radial-gradient(900px 600px at 70% -10%,var(--nebula,rgba(120,80,200,.28)),transparent),radial-gradient(700px 500px at 0% 100%,var(--nebula2,rgba(40,120,200,.2)),transparent);background-size:320px 320px,320px 320px,320px 320px,320px 320px,320px 320px,320px 320px,100% 100%,100% 100%;background-attachment:fixed}
.T-carbon{background-image:linear-gradient(27deg,#151515 5px,transparent 5px),linear-gradient(207deg,#151515 5px,transparent 5px),linear-gradient(27deg,#222 5px,transparent 5px),linear-gradient(207deg,#222 5px,transparent 5px),linear-gradient(90deg,#1b1b1b 10px,transparent 10px),linear-gradient(#1d1d1d 25%,#1a1a1a 25%,#1a1a1a 50%,transparent 50%,transparent 75%,#242424 75%,#242424);background-size:20px 20px;background-position:0 5px,10px 0,0 10px,10px 5px,0 0,0 0}
.T-brushed{background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 2px,rgba(0,0,0,.04) 2px 3px,transparent 3px 5px),linear-gradient(180deg,rgba(255,255,255,.14),transparent 40%,rgba(0,0,0,.08))}
.T-glow{background-image:radial-gradient(1200px 700px at 50% -15%,var(--glowbg,rgba(255,255,255,.12)),transparent 70%);background-repeat:no-repeat}
.T-sky{background-image:linear-gradient(180deg,var(--bg2,#dfeefa) 0,var(--bg) 70vh);background-repeat:no-repeat}
.T-confetti{background-image:radial-gradient(circle at 12px 18px,#ff6b6b 0 4px,transparent 5px),radial-gradient(circle at 70px 60px,#4dabf7 0 3px,transparent 4px),radial-gradient(circle at 130px 25px,#ffd43b 0 5px,transparent 6px),radial-gradient(circle at 40px 120px,#69db7c 0 4px,transparent 5px),radial-gradient(circle at 150px 140px,#b197fc 0 3px,transparent 4px),radial-gradient(circle at 100px 100px,#ffa94d 0 3px,transparent 4px);background-size:170px 170px}
.T-map{background-image:repeating-radial-gradient(circle at 15% 25%,transparent 0 26px,var(--rule,rgba(120,90,50,.13)) 26px 27px),repeating-radial-gradient(circle at 85% 70%,transparent 0 34px,var(--rule,rgba(120,90,50,.1)) 34px 35px),radial-gradient(ellipse at center,transparent 50%,rgba(110,70,20,.18) 100%);background-attachment:fixed}
.T-waves{background-image:radial-gradient(circle at 100% 50%,transparent 20%,var(--rule,rgba(255,255,255,.08)) 21%,var(--rule,rgba(255,255,255,.08)) 34%,transparent 35%,transparent),radial-gradient(circle at 0% 50%,transparent 20%,var(--rule,rgba(255,255,255,.08)) 21%,var(--rule,rgba(255,255,255,.08)) 34%,transparent 35%,transparent);background-size:60px 40px}
.T-meadow{background-image:linear-gradient(180deg,var(--bg2,#e9f5df) 0,var(--bg) 60vh);background-repeat:no-repeat}
.T-meadow footer{background:linear-gradient(180deg,transparent,var(--grass,#7cae55) 85%);color:#1f3b13;padding-top:70px}
.T-sand{background-image:linear-gradient(180deg,var(--bg2,#f7dfbf),var(--bg) 70vh),repeating-linear-gradient(170deg,transparent 0 40px,rgba(160,90,40,.06) 40px 80px);background-repeat:no-repeat,repeat}
.T-wall{background-image:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.07),transparent 60%),linear-gradient(180deg,transparent 80%,rgba(0,0,0,.25))}

/* ---------- Pager and footer ---------- */
.pager{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;padding:18px 16px 24px}
.pager a,.pager span{min-width:38px;padding:6px 10px;border:1px solid var(--line);border-radius:var(--btnr,6px);text-align:center;background:var(--card,transparent)}
.pager span{background:var(--accent);color:var(--accentfg,var(--bg));border-color:var(--accent)}
footer{text-align:center;color:var(--muted);font-size:12px;padding:30px 16px 44px}

/* ---------- Picture pages ---------- */
body.item{min-height:100vh;display:flex;flex-direction:column}
.bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line)}
.H-banner .bar{background:var(--band,var(--accent));border-bottom:0}
.H-banner .bar .up,.H-banner .bar .counter{color:var(--bandfg,#fff)}
.bar .up{font-family:var(--head,inherit);font-size:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:var(--headcase,none);letter-spacing:var(--bartrack,normal)}
.counter{color:var(--muted);font-size:14px;white-space:nowrap}
.stage{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;padding:26px 10px}
figure{margin:0;display:flex;flex-direction:column;align-items:center;max-width:100%;min-width:0}
figure img,figure video{display:block;max-width:100%;max-height:calc(100vh - 230px);width:auto;height:auto}
figure audio{width:min(480px,80vw);margin:24px 0}
.sound{width:min(320px,70vw);height:auto;margin-top:8px}
figcaption{max-width:720px;text-align:center;padding:18px 8px 0;font-family:var(--capfont,inherit)}
.meta{display:block;color:var(--muted);font-size:13px;margin-top:4px}
.nav{flex:none;font-size:44px;line-height:1;padding:8px 14px;color:var(--muted);border-radius:var(--btnr,8px);user-select:none}
.nav:hover{color:var(--accent);text-decoration:none}
.nav.off{visibility:hidden}
.B-pill .nav{font-size:26px;width:52px;height:52px;display:grid;place-items:center;padding:0;border-radius:50%;background:var(--card,rgba(127,127,127,.12));box-shadow:0 1px 3px rgba(0,0,0,.18);color:var(--fg)}
.B-pill .nav:hover{background:var(--accent);color:var(--accentfg,#fff)}
@media (max-width:640px){
  :root{--side:14px}
  .L-justified{--rowh:120px}
  header.site{padding-top:36px}
  .H-left header.site{grid-template-columns:1fr}.H-left .count{grid-column:1;grid-row:auto}
  .stage{flex-wrap:wrap;justify-content:space-between;align-content:center}
  figure{order:-1;width:100%}
  .nav{font-size:36px}
  figure img,figure video{max-height:calc(100vh - 240px)}
  .L-mosaic .cell:nth-child(6n+1){grid-column:span 2;grid-row:span 2}
}