/* Pixel smiley showpiece, in the Craftwild kit (~/Dev/parts/kits.json "craftwild"): white paper on a faint 9px grid,
   large light type, tiny tracked mono labels, square corners. The two faces are blown up to poster size; their
   hop, hearts and shy drop are scaled with them through the part's own knobs. */
:root { --ink: #0a0a0a; --ink-2: #2a2a2a; --muted: #8b8b8b; --line: rgba(10, 10, 10, .12); --cell: 9px;
  --mono: "Geist Mono", "SFMono-Regular", ui-monospace, Menlo, monospace; --gutter: clamp(16px, 5vw, 54px);
  --face: clamp(150px, min(47vw, 42vh), 500px); }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
body {
  color: var(--ink); overflow-x: hidden; font: 400 16px/1.5 Geist, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased;
  background: #fff linear-gradient(#f3f3f3 1px, transparent 1px) 0 0 / 100% var(--cell),
              linear-gradient(90deg, #f3f3f3 1px, transparent 1px) 0 0 / var(--cell) 100%;
  background-color: #fff;
}
main { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: clamp(40px, 9vh, 110px);
  padding: clamp(32px, 5vh, 64px) 16px; max-width: 1176px; margin: 0 auto; text-align: center; }
.kick { font: 400 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: calc(var(--cell) * 3); }
h1 { font-weight: 400; font-size: clamp(26px, 4vw, 42px); line-height: 1.05; letter-spacing: -.025em; max-width: 22ch; margin: 0 auto; }

.pair { display: grid; grid-template-columns: auto auto; justify-content: center; gap: clamp(4px, 1.5vw, 20px); }
.face { display: grid; justify-items: center; text-align: center; gap: clamp(10px, 2vh, 22px); }
.pxsmiley {
  --sm-size: var(--face);
  --sm-jump: calc(var(--face) * .14); --sm-hop: calc(var(--face) * .055);
  --sm-heart-rise: calc(var(--face) * .36); --sm-shy-drop: calc(var(--face) * .025);
}
.pxsmiley .pxsm-heart { width: calc(var(--face) * .19); height: calc(var(--face) * .15); }
figcaption { max-width: 26ch; font-size: clamp(14px, 1.8vw, 18px); line-height: 1.4; color: var(--ink-2); }
figcaption b { display: block; margin-bottom: 8px; font: 400 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }