/*
 * chapter-home.css — front page background composition
 *
 * Per Q's request: a portrait of her sits behind the front-page
 * content. The source image (IMG_8311.png in /supplied/) had black
 * letterbox bars from her Snapseed edit; we cropped those off and
 * saved as bg-front.jpg, which preserves a soft fade-in at top and
 * skin-tone transition at the bottom for natural edges.
 * The image is constrained to the content column width so the
 * composition stays intact regardless of viewport size.
 */

/* Inherit the site's warm cream --bg (defined in site.css). Don't
   override it; the page should stay light off-white as before. */

/* Portrait section: wraps the masthead and the bio. The wrapper's
   aspect ratio matches the image's so the image fills exactly,
   no cropping, no stretching, no gradients, no overlays. Just
   the face as background. */

[data-chapter="home"] .portrait-section {
  aspect-ratio: 1284 / 1475;
  /* Stacked layers: a translucent cream wash sits on top of the
     portrait JPG to lift readability of the bio prose without
     touching the source image. Raise the alpha for a brighter
     (washier) image; lower it for more chroma. */
  background-image:
    linear-gradient(rgba(247, 245, 239, 0.15), rgba(247, 245, 239, 0.15)),
    url('/assets/img/bg-front.jpg');
  background-size: cover;
  background-position: 70% center;
  background-repeat: no-repeat;
  max-width: var(--measure-wide);
  margin: 0 auto;
}

/* Bio typography compressed so the text fits inside the image
   bounds; contrast/saturation adjustments on the image come later. */
[data-chapter="home"] .prose {
  max-width: 36rem;
  font-size: 1rem;
  line-height: 1.45;
}

[data-chapter="home"] .prose p {
  margin-bottom: 0.7em;
}