/* Work index — ported from design-handoff/claude-design/WorkIndex.dc.html.
   Layout breakpoint follows the prototype: mob = w < 760. */

.work-index main{position:relative;z-index:2;padding-top:calc(var(--hdr-h) + 16svh)}
@media (max-width:759px){
  .work-index{--small:11px}
  .work-index main{padding-top:calc(var(--hdr-h) + 12svh)}
}

/* ---------- opening ---------- */
.wopen{padding:0 var(--m);display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;row-gap:20px;align-items:end}
.wopen__mask{overflow:hidden;padding-bottom:.04em}
.wopen__h{margin:0;font-size:clamp(64px, 12vw, 200px);font-weight:400;line-height:.92;letter-spacing:-.055em}
.wopen__intro{display:flex;gap:16px;max-width:340px;padding-bottom:calc(clamp(64px, 12vw, 200px) * .1);
  font-size:var(--small);line-height:1.5;letter-spacing:.01em;color:var(--sm)}
.wopen__intro span{flex:none}
.wopen__intro p{margin:0;text-wrap:pretty}
@media (max-width:759px){ .wopen{grid-template-columns:minmax(0,1fr)} }

.js .wopen__h{animation:wmask 1.1s cubic-bezier(.16,1,.3,1) both}
.js .wopen__intro{animation:wfade .8s ease .3s both}
@keyframes wmask{from{transform:translateY(105%)}}
@keyframes wfade{from{opacity:0}}

/* ---------- list ---------- */
.wlist{position:relative;margin-top:12svh;padding:0 var(--m)}
@media (max-width:759px){ .wlist{margin-top:8svh} }
.rows{list-style:none;margin:0;padding:0}
.wlist__end{height:1px;background:var(--rule)}

.row__a{position:relative;display:block;padding:22px 0 26px;transition:opacity .4s ease}
.rows.has-hover .row__a:not(.is-hover){opacity:.22}

.row__line{position:absolute;top:0;left:0;right:0;height:1px;background:var(--rule);transform-origin:left center;
  transition:transform 1.1s cubic-bezier(.87,0,.13,1) calc(var(--i4) * .08s)}

.row__thumb{display:none}

.row__grid{--name:clamp(32px, 5vw, 80px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,6fr) minmax(0,2.5fr) minmax(0,2.5fr);column-gap:24px;align-items:start}
.row__n{font-size:var(--small);line-height:16px;letter-spacing:.01em;color:var(--sm);padding-top:calc(var(--name) * .38)}
/* industry: under the name, same size as the service / work columns */
.row__mask--ind{margin-top:10px}
.row__ind{display:block;font-size:15px;line-height:1.4;letter-spacing:-.005em;color:var(--sm);
  transition:transform 1s cubic-bezier(.16,1,.3,1) calc(.31s + var(--i4) * .08s)}
/* two columns: main service | the actual work, one pair per line */
.row__svc,.row__work{display:flex;flex-direction:column;gap:6px;padding-top:calc(var(--name) * .3);
  font-size:15px;line-height:1.4;letter-spacing:-.005em}
.row__svc{color:var(--sm)}
.row__work{color:var(--fg)}

.row__mask{display:block;overflow:hidden;padding-bottom:.2em;margin-bottom:-.2em}
.row__name{display:flex;flex-wrap:wrap;font-size:var(--name);line-height:1.04;letter-spacing:-.045em;
  transition:transform 1s cubic-bezier(.16,1,.3,1) calc(.25s + var(--i4) * .08s)}
/* letter roll (built by work-index.js) */
.row__w{display:flex}
.row__l{position:relative;display:block;overflow:hidden;white-space:pre;margin-bottom:-.14em}
.row__l>span{display:block;padding-bottom:.14em;transition:transform .55s cubic-bezier(.45,0,.55,1) calc(var(--j) * 18ms)}
.row__l>span>span{position:absolute;left:0;top:100%}
.row__a.is-hover .row__l>span{transform:translateY(-100%)}

/* row reveal (JS adds .is-seen; skipped with reduced motion) */
@media (prefers-reduced-motion:no-preference){
  .js .row:not(.is-seen) .row__line{transform:scaleX(0)}
  .js .row:not(.is-seen) .row__name,.js .row:not(.is-seen) .row__ind{transform:translateY(108%)}
}

/* ---------- mobile rows ---------- */
@media (max-width:759px){
  .row__a{padding:20px 0 26px}
  .row__thumb{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:2px;background:var(--ph);margin-bottom:18px}
  .row__thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
  .row__grid{--name:clamp(30px, 8.5vw, 40px);grid-template-columns:28px minmax(0,1fr) minmax(0,1fr);row-gap:18px}
  .row__who{grid-column:2 / 4}
  .row__svc{grid-column:2}
  .row__work{grid-column:3}
  .row__svc,.row__work,.row__ind{padding-top:0;font-size:14px}
  .wprev{display:none}
}

/* ---------- cursor preview (desktop) ---------- */
.wprev{position:fixed;left:0;top:0;z-index:1;width:28vw;aspect-ratio:16/10;pointer-events:none;overflow:hidden;
  border-radius:2px;background:var(--ph);clip-path:inset(100% 0 0 0);
  transition:clip-path .55s cubic-bezier(.76,0,.24,1);will-change:transform}
.wprev.is-on{clip-path:inset(0 0 0 0)}
.wprev img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;opacity:0;transition:opacity .35s ease}
.wprev img.is-on{opacity:1}
.theme-ready .wprev{transition:clip-path .55s cubic-bezier(.76,0,.24,1), background-color var(--theme-t)}
html:not(.js) .wprev{display:none}

/* ---------- footer (prototype: no top rule, generous gap) ---------- */
.work-index .foot{border-top:0;margin-top:22svh;row-gap:12px}
.foot__mid{display:flex;gap:6px}
@media (max-width:759px){ .work-index .foot{grid-template-columns:minmax(0,1fr) auto} }

@media (prefers-reduced-motion:reduce){
  .js .wopen__h,.js .wopen__intro{animation:none}
}