/* ===== the work index (/work/): the case rows in the home's 04 hover language, the hero's case index =====
   A case row (a.wc) is one link: name (h2), tags, the line, the detail, "Read the case". Hover or keyboard focus (.hv, set by
   pages/work.js; :focus-visible too): the row steps 10 px right (4 steps), an acid bar draws in at its left (6 steps), a
   dotted acid rule wipes along its foot (16 steps), the name and the case number go acid, "open ./case" types in at the
   right, and "Read the case" gets the acid block. Pressed: the bar flashes wide. Reduced motion: the same states, static. */
.wk-idx{margin-top:34px;max-width:30em;border-top:1px solid var(--line)}
.wk-idx a{display:grid;grid-template-columns:3.2em minmax(0,1fr) auto;align-items:center;min-height:44px;border-bottom:1px solid var(--line);color:var(--fg2);
  position:relative;transition:color .2s,transform .16s steps(4,end)}
.wk-idx b{font-weight:400;color:var(--mute)}
.wk-idx span{font-weight:600;color:var(--fg);font-size:13.5px}
.wk-idx i{font-style:normal;color:var(--mute)}
.wk-idx a::before{content:"";position:absolute;left:-14px;top:12px;bottom:12px;width:4px;background:var(--lime);clip-path:inset(0 0 100% 0);transition:clip-path .2s steps(5,end)}
.wk-idx a:hover,.wk-idx a:focus-visible{transform:translateX(8px);outline:0}
.wk-idx a:hover::before,.wk-idx a:focus-visible::before{clip-path:inset(0 0 0 0)}
.wk-idx a:hover b,.wk-idx a:focus-visible b,.wk-idx a:hover span,.wk-idx a:focus-visible span{color:var(--lime)}

.wc{display:block;position:relative;padding:2px 0 26px;color:var(--fg);transition:transform .16s steps(4,end)}
.wc h2{transition:color .25s}
.wc-tags{display:block;margin-top:14px;color:var(--fg2)}
.wc-tags span+span::before{content:"\00b7";margin:0 .6em;color:var(--mute)}
.wc-ln{display:block;margin-top:20px;font-size:16px;line-height:1.78;color:var(--fg2);max-width:34em}
.wc-dt{display:block;margin-top:12px;font-size:16px;line-height:1.78;color:var(--mute);max-width:34em;transition:color .25s}
.wc-more{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:10px;margin-top:24px;padding:6px 0;font:600 14px/1 var(--mono);color:var(--fg);transition:color 0s .03s}
.wc-more::before{content:"";position:absolute;left:-10px;right:-10px;top:-3px;bottom:-3px;z-index:-1;background:var(--lime);pointer-events:none;clip-path:inset(0 100% 0 0);transition:clip-path .15s steps(6,end)}
.wc-more .ar{display:inline-block;transition:transform .15s steps(3,end)}
.wc::before{content:"";position:absolute;left:-18px;top:6px;bottom:22px;width:4px;background:var(--lime);clip-path:inset(0 0 100% 0);transition:clip-path .24s steps(6,end)}
.wc::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:repeating-linear-gradient(90deg,var(--lime) 0 2px,transparent 2px 4px);clip-path:inset(0 100% 0 0);transition:clip-path .26s steps(16,end)}
.wc-cmd{position:absolute;right:0;bottom:30px;font:500 12.5px/1 var(--mono);color:var(--lime);white-space:nowrap;opacity:0;transition:opacity .15s;pointer-events:none}
.wc-cmd i{display:inline-block;width:.55em;height:1em;margin-left:2px;background:var(--lime);vertical-align:-.15em;animation:cmdcur 1s steps(1) infinite}
.wc:focus-visible{outline:0}
.wc:hover,.wc.hv,.wc:focus-visible{transform:translateX(10px)}
.wc:hover::before,.wc.hv::before,.wc:focus-visible::before,.wc:hover::after,.wc.hv::after,.wc:focus-visible::after{clip-path:inset(0 0 0 0)}
.wc:hover h2,.wc.hv h2,.wc:focus-visible h2{color:var(--lime)}
.wc:hover .wc-dt,.wc.hv .wc-dt,.wc:focus-visible .wc-dt{color:var(--fg2)}
.wc.hv .wc-cmd,.wc:focus-visible .wc-cmd{opacity:1}
.wc:hover .wc-more,.wc.hv .wc-more,.wc:focus-visible .wc-more{color:var(--ink)}
.wc:hover .wc-more::before,.wc.hv .wc-more::before,.wc:focus-visible .wc-more::before{clip-path:inset(0 0 0 0)}
.wc:hover .wc-more .ar,.wc.hv .wc-more .ar,.wc:focus-visible .wc-more .ar{transform:translateX(.6em)}
.wc:hover .u,.wc.hv .u,.wc:focus-visible .u{text-decoration-color:transparent}
.wc:active,.wc.prs{transform:translate(10px,2px);transition:none}
.wc.fl::before{animation:wcFl .2s steps(2,end)}
.wc.fl .wc-more::before{animation:wcFlB .16s steps(2,end)}
@keyframes wcFl{0%{width:10px;left:-24px}100%{width:4px;left:-18px}}
@keyframes wcFlB{0%{background:#FFFFFF}100%{background:#FFFFFF}}
.wk-sec .label b{color:var(--fg)}
.wk-sec h2 .dv{display:inline-block}
@media (prefers-reduced-motion:reduce){
  .wc,.wc::before,.wc::after,.wc-more::before,.wc-more .ar,.wk-idx a,.wk-idx a::before{transition:none}
  .wc:hover,.wc.hv,.wc:focus-visible,.wc:active,.wk-idx a:hover,.wk-idx a:focus-visible{transform:none}
  .wc-cmd i,.wc.fl::before,.wc.fl .wc-more::before{animation:none}
}
@media (max-width:860px){
  .wk-idx{margin-top:26px}
  .wk-sec .col>.wc{order:5}
  .wc{padding-bottom:6px}
  .wc-cmd{display:none}
  .wc-more{min-height:44px;margin-top:14px}
  .wc-ln{margin-top:16px}
  .wc::before,.wc::after{display:none}
  .wk-next .cta{margin-top:18px}
}