@font-face { font-family: "Space Grotesk"; font-weight: 500; font-style: normal; font-display: swap; src: url("../assets/fonts/SpaceGrotesk-Medium.woff2") format("woff2"); } @font-face { font-family: "Space Grotesk"; font-weight: 400; font-style: normal; font-display: swap; src: url("../assets/fonts/SpaceGrotesk-Regular.woff2") format("woff2"); } @font-face { font-family: "Space Grotesk"; font-weight: 300; font-style: normal; font-display: swap; src: url("../assets/fonts/SpaceGrotesk-Light.woff2") format("woff2"); } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; background: #000; font-family: "Space Grotesk", sans-serif; font-weight: 500; } /* No transition on the way in -- it's the first thing in , so it simply paints as soon as the browser gets there, covering the page before anything underneath has a chance to be seen unstyled. Only the way out (see js/preloader.js) fades. */ .preloader { position: fixed; inset: 0; z-index: 100; background: #000; display: flex; align-items: center; justify-content: center; opacity: 1; transition: opacity 0.3s ease; } .preloader.is-hidden { opacity: 0; pointer-events: none; } .preloader[hidden] { display: none; } .preloader__gif { height: 56pt; width: auto; } .hero { min-height: 100svh; align-items: center; } /* left of the globe, same row: spans 4 columns wide overall, but the items themselves hug their own text (flex, not equal grid columns) -- 2026/social/brand sit with equal gaps between them, and ABOUT is pushed out to the far right edge via its own auto margin. Stacked above the globe (see .sphere-wrap) so that if the globe's aspect-ratio-driven height ever overflows its row on narrow/short viewports, it passes behind the menu instead of covering the labels. */ .menu { grid-column: 1 / 5; grid-row: 1; position: relative; z-index: 2; display: flex; align-items: baseline; gap: var(--gutter); } .menu-item { font-size: 10pt; color: #fff; white-space: nowrap; } .menu-item--year { font-weight: 500; letter-spacing: -0.06em; opacity: 0.48; } .menu-item--social { font-weight: 500; letter-spacing: 0.04em; } .menu-item--social .dim { opacity: 0.48; } .menu-item--social .menu-slash { opacity: 0.48; } .menu-item--social .menu-link { color: inherit; text-decoration: none; opacity: 0.75; } .menu-item--social .menu-link:hover { text-decoration: underline; } .menu-item--brand { font-weight: 400; opacity: 0.48; } .menu-item--brand .brand-mmm { letter-spacing: 0.08em; } .menu-item--brand .brand-dotworks { letter-spacing: -0.04em; } .menu-item--about { position: relative; font-weight: 400; letter-spacing: 0.08em; margin-left: auto; } .about-label { /* reset