.ph {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: .55rem;
  padding: 1.1rem;
  border: 1px dashed var(--muted);
  background-color: var(--bg-soft);
  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: var(--body);
  background: var(--bg);
  border: 1px solid var(--line);
  padding: .3rem .5rem;
}

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

.ph-note strong { color: var(--body); font-weight: 600; }
.ph-note code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 0 .25em;
}

.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; }
.ph--on-dark .ph-note code { background: transparent; border-color: rgba(255,255,255,.4); color: #fff; }

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