/* =========================================================
   LAYOUT — ancho, grid, secciones con reglas
   ========================================================= */
.shell {
  width: min(1200px, calc(100% - 3rem));
  margin-inline: auto;
}
.shell-narrow {
  width: min(720px, calc(100% - 3rem));
  margin-inline: auto;
}

@media (max-width: 720px) {
  .shell, .shell-narrow { width: calc(100% - 2rem); }
}

/* Reglas horizontales */
.rule { height: 1px; background: var(--rule); border: 0; }
.rule--accent { background: var(--accent); }

/* Sección estándar */
.section {
  padding-block: var(--s-9);
  border-top: 1px solid var(--rule);
}
.section:first-of-type { border-top: 0; }

/* Cabecera de sección: [meta] [contenido] */
.section-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  margin-bottom: var(--s-7);
}
@media (min-width: 900px) {
  .section-head {
    grid-template-columns: 200px 1fr;
    gap: var(--s-6);
    align-items: start;
  }
}

.section-head-content {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.section-meta {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 0.4em;
}

.section-title {
  font-family: var(--serif);
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
  max-width: 20ch;
}

.section-title em {
  font-style: normal;
  color: var(--accent);
}

.section-lede {
  margin-top: var(--s-4);
  max-width: 58ch;
  color: var(--muted);
  font-size: var(--fs-base);
}