/* A wide central photograph stays intact while connected side panels fold like paper. */
.hero-portrait .portrait-frame,
.hero-portrait .portrait-frame:hover {
  --portrait-rest: 2deg;
  --print-open: 0;
  transform: rotate(var(--portrait-rest));
  transition: none;
  isolation: isolate;
}
.hero-portrait .portrait-frame #hero-photo,
.hero-portrait .portrait-frame:hover #hero-photo {
  position: relative;
  z-index: 0;
  transform: none;
  transition: none;
  opacity: calc(1 - var(--print-open));
}
.hero-portrait .portrait-print {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #59574f;
  perspective: 1400px;
  perspective-origin: 50% 48%;
  transform-style: preserve-3d;
  opacity: var(--print-open);
  pointer-events: none;
}
.hero-portrait .portrait-panel {
  position: absolute;
  top: 0;
  height: 100%;
  overflow: hidden;
  transform-origin: 50% 50%;
  transform: translate3d(var(--panel-x, 0px), 0, var(--panel-z, 0px)) rotateY(var(--panel-angle, 0deg));
  backface-visibility: hidden;
  box-shadow: 0 2px 7px rgb(21 30 21 / var(--panel-shadow, 0));
}
.hero-portrait .is-unfolding .portrait-panel { will-change: transform; }
.hero-portrait .portrait-frame .portrait-panel img,
.hero-portrait .portrait-frame:hover .portrait-panel img {
  position: absolute;
  top: 0;
  max-width: none;
  height: 100%;
  object-fit: cover;
  transform: none;
  transition: none;
  user-select: none;
}
.hero-portrait .portrait-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #fff9ea80 0%, #fff9ea00 18%, #17231900 80%, #172319c0 100%);
  opacity: var(--panel-shade, 0);
}
.hero-portrait .portrait-panel:nth-child(even)::after {
  background: linear-gradient(90deg, #172319b0 0%, #17231900 20%, #fff9ea00 82%, #fff9ea80 100%);
}
.hero-portrait .portrait-panel-centre { z-index: 2; }
.hero-portrait .portrait-panel-centre::after { display: none; }
.hero-portrait .portrait-line { z-index: 2; }
.hero-portrait #portrait-toggle {
  color: var(--ink);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  padding: 0 0 3px;
  border-bottom: 1px solid #24302565;
  white-space: nowrap;
}
.hero-portrait #portrait-toggle:hover { border-bottom-color: var(--ink); }
.hero-portrait #portrait-toggle:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 6px;
  border-radius: 1px;
}
.hero-portrait #portrait-toggle:disabled { opacity: .45; cursor: default; border-bottom-color: transparent; }
.hero-portrait #portrait-hint {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0;
  line-height: 1.5;
}
@media (max-width: 760px) {
  .hero-portrait .portrait-frame,
  .hero-portrait .portrait-frame:hover { --portrait-rest: 1.5deg; }
  .hero-portrait .portrait-print { perspective: 1000px; }
  .hero-portrait figcaption { gap: 12px; align-items: center; }
  .hero-portrait #portrait-toggle { min-height: 44px; padding: 10px 0; }
  .hero-portrait #portrait-toggle,
  .hero-portrait #portrait-hint { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-portrait .portrait-frame #hero-photo { opacity: 1; }
  .hero-portrait .portrait-print { display: none; }
}
body.motion-paused .hero-portrait .portrait-frame #hero-photo { opacity: 1; }
body.motion-paused .hero-portrait .portrait-print { display: none; }