/* Artie — looking at photographs. Shared by every room; each room's stylesheet may set the --v-* colours and --reveal.
   Photographs on the page are links to the full file. artie.js adds the rest:
   - an AF point follows the pointer over a photograph and locks (turns red, tightens) when the pointer rests;
   - photographs develop as they arrive, like a print in the tray (the wedding room pulls them into focus instead);
   - the viewer shows a photograph the way a photographer checks a print: the whole frame, uncropped, on a neutral
     surround (colour around a print changes how you see it), crop marks at the trim, the contact sheet underneath with
     the frame circled in china marker, and a loupe that shows the file at 1:1 while you press on it. */

a.view { display: block; height: 100%; color: inherit; }
a.view:focus-visible { outline: 2px solid currentColor; outline-offset: -6px; }
.af-on a.view { cursor: none; }
html.viewing { overflow: hidden; scrollbar-gutter: stable; background: var(--v-bg, #161514); } /* the gutter the scrollbar leaves goes dark with the surround */

/* ---------- the AF point ---------- */
.af { position: fixed; z-index: 60; left: 0; top: 0; width: 58px; height: 40px; margin: -20px 0 0 -29px; pointer-events: none;
  color: var(--v-af, #FFF9EC); opacity: 0; scale: 1.3;
  background: linear-gradient(currentColor 0 0) 0 0 / 11px 1.5px, linear-gradient(currentColor 0 0) 0 0 / 1.5px 9px,
              linear-gradient(currentColor 0 0) 100% 0 / 11px 1.5px, linear-gradient(currentColor 0 0) 100% 0 / 1.5px 9px,
              linear-gradient(currentColor 0 0) 0 100% / 11px 1.5px, linear-gradient(currentColor 0 0) 0 100% / 1.5px 9px,
              linear-gradient(currentColor 0 0) 100% 100% / 11px 1.5px, linear-gradient(currentColor 0 0) 100% 100% / 1.5px 9px;
  background-repeat: no-repeat; filter: drop-shadow(0 0 1px rgb(0 0 0 / .6));
  transition: opacity .15s, scale .28s var(--ease-print, cubic-bezier(.2, .7, .2, 1)), color .1s; }
.af::after { content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px; border-radius: 50%; background: currentColor; }
.af.on { opacity: 1; scale: 1; }
.af.lock { color: var(--v-lock, #E03131); scale: .8; }   /* focus confirmed */

/* ---------- arriving photographs ---------- */
/* the photographs are what's for sale here, so they arrive quickly: a hint of the tray or the lens, not a wait */
.view.develop { transition: filter .9s cubic-bezier(.3, .15, .2, 1), opacity .6s ease-out; }
.view.develop.dev { filter: brightness(1.3) contrast(.7) saturate(.45) sepia(.12); opacity: .7; transition: none; }   /* a print, still in the tray */
.view.focus { transition: filter .9s cubic-bezier(.3, .15, .2, 1), opacity .6s ease-out, scale .9s cubic-bezier(.3, .15, .2, 1); }
.view.focus.dev { filter: blur(8px); opacity: .7; scale: 1.02; transition: none; }   /* the lens racks in */

/* ---------- the viewer ---------- */
.viewer { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: none; color: var(--v-fg, #FFF9EC); overscroll-behavior: contain; }
.viewer:not([open]) { display: none; }
.viewer::backdrop { background: none; }
.viewer::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--v-bg, #161514); opacity: calc(1 - var(--lift, 0) * .55); transition: opacity .45s ease; }
.viewer[style*="--lift"]::before, .viewer[style*="--lift"] .v-chrome { transition: none; } /* while a finger lifts the print, the surround follows it, not a timer */
.viewer[style*="--lift"] .v-chrome { opacity: calc(1 - var(--lift, 0) * 1.6); }
.viewer .v-chrome, .v-trim::before { transition: opacity .4s ease .2s; }
.viewer.enter::before, .viewer.leave::before, .viewer.enter .v-chrome, .viewer.leave .v-chrome, .viewer.enter .v-trim::before, .viewer.leave .v-trim::before { opacity: 0; transition-delay: 0s; }
.viewer.leave::before { transition-duration: .42s; }
.viewer.leave .v-chrome, .viewer.leave .v-trim::before { transition-duration: .18s; }
.viewer button { appearance: none; display: grid; place-items: center; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.viewer button:focus-visible { outline: 1.5px solid currentColor; outline-offset: 3px; }
.viewer button:active { scale: .94; transition: scale .1s ease-out; }
.viewer svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }

.v-top { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: clamp(14px, 2vw, 28px); padding: 12px 12px 4px clamp(18px, 3vw, 36px); }
.v-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 12px/1.5 var(--display, serif); letter-spacing: .16em; text-transform: uppercase; color: var(--v-dim, rgb(255 249 236 / .62)); }
.v-count { font: var(--v-count, 700 13px/1 var(--stencil, var(--display, serif))); letter-spacing: .2em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.v-close { width: 44px; height: 44px; border-radius: 50%; transition: background .2s; }
.v-close:hover { background: rgb(255 255 255 / .08); }

.v-stage { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr) 76px; align-items: center; min-height: 0; touch-action: pinch-zoom; }
.v-prev, .v-next { justify-self: center; width: 48px; height: 48px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--v-line, rgb(255 249 236 / .26)); transition: background .2s, color .2s; }
.v-prev:hover, .v-next:hover { background: var(--v-fg, #FFF9EC); color: var(--v-bg, #161514); }
.v-print { grid-column: 2; height: 100%; min-height: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.v-trim { position: relative; display: block; flex: none; }
.v-trim img { display: block; width: auto; height: auto; max-width: none; object-fit: contain; transform-origin: 0 0; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.v-trim::before { content: ""; position: absolute; inset: -22px; pointer-events: none; color: var(--v-line, rgb(255 249 236 / .34)); /* crop marks, a gap off each corner of the trim */
  background: linear-gradient(currentColor 0 0) left 0 top 22px / 14px 1px, linear-gradient(currentColor 0 0) left 22px top 0 / 1px 14px,
              linear-gradient(currentColor 0 0) right 0 top 22px / 14px 1px, linear-gradient(currentColor 0 0) right 22px top 0 / 1px 14px,
              linear-gradient(currentColor 0 0) left 0 bottom 22px / 14px 1px, linear-gradient(currentColor 0 0) left 22px bottom 0 / 1px 14px,
              linear-gradient(currentColor 0 0) right 0 bottom 22px / 14px 1px, linear-gradient(currentColor 0 0) right 22px bottom 0 / 1px 14px;
  background-repeat: no-repeat; }
.v-print figcaption { max-width: min(38em, 92%); min-height: 1.4em; text-align: center; font: italic 400 16px/1.4 var(--text, var(--serif, serif)); color: var(--v-dim, rgb(255 249 236 / .62)); }

/* the loupe: pressed onto the print, it shows the file pixel for pixel */
.v-loupe { position: absolute; left: 0; top: 0; width: 220px; height: 220px; margin: -110px 0 0 -110px; border-radius: 50%; pointer-events: none;
  background-color: var(--v-bg, #161514); background-repeat: no-repeat; opacity: 0; scale: .35;
  box-shadow: 0 0 0 1px rgb(255 249 236 / .75), 0 0 0 7px rgb(20 20 19 / .6), 0 0 0 8px rgb(255 249 236 / .2), 0 20px 44px rgb(0 0 0 / .55);
  transition: opacity .14s, scale .22s var(--ease-print, cubic-bezier(.2, .7, .2, 1)); }
.v-loupe.on { opacity: 1; scale: 1; }
.af-on .v-trim { cursor: zoom-in; }
.af-on .v-trim.pressing { cursor: none; }

/* the contact sheet, with this frame circled */
.v-sheet { position: relative; display: flex; gap: 12px; overflow-x: auto; list-style: none; margin: 0; padding: 14px clamp(18px, 3vw, 36px) 18px; scrollbar-width: none;
  -webkit-mask: linear-gradient(90deg, #0000, #000 36px, #000 calc(100% - 36px), #0000); mask: linear-gradient(90deg, #0000, #000 36px, #000 calc(100% - 36px), #0000); }
.v-sheet::-webkit-scrollbar { display: none; }
.v-sheet li { flex: none; }
.v-sheet button { position: relative; place-items: start; gap: 6px; opacity: .5; transition: opacity .25s; }
.v-sheet button:hover, .v-sheet button[aria-current="true"] { opacity: 1; }
.v-sheet .no { font: 700 9px/1 var(--stencil, var(--display, serif)); letter-spacing: .16em; color: var(--v-dim, rgb(255 249 236 / .62)); }
.v-sheet .fr { position: relative; display: block; }
.v-sheet img { display: block; width: auto; height: 50px; aspect-ratio: auto 3 / 2; object-fit: cover; }
.viewer .v-loop { position: absolute; left: -12px; top: -9px; width: calc(100% + 24px); height: calc(100% + 18px); overflow: visible; pointer-events: none;
  stroke: var(--v-mark, #E03131); stroke-width: 2.4; }

@media (max-width: 820px) {
  .v-stage { grid-template-columns: 0 minmax(0, 1fr) 0; }
  .v-prev, .v-next { position: absolute; z-index: 1; bottom: 0; width: 44px; height: 44px; background: rgb(22 21 20 / .55); }
  .v-prev { left: 12px; }
  .v-next { right: 12px; }
  .v-print figcaption { max-width: calc(100% - 128px); font-size: 15px; }
  .v-sheet img { height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .viewer::before, .viewer .v-chrome, .v-trim::before, .v-loupe, .af { transition: none; }
}