/* Bouncing dot field showpiece, in the Tone Segurado kit (~/Dev/parts/kits.json "tone-segurado"): warm cream paper
   inside a thick black-lined page frame, fat extruded cartoon lettering mixed with thin condensed outline words
   (Anybody standing in for Degular), cream / orange / sky dots ringed in ink. */
:root { --paper: #fbf4ec; --frame: #e8e6e0; --ink: #161616; --orange: #f69b66; --tan: #f7c189; --butter: #f8c785;
  --sky: #7ac0fd; --mint: #9fe7c9; --pad: clamp(16px, 4.5vw, 52px); }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body { background: var(--frame); color: var(--ink); overflow-x: hidden; font: 500 16px/1.45 Anybody, system-ui, sans-serif; }
a { color: inherit; text-decoration: none; }
.frame { margin: 14px; border: 3px solid var(--ink); background: var(--paper); }

/* lettering: fill inside a round ink outline, a solid ink copy knocked down-left (tone-segurado's block letters) */
.big, .play { text-transform: uppercase; line-height: .9; font-variation-settings: "wdth" 70, "wght" 900; font-weight: 900; }
.fat, .play {
  color: var(--butter); -webkit-text-stroke: .05em var(--ink); paint-order: stroke fill;
  text-shadow: -.01em .01em 0 var(--ink), -.02em .02em 0 var(--ink), -.03em .03em 0 var(--ink), -.04em .04em 0 var(--ink), -.05em .05em 0 var(--ink), -.06em .06em 0 var(--ink);
}
.thin { color: transparent; -webkit-text-stroke: .03em var(--ink); font-variation-settings: "wdth" 50, "wght" 500; font-weight: 500; }

/* the top of the page: no dots up here */
.top { min-height: calc(100vh + 24px); padding: 26px var(--pad) var(--pad); display: flex; flex-direction: column; border-bottom: 3px solid var(--ink); }
.nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 15px; }
.mark { display: flex; gap: 0; }
.mark i { width: 26px; height: 26px; margin-right: -6px; border: 3px solid var(--ink); border-radius: 50%; background: var(--butter); }
.mark i:nth-child(2) { background: var(--sky); } .mark i:nth-child(3) { background: var(--orange); }
.links { display: flex; gap: 10px; }
.links a { padding: 8px 16px; border: 3px solid var(--ink); border-radius: 99px; background: #fff; }
.links a.hi { background: var(--orange); }
.big { flex: 1; display: flex; flex-direction: column; justify-content: center; font-size: clamp(64px, 17.5vw, 200px); margin: 24px 0; }
.big .fat:nth-of-type(2) { color: var(--sky); }
.big .fat:nth-of-type(4) { color: var(--orange); }
.big .thin { font-size: .78em; }
.intro { font-size: clamp(18px, 2.3vw, 24px); font-weight: 600; max-width: 26ch; }

/* the field section: the dots float over everything in it */
.field { position: relative; min-height: 100vh; padding: clamp(56px, 9vh, 110px) var(--pad); display: flex; flex-direction: column; justify-content: center; cursor: crosshair; }
.play { text-align: center; font-size: clamp(64px, 17vw, 190px); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3.5vw, 40px); margin-top: clamp(48px, 8vh, 100px); }
.step b { display: inline-grid; place-items: center; min-width: 76px; height: 40px; padding: 0 18px; border: 3px solid var(--ink); border-radius: 99px; font-size: 18px; }
.step:nth-child(1) b { background: var(--butter); } .step:nth-child(2) b { background: var(--sky); } .step:nth-child(3) b { background: var(--orange); }
.step h3 { margin: 16px 0 6px; font-size: clamp(20px, 2.4vw, 26px); font-weight: 900; text-transform: uppercase; }
.step p { font-size: 15px; font-weight: 500; color: #3a3a3a; max-width: 24em; }
@media (max-width: 700px) { .steps { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .nav { font-size: 12px; } .links { gap: 6px; } .links a { padding: 6px 11px; white-space: nowrap; } .mark i { width: 22px; height: 22px; } }