/* Container widths, section rhythm, grid. No component styling here. */

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

.editorial {
  max-width: var(--layout-editorial-max);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

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

.section {
  padding-block: var(--space-section-mobile);
}
@media (min-width: 641px) {
  .section { padding-block: var(--space-section-tablet); }
}
@media (min-width: 1024px) {
  .section { padding-block: var(--space-section); }
}

.section--page { background: var(--surface-page); }
.section--card { background: var(--surface-card); }
.section--warm { background: var(--surface-card-warm); }

.main-offset {
  padding-top: var(--layout-nav-height);
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: var(--space-xl);
  margin-top: var(--space-xxl);
}

@media (max-width: 640px) {
  html { overflow-x: hidden; }
}

/* ---------- Typographic and layout utilities ---------- */

.stack {
  display: grid;
  gap: var(--space-md);
}

.text-muted { color: var(--text-muted); }

.body-strong {
  font-weight: var(--type-body-strong-weight);
  color: var(--text-body);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.heading-lg {
  font-family: var(--font-sans-structure);
  font-size: var(--type-heading-lg-size);
  font-weight: var(--type-heading-lg-weight);
  line-height: var(--type-heading-lg-leading);
  letter-spacing: var(--type-heading-lg-tracking);
}
@media (max-width: 640px) {
  .heading-lg { font-size: var(--type-heading-lg-size-mobile); }
}

.accent-serif {
  font-family: var(--font-serif-display);
  font-size: var(--type-accent-size);
  font-weight: var(--type-accent-weight);
  line-height: var(--type-accent-leading);
  letter-spacing: var(--type-accent-tracking);
  color: var(--ink);
}
@media (max-width: 640px) {
  .accent-serif { font-size: var(--type-accent-size-mobile); }
}

.wordmark-lg {
  font-family: var(--font-serif-display);
  font-size: var(--type-accent-size);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
}
@media (max-width: 640px) {
  .wordmark-lg { font-size: var(--type-accent-size-mobile); }
}

.error-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-page);
  text-align: center;
  padding: var(--space-lg);
}