:root { color-scheme: dark; background: #000; color: #fff; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; }
/* A still tactile surface. No animated grain or full-screen render loop. */
body::before { content: ""; position: fixed; inset: 0; background: url("./assets/grain.png") repeat; opacity: .09; pointer-events: none; }
main { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 24px; }
.identity { position: relative; width: min(68vw, 640px); }
.mark { margin: 0; transform: translate(var(--x, 0px), var(--y, 0px)) rotate(var(--r, 0deg)); transition: transform 650ms cubic-bezier(.16, 1, .3, 1); }
.mark img { display: block; width: 100%; height: auto; filter: brightness(0) invert(1); user-select: none; }
.email { position: absolute; top: calc(100% + 24px); left: 50%; transform: translateX(-50%); display: grid; place-items: center; min-height: 44px; padding: 8px 14px; color: #a8a8a8; font-size: 13px; line-height: 1.4; letter-spacing: .025em; text-decoration: none; white-space: nowrap; transition: color 180ms ease-out; }
.email:hover { color: #fff; text-decoration: underline; text-underline-offset: 5px; }
.email:focus-visible { color: #fff; outline: 1px solid #fff; outline-offset: 3px; }
::selection { color: #000; background: #fff; }
@media (max-width: 600px) { .identity { width: min(82vw, 640px); } .email { top: calc(100% + 20px); } }
@media (max-height: 500px) { .identity { width: min(60vw, 45svh * 413 / 184); } .email { top: calc(100% + 8px); } }
@media (prefers-reduced-motion: reduce) { .mark { transform: none !important; transition: none; } .email { transition: none; } }