:root {
  --bg: #1a1410;
  --fg: #f4ecdc;
  --accent: #ffb73c;
  --muted: #8a7a64;
  --frame: #4a3a2a;
  --typewriter: "American Typewriter", "Courier New", "Courier Prime", Courier, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--typewriter);
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
}

.title {
  text-align: center;
  margin-bottom: 3rem;
}

.snax-row {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-bottom: 1.25rem;
  cursor: pointer;
}

.snax-row--bounce { animation: snax-bounce 420ms ease-out; }

@keyframes snax-bounce {
  0%   { transform: translateY(0); }
  35%  { transform: translateY(-14px); }
  60%  { transform: translateY(4px); }
  100% { transform: translateY(0); }
}

.snax-letter {
  display: inline-flex;
}

.snax-letter img {
  display: block;
  width: clamp(72px, 14vw, 144px);
  height: clamp(72px, 14vw, 144px);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.machine {
  font-family: var(--typewriter);
  font-weight: 900;
  letter-spacing: clamp(0.25rem, 1.4vw, 0.75rem);
  font-size: clamp(2.25rem, 7vw, 4.5rem);
  line-height: 1;
}

.tagline {
  margin: clamp(2rem, 5vw, 3.5rem) 0 0;
  font-family: var(--typewriter);
  font-size: clamp(1rem, 2vw, 1.25rem);
  letter-spacing: 0.05em;
  color: var(--muted);
}

.screenshots {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  justify-items: center;
  margin-bottom: 3rem;
}

@media (min-width: 720px) {
  .screenshots {
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    align-items: end;
  }
}

.screenshot {
  margin: 0;
}

.screenshot__img {
  display: block;
  height: clamp(420px, 78vw, 640px);
  width: auto;
  border-radius: 28px;
}

.app-store {
  display: flex;
  justify-content: center;
  margin-bottom: 3rem;
}

.app-store__badge {
  display: inline-block;
  transition: transform 120ms ease-out, opacity 120ms ease-out;
}

.app-store__badge:hover,
.app-store__badge:focus-visible {
  transform: translateY(-2px);
  opacity: 0.9;
}

.app-store__badge img {
  display: block;
  height: clamp(60px, 8vw, 78px);
  width: auto;
}

.contact {
  text-align: center;
  border-top: 1px solid var(--frame);
  padding-top: 2rem;
  color: var(--muted);
}

.contact a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dashed var(--accent);
}

.contact a:hover { border-bottom-style: solid; }