:root {
  --cols: 12;
  --bl: 8px;            /* baseline unit */
  --lh: 24px;           /* leading = 3 x baseline */
  --gutter: 24px;
  --margin: 72px;
  --pad: 96px;          /* spread top/bottom pad */
  --maxw: 1296px;

  --accent: #e4002b;    /* Swiss Red */
}

/* ---- spread + grid scaffold ---- */
.spread {
  position: relative;
  width: 100%;
}

.wrap {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--pad) var(--margin);
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  column-gap: var(--gutter);
  row-gap: var(--lh);
}

/* Subgrid bands so children snap to the exact same column lines */
.band {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  column-gap: var(--gutter);
  row-gap: var(--lh);
  align-items: start;
}

@supports not (grid-template-columns: subgrid) {
  .band {
    grid-template-columns: repeat(var(--cols), 1fr);
  }
}

/* Swiss typography rhythm locks */
.swiss-headline {
  font-family: "Outfit", "Inter", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin-top: 0;
  line-height: calc(var(--bl) * 10); /* 80px */
}

.swiss-mono {
  font-family: "Space Mono", "JetBrains Mono", monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
}