/* SaltedGroceries — expressive poster gallery. Only affects cylinder-gallery.html */
:root{font-family:Arial,Helvetica,sans-serif}
html,body{overscroll-behavior-x:none}
.gallery{background:radial-gradient(ellipse at 55% 40%,#fffdf9 0%,#f1eee7 54%,#e4e0d7 100%);isolation:isolate}
.gallery::before{content:"";position:absolute;left:-17%;width:133%;height:40%;top:32%;border:clamp(12px,2.5vw,32px) solid #d7d2c9;border-bottom:0;border-radius:50% 50% 0 0;opacity:.5;transform:rotate(-8deg);pointer-events:none;z-index:0}
.gallery::after{content:"";position:absolute;inset:0;opacity:.15;pointer-events:none;background-image:radial-gradient(#383027 0.6px,transparent 0.8px);background-size:6px 7px;z-index:0}
.nav{font-weight:700;z-index:10}.nav span{color:#111}
.hero{top:clamp(86px,12vh,138px);z-index:5}
.hero .kicker{color:#665950;font-weight:700;letter-spacing:.16em}
.hero h1{font-family:Arial,Helvetica,sans-serif;font-weight:850;letter-spacing:-.069em;font-size:clamp(30px,5.2vw,61px)}
.hero::after{content:"MAKE STUFF. BREAK RULES. BUILD AGAIN.";font:700 10px 'Courier New',monospace;letter-spacing:.045em;color:#7e7771;display:block;margin-top:13px}
#galleryCanvas{z-index:2;cursor:grab;touch-action:pan-y}
#galleryCanvas.dragging{cursor:grabbing;touch-action:none}
.selection{z-index:6;bottom:clamp(20px,4vh,40px);gap:14px}
.selection h2{font-family:Impact,'Arial Narrow',Arial,sans-serif;font-weight:850;font-size:clamp(31px,5vw,57px);letter-spacing:-.016em;text-transform:uppercase}
.selection .summary{max-width:570px;line-height:1.45}
.selection a,.sgg-action{border:0;background:#111;color:#faf6ed;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:12px 19px;font:700 12px 'Courier New',monospace;letter-spacing:.02em;cursor:pointer;text-align:center;box-shadow:4px 4px 0 #b4afa5;transition:transform .18s ease,box-shadow .18s ease,background .18s}
.selection a:hover,.sgg-action:hover{background:#d9552f;transform:translate(-2px,-2px);box-shadow:6px 6px 0 #b4afa5}
.sgg-mark{position:absolute;z-index:3;pointer-events:none;line-height:1;fill:none;stroke:#161616;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.sgg-mark.crown{top:8%;left:7%;width:80px;height:75px;transform:rotate(-12deg)}
.sgg-mark.spark{top:22%;right:8%;width:51px;height:51px;transform:rotate(18deg)}
.sgg-scribble{position:absolute;pointer-events:none;z-index:3;font:700 12px 'Courier New',monospace;color:#222;transform:rotate(-12deg)}
.sgg-scribble.left{left:4%;top:36%}.sgg-scribble.right{right:4%;top:31%;transform:rotate(13deg)}
.sgg-controls{position:absolute;inset:0;pointer-events:none;z-index:7}
.sgg-controls button{position:absolute;top:49%;transform:translateY(-50%);pointer-events:auto;border:2px solid #171715;border-radius:50%;background:#f8f4eacc;width:48px;height:48px;display:grid;place-items:center;cursor:pointer;font-size:25px;color:#161616;transition:transform .15s,background .15s}
.sgg-controls button:hover{background:#fff;transform:translateY(-50%) scale(1.06)}
.sgg-controls .prev{left:clamp(9px,2vw,35px)}.sgg-controls .next{right:clamp(9px,2vw,35px)}
.sgg-progress{position:absolute;z-index:6;bottom:clamp(8px,1.6vh,17px);left:50%;transform:translateX(-50%);display:flex;gap:7px}
.sgg-progress button{padding:0;border:0;width:6px;height:6px;border-radius:50%;background:#aaa097;cursor:pointer;transition:width .22s,background .22s}
.sgg-progress button[aria-current=true]{width:25px;border-radius:10px;background:#191919}
.sgg-overlay[hidden]{display:none!important}
.sgg-overlay{position:fixed;inset:0;z-index:300;background:#161615cd;backdrop-filter:blur(6px);overflow-y:auto;padding:clamp(10px,3vw,40px);display:flex;align-items:flex-start;justify-content:center}
body.sgg-modal-open{overflow:hidden}
.sgg-dialog{width:min(900px,100%);max-height:calc(100dvh - 30px);overflow-y:auto;overscroll-behavior:contain;position:relative;margin:auto;background:#f2eee5;border:5px solid #151515;box-shadow:13px 14px 0 #1118;color:#171715}
.sgg-dialog-header{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;gap:15px;padding:15px clamp(18px,4vw,35px);background:#f3efe7;border-bottom:3px solid #181818;z-index:2;font:700 11px 'Courier New',monospace}
.sgg-dialog-close{background:#171717;color:white;border:0;width:42px;height:42px;font-size:26px;cursor:pointer;flex-shrink:0}
.sgg-dialog-content{padding:clamp(22px,5vw,60px)}
.sgg-dialog-art{float:right;width:min(39%,285px);margin:0 0 20px 28px;background:#111;box-shadow:7px 7px 0 #c3bdb3;transform:rotate(2.5deg)}
.sgg-dialog-art canvas{width:100%;height:auto;display:block}
.sgg-dialog-kicker{font:700 11px 'Courier New',monospace;letter-spacing:.13em;color:#655e56}
.sgg-dialog h2{font:900 clamp(38px,7.5vw,82px)/.97 Impact,'Arial Narrow',Arial,sans-serif;letter-spacing:-.03em;margin:18px 0 8px;text-transform:uppercase;max-width:100%;overflow-wrap:anywhere}
.sgg-dialog .sgg-category{font:700 12px/1.6 'Courier New',monospace;color:#e14f2b;margin:0 0 15px;text-transform:uppercase}
.sgg-dialog .sgg-lead{font-size:clamp(17px,2.2vw,22px);line-height:1.44;max-width:620px;font-weight:650}
.sgg-dialog h3{font:900 12px 'Courier New',monospace;letter-spacing:.09em;margin:28px 0 10px;border-bottom:1px solid #c7c0b5;padding-bottom:10px}
.sgg-dialog p,.sgg-dialog li{font:14px/1.67 Arial,sans-serif;color:#3a3530}
.sgg-dialog ul{padding-left:20px}
.sgg-dialog li+li{margin-top:6px}
.sgg-dialog .sgg-note{background:#e1d9cc;border-left:5px solid #e15e32;padding:14px;font:12px/1.65 'Courier New',monospace;color:#45413d}
.sgg-dialog-actions{display:flex;flex-wrap:wrap;gap:14px;margin:24px 0}
.sgg-dialog-actions .sgg-action{background:#141414;color:#fff;text-decoration:none;min-height:45px}
.sgg-modal-nav{display:flex;gap:10px;justify-content:space-between;border-top:3px solid #1d1b19;padding:18px clamp(22px,5vw,60px)}
.sgg-modal-nav button{cursor:pointer;border:0;background:none;font:700 12px 'Courier New',monospace;padding:12px 4px;text-align:left}
.sgg-modal-nav button:hover{text-decoration:underline}
.sgg-index-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-top:25px}
.sgg-index-item{display:flex;align-items:center;gap:12px;text-align:left;cursor:pointer;border:2px solid #141414;background:#e8e0d4;padding:10px;color:#1b1916;min-width:0;transition:transform .15s}
.sgg-index-item:hover{transform:translateY(-3px);background:#f9f3e9}
.sgg-index-color{width:54px;height:68px;background:var(--c);border:4px solid #151515;flex:0 0 auto;display:grid;place-items:center;color:#171717;font:900 23px Impact,Arial}
.sgg-index-item strong{font:900 clamp(15px,2.1vw,25px) Impact,Arial,sans-serif;text-transform:uppercase;overflow-wrap:anywhere;display:block}
.sgg-index-item small{font:10px 'Courier New',monospace;color:#625d58}
@media(max-width:720px){
 .gallery{height:100svh;min-height:680px}
 .nav{top:18px}.hero{top:107px}.hero h1{font-size:clamp(29px,8vw,40px)}
 .selection{bottom:34px;align-items:flex-start;gap:10px}.selection h2{font-size:clamp(29px,8vw,37px);margin:7px 0 4px}
 .selection .summary{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:100%;line-height:1.35}
 .selection a{font-size:11px;min-height:44px;padding:11px 14px}
 .sgg-mark.crown{left:6%;top:9%;width:39px;height:39px;opacity:.72}.sgg-mark.spark{display:none}
 .sgg-scribble{display:none}.sgg-controls button{height:35px;width:35px;font-size:19px;top:48%}
 .sgg-progress{bottom:13px}
 .sgg-dialog{max-height:calc(100dvh - 20px);border-width:3px;box-shadow:5px 6px 0 #1118}
 .sgg-dialog-content{padding:24px 19px}
 .sgg-dialog-art{width:35%;margin-left:13px}
 .sgg-index-grid{grid-template-columns:1fr}
}
@media(max-width:390px){.selection .summary{display:none}.selection h2{font-size:29px}.hero{top:85px}.hero::after{font-size:8px}.gallery{min-height:625px}}
@media(prefers-reduced-motion:reduce){.sgg-progress button,.sgg-index-item,.selection a,.sgg-action,.sgg-controls button{transition:none!important}}