/* v2.33: three columns under 900px, six from 900px. flex columns share one top edge.
   the lightbox is the full viewport. the photo box is the aspect ratio, contained. */
body.snaps .stage{flex-direction:column;align-items:center;width:100%}
body.snaps .gallery{width:min(1280px,calc(100vw - 32px));margin:0 auto 32px;position:relative;z-index:2}
/* v2.34: month headings stay at the old header size, which is now the grid-title size. */
/* v2.38 (jay 2026.10.20): month headings are an italic caption, ~78% of the header line (11px, 10px on a phone), still --c. */
.month h2{margin:22px 0 10px;text-align:center;font-family:var(--mono);font-size:11px;font-style:italic;font-weight:500;line-height:1.25;color:var(--c);text-shadow:0 0 8px rgba(var(--bg-rgb),.8)}
.month:first-child h2{margin-top:4px}
/* TEMPORARY (jay 2026.10.20): the backlog note above the newest month. the header line's font and size (mono, 14px / 13px on a phone,
   weight 500), upright, plain --fg (white dark, black light). it is a 44px row like the byline / nav / icon rows, pulled up by the mast's
   --habit-gap, so the gaps icons -> note -> month title match byline -> nav -> icons. delete with the line in /index.html. */
body.snaps .backlog{box-sizing:border-box;display:flex;align-items:center;justify-content:center;min-height:44px;margin:calc(-1 * var(--habit-gap,16px) - 1px) 0 0;padding:calc((44px - 1.25em) / 2) 8px;text-align:center;font-family:var(--mono);font-size:14px;font-weight:500;font-style:italic;letter-spacing:normal;line-height:1.25;color:var(--fg);text-shadow:0 0 8px rgba(var(--bg-rgb),.8)}
body.snaps .backlog + .gallery .month:first-child h2{margin-top:0}
@media (max-width:760px){body.snaps .backlog{font-size:13px}}
.grid{display:flex;align-items:flex-start;gap:8px}
.col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:8px}
.shot{position:relative;display:block;width:100%;margin:0;padding:0;border:0;background:#111;cursor:zoom-in;-webkit-tap-highlight-color:transparent;aspect-ratio:var(--r,1)}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shot:focus-visible{outline:2px solid var(--c);outline-offset:2px}
.note{margin:12px 0 0;text-align:center;font-size:14px;line-height:1.4;font-weight:500;color:var(--ink-3)}
html.light-open,html.light-open body{overflow:hidden;height:100%}
.light:not([open]){display:none}
.light[open]{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;box-sizing:border-box;touch-action:none;overscroll-behavior:none;user-select:none}
.light:focus{outline:0}
.light::backdrop{background:rgba(0,0,0,.9)}
.frame{position:relative;z-index:1;flex:none;min-width:0;min-height:0;--w:1;--h:1;aspect-ratio:var(--w)/var(--h);width:min(calc(95vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)),calc((92vh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))*var(--w)/var(--h)));max-height:calc(92vh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));height:auto;background:#111;pointer-events:none}
@supports (height:100dvh){
  .frame{width:min(calc(95vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)),calc((92dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))*var(--w)/var(--h)));max-height:calc(92dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.frame .hi{opacity:0}
.frame .hi.on{opacity:1}
.light .nav,.light .x{margin:0;padding:0;border:0;background:transparent;color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent}
.light .nav{position:absolute;top:0;bottom:0;z-index:2;width:50%}
.light .nav.prev{left:0}
.light .nav.next{right:0}
.light .nav svg,.light .x svg{display:block;width:22px;height:22px;padding:11px;border-radius:50%;background:rgba(0,0,0,.45);box-sizing:content-box}
.light .nav svg{position:absolute;top:50%;margin-top:-22px}
.light .nav.prev svg{left:max(10px,env(safe-area-inset-left,0px))}
.light .nav.next svg{right:max(10px,env(safe-area-inset-right,0px))}
.light .nav.off{cursor:default}
.light .nav.off svg{opacity:.28}
.light .nav:focus{outline:0}
.light .nav:focus-visible svg,.light .x:focus-visible{outline:2px solid var(--c);outline-offset:3px}
.light .x{position:absolute;z-index:3;top:max(10px,env(safe-area-inset-top,0px));right:max(10px,env(safe-area-inset-right,0px));width:44px;height:44px}
.light .x svg{width:18px;height:18px;padding:13px}
@media (max-width:760px){
  .month h2{font-size:10px}
  body.snaps .gallery{width:min(1100px,calc(100vw - 24px))}
}