:root{font-family:Arial,Helvetica,sans-serif;color:#171717;background:#fff;font-synthesis:none;-webkit-font-smoothing:antialiased;color-scheme:light}
*{box-sizing:border-box}
body{margin:0;min-height:100svh}
header{padding:28px 5vw}
.wordmark{color:inherit;text-decoration:none;font-size:1.75rem;font-weight:700;letter-spacing:-.075em}
.wordmark span{font-weight:400;color:#757575}
.wordmark:focus-visible{outline:2px solid;outline-offset:6px}
main{max-width:1500px;margin:auto;padding:28px 5vw 52px;display:grid;grid-template-columns:1fr 1fr}
h1{grid-column:1/-1;margin:0;font-size:clamp(3.5rem,8.8vw,8.5rem);line-height:.96;letter-spacing:-.075em;font-weight:600;position:relative;z-index:1}
.construction{grid-column:1/-1;display:block;width:100%;height:auto;margin:-12px 0 -12px;overflow:visible}
.coming{grid-column:2;margin:0;font-size:clamp(1.8rem,3.7vw,3.5rem);font-weight:500;line-height:1.08;letter-spacing:-.055em}
.coming span{color:#777}
.ladder{transform-origin:602px 404px;animation:wobble 7s ease-in-out infinite}
.tape{transform-origin:500px 280px;animation:sway 7s ease-in-out infinite}
.drop{animation:drip 3s cubic-bezier(.5,0,.8,.6) infinite;opacity:0}
.second{animation-delay:1.3s;animation-duration:3.6s}
.splash{transform-origin:228px 410px;animation:splash 3s infinite;opacity:0}
.puddle{transform-origin:228px 410px;animation:ripple 3s infinite}
@keyframes wobble{0%,20%,100%{transform:rotate(0)}34%{transform:rotate(3deg)}42%{transform:rotate(1deg)}50%,70%{transform:rotate(2deg)}}
@keyframes sway{0%,100%{transform:rotate(0)}45%{transform:rotate(-.8deg)}70%{transform:rotate(.4deg)}}
@keyframes drip{0%,14%{opacity:0;transform:translateY(0)}18%{opacity:1}76%{opacity:1;transform:translateY(228px)}78%,100%{opacity:0;transform:translateY(228px)}}
@keyframes splash{0%,77%,100%{opacity:0;transform:scale(.5)}80%{opacity:1;transform:scale(.7)}94%{opacity:0;transform:scale(1.5)}}
@keyframes ripple{0%,76%,100%{transform:scaleX(1)}84%{transform:scaleX(1.15)}}
/* Fit the composition to both viewport dimensions, without hiding overflow. */
@media(min-width:601px){
  header{height:88px;padding:24px 5vw;display:flex;align-items:center}
  main{width:100%;height:calc(100svh - 88px);min-height:480px;padding:12px 5vw 28px;grid-template-rows:auto minmax(0,1fr) auto;row-gap:8px}
  h1{font-size:clamp(3rem,min(8.8vw,12svh),8.5rem)}
  .construction{width:100%;height:100%;min-height:0;margin:0;align-self:center;object-fit:contain}
  .coming{grid-column:1/-1;justify-self:end;font-size:clamp(1.6rem,min(3.7vw,5svh),3.5rem)}
}
@media(max-width:600px){header{padding:24px}main{padding:42px 24px 40px;grid-template-columns:1fr}h1{font-size:clamp(3.4rem,13vw,5rem);letter-spacing:-.07em}.construction{width:calc(100% + 28px);margin:34px -14px 34px}.coming{grid-column:1;font-size:clamp(2rem,8vw,3rem)}}
@media(prefers-reduced-motion:reduce){.ladder,.tape,.drop,.splash,.puddle{animation:none}}