@font-face {
  font-family: Inter;
  src: url('/assets/inter-400.woff') format('woff');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root { color-scheme: light; font-family: Inter, Arial, sans-serif; color: #3a3a3a; background: #fff; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body { -webkit-font-smoothing: antialiased; }
.screen { position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh; overflow: hidden; background: #fff; }
.identity { position: absolute; z-index: 1; left: 0; top: 50%; width: 100%; transform: translateY(-50%); }
.identity::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #bdbdbd; }
.wordmark { position: relative; box-sizing: content-box; width: clamp(152px, 44.8vw, 288px); margin: 0 auto; padding: 10px 24px; background: #fff; font-size: 0; line-height: 0; }
.wordmark svg { display: block; width: 100%; height: auto; overflow: visible; }
.glyph { transform-box: fill-box; transform-origin: center; }
[data-motion] { will-change: transform; }
.wood-fragment { --wood-size: clamp(600px, 72vw, 1120px); position: absolute; z-index: 0; width: var(--wood-size); aspect-ratio: 1; right: calc(var(--wood-size) * -0.46); bottom: calc(var(--wood-size) * -0.60); transform: rotate(-45deg); pointer-events: none; user-select: none; }
.wood-fragment img { display: block; width: 100%; height: 100%; object-fit: contain; }
.email { position: absolute; z-index: 2; left: 50%; bottom: calc(clamp(32px, 7.5vh, 72px) + env(safe-area-inset-bottom)); transform: translateX(-50%); padding: 12px 10px; color: #737373; font-size: 14px; font-weight: 400; line-height: 1.5; text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.email::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 8px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: center; transition: transform .25s ease; }
.email:hover, .email:focus-visible { color: #3a3a3a; }
.email:hover::after, .email:focus-visible::after { transform: scaleX(1); }
.email:focus-visible { outline: 1px solid #737373; outline-offset: 5px; border-radius: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.not-found { text-align: center; font-size: 14px; line-height: 1.6; }
.not-found p { margin: 30px 20px 0; color: #737373; }
.not-found a { color: #3a3a3a; text-underline-offset: 4px; }
@media (max-width: 700px) { .wood-fragment { --wood-size: 620px; right: -400px; bottom: -360px; } }
@media (max-width: 400px) { .wordmark { padding-inline: 20px; } .email { font-size: 13px; } }
@media (max-height: 400px) { .identity { transform: translateY(calc(-50% - 12px)); } .wood-fragment { --wood-size: 480px; right: -270px; bottom: -290px; } .email { bottom: calc(16px + env(safe-area-inset-bottom)); } }
@media (max-height: 240px) { .wordmark { max-width: 184px; } .email { bottom: 6px; } }
@media (prefers-reduced-motion: reduce) { [data-motion] { will-change: auto; } .email::after { transition: none; } }