/* layout.css — Container, section, grid */

.outer {
  width: 100%;
  max-width: var(--max-outer);
  margin-inline: auto;
  padding-inline: var(--side-pad);
}

.content { max-width: var(--max-content); }

.section {
  padding-block: var(--section-pad);
  position: relative;
}

.section--bleed { padding-inline: 0; }

.section--alt {
  background: var(--surface-1);
  border-block: 1px solid var(--paper-faint);
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

.span-5  { grid-column: span 5; }
.span-6  { grid-column: span 6; }
.span-7  { grid-column: span 7; }
.span-8  { grid-column: span 8; }
.span-12 { grid-column: span 12; }
.start-2 { grid-column-start: 2; }
.start-6 { grid-column-start: 6; }

@media (max-width: 768px) {
  .grid-12 { grid-template-columns: 1fr; }
  .span-5, .span-6, .span-7, .span-8 { grid-column: span 1; }
  .start-2, .start-6 { grid-column-start: 1; }
}

.hr {
  border: none;
  border-top: 1px solid var(--paper-faint);
  margin-block: var(--sp-24);
}

.section-idx {
  position: absolute;
  top: var(--sp-12);
  right: var(--side-pad);
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  color: var(--paper-dim);
  letter-spacing: 0.1em;
}