:root{--black:#101114;--paper:#f8f5ed;--acid:#d8ff45;--purple:#5b55e7;--coral:#ff5d44;--aqua:#61d6c6;--yellow:#ffd166;--max:1200px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--black);font-family:Arial,Helvetica,sans-serif;font-size:17px;line-height:1.5}a{color:inherit}img{display:block;max-width:100%}.wrap{width:min(calc(100% - 40px),var(--max));margin:auto}.skip{position:absolute;left:-9999px}.skip:focus{left:10px;top:10px;background:var(--acid);border:3px solid var(--black);padding:10px;z-index:50}
header{border-bottom:4px solid var(--black);background:var(--paper)}.nav{min-height:84px;display:flex;justify-content:space-between;align-items:center;gap:30px}.brand{display:flex;align-items:center;text-decoration:none;font-weight:900;font-size:1.35rem;letter-spacing:-.04em}.brand:before{content:"";width:24px;height:24px;background:var(--coral);border:3px solid var(--black);margin-right:10px;box-shadow:6px 6px 0 var(--acid)}nav{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}nav a{text-decoration:none;font-size:.8rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em;padding:.5rem .7rem;border:2px solid transparent}nav a:hover,nav a:focus-visible{border-color:var(--black)}nav a[aria-current=page]{background:var(--black);color:white}
.hero{border-bottom:4px solid var(--black)}.hero-grid{display:grid;grid-template-columns:1fr 1fr}.hero-copy{padding:70px 55px 70px 0;border-right:4px solid var(--black)}.hero-art{background:var(--purple);padding:48px;display:grid;place-items:center}.hero-art img{border:4px solid var(--black);box-shadow:14px 14px 0 var(--black)}.label{display:inline-block;background:var(--acid);border:3px solid var(--black);padding:5px 9px;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;font-weight:900;transform:rotate(-1deg)}
h1,h2,h3{line-height:.98;margin-top:0;letter-spacing:-.055em}h1{font-size:clamp(3.8rem,8vw,7.4rem);margin:24px 0}h2{font-size:clamp(2.6rem,5vw,5rem)}h3{font-size:1.65rem}.lead{font-size:1.2rem;max-width:55ch}.buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.button{display:inline-block;border:3px solid var(--black);padding:.75rem 1rem;text-decoration:none;font-weight:900;box-shadow:6px 6px 0 var(--black)}.button.acid{background:var(--acid)}.button.coral{background:var(--coral)}.button:hover{box-shadow:2px 2px 0 var(--black);transform:translate(4px,4px)}
.marquee{overflow:hidden;border-bottom:4px solid var(--black);background:var(--acid);padding:11px 0;font-weight:900;text-transform:uppercase;letter-spacing:.1em;white-space:nowrap}.marquee span{margin-right:50px}
.section{padding:80px 0;border-bottom:4px solid var(--black)}.section-head{display:grid;grid-template-columns:1fr .8fr;gap:60px;align-items:end;margin-bottom:34px}.section-head p{font-size:1.12rem}
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);border:3px solid var(--black)}.work{padding:28px;min-height:300px;border-right:3px solid var(--black)}.work:last-child{border:0}.work:nth-child(1){background:var(--aqua)}.work:nth-child(2){background:var(--yellow)}.work:nth-child(3){background:#ffc5d5}.work b{display:grid;place-items:center;width:48px;height:48px;border:3px solid var(--black);background:var(--paper);font-size:1.3rem}.work a{font-weight:900;text-transform:uppercase;font-size:.8rem}
.proof{background:var(--black);color:white}.proof h2{color:var(--acid)}.checks{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:white;border:2px solid white}.check{background:var(--black);padding:25px}.check strong{display:block;color:var(--acid);font-size:1.15rem}
.page-head{padding:70px 0 44px;background:var(--acid);border-bottom:4px solid var(--black)}.page-head h1{max-width:12ch;margin-bottom:15px}.page-head p{max-width:58ch;font-size:1.2rem}.patterns{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}.pattern{border:3px solid var(--black);padding:26px;box-shadow:9px 9px 0 var(--black)}.pattern:nth-child(4n+1){background:#ffc5d5}.pattern:nth-child(4n+2){background:var(--aqua)}.pattern:nth-child(4n+3){background:var(--yellow)}.pattern:nth-child(4n){background:#d5d3ff}.demo{background:var(--paper);border:3px dashed var(--black);padding:18px;margin-top:18px}.demo button{font:900 1rem Arial;background:var(--acid);border:3px solid var(--black);padding:.7rem 1rem}.demo a{font-weight:900;text-underline-offset:5px}
.doc{display:grid;grid-template-columns:250px 1fr;gap:60px}.index{align-self:start;border:3px solid var(--black);background:var(--yellow);padding:20px}.index a{display:block;font-weight:900;padding:7px 0}.prose{max-width:780px}.prose h2{font-size:2.4rem;margin-top:2.2rem}.prose h3{font-size:1.5rem;margin-top:1.8rem}.note{background:var(--acid);border:3px solid var(--black);padding:20px;margin:25px 0}
footer{padding:48px 0 28px;background:var(--paper)}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:30px}.links{display:grid;gap:8px}.links a{text-decoration:none;font-weight:700}.fine{border-top:3px solid var(--black);padding-top:20px;margin-top:32px;font-size:.8rem}
@media(max-width:820px){.hero-grid,.section-head,.doc{grid-template-columns:1fr}.hero-copy{border-right:0;padding-right:0}.hero-art{border-top:4px solid var(--black)}.work-grid{grid-template-columns:1fr}.work{border-right:0;border-bottom:3px solid var(--black)}.patterns{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.index{display:flex;flex-wrap:wrap;gap:12px}.checks{grid-template-columns:1fr}}
@media(max-width:520px){.wrap{width:min(calc(100% - 24px),var(--max))}.nav{align-items:flex-start;padding:14px 0}.brand{font-size:1rem;max-width:115px}nav a{font-size:.65rem;padding:.35rem}.hero-copy{padding-top:48px}h1{font-size:3.6rem}.hero-art{padding:24px}.section{padding:55px 0}.footer-grid{grid-template-columns:1fr}}