/* ==========================================================================
   Utilities: ghost numbers, grid overlay, noise texture, dividers
   ========================================================================== */

.ghost-number {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-ghost);
  line-height: 1;
  color: var(--on-surface);
  opacity: 0.05;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

[data-surface="dark"] .ghost-number {
  opacity: 0.07;
}

.grid-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: linear-gradient(to right, var(--hairline) 1px, transparent 1px);
  background-size: clamp(80px, 8vw, 140px) 100%;
  mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
}

.noise-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.hr {
  border: 0;
  border-top: 1px solid var(--hairline);
}

.section-head {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.section-head h2 {
  font-size: var(--fs-h2);
  max-width: 14ch;
}

.section-head .section-note {
  max-width: 34ch;
  color: var(--on-surface-soft);
  font-size: var(--fs-lead);
  padding-bottom: 0.3em;
}

@media (max-width: 720px) {
  .grid-overlay {
    background-size: 60px 100%;
  }
}