/* /programmes/cameroon-textile/competition/ : "Four forces, one selvedge". Imported only by this route.
   Motif: the force hub. Four force threads (01 CICAM sage, 02 imports ochre, 03 Camtext SA indigo tint, 04 the 2030
   pole pale) pull the venture hexagon in the splash, are operated in the console, pulled out and measured on paper
   (thread 01 as plant lanes, thread 02 as the shelf floor, threads 03 and 04 re-routed into suppliers), laid as a warp
   in the interlude, crossed by the venture's signal-trace weft, and woven into one selvedge by the closing instrument.
   Three acts: night (splash, console), paper (incumbent, shelf, upstream), night and deep (interlude, weft, weave).
   Stability: the HTML is the composed end state; pre-states live only under :root[data-m-go]; entrances run once and
   settle within about 900 ms; only transform, opacity, clip-path and filter animate; pins are native sticky; every
   state of a step is reserved in a fixed box (grid stacks), so nothing changes size with scroll state. */

:root { --cfa1: 1; --cfa2: 0; --cfa3: 0; --cfa4: 0; }

body[data-page="competition"] {
  --header: 0px;
  --gutter: clamp(20px, 4vw, 56px);
  --ink: #25302e;
  --ground: #f6f4ef;
  --ground-2: #ece8df;
  --rule: #b8c8bd;
  --muted: #4c5f55;
  --font-ui: var(--gft-font-display);
  --laterite: #c98a2b;
  --m-dur: 820ms;
  --cf-night: #072d2b;
  --cf-deep: #0a3d3a;
  --cf-paper: #f6f4ef;
  --cf-sand: #efebe2;
  --cf-read: #cfe8dc;
  --cf-i1: #2d6e51;
  --cf-i2: #8a5d17;
  --cf-i3: #2c3e7a;
  --cf-i4: #25302e;
  --cf-ease: cubic-bezier(.16, 1, .3, 1);
  --cf-freight: cubic-bezier(.65, 0, .35, 1);
  /* the container width, for hand-over threads that must meet at the same x in two blocks */
  --cf-cw: min(1440px, 100cqw - 96px);
}
body[data-page="competition"] [data-f="1"] { --pc: #6bb68f; --pcl: #2d6e51; }
body[data-page="competition"] [data-f="2"] { --pc: #c98a2b; --pcl: #8a5d17; }
body[data-page="competition"] [data-f="3"] { --pc: #8fa0d6; --pcl: #2c3e7a; }
body[data-page="competition"] [data-f="4"] { --pc: #e2ebe6; --pcl: #25302e; }

/* citation chips: visible, 12 px, contrast on every ground */
body[data-page="competition"] main .gft-cite {
  min-height: 26px; min-width: 34px; padding: 2px 7px; margin-inline: 3px; width: fit-content;
  font: 600 12px/1.2 var(--gft-font-mono); color: #0e4d4a; background: #e2ebe6; border: 1px solid #0e4d4a99;
}
body[data-page="competition"] main .gft-section--dark .gft-cite { color: #bfe6d1; background: #6bb68f1f; border-color: #6bb68fa6; }
body[data-page="competition"] .gft-popover .gft-note { color: #4c5f55; }
body[data-page="competition"] .gft-eyebrow { font-size: 12px; }
body[data-page="competition"] main .gft-note { font-size: 12.5px; line-height: 1.65; }
body[data-page="competition"] main .gft-section--dark .gft-note { color: var(--cf-read); }

/* ---------------------------------------------------------------------------------------------------------------
   Blocks: the section-level kit entrance is replaced by each block's own choreography (children with page data-m),
   so a tall pinned section never fades or shifts as a whole. The named entrance stays on the section for coverage.
   --------------------------------------------------------------------------------------------------------------- */
:root[data-m-go] body[data-page="competition"] .prog-b-cf-sec[data-m] { opacity: 1; transform: none; clip-path: none; animation-name: none; }
.prog-b-cf-sec { padding-block: clamp(56px, 6.5vw, 92px); }
.prog-b-cf-sec .gft-section__seam { display: none; }
.prog-b-cf-t { font-size: 15.5px; line-height: 1.65; max-width: 62ch; text-wrap: pretty; }
.gft-section--dark .prog-b-cf-t { color: #e3ece7; }
.prog-b-cf-sec h3 { font-size: clamp(1.15rem, 1.5vw, 1.45rem); margin: 6px 0 10px; }

/* ---- section heads: words settle from a partial pre-state (never blank) ---- */
.prog-b-cf-head__k { margin-bottom: 14px; }
.prog-b-cf-head__t { margin: 0; font-size: clamp(1.75rem, 2.55vw, 2.7rem); line-height: 1.07; letter-spacing: -.045em; font-weight: 850; max-width: 24ch; text-wrap: balance; }
.prog-b-cf-head__acc { display: block; margin-top: .25em; font-family: var(--gft-font-serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; color: #8fd0ae; }
.prog-b-cf-head__l { margin: 16px 0 0; font-size: clamp(1rem, 1.15vw, 1.12rem); line-height: 1.6; max-width: 50ch; }
.gft-section--dark .prog-b-cf-head__l { color: #dbe7e1; }
.prog-b-cf-hw { display: inline-block; }
:root[data-m-go] [data-m=prog-b-cf-h]:not([data-m-in]) .prog-b-cf-hw { opacity: .3; }
:root[data-m-go] [data-m=prog-b-cf-h][data-cf-fx=rise]:not([data-m-in]) .prog-b-cf-hw { translate: 0 .45em; }
:root[data-m-go] [data-m=prog-b-cf-h][data-cf-fx=blur]:not([data-m-in]) .prog-b-cf-hw { filter: blur(7px); }
:root[data-m-go] [data-m=prog-b-cf-h][data-cf-fx=skew]:not([data-m-in]) .prog-b-cf-hw { transform: translateX(.35em) skewX(-14deg); }
:root[data-m-go] [data-m=prog-b-cf-h][data-cf-fx=turn]:not([data-m-in]) .prog-b-cf-hw { transform: perspective(600px) rotateX(-68deg); transform-origin: 50% 100%; }
:root[data-m-go] [data-m=prog-b-cf-h][data-cf-fx=drop]:not([data-m-in]) .prog-b-cf-hw { translate: 0 -.5em; }
:root[data-m-go] [data-m=prog-b-cf-h][data-cf-fx=zoom]:not([data-m-in]) .prog-b-cf-hw { scale: 1.3; filter: blur(5px); }
:root[data-m-go] [data-m=prog-b-cf-h][data-cf-fx=swing]:not([data-m-in]) .prog-b-cf-hw { opacity: 1; clip-path: inset(-.2em 72% -.25em -.1em); }
:root[data-m-go] [data-m=prog-b-cf-h][data-m-in] .prog-b-cf-hw { animation-duration: 600ms; animation-timing-function: var(--cf-ease); animation-delay: calc(var(--i, 0) * 20ms); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go] [data-m=prog-b-cf-h][data-cf-fx=rise][data-m-in] .prog-b-cf-hw { animation-name: prog-b-cf-hw-rise; }
:root[data-m-go] [data-m=prog-b-cf-h][data-cf-fx=blur][data-m-in] .prog-b-cf-hw { animation-name: prog-b-cf-hw-blur; }
:root[data-m-go] [data-m=prog-b-cf-h][data-cf-fx=skew][data-m-in] .prog-b-cf-hw { animation-name: prog-b-cf-hw-skew; }
:root[data-m-go] [data-m=prog-b-cf-h][data-cf-fx=turn][data-m-in] .prog-b-cf-hw { animation-name: prog-b-cf-hw-turn; transform-origin: 50% 100%; }
:root[data-m-go] [data-m=prog-b-cf-h][data-cf-fx=drop][data-m-in] .prog-b-cf-hw { animation-name: prog-b-cf-hw-drop; }
:root[data-m-go] [data-m=prog-b-cf-h][data-cf-fx=zoom][data-m-in] .prog-b-cf-hw { animation-name: prog-b-cf-hw-zoom; }
:root[data-m-go] [data-m=prog-b-cf-h][data-cf-fx=swing][data-m-in] .prog-b-cf-hw { animation-name: prog-b-cf-hw-swing; }
@keyframes prog-b-cf-hw-rise { from { opacity: .3; translate: 0 .45em; } }
@keyframes prog-b-cf-hw-blur { from { opacity: .3; filter: blur(7px); } }
@keyframes prog-b-cf-hw-skew { from { opacity: .3; transform: translateX(.35em) skewX(-14deg); } }
@keyframes prog-b-cf-hw-turn { from { opacity: .3; transform: perspective(600px) rotateX(-68deg); } }
@keyframes prog-b-cf-hw-drop { from { opacity: .3; translate: 0 -.5em; } }
@keyframes prog-b-cf-hw-zoom { from { opacity: .3; scale: 1.3; filter: blur(5px); } }
@keyframes prog-b-cf-hw-swing { from { clip-path: inset(-.2em 72% -.25em -.1em); } to { clip-path: inset(-.2em -.1em -.25em -.1em); } }

/* ---- segmented toggles (native radios) ---- */
.prog-b-cf-seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: 0; padding: 0; border: 1px solid #25302e66; min-width: 0; }
.prog-b-cf-seg legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.prog-b-cf-seg label { position: relative; cursor: pointer; }
.prog-b-cf-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.prog-b-cf-seg span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 16px; font: 700 13px/1.2 var(--gft-font-display); color: #25302e; white-space: nowrap; transition: color 240ms, background-color 240ms; }
.prog-b-cf-seg input:checked + span { background: #0e4d4a; color: #f6f4ef; }
.prog-b-cf-seg input:focus-visible + span { outline: 2px solid #c98a2b; outline-offset: -3px; }
.prog-b-cf-seg--dark { border-color: #cfe8dc80; }
.prog-b-cf-seg--dark span { color: #e3ece7; }
.prog-b-cf-seg--dark input:checked + span { background: #6bb68f; color: #072d2b; }

/* ---- shared play buttons: text label plus pressed state ---- */
.prog-b-cf-play { min-height: 44px; padding: 6px 18px; border: 1px solid #6bb68f; background: transparent; color: #e3ece7; font: 700 13px var(--gft-font-display); cursor: pointer; }
.prog-b-cf-play .nb { display: none; }
.prog-b-cf-play[aria-pressed="true"] { background: #6bb68f; color: #072d2b; }
.prog-b-cf-play[aria-pressed="true"] .na { display: none; }
.prog-b-cf-play[aria-pressed="true"] .nb { display: inline; }
.prog-b-cf-play:focus-visible { outline: 2px solid #c98a2b; outline-offset: 2px; }

/* ===============================================================================================================
   1 · Splash: the force hub (night)
   =============================================================================================================== */
.gft-splash[data-splash="prog-b-competition"] :is(.gft-splash__cue, .gft-splash__signal, .gft-splash__position, .gft-splash__caption, .gft-splash__data) { font-size: 12px; color: #cfe8dc; }
.gft-splash[data-splash="prog-b-competition"] .gft-splash__lede { color: #dbe7e1; }
.gft-splash[data-splash="prog-b-competition"] .gft-splash__actions { margin-top: 22px; }
.gft-splash[data-splash="prog-b-competition"] .gft-splash__structure::after { background: linear-gradient(90deg, #072d2b 0%, #072d2b00 12%); }
.prog-b-cf-sp-wrap { width: 100%; height: 100%; display: flex; align-items: center; transform-origin: 50% 50%; overflow-anchor: none; }
.prog-b-cf-sp-wrap .gft-structure { min-height: 0; }
/* heading fx track: the title closes from wide tracking (visual width only, never a reflow) */
.gft-splash[data-splash="prog-b-competition"] h1 { transform-origin: 0 100%; }
:root[data-m-go] .gft-splash[data-splash="prog-b-competition"] h1[data-m][data-m-in] { animation-name: prog-b-cf-h1-track; animation-duration: 780ms; animation-timing-function: var(--cf-ease); animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: backwards; }
@keyframes prog-b-cf-h1-track { from { opacity: .3; transform: scaleX(1.18); } }

@media (min-width: 1001px) {
  .gft-splash[data-splash="prog-b-competition"] .gft-splash__structure { inset: 52px 0 calc(var(--splash-strip-h, 70px) + 2px) 42%; }
  .gft-splash[data-splash="prog-b-competition"] .gft-splash__content > * { max-width: min(40vw, 590px); }
  .gft-splash[data-splash="prog-b-competition"] h1 { font-size: clamp(2.9rem, min(4.5vw, 8.4svh), 4.7rem); max-width: 11ch; margin-top: 24px; }
  .gft-splash[data-splash="prog-b-competition"] .gft-splash__lede { font-size: 15.5px; margin-top: 18px; max-width: 46ch; }
}

/* the four threads draw inward from the cards; the hexagon lands last */
:root[data-m-go] .prog-b-cf-splash-svg [data-splash-draw] { animation-duration: 820ms; }
:root[data-m-go] .prog-b-cf-sp-f--r :is(.prog-b-cf-sp-main, .prog-b-cf-sp-strand)[data-splash-draw] { animation-name: prog-b-cf-draw-r; }
:root[data-m-go] .prog-b-cf-sp-f1 .prog-b-cf-sp-lead[data-splash-draw], :root[data-m-go] .prog-b-cf-sp-f3 .prog-b-cf-sp-lead[data-splash-draw] { animation-name: prog-b-cf-draw-d; }
:root[data-m-go] .prog-b-cf-sp-f2 .prog-b-cf-sp-lead[data-splash-draw], :root[data-m-go] .prog-b-cf-sp-f4 .prog-b-cf-sp-lead[data-splash-draw] { animation-name: prog-b-cf-draw-u; }
@keyframes prog-b-cf-draw-r { from { opacity: .15; clip-path: inset(0 0 0 70%); } to { opacity: 1; clip-path: inset(0); } }
@keyframes prog-b-cf-draw-d { from { opacity: .15; clip-path: inset(0 0 70% 0); } to { opacity: 1; clip-path: inset(0); } }
@keyframes prog-b-cf-draw-u { from { opacity: .15; clip-path: inset(70% 0 0 0); } to { opacity: 1; clip-path: inset(0); } }
.prog-b-cf-sp-hub { transform-box: fill-box; transform-origin: 50% 40%; }
:root[data-m-go] .prog-b-cf-sp-hub { animation-name: prog-b-cf-hub-land; animation-duration: 420ms; animation-delay: 480ms; animation-timing-function: var(--cf-ease); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
@keyframes prog-b-cf-hub-land { from { opacity: .2; transform: scale(.7); } }

/* lit force: the selected thread thickens, its node ring lights; the others stay readable */
.prog-b-cf-sp-f { transition: opacity 420ms var(--cf-ease); }
.prog-b-cf-sp-f1 { opacity: calc(.66 + .34 * var(--cfa1)); }
.prog-b-cf-sp-f2 { opacity: calc(.66 + .34 * var(--cfa2)); }
.prog-b-cf-sp-f3 { opacity: calc(.66 + .34 * var(--cfa3)); }
.prog-b-cf-sp-f4 { opacity: calc(.66 + .34 * var(--cfa4)); }
.prog-b-cf-sp-f1 .prog-b-cf-sp-main { stroke-width: calc(3px + 2.5px * var(--cfa1)); }
.prog-b-cf-sp-f2 .prog-b-cf-sp-main { stroke-width: calc(3px + 2.5px * var(--cfa2)); }
.prog-b-cf-sp-f3 .prog-b-cf-sp-main { stroke-width: calc(3px + 2.5px * var(--cfa3)); }
.prog-b-cf-sp-f4 .prog-b-cf-sp-main { stroke-width: calc(3px + 2.5px * var(--cfa4)); }
.prog-b-cf-sp-ring { transition: opacity 420ms var(--cf-ease); }
.prog-b-cf-sp-f1 .prog-b-cf-sp-ring { opacity: var(--cfa1); }
.prog-b-cf-sp-f2 .prog-b-cf-sp-ring { opacity: var(--cfa2); }
.prog-b-cf-sp-f3 .prog-b-cf-sp-ring { opacity: var(--cfa3); }
.prog-b-cf-sp-f4 .prog-b-cf-sp-ring { opacity: var(--cfa4); }

/* lives: rings rotate slowly; the hexagon leans toward the lit force and back (6 s) */
.prog-b-cf-sp-rings { transform-box: fill-box; transform-origin: 50% 50%; }
:root[data-m-go] .prog-b-cf-sp-rings[data-m-on] { animation-name: prog-b-cf-spin; animation-duration: 120s; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes prog-b-cf-spin { to { rotate: 360deg; } }
.prog-b-cf-sp-lean { --lx: calc((var(--cfa3) + var(--cfa4) - var(--cfa1) - var(--cfa2)) * 7px); --ly: calc((var(--cfa2) + var(--cfa4) - var(--cfa1) - var(--cfa3)) * 6px); }
:root[data-m-go] .prog-b-cf-sp-lean[data-m-on] { animation-name: prog-b-cf-lean; animation-duration: 3s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
@keyframes prog-b-cf-lean { from { translate: 0 0; } to { translate: var(--lx) var(--ly); } }

/* hand-down: as the splash leaves, its hub scales down 0.62 and fades; the console hub waits below at the same x */
@supports (animation-timeline: view()) {
  :root[data-m-go] .prog-b-cf-sp-wrap { animation-name: prog-b-cf-handdown; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: --gft-splash; animation-range-start: cover 52%; animation-range-end: cover 96%; }
}
@keyframes prog-b-cf-handdown { from { scale: 1; opacity: 1; } to { scale: .62; opacity: .2; } }

/* pills and their vector read-out */
.prog-b-cf-pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 540px; margin: 0 0 12px; }
.prog-b-cf-pill {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; min-height: 48px; padding: 6px 12px;
  border: 1px solid #ffffff38; border-left: 4px solid var(--pc); background: #072d2bcc; color: var(--gft-paper);
  font: 700 14px/1.2 var(--gft-font-display); text-align: left; cursor: pointer;
}
.prog-b-cf-pill b { font: 700 14px var(--gft-font-mono); color: color-mix(in srgb, var(--pc) 70%, #fff); }
.prog-b-cf-pill:hover { background: #0e4d4acc; }
.prog-b-cf-pill:focus-visible { outline: 2px solid #c98a2b; outline-offset: 2px; }
.prog-b-cf-pill[aria-pressed="true"] { background: #ffffff1f; border-color: var(--pc); }
.prog-b-cf-sp-ro { display: grid; margin: 0; max-width: 60ch; font: 13px/1.6 var(--gft-font-mono); color: var(--cf-read); }
.prog-b-cf-sp-ro span { grid-area: 1 / 1; visibility: hidden; }
.prog-b-cf-sp-ro span[data-on] { visibility: visible; }
.prog-b-cf-sp-ro b { color: #f6f4ef; font-weight: 700; }

@media (max-width: 1000px) {
  .gft-splash[data-splash="prog-b-competition"] .gft-splash__structure { inset: auto max(6vw, calc(50% - 280px)) calc(var(--splash-strip-h, 60px) + 8px); height: min(88vw, 560px); }
  .gft-splash[data-splash="prog-b-competition"] .gft-splash__structure::after { display: none; }
  .gft-splash[data-splash="prog-b-competition"] .gft-splash__content { padding-bottom: calc(min(88vw, 560px) + 24px); }
  .gft-splash[data-splash="prog-b-competition"] h1 { font-size: clamp(2.5rem, 7vw, 3.6rem); }
}
@media (max-width: 640px) {
  .gft-splash[data-splash="prog-b-competition"] .gft-splash__content { padding-top: 40px; }
  .gft-splash[data-splash="prog-b-competition"] h1 { font-size: 40px; line-height: 1.04; margin-top: 18px; }
  .gft-splash[data-splash="prog-b-competition"] .gft-splash__lede { font-size: 14.5px; margin-top: 14px; }
  .prog-b-cf-sp-card, .prog-b-cf-sp-tiny, .prog-b-cf-sp-lead { display: none; }
  .prog-b-cf-sp-num { font-size: 40px; }
  .prog-b-cf-pills { gap: 6px; }
  .prog-b-cf-pill { min-height: 44px; padding: 4px 10px; gap: 8px; font-size: 13px; }
}

/* ===============================================================================================================
   2 · The force console (night): radios, one panel, the hub at display scale, figure tiles as buttons
   =============================================================================================================== */
.prog-b-cf-con { padding-block: 44px 72px; overflow: clip; }
.prog-b-cf-con__grid { display: grid; grid-template-columns: 44% 52%; justify-content: space-between; align-items: start; }
.prog-b-cf-con .prog-b-cf-head__t { font-size: clamp(1.6rem, 2.2vw, 2.3rem); max-width: 26ch; }
.prog-b-cf-con .prog-b-cf-head__l { font-size: 15px; }
.prog-b-cf-forces { display: grid; gap: 6px; margin: 22px 0 16px; padding: 0; border: 0; min-width: 0; }
.prog-b-cf-forces legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.prog-b-cf-forces label { position: relative; cursor: pointer; }
.prog-b-cf-forces input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.prog-b-cf-forces label > span { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; min-height: 50px; padding: 6px 14px; border: 1px solid #ffffff24; border-left: 4px solid var(--pc); background: #ffffff08; transition: background-color 260ms; }
.prog-b-cf-forces b { font: 700 15px var(--gft-font-mono); color: color-mix(in srgb, var(--pc) 70%, #fff); }
.prog-b-cf-forces em { font: 800 15.5px/1.2 var(--gft-font-display); font-style: normal; color: #f6f4ef; }
.prog-b-cf-forces small { font: 12.5px var(--gft-font-mono); color: var(--cf-read); text-align: right; }
.prog-b-cf-forces input:checked + span { background: #ffffff1c; border-color: var(--pc); }
.prog-b-cf-forces input:focus-visible + span { outline: 2px solid #c98a2b; outline-offset: 2px; }
:root[data-m-go] [data-m=prog-b-cf-unspool]:not([data-m-in]) label { opacity: .3; clip-path: inset(0 70% 0 0); }
:root[data-m-go] [data-m=prog-b-cf-unspool][data-m-in] label { animation-name: prog-b-cf-unspool; animation-duration: 560ms; animation-delay: calc(var(--k, 0) * 70ms); animation-timing-function: var(--cf-ease); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
@keyframes prog-b-cf-unspool { from { opacity: .3; clip-path: inset(0 70% 0 0); } to { opacity: 1; clip-path: inset(0 -2% 0 0); } }

.prog-b-cf-panels { display: grid; }
.prog-b-cf-panel { grid-area: 1 / 1; visibility: hidden; padding: 14px 18px 16px; border-left: 2px solid var(--pc); background: #ffffff0a; }
.prog-b-cf-con:has(input[name="prog-b-cf-force"][value="1"]:checked) [data-cf-panel="1"],
.prog-b-cf-con:has(input[name="prog-b-cf-force"][value="2"]:checked) [data-cf-panel="2"],
.prog-b-cf-con:has(input[name="prog-b-cf-force"][value="3"]:checked) [data-cf-panel="3"],
.prog-b-cf-con:has(input[name="prog-b-cf-force"][value="4"]:checked) [data-cf-panel="4"] { visibility: visible; }
.prog-b-cf-panel .gft-eyebrow { margin-bottom: 6px; color: var(--cf-read); }
.prog-b-cf-panel__big { margin: 0; font: 850 clamp(2.4rem, 3.6vw, 3.4rem)/1 var(--gft-font-display); letter-spacing: -.05em; color: color-mix(in srgb, var(--pc) 72%, #fff); font-variant-numeric: tabular-nums; }
.prog-b-cf-panel h3 { margin: 6px 0 6px; }
.prog-b-cf-panel .prog-b-cf-t { font-size: 14.5px; }
.prog-b-cf-panel__vec { margin: 10px 0 0; font: 13px/1.55 var(--gft-font-mono); color: #f0d7a8; }

.prog-b-cf-con__map { position: relative; }
.prog-b-cf-tm { display: block; width: 100%; height: auto; overflow: visible; }
:root[data-m-go] [data-m=prog-b-cf-iris]:not([data-m-in]) { clip-path: circle(16% at 50% 50%); opacity: .4; }
:root[data-m-go] [data-m=prog-b-cf-iris][data-m-in] { animation-name: prog-b-cf-iris-in; animation-duration: 760ms; animation-timing-function: var(--cf-freight); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
@keyframes prog-b-cf-iris-in { from { clip-path: circle(16% at 50% 50%); opacity: .4; } to { clip-path: circle(80% at 50% 50%); opacity: 1; } }
.prog-b-cf-tm-f > :not(.prog-b-cf-tm-lab) { transition: opacity 420ms var(--cf-ease); }
.prog-b-cf-tm-f1 > :is(path, .prog-b-cf-tm-ring) { opacity: calc(.35 + .65 * var(--cfa1)); }
.prog-b-cf-tm-f2 > :is(path, .prog-b-cf-tm-ring) { opacity: calc(.35 + .65 * var(--cfa2)); }
.prog-b-cf-tm-f3 > :is(path, .prog-b-cf-tm-ring) { opacity: calc(.35 + .65 * var(--cfa3)); }
.prog-b-cf-tm-f4 > :is(path, .prog-b-cf-tm-ring) { opacity: calc(.35 + .65 * var(--cfa4)); }
.prog-b-cf-tm-lit { transition: opacity 420ms; }
.prog-b-cf-tm-f1 :is(.prog-b-cf-tm-lit, .prog-b-cf-tm-ring) { opacity: var(--cfa1); }
.prog-b-cf-tm-f2 :is(.prog-b-cf-tm-lit, .prog-b-cf-tm-ring) { opacity: var(--cfa2); }
.prog-b-cf-tm-f3 :is(.prog-b-cf-tm-lit, .prog-b-cf-tm-ring) { opacity: var(--cfa3); }
.prog-b-cf-tm-f4 :is(.prog-b-cf-tm-lit, .prog-b-cf-tm-ring) { opacity: var(--cfa4); }
.prog-b-cf-tm-litp { --m-dash: 14 10; }
.prog-b-cf-tm-hex { translate: calc((var(--cfa3) + var(--cfa4) - var(--cfa1) - var(--cfa2)) * 11px) calc((var(--cfa2) + var(--cfa4) - var(--cfa1) - var(--cfa3)) * 9px); transition: translate 620ms var(--cf-ease); }
.prog-b-cf-tm-pull { opacity: .95; }
.prog-b-cf-con__tag { margin: 4px 0 0 28px; }

/* thread 01 pulled out: it leaves the hub at the bottom left and runs down past the tiles into the next block */
.prog-b-cf-con__iris { position: relative; }
.prog-b-cf-con__iris::before { content: ''; position: absolute; left: 8px; top: calc(100% - 4px); width: 3px; height: 200vh; background: #6bb68f; pointer-events: none; }
.prog-b-cf-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 22px 0 0 28px; }
.prog-b-cf-tile { position: relative; display: grid; gap: 6px; align-content: start; }
.prog-b-cf-tile::before { content: ''; position: absolute; left: 22px; bottom: 100%; width: 2px; height: 18px; background: var(--pc); }
.prog-b-cf-tile__btn { display: grid; gap: 6px; align-content: start; min-height: 120px; padding: 12px 14px; text-align: left; color: #f6f4ef; background: #ffffff0a; border: 1px solid #ffffff2e; border-top: 3px solid var(--pc); cursor: pointer; transition: background-color 240ms; }
.prog-b-cf-tile__btn:hover, .prog-b-cf-tile__btn[aria-pressed="true"] { background: #ffffff1c; }
.prog-b-cf-tile__btn:focus-visible { outline: 2px solid #c98a2b; outline-offset: 2px; }
.prog-b-cf-tile__v { font: 850 clamp(1.7rem, 2.3vw, 2.3rem)/1 var(--gft-font-display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--pc) 72%, #fff); }
.prog-b-cf-tile__l { font-size: 13px; line-height: 1.45; color: #e3ece7; }
.prog-b-cf-tile__n { margin: 0; font: 12px/1.5 var(--gft-font-mono); color: var(--cf-read); }
.prog-b-cf-tiles__idx { display: none; }

@media (max-width: 1000px) {
  .prog-b-cf-con__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .prog-b-cf-con__side { display: contents; }
  .prog-b-cf-con .prog-b-cf-head { order: 1; }
  .prog-b-cf-forces { order: 2; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; margin: 0; padding-bottom: 4px; }
  .prog-b-cf-forces label { flex: 0 0 auto; scroll-snap-align: start; }
  .prog-b-cf-forces label > span { grid-template-columns: auto auto; min-height: 44px; }
  .prog-b-cf-forces small { display: none; }
  .prog-b-cf-con__map { order: 3; }
  .prog-b-cf-panels { order: 4; }
  .prog-b-cf-tm { max-width: 560px; margin-inline: auto; }
}
@media (max-width: 640px) {
  .prog-b-cf-tm-lab, .prog-b-cf-tm-vn { display: none; }
  .prog-b-cf-tm-num { font-size: 34px; translate: 0 4px; }
  .prog-b-cf-con__tag { margin-left: 24px; }
  .prog-b-cf-tiles { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin-left: 24px; padding-top: 18px; }
  .prog-b-cf-tile { flex: 0 0 82%; scroll-snap-align: start; }
  .prog-b-cf-tiles__idx { display: block; margin: 8px 0 0 24px; font-size: 12px; color: var(--cf-read); }
  .prog-b-cf-tile::before { bottom: auto; top: -18px; }
}

/* ===============================================================================================================
   3 · The incumbent (paper): thread 01 spooled into three plant lanes, then the cost spool
   =============================================================================================================== */
.prog-b-cf-ci { padding-block: 64px 84px; overflow: clip; container-type: inline-size; }
.prog-b-cf-ci__a, .prog-b-cf-ci__b { display: grid; grid-template-columns: 44% 52%; justify-content: space-between; align-items: start; }
.prog-b-cf-ci__b { margin-top: 64px; align-items: end; }
.prog-b-cf-ci .prog-b-cf-head__t { max-width: 20ch; }
.prog-b-cf-ci .prog-b-cf-head__l { color: #3a4a44; }
.prog-b-cf-lanes { position: relative; margin: 0; padding-left: 28px; }
.prog-b-cf-lanes__cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-bottom: 8px; }
.prog-b-cf-lanes__cap .gft-eyebrow { margin: 0; color: #2d6e51; }
.prog-b-cf-lanes__rows { display: grid; gap: 4px; }
.prog-b-cf-lane { position: relative; display: grid; cursor: pointer; }
.prog-b-cf-lane input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.prog-b-cf-lane__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 6px; }
.prog-b-cf-lane__row b { font: 800 15px var(--gft-font-display); color: #25302e; }
.prog-b-cf-lane__v { font: 700 16px var(--gft-font-mono); color: #25302e; font-variant-numeric: tabular-nums; }
.prog-b-cf-lane__svg { position: relative; display: block; margin-left: -28px; width: calc(100% + 28px); }
.prog-b-cf-lane__svg svg { display: block; width: 100%; height: auto; overflow: visible; }
.prog-b-cf-lane__used { stroke: #2d6e51; stroke-width: 3; stroke-opacity: .35; stroke-linecap: round; }
.prog-b-cf-lane__slack { stroke: #2d6e51; stroke-width: 2.5; stroke-dasharray: 6 6; }
.prog-b-cf-lane__usedlit { stroke: #2d6e51; stroke-width: 8; stroke-linecap: round; transform-box: fill-box; transform-origin: 0 50%; transition: scale 600ms var(--cf-ease); }
.prog-b-cf-lane__slacklit { stroke: #8a5d17; stroke-width: 4.5; stroke-linecap: round; transform-box: fill-box; transform-origin: 0 50%; scale: 0 1; transition: scale 600ms var(--cf-ease); }
.prog-b-cf-lane__end { stroke: #25302e; stroke-width: 2; }
.prog-b-cf-lane__knot { fill: #f6f4ef; stroke: #2d6e51; stroke-width: 3; }
.prog-b-cf-lane:has(input:checked) .prog-b-cf-lane__row b { text-decoration: underline 2px #c98a2b; text-underline-offset: 4px; }
.prog-b-cf-lane:has(input:focus-visible) { outline: 2px solid #c98a2b; outline-offset: 2px; }
.prog-b-cf-lanes :is(.vb, .nb) { display: none; }
.prog-b-cf-lanes:has(input[name="prog-b-cf-lmode"][value="b"]:checked) :is(.va, .na) { display: none; }
.prog-b-cf-lanes:has(input[name="prog-b-cf-lmode"][value="b"]:checked) :is(.vb, .nb) { display: inline; }
.prog-b-cf-lanes:has(input[name="prog-b-cf-lmode"][value="b"]:checked) .prog-b-cf-lane__usedlit { scale: 0 1; }
.prog-b-cf-lanes:has(input[name="prog-b-cf-lmode"][value="b"]:checked) .prog-b-cf-lane__slacklit { scale: 1 1; }
.prog-b-cf-lanes__axis { display: flex; justify-content: space-between; margin: 2px 0 0; font-size: 12px; color: #4c5f55; }
/* thread 01 arrives from the console and becomes the axis of the first lane */
.prog-b-cf-lane--c1 .prog-b-cf-lane__svg::before { content: ''; position: absolute; left: 8px; bottom: 66.6%; width: 3px; height: 200vh; background: #2d6e51; pointer-events: none; }
.prog-b-cf-ticker { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: baseline; margin: 10px 0 0; font-size: 12.5px; color: #25302e; }
.prog-b-cf-ticker__k { padding: 2px 8px; background: #25302e; color: #f6f4ef; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; }
.prog-b-cf-ticker__t { grid-area: 1 / 2; visibility: hidden; }
.prog-b-cf-lanes__ro { display: grid; margin-top: 12px; padding: 12px 16px; background: #0e4d4a; color: #f6f4ef; }
.prog-b-cf-lro { grid-area: 1 / 1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; visibility: hidden; }
.prog-b-cf-lro__big { margin: 0; font: 850 clamp(2.1rem, 3vw, 2.9rem)/1 var(--gft-font-display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; min-width: 4.2ch; }
.prog-b-cf-lro__t { font-size: 14px; color: #eef4f0; }
.prog-b-cf-lanes__ro .gft-cite { color: #bfe6d1; background: #6bb68f1f; border-color: #6bb68fa6; }
.prog-b-cf-lanes__note { margin: 8px 0 0; }
.prog-b-cf-lanes:has(input[value="c1"]:checked) :is(.prog-b-cf-lro--c1, .prog-b-cf-ticker__t--c1),
.prog-b-cf-lanes:has(input[value="ga"]:checked) :is(.prog-b-cf-lro--ga, .prog-b-cf-ticker__t--ga),
.prog-b-cf-lanes:has(input[value="c2"]:checked) :is(.prog-b-cf-lro--c2, .prog-b-cf-ticker__t--c2) { visibility: visible; }
/* entrance warp: lanes draw left to right (120 ms stagger), slack loops drop in last */
:root[data-m-go] [data-m=prog-b-cf-lanes-in]:not([data-m-in]) .prog-b-cf-lane__svg { clip-path: inset(-20% 72% -60% 0); }
:root[data-m-go] [data-m=prog-b-cf-lanes-in]:not([data-m-in]) .prog-b-cf-lane__slack { opacity: .2; translate: 0 -10px; }
:root[data-m-go] [data-m=prog-b-cf-lanes-in][data-m-in] .prog-b-cf-lane__svg { animation-name: prog-b-cf-lane-draw; animation-duration: 600ms; animation-delay: calc(var(--k, 0) * 120ms); animation-timing-function: var(--cf-freight); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go] [data-m=prog-b-cf-lanes-in][data-m-in] .prog-b-cf-lane__slack { animation-name: prog-b-cf-slack-drop; animation-duration: 380ms; animation-delay: calc(420ms + var(--k, 0) * 60ms); animation-timing-function: var(--cf-ease); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
@keyframes prog-b-cf-lane-draw { from { clip-path: inset(-20% 72% -60% 0); } to { clip-path: inset(-20% -2% -60% 0); } }
@keyframes prog-b-cf-slack-drop { from { opacity: .2; translate: 0 -10px; } }

.prog-b-cf-ci__prose h3 { max-width: 24ch; }
.prog-b-cf-ci__prose .prog-b-cf-t { color: #2e3b37; }
.prog-b-cf-spool { margin: 0; }
.prog-b-cf-spool__cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.prog-b-cf-spool__cap .gft-eyebrow { margin: 0; color: #8a5d17; }
.prog-b-cf-spool__scale { position: relative; height: 100px; margin-top: 16px; }
.prog-b-cf-spool__lab, .prog-b-cf-spool__sub { position: absolute; font: 700 13px var(--gft-font-mono); color: #25302e; white-space: nowrap; }
.prog-b-cf-spool__lab { top: 4px; }
.prog-b-cf-spool__lab--c { translate: -50% 0; }
.prog-b-cf-spool__sub { top: 70px; font-weight: 500; color: #3a4a44; }
.prog-b-cf-spool__sub--mid { translate: -50% 0; }
.prog-b-cf-spool__sub--end { right: 0; }
.prog-b-cf-spool__track { position: absolute; left: 0; right: 0; top: 34px; height: 26px; }
.prog-b-cf-spool__core { position: absolute; inset: 4px 0 6px; background: repeating-linear-gradient(90deg, #0e4d4a22 0 3px, transparent 3px 7px); border-left: 3px solid #0e4d4a; }
.prog-b-cf-spool__track::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #0e4d4a; }
.prog-b-cf-spool__loss { position: absolute; left: 0; top: 0; bottom: 3px; min-width: 6px; background: #c98a2b; transition: opacity 360ms; }
.prog-b-cf-spool__range { position: absolute; top: 0; bottom: 3px; border: 3px solid #8a5d17; border-bottom: 0; background: #c98a2b2e; opacity: .45; transition: opacity 360ms; }
.prog-b-cf-spool__relaunch { position: absolute; right: 0; top: -6px; bottom: 3px; width: 4px; background: #8a5d17; opacity: .45; transition: opacity 360ms; }
.prog-b-cf-spool:has(input[value="restructure"]:checked) .prog-b-cf-spool__loss { opacity: .35; }
.prog-b-cf-spool:has(input[value="restructure"]:checked) :is(.prog-b-cf-spool__range, .prog-b-cf-spool__relaunch) { opacity: 1; }
.prog-b-cf-spool__ro { display: grid; margin-top: 8px; }
.prog-b-cf-sro { grid-area: 1 / 1; visibility: hidden; }
.prog-b-cf-sro__big { margin: 0; font: 850 clamp(1.9rem, 2.8vw, 2.6rem)/1.1 var(--gft-font-display); letter-spacing: -.045em; color: #25302e; font-variant-numeric: tabular-nums; }
.prog-b-cf-spool:has(input[value="loss"]:checked) .prog-b-cf-sro--loss,
.prog-b-cf-spool:has(input[value="restructure"]:checked) .prog-b-cf-sro--restructure { visibility: visible; }
:root[data-m-go] [data-m=prog-b-cf-spool-in]:not([data-m-in]) .prog-b-cf-spool__track { clip-path: inset(-40% 70% -40% 0); }
:root[data-m-go] [data-m=prog-b-cf-spool-in][data-m-in] .prog-b-cf-spool__track { animation-name: prog-b-cf-spool-draw; animation-duration: 760ms; animation-timing-function: var(--cf-freight); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
@keyframes prog-b-cf-spool-draw { from { clip-path: inset(-40% 70% -40% 0); } to { clip-path: inset(-40% -200vw -40% 0); } }
/* the floor line: the spool's zero line runs off the right edge (forest to ochre across 80 px) and on down */
.prog-b-cf-floor-out { position: absolute; left: 100%; bottom: 0; height: 3px; width: calc((100cqw - var(--cf-cw)) / 2 - 14px); background: linear-gradient(90deg, #0e4d4a, #c98a2b 80px); }
.prog-b-cf-floor-out::after { content: ''; position: absolute; right: 0; top: 0; width: 3px; height: 200vh; background: #c98a2b; }

@media (max-width: 1000px) {
  .prog-b-cf-ci__a, .prog-b-cf-ci__b { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .prog-b-cf-floor-out { display: none; }
}
@media (max-width: 640px) {
  .prog-b-cf-seg { display: grid; width: 100%; }
  .prog-b-cf-lro { grid-template-columns: 1fr; gap: 6px; }
  .prog-b-cf-spool__sub--mid { display: none; }
  .prog-b-cf-spool__lab { font-size: 12px; }
}

/* ===============================================================================================================
   4 · The shelf (paper): one compare stage on thread 02, the price floor
   =============================================================================================================== */
.prog-b-cf-shelf { --cf-pad: 72px; padding-block: var(--cf-pad) 84px; overflow: clip; container-type: inline-size; background: var(--cf-sand); }
.prog-b-cf-sh__grid { display: grid; grid-template-columns: 60% 36%; justify-content: space-between; align-items: start; }
.prog-b-cf-shelf .prog-b-cf-head__t { font-size: clamp(1.6rem, 2.3vw, 2.4rem); }
.prog-b-cf-shelf .prog-b-cf-head__l { color: #3a4a44; }
.prog-b-cf-stage { position: relative; margin: 0; }
.prog-b-cf-stage__box {
  /* the provenance thread leaves at the same x as the SODECOTON node of the upstream map below */
  --cf-gx: calc(min(.56 * 100cqw / .6, (100svh - 330px) * 1.3636) * .7071);
  position: relative; aspect-ratio: 16 / 9; container-type: size; background: #f6f4ef; border: 1px solid #25302e40;
}
.prog-b-cf-zone { position: absolute; top: 0; bottom: 0; width: 50%; }
.prog-b-cf-zone--imp { left: 0; }
.prog-b-cf-zone--ven { left: 50%; border-left: 1px dashed #25302e55; }
.prog-b-cf-zone::before { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity 420ms; }
.prog-b-cf-zone--imp::before { background: #f1dcb8; }
.prog-b-cf-zone--ven::before { background: #d3e6db; }
.prog-b-cf-stage[data-zone="imp"] .prog-b-cf-zone--imp::before, .prog-b-cf-stage[data-zone="ven"] .prog-b-cf-zone--ven::before { opacity: 1; }
.prog-b-cf-zone__t { position: absolute; top: 12px; left: 14px; font: 700 12.5px var(--gft-font-mono); letter-spacing: .08em; text-transform: uppercase; color: #25302e; }
.prog-b-cf-floor { position: absolute; left: 0; right: 0; top: 66%; height: 6px; background: #c98a2b; overflow: hidden; }
.prog-b-cf-floor__sweep { position: absolute; top: 0; bottom: 0; left: 0; width: 18%; background: linear-gradient(90deg, transparent, #fff3d6, transparent); translate: -20cqw 0; }
:root[data-m-go] .prog-b-cf-floor__sweep[data-m-on] { animation-name: prog-b-cf-sweep; animation-duration: 7s; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes prog-b-cf-sweep { from { translate: -20cqw 0; } to { translate: 105cqw 0; } }
.prog-b-cf-floor__lab { position: absolute; left: 14px; top: calc(66% + 14px); font-size: 12px; font-weight: 700; color: #6e4a12; }
.prog-b-cf-tiles2 { position: absolute; inset: 0; }
.prog-b-cf-imp { position: absolute; left: calc(5% + var(--k) * 10.5%); bottom: 34%; width: 8.5%; display: grid; justify-items: center; }
.prog-b-cf-imp svg { width: 100%; height: auto; display: block; }
.prog-b-cf-imp path { fill: #ddd7c9; stroke: #6f6858; stroke-width: 2.5; stroke-dasharray: 5 4; }
.prog-b-cf-imp__tag { margin-bottom: 6px; padding: 1px 5px; font: 700 12px var(--gft-font-mono); color: #3f3a2e; background: #f6f4ef; border: 1px solid #8c8472; white-space: nowrap; }
.prog-b-cf-imp:nth-child(even) .prog-b-cf-imp__tag { margin-bottom: 34px; }
:root[data-m-go] .prog-b-cf-imp__tag[data-m-on] { animation-name: prog-b-cf-flick; animation-duration: 7s; animation-timing-function: linear; animation-iteration-count: infinite; animation-delay: calc(var(--k, 0) * 0s); }
.prog-b-cf-imp { --k: 0; }
@keyframes prog-b-cf-flick { 0%, 16%, 22%, 100% { opacity: 1; } 18%, 20% { opacity: .45; } }
.prog-b-cf-gar { position: absolute; z-index: 2; left: calc(var(--cf-gx) - 6cqw); width: 12cqw; bottom: calc(34% + 48px); }
.prog-b-cf-gar__svg { display: block; width: 100%; height: auto; }
.prog-b-cf-gar__svg path { fill: #0e4d4a; stroke: #f6f4ef; stroke-width: 2; }
.prog-b-cf-prov { position: absolute; left: calc(50% - 1.5px); top: 100%; width: 3px; height: 200vh; background: #2d6e51; }
.prog-b-cf-sodeco { position: absolute; left: calc(var(--cf-gx) + 10px); top: 76%; z-index: 2; display: flex; align-items: center; gap: 4px; padding: 2px 6px; background: #f6f4ef; border: 1px solid #2d6e5166; font: 700 13px var(--gft-font-display); color: #1f5a41; white-space: nowrap; }
.prog-b-cf-reed { position: absolute; z-index: 1; top: -8px; bottom: -8px; left: 0; width: 3px; background: #25302e; translate: calc(var(--p, 82) * 1cqw - 1.5px) 0; transition: translate 380ms var(--cf-ease); }
.prog-b-cf-reed b { position: absolute; left: -9px; top: -2px; width: 21px; height: 21px; border-radius: 50%; background: #25302e; border: 3px solid #f6f4ef; }
.prog-b-cf-proof { position: absolute; top: 44px; left: 52%; right: 2%; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; z-index: 1; }
.prog-b-cf-proof li { display: flex; align-items: center; gap: 2px; padding: 3px 9px; font: 700 13px var(--gft-font-display); color: #f6f4ef; background: #0e4d4a; }
.prog-b-cf-proof .gft-cite { color: #0e4d4a; }
.prog-b-cf-reed__range { display: block; width: 100%; min-height: 44px; margin: 6px 0 0; accent-color: #0e4d4a; }
.prog-b-cf-stage__note { margin: 2px 0 0; }
.prog-b-cf-shpills { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 22px 0 14px; }
.prog-b-cf-shpills button { min-height: 48px; border: 2px solid #25302e; background: transparent; color: #25302e; font: 800 15px var(--gft-font-display); cursor: pointer; transition: background-color 240ms, color 240ms; }
.prog-b-cf-shpills button[data-cf-snap="18"][aria-pressed="true"] { background: #8a5d17; border-color: #8a5d17; color: #fff; }
.prog-b-cf-shpills button[data-cf-snap="82"][aria-pressed="true"] { background: #0e4d4a; border-color: #0e4d4a; color: #fff; }
.prog-b-cf-shpills button:focus-visible { outline: 2px solid #c98a2b; outline-offset: 2px; }
.prog-b-cf-shro { display: grid; }
.prog-b-cf-shr { grid-area: 1 / 1; visibility: hidden; }
.prog-b-cf-shr__k { margin: 0 0 6px; font-size: 12.5px; font-weight: 700; color: #25302e; }
.prog-b-cf-shr .prog-b-cf-t { font-size: 15px; color: #2e3b37; }
.prog-b-cf-shelf:has([data-zone="imp"]) .prog-b-cf-shr--imp, .prog-b-cf-shelf:has([data-zone="ven"]) .prog-b-cf-shr--ven { visibility: visible; }
/* entrance shed: the stage parts along the floor line, the top layer lifts up and the bottom layer drops down */
.prog-b-cf-cur { position: absolute; left: -1px; right: -1px; background: var(--cf-sand); z-index: 2; pointer-events: none; display: none; }
.prog-b-cf-cur--top { top: -1px; height: calc(66% + 1px); transform-origin: 50% 0; }
.prog-b-cf-cur--bot { top: calc(66% + 6px); bottom: -1px; transform-origin: 50% 100%; }
:root[data-m-go] [data-m=prog-b-cf-shed] .prog-b-cf-cur { display: block; scale: 1 0; }
:root[data-m-go] [data-m=prog-b-cf-shed]:not([data-m-in]) .prog-b-cf-cur { scale: 1 .7; }
:root[data-m-go] [data-m=prog-b-cf-shed][data-m-in] .prog-b-cf-cur { animation-name: prog-b-cf-shed; animation-duration: 720ms; animation-timing-function: var(--cf-freight); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
@keyframes prog-b-cf-shed { from { scale: 1 .7; } to { scale: 1 0; } }
/* the floor arrives from the cost spool: down the right margin, along the top margin, down into the stage */
.prog-b-cf-flin { position: absolute; background: #c98a2b; pointer-events: none; }
.prog-b-cf-flin--a { right: 14px; top: 0; width: 3px; height: 30px; }
.prog-b-cf-flin--b { top: 27px; height: 3px; right: 14px; left: calc((100cqw - var(--cf-cw)) / 2 + .6 * var(--cf-cw) - 3px); }
.prog-b-cf-stage__box::before { content: ''; position: absolute; right: -3px; bottom: 34%; width: 3px; height: calc(66% + var(--cf-pad) - 27px); background: #c98a2b; }

@media (max-width: 1000px) {
  .prog-b-cf-sh__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .prog-b-cf-sodeco { left: auto; right: calc(100% - var(--cf-gx) + 10px); }
  .prog-b-cf-sh__side { order: -1; }
  .prog-b-cf-flin, .prog-b-cf-stage__box::before, .prog-b-cf-prov { display: none; }
  .prog-b-cf-stage__box { --cf-gx: 80cqw; }
}
@media (max-width: 640px) {
  .prog-b-cf-stage__box { aspect-ratio: 4 / 5; }
  .prog-b-cf-floor { top: 70%; }
  .prog-b-cf-floor__lab { top: calc(70% + 12px); }
  .prog-b-cf-imp { bottom: 30%; width: 19%; left: calc(3% + var(--k) * 11.5%); }
  .prog-b-cf-imp:nth-child(n+3) { display: none; }
  .prog-b-cf-imp:nth-child(2) { left: 26%; }
  .prog-b-cf-gar { bottom: calc(30% + 48px); width: 22cqw; left: calc(var(--cf-gx) - 11cqw); }
  .prog-b-cf-sodeco { top: 80%; font-size: 12px; }
  .prog-b-cf-cur--top { height: calc(70% + 1px); }
  .prog-b-cf-cur--bot { top: calc(70% + 6px); }
  .prog-b-cf-proof { position: static; margin-top: 10px; }
  .prog-b-cf-zone__t { font-size: 12px; left: 8px; }
}

/* ===============================================================================================================
   5 · Sticky scene A (paper): the upstream map; threads 03 and 04 turn from rivals into suppliers
   =============================================================================================================== */
.prog-b-cf-up { padding-block: 48px 0; overflow: clip; }
.prog-b-cf-up__frame { display: grid; }
.prog-b-cf-up__head, .prog-b-cf-steps { grid-area: 1 / 1; }
.prog-b-cf-up__head { position: sticky; top: 4svh; z-index: 3; align-self: start; width: 46%; height: 96svh; pointer-events: none; }
.prog-b-cf-up__head .prog-b-cf-head__t { font-size: clamp(1.5rem, 2.05vw, 2.15rem); max-width: none; }
.prog-b-cf-up__head :is(.prog-b-cf-head__t, .prog-b-cf-head__k) { width: fit-content; background: var(--cf-paper); box-shadow: 0 0 0 6px var(--cf-paper); }
.prog-b-cf-steps.mw-steps { grid-template-columns: 56% 38%; justify-content: space-between; gap: 0; }
.prog-b-cf-up__vis.mw-steps__visual { top: 0; height: 100svh; min-height: 0; align-items: start; padding-top: calc(4svh + 150px); }
.prog-b-cf-up__stage { display: grid; gap: 8px; align-content: start; }
.prog-b-cf-up__ro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: end; padding: 10px 14px; background: #0e4d4a; color: #f6f4ef; }
.prog-b-cf-up__stat { display: grid; }
.prog-b-cf-ust { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity 360ms, visibility 0s linear 360ms; }
.prog-b-cf-ust__big { margin: 0; font: 850 clamp(1.9rem, 2.7vw, 2.7rem)/1.05 var(--gft-font-display); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.prog-b-cf-ust__tag { margin-top: 4px; font: 12.5px/1.5 var(--gft-font-mono); color: var(--cf-read); }
.prog-b-cf-ust__tag .gft-cite { color: #bfe6d1; background: #6bb68f1f; border-color: #6bb68fa6; }
.prog-b-cf-up__idx { display: grid; justify-items: end; gap: 4px; }
.prog-b-cf-up__n { margin: 0; font-size: 13px; color: var(--cf-read); }
.prog-b-cf-ticks { display: flex; gap: 4px; }
.prog-b-cf-ticks button { width: 44px; height: 44px; border: 1px solid #cfe8dc80; background: transparent; color: #f6f4ef; font: 700 14px var(--gft-font-mono); cursor: pointer; }
.prog-b-cf-ticks button[aria-pressed="true"] { background: #f6f4ef; color: #0e4d4a; }
.prog-b-cf-ticks button:focus-visible { outline: 2px solid #c98a2b; outline-offset: 2px; }
.prog-b-cf-um { display: block; width: min(100%, calc((100svh - 330px) * 1.3636)); height: auto; overflow: visible; }
.prog-b-cf-up__note { margin: 0; }
/* the map: 2 px strokes, labelled skeleton */
.prog-b-cf-um-warp line { stroke: #3f8f6b; stroke-opacity: .16; }
.prog-b-cf-um-prov { stroke: #2d6e51; stroke-width: 3; }
.prog-b-cf-um-sk text { fill: #25302e; }
.prog-b-cf-um-camtext rect { fill: #e7ebf6; stroke: #2c3e7a; stroke-width: 2.5; }
.prog-b-cf-um-camtext text { fill: #2c3e7a; }
.prog-b-cf-um-node rect { fill: #f6f4ef; stroke: #25302e; stroke-width: 2; }
.prog-b-cf-um-sod rect { stroke: #2d6e51; stroke-width: 2.5; }
.prog-b-cf-um-pole circle { fill: #f6f4ef; stroke: #25302e; stroke-width: 2; }
.prog-b-cf-um-ven path { fill: #f6f4ef; stroke: #0e4d4a; stroke-width: 2.5; }
.prog-b-cf-um-ven circle { fill: #c98a2b; }
.prog-b-cf-um-l3 { stroke: #2c3e7a; stroke-width: 3; stroke-linecap: round; }
.prog-b-cf-um-l4 { stroke: #25302e; stroke-width: 3; stroke-linecap: round; }
.prog-b-cf-um-fl { stroke: #c98a2b; stroke-width: 3; --m-dash: 6 16; }
.prog-b-cf-um-ply { stroke: #2d6e51; stroke-width: 3; stroke-dasharray: 2 0; stroke-linecap: round; }
.prog-b-cf-um-hub { fill: #f6f4ef; stroke: #2c3e7a; stroke-width: 2.5; }
.prog-b-cf-um-bar { fill: #2c3e7a; }
.prog-b-cf-um-ink { fill: #25302e; }
.prog-b-cf-um-ink3 { fill: #2c3e7a; }
.prog-b-cf-um-chip { fill: #e2ebe6; stroke: #2d6e51; stroke-width: 2; }
.prog-b-cf-um-venlit { fill: #0e4d4a; stroke: #25302e; stroke-width: 2.5; }
.prog-b-cf-um-t3, .prog-b-cf-um-camtext { transition: opacity 420ms; }
.prog-b-cf-um-s { opacity: 0; visibility: hidden; transition: opacity 420ms var(--cf-ease), visibility 0s linear 420ms; }
.prog-b-cf-um-pole circle { transition: fill 0s; }
/* states (data-cf-on 0 to 3; none = step 1 composed) */
.prog-b-cf-steps:not([data-cf-on]) .prog-b-cf-ust[data-s="0"],
.prog-b-cf-steps[data-cf-on="0"] .prog-b-cf-ust[data-s="0"],
.prog-b-cf-steps[data-cf-on="1"] .prog-b-cf-ust[data-s="1"],
.prog-b-cf-steps[data-cf-on="2"] .prog-b-cf-ust[data-s="2"],
.prog-b-cf-steps[data-cf-on="3"] .prog-b-cf-ust[data-s="3"] { visibility: visible; opacity: 1; transition-delay: 0s; }
.prog-b-cf-steps[data-cf-on="1"] .prog-b-cf-um-s1,
.prog-b-cf-steps[data-cf-on="2"] .prog-b-cf-um-s2,
.prog-b-cf-steps[data-cf-on="3"] .prog-b-cf-um-s3 { opacity: 1; visibility: visible; transition-delay: 0s; }
.prog-b-cf-steps:is(:not([data-cf-on]), [data-cf-on="0"]) .prog-b-cf-um-camtext rect { fill: #2c3e7a; }
.prog-b-cf-steps:is(:not([data-cf-on]), [data-cf-on="0"]) .prog-b-cf-um-camtext text { fill: #f6f4ef; }
.prog-b-cf-steps[data-cf-on="2"] :is(.prog-b-cf-um-t3, .prog-b-cf-um-camtext) { opacity: .4; }
.prog-b-cf-steps:is([data-cf-on="2"], [data-cf-on="3"]) .prog-b-cf-um-pole circle { fill: #0e4d4a; stroke: #6bb68f; }
.prog-b-cf-steps:is([data-cf-on="2"], [data-cf-on="3"]) .prog-b-cf-um-pole text { fill: #f6f4ef; }
.prog-b-cf-steps[data-cf-on="2"] :is(.prog-b-cf-um-sod, .prog-b-cf-um-cic) rect { fill: #e2ebe6; stroke-width: 3; }
/* step changes draw their new threads (clip on the layer, transform-free) */
:root[data-m-go] .prog-b-cf-steps[data-cf-on="1"] .prog-b-cf-um-s1 path,
:root[data-m-go] .prog-b-cf-steps[data-cf-on="2"] .prog-b-cf-um-s2 path, :root[data-m-go] .prog-b-cf-steps[data-cf-on="3"] .prog-b-cf-um-s3 path { animation-name: prog-b-cf-path-in; animation-duration: 640ms; animation-timing-function: var(--cf-ease); animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: backwards; }
@keyframes prog-b-cf-path-in { from { opacity: 0; } }
/* entrance heddle: the stage lifts in two layers, warp lines first, then nodes */
:root[data-m-go] [data-m=prog-b-cf-heddle]:not([data-m-in]) .prog-b-cf-um-warp { opacity: .2; translate: 0 -14px; }
:root[data-m-go] [data-m=prog-b-cf-heddle]:not([data-m-in]) :is(.prog-b-cf-um-sk, .prog-b-cf-up__ro) { opacity: .3; translate: 0 -18px; }
:root[data-m-go] [data-m=prog-b-cf-heddle][data-m-in] .prog-b-cf-um-warp { animation-name: prog-b-cf-heddle; animation-duration: 520ms; animation-timing-function: var(--cf-ease); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go] [data-m=prog-b-cf-heddle][data-m-in] :is(.prog-b-cf-um-sk, .prog-b-cf-up__ro) { animation-name: prog-b-cf-heddle; animation-duration: 560ms; animation-delay: 220ms; animation-timing-function: var(--cf-ease); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
@keyframes prog-b-cf-heddle { from { opacity: .25; translate: 0 -16px; } }
/* the track: lede, then four cards of at least 90svh, the last 110svh */
.prog-b-cf-up__track > .prog-b-cf-up__lede { min-height: 46svh; align-content: start; padding-top: 4svh; }
.prog-b-cf-up__track > .prog-b-cf-up__lede::before, .prog-b-cf-up__track > .prog-b-cf-up__lede::after { display: none; }
.prog-b-cf-up__lede .prog-b-cf-t { font-size: 16px; color: #2e3b37; }
.prog-b-cf-up__track > .prog-b-cf-up__step { min-height: 90svh; }
.prog-b-cf-up__track > .prog-b-cf-up__step:last-child { min-height: 110svh; }
.prog-b-cf-up__step .gft-eyebrow { margin-bottom: 4px; color: #2c3e7a; }
.prog-b-cf-up__step h3 { max-width: 22ch; }
.prog-b-cf-up__step .prog-b-cf-t, .prog-b-cf-up__step p:not(.gft-eyebrow) { font-size: 15.5px; line-height: 1.65; color: #2e3b37; }
/* the provenance thread from the shelf reaches SODECOTON at the top of the pinned map */
.prog-b-cf-up__stage { position: relative; }
.prog-b-cf-up__stage::before { content: ''; position: absolute; left: calc(min(100%, (100svh - 330px) * 1.3636) * .7071 - 1.5px); bottom: calc(100% - 140px); width: 3px; height: 100vh; background: #2d6e51; opacity: .9; z-index: -1; pointer-events: none; }

@media (max-width: 1000px) {
  .prog-b-cf-up { padding-top: 40px; }
  .prog-b-cf-up__head { position: static; height: auto; width: auto; pointer-events: auto; margin-bottom: 16px; }
  .prog-b-cf-up__frame { display: block; }
  .prog-b-cf-steps.mw-steps { grid-template-columns: minmax(0, 1fr); }
  .prog-b-cf-up__vis.mw-steps__visual { position: sticky; top: 0; height: auto; padding: 6px 0 8px; z-index: 2; background: var(--cf-paper); box-shadow: 0 10px 18px -14px #25302e66; }
  .prog-b-cf-up__ro { padding: 6px 10px; gap: 8px; }
  .prog-b-cf-ust__big { font-size: 24px; }
  .prog-b-cf-ust__tag { font-size: 12px; }
  .prog-b-cf-ticks button { width: 40px; height: 40px; }
  .prog-b-cf-um { width: 100%; max-width: 560px; }
  .prog-b-cf-up__note { display: none; }
  .prog-b-cf-up__stage::before { display: none; }
  .prog-b-cf-up__track > .prog-b-cf-up__lede { min-height: 0; padding-block: 18px; }
  .prog-b-cf-up__track > .prog-b-cf-up__step { min-height: 90svh; align-content: end; padding-bottom: 8svh; }
  .prog-b-cf-up__track > .prog-b-cf-up__step:last-child { min-height: 110svh; }
}

/* ===============================================================================================================
   6 · The dark interlude (night, full bleed): opened by an iris from the venture hexagon
   =============================================================================================================== */
.prog-b-cf-il { position: relative; isolation: isolate; background: none; min-height: 100svh; padding-block: 11svh 6svh; overflow: clip; display: grid; align-content: space-between; }
.prog-b-cf-il > .gft-container { display: grid; gap: 4svh; }
.prog-b-cf-il__ground { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 70% 60% at 46% 0%, #0e4d4a 0%, #072d2b 62%); }
.prog-b-cf-il { --ix: 46%; }
:root[data-m-go] .prog-b-cf-il:not([data-m-in]) .prog-b-cf-il__ground { clip-path: circle(4% at var(--ix) 0%); }
:root[data-m-go] .prog-b-cf-il[data-m-in] .prog-b-cf-il__ground { animation-name: prog-b-cf-il-iris; animation-duration: 880ms; animation-timing-function: var(--cf-freight); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
@keyframes prog-b-cf-il-iris { from { clip-path: circle(4% at var(--ix) 0%); } to { clip-path: circle(160% at var(--ix) 0%); } }
.prog-b-cf-il__body { position: relative; }
.prog-b-cf-il__body::before { content: ''; position: absolute; inset: -8% -6% -10% -4%; z-index: -1; background: radial-gradient(ellipse at 30% 50%, #041f1dcc, transparent 70%); pointer-events: none; }
.prog-b-cf-il__body .gft-eyebrow { color: var(--cf-read); margin-bottom: 18px; }
.prog-b-cf-il__quote { margin: 0; max-width: 21ch; font-size: clamp(2.1rem, 4vw, 3.9rem); line-height: 1.12; color: #f6f4ef; }
:root[data-m-go] [data-m=prog-b-cf-curtain]:not([data-m-in]) { clip-path: inset(-10% 30% -10% 30%); }
:root[data-m-go] [data-m=prog-b-cf-curtain][data-m-in] { animation-name: prog-b-cf-curtain; animation-duration: 760ms; animation-timing-function: var(--cf-freight); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
@keyframes prog-b-cf-curtain { from { clip-path: inset(-10% 30% -10% 30%); } to { clip-path: inset(-10% -10% -10% -10%); } }
/* the warp: four threads across the full bleed, each with its chip and its state tag */
.prog-b-cf-warp { position: relative; }
.prog-b-cf-warp__rows { margin: 0; padding: 0; list-style: none; display: grid; }
.prog-b-cf-wr { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; height: 54px; }
.prog-b-cf-wr__line { position: absolute; left: -50vw; right: -50vw; top: calc(50% - 1.5px); height: 3px; background: var(--pc); container-type: inline-size; transition: filter 420ms; }
.prog-b-cf-wr[data-f="1"] .prog-b-cf-wr__line { filter: brightness(calc(.75 + .55 * var(--cfa1))) drop-shadow(0 0 calc(var(--cfa1) * 6px) #6bb68f); }
.prog-b-cf-wr[data-f="2"] .prog-b-cf-wr__line { filter: brightness(calc(.75 + .55 * var(--cfa2))) drop-shadow(0 0 calc(var(--cfa2) * 6px) #c98a2b); }
.prog-b-cf-wr[data-f="3"] .prog-b-cf-wr__line { filter: brightness(calc(.75 + .55 * var(--cfa3))) drop-shadow(0 0 calc(var(--cfa3) * 6px) #8fa0d6); }
.prog-b-cf-wr[data-f="4"] .prog-b-cf-wr__line { filter: brightness(calc(.75 + .55 * var(--cfa4))) drop-shadow(0 0 calc(var(--cfa4) * 6px) #e2ebe6); }
.prog-b-cf-wr__sh { position: absolute; top: -4px; left: 0; width: 26px; height: 11px; border-radius: 6px; background: #f6f4ef; opacity: .85; translate: 30cqw 0; }
.prog-b-cf-wr__sh--b { translate: 62cqw 0; width: 18px; }
:root[data-m-go] .prog-b-cf-wr__sh[data-m-on] { animation-name: prog-b-cf-shuttle; animation-duration: calc(9s + var(--k, 0) * 1.3s); animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
:root[data-m-go] .prog-b-cf-wr__sh--b[data-m-on] { animation-name: prog-b-cf-shuttle-b; }
@keyframes prog-b-cf-shuttle { from { translate: 28cqw 0; } to { translate: 70cqw 0; } }
@keyframes prog-b-cf-shuttle-b { from { translate: 68cqw 0; } to { translate: 36cqw 0; } }
.prog-b-cf-wr__chip { position: relative; z-index: 2; min-height: 40px; padding: 4px 14px; border: 2px solid var(--pc); background: #072d2b; color: #f6f4ef; font: 700 13.5px var(--gft-font-mono); cursor: pointer; white-space: nowrap; }
.prog-b-cf-wr__chip[aria-pressed="true"] { background: var(--pc); color: #072d2b; }
.prog-b-cf-wr__chip:focus-visible { outline: 2px solid #f6f4ef; outline-offset: 2px; }
.prog-b-cf-wr__tag { grid-column: 3; position: relative; padding: 3px 10px; font-size: 13px; color: #072d2b; background: var(--pc); white-space: nowrap; }
.prog-b-cf-warp__hex { position: absolute; left: -44px; top: 9px; width: 36px; height: 36px; translate: 0 calc((var(--cfa2) + 2 * var(--cfa3) + 3 * var(--cfa4)) * 54px); rotate: calc((var(--cfa1) + var(--cfa3) - var(--cfa2) - var(--cfa4)) * 8deg); transition: translate 560ms var(--cf-ease), rotate 560ms var(--cf-ease); }
.prog-b-cf-warp__hex svg { width: 100%; height: 100%; display: block; }
/* the shuttle enters: the venture's signal trace already crosses the warp at the bottom left */
.prog-b-cf-warp__trace { position: absolute; z-index: 1; left: -48px; top: -8px; height: calc(100% + 16px); width: 24%; overflow: visible; pointer-events: none; }
.prog-b-cf-warp__trace path { stroke: #f6f4ef; stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; filter: drop-shadow(0 0 4px #6bb68f); }
:root[data-m-go] [data-m=prog-b-cf-warp-in]:not([data-m-in]) .prog-b-cf-wr__line { clip-path: inset(0 60% 0 0); }
:root[data-m-go] [data-m=prog-b-cf-warp-in][data-m-in] .prog-b-cf-wr__line { animation-name: prog-b-cf-warp-draw; animation-duration: 700ms; animation-delay: calc(var(--k, 0) * 60ms); animation-timing-function: var(--cf-freight); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
@keyframes prog-b-cf-warp-draw { from { clip-path: inset(0 60% 0 0); } to { clip-path: inset(-20px -2% -20px 0); } }
.prog-b-cf-il__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 32px; align-items: start; }
.prog-b-cf-verdict { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; max-width: 980px; }
.prog-b-cf-verdict__k { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--cf-read); }
.prog-b-cf-vd { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; visibility: hidden; opacity: 0; transition: opacity 360ms, visibility 0s linear 360ms; }
.prog-b-cf-vd__a { font-size: 15px; line-height: 1.55; color: #f6f4ef; border-left: 3px solid var(--pc); padding-left: 12px; }
.prog-b-cf-vd__b { font-size: 15px; line-height: 1.55; color: #f0d7a8; }
.prog-b-cf-vd[data-f="1"], :root[data-cf-force="2"] .prog-b-cf-vd[data-f="2"], :root[data-cf-force="3"] .prog-b-cf-vd[data-f="3"], :root[data-cf-force="4"] .prog-b-cf-vd[data-f="4"] { visibility: visible; opacity: 1; transition-delay: 0s; }
:root[data-cf-force]:not([data-cf-force="1"]) .prog-b-cf-vd[data-f="1"] { visibility: hidden; opacity: 0; transition-delay: 0s, 360ms; }
.prog-b-cf-ledger { max-width: 980px; }
.prog-b-cf-ledger summary { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 16px; border: 1px solid #cfe8dc80; cursor: pointer; font: 700 13px var(--gft-font-display); color: #f6f4ef; }
.prog-b-cf-ledger[open] { grid-column: 1 / -1; }
.prog-b-cf-ledger .gft-table { margin-top: 12px; }
.prog-b-cf-ledger .gft-table :is(th, td) { color: #e3ece7; border-color: #ffffff2e; font-size: 14px; }
.prog-b-cf-ledger .gft-table th { font-size: 12px; }

@media (max-width: 1000px) {
  .prog-b-cf-il { --ix: 78%; }
  .prog-b-cf-il__foot { grid-template-columns: 1fr; }
  .prog-b-cf-warp__hex { display: none; }
}
@media (max-width: 640px) {
  .prog-b-cf-il__quote { font-size: 34px; }
  .prog-b-cf-warp__rows { grid-template-columns: 1fr 1fr; gap: 8px; }
  .prog-b-cf-wr { display: grid; grid-template-columns: 1fr; height: auto; gap: 4px; padding-top: 30px; }
  .prog-b-cf-wr__line { top: 22px; }
  .prog-b-cf-wr__tag { grid-column: 1; grid-row: 1; position: absolute; top: 0; left: 0; font-size: 12px; padding: 1px 6px; }
  .prog-b-cf-wr__chip { margin-top: 10px; white-space: normal; text-align: left; font-size: 13px; }
  .prog-b-cf-wr__sh--b { display: none; }
  .prog-b-cf-warp__trace { width: 38%; left: -20px; }
  .prog-b-cf-verdict, .prog-b-cf-verdict__k, .prog-b-cf-vd { grid-template-columns: 1fr; gap: 6px; }
  .prog-b-cf-verdict__k span:last-child { display: none; }
}

/* ===============================================================================================================
   7 · Sticky scene B (deep): the measurement weft crosses the warp and ties one knot per step
   =============================================================================================================== */
.prog-b-cf-ed { background: var(--cf-deep); padding-block: 0; }
.prog-b-cf-ed__frame { display: grid; }
.prog-b-cf-ed__head, .prog-b-cf-edsteps { grid-area: 1 / 1; }
.prog-b-cf-ed__head { position: sticky; top: 5svh; z-index: 3; align-self: start; margin-left: 36%; height: 95svh; pointer-events: none; }
.prog-b-cf-ed__head .prog-b-cf-head__t { font-size: clamp(1.45rem, 1.95vw, 2.05rem); max-width: 34ch; }
.prog-b-cf-ed__head .gft-eyebrow { color: var(--cf-read); }
.prog-b-cf-ed__vis.mw-steps__visual { background: var(--cf-deep); }
.prog-b-cf-ed__stage { height: 100svh; display: grid; grid-template-columns: 34% minmax(0, 1fr); grid-template-rows: calc(5svh + 128px) minmax(0, 1fr) auto 21svh; column-gap: 2%; row-gap: 10px; padding-bottom: 3svh; }
.prog-b-cf-ed__fig { grid-column: 2; grid-row: 2; display: grid; min-height: 0; }
.prog-b-cf-ed__ctl { grid-column: 2; grid-row: 3; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 6px 14px; align-items: center; }
.prog-b-cf-ed__warp { grid-column: 1 / -1; grid-row: 4; position: relative; }
.prog-b-cf-fg { grid-area: 1 / 1; display: grid; align-content: center; gap: 10px; min-height: 0; visibility: hidden; opacity: 0; transition: opacity 380ms var(--cf-ease), visibility 0s linear 380ms; }
.prog-b-cf-edsteps:is(:not([data-cf-on]), [data-cf-on="0"]) .prog-b-cf-fg[data-s="0"],
.prog-b-cf-edsteps[data-cf-on="1"] .prog-b-cf-fg[data-s="1"],
.prog-b-cf-edsteps[data-cf-on="2"] .prog-b-cf-fg[data-s="2"],
.prog-b-cf-edsteps[data-cf-on="3"] .prog-b-cf-fg[data-s="3"],
.prog-b-cf-edsteps[data-cf-on="4"] .prog-b-cf-fg[data-s="4"] { visibility: visible; opacity: 1; transition-delay: 0s; }
.prog-b-cf-fg__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.prog-b-cf-fg__k { margin: 0; font-size: 12.5px; color: var(--cf-read); }
.prog-b-cf-fg__fig { display: grid; gap: 4px; }
.prog-b-cf-fg__big { margin: 0; font: 850 clamp(2.6rem, 4.2vw, 4.2rem)/1 var(--gft-font-display); letter-spacing: -.05em; color: #f6f4ef; font-variant-numeric: tabular-nums; }
.prog-b-cf-fg__lab { margin: 0; font-size: 15px; color: #e3ece7; max-width: 52ch; }
.prog-b-cf-fg__cap { margin: 0; font-size: 13px; color: #f0d7a8; }
.prog-b-cf-fg__note { margin: 0; }
.prog-b-cf-fg__note--w { max-width: 64ch; }
.prog-b-cf-fg :is(.vb, .nb) { display: none; }
.prog-b-cf-fg--wage:has(input[name="prog-b-cf-wmode"][value="b"]:checked) :is(.va, .na) { display: none; }
.prog-b-cf-fg--wage:has(input[name="prog-b-cf-wmode"][value="b"]:checked) :is(.vb, .nb) { display: inline; }
/* 01 wage bars, to scale (US$359 = full length; the ratio view keeps the same lengths) */
.prog-b-cf-wbars { display: grid; gap: 8px; }
.prog-b-cf-wbar { position: relative; display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) 6.5rem; gap: 14px; align-items: center; min-height: 48px; cursor: pointer; }
.prog-b-cf-wbar input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.prog-b-cf-wbar__n { display: grid; }
.prog-b-cf-wbar__n b { font: 800 15px var(--gft-font-display); color: #f6f4ef; }
.prog-b-cf-wbar__n small { font: 12px var(--gft-font-mono); color: var(--cf-read); }
.prog-b-cf-wbar__t { position: relative; height: 22px; background: #ffffff12; }
.prog-b-cf-wbar__t i { position: absolute; inset: 0; background: #6bb68f; transform-origin: 0 50%; scale: var(--f) 1; }
.prog-b-cf-wbar:nth-child(2) .prog-b-cf-wbar__t i { background: #c98a2b; }
.prog-b-cf-wbar:nth-child(3) .prog-b-cf-wbar__t i { background: #8fa0d6; }
.prog-b-cf-wbar__v { font: 800 18px var(--gft-font-mono); color: #f6f4ef; text-align: right; font-variant-numeric: tabular-nums; }
.prog-b-cf-wbar:has(input:checked) .prog-b-cf-wbar__n b { text-decoration: underline 2px #c98a2b; text-underline-offset: 4px; }
.prog-b-cf-wbar:has(input:focus-visible) { outline: 2px solid #c98a2b; outline-offset: 2px; }
.prog-b-cf-wro { display: grid; }
.prog-b-cf-wro__r { grid-area: 1 / 1; visibility: hidden; font-size: 14.5px; }
.prog-b-cf-fg--wage:has(input[name="prog-b-cf-wbar"][value="0"]:checked) .prog-b-cf-wro__r[data-r="0"],
.prog-b-cf-fg--wage:has(input[name="prog-b-cf-wbar"][value="1"]:checked) .prog-b-cf-wro__r[data-r="1"],
.prog-b-cf-fg--wage:has(input[name="prog-b-cf-wbar"][value="2"]:checked) .prog-b-cf-wro__r[data-r="2"] { visibility: visible; }
/* 02 the 10 x 10 unit field */
.prog-b-cf-fg--field { grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: center; }
.prog-b-cf-fg--field .prog-b-cf-fg__note { grid-column: 1 / -1; }
.prog-b-cf-field { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; width: min(26svh, 240px); }
.prog-b-cf-field i { aspect-ratio: 1; background: #ffffff1f; border: 1px solid #ffffff26; transform-origin: 0 50%; }
.prog-b-cf-field i.on { background: #6bb68f; border-color: #6bb68f; }
:root[data-m-go] .prog-b-cf-edsteps[data-cf-on="1"] .prog-b-cf-field i { animation-name: prog-b-cf-cell; animation-duration: 520ms; animation-delay: calc(var(--r) * 22ms); animation-timing-function: var(--cf-ease); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
@keyframes prog-b-cf-cell { from { scale: 0 1; } }
/* 03 the gauge: thread 01's lanes return */
.prog-b-cf-gauge { display: grid; gap: 10px; max-width: 760px; }
.prog-b-cf-gauge p { margin: 0; font-size: 12.5px; color: var(--cf-read); }
.prog-b-cf-gauge__lane { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) 5.5rem; gap: 12px; align-items: center; }
.prog-b-cf-gauge__lane b { font: 800 15px var(--gft-font-display); color: #f6f4ef; }
.prog-b-cf-gauge__lane i { position: relative; height: 10px; background: repeating-linear-gradient(90deg, #6bb68f66 0 8px, transparent 8px 14px); }
.prog-b-cf-gauge__lane i::before { content: ''; position: absolute; inset: -2px auto -2px 0; width: 100%; background: #6bb68f; transform-origin: 0 50%; scale: var(--f) 1; }
.prog-b-cf-gauge__lane:first-of-type i::before { background: #c98a2b; }
.prog-b-cf-gauge__lane em { font: 800 16px var(--gft-font-mono); font-style: normal; color: #f6f4ef; text-align: right; }
.prog-b-cf-gauge__scale { display: flex; justify-content: space-between; margin-left: calc(6.5rem + 12px); margin-right: calc(5.5rem + 12px); font: 12px var(--gft-font-mono); color: var(--cf-read); }
:root[data-m-go] .prog-b-cf-edsteps[data-cf-on="2"] .prog-b-cf-gauge__lane i::before { animation-name: prog-b-cf-grow; animation-duration: 700ms; animation-timing-function: var(--cf-freight); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
@keyframes prog-b-cf-grow { from { scale: 0 1; } }
/* 04 OEE dials (illustrative) */
.prog-b-cf-dials { width: min(100%, 560px); height: auto; }
.prog-b-cf-dial__bg { stroke: #ffffff26; stroke-width: 12; stroke-linecap: round; }
.prog-b-cf-dial__arc { stroke: #6bb68f; stroke-width: 12; stroke-linecap: round; }
.prog-b-cf-dial__arc--oee { stroke: #c98a2b; }
.prog-b-cf-dial__t { fill: #e3ece7; font: 18px var(--gft-font-mono); }
.prog-b-cf-dial__x { fill: #f6f4ef; font: 800 30px var(--gft-font-display); }
.prog-b-cf-dial__o { fill: #f6f4ef; font: 800 22px var(--gft-font-display); }
:root[data-m-go] .prog-b-cf-edsteps[data-cf-on="3"] .prog-b-cf-dial__arc { animation-name: prog-b-cf-dial; animation-duration: 760ms; animation-timing-function: var(--cf-ease); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
@keyframes prog-b-cf-dial { from { opacity: 0; } }
/* 05 inspection lanes */
.prog-b-cf-vis { display: grid; gap: 12px; max-width: 760px; }
.prog-b-cf-vis__lane { display: grid; grid-template-columns: 10rem minmax(0, 1fr) 6.5rem; gap: 12px; align-items: center; }
.prog-b-cf-vis__lane b { font: 800 15px var(--gft-font-display); color: #f6f4ef; }
.prog-b-cf-vis__lane i { position: relative; height: 16px; background: #ffffff14; }
.prog-b-cf-vis__lane s { position: absolute; top: 0; bottom: 0; left: calc(var(--a) * 100%); width: calc((var(--b) - var(--a)) * 100%); background: #c98a2b; }
.prog-b-cf-vis__lane--cv s { background: #6bb68f; }
.prog-b-cf-vis__lane--cv s::after { content: ''; position: absolute; left: 100%; top: -4px; border: 12px solid transparent; border-left: 12px solid #6bb68f; border-right: 0; }
.prog-b-cf-vis__lane em { font: 700 14px var(--gft-font-mono); font-style: normal; color: #f6f4ef; text-align: right; }
.prog-b-cf-vis__tick { margin-left: calc(10rem + 12px); font-size: 12.5px; color: #f0d7a8; }
/* controls: Play plus five stops, linked to scroll */
.prog-b-cf-stops { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.prog-b-cf-stops button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 12px; border: 1px solid #cfe8dc66; background: transparent; color: #e3ece7; font: 700 13px var(--gft-font-display); cursor: pointer; }
.prog-b-cf-stops b { font: 700 13px var(--gft-font-mono); color: #8fd0ae; }
.prog-b-cf-stops button[aria-pressed="true"] { background: #f6f4ef; color: #0a3d3a; border-color: #f6f4ef; }
.prog-b-cf-stops button[aria-pressed="true"] b { color: #0a3d3a; }
.prog-b-cf-stops button:focus-visible { outline: 2px solid #c98a2b; outline-offset: 2px; }
.prog-b-cf-ed__out { grid-column: 1 / -1; margin: 0; font: 800 15px var(--gft-font-mono); color: #f0d7a8; }
/* the warp band, the signal-trace weft and the knots */
.prog-b-cf-ew { position: absolute; left: -50vw; right: -50vw; top: calc(14% + var(--k) * 20%); height: 3px; background: var(--pc); opacity: .85; }
.prog-b-cf-ew em { position: absolute; right: calc(50vw - 0px); top: -11px; translate: 0 0; padding: 1px 8px; font: 12.5px var(--gft-font-mono); font-style: normal; color: #072d2b; background: var(--pc); }
.prog-b-cf-ed__trace { position: absolute; inset: 2% 0 2% -48px; overflow: hidden; pointer-events: none; }
.prog-b-cf-ed__trace svg { display: block; width: 200%; height: 100%; overflow: visible; }
.prog-b-cf-ed__trace path { stroke: #f6f4ef; stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; filter: drop-shadow(0 0 4px #6bb68f); }
:root[data-m-go] .prog-b-cf-ed__trace svg[data-m-on] { animation-name: prog-b-cf-trace; animation-duration: 40s; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes prog-b-cf-trace { from { translate: 0 0; } to { translate: -50% 0; } }
.prog-b-cf-knot { position: absolute; left: calc(var(--x) * 100%); top: calc(50% - 20px); display: grid; place-items: center; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%; background: #0a3d3a; border: 2px dashed #cfe8dc80; color: #cfe8dc; font: 700 13px var(--gft-font-mono); transition: translate 700ms var(--cf-ease), background-color 300ms, border-color 300ms, color 300ms; }
.prog-b-cf-knot b { font-weight: 700; }
.prog-b-cf-edsteps:is(:not([data-cf-on]), [data-cf-on]) .prog-b-cf-knot[data-k="0"],
.prog-b-cf-edsteps:is([data-cf-on="1"], [data-cf-on="2"], [data-cf-on="3"], [data-cf-on="4"]) .prog-b-cf-knot[data-k="1"],
.prog-b-cf-edsteps:is([data-cf-on="2"], [data-cf-on="3"], [data-cf-on="4"]) .prog-b-cf-knot[data-k="2"],
.prog-b-cf-edsteps:is([data-cf-on="3"], [data-cf-on="4"]) .prog-b-cf-knot[data-k="3"],
.prog-b-cf-edsteps[data-cf-on="4"] .prog-b-cf-knot[data-k="4"] { background: #f6f4ef; border: 2px solid #f6f4ef; color: #0a3d3a; }
:root[data-m-go] .prog-b-cf-edsteps:is(:not([data-cf-on]), [data-cf-on="0"]) .prog-b-cf-knot[data-k="0"],
:root[data-m-go] .prog-b-cf-edsteps[data-cf-on="1"] .prog-b-cf-knot[data-k="1"],
:root[data-m-go] .prog-b-cf-edsteps[data-cf-on="2"] .prog-b-cf-knot[data-k="2"],
:root[data-m-go] .prog-b-cf-edsteps[data-cf-on="3"] .prog-b-cf-knot[data-k="3"] { animation-name: prog-b-cf-knot; animation-duration: 1.6s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
@keyframes prog-b-cf-knot { from { scale: 1; } to { scale: 1.14; } }
/* the reed takes over: on the last step the five knots slide right and line up as the reed of the closing weave */
.prog-b-cf-edsteps[data-cf-on="4"] .prog-b-cf-knot { translate: calc((.9 - var(--x)) * var(--cf-bw, 1344px) - (4 - var(--k)) * 44px) 0; }
.prog-b-cf-ed__warp { --cf-bw: min(1440px, 100vw - 96px); }
/* cards float over the left third */
.prog-b-cf-ed__track.mw-steps__track { pointer-events: none; }
.prog-b-cf-ed__track > .prog-b-cf-ed__card { min-height: 90svh; padding: 0; align-content: center; justify-items: start; }
.prog-b-cf-ed__track > .prog-b-cf-ed__card:last-child { min-height: 110svh; }
.prog-b-cf-ed__cin { width: 32%; padding: 20px 22px; background: #072d2bf2; border: 1px solid #6bb68f59; border-left: 3px solid #6bb68f; pointer-events: auto; translate: 0 -8svh; }
.prog-b-cf-ed__cin .gft-eyebrow { margin-bottom: 6px; color: #8fd0ae; }
.prog-b-cf-ed__cin h3 { color: #f6f4ef; font-size: clamp(1.1rem, 1.35vw, 1.3rem); }
.prog-b-cf-ed__cin .prog-b-cf-t, .prog-b-cf-ed__cin p:not(.gft-eyebrow) { font-size: 14.5px; line-height: 1.6; color: #e3ece7; margin: 0; }
/* entrance pick: the weft is inserted left to right, the first knot lands */
:root[data-m-go] [data-m=prog-b-cf-pick]:not([data-m-in]) .prog-b-cf-ed__trace { clip-path: inset(0 85% 0 0); }
:root[data-m-go] [data-m=prog-b-cf-pick]:not([data-m-in]) .prog-b-cf-knot[data-k="0"] { opacity: .3; scale: 1.6; }
:root[data-m-go] [data-m=prog-b-cf-pick][data-m-in] .prog-b-cf-ed__trace { animation-name: prog-b-cf-pick; animation-duration: 780ms; animation-timing-function: var(--cf-freight); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
@keyframes prog-b-cf-pick { from { clip-path: inset(0 85% 0 0); } to { clip-path: inset(0 0 0 0); } }

@media (max-width: 1000px) {
  .prog-b-cf-ed__frame { display: block; padding-top: 48px; }
  .prog-b-cf-ed__head { position: static; height: auto; margin: 0 0 20px; pointer-events: auto; }
  .prog-b-cf-ed__stage { height: auto; grid-template-columns: 1fr; grid-template-rows: auto auto 9svh; row-gap: 6px; padding: 8px 0 6px; }
  .prog-b-cf-ed__fig, .prog-b-cf-ed__ctl, .prog-b-cf-ed__warp { grid-column: 1; }
  .prog-b-cf-ed__fig { grid-row: 1; }
  .prog-b-cf-ed__ctl { grid-row: 2; grid-template-columns: auto minmax(0, 1fr); }
  .prog-b-cf-ed__warp { grid-row: 3; }
  .prog-b-cf-ed__vis.mw-steps__visual { background: none; }
  .prog-b-cf-ed__stage { background: var(--cf-deep); box-shadow: 0 12px 18px -12px #00000099; }
  .prog-b-cf-ed__cin { width: 100%; translate: none; }
  .prog-b-cf-ed__track > .prog-b-cf-ed__card { min-height: 90svh; align-content: end; padding-bottom: 6svh; }
  .prog-b-cf-ed__track > .prog-b-cf-ed__card:last-child { min-height: 110svh; }
  .prog-b-cf-ew em { display: none; }
  .prog-b-cf-knot { width: 26px; height: 26px; margin-left: -13px; top: calc(50% - 13px); font-size: 12px; }
  .prog-b-cf-ed__warp { --cf-bw: calc(100vw - 40px); }
}
@media (max-width: 640px) {
  .prog-b-cf-fg__k, .prog-b-cf-fg__note, .prog-b-cf-fg__cap { display: none; }
  .prog-b-cf-fg { gap: 6px; }
  .prog-b-cf-fg__big { font-size: 30px; }
  .prog-b-cf-fg__lab { font-size: 13px; }
  .prog-b-cf-wbar { grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr) 4.6rem; gap: 8px; min-height: 40px; }
  .prog-b-cf-wbar__n b { font-size: 12.5px; }
  .prog-b-cf-wbar__n small { display: none; }
  .prog-b-cf-wbar__v { font-size: 13px; }
  .prog-b-cf-wro__r { font-size: 12.5px; }
  .prog-b-cf-seg span { padding: 4px 10px; font-size: 12.5px; min-height: 40px; }
  .prog-b-cf-fg--field { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; }
  .prog-b-cf-field { width: 120px; gap: 2px; }
  .prog-b-cf-gauge__lane, .prog-b-cf-vis__lane { grid-template-columns: 5.2rem minmax(0, 1fr) 4.4rem; gap: 6px; }
  .prog-b-cf-gauge__lane b, .prog-b-cf-vis__lane b { font-size: 12.5px; }
  .prog-b-cf-gauge__lane em, .prog-b-cf-vis__lane em { font-size: 12.5px; }
  .prog-b-cf-gauge p, .prog-b-cf-gauge__scale, .prog-b-cf-vis__tick { display: none; }
  .prog-b-cf-dial__t { font-size: 23px; }
  .prog-b-cf-stops button { min-width: 40px; min-height: 40px; padding: 2px; justify-content: center; }
  .prog-b-cf-stops span { display: none; }
  .prog-b-cf-play { min-height: 40px; padding: 4px 10px; font-size: 12.5px; }
  .prog-b-cf-ed__out { font-size: 13px; }
}

/* ===============================================================================================================
   8 · Closing (night): the weave instrument; the selvedge carries the knots and runs on to the footer bridge
   =============================================================================================================== */
.prog-b-cf-cl { padding-block: 56px 36px; min-height: 100svh; background: radial-gradient(ellipse 80% 70% at 60% 30%, #0e4d4a 0%, #072d2b 60%); }
.prog-b-cf-cl__head .prog-b-cf-head__t { font-size: clamp(1.8rem, 2.7vw, 2.8rem); max-width: 34ch; }
.prog-b-cf-cl__head .gft-eyebrow { color: var(--cf-read); }
.prog-b-cf-wv { position: relative; margin: 18px 0 0; }
.prog-b-cf-wv__svg { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 260; }
.prog-b-cf-wv__grid line { stroke: #6bb68f; stroke-opacity: .1; }
.prog-b-cf-wv__labels { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.prog-b-cf-wv__labels li { position: absolute; left: 0; top: var(--y); translate: 0 -135%; padding: 0 6px 0 0; font: 700 13px var(--gft-font-mono); color: var(--c); background: #072d2bd9; }
.prog-b-cf-wv__apart, .prog-b-cf-wv__woven, .prog-b-cf-wv__selv { transition: opacity 520ms var(--cf-ease); }
.prog-b-cf-wv__apart { opacity: 0; }
.prog-b-cf-wv__selv { opacity: 0; }
.prog-b-cf-wv__selv4 { opacity: 1; }
.prog-b-cf-wv__reed { translate: calc(var(--mw-p, 1) * 1110px + 40px) 0; transition: translate 560ms var(--cf-ease); }
.prog-b-cf-wv__reed line { stroke: #f6f4ef; stroke-opacity: .7; stroke-width: 2.5; }
.prog-b-cf-wv__reed circle { fill: #f6f4ef; }
.prog-b-cf-wv__knot { transition: opacity 420ms; }
/* states: data-step 0 to 4 from the scrubber; none = woven */
.prog-b-cf-wv[data-step="0"] .prog-b-cf-wv__t .prog-b-cf-wv__apart { opacity: 1; }
.prog-b-cf-wv[data-step="0"] .prog-b-cf-wv__t .prog-b-cf-wv__woven { opacity: 0; }
.prog-b-cf-wv[data-step="1"] :is(.prog-b-cf-wv__t2, .prog-b-cf-wv__t3, .prog-b-cf-wv__t4) .prog-b-cf-wv__apart,
.prog-b-cf-wv[data-step="2"] :is(.prog-b-cf-wv__t3, .prog-b-cf-wv__t4) .prog-b-cf-wv__apart,
.prog-b-cf-wv[data-step="3"] .prog-b-cf-wv__t4 .prog-b-cf-wv__apart { opacity: 1; }
.prog-b-cf-wv[data-step="1"] :is(.prog-b-cf-wv__t2, .prog-b-cf-wv__t3, .prog-b-cf-wv__t4) .prog-b-cf-wv__woven,
.prog-b-cf-wv[data-step="2"] :is(.prog-b-cf-wv__t3, .prog-b-cf-wv__t4) .prog-b-cf-wv__woven,
.prog-b-cf-wv[data-step="3"] .prog-b-cf-wv__t4 .prog-b-cf-wv__woven { opacity: 0; }
.prog-b-cf-wv:is([data-step="0"], [data-step="1"], [data-step="2"], [data-step="3"]) .prog-b-cf-wv__selv4 { opacity: 0; }
.prog-b-cf-wv[data-step="1"] .prog-b-cf-wv__selv1, .prog-b-cf-wv[data-step="2"] .prog-b-cf-wv__selv2, .prog-b-cf-wv[data-step="3"] .prog-b-cf-wv__selv3 { opacity: 1; }
.prog-b-cf-wv:is([data-step="0"], [data-step="1"], [data-step="2"], [data-step="3"]) :is(.prog-b-cf-wv__knot, .prog-b-cf-wv__shim) { opacity: 0; }
/* entrance selvedge-draw: the weave reveals from the left */
:root[data-m-go] [data-m=prog-b-cf-selv]:not([data-m-in]) .prog-b-cf-wv__svg { clip-path: inset(0 72% 0 0); opacity: .4; }
:root[data-m-go] [data-m=prog-b-cf-selv][data-m-in] .prog-b-cf-wv__svg { animation-name: prog-b-cf-selv; animation-duration: 840ms; animation-timing-function: var(--cf-freight); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
@keyframes prog-b-cf-selv { from { clip-path: inset(0 72% 0 0); opacity: .4; } to { clip-path: inset(0 0 0 0); opacity: 1; } }

.prog-b-cf-cl__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; margin-top: 10px; }
.prog-b-cf-scrub .mw-scrub__row { grid-template-columns: auto minmax(0, 1fr) minmax(0, 24rem); }
.prog-b-cf-scrub label.gft-mono { font-size: 13px; color: var(--cf-read); }
.prog-b-cf-scrub .mw-scrub__out { font: 800 14px var(--gft-font-mono); color: #f0d7a8; width: 100%; min-width: 0; max-width: none; text-align: start; }
/* the four-state force selector: one button per thread, in thread colour and order, aligned over its rule card */
.prog-b-cf-wsel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 16px 0 0; }
.prog-b-cf-wsel__b { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 14px; border: 1px solid #ffffff38; border-top: 4px solid var(--pc); background: #072d2bcc; color: #f6f4ef; font: 700 15px var(--gft-font-display); text-align: left; cursor: pointer; transition: background-color 320ms, color 320ms, border-color 320ms; }
.prog-b-cf-wsel__b b { font: 800 14px var(--gft-font-mono); color: color-mix(in srgb, var(--pc) 70%, #fff); }
.prog-b-cf-wsel__b:hover { border-color: var(--pc); }
.prog-b-cf-wsel__b:focus-visible { outline: 2px solid #c98a2b; outline-offset: 2px; }
.prog-b-cf-wsel__b[aria-pressed="true"] { background: var(--pc); border-color: var(--pc); color: #072d2b; }
.prog-b-cf-wsel__b[aria-pressed="true"] b { color: #072d2b; }
.prog-b-cf-wsel__ro { margin: 12px 0 0; padding: 10px 14px; border-left: 4px solid #c98a2b; background: #ffffff0d; font: 700 15px/1.45 var(--gft-font-display); color: #f6f4ef; }
.prog-b-cf-rules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 12px 0 0; padding: 0; list-style: none; }
.prog-b-cf-rule { padding: 14px 16px 16px; border: 1px solid #ffffff26; border-top: 4px solid var(--pc); background: #ffffff08; transition: background-color 360ms, border-color 360ms, box-shadow 360ms; }
.prog-b-cf-rule .gft-eyebrow { margin-bottom: 6px; color: var(--cf-read); font-size: 12.5px; }
.prog-b-cf-rule h3 { margin: 0 0 8px; font-size: 18px; line-height: 1.22; color: #f6f4ef; letter-spacing: -.02em; }
.prog-b-cf-rule .prog-b-cf-t { font-size: 15px; line-height: 1.55; color: #e3ece7; }
.prog-b-cf-rule .gft-text-link { color: #8fd0ae; }
/* woven rules read brighter; the selected force's card is lit in its thread colour */
.prog-b-cf-cl:has(.prog-b-cf-wv:is(:not([data-step]), [data-step="4"])) .prog-b-cf-rule,
.prog-b-cf-cl:has(.prog-b-cf-wv[data-step="1"]) .prog-b-cf-rule[data-f="1"],
.prog-b-cf-cl:has(.prog-b-cf-wv[data-step="2"]) .prog-b-cf-rule:is([data-f="1"], [data-f="2"]),
.prog-b-cf-cl:has(.prog-b-cf-wv[data-step="3"]) .prog-b-cf-rule:is([data-f="1"], [data-f="2"], [data-f="3"]) { background: #ffffff12; }
.prog-b-cf-wvx[data-sel="1"] .prog-b-cf-rule[data-f="1"],
.prog-b-cf-wvx[data-sel="2"] .prog-b-cf-rule[data-f="2"],
.prog-b-cf-wvx[data-sel="3"] .prog-b-cf-rule[data-f="3"],
.prog-b-cf-wvx[data-sel="4"] .prog-b-cf-rule[data-f="4"] { background: #ffffff1f; border-color: var(--pc); box-shadow: inset 0 0 0 2px var(--pc), 0 18px 40px -24px #000; }
/* the selected thread in the weave: the other three dim, the chosen one glows */
.prog-b-cf-wv__t { transition: opacity 420ms var(--cf-ease), filter 420ms var(--cf-ease); }
.prog-b-cf-wvx:is([data-sel="1"], [data-sel="2"], [data-sel="3"], [data-sel="4"]) .prog-b-cf-wv__t { opacity: .38; }
.prog-b-cf-wvx[data-sel="1"] .prog-b-cf-wv__t1, .prog-b-cf-wvx[data-sel="2"] .prog-b-cf-wv__t2,
.prog-b-cf-wvx[data-sel="3"] .prog-b-cf-wv__t3, .prog-b-cf-wvx[data-sel="4"] .prog-b-cf-wv__t4 { opacity: 1; filter: brightness(1.18) drop-shadow(0 0 4px #ffffff40); }

/* the knot ladder: its own full-width row; the selvedge runs across it and off the right edge toward the footer bridge */
.prog-b-cf-cl__side { position: relative; padding-top: 4px; }
.prog-b-cf-knots__k { color: var(--cf-read); margin-bottom: 14px; font-size: 12.5px; }
.prog-b-cf-knots { position: relative; margin: 0; padding: 22px 0 0; list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.prog-b-cf-knots::before { content: ''; position: absolute; left: 0; right: -24px; top: 0; height: 6px; border-radius: 3px; background: #6bb68f; }
.prog-b-cf-kn { position: relative; }
.prog-b-cf-kn::after { content: ''; position: absolute; left: 6px; top: -22px; width: 2px; height: 20px; background: #6bb68f; }
.prog-b-cf-kn::before { content: ''; position: absolute; left: 1px; top: -27px; width: 12px; height: 12px; border-radius: 50%; background: #f6f4ef; z-index: 1; }
.prog-b-cf-kn--i::before { border-radius: 2px; background: #c98a2b; }
.prog-b-cf-kn > a, .prog-b-cf-kn > span { display: grid; gap: 3px; min-height: 44px; align-content: start; padding: 6px 8px 8px; margin: 0 -8px; border-radius: 4px; text-decoration: none; color: #f6f4ef; transition: background-color 360ms, box-shadow 360ms; }
.prog-b-cf-kn__k { font: 12.5px var(--gft-font-mono); color: var(--cf-read); text-transform: uppercase; letter-spacing: .05em; }
.prog-b-cf-kn__t { font: 800 16px/1.25 var(--gft-font-display); }
.prog-b-cf-kn__nx { justify-self: start; margin-top: 4px; padding: 2px 8px; border-radius: 3px; background: #c98a2b; color: #072d2b; font: 800 12.5px var(--gft-font-mono); text-transform: uppercase; letter-spacing: .05em; opacity: 0; transition: opacity 320ms; }
.prog-b-cf-wvx[data-sel="1"] .prog-b-cf-kn[data-r="1"],
.prog-b-cf-wvx[data-sel="2"] .prog-b-cf-kn[data-r="2"],
.prog-b-cf-wvx[data-sel="3"] .prog-b-cf-kn[data-r="3"],
.prog-b-cf-wvx[data-sel="4"] .prog-b-cf-kn[data-r="4"] { --lit: 1; }
.prog-b-cf-kn[data-r] > a { box-shadow: inset 0 0 0 calc(var(--lit, 0) * 2px) #c98a2b; background: rgb(255 255 255 / calc(var(--lit, 0) * .08)); }
.prog-b-cf-kn[data-r] .prog-b-cf-kn__nx { opacity: var(--lit, 0); }
.prog-b-cf-kn[data-r]::before { box-shadow: 0 0 0 calc(var(--lit, 0) * 5px) #c98a2b66; }
.prog-b-cf-kn > a:hover .prog-b-cf-kn__t { text-decoration: underline 2px #c98a2b; text-underline-offset: 3px; }
.prog-b-cf-kn > a:focus-visible { outline: 2px solid #c98a2b; outline-offset: 2px; }
.prog-b-cf-kn--here .prog-b-cf-kn__t { color: #8fd0ae; }
.prog-b-cf-kn--here::before { width: 16px; height: 16px; left: -1px; top: -29px; background: #c98a2b; box-shadow: 0 0 0 4px #c98a2b44; }
:root[data-m-go] [data-m=prog-b-cf-knots-in]:not([data-m-in]) .prog-b-cf-kn { opacity: .3; translate: 0 14px; }
:root[data-m-go] [data-m=prog-b-cf-knots-in][data-m-in] .prog-b-cf-kn { animation-name: prog-b-cf-kn; animation-duration: 520ms; animation-delay: calc(var(--k, 0) * 40ms); animation-timing-function: var(--cf-ease); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
@keyframes prog-b-cf-kn { from { opacity: .3; translate: 0 14px; } }
.prog-b-cf-qual { margin-top: 18px; text-align: left; }
.prog-b-cf-qual summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font: 700 14px var(--gft-font-display); color: #e3ece7; }
.prog-b-cf-qual .gft-note { margin-top: 6px; max-width: 80ch; }

@media (max-width: 1100px) {
  .prog-b-cf-rules, .prog-b-cf-wsel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prog-b-cf-knots { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 34px; }
  .prog-b-cf-knots::before { display: none; }
  .prog-b-cf-kn::after { top: -14px; height: 12px; }
  .prog-b-cf-kn { border-top: 4px solid #6bb68f; padding-top: 12px; }
  .prog-b-cf-kn::before { top: -12px; } .prog-b-cf-kn--here::before { top: -14px; }
  .prog-b-cf-kn::after { display: none; }
}
@media (max-width: 1000px) {
  .prog-b-cf-cl { min-height: 0; }
}
@media (max-width: 640px) {
  .prog-b-cf-wv__svg { aspect-ratio: 5 / 2; }
  .prog-b-cf-wv__labels li { font-size: 12px; }
  .prog-b-cf-rules { grid-template-columns: 1fr; }
  .prog-b-cf-wsel { gap: 8px; }
  .prog-b-cf-wsel__b { font-size: 14px; padding: 6px 10px; }
  .prog-b-cf-scrub .mw-scrub__row { grid-template-columns: auto minmax(0, 1fr); }
  .prog-b-cf-scrub .mw-scrub__out { grid-column: 1 / -1; }
  /* the ladder becomes a vertical list hung on a thread at the left edge */
  .prog-b-cf-knots { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 0 0 0 30px; }
  .prog-b-cf-knots::before { display: block; left: 6px; right: auto; top: 0; bottom: 0; width: 4px; height: auto; }
  .prog-b-cf-kn { border-top: 0; padding-top: 0; }
  /* the Read next tag only takes room on the lit rung, so unlit rungs stay compact */
  .prog-b-cf-kn__nx { display: none; }
  .prog-b-cf-wvx[data-sel="1"] .prog-b-cf-kn[data-r="1"] .prog-b-cf-kn__nx,
  .prog-b-cf-wvx[data-sel="2"] .prog-b-cf-kn[data-r="2"] .prog-b-cf-kn__nx,
  .prog-b-cf-wvx[data-sel="3"] .prog-b-cf-kn[data-r="3"] .prog-b-cf-kn__nx,
  .prog-b-cf-wvx[data-sel="4"] .prog-b-cf-kn[data-r="4"] .prog-b-cf-kn__nx { display: inline-block; }
  .prog-b-cf-kn > a, .prog-b-cf-kn > span { padding-block: 4px; }
  .prog-b-cf-kn::before { left: -29px; top: 14px; } .prog-b-cf-kn--here::before { left: -31px; top: 12px; }
}

/* ===============================================================================================================
   Reduced motion and Calm: the composed states, no transitions
   =============================================================================================================== */
@media (prefers-reduced-motion: reduce) {
  .prog-b-cf-sp-wrap { animation-name: none; animation-timeline: auto; }
  body[data-page="competition"] main :is([class*="prog-b-cf-"]) { transition-duration: .01ms !important; transition-delay: 0s !important; }
}
:root[data-motion=calm] body[data-page="competition"] main :is([class*="prog-b-cf-"]) { transition-duration: .01ms !important; transition-delay: 0s !important; }