/* "Three questions" as a fan: the cards fan out, scrolling moves between them, then they settle in a row
   and the page continues. Enhancement only: without JS, narrow screens or reduced motion it is the plain
   three-column layout. */
.fan-track.fan-on{height:calc(var(--fan-stage,420px) + 125vh)}   /* 50% cards, 22% settle, 28% hold on the finished row */
.fan-track.fan-on .fan-ex{position:sticky;top:var(--fan-top,84px)}
.fan-track.fan-on .cols3{position:relative;display:block;padding:0;height:var(--fan-h,300px);overflow:visible}
.fan-track.fan-on .cols3 article{position:absolute;left:50%;top:50%;width:var(--fan-w,360px);margin:0;
  transform-origin:50% 50%;will-change:transform;
  transform:translate(-50%,-50%) translateX(var(--x,0px)) translateY(var(--y,0px)) rotate(var(--r,0deg)) scale(var(--s,1));
  z-index:var(--z,1);box-shadow:0 18px 38px -22px rgba(41,45,39,.35)}
.fan-track.fan-on .cols3 article:focus-within{outline:2px solid var(--ink);outline-offset:3px}
.fan-count{margin-left:auto;font-size:12px;font-weight:500;color:var(--ex-mut);font-variant-numeric:tabular-nums}
.fan-track:not(.fan-on) .fan-count{display:none}

/* the aligned-rows rules for the static layout must not apply to absolutely positioned fan cards */
.fan-track.fan-on .cols3 article{box-sizing:border-box;display:flex;flex-direction:column;grid-row:auto;grid-template-rows:none;gap:var(--s-3)}
.fan-track.fan-on .cols3 article h3{min-height:2.35em}
.fan-track.fan-on .cols3 article .textlink{margin-top:auto;align-self:flex-start}

/* back cards must not show through the front one */
.fan-track.fan-on .cols3 article{background:#eceee1;background-clip:padding-box}

/* fade the content of back cards, never the card itself (so nothing shows through the front card) */
.fan-track.fan-on .cols3 article>*{opacity:var(--o,1)}

.fan-track.fan-on .cols3 article{cursor:pointer}
.fan-track.fan-on .cols3 article a{cursor:pointer}
.fan-nav{display:none;gap:6px;margin-left:12px}
.fan-track.fan-on .fan-nav{display:inline-flex}
.fan-nav button{width:32px;height:32px;border-radius:50%;border:0;background:var(--surface,#fcfcf7);color:var(--ink,#292d27);font:inherit;font-size:18px;line-height:1;cursor:pointer;box-shadow:0 1px 2px rgba(41,45,39,.18)}
.fan-nav button:hover{background:var(--ink,#292d27);color:var(--paper,#f6f4ee)}
.fan-nav button:focus-visible{outline:2px solid var(--ink,#292d27);outline-offset:2px}

/* fan mode: no white panel behind the cards. White cards sit straight on the section colour. */
.fan-track.fan-on .fan-ex{background:transparent;box-shadow:none;border-color:transparent}
.fan-track.fan-on .fan-ex .ex-bar{background:transparent;padding-inline:0}
.fan-track.fan-on .cols3{margin-top:30px}
.fan-track.fan-on .cols3 article{background:#fcfcf7;background-clip:padding-box;box-shadow:0 22px 44px -24px rgba(41,45,39,.38),0 2px 6px rgba(41,45,39,.06)}
.fan-track.fan-on .fan-ex{overflow:visible}
.fan-track.fan-on .cols3{padding-bottom:20px}

/* previous / next: the same keycap as every button on the site (raised surface, a thin edge underneath, presses) */
.fan-nav{gap:8px;margin-left:16px}
.fan-nav button,.fan-nav .fan-key{width:40px;height:40px;border-radius:8px;border:0;background:#fcfcf7;color:#292d27;box-shadow:0 3px 0 rgba(41,45,39,.18);display:inline-grid;place-items:center;padding:0;
  transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s cubic-bezier(.22,1,.36,1),background .2s ease,color .2s ease}
.fan-nav button:hover{background:#292d27;color:#f6f4ee;box-shadow:0 3px 0 #416345;transform:translateY(1px)}
.fan-nav button:active{transform:translateY(3px);box-shadow:0 0 0 transparent}
.fan-nav button:focus-visible{outline:2px solid #292d27;outline-offset:3px}
.fan-count{font-size:13px;letter-spacing:.2px}

/* first / last card: the key that cannot move is disabled, visibly and for assistive tech */
.fan-nav button:disabled{background:#f1f2e8;color:rgba(41,45,39,.32);box-shadow:0 3px 0 rgba(41,45,39,.08);transform:none;cursor:not-allowed}
.fan-nav button:disabled:hover{background:#f1f2e8;color:rgba(41,45,39,.32);box-shadow:0 3px 0 rgba(41,45,39,.08);transform:none}