/* Hallmark · checked: 2026-11-11 · genre: playful (brand) · shape: holding page, one screen · theme: Face Paint Kit brand guide v3 (locked) · signature: the butterfly over a row of paint cakes in the brand colours
 * critique: one screen, the wordmark set huge as the headline; flat brand colours, no gradient (Dom's rule); the paint cakes are the palette from the style guide
 * waive 38iii: the purple and pink wordmark is the brand logo itself (style guide v3), once, in the hero
 * waive 26b: the page has no controls; the 404 link is the only one */
:root {
  color-scheme: light;
  --purple: #4b0f8f; --pink: #ff0a8a; --orange: #ff8a00; --yellow: #ffd600;
  --lime: #a6d81f; --teal: #00b8d9; --blue: #2e7bff; --lilac: #a855f7;
  --bg: #f7f8fb; --ink: #1d1428; --muted: #5f5670; --mark-a: #4b0f8f; --mark-b: #e0007a;
  --focus: #ff0a8a; --rim: rgba(29, 20, 40, .12); --cake-shade: rgba(0, 0, 0, .14);
  --sans: "Rubik", ui-rounded, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  color-scheme: dark;
  --bg: #1a0933; --ink: #f6f1fc; --muted: #c7b8de; --mark-a: #fbf9fe; --mark-b: #ff3d9f;
  --focus: #ff3d9f; --rim: rgba(255, 255, 255, .16);
} }
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1a0933; --ink: #f6f1fc; --muted: #c7b8de; --mark-a: #fbf9fe; --mark-b: #ff3d9f;
  --focus: #ff3d9f; --rim: rgba(255, 255, 255, .16);
}

* { box-sizing: border-box; }
html, body { overflow-x: clip; }
body {
  margin: 0; min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-rows: 1fr auto auto;
  max-width: 76rem; margin-inline: auto;
  padding-block: 24px 20px;
  padding-left: max(24px, env(safe-area-inset-left, 0px));
  padding-right: max(24px, env(safe-area-inset-right, 0px));
  background: var(--bg); color: var(--ink);
  font: 400 18px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}
html { background: var(--bg); }

.hero {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center; gap: 48px; padding-block: 32px;
}
.words { min-width: 0; }
.mark {
  margin: 0; font: 800 clamp(36px, 7.2vw, 100px)/.95 var(--sans); letter-spacing: -.02em;
  overflow-wrap: break-word; min-width: 0; text-wrap: nowrap;
}
.mark-a { color: var(--mark-a); }
.mark-b { color: var(--mark-b); }
.line { margin: 24px 0 0; max-width: 30ch; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.35; color: var(--muted); }
.fly { width: 100%; max-width: 340px; height: auto; justify-self: center; }

.cakes { list-style: none; margin: 0; padding: 0 0 28px; display: flex; flex-wrap: wrap; gap: 16px; }
.cakes li {
  width: 52px; aspect-ratio: 1; max-width: 100%; border-radius: 50%;
  background: var(--c); box-shadow: inset 0 -5px 0 var(--cake-shade), 0 0 0 4px var(--rim);
}
.foot { font-size: 14px; color: var(--muted); }

@media (prefers-reduced-motion: no-preference) {
  .cakes li { animation: pop .5s cubic-bezier(.3, 1.4, .5, 1) both; }
  .cakes li:nth-child(2) { animation-delay: .05s; } .cakes li:nth-child(3) { animation-delay: .1s; }
  .cakes li:nth-child(4) { animation-delay: .15s; } .cakes li:nth-child(5) { animation-delay: .2s; }
  .cakes li:nth-child(6) { animation-delay: .25s; } .cakes li:nth-child(7) { animation-delay: .3s; }
  .cakes li:nth-child(8) { animation-delay: .35s; }
  @keyframes pop { from { transform: scale(.4); opacity: 0; } }
}

@media (max-width: 760px) {
  body { font-size: 17px; }
  .mark { font-size: 11vw; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 24px; }
  .fly { grid-row: 1; max-width: 180px; justify-self: start; }
  .cakes li { width: 32px; box-shadow: inset 0 -4px 0 var(--cake-shade), 0 0 0 3px var(--rim); }
  .cakes { gap: 8px; }
}

/* the 404 page shares the look */
.wrap { padding-block: 64px; }
.wrap h1 { font: 800 clamp(36px, 6vw, 64px)/1 var(--sans); color: var(--mark-a); margin: 0 0 16px; text-wrap: balance; }
.wrap a { color: var(--mark-b); }
.wrap a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }