/* Shared by the demo sites: the SunuWeb ribbon and the empty-photo state. */
.demo-ribbon {
  position: relative; z-index: 200;
  display: flex; justify-content: center; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  padding: 0.5rem 1rem; text-align: center;
  background: #060c17; color: #dbe7f6;
  font: 500 0.8rem/1.4 "Geist", system-ui, sans-serif;
}
.demo-ribbon a { color: #4cb0ff; text-underline-offset: 0.2em; }
[data-ph] { position: relative; overflow: hidden; }
[data-ph] > img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* No photo yet: the slot keeps its shape with a quiet tonal gradient and a label. */
.ph-empty { background: var(--ph, linear-gradient(135deg, #d9d2c6, #b9ae9c)); }
.ph-empty::after {
  content: attr(data-ph); position: absolute; left: 0.75rem; bottom: 0.6rem;
  font: 500 0.7rem/1.2 ui-monospace, monospace; letter-spacing: 0.04em;
  color: rgb(255 255 255 / 0.75); text-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; scroll-behavior: auto !important; }
}