/*
 * THE CORKBOARD · photo wall (module "photos")
 * A slab of 70s wood paneling floating in the pre-dawn sky, with a cork
 * board in a wood frame, Polaroids pinned and taped to it, a brass plaque,
 * a baseboard and a strip of orange shag. Every class starts with "pho-".
 */

.pho {
  --pho-white: #fbf5e9; /* cream, lifted toward white: Polaroid stock */
  --pho-cork: #b98350; /* paper-2 + orange + wood */
  --pho-cork-lo: #93613a;
  --pho-brass-hi: #f7d98a;
  --pho-brass: #d39a35;
  --pho-brass-lo: #9c6620;
  --pho-shadow: 1px 2px 0 rgba(30, 20, 36, 0.16), 5px 9px 14px -4px rgba(20, 8, 4, 0.6);
  --pho-shadow-up: 2px 4px 0 rgba(30, 20, 36, 0.1), 14px 26px 26px -8px rgba(20, 8, 4, 0.62);
  --pho-shadow-drag: 2px 4px 0 rgba(30, 20, 36, 0.08), 22px 40px 36px -10px rgba(20, 8, 4, 0.6);
  position: relative;
}

/* ------------------------------------------------------------ the wall */
.pho-wall {
  position: relative;
  border-radius: var(--r-md) var(--r-md) var(--r-sm) var(--r-sm);
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 0 0 3px var(--ink), 14px 14px 0 rgba(10, 8, 32, 0.55), var(--shadow-soft);
}
.pho-paneling {
  --plank: 76px;
  position: relative;
  padding: clamp(16px, 3.6vw, 44px) clamp(12px, 3.6vw, 44px) 0;
  background:
    /* the lamp just out of frame */
    radial-gradient(90% 60% at 12% -6%, rgba(244, 179, 60, 0.34), rgba(244, 179, 60, 0) 62%),
    radial-gradient(60% 50% at 100% 110%, rgba(10, 8, 32, 0.45), rgba(10, 8, 32, 0) 70%),
    /* long vertical grain */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='480'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55 .008' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .16  0 0 0 0 .07  0 0 0 0 .03  1.5 0 0 0 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    /* the V-grooves between planks */
    repeating-linear-gradient(
      90deg,
      transparent 0 calc(var(--plank) - 4px),
      rgba(20, 8, 4, 0.7) calc(var(--plank) - 4px) calc(var(--plank) - 1px),
      rgba(255, 214, 170, 0.12) calc(var(--plank) - 1px) var(--plank)
    ),
    /* every plank a slightly different board */
    repeating-linear-gradient(
      90deg,
      #6b3a1f 0 var(--plank),
      #5c311a var(--plank) calc(var(--plank) * 2),
      #74411f calc(var(--plank) * 2) calc(var(--plank) * 3),
      #633520 calc(var(--plank) * 3) calc(var(--plank) * 4)
    );
  box-shadow: inset 0 9px 0 var(--wood-dark), inset 0 12px 0 rgba(255, 214, 170, 0.12),
    inset 0 22px 18px -10px rgba(10, 8, 32, 0.55);
}

/* ------------------------------------------------------------ frame + cork */
.pho-frame {
  position: relative;
  padding: clamp(10px, 1.7vw, 20px);
  border-radius: 5px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .6' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .14  0 0 0 0 .06  0 0 0 0 .02  1.4 0 0 0 -.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    linear-gradient(135deg, #95562c, var(--wood) 42%, #55301a 75%, var(--brown));
  box-shadow: inset 2px 2px 0 rgba(255, 214, 170, 0.38), inset -2px -2px 0 rgba(20, 8, 4, 0.5),
    0 0 0 2px var(--wood-dark), 9px 11px 0 rgba(20, 8, 4, 0.5), 0 22px 34px -12px rgba(0, 0, 0, 0.7);
}
.pho-board {
  --focus: var(--ink); /* the default mustard ring vanishes on cork */
  position: relative;
  border-radius: 2px;
  background-color: var(--pho-cork);
  background-image:
    /* fine dark crumbs */
    radial-gradient(circle at 30% 40%, rgba(61, 31, 16, 0.55) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 70% 20%, rgba(61, 31, 16, 0.45) 0 0.7px, transparent 1.3px),
    /* light granules */
    radial-gradient(circle at 50% 50%, rgba(246, 230, 196, 0.42) 0 0.8px, transparent 1.5px),
    radial-gradient(circle at 20% 80%, rgba(246, 230, 196, 0.3) 0 1.1px, transparent 1.9px),
    /* bigger mottling */
    radial-gradient(ellipse at 50% 50%, rgba(78, 38, 23, 0.22), transparent 62%),
    radial-gradient(ellipse at 50% 50%, rgba(244, 179, 60, 0.16), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 .24  0 0 0 0 .12  0 0 0 0 .05  1.6 0 0 0 -.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");
  background-size: 7px 9px, 11px 7px, 9px 13px, 17px 11px, 53px 41px, 71px 59px, 260px 260px;
  background-position: 0 0, 3px 5px, 5px 2px, 8px 4px, 0 0, 20px 30px, 0 0;
  box-shadow: inset 0 4px 10px rgba(20, 8, 4, 0.6), inset 0 0 0 1px rgba(20, 8, 4, 0.5),
    inset 0 -2px 6px rgba(20, 8, 4, 0.3);
}

/* brass plaque on the bottom rail */
.pho-plaque {
  position: absolute;
  z-index: 2;
  left: clamp(18px, 6%, 64px);
  bottom: 0;
  transform: translateY(46%) rotate(-1.2deg);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.32rem 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
  color: #3a2410;
  text-shadow: 0 1px 0 rgba(255, 240, 194, 0.55);
  background: linear-gradient(180deg, var(--pho-brass-hi), var(--pho-brass) 48%, var(--pho-brass-lo));
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(58, 36, 16, 0.4),
    0 0 0 1.5px #5a3a14, 3px 3px 0 rgba(20, 8, 4, 0.55);
}
.pho-plaque__screw {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: radial-gradient(circle at 35% 35%, #fff3cf, #b07a2a 60%, #6e4614);
  box-shadow: inset 0 0 0 0.5px rgba(58, 36, 16, 0.6);
  position: relative;
}
.pho-plaque__screw::after {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  top: 3px;
  height: 1px;
  background: rgba(58, 36, 16, 0.7);
  transform: rotate(35deg);
}

/* ------------------------------------------------------------ list: phone grid (default) */
.pho-list {
  list-style: none;
  margin: 0;
  padding: 26px 14px 30px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 16px;
  align-items: start;
}
@media (min-width: 540px) {
  .pho-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 34px 22px;
    padding: 30px 22px 34px;
  }
}
.pho-item {
  position: relative;
  min-width: 0;
  container-type: inline-size;
}
.pho-item--note {
  grid-column: 1 / -1;
  width: min(100%, 330px);
  margin-left: 4%;
}

/* ------------------------------------------------------------ list: scattered collage */
.pho.is-scatter .pho-list {
  display: block;
  position: relative;
  padding: 0;
  min-height: 320px;
}
.pho.is-scatter .pho-item {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--pw, 200px);
  margin: 0;
  touch-action: auto;
  -webkit-user-select: none;
  user-select: none;
}
.pho.is-scatter .pho-item--note {
  width: calc(var(--pw, 200px) * 1.14);
}
.pho.is-scatter.is-shuffling .pho-item {
  transition: transform 0.95s var(--ease-bounce) var(--d, 0s);
}
.pho.is-scatter .pho-item:focus-within {
  z-index: 500 !important;
}
@media (hover: hover) {
  .pho.is-scatter .pho-item:hover {
    z-index: 500 !important;
  }
}
.pho.is-scatter .pho-list .pho-item.is-dragging {
  z-index: 600 !important;
}

/* ------------------------------------------------------------ the cards (Polaroid + index card) */
.pho-card {
  --lift: 0px;
  --s: 1;
  --rr: var(--r, 0deg);
  position: relative;
  display: block;
  font-size: 15px;
  font-size: clamp(11px, 7.3cqw, 17px);
  transform-origin: 50% 40%;
  transform: translateY(var(--lift)) rotate(var(--rr)) scale(var(--s));
  transition: transform 0.45s var(--ease-bounce);
}
.pho-card.is-pinned {
  transform-origin: 50% 2%; /* swings from the pin */
}
.pho:not(.is-scatter) .pho-card {
  --rr: calc(var(--r, 0deg) * 0.55);
}
.pho.is-shuffling .pho-card {
  transition: transform 0.95s var(--ease-bounce) var(--d, 0s);
}

/* the Polaroid is a real button */
.pho-snap {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  text-align: left;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}
.pho.is-scatter .pho-snap,
.pho.is-scatter .pho-note {
  cursor: grab;
}
.pho.is-dragging,
.pho.is-dragging .pho-snap,
.pho.is-dragging .pho-note {
  cursor: grabbing;
}
.pho-snap:focus-visible {
  /* ink ring with a cream halo: reads on light and dark cork alike */
  outline: 3px solid var(--focus);
  outline-offset: 4px;
  border-radius: 3px;
}
.pho-snap:focus-visible::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: -9px;
  border: 2px solid var(--pho-white);
  border-radius: 6px;
  pointer-events: none;
}
.pho-photo {
  display: block;
  padding: 7% 7% 0;
  border-radius: 2px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 38%),
    linear-gradient(var(--pho-white), #f2e8d3);
  box-shadow: var(--pho-shadow);
  transition: box-shadow 0.4s var(--ease-out);
}
.pho-img {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--night-1);
}
.pho-img img,
.pho-img .pho-scene {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}
.pho-img::after {
  /* faded instant-film tint + vignette */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 120% at 50% 45%, transparent 55%, rgba(30, 20, 36, 0.38)),
    linear-gradient(135deg, rgba(244, 179, 60, 0.1), rgba(168, 50, 90, 0.08));
  box-shadow: inset 0 0 0 1px rgba(30, 20, 36, 0.4);
}
.pho-cap {
  display: block;
  min-height: 2.75em;
  padding: 0.42em 0.1em 0.62em;
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 1.36em;
  line-height: 1.02;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.pho-cap__tag {
  font-size: max(12px, 0.74em);
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
}
.pho-missing {
  position: absolute;
  z-index: 2;
  left: 8%;
  bottom: 10%;
  padding: 0.2em 0.5em;
  font-family: var(--font-mono);
  font-size: max(11px, 0.64em);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--rust-ink);
  background: rgba(251, 245, 233, 0.92);
  border: 2px solid currentColor;
  border-radius: 3px;
  transform: rotate(-8deg);
}

/* hover / focus: lift off the cork, straighten up a bit */
@media (hover: hover) {
  .pho-item:hover .pho-snap {
    --lift: -0.55em;
    --s: 1.045;
    --rr: calc(var(--r, 0deg) * 0.35);
  }
  .pho-item:hover .pho-photo {
    box-shadow: var(--pho-shadow-up);
  }
}
.pho-snap:focus-visible {
  --lift: -0.4em;
  --s: 1.03;
  --rr: calc(var(--r, 0deg) * 0.35);
}
.pho-snap:focus-visible .pho-photo {
  box-shadow: var(--pho-shadow-up);
}
.pho-snap:active .pho-photo {
  box-shadow: var(--pho-shadow);
}

/* dragging: picked up, tilting with the motion */
.pho .pho-item.is-dragging .pho-card {
  --lift: -0.75em;
  --s: 1.07;
  --rr: calc(var(--r, 0deg) * 0.4 + var(--dt, 0deg));
  transition: transform 0.22s var(--ease-out);
}
.pho .pho-item.is-dragging .pho-photo,
.pho .pho-item.is-dragging .pho-note {
  box-shadow: var(--pho-shadow-drag);
}
.pho .pho-item.is-dragging .pho-pin {
  transform: translate(-0.12em, -0.4em) scale(1.14);
  box-shadow: 0 0 0 1px rgba(30, 20, 36, 0.5), 0.45em 0.8em 0.5em rgba(20, 8, 4, 0.4);
}

/* ------------------------------------------------------------ pins + tape */
.pho-pin {
  --pin: var(--rust);
  position: absolute;
  z-index: 3;
  top: -0.3em;
  left: calc(50% - 0.66em);
  width: 1.32em;
  height: 1.32em;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 55%, var(--pin) 0 58%, #1e1424 140%);
  background: radial-gradient(circle at 50% 55%, var(--pin) 0 56%, color-mix(in srgb, var(--pin) 58%, #1e1424) 76%);
  box-shadow: 0 0 0 1px rgba(30, 20, 36, 0.55), 0.24em 0.42em 0.3em rgba(20, 8, 4, 0.5);
  transition: transform 0.3s var(--ease-bounce), box-shadow 0.3s;
  pointer-events: none;
}
.pho-pin::before {
  /* the cap */
  content: "";
  position: absolute;
  inset: 17% 21% 25% 17%;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.95) 0 14%, rgba(255, 255, 255, 0) 42%), var(--pin);
  box-shadow: 0.06em 0.1em 0.12em rgba(30, 20, 36, 0.45);
}
.pho-tape {
  position: absolute;
  z-index: 3;
  top: -0.78em;
  left: 50%;
  width: 44%;
  height: 1.6em;
  transform: translateX(-50%) rotate(var(--tr, -4deg));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 55%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 3px, rgba(0, 0, 0, 0.03) 3px 5px),
    rgba(230, 201, 147, 0.78);
  box-shadow: 0 1px 2px rgba(20, 8, 4, 0.28);
  clip-path: polygon(2% 0, 98% 0, 100% 16%, 97% 32%, 100% 48%, 97% 64%, 100% 80%, 97% 100%, 3% 100%, 0 84%, 3% 68%, 0 52%, 3% 36%, 0 20%);
  pointer-events: none;
}
.pho-tape--l,
.pho-tape--r {
  top: 0.05em;
  width: 38%;
  height: 1.45em;
}
.pho-tape--l {
  left: -0.95em;
  transform: rotate(-38deg);
}
.pho-tape--r {
  left: auto;
  right: -0.95em;
  transform: rotate(38deg);
}

/* ------------------------------------------------------------ the index card */
.pho-note {
  --rule: 1.5em;
  --head: 2.7em;
  padding: 0 1.05em calc(var(--rule) + 1.2em) 1.15em;
  color: var(--ink);
  border-radius: 2px;
  background-color: #fbf6ea;
  background-image:
    linear-gradient(transparent calc(var(--head) - 2px), rgba(204, 74, 43, 0.75) calc(var(--head) - 2px) var(--head), transparent var(--head)),
    linear-gradient(#fbf6ea 0 var(--head), transparent var(--head)),
    repeating-linear-gradient(transparent 0 calc(var(--rule) - 1px), rgba(63, 184, 168, 0.5) calc(var(--rule) - 1px) var(--rule));
  background-position: 0 0, 0 0, 0 var(--head);
  box-shadow: var(--pho-shadow);
  transition: transform 0.45s var(--ease-bounce), box-shadow 0.4s var(--ease-out);
}
.pho-note .pho-pin {
  left: calc(80% - 0.66em);
}
.pho-note__head {
  display: block;
  height: var(--head);
  padding-top: 1.1em;
  font-family: var(--font-mono);
  font-size: 1em;
  line-height: 1;
}
.pho-note__head span {
  font-size: max(12px, 0.7em);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--rust-ink);
}
.pho-note__title {
  font-family: var(--font-hand);
  font-size: 1.12em;
  line-height: 1.339; /* = one rule */
  padding-top: 0.06em;
}
.pho-note__sub {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 1.32em;
  line-height: 1.136; /* = one rule */
  color: var(--ink-soft);
}
.pho-note__stamp {
  position: absolute;
  right: 0.9em;
  bottom: 0.85em;
  font-size: max(12px, 0.78em);
  line-height: 1.25;
  padding: 0.12em 0.5em;
  border-width: 2px;
}

/* ------------------------------------------------------------ bar under the board */
.pho-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.4rem;
  padding: clamp(1.6rem, 3vw, 2.1rem) 0 clamp(1rem, 2.4vw, 1.5rem);
  min-height: 2.9rem;
}
.pho-shuffle {
  gap: 0.5rem;
  min-height: 2.75rem;
  margin-left: auto;
  order: 2;
}
.pho-shuffle__icon {
  display: inline-grid;
  width: 1.2em;
  height: 1.2em;
}
.pho-shuffle__icon svg {
  width: 100%;
  height: 100%;
  transition: transform 0.5s var(--ease-bounce);
}
@media (hover: hover) {
  .pho-shuffle:hover .pho-shuffle__icon svg {
    transform: rotate(-12deg) scale(1.12);
  }
}
.pho-hint {
  order: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-script);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  line-height: 1.1;
  color: var(--cream);
  text-shadow: 0 2px 0 rgba(20, 8, 4, 0.6);
  transform: rotate(-1.5deg);
}
.pho-hint::before {
  /* hand-drawn arrow pointing up at the board */
  content: "";
  flex-shrink: 0;
  width: 1.6em;
  height: 1.4em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 36' fill='none' stroke='%23f4b33c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 32 C 10 30 22 26 24 6'/%3E%3Cpath d='M16 12 L24 4 L31 13'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

/* ------------------------------------------------------------ baseboard + shag */
.pho-trim {
  height: 40px;
  background:
    linear-gradient(180deg, #7a4626 0 2px, var(--brown) 2px 12px, var(--wood-dark) 12px 15px, rgba(20, 8, 4, 0.55) 15px 17px, transparent 17px),
    radial-gradient(ellipse 3px 7px at 50% 100%, var(--rust) 0 70%, transparent 72%) 0 17px / 7px 9px,
    radial-gradient(ellipse 3px 7px at 50% 100%, var(--mustard) 0 60%, transparent 64%) 3px 21px / 9px 10px,
    radial-gradient(ellipse 3px 6px at 50% 100%, #b5541f 0 70%, transparent 72%) 5px 26px / 6px 8px,
    var(--orange);
}

/* ------------------------------------------------------------ narrow screens */
@media (max-width: 599px) {
  .pho-wall {
    box-shadow: 0 0 0 3px var(--ink), 8px 8px 0 rgba(10, 8, 32, 0.55), var(--shadow-soft);
  }
  .pho-paneling {
    --plank: 58px;
  }
  .pho-bar {
    gap: 0.4rem 1rem;
  }
  .pho-plaque {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
  }
}

/* ------------------------------------------------------------ motion: landing + pin push */
.pho.is-landing .pho-card {
  animation: pho-drop 0.8s var(--ease-bounce) var(--d, 0s) both;
}
.pho.is-landing .pho-pin,
.pho-item.is-dropped .pho-pin {
  animation: pho-pin-push 0.42s var(--ease-bounce) both;
}
.pho.is-landing .pho-pin {
  animation-delay: calc(var(--d, 0s) + 0.45s);
}
@keyframes pho-drop {
  from {
    transform: translateY(-1.8em) rotate(calc(var(--r, 0deg) - 9deg)) scale(1.07);
  }
}
@keyframes pho-pin-push {
  0% {
    transform: translate(-0.15em, -0.5em) scale(1.25);
  }
  60% {
    transform: translate(0, 0.04em) scale(0.9);
  }
  100% {
    transform: none;
  }
}

/* ------------------------------------------------------------ lightbox */
.vvv-dialog.pho-lightbox {
  width: min(94vw, 860px);
  max-width: 94vw;
  border-color: var(--cream);
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(244, 179, 60, 0.16), rgba(244, 179, 60, 0) 70%),
    repeating-linear-gradient(90deg, transparent 0 72px, rgba(10, 4, 2, 0.55) 72px 75px, rgba(255, 214, 170, 0.06) 75px 76px),
    repeating-linear-gradient(90deg, #3d1f10 0 76px, #351a0e 76px 152px, #43230f 152px 228px);
}
.pho-lightbox .vvv-dialog__body {
  padding: clamp(1rem, 3.2vw, 2rem) clamp(0.75rem, 3.2vw, 2rem) clamp(1rem, 3vw, 1.6rem);
}
.pho-lightbox .vvv-dialog__close {
  position: absolute;
  float: none;
  top: 0.7rem;
  right: 0.7rem;
  margin: 0;
}
.pho-lb {
  display: grid;
  justify-items: center;
  gap: clamp(0.9rem, 2.4vw, 1.3rem);
  padding-top: clamp(0.6rem, 2vw, 0.9rem);
}
.pho-lb__snap {
  --lr: -1deg;
  position: relative;
  margin: 0;
  width: fit-content;
  max-width: 100%;
  padding: clamp(10px, 2.2vw, 20px) clamp(10px, 2.2vw, 20px) 0;
  color: var(--ink);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 38%),
    linear-gradient(#fbf5e9, #f2e8d3);
  border-radius: 3px;
  box-shadow: 2px 3px 0 rgba(30, 20, 36, 0.25), 18px 30px 40px -14px rgba(0, 0, 0, 0.75);
  transform: rotate(var(--lr));
  touch-action: pan-y;
}
.pho-lb__snap::before {
  /* a strip of tape holding it to the wall */
  content: "";
  position: absolute;
  z-index: 2;
  top: -14px;
  left: 50%;
  width: min(34%, 150px);
  height: 28px;
  transform: translateX(-50%) rotate(-3deg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 55%), rgba(230, 201, 147, 0.82);
  box-shadow: 0 1px 2px rgba(20, 8, 4, 0.3);
  clip-path: polygon(2% 0, 98% 0, 100% 16%, 97% 32%, 100% 48%, 97% 64%, 100% 80%, 97% 100%, 3% 100%, 0 84%, 3% 68%, 0 52%, 3% 36%, 0 20%);
}
.pho-lb__img {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--night-1);
}
.pho-lb__img img {
  display: block;
  width: auto;
  height: auto;
  min-width: 160px;
  min-height: 120px;
  max-width: min(calc(94vw - 6.5rem), 700px);
  max-height: max(150px, calc(min(90vh, 90dvh) - 17.5rem));
  object-fit: contain;
}
.pho-lb__img.is-scene {
  width: max(150px, min(calc(94vw - 6.5rem), 560px, calc(min(90vh, 90dvh) - 17.5rem)));
  aspect-ratio: 1 / 1;
}
.pho-lb__img .pho-scene {
  display: block;
  width: 100%;
  height: 100%;
}
.pho-lb__img::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 120% at 50% 45%, transparent 60%, rgba(30, 20, 36, 0.32)),
    linear-gradient(135deg, rgba(244, 179, 60, 0.08), rgba(168, 50, 90, 0.06));
  box-shadow: inset 0 0 0 1px rgba(30, 20, 36, 0.4);
}
.pho-lb__img .pho-missing {
  font-size: clamp(0.8rem, 2vw, 1.05rem);
}
.pho-lb__cap {
  width: 0;
  min-width: 100%;
  padding: 0.45rem 0.15rem 0.75rem;
  font-family: var(--font-script);
  font-weight: 700;
  font-size: clamp(1.55rem, 3.6vw, 2.2rem);
  line-height: 1.05;
  color: var(--ink);
}
.pho-lb__bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  width: min(100%, 400px);
}
.pho-lb__nav {
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  padding: 0;
  color: var(--ink);
  background: var(--mustard);
  border: 2px solid var(--ink);
  border-radius: 50%;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out), background-color 0.2s;
}
.pho-lb__nav svg {
  width: 1.45rem;
  height: 1.45rem;
}
@media (hover: hover) {
  .pho-lb__nav:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--rust);
    background: var(--cream);
  }
}
.pho-lb__nav:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}
.pho-lb__count {
  justify-self: center;
  padding: 0.35rem 0.9rem;
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--orange);
  background: var(--ink);
  border-radius: 999px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.7), 0 0 0 2px rgba(246, 230, 196, 0.25);
  white-space: nowrap;
}
.pho-lb__fine {
  max-width: 34rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--fg-dim);
  text-align: center;
}
/* the gallery-wall placard: one shared label, one joke per picture */
.pho-lb__label {
  display: inline-block;
  margin-right: 0.3rem;
  padding: 0 0.45rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mustard);
  border: 1.5px solid currentColor;
  border-radius: 3px;
}

@media (max-width: 600px) {
  .pho-lb {
    padding-top: 2.9rem; /* clear the close button */
  }
  .pho-lb__label {
    display: block;
    width: fit-content;
    margin: 0 auto 0.35rem;
  }
}

/* Short, wide screens (phones in landscape, laptops): the photo sizes by
   height and the arrows, counter and fine print move beside it, so the
   whole frame fits without a scroll. */
@media (max-height: 760px) and (min-aspect-ratio: 4/3) {
  .vvv-dialog.pho-lightbox {
    width: min(94vw, 1040px);
  }
  .pho-lightbox .vvv-dialog__body {
    padding: 0.75rem clamp(0.75rem, 2.4vw, 1.25rem);
  }
  .pho-lb {
    --lb-cap: clamp(1.45rem, 4.2vh, 2rem);
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "count snap ."
      "prev  snap next"
      "fine  snap .";
    align-items: center;
    gap: 0.75rem clamp(0.75rem, 3vw, 2rem);
    padding-top: 14px; /* room for the tape */
  }
  .pho-lb__bar {
    display: contents;
  }
  .pho-lb__snap {
    --swing: 0deg; /* slide straight in, so a corner never pokes past the frame */
    grid-area: snap;
    padding: 12px 12px 0;
  }
  .pho-lb__img img {
    max-width: calc(min(94vw, 1040px) - 26rem);
    max-height: calc(min(90vh, 90dvh) - 5.75rem - 1.05 * var(--lb-cap));
  }
  .pho-lb__img.is-scene {
    width: clamp(140px, calc(min(90vh, 90dvh) - 5.75rem - 1.05 * var(--lb-cap)), 560px);
  }
  .pho-lb__cap {
    padding: 0.35rem 0.1rem 0.55rem;
    font-size: var(--lb-cap);
  }
  .pho-lb__nav--prev {
    grid-area: prev;
    justify-self: end;
  }
  .pho-lb__nav--next {
    grid-area: next;
    justify-self: start;
  }
  .pho-lb__count {
    grid-area: count;
    align-self: start;
    justify-self: end;
    font-size: var(--fs-sm);
  }
  .pho-lb__fine {
    grid-area: fine;
    align-self: end;
    justify-self: stretch;
    max-width: none;
    text-align: right;
    container-type: inline-size;
  }
  .pho-lb__label {
    display: block;
    width: fit-content;
    margin: 0 0 0.35rem auto;
    padding: 0.1rem 0.45rem;
    letter-spacing: 0.1em;
    white-space: nowrap;
  }
  @container (max-width: 190px) {
    .pho-lb__label {
      width: min-content;
      white-space: normal;
    }
  }
}

/* develops like an instant photo, then slides in from the side on prev/next */
.pho-lb__img.is-developing > img,
.pho-lb__img.is-developing > .pho-scene {
  animation: pho-develop 1.15s ease-out both;
}
.pho-lb__snap.is-from-next {
  animation: pho-from-next 0.5s var(--ease-bounce);
}
.pho-lb__snap.is-from-prev {
  animation: pho-from-prev 0.5s var(--ease-bounce);
}
@keyframes pho-develop {
  0% {
    filter: sepia(0.7) saturate(0.25) brightness(1.6) contrast(0.55);
  }
  55% {
    filter: sepia(0.25) saturate(0.8) brightness(1.12) contrast(0.88);
  }
  100% {
    filter: none;
  }
}
@keyframes pho-from-next {
  from {
    transform: translateX(48px) rotate(calc(var(--lr) + var(--swing, 5deg)));
  }
}
@keyframes pho-from-prev {
  from {
    transform: translateX(-48px) rotate(calc(var(--lr) - var(--swing, 5deg)));
  }
}

/* ------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pho-item:hover .pho-snap,
  .pho-snap:focus-visible,
  .pho .pho-item.is-dragging .pho-card {
    --lift: 0px;
    --s: 1;
    --rr: var(--r, 0deg);
  }
  .pho:not(.is-scatter) .pho-item:hover .pho-snap,
  .pho:not(.is-scatter) .pho-snap:focus-visible {
    --rr: calc(var(--r, 0deg) * 0.55);
  }
  .pho.is-landing .pho-card,
  .pho.is-landing .pho-pin,
  .pho-item.is-dropped .pho-pin,
  .pho-lb__img.is-developing > img,
  .pho-lb__img.is-developing > .pho-scene,
  .pho-lb__snap.is-from-next,
  .pho-lb__snap.is-from-prev {
    animation: none;
  }
  .pho .pho-item.is-dragging .pho-pin {
    transform: none;
  }
}