/* ============================================================
   Lucca — botanical accents (shared across landing pages)

   Faint hand-drawn sprigs placed ONLY in the quiet margins between
   sections — never over content. Register carries meaning:
     oat = presence · lavender = reflection · olive = continuity
   Whispers only (low opacity), and retired on narrower screens
   where the outer gutters close and they'd collide with content.

   REUSABLE VOCABULARY — compose per placement:
     <img class="landing-botanical botanical--br botanical--md"
          src="assets/botanical-oat.svg" alt="" aria-hidden="true">
   Corner:  --br (bottom-right) · --bl (bottom-left)
   Size:    --sm (72px) · --md (92px) · --lg (108px)
   Tone:    --faint (opacity 0.42, for footer sign-offs)
   The host <section>/<footer> becomes the positioning context
   automatically via :has() — no extra class needed. (Add the
   explicit .has-botanical class if you ever need to force it.)
   ============================================================ */

.landing-botanical {
  position: absolute;
  height: auto;
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
}

/* Any section/footer carrying an accent becomes its positioning context. */
.has-botanical,
section:has(> .landing-botanical),
footer:has(> .landing-botanical) {
  position: relative;
}

/* Corner placement */
.botanical--br { right: 2.5%; bottom: 40px; }
.botanical--bl { left: 2.5%;  bottom: 40px; }

/* Size */
.botanical--sm { width: 72px; }
.botanical--md { width: 92px; }
.botanical--lg { width: 108px; }

/* Extra-faint tone — footer sign-offs and other especially quiet spots */
.botanical--faint { opacity: 0.42; }

/* The outer gutters close below ~1200px; retire the accents rather than
   let them drift onto content. */
@media (max-width: 1200px) {
  .landing-botanical { display: none; }
}