/* ============================================================
   23 — Prose
   Long-form text pages. The template's other sections are all composed layouts, and
   base.css resets every margin to 0, so a page of bare <p>/<ul> renders as one
   unreadable block. This section is the minimum needed for the plain content pages a
   client site almost always has and the six master pages do not cover: privacy policy,
   careers, staff bios, city landing pages, thank-you pages.

   Usage:
     <section class="sec-23-prose section on-bone">
       <div class="sec-23-prose__wrap container">
         <h2 class="sec-23-prose__h">...</h2>
         <p>...</p>
         <ul class="sec-23-prose__list"><li>...</li></ul>
       </div>
     </section>
   ============================================================ */

.sec-23-prose__wrap {
  /* This element also carries .container, which produces the site's gutter via
     width:min(--container, 100% - 2.5rem) + margin-inline:auto. Narrowing THIS element to
     a 68ch measure makes the auto-centring indent the whole column inward; overriding
     margin-inline to 0 to compensate then jams it against the viewport edge and lets the
     chapter rail print through the copy. Let .container own the gutter, and cap the
     MEASURE on the children instead. */
  max-width: none;
}

.sec-23-prose__wrap > * {
  max-width: 68ch;
}

/* staff-bio portrait: sits above the copy on mobile, floats beside it on desktop */
.sec-23-prose__portrait {
  margin-bottom: 1.6rem;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  max-width: 260px;
}

.sec-23-prose__portrait img {
  width: 100%;
  height: auto;
}

@media (min-width: 720px) {
  .sec-23-prose__portrait {
    float: right;
    width: 260px;
    margin-left: 2rem;
    margin-bottom: 1.25rem;
  }
}

.sec-23-prose p,
.sec-23-prose li {
  color: var(--text-on-bone);
  font-size: 1.02rem;
  line-height: 1.75;
}

.sec-23-prose p + p {
  margin-top: 1.1rem;
}

.sec-23-prose__h {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  letter-spacing: -0.02em;
  margin-top: 2.8rem;
  margin-bottom: 0.85rem;
}

.sec-23-prose__h:first-child {
  margin-top: 0;
}

.sec-23-prose__list {
  margin-top: 1.1rem;
  display: grid;
  gap: 0.6rem;
  padding-left: 1.1rem;
}

.sec-23-prose__list li {
  list-style: disc;
  padding-left: 0.35rem;
}

.sec-23-prose__list li::marker {
  color: var(--accent);
}

.sec-23-prose a {
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 200ms var(--ease-out);
}

.sec-23-prose a:hover,
.sec-23-prose a:focus-visible {
  color: var(--accent);
}

@media (max-width: 640px) {
  .sec-23-prose p,
  .sec-23-prose li {
    font-size: 0.98rem;
  }
  .sec-23-prose__h {
    margin-top: 2.1rem;
  }
}

/* Insurance page body (the section after the plans section): fixed vertical rhythm.
   Block padding only; the side gutter stays on the inner .container. */
.sec-23-prose--insurance {
  padding-block: 60px;
}

/* Site rule: the second section on a page (the one straight after the page
   header) gets at least 60px top and bottom. Prose has no block padding of its
   own, so here that is exactly 60px. Side gutter stays on the inner .container. */
.sec-00-inthero + .sec-23-prose {
  padding-block: 60px;
}