/* ===== Photos — full-bleed masonry wall + gallery dropdown + photographer-grade lightbox ===== */
body{background:#000}

/* floating control: PHOTOS on top, ‹ year › beneath, gallery dropdown below */
.phbar{position:fixed;top:118px;left:50%;transform:translateX(-50%);z-index:50;width:max-content;max-width:min(92vw,420px);
  display:flex;flex-direction:column;align-items:center;gap:4px;background:rgba(0,0,0,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:11px 22px 13px;border-radius:22px;box-shadow:0 4px 18px rgba(0,0,0,.55)}
.phbar .lbl{font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:5px;font-size:30px;color:var(--leaf)}
/* SUBMIT — the photographers' door, small and orange, directly under the PHOTOS title.
   Orange is the site's primary-action colour on every surface; green is badges only. */
.phbar .phsubmit{font-family:var(--data);font-weight:700;text-transform:uppercase;letter-spacing:1.4px;font-size:12px;
  line-height:1;color:#11281B;background:var(--orange);text-decoration:none;padding:6px 14px;border-radius:999px;
  margin-top:2px;transition:filter .2s ease}
.phbar .phsubmit:hover{filter:brightness(1.12)}
.phrow{display:flex;align-items:center;justify-content:center;gap:18px}
.phbar .ybtn,.phbar .ybtn:hover,.phbar .ybtn:focus,.phbar .ybtn:focus-visible,.phbar .ybtn:active{
  appearance:none;-webkit-appearance:none;background:transparent;border:0;outline:none;box-shadow:none;
  cursor:pointer;color:var(--leaf);font-size:26px;line-height:1;font-family:Arial,sans-serif;padding:2px 6px}
.phbar .ybtn:disabled{opacity:.2;cursor:default}
.phbar .ynow{font-family:var(--inline);font-size:34px;line-height:1;color:var(--cream);min-width:2.6ch;text-align:center}
.sel{position:relative;margin-top:8px;max-width:100%}
.sel.hidden{display:none}
.selbtn{appearance:none;-webkit-appearance:none;background:rgba(255,255,255,.1);border:0;outline:none;box-shadow:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:10px;margin:0 auto;max-width:100%;
  font-family:var(--data);font-weight:700;text-transform:uppercase;letter-spacing:1px;font-size:14px;color:var(--cream);
  padding:9px 20px;border-radius:17px;transition:background .25s ease}
.selbtn:hover{background:rgba(40,152,81,.3)}
.selbtn svg{flex:0 0 auto;transition:transform .3s cubic-bezier(.2,.7,.3,1.2)}
.sel.open .selbtn svg{transform:rotate(180deg)}
.sellist{position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%,-8px);z-index:60;
  width:max-content;min-width:100%;max-width:88vw;max-height:46vh;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:rgba(40,152,81,.5) transparent;
  background:rgba(0,0,0,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-radius:15px;padding:7px;box-shadow:0 14px 40px rgba(0,0,0,.7);
  opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s cubic-bezier(.2,.7,.3,1)}
.sel.open .sellist{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.selopt{display:block;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;
  font-family:var(--data);font-weight:700;text-transform:uppercase;letter-spacing:1px;font-size:14px;color:var(--cream);
  padding:11px 26px;border-radius:10px;transition:background .2s ease,color .2s ease}
.selopt:hover{background:rgba(40,152,81,.3)}
.selopt.on{color:var(--leaf)}
/* a session the selected photographer has no photos in — greyed, not selectable */
.selopt.off{opacity:.3;cursor:default;pointer-events:none;text-decoration:line-through}

/* the wall */
.wall{columns:2 auto;column-gap:5px;padding:0;margin:0;transition:opacity .28s ease,transform .28s ease}
@media(min-width:700px){.wall{columns:3}}
@media(min-width:1100px){.wall{columns:4}}
@media(min-width:1560px){.wall{columns:5}}
.wall.out-l{opacity:0;transform:translateX(-34px)}
.wall.out-r{opacity:0;transform:translateX(34px)}
.tile{position:relative;display:block;width:100%;margin:0 0 5px;break-inside:avoid;overflow:hidden;cursor:pointer;background:#262626;
  opacity:0;transform:translateY(22px);transition:opacity .5s ease,transform .5s ease}
.tile.in{opacity:1;transform:none}
/* the one cell that sits under the fixed control card — blacked out (it can never be reached) */
.tile.blocked{background:#000!important;cursor:default;pointer-events:none}
.tile.blocked img,.tile.blocked .cap{visibility:hidden}
.tile img{display:block;width:100%;height:auto;transform:scale(1);transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.tile:hover img{transform:scale(1.045)}
/* caption overlay = black MENU-style pill (brand font + colours), bottom-left, always visible */
.tile .cap{position:absolute;left:8px;right:8px;bottom:8px;max-width:calc(100% - 16px);
  display:inline-block;width:max-content;max-inline-size:calc(100% - 16px);
  padding:5px 11px;border-radius:999px;background:#0b0b0b;border:1px solid rgba(255,255,255,.16);
  box-shadow:0 3px 12px rgba(0,0,0,.4);
  font-family:var(--data);font-weight:700;text-transform:uppercase;letter-spacing:.4px;font-size:11px;line-height:1.3;color:var(--cream);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(min-width:700px){.tile .cap{font-size:12px}}
.wallwrap{padding:0 0 220px}

/* two pulldowns side by side; load-more button */
.sels{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.sel.hidden,.psel.hidden{display:none}
.loadmore-wrap{text-align:center;padding:22px 0 0}
.loadmore{appearance:none;-webkit-appearance:none;cursor:pointer;font-family:var(--data);font-weight:700;text-transform:uppercase;letter-spacing:1px;font-size:14px;
  color:var(--cream);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:13px 28px;transition:border-color .2s ease,background .2s ease,color .2s ease}
.loadmore:hover{border-color:var(--leaf);background:rgba(40,152,81,.16);color:var(--leaf)}

/* lightbox — photographer grade */
.lb{position:fixed;inset:0;z-index:120;display:none}
.lb.open{display:block}
.lb .lbbg{position:absolute;inset:0;background:rgba(0,0,0,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);opacity:0;transition:opacity .38s ease}
.lb.show .lbbg{opacity:1}
.lbstage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:opacity .26s ease,transform .26s ease}
.lbstage.out-l{opacity:0;transform:translateX(-46px)}
.lbstage.out-r{opacity:0;transform:translateX(46px)}
.lbframe{position:relative;box-shadow:0 30px 90px rgba(0,0,0,.85);transition:transform .46s cubic-bezier(.22,1,.36,1),opacity .3s ease;will-change:transform}
.lbframe img{position:absolute;inset:0;width:100%;height:100%;display:block}
.lbframe .hi{opacity:0;transition:opacity .5s ease}
.lbframe .hi.on{opacity:1}
.lbframe .lo{filter:blur(0px)}
.lbchrome{opacity:1;transition:opacity .45s ease}
.lb.idle .lbchrome{opacity:0}
/* caption raised well clear of the bottom edge, inside a readable black pill (menu style) */
.lbmeta{position:absolute;left:0;right:0;bottom:max(11vh, calc(74px + env(safe-area-inset-bottom)));display:flex;justify-content:center;padding:0 14px;pointer-events:none;z-index:3}
.lbmeta-in{pointer-events:auto;max-width:min(92vw,560px);display:inline-flex;flex-direction:column;align-items:center;gap:5px;
  background:rgba(0,0,0,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.16);border-radius:20px;padding:12px 22px;box-shadow:0 12px 38px rgba(0,0,0,.65)}
.lbmeta .cat{max-width:100%;font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:3px;font-size:16px;color:var(--cream);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbmeta .credit{font-family:var(--data);font-weight:700;letter-spacing:1.5px;font-size:13px;color:var(--leaf);text-align:center}
.lbmeta .credit:empty{display:none}
.lbmeta-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 14px;margin-top:3px}
.lbmeta .cnt{font-family:var(--data);font-weight:700;letter-spacing:2px;font-size:13px;color:var(--cream);opacity:.82}
.lbdl,.lbrm{appearance:none;-webkit-appearance:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--data);font-weight:700;text-transform:uppercase;letter-spacing:.6px;font-size:12px;text-decoration:none;line-height:1;
  border-radius:999px;padding:8px 15px;border:1px solid transparent;transition:background .2s ease,color .2s ease,border-color .2s ease,filter .2s ease}
.lbdl{color:var(--forest);background:var(--orange)}
.lbdl:hover{filter:brightness(1.08)}
.lbrm{color:#ffd9d3;background:rgba(122,43,43,.9);border-color:rgba(255,120,110,.4)}
.lbrm:hover{background:#7a2b2b}
.lbrm:disabled{opacity:.7;cursor:default}
.lbrm[hidden]{display:none}
.lbn{position:absolute;top:0;bottom:0;width:22%;min-width:70px;cursor:pointer;display:flex;align-items:center;z-index:2}
.lbn span{font-family:Arial,sans-serif;font-size:44px;line-height:1;color:var(--cream);text-shadow:0 2px 14px rgba(0,0,0,.9);opacity:.75;transition:opacity .2s ease,transform .25s cubic-bezier(.2,.7,.3,1.4)}
.lbn.prev{left:0;justify-content:flex-start;padding-left:22px}
.lbn.next{right:0;justify-content:flex-end;padding-right:22px}
.lbn:hover span{opacity:1;transform:scale(1.25);color:var(--leaf)}
.lbx{position:absolute;top:calc(16px + env(safe-area-inset-top));right:18px;z-index:3;font-size:22px;color:var(--cream);background:rgba(0,0,0,.45);padding:11px 15px;border-radius:50%;cursor:pointer;transition:background .2s ease,transform .25s ease}
.lbx:hover{background:rgba(243,146,0,.6);transform:rotate(90deg)}
@media(max-width:700px){.lbn span{font-size:32px}.lbn{min-width:54px}}

@media(prefers-reduced-motion:reduce){
  .tile,.wall,.lbframe,.lbstage,.lb .lbbg{transition:none}
  .tile{opacity:1;transform:none}
  .tile img{transition:none}
}