/* Polaroids on a line (assets/polaroid.js). Without the script, the plain
   gallery inside [data-polaroid] shows instead. */
.pl.pl-on > .pl-src { display:none; }
.pl-stage { position:relative; height:calc(var(--pl-w, 200px) * 1.42 + 64px); overflow:hidden; touch-action:pan-y; user-select:none;
            outline:none; border-radius:8px; cursor:grab; }
.pl-stage:active { cursor:grabbing; }
.pl-stage:focus-visible { box-shadow:0 0 0 2px var(--verdigris, #3FE0B0); }
.pl-string { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.pl-string path { fill:none; stroke:rgba(243,231,216,.55); stroke-width:1.4; }
.pl-card { position:absolute; left:0; top:0; width:var(--pl-w, 200px); padding:9px 9px 0; border:0; margin:0;
           background:#F1E9DA; color:#1b1611; box-shadow:0 14px 28px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.4) inset;
           transform-origin:50% 0; cursor:pointer; text-align:left; will-change:transform;
           background-image:radial-gradient(rgba(0,0,0,.035) 1px, transparent 1px); background-size:3px 3px; }
.pl-card:focus-visible { outline:3px solid var(--verdigris, #3FE0B0); outline-offset:3px; }
.pl-peg { position:absolute; left:50%; top:-10px; width:12px; height:22px; margin-left:-6px; border-radius:3px;
          background:linear-gradient(90deg,#9a5a33,#c98552 50%,#8a4a26); box-shadow:0 2px 3px rgba(0,0,0,.45); }
.pl-photo { position:relative; display:block; aspect-ratio:1/1; overflow:hidden; background:#111; }
.pl-photo img { width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.pl-play { position:absolute; right:8px; bottom:8px; width:30px; height:30px; border-radius:50%; background:rgba(9,8,7,.72); }
.pl-play::after { content:""; position:absolute; left:12px; top:9px; border-style:solid; border-width:6px 0 6px 10px; border-color:transparent transparent transparent #F3E7D8; }
.pl-cap { display:block; padding:10px 2px 2px; font:400 clamp(13px, calc(var(--pl-w, 200px) * .075), 17px)/1.15 'Permanent Marker', cursive;
          color:#20180f; transform:rotate(-1.2deg); }
.pl-tag { display:block; padding:2px 2px 10px; font:700 9px var(--mono, monospace); letter-spacing:.14em; text-transform:uppercase; color:#6b5440; }
.pl-card.is-featured .pl-peg { background:linear-gradient(90deg,#2f7766,#5fb3a0 50%,#2a6a5b); }
.pl-card.is-featured::after { content:"START HERE"; position:absolute; right:-6px; top:14px; padding:3px 6px; transform:rotate(6deg);
                              font:700 8px var(--mono, monospace); letter-spacing:.16em; background:#B86D43; color:#F3E7D8; }
.pl-card.is-here { box-shadow:0 18px 40px rgba(0,0,0,.6), 0 0 0 2px rgba(184,109,67,.55); }
.pl-ctrl { display:flex; align-items:center; gap:12px; margin-top:6px; flex-wrap:wrap; }
.pl-count { font:600 11px var(--mono, monospace); letter-spacing:.1em; text-transform:uppercase; color:var(--cream-dim, #c8bba8); min-width:0; flex:1; }

.pl-box { padding:0; border:0; background:transparent; max-width:min(96vw, 1100px); width:100%; color:var(--cream, #F3E7D8); }
.pl-box::backdrop { background:rgba(5,5,4,.86); }
.pl-box-in { background:#F1E9DA; color:#1b1611; padding:14px 14px 10px; box-shadow:0 30px 80px rgba(0,0,0,.7); }
.pl-box-media { display:flex; justify-content:center; background:#0b0a09; }
.pl-box-media video, .pl-box-media img { display:block; width:auto; height:auto; max-width:100%; max-height:72vh; }
.pl-box-media img[src$=".svg"] { width:100%; background:#F3E7D8; }
.pl-box-title { margin:12px 0 0; font:400 22px/1.15 'Permanent Marker', cursive; }
.pl-box-tag { margin:4px 0 0; font:700 10px var(--mono, monospace); letter-spacing:.14em; text-transform:uppercase; color:#7a3f20; }
.pl-box-note { margin:6px 0 0; font:13px/1.5 var(--body, sans-serif); color:#3a2f24; max-width:70ch; }
.pl-box-ctrl { display:flex; gap:10px; align-items:center; margin-top:10px; }
.pl-box-ctrl .bh-ctl { background:#1b1611; }
.pl-box-n { flex:1; font:600 11px var(--mono, monospace); letter-spacing:.1em; color:#5a4a3a; }
@media (prefers-reduced-motion: reduce) { .pl-card { will-change:auto; } }