.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,56px) clamp(16px,2.4vw,32px);padding-bottom:clamp(88px,11vw,140px)}
.work{display:block;width:100%;cursor:pointer;text-align:left;background:none;border:none;padding:0;font:inherit;color:inherit}
.work .pic{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--beige)}
.work .pic img{object-position:50% 35%;transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.work:hover .pic img{transform:scale(1.04)}
.work .status{position:absolute;top:12px;left:12px;font-family:var(--serif-en);font-size:12px;letter-spacing:.16em;padding:1px 10px;background:rgba(250,248,244,.92);color:var(--ink)}
.work .status.made{background:rgba(28,25,22,.82);color:var(--on-dark)}
.work .meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.work .cat{font-family:var(--serif-en);color:var(--gold);font-size:13px;letter-spacing:.2em}
.work .name{font-size:15px;letter-spacing:.06em}
.work .kimono{font-size:12.5px;color:var(--sub)}

dialog#detail{margin:auto;width:min(1080px,calc(100% - 32px));max-height:calc(100vh - 48px);border:none;padding:0;background:var(--ivory);overflow:auto}
dialog#detail::backdrop{background:rgba(20,16,12,.78)}
dialog#detail[open]{animation:grow .35s ease-out}
@keyframes grow{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.detail{display:grid;grid-template-columns:6fr 5fr}
.detail .big{background:var(--beige);min-height:360px}
.detail .big img{object-fit:contain;height:100%;max-height:calc(100vh - 48px)}
.detail .info{padding:clamp(40px,5vw,64px) clamp(24px,4vw,48px);position:relative}
.detail .close{position:absolute;top:16px;right:20px;background:none;border:none;font-family:var(--serif-en);font-size:13px;letter-spacing:.24em;cursor:pointer;color:var(--ink)}
.detail .cat{font-family:var(--serif-en);color:var(--gold);letter-spacing:.2em;font-size:13px}
.detail h2{font-weight:400;font-size:26px;letter-spacing:.1em;margin:6px 0 24px}
.detail .facts-table > div{grid-template-columns:110px 1fr;padding:12px 2px;font-size:14px}
.detail p{color:var(--sub);font-size:14px;margin:24px 0 28px}

@media (max-width:860px){
  .grid{grid-template-columns:1fr 1fr}
  .detail{grid-template-columns:1fr}
  .detail .big{min-height:0}
  .detail .big img{max-height:60vh}
}
.work .no{font-family:var(--serif-en);color:var(--ink);font-size:15px;letter-spacing:.12em}