@font-face { font-family: dante; src: url(fonts/dante/regular.otf) format("opentype"); font-weight: 400; font-display: swap; }

:root {
  --bg: #f3eee4;
  --fg: #000;
  --stroke: #cfcac0;
  --footer-h: 84px;
  --serif: dante, "Iowan Old Style", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  scrollbar-color: var(--stroke) var(--bg);
  cursor: url(cursors/cursor-default.svg) 6 1, default;
}

/* Hand-drawn cursors, same as offscript.vc */
p, h1, span, footer { cursor: url(cursors/cursor-text.svg) 10 10, text; }
a, a *, button { cursor: url(cursors/cursor-pointer.svg) 6 1, pointer; }
::selection { background: #000; color: var(--bg); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.paper, .spotlight {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; user-select: none;
  transition: opacity 1s;
}
/* Same as the offscript.vc homepage: texture at rest, spotlight under the cursor on hover */
.paper { object-fit: cover; object-position: center; opacity: .75; }
.spotlight {
  opacity: 0;
  background-image: radial-gradient(circle at var(--x, 50%) var(--y, 50%), #f3eee400, var(--bg) 50%);
}
main.is-hovering .spotlight { opacity: 1; }

main {
  position: relative;
  overflow: hidden;
  min-height: calc(100dvh - var(--footer-h));
  display: grid; place-items: center;
  padding: 0 16px;
}

.email {
  position: relative;
  z-index: 1;
  display: inline-block;
  color: inherit; text-decoration: none;
  font-size: clamp(22px, 3.4vw, 46px);
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.email-text {
  display: inline-block;
  animation: rise .8s cubic-bezier(.2,.7,.2,1) both;
}

/* Hand-drawn underline inks itself in on hover */
.ink {
  position: absolute;
  left: -1%; top: 96%;
  width: 102%; height: .3em;
  overflow: visible; pointer-events: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .45s cubic-bezier(.4,0,.2,1);
}
.ink path {
  fill: none; stroke: #000; stroke-width: 1.3; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.email:hover .ink,
.email:focus-visible .ink { clip-path: inset(0 -2% 0 -2%); }
.email:focus-visible { outline: none; }

/* Footer */
.footer {
  height: var(--footer-h);
  display: flex; align-items: center; justify-content: center;
  padding: 0 16px;
  border-top: 1px solid var(--stroke);
  font-size: 16px; text-align: center;
}

@keyframes rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .email-text { animation: none; }
  .ink { transition: none; }
}