.photo-ph {
  position: relative;
  background: repeating-linear-gradient(
    -45deg,
    #f3f4f6,
    #f3f4f6 12px,
    #e5e7eb 12px,
    #e5e7eb 24px
  );
  border: 2px dashed #9ca3af;
  overflow: hidden;
}

.photo-ph::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280;
}

.photo-ph-logo {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  flex-shrink: 0;
}

.photo-ph-hero {
  width: 100%;
  height: 16rem;
  background: #0b1220;
  border: 0;
}

@media (min-width: 768px) {
  .photo-ph-hero {
    height: 32rem;
  }
}

.photo-ph-card {
  width: 100%;
  height: 14rem;
}

.photo-ph-tall {
  width: 100%;
  min-height: 18rem;
}

.photo-ph img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.photo-ph-hero img,
.photo-ph-card img,
.photo-ph-tall img {
  object-fit: cover;
}

.photo-ph-hero img {
  object-fit: contain;
}

.photo-ph:has(img)::after {
  display: none;
}

html, body {
  margin: 0;
  background-color: var(--app-bg-light, #f9fafb);
}

:root {
  --app-bg-light: #f9fafb;
  --app-bg-dark: #0f172a;
  --app-surface-light: #ffffff;
  --app-surface-dark: #1e293b;
}

html.dark {
  color-scheme: dark;
}

html.dark,
html.dark body {
  background-color: var(--app-bg-dark) !important;
  color: #e2e8f0;
}

.bg-gray-50,
.bg-slate-50,
.bg-gray-100,
.bg-slate-100 {
  background-color: var(--app-bg-light) !important;
}

.bg-white {
  background-color: var(--app-surface-light) !important;
}

.from-gray-50 {
  --tw-gradient-from: var(--app-bg-light) !important;
  --tw-gradient-to: var(--app-surface-light);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-white {
  --tw-gradient-to: var(--app-surface-light) !important;
}

html.dark .bg-white { background-color: var(--app-surface-dark) !important; }
html.dark .bg-gray-50,
html.dark .bg-slate-50,
html.dark .bg-gray-100,
html.dark .bg-slate-100 { background-color: var(--app-bg-dark) !important; }
html.dark .bg-gray-200,
html.dark .bg-slate-200 { background-color: #334155 !important; }
html.dark .bg-blue-50 { background-color: #1e3a5f !important; }

html.dark .text-gray-900,
html.dark .text-slate-900 { color: #f8fafc !important; }
html.dark .text-gray-800,
html.dark .text-slate-800 { color: #e2e8f0 !important; }
html.dark .text-gray-700,
html.dark .text-slate-700 { color: #cbd5e1 !important; }
html.dark .text-gray-600,
html.dark .text-slate-600 { color: #94a3b8 !important; }
html.dark .text-gray-500,
html.dark .text-slate-500 { color: #94a3b8 !important; }
html.dark .text-gray-400,
html.dark .text-slate-400 { color: #94a3b8 !important; }

html.dark .border-gray-100,
html.dark .border-slate-100,
html.dark .border-gray-200,
html.dark .border-slate-200 { border-color: #334155 !important; }
html.dark .border-gray-300,
html.dark .border-slate-300 { border-color: #475569 !important; }

html.dark .from-gray-50 {
  --tw-gradient-from: var(--app-bg-dark) !important;
  --tw-gradient-to: var(--app-surface-dark);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html.dark .to-white {
  --tw-gradient-to: var(--app-surface-dark) !important;
}

html.dark .hover\:bg-gray-100:hover,
html.dark .hover\:bg-slate-50:hover { background-color: #334155 !important; }
html.dark .hover\:bg-gray-200:hover { background-color: #475569 !important; }
html.dark .hover\:bg-blue-50:hover { background-color: #1e3a5f !important; }

html.dark .photo-ph {
  background: repeating-linear-gradient(
    -45deg,
    #1e293b,
    #1e293b 12px,
    #334155 12px,
    #334155 24px
  );
  border-color: #64748b;
}

html.dark .photo-ph-hero:has(img) {
  background: #0b1220;
  border: 0;
}

html.dark .photo-ph::after {
  color: #94a3b8;
}