/* apeonifone: pixel style. true black, robinhood chain lime, hard edges. */
@font-face { font-family: "Press Start 2P"; src: url("/fonts/pressstart2p.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "VT323"; src: url("/fonts/vt323.woff2") format("woff2"); font-display: swap; }

:root {
  --bg: #000000;
  --fg: #e8e8e8;
  --muted: #7a7a7a;
  --line: #1f1f1f;
  --green: #ccff00;
  --green-dim: #4a5c00;
  --px: 4px;            /* one "pixel" of the ui */
  --display: "Press Start 2P", "Courier New", monospace;
  --body: "VT323", "Courier New", monospace;
}
* { box-sizing: border-box; }
html { background: var(--bg); color: var(--fg); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: 22px;
  line-height: 1.35;
  -webkit-font-smoothing: none;
  font-smooth: never;
}
img { image-rendering: pixelated; image-rendering: crisp-edges; display: block; max-width: 100%; height: auto; }

/* faint pixel grid behind everything */
.grid {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(204, 255, 0, .05) var(--px), transparent var(--px)),
    linear-gradient(to bottom, rgba(204, 255, 0, .05) var(--px), transparent var(--px));
  background-size: 32px 32px;
}

main {
  max-width: 40rem;
  margin: 0 auto;
  padding: 24px 20px 96px;
  display: flex; flex-direction: column; gap: 48px;
}
@media (min-width: 640px) { main { padding: 40px 32px 128px; gap: 64px; } }

/* top bar */
.top {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px;
  font-family: var(--display); font-size: 10px; line-height: 1.6;
  padding-bottom: 16px; border-bottom: var(--px) solid var(--line);
}
.top .muted { color: var(--muted); }
.top button {
  font: inherit; color: var(--fg); background: none; border: 0; padding: 0; cursor: pointer;
  border-bottom: var(--px) solid var(--green-dim);
}
.top button:hover { border-bottom-color: var(--green); }

/* hero: the ape, in a stepped pixel frame */
.hero { margin: 0; display: flex; flex-direction: column; gap: 32px; }
.hero img {
  width: 100%; max-width: 512px; aspect-ratio: 1 / 1;
  background: var(--bg);
  border: var(--px) solid var(--green);
  box-shadow:
    var(--px) var(--px) 0 var(--bg),
    calc(var(--px) * 2) calc(var(--px) * 2) 0 var(--green-dim),
    calc(var(--px) * 3) calc(var(--px) * 3) 0 var(--bg),
    calc(var(--px) * 4) calc(var(--px) * 4) 0 var(--green-dim);
}
h1 {
  margin: 0; font-family: var(--display); font-weight: 400;
  font-size: 24px; line-height: 1.3; letter-spacing: 0; word-break: break-word;
}
@media (min-width: 640px) { h1 { font-size: 36px; } }
.cursor {
  display: inline-block; width: .55em; height: .9em; margin-left: .25em;
  background: var(--green); vertical-align: -0.1em;
  animation: blink 1s steps(1, end) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }
.sub { margin: 12px 0 0; font-size: 26px; line-height: 1.25; color: var(--muted); }

/* the phone screen */
.screen {
  border: var(--px) solid var(--green-dim);
  padding: 20px 24px;
  display: flex; flex-direction: column; gap: 6px;
  max-width: 28rem;
}
.prompt { margin: 0; color: var(--green); font-size: 26px; }
.prompt::before { content: "> "; color: var(--green-dim); }
.copy .sig, .sig {
  margin: 20px 0 0;
  font-family: var(--display); font-size: 18px; line-height: 1.4;
  color: var(--fg);
}
@media (min-width: 640px) { .copy .sig, .sig { font-size: 22px; } }

/* body copy */
.copy { display: flex; flex-direction: column; gap: 18px; max-width: 34rem; }
.copy h2 { margin: 0 0 6px; font-family: var(--display); font-weight: 400; font-size: 12px; line-height: 1.7; color: var(--fg); }
.copy p { margin: 0; }
.green { color: var(--green); font-weight: 400; }

/* spec sheet */
.specs dl { margin: 0; display: grid; grid-template-columns: 1fr; border-top: var(--px) solid var(--line); }
.specs dl > div {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: 16px; align-items: baseline;
  padding: 12px 0; border-bottom: var(--px) solid var(--line);
}
.specs dt { margin: 0; font-family: var(--display); font-size: 10px; line-height: 2.2; color: var(--muted); }
.specs dd { margin: 0; }

/* contract address in the spec sheet: click to copy */
.ca { font: inherit; color: var(--fg); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; word-break: break-all; border-bottom: var(--px) solid var(--green-dim); }
.ca:hover { border-bottom-color: var(--green); }
#ca-soon { color: var(--muted); }

/* buttons: hard pixel shadow */
.actions { display: flex; flex-wrap: wrap; gap: 16px; }
.btn {
  font-family: var(--display); font-size: 11px; line-height: 1;
  color: var(--fg); text-decoration: none;
  padding: 14px 18px;
  border: var(--px) solid var(--fg);
  box-shadow: var(--px) var(--px) 0 var(--green);
  background: var(--bg);
}
.btn:hover { color: var(--bg); background: var(--green); border-color: var(--green); box-shadow: var(--px) var(--px) 0 var(--fg); }
.btn:active { transform: translate(var(--px), var(--px)); box-shadow: none; }
a:focus-visible, button:focus-visible { outline: var(--px) solid var(--green); outline-offset: var(--px); }
[hidden] { display: none !important; }

footer { display: flex; flex-direction: column; gap: 12px; border-top: var(--px) solid var(--line); padding-top: 24px; }
footer p { margin: 0; }
.muted { color: var(--muted); }
.fine { color: var(--muted); font-size: 18px; line-height: 1.3; max-width: 34rem; }

/* how-to-buy page */
.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 28px; max-width: 34rem; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2.5rem 1fr; gap: 16px; }
.steps li::before { content: counter(step, decimal-leading-zero); font-family: var(--display); font-size: 12px; line-height: 2; color: var(--green); }
.steps p { margin: 0; }
.steps .muted { margin-top: 4px; font-size: 20px; }
.back { font-family: var(--display); font-size: 10px; color: var(--muted); text-decoration: none; border-bottom: var(--px) solid var(--green-dim); }
.back:hover { color: var(--fg); border-bottom-color: var(--green); }