/* The makers stage, "Small world" (src/makers/): a tall section whose band
   sticks at the top of the viewport for the section's pinned range (its
   height less one viewport; src/makers/timeline.js reads it). The band is
   the viewport: the planet's canvas fills it, the headline is centred over
   the two paragraphs at its top, and the "your project" hairline callout is
   tracked to the box (src/makers/index.js). Lengths that place the band are
   whole pixels, so the page below lands on the same pixels. */

/* The space after the band, before the closing call (whose own padding
   adds the page's section space): the band scrolls up whole, with no fade. */
.makers { position: relative; height: round(260svh, 1px); margin-bottom: clamp(72px, 6.4vw, 128px); }

.makers-band {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: #000;
}

/* The band's soft bottom edge, in as the band scrolls up at the end of its
   range (--makers-edge, src/makers/timeline.js): the planet, cut by the
   band's bottom, dissolves into the page instead of ending on a line. */
.makers-band::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  height: 24%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000);
  opacity: var(--makers-edge, 0);
  pointer-events: none;
}

.makers-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* A horizontal drag spins the planet (./drag.js); vertical swipes and
     pinches stay the page's. */
  touch-action: pan-y pinch-zoom;
}
/* The keyboard turns the planet too (./drag.js): the canvas's focus ring,
   inside the band, which clips its edges. */
.makers-canvas:focus-visible { outline: 2px solid var(--paper); outline-offset: -6px; }

.makers-copy {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(40px, 6.6vw, 104px);
  width: min(100% - var(--gutter) * 2, 928px);
  margin: 0 auto;
  padding-top: clamp(112px, 10.4vw, 200px);
  pointer-events: none;
}

/* The headline comes in once the diagram above has left (--makers-title,
   src/makers/timeline.js), so the two never share the screen. */
.makers-title {
  grid-column: 1 / -1;
  margin: 0;
  opacity: var(--makers-title, 1);
  font-size: clamp(30px, 3.3vw, 62px);
  line-height: 0;
  color: var(--paper);
  /* The headline may run wider than the two columns under it. */
  justify-self: center;
  width: max-content;
  max-width: calc(100vw - var(--gutter) * 2);
}
/* Wider than the lettering's own setting (the target's line spans 57% of
   the band), the words set a little further apart. */
.makers-title .rer-line { justify-content: center; row-gap: 0.46em; }
.makers-title .rer-sentence { flex-basis: 100%; justify-content: center; column-gap: calc(var(--space) + 0.12em); }

/* The paragraphs follow the headline in, once the diagram above has left
   (--makers-copy, src/makers/timeline.js). */
.makers-body {
  opacity: var(--makers-copy, 1);
  margin: clamp(28px, 2.6vw, 48px) 0 0;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.43;
  font-weight: 400;
  color: var(--text-soft);
  text-wrap: pretty;
}

/* The callout: a mono label over a hairline leader that drops to the box,
   shown with the band. */
.makers-callout { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: var(--makers-presence, 0); }
.makers-callout-label {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.01em;
  color: var(--text);
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -100%);
}
.makers-callout-line { position: absolute; left: 0; top: 0; width: 1px; background: var(--hairline); opacity: 0; }

/* The band's notice when its scene cannot be drawn (src/errors.js), over
   its still; empty, it takes no room. */
.makers-error {
  position: absolute;
  left: var(--gutter);
  bottom: 32px;
  z-index: 2;
  max-width: min(520px, calc(100% - 32px));
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.72);
  color: var(--text-soft);
  font: 400 14px/1.45 var(--ui);
}
.makers-error:empty { display: none; }

@media (max-width: 900px) {
  .makers-copy { grid-template-columns: minmax(0, 1fr); padding-top: clamp(28px, 6vw, 56px); }
  .makers-title { font-size: 4.6vw; }
  .makers-body + .makers-body { margin-top: 1em; }
}

@media (max-width: 480px) {
  .makers-copy { width: calc(100% - 32px); padding-top: 32px; }
  .makers-title { font-size: 7vw; }
  .makers-title .rer-line { row-gap: 0.36em; }
  .makers-body { margin-top: 28px; font-size: 15px; line-height: 1.45; }
}