/* ============================================================
   Layout primitives — page shell + section frame
   Component-specific grids live in components.css.
   ============================================================ */

.shell {
  max-width: var(--container-full);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* ============ section chrome ============ */

.section { padding: 112px var(--space-6); position: relative; }
.section-head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-9);
  align-items: end;
}
.section-num {
  grid-column: span 1;
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-mute);
}
.section-eye {
  grid-column: span 2;
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-dim);
}
.section-eye::before {
  content: ''; display: inline-block; width: var(--space-5); height: 1px;
  background: var(--hot); vertical-align: middle; margin-right: var(--space-3);
}
.section-title {
  grid-column: span 9;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--text-5xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}
.section-title .it { font-weight: var(--fw-regular); }
.section-title .stk { -webkit-text-stroke: 1px var(--fg); color: transparent; }