.work { padding-top: clamp(56px, 6vw, 88px); }

.work .head { flex-wrap: wrap; }
.work .head { align-items: flex-end; }
.work-note { flex: 1; max-width: 46ch; text-wrap: balance; margin-left: auto; color: var(--ink-3); font-size: 14.5px; line-height: 1.5; text-align: right; }
.work .keys { display: none; }

.drum { position: relative; height: clamp(182px, 31.2vw + 70px, 425px); outline: 0; }
.drum canvas { width: 100%; height: 100%; cursor: grab; touch-action: pan-y; opacity: 0; transition: opacity .6s; }
.drum canvas:active { cursor: grabbing; }
.drum.is-ready canvas { opacity: 1; }
.drum:focus-visible canvas { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .6)); }


.work .wrap > .pager { margin: clamp(18px, 2vw, 26px) auto 0; }

.kinds { margin-top: clamp(48px, 6vw, 80px); }
.kinds .row { margin: 0 -12px; }
.kinds .tile { background-image: var(--grain), linear-gradient(180deg, #2c2e33, #1d1e22); }
.kinds .tile img { width: 84%; right: -8%; bottom: -6%; filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .45)); }
.kinds .k-knife img { width: 118%; right: -30%; bottom: 8%; transform: rotate(-24deg); }
.kinds .k-knife:hover img { transform: rotate(-24deg) translateY(-4px) scale(1.05); }
.kinds .pager { margin: 20px auto 0; }

@media (max-width: 900px) {
  .work-note { order: 3; flex-basis: 100%; max-width: none; margin: 0; text-align: left; }
  .work .keys { display: flex; gap: 6px; }
}