.page-photography .work--page {
  --photography-page-gutter:10vw;
  background:linear-gradient(180deg,#172018 0%,#172018 49%,#111e22 69%,#080f25 88%,#060d20 100%);
  padding-inline:var(--photography-page-gutter);
  padding-bottom:40px;
}
.page-photography .site-footer { background:#060d20; }
.photography-nightcap {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:center;
  gap:0;
  margin-top:clamp(20px,4vw,70px);
  margin-inline:calc(-1 * var(--photography-page-gutter));
  scroll-margin-top:100px;
}
.photography-nightcap>.text-link { grid-row:2; justify-self:start; line-height:1.7; margin:4px var(--photography-page-gutter) 24px; }
.cocktail { grid-row:1; position:relative; min-width:0; margin:0; }
.cocktail__stage {
  position:relative;
  width:100%;
  height:clamp(520px,45vw,710px);
  isolation:isolate;
  cursor:grab;
  touch-action:pan-y;
  -webkit-tap-highlight-color:transparent;
  outline-offset:-12px;
}
.cocktail__stage:active { cursor:grabbing; }
.cocktail__stage:focus-visible { outline:1px solid #a9d8f0; border-radius:28px; }
.cocktail__stage canvas {
  display:block;
  width:100%;
  height:100%;
  opacity:0;
  transition:opacity .65s ease;
  mask-image:linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);
}
.cocktail[data-state="ready"] canvas { opacity:1; }
.cocktail__loading {
  position:absolute;
  top:50%;left:0;right:0;text-align:center;
  color:#c0c7d4;
  font:11px 'DM Mono',monospace;
}
.cocktail[data-state="ready"] .cocktail__loading { display:none; }
.cocktail__controls {
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:22px;
  padding:0 15px 28px;
  color:#b3bccc;
  font:10px/1.5 'DM Mono',monospace;
}
.cocktail__touch-hint { display:none; }
@media(pointer:coarse) {
  .cocktail__mouse-hint { display:none; }
  .cocktail__touch-hint { display:inline; }
}
.cocktail__pause,.cocktail__shutter { border:0; padding:9px 0; background:none; color:inherit; font:inherit; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.cocktail__pause:hover,.cocktail__shutter:hover { color:#fff; }
.cocktail[data-state="unavailable"] .cocktail__controls { display:none; }
@media(max-width:700px) {
  .photography-nightcap { gap:0; margin-top:24px; }
  .photography-nightcap>.text-link { grid-row:2; justify-self:center; margin:20px 0 38px; }
  .cocktail__stage { height:clamp(380px,105vw,520px); }
  .cocktail__controls { flex-wrap:wrap; gap:4px 20px; font-size:9px; padding-bottom:0; }
  .cocktail__controls>span { flex-basis:100%; text-align:center; }
}
@media(max-width:650px) { .page-photography .work--page { --photography-page-gutter:7vw; } }
@media(prefers-reduced-motion:reduce) { .cocktail__stage canvas { transition:none; } }