:root{
  --white:#FFFFFF;
  --black:#0D0E13;
  --cream:#E8E4DC;
  --gray: rgba(232,228,220,0.5);
  --f:'Outfit', system-ui, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: 60px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;}
body{
  font-family:var(--f);
  background:var(--black);
  color:var(--cream);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{display:block;width:100%;height:100%;object-fit:cover;}

/* ---------- NAV ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:28px var(--gutter);
  mix-blend-mode:difference;
}
.nav__logo{font-weight:700;font-size:20px;letter-spacing:-0.02em;color:var(--white);}
.nav__back{
  display:flex;align-items:center;gap:10px;
  font-family:var(--f);font-size:15px;font-weight:400;color:var(--white);
  background:none;border:none;cursor:pointer;
}
.nav__back svg{transition:transform .3s var(--ease);}
.nav__back:hover svg{transform:translateX(-4px);}

/* ---------- HEADER ---------- */
.work-head{
  padding:180px var(--gutter) 60px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  border-bottom:1px solid rgba(232,228,220,0.15);
}
.work-head__label{
  font-size:18px;font-weight:400;color:var(--gray);
  letter-spacing:.04em;
}
.work-head h1{
  font-size:clamp(48px,7vw,104px);
  font-weight:600;
  letter-spacing:-0.03em;
  line-height:1;
  margin-top:14px;
}
.work-head__count{
  font-size:16px;color:var(--gray);
  text-align:right;
}

/* ---------- LIST ---------- */
.work-list{
  padding:0 var(--gutter);
}
.work-row{
  position:relative;
  display:flex;
  align-items:center;
  gap:32px;
  padding:44px 0;
  border-bottom:1px solid rgba(232,228,220,0.15);
  cursor:pointer;
}
.work-row__index{
  font-size:16px;
  color:var(--gray);
  width:40px;
  flex-shrink:0;
}
.work-row__title{
  font-size:clamp(32px,5vw,72px);
  font-weight:500;
  letter-spacing:-0.02em;
  transition:transform .5s var(--ease), color .5s;
  flex:1;
}
.work-row__meta{
  display:flex;
  gap:48px;
  flex-shrink:0;
}
.work-row__meta span{
  display:block;
  font-size:14px;
  color:var(--gray);
}
.work-row__meta .meta-cat{width:180px;}
.work-row__meta .meta-year{width:60px;}
.work-row__arrow{
  width:44px;height:44px;
  border-radius:50%;
  border:1px solid rgba(232,228,220,0.25);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:transform .5s var(--ease), background .4s, border-color .4s;
}
.work-row__arrow svg{transition:transform .5s var(--ease);}

.work-row:hover .work-row__title{ transform:translateX(18px); color:var(--white); }
.work-row:hover .work-row__arrow{ background:var(--cream); border-color:var(--cream); }
.work-row:hover .work-row__arrow svg{ transform:rotate(45deg); }
.work-row:hover .work-row__arrow svg path,
.work-row:hover .work-row__arrow svg line{ stroke:var(--black); }

/* ---------- HOVER PREVIEW IMAGE ---------- */
.work-preview{
  position:fixed;
  top:50%;left:50%;
  width:420px;height:280px;
  transform:translate(-50%,-50%) scale(0.9);
  border-radius:4px;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  z-index:20;
  transition:opacity .4s var(--ease), transform .5s var(--ease);
  will-change:transform,opacity;
}
.work-preview.is-active{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.work-preview img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;
  transition:opacity .5s var(--ease);
}
.work-preview img.is-shown{ opacity:1; }

/* ---------- FOOTER ---------- */
.work-foot{
  display:flex;
  justify-content:space-between;
  padding:60px var(--gutter) 50px;
  font-size:14px;
  color:var(--gray);
}
.work-foot a{ color:var(--cream); }

@media (max-width:900px){
  .work-head{ flex-direction:column; align-items:flex-start; gap:18px; padding-top:140px;}
  .work-row{ flex-wrap:wrap; gap:14px; }
  .work-row__meta{ order:3; gap:24px; }
  .work-preview{ display:none; }
}

@media (max-width:900px){
  .work-row__title{ flex:1 1 0; min-width:0; }
  .work-row__arrow{ margin-left:auto; }
}