@font-face { font-family: "Martian Mono"; font-weight: 400; font-display: swap; src: url(/fonts/martian-mono-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Martian Mono"; font-weight: 700; font-display: swap; src: url(/fonts/martian-mono-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url(/fonts/inter-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url(/fonts/inter-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url(/fonts/inter-latin-700-normal.woff2) format("woff2"); }

/* The locked look (10/26): Terminal, white and black, jade #00A86B as the one accent.
   Jade on white is 3.1:1, so it only goes on large text, the prompt, the cursor and the button. */
:root {
  --bg: #FFFFFF;
  --ink: #0A0A0A;
  --sub: #555555;
  --line: #E6E6E6;
  --acc: #00A86B;
  --mono: "Martian Mono", ui-monospace, Menlo, monospace;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 18px/1.6 var(--sans); }
a { color: inherit; }
.acc { color: var(--acc); }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

.nav { display: flex; justify-content: space-between; align-items: center; padding-top: 26px; padding-bottom: 26px; }
.mark { font: 700 20px var(--mono); letter-spacing: -.02em; text-decoration: none; }
.nav nav { display: flex; gap: 28px; font: 500 16px var(--sans); }
.nav nav a { text-decoration: none; color: var(--sub); }
.nav nav a:hover { color: var(--ink); }

.hero { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: end; padding-top: 40px; }
.hero-text { padding-bottom: 120px; }
h1 { margin: 0; font: 700 clamp(34px, 4.6vw, 52px)/1.22 var(--mono); letter-spacing: -.04em; max-width: 13em; }
.cursor { color: var(--acc); margin-left: .08em; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.sub { margin: 22px 0 0; max-width: 30em; font-size: 20px; color: var(--sub); }
.btn { display: inline-block; margin-top: 30px; padding: 15px 24px; border-radius: 6px; background: var(--acc); color: #FFFFFF;
       font: 700 19px var(--sans); text-decoration: none; }
.btn:hover { background: #008F5B; }

/* The avatar: three stacked frames, one shown at a time (site.js). Pixel art scales by whole numbers only. */
.avatar { position: relative; width: 285px; height: 693px; padding: 0; border: 0; background: none; cursor: pointer; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.avatar .f-blink, .avatar .f-hand { visibility: hidden; }
.avatar.blink .f-blink, .avatar.hand .f-hand { visibility: visible; }
.avatar.blink .f-base, .avatar.hand .f-base { visibility: hidden; }
.avatar:focus-visible { outline: 3px solid var(--acc); outline-offset: 6px; }

.foot { display: flex; margin-top: 0; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); padding-top: 28px;
        padding-bottom: 40px; font: 400 14px var(--mono); color: var(--sub); }

@media (max-width: 860px) {
  .nav nav { gap: 18px; font-size: 15px; }
  .hero { grid-template-columns: 1fr; gap: 8px; padding-top: 16px; }
  .hero-text { padding-bottom: 0; }
  h1 { font-size: clamp(26px, 7.4vw, 38px); }
  .sub { font-size: 18px; }
  .avatar { width: 190px; height: 462px; justify-self: center; margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; }
}