/* ================= home ================= */
html.home body{overflow:hidden}
html.home,html.home *{cursor:crosshair}
.field{position:fixed;inset:0;z-index:3;overflow:hidden}
.around{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.around img{position:absolute;left:0;top:0;width:400px;height:auto;transform-origin:0 0;will-change:transform,opacity;display:block}
.mc{position:absolute;left:0;top:0;display:block;transform-origin:0 0;will-change:transform}
.mc canvas,.mc-still{display:block;width:100%;height:100%;user-select:none}
.mc.heroed canvas{visibility:visible}
.mc .art{position:absolute}

/* bottom: the menu, then CLUMP DESIGN as wide as the page */
.foot-home{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:0 1vw;pointer-events:none}
.menu{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;padding:0 3.7vw;margin-bottom:2.4vw;pointer-events:auto}
.menu a{font-family:'Open Sauce';font-weight:700;font-size:clamp(16px,2.05vw,40px);letter-spacing:-.045em;text-transform:uppercase;line-height:1;white-space:nowrap}
.menu .m-r{justify-self:end}
html.home .menu #now{font-family:'Open Sauce';font-weight:700;font-size:clamp(16px,2.05vw,40px);letter-spacing:-.045em;text-transform:uppercase;padding:0;max-width:56vw;overflow:hidden;text-overflow:ellipsis}
.menu a:hover{text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.12em}
.bigname{font-family:var(--f-display);font-weight:400;letter-spacing:-.02em;line-height:.86;white-space:nowrap;margin:0;
  padding-bottom:.02em;pointer-events:auto;display:block;width:max-content}
html.home #brand{display:inline-block;height:auto;width:auto;color:inherit}
#design .dl{display:inline-block;opacity:0;transform:translateY(.12em);transition:opacity .25s ease,transform .45s var(--ease)}
#design .dl.in{opacity:1;transform:none}
html.intro-on #brand{visibility:hidden}
html.intro-on:not(.intro-glide) .menu,html.intro-on:not(.intro-hole) .field,html.intro-on:not(.intro-hole) .around{opacity:0}
html.intro-hole .field,html.intro-hole .around{transition:none}
.menu,.field,.around{transition:opacity 1s var(--ease)}

@media (max-width:700px){
  .menu{padding:0 2vw;margin-bottom:10px}
  .menu a{font-size:13px;letter-spacing:-.03em}
  html.home .menu #now{font-size:18px}
  /* the project's name gets its own line above Contact and About, so it always fits */
  .menu{grid-template-columns:1fr 1fr;row-gap:30px}
  .menu .m-c,html.home .menu #now{grid-column:1/-1;grid-row:1;justify-self:center;max-width:none;overflow:visible;text-overflow:clip;white-space:normal;text-align:center}
  .menu .m-l{grid-row:2;grid-column:1}.menu .m-r{grid-row:2;grid-column:2}
}

/* computers and their images sit over the menu and the name */
.field{pointer-events:none}
.field .mc{pointer-events:auto}
.foot-home{z-index:1}
.around-set{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none}
.around-set img{position:absolute;left:0;top:0;width:400px;height:auto;transform-origin:0 0;will-change:transform,opacity;display:block}
html.home #brand{font-kerning:none}
.menu .m-l{grid-column:1}.menu .m-c{grid-column:2}.menu .m-r{grid-column:3}
@media (max-width:700px){ .menu .m-l{grid-column:1;grid-row:2}.menu .m-c{grid-column:1/-1;grid-row:1}.menu .m-r{grid-column:2;grid-row:2} }