/* =========================================================================
   cursor.css — the custom dot cursor and the white hover label
   (number | project name / category). Driven by js/components/cursor.js.
   ========================================================================= */

.cursor{position:fixed;left:0;top:0;z-index:50;pointer-events:none;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--ink);border:1px solid transparent;transition:width .3s,height .3s,margin .3s,background .3s,border-color .3s}
.cursor.big{width:46px;height:46px;margin:-23px 0 0 -23px;background:transparent;border-color:var(--ink)}
/* over white paper the white dot would vanish — it turns dark */
.cursor.ink{background:#111}
.cursor.ink.big{background:transparent;border-color:#111}

.tag{position:fixed;left:0;top:0;z-index:49;pointer-events:none;display:flex;gap:8px;align-items:center;padding:7px 12px 7px 9px;background:#fff;color:#111;opacity:0;transition:opacity .25s;white-space:nowrap;box-shadow:0 10px 30px -12px rgba(30,60,120,.35)}
.tag.on{opacity:1}
.tag svg{width:12px;height:12px;flex:none}
.tag .tno{align-self:stretch;display:flex;align-items:center;padding-right:9px;margin-right:1px;border-right:1px solid #e3e5e9;font-size:11px;letter-spacing:.08em;color:#6b6f76;font-variant-numeric:tabular-nums}
.tag b{display:block;font-family:var(--display);font-style:italic;font-weight:500;font-size:17px;line-height:1.05}
.tag small{display:block;margin-top:2px;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#6b6f76}

/* touch screens keep the normal cursor and have no hover label */
@media (hover:none),(pointer:coarse){.cursor,.tag{display:none}}
@media (hover:hover) and (pointer:fine){body,a,button,.card{cursor:none}}