/* Interactive 5C wheel. Markup is generated by tools/build_5c_wheel.py; behaviour is in wheel.js. */
.method-art.wheel{margin:0;display:flex;flex-direction:column;align-items:center;gap:16px;min-width:0}
.w-stage{width:100%;max-width:580px;aspect-ratio:1/1}
.w-svg{display:block;width:100%;height:100%;overflow:visible;font-family:var(--display,'Barlow Condensed',sans-serif);-webkit-tap-highlight-color:transparent}

/* Consistency ring */
.w-ring{cursor:pointer;outline:none}
.w-ring-band{fill:none;stroke:#131211;pointer-events:stroke;transition:stroke .4s}
.w-ring-edge{fill:none;stroke:var(--orange,#c63a0b);stroke-width:7;transition:stroke-width .4s,filter .4s}
.w-ring-dash{fill:none;stroke:rgba(238,99,59,.55);stroke-width:2;stroke-dasharray:5 9;transform-box:view-box;transform-origin:500px 500px;animation:w-spin 120s linear infinite}
.w-ring-text{fill:#f3eee6;font-weight:700;letter-spacing:.07em;pointer-events:none}
.w-c5{fill:var(--orange-bright,#ee633b)}
.wheel.ring-active .w-ring-band{stroke:#241c17}
.wheel.ring-active .w-ring-edge{stroke-width:11;filter:drop-shadow(0 0 14px rgba(238,99,59,.7))}
.w-ring:focus-visible .w-ring-edge{stroke:#fff}

/* Quadrants: spring outward and grow from the centre */
.w-quad{--g:9px;transform-box:view-box;transform-origin:500px 500px;transform:translate(calc(var(--dx) * var(--g)),calc(var(--dy) * var(--g)));transition:transform .6s cubic-bezier(.34,1.56,.64,1),opacity .35s ease;cursor:pointer;outline:none}
.w-quad.is-active{transform:translate(calc(var(--dx) * 18px),calc(var(--dy) * 18px)) scale(1.045)}
.wheel.ring-active .w-quad{transform:translate(calc(var(--dx) * 13px),calc(var(--dy) * 13px)) scale(1.02)}
.wheel.has-active .w-quad:not(.is-active){opacity:.32}
.w-quads .w-quad.is-active{filter:drop-shadow(0 18px 28px rgba(0,0,0,.55))}

.w-core,.w-pillar path{fill:#1c1a18;stroke:#e9e4da;stroke-width:2.4;stroke-linejoin:round;transition:fill .4s ease,stroke .4s ease}
.w-pillar path{transition-delay:calc(var(--i) * 90ms)}
.w-quad.is-active .w-core{fill:#2a2320;stroke:var(--orange-bright,#ee633b)}
.w-quad.is-active .w-pillar path{fill:var(--orange,#c63a0b);stroke:#f0b59f}
.w-quad.is-active .w-pillar:hover path{fill:#e0521f}
.w-quad:focus-visible .w-core{stroke:#fff;stroke-width:5}

.w-pillar-label{fill:#e9e4da;font-weight:500;letter-spacing:.01em;pointer-events:none;transition:fill .3s}
.w-quad.is-active .w-pillar-label{fill:#fff}
.w-num{fill:var(--orange-bright,#ee633b);font-weight:700;pointer-events:none;transition:fill .3s}
.w-name{fill:#f5f1ea;font-weight:700;letter-spacing:.03em;pointer-events:none}
.w-quad.is-active .w-num{fill:#ff7a4d}

/* Centre medallion */
.w-center{pointer-events:none}
.w-center-disc{fill:#141312;stroke:var(--orange,#c63a0b);stroke-width:6}
.w-center-pulse{fill:none;stroke:var(--orange-bright,#ee633b);stroke-width:3;transform-box:view-box;transform-origin:500px 500px;animation:w-pulse 3s ease-out infinite}
.w-center-icon{fill:#f5f1ea;stroke:#f5f1ea}
.w-center-icon circle[fill="none"]{stroke:#f5f1ea}

@keyframes w-spin{to{transform:rotate(360deg)}}
@keyframes w-pulse{0%{transform:scale(1);opacity:.7}80%,100%{transform:scale(1.7);opacity:0}}

/* Caption and enlarge link */
.w-caption{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:4.4em;max-width:470px;text-align:center}
.w-caption-kicker{font:500 11px/1.4 var(--mono,'IBM Plex Mono',monospace);letter-spacing:.14em;text-transform:uppercase;color:var(--orange-bright,#ee633b)}
.w-caption-text{font:400 14px/1.55 var(--body,'Instrument Sans',sans-serif);color:#d9d0c3}
.w-enlarge{border:0;background:none;padding:6px 2px;font:500 11px/1.4 var(--mono,'IBM Plex Mono',monospace);letter-spacing:.1em;text-transform:uppercase;color:#bfb3a4;cursor:pointer;border-bottom:1px solid #51473c}
.w-enlarge:hover,.w-enlarge:focus-visible{color:#fff;border-color:var(--orange-bright,#ee633b)}

/* Linked rows in the list beside the wheel */
.method-list>div{transition:background-color .35s ease;border-radius:2px;cursor:pointer}
.method-list>div .c-number{display:inline-block;transition:transform .45s cubic-bezier(.34,1.56,.64,1),color .3s}
.method-list>div.is-linked{background:rgba(238,99,59,.1)}
.method-list>div.is-linked .c-number{transform:scale(1.18);color:#ff7a4d}
.method-list>div.is-linked h3{color:#fff}

@media(prefers-reduced-motion:reduce){
  .w-ring-dash,.w-center-pulse{animation:none}
  .w-quad,.w-core,.w-pillar path,.method-list>div .c-number{transition-duration:.01ms!important;transition-delay:0ms!important}
  .w-quad.is-active{transform:translate(calc(var(--dx) * 9px),calc(var(--dy) * 9px))}
}
@media(forced-colors:active){.w-core,.w-pillar path{stroke:CanvasText}.w-quad.is-active .w-core{stroke:Highlight}}