.fambar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:8px}
.count{font-size:12px;color:var(--tx-3);letter-spacing:.06em}
.band.ink .count{color:var(--tx-3)}
.famhead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:44px 0 4px}
.famhead h3{font-size:clamp(24px,3.4vw,34px);margin:0}
.famhead span{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--tx-hi)}
.band.ink .famhead span{color:var(--tx-hi)}
.backnote{display:flex;gap:18px;align-items:center;margin-top:26px;padding:18px 20px;border-radius:18px}
.backnote .card{width:88px;flex:none}
@media(max-width:520px){.backnote{flex-direction:column;text-align:center}}

/* ---- the houses, as twelve stacks rather than forty-eight cards ----
   Each house's four elemental paintings sit squared up behind one another
   and fan apart on hover or focus, so the deck reads as twelve things you
   can open rather than a wall of forty-eight nearly identical ones. */
#ghouses{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:26px 20px}
.hstack .fanwrap{position:relative;aspect-ratio:3/4;
  perspective:900px;transform-style:preserve-3d}
.hstack .fanned{position:absolute;inset:0;
  transform-origin:50% 88%;
  transition:transform .42s var(--spring),box-shadow .35s var(--ease);
  box-shadow:var(--sh-1)}
/* squared up at rest, with only a hair of each card showing behind the front */
.hstack .fanned[data-i="0"]{transform:rotate(0deg)}
.hstack .fanned[data-i="1"]{transform:rotate(2.2deg) translateY(-2px)}
.hstack .fanned[data-i="2"]{transform:rotate(4.4deg) translateY(-4px)}
.hstack .fanned[data-i="3"]{transform:rotate(6.6deg) translateY(-6px)}
/* reach for the stack and the four spread out */
.hstack .fanwrap:hover .fanned[data-i="0"],
.hstack .fanwrap:focus-within .fanned[data-i="0"]{transform:rotate(-13deg) translate(-16%,-4%)}
.hstack .fanwrap:hover .fanned[data-i="1"],
.hstack .fanwrap:focus-within .fanned[data-i="1"]{transform:rotate(-4deg) translate(-5%,-8%)}
.hstack .fanwrap:hover .fanned[data-i="2"],
.hstack .fanwrap:focus-within .fanned[data-i="2"]{transform:rotate(5deg) translate(6%,-8%)}
.hstack .fanwrap:hover .fanned[data-i="3"],
.hstack .fanwrap:focus-within .fanned[data-i="3"]{transform:rotate(14deg) translate(17%,-4%)}
/* the one being pointed at comes to the front and lifts clear */
.hstack .fanned:hover,.hstack .fanned:focus-visible{z-index:6;box-shadow:var(--sh-3);
  outline:none;filter:brightness(1.04)}
.hstack .fanwrap:hover .fanned:hover{transform:rotate(0deg) translateY(-12px) scale(1.06)}
.hstack .fanned:focus-visible{transform:rotate(0deg) translateY(-12px) scale(1.06)}
/* filtered down to one element, a stack is simply that card */
.hstack.single .fanned[data-i="0"]{transform:none}
.hstack.single .fanwrap:hover .fanned[data-i="0"]{transform:translateY(-10px) scale(1.04)}
.hstack .cardlab{margin-top:11px}
.hstack .cardlab i{font-size:9px;letter-spacing:.1em}
@media(hover:none){
  /* nothing to hover on a touch screen, so the four sit spread from the start */
  .hstack .fanned[data-i="0"]{transform:rotate(-11deg) translate(-14%,-3%)}
  .hstack .fanned[data-i="1"]{transform:rotate(-3.5deg) translate(-4%,-7%)}
  .hstack .fanned[data-i="2"]{transform:rotate(4deg) translate(5%,-7%)}
  .hstack .fanned[data-i="3"]{transform:rotate(12deg) translate(15%,-3%)}
}
@media(prefers-reduced-motion:reduce){
  .hstack .fanned{transition:none}
}