:root {
  --sky: #C9DCE8;
  --ink: #111111;
  --orange: #FF5B1F;
  --slate: #6F7F8A;
  --paper: #F3EEE3;
  --gutter: 16px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; background: var(--paper); }

body {
  background: var(--sky);
  color: var(--ink);
  font-family: "Inter Tight", system-ui, sans-serif;
  font-size: 15px;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  position: relative;
}

/* bounce above the page stays sky; html paper shows below the footer */
body::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 100vh;
  background: var(--sky);
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

.grain {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; opacity: 0.09; mix-blend-mode: multiply; z-index: 10;
}

main {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px;
  padding: 48px var(--gutter) 32px;
  text-align: center;
}

.mark { position: relative; width: min(84vw, 720px); }
.logo { display: block; width: 100%; height: auto; }

.sticker {
  position: absolute; bottom: 72%; left: 82%;
  width: clamp(80px, 17vw, 140px); aspect-ratio: 1;
  border-radius: 50%;
  background: var(--orange); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-family: "DM Mono", monospace; font-weight: 500;
  font-size: clamp(10px, 1.3vw, 13px); letter-spacing: 0.02em; line-height: 1.2;
  transform: rotate(12deg);
  box-shadow: 0 2px 0 rgba(17, 17, 17, 0.15);
}
.sticker span:last-child { font-weight: 400; }

.kind, .demo {
  font-family: "DM Mono", monospace;
  font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
}
.demo { color: var(--slate); letter-spacing: 0.06em; }
.demo a { color: var(--ink); }

footer {
  background: var(--paper);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 12px 28px;
  padding: 18px max(var(--gutter), 4vw);
}
.tagline { display: block; width: min(60vw, 260px); height: auto; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 24px; font-family: "DM Mono", monospace; font-size: 13px; color: var(--slate); }
footer nav a:hover { color: var(--ink); }

@media (max-width: 560px) {
  footer { justify-content: center; text-align: center; }
  footer nav { justify-content: center; }
}