.hotspot.writing{--x:39%;--y:80%;--w:27%;--h:15%;z-index:6;overflow:visible}
.hotspot.writing .writing-art{position:absolute;inset:-5% -8%;width:116%;height:110%;object-fit:contain;opacity:.84;filter:brightness(.82) saturate(.72) sepia(.12) drop-shadow(0 4px 3px rgba(21,11,5,.38));transform:rotate(-1.5deg);transform-origin:50% 60%;transition:filter .25s ease,opacity .25s ease,transform .25s ease;pointer-events:none}
.hotspot.writing:before{inset:12% 3% 16%;border-radius:48%;background:radial-gradient(ellipse,rgba(255,221,145,.12),transparent 70%)}
.hotspot.writing i{left:54%;top:48%;width:7px;height:7px;opacity:.72}
.hotspot.writing span{bottom:-11%}
.hotspot.writing:hover .writing-art,.hotspot.writing:focus-visible .writing-art{opacity:.97;filter:brightness(.9) saturate(.82) sepia(.08) drop-shadow(0 5px 4px rgba(21,11,5,.42)) drop-shadow(0 0 10px rgba(255,217,133,.16));transform:translateY(-2px) rotate(-1deg) scale(1.015)}

@media(max-width:720px){
  .hotspot.writing{--x:42%;--y:77%;--w:32%;--h:11%;z-index:6}
  .hotspot.writing .writing-art{inset:0 -5%;width:110%;height:100%;transform:rotate(-2deg);opacity:.82}
  .hotspot.writing span{left:50%;right:auto;bottom:-18%;transform:translate(-50%,0)}
  .hotspot.writing:hover span,.hotspot.writing:focus-visible span{transform:translate(-50%,0)}
  .hotspot.writing i{left:53%;top:48%}
}