:root{
  --ink:#141414;
  --body-text:#55554f;
  --muted:#6b6b68;
  --faint:#9a9a94;
  --line:#d6d6d2;
  --blue:#0055BF;
  --red:#D01012;
  --pad:80px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;font-family:'Space Grotesk',sans-serif}
a{color:var(--blue);text-decoration:none}
a:hover{color:#003d8a;text-decoration:underline}

/* nav */
.nav{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.92);backdrop-filter:blur(8px)}
.nav-inner{max-width:1360px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:22px var(--pad)}
.brand{font:500 15px 'IBM Plex Mono',monospace;color:var(--ink)}
.brand:hover{color:var(--ink);text-decoration:none}
.links{display:flex;gap:36px;font:400 14px 'IBM Plex Mono',monospace}
.links a{color:var(--ink)}

/* hero */
.hero{max-width:1360px;margin:0 auto;display:grid;grid-template-columns:1fr 380px;gap:80px;align-items:center;padding:0 var(--pad);min-height:calc(100vh - 65px)}
.kicker{margin:0 0 24px;font:400 14px 'IBM Plex Mono',monospace;color:var(--muted)}
.hero-text h1{margin:0;font:700 74px/1.05 'Space Grotesk',sans-serif;color:var(--ink);letter-spacing:-0.03em;text-wrap:balance}
.lede{margin:32px 0 0;font:400 19px/1.6 'Space Grotesk',sans-serif;color:var(--body-text);max-width:520px;text-wrap:pretty}

.hero-bricks{position:relative;width:220px;height:435px;cursor:pointer;justify-self:center}
.hero-guides{position:absolute;inset:0}
.hero-guides .guide{position:absolute;top:155px;height:150px;border-left:2px dashed var(--line)}
.hero-bricks.assembled .hero-guides{display:none}
.hero-brick--base{position:absolute;top:215px;left:0}
.hero-moving{position:absolute;top:0;left:0;transition:transform .55s cubic-bezier(.34,1.3,.5,1);transform:translateY(0)}
.hero-bricks.assembled .hero-moving{transform:translateY(150px)}

/* work */
.work{max-width:1360px;margin:0 auto;padding:0 var(--pad) 40px}
.work h2{margin:0 0 24px;font:700 44px 'Space Grotesk',sans-serif;color:var(--ink);letter-spacing:-0.02em}
.work-grid{display:grid;grid-template-columns:380px 1fr;gap:96px;align-items:start}
.work-side{position:sticky;top:130px;padding:40px 0 40px 40px}
.brick-stack{position:relative;width:170px;height:370px}
.stack-guide{position:absolute;top:200px;left:0}
.stack-brick{position:absolute;left:0;opacity:0;transform:translateY(-34px);transition:transform .6s cubic-bezier(.34,1.3,.5,1),opacity .35s}
.stack-brick.active{opacity:1;transform:translateY(0)}

.work-list{display:flex;flex-direction:column}
.work-item{padding:48px 0;opacity:.4;transition:opacity .35s}
.work-item.active{opacity:1}
.work-item .tag{margin:0 0 12px;font:400 13px 'IBM Plex Mono',monospace}
.work-item h3{margin:0;font:500 30px 'Space Grotesk',sans-serif;color:var(--ink);letter-spacing:-0.01em}
.work-link{color:var(--ink)}
.work-link:hover{color:var(--red);text-decoration:none}
.work-link-arrow{display:inline-block;margin-left:6px;font-size:0.55em;vertical-align:middle}
.work-item .desc{margin:14px 0 0;font:400 16px/1.6 'Space Grotesk',sans-serif;color:var(--body-text);max-width:560px;text-wrap:pretty}

.more-github{padding:32px 0 56px;display:flex;align-items:baseline;gap:16px;color:var(--ink)}
.more-github:hover{color:var(--ink);text-decoration:none}
.more-github-title{font:500 21px 'Space Grotesk',sans-serif}
.more-github-url{font:400 13px 'IBM Plex Mono',monospace;color:var(--muted)}

/* now */
.now{max-width:1360px;margin:0 auto;padding:80px var(--pad) 96px}
.now-row{display:grid;grid-template-columns:200px 1fr;gap:64px;padding-top:56px}
.now-row h2{margin:0;font:400 14px 'IBM Plex Mono',monospace;color:var(--muted)}
.now-row p{margin:0;font:400 24px/1.55 'Space Grotesk',sans-serif;color:var(--ink);max-width:820px;text-wrap:pretty}
.now-row--tools{padding-top:40px;margin-top:56px}
.tools{font:400 15px/2 'IBM Plex Mono',monospace !important;color:var(--body-text) !important}

/* footer */
.footer{max-width:1360px;margin:0 auto;padding:96px var(--pad) 72px}
.footer .kicker{margin:0 0 20px}
.say-hi{font:700 64px/1.1 'Space Grotesk',sans-serif;color:var(--ink);letter-spacing:-0.02em}
.say-hi:hover{color:var(--red);text-decoration:none}
.footer-bottom{display:flex;justify-content:space-between;margin-top:64px;font:400 13px 'IBM Plex Mono',monospace;color:var(--faint)}

/* responsive */
@media (max-width:1100px){
  :root{--pad:48px}
}

@media (max-width:860px){
  .nav-inner{padding:18px var(--pad)}
  .hero{grid-template-columns:1fr;gap:40px;padding-top:40px;padding-bottom:40px;min-height:auto}
  .hero-text h1{font-size:44px}
  .work-grid{grid-template-columns:1fr;gap:8px}
  .work-side{position:static;padding:0 0 32px;display:flex;justify-content:center}
  .now-row{grid-template-columns:1fr;gap:12px}
  .now-row p{font-size:20px}
  .say-hi{font-size:44px}
  .footer-bottom{flex-direction:column;gap:8px}
}

@media (max-width:560px){
  :root{--pad:20px}
  .nav-inner{padding:14px var(--pad)}
  .links{gap:18px;font-size:12px}
  .hero-text h1{font-size:32px}
  .lede{font-size:17px}
  .hero-bricks{transform:scale(.78);transform-origin:center top}
  .work h2{font-size:32px}
  .work-item h3{font-size:22px}
  .say-hi{font-size:32px}
}