@font-face {
  font-family: "Editorial Old";
  src: url("../assets/fonts/editorial-old-regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Fragment Mono";
  src: url("../assets/fonts/fragment-mono-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/ibm-plex-mono-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/ibm-plex-mono-medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

:root {
  --primitive-canvas: oklch(0.145 0 0);
  --primitive-paper: oklch(0.93 0.005 90);
  --surface: var(--primitive-canvas);
  --text: var(--primitive-paper);
  --edge: max(24px, env(safe-area-inset-left));
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body {
  min-width: 320px;
  background: var(--surface);
  color: var(--text);
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 1px solid var(--text); outline-offset: 4px; }
::selection { background: var(--text); color: var(--surface); }

.entry { position: relative; width: 100%; height: 100dvh; min-height: 480px; overflow: hidden; background: #0a0a0a; }
#ascii-canvas, .portrait-layer { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.portrait-layer { z-index: 1; }
.corner {
  position: absolute;
  z-index: 1;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bottom-left { bottom: max(24px, env(safe-area-inset-bottom)); left: var(--edge); white-space: nowrap; }
.identity h1, .social-links { font: inherit; line-height: inherit; letter-spacing: inherit; }
.social-links { display: flex; align-items: center; gap: 18px; }
.social-links a { opacity: 0.82; transition: opacity 160ms ease-out; }
.social-links a:hover, .social-links a:focus-visible { opacity: 1; }
.bottom-right {
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 8px 24px;
}
.bottom-right a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  opacity: 0.82;
  transition: opacity 160ms ease-out;
}
.bottom-right a:hover { opacity: 1; }

.portrait-link {
  position: absolute;
  z-index: 2;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  width: 65.2px;
  height: 65.2px;
  cursor: pointer;
  transform-origin: bottom right;
  transition: transform 180ms ease-out;
}
#resume-face {
  display: block;
  width: 61.2px;
  height: 61.2px;
  pointer-events: none;
}
.portrait-link:hover, .portrait-link:focus-visible { transform: scale(1.08); }
.portrait-link:focus-visible { outline-offset: 4px; }

@media (max-width: 600px) {
  .bottom-right {
    bottom: max(64px, env(safe-area-inset-bottom));
    display: flex;
    gap: 0 18px;
    text-align: right;
  }
  .bottom-right a { justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}