/* =========================
   utils.css (lean + decisive)
   ========================= */

/* Layout / sizing */
.center { margin-inline: auto; display: block; }
.mx-auto { margin-left: auto; margin-right: auto; }
.w-100 { width: 100%; }
.w-75  { width: 75%; }

.maxw-800  { max-width: 800px; }
.maxw-900  { max-width: 900px; }
.maxw-1024 { max-width: 1024px; }

/* Font sizes */
.fs-10 { font-size: 1rem; }
.fs-125 { font-size: 1.25rem; }
.fs-15 { font-size: 1.5rem; }

.fw-bold { font-weight: bold; }
.fw-400 { font-weight: 400; }
.fw-600 { font-weight: 600; }
.fw-800 { font-weight: 800; }

.lh-1 { line-height: 1; }
.lh-125 { line-height: 1.25; }
.lh-15 { line-height: 1.5; }
.lh-2 { line-height: 2; }

/* Text alignment */
.text-center { text-align: center; }
.text-left   { text-align: left; }

/* Display */
.block { display: block; }
.inline-block { display: inline-block; }

/* Spacing */
.mx-10p { margin-inline: 10%; }
.my-2   { margin-block: 0.5rem; }
.pl-4   { padding-left: 1rem; }
.pl-6   { padding-left: 1.5rem; }
.mt-2 { margin-top: 0.5rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mt-4 { margin-top: 1.25rem; }
.mb-4 { margin-bottom: 1.25rem; }
.mt-6 { margin-top: 2rem; }
.mb-6 { margin-bottom: 2rem; }

/* Typography helpers */
.prose p { margin: 0 0 0.75rem; }
.lead { font-size: 1.125rem; line-height: 1.6; }
.note { color: #990000; }
.red { color: #ff0000; }
.green { color: #00ff00; }
.blue { color: #0000ff; }
.yellow { color: #ffff00; }
.orange { color: #ff6600; }
.purple { color: #6600ff; }
.teal { color: #00ffff; }

/* Images */
.h-auto { height: auto; }

/* Lists */
.list-disc { list-style-type: disc; }
.list-decimal { list-style-type: decimal; }
.list-none { list-style: none; padding-inline-start: 0; }
.list-inside { list-style-position: inside; }
.list-outside { list-style-position: outside; }
ul.clean, ol.clean { margin-block: 0.5rem; }
.centered-block { display: inline-block; text-align: left; }
:where(.page-content) li::marker { color: currentColor; }

/* Separators */
.rule { border: 0; border-top: 1px solid #ccc; margin: 1.5rem 0 0; }

/* Sectioned layout */
.sections { display: flex; flex-direction: column; gap: 3rem; }
.section  {
  width: 75%;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* HARD RESET: left-align anything inside the sections, regardless of centered parents */
.page-content .sections,
.page-content .sections .section,
.page-content .sections .section > *,
.page-content .sections .section *:not(img):not(svg) {
  text-align: left !important;
}

/* Media inside sections */
.section figure { margin: 0 0 0.75rem; }
.section img { display: block; max-width: 100%; height: auto; }

/* Responsive */
@media (max-width: 600px) {
  .w-75, .section { width: 100%; }
  .lead { font-size: 1.0625rem; }
}