/* Interactive Hanby panels: styles for the shared kit (panels-kit.js).
   Builds on panels.css (.ip box, kicker, title, lede, caption). */
.ip-art{border-radius:10px;overflow:hidden;border:1px solid rgba(236,242,236,.16);background:#03303a}
.ip-art img{display:block;width:100%;height:100%;object-fit:cover}
.ip-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.ip-btn{
  padding:9px 15px;border-radius:8px;border:1px solid rgba(236,242,236,.25);
  font:600 13.5px/1.1 var(--sans);color:rgba(236,242,236,.88);transition:background .25s,border-color .25s,color .25s;
}
.ip-btn:hover{border-color:rgba(236,242,236,.5)}
.ip-btn[aria-pressed="true"]{background:var(--paper);color:var(--teal);border-color:var(--paper)}
.ip-go{padding:11px 17px;border-radius:8px;background:var(--sagefire);color:#fff;font:700 14px/1 var(--sans);white-space:nowrap}
.ip-go:hover{background:var(--forest)}
.ip-card{min-height:92px;margin-top:16px}
.ip-card .k,.ks-pane .k{font:700 13px/1.2 var(--sans);color:var(--sagefire);margin:0}
.ip-card h4,.ks-pane h4{font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.1vw,27px);line-height:1.2;color:#fff;margin:6px 0 6px}
.ip-card p,.ks-pane p{font:400 15.5px/1.55 var(--sans);color:rgba(236,242,236,.82);margin:6px 0 0;max-width:60ch}
.ip-card p.q,.ks-pane p.q{font-family:var(--serif);font-style:italic;font-size:17px;color:#fff}
.ip-foot{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px 30px;margin-top:24px;padding-top:20px;border-top:1px solid rgba(236,242,236,.13)}
.ip-foot p{margin:0;font:400 15px/1.55 var(--sans);color:rgba(236,242,236,.8)}
.ip-foot .v{font-family:var(--serif);font-style:italic;font-size:16.5px;color:rgba(236,242,236,.92)}
.ip-foot cite{display:block;margin-top:5px;font:700 12.5px/1 var(--sans);font-style:normal;color:var(--sagefire)}
/* a live painting: the still stays underneath, its looping film fades in
   on top once it is playing (panels-kit.js starts it when in view) */
.ip-live{position:relative}
.ip-live .ip-loop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;transition:opacity .8s}
.ip-live.playing .ip-loop{opacity:1}
/* scripture pills at the foot of a panel: the page's .scripture pills, on
   the panel's dark ground (verse.js gives them the same pop-up) */
.ip .scripture.ip-verses{margin:22px 0 0;padding:18px 0 0;border-top:1px solid rgba(236,242,236,.13);gap:8px}
.ip-foot + .scripture.ip-verses{margin-top:18px;padding-top:0;border-top:0}
.ip .scripture.ip-verses li{color:#fff;background:rgba(22,166,55,.16);border-color:rgba(22,166,55,.42)}
.ip .scripture.ip-verses li.sf-vpill:hover,.ip .scripture.ip-verses li.sf-vpill:focus-visible{background:rgba(22,166,55,.32)!important;border-color:rgba(22,166,55,.7)!important}
.ip .scripture.ip-verses li.sf-vpill[aria-expanded="true"]{background:var(--sagefire)!important;color:#fff!important;border-color:var(--sagefire)!important}
.ip [hidden]{display:none !important}

/* ---------- steps ---------- */
.ks-tabs{display:flex;gap:6px;margin-top:22px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.ks-tab{
  flex:1 1 0;min-width:96px;text-align:left;padding:10px 12px 11px;border-radius:8px;
  border:1px solid rgba(236,242,236,.18);transition:background .25s,border-color .25s;position:relative;
}
.ks-tab .n{display:block;font:700 12px/1 var(--sans);color:rgba(236,242,236,.55);font-variant-numeric:tabular-nums}
.ks-tab .t{display:block;margin-top:5px;font:600 13.5px/1.25 var(--sans);color:rgba(236,242,236,.88)}
.ks-tab.done{border-color:rgba(22,166,55,.45)}
/* the chosen stage is paper on the teal ground, like a pressed button
   (owner's call 2026-10-22: the old green tint was too faint) */
.ks-tab.on,.ks-loop .ks-tab.on{background:var(--paper);border-color:var(--paper)}
.ks-tab.on .n{color:var(--sagefire)}
.ks-tab.on .t{color:var(--teal)}
.ks-pane{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px 30px;align-items:center;margin-top:18px;animation:ks-in .55s ease both}
.ks-pane.noart{grid-template-columns:1fr}
.ks-pane .ip-art{aspect-ratio:4/3}
@keyframes ks-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ks-ctrl{display:flex;align-items:center;gap:12px;margin-top:16px}
.ks-ctrl button{width:38px;height:38px;border-radius:50%;border:1px solid rgba(236,242,236,.3);font:700 16px/1 var(--sans)}
.ks-ctrl button:hover{border-color:var(--sagefire);color:var(--sagefire)}
.ks-count{font:600 13px/1 var(--sans);color:rgba(236,242,236,.6);font-variant-numeric:tabular-nums}
@media(max-width:700px){.ks-pane{grid-template-columns:1fr}}

/* the loop variant: stages round a circle, the painting in the middle */
.ks-loop .ks-ring{position:relative;width:min(100%,420px);aspect-ratio:1;margin:26px auto 0}
.ks-loop .ks-ring::before{content:'';position:absolute;inset:9%;border-radius:50%;border:1.5px dashed rgba(22,166,55,.55)}
.ks-loop .ks-ring .ip-art{position:absolute;inset:22%;border-radius:50%}
.ks-loop .ks-tab{position:absolute;width:118px;min-width:0;translate:-50% -50%;background:var(--teal);text-align:center}
.ks-loop .ks-tabs{display:block;overflow:visible;margin:0;padding:0}
.ks-loop .ks-half{position:absolute;left:50%;translate:-50% 0;font:700 11.5px/1 var(--sans);letter-spacing:.06em;color:rgba(236,242,236,.5)}
.ks-loop .ks-pane{grid-template-columns:1fr;text-align:center;justify-items:center}
/* everything under the ring sits on the centre line: the kicker and
   paragraphs are capped at 60ch, so they need centring as boxes too */
.ks-loop .ks-pane .txt{width:100%}
.ks-loop .ks-pane .txt > *{margin-left:auto;margin-right:auto}
.ks-loop .ks-ctrl{justify-content:center}
.ks-loop .ip-foot{grid-template-columns:1fr;text-align:center}
.ks-loop .ip-foot p{max-width:60ch;margin:0 auto}
@media(max-width:520px){.ks-loop .ks-tab{width:92px;padding:7px 6px}.ks-loop .ks-tab .t{font-size:11.5px}}

/* ---------- hotspots ---------- */
.kh-stage{position:relative;margin-top:16px}
.kh-stage .ip-art{aspect-ratio:var(--ar,16/9)}
.kh-path{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.kh-path path{fill:none;stroke:#E9C878;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 4px rgba(233,200,120,.8));transition:stroke-dashoffset .9s ease;stroke-dashoffset:var(--len,4000)}
.kh-pin{
  position:absolute;translate:-50% -50%;min-width:32px;height:32px;padding:0 9px;border-radius:999px;
  display:grid;place-items:center;font:800 13px/1 var(--sans);color:var(--teal);background:var(--paper);
  box-shadow:0 2px 10px rgba(0,0,0,.45);transition:transform .25s,opacity .35s,background .25s,left .9s ease,top .9s ease;white-space:nowrap;
}
.kh-pin::after{content:'';position:absolute;inset:-6px;border-radius:999px;border:2px solid var(--paper);opacity:0;animation:ipt-ring 2.8s ease-out infinite}
.kh-pin:hover{transform:scale(1.08)}
.kh-pin.on{background:var(--sagefire);color:#fff;transform:scale(1.12)}
.kh-pin.on::after{border-color:var(--sagefire)}
.kh-pin.dim{opacity:.28}
.kh-info{display:none}
.kh-row{display:flex;justify-content:space-between;gap:16px 24px;align-items:flex-start;flex-wrap:wrap}
@media(max-width:640px){.kh-pin{min-width:24px;height:24px;font-size:11px;padding:0 6px}}

/* ---------- columns ---------- */
.kc-grid{display:grid;grid-template-columns:minmax(0,.8fr) repeat(var(--cols,3),minmax(0,1fr));gap:0 clamp(8px,1.4vw,16px);margin-top:24px}
.kc-head{display:flex;flex-direction:column;gap:9px;padding-bottom:12px;text-align:left;transition:opacity .4s}
.kc-head .ip-art{aspect-ratio:3/4;transition:border-color .4s,box-shadow .4s}
.kc-head .name{font:700 14px/1.25 var(--sans);color:#fff}
.kc-head .sub{font:500 12.5px/1.3 var(--sans);color:rgba(236,242,236,.6)}
.kc-corner{align-self:end;padding-bottom:12px;font:600 13px/1.4 var(--sans);color:rgba(236,242,236,.55)}
.kc-label{font:600 13.5px/1.3 var(--sans);color:rgba(236,242,236,.55);padding:11px 0;border-top:1px solid rgba(236,242,236,.12)}
.kc-cell{font:500 15.5px/1.35 var(--serif);color:#fff;padding:11px 0;border-top:1px solid rgba(236,242,236,.12);transition:opacity .4s,color .4s}
.kc.has-pick .kc-head:not(.on),.kc.has-pick .kc-cell:not(.on){opacity:.3}
.kc-head.on .ip-art{border-color:var(--sagefire);box-shadow:0 0 0 3px rgba(22,166,55,.25)}
.kc-cell.on{color:#E9C878}
.kc-cell.greatest{position:relative}
.kc.extra .kc-cell.greatest{color:#fff;text-shadow:0 0 16px rgba(233,200,120,.9)}
.kc-say{margin-top:18px;min-height:2.6em;font:400 17px/1.5 var(--serif);color:#fff}
.kc-says{display:none}
.kc-veil{grid-column:var(--veil-col);grid-row:1/-1;pointer-events:none}
@media(max-width:640px){
  .kc-grid{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}
  .kc-corner{display:none}
  .kc-label{grid-column:1/-1;text-align:center;padding:10px 0 2px}
  .kc-cell{border-top:0;text-align:center;font-size:14px;padding:3px 0 9px}
}

/* ---------- timeline ---------- */
.kt-stage{position:relative;margin-top:16px}
.kt-stage .ip-art{aspect-ratio:var(--ar,16/9)}
.kt-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.kt-svg .base{fill:none;stroke:rgba(251,250,246,.35);stroke-width:2;vector-effect:non-scaling-stroke}
.kt-svg .kt-draw{fill:none;stroke:#E9C878;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 5px rgba(233,200,120,.75));transition:stroke-dashoffset 1s ease}
.kt-svg .kt-draw.green{stroke:var(--sagefire);filter:drop-shadow(0 0 5px rgba(22,166,55,.8))}
.kt-svg .kt-draw.dash{stroke-width:2.5}
.kt-svg text{font:700 13px var(--sans);fill:rgba(251,250,246,.8)}
.kt-mark{
  position:absolute;translate:-50% -50%;width:18px;height:18px;border-radius:50%;
  background:var(--paper);box-shadow:0 0 0 4px rgba(4,56,63,.6),0 2px 8px rgba(0,0,0,.5);transition:transform .25s,background .25s;
}
.kt-mark .lb{position:absolute;left:50%;top:calc(100% + 9px);translate:-50% 0;white-space:nowrap;font:700 12px/1.2 var(--sans);color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.8);pointer-events:none}
.kt-mark.up .lb{top:auto;bottom:calc(100% + 9px)}
.kt-mark.past{background:#E9C878}
.kt-mark.on{background:var(--sagefire);transform:scale(1.35)}
.kt-mark:hover{transform:scale(1.25)}
.kt-info{display:none}
.kt-row{display:flex;justify-content:space-between;gap:16px 24px;align-items:flex-start;flex-wrap:wrap}
@media(max-width:640px){.kt-mark .lb{font-size:10px}}

/* ---------- toggle ---------- */
.kg-pane{margin-top:16px;animation:ks-in .5s ease both}
.kg-stage{position:relative;margin-top:16px}
.kg-stage .ip-art{aspect-ratio:var(--ar,16/9)}
.kg-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px 30px;align-items:start}
@media(max-width:700px){.kg-two{grid-template-columns:1fr}}
.kg-list{list-style:none;margin:14px 0 0;padding:0;counter-reset:kg}
.kg-list li{position:relative;padding:12px 0 12px 46px;border-top:1px solid rgba(236,242,236,.12);animation:ks-in .5s ease both}
.kg-list li:nth-child(2){animation-delay:.12s}.kg-list li:nth-child(3){animation-delay:.24s}.kg-list li:nth-child(4){animation-delay:.36s}.kg-list li:nth-child(5){animation-delay:.48s}
.kg-list li .n{position:absolute;left:0;top:12px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:700 12.5px/1 var(--sans);background:rgba(22,166,55,.16);border:1px solid rgba(22,166,55,.7);color:var(--sagefire)}
.kg-list li b{display:block;font:600 16px/1.3 var(--sans);color:#fff}
.kg-list li span{display:block;margin-top:3px;font:400 14.5px/1.45 var(--sans);color:rgba(236,242,236,.75)}

/* ---------- switches ---------- */
.kw-sw{
  display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:10px;border:1px solid rgba(236,242,236,.22);
  font:700 15px/1 var(--sans);color:#fff;transition:background .3s,border-color .3s;
}
.kw-sw .dot{width:38px;height:22px;border-radius:999px;background:rgba(236,242,236,.2);position:relative;transition:background .3s}
.kw-sw .dot::after{content:'';position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .3s}
.kw-sw[aria-pressed="true"]{border-color:var(--sagefire);background:rgba(22,166,55,.14)}
.kw-sw[aria-pressed="true"] .dot{background:var(--sagefire)}
.kw-sw[aria-pressed="true"] .dot::after{transform:translateX(16px)}
.kw-out{margin-top:16px;min-height:4.4em}
.kw-says{display:none}

/* ---------- sort ---------- */
.ko-pool{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;min-height:56px}
.ko-item{display:flex;align-items:center;gap:6px;padding:7px 8px 7px 14px;border-radius:999px;background:rgba(236,242,236,.08);border:1px solid rgba(236,242,236,.22);font:600 14px/1 var(--sans);color:#fff}
.ko-item .ko-to{padding:6px 9px;border-radius:999px;font:700 11.5px/1 var(--sans);background:rgba(236,242,236,.12);color:rgba(236,242,236,.9)}
.ko-item .ko-to:hover{background:var(--sagefire);color:#fff}
.ko-item.wrong{animation:ko-shake .45s}
.ko-item.placed{padding-right:14px;background:rgba(22,166,55,.16);border-color:rgba(22,166,55,.6);animation:ks-in .4s ease both}
@keyframes ko-shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.ko-boxes{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.ko-box{border-radius:10px;border:1px dashed rgba(236,242,236,.3);padding:14px 16px;min-height:120px}
.ko-box h4{margin:0 0 4px;font-family:var(--serif);font-weight:400;font-size:22px;color:#fff}
.ko-box .sub{margin:0 0 10px;font:400 13.5px/1.4 var(--sans);color:rgba(236,242,236,.65)}
.ko-in{display:flex;flex-wrap:wrap;gap:8px}
.ko-say{margin-top:14px;min-height:1.6em;font:400 16px/1.5 var(--serif);color:#fff}
.ko-hint,.ko-done{display:none}
@media(max-width:560px){.ko-boxes{grid-template-columns:1fr}}

/* ---------- slider ---------- */
.kl-range{width:100%;margin-top:14px;accent-color:var(--sagefire)}
.kl-scale{display:flex;justify-content:space-between;font:600 12.5px/1 var(--sans);color:rgba(236,242,236,.6);margin-top:6px}

/* =====================================================================
   Per-panel pieces
   ===================================================================== */
/* The Nocking Point: three shots, drawn when chosen */
.nock .shot{fill:none;stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dashoffset:var(--len,4000);opacity:0;transition:stroke-dashoffset 1.1s ease-out,opacity .2s}
.nock .shot-true{stroke:#E9C878;filter:drop-shadow(0 0 5px rgba(233,200,120,.9))}
.nock .shot-high,.nock .shot-low{stroke:#e07b5a}
.nock[data-state="true"] .shot-true,.nock[data-state="high"] .shot-high,.nock[data-state="low"] .shot-low{stroke-dashoffset:0;opacity:1}
.nock .kg-pane > .nock-say{margin:14px 0 0;font:400 18px/1.45 var(--serif);color:#fff;max-width:none}
.nock[data-state="true"] .kg-pane > .nock-say{color:#E9C878}
/* each shot is also a short film laid over the still; while one plays the
   drawn arcs step aside (data-video names the shot playing) */
.nock .ip-art{position:relative}
.nock-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;transition:opacity .35s}
.nock[data-video="high"] .nock-vid[data-state="high"],.nock[data-video="low"] .nock-vid[data-state="low"],.nock[data-video="true"] .nock-vid[data-state="true"]{opacity:1}
.nock[data-video] .kh-extra{opacity:0;transition:opacity .3s}
/* the parts of the shot: static callouts on the painting, a dot on the part
   and a leader to the words (positions come from build.js as CSS vars; the
   leaders are lines in a stretched 100x100 overlay, like the shots) */
.nock-leads line{stroke:rgba(251,250,246,.8);stroke-width:1.5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.nock-cos,.nock-co{display:contents;list-style:none;margin:0;padding:0}
.nock-co .dot{position:absolute;left:var(--x);top:var(--y);width:11px;height:11px;border-radius:50%;background:var(--paper);translate:-50% -50%;box-shadow:0 0 0 3px rgba(4,56,63,.55),0 2px 8px rgba(0,0,0,.5)}
.nock-co .lb{
  position:absolute;left:var(--lx);top:var(--ly);width:max-content;max-width:min(26%,200px);padding:8px 11px;border-radius:8px;
  background:rgba(3,48,58,.74);border:1px solid rgba(236,242,236,.2);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  box-shadow:0 4px 16px rgba(0,0,0,.3);font:400 13px/1.3 var(--sans);color:#fff;
}
.nock-co .lb b{display:block;margin-bottom:3px;font:700 11.5px/1.2 var(--sans);color:var(--sagefire);letter-spacing:.02em}
.nock-co.br .lb{translate:-100% -100%}
.nock-co.bl .lb{translate:0 -100%}
.nock-co.tr .lb{translate:-100% 0}
@media(max-width:760px){
  .nock-leads,.nock-co .dot{display:none}
  .nock-cos{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px;margin-top:10px}
  .nock-co{display:block}
  .nock-co .lb{position:static;translate:none;width:auto;max-width:none;display:block;backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(236,242,236,.06);box-shadow:none}
}

/* Three Dimensions of Maturity: rungs on the ladder, reach arcs on the line */
.mat-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:22px 30px;margin-top:22px;align-items:center}
.mat-ladder{position:relative}
.mat-ladder .ip-art{aspect-ratio:3/4}
.mat-rung{
  position:absolute;left:50%;translate:-50% -50%;padding:8px 13px;border-radius:999px;white-space:nowrap;
  background:rgba(4,56,63,.82);border:1px solid rgba(236,242,236,.4);font:700 13px/1 var(--sans);color:#fff;
  backdrop-filter:blur(4px);transition:background .25s,border-color .25s,transform .25s;
}
.mat-rung:hover{border-color:var(--sagefire)}
.mat-rung[aria-pressed="true"]{background:var(--sagefire);border-color:var(--sagefire);transform:scale(1.06)}
.mat-line{display:block;width:100%;height:auto;aspect-ratio:100/42;margin-top:26px;overflow:visible}
.mat-line .axis.pre{stroke-dasharray:5 5;opacity:.7}
.mat-line .dot.dim{fill:rgba(236,242,236,.55)}
.mat-line .axis{stroke:rgba(236,242,236,.45);stroke-width:1.5;vector-effect:non-scaling-stroke}
.mat-line .tick{stroke:rgba(236,242,236,.35);stroke-width:1;vector-effect:non-scaling-stroke}
.mat-line text{font:600 2.3px var(--sans);fill:rgba(236,242,236,.6)}
.mat-line .pt,.mat-line .now{font-weight:700;fill:#fff}
.mat-line .dot{fill:var(--sagefire)}
.mat-line .reach{fill:none;stroke:#E9C878;stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-dashoffset:var(--len,4000);opacity:.25;transition:stroke-dashoffset 1.2s ease,opacity .4s;filter:drop-shadow(0 0 4px rgba(233,200,120,.7))}
.mat[data-state="children"] .reach-children,.mat[data-state="young"] .reach-young,.mat[data-state="fathers"] .reach-fathers{stroke-dashoffset:0;opacity:1}
@media(max-width:700px){.mat-grid{grid-template-columns:1fr}.mat-line text{font-size:3.4px}}

/* Light, Object, Shadow */
.sh-stage{position:relative;margin-top:16px}
.sh-stage .ip-art{aspect-ratio:16/9}
.sh-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sh-light{opacity:calc(.25 + .75 * var(--v,0));transform-origin:83px 44px;transform:scale(calc(.6 + .8 * var(--v,0)))}
.sh-shadow{fill:rgba(2,24,28,.82);transform-origin:53px 70px;transform:scaleX(calc(.18 + .82 * var(--v,0)));opacity:calc(.45 + .5 * var(--v,0))}
.sh-cross{fill:#1d1712}
.sh-svg text{font:700 2.6px var(--sans);fill:rgba(255,255,255,.85)}
.sh-lab{position:absolute;translate:-50% -100%;text-align:center;font:700 13px/1.2 var(--sans);color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.8);pointer-events:none}
.sh-lab em{display:block;font:italic 400 13px/1.2 var(--serif);color:rgba(255,255,255,.85)}
.sh-lab-shadow{opacity:calc(.2 + .8 * var(--v,0))}
.kl-label{display:block;margin-top:16px;font:700 14px/1 var(--sans);color:#fff}
.kl-say p{margin:10px 0 0;font:400 17px/1.45 var(--serif);color:#fff}

/* Every Piece a Bleeding Spot: the plan appears when the pins move to it */
.bleed .kh-stage .ip-art img{transition:opacity .8s,filter .8s}
.bleed[data-layout="plan"] .kh-stage .ip-art img{opacity:.22;filter:saturate(.4)}
.bleed .plan{fill:none;stroke:#E9C878;stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .8s}
.bleed[data-layout="plan"] .plan{opacity:.85}
.bleed .plan *{vector-effect:non-scaling-stroke}
.bleed .plan .court{stroke-dasharray:6 5}
.bleed .plan .tent{stroke-width:2}
.bleed .plan .veil{stroke-dasharray:4 3}
.bleed .plan .gate{stroke-width:4}
.bleed .plan .ico{stroke:rgba(236,242,236,.9);stroke-width:1.4}
.bleed-zone{position:absolute;translate:-50% -50%;font:700 11px/1 var(--sans);letter-spacing:.12em;color:rgba(236,242,236,.72);opacity:0;transition:opacity .8s;pointer-events:none;white-space:nowrap}
.bleed[data-layout="plan"] .bleed-zone{opacity:1}
@media(max-width:640px){.bleed-zone{font-size:9px}}

/* Through the Shadow: the reflection becomes the tent */
.inv-stage .ip-art img{transition:transform 1.2s cubic-bezier(.6,0,.3,1)}
.inv[data-state="grace"] .inv-stage .ip-art img{transform:scaleY(-1)}
.inv-veil{position:absolute;left:50%;top:50%;translate:-50% -50%;padding:6px 12px;border-radius:999px;background:rgba(4,56,63,.8);border:1px solid rgba(233,200,120,.6);font:700 12.5px/1 var(--sans);color:#E9C878;white-space:nowrap}

/* Called Out, Sent For: the two roads */
.called-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.called-svg .arrow{fill:none;stroke-width:3.5;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dashoffset:var(--len,4000);opacity:0;transition:stroke-dashoffset 1.4s ease,opacity .3s}
.called-svg .arrow-from{stroke:#e07b5a}
.called-svg .arrow-for{stroke:#E9C878;filter:drop-shadow(0 0 5px rgba(233,200,120,.9))}
.called-svg .stop{stroke:#e07b5a;stroke-width:5;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .3s 1.2s}
.called[data-state="from"] .arrow-from,.called[data-state="for"] .arrow-for{stroke-dashoffset:0;opacity:1}
.called[data-state="from"] .stop{opacity:1}
.called-roles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 22px;margin-top:16px}
.called-roles > div{border-top:2px solid rgba(22,166,55,.6);padding-top:10px}
.called-roles .k{font:700 12.5px/1.2 var(--sans);color:var(--sagefire);margin:0}
.called-roles h4{margin:4px 0 2px;font-family:var(--serif);font-weight:400;font-size:20px;color:#fff}
.called-roles p:not(.k){margin:0;font:400 14px/1.4 var(--sans);color:rgba(236,242,236,.75)}
@media(max-width:640px){.called-roles{grid-template-columns:1fr}}

/* Church and Kingdom: Zion within Jerusalem */
.ck-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ck-svg .ring{fill:rgba(233,200,120,0);stroke:rgba(255,255,255,.45);stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:6 6;transition:fill .6s,stroke .6s}
.ck[data-state="jerusalem"] .ring-j{fill:rgba(49,143,154,.18);stroke:#9fd6dd;stroke-dasharray:none}
.ck[data-state="zion"] .ring-z{fill:rgba(233,200,120,.28);stroke:#E9C878;stroke-dasharray:none}
.ck-lab{position:absolute;translate:-50% -50%;padding:5px 11px;border-radius:999px;background:rgba(4,56,63,.82);font:700 13px/1 var(--sans);color:#fff;transition:background .4s}
.ck[data-state="jerusalem"] .ck-lab-j,.ck[data-state="zion"] .ck-lab-z{background:var(--sagefire)}

/* The Third of the Threes */
.threes-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;position:relative}
.threes-grid .kc-cell{text-align:center}
.threes-veil{position:absolute;left:66.66%;top:0;bottom:0;width:0;border-left:2px dashed rgba(233,200,120,.55);pointer-events:none}
.threes-veil::after{content:"The Veil";position:absolute;top:-2px;left:0;translate:-50% -100%;font:700 11.5px/1 var(--sans);color:#E9C878;white-space:nowrap}
.threes .kc-head{align-items:center;text-align:center}

/* Glory + Honor = Power */
.gp-stage{position:relative;margin-top:16px;border-radius:10px;overflow:hidden}
.gp-stage .ip-art{aspect-ratio:16/9;filter:brightness(.62) saturate(.7);transition:filter .8s}
.gp-glow{position:absolute;left:10%;right:10%;height:48%;opacity:0;transition:opacity .8s;pointer-events:none;mix-blend-mode:screen}
.gp-up{top:0;background:radial-gradient(ellipse at 50% 25%,rgba(255,236,170,.75),transparent 62%)}
.gp-down{bottom:0;background:radial-gradient(ellipse at 50% 75%,rgba(160,230,200,.6),transparent 62%)}
.gp-flash{position:absolute;left:50%;top:50%;width:70%;height:12%;translate:-50% -50%;border-radius:50%;opacity:0;pointer-events:none;background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(233,200,120,.5),transparent);transition:opacity .6s,transform .8s;transform:scaleX(.3)}
.kw[data-on="glory"] .gp-up,.kw[data-on="glory+honor"] .gp-up{opacity:1}
.kw[data-on="honor"] .gp-down,.kw[data-on="glory+honor"] .gp-down{opacity:1}
.kw[data-on="glory+honor"] .gp-flash{opacity:1;transform:scaleX(1)}
.kw[data-on="glory+honor"] .gp-stage .ip-art{filter:none}
.gp-lab{position:absolute;left:50%;translate:-50% 0;font:700 13px/1 var(--sans);color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.85);white-space:nowrap}
.gp-mid{translate:-50% -50%;font-style:italic;font-family:var(--serif);font-weight:400;font-size:14px}

/* Constants and Variables */
.cv-art .ip-art{aspect-ratio:16/6;margin-top:18px}
.cv-art .ip-art img{object-position:50% 30%}

/* timeline extras: the Kingdom Line's ladder rungs */
.kt-svg .rungs line{stroke:rgba(233,200,120,.7);stroke-width:2;vector-effect:non-scaling-stroke}

/* Time and Eternity: the line from eternity down to Calvary shows from Calvary on */
.kt-calv{fill:none;stroke:#E9C878;stroke-width:2;stroke-dasharray:6 6;vector-effect:non-scaling-stroke;transition:opacity .6s}
.kt[data-at="0"] .kt-calv,.kt[data-at="1"] .kt-calv{opacity:0}

/* card text inside toggle panes reads like the other cards */
.kg-pane > .k,.kg-pane .txt .k,.kg-pane div > .k{font:700 13px/1.2 var(--sans);color:var(--sagefire);margin:0}
.kg-pane > h4,.kg-pane div > h4{font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.1vw,27px);line-height:1.2;color:#fff;margin:6px 0 6px}
.kg-pane > p:not(.k),.mat-right .kg-pane > p:not(.k){font:400 15.5px/1.55 var(--sans);color:rgba(236,242,236,.82);margin:6px 0 0;max-width:60ch}
.kg-pane > p.q{font-family:var(--serif);font-style:italic;font-size:17px;color:#fff}

/* timeline labels beside a marker, and small markers for close steps */
.kt-mark.l .lb,.kt-mark.r .lb{top:50%;translate:0 -50%}
.kt-mark.l .lb{left:auto;right:calc(100% + 9px)}
.kt-mark.r .lb{left:calc(100% + 9px)}
.kt-mark.sm{width:12px;height:12px}

/* Through the Shadow: shade the shadow half, light the reality half */
.inv-stage{overflow:hidden;border-radius:10px}
.inv-stage::after{
  content:'';position:absolute;inset:0;pointer-events:none;transition:background 1.2s;
  background:linear-gradient(180deg,rgba(233,200,120,0) 0,rgba(233,200,120,0) 50%,rgba(2,24,28,.55) 50%,rgba(2,24,28,.55) 100%);
}
.inv[data-state="grace"] .inv-stage::after{
  background:linear-gradient(180deg,rgba(2,24,28,.55) 0,rgba(2,24,28,.55) 50%,rgba(233,200,120,.18) 50%,rgba(233,200,120,.18) 100%);
}
.inv-veil{z-index:2}