/* ==========================================================================
   photos: a bare concrete gallery wall. cold blue-grey, one spotlight that follows the pointer,
   prints on white paper mats hung from steel wires with black binder clips. text lives on museum labels.
   the lightbox is a dark room: the picture, a slim bar under it, an info drawer.
   ========================================================================== */
body.p-photos {
  --ink: #e9e7e0; --ink-hi: #fff; --ink-lo: #b6b4ac; --link: #fff;
  background: #3a3e40 url(../images/frx/photos_wall.jpg) 0 0 / 512px repeat fixed;
}
/* the spotlight: a soft pool of light from above. it drifts sideways with the pointer (js sets --sx in steps) */
body.p-photos::before { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; background: url(../images/frx/photos_spot.png) var(--sx, 50%) 0 / 1400px 900px no-repeat; opacity: .2; mix-blend-mode: screen; transition: background-position .3s steps(4); }
.p-photos .head__home { display: inline-block; padding: 1px 8px; font: 13px var(--f-mono); color: #111; background: #ebe8df url(../images/frx/photos_paper.jpg) 0 0 / 256px; box-shadow: 2px 3px 0 rgba(0, 0, 0, .55); text-decoration: none; }

/* nav: small museum labels. the one you're on is inked in */
.p-photos .nav ul { display: flex; flex-wrap: wrap; gap: 8px; }
.p-photos .nav a { display: block; padding: 4px 12px; font: 13px/1.3 var(--f-mono); color: #111; text-decoration: none; background: #ebe8df url(../images/frx/photos_paper.jpg) 0 0 / 256px; border: 1px solid #111; box-shadow: 3px 3px 0 rgba(0, 0, 0, .55); }
.p-photos .nav a:hover { animation: none; background-color: #fff; }
.p-photos .nav a[aria-current="page"] { background: #111; color: #ebe8df; }

.p-photos .frame { max-width: 1240px; margin-top: 26px; }
.p-photos .frame--solo { padding-inline: 14px; }
.p-photos .label { display: inline-block; max-width: 560px; margin: 0 0 30px 6px; padding: 16px 22px 12px; color: #111; background: #ebe8df url(../images/frx/photos_paper.jpg) 0 0 / 256px; border: 1px solid #111; box-shadow: 4px 5px 0 rgba(0, 0, 0, .55); transform: rotate(-.4deg); }
.p-photos .label h1 { margin: 0 0 4px; font: 700 28px/1.1 var(--f-serif); color: #111; }
.p-photos .label p { margin: 0; font: 14px/1.5 var(--f-mono); color: #222; }

/* albums are little cards */
.p-photos .albums { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 22px 6px; }
.p-photos .albums[hidden] { display: none; }
.p-photos .albums button { padding: 3px 12px; font: 13px var(--f-mono); color: #111; background: #ebe8df url(../images/frx/photos_paper.jpg) 0 0 / 256px; border: 1px solid #111; outline: 0; box-shadow: 2px 3px 0 rgba(0, 0, 0, .55); }
.p-photos .albums button:hover { animation: none; background-color: #fff; }
.p-photos .albums button[aria-pressed="true"] { background: #111; color: #ebe8df; }
.p-photos .albums button:focus-visible { outline: 2px dashed var(--acid); outline-offset: 2px; }

/* the wall: rows of prints, each row on its own wire */
.p-photos .wall { position: relative; min-height: 120px; }
.p-photos .rail { position: relative; display: flex; gap: 22px; margin: 0 0 46px; padding-top: 34px; }
.p-photos .rail::before { content: ""; position: absolute; left: -14px; right: -14px; top: 22px; height: 22px; background: url(../images/frx/photos_wire.png) 0 0 / 240px 22px repeat-x; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .35)); }
.p-photos .print { position: relative; flex: none; margin: 0; padding: 8px 8px 26px; background: #ebe8df url(../images/frx/photos_paper.jpg) 0 0 / 256px; box-shadow: 4px 6px 0 rgba(0, 0, 0, .55); transform: rotate(var(--r, 0deg)); transform-origin: 50% 0; transition: transform .2s steps(3); }
.p-photos .print::before, .p-photos .print::after { content: ""; position: absolute; top: -26px; width: 46px; height: 52px; background: url(../images/frx/photos_clip.png) 0 0 / 100% 100% no-repeat; z-index: 2; pointer-events: none; }
.p-photos .print::before { left: 12%; } .p-photos .print::after { right: 12%; }
.p-photos .print:hover { transform: rotate(0deg) translateY(-3px); }
.p-photos .print__btn { display: block; width: 100%; padding: 0; border: 0; outline: 0; box-shadow: none; background: transparent; animation: none; cursor: var(--cur-hot); }
.p-photos .print__btn:hover { background: transparent; animation: none; }
.p-photos .print__btn:focus-visible { outline: 3px dashed var(--acid); outline-offset: 4px; }
.p-photos .print img { display: block; width: 100%; height: auto; background: #222; opacity: 0; transition: opacity .3s steps(3); }
.p-photos .print img.is-ready { opacity: 1; }
.p-photos .print figcaption { position: absolute; left: 10px; right: 10px; bottom: 5px; font: 12px/1.2 var(--f-mono); color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* mobile: prints stop swaying, rows get tighter */
@media (max-width: 700px) { .p-photos .rail { gap: 14px; margin-bottom: 36px; } .p-photos .print::before, .p-photos .print::after { width: 34px; height: 39px; top: -20px; } }

.p-photos .pt-empty { display: inline-block; margin: 20px 6px; padding: 12px 18px; font: 14px var(--f-mono); color: #111; background: #ebe8df url(../images/frx/photos_paper.jpg) 0 0 / 256px; border: 1px solid #111; box-shadow: 3px 4px 0 rgba(0, 0, 0, .55); }
.p-photos .pt-empty[hidden] { display: none; }
.p-photos .foot { color: var(--ink-lo); }
.p-photos .foot .div { display: none; }

/* ---------- the lightbox ---------- */
body.lb-open { overflow: hidden; }
.lb { position: fixed; inset: 0; z-index: 300; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: #050506; color: #ddd; }
.lb[hidden] { display: none; }
.lb::after { content: ""; position: absolute; inset: 0; z-index: 9; pointer-events: none; background: #fff; opacity: 0; }
.lb.is-flash::after { animation: lbflash .26s steps(1) 1; }
@keyframes lbflash { 0% { opacity: .85; } 50% { opacity: .35; } 100% { opacity: 0; } }
.lb__bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font: 13px var(--f-mono); color: #aaa; }
.lb__count { margin-right: auto; }
.lb button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; color: #eee; background: #0c0c0d; border: 1px solid #3a3a3d; outline: 0; box-shadow: none; animation: none; }
.lb button:hover { background: #1a1a1c; border-color: #888; animation: none; }
.lb button:focus-visible { outline: 2px dashed var(--acid); outline-offset: 2px; }
.lb button[aria-pressed="true"] { background: #e9e7e0; color: #111; border-color: #e9e7e0; }
.lb svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; }
.lb__stage { position: relative; min-height: 0; overflow: hidden; touch-action: pan-y pinch-zoom; }
.lb__stage.is-zoomed { overflow: auto; cursor: grab; }
/* the picture always fits the stage whole: it fills the stage box and object-fit keeps its shape */
.lb__img { position: absolute; top: 0; bottom: 0; left: 64px; width: calc(100% - 128px); height: 100%; object-fit: contain; cursor: zoom-in; user-select: none; -webkit-user-drag: none; }
.lb__stage.is-zoomed .lb__img { position: static; max-width: none; max-height: none; object-fit: fill; cursor: grabbing; }
.lb__img.is-loading { filter: blur(6px); }
.lb__nav { position: absolute; top: 50%; translate: 0 -50%; z-index: 4; width: 48px !important; height: 72px !important; }
.lb__nav--prev { left: 6px; } .lb__nav--next { right: 6px; }
.lb__stage.is-zoomed ~ .lb__nav, .lb.is-single .lb__nav { display: none; }
.lb__rebate { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline; padding: 10px 16px 14px; font: 13px/1.4 var(--f-mono); color: #bbb; border-top: 1px solid #222; }
.lb__title { color: #fff; font-weight: bold; }
.lb__drawer { position: absolute; top: 60px; right: 0; bottom: 0; z-index: 6; width: min(360px, 100%); padding: 20px 22px; overflow: auto; color: #111; background: #ebe8df url(../images/frx/photos_paper.jpg) 0 0 / 256px; box-shadow: -6px 0 0 rgba(0, 0, 0, .5); }
.lb__drawer[hidden] { display: none; }
@media (min-width: 900px) { .lb.has-info .lb__stage { margin-right: 360px; } .lb.has-info .lb__nav--next { right: 366px; } }
.lb__drawer h2 { margin: 0 0 8px; font: 700 22px/1.15 var(--f-serif); color: #111; }
.lb__drawer p { margin: 0 0 12px; font: 14px/1.55 var(--f-mono); color: #222; white-space: pre-line; }
.lb__drawer dl { margin: 0; font: 13px/1.5 var(--f-mono); }
.lb__drawer dt { color: #555; margin-top: 8px; } .lb__drawer dd { margin: 0; color: #111; }
@media (max-width: 700px) {
  .lb__img { left: 6px; width: calc(100% - 12px); }
  .lb__nav { width: 40px !important; height: 56px !important; opacity: .8; }
  .lb__drawer { top: auto; height: 52dvh; width: 100%; box-shadow: 0 -6px 0 rgba(0, 0, 0, .5); }
  .lb.has-info .lb__stage { margin-bottom: calc(52dvh - 50px); }
  .lb.has-info .lb__nav { display: none; }
}
@media (prefers-reduced-motion: reduce) { .p-photos .print { transform: none !important; } .p-photos .print img { opacity: 1; } .lb.is-flash::after { animation: none; } }