/* Kara article exhibits: self-playing "screens", same motion language as the landing page. Tokens from /styles.css */
.art .xs{margin:2.6em 0;opacity:0;transform:translateY(28px) scale(.985);transition:opacity .6s,transform .8s cubic-bezier(.2,.7,.2,1)}
.art .xs.on{opacity:1;transform:none}
.xs-bezel{background:var(--ink);color:var(--paper);padding:clamp(20px,3.4vw,34px);border:2px solid #2b2b2b;box-shadow:0 0 0 6px #1d1d1d,0 18px 40px rgba(20,20,20,.18);position:relative;overflow:hidden;transition:filter .9s ease}
.xs:not(.on) .xs-bezel{filter:brightness(.35)}
.xs-bezel::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.02) 3px 4px)}
.art .xs-k{font:600 12px var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin:0 0 10px}
.art .xs h3{font-size:clamp(28px,4vw,42px);line-height:.95;margin:0 0 12px;color:var(--paper)}
.art .xs p{font-size:16px;line-height:1.5;margin:0 0 16px;color:rgba(244,240,232,.78)}
.art .xs .xs-note{font-size:13px;line-height:1.5;color:rgba(244,240,232,.58);margin:18px 0 0}
.art .xs b{color:inherit}

/* shared: final states are the default, so no-JS and reduced-motion readers see everything */
.xs-tag{display:inline-block;font:700 14px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;background:var(--red);color:#fff;margin-left:10px;opacity:1;transition:opacity .6s ease var(--td,0s),transform .6s ease var(--td,0s)}
.xs-js .xs-tag{opacity:0;transform:translateY(6px)}
.xs-js .go .xs-tag,.xs-js .xs-tag.go{opacity:1;transform:none}

/* Exhibit 1: bars */
.xs-bars{display:grid;gap:12px}
.xs-bar{display:grid;grid-template-columns:minmax(0,15rem) 1fr 3.2rem;gap:12px;align-items:center;font-size:15px;line-height:1.25}
.xs-bar .t{height:18px;background:#262626;position:relative}
.xs-bar .t i{display:block;height:100%;width:var(--w);background:var(--paper);transition:width 1s cubic-bezier(.2,.7,.2,1) calc(var(--i,0)*.14s + .2s)}
.xs-bar.win .t i{background:var(--red)}
.xs-bar .v{font:800 26px/1 var(--display);text-align:right;font-variant-numeric:tabular-nums}
.xs-js .xs-bars .t i{width:0}
.xs-js .xs-bars.go .t i{width:var(--w)}
.xs-bar.mark .l{color:#fff}
.xs-tag.end{position:absolute;top:-3px;left:calc(var(--w) + 8px);margin:0;white-space:nowrap}
.xs-bar.win .xs-tag.end{left:auto;right:8px;background:var(--paper);color:var(--ink)}
@media (max-width:560px){.xs-bar{grid-template-columns:1fr 3.2rem;grid-template-areas:"l v" "t t"}.xs-bar .l{grid-area:l}.xs-bar .t{grid-area:t}.xs-bar .v{grid-area:v}}

/* Exhibit 2: map */
.xs-mapbox{background:#1a1a1a;max-width:560px;margin:0 auto 18px;aspect-ratio:1000/1371;position:relative;border:1px solid #2b2b2b}
.xs-mapbox svg{display:block;width:100%;height:auto}
.xs-map .seg{fill:none;stroke-linecap:round;stroke-linejoin:round}
.xs-map .in{stroke:var(--paper)}
.xs-map .out{stroke:var(--red)}
.xs-map .grp{opacity:1;transition:opacity 1s ease var(--d,0s)}
.xs-js .xs-map .grp{opacity:0}
.xs-js .xs-map.go .grp{opacity:.9}
.xs-js .xs-map.go.focus-ps .grp.c-north{opacity:.28;transition-delay:0s;transition-duration:1.2s}
.xs-map .dr{stroke-dasharray:1;stroke-dashoffset:0}
.xs-js .xs-map .dr{stroke-dashoffset:1}
.xs-js .xs-map.go .dr{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1) var(--d,0s)}
.xs-map text{font:500 19px var(--body);fill:rgba(244,240,232,.62);paint-order:stroke;stroke:#1a1a1a;stroke-width:5px}
.xs-map .boardlbl{font:800 30px var(--display);fill:var(--paper);text-transform:uppercase}
.xs-map .boardmk{fill:var(--red);stroke:var(--paper);stroke-width:4}
.xs-map .ping{fill:none;stroke:var(--red);stroke-width:3;opacity:0}
.xs-map.go .ping{animation:xsping 2.6s ease-out 2.6s infinite}
@keyframes xsping{0%{opacity:.9;r:12;stroke-width:3}100%{opacity:0;r:62;stroke-width:1}}
.xs-legend{display:grid;grid-template-columns:minmax(0,1fr);gap:20px 28px;max-width:560px;margin:0 auto}
.xs-legend h4{font:600 11px var(--body);letter-spacing:.16em;text-transform:uppercase;color:rgba(244,240,232,.58);margin:0 0 10px}
.xs-li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid #2b2b2b;font-size:14px;line-height:1.2;transition:opacity .7s ease var(--d,0s)}
.xs-li b{font:800 20px/1 var(--display);font-variant-numeric:tabular-nums}
.xs-li > span{font-size:14px}
.xs-js .xs-li{opacity:0}
.xs-js .xs-legend.go .xs-li{opacity:1}
.xs-big{display:flex;align-items:baseline;gap:12px;padding:10px 0;border-top:1px solid #2b2b2b;transition:opacity .7s ease var(--d,0s)}
.xs-big b{font:800 clamp(40px,7vw,64px)/1 var(--display);font-variant-numeric:tabular-nums;color:var(--red)}
.xs-big.alt b{color:var(--paper)}
.xs-big > span{font-size:15px;line-height:1.2}
.xs-js .xs-big{opacity:0}
.xs-js .xs-legend.go .xs-big{opacity:1}
@media (max-width:640px){.xs-legend{grid-template-columns:1fr}}

/* Exhibit 3: time-lapse lanes */
.xs-lane{margin:0 0 18px}
.xs-lane .top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 8px;font-size:14px}
.xs-lane .top b{font:800 clamp(30px,5vw,44px)/1 var(--display);font-variant-numeric:tabular-nums}
.xs-lane.jam .top b{color:var(--red)}
.xs-road{position:relative;height:46px;background:#222;border-block:2px solid #3a3a3a;overflow:hidden}
.xs-road::before{content:"";position:absolute;inset:50% 0 auto 0;border-top:2px dashed #555}
.xs-lbl{position:absolute;left:8px;top:3px;font:600 12px var(--body);letter-spacing:.14em;text-transform:uppercase;color:rgba(244,240,232,.5)}
.xs-car{position:absolute;top:14px;left:0;width:34px;height:20px;background:var(--paper);border-radius:4px;transform:translateX(calc(var(--p,1) * (var(--rw,300px) - 52px)))}
.xs-lane.jam .xs-car{background:var(--red)}
.xs-scr{position:absolute;right:3%;top:5px;width:8px;height:36px;background:var(--red);box-shadow:0 0 14px var(--red)}
.xs-twist{display:flex;align-items:baseline;gap:14px;margin:20px 0 0;padding-top:14px;border-top:1px solid #2b2b2b}
.xs-twist b{font:800 clamp(44px,8vw,72px)/1 var(--display);color:var(--red);font-variant-numeric:tabular-nums}
.xs-twist > span{font-size:15px;line-height:1.25}

/* Exhibit 4: heatmap sweep */
.xs-hm{overflow-x:auto;margin:0 0 12px}
.xs-hmgrid{display:grid;grid-template-columns:2.6rem repeat(24,minmax(20px,1fr));gap:2px;min-width:560px;position:relative}
.xs-hmgrid .rl{font:600 12px var(--body);color:rgba(244,240,232,.58);align-self:center}
.xs-hmgrid .xl{font:600 11px var(--body);color:rgba(244,240,232,.58);text-align:center}
.xs-hmgrid .c{aspect-ratio:1/1.1;opacity:1;transition:opacity .5s ease var(--d,0s),transform .5s ease var(--d,0s)}
.xs-js .xs-hmgrid .c{opacity:0;transform:scale(.6)}
.xs-js .xs-hmgrid.go .c{opacity:1;transform:none}
.xs-hmgrid .c.sat{outline:2px solid var(--paper);outline-offset:-1px}
.xs-js .xs-hmgrid.go .c.sat{animation:xspulse 2s ease-in-out 3.4s infinite}
@keyframes xspulse{0%,100%{box-shadow:0 0 0 0 rgba(244,240,232,.0)}50%{box-shadow:0 0 0 5px rgba(244,240,232,.22)}}
.xs-scale{display:flex;align-items:center;gap:8px;font-size:12px;color:rgba(244,240,232,.58);margin:0 0 4px}
.xs-scale i{display:inline-block;width:22px;height:10px}
.xs-stat{display:flex;align-items:center;gap:14px;margin:16px 0 0;padding-top:14px;border-top:1px solid #2b2b2b}
.xs-stat b{font:800 clamp(44px,8vw,72px)/1 var(--display);color:var(--red);font-variant-numeric:tabular-nums}
.xs-stat > span{font-size:15px;line-height:1.3;max-width:46ch}

@media (prefers-reduced-motion:reduce){
  .art .xs{opacity:1;transform:none;transition:none}
  .xs:not(.on) .xs-bezel{filter:none}
  .xs *{transition:none!important;animation:none!important}
  .xs-js .xs-bars .t i{width:var(--w)}
  .xs-js .xs-map .grp,.xs-js .xs-li,.xs-js .xs-big,.xs-js .xs-hmgrid .c{opacity:1;transform:none}
  .xs-js .xs-map .dr{stroke-dashoffset:0}
  .xs-js .xs-tag{opacity:1;transform:none}
}

/* lessons list */
.art ol.lessons{margin:0 0 1.4em;padding-left:1.4em}
.art ol.lessons li{font-size:19px;line-height:1.6;margin-bottom:.8em;color:#25231f}
.art ol.lessons li::marker{font:800 22px var(--display);color:var(--red-text)}

/* Landing-page "insight" card (same look and motion as the home page's "Where they go" card) */
.art .ins{margin:2.4em 0;background:#fff;border:1px solid var(--line);border-radius:12px;padding:clamp(22px,2.6vw,38px);opacity:0;transform:translateY(40px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.art .ins.on{opacity:1;transform:none}
.ins .i-tag{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font:600 12px var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--red-text);margin:0 0 14px}
.ins .toolbadge{font-style:normal;padding:3px 8px;border-radius:99px;background:var(--ink);color:#fff;letter-spacing:.06em;font-size:12px}
.art .ins .i-line{font:700 clamp(26px,3vw,44px)/1.05 var(--display);text-transform:uppercase;letter-spacing:.005em;color:var(--ink);margin:0}
.ins .i-line b{color:var(--red);font-weight:800}
.ins .flow{display:block;width:100%;max-width:620px;height:auto;margin:22px 0 6px;overflow:visible}
.ins .flow path{fill:none;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1s cubic-bezier(.4,.1,.2,1)}
.ins .flow .b1,.ins .flow .b2,.ins .flow .b3{transition-delay:.9s}.ins .flow .b2{transition-delay:1.05s}
.ins .flow .sc,.ins .flow .lb{transition:opacity .6s ease 1.9s}
.xs-js .ins .flow path{stroke-dashoffset:1}
.xs-js .ins .flow.go path{stroke-dashoffset:0}
.xs-js .ins .flow .sc,.xs-js .ins .flow .lb{opacity:0}
.xs-js .ins .flow.go .sc,.xs-js .ins .flow.go .lb{opacity:1}
.ins .hb{margin:22px 0 4px;display:grid;gap:12px}
.ins .hb>div{display:grid;grid-template-columns:minmax(0,170px) 1fr 54px;align-items:center;gap:12px;font-size:14px;color:#6a655b}
.ins .hb>div>i{display:block;height:16px;border-radius:99px;background:#d4cec1;width:var(--w);transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
.xs-js .ins .hb>div>i{width:0}
.xs-js .ins .hb.go>div>i{width:var(--w)}
.ins .hb>div.red>i{background:var(--red)}
.ins .hb>div>b{font:800 22px var(--display);color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.ins .hb>div.red>b{color:var(--red)}
.ins .hb>div.ink>i{background:#141414}
.art .ins .i-sub2{margin:28px 0 0;font:700 clamp(22px,2.2vw,30px)/1.1 var(--display);text-transform:uppercase;letter-spacing:.005em;color:var(--ink)}
.ins .i-sub2 b{font:inherit;color:var(--red)}
.art .ins .i-sub.hot{margin:20px 0 0;padding:2px 0 2px 14px;border-left:4px solid var(--red);color:var(--ink);font:700 clamp(18px,1.7vw,24px)/1.2 var(--body);letter-spacing:-.01em}
.art .ins .sample-note{margin:14px 0 0;font-size:12px;line-height:1.5;color:var(--mute-text)}
@media (max-width:560px){.ins .hb>div{grid-template-columns:minmax(0,104px) 1fr 48px}}
@media (prefers-reduced-motion:reduce){.art .ins{opacity:1;transform:none;transition:none}.ins .flow path{stroke-dashoffset:0!important;transition:none}.ins .flow .sc,.ins .flow .lb{opacity:1!important;transition:none}.ins .hb>div>i{width:var(--w)!important;transition:none}}

.art p.learn b{color:var(--red-text)}
.xs-k{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.xs-k .toolbadge{font-style:normal;padding:3px 8px;border-radius:99px;background:var(--paper);color:var(--ink);letter-spacing:.06em;font-size:12px}
.art-head .crumb a{display:inline-block;padding:14px 0;margin:-14px 0}
.xs-swipe{display:none}
@media (max-width:560px){.xs-swipe{display:block;margin:8px 0 0}}
.xs-hmgrid .rl{position:sticky;left:0;z-index:2;background:var(--ink);padding-right:4px}
.art .keyf{margin:2em 0;padding:22px clamp(18px,3vw,30px);background:#fff;border:1px solid var(--line);border-left:4px solid var(--red);border-radius:10px}
.art .keyf h2{margin:0 0 10px;font-size:clamp(26px,3vw,36px)}
.art .keyf ul{margin:0;padding-left:1.2em;display:grid;gap:10px}
.art .keyf li{line-height:1.45}
.art .keyf b{color:var(--ink)}
.art .dtable{margin:1.2em 0 1.8em;font-size:15px}
.art .dtable summary{cursor:pointer;font:600 14px var(--body);color:var(--red-text);padding:10px 0;min-height:44px;display:flex;align-items:center}
.art .dtable .tw{overflow-x:auto}
.art .dtable table{border-collapse:collapse;width:100%;min-width:300px;background:#fff;border:1px solid var(--line)}
.art .dtable caption{caption-side:top;text-align:left;padding:10px 12px;font-size:13px;color:var(--mute-text)}
.art .dtable th,.art .dtable td{padding:9px 12px;border-top:1px solid var(--line);text-align:left;font-weight:400}
.art .dtable thead th{font-weight:600;background:var(--paper-2)}
.art .dtable tbody th{font-weight:400}
.art .dtable td{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.art .related{margin:2.6em 0 1.6em}
.art .related h2{font-size:clamp(24px,2.6vw,32px);margin:0 0 8px}
.art .related ul{margin:0;padding-left:1.1em;display:grid;gap:6px}
.art p.closer{margin-top:2.2em;padding-top:1.4em;border-top:1px solid var(--line);font-size:clamp(20px,2.2vw,24px);line-height:1.5;color:var(--ink)}
.art .dtable summary{list-style:none}
.art .dtable summary::-webkit-details-marker{display:none}
.art .dtable summary::before{content:"";width:8px;height:8px;margin-right:12px;border-right:2px solid var(--red-text);border-bottom:2px solid var(--red-text);transform:rotate(-45deg);transition:transform .2s}
.art .dtable[open] summary::before{transform:rotate(45deg)}
.art .dtable.nums{margin:1.6em 0 0}
.art .dtable.nums .tw{margin:0 0 1.2em}