/* FlowCells: the house frame with a plum subject colour taken from the support measure. */

.house-frame:has(.fc-cover) {
  --cover-a: #55305f;
  --cover-b: #1b1029;
  --cover-glow: rgba(255, 168, 96, .26);
  --cover-warm: rgba(160, 200, 255, .14);
  --accent: #6a3f78;
}

.fc-body cite { font-style: italic; }

.fc-figure { margin: 0; }
.fc-figure img {
  display: block; width: 100%; max-width: 1040px; height: auto;
  border: 1px solid #36455f; border-radius: 3px; background: #fff;
  box-shadow: inset 0 1px rgba(255, 255, 255, .35), 0 8px 22px rgba(22, 31, 52, .22);
}
.fc-figure--diagram { margin: 18px 0; }
.fc-figure--diagram img { max-width: 860px; padding: 8px; box-shadow: 0 4px 12px rgba(22, 31, 52, .12); border-color: var(--h-line); }
.fc-figure figcaption { margin-top: 10px; max-width: 68ch; color: var(--h-muted); font: 15px/1.5 var(--h-serif); }
#method > .fc-figure:first-of-type { margin-bottom: 18px; }

.fc-anatomy { display: grid; gap: 0; margin: 0; max-width: 860px; }
.fc-anatomy > div {
  display: grid; grid-template-columns: minmax(120px, 9em) 1fr; gap: 4px 20px; padding: 10px 0;
  font: 18px/1.55 var(--h-serif);
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--h-rule) 10%, var(--h-rule) 90%, transparent) 1;
}
.fc-anatomy dt { font-weight: 600; color: var(--accent); }
.fc-anatomy dd { margin: 0; }

.fc-refs { padding-left: 1.1em; font-size: 16px; }
.fc-refs li + li { margin-top: .4em; }

/* Wide technical strips keep legible labels on phones by scrolling sideways. */
.fc-scroll { max-width: 100%; overflow-x: auto; }

@media (max-width: 640px) {
  .fc-anatomy > div { grid-template-columns: 1fr; }
  .fc-scroll img { width: 760px; max-width: none; }
}