:root {
  --bg: #0f1113;
  --panel: #171a1e;
  --border: #23262a;
  --text: #c7cbd1;
  --text-dim: #9aa0a6;
  --frame-h: 700px;        /* ← change this for a different fixed height */
  --mat: 18px;             /* inner "photo mat" padding */
  --radius: 14px;
}

.unit-wrap { max-width: 1100px; margin-top: 12px; }

.figure {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
  /* soft outer lift */
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

/* Inner mounting surface */
.mount {
  padding: var(--mat);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0) 60%) ,
    var(--bg);
  border-bottom: 1px solid var(--border);
}

/* Subtle inner border around the photo area (not the image) */
.photo-well {
  position: relative;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid #1c1f23;
  padding: 10px;                /* space between the image and well edge */
  background: #0c0f12;
  /* faint inset glow to avoid edges feeling glued to the container */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 0 40px rgba(0,0,0,0.25);
  overflow: hidden;
}

.unit-img {
  display: block;
  max-width: 100%;
  width: 100%;
  height: var(--frame-h);       /* fixed, consistent frame height */
  max-height: 78vh;             /* safety cap on very short viewports */
  object-fit: contain;          /* show full photo */
  background-color: #0b0d0f;    /* letterbox fill */
  opacity: 0;                   /* fade-in start */
  transition: opacity 0.3s ease-in-out;
}
.unit-img.loaded { opacity: 1; }

.caption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px var(--mat);
  color: var(--text);
  font-size: 12px;
  transition: opacity 0.3s ease-in-out;
}

.btnbar { display: flex; gap: 8px; margin-top: 12px; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: #fff; text-decoration: none;
  border-radius: 10px;
  padding: 8px 12px;
  font-weight: 600;
  font-size: 12px;
}
.btn[aria-disabled="true"] { opacity: .45; pointer-events: none; cursor: default; }

/* Page transition: fade-out before navigating */
.leaving .unit-img { 
  opacity: 0 !important; 
  transition: opacity 0.25s ease-in-out !important; 
}

.leaving .caption {
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
}