.ph {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: .55rem;
  padding: 1.1rem;
  border: 1px dashed #b9b9b9;
  background-color: #fafafa;
  background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.02) 0 10px, rgba(0,0,0,0) 10px 20px);
  color: var(--muted);
}

.ph-label {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .75rem;
  line-height: 1;
  letter-spacing: .08em;
  color: #5f5f5f;
  background: #fff;
  border: 1px solid #d8d8d8;
  padding: .3rem .5rem;
}

.ph-note {
  margin: 0;
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--muted);
}

.ph-note strong { color: #4a4a4a; font-weight: 600; }

.ph--hero { min-height: 500px; justify-content: flex-end; }
.ph--mini { min-height: 210px; }
.ph--full { width: 100%; }
.ph--section { min-height: 220px; align-items: center; justify-content: center; text-align: center; }
.ph--section .ph-note { max-width: 60ch; }
.ph--inline { min-height: 0; padding: .8rem 1rem; }
.ph--post { min-height: 300px; }
.ph--quote { min-height: 120px; }
.ph--newsletter { width: 100%; }

.ph--on-dark {
  border-color: rgba(255,255,255,.55);
  background-color: rgba(255,255,255,.08);
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 10px, rgba(255,255,255,0) 10px 20px);
  color: rgba(255,255,255,.9);
}
.ph--on-dark .ph-label {
  background: transparent;
  border-color: rgba(255,255,255,.6);
  color: #fff;
}
.ph--on-dark .ph-note { color: rgba(255,255,255,.9); }
.ph--on-dark .ph-note strong { color: #fff; }

@media (max-width: 980px) {
  .ph--hero { min-height: 340px; }
}