/* Gallery page styles. Owned by the gallery page agent. Shared classes live in ../style.css (see INNER-PAGE KIT); do not redefine them here.
   Layers (see style.css): photos z1 < strings z5 < captions, chips, text z10. Animated properties: transform, opacity, clip-path only. */

/* ---------- photographs: head ---------- */
.pg-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 2vw, 28px); row-gap: clamp(14px, 2.4vw, 30px); align-items: end; }
.pg-head .label { grid-column: 1 / -1; }
.pg-num { grid-column: 1 / 8; padding-bottom: .06em; font: italic 300 clamp(7.5rem, 25vw, 23rem)/.82 var(--serif); letter-spacing: -.045em; color: transparent; -webkit-text-stroke: 1.6px var(--cobalt); }
.pg-tools { grid-column: 1 / -1; position: relative; z-index: 10; display: grid; gap: 1.1rem; justify-items: start; padding-bottom: .5rem; }
html.js .pg-tools { min-height: 9.5rem; }   /* room for the chips JS adds, so nothing below jumps */
.pg-filter { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.pg-show { margin-inline-end: .5rem; color: var(--cobalt); }
.pg-count { font: 600 .76rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--cobalt); }
@media (min-width: 1000px) {   /* side by side only when the count text stays left of the string lane */
  .pg-num { grid-column: 1 / 7; }
  .pg-tools { grid-column: 7 / -1; padding-bottom: .9rem; }
  html.js .pg-tools { min-height: 0; }
}

/* chips: aria-pressed toggles; hover lifts, press settles, the selected chip is filled */
.chip { min-height: 44px; padding: .6rem 1.15rem; border: 1.5px solid var(--cobalt); border-radius: 99px; background: var(--bone); color: var(--cobalt); font: 600 .74rem/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; cursor: pointer; transition: transform .35s var(--ease); }
.chip:hover { transform: translateY(-2px); }
.chip:active { transform: translateY(0) scale(.96); }
.chip[aria-pressed="true"] { background: var(--cobalt); color: var(--cream); }

/* ---------- photographs: the staggered composition ----------
   12 columns. Each figure carries --gc (grid-column) and --gr (grid-row) from the packer (inline for the full set, rewritten
   by js/gallery.js when a filter changes), data-o (L landscape, S square-ish, P portrait) from the real pixel ratio,
   data-d (dropped: sits lower than its row partner) and data-k (0/1, for the phone layout). */
.shots { --drop: clamp(28px, 7vw, 120px); max-width: 1560px; margin: clamp(36px, 6vw, 80px) auto 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(44px, 6.5vw, 104px) clamp(12px, 2vw, 28px); align-items: start; }
.shot { position: relative; min-width: 0; }
.shot[hidden] { display: none; }
.shot .ph img { height: auto; }   /* natural ratio from the width/height attributes: never cropped */
.shot-open { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: zoom-in; }
.shot-open::after { content: ""; position: absolute; z-index: 10; inset-inline-end: 12px; bottom: 12px; width: 44px; height: 44px; border-radius: 50%; pointer-events: none; opacity: 0; transform: scale(.6);
  background: linear-gradient(var(--cream), var(--cream)) center / 14px 1.5px no-repeat, linear-gradient(var(--cream), var(--cream)) center / 1.5px 14px no-repeat, var(--cobalt);
  transition: opacity .35s ease, transform .5s var(--ease); }
.shot-open:hover::after, .shot-open:focus-visible::after { opacity: 1; transform: none; }
.shot-open:active::after { transform: scale(.9); }
.shot-open:active .ph { opacity: .85; }
@media (hover: none) { .shot-open::after { opacity: .92; transform: scale(.8); } }
.shot figcaption { position: relative; z-index: 10; margin-top: .9rem; max-width: 46ch; font: 600 .72rem/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--cobalt); }
.shot figcaption::before { content: ""; display: block; height: 1.5px; margin-bottom: .7rem; background: currentColor; opacity: .55; transform: scaleX(.16); transform-origin: 0 50%; transition: transform .6s var(--ease); }
.shot:hover figcaption::before, .shot:focus-within figcaption::before { transform: none; }

@media (min-width: 760px) {
  .shot { grid-column: var(--gc, 1 / -1); grid-row: var(--gr, auto); }
  .shot[data-d] { margin-top: var(--drop); }
}
@media (max-width: 759px) {   /* phones: one column of mixed widths; landscapes run into the string lane, captions stay out of it */
  .shots { margin-inline-end: calc(var(--lane) * -1); row-gap: 2.6rem; }
  .shot { grid-column: 1 / -1; }
  .shot[data-o="S"] { grid-column: 1 / 11; }
  .shot[data-o="S"][data-k="1"] { grid-column: 3 / -1; }
  .shot[data-o="P"] { grid-column: 1 / 8; }
  .shot[data-o="P"][data-k="1"] { grid-column: 6 / -1; }
  .shot figcaption { padding-inline-end: var(--lane); }
}

/* ---------- archive: contact-sheet prints at the size they were made ---------- */
.arc-h { display: grid; gap: 1.1rem; justify-items: start; font: 300 clamp(2.6rem, 7.2vw, 7rem)/1 var(--serif); letter-spacing: -.025em; }
.arc-h em { font-weight: 400; color: var(--orange); }
.arc-note { margin-top: clamp(20px, 3vw, 40px); max-width: 44ch; color: var(--mist); }
@media (min-width: 640px) { .arc-h { max-width: 66%; } .arc-note { max-width: min(44ch, 66%); } }
.sheet { counter-reset: pr; max-width: 1560px; margin: clamp(40px, 6vw, 88px) auto 0; columns: 2; column-gap: clamp(10px, 1.6vw, 22px); }   /* prints keep their native size; a column narrower than a scan shrinks it, never enlarges */
@media (min-width: 900px) { .sheet { columns: 3; } }
@media (min-width: 1200px) { .sheet { columns: 4; } }
.print { position: relative; z-index: 1; counter-increment: pr; display: block; width: fit-content; max-width: 100%; margin: 0 0 clamp(10px, 1.6vw, 22px); break-inside: avoid; padding: 26px 8px 8px; background: var(--bone); color: var(--ink); }
.print::before { content: counter(pr, decimal-leading-zero); content: counter(pr, decimal-leading-zero) / ""; position: absolute; z-index: 10; top: 9px; inset-inline-start: 8px; font: 600 .64rem/1 var(--sans); letter-spacing: .16em; color: var(--cobalt); }
.print img { display: block; max-width: 100%; height: auto; }   /* width stays the attribute (native size): space is reserved before the lazy scan loads */
.print figcaption { position: relative; z-index: 10; width: 0; min-width: 100%; padding-top: .6rem; font: 600 .66rem/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--cobalt); }
.print:nth-child(4n+2) { --pd: .07s; } .print:nth-child(4n+3) { --pd: .14s; } .print:nth-child(4n) { --pd: .21s; }
html.js:not(.static) .sheet:not(.in) .print { opacity: 0; }
html.js:not(.static) .sheet.in .print { animation: print-in .9s var(--ease) var(--pd, 0s) both; }
@keyframes print-in { from { opacity: 0; transform: translateY(14px); } }
@media (max-width: 639px) { .sheet { margin-inline-end: calc(var(--lane) * -1); } }   /* phones: prints may run into the lane, captions are tiny and sit on paper */

/* ---------- next ---------- */
.next-copy { margin-top: clamp(20px, 3vw, 36px); max-width: 38ch; }
.next .big em { color: var(--cobalt); }
.next .arrow-link { margin-top: clamp(14px, 2vw, 28px); }
@media (min-width: 640px) { .next .inner > :where(:not(.bow)) { max-width: 66%; } }

/* ---------- lightbox: a native <dialog> opened with showModal() by js/gallery.js ---------- */
html.lb-open { overflow: hidden; }
.lb { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; background: var(--deep); color: var(--cream); }
.lb::backdrop { background: var(--deep); }
.lb[open] { display: flex; flex-direction: column; animation: lb-in .4s var(--ease) both; }
@keyframes lb-in { from { opacity: 0; } }
.lb-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 14px var(--gut); }
.lb-n { font: 600 .76rem/1 var(--sans); letter-spacing: .16em; color: var(--mist); }
.lb-x { min-width: 44px; min-height: 44px; padding: .7rem 1.3rem; border: 1px solid currentColor; border-radius: 99px; background: none; color: var(--cream); font: 600 .76rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: transform .35s var(--ease); }
.lb-x:hover { transform: translateY(-2px); }
.lb-x:active { transform: scale(.95); }
.lb-stage { flex: 1; min-height: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(8px, 2vw, 28px); padding: 0 var(--gut) 16px; touch-action: pan-y; }
.lb-fig { min-width: 0; min-height: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; }
.lb-img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 10rem); transition: opacity .35s ease; }
.lb-img.is-load { opacity: 0; }
.lb-cap { min-height: 1.5em; max-width: 60ch; font: 600 .78rem/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase; text-align: center; color: var(--mist); }
.lb-nav { display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 1px solid var(--mist); border-radius: 50%; background: none; color: var(--cream); cursor: pointer; transition: transform .35s var(--ease); }
.lb-nav:hover { transform: scale(1.08); }
.lb-nav:active { transform: scale(.94); }
.lb-nav svg { width: 22px; height: 22px; }
@media (max-width: 639px) {
  .lb-stage { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .lb-fig { grid-column: 1 / -1; }
  .lb-prev { justify-self: start; grid-row: 2; }
  .lb-next { justify-self: end; grid-column: 2; grid-row: 2; }
  .lb-img { max-height: calc(100dvh - 14.5rem); }
}
@media (min-width: 640px) and (max-width: 999px) { .pg-tools { max-width: 66%; } }   /* chips stay out of the string lane */

/* ---------- right to left (Hebrew): see the note in ../style.css ---------- */
:where([dir="rtl"]) .shot figcaption::before { transform-origin: 100% 50%; }
[dir="rtl"] .lb-nav svg { transform: scaleX(-1); }