/* /timeline/ (choreography sheet control/choreo/timeline.md). The dated thread is the motif: one ThreadPlot geometry under
   nine projections. Classes, variables and keyframes are prefixed tl-. Animations use transform, opacity, clip-path and
   filter only. The HTML is the composed end state; pre-states exist only under :root[data-m-go], and each block enters
   once its top passes 72 percent of the screen (data-tl-in, set by client.ts). */

.tl-page{--tl-night:#072d2b;--tl-forest:#0e4d4a;--tl-deep:#031b1a;--tl-paper:#f6f4ef;--tl-linen:#ece5d4;--tl-ochre:#c98a2b;--tl-mono:var(--gft-font-mono);
 --tl-ink:#0e4d4a;--tl-text:#22302c;--tl-soft:#3d4f48;--tl-line:#a9bdb1;--tl-grid:#0e4d4a24;--tl-rep:#0e4d4a;--tl-prj:#2c3e7a;--tl-amb:#8a5a12;--tl-ambf:#c98a2b;--tl-bg:#f6f4ef;
 --tl-gx:max(48px,calc((100% - 1440px) / 2));position:relative;overflow-x:clip;color:var(--tl-text);font-variant-numeric:tabular-nums}
.tl-page [hidden]{display:none!important}
.tl-dark,.gft-splash,.tl-rd,.tl-turn,.tl-fu,.tl-me,.tl-cl{--tl-ink:#f6f4ef;--tl-text:#f6f4ef;--tl-soft:#c5d9ce;--tl-line:#ffffff3a;--tl-grid:#ffffff1f;--tl-rep:#7cc79f;--tl-prj:#b4c2f5;--tl-amb:#ecb866;--tl-bg:#072d2b}
.tl-sec{position:relative;isolation:isolate}
.tl-sec h2{text-wrap:balance;margin:0}
.tl-sec h2,.tl-sec h3,.tl-sec p{color:inherit}
.tl-kicker{font:600 13px/1.5 var(--tl-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tl-soft);margin:0;max-width:none}
.tl-cap{font:13px/1.6 var(--tl-mono);letter-spacing:.02em;color:var(--tl-soft);max-width:78ch;margin:0}
.tl-readout,.tl-sr{font:500 15px/1.5 var(--tl-mono);letter-spacing:.02em;color:var(--tl-text);margin:0;max-width:none}
.tl-chip{display:inline-flex;align-items:center;gap:8px;font:600 13px/1 var(--tl-mono);letter-spacing:.06em;text-transform:uppercase;padding:7px 11px;border:1.5px solid currentColor;border-radius:999px;color:var(--tl-rep);margin:0;white-space:nowrap}
.tl-chip::before{content:'';width:9px;height:9px;border-radius:50%;background:currentColor;flex:none}
.tl-chip[data-klass=projected]{color:var(--tl-prj)}.tl-chip[data-klass=projected]::before{background:transparent;border:2px solid currentColor}
.tl-chip[data-klass=ambition]{color:var(--tl-amb)}.tl-chip[data-klass=ambition]::before{background:transparent;border:2px solid currentColor;border-radius:2px}
.tl-text-button{border:1.5px solid currentColor;background:transparent;padding:10px 18px;min-height:44px;font:600 15px var(--gft-font-display);color:var(--tl-ink);cursor:pointer}
.tl-text-button:hover:not(:disabled){background:var(--tl-ink);color:var(--tl-bg)}
.tl-y2{display:none}
.tl-sec :is(button,a):focus-visible{outline:3px solid var(--tl-ochre);outline-offset:2px}

/* ---- the thread (every block) ---- */
.tl-plot{position:relative;--tl-node:16px}
.tl-plot__film{position:absolute;inset:0;container-type:size;transition:transform .9s var(--m-out)}
.tl-plot__lanes{position:absolute;inset:0;pointer-events:none}
.tl-lane{position:absolute;left:0;right:0;top:var(--y);border-top:1px dashed var(--tl-grid);transition:transform .6s var(--m-out),opacity .5s,filter .5s}
.tl-lane span{position:absolute;left:0;top:-24px;font:600 13px/1 var(--tl-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tl-rep)}
.tl-lane[data-klass=projected] span{color:var(--tl-prj)}.tl-lane[data-klass=ambition] span{color:var(--tl-amb)}
.tl-plot__years{position:absolute;left:0;right:0;top:100%;margin-top:16px;height:20px;pointer-events:none}
.tl-plot__years span,.tl-clockset__axis span{position:absolute;left:var(--x);translate:-50% 0;font:500 13px/1 var(--tl-mono);color:var(--tl-soft);white-space:nowrap}
.tl-plot__sweep{position:absolute;inset:-4% 0;overflow:clip;pointer-events:none}
.tl-plot__sweep i,.tl-clockset__scan i{position:absolute;inset:0;translate:-100% 0;opacity:.06;background:linear-gradient(90deg,transparent 92%,color-mix(in srgb,var(--tl-rep) 22%,transparent) 99.3%,var(--tl-rep) 100%)}
.tl-plot__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.tl-seg{fill:none;stroke:var(--tl-rep);stroke-width:2.6;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;transition:opacity .6s,stroke-width .6s}
.tl-seg[data-solid="0"]{stroke:var(--tl-prj);stroke-width:3;stroke-dasharray:.1 9}
.tl-ghost path{fill:none;stroke:var(--tl-rep);stroke-opacity:.22;stroke-width:1.4;vector-effect:non-scaling-stroke;stroke-dasharray:1 9;stroke-linecap:round}
.tl-plot__cut{position:absolute;top:-6%;bottom:-6%;left:var(--cut);width:0;pointer-events:none}
.tl-plot__cut b{position:absolute;inset:0 -14px 0 -14px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--tl-rep) 22%,transparent) 50%,transparent);border-left:2px solid color-mix(in srgb,var(--tl-rep) 70%,transparent)}
.tl-plot__cursor{position:absolute;top:-10px;bottom:-10px;left:0;width:100%;border-left:2px solid var(--tl-ambf);translate:var(--x) 0;transition:translate .5s var(--m-out);pointer-events:none;z-index:2}
.tl-plot__cursor::after{content:attr(data-year);position:absolute;top:-30px;left:0;translate:-50% 0;font:700 14px/1 var(--tl-mono);background:var(--tl-ambf);color:#072d2b;padding:6px 9px;white-space:nowrap}
.tl-plot__cursor i{position:absolute;inset:0 0 0 -22px;width:44px;background:linear-gradient(90deg,transparent,#c98a2b26,transparent)}
.tl-plot__mote{position:absolute;left:0;top:0;width:12px;height:12px;border-radius:50%;background:var(--tl-ambf);box-shadow:0 0 16px 5px #c98a2b99;pointer-events:none;z-index:5;opacity:0}
.tl-plot__mote[style*=transform]{opacity:1}
.tl-node{--nb:max(var(--tl-node),24px);position:absolute;left:var(--x);top:var(--y);width:var(--nb);height:var(--nb);translate:-50% -50%;border-radius:50%;border:0;background:none;padding:0;margin:0;display:block;color:inherit;cursor:pointer;transition:opacity .5s,filter .5s,transform .6s var(--m-out);z-index:4;text-decoration:none}
span.tl-node{cursor:default}
.tl-node::before{content:'';position:absolute;left:50%;top:50%;width:var(--tl-node);height:var(--tl-node);translate:-50% -50%;border-radius:50%;border:2.5px solid var(--tl-rep);background:var(--tl-rep);transition:scale .4s var(--m-out),opacity .4s,box-shadow .3s}
.tl-node[data-klass=projected]::before{border-color:var(--tl-prj);background:var(--tl-bg)}
.tl-node[data-klass=ambition]::before{border-color:var(--tl-amb);background:var(--tl-bg);border-radius:3px}
:is(a,button).tl-node:hover::before,:is(a,button).tl-node:focus-visible::before{scale:1.4}
.tl-node[aria-pressed=true]::before{scale:1.35;box-shadow:0 0 0 4px color-mix(in srgb,var(--tl-ambf) 40%,transparent)}
.tl-node[data-dim=true]{opacity:.3}
.tl-node__ring{position:absolute;inset:calc(50% - var(--tl-node)/2 - 9px);border-radius:50%;border:2px solid var(--tl-ambf);opacity:0;pointer-events:none;transition:opacity .4s}
.tl-node[aria-pressed=true] .tl-node__ring{opacity:.9}
:is(a,button).tl-node::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;translate:-50% 5px;white-space:nowrap;background:#072d2b;color:#f6f4ef;font:500 13px/1.3 var(--tl-mono);padding:8px 11px;border:1px solid #6bb68f66;opacity:0;pointer-events:none;transition:opacity .2s,translate .2s;z-index:8}
.tl-node[data-edge=r]::after{left:auto;right:-10px;translate:0 5px}.tl-node[data-edge=l]::after{left:-10px;translate:0 5px}
:is(a,button).tl-node:is(:hover,:focus-visible)::after{opacity:1;translate:-50% 0}
.tl-node[data-edge]:not([data-edge=c]):is(:hover,:focus-visible)::after{translate:0 0}

/* lives: on screen only (the kit sets data-m-on) */
:root[data-m-go] [data-m-live~=tl-scan][data-m-on]{animation-name:tl-scan;animation-duration:6s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:normal}
:root[data-m-go] [data-m-live~=tl-ticker][data-m-on]{animation-name:tl-ticker;animation-duration:70s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:normal}
@keyframes tl-scan{0%{translate:-100% 0;opacity:.06}10%,80%{opacity:1}100%{translate:0 0;opacity:.06}}
@keyframes tl-ticker{from{translate:0 0}to{translate:-50% 0}}
@keyframes tl-ring{0%,100%{scale:.9;opacity:.9}50%{scale:1.5;opacity:.15}}
@keyframes tl-fade{from{opacity:0}}
@keyframes tl-up{from{opacity:0;translate:0 28px}}
@keyframes tl-pop{from{opacity:0;scale:.6}}

/* ---- block entrances: reserved line boxes on h2, transform + opacity on inline-block spans, delayed siblings ---- */
.tl-ln{display:block;min-height:1.05em;overflow:clip;padding-bottom:.08em;margin-bottom:-.08em}
.tl-ln>span{display:inline-block}
:root[data-m-go] .tl-sec:not([data-tl-in]) .tl-hd{opacity:0}
:root[data-m-go] .tl-sec[data-tl-in] .tl-hd{animation-name:tl-fade;animation-duration:260ms;animation-timing-function:ease-out;animation-iteration-count:1;animation-direction:normal;animation-fill-mode:backwards}
:root[data-m-go] .tl-sec:not([data-tl-in]) [data-tl-split] .tl-ln>span{opacity:0}
:root[data-m-go] .tl-sec[data-tl-in] [data-tl-split=rise] .tl-ln>span{animation-name:tl-ln-rise;animation-duration:280ms;animation-delay:calc(var(--li,0) * 40ms);animation-timing-function:var(--m-out);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .tl-sec[data-tl-in] [data-tl-split=slide] .tl-ln>span{animation-name:tl-ln-slide;animation-duration:280ms;animation-delay:calc(var(--li,0) * 40ms);animation-timing-function:var(--m-out);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes tl-ln-rise{from{opacity:0;transform:translateY(32%)}}
@keyframes tl-ln-slide{from{opacity:0;transform:translateX(-24px)}}
:root[data-m-go] .tl-sec:not([data-tl-in]) :is(.tl-rd__lede,.tl-pin__lead,.tl-lens,.tl-ck__ctl,.tl-cl__lead){opacity:0}
:root[data-m-go] .tl-sec[data-tl-in] :is(.tl-rd__lede,.tl-pin__lead,.tl-lens,.tl-ck__ctl,.tl-cl__lead){animation-name:tl-fade;animation-duration:280ms;animation-delay:60ms;animation-timing-function:ease-out;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}

/* ---- 1 splash ---- */
.tl-page .gft-splash h1{font-size:clamp(56px,6vw,96px)}
.tl-page .gft-splash__lede{font-size:18px;max-width:38ch;color:#d4e3da}
:root[data-m-go] .tl-page .gft-splash h1[data-m=warp][data-m-in]{animation-name:tl-h1-turn;animation-duration:620ms;transform-origin:50% 100%}
@keyframes tl-h1-turn{from{opacity:0;transform:perspective(900px) rotateX(-72deg)}to{opacity:1;transform:perspective(900px) rotateX(0)}}
.tl-cta{min-height:48px;border-radius:999px;padding-inline:26px;font-size:15px}
.tl-page .gft-splash__structure{inset:0;color:#a6d7ba}
.tl-page .gft-splash__structure::after{left:37%;background:linear-gradient(90deg,#072d2b99,transparent 6%)}
.tl-page .gft-splash__content{pointer-events:none}
.tl-page .gft-splash__actions a,.tl-page .gft-splash__cue{pointer-events:auto}
.tl-splash-struct,.tl-splash-push{position:relative;width:100%;height:100%}
.tl-splash-push{transform-origin:60% 40%}
.tl-plot--splash{position:absolute;inset:11% calc(var(--tl-gx) + 24px) 28% 37%;--tl-node:22px;--tl-rep:#8fd4ac;--tl-prj:#b4c2f5;--tl-amb:#ecb866;--tl-bg:#072d2b}
.tl-plot--splash .tl-lane span{left:auto;right:0;color:#d6eadf}
.tl-plot--splash .tl-plot__years span{color:#d6eadf;font-size:13px}
.tl-plot--splash .tl-seg{stroke-width:3.8;filter:drop-shadow(0 0 7px #6bb68fbb)}
.tl-plot--splash .tl-seg[data-solid="0"]{filter:drop-shadow(0 0 5px #a9b9f288)}
.tl-plot--splash .tl-node{pointer-events:auto}
.tl-plot--splash .tl-node::before{box-shadow:0 0 14px 3px color-mix(in srgb,var(--tl-rep) 45%,transparent)}
.tl-plot--splash .tl-plot__cut b{background:linear-gradient(90deg,transparent,#8fd4ac33 50%,transparent);inset:0 -26px}
.tl-skey{position:absolute;left:var(--tl-gx);bottom:118px;display:flex;gap:14px;pointer-events:none}
.tl-skey span{display:grid; grid-template-columns:auto 1fr;gap:2px 8px;align-items:center;padding:8px 12px;border:1px solid #ffffff26;background:#072d2b99}
.tl-skey i{grid-row:1/3;width:10px;height:10px;border-radius:50%;background:#8fd4ac;border:2px solid #8fd4ac}
.tl-skey i[data-klass=projected]{background:transparent;border-color:#b4c2f5}
.tl-skey i[data-klass=ambition]{background:transparent;border-color:#ecb866;border-radius:2px}
.tl-skey b{font:700 13px/1.2 var(--gft-font-display);color:#f6f4ef}
.tl-skey small{font:500 12px/1.2 var(--tl-mono);color:#c5d9ce}
.tl-sread{position:absolute;left:37%;right:calc(var(--tl-gx) + 24px);bottom:118px;display:grid;gap:8px;pointer-events:none}
.tl-sread__k{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font:600 15px/1.4 var(--tl-mono);letter-spacing:.06em;text-transform:uppercase;color:#e2efe7;margin:0}
.tl-sread__t{font:800 22px/1.25 var(--gft-font-display);letter-spacing:-.02em;color:#f6f4ef;margin:0}
.tl-ticker{position:absolute;left:var(--tl-gx);right:calc(var(--tl-gx) + 24px);bottom:72px;height:32px;overflow:clip;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);border-block:1px solid #ffffff22;pointer-events:none}
.tl-ticker__track{display:flex;gap:42px;width:max-content;height:100%;align-items:center;font:500 13px/1 var(--tl-mono);letter-spacing:.06em;text-transform:uppercase;color:#d6eadf;white-space:nowrap}
.tl-ticker__track span{display:inline-flex;gap:10px}
.tl-ticker__track b{font-weight:700;color:#8fd4ac}
.tl-ticker__track span[data-klass=projected] b{color:#b4c2f5}.tl-ticker__track span[data-klass=ambition] b{color:#ecb866}
/* entrance: ticks deal in, the solid run draws knot to knot, the dotted run marches after the cut, open knots pop, the glass slides in */
:root[data-m-go] .tl-plot--splash .tl-plot__years span{animation-name:tl-up;animation-duration:420ms;animation-delay:calc(var(--i) * 28ms);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal;animation-timing-function:var(--m-out)}
:root[data-m-go] .tl-plot--splash .tl-plot__svg--solid{animation-name:tl-draw;animation-duration:560ms;animation-delay:80ms;animation-timing-function:linear;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .tl-plot--splash .tl-plot__svg--dotted{animation-name:tl-draw-cut;animation-duration:420ms;animation-delay:520ms;animation-timing-function:var(--m-out);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .tl-plot--splash .tl-node{animation-name:tl-pop;animation-duration:300ms;animation-delay:calc(80ms + var(--d) * 5.6ms);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal;animation-timing-function:var(--m-out)}
:root[data-m-go] .tl-plot--splash .tl-plot__cut{animation-name:tl-glass-in;animation-duration:700ms;animation-delay:150ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal;animation-timing-function:var(--m-out)}
@keyframes tl-draw{from{clip-path:inset(-20% 100% -20% -2%)}to{clip-path:inset(-20% -2% -20% -2%)}}
@keyframes tl-draw-cut{from{clip-path:inset(-20% 100% -20% var(--cut))}to{clip-path:inset(-20% -2% -20% var(--cut))}}
@keyframes tl-glass-in{from{opacity:0;translate:40vw 0}}
@supports (animation-timeline:view()){
 :root[data-m-go] .tl-splash-push{animation-name:tl-push;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--gft-splash;animation-range-start:exit 0%;animation-range-end:exit 100%}
 :root[data-m-go] .tl-plot--splash .tl-plot__cut b{animation-name:tl-glass-drop;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--gft-splash;animation-range-start:exit 10%;animation-range-end:exit 90%}
 @keyframes tl-push{from{transform:scale(1)}to{transform:scale(.94)}}
 @keyframes tl-glass-drop{from{transform:translateY(0)}to{transform:translateY(24vh)}}
}

/* ---- 2 reader (night) ---- */
.tl-rd{background:var(--tl-night);color:#f6f4ef;padding-block:clamp(56px,7vw,96px) clamp(72px,8vw,112px);background-image:linear-gradient(#b4d4c50a 1px,transparent 1px),linear-gradient(90deg,#b4d4c50a 1px,transparent 1px);background-size:42px 42px}
.tl-rd__head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:end;margin-bottom:36px}
.tl-rd__head h2{font-size:clamp(2.4rem,4.2vw,4.2rem);line-height:1.02;max-width:16ch}
.tl-rd__lede{font-size:18px;line-height:1.65;color:#d4e3da;max-width:52ch;margin:0}
.tl-rd__controls{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:16px 32px;align-items:center;padding-block:16px;border-block:1px solid var(--tl-line);margin-bottom:44px}
.tl-seg{display:inline-flex;flex-wrap:wrap;border:1.5px solid var(--tl-ink);padding:0;margin:0;min-width:0;max-width:100%}
.tl-seg legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.tl-seg label{display:block;margin:0}
.tl-seg input{position:absolute;opacity:0;pointer-events:none}
.tl-seg span{display:flex;align-items:center;gap:9px;padding:10px 16px;min-height:44px;font:600 15px var(--gft-font-display);color:var(--tl-ink);cursor:pointer;border-right:1px solid color-mix(in srgb,var(--tl-ink) 35%,transparent)}
.tl-seg label:last-child span{border-right:0}
.tl-seg span[data-klass]::before{content:'';width:10px;height:10px;border-radius:50%;background:var(--tl-rep);flex:none}
.tl-seg span[data-klass=projected]::before{background:transparent;border:2px solid var(--tl-prj)}
.tl-seg span[data-klass=ambition]::before{background:transparent;border:2px solid var(--tl-amb);border-radius:2px}
.tl-seg span[data-klass=all]::before{background:linear-gradient(90deg,var(--tl-rep) 50%,var(--tl-ambf) 50%)}
.tl-seg input:checked+span{background:var(--tl-ink);color:var(--tl-bg)}
.tl-seg input:checked+span[data-klass]::before{border-color:var(--tl-bg)}
.tl-seg input:focus-visible+span{outline:3px solid var(--tl-ochre);outline-offset:-3px}
.tl-scrub{display:flex;align-items:center;gap:10px;min-width:0}
.tl-scrub label{font:600 13px var(--tl-mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;margin:0 6px 0 0}
.tl-scrub input[type=range]{width:360px;max-width:100%;min-width:0;accent-color:var(--tl-ambf);margin:0;height:44px}
.tl-step{width:44px;height:44px;border:1.5px solid var(--tl-ink);background:transparent;color:var(--tl-ink);font:600 22px/1 var(--gft-font-display);flex:none;cursor:pointer}
.tl-step:hover:not(:disabled){background:var(--tl-ink);color:var(--tl-bg)}
.tl-rd .tl-readout{justify-self:end;text-align:right}
/* the idle walk swaps the status name (3 or 4 lines at this width): hold the tallest so the page never changes height */
.tl-rd .tl-readout{min-height:6em}
@media(max-width:1000px){.tl-rd .tl-readout{min-height:3em}}
.tl-rd__main{display:grid;grid-template-columns:minmax(0,64fr) minmax(0,32fr);gap:4%;align-items:start}
.tl-plot--reader{height:440px;--tl-node:16px;touch-action:pan-y;cursor:ew-resize;margin-top:30px}
.tl-plot--reader .tl-node{cursor:pointer;top:calc(var(--y0) + var(--k) * 28px)}
.tl-rd__plotwrap .tl-cap{margin-top:52px}
.tl-leader{position:absolute;left:var(--sx);top:calc(var(--sy0) + var(--sk) * 28px);right:-7%;height:0;border-top:2px dashed var(--tl-ambf);pointer-events:none;z-index:3;transition:left .5s var(--m-out),top .5s var(--m-out)}
.tl-leader::after{content:'';position:absolute;right:-5px;top:-6px;width:10px;height:10px;border-radius:50%;background:var(--tl-ambf)}
.tl-rd__card{border:1.5px solid #c98a2b88;background:#0b3a37;padding:22px 24px 26px;display:grid;gap:14px;min-height:440px}
.tl-rd__year{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.tl-rd__big{font:850 72px/.9 var(--gft-font-display);letter-spacing:-.06em;color:#f6f4ef;margin:0}
.tl-tabs{display:flex;flex-wrap:wrap;gap:8px;min-height:56px}
.tl-tab{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;padding:8px 12px;border:1px solid var(--tl-line);background:transparent;min-height:48px;color:#f6f4ef;cursor:pointer}
.tl-tab span{font:600 14px var(--gft-font-display)}.tl-tab small{font:13px var(--tl-mono);color:var(--tl-soft)}
.tl-tab[aria-pressed=true]{background:#f6f4ef;color:#072d2b;border-color:#f6f4ef}.tl-tab[aria-pressed=true] small{color:#2b4a41}
.tl-rd__recs{display:grid}
.tl-rec{grid-area:1/1;visibility:hidden;opacity:0}
/* Swap the reading layer at full contrast; the cursor, leader and mote carry the motion. */
.tl-rec[data-on]{visibility:visible;opacity:1}
.tl-rec .tl-kicker{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.tl-rec h3{font-size:clamp(1.5rem,2vw,1.9rem);line-height:1.12;margin:12px 0 10px;max-width:22ch}
.tl-rec p:not(.tl-kicker){font-size:17px;line-height:1.6;margin:0}
.tl-rec .gft-cite{margin-top:12px;color:#f6f4ef}
.tl-rec--empty{font-size:17px}
/* entrance (shed): the filter row and the plot open apart from the thread's line, the card follows */
:root[data-m-go] .tl-rd:not([data-tl-in]) :is(.tl-rd__controls,.tl-rd__plotwrap,.tl-rd__card){opacity:0}
:root[data-m-go] .tl-rd[data-tl-in] .tl-rd__controls{animation-name:tl-shed-up;animation-duration:320ms;animation-timing-function:var(--m-out);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .tl-rd[data-tl-in] .tl-rd__plotwrap{animation-name:tl-shed-down;animation-duration:320ms;animation-delay:30ms;animation-timing-function:var(--m-out);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .tl-rd[data-tl-in] .tl-rd__card{animation-name:tl-card-in;animation-duration:320ms;animation-delay:60ms;animation-timing-function:var(--m-out);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes tl-shed-up{from{opacity:0;transform:translateY(16px);clip-path:inset(100% 0 0 0)}to{opacity:1;transform:none;clip-path:inset(-20% -2% -20% -2%)}}
@keyframes tl-shed-down{from{opacity:0;transform:translateY(14px);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(-20% -10% -20% -10%)}}
@keyframes tl-card-in{from{opacity:0;transform:translateX(24px)}}

/* ---- pinned scenes (record A, future, method): a 100svh band pinned by native sticky over a track of steps ---- */
.tl-pin{background:var(--tl-pin-base)}
.tl-pin__band{position:relative;height:auto}
.tl-pin__ground{position:absolute;inset:0;background:var(--tl-pin-ground);overflow:clip;pointer-events:none}
.tl-pin__weave{position:absolute;inset:0;background-image:linear-gradient(var(--tl-grid) 1px,transparent 1px),linear-gradient(90deg,var(--tl-grid) 1px,transparent 1px);background-size:56px 56px;opacity:.6}
.tl-ghosty{position:absolute;right:4%;top:38%;display:grid;font:850 30vh/1 var(--gft-font-display);letter-spacing:-.07em;color:var(--tl-ink);pointer-events:none}
.tl-ghosty b{grid-area:1/1;opacity:0}
.tl-pin__in{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr);padding-block:28px 48px}
.tl-pin__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:24px 48px;align-items:start}
.tl-pin__title h2{font-size:44px;line-height:1.12;max-width:20ch}
.tl-pin__title .gft-eyebrow{margin-bottom:12px}
.tl-pin__lead{font-size:17px;line-height:1.55;max-width:60ch;margin:12px 0 0;color:var(--tl-soft)}
.tl-lens{display:grid;gap:10px}
.tl-lens__tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1.5px solid var(--tl-ink)}
.tl-lens__tab{min-height:44px;padding:6px 8px;border:0;border-right:1px solid color-mix(in srgb,var(--tl-ink) 35%,transparent);background:transparent;color:var(--tl-ink);font:600 14px/1.2 var(--gft-font-display);cursor:pointer}
.tl-lens__tab:last-child{border-right:0}
.tl-lens__tab[aria-pressed=true]{background:var(--tl-ink);color:var(--tl-bg)}
.tl-lens__read{display:grid;min-height:76px}
.tl-lens__read p{grid-area:1/1;margin:0;display:grid;gap:4px;opacity:0;visibility:hidden}
.tl-lens__read p[data-on]{opacity:1;visibility:visible;transition:opacity .3s}
.tl-lens__read b{font:600 15px/1.45 var(--tl-mono);color:var(--tl-text)}
.tl-lens__read span{font-size:15px;line-height:1.5;color:var(--tl-soft)}
.tl-pin__stage{position:relative;min-height:0}
.tl-counter{position:absolute;left:0;top:6px;font:600 15px/1 var(--tl-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tl-ink);margin:0;z-index:6;background:var(--tl-pin-ground);padding:6px 10px 6px 0}
.tl-pin__stage>.tl-plot{position:absolute;inset:64px 0 92px 0}
.tl-cam{position:absolute;left:0;top:-4%;bottom:-4%;width:100%;transform-origin:0 50%;transform:translateX(var(--cl,0%)) scaleX(var(--cw,.1));background:linear-gradient(180deg,color-mix(in srgb,var(--tl-ochre) 14%,transparent),color-mix(in srgb,var(--tl-ochre) 4%,transparent));border-inline:1px solid color-mix(in srgb,var(--tl-ochre) 45%,transparent);transition:transform .9s var(--m-out);pointer-events:none}
.tl-pin__track{position:relative;display:grid;grid-template-columns:100%;grid-template-rows:repeat(var(--n),auto);pointer-events:none}
.tl-pin__sp{grid-column:1;height:100svh}
.tl-pin__sp[data-long]{height:120svh}
.tl-pin__layer{grid-column:1;grid-row:1/-1;align-self:start;position:sticky;top:0;height:100svh;z-index:3}
.tl-pin__sp:nth-child(1){grid-row:1}.tl-pin__sp:nth-child(2){grid-row:2}.tl-pin__sp:nth-child(3){grid-row:3}.tl-pin__sp:nth-child(4){grid-row:4}.tl-pin__sp:nth-child(5){grid-row:5}
.tl-call{position:absolute;width:min(430px,31vw);pointer-events:auto;background:var(--tl-call-bg);color:var(--tl-call-ink);border:1.5px solid var(--tl-call-line);border-top:4px solid var(--tl-ochre);padding:18px 22px 20px;box-shadow:0 18px 40px #0000001f}
.tl-call__k{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0}
.tl-call h3{font-size:24px;line-height:1.15;margin:12px 0 8px;letter-spacing:-.03em}
.tl-call p:not(.tl-call__k){font-size:17px;line-height:1.55;margin:0}
.tl-call .gft-cite{margin-top:10px;margin-right:6px;color:inherit}
.tl-call__yr{display:grid;font:850 40px/1 var(--gft-font-display);letter-spacing:-.05em}
.tl-call__yr b{grid-area:1/1}
.tl-call__yr b:first-child{color:transparent;-webkit-text-stroke:1.5px var(--tl-call-ink)}
.tl-call__date{font:700 15px/1 var(--tl-mono);letter-spacing:.06em;text-transform:uppercase}
.tl-call__mark{width:14px;height:14px;border-radius:50%;border:2.5px solid var(--tl-prj)}
.tl-call__mark[data-klass=reported]{background:var(--tl-rep);border-color:var(--tl-rep)}
.tl-call__mark[data-klass=ambition]{border-color:var(--tl-amb);border-radius:2px}
/* anchors move every step (stage coordinates) */
.tl-pin__layer[data-anchor=rh] .tl-call{right:var(--tl-gx);top:24svh}
@media(min-width:1001px){
 .tl-ra .tl-pin__layer[data-anchor=rh] .tl-call{right:var(--tl-gx);top:24svh;width:min(400px,29vw)}
 .tl-ra .tl-pin__layer[data-anchor=ll] .tl-call{left:calc(var(--tl-gx) + 195px);top:27svh;width:min(400px,29vw)}
 .tl-ra .tl-pin__layer[data-anchor=rl] .tl-call{right:auto;left:calc(var(--tl-gx) + 235px);top:24.5svh;width:min(415px,29vw);padding:14px 20px 15px}
 .tl-ra .tl-pin__layer[data-anchor=rl] .tl-call p:not(.tl-call__k){font-size:16px;line-height:1.5}
 .tl-fu .tl-pin__layer[data-anchor=rh] .tl-call{right:var(--tl-gx);top:32svh}
}
.tl-pin__layer[data-anchor=ll] .tl-call{left:calc(var(--tl-gx) + 110px);top:26svh}
.tl-pin__layer[data-anchor=ch] .tl-call{left:calc(50% - min(215px,15.5vw));top:23svh}
.tl-pin__layer[data-anchor=rl] .tl-call{right:var(--tl-gx);top:44svh}
.tl-pin__layer[data-anchor=lh] .tl-call{left:calc(var(--tl-gx) + 110px);top:28.5svh}
.tl-pin__layer[data-anchor=cl] .tl-call{left:calc(38% - min(200px,14vw));top:34svh}
.tl-pin__layer[data-anchor=lc] .tl-call{left:31%;top:28svh}
/* one callout at a time (with script); without script every step stays readable in flow */
:root[data-motion] .tl-pin__layer:not([data-on]) .tl-call{opacity:0;visibility:hidden}
:root[data-motion] .tl-pin__layer[data-on] .tl-call{opacity:1;visibility:visible;transition:opacity .2s}
@media(min-width:1001px){
 :root[data-m-go] .tl-sec[data-tl-in] .tl-pin__layer[data-on] .tl-call{animation-duration:260ms;animation-timing-function:var(--m-out);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
 :root[data-m-go] .tl-sec[data-tl-in] .tl-pin__layer[data-on] .tl-call[data-kind=report]{animation-name:tl-k-report}
 :root[data-m-go] .tl-sec[data-tl-in] .tl-pin__layer[data-on] .tl-call[data-kind=report] .tl-call__yr b:last-child{animation-name:tl-fill;animation-duration:220ms;animation-delay:40ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
 :root[data-m-go] .tl-sec[data-tl-in] .tl-pin__layer[data-on] .tl-call[data-kind=slide]{animation-name:tl-k-slide}
 :root[data-m-go] .tl-sec[data-tl-in] .tl-pin__layer[data-on] .tl-call[data-kind=mask]{animation-name:tl-k-mask}
 :root[data-m-go] .tl-sec[data-tl-in] .tl-pin__layer[data-on] .tl-call[data-kind=stamp]{animation-name:tl-k-stamp}
 :root[data-m-go] .tl-sec[data-tl-in] .tl-pin__layer[data-on] .tl-call[data-kind=dotted]{animation-name:tl-k-dotted}
 :root[data-m-go] .tl-sec[data-tl-in] .tl-pin__layer[data-on] .tl-call[data-kind=bracket]{animation-name:tl-k-rise}
 :root[data-m-go] .tl-sec[data-tl-in] .tl-pin__layer[data-on] .tl-call[data-kind=scale]{animation-name:tl-k-scale}
 :root[data-m-go] .tl-sec[data-tl-in] .tl-pin__layer[data-on] .tl-call[data-kind=unroll]{animation-name:tl-k-drop}
 :root[data-m-go] .tl-sec[data-tl-in] .tl-pin__layer[data-on] .tl-call[data-kind=stack]{animation-name:tl-k-rise}
}
@keyframes tl-k-report{from{opacity:.35;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes tl-fill{from{opacity:0}}
@keyframes tl-k-slide{from{opacity:.35;transform:translateX(-24px)}}
@keyframes tl-k-mask{from{opacity:.35;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes tl-k-stamp{from{opacity:.35;transform:scale(1.03)}}
@keyframes tl-k-dotted{from{opacity:.4;transform:translateX(-16px)}to{opacity:1;transform:none}}
@keyframes tl-k-rise{from{opacity:.35;transform:translateY(14px)}}
@keyframes tl-k-scale{from{opacity:.35;transform:scale(.92)}}
@keyframes tl-k-drop{from{opacity:.35;transform:translateY(-14px)}}
.tl-call[data-kind=scale]{transform-origin:85% 0}
@media(min-width:1001px){
 :root[data-motion] .tl-pin__band{position:sticky;top:0;height:100svh;overflow:clip;z-index:1}
 :root[data-motion] .tl-pin__track{margin-top:-100svh}
 :root[data-motion] .tl-pin__in{height:100%}
 :root:not([data-motion]) .tl-pin__layer{position:relative;height:auto;grid-row:auto;padding:24px var(--tl-gx)}
 :root:not([data-motion]) .tl-pin__sp{display:none}
 :root:not([data-motion]) .tl-call{position:relative;inset:auto}
 :root:not([data-motion]) .tl-pin__band{height:100svh}
}

/* ---- 3 record A (paper over night): the paper opens up and down from the thread's line ---- */
.tl-ra{--tl-pin-base:var(--tl-night);--tl-pin-ground:var(--tl-paper);--tl-call-bg:#fffdf8;--tl-call-ink:#22302c;--tl-call-line:#0e4d4a33;background-image:linear-gradient(#b4d4c50a 1px,transparent 1px),linear-gradient(90deg,#b4d4c50a 1px,transparent 1px);background-size:42px 42px}
.tl-ra .tl-ghosty{color:#0e4d4a0f}
.tl-ra .tl-plot{--tl-node:20px}
.tl-ra .tl-plot__years span{font-size:15px;font-weight:600;color:var(--tl-text)}
.tl-ra .tl-node[data-ghost],.tl-ra .tl-seg[data-ghost]{opacity:.22}
.tl-ra .tl-plot__years span:nth-child(n+7){opacity:.55;font-size:13px}
.tl-ra[data-step="3"] :is(.tl-node,.tl-seg)[data-ghost]{opacity:.6}
.tl-ra .tl-plot__cut b{border-left-color:#0e4d4a55;background:none}
.tl-ra .tl-plot__mote{transform:translate(calc(var(--mx) * 1cqw),calc(var(--my) * 1cqh)) translate(-50%,-50%);opacity:1;transition:transform .9s var(--m-out)}
.tl-ra[data-step="0"]{--cl:0%;--cw:.126;--mx:12.3;--my:76}
.tl-ra[data-step="1"]{--cl:21.6%;--cw:.252;--mx:40.5;--my:80}
.tl-ra[data-step="2"]{--cl:46.8%;--cw:.126;--mx:51.4;--my:78}
.tl-ra[data-step="3"]{--cl:59.4%;--cw:.15;--mx:63.8;--my:76}
.tl-ra[data-step="0"] .tl-cam{--cl:9%}
.tl-ra[data-step="0"] .tl-plot__film{transform:translateX(1.5%)}
.tl-ra[data-step="3"] .tl-plot__film{transform:translateX(-1.5%)}
.tl-ra .tl-ghosty b[data-i="0"],.tl-ra[data-step="1"] .tl-ghosty b[data-i="1"],.tl-ra[data-step="2"] .tl-ghosty b[data-i="2"],.tl-ra[data-step="3"] .tl-ghosty b[data-i="3"]{opacity:1}
.tl-ra:not([data-step="0"]) .tl-ghosty b[data-i="0"]{opacity:0}
.tl-ra[data-step="0"] .tl-node[data-year="2020"] .tl-node__ring,.tl-ra[data-step="1"] .tl-node[data-year="2022"] .tl-node__ring,.tl-ra[data-step="2"] .tl-node[data-year="2023"] .tl-node__ring,.tl-ra[data-step="3"] .tl-node[data-year="2024"] .tl-node__ring{opacity:1}
/* lens marks: status, source and precision labels rise over every knot, stacked by order within the year */
.tl-am{position:absolute;left:var(--x);top:calc(var(--y) - 44px - var(--row) * 36px);translate:-50% 0;display:grid;justify-items:center;pointer-events:none;z-index:5}
.tl-am::after{content:'';position:absolute;left:50%;top:100%;height:calc(14px + var(--row) * 36px);border-left:1px solid var(--tl-line)}
.tl-am b{grid-area:1/1;font:600 13px/1 var(--gft-font-display);padding:6px 9px;border-radius:999px;border:1.5px solid currentColor;background:var(--tl-paper);color:var(--tl-rep);white-space:nowrap;opacity:0;transform:translateY(10px);transition:opacity .35s,transform .45s var(--m-out)}
.tl-am b[data-l=source]{font-family:var(--tl-mono);color:#2c3e7a}
.tl-am b[data-l=precision]{color:var(--tl-amb)}
.tl-ra[data-lens=status] .tl-am b[data-l=status],.tl-ra[data-lens=source] .tl-am b[data-l=source],.tl-ra[data-lens=precision] .tl-am b[data-l=precision]{opacity:1;transform:none}
.tl-ra[data-lens=empty] .tl-am::after{opacity:0}
.tl-prec{position:absolute;left:var(--x);top:calc(var(--y) + 18px);width:12.6%;height:10px;translate:-50% 0;border:2px solid var(--tl-amb);border-top:0;opacity:0;transform:scaleX(.2);transition:opacity .35s,transform .5s var(--m-out);pointer-events:none}
.tl-prec[data-w=date]{width:0;height:14px;border-width:0 0 0 2px}
.tl-ra[data-lens=precision] .tl-prec,.tl-ra[data-step="0"] .tl-prec[data-year="2020"]{opacity:1;transform:none}
.tl-hatch{position:absolute;left:var(--x);top:8%;bottom:-2%;width:12.6%;translate:-50% 0;background:repeating-linear-gradient(135deg,#0e4d4a24 0 2px,transparent 2px 10px);border-inline:1px dashed #0e4d4a55;opacity:0;clip-path:inset(0 0 100% 0);transition:opacity .4s,clip-path .7s var(--m-out);pointer-events:none}
.tl-hatch b{position:absolute;top:40%;left:50%;translate:-50% 0;font:600 15px/1 var(--tl-mono);letter-spacing:.06em;text-transform:uppercase;color:#0e4d4a;background:var(--tl-paper);padding:6px 8px;white-space:nowrap}
.tl-ra:is([data-step="1"],[data-lens=empty]) .tl-hatch{opacity:1;clip-path:inset(0)}
.tl-ra[data-step="1"] .tl-seg[data-from="1"]{stroke-width:1;opacity:.5}
.tl-tag,.tl-stamp{position:absolute;left:var(--x);top:calc(var(--y) + 30px);translate:-50% 0;font:700 13px/1.2 var(--tl-mono);letter-spacing:.05em;text-transform:uppercase;color:#7a4f0e;background:#fdf3df;border:1.5px solid #c98a2b;padding:6px 9px;white-space:nowrap;opacity:0;transform:translateY(-8px);transition:opacity .4s,transform .5s var(--m-out);pointer-events:none;z-index:6}
.tl-ra[data-step="1"] .tl-tag--s1,.tl-ra[data-step="2"] .tl-tag--s2{opacity:1;transform:none}
.tl-tag--s2{top:calc(var(--y) + 30px)}
.tl-stamp--prep{translate:-92% 0;transform:scale(1.2)}
.tl-stamp--about{translate:-10% 0;transform:scale(1.2)}
.tl-ra[data-step="3"] .tl-stamp{opacity:1;transform:none;transition:opacity .2s,transform .3s cubic-bezier(.2,1.6,.4,1)}
.tl-ra[data-step="3"] .tl-stamp--about{transition-delay:.15s}
.tl-fill{position:absolute;left:7%;top:0;width:330px;display:grid;gap:7px;padding:12px 14px;background:#fffdf8;border:1.5px solid #2c3e7a55;opacity:0;clip-path:inset(0 100% 0 0);transition:opacity .3s,clip-path .7s var(--m-out);pointer-events:none;z-index:6}
.tl-fill>span{display:grid;grid-template-columns:70px minmax(0,1fr) 62px;gap:10px;align-items:center}
.tl-fill b{font:600 13px/1 var(--gft-font-display);color:#22302c}
.tl-fill i{display:block;height:14px;background:#2c3e7a1f}
.tl-fill u{display:block;height:100%;background:#2c3e7a;clip-path:inset(0 calc(100% - var(--v) * 1%) 0 0);transition:clip-path .8s var(--m-out) calc(.25s + var(--k) * .12s)}
.tl-fill em{font:600 13px/1 var(--tl-mono);font-style:normal;color:#22302c;text-align:right}
.tl-fill small{font:13px/1.3 var(--tl-mono);color:#3d4f48}
.tl-ra[data-step="2"] .tl-fill{opacity:1;clip-path:inset(-2%)}
.tl-ra:not([data-step="2"]) .tl-fill u{clip-path:inset(0 100% 0 0)}
/* entrance (heddle): the paper opens from the thread's line, the lanes lift like heddles, then the thread draws across them */
:root[data-m-go] .tl-ra:not([data-tl-in]) .tl-pin__ground{clip-path:inset(56% 0 44% 0)}
:root[data-m-go] .tl-ra[data-tl-in] .tl-pin__ground{animation-name:tl-open-line;animation-duration:360ms;animation-timing-function:var(--m-out);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes tl-open-line{from{clip-path:inset(56% 0 44% 0)}to{clip-path:inset(0)}}
.tl-pin__end{position:absolute;left:0;bottom:0;width:1px;height:1px;pointer-events:none}
:root[data-m-go] .tl-pin:not([data-tl-in]) :is(.tl-lane,.tl-plot__svg,.tl-node,.tl-plot__years,.tl-counter,.tl-pin__track,.tl-ghosty,.tl-jump){opacity:0}
:root[data-m-go] .tl-ra[data-tl-in] .tl-lane{animation-name:tl-heddle;animation-duration:300ms;animation-delay:calc(30ms + var(--hi,0) * 30ms);animation-timing-function:var(--m-out);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
.tl-lane[data-klass=projected]{--hi:1}.tl-lane[data-klass=reported]{--hi:2}
@keyframes tl-heddle{from{opacity:0;transform:translateY(22px)}}
:root[data-m-go] .tl-ra[data-tl-in] .tl-plot__svg{animation-name:tl-draw;animation-duration:360ms;animation-delay:50ms;animation-timing-function:var(--m-out);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .tl-pin[data-tl-in] .tl-node{animation-name:tl-pop;animation-duration:280ms;animation-delay:calc(50ms + max(0, var(--d)) * 2ms);animation-timing-function:var(--m-out);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .tl-pin[data-tl-in] :is(.tl-plot__years,.tl-counter,.tl-pin__track,.tl-ghosty,.tl-jump){animation-name:tl-fade;animation-duration:280ms;animation-delay:50ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}

/* ---- 4 clocks (linen, a paper tint): the thread unplies into three strands ---- */
.tl-ck{background:var(--tl-paper);padding-block:clamp(64px,7vw,96px)}
.tl-ck__ground{position:absolute;inset:0;z-index:-1;background:var(--tl-linen)}
.tl-ck__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:24px 56px;align-items:end;margin-bottom:28px}
.tl-ck__head h2{font-size:clamp(2.4rem,3.8vw,3.6rem);line-height:1.04;max-width:17ch}
.tl-ck__ctl{display:grid;gap:12px}
.tl-ck__slider{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.tl-ck__slider label{font:600 15px/1.2 var(--gft-font-display);color:var(--tl-ink);flex:1 0 100%}
.tl-ck__slider input{width:360px;max-width:100%;height:44px;accent-color:var(--tl-ochre);margin:0}
.tl-ck__slider input::-webkit-slider-thumb{width:28px;height:28px}
.tl-ck__read{display:grid;gap:4px;margin:0}
.tl-ck__read b{font:800 26px/1.1 var(--gft-font-display);letter-spacing:-.02em;color:var(--tl-ink)}
.tl-ck__read span{font:500 15px/1.4 var(--tl-mono);color:var(--tl-text)}
.tl-ck__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,330px);gap:52px;align-items:start}
.tl-clockset{--lab:clamp(150px,15vw,220px);position:relative;display:grid;gap:12px}
.tl-clockset__axis{position:relative;height:22px;margin-left:var(--lab)}
.tl-track{display:grid;grid-template-columns:var(--lab) minmax(0,1fr);align-items:stretch;transition:opacity .4s}
.tl-track__label{display:grid;gap:6px;align-content:center;padding-right:18px}
.tl-track__label b{font:800 20px/1.1 var(--gft-font-display);letter-spacing:-.02em;color:var(--tl-ink)}
.tl-track__label span{font:13px/1.45 var(--tl-mono);color:var(--tl-soft)}
.tl-track__lane{position:relative;height:min(15svh,128px);border-block:1px solid var(--tl-line);background:linear-gradient(90deg,#0e4d4a1a 1px,transparent 1px) 10% 0/calc(86% / 14) 100% repeat-x,#ffffff70}
.tl-track__strand{position:absolute;left:0;right:0;top:50%;height:3px;translate:0 -50%;background:var(--tl-sc)}
.tl-track[data-clock=preparation]{--tl-sc:#0e4d4a}.tl-track[data-clock=observation]{--tl-sc:#3f8f6b}.tl-track[data-clock=ambition]{--tl-sc:repeating-linear-gradient(90deg,#8a5a12 0 3px,transparent 3px 9px)}
.tl-track__lane{border-left:5px solid var(--tl-ink)}.tl-track[data-clock=ambition] .tl-track__lane{border-left-color:var(--tl-amb)}
.tl-track__layer{position:absolute;inset:0;transition:translate .35s var(--m-out)}
.tl-track[data-clock=preparation] .tl-track__layer{translate:calc(var(--off,0) * -7%) 0}
.tl-track[data-clock=ambition] .tl-track__layer{translate:calc(var(--off,0) * 7%) 0}
.tl-track__lead{position:absolute;left:100%;width:52px;top:50%;border-top:2px dashed var(--tl-ochre);opacity:0;transition:opacity .4s}
.tl-clockset:is([data-hl=preparation]) .tl-track[data-clock=preparation] .tl-track__lead,.tl-clockset[data-hl=observation] .tl-track[data-clock=observation] .tl-track__lead,.tl-clockset[data-hl=all] .tl-track__lead{opacity:1}
.tl-clockset[data-hl=preparation] .tl-track:not([data-clock=preparation]) .tl-track__lane,.tl-clockset[data-hl=observation] .tl-track:not([data-clock=observation]) .tl-track__lane{opacity:.45}
.tl-mk{position:absolute;left:var(--x);top:calc(50% + var(--j,0px));translate:-50% -50%;width:26px;height:26px;padding:0;border:0;background:none;color:inherit;z-index:2;cursor:pointer}
.tl-mk__dot{position:absolute;inset:4px;border-radius:50%;background:var(--tl-rep);border:2.5px solid var(--tl-rep);transition:scale .25s var(--m-out)}
.tl-mk[data-klass=projected] .tl-mk__dot{background:var(--tl-linen);border-color:var(--tl-prj)}
.tl-mk[data-klass=ambition] .tl-mk__dot{background:var(--tl-linen);border-color:var(--tl-amb);border-radius:3px}
.tl-mk:is(:hover,:focus-visible,[aria-pressed=true]) .tl-mk__dot{scale:1.35}
.tl-mk[aria-pressed=true] .tl-mk__dot{box-shadow:0 0 0 4px #c98a2b66}
.tl-clockset__scan{position:absolute;left:var(--lab);right:0;top:28px;bottom:0;overflow:clip;pointer-events:none}
.tl-notes{display:grid;gap:14px;align-content:start;border-left:4px solid var(--tl-ochre);padding:6px 0 6px 22px}
.tl-notes__lead{margin:0}
.tl-notes__lead p{font:italic 500 19px/1.45 var(--gft-font-serif,serif);color:var(--tl-ink);margin:0}
.tl-notes__tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.tl-notes__tab{min-height:44px;padding:6px 10px;border:1.5px solid var(--tl-ink);background:transparent;color:var(--tl-ink);font:600 14px/1.2 var(--gft-font-display);text-align:left;cursor:pointer}
.tl-notes__tab[aria-pressed=true]{background:var(--tl-ink);color:#f6f4ef}
.tl-notes__body,.tl-strip__body{display:grid}
.tl-notes__body p,.tl-strip__body p{grid-area:1/1;font-size:17px;line-height:1.6;margin:0;opacity:0;visibility:hidden}
.tl-notes__body p[data-on],.tl-strip__body p[data-on]{opacity:1;visibility:visible;transition:opacity .35s}
/* entrance (ply, reversed): the linen rises from the strands outward; the single thread unplies into three strands */
:root[data-m-go] .tl-ck:not([data-tl-in]) .tl-ck__ground{clip-path:inset(62% 0 38% 0)}
:root[data-m-go] .tl-ck[data-tl-in] .tl-ck__ground{animation-name:tl-ck-open;animation-duration:360ms;animation-timing-function:var(--m-out);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes tl-ck-open{from{clip-path:inset(62% 0 38% 0)}to{clip-path:inset(0)}}
:root[data-m-go] .tl-ck:not([data-tl-in]) :is(.tl-track,.tl-clockset__axis,.tl-notes){opacity:0}
:root[data-m-go] .tl-ck[data-tl-in] .tl-track{animation-name:tl-unply;animation-duration:340ms;animation-delay:40ms;animation-timing-function:var(--m-out);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
.tl-track[data-clock=preparation]{--ply:1}.tl-track[data-clock=ambition]{--ply:-1}
@keyframes tl-unply{from{opacity:0;transform:translateY(calc(var(--ply,0) * 20px))}}
:root[data-m-go] .tl-ck[data-tl-in] .tl-track__layer{animation-name:tl-apart;animation-duration:380ms;animation-delay:60ms;animation-timing-function:ease-in-out;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .tl-ck[data-touched] .tl-track__layer{animation-name:none}
@keyframes tl-apart{from{translate:0 0}}
:root[data-m-go] .tl-ck[data-tl-in] :is(.tl-clockset__axis,.tl-notes){animation-name:tl-fade;animation-duration:300ms;animation-delay:60ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}

/* ---- 5 balance (paper): the crop knots grow to bars ---- */
.tl-bl{background:var(--tl-linen);padding-block:clamp(56px,6vw,88px)}
.tl-bl__ground{position:absolute;inset:0;z-index:-1;background:var(--tl-paper)}
.tl-bl__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:24px 56px;align-items:end;margin-bottom:28px}
.tl-bl__head h2{font-size:clamp(2.4rem,3.8vw,3.6rem);line-height:1.04;max-width:14ch}
.tl-bl__ctl{display:grid;gap:14px;justify-items:start}
.tl-bl__read{display:grid;gap:4px;min-height:132px;align-content:start}
.tl-bl__big{font:850 32px/1.05 var(--gft-font-display);letter-spacing:-.03em;color:var(--tl-ink);margin:0}
.tl-bl__p{font-size:17px;line-height:1.5;margin:0}
.tl-bl .tl-sr{margin-bottom:12px;color:var(--tl-soft)}
.tl-bal{--ch:clamp(330px,40svh,400px);display:grid;grid-template-columns:minmax(0,1.6fr) minmax(130px,.36fr) minmax(170px,.6fr);gap:28px;align-items:start;min-height:460px;padding-top:48px}
.tl-bal__seed,.tl-bal__fibre{margin:0;transition:opacity .5s}
.tl-bal__plot{position:relative;height:var(--ch);margin-left:66px;margin-bottom:46px}
.tl-bal__axis{position:absolute;inset:0;pointer-events:none}
.tl-bal__axis span{position:absolute;left:-66px;bottom:var(--y);translate:0 50%;font:500 13px/1 var(--tl-mono);color:var(--tl-soft);width:58px}
.tl-bal__axis span::after{content:'';position:absolute;left:66px;top:50%;width:calc(100% + 0px);border-top:1px dashed #0e4d4a2e}
.tl-bal__axis span{width:calc(100% + 66px)}
.tl-bal__strand{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
.tl-bal__strand path{fill:none;stroke:#3f8f6b;stroke-width:3;vector-effect:non-scaling-stroke}
.tl-bal__strand path[data-solid="0"]{stroke:#2c3e7a;stroke-dasharray:.1 9;stroke-linecap:round;stroke-width:3.4}
.tl-bal__bars{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.tl-bar{position:relative;height:100%;padding:0;border:0;background:none;color:var(--tl-text);display:block;min-width:0;cursor:pointer}
.tl-bar__col{position:absolute;left:22%;right:22%;bottom:0;height:var(--h)}
.tl-bar__body{position:absolute;inset:0;background:#0e4d4a;transition:box-shadow .3s}
.tl-bar[data-kind=proj] .tl-bar__body{background:#2c3e7a14;outline:2px dashed #2c3e7a;outline-offset:-2px;overflow:clip}
.tl-bar__hatch{position:absolute;left:0;right:0;top:-32px;bottom:0;background:repeating-linear-gradient(135deg,#2c3e7a 0 5px,transparent 5px 11px)}
:root[data-m-go] .tl-bar__hatch[data-m-on]{animation-name:tl-hatch;animation-duration:2.6s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:normal}
@keyframes tl-hatch{from{transform:translateY(0)}to{transform:translateY(15.556px)}}
.tl-bar__cap{position:absolute;left:50%;top:0;width:20px;height:20px;translate:-50% -50%;border-radius:50%;background:#3f8f6b;border:3px solid var(--tl-paper);box-shadow:0 0 0 2px #3f8f6b;z-index:3}
.tl-bar[data-kind=proj] .tl-bar__cap{background:var(--tl-paper);box-shadow:0 0 0 2.5px #2c3e7a}
.tl-bar[aria-pressed=true] .tl-bar__body,.tl-bar:hover .tl-bar__body{box-shadow:0 0 0 3px var(--tl-paper),0 0 0 6px var(--tl-ochre)}
:root[data-m-go] .tl-bar[aria-pressed=true] .tl-bar__cap{animation-name:tl-breathe;animation-duration:2.4s;animation-iteration-count:infinite;animation-direction:normal;animation-timing-function:ease-in-out}
.tl-bl:not([data-tl-in]) .tl-bar__cap{animation-name:none!important}
@keyframes tl-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
.tl-bar__val{position:absolute;bottom:calc(100% + 16px);left:50%;translate:-50% 0;font:600 13px/1.2 var(--tl-mono);text-align:center;white-space:nowrap;color:#22302c}
.tl-bar__yr{position:absolute;top:calc(100% + 12px);left:0;right:0;font:600 15px var(--tl-mono);text-align:center}
.tl-bal figcaption{font:13px/1.6 var(--tl-mono);color:var(--tl-soft);max-width:60ch}
.tl-bal__bridge{align-self:stretch;display:grid;gap:12px;justify-items:center;align-content:center;text-align:center;padding-bottom:80px;transition:opacity .5s}
.tl-bal__bridge i{display:block;width:100%;height:2px;background:repeating-linear-gradient(90deg,#8a5a12 0 6px,transparent 6px 12px)}
.tl-bal__bridge b{font:850 64px/1 var(--gft-font-display);color:#8a5a12}
.tl-bal__bridge span{font:600 13px/1.5 var(--tl-mono);letter-spacing:.04em;text-transform:uppercase;color:#22302c}
.tl-stack{position:relative;height:var(--ch);width:min(170px,100%);margin:0 auto 46px;display:flex;flex-direction:column}
.tl-stack button{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0;border:0;color:#f6f4ef;cursor:pointer}
.tl-stack__loc{height:5%;min-height:30px;background:var(--tl-ochre);color:#072d2b!important}
.tl-stack__raw{height:95%;background:#0e4d4a;gap:6px;justify-content:flex-start!important;padding-top:22px!important}
.tl-stack__raw b{font:850 44px/1 var(--gft-font-display);letter-spacing:-.05em}.tl-stack__raw span{font:600 13px var(--tl-mono);letter-spacing:.06em;text-transform:uppercase}
.tl-stack__loc b{font:800 14px var(--tl-mono)}
.tl-stack button[aria-pressed=true]{box-shadow:0 0 0 3px var(--tl-paper),0 0 0 6px var(--tl-ochre)}
.tl-stack__target{position:absolute;left:-16px;right:-16px;bottom:50%;border-top:2px dashed #8a5a12;pointer-events:none}
.tl-stack__target span{position:absolute;left:50%;top:8px;translate:-50% 0;font:700 13px/1 var(--tl-mono);background:var(--tl-ochre);color:#072d2b;padding:6px 8px;white-space:nowrap}
.tl-bal[data-hl=bridge] :is(.tl-bal__seed,.tl-bal__fibre){opacity:.45}
.tl-bal[data-hl=fibre] .tl-bal__seed,.tl-bal[data-hl=fibre] .tl-bal__bridge{opacity:.45}
.tl-bal[data-show=seed] :is(.tl-bal__fibre,.tl-bal__bridge),.tl-bal[data-show=fibre] :is(.tl-bal__seed,.tl-bal__bridge){opacity:.2}
.tl-strip{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr) auto;gap:20px 40px;align-items:center;margin-top:20px;padding-top:18px;border-top:1px solid #0e4d4a33}
.tl-strip__tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.tl-strip__src{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tl-strip__src .gft-cite{color:#0e4d4a}
/* entrance (comb): the paper falls away along the strand, bars comb down from their caps, labels last, the stack wipes up, the cut stamps */
:root[data-m-go] .tl-bl:not([data-tl-in]) .tl-bl__ground{clip-path:inset(0 0 100% 0)}
:root[data-m-go] .tl-bl[data-tl-in] .tl-bl__ground{animation-name:tl-bl-open;animation-duration:360ms;animation-timing-function:var(--m-out);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes tl-bl-open{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
:root[data-m-go] .tl-bl:not([data-tl-in]) :is(.tl-bar__body,.tl-bar__val,.tl-stack,.tl-bal__bridge,.tl-strip,.tl-bl__ctl,.tl-sr){opacity:0}
:root[data-m-go] .tl-bl[data-tl-in] .tl-bar__body{animation-name:tl-comb;animation-duration:320ms;animation-delay:calc(30ms + var(--k) * 30ms);animation-timing-function:var(--m-out);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
.tl-bar__body{--k:inherit}
@keyframes tl-comb{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
:root[data-m-go] .tl-bl[data-tl-in] .tl-bar__val{animation-name:tl-fade;animation-duration:260ms;animation-delay:calc(70ms + var(--k) * 25ms);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .tl-bl[data-tl-in] .tl-stack{animation-name:tl-wipe-up;animation-duration:320ms;animation-delay:50ms;animation-timing-function:var(--m-out);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes tl-wipe-up{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(-30% -20% -10% -20%)}}
:root[data-m-go] .tl-bl[data-tl-in] .tl-bal__bridge{animation-name:tl-stampin;animation-duration:260ms;animation-delay:80ms;animation-timing-function:var(--m-out);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes tl-stampin{from{opacity:0;transform:scale(1.08)}}
:root[data-m-go] .tl-bl[data-tl-in] :is(.tl-strip,.tl-bl__ctl,.tl-sr){animation-name:tl-fade;animation-duration:280ms;animation-delay:60ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}

/* ---- 6 interlude (night, full bleed): the cut ---- */
.tl-turn{background:var(--tl-paper);color:#f6f4ef;padding-block:clamp(64px,8vw,104px) clamp(56px,6vw,88px);min-height:100svh;display:grid;align-content:space-between;overflow-x:clip}
.tl-turn__ground{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 44% 58%,#0e4d4a 0%,#072d2b 62%)}
.tl-weave{position:absolute;inset:0;width:100%;height:100%;display:block}
.tl-turn__h{font-size:7vw;line-height:.98;letter-spacing:-.06em;max-width:14ch;transform-origin:0 50%}
.tl-turn__thread{position:relative;height:clamp(240px,36svh,340px);margin-block:12px 40px}
.tl-plot--turn{position:absolute;inset:0 3% 0 3%;--tl-node:18px}
.tl-plot--turn .tl-seg{stroke-width:3.4}
.tl-plot--turn .tl-plot__cut b{inset:4% -30px;background:linear-gradient(90deg,transparent,#ecb86630 50%,transparent);border-left:2px solid #ecb866}
.tl-turn[data-lit=solid] .tl-node:not([data-klass=reported]),.tl-turn[data-lit=solid] .tl-node[data-year="2026"],.tl-turn[data-lit=open] .tl-node[data-klass=reported]:not([data-year="2026"]){opacity:.3}
.tl-turn[data-lit=solid] .tl-node:is([data-klass=reported]):not([data-year="2026"]) .tl-node__ring,.tl-turn[data-lit=open] :is(.tl-node:not([data-klass=reported]),.tl-node[data-year="2026"]) .tl-node__ring{opacity:.9}
:root[data-m-go] .tl-turn[data-tl-in] .tl-node[data-tag=prep]::before{animation-name:tl-ring;animation-duration:2.4s;animation-iteration-count:infinite;animation-direction:normal;animation-timing-function:ease-in-out}
.tl-turn__tally{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px 56px;align-items:end}
.tl-tally{display:flex;gap:16px}
.tl-tally__b{display:grid;grid-template-columns:auto minmax(0,190px);gap:4px 16px;align-items:center;text-align:left;padding:10px 18px 10px 12px;border:1.5px solid #ffffff40;background:transparent;color:#f6f4ef;cursor:pointer}
.tl-tally__b b{font:850 120px/.9 var(--gft-font-display);letter-spacing:-.06em;color:#7cc79f}
.tl-tally__b--o b{color:transparent;-webkit-text-stroke:2.5px #b4c2f5}
.tl-tally__b span{font-size:15px;line-height:1.45;color:#e2efe7}
.tl-tally__b[aria-pressed=true]{border-color:#ecb866;background:#ffffff0d}
.tl-turn__read{display:grid;gap:14px;padding-bottom:8px}
.tl-turn .tl-readout{color:#f6f4ef}
.tl-turn__rule{font:italic 500 clamp(22px,2vw,28px)/1.35 var(--gft-font-serif,serif);color:#f6f4ef;margin:0;max-width:34ch}
/* entrance (iris): the band opens from the cut knot, the heading lines rise in place */
:root[data-m-go] .tl-turn:not([data-tl-in]) .tl-turn__ground{clip-path:circle(16% at 46% 0%)}
:root[data-m-go] .tl-turn[data-tl-in] .tl-turn__ground{animation-name:tl-iris;animation-duration:420ms;animation-timing-function:var(--m-out);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes tl-iris{from{clip-path:circle(16% at 46% 0%)}to{clip-path:circle(150% at 46% 0%)}}
:root[data-m-go] .tl-turn:not([data-tl-in]) :is(.tl-turn__thread,.tl-turn__tally){opacity:0}
:root[data-m-go] .tl-turn[data-tl-in] .tl-turn__thread{animation-name:tl-draw;animation-duration:360ms;animation-delay:40ms;animation-timing-function:var(--m-out);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .tl-turn[data-tl-in] .tl-turn__tally{animation-name:tl-up;animation-duration:320ms;animation-delay:60ms;animation-timing-function:var(--m-out);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}

/* ---- 7 future (forest over night): close-up on the dotted run ---- */
.tl-fu{--tl-pin-base:var(--tl-night);--tl-pin-ground:var(--tl-forest);--tl-call-bg:#072d2b;--tl-call-ink:#f6f4ef;--tl-call-line:#ffffff40;color:#f6f4ef}
.tl-fu .tl-ghosty{color:#ffffff0d}
.tl-fu .tl-plot{--tl-node:22px;--tl-bg:#0e4d4a}
.tl-fu .tl-lane span{font-size:15px}
.tl-fu .tl-plot__years span{font-size:15px;font-weight:600;color:#e2efe7}
.tl-fu .tl-node[data-ghost],.tl-fu .tl-seg[data-ghost]{opacity:.25}
.tl-fu .tl-plot__cut b{border-left-color:#ffffff55;background:none}
.tl-fu .tl-pin__head .tl-lens{grid-template-rows:auto auto auto}
.tl-fu .tl-plot__mote{transform:translate(calc(var(--mx) * 1cqw),calc(var(--my) * 1cqh)) translate(-50%,-50%);opacity:1;transition:transform 1s var(--m-out)}
.tl-fu[data-step="0"]{--cl:17.6%;--cw:.086;--mx:20.8;--my:48}
.tl-fu[data-step="1"]{--cl:9%;--cw:.258;--mx:30.5;--my:80}
.tl-fu[data-step="2"]{--cl:60.6%;--cw:.086;--mx:64.9;--my:20}
.tl-fu[data-step="3"]{--cl:9%;--cw:.86;--mx:90.7;--my:50}
.tl-fu[data-step="4"]{--cl:17.6%;--cw:.172;--mx:18.9;--my:48}
.tl-fu[data-step="3"] .tl-plot__film{transform:scale(.97)}
.tl-fu[data-step="0"] .tl-plot__film,.tl-fu[data-step="4"] .tl-plot__film{transform:translateX(2%)}
.tl-fu[data-step="2"] .tl-plot__film{transform:translateX(-2%)}
.tl-fu .tl-ghosty b[data-i="0"],.tl-fu[data-step="1"] .tl-ghosty b[data-i="1"],.tl-fu[data-step="2"] .tl-ghosty b[data-i="2"],.tl-fu[data-step="3"] .tl-ghosty b[data-i="3"],.tl-fu[data-step="4"] .tl-ghosty b[data-i="4"]{opacity:1}
.tl-fu:not([data-step="0"]) .tl-ghosty b[data-i="0"]{opacity:0}
/* the step's lane lights; the others dim and blur */
.tl-fu:is([data-step="0"],[data-step="3"],[data-step="4"]) .tl-node:not([data-klass=projected]):not([data-ghost]),.tl-fu[data-step="1"] .tl-node:not([data-klass=reported]),.tl-fu[data-step="2"] .tl-node:not([data-klass=ambition]){opacity:.35;filter:blur(1.5px)}
.tl-fu:is([data-step="0"],[data-step="3"],[data-step="4"]) .tl-lane:not([data-klass=projected]),.tl-fu[data-step="1"] .tl-lane:not([data-klass=reported]),.tl-fu[data-step="2"] .tl-lane:not([data-klass=ambition]){opacity:.55}
.tl-fu[data-step="1"] .tl-node[data-tag=prep],.tl-fu[data-step="0"] .tl-node[data-idx="7"]{opacity:1;filter:none}
.tl-fu[data-lens=announce] .tl-node[data-tag=announce] .tl-node__ring,.tl-fu[data-lens=projection] .tl-node:is([data-tag=projection],[data-tag=horizon]) .tl-node__ring,.tl-fu[data-lens=target] .tl-node[data-tag=target] .tl-node__ring,.tl-fu[data-lens=refresh] .tl-node[data-tag=refresh] .tl-node__ring{opacity:1}
.tl-fu[data-lens=announce] .tl-node:not([data-tag=announce])::before,.tl-fu[data-lens=projection] .tl-node:not([data-tag=projection]):not([data-tag=horizon])::before,.tl-fu[data-lens=target] .tl-node:not([data-tag=target])::before,.tl-fu[data-lens=refresh] .tl-node:not([data-tag=refresh])::before{opacity:.55}
.tl-fu[data-step="2"] :is(.tl-lane[data-klass=ambition],.tl-node[data-klass=ambition]){transform:translateY(-12px)}
.tl-fu[data-step="2"] .tl-node[data-tag=target]::before{scale:1.4}
.tl-fu[data-step="3"] .tl-node[data-tag=horizon]::before{scale:1.35;box-shadow:0 0 0 6px #b4c2f540}
.tl-fmarks{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:3}
.tl-fl{fill:none;stroke:#ecb866;stroke-width:2.4;stroke-dasharray:2 7;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .5s}
.tl-fu[data-step="0"] .tl-fl{opacity:1}
.tl-fu[data-step="0"] .tl-fl--2{transition-delay:.2s}
.tl-arc{fill:none;stroke:#ecb866;stroke-width:2.4;stroke-dasharray:8 6;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .6s}
.tl-fu[data-step="1"] .tl-arc{opacity:1}
.tl-tag--keep{color:#072d2b;background:#ecb866;border-color:#ecb866;top:calc(var(--y) + 30px);translate:-20% 0}
.tl-fu[data-step="1"] .tl-tag--keep{opacity:1;transform:none}
.tl-post{position:absolute;left:var(--x);top:var(--y);bottom:-14px;width:0;border-left:2.5px solid #ecb866;transform-origin:50% 100%;transform:scaleY(0);transition:transform .7s var(--m-out);pointer-events:none}
.tl-post b{position:absolute;left:12px;top:24px;font:700 13px/1 var(--tl-mono);letter-spacing:.06em;text-transform:uppercase;color:#ecb866;white-space:nowrap}
.tl-fu[data-step="2"] .tl-post{transform:translateY(-12px) scaleY(1)}
.tl-gapbr{position:absolute;left:var(--x1);width:calc(var(--x2) - var(--x1));top:calc(100% + 48px);height:14px;border:2px solid #ecb866;border-top:0;clip-path:inset(0 100% -40px 0);transition:clip-path 1s var(--m-out);pointer-events:none}
.tl-gapbr b{position:absolute;left:50%;top:18px;translate:-50% 0;font:600 15px/1.2 var(--tl-mono);color:#f6f4ef;white-space:nowrap}
.tl-fu[data-step="3"] .tl-gapbr{clip-path:inset(-40px -40px -40px -40px)}
.tl-calcur{position:absolute;left:var(--x1);top:-6%;bottom:-6%;width:0;border-left:2px solid #ecb866;opacity:0;transition:opacity .3s,transform 1.6s var(--m-out);pointer-events:none}
.tl-fu[data-step="4"] .tl-calcur{opacity:1;transform:translateX(calc((var(--x2) - var(--x1)) / 1% * 1cqw))}
.tl-reqs{position:absolute;left:var(--x);top:var(--y);display:grid;gap:6px;translate:-104% calc(-100% - 22px);pointer-events:none;z-index:6}
.tl-reqs b{font:600 14px/1 var(--gft-font-display);padding:8px 11px;background:#072d2b;color:#f6f4ef;border:1.5px solid #b4c2f5;white-space:nowrap;opacity:0;transform:translateX(-24px);transition:opacity .35s,transform .5s var(--m-out)}
.tl-fu[data-step="4"] .tl-reqs b{opacity:1;transform:none;transition-delay:calc(.3s + var(--k) * .12s)}
.tl-jump{position:absolute;right:0;top:0;display:flex;gap:6px;z-index:6;pointer-events:auto}
.tl-jump button{display:flex;align-items:center;gap:8px;min-height:44px;min-width:44px;padding:4px 10px;border:1.5px solid #ffffff55;background:#0e4d4a;color:#f6f4ef;font:600 13px/1 var(--tl-mono);cursor:pointer}
.tl-jump button b{font-size:15px}
.tl-jump button[aria-pressed=true]{background:#f6f4ef;color:#072d2b;border-color:#f6f4ef}
.tl-sec[data-scan=a] .tl-plot__sweep i{animation-name:tl-scan-a;animation-duration:900ms;animation-timing-function:linear;animation-iteration-count:1;animation-direction:normal}
.tl-sec[data-scan=b] .tl-plot__sweep i{animation-name:tl-scan-b;animation-duration:900ms;animation-timing-function:linear;animation-iteration-count:1;animation-direction:normal}
@keyframes tl-scan-a{0%{translate:-100% 0;opacity:.06}15%,80%{opacity:1}100%{translate:0 0;opacity:.06}}
@keyframes tl-scan-b{0%{translate:-100% 0;opacity:.06}15%,80%{opacity:1}100%{translate:0 0;opacity:.06}}
/* entrance (curtain): the forest rises from the thread's line, the stage curtains down */
:root[data-m-go] .tl-fu:not([data-tl-in]) .tl-pin__ground{clip-path:inset(60% 0 40% 0)}
:root[data-m-go] .tl-fu[data-tl-in] .tl-pin__ground{animation-name:tl-fu-open;animation-duration:360ms;animation-timing-function:var(--m-out);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes tl-fu-open{from{clip-path:inset(60% 0 40% 0)}to{clip-path:inset(0)}}
:root[data-m-go] .tl-fu[data-tl-in] .tl-plot__film{animation-name:tl-curtain;animation-duration:360ms;animation-delay:40ms;animation-timing-function:var(--m-out);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes tl-curtain{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(-30% -10% -40% -10%)}}
:root[data-m-go] .tl-fu[data-tl-in] :is(.tl-lane,.tl-plot__svg){animation-name:tl-fade;animation-duration:280ms;animation-delay:50ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}

/* ---- 8 method (deep night over forest): under the lens ---- */
.tl-me{--tl-pin-base:var(--tl-forest);--tl-pin-ground:var(--tl-deep);--tl-call-bg:#0b2a28;--tl-call-ink:#f6f4ef;--tl-call-line:#ffffff40;color:#f6f4ef}
.tl-me__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:20px 56px;align-items:end}
.tl-me__head h2{font-size:44px;line-height:1.12}
.tl-me .tl-pin__in{grid-template-rows:auto auto minmax(0,1fr) auto;gap:18px}
.tl-me__rail{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.tl-me__rail li{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;align-items:center}
.tl-me__rail b{font:700 15px/1 var(--tl-mono);color:#c5d9ce}.tl-me__rail span{font:600 15px/1 var(--gft-font-display)}
.tl-me__rail i{grid-column:1/-1;height:5px;background:#ffffff1f;position:relative;overflow:clip}
.tl-me__rail i::after{content:'';position:absolute;inset:0;background:var(--tl-ochre);transform-origin:0 50%;transform:scaleX(0);transition:transform .6s var(--m-out)}
.tl-me[data-step="0"] .tl-me__rail li:nth-child(-n+1) i::after,.tl-me[data-step="1"] .tl-me__rail li:nth-child(-n+2) i::after,.tl-me[data-step="2"] .tl-me__rail li i::after{transform:none}
.tl-me__grid{display:grid;grid-template-columns:40fr 60fr;gap:4%;min-height:0;align-items:start}
.tl-loupe{position:relative;aspect-ratio:1;height:min(100%,50svh);max-width:100%;justify-self:center}
.tl-loupe__lens{position:absolute;inset:0;border-radius:50%;overflow:clip;background:radial-gradient(circle,#0e4d4a 0%,#072d2b 72%);clip-path:circle(50%)}
.tl-plot--loupe{position:absolute;inset:14% 0 24% 0;--tl-node:30px;--tl-bg:#0b3a37}
.tl-plot--loupe .tl-lane span{display:none}
.tl-plot--loupe .tl-plot__years{display:none}
.tl-plot--loupe .tl-seg{stroke-width:4}
.tl-plot--loupe .tl-seg[data-solid="0"]{stroke-width:5;stroke-dasharray:.1 14}
.tl-plot--loupe .tl-node[data-ghost]{opacity:.3}
.tl-plot--loupe .tl-node[data-tag=projection]:not([data-year="2033"]) .tl-node__ring{opacity:1}
.tl-loupe__ring{position:absolute;inset:-10px;border-radius:50%;border:5px solid var(--tl-lr,#7cc79f);transition:border-color .5s}
.tl-me[data-step="1"]{--tl-lr:#b4c2f5}.tl-me[data-step="2"]{--tl-lr:#ecb866}
.tl-me[data-focus=a] .tl-loupe__lens{animation-name:tl-refocus-a;animation-duration:700ms;animation-timing-function:ease-in-out;animation-iteration-count:1;animation-direction:normal}
.tl-me[data-focus=b] .tl-loupe__lens{animation-name:tl-refocus-b;animation-duration:700ms;animation-timing-function:ease-in-out;animation-iteration-count:1;animation-direction:normal}
@keyframes tl-refocus-a{50%{filter:blur(2px) brightness(1.25)}}
@keyframes tl-refocus-b{50%{filter:blur(2px) brightness(1.25)}}
.tl-me[data-step="2"] .tl-plot--loupe .tl-plot__cut b{border-left:3px solid #ecb866;background:linear-gradient(90deg,transparent,#ecb86633 50%,transparent)}
.tl-plot--loupe .tl-plot__cut b{border-left-color:transparent;background:none;transition:background .5s}
.tl-loupe__lab{position:absolute;left:50%;bottom:9%;translate:-50% 0;display:grid;gap:4px;text-align:center;margin:0;width:80%}
.tl-loupe__lab b{font:700 15px/1.2 var(--tl-mono);letter-spacing:.04em}
.tl-loupe__lab span{font-size:13px;color:#c5d9ce}
.tl-me__scene{position:relative;display:grid;align-content:start;gap:18px;min-height:0}
.tl-me__title{display:grid;margin:0}
.tl-me__title span{grid-area:1/1;font:800 28px/1.15 var(--gft-font-display);letter-spacing:-.025em;opacity:0;visibility:hidden;transform:translateY(8px)}
.tl-me[data-step="0"] .tl-me__title span[data-i="0"],.tl-me[data-step="1"] .tl-me__title span[data-i="1"],.tl-me[data-step="2"] .tl-me__title span[data-i="2"]{opacity:1;visibility:visible;transform:none;transition:opacity .24s ease-out,transform .26s var(--m-out)}
.tl-sc{grid-area:2/1;opacity:0;visibility:hidden}
.tl-me[data-step="0"] .tl-sc--0,.tl-me[data-step="1"] .tl-sc--1,.tl-me[data-step="2"] .tl-sc--2{opacity:1;visibility:visible;transition:opacity .24s ease-out}
.tl-ruler{position:relative;height:210px}
.tl-ruler__line{position:absolute;left:0;right:0;top:96px;height:3px;background:#f6f4ef}
.tl-ruler__bracket{position:absolute;left:4%;width:32%;top:54px;height:42px;border:3px solid #b4c2f5;border-bottom:0;transform-origin:0 50%;transform:scaleX(0);transition:transform .9s var(--m-out) .2s}
.tl-me[data-step="0"] .tl-ruler__bracket{transform:none}
.tl-ruler__bracket b{position:absolute;bottom:calc(100% + 8px);left:0;font:700 17px var(--gft-font-display);color:#b4c2f5;white-space:nowrap}
.tl-ruler__flag{position:absolute;top:96px;width:0;height:56px;border-left:3px solid #ecb866;transform-origin:50% 0;transform:scaleY(0);transition:transform .6s var(--m-out) .5s}
.tl-me[data-step="0"] .tl-ruler__flag{transform:none}
.tl-ruler__flag--pub{left:50%;border-left-style:dashed}
.tl-ruler__flag--prep{left:72%;height:100px;border-left-color:#7cc79f;transition-delay:.75s}
.tl-ruler__flag b,.tl-ruler__flag small{position:absolute;left:12px;white-space:nowrap;display:block}
.tl-ruler__flag b{top:18px;font:700 17px var(--gft-font-display)}
.tl-ruler__flag small{top:42px;font:15px var(--tl-mono);color:#c5d9ce}
.tl-ruler__flag--prep b{top:62px}.tl-ruler__flag--prep small{top:84px}
.tl-ruler__flag--pub :is(b,small){left:auto;right:12px;text-align:right}
.tl-sorter{position:relative;display:grid;gap:8px}
.tl-sorter__row{height:48px;border:1px solid #ffffff40;display:flex;align-items:center;padding-inline:16px;font:600 17px var(--gft-font-display);transition:background .5s,opacity .5s}
.tl-sorter__row[data-row="0"]{border-left:5px solid #7cc79f}.tl-sorter__row:is([data-row="1"],[data-row="2"]){border-left:5px solid #b4c2f5}.tl-sorter__row[data-row="3"]{border-left:5px solid #ecb866}
.tl-sorter__card{position:absolute;left:40%;right:0;top:56px;height:48px;background:#f6f4ef;color:#072d2b;padding:6px 14px;display:flex;flex-direction:column;justify-content:center;transform:translateY(-120px);opacity:0;transition:transform .9s var(--m-out) .15s,opacity .5s .15s;z-index:2}
.tl-sorter__card small{font:600 13px/1 var(--tl-mono);letter-spacing:.06em;text-transform:uppercase;color:#2b4a41}.tl-sorter__card b{font:700 15px/1.25 var(--gft-font-display)}
.tl-me[data-step="1"] .tl-sorter__card{transform:none;opacity:1}
.tl-me[data-step="1"] .tl-sorter__row:not([data-row="1"]){opacity:.4}
.tl-me[data-step="1"] .tl-sorter__row[data-row="1"]{background:#b4c2f51f}
.tl-gap{position:relative;height:96px}
.tl-gap__solid{position:absolute;left:0;top:46px;width:32%;height:3px;background:#7cc79f}
.tl-gap__cut{position:absolute;left:38%;top:26px;height:44px;border-left:3px solid #ecb866}
.tl-gap__cut::before{content:'No observation';position:absolute;top:-28px;left:-60px;font:600 13px var(--tl-mono);letter-spacing:.06em;text-transform:uppercase;color:#ecb866;white-space:nowrap}
.tl-gap__cut::after{content:'';position:absolute;left:12px;top:19px;width:180px;height:6px;background:radial-gradient(circle,#b4c2f5 2px,transparent 2.6px) 0 50%/16px 6px repeat-x}
.tl-gap__q{position:absolute;right:6%;top:20px;width:56px;height:56px;border:2.5px dashed #b4c2f5;border-radius:50%;display:grid;place-items:center;font:700 26px var(--tl-mono);color:#b4c2f5}
:root[data-m-go] .tl-me[data-step="2"] .tl-gap__q{animation-name:tl-pulse-q;animation-duration:1.6s;animation-iteration-count:infinite;animation-direction:normal;animation-timing-function:ease-in-out}
@keyframes tl-pulse-q{50%{transform:scale(1.12)}}
.tl-ev{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tl-ev li{border:1px solid #ffffff40;padding:12px 14px;font:600 16px var(--gft-font-display);display:flex;gap:10px;align-items:center;opacity:.35;transition:opacity .5s,background .5s}
.tl-ev li::before{content:'?';font:700 14px var(--tl-mono);color:#ecb866;border:1.5px dashed #ecb866;width:24px;height:24px;display:grid;place-items:center;flex:none}
.tl-me[data-step="2"] .tl-ev li{opacity:1;background:#ecb8661a;transition-delay:calc(.25s + var(--k) * .22s)}
.tl-me__foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.tl-me__buttons{display:grid;grid-template-columns:repeat(3,minmax(110px,1fr));border:1.5px solid #f6f4ef;pointer-events:auto}
.tl-me__buttons button{min-height:44px;border:0;border-right:1px solid #ffffff55;background:transparent;color:#f6f4ef;font:600 15px var(--gft-font-display);cursor:pointer}
.tl-me__buttons button:last-child{border-right:0}
.tl-me__buttons button[aria-pressed=true]{background:#f6f4ef;color:#072d2b}
.tl-pin__layer[data-anchor=me] .tl-call{left:calc(var(--tl-gx) + 46%);right:var(--tl-gx);width:auto;top:61svh;padding:14px 20px}
.tl-call--me h3{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0}
.tl-call--me p:not(.tl-call__k){margin-top:8px}
/* entrance (reed): slats strike the stage into place left to right; deep night opens as a circle from the loupe's knot */
.tl-reedset{position:absolute;inset:0;display:grid;grid-template-columns:repeat(10,1fr);pointer-events:none}
.tl-reedset i{background:var(--tl-forest);transform-origin:50% 0;transform:scaleY(0)}
:root[data-m-go] .tl-me:not([data-tl-in]) .tl-reedset i{transform:none}
:root[data-m-go] .tl-me[data-tl-in] .tl-reedset i{animation-name:tl-reed;animation-duration:220ms;animation-delay:calc(var(--k) * 15ms);animation-timing-function:var(--m-out);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes tl-reed{from{transform:scaleY(1)}to{transform:scaleY(0)}}
:root[data-m-go] .tl-me:not([data-tl-in]) :is(.tl-loupe,.tl-me__rail,.tl-me__scene,.tl-me__foot){opacity:0}
:root[data-m-go] .tl-me[data-tl-in] .tl-loupe{animation-name:tl-zoom-in;animation-duration:300ms;animation-delay:50ms;animation-timing-function:var(--m-out);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes tl-zoom-in{from{opacity:0;transform:scale(.92)}}
:root[data-m-go] .tl-me[data-tl-in] :is(.tl-me__rail,.tl-me__scene,.tl-me__foot){animation-name:tl-fade;animation-duration:280ms;animation-delay:60ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}

/* ---- 9 closing (night over deep): the splice ---- */
.tl-cl{background:var(--tl-deep);color:#f6f4ef;min-height:100svh;padding-block:clamp(48px,6svh,72px) 0;display:flex;flex-direction:column}
.tl-cl__ground{position:absolute;inset:0;z-index:-1;background:var(--tl-night);background-image:linear-gradient(#b4d4c50d 1px,transparent 1px),linear-gradient(90deg,#b4d4c50d 1px,transparent 1px);background-size:42px 42px}
.tl-cl__in{flex:1;display:grid;grid-template-rows:auto 1fr auto;gap:22px;padding-bottom:28px}
.tl-cl__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:20px 56px;align-items:end}
.tl-cl__head h2{font-size:44px;line-height:1.05;max-width:20ch}
.tl-cl__lead{font-size:18px;line-height:1.55;color:#d4e3da;margin:0}
.tl-board{position:relative;display:grid;grid-template-columns:minmax(0,64fr) minmax(0,33fr);gap:3%;align-items:start}
.tl-board__l{position:relative;display:grid;gap:18px}
.tl-board__plot{position:relative;height:clamp(220px,30svh,290px);margin-top:28px;margin-bottom:56px}
.tl-plot--close{position:absolute;inset:0;--tl-node:16px}
.tl-plot--close .tl-node{top:calc(var(--y0) + var(--k) * 24px)}
.tl-ply{position:absolute;left:10%;right:4%;top:calc(100% + 40px);display:grid;gap:3px;pointer-events:none}
.tl-ply i{height:3px;background:#3f8f6b}
.tl-ply i[data-c=preparation]{background:#7cc79f}.tl-ply i[data-c=ambition]{background:repeating-linear-gradient(90deg,#ecb866 0 3px,transparent 3px 8px)}
.tl-gapbr--close{top:-26px;height:10px;border-width:0 2px 2px;border-style:solid;border-color:#ecb86699;transform:scaleY(-1);clip-path:none}
.tl-gapbr--close b{display:none}
.tl-reqs--mini{translate:-50% calc(-100% - 18px);grid-auto-flow:column;gap:4px}
.tl-reqs--mini b{width:12px;height:12px;padding:0;opacity:1;transform:none;border-radius:2px;background:#b4c2f5}
.tl-scrub--close input[type=range]{width:auto;flex:1}
.tl-scrub--close output{font:800 26px/1 var(--gft-font-display);min-width:3.2ch;text-align:right}
.tl-eyes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;position:relative;z-index:2}
.tl-eye{width:100%;display:grid;justify-items:center;gap:8px;padding:6px 2px;border:0;background:transparent;color:#f6f4ef;cursor:pointer;min-height:44px}
.tl-eye i{width:30px;height:30px;border-radius:50%;border:2.5px solid #c5d9ce;background:#072d2b;display:grid;place-items:center;transition:border-color .3s,scale .3s}
.tl-eye i::after{content:'';width:10px;height:10px;border-radius:50%;background:transparent;transition:background .3s}
.tl-eye span{font:600 15px/1.2 var(--gft-font-display);text-align:center}
.tl-eye[aria-pressed=true] i{border-color:#ecb866;scale:1.2}.tl-eye[aria-pressed=true] i::after{background:#ecb866}
:root[data-m-go] .tl-cl[data-tl-in] .tl-eye[aria-pressed=true] i{animation-name:tl-ring;animation-duration:2.6s;animation-iteration-count:infinite;animation-direction:normal;animation-timing-function:ease-in-out}
.tl-splice{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.tl-splice path{fill:none;stroke:#ecb866;stroke-width:3;stroke-dasharray:3 6;stroke-linecap:round;filter:drop-shadow(0 0 4px #c98a2b88)}
.tl-board__r{display:grid;gap:16px;align-content:start;border:1.5px solid #c98a2b99;background:#0b3a37;padding:22px 24px}
.tl-cl__read{font:700 22px/1.35 var(--gft-font-display);letter-spacing:-.01em;margin:0;min-height:3.9em}
.tl-rules{display:grid;border:1.5px solid #f6f4ef}
.tl-rule{display:flex;justify-content:space-between;gap:12px;align-items:center;text-align:left;padding:8px 12px;min-height:44px;border:0;border-bottom:1px solid #ffffff55;background:transparent;color:#f6f4ef;cursor:pointer}
.tl-rule:last-child{border-bottom:0}
.tl-rule small{font:14px/1.3 var(--gft-font-display);color:#d4e3da}.tl-rule b{font:700 15px/1.25 var(--gft-font-display)}
.tl-rule[aria-pressed=true]{background:#f6f4ef;color:#072d2b}.tl-rule[aria-pressed=true] small{color:#2b4a41}
.tl-dcards{display:grid}
.tl-dcard{grid-area:1/1;display:grid;gap:10px;align-content:start;visibility:hidden;opacity:0}
.tl-dcard[data-on]{visibility:visible;opacity:1;transition:opacity .35s}
.tl-dcard__blurb{font-size:17px;line-height:1.5;margin:0}
.tl-dcard__cta{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:10px 20px;background:#ecb866;color:#072d2b;font:800 17px/1 var(--gft-font-display);text-decoration:none}
.tl-dcard__cta:hover{background:#f6f4ef}
.tl-dcard ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.tl-dcard li{font-size:15px;line-height:1.4}
.tl-dcard li a{color:#f6f4ef;text-underline-offset:3px}
.tl-dcard small{font-size:13px;color:#c5d9ce}
.tl-cl__caveat{font:15px/1.6 var(--gft-font-display);color:#c5d9ce;max-width:110ch;margin:0}
.tl-cl__tail{position:absolute;left:var(--tail-x,30%);top:var(--tail-top,calc(100% - 60px));bottom:0;width:0;border-left:3px dashed #ecb866;pointer-events:none}
.tl-cl__tail b{position:absolute;left:-6px;top:0;width:9px;height:9px;border-radius:50%;background:#ecb866;box-shadow:0 0 12px 4px #c98a2b88;opacity:0}
:root[data-m-go] .tl-cl[data-tl-in] .tl-cl__tail b{animation-name:tl-tail;animation-duration:2.4s;animation-timing-function:ease-in;animation-iteration-count:infinite;animation-direction:normal}
@keyframes tl-tail{0%{opacity:0;transform:translateY(0)}15%{opacity:1}100%{opacity:0;transform:translateY(var(--tail-h,80px))}}
:root:not([data-motion]) .tl-dcard{visibility:visible;opacity:1;grid-area:auto}
/* entrance (thread): the ochre thread passes through the six eyes left to right, then the scrubber and the card follow */
:root[data-m-go] .tl-cl:not([data-tl-in]) .tl-cl__ground{opacity:0;transform:scale(.92)}
:root[data-m-go] .tl-cl[data-tl-in] .tl-cl__ground{animation-name:tl-cl-zoom;animation-duration:360ms;animation-timing-function:var(--m-out);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes tl-cl-zoom{from{opacity:0;transform:scale(.92)}}
:root[data-m-go] .tl-cl:not([data-tl-in]) :is(.tl-eye,.tl-board__r,.tl-scrub--close,.tl-splice,.tl-board__plot){opacity:0}
:root[data-m-go] .tl-cl[data-tl-in] .tl-board__plot{animation-name:tl-zoom-out;animation-duration:300ms;animation-delay:40ms;animation-timing-function:var(--m-out);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes tl-zoom-out{from{opacity:0;transform:translateY(12px) scale(.97)}}
:root[data-m-go] .tl-cl[data-tl-in] .tl-eye{animation-name:tl-pop;animation-duration:260ms;animation-delay:calc(40ms + var(--i) * 25ms);animation-timing-function:var(--m-out);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
.tl-eyes li{--i:inherit}.tl-eye{--i:inherit}
:root[data-m-go] .tl-cl[data-tl-in] .tl-splice{animation-name:tl-draw;animation-duration:320ms;animation-delay:50ms;animation-timing-function:linear;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .tl-cl[data-tl-in] :is(.tl-board__r,.tl-scrub--close){animation-name:tl-up;animation-duration:300ms;animation-delay:70ms;animation-timing-function:var(--m-out);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}

/* ---- tablet and phone ---- */
@media(max-width:1200px){.tl-pin__head{grid-template-columns:minmax(0,1fr) minmax(0,440px)}.tl-pin__title h2{font-size:38px}}
@media(max-width:1000px){
 .tl-page{--tl-gx:20px}
 .tl-rd__head,.tl-ck__head,.tl-bl__head,.tl-me__head,.tl-cl__head,.tl-pin__head,.tl-turn__tally{grid-template-columns:1fr}
 .tl-rd__controls{grid-template-columns:1fr}
 .tl-rd .tl-readout{justify-self:start;text-align:left}
 .tl-rd__main,.tl-ck__body,.tl-board,.tl-strip{grid-template-columns:1fr}
 .tl-seg{display:grid;grid-template-columns:1fr 1fr;width:100%}
 .tl-seg span{border-right:0;border-bottom:1px solid color-mix(in srgb,var(--tl-ink) 35%,transparent)}
 .tl-scrub input[type=range]{flex:1;width:auto}
 .tl-y4{display:none}.tl-y2{display:inline}
 .tl-page .gft-splash h1{font-size:44px}
 .tl-page .gft-splash__structure{inset:auto 0 70px 0;height:400px}
 .tl-page .gft-splash__structure::after{background:none}
 .tl-plot--splash{inset:12px 20px 150px 20px;height:240px;bottom:auto}
 .tl-plot--splash .tl-lane span{display:none}
 .tl-sread{left:20px;right:20px;bottom:0}
 .tl-skey,.tl-ticker{display:none}
 .tl-plot--reader{height:380px}
 .tl-plot--reader .tl-node,.tl-plot--close .tl-node{left:var(--xc);top:calc(var(--y0) + var(--po))}
 .tl-leader{display:none}
 .tl-rd__card{min-height:0;border-width:4px 0 0;border-color:var(--tl-ochre)}
 .tl-rd__plotwrap .tl-cap{margin-top:44px}
 /* pinned scenes: an opaque band pinned at the top, callouts scroll beneath as cards */
 .tl-pin__band{position:sticky;top:0;z-index:4;height:38svh;min-height:280px;overflow:clip}
 .tl-me .tl-pin__band{height:40svh}
 .tl-pin__ground{background:var(--tl-pin-ground)}
 .tl-pin__in{height:100%;padding-block:10px 30px}
 .tl-pin__head{position:relative;display:block}
 .tl-pin__title{display:none}
 .tl-lens{position:absolute;left:0;right:0;top:0}
 .tl-lens__tabs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;border:0;gap:6px}
 .tl-lens__tab{flex:none;scroll-snap-align:start;border:1.5px solid var(--tl-ink)}
 .tl-lens__read{display:none}
 .tl-pin__stage>.tl-plot{inset:68px 4px 40px 4px}
 .tl-counter{top:48px}
 .tl-ghosty{font-size:18svh}
 .tl-am,.tl-tag,.tl-stamp,.tl-fill,.tl-gapbr,.tl-post b,.tl-reqs,.tl-jump,.tl-tag--keep{display:none}
 .tl-pin__track{display:block;pointer-events:auto;padding:24px 20px 40px;background:var(--tl-pin-ground)}
 .tl-pin__sp{display:none}
 .tl-pin__layer{position:relative;height:auto;margin-bottom:24px}
 .tl-call{position:relative;inset:auto!important;width:auto;opacity:1!important;visibility:visible!important;border-top-color:var(--tl-rep)}
 .tl-call[data-klass=projected]{border-top-color:#b4c2f5}.tl-call[data-klass=ambition]{border-top-color:#ecb866}
 .tl-ra .tl-pin__track{background:var(--tl-paper)}
 .tl-me__grid{grid-template-columns:1fr 2fr;gap:12px}
 .tl-me__head,.tl-me__rail,.tl-me__foot .tl-cap{display:none}
 .tl-me .tl-pin__in{grid-template-rows:minmax(0,1fr) auto;gap:8px}
 .tl-loupe{height:auto;width:100%}
 .tl-me__title span{font-size:18px}
 .tl-me__scene .tl-sc{transform:scale(.6);transform-origin:0 0}
 .tl-me__buttons{width:100%}
 .tl-track__lane{height:120px}
 .tl-notes{border-left:0;border-top:4px solid var(--tl-ochre);padding:16px 0 0}
 .tl-bal{grid-template-columns:minmax(0,3fr) minmax(0,1fr);min-height:0}
 .tl-bal__bridge{grid-column:1/-1;grid-row:2;grid-template-columns:auto 1fr;padding:0;justify-items:start;text-align:left}
 .tl-bal__bridge i{display:none}
 .tl-bal__bridge b{font-size:40px}
 .tl-bl__read{min-height:0}
 .tl-strip__tabs,.tl-notes__tabs{grid-template-columns:1fr 1fr}
 .tl-turn{min-height:0}
 .tl-turn__h{font-size:40px}
 .tl-turn__thread{height:440px}
 .tl-plot--turn{inset:0 24px}
 .tl-tally{display:grid;grid-template-columns:1fr 1fr}
 .tl-tally__b{grid-template-columns:1fr}
 .tl-tally__b b{font-size:72px}
 .tl-cl__head h2,.tl-me__head h2{font-size:34px}
 .tl-board__plot{height:380px}
 .tl-eyes{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:12px}
 .tl-rules{grid-template-columns:1fr}
 .tl-rule{border-right:0;border-bottom:1px solid #ffffff55}
 .tl-ply{left:0;right:0}
 .tl-gapbr--close{display:none}
}
@media(max-width:640px){
 .tl-clockset{--lab:96px}
 .tl-track__label span{display:none}
 .tl-track__label b{font-size:15px}
 .tl-mk{top:calc(50% + var(--po,0px))}
 .tl-bal__plot{margin-left:52px}
 .tl-bal__axis span{left:-52px}
 .tl-bar__val{font-size:13px;white-space:normal;width:70px;bottom:calc(100% + 14px)}
 .tl-stack__raw b{font-size:30px}
}
@media(prefers-reduced-motion:reduce){.tl-page *{transition-duration:0s!important}}
.tl-page .gft-cite{color:inherit;font-size:13px;min-width:44px;justify-content:center;cursor:pointer}

/* ---- ground changes: the incoming block's edge is a selvedge of the outgoing tone, with the thread laid across the cut ---- */
.tl-sec[data-prev]::before{content:'';position:absolute;left:0;right:0;top:0;height:30px;z-index:6;pointer-events:none;background:repeating-linear-gradient(90deg,var(--tl-prev) 0 2px,transparent 2px 7px),repeating-linear-gradient(90deg,transparent 0 9px,var(--tl-prev) 9px 11px,transparent 11px 21px) 0 0/100% 70% no-repeat;-webkit-mask-image:linear-gradient(180deg,#000 15%,transparent);mask-image:linear-gradient(180deg,#000 15%,transparent)}
.tl-sec[data-prev]::after{content:'';position:absolute;left:0;right:0;top:-7px;height:14px;z-index:7;pointer-events:none;background:radial-gradient(circle,#c98a2b 0 5px,#f6f4ef 5.5px 7px,transparent 7.5px) var(--tl-xc,46%) 50%/14px 14px no-repeat,linear-gradient(90deg,#3f8f6b 0 var(--tl-xc,46%),transparent 0) 0 50%/100% 3px no-repeat,radial-gradient(circle,#8fa3e8 0 1.8px,transparent 2.3px) 0 50%/10px 4px repeat-x}
:root[data-m-go] .tl-sec[data-prev]:not([data-tl-in])::after{clip-path:inset(0 100% 0 0)}
:root[data-m-go] .tl-sec[data-prev][data-tl-in]::after{animation-name:tl-draw-x;animation-duration:760ms;animation-timing-function:var(--m-out);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes tl-draw-x{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
.tl-ra{--tl-prev:#072d2b}.tl-ck{--tl-prev:#f6f4ef}.tl-bl{--tl-prev:#ece5d4}.tl-turn{--tl-prev:#f6f4ef}.tl-fu{--tl-prev:#072d2b}.tl-me{--tl-prev:#0e4d4a}.tl-cl{--tl-prev:#031b1a}
.tl-ck,.tl-bl{--tl-xc:20%}.tl-fu{--tl-xc:13%}.tl-me{--tl-xc:24%}
@media(max-width:1000px){.tl-sec[data-prev]::before{height:18px}}

@media(max-width:1000px){
 .tl-page .gft-splash__content{padding-bottom:390px}
 .tl-page .gft-splash__structure{inset:auto 0 64px 0;height:370px}
 .tl-plot--splash{inset:16px 20px auto 20px;height:196px}
 .tl-sread{bottom:6px}
 .tl-sread__t{font-size:20px}
 :is(.tl-plot--splash,.tl-plot--reader,.tl-plot--close,.tl-plot--turn,.tl-plot--future) .tl-plot__years span:nth-child(even),.tl-clockset__axis span:nth-child(even){visibility:hidden}
 .tl-loupe__lab{display:none}
 .tl-bar:nth-child(even) .tl-bar__val{bottom:calc(100% + 50px)}
 .tl-stack__target span{white-space:normal;width:100%;left:0;translate:none;text-align:center;font-size:13px;line-height:1.25}
 .tl-turn__thread{height:540px}
 .tl-plot--turn{inset:auto;left:50%;top:50%;width:540px;height:min(300px,76vw);transform:translate(-50%,-50%) rotate(90deg)}
 .tl-plot--turn :is(.tl-plot__years,.tl-lane span){display:none}
}

@media(min-width:1001px){.tl-fu .tl-pin__layer[data-anchor=rl] .tl-call{right:auto;left:38%;top:32svh}}

.tl-ride{position:absolute;left:0;top:0;width:12px;height:12px;border-radius:50%;background:#ecb866;box-shadow:0 0 14px 4px #c98a2b99;offset-rotate:0deg;offset-distance:0%;pointer-events:none;z-index:3;opacity:0}
:root[data-m-go] .tl-cl[data-tl-in] .tl-ride[data-m-on]{animation-name:tl-ride;animation-duration:5s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:normal}
@keyframes tl-ride{0%{offset-distance:0%;opacity:.06}8%{opacity:1}45%,55%{offset-distance:100%;opacity:1}92%{opacity:1}100%{offset-distance:0%;opacity:.06}}