/* =========================
   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-600  { max-width: 600px; }
.maxw-800  { max-width: 800px; }
.maxw-900  { max-width: 900px; }
.maxw-1024 { max-width: 1024px; }

/* Font sizes */
.fs-05 { font-size: .5rem; }
.fs-075 { font-size: .75rem; }
.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; }
.text-right { text-align: right; }

/* 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; }

/* Base wrapper: shrink-wrap by default */
.image-wrapper {
  position: relative;         /* keeps options open; not required for below-caption */
  display: inline-block;      /* width = image width */
  --attrib-gap: 0.75rem;      /* easy knob for the gap */
}

.image-wrapper > img {
  display: block;
  width: auto;                /* true intrinsic width */
  max-width: 100%;            /* still scales down on narrow screens */
  height: auto;
}

/* Attribution below, right-aligned, never overlay */
.image-wrapper > .attribution {
  position: static;           /* take it out of absolute positioning */
  display: block;
  margin-top: var(--attrib-gap);
  text-align: right;          /* pin text to the image’s right edge */
  font-size: 0.85em;
  padding: 0;                 /* no overlay padding needed */
}

/* Optional mode: fill the parent width (image and caption both) */
.image-wrapper.fill {
  display: block;
  width: 100%;
}

.image-wrapper.fill > img {
  width: 100%;
}

/* Optional mode: harden shrink-wrap if you have a global img { width:100% } */
.image-wrapper.shrink > img {
  width: auto !important;
  max-width: 100%;
}

/* 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; }
}