/* The eleven procedure pages (Fable 3.6): a swatch fan on its rivet. Closed, the comparator leaves show only their edges
   under the top card; fanned (page.js [data-swatch]), each turns about the rivet in held frames so its name shows at the far
   end. On a phone the leaves cascade down instead. After Fable's review (2026-11-05): a little larger, seeded per page
   (--rot tilt, --dx/--dy place, .pf-fan--r for the rivet on the right, fanning the other way), and it opens once by itself. */
.pf-head .dc-head__grid { align-items: start; }
.pf-fan { position: relative; justify-self: center; width: min(100%, calc(282 * var(--u))); margin: calc(var(--dy, 46) * var(--u)) calc(20 * var(--u)) calc(118 * var(--u)) 0; z-index: 3;
  translate: calc(var(--dx, 0) * var(--u)) 0; --step: min(9deg, calc(44deg / var(--n))); --origin: calc(20 * var(--u)) 50%; --dir: 1; }
.pf-fan__deck { position: relative; transform: rotate(calc(var(--rot, -7deg) * var(--dir))); }
.pf-top, .pf-leaf { height: calc(112 * var(--u)); border-radius: 3px 10px 10px 3px; box-shadow: var(--edge), 0 2px 2px rgb(21 31 34 / .16), 0 14px 24px -14px rgb(13 22 25 / .45); transform-origin: var(--origin); }
.pf-leaf { position: absolute; inset: 0 0 auto 0; display: flex; align-items: flex-end; justify-content: flex-end; padding: 0 calc(18 * var(--u)) calc(3 * var(--u)) 0;
  background: #EDE6D8 var(--sheet-b); background-size: 600px; transform: rotate(calc(var(--k) * 1.4deg * var(--dir))); transition: transform .62s steps(8, end); }
.pf-leaf:nth-child(2n) { background-color: #E5DFD2; }
.pf-leaf span { font: 700 calc(13.5 * var(--u)) / 1 var(--display); color: var(--hd); letter-spacing: -.01em; white-space: nowrap; opacity: .25; transition: opacity .62s steps(8, end); }
.pf-top { position: relative; display: grid; align-content: start; gap: calc(5 * var(--u)); padding: calc(14 * var(--u)) calc(18 * var(--u)) calc(12 * var(--u)) calc(40 * var(--u));
  background: #FCF9F3 var(--sheet-a); background-size: 600px; cursor: grab; touch-action: none; }
.pf-top__name { font: 700 calc(26 * var(--u)) / 1 var(--display); color: var(--hd); letter-spacing: -.02em; }
.pf-top__title { font: italic 400 calc(11.5 * var(--u)) / 1.3 var(--serif); color: var(--ink-2); max-width: 30ch; }
.pf-top__marks { display: flex; gap: calc(9 * var(--u)); margin-top: calc(3 * var(--u)); }
.pf-top__marks .mark { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.pf-rivet { position: absolute; left: calc(13 * var(--u)); top: 50%; width: calc(14 * var(--u)); height: calc(14 * var(--u)); margin-top: calc(-7 * var(--u)); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #F4E4B0, #9C7F33 55%, #5A4511); box-shadow: 0 1px 1px rgb(0 0 0 / .35), inset 0 -1px 1px rgb(0 0 0 / .3); }
/* fanned */
.pf-fan.is-open .pf-leaf { transform: rotate(calc(var(--k) * var(--step) * var(--dir))); }
/* the rivet on the right: the fan turns the other way, names at the left end */
.pf-fan--r { --origin: calc(100% - 20 * var(--u)) 50%; --dir: -1; }
.pf-fan--r .pf-top, .pf-fan--r .pf-leaf { border-radius: 10px 3px 3px 10px; }
.pf-fan--r .pf-leaf { justify-content: flex-start; padding: 0 0 calc(3 * var(--u)) calc(18 * var(--u)); }
.pf-fan--r .pf-top { padding: calc(14 * var(--u)) calc(40 * var(--u)) calc(12 * var(--u)) calc(18 * var(--u)); }
.pf-fan--r .pf-rivet { left: auto; right: calc(13 * var(--u)); }
.pf-fan--r .pf-fan__tab { left: auto; right: calc(-22 * var(--u)); }
.pf-fan--r .pf-note { left: auto; right: calc(40 * var(--u)); }
.pf-fan.is-open .pf-leaf span { opacity: 1; }
.pf-fan.is-dragging .pf-leaf, .pf-fan.is-dragging .pf-leaf span { transition: none; }
.pf-fan__tab { position: absolute; z-index: 2; left: calc(-22 * var(--u)); top: calc(78 * var(--u)); width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: #234048 var(--deep-tex); background-size: 300px; color: var(--ivory); cursor: pointer; box-shadow: 0 2px 3px rgb(21 31 34 / .25); }
.pf-fan__tab svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pf-fan__tab:focus-visible { outline: 2px solid var(--hd); outline-offset: 3px; }
.pf-fan.is-open .pf-fan__tab svg { transform: scaleX(-1); }
.pf-note { left: calc(40 * var(--u)); bottom: calc(100% + 16px); }

@media (max-width: 1100px) {
  .pf-fan { justify-self: start; margin-top: calc(26 * var(--u)); translate: none; }
}
@media (max-width: 760px) {
  .pf-fan { width: calc(100% - 30px); margin: 64px 0 calc(var(--n) * 44px + 16px) 30px; }
  .pf-fan__deck { transform: none; }
  .pf-fan--r .pf-leaf { justify-content: flex-end; padding: 0 18px 10px 0; }
  .pf-fan--r .pf-fan__tab { right: -26px; }
  .pf-top, .pf-leaf { height: 104px; }
  .pf-top__name { font-size: 1.6rem; }
  .pf-top__title { font-size: .9rem; }
  .pf-top__marks .mark { width: 15px; height: 15px; }
  .pf-leaf { align-items: flex-end; padding-bottom: 10px; transform: translateY(calc(var(--k) * 4px)); }
  .pf-leaf span { font-size: 1.05rem; }
  .pf-fan.is-open .pf-leaf { transform: translateY(calc(var(--k) * 44px)); }
  .pf-fan__tab { left: -26px; top: 30px; }
  .pf-note { left: 10px; bottom: calc(100% + 26px); }
}
@media (prefers-reduced-motion: reduce) {
  .pf-leaf, .pf-leaf span { transition: none; }
}