/* The numbers band (sections.js). Uses the tokens from styles.css only. */

/* numbers band: full bleed, the dither field shows only inside the dot-matrix numerals */
.band {
  margin: 112px 0 0; padding: 72px 24px 68px; border-block: 1px solid var(--line);
  background: radial-gradient(60% 80% at 50% 55%, rgba(58, 10, 36, 0.5), transparent 70%), radial-gradient(40% 50% at 78% 100%, rgba(255, 182, 114, 0.08), transparent 70%), var(--page);
}
.band-h { display: grid; justify-items: center; text-align: center; margin-bottom: 48px; }
.band-h h2 { font: 600 clamp(30px, 4.4vw, 52px)/1 var(--font); letter-spacing: -0.055em; text-wrap: balance; }
.tape { display: inline-block; line-height: 0.98; padding: 0.01em 0.16em 0.1em 0.07em; margin-left: -0.07em; background: #000; color: var(--magenta); }
.nums { --dot: 24px; position: relative; display: flex; justify-content: center; align-items: flex-start; gap: 56px; max-width: 1112px; margin: 0 auto; }
.nums.stacked { display: grid; justify-content: center; gap: 40px; }
.nums.stacked .sep { display: none; }
.nums-cv { position: absolute; left: 0; top: 0; display: block; image-rendering: pixelated; }
/* 1px gaps cut every 4px shader cell into a square */
.nums-cv, .sep {
  -webkit-mask: linear-gradient(90deg, transparent 1px, #000 0) 0 0 / 4px 4px, linear-gradient(transparent 1px, #000 0) 0 0 / 4px 4px;
  -webkit-mask-composite: source-in;
  mask: linear-gradient(90deg, transparent 1px, #000 0) 0 0 / 4px 4px, linear-gradient(transparent 1px, #000 0) 0 0 / 4px 4px;
  mask-composite: intersect;
}
.fig { position: relative; display: grid; gap: 20px; margin: 0; }
.num { width: calc((var(--d) * 6 - 1) * var(--dot)); height: calc(7 * var(--dot)); margin: 0; }
.fig figcaption { display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid var(--line); font: 400 11.5px/1.45 var(--mono); color: var(--ink-2); }
.fig figcaption b { font-weight: 500; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
.fig figcaption b::before { content: ''; display: inline-block; width: 8px; height: 8px; margin: 0 8px 1px 0; background: var(--magenta); }
/* a lit dot between the numerals: one dot minus its gap */
/* no dots between the numerals: they read as one long number with decimal points */
.sep { display: none; flex: none; width: calc(var(--dot) - 4px); height: calc(var(--dot) - 4px); margin-top: calc(3 * var(--dot)); background: var(--magenta); }

@media (max-width: 720px) {
  .band { margin-top: 72px; padding: 56px 16px 52px; }
}