/* layout.css - Structural grids, constraints, and separators */

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-24);
  position: relative;
}

/* 
  The grid is the identity. We use narrow gutters and strong column edges.
*/
.grid-layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-16);
}

.grid-cols-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-32);
}

/* Hairline Rules */
.rule-horizontal {
  height: var(--border-width-hairline);
  background-color: var(--border-hairline);
  width: 100%;
}

.rule-vertical {
  width: var(--border-width-hairline);
  background-color: var(--border-hairline);
  height: 100%;
}

.section {
  padding: var(--space-96) 0;
  position: relative;
}

/* Asymmetric layouts */
.asym-left {
  grid-column: 1 / 6;
}

.asym-right {
  grid-column: 7 / -1;
}

/* Notational elements padding */
.pad-top-4 { padding-top: var(--space-4); }
.pad-bottom-4 { padding-bottom: var(--space-4); }
.margin-top-32 { margin-top: var(--space-32); }
.margin-top-64 { margin-top: var(--space-64); }
.margin-bottom-32 { margin-bottom: var(--space-32); }
.margin-bottom-16 { margin-bottom: var(--space-16); }

/* Structural Dark Section */
.section-dark {
  background-color: var(--surface-dark);
  color: var(--text-inverted);
}

.section-dark .rule-horizontal {
  background-color: var(--border-dark);
}