* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
  background: var(--paper);
}

body {
  color: var(--ink);
  font-family: var(--font-body);
  overflow-x: hidden;
}

body::after {
  position: fixed;
  inset: 0;
  z-index: var(--grain-z);
  pointer-events: none;
  content: "";
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch' result='grain'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

.no-grain body::after { display: none; }

.hero {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  min-height: 100dvh;
  padding-inline: var(--space-content-inline);
  overflow-x: clip;
  overflow-y: visible;
  isolation: isolate;
  background: var(--paper);
}

.band {
  position: absolute;
  top: 66%;
  left: 50%;
  z-index: 0;
  width: 140vw;
  height: 16vh;
  background: var(--red);
  transform: translate(-50%, -50%) rotate(-12deg);
}

.site-nav {
  position: absolute;
  inset: 0 0 auto;
  z-index: var(--content-z);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-nav) var(--space-content-inline);
}

.wordmark,
.nav-links a,
.nav-menu {
  color: var(--ink);
  text-decoration: none;
}

.wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--wordmark-gap);
  min-height: var(--tap-target);
}

.wordmark-name {
  font-family: var(--font-display);
  font-size: var(--wordmark-size);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  text-transform: uppercase;
}

/* The toy clover stands in for the L: head above the cap line, stem on the baseline. */
.wordmark-l {
  position: relative;
  z-index: 1;
  display: inline-block;
  width: auto;
  height: 1.89em;
  /* The head sits just over the cap line; the C and O tuck in under its leaves, so the glyph paints above the text. */
  margin: -0.87em -0.13em 0 -0.41em;
  vertical-align: -0.41em;
}

.wordmark-desc {
  font-family: var(--font-body);
  font-size: var(--wordmark-desc-size);
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-nav-link-gap);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  transition: text-decoration-thickness var(--duration-cta) var(--ease);
}

.nav-links a:hover,
.nav-links a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.25em;
}

.nav-links span {
  color: var(--ink);
}

.nav-menu {
  display: none;
  align-items: center;
  min-width: var(--tap-target);
  min-height: var(--tap-target);
  padding: 0 0.5rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.content {
  position: relative;
  z-index: var(--content-z);
  grid-column: 1 / 8;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  padding-block: clamp(8rem, 16vh, 11rem) 4rem;
}

.eyebrow {
  display: inline-block;
  margin: 0 0 var(--space-eyebrow-to-heading);
  padding: 0.5rem 0.75rem;
  color: var(--yellow);
  background: var(--ink);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.1;
  text-transform: uppercase;
  transform: rotate(-3deg);
}

h1 {
  max-width: var(--h1-max-width);
  margin: 0;
  color: var(--ink);
  font-family: var(--font-hero);
  font-size: var(--h1-size);
  font-weight: 900;
  letter-spacing: var(--h1-tracking);
  line-height: var(--h1-line-height);
  text-transform: uppercase;
  text-wrap: balance;
}

.subtext {
  max-width: 36ch;
  margin: var(--space-content-stack) 0 var(--space-subtext-to-cta);
  padding: 1rem 1.25rem;
  border: var(--outline);
  color: var(--ink);
  background: var(--white);
  box-shadow: var(--shadow-pop);
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.5;
  text-wrap: pretty;
}

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--cta-min-height);
  padding: var(--space-cta-block) var(--space-cta-inline);
  border: var(--outline);
  color: var(--ink);
  background: var(--yellow);
  box-shadow: var(--shadow-pop);
  font-family: var(--font-display);
  font-size: var(--cta-size);
  font-weight: 700;
  letter-spacing: var(--cta-tracking);
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform var(--duration-cta) var(--ease), box-shadow var(--duration-cta) var(--ease);
}

.cta:hover,
.cta:focus-visible {
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0 var(--ink);
}

.cta:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--ink);
}

.hero-art {
  position: relative;
  z-index: var(--content-z);
  grid-column: 8 / 13;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  width: min(34vw, 500px);
  aspect-ratio: 1;
  border: var(--outline);
  background: var(--yellow);
  box-shadow: 10px 10px 0 var(--ink);
  transform: translateY(40px);
  animation: art-slide var(--duration-reveal) var(--ease) var(--delay-heading) both;
}

.prop--cylinder-white {
  left: calc(var(--space-content-inline) + 0.25rem);
  bottom: -31px;
  width: 110px;
  height: auto;
}

.hero-art .field-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* The live blocks float over the whole hero; the still is the no-WebGL fallback. */
.hero-gl {
  position: absolute;
  inset: 0;
  z-index: calc(var(--content-z) + 1);
  display: none;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero--gl .hero-gl {
  display: block;
}

.hero--gl .hero-art .hero-still {
  display: none;
}

/* With WebGL the word "build" is spelled in falling toy blocks; the text stays for layout and readers. */
.hero--gl .h1-build { color: transparent; font-size: calc(1em * var(--word-scale, 2)); line-height: 1; } /* the 3D word draws twice the headline cap: it is the show */
/* The aside sits on the last line at a third of the size; the ball rolls in to become the full stop. */
.h1-aside { display: inline-block; font-size: 0.34em; white-space: nowrap; }
.hero--gl .h1-dot { color: transparent; }
.hero--sign .eyebrow { visibility: hidden; } /* the 3D lettering floats in its place; the chip keeps the layout */
/* MOBILE-2: a vertical swipe that starts on the toys still scrolls the page; a sideways drag moves a toy. */
.hero--gl .hero-art {
  touch-action: pan-y pinch-zoom;
}

/* A rendered still (alpha sprite with its own cast shadow), shown only without WebGL. */
.hero-art .hero-still {
  position: absolute;
  inset: 5%;
  z-index: 2;
  display: block;
  width: 90%;
  height: 90%;
  object-fit: contain;
}

.reveal {
  transform: translateX(-40px);
  animation: hero-slide var(--duration-reveal) var(--ease) var(--reveal-delay) both;
  will-change: transform;
}

@keyframes hero-slide {
  from {
    transform: translateX(-40px);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes art-slide {
  from {
    transform: translateY(40px);
  }

  to {
    transform: translateY(0);
  }
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    align-content: center;
    gap: clamp(2rem, 6vw, 4rem);
    padding-block: 6rem 4rem;
  }

  .content,
  .hero-art {
    grid-column: 1;
  }

  .content {
    grid-row: 1;
    padding-block: 4rem 0;
  }

  .hero-art {
    grid-row: 2;
    width: 80vw;
    max-width: 560px;
  }
}

@media (max-width: 767px) {
  .site-nav {
    z-index: calc(var(--content-z) + 2); /* above the floating blocks (.hero-gl) so the open menu reads */
  }

  /* AUDIT-FIX-1 row 2: Menu opens a dropdown under the header; it floats, so the headline never moves */
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    right: var(--space-content-inline);
    left: var(--space-content-inline);
    border: var(--outline);
    background: var(--paper);
    box-shadow: 4px 4px 0 var(--ink);
    gap: 0;
  }

  .nav-links.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .nav-links span {
    display: none;
  }

  .nav-links a {
    display: flex;
    align-items: center;
    height: 44px;
    min-height: 44px;
    padding: 0 1rem;
    border-bottom: 1px solid var(--ink);
  }

  .nav-links a:last-child {
    border-bottom: 0;
  }

  .nav-menu {
    display: inline-flex;
  }

  h1 {
    font-size: var(--h1-size-mobile);
  }

  /* MOBILE-4: the toy square fits the first screen (969 px of hero on an 844 px phone before) */
  .hero {
    gap: 1.5rem;
    padding-block: 5rem 2.5rem;
  }

  .content {
    padding-block: 1rem 0;
  }

  .hero-art {
    width: 66vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .hero-art {
    animation: none;
    transform: none;
    will-change: auto;
  }
}