/* name card: the name retypes itself through a cycle of labels (namecard.js). transform / opacity / clip-path only. */
.nc-name { --bc: var(--lilac); font-style: italic; color: #1d1e20; width: 392px; height: 168px; }
.nc-name .hl { position: relative; display: inline-block; background: var(--lilac); padding: 0 12px 3px 7px; margin-bottom: 5px; }
.nc-name .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nm-row { position: absolute; left: 0; top: 0; white-space: pre; --bc: var(--lilac); }
.nm-row[hidden] { display: none; }
.nm-in { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--bc); clip-path: inset(-8px -48px -8px 0); will-change: clip-path; }
.nm-tx { position: relative; display: block; line-height: .95; padding: 0 12px 3px 7px; letter-spacing: -.03em; font-style: italic; }
.nm-tx i { font: inherit; }
.nm-zw { position: absolute; inset: 0; overflow: hidden; clip-path: inset(0); pointer-events: none; }
.nm-z { position: absolute; left: 0; top: 0; width: 48px; height: 100%; transform: translateX(-60px); will-change: transform; }
.nm-z { background: repeating-conic-gradient(#f6f3ec 0 25%, var(--bc) 0 50%) 0 0 / 12px 12px; }
.nm-z::after { content: ''; position: absolute; inset: 0; background: repeating-conic-gradient(var(--bc) 0 25%, #1d1e20 0 50%) 0 0 / 12px 12px; opacity: 0; animation: nm-flick .16s steps(1) infinite; }
@keyframes nm-flick { 50% { opacity: .9; } }
.nm-tile { position: absolute; display: block; width: 15px; height: 15px; transform-origin: 50% 50%; }
.nm-tile.t1 { left: -6px; top: -7px; background: var(--lime); }
.nm-tile.t2 { right: 34px; top: -9px; width: 13px; height: 13px; background: var(--orange); }
.nm-tile.t3 { left: 70px; bottom: -6px; width: 11px; height: 11px; background: var(--pink); }
.nm-chip { position: absolute; right: 26px; top: 20px; height: 17px; padding: 0 7px; display: flex; align-items: center; background: var(--lime); color: #1d1e20;
  font: 500 9.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: pre; pointer-events: none; box-shadow: 0 6px 10px -6px rgba(var(--shadow-c, 0 0 0), .5); }
.nm-chip::after { content: ''; width: 5px; height: 9px; margin-left: 2px; background: currentColor; animation: nm-flick .7s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .nm-z, .nm-chip::after { animation: none; } }
/* headshot: its own warm instant print on the desk (a stage-level [data-movable]), with a strip of tape */
.nm-photo { position: absolute; width: 132px; height: 170px; padding: 7px 7px 25px; box-sizing: border-box; background: #f6f3ec; transform: rotate(-5deg); pointer-events: auto;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 14px 20px -10px rgba(0, 0, 0, .7), 0 2px 4px rgba(0, 0, 0, .35); }
.nm-photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: sepia(.18) saturate(.92) contrast(1.02); pointer-events: none; }
.nm-photo::after { content: ''; position: absolute; inset: 7px 7px 25px; background: linear-gradient(135deg, rgba(255, 190, 120, .16), rgba(120, 80, 160, .1)); mix-blend-mode: multiply; pointer-events: none; }
.nm-photo::before { content: ''; position: absolute; left: 50%; top: -8px; width: 34px; height: 14px; margin-left: -17px; background: var(--lime); opacity: .85; transform: rotate(-6deg); z-index: 1; }
html.dark .nm-photo { filter: brightness(.72); }