.works-hero{
  position:relative;
  height:58vh;
  min-height:380px;
  margin-top:0;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:var(--plum);
}

.works-hero__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 45%;
  opacity:0.9;
  transform:scale(1.08);
}

.works-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(36,24,49,0.04) 0%, rgba(36,24,49,0.32) 100%);
}

.works-hero__inner{
  position:relative;
  z-index:1;
  width:100%;
  max-width:1680px;
  margin:0 auto;
  padding:0 var(--edge) 46px;
  color:var(--paper);
  text-shadow:0 2px 12px rgba(0,0,0,0.35);
}

.works-hero__inner h1{color:var(--paper);}

.works-hero__meta{
  margin-top:14px;
  font-size:0.92rem;
  color:rgba(250,248,241,0.88);
  max-width:46ch;
}

/* ---------------------------------------------------------
   SORT BAR
   --------------------------------------------------------- */
.works-sort{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:40px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
}

.works-sort__label{
  font-size:0.72rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--ink-soft);
  flex:none;
}

.works-sort__options{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.works-sort__btn{
  font-family:var(--font-body);
  font-size:0.78rem;
  font-weight:500;
  letter-spacing:0.03em;
  padding:7px 18px;
  border-radius:999px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink-soft);
  cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}

.works-sort__btn:hover{
  border-color:var(--chartreuse-deep);
  color:var(--ink);
}

.works-sort__btn.is-active{
  background:var(--chartreuse);
  border-color:var(--chartreuse);
  color:var(--ink);
  font-weight:600;
}

.works-sort__btn.is-active[data-sort="medium"]{
  background:var(--chartreuse);
  border-color:var(--chartreuse);
  color:var(--ink);
}

/* medium sub-options — slide in to the right */
.works-sort__sub-wrap{
  overflow:hidden;
  width:0;
  transition:width .35s var(--ease);
  display:flex;
}

.works-sort__sub-wrap.is-open{
  width:270px;
}

.works-sort__sub{
  display:flex;
  gap:4px;
  white-space:nowrap;
}

.works-sort__sub-btn{
  font-family:var(--font-body);
  font-size:0.78rem;
  font-weight:500;
  padding:7px 16px;
  border-radius:999px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink-soft);
  cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}

.works-sort__sub-btn:hover{
  border-color:var(--chartreuse-deep);
  color:var(--ink);
}

.works-sort__sub-btn.is-active{
  background:#F0FF99;
  border-color:#F0FF99;
  color:var(--ink);
  font-weight:600;
}

/* ---------------------------------------------------------
   GRID
   --------------------------------------------------------- */
.works-main{
  padding:64px var(--edge) 100px;
  max-width:1680px;
  margin:0 auto;
}

.works-grid{
  column-count:3;
  column-gap:20px;
}

@media (max-width:820px){
  .works-grid{column-count:2; column-gap:18px;}
}

@media (max-width:540px){
  .works-grid{column-count:1; column-gap:0;}
}

.work-card{
  display:inline-block;
  width:100%;
  text-decoration:none;
  color:var(--ink);
  margin-bottom:32px;
  break-inside:avoid;
}

@media (max-width:820px){
  .work-card{margin-bottom:28px;}
}

@media (max-width:540px){
  .work-card{margin-bottom:24px;}
}

.work-card__frame{
  position:relative;
}

.work-card__frame img{
  width:100%;
  height:auto;
  display:block;
  transition:transform .35s var(--ease);
}

.work-card:hover .work-card__frame img{
  transform:scale(1.03);
}

.work-card__tag{
  flex:none;
  background:var(--chartreuse);
  color:var(--ink);
  font-size:0.6rem;
  font-weight:700;
  letter-spacing:0.05em;
  text-transform:uppercase;
  padding:2px 8px;
  border-radius:999px;
  line-height:1.3;
}

.work-card__status{
  display:inline-block;
  color:var(--chartreuse-deep);
  font-size:0.66rem;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
}

.work-card__meta{
  padding-top:14px;
}

.work-card__title-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:4px;
}

.work-card__title{
  font-family:"Instrument Serif",serif;
  font-style:normal;
  font-weight:400;
  font-size:1.15rem;
  line-height:1.2;
  transition:color .2s var(--ease);
}

.work-card:hover .work-card__title{
  color:var(--chartreuse-deep);
}

.work-card__sub{
  font-size:0.82rem;
  color:var(--ink-soft);
  display:flex;
  gap:4px;
  flex-wrap:wrap;
  margin-top:4px;
  align-items:center;
  justify-content:space-between;
}

.work-card__sub span:not(:last-child):not(.work-card__price)::after{
  content:"·";
  margin-left:6px;
  color:var(--line);
}

.work-card__price{
  margin-left:auto;
  font-weight:600;
  color:var(--ink);
}