/* ==========================================================================
   TALEA — Layout
   A 12-column grid, generous margins, and nothing else asking for attention.
   ========================================================================== */

html, body { overflow-x: hidden; }

body {
  background: var(--ivory);
}

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--margin);
}

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

/* column span utilities, generated for the 12-col grid */
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

.start-1 { grid-column-start: 1; }
.start-2 { grid-column-start: 2; }
.start-3 { grid-column-start: 3; }
.start-4 { grid-column-start: 4; }
.start-5 { grid-column-start: 5; }
.start-6 { grid-column-start: 6; }
.start-7 { grid-column-start: 7; }
.start-8 { grid-column-start: 8; }

section {
  position: relative;
}

.section {
  padding-block: var(--space-7);
}

.section--tight { padding-block: var(--space-5); }
.section--loose { padding-block: var(--space-8); }

[data-ground="dark"] {
  background: var(--charcoal);
  color: var(--ivory);
}

[data-ground="light"] {
  background: var(--ivory);
  color: var(--ink);
}

[data-ground="dim"] {
  background: var(--ivory-dim);
  color: var(--ink);
}

.stack > * + * { margin-top: var(--space-3); }
.stack-sm > * + * { margin-top: var(--space-2); }
.stack-lg > * + * { margin-top: var(--space-5); }

.measure { max-width: var(--text-max); }

.hairline {
  border: none;
  border-top: 1px solid var(--line);
  width: 100%;
}

[data-ground="dark"] .hairline { border-top-color: var(--line-on-dark); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -60px;
  background: var(--charcoal);
  color: var(--ivory);
  padding: var(--space-2) var(--space-3);
  z-index: 200;
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: var(--space-2); }