/* PF4: the house frame with a slate-violet subject colour. */

.house-frame:has(.pf4-cover) {
  --cover-a: #3a3a78;
  --cover-b: #15173a;
  --cover-glow: rgba(170, 160, 255, .3);
  --cover-warm: rgba(255, 207, 102, .16);
  --accent: #4b4a8f;
}

.pf4-figure { margin: 0; }
.pf4-figure img {
  display: block; width: min(100%, 880px); height: auto;
  border: 1px solid #36455f; border-radius: 3px;
  box-shadow: inset 0 1px rgba(255, 255, 255, .35), 0 8px 22px rgba(22, 31, 52, .22);
}
.pf4-figure figcaption { margin-top: 10px; max-width: 68ch; color: var(--h-muted); font: 15px/1.5 var(--h-serif); }

.pf4-eq {
  margin: 1em 0; padding: 14px 18px; overflow-x: auto;
  font: 19px/1.6 var(--h-serif); white-space: nowrap;
  background: color-mix(in srgb, var(--h-pearl) 70%, var(--accent) 6%);
  border: 1px solid var(--h-line); border-radius: 4px;
  box-shadow: inset 0 1px 3px rgba(15, 29, 61, .12);
}
.pf4-eq sup sup { font-size: .8em; }

.pf4-code {
  margin: 1em 0; padding: 14px 18px; overflow-x: auto;
  font: 14px/1.6 ui-monospace, Menlo, Consolas, monospace;
  background: #f3f4f7; border: 1px solid var(--h-line); border-radius: 4px;
  box-shadow: inset 0 1px 3px rgba(15, 29, 61, .12);
}
.house-prose code { font: .86em ui-monospace, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.pf4-refs { padding-left: 1.1em; font-size: 16px; }
.pf4-refs li + li { margin-top: .4em; }